/* =========================================================================
   标本 / SPECIMEN — Bindwell 百恩德 zh-cn
   A specimen-plate monograph with a living object pressed into the paper.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  /* inks & papers — a two-ink riso press on cool laboratory stock */
  --paper:      #E1DED2;   /* ground / mount board                */
  --paper-2:    #F4F2EB;   /* tipped-in sheet                     */
  --paper-3:    #E4E1D6;   /* recessed tint block                 */
  --ink:        #141A17;   /* text ink (green-cast black)         */
  --ink-2:      #4A534E;   /* secondary / captions                */
  --ink-3:      #7E857F;   /* hairlines, tertiary                 */
  --ink-panel:  #121815;   /* solid ink plate                     */
  --green:      #0A7255;   /* spot green, text-safe               */
  --green-lt:   #17B487;   /* spot green, reversed / graphic      */
  --flag:       #C0331A;   /* fluoro red, text-safe               */
  --flag-lt:    #E0452B;   /* fluoro red, graphic                 */
  --rule:       rgba(20, 26, 23, 0.20);
  --rule-soft:  rgba(20, 26, 23, 0.10);

  /* type */
  --cjk-body: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --cjk-disp: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --didone: "Bodoni Moda", "Didot", "Times New Roman", serif;

  /* Latin first in every stack so Bindwell / AI / LCMS / SolidWorks
     never fall into the CJK font's Latin glyphs. */
  --font-body: var(--mono), var(--cjk-body);
  --font-disp: var(--didone), var(--cjk-disp);

  --measure: 34em;         /* ~34 CJK characters per line */
  --rail-h: 3.5rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--rail-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* mono sits a touch small so it optically matches the CJK body face */
body { font-size-adjust: none; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--green-lt); color: #08130F; }

.u-hide {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 0.75rem; top: -4rem; z-index: 200;
  background: var(--ink-panel); color: var(--paper-2);
  padding: 0.5rem 1rem; font-family: var(--mono); font-size: 0.8rem;
  letter-spacing: 0.16em; text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip:focus { top: 0.75rem; }

/* ================================================================ ground */
/* The living plate: paper, graph rule, ink dots (WebGL, multiply), grain. */
.ground {
  position: fixed; left: 0; top: 0; right: 0; z-index: 0; pointer-events: none;
  /* Not inset:0 — on phones the layout viewport grows and shrinks as the URL
     bar slides away, and the plate would be re-scaled mid-scroll. The large
     viewport height holds still through all of it. */
  height: 100vh;
  height: 100lvh;
  background: var(--paper);
  contain: strict;
}

.ground__grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(20,26,23,.055) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(to bottom, rgba(20,26,23,.055) 0 1px, transparent 1px 100%);
  background-size: 26px 26px;
  mask-image: radial-gradient(140% 120% at 50% 40%, #000 30%, transparent 92%);
}

.ground__canvas,
.ground__fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  mix-blend-mode: multiply;
}
.ground__canvas { opacity: 0; transition: opacity 0.9s var(--ease); }
.ground__fallback { object-fit: contain; opacity: 0.9; transition: opacity 0.7s var(--ease); }

.gl-on .ground__canvas { opacity: 0.8; }
@media (max-width: 820px) { .gl-on .ground__canvas { opacity: 0.5; } .ground__fallback { opacity: 0.55; } }
.gl-on .ground__fallback { opacity: 0; }

/* paper grain — feTurbulence, multiplied down */
.ground__grain {
  position: absolute; inset: -10%;
  mix-blend-mode: multiply;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.42'/></svg>");
}

/* registration marks in the ground corners — printer's furniture */
.ground__reg {
  position: absolute; width: 22px; height: 22px;
  color: var(--ink-3); opacity: 0.55;
}
.ground__reg--tl { top: 22px; left: 22px; }
.ground__reg--br { bottom: 22px; left: 22px; }

