/* ============================================================
   Compass 航海家 · 官网（滚动电影版）
   骨架参考：Keel（滚动刮擦+四段+收束画框+像素溶洞）×Nexeus（玻璃页脚）
   语言：D159 水彩画报 —— 色值全部继承 visual.md §2，禁新造
   ============================================================ */

@font-face {
  font-family: "Compass Song";
  src: url("fonts/compass-song.woff2") format("woff2");
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: "Compass Caslon";
  src: url("fonts/compass-caslon.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Compass Mono";
  src: url("fonts/compass-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* 色板（visual.md §2） */
  --ink: #1F3A56;            /* 深海蓝 */
  --ink-dim: rgba(31, 58, 86, .74);
  --ink-faint: rgba(31, 58, 86, .5);
  --cream: #F6F2EA;          /* 学院米白 */
  --paper-w: #FFFDF8;        /* 纸面白 */
  --gold: #D4AF7A;           /* 航海金 */
  --gold-light: #ECD9AE;     /* 浅金 */
  --gold-deep: #8A6A35;      /* 深金 */
  --mist: #A8C6C8;           /* 海雾蓝 */
  --sub: #8F8574;            /* 纸面次要文字 */
  --err: #B23A2C;            /* 功能红（仅表单错误） */

  /* 结构 */
  --pad: clamp(20px, 3.6vw, 56px);
  --rail: clamp(52px, 5.3vw, 108px);
  --bar: var(--rail);
  --line: rgba(31, 58, 86, .24);
  --line-soft: rgba(31, 58, 86, .13);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* 字体 */
  --serif: "Compass Song", "Songti SC", "Noto Serif SC", Georgia, serif;
  --display: "Compass Caslon", Georgia, serif;
  --mono: "Compass Mono", "Compass Song", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: auto;
  text-size-adjust: 100%;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--cream); }

img { user-select: none; }
button { font: inherit; color: inherit; }

.mono {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
}

.skip-link {
  position: fixed;
  top: -48px;
  left: 16px;
  z-index: 200;
  background: var(--cream);
  color: var(--ink);
  padding: 10px 14px;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 10px; }

/* ------------------------------------------------------------
   预载器
   ------------------------------------------------------------ */
#boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 1;
  visibility: visible;
  transition: opacity .9s var(--ease), visibility .9s;
}
#boot.done { opacity: 0; visibility: hidden; }
.boot-mark { opacity: .95; }
.boot-word {
  font-size: 30px;
  letter-spacing: .04em;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.boot-word [lang="en"] { font-family: var(--display); }
.boot-sub {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--gold-deep);
  margin-top: -8px;
}
.boot-track {
  width: min(240px, 52vw);
  height: 1px;
  background: rgba(31, 58, 86, .16);
  overflow: hidden;
}
.boot-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s linear;
}
.boot-pct { color: rgba(31, 58, 86, .55); font-size: 10px; }

/* ------------------------------------------------------------
   顶部导航
   ------------------------------------------------------------ */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--bar);
  display: flex;
  align-items: center;
}
#nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: var(--cl, 1);
}
.brand {
  width: var(--rail);
  height: 100%;
  flex: none;
  display: grid;
  place-items: center;
}
.brand img { display: block; }
.brand-word {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding-left: 2px;
  line-height: 1.15;
  user-select: none;
}
.brand-word .wl-en {
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: .04em;
  color: var(--ink);
}
.wl-en em, .boot-word em, .foot-word em {
  font-style: normal;
  color: var(--gold);
  /* 亮金压米白对比不足（1.8:1），深金细描边把字形立住（R17） */
  -webkit-text-stroke: .4px rgba(138, 106, 53, .55);
}
.brand-word .wl-zh {
  font-size: 12px;
  letter-spacing: .34em;
  color: var(--ink-dim);
}
.nav-end {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding-right: var(--pad);
}
.nav-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav-link:hover { border-color: var(--gold-deep); }

/* ------------------------------------------------------------
   左导轨
   ------------------------------------------------------------ */
.rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 35;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--bar);
  padding-bottom: calc(var(--pad) * .7);
  pointer-events: none;
}
.rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - 1px);
  width: 1px;
  background: var(--line);
  opacity: var(--cl, 1);
}
.dots {
  display: grid;
  grid-template-columns: repeat(2, 3px);
  gap: 3px;
  margin-top: calc(var(--rail) / 2 - 4.5px);
  opacity: .85;
}
.dots i { width: 3px; height: 3px; background: var(--ink); }
.ticks {
  position: absolute;
  left: calc(100% - 1px);
  top: calc(var(--bar) + var(--rail));
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.4vw, 28px);
}
.ticks i {
  width: 14px;
  height: 1px;
  background: rgba(31, 58, 86, .4);
  transform: scaleX(.5);
  transform-origin: left center;
  transition: transform .45s var(--ease), background .45s var(--ease);
}
.ticks i.on { transform: none; background: var(--ink); }

/* ------------------------------------------------------------
   滚动提示
   ------------------------------------------------------------ */
#hint {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(31, 58, 86, .72);
  opacity: 1;
  transition: opacity .5s var(--ease);
}
.hint-word {
  font-size: 11px;
  letter-spacing: .42em;
  padding-left: .42em;
}
#hint .bar {
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--ink), transparent);
  animation: drop 1.9s var(--ease) infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ------------------------------------------------------------
   背景影片层
   ------------------------------------------------------------ */
#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #DCE9E4, var(--mist));
}
#poster,
#film,
.film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
}
.film { opacity: 0; }
.film[data-k="0"] { opacity: 1; }
/* hero 常驻自播环境循环（D173）：压在 k0 晨启静帧之上、提亮罩之下；
   opacity/transform 由 site.js 与 k0 同步驱动（不设 transition，避免逐帧写入打架） */
#heroLoop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#bg .veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(246, 242, 234, .30),
    rgba(246, 242, 234, 0) 32%,
    rgba(246, 242, 234, 0) 70%,
    rgba(246, 242, 234, .16)
  );
}

/* 滚动轨道（JS 设高） */
#scroll-track { position: relative; z-index: 1; width: 100%; height: 520vh; }

/* 纸纹颗粒 */
#grain {
  position: fixed;
  inset: -120%;
  z-index: 2;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: multiply;
  background: url("tex/grain.png") repeat;
  background-size: 160px;
  animation: grain 1.4s steps(3) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ------------------------------------------------------------
   像素溶洞
   ------------------------------------------------------------ */
#hole {
  position: fixed;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
}

/* ------------------------------------------------------------
   内容区（溶洞揭开）
   ------------------------------------------------------------ */
#work {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  background: var(--mist);
  visibility: hidden;
}
#work.live { visibility: visible; }

.work-bg-wrap { position: absolute; inset: 0; overflow: hidden; }
/* 右缘轻纱：给 62% 起的文字栏垫亮度（提亮罩，非暗 scrim） */
.work-bg-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(246, 242, 234, 0) 48%,
    rgba(246, 242, 234, .22) 62%,
    rgba(246, 242, 234, .42) 78%,
    rgba(246, 242, 234, .5) 100%
  );
}

/* ------------------------------------------------------------
   内容区画报 spread（左 62% 大图随条目淡切）
   ------------------------------------------------------------ */
.work-art { position: absolute; inset: 0; overflow: hidden; }
.art-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}
.art-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(246, 242, 234, 0) 44%,
    rgba(246, 242, 234, .3) 58%,
    rgba(246, 242, 234, .56) 74%,
    rgba(246, 242, 234, .64) 100%
  );
}
/* 画报上下溶解带：与导航下缘/页脚上缘软衔接（口径同 #bg .veil，提亮罩非暗 scrim，visual.md §15 P0-4） */
.work-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(246, 242, 234, .30),
    rgba(246, 242, 234, 0) 32%,
    rgba(246, 242, 234, 0) 70%,
    rgba(246, 242, 234, .16)
  );
}

