/* 列宾落地页 · 文艺复兴设计系统（由设计稿 tokens/components 合并） */

/* 文艺复兴 · 色彩 — 暖调纸白为底，墨色为文，朱红点睛，金褐串场 */
:root{
  /* 纸 Paper */
  --paper-0:#ffffff;
  --paper-1:#f7f7f4;
  --paper-2:#f2f1ed;
  --paper-3:#eae8e2;
  /* 墨 Ink */
  --ink-900:#26251e;
  --ink-700:#4a4636;
  --ink-500:#7c7460;
  /* 颜料 Pigments */
  --vermilion:#f54e00;
  --crimson-lake:#b3003f;
  --ochre:#c08532;
  --ochre-30:rgba(192,133,50,.30);
  --ochre-07:rgba(192,133,50,.07);
  /* 界线 Hairlines */
  --hair-12:rgba(38,37,30,.12);
  --hair-20:rgba(38,37,30,.20);

  /* ——— 语义别名 Semantic ——— */
  --bg:var(--paper-1);
  --surface:var(--paper-0);
  --surface-soft:var(--paper-2);
  --ink:var(--ink-900);
  --ink-soft:var(--ink-700);
  --muted:var(--ink-500);
  --primary:var(--vermilion);
  --crimson:var(--crimson-lake);
  --gold:var(--ochre);
  --gold-soft:var(--ochre-30);
  --gold-wash:var(--ochre-07);
  --hair:var(--hair-12);
  --hair-2:var(--hair-20);
  --link:var(--crimson-lake);
  --link-hover:var(--vermilion);
  --selection-bg:var(--crimson-lake);
  --selection-ink:#ffffff;
  /* 图注胶囊 Caption capsule */
  --caption-bg:rgba(28,20,12,.62);
  --caption-ink:#f0e8d8;
}

/* 反色区块 — 章扉 / 金句 / 转场 / 页脚。全篇 1–2 处即可。*/
.on-ink{
  --bg:var(--ink-900);
  --surface:rgba(255,255,255,.04);
  --surface-soft:rgba(255,255,255,.08);
  --ink:var(--paper-1);
  --ink-soft:rgba(247,247,244,.80);
  --muted:rgba(247,247,244,.55);
  --hair:rgba(255,255,255,.10);
  --hair-2:rgba(255,255,255,.14);
  --crimson:var(--ochre);
  background:var(--ink-900);
  color:var(--paper-1);
}

/* 文艺复兴 · 字体 — 三体协作：中文衬线主唱，无衬线做 UI，拉丁斜体做旁注与编号 */
:root{
  --font-serif:"Noto Serif SC","Songti SC","SimSun",Georgia,serif;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --font-latin:"EB Garamond",Georgia,"Times New Roman",serif;

  /* 网页字号 Web scale */
  --fs-display:clamp(34px,4.4vw,56px);
  --fs-h2:clamp(26px,3.2vw,40px);
  --fs-h3:clamp(19px,1.9vw,22px);
  --fs-h4:21px;
  --fs-quote:clamp(28px,3.6vw,46px);
  --fs-lead:18px;
  --fs-bio:clamp(15.5px,1.2vw,17px);
  --fs-body:16px;
  --fs-small:14.5px;
  --fs-fine:13.5px;
  --fs-kicker:11px;
  --fs-eyebrow:10.5px;

  /* 行高 Line height */
  --lh-title:1.12;
  --lh-h2:1.18;
  --lh-quote:1.3;
  --lh-bio:1.92;
  --lh-body:1.7;
  --lh-note:1.65;

  /* 字距 Letter spacing */
  --ls-title:-.02em;
  --ls-kicker:.22em;
  --ls-badge:.18em;
  --ls-eyebrow:.20em;
  --ls-foot:.14em;

  /* 字重 Weight */
  --fw-regular:400;
  --fw-medium:500;
  --fw-bold:700;
  --fw-black:900;

  /* 幻灯片字号 Slide scale @1920×1080 */
  --slide-hero:92px;
  --slide-act:80px;
  --slide-h1:76px;
  --slide-quote:64px;
  --slide-h2:56px;
  --slide-sub:36px;
  --slide-body:30px;
  --slide-small:24px;
  --slide-fine:20px;
  --slide-kicker:20px;
  --slide-numeral:240px;
}

