/* EthSeq 官网 v4 · 接触印样
   冷白相纸、黑色胶片条、黑白画面；唯一的颜色是红色蜡笔标记。 */

:root {
  --paper: #F4F5F5;
  --paper-2: #EBEDEE;
  --card: #FFFFFF;
  --ink: #0C0D0F;
  --ink-2: #3A3D42;
  --ink-3: #6B7076;
  --ink-4: #9EA3A8;
  --rule: #D8DBDD;
  --rule-2: #C4C8CB;

  --film: #0F1011;
  --film-2: #1B1C1E;
  --film-ink: #B9BEC3;
  --film-ink-2: #7D8288;
  --hole: #E6E8E9;

  --mark: #A8132B;
  --mark-on-film: #E5405A;

  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "IBM Plex Mono", "Noto Sans SC", ui-monospace, "SF Mono", Menlo, monospace;
  --hand: "Long Cang", "Kaiti SC", "STKaiti", "KaiTi", cursive;

  --maxw: 1280px;
  --gutter: clamp(16px, 5.56vw, 80px);
  --header-h: 60px;
  --section-y: clamp(88px, 10vw, 152px);
  --ease: cubic-bezier(.2, .8, .2, 1);

  --fw: 190px;          /* 胶片上一格的宽度，由脚本按可用空间计算 */
  --gap: 8px;
  --rebate: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
p, li, dt, dd, figcaption, td { text-wrap: pretty; }  /* no one-character last lines in CJK text */
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--mark); color: #fff; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }
/* 胶片底色上，红笔换成胶片上的那支，焦点框才看得清 */
.band :focus-visible, .site-footer :focus-visible { outline-color: var(--mark-on-film); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nobr { white-space: nowrap; }  /* identifiers and dates such as S-01, 2026-09-24: never break at the hyphen */
.skip { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--ink); color: var(--paper); padding: 8px 14px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--rule); }
.section--sunk { background: var(--paper-2); }

/* ---------- 字 ---------- */
.label {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center;
}
.label i { font-style: normal; color: var(--ink-4); }
.display {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(38px, 5.2vw, 76px); line-height: 1.14; letter-spacing: .01em;
  text-wrap: balance;
}
.h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.22; text-wrap: balance; }
.h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; line-height: 1.5; }
.after-label, .after-lead { margin-top: 16px; }
.lead { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.85; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.body { color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.small { font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }
.hand { font-family: var(--hand); color: var(--mark); font-weight: 400; line-height: 1.2; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 6vw, 96px); align-items: end; }
.split > .lead, .split > div > .lead { padding-bottom: .3em; }
.split-end { justify-self: end; }
.stack > * + * { margin-top: 18px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 18px;
  border: 1px solid var(--ink); border-radius: 2px;
  font-size: 14.5px; font-weight: 500; letter-spacing: .02em; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap; background: transparent;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--film-2); }
.btn .arr { font-family: var(--mono); transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.link { border-bottom: 1px solid var(--rule-2); padding-bottom: 1px; font-weight: 500; transition: border-color .2s ease; }
.link:hover { border-color: var(--mark); }

/* ---------- 顶栏 ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100;
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.site-header.is-hidden { transform: translateY(-110%); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: .01em; }
.brand svg { width: 21px; height: 18px; fill: var(--ink); }
.nav { display: flex; gap: 30px; font-size: 14px; color: var(--ink-2); }
.nav a { position: relative; padding: 4px 0; transition: color .15s ease; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -3px; height: 2px; background: var(--mark); border-radius: 2px; transform: rotate(-1.2deg); }
.head-right { display: flex; align-items: center; gap: 18px; }
.menu-btn { display: none; background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 500; padding: 8px 0; }
.mobile-menu {
  position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 99;
  background: var(--paper); padding: 20px var(--gutter) 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transition: opacity .25s ease; }
.mobile-menu nav a { display: block; font-family: var(--serif); font-size: 30px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--rule); }

/* ---------- 胶片条 ---------- */
.sheet { position: relative; display: grid; gap: 12px; width: max-content; max-width: 100%; }
.strip {
  position: relative;
  background: var(--film);
  border-radius: 3px;
  padding-inline: 10px;
  color: var(--film-ink);
  transition: opacity .5s ease;
}
.rebate {
  position: relative;
  height: var(--rebate);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
  color: var(--film-ink-2);
}
.rebate::before {
  content: ""; position: absolute; left: -10px; right: -10px; height: 5px;
  background: radial-gradient(3.2px 2.2px at 50% 50%, var(--hole) 96%, transparent 100%) 0 0 / 13px 5px repeat-x;
  opacity: .9;
}
.rebate.top::before { top: 3px; }
.rebate.bottom::before { bottom: 3px; }
.rebate.top { padding-top: 7px; }
.rebate.bottom { padding-bottom: 7px; }
.rebate b { color: var(--film-ink); font-weight: 500; }
.rebate .ticks { display: grid; grid-template-columns: repeat(var(--n, 6), var(--fw)); gap: var(--gap); width: 100%; }
.rebate .ticks span { display: block; }
.frames { display: grid; grid-template-columns: repeat(var(--n, 6), var(--fw)); gap: var(--gap); }
.frame {
  position: relative; width: var(--fw); aspect-ratio: 3 / 2; max-width: 100%;
  background: #2A2C2F; border-radius: 2px; overflow: hidden;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame.is-pending { background: transparent; border: 1px dashed var(--film-ink-2); display: grid; place-items: center; }
.frame.is-pending span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--film-ink-2); }
.strip.is-dim { opacity: .22; }

/* 蜡笔标记层：由脚本按格子的位置画 */
.marks { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.marks svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.marks path { fill: none; stroke: var(--mark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.marks path.on-film { stroke: var(--mark-on-film); }
.marks .note {
  position: absolute; white-space: nowrap;
  font-family: var(--hand); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.1; color: var(--mark);
}
.marks .note.on-film { color: var(--mark-on-film); }
.marks [data-step] { transition: opacity .5s ease; }
.marks path[data-step] { transition: stroke-dashoffset 1s var(--ease), opacity .3s ease; }
.marks .is-off { opacity: 0; }
.marks path.is-off { opacity: 1; }

/* ---------- 首屏影片：线描，逐帧硬切 ---------- */
.hero-film { padding-block: clamp(20px, 3vh, 40px) clamp(28px, 4vh, 56px); }
/* 克制一点：不铺满首屏，880px 的电影卡即可；矮屏再按高度收窄，上下片边字始终留在首屏里；滚动时内层视频轻微缩放 */
.film-card { margin: 0 auto; width: min(100%, 880px, calc((100svh - var(--header-h) - 180px) * 1672 / 940)); }
/* 桌面：首屏只放影片；标题和印样从第二屏开始，不在首屏底部露半截 */
/* Optical centre: leftover height splits 1 : 2 above/below the card instead of 1 : 1, so the card sits a little higher on tall screens */
@media (min-width: 861px) {
  .hero-film { min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px)); display: grid; grid-template-rows: 1fr auto 2fr; }
  .hero-film > .wrap { grid-row: 2; }
}
.film-frame { overflow: hidden; border: 1px solid var(--rule); border-radius: 18px; background: var(--paper); }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 940; background: var(--paper); will-change: transform; }
.film-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }
.film-top { margin: 0 0 12px; }
@media (max-width: 860px) { .film-next { display: none; } }