/* ================================================================ cursor */
.reg-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.cursor-on body { cursor: none; }
  html.cursor-on a, html.cursor-on button { cursor: none; }
  .reg-cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 400;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    pointer-events: none; color: var(--ink);
    will-change: transform;
    transition: color 0.2s var(--ease);
  }
  .reg-cursor__ring { transition: transform 0.28s var(--ease), opacity 0.2s var(--ease); transform-origin: 17px 17px; }
  .reg-cursor__bar { opacity: 0; transition: opacity 0.18s var(--ease); }
  .reg-cursor.is-link { color: var(--green); }
  .reg-cursor.is-link .reg-cursor__ring { transform: rotate(45deg) scale(1.28); }
  .reg-cursor.is-text .reg-cursor__ring { opacity: 0.18; transform: scale(0.42); }
  .reg-cursor.is-text .reg-cursor__bar { opacity: 1; }
}

/* ================================================================== rail */
.rail {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: var(--rail-h);
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 clamp(1rem, 4vw, 2.25rem);
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s;
}
.rail.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(7px) saturate(1.1);
  border-bottom-color: var(--rule);
}
.rail__mark {
  font-family: var(--didone); font-size: 0.98rem; letter-spacing: 0.06em;
  text-transform: none; text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: baseline; gap: 0.5em;
  white-space: nowrap;
}
.rail__mark span {
  font-family: var(--cjk-disp); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.14em; color: var(--green);
}
.rail__nav { margin-left: auto; display: flex; gap: clamp(0.85rem, 2vw, 1.75rem); }
.rail__nav a {
  text-decoration: none; color: var(--ink-2);
  font-family: var(--cjk-body); letter-spacing: 0.14em; font-size: 0.78rem;
  text-transform: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.rail__nav a:hover { color: var(--ink); border-bottom-color: var(--green); }
.rail__back { margin-left: auto; }

/* =============================================================== layout */
main { position: relative; z-index: 2; }

.chapter { position: relative; padding-block: clamp(3.5rem, 8vw, 8rem); }
.chapter__inner {
  width: min(1340px, 92vw); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
/* recto: sheet on the right, window on the left. verso: mirrored. */
.chapter--verso .sheet { grid-column: 1; }
.chapter--verso .window { grid-column: 2; grid-row: 1; }
.chapter--recto .sheet { grid-column: 2; }
.chapter--recto .window { grid-column: 1; grid-row: 1; }
.chapter--full .chapter__inner { grid-template-columns: minmax(0, 1fr); }

/* the tipped-in sheet: opaque paper, so body copy never sits on live 3D */
.sheet {
  position: relative;
  background: var(--paper-2);
  padding: clamp(1.75rem, 3.2vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  box-shadow:
    0 0 0 1px rgba(20, 26, 23, 0.07),
    0 24px 48px -34px rgba(20, 26, 23, 0.55);
}
.sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: var(--ink); opacity: 0.9;
}
.sheet--green::before { background: var(--green); }
.sheet--flag::before { background: var(--flag-lt); }

/* the window keeps ground (and the live object) visible next to the text */
.window {
  position: relative; align-self: stretch; min-height: 12rem;
  padding-top: 0.35rem;
}

/* ============================================================ typography */
.plate-mark, .caption, .label, .kicker {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2); margin: 0;
}
.plate-mark { display: flex; align-items: center; gap: 0.75rem; }
.plate-mark::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.plate-mark em { font-style: normal; color: var(--green); }

.caption {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: none;
  line-height: 1.7; color: var(--ink-2);
  font-family: var(--mono), var(--cjk-body);
}

.display {
  font-family: var(--cjk-disp);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--ink);
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  text-indent: 0.03em;
}
.display--sm { font-size: clamp(2.4rem, 6vw, 4.2rem); }

