/* ============================================================================
   风暴娱乐 FENGBAO STUDIO —— 蓝晒影棚视觉系统 / CYANOTYPE
   文件：assets/css/cyanotype.css
   组织：@layer tokens → reset → base → layout → components → utils
   说明：全站唯一设计系统文件，页面级构图在 frames.css。
   ========================================================================== */

@layer tokens, reset, base, layout, components, utils;

/* ---------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* 墨与纸：蓝晒印相的普鲁士蓝 + 亚麻纸 */
    --prussian: #0c1f33;
    --prussian-2: #14304d;
    --blue: #2f6d9e;
    --blue-2: #6f9dc0;
    --wash: #dde7ef;
    --paper: #f3f0e7;
    --paper-2: #eae5d8;
    --paper-3: #fbf9f3;

    --line: rgba(12, 31, 51, .14);
    --line-2: rgba(12, 31, 51, .3);
    --line-3: rgba(243, 240, 231, .22);

    --sun: #eebf3c;
    --flare: #c9553a;
    --mute: #66748a;
    --ok: #2f7d5c;

    /* 排版 */
    --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, "Times New Roman", serif;
    --sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* 尺寸 */
    --rail: 92px;
    --strip: 34px;
    --max: 1200px;
    --pad: clamp(18px, 3.6vw, 54px);
    --gap: clamp(14px, 1.8vw, 26px);
    --radius: 2px;

    --shadow: 0 1px 0 var(--line), 0 18px 44px -28px rgba(12, 31, 51, .45);
    --ease: cubic-bezier(.22, .61, .36, 1);
  }
}

/* ----------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img, svg { max-width: 100%; display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
  table { border-collapse: collapse; width: 100%; }
  a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------------------ base */