/* ---------- 首屏：印样 + 放大镜 ---------- */
.hero { position: relative; height: calc(100svh + 115vh); }
.hero-stage {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
  overflow: hidden;
}
.hero-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 3.2vh, 40px); padding-block: 24px; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(32px, 6vw, 96px); align-items: start; }
.hero-copy .display { font-size: clamp(min(34px, 8.6vw), min(5vw, 7.4vh), 72px); }  /* 窄屏下限跟着屏宽走，「物理」不被折开 */
/* Desktop: the first line (10 glyphs ≈ 10.1em) must fit the 7fr column (≈ 48.3vw, at most 691px), otherwise it wraps
   inside 物理 on tall screens (1920×1080, 1440×960, 1024×768…); keep-all only lets it break at the authored <br> */
@media (min-width: 861px) { .hero-copy .display { font-size: clamp(34px, min(4.7vw, 7.4vh), 68px); word-break: keep-all; } }
.hero-copy .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-copy .label { margin-bottom: 14px; }
/* 「01 问题」并进这一屏：问题写在印样正上方，比页首标题小一级；字号同时看宽和高，矮屏也放得下整张印样 */
.hero-q { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, min(1.9vw, 3.2vh), 28px); line-height: 1.4; text-wrap: balance; word-break: keep-all; }  /* 放不下时只在逗号后折行 */
.hero-q + .lead { margin-top: 10px; }
/* 矮屏：印样要整张放进这一屏，问题下面那段说明先收起（三种条件印样的片边上都写着） */
@media (max-height: 760px) { .hero-q + .lead { display: none; } }

.loupe {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5;
  overflow: hidden; border-radius: 2px;
  background: #2A2C2F;
  visibility: hidden;
  will-change: left, top, width, height;
}
.loupe.is-on { visibility: visible; }
.loupe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.loupe-copy {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  width: min(460px, 42vw); opacity: 0;
}
.loupe-copy .label { color: var(--ink-3); margin-bottom: 14px; }
.loupe-copy p { margin-top: 14px; color: var(--ink-2); }
.loupe-copy .btn { margin-top: 24px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.loupe-copy .btn:hover { background: var(--ink); }
.loupe-mark { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.loupe-mark svg { position: absolute; left: 0; top: 0; overflow: visible; }
.loupe-mark path { fill: none; stroke: var(--mark); stroke-width: 3; stroke-linecap: round; }
.loupe-mark .note { position: absolute; font-family: var(--hand); font-size: clamp(22px, 2.2vw, 34px); color: var(--mark); white-space: nowrap; }
.loupe-meta {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3);
  opacity: 0;
}
.loupe-meta .tc { font-variant-numeric: tabular-nums; }
.loupe-meta .pause { color: var(--ink-2); }  /* native button face (#EFEFEF): --ink-3 was 4.34:1, --ink-2 passes AA */
/* ---------- 通用块 ---------- */

.legend { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--ink); }
.legend-row { display: grid; grid-template-columns: 150px 140px minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.legend-row .thumb { width: 150px; aspect-ratio: 3 / 2; border-radius: 2px; overflow: hidden; background: var(--film); padding: 5px; }
.legend-row .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.legend-row .name { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.legend-row .name small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.legend-row dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: 14.5px; }
.legend-row dt { color: var(--ink-3); }
.legend-row .changed { color: var(--mark); font-weight: 500; }
.legend-row .hand { font-size: 20px; }

/* 两组比较：不装盒子，一条细线起头就够 */
.reading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(24px, 3vw, 48px); margin-top: 40px; }
.reading > div { padding-top: 16px; border-top: 1px solid var(--rule-2); }
.reading .pair { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); }
.reading p { margin-top: 6px; font-family: var(--serif); font-size: 18px; line-height: 1.55; }

/* 深色段：一条长胶片 */
.band { background: var(--film); color: #E7E9EA; position: relative; }
.band::before, .band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: radial-gradient(3.4px 2.4px at 50% 50%, #2E3033 96%, transparent 100%) 0 0 / 14px 6px repeat-x;
}
.band::before { top: 10px; }
.band::after { bottom: 10px; }
.band .label { color: var(--film-ink-2); }
.band .lead { color: var(--film-ink); }
.band .principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(48px, 6vw, 80px); }
.band .principle { border-top: 1px solid #2E3033; padding-top: 18px; }
.band .principle .num { font-size: 11.5px; color: var(--film-ink-2); letter-spacing: .1em; }
.band .principle p { margin-top: 14px; font-family: var(--serif); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: #E7E9EA; }

/* Workbench：档案柜式界面示意 */
.app { margin-top: clamp(40px, 5vw, 64px); border: 1px solid var(--ink); border-radius: 2px; background: var(--card); overflow: hidden; font-size: 14px; }
.app-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.app-bar b { font-family: var(--sans); font-size: 14px; letter-spacing: 0; font-weight: 600; }
.app-bar span { color: var(--ink-3); }
.app-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 400px; }
.app-side { border-right: 1px solid var(--rule); padding: 14px 10px; background: var(--paper); }
.app-side .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--ink-4); padding: 0 8px 8px; }
.app-side button { display: flex; justify-content: space-between; width: 100%; padding: 8px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink-2); border-radius: 2px; }
.app-side button:hover { background: var(--paper-2); }
.app-side button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.app-side button .n { font-family: var(--mono); font-size: 11px; opacity: .6; }
.app-main { padding: 22px 24px 24px; }
.app-main h4 { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.app-main .sub { color: var(--ink-3); margin-top: 2px; }
.steps-pill { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.steps-pill span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; padding: 4px 10px; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-3); }
.steps-pill span.is-now { border-color: var(--ink); color: var(--ink); }
.app-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; margin-top: 18px; }
.panel { border: 1px solid var(--rule); border-radius: 2px; padding: 14px 16px; background: var(--card); }
.panel + .panel { margin-top: 12px; }
.panel h5 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; }
.panel h5 small { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
.kv { display: grid; grid-template-columns: 1fr auto; }
.kv > * { padding: 7px 0; border-top: 1px solid var(--rule); }
.kv > :nth-child(-n+2) { border-top: 0; }
.kv .v { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.panel .note { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.panel h5 + .note { margin-top: 0; }
.panel .mini { display: inline-flex; margin-top: 10px; font-size: 12.5px; padding: 5px 12px; background: var(--ink); color: var(--paper); border-radius: 2px; }
.panel .mini.is-off { background: none; color: var(--ink-4); border: 1px dashed var(--rule-2); }
.empty { display: grid; place-items: center; min-height: 150px; border: 1px dashed var(--rule-2); border-radius: 2px; text-align: center; color: var(--ink-3); font-size: 13px; padding: 16px; margin-top: 18px; }
.empty b { display: block; font-family: var(--serif); font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.app-view[hidden] { display: none; }
.caption { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.more-links { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }

/* 资源卡：档案卡片 */
/* 资源：三条目录，不装卡片、不配图（同样的线描上面已经出现过），一条墨线起头 */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 64px); }
.card { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--ink); }
.card .tab { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }
.card .h3 { font-family: var(--serif); font-size: 21px; text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color .15s ease; }
.card:hover .h3 { text-decoration-color: var(--ink); }
.card p { color: var(--ink-2); font-size: 14.5px; }
.card .go { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }

/* 结尾 */
/* 联系一节：纯文字收尾。左边标签和标题，右边正文、邮箱和按钮，和各节开头的 .split 同一套栏宽 */
.cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 6vw, 96px); align-items: center; }
.cta .stack > :first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.chips span { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 5px 11px; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-2); }
.cta .btn { margin-top: 24px; }
.email { font-family: var(--mono); font-size: 14px; user-select: all; }