/* 教练画廊：手风琴卡排（悬停/聚焦展开，其余降饱和收起） */
.crew-wall {
  position: absolute;
  inset: 9vh 38.5% 9vh calc(var(--pad) * .6);
  display: flex;
  gap: clamp(8px, 1vw, 16px);
}
.crew-wall figure {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  border-radius: clamp(10px, 1vw, 16px);
  border: 1px solid var(--line-soft);
  background: var(--cream);
  cursor: pointer;
  transition: flex-grow .8s cubic-bezier(.4, 0, .2, 1);
}
.crew-wall figure.on { flex-grow: 3.1; }
.crew-wall img {
  position: absolute;
  inset: 0;
  object-position: 50% 14%;
  filter: grayscale(.9) brightness(1.03);
  opacity: .78;
  transform: scale(1.01);
  transition: filter .7s var(--ease), opacity .7s var(--ease), transform .8s var(--ease);
}
.crew-wall figure.on img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}
.crew-wall figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 40px 16px 14px;
  background: linear-gradient(180deg, rgba(246, 242, 234, 0), rgba(246, 242, 234, .94) 52%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  white-space: nowrap;
}
.crew-wall figure.on figcaption { opacity: 1; transform: none; }
.crew-wall b { font-size: clamp(14px, 1.15vw, 18px); font-weight: 600; }
.crew-wall span { font-size: 11px; color: var(--ink-dim); font-weight: 400; }
.crew-wall em { font-style: normal; font-size: 12px; color: var(--ink-dim); margin-top: 3px; }
.crew-wall [lang="en"] { font-family: var(--display); letter-spacing: .04em; }

/* 四站内景子序列 */
.art-layer .stn { position: absolute; inset: 0; opacity: 0; }

/* 报告大图版 */
.report-plate {
  --plate-r: clamp(28px, 4vw, 64px);
  position: absolute;
  left: 14%;
  top: 50%;
  transform: translateY(-50%) rotate(-1.5deg);
  width: min(320px, 24vw);
  /* 单侧大圆角落左下（右上让给蜡封）+ 1px 深浅双描边（内米白/外深金），口径见 visual.md §15 P0-5 */
  border: 0;
  border-bottom-left-radius: var(--plate-r);
  background: rgba(255, 253, 248, .7);
  padding: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 253, 248, .9),
    0 0 0 2px var(--gold-deep),
    0 18px 50px rgba(31, 58, 86, .16);
}
/* 内层纸件随外圆角收紧（否则方角探出圆角外）；只作用于桌面画报内的这份 */
.report-plate .sig-card { border-bottom-left-radius: calc(var(--plate-r) - 10px); }
.report-plate .wax {
  position: absolute;
  top: -18px;
  right: -18px;
  filter: drop-shadow(0 3px 8px rgba(31, 58, 86, .25));
}
.report-plate .wax img { width: 64px; height: 64px; }

/* 移动端流式图带（桌面隐藏） */
.m-art { display: none; }
.work-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: 50% 0;
  will-change: transform;
}
.work-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62%;
  width: 1px;
  background: var(--line);
}
.work-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}
.work-ticks { position: absolute; top: 0; left: 0; right: 0; }
.work-ticks i {
  position: absolute;
  left: 62%;
  width: 30px;
  height: 1px;
  background: rgba(31, 58, 86, .42);
}
.work-ticks i.w { width: 44px; }
.work-col {
  position: absolute;
  left: calc(62% + 34px);
  top: 20vh;
  width: min(430px, 31vw);
  /* 浮在水彩画面上的文字：小字号米白晕影托底（text-shadow 可继承，h3 单独加大档位）；
     次要墨色局部加深，亮底上不再发灰 */
  --ink-dim: rgba(31, 58, 86, .84);
  text-shadow:
    0 0 2px rgba(246, 242, 234, .95),
    0 1px 6px rgba(246, 242, 234, .9),
    0 2px 12px rgba(246, 242, 234, .7);
}
.work-item + .work-item { margin-top: 36vh; }