/* 文艺复兴 · 间距与版心 */
:root{
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:26px; --sp-7:32px; --sp-8:40px;
  --sp-9:52px; --sp-10:64px; --sp-11:76px; --sp-12:96px;

  /* 版心 Measure */
  --page-max:1240px;
  --gutter:28px;
  --gutter-sm:16px;
  --section-y:76px;
  --row-y:28px;
  --row-hover-shift:12px;

  /* 文字宽度 Text measure */
  --measure-bio:56ch;
  --measure-note:72ch;
  --measure-lead:46ch;

  /* 幻灯片安全区 Slide padding @1920×1080 */
  --slide-pad-x:132px;
  --slide-pad-t:96px;
  --slide-pad-b:78px;
}

/* 文艺复兴 · 圆角、阴影、纸面颗粒、条纹占位 */
:root{
  --r-sm:14px;
  --r:20px;
  --r-lg:30px;
  --r-pill:9999px;

  --sh:0 18px 50px -28px rgba(38,30,8,.5);
  --sh-sm:0 8px 24px -16px rgba(38,30,8,.36);

  --grain-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity:.035;
  --grain-opacity-ink:.09;

  --stripe:repeating-linear-gradient(135deg,var(--paper-2),var(--paper-2) 14px,var(--paper-3) 14px,var(--paper-3) 28px);
  --scrim-bottom:linear-gradient(to top,rgba(24,16,8,.6),rgba(24,16,8,0) 50%);
}

/* 文艺复兴 · 动效 — 只有淡入上浮和悬停位移，没有弹跳 */
:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-hover:.3s;
  --dur-shift:.35s;
  --dur-rise:.8s;
  --rise-y:18px;
  --rise-y-slide:22px;
  --stagger:.1s;
}

/* 元素默认值 */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block}
a{color:var(--link);text-decoration:none;transition:color var(--dur-hover)}
a:hover{color:var(--link-hover)}
::selection{background:var(--selection-bg);color:var(--selection-ink)}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:var(--fw-bold);letter-spacing:var(--ls-title);margin:0;text-wrap:balance}
h1{font-size:var(--fs-display);line-height:var(--lh-title)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-size:var(--fs-h3);line-height:1.3}
h4{font-size:var(--fs-h4);line-height:1.3}
h1 em,h2 em,h3 em,.em{font-style:italic;color:var(--crimson)}
p{margin:0;text-wrap:pretty}

/* 招牌元素 — 不值得做成组件的那部分 */

/* 纸面颗粒：加在 body 或任意区块上 */
.grain{position:relative}
.grain::before{content:"";position:absolute;inset:0;z-index:60;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:multiply;background-image:var(--grain-image)}
body.grain::before{position:fixed}
.on-ink.grain::before{opacity:var(--grain-opacity-ink);mix-blend-mode:normal}

/* 版心与章节 */
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0;position:relative}
.section+.section{border-top:1px solid var(--hair)}
@media(max-width:720px){.wrap{padding:0 var(--gutter-sm)}}

/* 拉丁斜体：旁注、域名、页码、落款 */
.latin{font-family:var(--font-latin);font-style:italic;font-weight:var(--fw-regular)}

/* 条纹图片占位 */
.stripe-frame{background:var(--stripe);border:1px solid var(--hair-2);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center}
.stripe-frame .cap{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:.04em;color:var(--muted);text-align:center;padding:var(--sp-6);line-height:1.6}

/* 图注胶囊 */
.caption-pill{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--caption-bg);backdrop-filter:blur(4px);color:var(--caption-ink);font-family:var(--font-latin);font-style:italic;padding:7px 16px;border-radius:var(--r-pill)}

/* 入场：淡入上浮 */
.rise{animation:rise var(--dur-rise) var(--ease) both;opacity:0;transform:translateY(var(--rise-y))}
.rise.d1{animation-delay:.1s}.rise.d2{animation-delay:.2s}.rise.d3{animation-delay:.3s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}}

/* Core — 按钮 / 徽章 / kicker / 金线 / 拉丁旁注 / 身份胶囊 */
.rn-btn{display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-pill);padding:14px 26px;font-family:var(--font-sans);font-size:var(--fs-small);font-weight:var(--fw-medium);letter-spacing:.02em;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--dur-hover),color var(--dur-hover),border-color var(--dur-hover)}
.rn-btn--sm{padding:10px 18px;font-size:var(--fs-fine)}
.rn-btn--dark{background:var(--ink);color:var(--bg)}
.rn-btn--dark:hover{background:var(--primary);color:var(--bg)}
.rn-btn--crimson{background:var(--ink);color:var(--bg)}
.rn-btn--crimson:hover{background:var(--crimson);color:var(--bg)}
.rn-btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.rn-btn--ghost:hover{background:var(--surface-soft);color:var(--ink)}
.rn-btn__arrow{transition:transform var(--dur-hover)}
.rn-btn:hover .rn-btn__arrow{transform:translateX(4px)}