/* 页脚 */
.site-footer { background: var(--film); color: var(--film-ink); padding-block: 36px 32px; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 6px; background: radial-gradient(3.4px 2.4px at 50% 50%, #2E3033 96%, transparent 100%) 0 0 / 14px 6px repeat-x; }
.site-footer .wrap { display: grid; gap: 28px; }
.site-footer .top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: 12px; }
.site-footer .brand svg { fill: #E7E9EA; }
.site-footer .brand { color: #E7E9EA; }
.site-footer .tagline { margin-top: 10px; font-size: 13.5px; color: var(--film-ink-2); }
.site-footer .cols { display: flex; gap: clamp(28px, 6vw, 88px); flex-wrap: wrap; }
.site-footer h6 { margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; font-weight: 400; color: var(--film-ink-2); text-transform: uppercase; }
.site-footer .cols a { display: block; padding: 2px 0; font-size: 14px; transition: color .15s ease; }
.site-footer .cols a:hover { color: #fff; }
.site-footer .bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid #2E3033; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--film-ink-2); }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 160; transform: translate(-50%, 6px); opacity: 0; pointer-events: none; padding: 9px 14px; background: var(--ink); color: var(--paper); font-size: 13px; border-radius: 2px; transition: opacity .2s ease, transform .25s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }


/* ---------- 内页页首 ---------- */
.page-hero { padding-block: clamp(48px, 7vw, 104px) clamp(56px, 7vw, 112px); }
/* 桌面：产品页和研究页的页首是封面，占满首屏、内容居中；下一节的标题不在首屏底部露半截 */
@media (min-width: 861px) {
  .page-hero:not(.page-hero--plain), .research-head { min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px)); display: grid; align-content: center; }
}
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.page-hero-copy .display { margin-top: 16px; font-size: clamp(38px, 4.6vw, 68px); }
.page-hero-copy .lead { margin-top: 22px; }
.page-hero-copy .lead + .small { margin-top: 18px; }
.toc { margin-top: 36px; border-top: 1px solid var(--ink); }
.toc a { display: grid; grid-template-columns: 36px 110px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.toc a > * { transition: transform .2s var(--ease); }
.toc a:hover > * { transform: translateX(6px); }
.toc .num { font-size: 12px; color: var(--ink-3); }
.toc b { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.toc span:not(.num):not(.arr) { color: var(--ink-2); font-size: 14.5px; }
.toc .arr { font-family: var(--mono); color: var(--ink-3); }

/* FIG. 1：线描 + 编号引线 */
.fig { margin: 0; }
.fig-draw { position: relative; background: #F3F4F2; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.fig-draw img { width: 100%; aspect-ratio: 3 / 2; }
.fig-draw svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig-draw line { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig-draw circle { fill: var(--ink); }
.fig-tag {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink);
  background: #F3F4F2; border: 1px solid var(--ink); border-radius: 50%;
}
.fig figcaption { margin-top: 14px; }
.fig-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.fig-legend li { display: flex; gap: 8px; align-items: baseline; }
.fig-legend .num { font-size: 11.5px; color: var(--ink-3); }

/* ---------- 产品页：六步读印样 ---------- */
.story { position: relative; height: calc(100svh + 6 * 62vh); border-top: 1px solid var(--rule); background: var(--paper-2); }
.story-stage { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px)); overflow: hidden; }
.story-inner { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding-block: 22px 20px; }
.story-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.story-count { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; }
.story-count b { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.story-sheet { position: relative; display: flex; align-items: center; padding-top: 30px; min-height: 0; }
.story-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; border-top: 1px solid var(--ink); padding-top: 16px; }
.story-steps { display: grid; }
.story-step { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .6s var(--ease); pointer-events: none; }
.story-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.story-step .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--mark); }
.story-step .k .num { color: var(--ink-3); margin-right: 6px; }
.story-step h3 { margin-top: 6px; font-family: var(--serif); font-size: clamp(21px, 2vw, 28px); font-weight: 600; line-height: 1.35; }
.story-step p:last-child { margin-top: 6px; color: var(--ink-2); max-width: 44em; font-size: 15.5px; line-height: 1.75; }
.story-ticks { display: flex; gap: 4px; }
.story-ticks button { width: 38px; height: 30px; padding: 0; border: 1px solid var(--rule-2); border-radius: 2px; background: none; cursor: pointer; font-family: var(--mono); font-size: 11px; color: var(--ink-3); transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.story-ticks button:hover { border-color: var(--ink); color: var(--ink); }
.story-ticks button.is-done { background: var(--film); border-color: var(--film); color: var(--film-ink); }
.story-ticks button[aria-current="step"] { background: var(--mark); border-color: var(--mark); color: #fff; }

/* 协议卡 */
.protocol { margin-top: clamp(40px, 5vw, 64px); background: var(--card); border: 1px solid var(--ink); border-radius: 2px; }
.protocol-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ink-3); }
.protocol-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.protocol-grid > div { padding: 22px 24px 26px; }
.protocol-grid > div + div { border-left: 1px solid var(--rule); background: var(--paper); }
.protocol-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 8px; }
.protocol-list li { display: grid; grid-template-columns: 22px 130px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.protocol-list .eq { font-family: var(--mono); color: var(--ink-3); }
.protocol-list b { font-weight: 600; }
.protocol-list span:last-child { color: var(--ink-2); font-size: 14.5px; }
.protocol-list .is-changed .eq { color: var(--mark); font-weight: 600; }
.protocol-note { margin-top: 18px; font-size: 24px; transform: rotate(-2deg); transform-origin: left; }
.circled { position: relative; display: inline-block; padding: 0 4px; color: var(--ink); font-weight: 500; }
.circled svg { max-width: none; position: absolute; left: -10px; top: -9px; width: calc(100% + 20px); height: calc(100% + 18px); overflow: visible; pointer-events: none; }
.circled path { fill: none; stroke: var(--mark); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* 两份文件 */
.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.doc { position: relative; background: var(--card); border: 1px solid var(--rule-2); border-radius: 2px; padding: 0 24px 22px; box-shadow: 0 1px 0 var(--rule), 0 14px 30px -26px rgba(12, 13, 15, .4); }
.doc header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0 12px; border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ink-3); }
.doc header .num { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.doc dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
.doc dt, .doc dd { padding: 11px 0; border-bottom: 1px solid var(--rule); }
.doc dt { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); padding-top: 13px; }
.doc dd { font-size: 15px; color: var(--ink); line-height: 1.65; }
.doc dd.tbd { color: var(--ink-4); font-family: var(--mono); font-size: 13px; }
.doc footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.doc footer .hand { font-size: 21px; transform: rotate(-2deg); }
.stamp { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1.5px solid var(--mark); border-radius: 2px; color: var(--mark); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; transform: rotate(-3deg); }