@layer base {
  body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.78;
    color: var(--prussian);
    background: var(--paper);
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* 纸面颗粒：一层极淡的印刷网点 */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: radial-gradient(rgba(12, 31, 51, .06) 0.5px, transparent 0.6px);
    background-size: 3px 3px;
  }

  h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.005em;
  }

  h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
  h2 { font-size: clamp(1.45rem, 2.6vw, 2.15rem); }
  h3 { font-size: clamp(1.12rem, 1.5vw, 1.34rem); }
  h4 { font-size: 1rem; }

  p + p { margin-top: .85em; }
  strong { font-weight: 600; color: var(--prussian); }

  a:hover { color: var(--blue); }
  ::selection { background: var(--sun); color: var(--prussian); }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  .shell { position: relative; z-index: 1; }

  @media (min-width: 1120px) {
    .shell { margin-left: var(--rail); }
  }

  .wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--pad);
  }

  /* 顶部胶片边条 */
  .strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--strip);
    padding-inline: var(--pad);
    background: var(--prussian);
    color: rgba(243, 240, 231, .82);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    overflow: hidden;
  }
  .strip__brand { color: var(--sun); white-space: nowrap; }
  .strip__note { margin-left: auto; white-space: nowrap; }
  .strip__meter {
    position: relative;
    flex: 1;
    height: 3px;
    min-width: 40px;
    background-image: repeating-linear-gradient(to right, rgba(243, 240, 231, .35) 0 1px, transparent 1px 12px);
  }
  .strip__meter i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p, 0%);
    background: var(--sun);
    transition: width .18s linear;
  }
  @media (max-width: 720px) {
    .strip__note { display: none; }
  }

  /* 左轨：固定胶片齿孔 + 测光尺 */
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--rail);
    z-index: 40;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-block: 22px;
    background: var(--prussian);
    color: var(--paper);
  }
  .rail::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 22px;
    background-image: radial-gradient(circle at 50% 50%, var(--paper) 4.5px, transparent 5px);
    background-size: 22px 30px;
    background-repeat: repeat-y;
    opacity: .85;
  }
  .rail__mark {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .42em;
    writing-mode: vertical-rl;
    color: var(--sun);
    white-space: nowrap;
  }
  .rail__scale {
    position: relative;
    flex: 1;
    width: 1px;
    margin-block: 26px;
    background-image: repeating-linear-gradient(to bottom, rgba(243, 240, 231, .5) 0 1px, transparent 1px 14px);
  }
  .rail__scale i {
    position: absolute;
    inset: 0 0 auto 0;
    width: 1px;
    height: var(--p, 0%);
    background: var(--sun);
    box-shadow: 0 0 10px rgba(238, 191, 60, .8);
  }
  .rail__scale b {
    position: absolute;
    left: -3px;
    top: var(--p, 0%);
    width: 7px;
    height: 1px;
    background: var(--sun);
  }
  .rail__num {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: rgba(243, 240, 231, .6);
    writing-mode: vertical-rl;
  }
  @media (min-width: 1120px) { .rail { display: flex; } }

  /* 页头 */
  .mast {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 30px);
    padding: 14px var(--pad);
    background: rgba(243, 240, 231, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-2);
  }
  .mark { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  .mark__glyph {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    background: var(--prussian);
    color: var(--sun);
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1;
  }
  .mark__name {
    display: block;
    font-family: var(--serif);
    font-size: 16px;
    letter-spacing: .06em;
    line-height: 1.2;
  }
  .mark__name em {
    display: block;
    font-family: var(--mono);
    font-style: normal;
    font-size: 9px;
    letter-spacing: .26em;
    color: var(--mute);
    margin-top: 3px;
  }
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 20px);
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: auto;
    font-size: 13.5px;
    letter-spacing: .06em;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    position: relative;
    padding-block: 6px;
    white-space: nowrap;
    color: var(--prussian-2);
    transition: color .2s var(--ease);
  }
  .nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--sun);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--ease);
  }
  .nav a:hover::after, .nav a.is-on::after { transform: scaleX(1); }
  .nav a.is-on { color: var(--prussian); font-weight: 600; }
  .mast__act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  @media (max-width: 980px) {
    .mast { flex-wrap: wrap; row-gap: 10px; }
    .nav { order: 3; width: 100%; margin-left: 0; }
    .mast__act { margin-left: auto; }
  }
  @media (max-width: 560px) {
    .mast__act .btn--line { display: none; }
  }

  /* 主体与分节 */
  main { display: block; }
  .band { padding-block: clamp(44px, 6vw, 88px); border-bottom: 1px solid var(--line); }
  .band--tight { padding-block: clamp(30px, 4vw, 56px); }
  .band--ink { background: var(--prussian); color: rgba(243, 240, 231, .9); border-bottom-color: transparent; }
  .band--wash { background: var(--wash); }
  .band--paper2 { background: var(--paper-2); }

  /* 页脚 */
  .foot {
    background: var(--prussian);
    color: rgba(243, 240, 231, .74);
    padding-block: clamp(38px, 5vw, 62px) 22px;
    font-size: 13.5px;
  }
  .foot a:hover { color: var(--sun); }
  .foot__top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: clamp(20px, 3vw, 44px);
  }
  .foot__brand .mark__name { color: var(--paper); }
  .foot__brand .mark__name em { color: rgba(243, 240, 231, .5); }
  .foot__brand .mark__glyph { background: var(--sun); color: var(--prussian); }
  .foot p { line-height: 1.8; }
  .foot h4 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--sun);
    margin-bottom: 12px;
  }
  .foot li + li { margin-top: 7px; }
  .foot__note {
    margin-top: clamp(26px, 3vw, 40px);
    padding-top: 18px;
    border-top: 1px solid var(--line-3);
    display: grid;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.9;
    color: rgba(243, 240, 231, .62);
  }
  .foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: rgba(243, 240, 231, .45);
  }
  @media (max-width: 860px) {
    .foot__top { grid-template-columns: 1fr 1fr; }
  }
}

