/* Hallmark · macrostructure: 05 Workbench · tokens · theme: custom (tuned) · vibe: "darkroom light table, brass, warm, quiet"
 * 颜色取自 App 的 FilmTokens.swift（bgDeep / textPrimary / accentGold …），只换成 OKLCH 写法。
 * 页面里的颜色和字体一律引用这里的变量，不直接写色值。
 */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* 纸面：暗房台面，由深到浅 */
  --color-stage:   oklch(15.6% 0.005 67);   /* #0E0C0A */
  --color-paper:   oklch(20.1% 0.007 78);   /* #181613 bgDeep */
  --color-paper-2: oklch(24.0% 0.008 85);   /* #211F1B */
  --color-paper-3: oklch(26.6% 0.010 81);   /* #282520 bgCard */
  --color-paper-veil: oklch(20.1% 0.007 78 / 0.92); /* 底部悬浮条，透出一点下面的内容 */

  /* 分隔线 */
  --color-rule-2:  oklch(24.1% 0.010 81);   /* #221F1A hairline */
  --color-rule:    oklch(27.1% 0.012 78);   /* #2A2620 borderLine */
  --color-rule-strong: oklch(32.8% 0.018 78); /* #3A342B */

  /* 文字：对 paper 的对比度 15.6 / 7.2 / 5.5 */
  --color-ink:     oklch(95.0% 0.011 85);   /* #F2EEE6 */
  --color-ink-2:   oklch(71.5% 0.021 80);   /* #AAA295 */
  --color-muted:   oklch(64.6% 0.018 79);   /* #948D82 */

  /* 品牌金：只用于链接、当前项、主按钮 */
  --color-accent:        oklch(73.1% 0.079 74);  /* #C6A16F accentGold */
  --color-accent-bright: oklch(83.0% 0.078 76);  /* #E5C18E accentGoldBright */
  --color-accent-ink:    oklch(21.2% 0.027 76);  /* #20170A，金底上的字，7.3:1 */
  --color-accent-wash:   oklch(73.1% 0.079 74 / 0.10);
  --color-accent-line:   oklch(73.1% 0.079 74 / 0.35);
  --color-focus:         oklch(83.0% 0.130 76);

  /* 字体：拉丁标题用自带的 Fraunces；中文标题走系统宋体；正文与 App 一致用系统无衬线 */
  --font-display: "Fraunces", "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* 字号 */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.5rem, 1.2vw + 1.1rem, 1.875rem);
  --text-2xl: clamp(1.75rem, 2.2vw + 1.1rem, 2.5rem);
  --text-display: clamp(2.25rem, 3vw + 1rem, 3.75rem);

  /* 间距（4pt） */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  --page-max: 72rem;
  --prose-max: 40rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-shot: 22px;
  --rule-hair: 1px;

  /* 动效 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
}

/* Hallmark · macrostructure: 05 Workbench · hero: H2 split (copy left, real screenshot right) · genre: editorial
 * theme: custom (tuned) · vibe: "darkroom light table, brass, warm, quiet" · paper: oklch(20.1% 0.007 78) · accent: oklch(73.1% 0.079 74)
 * display: Fraunces 600 + 系统宋体 · body: 系统无衬线（与 App 一致）· axes: dark / roman-serif / warm
 * nav: N6 masthead (compact) · footer: Ft1 mast-headed · enrichment: 真机截图 + AI 片盒 / 节令相框 / 暗房横幅 · studied: no · context: inferred
 * 品牌金的彩度（0.079）低于 Hallmark 建议的 0.12 下限：沿用 App 现有配色，不另调。
 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5
 * contrast: pass (40–41) · nav: N6 · footer: Ft1 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57) · icons: pass (30)
 * 等宽字体只用于数据读数（片盒代号、拍摄参数、步骤编号、规格行），不进正文段落。
 */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-stage);
  scroll-padding-top: var(--space-md);
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body:lang(en) { line-height: 1.65; }
main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-bright); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--color-accent-line); color: var(--color-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
p, ul, ol, dl, table, figure { margin: 0; }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-sm); top: -3rem; z-index: 20;
  padding: var(--space-2xs) var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink);
  border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus-visible { top: var(--space-sm); }

