/* ==========================================================================    起源岛恐龙乐园 · 设计系统    配色沿用小程序工业风主题：黑棕底、黄铜金强调、暗红警示、米金文字。    视觉母题：野外考察档案 —— 标本框角、刻度尺、警示条纹、编号标签、方格纸。
   本文件只放令牌、基础排版与全站公共组件；单页版式在 pages.css。    ========================================================================== */  /* ---------- 1. 令牌 ---------- */
:root {   color-scheme: dark;    /* 背景与表面：三级明度，用来做层级而不是靠阴影堆叠 */
  --paper: #0e0d0b;   --surface: #151210;   --surface-2: #1d1815;   --black: #080706;
   /* 文字：三级 */   --ink: #f2e6c8;   --muted: #bdb097;
  --faint: #8f8168;    /* 线条：边框实线 / 分隔线 / 极淡网格 */   --border: #6d552c;
  --line: rgba(109, 85, 44, .42);   --line-strong: rgba(109, 85, 44, .72);   --grid-line: rgba(109, 85, 44, .13); 
  /* 强调色：全站唯一强调色，黄铜金 */   --accent: #d5ab49;   --accent-hover: #e6c464;   --accent-soft: rgba(213, 171, 73, .12);
  --accent-line: rgba(213, 171, 73, .38);    /* 警示色：只用于警示条纹、错误态与"尚未确认"标记，不做主按钮底色。      --red 需要同时当图形与文字用，所以提到 4.5:1 以上；
     --red-line 只做色块与条纹，保留更暗的一档。 */   --red: #d05a50;   --red-line: #b23a30;   --red-ink: #f0b8ae;
   /* 按钮专用：深色模式下高对比组合 */   --btn-ink: #14100d; 
  --hazard: repeating-linear-gradient(135deg, var(--accent) 0 14px, var(--black) 14px 28px);    /* 形状锁：全站单一圆角；正圆只给图标按钮与序号徽章 */   --radius: 4px;
  --pill: 999px;    /* 阴影锁：暖色阴影 + 硬边偏移，工业风不用柔光 */   --shadow-sm: 0 1px 2px rgba(8, 7, 6, .6);
  --shadow-md: 0 16px 40px rgba(8, 7, 6, .55);   --shadow-lg: 0 32px 90px rgba(8, 7, 6, .7);   --hard-shadow: 5px 5px 0 var(--black);   --hard-shadow-sm: 3px 3px 0 var(--black);
   /* 版面 */   --page-width: 1240px;   --gutter: 48px;
  --header-height: 76px;   --section-py: 116px;    /* 字阶：全部用 clamp 做流体缩放，无断点跳变 */
  --step-display: clamp(46px, 6.6vw, 100px);   --step-h1: clamp(40px, 5.1vw, 76px);   --step-h2: clamp(30px, 3.3vw, 48px);   --step-h3: clamp(20px, 1.7vw, 25px);
  --step-h4: 18px;   --step-lead: clamp(16px, 1.25vw, 19px);   --step-body: 16px;   --step-sm: 14px;
  --step-micro: 12px;    --font-sans: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;   --font-mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", "Sarasa Mono SC", Consolas, "Roboto Mono", monospace;
   --ease-out: cubic-bezier(.2, .7, .2, 1);   --ease-in-out: cubic-bezier(.6, 0, .3, 1);   --dur-fast: .18s;
  --dur: .28s;   --dur-slow: .75s; } 
/* ---------- 2. 基础 ---------- */ *, *::before, *::after { box-sizing: border-box; }  html {
  scroll-behavior: smooth;   -webkit-text-size-adjust: 100%;   text-underline-offset: 3px; }
 body {   margin: 0;   min-height: 100svh;
  background: var(--paper);   color: var(--ink);   font-family: var(--font-sans);   font-size: var(--step-body);
  line-height: 1.75;   font-weight: 400;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;   overflow-x: hidden; } 