.rn-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--gold-soft);background:var(--gold-wash);font-family:var(--font-sans);font-size:var(--fs-kicker);font-weight:600;letter-spacing:var(--ls-badge);text-transform:uppercase;color:var(--gold)}
.rn-badge--live{border-color:var(--primary);color:var(--primary);background:transparent}
.rn-badge__dot{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:rn-pulse 2.4s infinite}
@keyframes rn-pulse{0%{box-shadow:0 0 0 0 rgba(245,78,0,.45)}70%{box-shadow:0 0 0 8px rgba(245,78,0,0)}100%{box-shadow:0 0 0 0 rgba(245,78,0,0)}}
@media(prefers-reduced-motion:reduce){.rn-badge__dot{animation:none}}

.rn-kicker{display:inline-block;font-family:var(--font-sans);font-size:var(--fs-kicker);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-kicker);color:var(--gold);line-height:1.4}

.rn-rule{height:2px;width:46px;background:var(--gold);border-radius:2px;border:0}
.rn-rule--center{margin-left:auto;margin-right:auto}

.rn-aside{font-family:var(--font-latin);font-style:italic;color:var(--muted);font-size:16px;line-height:1.4}

.rn-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.rn-chip{font-family:var(--font-serif);font-size:12.5px;line-height:1.6;color:var(--ink-soft);background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-pill);padding:6px 14px}

/* Editorial — 章节头 / 索引行 / 编号行 / 特写行 */
.rn-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 40px;flex-wrap:wrap}
.rn-sechead__lead{max-width:62%}
.rn-sechead__title{margin:12px 0 0}
.rn-sechead__aside{padding-bottom:6px}
.rn-sechead--center{justify-content:center;text-align:center;flex-direction:column;align-items:center}
.rn-sechead--center .rn-sechead__lead{max-width:var(--measure-lead)}
.rn-sechead--center .rn-rule{margin-top:16px}
@media(max-width:720px){.rn-sechead__lead{max-width:100%}}

.rn-list{border-top:1px solid var(--hair-2)}
.rn-list__more{display:flex;align-items:center;gap:10px;padding:22px 14px;color:var(--muted);font-size:var(--fs-fine);font-family:var(--font-latin);font-style:italic}
.rn-list__more span.ln{flex:1;height:1px;background:var(--hair)}

.rn-idx{display:grid;grid-template-columns:56px 1fr auto;gap:30px;align-items:center;padding:28px 14px;border-bottom:1px solid var(--hair);color:inherit;text-decoration:none;transition:background var(--dur-hover),padding-left var(--dur-shift)}
.rn-idx:hover{background:var(--surface);padding-left:26px;color:inherit}
.rn-idx__num{font-family:var(--font-latin);font-style:italic;font-size:30px;line-height:1;color:var(--gold)}
.rn-idx__main{min-width:0}
.rn-idx__name{font-family:var(--font-serif);font-size:clamp(20px,2vw,24px);font-weight:var(--fw-bold);line-height:1.2;margin-bottom:5px}
.rn-idx__dom{font-family:var(--font-latin);font-style:italic;font-weight:var(--fw-regular);font-size:14px;color:var(--gold);margin-left:12px}
.rn-idx__desc{color:var(--muted);font-size:var(--fs-small);line-height:1.6;max-width:70ch}
.rn-idx__go{width:46px;height:46px;flex:none;border-radius:50%;border:1px solid var(--hair-2);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:19px;transition:background var(--dur-hover),color var(--dur-hover),transform var(--dur-hover)}
.rn-idx:hover .rn-idx__go{background:var(--ink);color:var(--bg);transform:translateX(4px)}
@media(max-width:640px){.rn-idx{grid-template-columns:36px 1fr;gap:16px;padding:24px 4px}.rn-idx__go{display:none}.rn-idx__num{font-size:24px}}