/* ------------------------------------------------------------ components */
@layer components {
  /* —— 小标与分节头 —— */
  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--blue);
  }
  .kicker::before {
    content: "";
    width: 16px;
    height: 1px;
    background: currentColor;
  }
  .band--ink .kicker { color: var(--sun); }

  .sechead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    margin-bottom: clamp(22px, 3vw, 38px);
  }
  .sechead h2 { max-width: 22em; }
  .sechead__more {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mute);
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 3px;
    white-space: nowrap;
  }
  .sechead__more:hover { color: var(--prussian); border-color: var(--sun); }
  .lede { font-size: clamp(15px, 1.3vw, 17px); color: #35465c; max-width: 46em; }

  /* —— 按钮 —— */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 13.5px;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
  }
  .btn--ink { background: var(--prussian); color: var(--paper); }
  .btn--ink:hover { background: var(--blue); color: #fff; transform: translateY(-1px); }
  .btn--sun { background: var(--sun); color: var(--prussian); }
  .btn--sun:hover { background: #f6d167; transform: translateY(-1px); }
  .btn--line { border-color: var(--line-2); color: var(--prussian); background: transparent; }
  .btn--line:hover { border-color: var(--prussian); background: var(--prussian); color: var(--paper); }
  .btn--ghost { border-color: var(--line-3); color: var(--paper); }
  .btn--ghost:hover { border-color: var(--sun); color: var(--sun); }
  .btn__arw { font-family: var(--mono); font-size: 12px; }

  /* —— 取景框（主视觉容器） —— */
  .finder {
    position: relative;
    padding: clamp(26px, 4vw, 52px);
    border: 1px solid var(--line-2);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%),
      var(--paper-3);
  }
  .finder__br {
    position: absolute;
    width: 20px; height: 20px;
    border: 0 solid var(--sun);
  }
  .finder__br--tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
  .finder__br--tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
  .finder__br--bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
  .finder__br--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
  .finder__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 18px;
  }
  .finder__meta b { color: var(--flare); font-weight: 600; }

  /* —— 蓝晒图版（纯 CSS，无图片依赖） —— */
  .plate {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background:
      radial-gradient(circle at var(--px, 34%) var(--py, 26%), var(--glow, rgba(129, 173, 208, .85)), transparent 58%),
      linear-gradient(var(--deg, 156deg), var(--c1, #27506f) 0%, var(--c2, #0a1727) 78%);
    isolation: isolate;
  }
  .plate::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px);
    mix-blend-mode: soft-light;
    opacity: .8;
  }
  .plate::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(243, 240, 231, .26);
    background-image:
      linear-gradient(rgba(243, 240, 231, .0) 49.6%, rgba(243, 240, 231, .22) 50%, rgba(243, 240, 231, .0) 50.4%),
      linear-gradient(90deg, rgba(243, 240, 231, .0) 49.6%, rgba(243, 240, 231, .22) 50%, rgba(243, 240, 231, .0) 50.4%);
  }
  .plate__no {
    position: absolute;
    left: 18px; bottom: 14px;
    z-index: 2;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .24em;
    color: rgba(243, 240, 231, .82);
  }
  .plate__tag {
    position: absolute;
    right: 14px; top: 12px;
    z-index: 2;
    padding: 3px 8px;
    background: var(--sun);
    color: var(--prussian);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .plate--sun { --c1: #d9a02f; --c2: #6d3517; --glow: #f8dfa0; --deg: 200deg; }
  .plate--ink { --c1: #1b3a55; --c2: #06101c; --glow: #7ba6c6; }
  .plate--cool { --c1: #3f7fa8; --c2: #12283c; --glow: #cfe3f1; --px: 62%; --py: 32%; }
  .plate--warm { --c1: #8f6b4e; --c2: #2b1d15; --glow: #e8c9a3; --deg: 130deg; }
  .plate--mono { --c1: #4a4f56; --c2: #14161a; --glow: #cfd3d6; --deg: 172deg; }
  .plate--violet { --c1: #4b4470; --c2: #171326; --glow: #c3b7e4; --px: 70%; --deg: 145deg; }

  /* —— 接触印相表（卡片网格） —— */
  .sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 1px;
    background: var(--line-2);
    border: 1px solid var(--line-2);
  }
  .frame {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--paper);
    transition: background .25s var(--ease), transform .25s var(--ease);
  }
  .frame:hover { background: var(--paper-3); }
  .frame__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--mute);
    text-transform: uppercase;
  }
  .frame__head b { color: var(--flare); font-weight: 600; }
  .frame h3 { font-size: 1.08rem; }
  .frame p { font-size: 13.5px; color: #3b4c61; line-height: 1.75; }
  .frame .plate { aspect-ratio: 16 / 11; }

  /* —— 数据 / 规格表 —— */
  .ledger { border-top: 1px solid var(--line-2); }
  .ledger__row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
  }
  .ledger__row:hover { background: rgba(47, 109, 158, .05); }
  .ledger__no {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    color: var(--mute);
  }
  .ledger__main b { font-weight: 600; }
  .ledger__main span { display: block; font-size: 13px; color: #43536a; }
  .ledger__val {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--blue);
    white-space: nowrap;
  }

  .spec { width: 100%; font-size: 13.5px; }
  .spec th, .spec td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .spec thead th {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
  }
  .spec tbody tr:hover { background: rgba(47, 109, 158, .05); }
  .spec td:first-child { white-space: nowrap; font-weight: 600; }
  .table-scroll { overflow-x: auto; border: 1px solid var(--line-2); }
  .table-scroll .spec { min-width: 620px; }
  .table-scroll .spec th:first-child, .table-scroll .spec td:first-child { padding-left: 18px; }

  /* —— 步骤（曝光三要素式） —— */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); counter-reset: st; }
  .step {
    position: relative;
    padding: 22px 20px 24px;
    border: 1px solid var(--line);
    background: var(--paper-3);
    counter-increment: st;
  }
  .step::before {
    content: counter(st, decimal-leading-zero);
    position: absolute;
    right: 14px; top: 8px;
    font-family: var(--serif);
    font-size: 40px;
    line-height: 1;
    color: rgba(12, 31, 51, .1);
  }
  .step h3 { margin-bottom: 8px; }
  .step p { font-size: 13.5px; color: #3b4c61; }
  .step__tag {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--blue);
    text-transform: uppercase;
  }

  /* —— 标签 —— */
  .tags { display: flex; flex-wrap: wrap; gap: 7px; }
  .tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.7;
    letter-spacing: .04em;
    color: #3d4e64;
    cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
  }
  .tag:hover { border-color: var(--blue); }
  .tag--solid { background: var(--prussian); border-color: var(--prussian); color: var(--paper); }
  .tag--sun { background: rgba(238, 191, 60, .22); border-color: rgba(238, 191, 60, .7); color: #6d4b02; }

  /* —— 数据带 —— */
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--line-3);
    border-block: 1px solid var(--line-3);
  }
  .stat { padding: 22px 18px; background: var(--prussian); }
  .stat b {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.1;
    color: var(--sun);
  }
  .stat span { display: block; margin-top: 6px; font-size: 12.5px; letter-spacing: .06em; color: rgba(243, 240, 231, .68); }

  /* —— 引文 —— */
  .quote {
    padding-left: 22px;
    border-left: 2px solid var(--sun);
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.7vw, 1.32rem);
    line-height: 1.72;
  }
  .quote cite {
    display: block;
    margin-top: 12px;
    font-family: var(--mono);
    font-style: normal;
    font-size: 10.5px;
    letter-spacing: .2em;
    color: var(--mute);
    text-transform: uppercase;
  }

  /* —— 提示条 —— */
  .note {
    padding: 16px 18px;
    border: 1px solid rgba(238, 191, 60, .6);
    background: rgba(238, 191, 60, .12);
    font-size: 13.5px;
    line-height: 1.8;
  }
  .note b { color: #6d4b02; }
  .note--line { border-color: var(--line-2); background: var(--paper-3); }

  /* —— CTA 带 —— */
  .cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
  }
  .cta__acts { display: flex; flex-wrap: wrap; gap: 10px; }
  @media (max-width: 720px) { .cta { grid-template-columns: 1fr; } }

  /* —— 双栏 / 三栏 —— */
  .duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
  .tri { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
  .stack > * + * { margin-top: 14px; }
  .stack-lg > * + * { margin-top: 26px; }

  /* —— 卡片 —— */
  .card {
    padding: clamp(20px, 2.6vw, 30px);
    border: 1px solid var(--line-2);
    background: var(--paper-3);
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
  }
  .card:hover { border-color: var(--blue); box-shadow: var(--shadow); }
  .card h3 { margin-bottom: 10px; }
  .card p { font-size: 13.8px; color: #3b4c61; }
  .card__meta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--line-2);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    color: var(--mute);
  }
  .card--link { display: block; }

  /* —— 面包屑 —— */
  .crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
  }
  .crumb a:hover { color: var(--prussian); }
  .crumb i { font-style: normal; color: var(--line-2); }

  /* —— 文章正文 —— */
  .art { max-width: 46em; }
  .art h2 { margin: 34px 0 12px; }
  .art h3 { margin: 26px 0 10px; }
  .art p, .art li { color: #33455b; }
  .art p { margin-top: 14px; }
  .art ul, .art ol { margin-top: 14px; padding-left: 0; }
  .art ul li { position: relative; padding-left: 18px; margin-top: 8px; }
  .art ul li::before {
    content: "";
    position: absolute;
    left: 2px; top: .72em;
    width: 6px; height: 6px;
    background: var(--sun);
  }
  .art ol { counter-reset: ol; }
  .art ol li { position: relative; padding-left: 26px; margin-top: 8px; counter-increment: ol; }
  .art ol li::before {
    content: counter(ol) ".";
    position: absolute;
    left: 0; top: 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--blue);
  }
  .art figure { margin: 26px 0; }
  .art figcaption {
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    color: var(--mute);
    text-transform: uppercase;
  }
  .art table { margin-top: 18px; }

  /* —— 折叠问答 —— */
  .faq { border-top: 1px solid var(--line-2); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 15px 2px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before {
    content: "+";
    font-family: var(--mono);
    font-size: 14px;
    color: var(--blue);
  }
  .faq details[open] summary::before { content: "−"; }
  .faq details[open] summary { color: var(--blue); }
  .faq p { padding: 0 0 16px 26px; font-size: 13.8px; color: #3b4c61; }

  /* —— 表单 —— */
  .form { display: grid; gap: 14px; }
  .field { display: grid; gap: 6px; }
  .field label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .field input, .field select, .field textarea {
    padding: 11px 13px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--paper-3);
    font-size: 14px;
    transition: border-color .2s var(--ease);
  }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: none; }
  .field textarea { min-height: 108px; resize: vertical; }
  .form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
  .form__msg { font-size: 13px; color: var(--ok); min-height: 1.4em; }

  /* —— 首屏 —— */
  .hero { position: relative; overflow: hidden; }
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse at 76% 18%, rgba(238, 191, 60, .16), transparent 52%),
      radial-gradient(ellipse at 18% 84%, rgba(47, 109, 158, .18), transparent 58%);
    pointer-events: none;
  }
  .hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(24px, 3.4vw, 46px); grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: center; }
  .hero__params {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    color: var(--mute);
    text-transform: uppercase;
  }
  .hero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }

  /* —— 页面标题区 —— */
  .pagehead { padding-block: clamp(30px, 4vw, 56px) clamp(22px, 3vw, 34px); border-bottom: 1px solid var(--line); }
  .pagehead h1 { margin: 12px 0 14px; max-width: 20em; }
  .pagehead .lede { max-width: 40em; }

  /* —— 移动端折叠条 —— */
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* —— 动效 —— */
  [data-shutter="reveal"] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  [data-shutter="reveal"].is-in { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- utils */
@layer utils {
  .u-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 99;
    padding: 10px 16px;
    background: var(--prussian);
    color: var(--paper);
  }
  .u-skip:focus { left: 8px; top: 8px; }
  .u-mono { font-family: var(--mono); letter-spacing: .12em; }
  .u-mute { color: var(--mute); }
  .u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .u-mt { margin-top: clamp(20px, 2.6vw, 34px); }
  .u-mt-s { margin-top: 12px; }
  .u-scroll-hint { display: none; }
  @media (max-width: 720px) { .u-scroll-hint { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--mute); margin-bottom: 8px; } }
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    [data-shutter="reveal"] { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
  }
  @media (scripting: none) {
    [data-shutter="reveal"] { opacity: 1; transform: none; }
  }
  @media print {
    .rail, .strip, .mast, .foot, .hero__bg { display: none !important; }
    body { background: #fff; color: #000; }
    .shell { margin-left: 0; }
  }
}