/* 纸张颗粒：全站统一一层噪点，压掉纯数字色的塑料感 */ body::before {   content: "";   position: fixed;
  inset: 0;   z-index: 200;   pointer-events: none;   opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }  button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, summary, label { -webkit-tap-highlight-color: transparent; } button, a { touch-action: manipulation; } button { cursor: pointer; border: 0; background: none; padding: 0; } a { color: inherit; text-decoration: none; }
img, svg, picture, video { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, h5, p, ul, ol, dl, dd, dt, figure, blockquote, fieldset { margin: 0; } ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; } h1, h2, h3, h4 { line-height: 1.28; font-weight: 800; text-wrap: balance; letter-spacing: .01em; } p { text-wrap: pretty; } [hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }  ::selection { background: var(--accent); color: var(--black); } 
/* 焦点环：全站可见 */ :focus-visible {   outline: 2px solid var(--accent);   outline-offset: 3px;
  border-radius: 2px; }  /* 锚点落位要避开吸顶头部 */
[id] { scroll-margin-top: calc(var(--header-height) + 28px); }  /* ---------- 3. 布局骨架 ---------- */ .page-width { width: min(var(--page-width), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.section-space { padding-block: var(--section-py); } .section-space-sm { padding-block: 72px; } .section-band { background: var(--surface); border-block: 1px solid var(--line); } .section-band-grid {
  background: var(--surface);   border-block: 1px solid var(--line);   background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);   background-size: 64px 64px;
  background-position: -1px -1px; } main { min-height: 55svh; } .visually-hidden {
  position: absolute !important;   width: 1px; height: 1px;   overflow: hidden;   clip: rect(0 0 0 0);
  clip-path: inset(50%);   white-space: nowrap; } .skip-link {
  position: fixed;   top: 10px; left: 10px;   z-index: 300;   padding: 10px 18px;
  background: var(--accent);   color: var(--black);   font-weight: 700;   border-radius: var(--radius);
  transform: translateY(-240%);   transition: transform var(--dur) var(--ease-out); } .skip-link:focus { transform: translateY(0); }
 /* ---------- 4. 排版元素 ---------- */ .kicker, .eyebrow, .category, .label, .folio {   font-family: var(--font-mono);
  font-size: var(--step-micro);   font-weight: 600;   letter-spacing: .16em;   text-transform: uppercase;
  color: var(--accent); } .kicker { display: inline-flex; align-items: center; gap: 14px; letter-spacing: .2em; } .small-rule { width: 30px; height: 1px; background: currentColor; flex-shrink: 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; } .category { display: block; margin-bottom: 10px; letter-spacing: .12em; } .muted { display: block; margin-top: 8px; color: var(--muted); font-size: var(--step-sm); font-weight: 400; line-height: 1.7; }
.mono { font-family: var(--font-mono); } .card-title { display: block; font-size: var(--step-h3); } .note {   display: flex;
  gap: 10px;   margin-top: 28px;   color: var(--faint);   font-size: var(--step-micro);
  line-height: 1.7;   max-width: 62em; } .note::before { content: "※"; color: var(--accent); flex-shrink: 0; }
.text-link {   display: inline-flex;   align-items: center;   gap: 8px;
  min-height: 44px;   color: var(--accent);   font-size: var(--step-sm);   font-weight: 700;
  border-bottom: 1px solid transparent;   transition: border-color var(--dur-fast), gap var(--dur-fast), color var(--dur-fast); } .text-link:hover { border-bottom-color: currentColor; gap: 12px; color: var(--accent-hover); }
.text-link .arrow { font-weight: 400; }  /* 章节抬头：竖排，不做"左大标题 + 右小解释"的分栏式页头 */ .section-heading { margin-bottom: 56px; }
.section-heading.is-spaced { margin-top: 88px; } .section-heading h2 { font-size: var(--step-h2); } .section-heading > p:not(.eyebrow) { margin-top: 18px; color: var(--muted); max-width: 46em; font-size: var(--step-lead); } .section-heading.is-center { text-align: center; }
.section-heading.is-center .eyebrow { justify-content: center; } .section-heading.is-center > p:not(.eyebrow) { margin-inline: auto; }  /* ---------- 5. 头部 ---------- */
.site-header {   position: sticky;   top: 0;   z-index: 100;
  background: rgba(14, 13, 11, .8);   backdrop-filter: blur(16px) saturate(1.3);   -webkit-backdrop-filter: blur(16px) saturate(1.3);   border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s; } .site-header.is-scrolled, .site-header.menu-open {
  border-bottom-color: var(--line);   background: rgba(14, 13, 11, .95); } .header-inner {
  width: min(1440px, calc(100% - 64px));   min-height: var(--header-height);   margin-inline: auto;   display: flex;
  align-items: center;   justify-content: space-between;   gap: 24px; }
/* 阅读进度：贴在头部下沿 */ .header-progress {   position: absolute;   left: 0; right: 0; bottom: -1px;
  height: 2px;   background: var(--accent);   transform: scaleX(0);   transform-origin: left center;
  opacity: 0;   transition: opacity .3s; } .site-header.is-scrolled .header-progress { opacity: 1; }
 /* 品牌 */ .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand-logo {
  width: auto;   height: 42px;   flex-shrink: 0;   object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55)); } .brand-name {   display: flex;
  flex-direction: column;   font-size: 21px;   font-weight: 800;   letter-spacing: .14em;
  line-height: 1.2;   color: var(--accent); } .brand-name > span {
  font-family: var(--font-mono);   font-size: 10px;   letter-spacing: .24em;   font-weight: 600;
  color: var(--muted); } .brand-divider { width: 1px; height: 28px; background: var(--line-strong); margin-inline: 4px; } .brand-description { font-size: var(--step-sm); letter-spacing: .2em; color: var(--ink); }
 /* 桌面导航：单行 */ .desktop-nav { display: flex; align-items: center; gap: 34px; height: var(--header-height); font-size: 15px; } .desktop-nav a {
  position: relative;   display: flex;   align-items: center;   height: 100%;
  white-space: nowrap;   color: var(--muted);   transition: color var(--dur-fast); }