.rn-num{display:grid;grid-template-columns:88px 1fr;gap:26px;padding:30px 14px;align-items:start;border-bottom:1px solid var(--hair);transition:background var(--dur-hover),padding-left var(--dur-shift)}
.rn-num:hover{background:var(--surface);padding-left:26px}
.rn-num__n{font-family:var(--font-serif);font-weight:var(--fw-black);font-size:clamp(30px,3vw,42px);line-height:1;color:var(--gold)}
.rn-num__n--roman{font-family:var(--font-latin);font-style:italic;font-weight:var(--fw-regular)}
.rn-num__title{margin:0 0 7px;font-size:var(--fs-h3)}
.rn-num__desc{color:var(--muted);font-size:15px;line-height:1.72;max-width:var(--measure-note)}
@media(max-width:640px){.rn-num{grid-template-columns:54px 1fr;gap:16px;padding:26px 4px}}

.rn-feat{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px 4px;align-items:start;border-bottom:1px solid var(--hair)}
.rn-feat__ic{width:48px;height:48px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--surface);border:1px solid var(--hair)}
.rn-feat__eb{font-family:var(--font-sans);font-size:var(--fs-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--gold);margin-bottom:3px}
.rn-feat__title{display:flex;align-items:baseline;gap:12px;margin:0 0 6px;font-size:var(--fs-h4)}
.rn-feat__en{font-family:var(--font-latin);font-style:italic;font-weight:var(--fw-regular);font-size:14px;color:var(--muted)}
.rn-feat__nm{font-family:var(--font-serif);font-size:var(--fs-small);color:var(--ink-soft);margin:0 0 7px}
.rn-feat__note{font-size:14px;line-height:var(--lh-note);color:var(--muted)}

/* Media — 肖像框 / 条纹占位 / 联系方式卡 */
.rn-photo{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-soft);box-shadow:var(--sh)}
.rn-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.97) contrast(1.02)}
.rn-photo__frame{position:absolute;inset:12px;z-index:3;pointer-events:none;border:1px solid rgba(255,255,255,.5);border-radius:calc(var(--r-lg) - 10px)}
.rn-photo__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--scrim-bottom)}
.rn-photo .caption-pill{position:absolute;left:18px;bottom:18px;z-index:3;font-size:15px}
.caption-pill .hint{margin-left:6px}
.caption-pill .hint{font-style:normal;font-family:var(--font-sans);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

.rn-stripe{position:relative;min-height:180px;overflow:hidden}
.rn-stripe .caption-pill{position:absolute;left:18px;bottom:18px;z-index:3;font-size:15px}

.rn-contact{display:flex;flex-direction:column;align-items:center;gap:9px;padding:28px 18px;border:1px solid var(--hair-2);border-radius:var(--r);background:var(--surface);color:inherit;text-decoration:none;transition:background var(--dur-hover),border-color var(--dur-hover)}
.rn-contact:hover{border-color:var(--gold-soft);background:var(--surface-soft);color:inherit}
.rn-contact__ic{font-size:26px;color:var(--gold);line-height:1}
.rn-contact__lab{font-family:var(--font-sans);font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-badge);color:var(--muted)}
.rn-contact__val{font-family:var(--font-latin);font-style:italic;font-size:18px;line-height:1.3;color:var(--ink);text-align:center}
.rn-contact__ic svg{display:block;width:26px;height:26px}

/* ——— 落地页版式 Page ——— */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,247,244,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.site-header__inner{
  max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter);
  height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.mark{
  font-family:var(--font-serif);font-size:21px;font-weight:900;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.mark:hover{color:var(--ink)}
.mark em{
  font-family:var(--font-latin);font-style:italic;font-weight:500;
  color:var(--crimson);margin-left:6px;
}
.site-nav{display:flex;align-items:center;gap:26px;font-family:var(--font-sans);font-size:14px;font-weight:500}
.site-nav a{color:var(--ink-soft)}
.site-nav a:hover{color:var(--primary)}
.site-nav a.rn-btn{color:var(--bg)}
.site-nav a.rn-btn:hover{color:var(--bg)}
.nav-toggle{
  display:none;width:40px;height:40px;border:1px solid var(--hair-2);border-radius:50%;
  background:transparent;cursor:pointer;align-items:center;justify-content:center;color:var(--ink);
}
.nav-toggle svg{width:18px;height:18px}

.hero{
  max-width:var(--page-max);margin:0 auto;padding:64px var(--gutter) 88px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:56px;align-items:center;
}
.hero h1{margin:22px 0 0;max-width:14ch}
.hero__quote{
  font-family:var(--font-serif);font-size:21px;line-height:1.8;
  color:var(--ink-soft);margin:18px 0 0;max-width:26ch;
}
.hero__latin{margin:10px 0 0;font-size:18px;color:var(--muted)}
.hero__bio{
  font-size:var(--fs-bio);line-height:var(--lh-bio);color:var(--ink-soft);
  max-width:var(--measure-bio);margin:26px 0 0;
}
.hero__bio .key{font-family:var(--font-serif);font-style:italic;color:var(--crimson)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.schematic{
  border:1px solid var(--hair-2);border-radius:var(--r-lg);
  background:var(--surface);padding:20px;
}
.schematic__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--hair);
}
.schematic__tag{
  font-family:var(--font-sans);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.schematic__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:16px}