.work-item h3 {
  font-size: clamp(22px, 1.9vw, 32px);
  font-weight: 700;
  /* Compass Song 为单字重静态字体（声明 300-600 但无粗体），700 不会合成——用 0.4px 描边做视觉加粗 */
  -webkit-text-stroke: .4px currentColor;
  line-height: 1.32;
  letter-spacing: .01em;
  text-shadow:
    0 0 3px rgba(246, 242, 234, .9),
    0 1px 8px rgba(246, 242, 234, .9),
    0 2px 18px rgba(246, 242, 234, .8),
    0 4px 30px rgba(246, 242, 234, .6);
}
.wsteps { list-style: none; margin-top: 18px; }
.wsteps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.wsteps li i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-dim);
  padding-top: 4px;
}
.wsteps b { font-weight: 600; font-size: 15px; }
.wsteps span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
  font-weight: 400;
}
.wlist { list-style: none; margin-top: 14px; }
.wlist li {
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.wlist b { font-weight: 600; font-size: 15px; }
.wlist span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-dim);
  font-weight: 400;
}
.wlist [lang="en"] { font-family: var(--display); letter-spacing: .04em; }
/* fourlines 联动：未点亮行收淡，点亮行回墨并出金标 */
.wlines li:not(.lit) { opacity: .62; }
.wlines li { position: relative; padding-left: 16px; transition: opacity .4s var(--ease); }
.wlines li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 8px;
  height: 1px;
  background: var(--gold-deep);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.wlines li.lit::before { opacity: 1; }
.wnote {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
  font-weight: 500;
}
.work-item .text-action { margin-top: 16px; }

/* 试航记录卡：信号口径，不写分数（D160–D168） */
.sig-card {
  background: var(--paper-w);
  border: 1px solid var(--line-soft);
  padding: 16px 16px 12px;
}
.sig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}
.sig-head b { font-size: 16px; font-weight: 600; }
.sig-head .mono { color: var(--ink-faint); }
.sig-list { list-style: none; }
.sig-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.sig-list li:last-child { border-bottom: 0; }
.sig-list span { font-size: 13.5px; font-weight: 500; }
.sig-list em { font-style: normal; font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot--a { background: var(--gold-deep); }
.dot--b { background: var(--gold); }
.dot--c { background: var(--sub); }
.sig-foot { margin-top: 10px; color: var(--ink-faint); }

.wboard { margin-top: 18px; }
.wrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
}
.wrow b { font-weight: 600; font-size: 17px; }
.wrow span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--ink-dim);
  font-weight: 500;
}
.wrow strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dim);
  white-space: nowrap;
}
.wrow button,
.wrow a {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 9px 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.wrow button:hover,
.wrow a:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.wclose h3 { font-size: clamp(28px, 2.4vw, 40px); }
.wclose .cta-row { margin-top: 22px; }

.work-pct {
  position: absolute;
  left: 62%;
  bottom: clamp(28px, 5vh, 52px);
  transform: translateX(-50%);
  padding: 3px 0;
  color: rgba(31, 58, 86, .75);
  text-shadow:
    0 0 2px rgba(246, 242, 234, .95),
    0 1px 6px rgba(246, 242, 234, .9);
}

/* 内容浮现 */
.work-fade { opacity: 0; transition: opacity .9s var(--ease); }
#work.on .work-fade { opacity: 1; }
.work-item {
  transform: translateY(18px);
  transition: transform 1.1s var(--ease);
}
#work.on .work-item { transform: none; }

/* ------------------------------------------------------------
   影片段落（#stage）
   ------------------------------------------------------------ */
#stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.panel {
  position: absolute;
  inset: 0;
  padding: 0 var(--pad) 0 calc(var(--rail) + var(--pad) * .8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}
.panel > * { pointer-events: auto; }
.inner {
  max-width: min(1440px, 100%);
  width: 100%;
}

.hero, .framed {
  justify-content: flex-end;
  padding-bottom: calc(31vh + clamp(36px, 6.4vh, 72px));
}

h1, h2 {
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: .015em;
  font-size: clamp(46px, 6.6vw, 96px);
  /* 多层米白晕影：近处致密描光 + 小半径柔光，水彩亮底上把字形托出来 */
  text-shadow:
    0 0 3px rgba(246, 242, 234, .95),
    0 1px 7px rgba(246, 242, 234, .95),
    0 2px 16px rgba(246, 242, 234, .85),
    0 4px 34px rgba(246, 242, 234, .7);
}
/* hero 字标：COMPASS 沿用品牌口径「COM 墨蓝 + PASS 航海金」（visual.md §2 金 token）
   展示级字号下 .4px 描边不可见，故按 em 缩放；近处米白晕影替成暖金晕影，
   否则亮金压在米白晕影上会糊掉（同 R17「亮金压米白对比不足」的解法） */
.h1-mark em {
  font-style: normal;
  color: var(--gold);
  -webkit-text-stroke: .016em rgba(138, 106, 53, .6);
  text-shadow:
    0 0 3px rgba(246, 242, 234, .8),
    0 1px 7px rgba(138, 106, 53, .3),
    0 2px 16px rgba(246, 242, 234, .6),
    0 4px 34px rgba(246, 242, 234, .5);
}

.framed h2 { font-size: clamp(38px, 4.1vw, 76px); line-height: 1.2; }

/* A 方向：标题下细金线 + 菱形缀饰 */
.gold-rule {
  display: block;
  width: clamp(120px, 11vw, 180px);
  height: 1px;
  margin-top: clamp(18px, 2.4vh, 30px);
  background: linear-gradient(90deg, transparent, var(--gold-deep) 22%, var(--gold-deep) 78%, transparent);
  position: relative;
}
.gold-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep);
  transform: translate(-50%, -50%) rotate(45deg);
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .cta-row { margin-top: clamp(26px, 3vw, 60px); }