.desktop-nav a::after {   content: "";   position: absolute;   left: 0; right: 0; bottom: 20px;
  height: 2px;   background: var(--accent);   transform: scaleX(0);   transform-origin: left;
  transition: transform var(--dur) var(--ease-out); } .desktop-nav a:hover { color: var(--ink); } .desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); } .desktop-nav a[aria-current="page"] { color: var(--accent); }  .header-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle {   display: none;   width: 44px; height: 44px;   padding: 13px 10px;
  border: 1px solid var(--line-strong);   border-radius: var(--radius);   transition: border-color var(--dur-fast), background var(--dur-fast); }
.menu-toggle:hover { border-color: var(--accent); background: var(--accent-soft); } .menu-toggle span { display: block; height: 2px; background: var(--ink); transition: transform .25s var(--ease-out); } .menu-toggle span + span { margin-top: 8px; } .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-5px) rotate(-45deg); }  /* 手机导航 */ .mobile-nav { border-top: 1px solid var(--line); background: var(--paper); padding: 4px 24px 28px; }
.mobile-nav a {   display: flex;   justify-content: space-between;   align-items: center;
  padding: 15px 4px;   font-size: 19px;   font-weight: 700;   border-bottom: 1px solid var(--line);
} .mobile-nav a::after { content: "↗"; font-weight: 400; color: var(--faint); } .mobile-nav a[aria-current="page"] { color: var(--accent); } .mobile-nav a[aria-current="page"]::after { content: "●"; font-size: 10px; color: var(--accent); }
 /* ---------- 6. 按钮 ---------- */ .button {   position: relative;
  display: inline-flex;   align-items: center;   justify-content: center;   gap: 16px;
  min-height: 52px;   padding: 12px 26px;   border: 1px solid var(--accent);   border-radius: var(--radius);
  background: var(--accent);   color: var(--btn-ink);   font-size: 15px;   font-weight: 800;
  letter-spacing: .04em;   white-space: nowrap;   box-shadow: var(--hard-shadow-sm);   transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
} .button .arrow { font-size: 17px; font-weight: 400; transition: transform .25s var(--ease-out); } .button:hover {   background: var(--accent-hover);
  border-color: var(--accent-hover);   transform: translate(-2px, -2px);   box-shadow: var(--hard-shadow); }