.col{border-radius:var(--r-sm);padding:12px 10px 14px;transition:transform var(--dur-shift),background var(--dur-hover)}
.col:hover{transform:translateY(-4px);background:var(--paper-0)}
.col__name{display:flex;align-items:baseline;gap:7px;margin-bottom:11px}
.col__name .n{color:var(--gold);font-size:15px}
.col__name .n.is-iii{color:var(--crimson)}
.col__name h3{font-size:15px;font-weight:700}
.col__stack{display:flex;flex-direction:column;gap:8px}
.pane{
  border-radius:10px;background:var(--paper-2);padding:9px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
}
.pane.is-outline{background:transparent;border:1px solid var(--hair-2)}
.pane__bar{display:block;height:6px;width:74%;border-radius:3px;background:var(--hair-2)}
.pane__bar.s{height:4px;width:46%;border-radius:2px;background:var(--hair)}
.pane__lab{font-family:var(--font-sans);font-size:9.5px;letter-spacing:.1em;color:var(--muted)}
.schematic__foot{
  display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);
}
.schematic__foot p{font-family:var(--font-serif);font-size:14px;color:var(--ink-soft)}
.schematic__foot .ln{flex:1;height:1px;background:var(--hair)}
.go{
  width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--hair-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:14px;
}

.why-head{text-align:center}
.why-head h2{margin:16px auto 0;max-width:15ch}
.why-head .latin{margin:14px auto 0;color:var(--muted);font-size:17px}
.why-art{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;margin-top:44px}
.why-art .study{flex:1 1 260px;min-width:0}
.why-art .canvas{flex:2 1 440px;min-width:0}
.why-note{
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:baseline;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--hair);
}
.why-note .serif{font-family:var(--font-serif);font-size:19px;line-height:1.8;max-width:46ch}
.why-note .serif .gold{color:var(--gold)}
.why-note .credit{color:var(--muted);font-size:15px;line-height:1.6}

.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.step{
  border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);
  padding:30px 30px 26px;display:flex;flex-direction:column;gap:14px;
  transition:transform var(--dur-shift),border-color var(--dur-hover);
}
.step:hover{transform:translateY(-4px);border-color:var(--gold-soft)}
.step__n{color:var(--crimson);font-size:34px;line-height:1}
.step h3{margin:0}
.step p{color:var(--muted);font-size:15px;line-height:1.75}
.step__tag{
  margin-top:auto;font-family:var(--font-sans);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

.idx-row{
  display:flex;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--hair);
}
.idx-row .n{color:var(--gold);font-size:30px;line-height:1}
.idx-row h3{margin:0}
.idx-row .latin{color:var(--muted);font-size:15px}
.idx-row+.note,.idx-row+.rn-chips{margin-top:20px}
.note{color:var(--muted);font-size:15px;line-height:1.75;max-width:var(--measure-note)}
.note.tight{margin:18px 0 24px}