/* 脚注线（69% 分隔）、纸面 chip（lede/tag/kicker/竖排诗签）整体退役
   ——2026-10-18 用户拍板：白底压在插画上如贴膏药，需要时逐个按需加回。
   口径见 visual.md §15。 */

.spark {
  width: 12px;
  height: 12px;
  fill: var(--gold-deep);
  filter: drop-shadow(0 1px 6px rgba(246, 242, 234, .8));
}

.vrule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 86%;
  width: 1px;
  background: var(--line);
}

/* 空拍段：纯骨架呼吸拍（Round 18 撤 R17 竖排诗签，回归纯看图） */
.panel.verse { justify-content: center; }

/* 远征段整屏主张 */
.expedition .cta-row { margin-top: clamp(24px, 2.6vw, 48px); }

/* 收束画框 */
.frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.frame .fv,
.frame .fh {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--line);
  will-change: transform;
}
.frame .fv { width: 1px; height: 100%; }
.frame .fh { width: 100%; height: 1px; }
.fv--l { transform: translateX(var(--x1, 0px)); }
.fv--r { transform: translateX(var(--x2, 100vw)); }
.fh--t { transform: translateY(var(--y1, 0px)); }
.fh--b { transform: translateY(var(--y2, 100vh)); }
.frame .spark {
  position: absolute;
  left: -5.5px;
  top: -5.5px;
}
.s-tl { transform: translate(var(--x1, 0px), var(--y1, 0px)); }
.s-tr { transform: translate(var(--x2, 100vw), var(--y1, 0px)); }
.s-bl { transform: translate(var(--x1, 0px), var(--y2, 100vh)); }
.s-br { transform: translate(var(--x2, 100vw), var(--y2, 100vh)); }