/* ── 刊头（N6 紧凑版） ───────────────────────────── */
.mast { padding-block: var(--space-md) 0; text-align: center; }
.mast-line {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
.mast-name {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin-top: var(--space-2xs);
  color: var(--color-ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); line-height: 1.1;
  white-space: nowrap;
}
.mast-name img { width: 2.75rem; height: 2.75rem; border-radius: 22%; }
.mast-name .latin { color: var(--color-accent); font-size: 0.62em; letter-spacing: 0.02em; }
.mast-nav { margin-top: var(--space-xs); }
.mast-nav ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3xs) var(--space-md);
  list-style: none; padding: 0; margin: 0;
}
.mast-nav a {
  display: inline-block; white-space: nowrap;
  padding: var(--space-3xs) 0;
  color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.mast-nav a:hover { color: var(--color-ink); }
.mast-nav a[aria-current="page"] { color: var(--color-accent-bright); border-bottom-color: var(--color-accent-line); }
.mast-nav .lang { color: var(--color-accent); }
.mast-rule {
  border: 0; height: 4px; margin: var(--space-sm) 0 0;
  border-top: var(--rule-hair) solid var(--color-rule-strong);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

/* ── 按钮 ───────────────────────────── */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 2.875rem; padding: 0 var(--space-md);
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-bright); color: var(--color-accent-ink); }
.btn-quiet { border-color: var(--color-accent-line); color: var(--color-accent-bright); background: transparent; }
.btn-quiet:hover { border-color: var(--color-accent); color: var(--color-ink); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.pending {
  display: inline-flex; align-items: center; min-height: 2.875rem; padding: 0 var(--space-md);
  border: 1px dashed var(--color-rule-strong); border-radius: 999px;
  color: var(--color-ink-2); font-weight: 600; white-space: nowrap;
}
.price-note { font-size: var(--text-sm); color: var(--color-ink-2); }
.spec { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.02em; }

/* ── 截图 ───────────────────────────── */
.shot { margin: 0; min-width: 0; }
.shot img {
  width: 100%;
  border-radius: var(--radius-shot);
  border: var(--rule-hair) solid var(--color-rule-strong);
  background: var(--color-stage);
  aspect-ratio: 1320 / 2868;
}
.shot figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6; }

/* ── 首屏（H2 分栏） ───────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-xl);
  align-items: start;
  padding-block: var(--space-xl) var(--space-2xl);
}
.hero h1 { font-size: var(--text-display); letter-spacing: -0.01em; }
.hero h1:lang(zh) { letter-spacing: 0.01em; line-height: 1.3; font-size: clamp(2rem, 3.2vw + 1rem, 3.5rem); }
.hero .lede { margin-top: var(--space-md); font-size: var(--text-md); color: var(--color-ink-2); max-width: 36rem; }
.hero .actions { margin-top: var(--space-lg); }
.hero .spec { margin-top: var(--space-md); }
.hero .shot { justify-self: end; width: min(100%, 20rem); }

.hero-copy { padding-top: var(--space-lg); }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise var(--dur-long) var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero-copy > :nth-child(4) { animation-delay: 180ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ── 节标题 ───────────────────────────── */
.section { padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.section-head { max-width: 40rem; margin-bottom: var(--space-xl); }
.section-head h2 { font-size: var(--text-2xl); }
.section-head p { margin-top: var(--space-xs); color: var(--color-ink-2); }

/* ── 工作台导览 ───────────────────────────── */
.tour { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
.step-copy { position: sticky; top: var(--space-lg); padding-top: var(--space-lg); max-width: 26rem; }
.step--flip .step-copy { order: 2; }
.step-no { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); letter-spacing: 0.08em; }
.step h3 { margin-top: var(--space-2xs); font-size: var(--text-xl); }
.step p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.step .more { display: inline-block; margin-top: var(--space-sm); white-space: nowrap; }
.step-shots { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.step-shots .shot { width: min(100%, 20rem); }
.step-shots--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }
.step-shots--pair .shot:nth-child(2) { margin-top: var(--space-2xl); }

.tour-rest { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
.cta-bar {
  position: sticky; bottom: 0; z-index: 5;
  min-width: 0;
  margin-inline: calc(var(--page-gutter) * -1);
  padding: var(--space-xs) var(--page-gutter) calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  background: var(--color-paper-veil);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: var(--rule-hair) solid var(--color-rule-strong);
}
.cta-bar-text { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.cta-bar-text img { width: 2rem; height: 2rem; border-radius: 22%; flex: none; }
.cta-bar-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 片盒一排 ───────────────────────────── */
.stocks {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-sm);
}
.stocks li { min-width: 0; }
.stocks img { width: 100%; aspect-ratio: 267 / 400; border-radius: var(--radius-sm); }
.stocks .code { display: block; margin-top: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink); white-space: nowrap; }
.stocks .tone { display: block; font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; }

/* ── 暗房横幅 ───────────────────────────── */
.band { margin: 0; }
.band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 70% 50%; border-radius: var(--radius-md); }