.button:hover .arrow { transform: translate(2px, -2px); } .button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }  .button-small { min-height: 42px; padding: 8px 18px; gap: 10px; font-size: var(--step-sm); }
 /* 描边按钮：暗底金字，用于次级动作 */ .button-outline {   background: transparent;
  border-color: var(--accent-line);   color: var(--accent);   box-shadow: none; }
.button-outline:hover {   background: var(--accent);   border-color: var(--accent);   color: var(--btn-ink);
  box-shadow: var(--hard-shadow-sm); }  /* 幽灵按钮：压在图片上时用，带毛玻璃底衬保证对比度 */
.button-ghost {   background: rgba(8, 7, 6, .62);   border-color: rgba(242, 230, 200, .34);   color: var(--ink);
  box-shadow: none;   backdrop-filter: blur(10px);   -webkit-backdrop-filter: blur(10px); }
.button-ghost:hover {   background: rgba(8, 7, 6, .82);   border-color: var(--accent);   color: var(--accent);
  box-shadow: none; }  /* 警示按钮：暗红只做描边，文字用暖粉保证对比 */
.button-hazard {   background: transparent;   border-color: var(--red);   color: var(--red-ink);
  box-shadow: none; } .button-hazard:hover {   background: rgba(162, 48, 42, .22);
  border-color: #c4554c;   color: #ffd9d2;   box-shadow: none; }
 /* 圆形箭头：卡片右下角 */ .round-arrow {   display: grid;
  place-items: center;   width: 46px; height: 46px;   flex-shrink: 0;   border: 1px solid var(--line-strong);
  border-radius: 50%;   font-size: 17px;   color: var(--ink);   background: rgba(8, 7, 6, .35);
  transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out); }  /* ---------- 7. 图标与符号 ---------- */
/* 所有图标尺寸走 .symbol，禁止散落的字号 */ .symbol { font-size: 22px; line-height: 1; font-weight: 400; } .symbol-circle {   display: grid;
  place-items: center;   width: 44px; height: 44px;   flex-shrink: 0;   border: 1px solid var(--line-strong);
  border-radius: 50%;   color: var(--accent);   font-size: 20px;   line-height: 1;
  transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out); }  /* ---------- 8. 媒体与图片框 ---------- */
.media {   position: relative;   overflow: hidden;   border: 1px solid var(--line);
  border-radius: var(--radius);   background: var(--surface-2); } .media img { width: 100%; height: 100%; object-fit: cover; }
/* 亲子实拍的孩子位于画面右侧，窄比例媒体框需保留主体。 */ img[src*="/fossil"] { object-position: right center; } .media::after {   content: "";
  position: absolute;   inset: 0;   pointer-events: none;   background: linear-gradient(180deg, rgba(8, 7, 6, .16), transparent 34%);
} .media-4x3 { aspect-ratio: 4 / 3; } .media-16x11 { aspect-ratio: 16 / 11; } .media-5x4 { aspect-ratio: 5 / 4; }
 /* 园区实景照片统一轻度调色，与深色品牌界面保持协调 */ .photo { filter: contrast(1.06) saturate(.82) sepia(.12); } .photo-soft { filter: contrast(1.03) saturate(.72) sepia(.16); }