/* ------------------------------------------------------------
   按钮
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--ink);
  color: var(--cream);
  border: 2px solid rgba(212, 175, 122, .8);
  border-radius: 3px;
  padding: 12px 12px 12px 20px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .1em;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .35s var(--ease), transform .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover {
  background: var(--paper-w);
  color: var(--ink);
  transform: translateY(-1px);
  border-color: rgba(138, 106, 53, .5);
  box-shadow: 0 8px 22px rgba(31, 58, 86, .18);
}
.arw {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(246, 242, 234, .45);
  border-radius: 3px;
  font-size: 15px;
  letter-spacing: 0;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover .arw { transform: translateX(3px); border-color: rgba(31, 58, 86, .3); }
/* 次级按钮：透明底 + 发丝描边（Round 18 去纸白底，纸面 chip 退役；口径 visual.md §15） */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(31, 58, 86, .45);
  box-shadow: none;
}
.btn--ghost .arw { border-color: rgba(31, 58, 86, .45); }
.btn--ghost:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: rgba(212, 175, 122, .55);
  box-shadow: none;
}
.btn--ghost:hover .arw { border-color: rgba(246, 242, 234, .42); }
.btn--sm { font-size: 13px; padding: 9px 9px 9px 15px; }
.btn--sm .arw { width: 24px; height: 24px; font-size: 13px; }

.text-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(31, 58, 86, .35);
  padding: 4px 0 6px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.text-action:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* ------------------------------------------------------------
   玻璃页脚（羊皮纸玻璃）
   ------------------------------------------------------------ */
.site-footer {
  position: absolute;
  left: 0;
  right: 0;
  padding: clamp(26px, 3.4vh, 44px) var(--pad) clamp(22px, 3vh, 36px) calc(var(--rail) + var(--pad) * .8);
  background: linear-gradient(180deg, rgba(246, 242, 234, .30), rgba(246, 242, 234, .58));
  -webkit-backdrop-filter: blur(16px) saturate(.92);
  backdrop-filter: blur(16px) saturate(.92);
  border-top: 1px solid rgba(255, 253, 248, .65);
  box-shadow: inset 0 1px 0 rgba(255, 253, 248, .55);
}
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand img { opacity: .92; }
.foot-word {
  font-size: 19px;
  letter-spacing: .05em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.foot-word [lang="en"] { font-family: var(--display); }
.foot-line { margin-top: 12px; font-size: 13.5px; color: var(--ink-dim); font-weight: 400; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 22px; }
.foot-nav a {
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}
.foot-nav a:hover { border-color: var(--gold-deep); }
.foot-nav [lang="en"] { font-family: var(--display); letter-spacing: .03em; }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.foot-legal span { font-size: 11px; color: var(--ink-faint); font-weight: 400; }

/* ------------------------------------------------------------
   弹层
   ------------------------------------------------------------ */
.sheet {
  margin: auto;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(31, 58, 86, .28);
}
.sheet::backdrop {
  background: rgba(31, 58, 86, .34);
}
.sheet[open] { animation: sheetIn .28s var(--ease); }
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
}
.sheet-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.sheet-label { color: var(--ink-dim); font-size: 11px; }
.sheet-bar h2 { flex: 1; font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.sheet-x {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.sheet-x svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.sheet-x:hover { background: var(--ink); color: var(--cream); }

.sheet-qrs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 24px 22px 20px;
}
.sheet-qrs figure { text-align: center; }
.qr-slot {
  position: relative;
  width: min(150px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  background: var(--paper-w);
  border: 1px dashed rgba(31, 58, 86, .32);
  border-radius: 4px;
  /* 1px 深浅双描边（内米白/外深色），随形态圆角走；口径见 visual.md §15 P0-5 */
  box-shadow:
    0 0 0 1px rgba(255, 253, 248, .9),
    0 0 0 2px rgba(31, 58, 86, .34);
}
/* 小程序码=圆形框、公众号=方形框：占位期也能一眼分清两个入口 */
.qr-slot--mp {
  border-radius: 50%;
  border-color: rgba(138, 106, 53, .55);
  box-shadow:
    0 0 0 1px rgba(255, 253, 248, .9),
    0 0 0 2px var(--gold-deep);
}
/* 方形框只取小档单侧圆角，维持与圆形的形态区分 */
.qr-slot--gzh { border-top-right-radius: clamp(12px, 1.4vw, 20px); }
.qr-slot img { opacity: .45; }
.qr-slot span {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper-w);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-dim);
  white-space: nowrap;
}
.sheet-qrs figcaption { margin-top: 16px; }
.sheet-qrs b { display: block; font-size: 14px; font-weight: 600; }
.sheet-qrs figcaption span { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-dim); font-weight: 400; }
/* 同设备入口：手机上扫不了自己屏幕上的码（R17） */
.sheet-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.6;
  font-weight: 400;
}
.sheet-copy {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink);
  background: var(--paper-w);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 7px 11px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.sheet-copy:hover { background: var(--ink); color: var(--cream); }