.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head .display { margin-top: 0.25rem; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.prose {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.95;
  letter-spacing: 0.018em;
  max-width: var(--measure);
  text-wrap: pretty;
  line-break: strict;
  overflow-wrap: break-word;
}
@supports (text-spacing-trim: space-first) {
  .prose, .display, li, dd { text-spacing-trim: space-first; }
}

.lede {
  font-family: var(--cjk-body);
  font-size: clamp(1.08rem, 1.85vw, 1.4rem);
  line-height: 1.8; letter-spacing: 0.02em;
  font-weight: 500; max-width: 26em;
}

/* link styling is opt-in: prose links and anything marked .link. Components
   with their own affordance (news rows, job rows, data lists) opt out. */
a.link, .prose a, .leaf__note a, .applybox .attach a {
  color: var(--green);
  text-decoration: none;
  background-image: linear-gradient(var(--green), var(--green));
  background-size: 100% 1px; background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.08em);
  padding-bottom: 0.08em;
  transition: background-size 0.25s var(--ease), color 0.2s var(--ease);
}
/* misregistration on hover: the rule slips like a second ink pass */
.prose a:hover, a.link:hover {
  color: var(--ink);
  background-image: linear-gradient(var(--flag-lt), var(--flag-lt));
  background-position: 0.18em calc(100% - 0.02em);
}

em { font-style: normal; }

/* =================================================================== hero */
.hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  padding: calc(var(--rail-h) + clamp(2rem, 6vh, 5rem)) 0 clamp(2rem, 5vh, 4rem);
  display: flex; flex-direction: column;
}
.hero__inner {
  width: min(1340px, 92vw); margin-inline: auto;
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(1.5rem, 4vh, 3rem);
}
.hero__mark { margin: 0; }
.hero__cn {
  display: block;
  font-family: var(--cjk-disp); font-weight: 900;
  font-size: clamp(4.2rem, 22vw, 13rem);
  line-height: 0.9; letter-spacing: 0.02em;
  color: var(--ink);
  mix-blend-mode: multiply;
}
.hero__latin {
  display: flex; align-items: baseline; gap: clamp(0.75rem, 2vw, 1.5rem);
  font-family: var(--didone); font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 2rem);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--ink-2); margin-top: 0.5rem;
}

.hero__foot {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  align-items: end;
}
.hero__card { padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.hero__card .lede { margin-top: 0; }   /* the lede leads the card now */

.backers {
  margin: 1.5rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.86rem; line-height: 1.9; letter-spacing: 0.02em;
  max-width: none; color: var(--ink-2);
  font-family: var(--cjk-body);
}
.backers .label { display: inline; letter-spacing: 0.18em; margin-right: 0.5em; }
.backers a {
  font-family: var(--didone); font-size: 1.02em; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.backers a:hover { color: var(--green); border-bottom-color: var(--green); }

.hero__cue {
  align-self: end; justify-self: end;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.24em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-2);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding-bottom: 0.5rem;
}
.hero__cue span { font-size: 1.1rem; letter-spacing: 0; animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(7px); opacity: 1 } }
.hero__cue:hover { color: var(--green); }

.slip__inner { width: min(1340px, 92vw); margin-inline: auto; }

/* ============================================================== index row */
.index-row { position: relative; z-index: 2; padding-block: clamp(1rem, 3vw, 2rem); }
.index-row__inner {
  width: min(1340px, 92vw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
}
.index-row a {
  /* The first cell sits flush with the page's left edge so the row aligns with
     everything above it. Every later cell has a rule immediately to its left
     and needs to clear it — the gutter is symmetrical about the rule: 1.5rem
     of right padding on one side, the same left padding on the other. */
  --pl: 0rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1rem 1.5rem 1.1rem var(--pl);
  text-decoration: none; color: var(--ink);
  font-family: var(--cjk-body); font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.45rem); letter-spacing: 0.06em;
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--rule);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.index-row a + a { --pl: 1.5rem; }
.index-row a:last-child { border-right: 0; }
.index-row a span {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--ink-3); text-transform: uppercase;
}
/* the hover slide is a delta, so it reads the same in every cell */
.index-row a:hover { background: var(--ink); color: var(--paper-2); padding-left: calc(var(--pl) + 1.1rem); }
.index-row a:hover span { color: var(--green-lt); }