/* Workbench 细节 */
.steps-pill span.is-done { border-color: var(--rule-2); color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.cond-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--film); padding: 5px; border-radius: 2px; }
.cond-row img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1px; }
.ev-list { margin-top: 16px; border-top: 1px solid var(--rule); }
.ev-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ev-list img, .ev-icon { width: 72px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; border: 1px solid var(--rule); }
.ev-icon { display: grid; place-items: center; font-family: var(--serif); font-size: 22px; color: var(--ink-3); background: var(--paper); }
.ev-list b { display: block; font-weight: 600; font-size: 14.5px; }
.ev-list div span { font-size: 12.5px; color: var(--ink-3); }
.tag { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; padding: 3px 9px; border-radius: 2px; background: var(--ink); color: var(--paper); white-space: nowrap; }
.tag.is-draft { background: none; color: var(--ink-2); border: 1px solid var(--rule-2); }
.tag.is-empty { background: none; color: var(--ink-3); border: 1px dashed var(--rule-2); }
.req { margin-top: 18px; max-width: 520px; }
.checks { margin: 6px 0 4px; }
.checks li { position: relative; padding: 7px 0 7px 26px; border-top: 1px solid var(--rule); font-size: 14px; }
.checks li::before { content: "○"; position: absolute; left: 2px; top: 7px; font-family: var(--mono); color: var(--ink-4); }
.checks li.ok::before { content: "●"; color: var(--ink); }
.checks em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-left: 8px; }
.log { margin-top: 16px; border-top: 1px solid var(--rule); }
.log li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.log .num { font-size: 12px; color: var(--ink-3); }