.sheet-qrs figcaption { margin-top: 12px; }
.sheet-qrs b { display: block; font-size: 14px; font-weight: 600; }
.sheet-qrs figcaption span { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-dim); font-weight: 400; }
.sheet-foot {
  padding: 13px 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-dim);
  font-weight: 400;
}

.sheet-form { padding: 20px 22px 22px; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 6px; }
.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-w);
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
}
.field input:focus,
.field select:focus {
  outline: 2px solid var(--gold);
  outline-offset: -1px;
  border-color: var(--gold-deep);
}
.field em {
  display: none;
  margin-top: 5px;
  font-style: normal;
  font-size: 11px;
  color: var(--err);
}
.field.err input,
.field.err select { border-color: var(--err); }
.field.err em { display: block; }
.agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
}
.agree input { accent-color: var(--ink); margin-top: 3px; }
.agree a { color: var(--ink); }
.agree-err { display: none; margin-top: 8px; font-size: 11px; color: var(--err); }
.sheet-form.err .agree-err { display: block; }
.sheet-submit {
  margin-top: 16px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  border-radius: 3px;
  padding: 14px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.sheet-submit:hover { background: #2A4A6B; }
.sheet-submit svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.sheet-done { padding: 26px 22px 24px; }
.sheet-done-title { font-size: 20px; font-weight: 600; }
.sheet-done p + p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--ink-dim); font-weight: 400; }
.sheet-done .text-action { margin-top: 18px; }

/* ------------------------------------------------------------
   响应式
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* 平板档：导轨收起（crest 不再溢出压住导航链接），品牌字标回归（R17） */
  :root { --rail: 0px; --bar: 56px; }
  .rail { display: none; }
  .brand { width: auto; padding-left: var(--pad); }
  .brand img { width: 40px; height: auto; }
  .brand-word { display: flex; padding-left: 10px; }
  .brand-word .wl-en { font-size: 20px; }
  .brand-word .wl-zh { font-size: 10.5px; letter-spacing: .3em; }
  .panel { padding-left: var(--pad); }
  h1, h2 { font-size: clamp(34px, 9.2vw, 64px); }
  .framed h2 { font-size: clamp(30px, 7vw, 52px); }
  .vrule { display: none; }
  .panel {
    justify-content: flex-end;
    padding-top: calc(68px + env(safe-area-inset-top));
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }
  .hero, .framed { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  #work .work-rule,
  #work .work-ticks i,
  #work .work-pct { left: calc(var(--rail) + var(--pad) * .8); }
  #work .work-ticks i { width: 16px; }
  #work .work-col {
    left: calc(var(--rail) + var(--pad) * .8 + 28px);
    right: var(--pad);
    width: auto;
    top: 30vh;
  }
  /* spread 转 流式图带：每条目图上文下 */
  .work-art { display: none; }
  .m-art {
    position: relative;
    display: block;
    margin-top: 16px;
    border: 1px solid var(--line-soft);
    background: var(--cream);
  }
  .m-art img { width: 100%; height: auto; max-height: 34vh; object-fit: cover; display: block; }
  .m-art--card { padding: 10px; }
  /* 画报上下溶解带（口径同 .work-art；横向滑动的教练卡排不叠，卡排自带名字条渐变） */
  .m-art:not(.crew-wall-m)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(246, 242, 234, .30),
      rgba(246, 242, 234, 0) 32%,
      rgba(246, 242, 234, 0) 70%,
      rgba(246, 242, 234, .16)
    );
  }
  /* 教练卡：横向滑动画廊 */
  .crew-wall-m {
    display: flex;
    gap: 10px;
    border: 0;
    background: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 12px;
    scrollbar-width: none;
  }
  .crew-wall-m::-webkit-scrollbar { display: none; }
  .crew-wall-m figure {
    position: relative;
    flex: 0 0 auto;
    width: calc(32vh * .72);
    height: 32vh;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    background: var(--cream);
    scroll-snap-align: center;
  }
  .crew-wall-m img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 50% 14%;
  }
  .crew-wall-m figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 26px 12px 9px;
    background: linear-gradient(180deg, rgba(246, 242, 234, 0), rgba(246, 242, 234, .94) 60%);
  }
  .crew-wall-m b { font-size: 14px; font-weight: 600; }
  .crew-wall-m span { font-size: 11px; color: var(--ink-dim); }
  .report-plate { position: static; transform: none; width: auto; }
}