/* ================================================================ problem */
.argument { list-style: none; margin: 0; padding: 0; }
.argument > li {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: clamp(1.25rem, 2.4vw, 2rem) 0;
  border-top: 1px solid var(--rule);
}
.argument > li:first-child { border-top: 0; padding-top: 0; }
.argument__n {
  font-family: var(--cjk-disp); font-weight: 700;
  font-size: 1.6rem; line-height: 1.2; color: var(--green);
  letter-spacing: 0;
}
.argument h3 {
  margin: 0 0 0.5rem;
  font-family: var(--cjk-disp); font-weight: 700;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  line-height: 1.5; letter-spacing: 0.03em;
}
.argument--last h3 { color: var(--flag); }
.argument p { margin: 0; }

/* a display word hung out into the window, occluded by the sheet edge */
.hang {
  margin: 0;
  font-family: var(--cjk-disp); font-weight: 900;
  font-size: clamp(3rem, 9vw, 7rem); line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ink); mix-blend-mode: multiply;
  writing-mode: vertical-rl; text-orientation: upright;
  position: sticky; top: calc(var(--rail-h) + 2rem);
}
.hang--flag { color: var(--flag); }

/* ================================================== solid ink plate (dark) */
.plate-dark {
  position: relative;
  background: var(--ink-panel);
  color: #EEECE4;
  padding: clamp(2rem, 4.5vw, 4.5rem) clamp(1.5rem, 4vw, 4.5rem);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.8);
}
.plate-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 1.4px);
  background-size: 4px 4px;
  mix-blend-mode: screen;
}
.plate-dark > * { position: relative; z-index: 1; }
.plate-dark .display { color: var(--paper-2); }
.plate-dark .plate-mark { color: #A7B0AA; }
.plate-dark .plate-mark::after { background: rgba(255,255,255,.18); }
.plate-dark .plate-mark em { color: var(--green-lt); }
.plate-dark .prose { color: #E4E2DA; font-weight: 500; font-size: 1.08rem; }
.plate-dark .prose a {
  color: var(--green-lt);
  background-image: linear-gradient(var(--green-lt), var(--green-lt));
}
.plate-dark .prose a:hover { color: #fff; background-image: linear-gradient(var(--flag-lt), var(--flag-lt)); }
.plate-dark .caption { color: #A7B0AA; }
.plate-dark hr { border: 0; border-top: 1px solid rgba(255,255,255,.16); margin: 2rem 0; }

.solution__grid {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.solution__grid .prose { max-width: 32em; }

/* ================================================================= jobs */
/* was an inline style in the static prototype; a class now that Astro renders it */
.joblist__head {
  font-family: var(--cjk-disp); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.14em;
  margin: 2.25rem 0 0; color: var(--ink-2);
}
.joblist { list-style: none; margin: clamp(1.5rem,3vw,2.5rem) 0 0; padding: 0; }
.joblist li { border-top: 1px solid var(--ink); }
.joblist li:last-child { border-bottom: 1px solid var(--ink); }
.rowlink {
  /* The title gets the whole measure and the CTA drops to the meta line.
     Sharing a row with the CTA cost the title a third of its width, which is
     what forced 实验室自动化研发实习生（机械方向） onto two lines and split 机械
     across the break. Postings are named by people, not by the layout, so the
     row has to survive a title of any length. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title title"
    "sub   go";
  align-items: baseline; gap: 0.4rem 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  text-decoration: none; color: var(--ink);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
/* The hover indent is a transform, not padding. Padding shrank the content box
   by 2.2rem, which was enough to wrap the automation posting's subtitle onto a
   second line and make the whole row jump taller under the cursor. */
.rowlink > * { transition: transform 0.3s var(--ease); }
.rowlink__title {
  grid-area: title;
  font-family: var(--cjk-disp); font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem); line-height: 1.4; letter-spacing: 0.03em;
  display: block;
  /* if it still has to wrap (narrow viewports), split the lines evenly rather
     than leaving a two-character orphan */
  text-wrap: balance;
}
.rowlink__sub {
  grid-area: sub;
  display: block;
  font-family: var(--mono), var(--cjk-body); font-size: 0.82rem;
  letter-spacing: 0.06em; color: var(--ink-2);
}
.rowlink__go {
  grid-area: go; justify-self: end;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.5em;
}
.rowlink:hover { background: var(--ink); color: var(--paper-2); }
.rowlink:hover .rowlink__title, .rowlink:hover .rowlink__sub { transform: translateX(1.1rem); }
.rowlink:hover .rowlink__go { color: var(--green-lt); }
.rowlink:hover .rowlink__sub { color: #B7BEB8; }

/* ================================================================== news */
.news { list-style: none; margin: clamp(1.5rem,3vw,2.5rem) 0 0; padding: 0; }
.news li { border-top: 1px solid var(--rule); }
.news li:last-child { border-bottom: 1px solid var(--rule); }
.news a {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 0.25rem 1.5rem; align-items: baseline;
  padding: 1rem 0; text-decoration: none; color: var(--ink);
  transition: background-color 0.28s var(--ease);
}
.news__meta {
  font-family: var(--mono), var(--cjk-body); font-size: 0.7rem;
  letter-spacing: 0.14em; color: var(--ink-2);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.news__date { color: var(--ink-3); }
.news__title {
  font-family: var(--cjk-body); font-size: 0.98rem; line-height: 1.65;
  letter-spacing: 0.02em;
}
.news__arrow { font-family: var(--mono); color: var(--ink-3); font-size: 0.85rem; }
.news a > * { transition: transform 0.28s var(--ease); }
.news a:hover { background: var(--paper-3); }
.news a:hover .news__meta, .news a:hover .news__title { transform: translateX(0.9rem); }
.news a:hover .news__arrow { color: var(--green); }

/* =============================================================== contact */
.contact__subhead {
  font-family: var(--mono), var(--cjk-body); font-size: 0.7rem;
  letter-spacing: 0.2em; color: var(--ink-2);
  margin: 0 0 0.6rem; font-weight: 500;
}
.contact__grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.datalist { margin: 0; }
.datalist dt {
  font-family: var(--mono), var(--cjk-body);
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 0.35rem;
}
.datalist dd {
  margin: 0 0 1.25rem;
  font-size: 1rem; line-height: 1.75;
}
.datalist dd:last-child { margin-bottom: 0; }
.datalist a { color: var(--green); text-decoration: none; border-bottom: 1px solid var(--rule); }
.datalist a:hover { color: var(--ink); border-bottom-color: var(--flag-lt); }

[lang="hi"] { letter-spacing: normal; text-transform: none; font-family: "Noto Sans Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", system-ui, sans-serif; }

address {
  font-style: normal; line-height: 1.9; letter-spacing: 0.02em;
  font-family: var(--cjk-body);
}
address strong { font-weight: 700; }

/* ================================================================ button */
.btn {
  display: inline-flex; align-items: center; gap: 0.9em;
  padding: 0.95em 1.5em;
  background: var(--ink); color: var(--paper-2);
  font-family: var(--cjk-body); font-weight: 500;
  font-size: 0.95rem; letter-spacing: 0.1em;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn::after {
  content: "→"; font-family: var(--mono); font-size: 0.9em;
  transition: transform 0.25s var(--ease);
}
.btn:hover { background: var(--green); border-color: var(--green); }
.btn:hover::after { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.plate-dark .btn { background: var(--green-lt); border-color: var(--green-lt); color: #06120D; }
.plate-dark .btn:hover { background: var(--paper-2); border-color: var(--paper-2); color: var(--ink); }

/* =============================================================== colophon */
.colophon {
  position: relative; z-index: 2;
  border-top: 1px solid var(--ink);
  margin-top: clamp(3rem, 7vw, 6rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.colophon__inner {
  width: min(1340px, 92vw); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2);
}
.colophon__inner a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.colophon__inner a:hover { color: var(--green); border-bottom-color: var(--green); }
.colophon .spacer { flex: 1; }

/* ============================================================ job pages */
.masthead {
  position: relative; z-index: 2;
  padding: calc(var(--rail-h) + clamp(1.75rem, 4.5vw, 3.5rem)) 0 clamp(2rem, 5vw, 4rem);
}
.masthead__inner { width: min(1340px, 92vw); margin-inline: auto; }
.masthead .kicker { margin-bottom: 0.9rem; }
.masthead h1 {
  margin: 0;
  font-family: var(--cjk-disp); font-weight: 900;
  font-size: clamp(2.15rem, 6.4vw, 5rem);
  line-height: 1.1; letter-spacing: 0.03em;
  max-width: 14em; mix-blend-mode: multiply;
}
.masthead__tagline {
  margin: 1.1rem 0 0; max-width: 30em;
  font-family: var(--mono), var(--cjk-body);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  letter-spacing: 0.06em; color: var(--flag); font-weight: 500;
}
.masthead__row {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
}
.spec {
  background: var(--paper-2);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  box-shadow: 0 0 0 1px rgba(20,26,23,.07), 0 24px 48px -34px rgba(20,26,23,.55);
}
.spec::before { content: ""; display: block; height: 3px; background: var(--green); margin: calc(-1 * clamp(1.25rem, 2.4vw, 1.9rem)) calc(-1 * clamp(1.25rem, 2.4vw, 1.9rem)) clamp(1rem, 2vw, 1.4rem); }
.spec dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 0.55rem 1.5rem; }
.spec dt {
  font-family: var(--mono), var(--cjk-body); font-size: 0.7rem;
  letter-spacing: 0.18em; color: var(--ink-2); line-height: 2.1;
}
.spec dd { margin: 0; font-size: 0.94rem; line-height: 2.1; font-family: var(--cjk-body); }

.doc { position: relative; z-index: 2; padding-bottom: clamp(2rem, 5vw, 4rem); }
.doc__inner {
  width: min(1340px, 92vw); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 44rem) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.doc__body { grid-column: 1; min-width: 0; }
.doc__aside { grid-column: 2; align-self: stretch; }

/* sticky outline in the margin — the only way a 2,000-character nested
   posting stays navigable. It sits on its own card so 0.8rem type never has
   to compete with the live plate behind it. */
.contents {
  position: sticky; top: calc(var(--rail-h) + 1.75rem);
  max-width: 20rem;
  background: var(--paper-2);
  border-top: 3px solid var(--ink);
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: 0 0 0 1px rgba(20,26,23,.07), 0 24px 48px -34px rgba(20,26,23,.55);
}
.contents__mark {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.24em;
  color: var(--green); margin: 0 0 0.9rem;
}
.contents ol { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.contents li { counter-increment: c; }
.contents ol a {
  display: grid; grid-template-columns: 2.1em minmax(0, 1fr);
  gap: 0.5rem; align-items: baseline;
  padding: 0.4rem 0; text-decoration: none; color: var(--ink-2);
  font-family: var(--cjk-body); font-size: 0.82rem; line-height: 1.7;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--rule-soft);
  transition: color 0.2s var(--ease);
}
.contents ol a::before {
  content: counter(c, cjk-decimal);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--ink-3);
}
.contents ol a:hover, .contents ol a:focus-visible { color: var(--green); }
.contents__apply { margin-top: 1.4rem; max-width: none; }
.contents__apply .btn { width: 100%; justify-content: space-between; }

/* long-form sections on paper */
.leaf {
  background: var(--paper-2);
  padding: clamp(1.75rem, 3.2vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  box-shadow: 0 0 0 1px rgba(20,26,23,.07), 0 24px 48px -34px rgba(20,26,23,.55);
}
.leaf + .leaf { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

.leaf h2 {
  margin: 0 0 1.25rem;
  font-family: var(--cjk-disp); font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.35; letter-spacing: 0.04em;
  display: flex; align-items: baseline; gap: 0.7em;
}
.leaf h2 .ord {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  color: var(--green); font-weight: 500; flex-shrink: 0;
  transform: translateY(-0.35em);
}
.leaf h3 {
  margin: 2rem 0 0.75rem;
  font-family: var(--cjk-disp); font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.04em;
}

/* --- nested outline: the automation posting's 我们最看重什么 lives here --- */
.outline { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.outline > li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.85em;
  font-family: var(--font-body);
  font-size: 1.0125rem; line-height: 1.9; letter-spacing: 0.018em;
  max-width: var(--measure);
}
.outline > li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 0.62em; height: 1px; background: var(--green);
}
.outline > li:last-child { margin-bottom: 0; }

/* a nested item becomes a bordered sub-plate — hierarchy you can see */
.outline > li.has-sub {
  padding-left: 0; margin-top: 1.4em; margin-bottom: 1.4em;
  border-left: 2px solid var(--green);
  padding-left: clamp(0.9rem, 1.8vw, 1.4rem);
}
.outline > li.has-sub::before { display: none; }
.outline .sub-lead {
  display: block; font-family: var(--cjk-disp); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.04em; line-height: 1.7;
  margin-bottom: 0.4em;
}
.outline .sub-lead .pri { color: var(--green); }
.outline .sub-lead .bar { color: var(--ink-3); margin: 0 0.05em; }
.outline ul {
  list-style: none; margin: 0.5em 0 0; padding: 0;
}
.outline ul li {
  position: relative; padding-left: 1.35em; margin-bottom: 0.45em;
  font-size: 0.965rem; line-height: 1.85; color: var(--ink-2);
}
.outline ul li::before {
  content: "·"; position: absolute; left: 0.25em; top: 0;
  color: var(--ink-3); font-weight: 700;
}
.outline ul li:last-child { margin-bottom: 0; }

/* short inline sets (e.g. 梯度稀释 / 浓度换算) run as chips, not a list */
.outline ul.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6em; }
.outline ul.chips li {
  padding: 0.2em 0.75em; margin: 0; background: var(--paper-3);
  font-size: 0.86rem; letter-spacing: 0.04em; color: var(--ink);
  line-height: 1.9;
}
.outline ul.chips li::before { display: none; }

.leaf__note {
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem; line-height: 1.9; color: var(--ink-2);
  max-width: var(--measure);
}
.leaf__note p { margin-bottom: 0.6em; max-width: none; }
.leaf__note p:last-child { margin-bottom: 0; }

/* margin notes beside the document */
.marginnote {
  font-family: var(--mono), var(--cjk-body);
  font-size: 0.7rem; letter-spacing: 0.14em; line-height: 1.9;
  color: var(--ink-2); text-transform: uppercase;
  position: sticky; top: calc(var(--rail-h) + 1.5rem);
}
.marginnote b { display: block; color: var(--green); font-weight: 500; }

.applybox { margin-top: clamp(1.25rem, 2.5vw, 2rem); background: var(--paper-3); }
.applybox .attach { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: at; }
.applybox .attach li {
  position: relative; padding-left: 2.4em; margin-bottom: 0.8em;
  counter-increment: at; line-height: 1.9; max-width: var(--measure);
}
.applybox .attach li::before {
  content: counter(at, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--green); line-height: 2.5;
}
.applybox .subject {
  margin-top: 1.25rem; padding: 0.9rem 1.1rem;
  background: var(--paper-2); border-left: 2px solid var(--ink);
  font-family: var(--mono), var(--cjk-body); font-size: 0.92rem;
  line-height: 1.8; max-width: none;
}
.applybox .subject b {
  display: block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2);
  font-weight: 500; margin-bottom: 0.25rem;
}

.backlink {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--mono), var(--cjk-body); font-size: 0.76rem;
  letter-spacing: 0.16em; color: var(--ink-2); text-decoration: none;
}
.backlink:hover { color: var(--green); }

/* ============================================================== reveals */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][style*="--d"] { transition-delay: var(--d); }

/* ============================================================ responsive */
@media (max-width: 1080px) {
  .doc__inner { grid-template-columns: minmax(0, 1fr); }
  .doc__body { grid-column: 1; grid-row: 2; }
  .doc__aside { grid-column: 1; grid-row: 1; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
  .contents { position: static; }
  .contents { max-width: none; }
  .contents ol { columns: 2; column-gap: 2rem; }
}

@media (max-width: 900px) {
  :root { --measure: 100%; }
  .chapter__inner { grid-template-columns: minmax(0, 1fr); }
  .chapter--verso .window, .chapter--recto .window {
    grid-column: 1; grid-row: 1; min-height: 0;
  }
  .chapter--verso .sheet, .chapter--recto .sheet { grid-column: 1; grid-row: 2; }
  .window { min-height: 0; }
  .hang {
    writing-mode: horizontal-tb; position: static;
    font-size: clamp(2.6rem, 15vw, 5rem);
    margin-top: 1.5rem;
  }
  .hero__foot { grid-template-columns: minmax(0, 1fr); }
  .hero__cue { justify-self: start; }
  .masthead__row { grid-template-columns: minmax(0, 1fr); }
  .doc__inner { grid-template-columns: minmax(0, 1fr); }
  .doc__aside { grid-column: 1; }
  .prose, p, .outline > li, .leaf__note, .applybox .attach li { max-width: none; }
}

@media (max-width: 700px) {
  body { font-size: 1rem; line-height: 1.92; }
  .rail { height: 3rem; gap: 0.75rem; }
  .rail__mark span { display: none; }
  .rail__nav { gap: 0.75rem; }
  .rail__nav a { font-size: 0.72rem; letter-spacing: 0.08em; }
  .index-row__inner { grid-template-columns: minmax(0, 1fr); }
  /* stacked: no vertical rules left to clear, so everything goes flush again */
  .index-row a, .index-row a + a { --pl: 0rem; border-right: 0; }
  .rowlink {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "sub" "go";
  }
  .rowlink__go { justify-self: start; margin-top: 0.55rem; }
  .news a { grid-template-columns: minmax(0, 1fr) auto; }
  .news__meta { grid-column: 1 / -1; flex-direction: row; gap: 0.75rem; }
  .sheet, .leaf, .plate-dark, .spec {
    margin-inline: calc(-4vw); padding-inline: 5.5vw;
  }
  .argument > li { grid-template-columns: minmax(0, 1fr); }
  .argument__n { font-size: 1.15rem; margin-bottom: 0.2rem; }
  .spec dl { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .spec dt { line-height: 1.8; margin-top: 0.7rem; }
  .spec dd { line-height: 1.8; }
  .spec dt:first-child { margin-top: 0; }
  .ground__grid { background-size: 20px 20px; }
  .contents ol { columns: 1; }
  .contents { margin-inline: 0; }
}

/* ========================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__cue span { animation: none; }
}

/* ================================================================= print */
@media print {
  .ground, .rail, .reg-cursor, .hero__cue { display: none !important; }
  body { background: #fff; color: #000; }
  .sheet, .leaf, .spec { box-shadow: none; border: 1px solid #999; }
}