.term{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--ink-900);border-radius:var(--r);padding:16px 16px 16px 22px;margin-top:22px;
}
.term code{
  flex:1;min-width:200px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--paper-1);
}
.term button{
  flex:none;border-radius:var(--r-pill);padding:9px 18px;font-family:var(--font-sans);
  font-size:var(--fs-fine);font-weight:500;background:transparent;
  border:1px solid rgba(255,255,255,.28);color:var(--paper-1);cursor:pointer;
  transition:background var(--dur-hover);
}
.term button:hover{background:rgba(255,255,255,.1)}
.scope{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.scope button{
  font-family:var(--font-serif);font-size:12.5px;line-height:1.6;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:6px 14px;cursor:pointer;
}
.scope button.is-on{border-color:var(--gold-soft);color:var(--ink);background:var(--gold-wash)}

.pack{border:1px solid var(--hair-2);border-radius:var(--r-lg);background:var(--surface);padding:30px}
.pack__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:26px}
.field{display:flex;flex-direction:column;gap:22px}
.lbl{
  display:block;font-family:var(--font-sans);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.field-hint{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.pack textarea{
  width:100%;box-sizing:border-box;resize:vertical;border:1px solid var(--hair-2);
  border-radius:var(--r-sm);background:var(--paper-1);color:var(--ink);
  font-family:var(--font-sans);font-size:14px;line-height:1.7;padding:12px 14px;outline:none;
}
.pack textarea:focus{border-color:var(--gold-soft);background:var(--paper-0)}
.drop{
  flex:1;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:22px;cursor:pointer;border:1px solid var(--hair-2);
  border-radius:var(--r-sm);background:var(--stripe);transition:border-color var(--dur-hover);
}
.drop:hover,.drop.is-over{border-color:var(--gold-soft)}
.drop svg{width:24px;height:24px;color:var(--gold)}
.drop span{font-family:var(--font-sans);font-size:13.5px;color:var(--ink-soft)}
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.file{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 14px;
  border-radius:var(--r-pill);border:1px solid var(--hair);background:var(--paper-1);
  font-family:var(--font-sans);font-size:12.5px;color:var(--ink-soft);
}
.file button{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;padding:0 2px}
.pack__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--hair);
}
.pack__hint{color:var(--muted);font-size:13.5px}

.handoff{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:26px;margin-top:22px}
.handoff p{color:var(--ink-soft);font-size:15px;line-height:1.8}
.handoff .muted{color:var(--muted)}
.handoff .key{font-family:var(--font-serif);color:var(--crimson)}

.pit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.pit{border:1px solid var(--hair);border-radius:var(--r);background:var(--surface);padding:30px 32px}
.pit .n{color:var(--gold);font-size:20px;margin-bottom:10px}
.pit h3{margin:0 0 10px}
.pit p{color:var(--muted);font-size:15px;line-height:1.75}
.pit .ink{color:var(--ink-soft)}

.site-footer{border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:var(--section-y)}
.site-footer__inner{max-width:var(--page-max);margin:0 auto;padding:72px var(--gutter) 44px;text-align:center}
.site-footer .quote{
  font-family:var(--font-serif);font-style:italic;font-size:var(--fs-quote);
  line-height:var(--lh-quote);margin:16px auto 0;max-width:22ch;text-wrap:balance;
}
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;max-width:860px;margin:44px auto 0}
.thanks{max-width:52ch;margin:40px auto 0;padding-top:26px;border-top:1px solid var(--hair)}
.thanks .lbl{color:var(--gold);margin-bottom:10px}
.thanks p{font-family:var(--font-serif);font-size:17px;line-height:1.85;color:var(--ink-soft)}
.thanks a{color:var(--gold);border-bottom:1px solid var(--gold-soft)}
.colophon{
  border-top:1px solid var(--hair);max-width:var(--page-max);margin:0 auto;padding:22px var(--gutter);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-family:var(--font-sans);font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:var(--ls-foot);
}
.colophon .brand{font-family:var(--font-serif);font-weight:700;text-transform:none;font-size:14px;color:var(--ink)}
.colophon a{color:rgba(247,247,244,.85)}

.mt-60{margin-top:60px}
.mt-16{margin-top:16px}

@media(max-width:820px){
  .nav-toggle{display:flex}
  .site-header__inner{position:relative}
  .site-nav{
    display:none;position:absolute;top:70px;right:var(--gutter);left:var(--gutter);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper-0);border:1px solid var(--hair-2);border-radius:var(--r);
    padding:8px;box-shadow:var(--sh-sm);
  }
  .site-nav.is-open{display:flex}
  .site-nav a,.site-nav .rn-btn{padding:12px 14px;border-radius:var(--r-sm)}
}
@media(max-width:720px){
  .hero{padding:40px var(--gutter) 56px;gap:36px}
  .schematic__cols{grid-template-columns:1fr}
  .site-header__inner,.hero,.site-footer__inner,.colophon{padding-left:var(--gutter-sm);padding-right:var(--gutter-sm)}
}