/* ---------- 资源页 ---------- */
.page-hero--plain .display { font-size: clamp(38px, 4.6vw, 68px); }
.res-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--ink); }
.search input { width: min(420px, 100%); height: 44px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 2px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; }
.search input::placeholder { color: var(--ink-4); }
.search { flex: 0 1 420px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { height: 36px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 2px; background: none; cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-2); transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.res-count { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.text-sheet { margin-top: clamp(40px, 5vw, 64px); padding-bottom: 40px; }
.frame.is-text { background: var(--film-2); display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px 14px; color: var(--film-ink); }
.frame.is-text .n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--film-ink-2); }
.frame.is-text b { font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); font-weight: 600; color: #EEF0F1; line-height: 1.2; }
.frame.is-text span:last-child { font-size: 13.5px; line-height: 1.55; }
.guides { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--ink); }
.guide { border-bottom: 1px solid var(--rule); }
/* 九篇文章：一张纯文字目录，不配缩略图（同样的线描上面已经出现过）；悬停时标题下划线 */
.guide summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 0; cursor: pointer; list-style: none; }
.guide summary::-webkit-details-marker { display: none; }
.guide-main { display: grid; gap: 2px; }
.guide-main .tab { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); }
.guide-main b { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.4; justify-self: start; text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color .15s ease; }
.guide summary:hover .guide-main b { text-decoration-color: var(--ink); }
.guide-main span:last-child { color: var(--ink-2); font-size: 14.5px; }
.guide-state { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); }
.plus { position: relative; width: 14px; height: 14px; transition: transform .35s var(--ease); }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--ink); }
.plus::after { transform: rotate(90deg); }
.guide[open] .plus { transform: rotate(45deg); }
.guide-body { padding: 0 0 22px; animation: unfold .45s var(--ease); }
.guide-body ol { counter-reset: o; display: grid; gap: 6px; }
.guide-body li { counter-increment: o; display: grid; grid-template-columns: 34px 1fr; }
.guide-body li::before { content: counter(o, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--ink-3); padding-top: 3px; }
.guide-body .small { margin-top: 12px; }
.res-empty { padding: 28px 0; color: var(--ink-3); }
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(36px, 4vw, 56px); }
.terms > div { border-top: 1px solid var(--ink); padding: 16px 0 22px; }
.terms dt { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.terms dt small { margin-left: 10px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; color: var(--ink-3); }
.terms dd { margin-top: 6px; color: var(--ink-2); font-size: 14.5px; }

/* ---------- 关于页 ---------- */
/* 状态账本：三组，每行 项目 / 状态 / 能说到哪一步；状态和边界逐字取自研究页 */
.ledger { display: grid; gap: clamp(32px, 4vw, 48px); margin-top: clamp(40px, 5vw, 64px); }
.ledger-group h3 { padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; color: var(--ink-3); }
.ledger-group li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: 6px 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ledger-group li > a { font-weight: 500; justify-self: start; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.ledger-group li > a:hover { border-color: var(--mark); }
.ledger-group li > .st { justify-self: start; }
.ledger-group li > span:last-child { font-size: 14px; color: var(--ink-2); }
/* 愿景：一段衬线字，比正文大一号，下面紧跟「离这里还有多远」 */
/* 标签紧贴它限定的那段话，不在右边另起一栏 */
.vision-tag { margin-top: clamp(36px, 4vw, 56px); }
.vision { margin-top: 14px; max-width: 30em; font-family: var(--serif); font-size: clamp(20px, 1.9vw, 27px); line-height: 1.75; text-wrap: pretty; }
.vision-gap { margin-top: 28px; max-width: 44em; }
.about-bounds { margin-top: clamp(36px, 4vw, 56px); max-width: 760px; }

/* ---------- 设计语言页 ---------- */
.logo-stage { position: relative; display: grid; place-items: center; padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px); background: var(--card); border: 1px solid var(--rule); border-radius: 2px; }
.logo-art { position: relative; width: min(300px, 56%); }
.logo-big { width: 100%; fill: var(--ink); overflow: visible; }
.logo-big .m1 { transition: transform .9s var(--ease), fill .5s ease; }
.is-shift .logo-big .m1 { transform: translateX(-16px); fill: var(--mark); }
.logo-read li { position: absolute; left: calc(100% + 28px); transform: translateY(-50%); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.logo-read li::before { content: ""; position: absolute; right: calc(100% + 8px); top: 50%; width: 16px; height: 1px; background: var(--ink-4); }
.logo-read li:nth-child(1) { top: 12.5%; }
.logo-read li:nth-child(2) { top: 50%; }
.logo-read li:nth-child(3) { top: 87.5%; }
.logo-read .num { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.logo-read em { font-size: 20px; font-weight: 400; }
.lockups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.lk { height: 150px; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 2px; font-size: 24px; font-weight: 600; }
.lk-paper, .lk-icon { background: var(--card); border: 1px solid var(--rule); color: var(--ink); }
.lk-film { background: var(--film); color: #E7E9EA; }
.mini-logo { width: 32px; height: 28px; fill: currentColor; flex: none; }
.lk-icon .mini-logo { width: 64px; height: 56px; }
.lockups figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: 36px; }
.rules li { border-top: 1px solid var(--ink); padding-top: 14px; color: var(--ink-2); }
.rules .num { display: block; font-size: 11.5px; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 6px; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; margin-top: clamp(40px, 5vw, 64px); }
.swatches li { display: grid; gap: 4px; }
.swatches .chip { height: 92px; border: 1px solid var(--rule); border-radius: 2px; margin-bottom: 8px; }
.swatches b { font-weight: 600; }
.swatches b small { margin-left: 8px; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); letter-spacing: .06em; }
.swatches code { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.swatches span:last-child { font-size: 13.5px; color: var(--ink-3); }
.ratio { display: flex; height: 44px; margin-top: 36px; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; }
.ratio span { display: flex; align-items: center; padding: 0 12px; white-space: nowrap; overflow: hidden; }
.type-specimens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(24px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); }
.spec { border-top: 1px solid var(--ink); padding-top: 14px; }
.spec .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ink-3); }
.spec p + p { margin-top: 14px; }
.s-serif { font-family: var(--serif); font-size: clamp(28px, 3vw, 44px); font-weight: 600; line-height: 1.25; }
.s-sans { font-size: 18px; line-height: 1.8; color: var(--ink-2); }
.s-mono { font-family: var(--mono); font-size: clamp(14px, 1.4vw, 18px); letter-spacing: .06em; text-transform: uppercase; }
.s-hand { font-family: var(--hand); font-size: clamp(30px, 3vw, 44px); color: var(--mark); transform: rotate(-2deg); transform-origin: left; }
.cubes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.cubes img { width: 100%; border: 1px solid var(--rule); border-radius: 2px; background: #F3F4F2; }
.cubes figcaption { margin-top: 12px; color: var(--ink-2); font-size: 14.5px; }
.cubes figcaption b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); }
.parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.part { background: var(--card); border: 1px solid var(--rule); border-radius: 2px; padding: 22px 24px 24px; }
.part--wide { grid-column: 1 / -1; }
.part .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 16px; }
.part .small { margin-top: 14px; }
.mini-film { background: var(--film); border-radius: 3px; padding: 6px 10px; max-width: 880px; }
.mf-edge { display: flex; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--film-ink-2); padding: 4px 0; }
.mf-edge span { flex: 1; white-space: nowrap; overflow: hidden; }
.mf-edge b { color: var(--film-ink); font-weight: 500; }
.mf-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mf-frames img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1px; }
.mf-pending { display: grid; place-items: center; border: 1px dashed var(--film-ink-2); border-radius: 1px; font-family: var(--mono); font-size: 11px; color: var(--film-ink-2); }
.mark-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
.mark-set svg { width: 100%; max-width: 120px; height: 56px; overflow: visible; }
.mark-set path { fill: none; stroke: var(--mark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mark-set b { display: block; margin-top: 4px; font-weight: 600; }
.mark-set span { font-size: 13px; color: var(--ink-3); }
.stamps { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px 0; }
.stamp.is-ink { border-color: var(--ink); color: var(--ink); transform: rotate(2deg); }
.apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 16px; margin-top: clamp(40px, 5vw, 64px); }
.t-web, .t-wb { grid-column: span 3; }
.t-slide, .t-paper, .t-social { grid-column: span 2; }
.app-tile figcaption { margin-top: 12px; color: var(--ink-2); font-size: 14px; }
.app-tile figcaption b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); }
.mock { position: relative; overflow: hidden; border-radius: 2px; border: 1px solid var(--rule-2); container-type: inline-size; }
.mock img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mock-web { aspect-ratio: 16 / 12.6; background: var(--paper); padding: 4% 5%; display: flex; flex-direction: column; gap: 3cqw; }
.mw-bar { display: flex; align-items: center; gap: 2.4cqw; }
.mw-bar .mini-logo { width: 4cqw; height: 3.4cqw; margin-right: auto; }
.mw-bar i { width: 5cqw; height: 2px; background: var(--ink-4); }
.mw-h { font-family: var(--serif); font-weight: 600; font-size: 4.4cqw; line-height: 1.2; }
.mw-sheet { position: relative; display: grid; gap: 1.2cqw; }
.mw-sheet > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; background: var(--film); padding: 1.2cqw; border-radius: 2px; }
.mw-sheet span { border: 1px dashed var(--film-ink-2); border-radius: 1px; }
.mw-circle { position: absolute; left: 50%; top: 1%; width: 16%; height: 31%; border: 2px solid var(--mark); border-radius: 50%; transform: rotate(-6deg); }
.mock-wb { aspect-ratio: 16 / 12.6; background: var(--card); display: grid; grid-template-columns: 22% 1fr; }
.mb-side { background: var(--paper); border-right: 1px solid var(--rule); padding: 40% 16%; display: grid; align-content: start; gap: 3cqw; }
.mb-side i { height: 3.4cqw; border-radius: 1px; background: var(--rule); }
.mb-side i.on { background: var(--ink); }
.mb-main { padding: 7% 7%; display: grid; align-content: start; gap: 3cqw; }
.mb-main p { font-family: var(--serif); font-weight: 600; font-size: 4.2cqw; }
.mb-row { display: grid; grid-template-columns: 24% 1fr auto; gap: 4cqw; align-items: center; border-top: 1px solid var(--rule); padding-top: 3cqw; }
.mb-row span { height: 2px; background: var(--rule-2); }
.mb-row b { font-family: var(--mono); font-weight: 400; font-size: 2.4cqw; background: var(--ink); color: var(--paper); padding: .6cqw 2cqw; border-radius: 1px; }
.mb-row b.off { background: none; color: var(--ink-3); border: 1px dashed var(--rule-2); }
.mock-paper { aspect-ratio: 16 / 11; background: #fff; padding: 8% 7%; display: grid; align-content: center; gap: 5cqw; }
.mp-fig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; }
.mp-fig span { display: block; font-family: var(--serif); font-size: 3.6cqw; margin-bottom: 1cqw; }
.mp-fig img { border: 1px solid var(--rule); }
.mp-cap { font-family: var(--serif); font-size: 3.4cqw; line-height: 1.6; color: var(--ink-2); }
.mp-cap b { color: var(--ink); }
.mock-slide { aspect-ratio: 16 / 11; background: var(--film); color: #E7E9EA; padding: 12% 8%; display: flex; flex-direction: column; justify-content: space-between; }
.mock-slide::before, .mock-slide::after { content: ""; position: absolute; left: 0; right: 0; height: 3.2cqw; background: radial-gradient(1.1cqw .8cqw at 50% 50%, #2E3033 96%, transparent 100%) 0 0 / 4.4cqw 3.2cqw repeat-x; }
.mock-slide::before { top: 2cqw; } .mock-slide::after { bottom: 2cqw; }
.ms-top { display: flex; align-items: center; gap: 2.4cqw; font-family: var(--mono); font-size: 3.6cqw; letter-spacing: .08em; color: var(--film-ink-2); }
.ms-top .mini-logo { width: 6cqw; height: 5.2cqw; color: #E7E9EA; }
.ms-h { font-family: var(--serif); font-weight: 600; font-size: 7.6cqw; line-height: 1.25; }
.ms-sub { font-family: var(--mono); font-size: 3.6cqw; letter-spacing: .06em; color: var(--film-ink); border-left: 2px solid var(--mark-on-film); padding-left: 2.4cqw; }
.mock-social { aspect-ratio: 16 / 11; background: var(--paper); padding: 8%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 4cqw 5cqw; align-items: center; }
.mx-h { font-family: var(--serif); font-weight: 600; font-size: 7.4cqw; line-height: 1.2; white-space: nowrap; }
.mx-img { position: relative; background: var(--film); padding: 2cqw; border-radius: 2px; }
.mx-img img { border-radius: 1px; }
.mx-img em { position: absolute; left: 30%; top: 12%; width: 42%; height: 80%; border: 2px solid var(--mark); border-radius: 50%; transform: rotate(-8deg); }
.mx-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 3cqw; font-family: var(--mono); font-size: 3cqw; color: var(--ink-3); letter-spacing: .04em; }
.mx-foot .mini-logo { width: 5cqw; height: 4.3cqw; color: var(--ink); }
.motions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 6vw, 80px); }
.mo-stage { position: relative; aspect-ratio: 3 / 2; background: var(--film-2); border-radius: 2px; overflow: hidden; }
.mo figcaption { margin-top: 14px; font-size: 14px; color: var(--film-ink); }
.mo figcaption b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; color: #EEF0F1; margin-bottom: 4px; }
.mo-stage > img { width: 100%; height: 100%; object-fit: cover; }
.ml-grid { position: absolute; inset: 10%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; }
.ml-grid i { background: #3A3D42; border-radius: 1px; }
.ml-lens { position: absolute; left: 10%; top: 55%; width: 26.6%; height: 35%; overflow: hidden; border-radius: 1px; animation: lens 6s var(--ease) infinite; }
.ml-lens img { width: 100%; height: 100%; object-fit: cover; }
@keyframes lens { 0%, 18% { left: 10%; top: 55%; width: 26.6%; height: 35%; } 42%, 70% { left: 0; top: 0; width: 100%; height: 100%; } 92%, 100% { left: 10%; top: 55%; width: 26.6%; height: 35%; } }
.mo-tc { position: absolute; left: 8px; bottom: 6px; font-size: 10.5px; color: var(--ink-2); background: rgba(243, 244, 242, .85); padding: 1px 6px; border-radius: 1px; }
.mo-draw svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mo-draw path { fill: none; stroke: var(--mark); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 330; stroke-dashoffset: 330; animation: draw 3.6s var(--ease) infinite; }
@keyframes draw { 0%, 12% { stroke-dashoffset: 330; opacity: 1; } 45%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.mo-advance { padding: 12% 0; }
.ma-strip { display: flex; gap: 4%; height: 100%; padding-left: 21%; animation: advance 9s var(--ease) infinite; }
.ma-strip img { height: 100%; aspect-ratio: 3 / 2; width: auto; flex: none; border-radius: 1px; }
@keyframes advance { 0%, 14% { transform: translateX(0); } 20%, 34% { transform: translateX(-62%); } 40%, 54% { transform: translateX(-124%); } 60%, 74% { transform: translateX(-186%); } 80%, 94% { transform: translateX(-62%); } 100% { transform: translateX(0); } }
.honesty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(40px, 5vw, 64px); }
.honesty > div { border-top: 1px solid var(--ink); padding-top: 16px; }
.honesty .k { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.honesty p + p { margin-top: 8px; color: var(--ink-2); }
.honesty .must { font-size: 14.5px; color: var(--ink); border-left: 2px solid var(--mark); padding-left: 10px; }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.dos > div { background: var(--card); border: 1px solid var(--rule); border-radius: 2px; padding: 20px 24px; }
.dos .k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 8px; }
.dos li { position: relative; padding: 8px 0 8px 26px; border-top: 1px solid var(--rule); }
.dos li::before { content: "○"; position: absolute; left: 2px; top: 8px; font-family: var(--mono); color: var(--ink); }
.dos > div + div li::before { content: "×"; color: var(--mark); }


/* ---------- 研究页：论文版式 ---------- */
.paper-head { padding-block: clamp(48px, 7vw, 96px) clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--ink); }
.paper-head .display { margin-top: 16px; font-size: clamp(38px, 4.8vw, 70px); }
.paper-sub { margin-top: 14px; font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-2); }
.paper-meta { display: grid; grid-template-columns: repeat(5, minmax(0, auto)); gap: 12px 36px; margin-top: 32px; justify-content: start; }
.paper-meta dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); }
.paper-meta dd { margin-top: 4px; font-size: 14.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paper-meta .stamp { height: 26px; font-size: 11px; transform: rotate(-2deg); }
.paper { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: clamp(32px, 5vw, 80px); padding-block: clamp(40px, 5vw, 72px) var(--section-y); }
.paper-toc { position: sticky; top: calc(var(--header-h) + 28px + env(safe-area-inset-top, 0px)); align-self: start; }
.paper-toc .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 10px; }
.paper-toc ol { border-top: 1px solid var(--ink); }
.paper-toc li a { display: block; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); transition: color .2s ease; }
/* Only the text shifts; the rule and the red current-section bar stay put */
.paper-toc li a > span { display: block; transition: transform .3s var(--ease); }
.paper-toc li a:hover, .paper-toc li a.is-here { color: var(--ink); }
.paper-toc li a:hover > span, .paper-toc li a.is-here > span { transform: translateX(6px); }
.paper-toc li a.is-here { box-shadow: inset 2px 0 0 var(--mark); }
.paper-status { margin-top: 28px; padding: 14px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: 2px; }
.paper-status li { font-size: 13.5px; color: var(--ink-2); padding: 3px 0; }
.paper-status b { font-family: var(--serif); font-size: 18px; color: var(--ink); margin-right: 4px; }
.paper-body { min-width: 0; font-family: var(--serif); font-size: 17px; line-height: 1.95; color: var(--ink); }
.paper-body section + section { margin-top: 56px; }
.paper-body section { scroll-margin-top: calc(var(--header-h) + 24px); }
.paper-body h2 { font-family: var(--serif); font-size: clamp(22px, 2vw, 27px); font-weight: 600; line-height: 1.35; margin-bottom: 14px; display: flex; gap: 14px; align-items: baseline; }
.paper-body h2 .num { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--mark); }
.paper-body p + p, .paper-body p + ul, .paper-body ul + p, .paper-body .table-wrap + p { margin-top: 14px; }
.paper-body .small { font-family: var(--sans); }
.paper-body b { font-weight: 600; }
.cite { font-family: var(--mono); font-size: 11px; line-height: 0; margin-left: 1px; color: var(--ink-3); }  /* the comma between numbers is in the HTML */
.cite a { color: var(--mark); }
.abstract { padding: 22px 26px; background: var(--card); border: 1px solid var(--ink); border-radius: 2px; }
.abstract h2 { font-size: 20px; }
.abstract dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); font-family: var(--sans); font-size: 15px; line-height: 1.75; }
.abstract dt, .abstract dd { padding: 8px 0; border-top: 1px solid var(--rule); }
.abstract dt { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); padding-top: 10px; }
.note-line { font-family: var(--sans); font-size: 14px; color: var(--ink-3); border-left: 2px solid var(--rule-2); padding-left: 12px; }
.hyp { display: grid; gap: 10px; font-family: var(--sans); font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; }
.hyp li { padding: 12px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: 2px; }
.tag-h { display: inline-block; margin-right: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: #fff; background: var(--mark); padding: 1px 8px; border-radius: 2px; vertical-align: 1px; }
.tag-h.is-ink { background: var(--ink); }
.sci-fig { margin: 28px 0; }
.sci-fig-img { background: #fff; border: 1px solid var(--rule); border-radius: 2px; padding: clamp(10px, 2vw, 22px); overflow-x: auto; }
.sci-fig-img img { width: 100%; min-width: 560px; }
.sci-fig figcaption { margin-top: 12px; font-family: var(--sans); font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.sci-fig figcaption b { color: var(--ink); }
.caveat { font-family: var(--sans); font-size: 15px; line-height: 1.8; padding: 14px 18px; background: var(--paper-2); border-left: 2px solid var(--mark); }
.table-wrap { overflow-x: auto; margin: 18px 0; }
.sci-table { width: 100%; min-width: 560px; border-collapse: collapse; font-family: var(--sans); font-size: 14px; line-height: 1.6; }
.sci-table th { text-align: left; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; color: var(--ink-3); padding: 8px 10px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.sci-table td { padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.sci-table tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
.sci-table tr.is-primary td:first-child { box-shadow: inset 2px 0 0 var(--mark); font-weight: 600; }
.plan { display: grid; gap: 8px; font-family: var(--sans); font-size: 15.5px; line-height: 1.8; }
.plan li { position: relative; padding-left: 18px; }
.plan li::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 1px; background: var(--ink); }
.refs { counter-reset: r; display: grid; gap: 8px; font-family: var(--sans); font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.refs li { counter-increment: r; display: grid; grid-template-columns: 30px 1fr; scroll-margin-top: calc(var(--header-h) + 24px); }
.refs li::before { content: counter(r) "."; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.refs li:target { background: color-mix(in srgb, var(--mark) 8%, transparent); }



/* ---------- 研究页：证据档案 ---------- */
.research-head .display { margin-top: 0; font-size: clamp(34px, 4.4vw, 64px); }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid var(--ink); }
.hero-stats > div { padding: 18px 20px 20px 0; }
.hero-stats > div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.hero-stats dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }
.hero-stats dd.big { margin-top: 10px; font-family: var(--serif); font-size: clamp(28px, 2.7vw, 40px); font-weight: 600; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero-stats dd.big span { color: var(--mark); font-weight: 400; margin: 0 .1em; }
.hero-stats dd:last-child { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.caveat-line { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.caveat-line span { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.st { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 2px; font-size: 12.5px; font-weight: 500; white-space: nowrap; vertical-align: middle; }
.st-pass { background: var(--ink); color: var(--paper); }
.st-neg { background: var(--mark); color: #fff; }
.st-part { border: 1px solid var(--ink); color: var(--ink); }
.st-open { border: 1px dashed var(--ink-4); color: var(--ink-3); }
.status-table td:first-child { min-width: 180px; }
.status-table td:nth-child(3) { white-space: nowrap; }
.status-table td:last-child { color: var(--ink-2); }
.case { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px clamp(28px, 4vw, 64px); align-items: start; }
.case-head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 clamp(28px, 4vw, 64px); align-items: end; }
.case-head .case-code { grid-column: 1 / -1; }
.case-head p { padding-bottom: 6px; }
.case-code { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--mark); }
.case-head h3 { margin-top: 8px; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.case-head p { margin-top: 8px; color: var(--ink-3); font-size: 14px; }
.case-dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); font-size: 15px; line-height: 1.75; }
.case-dl dt, .case-dl dd { padding: 10px 0; border-top: 1px solid var(--rule); }
.case-dl dt { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); padding-top: 13px; }
.case-dl dd .st { margin: 2px 6px 2px 0; }
.case .sci-fig { margin: 0; grid-column: 1 / -1; max-width: 1040px; }
.case .case-dl { grid-column: 2; grid-row: 3; }
.case .bounds { grid-column: 1; grid-row: 3; position: sticky; top: calc(var(--header-h) + 24px); }
.funnel { counter-reset: f; display: grid; gap: 6px; }
.funnel li { counter-increment: f; display: grid; grid-template-columns: 26px minmax(0, 1fr); }
.funnel li::before { content: counter(f, decimal-leading-zero); font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); padding-top: 3px; }
.bounds { padding: 14px 18px 16px; background: var(--card); border: 1px solid var(--rule); border-left: 2px solid var(--mark); border-radius: 2px; }
.bounds .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--mark); margin-bottom: 6px; }
.bounds li { position: relative; padding: 4px 0 4px 16px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.bounds li::before { content: "×"; position: absolute; left: 0; top: 4px; font-family: var(--mono); color: var(--mark); }
.verdicts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4vw, 56px); }
.verdict { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; background: var(--card); border: 1px solid var(--rule); border-radius: 2px; }
.verdict.is-neg { border-color: var(--mark); box-shadow: inset 0 3px 0 var(--mark); }
.verdict h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.4; }
.verdict p { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.verdict .en { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.verdict .small { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); }
.wide-fig { max-width: 1040px; margin-top: clamp(28px, 4vw, 48px); }
.wide-fig .sci-fig { margin: 0; }
.table-fold { max-width: 1040px; margin-top: 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.table-fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 0;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--ink-2); }
.table-fold summary::-webkit-details-marker { display: none; }
.table-fold summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px;
  border: 1px solid var(--ink-3); border-radius: 50%; font-size: 13px; line-height: 1; color: var(--ink); transition: transform .2s ease; }