/* ── 事实清单（隐私、价格） ───────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
.facts { border-top: var(--rule-hair) solid var(--color-rule-strong); }
.facts > div {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-sm);
  padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule);
}
.facts dt { font-weight: 600; color: var(--color-ink); }
.facts dd { margin: 0; color: var(--color-ink-2); }
.split h2 { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.split .after { margin-top: var(--space-sm); font-size: var(--text-sm); }

/* ── 指南列表 ───────────────────────────── */
.index-list { list-style: none; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-strong); }
.index-list li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.index-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); align-items: baseline;
  padding-block: var(--space-md); text-decoration: none; color: var(--color-ink);
}
.index-list .t { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.35; }
.index-list .d { grid-column: 1; color: var(--color-ink-2); font-size: var(--text-sm); }
.index-list .go { grid-row: 1; grid-column: 2; color: var(--color-accent); white-space: nowrap; font-size: var(--text-sm); }
.index-list a:hover .t { color: var(--color-accent-bright); }

/* ── 内页 ───────────────────────────── */
.page-head { padding-block: var(--space-2xl) var(--space-xl); max-width: 48rem; }
.crumbs { font-size: var(--text-sm); color: var(--color-muted); }
.crumbs a { color: var(--color-muted); white-space: nowrap; }
.page-head h1 { margin-top: var(--space-2xs); font-size: var(--text-2xl); }
.page-head h1:lang(en) { font-size: clamp(2rem, 2.6vw + 1.1rem, 3rem); }
.page-head .lede { margin-top: var(--space-sm); font-size: var(--text-md); color: var(--color-ink-2); }
.page-head .actions { margin-top: var(--space-md); }
.page-head .meta { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: var(--space-2xl);
  align-items: start;
  padding-bottom: var(--space-3xl);
}
.layout > aside { position: sticky; top: var(--space-lg); display: grid; gap: var(--space-md); }
.layout > aside .shot { width: min(100%, 18rem); }

.prose { max-width: var(--prose-max); }
.prose > * + * { margin-top: var(--space-sm); }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--text-xl); }
.prose h3 { margin-top: var(--space-lg); font-size: var(--text-lg); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-xs); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-3xs); }
.prose li::marker { color: var(--color-accent); }
.prose strong { color: var(--color-ink); font-weight: 600; }
.prose p, .prose li { color: var(--color-ink-2); }
.prose .note {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  color: var(--color-ink-2);
}
.prose figure { margin-top: var(--space-lg); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; color: var(--color-ink); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--space-sm); }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
th { color: var(--color-ink); font-weight: 600; white-space: nowrap; border-bottom-color: var(--color-rule-strong); }
td { color: var(--color-ink-2); }
td.mono, th.mono { white-space: nowrap; }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); list-style: none; padding: 0; }
.gallery--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gallery figure, .gallery li { min-width: 0; margin: 0; }
.gallery img { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-paper-2); }
.gallery figcaption, .gallery .cap { margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }

.stocks--page { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }

/* ── 常见问题 ───────────────────────────── */
.faq { border-top: var(--rule-hair) solid var(--color-rule-strong); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: var(--space-sm); align-items: baseline;
  padding-block: var(--space-sm);
  font-weight: 600; color: var(--color-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--color-accent-bright); }
.faq .answer { padding-bottom: var(--space-md); color: var(--color-ink-2); }
.faq .answer > * + * { margin-top: var(--space-2xs); }
.faq h2 { margin: var(--space-2xl) 0 var(--space-xs); font-size: var(--text-lg); }
.faq h2:first-child { margin-top: 0; }

.contact { display: grid; gap: var(--space-2xs); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-md); background: var(--color-paper-2); }
.contact h2 { font-size: var(--text-lg); }
.contact p { color: var(--color-ink-2); font-size: var(--text-sm); }

/* ── 页脚（Ft1） ───────────────────────────── */
.foot { margin-top: auto; background: var(--color-stage); border-top: var(--rule-hair) solid var(--color-rule-strong); }
.foot .wrap { padding-block: var(--space-xl); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md) var(--space-xl); align-items: end; }
.foot-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink); white-space: nowrap; }
.foot-tag { margin-top: var(--space-3xs); color: var(--color-muted); font-size: var(--text-sm); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3xs) var(--space-md); list-style: none; padding: 0; font-size: var(--text-sm); }
.foot-links a { color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.foot-links a:hover { color: var(--color-accent-bright); text-decoration: underline; }
.foot-meta { grid-column: 1 / -1; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-md); }
.foot-meta a { color: var(--color-muted); }

/* ── 404 ───────────────────────────── */
.lost { padding-block: var(--space-3xl); max-width: 36rem; }
.lost h1 { font-size: var(--text-2xl); }
.lost p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.lost .actions { margin-top: var(--space-lg); }

/* ── 窄屏 ───────────────────────────── */
@media (max-width: 960px) {
  .stocks:not(.stocks--page) {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 7rem;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2xs);
    -webkit-overflow-scrolling: touch;
  }
  .stocks:not(.stocks--page) li { scroll-snap-align: start; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 36rem; }
  .gallery--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl) var(--space-2xl); gap: var(--space-xl); }
  .hero .shot { justify-self: center; width: min(78%, 18rem); }
  .step, .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .step-copy { position: static; padding-top: 0; max-width: none; }
  .step--flip .step-copy { order: 0; }
  .step-shots .shot { width: min(78%, 18rem); }
  .step-shots--pair { gap: var(--space-sm); }
  .step-shots--pair .shot { width: 100%; }
  .step-shots--pair .shot:nth-child(2) { margin-top: var(--space-lg); }
  .tour, .tour-rest { gap: var(--space-2xl); }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .foot .wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .foot-links { justify-content: flex-start; }
  .band img { aspect-ratio: 4 / 3; }
  .section-head { margin-bottom: var(--space-lg); }
}

@media (max-width: 480px) {
  .layout > aside { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .stocks--page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery--styles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
  .cta-bar .btn { padding: 0 var(--space-sm); font-size: var(--text-sm); min-height: 2.5rem; }
  .cta-bar-text span { display: none; }
  .actions .btn, .actions .pending { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 正文里插一张截图 */
.shot--inline { max-width: 18rem; }
.mast-nav a[aria-current="true"] { color: var(--color-ink); border-bottom-color: var(--color-rule-strong); }
.tour + .tour-rest { margin-top: var(--space-3xl); }
@media (max-width: 768px) { .tour + .tour-rest { margin-top: var(--space-2xl); } }
.index-list--page { margin-bottom: var(--space-3xl); }
.ph { display: inline-block; }
/* 侧栏放了两张长截图时不吸顶，否则第二张要滚到底才露出来 */
.layout > aside:has(> .shot + .shot) { position: static; }