@media (max-width: 600px) {
  :root { --pad: clamp(16px, 4.8vw, 24px); --rail: 0px; }
  .rail { display: none; }
  /* 竖屏裁切右移：让帆船入画（左天空留给文字） */
  #poster { object-position: 62% top; }
  #nav {
    height: calc(var(--bar) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: calc(env(safe-area-inset-right) + var(--pad));
  }
  .brand { width: auto; padding-left: var(--pad); }
  .brand img { width: 40px; height: auto; }
  .brand-word { display: flex; }
  .brand-word .wl-en { font-size: 19px; }
  .brand-word .wl-zh { font-size: 10.5px; letter-spacing: .26em; }
  .panel {
    padding-left: calc(var(--pad) + env(safe-area-inset-left));
    padding-right: calc(var(--pad) + env(safe-area-inset-right));
    padding-top: calc(64px + env(safe-area-inset-top));
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  .hero, .framed { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  h1, h2 { font-size: clamp(30px, 10.6vw, 48px); line-height: 1.18; }
  /* 窄屏文字压在建筑细节上，晕影加密一档 */
  h1, h2 {
    text-shadow:
      0 0 4px rgba(246, 242, 234, 1),
      0 1px 9px rgba(246, 242, 234, 1),
      0 2px 18px rgba(246, 242, 234, .95),
      0 4px 32px rgba(246, 242, 234, .85);
  }
  .framed h2 { font-size: clamp(26px, 8vw, 40px); }
  .btn { justify-content: center; min-height: 48px; padding: 10px 12px 10px 18px; }
  .btn--sm { min-height: 44px; padding: 8px 9px 8px 14px; }
  #hint { bottom: calc(14px + env(safe-area-inset-bottom)); }
  #boot .boot-word { font-size: 24px; }
  #work .work-col { top: 26vh; }
  .work-item + .work-item { margin-top: 24vh; }
  .work-bg-wrap::after {
    background: linear-gradient(
      180deg,
      rgba(246, 242, 234, .52),
      rgba(246, 242, 234, .3) 38%,
      rgba(246, 242, 234, .38) 66%,
      rgba(246, 242, 234, .6)
    );
  }
  .wreport { grid-template-columns: 1fr; }
  .wreport-shot { max-width: 200px; }
  .wrow { grid-template-columns: 1fr auto; }
  .wrow strong { display: none; }
  .site-footer { padding-left: var(--pad); margin-top: 18vh; }
}

@media (max-width: 380px) {
  h1, h2 { font-size: clamp(26px, 10.2vw, 40px); }
  .mono { font-size: 9.5px; letter-spacing: .16em; }
  .btn { font-size: 12.5px; letter-spacing: .08em; gap: 12px; }
  .btn .arw { width: 24px; height: 24px; font-size: 13px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .panel { justify-content: center; padding-top: calc(52px + env(safe-area-inset-top)); padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
  .hero, .framed { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
  h1, h2 { font-size: clamp(22px, 6vh, 36px); }
  #hint { display: none; }
}

@media (hover: none) {
  .btn:active { transform: scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
  #grain { display: none; }
  #hint .bar { animation: none; }
  .sheet[open] { animation: none; }
  html { scroll-behavior: auto; }
}