.table-fold[open] summary::before { content: "−"; }
.table-fold summary:hover { color: var(--ink); }
.table-fold summary:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.table-fold .table-wrap { margin: 0 0 18px; }
.rules-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.rules-list li { border-top: 1px solid var(--ink); padding-top: 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
.rules-list .num { display: block; font-size: 11.5px; color: var(--mark); margin-bottom: 6px; }

/* 联系面板 */
.contact-panel { position: fixed; inset: 0; z-index: 350; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--film) 55%, transparent); opacity: 0; transition: opacity .22s ease; }
.contact-panel.is-open { opacity: 1; }
.contact-panel[hidden] { display: none; }  /* display: grid above would override [hidden], leaving an invisible overlay over the page */
.contact-card { position: relative; width: min(560px, 100%); max-height: 100%; overflow-y: auto; background: var(--paper); border: 1px solid var(--ink); border-radius: 2px; padding: 28px 28px 22px; transform: translateY(10px); transition: transform .3s var(--ease); }
.contact-panel.is-open .contact-card { transform: none; }
.contact-card .h2 { margin-top: 10px; font-size: clamp(26px, 3vw, 34px); }
.contact-card .body { margin-top: 8px; }
.contact-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 1px solid var(--rule-2); border-radius: 2px; background: none; color: var(--ink-2); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.contact-close:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding: 14px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: 2px; }
.contact-row .email { font-size: 18px; }
.contact-tpl { display: grid; gap: 8px; margin-top: 16px; }
.contact-tpl label { font-size: 13.5px; color: var(--ink-3); }
.contact-tpl textarea { width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.7; }
.contact-tpl .btn { justify-self: start; }
.contact-card .small { margin-top: 16px; }