.photo-deep { filter: contrast(1.12) saturate(.7) sepia(.2) brightness(.86); } .media img.photo, .media img.photo-soft, .media img.photo-deep { transition: transform .9s var(--ease-out), filter .5s; }
.media:hover img { transform: scale(1.045); } .media:hover img.photo-soft { filter: contrast(1.06) saturate(.82) sepia(.1); }  /* 标本框角：档案母题，hover 时长角 */
.frame { position: relative; } .frame::before, .frame::after {   content: "";
  position: absolute;   z-index: 3;   width: 18px; height: 18px;   border: 0 solid var(--accent);
  pointer-events: none;   transition: width .35s var(--ease-out), height .35s var(--ease-out); } .frame::before { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.frame::after { right: 10px; bottom: 10px; border-right-width: 2px; border-bottom-width: 2px; } .frame:hover::before, .frame:hover::after { width: 32px; height: 32px; } 
/* 标签条：压在图片上的编号/坐标 */ .media-tag {   position: absolute;   z-index: 4;
  left: 14px; bottom: 14px;   padding: 4px 10px;   background: rgba(8, 7, 6, .82);   border: 1px solid var(--line-strong);
  border-radius: var(--radius);   font-family: var(--font-mono);   font-size: var(--step-micro);   letter-spacing: .12em;
  color: var(--accent);   backdrop-filter: blur(6px);   -webkit-backdrop-filter: blur(6px); }
 /* ---------- 9. 警示条纹带 ---------- */ .hazard-band { height: 6px; background: var(--hazard); } 
/* ---------- 10. 页头（内页） ---------- */ .page-heading {   position: relative;   padding-block: 36px 58px;
  border-bottom: 1px solid var(--line); } .page-heading::after {   content: "";
  position: absolute;   left: 0; right: 0; bottom: -1px;   height: 10px;   background: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 12px);
  -webkit-mask: linear-gradient(90deg, #000 30%, transparent);   mask: linear-gradient(90deg, #000 30%, transparent); } .breadcrumbs {
  display: flex;   flex-wrap: wrap;   align-items: center;   gap: 10px;
  margin-bottom: 36px;   font-size: var(--step-sm);   color: var(--faint); }
.breadcrumbs a { color: var(--muted); transition: color var(--dur-fast); } .breadcrumbs a:hover { color: var(--accent); } .breadcrumbs [aria-hidden="true"] { color: var(--border); } .page-heading h1 { font-size: var(--step-h1); letter-spacing: .01em; }
.page-heading > p:not(.eyebrow) {   margin-top: 18px;   max-width: 42em;   color: var(--muted);
  font-size: var(--step-lead); } .page-heading .eyebrow { margin-bottom: 22px; } .heading-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.heading-top .eyebrow { margin-bottom: 0; } .folio {   font-family: var(--font-mono);   font-size: var(--step-micro);
  font-weight: 600;   letter-spacing: .16em;   text-transform: uppercase;   color: var(--faint);
}  /* ---------- 11. 页脚 ---------- */ .site-footer {
  position: relative;   overflow: hidden;   border-top: 1px solid var(--line);   background: var(--black);
} .site-footer::before { content: ""; display: block; height: 6px; background: var(--hazard); }  .footer-top {
  display: grid;   grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, 1fr);   gap: 48px;   padding-block: 76px 56px;
} .footer-brand-block { display: grid; gap: 20px; align-content: start; } .footer-brand { align-items: flex-start; } .footer-brand .brand-logo { height: 52px; }
.footer-brand .brand-name { font-size: 24px; } .footer-tagline { color: var(--muted); max-width: 20em; font-size: var(--step-sm); } .footer-facts { display: grid; gap: 10px; margin-top: 4px; } .footer-facts div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; font-size: var(--step-micro); }
.footer-facts dt { color: var(--faint); font-family: var(--font-mono); letter-spacing: .1em; } .footer-facts dd { color: var(--muted); }  .footer-col h2 {
  font-family: var(--font-mono);   font-size: var(--step-micro);   font-weight: 600;   letter-spacing: .18em;
  color: var(--faint);   margin-bottom: 20px; } .footer-col ul { display: grid; gap: 4px; }
.footer-col a, .footer-col button {   display: inline-flex;   min-height: 38px;
  align-items: center;   gap: 8px;   color: var(--ink);   font-size: 15px;
  transition: color var(--dur-fast), gap var(--dur-fast); } .footer-col a:hover, .footer-col button:hover { color: var(--accent); gap: 12px; }
.footer-col a::after, .footer-col button::after { content: "↗"; font-size: 12px; color: var(--faint); transition: color var(--dur-fast); } .footer-col a:hover::after, .footer-col button:hover::after { color: var(--accent); }
 .footer-wordmark {   font-family: var(--font-mono);   font-weight: 800;
  font-size: clamp(48px, 12.5vw, 190px);   line-height: .88;   letter-spacing: -.02em;   white-space: nowrap;
  color: transparent;   -webkit-text-stroke: 1px rgba(213, 171, 73, .26);   text-align: center;   user-select: none;
  margin-bottom: -.14em; } .footer-bottom {   display: flex;
  flex-wrap: wrap;   align-items: center;   justify-content: space-between;   gap: 10px 24px;
  padding-block: 22px;   border-top: 1px solid var(--line);   font-size: var(--step-micro);   color: var(--faint);
}  /* ---------- 12. 弹窗与表单 ---------- */ .info-dialog {
  position: relative;   width: min(600px, calc(100% - 32px));   max-height: calc(100dvh - 48px);   overflow: auto;
  padding: 48px 44px 40px;   border: 1px solid var(--border);   border-radius: var(--radius);   background: var(--surface);
  color: var(--ink);   box-shadow: var(--shadow-lg), 8px 8px 0 var(--black); } .info-dialog::before {
  content: "";   position: absolute;   top: 0; left: 0; right: 0;   height: 6px;
  background: var(--hazard); } .info-dialog::backdrop { background: rgba(6, 5, 4, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .info-dialog h2 { font-size: 28px; margin-top: 8px; }
.dialog-description { margin-top: 16px; color: var(--muted); font-size: 15px; } .dialog-close {   position: absolute;   top: 16px; right: 14px;
  width: 44px; height: 44px;   font-size: 26px;   line-height: 1;   color: var(--muted);
  border-radius: var(--radius);   transition: color var(--dur-fast), background var(--dur-fast); } .dialog-close:hover { color: var(--ink); background: var(--accent-soft); }
.dialog-notes { display: grid; gap: 12px; margin-top: 18px; } .dialog-notes p {   padding-left: 16px;   border-left: 2px solid var(--border);
  color: var(--muted);   font-size: 15px; } .dialog-form-actions { display: grid; gap: 14px; }
 .booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; } .booking-form > :not(.form-field) { grid-column: 1 / -1; } .form-field { display: grid; gap: 8px; }
.form-field label { font-size: var(--step-sm); font-weight: 700; } .form-field input, .form-field select {   width: 100%;
  min-width: 0;   min-height: 50px;   padding: 10px 14px;   border: 1px solid var(--border);
  border-radius: var(--radius);   background: var(--paper);   color: var(--ink);   transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
} .form-field input:focus, .form-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-field input[aria-invalid="true"] { border-color: #d9705f; }
.form-note { color: var(--faint); font-size: var(--step-micro); text-align: center; line-height: 1.7; } .form-error { color: #ffc2b6; font-size: var(--step-sm); font-weight: 600; } .form-error:empty { display: none; } 
/* 行前计划卡 */ .plan-card {   border: 1px solid var(--border);   border-radius: var(--radius);
  background: var(--paper);   overflow: hidden;   animation: plan-in .45s var(--ease-out) both; }
.plan-head {   display: flex;   justify-content: space-between;   align-items: baseline;
  gap: 16px;   padding: 14px 18px;   background: var(--accent);   color: var(--black);
} .plan-code { font-family: var(--font-mono); font-size: var(--step-micro); letter-spacing: .16em; font-weight: 700; } .plan-title { font-weight: 800; } .plan-rows { padding: 6px 18px; }
.plan-row {   display: grid;   grid-template-columns: 88px 1fr;   gap: 12px;
  padding: 11px 0;   border-bottom: 1px dashed var(--line);   font-size: 15px; }
.plan-row:last-child { border-bottom: 0; } .plan-row dt { color: var(--faint); } .plan-row dd { font-weight: 600; } .plan-link { color: var(--accent); font-weight: 700; }
.plan-link:hover { text-decoration: underline; } .plan-tips { display: grid; gap: 8px; padding: 16px 18px 6px; border-top: 1px solid var(--line); font-size: var(--step-sm); color: var(--muted); } .plan-tips li { position: relative; padding-left: 22px; } .plan-tips li::before {
  content: "";   position: absolute;   left: 2px; top: .6em;   width: 10px; height: 6px;
  border-left: 2px solid var(--accent);   border-bottom: 2px solid var(--accent);   transform: rotate(-45deg); }
.plan-note { padding: 14px 18px 18px; font-size: var(--step-micro); color: var(--faint); }  .noscript-note {   padding: 14px 24px;
  background: var(--surface-2);   border-top: 1px solid var(--line);   color: var(--muted);   font-size: var(--step-sm);
  text-align: center; } /* 行前计划卡的挂载点：空的时候不占高度 */ .booking-result:not(:empty) { display: block; margin-top: 4px; }
body.dialog-open { overflow: hidden; }  /* ---------- 13. 动效 ---------- */ @keyframes plan-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(213, 171, 73, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(213, 171, 73, 0); } } @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes spin { to { transform: rotate(360deg); } } 
@media (prefers-reduced-motion: no-preference) {   .status-chip::before { animation: pulse 2.6s ease-out infinite; }    /* 滚动入场：只有加了 .js 才允许初始隐藏，避免无脚本时整页空白 */
  html.js .reveal { opacity: 0; transform: translateY(26px); }   html.js .reveal.is-in {     opacity: 1;     transform: none;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);     transition-delay: var(--reveal-delay, 0ms);   }   html.js .reveal-group > .reveal.is-in { --reveal-delay: calc(var(--reveal-index, 0) * 90ms); }
}  @media (prefers-reduced-motion: reduce) {   html { scroll-behavior: auto; }
  *, *::before, *::after {     animation-duration: .001ms !important;     animation-iteration-count: 1 !important;     transition-duration: .001ms !important;
    scroll-behavior: auto !important;   } } 
/* ---------- 14. 响应式 ---------- */ @media (max-width: 1240px) {   :root { --gutter: 40px; }   .desktop-nav { gap: 26px; }
  .brand-divider, .brand-description { display: none; } }  @media (max-width: 1023px) {
  :root { --header-height: 68px; --section-py: 88px; --gutter: 32px; }   .desktop-nav { display: none; }   .menu-toggle { display: block; }   .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand-block { grid-column: 1 / -1; }   .section-heading { margin-bottom: 44px; } } 
@media (max-width: 767px) {   :root { --gutter: 20px; --section-py: 66px; }   body { font-size: 15px; }   .header-inner { width: calc(100% - 32px); gap: 10px; }
  .brand { gap: 8px; }   .brand-name { font-size: 18px; }   .brand-name > span { font-size: 9px; letter-spacing: .18em; }   .brand-logo { height: 36px; }
  .header-actions { gap: 8px; }   .button { min-height: 48px; padding-inline: 20px; gap: 12px; }   .button-small { min-height: 40px; padding-inline: 13px; gap: 8px; font-size: 13px; }   .footer-top { grid-template-columns: 1fr; gap: 36px; padding-block: 56px 44px; }
  .footer-bottom { font-size: 11px; }   .page-heading { padding-block: 26px 44px; }   .page-heading .breadcrumbs { margin-bottom: 32px; }   .info-dialog { padding: 42px 22px 28px; }
  .booking-form { grid-template-columns: 1fr; }   .plan-row { grid-template-columns: 76px 1fr; font-size: var(--step-sm); }   .section-heading > p:not(.eyebrow) { font-size: var(--step-body); } }
 /* 窄视口（≤480px）：头部按当前字体度量约需 400px，不收紧会挤掉菜单按钮。    这里逐项压缩品牌区，保证"计划游玩 + 菜单"始终完整落在视口内。 */ @media (max-width: 480px) {
  .header-inner { width: calc(100% - 24px); gap: 6px; }   .brand { gap: 6px; }   .brand-logo { height: 30px; }   .brand-name { font-size: 15px; letter-spacing: .08em; }
  .brand-name > span { display: none; }   .button-small { padding-inline: 10px; gap: 6px; font-size: 12px; }   .header-actions { gap: 6px; } }
 @media (max-width: 379px) {   .brand-name { font-size: 14px; letter-spacing: .04em; }   .header-actions .button-small { padding-inline: 8px; }
  .header-actions .button-small .arrow { display: none; }   .menu-toggle { width: 40px; padding-inline: 8px; } }