/* ---------- 动效 ---------- */
/* 齿孔不再自己转：深色段和页脚是静止的胶片边，动效只留给回应操作和逐帧的地方 */
@keyframes unfold { from { opacity: .2; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.frame img { transition: transform .5s var(--ease); }
.sheet .frame:not(.is-pending):hover img { transform: scale(1.08); }
.app-view:not([hidden]) { animation: panel-in .35s var(--ease); }
.marks.is-intro path { transition: stroke-dashoffset 1.1s var(--ease); }
.marks.is-intro .note { transition: opacity .6s ease .7s; }
.brand svg { overflow: visible; }
.logo-m1 { transform: translateX(var(--logo-shift, 0px)); fill: var(--logo-m1, currentColor); transition: transform .3s var(--ease), fill .2s ease; }
.brand:hover svg { --logo-shift: -9px; --logo-m1: var(--mark); }

/* 进场：只给章节标题和插图，升 8px、淡入；没有脚本或减少动态效果时直接显示 */
@media screen and (prefers-reduced-motion: no-preference) {
  .rv-on .rv { transition: opacity .5s ease-out, translate .55s cubic-bezier(.2, 0, 0, 1); transition-delay: var(--rv-delay, 0ms); }
  .rv-on .rv:not(.is-in) { opacity: 0; translate: 0 8px; }  /* 用 translate，不覆盖元素自带的 transform */
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .nav { gap: 22px; }
  .page-hero-grid { grid-template-columns: 1fr; }
  .fig { max-width: 820px; }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper { grid-template-columns: 180px minmax(0, 1fr); }
  .rules-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verdicts { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-stats > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .case, .case-head { grid-template-columns: minmax(0, 1fr); }
  .case .case-dl, .case .bounds { grid-column: auto; grid-row: auto; position: static; }
  .motions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t-web, .t-wb, .t-paper, .t-slide { grid-column: span 3; } .t-social { grid-column: 2 / span 4; }
  .legend-row { grid-template-columns: 120px 110px minmax(0, 1fr); }
  .legend-row .thumb { width: 120px; }
  .legend-row .hand { grid-column: 2 / -1; }
}
@media (max-width: 860px) {
  :root { --header-h: 54px; --gap: 5px; --rebate: 18px; }
  .nav, .head-right .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .split, .hero-copy, .cta, .reading, .cards, .band .principles, .page-hero-grid, .docs, .protocol-grid { grid-template-columns: 1fr; }
  .protocol-grid > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  /* 112px: 「策略与模型版本」 on one line; 16px side padding (as .doc) gives the descriptions their width back */
  .protocol-grid > div { padding-inline: 16px; }
  .protocol-list li { grid-template-columns: 18px 112px minmax(0, 1fr); gap: 8px; }
  .toc a { grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; }
  .toc span:not(.num):not(.arr) { grid-column: 2; }
  .toc .arr { display: none; }
  .fig-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig-tag { width: 20px; height: 20px; font-size: 10px; }
  .story { height: calc(100svh + 6 * 70vh); }
  .story-inner { padding-block: 14px 14px; }
  .story-sheet { padding-top: 54px; align-items: flex-start; }
  .frame.is-text b { font-size: 19px; }
  .frame.is-text span:last-child { font-size: 12.5px; }
  .story-foot { grid-template-columns: 1fr; gap: 12px; padding-top: 12px; }
  .story-step h3 { font-size: 19px; }
  .story-step p:last-child { font-size: 14px; line-height: 1.7; }
  .story-ticks button { flex: 1; width: auto; height: 26px; }
  .story-count b { font-size: 24px; }
  .doc { padding: 0 16px 18px; }
  .doc dl { grid-template-columns: 76px minmax(0, 1fr); }
  .res-count { margin-left: 0; }
  .paper { grid-template-columns: 1fr; }
  .rules-list, .verdicts { grid-template-columns: 1fr; }
  .case, .case-head { grid-template-columns: minmax(0, 1fr); }
  .case .case-dl, .case .bounds { grid-column: auto; grid-row: auto; position: static; }
  .status-table { min-width: 0; }
  .status-table thead { display: none; }
  .status-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .status-table td { padding: 0; border: 0 !important; min-width: 0 !important; }
  .status-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .status-table td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .status-table td:nth-child(2) { grid-column: 1 / -1; color: var(--ink-3); font-size: 13px; }
  .status-table td:nth-child(4) { grid-column: 1 / -1; font-size: 13.5px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats > div { padding: 14px 12px 16px 0; }
  .hero-stats > div + div { padding-left: 0; border-left: 0; }
  .hero-stats > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--rule); }
  .hero-stats > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .hero-stats dd.big { font-size: 24px; white-space: normal; }
  .case-dl { grid-template-columns: 76px minmax(0, 1fr); font-size: 14.5px; }  /* 64px left 「预注册假设」 touching its text */
  .paper-toc { position: static; }
  .paper-toc ol { columns: 2; column-gap: 20px; }
  .paper-status { display: none; }
  .paper-meta { grid-template-columns: 1fr 1fr; }
  .paper-body { font-size: 16px; line-height: 1.9; }
  .abstract { padding: 16px; }
  .abstract dl { grid-template-columns: 72px minmax(0, 1fr); font-size: 14.5px; }
  .guide summary { gap: 14px; }
  .guide-main b { font-size: 18px; }
  .terms, .lockups, .rules, .cubes, .parts, .type-specimens, .honesty, .dos, .motions { grid-template-columns: 1fr; }
  /* 关于页账本：项目和状态一行，边界另起一行 */
  .ledger-group li { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger-group li > span:last-child { grid-column: 1 / -1; font-size: 13.5px; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apps { grid-template-columns: 1fr; }
  .t-web, .t-social, .t-slide, .t-paper, .t-wb { grid-column: auto; }
  .logo-art { width: 52%; margin-right: 30%; }
  .logo-read li { font-size: 15px; left: calc(100% + 22px); }
  .logo-read em { display: none; }
  .mark-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ratio span { padding: 0 6px; font-size: 10px; }
  .hero-copy .lead { font-size: 15.5px; }
  .hero-copy .actions { margin-top: 16px; }
  .strip { padding-inline: 6px; }
  .rebate { font-size: 8.5px; }
  .rebate.top { padding-top: 5px; }
  .rebate.bottom { padding-bottom: 5px; }
  .rebate::before { height: 4px; background-size: 10px 4px; }
  .rebate .edge-r { display: none; }
  .frame:nth-child(n+5), .rebate .ticks span:nth-child(n+5) { display: none; }
  .loupe img { object-position: 66% 55%; }
  .loupe-mark text { display: none; }
  .loupe-copy { width: auto; right: var(--gutter); top: auto; bottom: 64px; transform: none; padding: 16px 16px 18px; background: color-mix(in srgb, var(--paper) 90%, transparent); border: 1px solid var(--rule); border-radius: 2px; }
  .legend-row { grid-template-columns: 96px minmax(0, 1fr); }
  .legend-row .thumb { width: 96px; grid-row: span 2; }
  .legend-row dl, .legend-row .hand { grid-column: 2; }
  .legend-row .body { grid-column: 1 / -1; }
  .app-body { grid-template-columns: 1fr; min-height: 0; }
  .app-side { border-right: 0; border-bottom: 1px solid var(--rule); display: flex; gap: 4px; overflow-x: auto; padding: 8px; }
  .app-side .k { display: none; }
  .app-side button { width: auto; gap: 8px; white-space: nowrap; }
  .app-main { padding: 18px 14px; }
  .app-grid { grid-template-columns: 1fr; }
  .app-bar span { display: none; }
}
@media (min-width: 861px) { .mobile-menu { display: none; } }
/* 窄屏：研究页的四个数字一行一个，「前 → 后」不再被折成两行 */
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .hero-stats > div + div { border-top: 1px solid var(--rule); }
  .hero-stats dd.big { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-panel, .contact-card { transition: none; }
  .strip, .btn .arr, .marks [data-step], .marks path[data-step] { transition: none; }
  *, *::before, *::after { animation: none !important; }
  .frame img, .story-step, .toc a > *, .paper-toc li a > span, .logo-m1, .plus { transition: none !important; }
  .toast { transform: translate(-50%, 0); }  /* fade only, no slide */
  .sheet .frame:not(.is-pending):hover img, .toc a:hover > * { transform: none; }
  .brand:hover svg { --logo-shift: 0px; }
  /* 首屏放大镜：不跟着滚动缩放，到位后整幅淡入 */
  .loupe { opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
  .loupe.is-on { opacity: 1; transition: opacity .3s ease; }
}
@media print { .site-header { display: none !important; } }
@media (max-width: 860px) { .text-sheet .rebate .ticks { visibility: hidden; } }