/* ============================================================
   Together Research — "Open Record"
   The index is the interface. A monospace metadata stratum sits
   under display-weight titles; the register grows downward forever.
   Fonts and palette inherited from the TLC design language, locked.
   ============================================================ */

/* ─── Leon Sans, served live from togetherlearning.com ───
   The server declares four separate families (LeonSans-Bold, -Medium,
   -Regular, -Light) each at ../font.ttf. Re-declared here as ONE family
   with real weight axes so `font-weight` behaves. No Thin exists on the
   server; 100 maps to Light. */
@font-face { font-family:'Leon Sans'; font-weight:100; font-display:swap;
  src:url('https://togetherlearning.com/assets/fonts/LeonSans-Light/font.ttf') format('truetype'); }
@font-face { font-family:'Leon Sans'; font-weight:300; font-display:swap;
  src:url('https://togetherlearning.com/assets/fonts/LeonSans-Light/font.ttf') format('truetype'); }
@font-face { font-family:'Leon Sans'; font-weight:400; font-display:swap;
  src:url('https://togetherlearning.com/assets/fonts/LeonSans-Regular/font.ttf') format('truetype'); }
@font-face { font-family:'Leon Sans'; font-weight:500; font-display:swap;
  src:url('https://togetherlearning.com/assets/fonts/LeonSans-Medium/font.ttf') format('truetype'); }
@font-face { font-family:'Leon Sans'; font-weight:700; font-display:swap;
  src:url('https://togetherlearning.com/assets/fonts/LeonSans-Bold/font.ttf') format('truetype'); }

:root{
  --navy:#000052; --navy-deep:#00003a; --navy-mid:#000078;
  --white:#ffffff; --green:#27FF00; --teal:#33eebb; --blue:#449ddd; --silver:#e8e8e8;

  /* Tinted from the surface hue, never gray. 0.62 over navy = 6.8:1.
     The old mockup's 0.40 measured 3.5:1 and failed AA. */
  --ink:var(--white); --ink-2:var(--silver);
  --ink-3:rgba(226,226,244,0.74);
  --ink-4:rgba(212,212,238,0.62);
  --rule:rgba(255,255,255,0.13);
  --rule-strong:rgba(255,255,255,0.26);
  --flag:#ffb020;
  /* Field surface, and the same color as an opaque hex for the one place
     transparency is impossible: painting over Chrome's autofill blue. */
  --well:rgba(0,0,30,0.5); --well-solid:#000038;

  --font:'Leon Sans','Outfit',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,'Courier New',monospace;

  --ease:cubic-bezier(0.23,1,0.32,1);
  --ease-soft:cubic-bezier(0.32,0.72,0,1);
  --t-press:150ms; --t-ui:200ms; --t-move:320ms;

  --shell:min(1280px,100% - clamp(2rem,7vw,6rem));
  --hdr-h:68px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 66px)}

body{font-family:var(--font);background:var(--navy);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ─── Browser surfaces: defaults that belong to no design system ─── */
::selection{background:var(--green);color:var(--navy);text-shadow:none}
::-moz-selection{background:var(--green);color:var(--navy)}
:root{scrollbar-color:rgba(39,255,0,0.45) var(--navy-deep);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--navy-deep)}
::-webkit-scrollbar-thumb{background:rgba(39,255,0,0.32);border:3px solid var(--navy-deep);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(39,255,0,0.55)}
input,textarea{caret-color:var(--green)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
a{color:inherit;text-decoration-color:rgba(39,255,0,0.5);text-underline-offset:0.22em;text-decoration-thickness:1px}
[data-num],.mono{font-variant-numeric:tabular-nums}
/* The header gates Admin and the Submission Portal with the hidden attribute.
   Stated here with !important so no later display rule can quietly re-show a
   nav item that a signed-out reader is not meant to see. */
[hidden]{display:none!important}

/* ─── Type ─── */
h1,h2,h3{font-weight:700;line-height:1.06;letter-spacing:-0.03em;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.4vw,4rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.7rem)}
h3{font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.22;letter-spacing:-0.02em}
p{max-width:68ch}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.65;color:var(--ink-2)}
.glow{color:var(--green);text-shadow:0 0 14px rgba(39,255,0,0.45),0 0 44px rgba(39,255,0,0.18)}
.mono{font-family:var(--mono);font-size:0.76rem;letter-spacing:0.02em;color:var(--ink-3)}
.doi{font-family:var(--mono);font-size:0.75rem;color:var(--teal);white-space:nowrap}
.shell{width:var(--shell);margin-inline:auto}
section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.rule{height:1px;background:var(--rule);border:0}

/* ─── Header ─── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(0,0,62,0.86);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--rule)}
.hdr-in{width:var(--shell);margin-inline:auto;min-height:var(--hdr-h);display:flex;align-items:center;gap:2rem}
.brand{display:flex;align-items:center;gap:0.7rem;font-size:1.05rem;font-weight:700;letter-spacing:-0.02em;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:10px;display:block}
.brand-stack{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand-line{display:flex;align-items:baseline;gap:0.7rem;white-space:nowrap}
.brand .brand-mark{color:var(--green)}
/* The ISSN rides inside the brand link so number and title read as one unit —
   the association the ISSN display rules require. Muted so the wordmark keeps
   the stage. Rendered only once an ISSN is stored in admin Settings. */
.brand .brand-issn{font-size:0.68rem;font-weight:400;letter-spacing:0.04em;color:var(--ink-4);white-space:nowrap}
/* The imprint line: tagline and place of publication (the ISSN Japan Centre
   requires the latter stated on the site). In the markup on every page, but
   only the masthead state below spends the room to show it. */
.brand-sub{font-size:0.74rem;font-weight:400;letter-spacing:0.02em;color:var(--ink-4);white-space:nowrap;max-height:0;opacity:0;overflow:hidden}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.7rem}
.nav a{font-size:0.82rem;font-weight:500;text-decoration:none;color:var(--ink-3);transition:color var(--t-ui) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--green)}
/* Long nav labels shorten below the small breakpoint rather than wrapping. */
.nav-abbr{display:none}
@media (max-width:620px){
  .nav-full{display:none}
  .nav-abbr{display:inline}
  /* Admin is a desk task, not a phone one. */
  .nav-pill{display:none}
}
@media (max-width:520px){
  /* Keep the mark, drop the wordmark: five items will not fit a phone otherwise. */
  .brand{font-size:0;gap:0}
  .brand img{width:34px;height:34px}
  .brand-line{gap:0}
  /* No wordmark on a phone means no ISSN either: the number must never
     appear separated from the title it belongs to. */
  .brand .brand-issn{display:none}
  .nav{gap:0.95rem}
  .nav a{font-size:0.78rem}
  .nav-signin{padding:0.4rem 0.8rem;font-size:0.74rem!important}
}

/* ─── Masthead ───
   While the page sits at its very top the header opens into the journal's
   nameplate: larger mark, ISSN beside the title, the imprint line beneath.
   Scroll, and it settles back into the compact bar above and sticks, exactly
   as before. JS toggles .hdr-top (layout.php inline script and chrome.js do
   the same job — keep them in step); below 980px the class is inert and the
   bar never changes, so phones and mid-page loads only ever see the compact
   header. The transitions move layout, deliberately: this runs once per state
   change, not per scroll frame. */
@media (min-width:980px){
  .hdr .hdr-in{transition:min-height var(--t-move) var(--ease-soft)}
  .hdr .brand img{transition:width var(--t-move) var(--ease-soft),height var(--t-move) var(--ease-soft),
                  border-radius var(--t-move) var(--ease-soft)}
  .hdr .brand-line{transition:font-size var(--t-move) var(--ease-soft)}
  .hdr .brand-issn{transition:font-size var(--t-move) var(--ease-soft)}
  .hdr .brand-sub{transition:max-height var(--t-move) var(--ease-soft),opacity var(--t-ui) var(--ease)}
  .hdr-top .hdr-in{min-height:104px}
  .hdr-top .brand img{width:60px;height:60px;border-radius:14px}
  .hdr-top .brand-line{font-size:1.4rem}
  .hdr-top .brand-issn{font-size:0.74rem}
  .hdr-top .brand-sub{max-height:1.5rem;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .hdr .hdr-in,.hdr .brand img,.hdr .brand-line,.hdr .brand-issn,.hdr .brand-sub{transition:none}
}

.nav-pill{font-family:var(--mono);font-size:0.66rem!important;letter-spacing:0.1em;
  text-transform:uppercase;border:1px solid var(--rule-strong);border-radius:999px;
  padding:0.34rem 0.75rem;text-decoration:none}
.nav-pill.on,.nav-pill:hover{border-color:var(--green);color:var(--green)!important}
.nav-signin{background:var(--green);color:var(--navy)!important;border-radius:999px;
  padding:0.44rem 1rem;font-weight:700;font-size:0.78rem!important;text-decoration:none;
  transition:box-shadow var(--t-ui) var(--ease),transform var(--t-press) var(--ease)}
.nav-signin:hover{box-shadow:0 4px 20px rgba(39,255,0,0.3);color:var(--navy)!important}
.nav-signin:active{transform:scale(0.97)}

/* ─── The account button: you, in the header ─── */
.me{position:relative}
.me-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--green);
  background:var(--navy-mid);padding:0;cursor:pointer;overflow:hidden;
  display:grid;place-items:center;
  transition:box-shadow var(--t-ui) var(--ease),transform var(--t-press) var(--ease)}
.me-btn:hover{box-shadow:0 0 0 4px rgba(39,255,0,0.16)}
.me-btn:active{transform:scale(0.94)}
.me-btn img{width:100%;height:100%;object-fit:cover;display:block}
.me-init{font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--green)}
.me-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:11.5rem;z-index:70;
  background:var(--navy-deep);border:1px solid var(--rule-strong);border-radius:0.85rem;
  padding:0.4rem;box-shadow:0 18px 50px rgba(0,0,0,0.5);
  /* Scales in from its trigger, top right, never from nothing. */
  opacity:0;transform:scale(0.96);transform-origin:top right;pointer-events:none;
  transition:opacity 150ms var(--ease),transform 150ms var(--ease)}
.me-menu.open{opacity:1;transform:scale(1);pointer-events:auto}
.me-menu a{display:block;padding:0.55rem 0.8rem;border-radius:0.5rem;text-decoration:none;
  font-size:0.82rem;color:var(--ink-2);transition:background var(--t-ui) var(--ease),color var(--t-ui) var(--ease)}
.me-menu a:hover,.me-menu a:focus-visible{background:rgba(255,255,255,0.06);color:var(--green)}

/* ─── Page head, shared by the inner pages ─── */
.back{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--mono);
  font-size:0.72rem;color:var(--ink-3);text-decoration:none;letter-spacing:0.04em;
  transition:color var(--t-ui) var(--ease)}
.back:hover{color:var(--green)}
.phead{padding-block:clamp(2.5rem,5vw,4rem) 0}

/* ─── Article page ─── */
/* The cover as atmosphere behind the page head: nearly transparent, faded out
   entirely by the time the reading column begins. z-index -1 sits it above
   the canvas backdrop (body's navy propagates there) and below all content. */
.art-bg{position:absolute;top:0;left:0;right:0;height:min(72vh,720px);z-index:-1;
  background-size:cover;background-position:center 22%;opacity:0.13;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0.45) 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0.45) 55%,transparent 100%);
  pointer-events:none}

.art{display:grid;grid-template-columns:1fr 340px;gap:clamp(2rem,4.5vw,4rem);
  align-items:start;margin-top:2rem}
/* Teal, not green: green is the site's action colour (buttons, sign-in,
   focus), teal already marks identity (every DOI). A title is identity. */
.art h1{font-size:clamp(1.7rem,3.2vw,2.6rem);color:var(--teal)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem 1.2rem;margin-bottom:1.3rem;
  font-family:var(--mono);font-size:0.72rem;color:var(--ink-4)}
.art-by{margin-top:1.2rem;color:var(--ink-2)}
.panel{border:1px solid var(--rule);border-radius:1.5rem;padding:clamp(1.2rem,2.4vw,1.8rem);
  margin-top:2rem;background:rgba(255,255,255,0.025)}
.panel h2{font-size:1.15rem;letter-spacing:-0.02em;margin-bottom:0.9rem}
.panel p{color:var(--ink-2)}
/* Flash notices are p/pre elements wearing .panel. The global p measure
   (max-width:68ch) would make them narrower than the real panels they sit
   between, which reads as a different component rather than a message. */
p.panel,pre.panel{max-width:none}

/* Review-quota progress: how far an author is through the reviews their
   submissions ask of them. Shared by the portal and the paper page. */
.quota-bar{height:9px;border:1px solid var(--rule);border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,0.03);max-width:26rem}
.quota-bar i{display:block;height:100%;background:var(--green);border-radius:999px;
  transition:width 0.4s ease}
.quota-bar.met i{background:var(--green)}

/* Custom page segments: admin-authored HTML blocks on the article page.
   Collapsible ones are <details>, so they work on a static page with no JS.
   The .panel look matches the Abstract card; .seg-plain hands the visuals
   to the segment's own HTML. */
details.seg{margin-top:2rem}
details.seg.seg-framed{border:1px solid var(--rule);border-radius:1.5rem;
  background:rgba(255,255,255,0.025);overflow:hidden}
details.seg summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;font-weight:700;font-size:1.05rem;
  letter-spacing:-0.01em;padding:1.1rem clamp(1.2rem,2.4vw,1.8rem)}
details.seg.seg-plain summary{padding:0.6rem 0}
details.seg summary::-webkit-details-marker{display:none}
details.seg summary::after{content:'+';font-family:var(--mono);color:var(--green);
  font-size:1.15rem;flex:none}
details.seg[open] summary::after{content:'\2212'}
details.seg .seg-body{padding:0 clamp(1.2rem,2.4vw,1.8rem) 1.4rem}
details.seg.seg-plain .seg-body{padding:0}
.seg img,.seg iframe,.seg video,.seg embed{max-width:100%}
.side details.seg{margin-top:1rem}
.side details.seg summary{font-size:0.92rem;padding:0.9rem 1.1rem}
.side details.seg .seg-body{padding:0 1.1rem 1rem}

/* Version history: state changes over time, in the page's own state colours */
.vers{list-style:none;margin-top:0.4rem}
.vers li{position:relative;padding:0 0 1.3rem 1.7rem}
.vers li:last-child{padding-bottom:0}
.vers li::before{content:'';position:absolute;left:0;top:6px;width:11px;height:11px;
  border-radius:50%;background:var(--ink-4)}
.vers li::after{content:'';position:absolute;left:5px;top:20px;bottom:0;width:1px;background:var(--rule)}
.vers li:last-child::after{display:none}
.vers li.v-reviewed::before{background:var(--green);box-shadow:0 0 10px rgba(39,255,0,0.55)}
.vers li.v-unreviewed::before{background:none;border:2px solid var(--blue)}
.vers .vh{display:flex;flex-wrap:wrap;gap:0.4rem 0.9rem;align-items:baseline}
.vers .vn{font-weight:700;font-size:0.95rem}
.vers .vd{font-family:var(--mono);font-size:0.7rem;color:var(--ink-4)}
.vers .vnote{font-size:0.86rem;color:var(--ink-3);margin-top:0.3rem;max-width:60ch}

.refs{list-style:none;margin-top:0.5rem}
.refs li{padding:0.85rem 0 0.85rem 1rem;border-left:1px solid var(--teal);margin-bottom:0.7rem}
.refs p{font-size:0.88rem;color:var(--ink-2)}
.refs .rd{font-family:var(--mono);font-size:0.68rem;color:var(--teal);margin-top:0.35rem;display:block}

/* Sidebar */
.side{position:sticky;top:calc(var(--hdr-h) + 1.5rem);display:flex;flex-direction:column;gap:1.3rem}
.side-cover img{width:100%;border-radius:12px;display:block;
  box-shadow:0 18px 44px rgba(0,0,16,0.55)}
.cite{border:1px solid var(--rule);border-radius:1.2rem;padding:1.2rem;background:rgba(255,255,255,0.03)}
.cite-tabs{display:flex;gap:0.4rem;margin-bottom:0.9rem}
.cite-tabs button{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.08em;
  background:none;border:1px solid var(--rule-strong);color:var(--ink-3);border-radius:999px;
  padding:0.32rem 0.7rem;cursor:pointer;
  transition:background var(--t-ui) var(--ease),color var(--t-ui) var(--ease),
             border-color var(--t-ui) var(--ease),transform var(--t-press) var(--ease)}
.cite-tabs button[aria-selected="true"]{background:var(--white);color:var(--navy);border-color:var(--white)}
.cite-tabs button:active{transform:scale(0.96)}
.cite pre{font-family:var(--mono);font-size:0.7rem;line-height:1.6;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word;margin-bottom:0.9rem}
/* Share panel: same quiet card as .cite, pills borrowed from .kw. Buttons and
   anchors share one class, so the two are indistinguishable in the row. */
.share{border:1px solid var(--rule);border-radius:1.2rem;padding:1.1rem 1.2rem;
  background:rgba(255,255,255,0.03)}
.share-t{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-4)}
.share-row{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:0.7rem}
.share-pill{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;color:var(--ink-3);
  border:1px solid var(--rule-strong);border-radius:999px;padding:0.3rem 0.75rem;
  background:none;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),
             transform var(--t-press) var(--ease)}
.share-pill:hover{color:var(--green);border-color:var(--green)}
.share-pill:active{transform:scale(0.96)}

.doi-box{border:1px solid rgba(39,255,0,0.32);border-radius:1.2rem;padding:1.2rem;
  background:rgba(39,255,0,0.05)}
.doi-box .d{font-family:var(--mono);font-size:0.82rem;color:var(--green);word-break:break-all}
.doi-box .n{font-size:0.74rem;color:var(--ink-3);margin-top:0.5rem;line-height:1.5}
.side .btn{width:100%;justify-content:center}

/* ─── Author page ─── */
.auth{display:grid;grid-template-columns:320px 1fr;gap:clamp(2rem,4.5vw,4rem);
  align-items:start;margin-top:2rem}
.auth-card{border:1px solid var(--rule);border-radius:1.5rem;padding:1.6rem;
  background:rgba(255,255,255,0.03)}
.auth-card img{width:100%;border-radius:14px;display:block;margin-bottom:1.2rem}
.auth-name{font-size:1.4rem;font-weight:700;letter-spacing:-0.02em}
.auth-role{color:var(--blue);font-size:0.92rem;margin-top:0.2rem}

/* ─── Authors index ─── */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.4rem}
.person{display:flex;gap:1.1rem;align-items:center;padding:1.2rem 1.3rem;
  border:1px solid var(--rule);border-radius:1.5rem;background:rgba(255,255,255,0.03);
  text-decoration:none;
  transition:border-color var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease),
             transform var(--t-press) var(--ease)}
.person:hover{border-color:var(--rule-strong);box-shadow:0 10px 34px rgba(0,0,0,0.35)}
.person:active{transform:scale(0.98)}
.person img,.person-mono{width:64px;height:64px;border-radius:50%;flex:none;object-fit:cover}
.person-mono{display:grid;place-items:center;border:1px solid var(--rule-strong);
  font-family:var(--mono);font-size:1.3rem;color:var(--ink-3)}
.person-body{min-width:0}
.person-body h2{font-size:1.02rem;line-height:1.25}
.person:hover h2{color:var(--teal)}
.person-theme{display:block;margin-top:0.25rem;font-size:0.8rem;color:var(--blue);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.person-meta{display:block;margin-top:0.45rem;font-family:var(--mono);font-size:0.64rem;
  letter-spacing:0.08em;color:var(--ink-4)}
@media (max-width:820px){.people{grid-template-columns:1fr}}

/* ─── Submit flow ─── */
.stepper{display:flex;align-items:center;gap:0;margin:2.4rem 0 2.6rem}
.stp{display:flex;align-items:center;gap:0.7rem;flex:none}
.stp i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-size:0.8rem;border:1px solid var(--rule-strong);color:var(--ink-3);
  font-style:normal}
.stp b{font-size:0.84rem;font-weight:500;color:var(--ink-3)}
.stp.on i{background:var(--green);border-color:var(--green);color:var(--navy);font-weight:700}
.stp.on b{color:var(--ink);font-weight:700}
.stp.done i{border-color:var(--green);color:var(--green);background:rgba(39,255,0,0.12)}
.stp-line{flex:1;height:1px;background:var(--rule);margin:0 0.9rem;min-width:18px}
.claim{border:1px solid var(--rule);border-radius:1.2rem;padding:1.1rem 1.3rem;margin-bottom:0.85rem;
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,0.025)}
.claim h3{font-size:1rem}
.claim .cm{font-family:var(--mono);font-size:0.68rem;color:var(--ink-4);margin-top:0.35rem}
.drop{border:1.5px dashed var(--rule-strong);border-radius:1.2rem;padding:2.4rem 1.5rem;
  text-align:center;color:var(--ink-3);font-size:0.9rem}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.4rem}
.field{display:flex;flex-direction:column;gap:0.4rem}
.field label{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.12em;color:var(--ink-3)}
/* The hint voice belongs to the whole form vocabulary, not only to .field:
   panel intros and repeatable-row headers speak it too. */
.hint{font-size:0.72rem;color:var(--ink-4)}
label .hint{font-family:var(--font);letter-spacing:normal;text-transform:none}

/* ─── Form controls ───
   One layer for every control on the site: the publication editor, Settings,
   the submission portal, the session pages. It used to cover only inputs
   inside .field, so everything else (textareas, author rows, file pickers)
   shipped in UA white, and Chrome's autofill blue sat on top. color-scheme
   makes the browser paint the parts CSS cannot reach (calendar popups, select
   dropdowns, scrollbar corners) dark; the rules below carry the TLC language
   into the parts it can. */
:root{color-scheme:dark}

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])),
select,textarea{
  font-family:inherit;font-size:0.92rem;color:var(--ink);
  background:var(--well);border:1px solid var(--rule-strong);border-radius:0.6rem;
  padding:0.7rem 0.85rem;
  transition:border-color var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
:where(input,select,textarea):hover{border-color:rgba(255,255,255,0.42)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(39,255,0,0.14)}
::placeholder{color:rgba(212,212,238,0.55);opacity:1}

textarea{resize:vertical;min-height:6.5rem;line-height:1.55}

select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e2e2f4' stroke-opacity='.74' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0.9rem center;background-size:0.7rem}
select option{background:var(--navy-deep);color:var(--ink)}

::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0.7}
::-webkit-calendar-picker-indicator:hover{opacity:1}

input[type="file"]{font-family:var(--mono);font-size:0.7rem;color:var(--ink-3);
  background:var(--well);border:1px solid var(--rule-strong);border-radius:0.6rem;
  padding:0.5rem 0.6rem;width:100%;cursor:pointer;
  transition:border-color var(--t-ui) var(--ease)}
input[type="file"]:hover{border-color:rgba(255,255,255,0.42)}
input[type="file"]:focus-visible{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(39,255,0,0.14)}
input[type="file"]::file-selector-button{
  font-family:var(--font);font-size:0.78rem;color:var(--ink-2);
  background:transparent;border:1px solid var(--rule-strong);border-radius:999px;
  padding:0.4rem 1rem;margin-right:0.9rem;cursor:pointer;
  transition:border-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease)}
input[type="file"]::file-selector-button:hover{border-color:var(--green);color:var(--green)}

input[type="checkbox"],input[type="radio"]{
  accent-color:var(--green);width:1rem;height:1rem;cursor:pointer}

/* Chrome refuses a transparent background here, so the solid twin of the
   field surface paints over its pale-blue autofill wash. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);caret-color:var(--green);
  -webkit-box-shadow:0 0 0 1000px var(--well-solid) inset;
  transition:background-color 600000s}

/* ─── Admin ─── */
.tabs{display:flex;flex-wrap:wrap;gap:0.45rem;margin:2rem 0 2rem}
.tabs button{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;background:none;
  border:1px solid var(--rule-strong);color:var(--ink-3);border-radius:999px;
  padding:0.45rem 0.9rem;cursor:pointer;
  transition:background var(--t-ui) var(--ease),color var(--t-ui) var(--ease),
             border-color var(--t-ui) var(--ease),transform var(--t-press) var(--ease)}
.tabs button[aria-selected="true"]{background:var(--green);border-color:var(--green);
  color:var(--navy);font-weight:700}
.tabs button:active{transform:scale(0.96)}
.tbl{width:100%;border-collapse:collapse;font-size:0.86rem}
.tbl th{text-align:left;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.14em;
  color:var(--ink-4);font-weight:400;padding:0 0.7rem 0.7rem;border-bottom:1px solid var(--rule)}
.tbl td{padding:0.95rem 0.7rem;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl .mono{font-size:0.72rem}
.tbl a{color:var(--blue);text-decoration:none;font-size:0.78rem;margin-right:0.8rem;white-space:nowrap}
.tbl a:hover{color:var(--green)}
.chip{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.06em;border-radius:999px;
  padding:0.22rem 0.6rem;border:1px solid currentColor;white-space:nowrap}
.chip-ok{color:var(--green)} .chip-wait{color:var(--blue)} .chip-off{color:var(--ink-4)}
.admin-note{font-family:var(--mono);font-size:0.68rem;color:var(--ink-4);margin-top:1.2rem}
.flag{color:var(--flag);border-color:var(--flag)}

/* ─── Keyword chips: each one is a live archive query ─── */
.kws{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.1rem}
.kw{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;color:var(--ink-3);
  border:1px solid var(--rule-strong);border-radius:999px;padding:0.3rem 0.75rem;
  text-decoration:none;
  transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),
             transform var(--t-press) var(--ease)}
.kw:hover{color:var(--green);border-color:var(--green)}
.kw:active{transform:scale(0.96)}

/* ─── Related work cards ─── */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.rel-card{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:1.5rem;
  overflow:hidden;background:rgba(255,255,255,0.03);text-decoration:none;
  transition:border-color var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease),
             transform var(--t-press) var(--ease)}
.rel-card:hover{border-color:var(--rule-strong);box-shadow:0 10px 34px rgba(0,0,0,0.35)}
.rel-card:active{transform:scale(0.98)}
.rel-img{display:block;aspect-ratio:16/10;background-size:cover;background-position:center 25%}
.rel-body{display:block;padding:1.05rem 1.2rem 1.25rem}
.rel-body h3{font-size:0.98rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rel-card:hover h3{color:var(--teal)}
.rel-meta{display:block;margin-top:0.55rem;font-size:0.66rem;color:var(--ink-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:820px){.rel{grid-template-columns:1fr}.rel-img{aspect-ratio:16/7}}

/* ─── Embedded research presentation ─── */
.vid{aspect-ratio:16/9;border:1px solid var(--rule);border-radius:0.85rem;
  overflow:hidden;background:var(--navy-deep)}
.vid iframe{display:block;width:100%;height:100%;border:0}

/* ─── Unconference session portal ─── */
.sess{display:grid;grid-template-columns:340px 1fr 1fr;gap:1.3rem;margin-top:2rem;align-items:start}
.scard{border:1px solid var(--rule);border-radius:1.5rem;padding:1.4rem;
  background:rgba(255,255,255,0.03)}
.scard h2{font-size:1.05rem;margin-bottom:0.8rem}
.live{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.7rem;
  letter-spacing:0.12em;color:var(--green)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.timer{font-family:var(--mono);font-size:0.7rem;color:var(--ink-4)}
.ta{width:100%;min-height:120px;font-family:inherit;font-size:0.9rem;color:var(--ink);
  background:rgba(0,0,30,0.5);border:1px solid var(--rule-strong);border-radius:0.7rem;
  padding:0.8rem;resize:vertical;margin-block:0.9rem}
.resp{border-left:1px solid var(--blue);padding:0.2rem 0 0.2rem 0.9rem;margin-bottom:1.1rem}
.resp p{font-size:0.87rem;color:var(--ink-2)}
.resp .who{font-family:var(--mono);font-size:0.66rem;color:var(--ink-4);margin-top:0.35rem}
.themes{list-style:none;margin-top:0.6rem}
.themes li{position:relative;padding-left:1.1rem;font-size:0.88rem;color:var(--ink-2);
  margin-bottom:0.6rem}
.themes li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;
  background:var(--green);border-radius:1px;transform:rotate(45deg)}

@media (max-width:1000px){
  .art,.auth{grid-template-columns:1fr}
  .side{position:static;flex-direction:row;flex-wrap:wrap}
  .side>*{flex:1 1 260px}
  .side-cover{max-width:200px}
  .sess{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fields{grid-template-columns:1fr}
  .stepper{overflow-x:auto;padding-bottom:0.5rem}
  .stp b{display:none}
  .stp-line{min-width:26px}
  .tbl{font-size:0.78rem}
}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;gap:0.5rem;font-family:inherit;font-size:0.92rem;
  font-weight:700;letter-spacing:-0.01em;padding:0.85rem 1.6rem;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  /* explicit: a <button class="btn"> otherwise inherits the UA grey button face */
  background:none;color:var(--ink);
  transition:transform var(--t-press) var(--ease),background var(--t-ui) var(--ease),
             color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.btn:active{transform:scale(0.97)}
.btn-go{background:var(--green);color:var(--navy)}
.btn-go:hover{box-shadow:0 6px 28px rgba(39,255,0,0.34)}
.btn-line{border-color:var(--rule-strong);color:var(--ink)}
.btn-line:hover{border-color:var(--green);color:var(--green)}

/* ─── Hero ─── */
.hero{min-height:calc(100dvh - var(--hdr-h));display:flex;align-items:center;padding-block:clamp(2rem,5vw,3.5rem)}
.hero-in{width:var(--shell);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,47ch) 1fr;gap:clamp(1.5rem,5vw,5rem);align-items:center}
.hero h1{margin-bottom:1.3rem}
.hero .lede{margin-bottom:2.3rem;max-width:46ch}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:0.85rem}
.cta-note{flex-basis:100%;font-size:0.78rem;color:var(--ink-4);margin-top:0.85rem;max-width:52ch}
.cta-note a{color:var(--blue);text-decoration:none;transition:color var(--t-ui) var(--ease)}
.cta-note a:hover{color:var(--green)}
.tally{margin-top:2.4rem;font-family:var(--mono);font-size:0.74rem;color:var(--ink-4);letter-spacing:0.04em}

/* ─── The stage: a coverflow of records. Exactly three read at a time —
       the active card sits in front of and overlaps its neighbours — so the
       corpus rotates on the spot instead of running off the screen. ─── */
.rail-wrap{min-width:0}
.stage{
  position:relative;
  height:clamp(328px,46vh,384px);
  --step:clamp(112px,13vw,142px);   /* < card width, so the centre overlaps */
  touch-action:pan-y;               /* let the page scroll vertically */
  /* Off-stage cards sit far to the right at opacity 0 but still extend the
     document, so the page scrolled sideways. Clip x only: `hidden` would also
     crop the active card's shadow. */
  overflow-x:clip;
  overflow-y:visible;
}
.stage-inner{position:absolute;inset:0;transition:transform 300ms var(--ease)}
.stage.grabbing .stage-inner{transition:none}
.stage.grabbing{cursor:grabbing}

.card{
  position:absolute;left:50%;top:50%;
  width:clamp(196px,22vw,238px);height:clamp(304px,42vh,348px);
  display:flex;flex-direction:column;text-decoration:none;
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  /* opaque: a translucent card lets the neighbour's text ghost through it */
  background:#00005c;
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
  /* Transitions, not keyframes: clicking next twice fast retargets from the
     current position rather than restarting from zero. */
  transition:transform 420ms var(--ease-soft),opacity 420ms var(--ease-soft),
             border-color var(--t-ui) var(--ease),box-shadow 420ms var(--ease-soft);
}
/* The border defines the card's edge; the shadow carries z-order in the
   overlapping stack. Two jobs, so both earn their place. */
.card.is-active{border-color:rgba(255,255,255,0.24);
  box-shadow:0 20px 48px rgba(0,0,18,0.62)}
.card:not(.is-active){cursor:pointer}
.card.is-active:hover,.card.is-active:focus-visible{border-color:rgba(39,255,0,0.6)}
.card.is-active:active{transition-duration:var(--t-press)}

.card-img{aspect-ratio:3/2;overflow:hidden;background:var(--navy-deep);flex:none;position:relative}
/* Neighbours sit back visually as well as spatially. */
.card-img::after{content:'';position:absolute;inset:0;background:var(--navy);
  opacity:0.42;transition:opacity 420ms var(--ease-soft)}
.card.is-active .card-img::after{opacity:0}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 480ms var(--ease);
  /* stop the browser starting a native image drag mid-pan */
  -webkit-user-drag:none;user-select:none;pointer-events:none}
.card.is-active:hover .card-img img,.card.is-active:focus-visible .card-img img{transform:scale(1.05)}

.card-body{padding:0.9rem 0.95rem 1.05rem;display:flex;flex-direction:column;gap:0.5rem;flex:1}
.card-meta{display:flex;align-items:center;gap:0.5rem;font-family:var(--mono);
  font-size:0.66rem;color:var(--ink-4);letter-spacing:0.04em}
.card h3{font-size:0.93rem;line-height:1.3;letter-spacing:-0.015em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--t-ui) var(--ease)}
.card.is-active:hover h3,.card.is-active:focus-visible h3{color:var(--green)}
.card .by{font-size:0.76rem;color:var(--ink-3);margin-top:auto;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* Controls sit under the stage, not stranded at the column edge. */
.rail-bar{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:0.6rem}
.rail-bar .count{font-family:var(--mono);font-size:0.7rem;color:var(--ink-4);
  letter-spacing:0.06em;min-width:11ch;text-align:right}
.rail-nav{display:flex;gap:0.45rem}
.rail-nav button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:none;border:1px solid var(--rule-strong);color:var(--ink-2);cursor:pointer;
  transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),
             background var(--t-ui) var(--ease),transform var(--t-press) var(--ease),
             opacity var(--t-ui) var(--ease)}
.rail-nav button:hover:not(:disabled){color:var(--green);border-color:var(--green);
  background:rgba(39,255,0,0.08)}
.rail-nav button:active:not(:disabled){transform:scale(0.94)}
.rail-nav button:disabled{opacity:0.3;cursor:default}
.rail-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ─── State pips: one vocabulary everywhere ─── */
.pip{width:9px;height:9px;border-radius:50%;flex:none;display:block}
.pip-reviewed{background:var(--green);box-shadow:0 0 9px rgba(39,255,0,0.5)}
.pip-unreviewed{border:2px solid var(--blue)}
.pip-opinion{background:var(--silver);opacity:0.7}
.pip-book{background:var(--teal)}

/* ─── Volume spine: navigation AND structure. Scrolls sideways
       once there are more years than fit. Scales indefinitely. ─── */
.spine{position:sticky;top:var(--hdr-h);z-index:50;background:rgba(0,0,62,0.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.spine-in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:0.4rem;
  overflow-x:auto;scrollbar-width:none;padding-block:0.75rem}
.spine-in::-webkit-scrollbar{display:none}
.spine-in .lbl{font-family:var(--mono);font-size:0.68rem;color:var(--ink-4);
  letter-spacing:0.14em;padding-right:0.9rem;white-space:nowrap;flex:none}
.sp{font-family:var(--mono);font-size:0.82rem;font-weight:700;color:var(--ink-3);
  text-decoration:none;padding:0.4rem 0.85rem;border-radius:999px;white-space:nowrap;flex:none;
  border:1px solid transparent;transition:color var(--t-ui) var(--ease),
  border-color var(--t-ui) var(--ease),background var(--t-ui) var(--ease)}
.sp:hover{color:var(--green)}
.sp.on{color:var(--green);border-color:rgba(39,255,0,0.45);background:rgba(39,255,0,0.09)}
.sp.open{color:var(--green);border-style:dashed;border-color:rgba(39,255,0,0.5)}
.sp .n{color:var(--ink-4);font-weight:400;margin-left:0.4rem}
/* Search and filters live in the spine too, so finding a record starts in the
   same strip as picking a year. Pill-shaped to sit beside the volume pills;
   compact because this bar is chrome, not a form. */
.spf{display:flex;align-items:center;gap:0.5rem;margin-left:auto;flex:none}
.spf input[type="search"]{font-family:var(--mono);font-size:0.74rem;
  padding:0.42rem 1rem;border-radius:999px;width:clamp(11rem,22vw,17rem)}
.spf select{font-family:var(--mono);font-size:0.72rem;color:var(--ink-2);
  padding:0.42rem 2rem 0.42rem 0.9rem;border-radius:999px;
  background-position:right 0.8rem center}
.spf input[type="search"]::-webkit-search-cancel-button{cursor:pointer}
@media (max-width:900px){
  .spine-in{flex-wrap:wrap;overflow-x:visible}
  .spf{flex:1 1 100%;margin-left:0;padding-top:0.15rem}
  .spf input[type="search"]{flex:1;width:auto;min-width:0}
}

/* ─── Volume block ─── */
.vol{padding-top:clamp(3rem,6vw,5rem)}
.vol-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.6rem 1.3rem}
.vol-head .yr{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:700;letter-spacing:-0.04em;line-height:1}
.vol-head .vn{font-family:var(--mono);font-size:0.78rem;color:var(--ink-3);letter-spacing:0.1em}
.vol-note{color:var(--ink-4);font-size:0.85rem;margin-top:0.9rem;max-width:66ch}
.vol-note .doi{font-size:0.75rem}

/* Column header for the metadata stratum. Labels real fields. */
.cols{display:grid;grid-template-columns:18px 1fr 8.5rem 9rem 11.5rem;gap:1.4rem;
  font-family:var(--mono);font-size:0.64rem;letter-spacing:0.16em;color:var(--ink-4);
  padding:0 0.9rem 0.7rem 1.4rem;margin-top:2.2rem;border-bottom:1px solid var(--rule)}

.idx{list-style:none}
.idx li+li{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:18px 1fr 8.5rem 9rem 11.5rem;gap:1.4rem;align-items:baseline;
  padding:1.55rem 0.9rem 1.55rem 1.4rem;text-decoration:none;position:relative;border-radius:12px;
  transition:background var(--t-ui) var(--ease)}
.row::after{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;
  background:var(--green);transform:scaleY(0);transform-origin:top;transition:transform var(--t-move) var(--ease)}
.row:hover,.row:focus-visible{background:rgba(255,255,255,0.045)}
.row:hover::after,.row:focus-visible::after{transform:scaleY(1)}
.row .pip{margin-top:0.42rem}
.row-body{display:block;transition:transform var(--t-move) var(--ease)}
.row:hover .row-body,.row:focus-visible .row-body{transform:translateX(6px)}
.row h3{transition:color var(--t-ui) var(--ease)}
.row:hover h3,.row:focus-visible h3{color:var(--green)}
.row .by{display:block;font-size:0.84rem;color:var(--ink-3);margin-top:0.42rem;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.row .from{display:block;font-family:var(--mono);font-size:0.68rem;color:var(--blue);margin-top:0.5rem}
.row .cell{font-family:var(--mono);font-size:0.73rem;color:var(--ink-4)}
.row .cell.st-reviewed{color:var(--green)}
.row .cell.st-unreviewed{color:var(--blue)}

/* Develop-in: rows expose like a print, once, on entry. */
.row-wrap{clip-path:inset(0 0 100% 0);opacity:0;
  transition:clip-path 620ms var(--ease-soft),opacity 420ms var(--ease)}
.row-wrap.lit{clip-path:inset(0 0 0 0);opacity:1}

/* Older volumes fold away so year twelve reads as well as year one. */
.fold{margin-top:1.4rem;display:flex;justify-content:center}
.fold button{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.1em;color:var(--ink-3);
  background:none;border:1px solid var(--rule-strong);border-radius:999px;padding:0.6rem 1.4rem;
  cursor:pointer;transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),transform var(--t-press) var(--ease)}
.fold button:hover{color:var(--green);border-color:var(--green)}
.fold button:active{transform:scale(0.97)}

/* ─── Featured book ───
   A darker band, so the page reads a chapter break rather than another
   section. Same theme family, just a deeper tint. */
.book{background:var(--navy-deep);border-block:1px solid var(--rule);
  padding-block:clamp(3.5rem,8vw,6rem)}
.book-in{width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:minmax(180px,286px) 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}

.book-fig{position:relative;transform:translateY(18px);opacity:0;
  transition:transform 620ms var(--ease),opacity 520ms var(--ease)}
.book-fig.lit{transform:none;opacity:1}
/* The mockup PNG ships with its own ground, so it is presented as a plate:
   rounded and shadowed, which reads as deliberate rather than as a stray box.
   Shadow only, never shadow plus border, or it becomes a ghost card. */
.book-fig img{width:100%;display:block;border-radius:14px;
  box-shadow:0 26px 64px rgba(0,0,16,0.66),0 4px 12px rgba(0,0,16,0.4);
  transition:transform 420ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .book-fig img:hover{transform:translateY(-6px)}
}

.book-body h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.book-sub{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--ink-2);margin-top:0.5rem;
  font-weight:500;letter-spacing:-0.01em}
.book-by{font-family:var(--mono);font-size:0.72rem;color:var(--ink-4);
  letter-spacing:0.08em;margin-top:0.9rem}
.book-blurb{margin-top:1.4rem;color:var(--ink-2);max-width:62ch}

.book-quote{margin:1.8rem 0 0;padding-left:1.2rem;border-left:1px solid var(--green);
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.45;letter-spacing:-0.015em;
  color:var(--ink);max-width:48ch}

.book-ids{display:flex;flex-wrap:wrap;gap:0.4rem 1.4rem;margin-top:1.7rem;
  font-family:var(--mono);font-size:0.7rem;color:var(--ink-4);letter-spacing:0.04em}
.book-ids b{font-weight:400;color:var(--teal)}
.book-cta{display:flex;flex-wrap:wrap;align-items:center;gap:0.8rem 1.2rem;margin-top:1.9rem}
.book-cta .rel{font-size:0.82rem;color:var(--blue);text-decoration:none;
  transition:color var(--t-ui) var(--ease)}
.book-cta .rel:hover{color:var(--green)}

@media (max-width:760px){
  .book-in{grid-template-columns:1fr;gap:2rem}
  .book-fig{max-width:210px}
}
@media (prefers-reduced-motion:reduce){
  .book-fig{transform:none!important;opacity:1!important}
}

/* ─── Past events ───
   Rows, not a card grid: the page already spends cards on the hero. The
   image stays on the same side every row, so this reads as a list rather
   than a zigzag. The right column carries what the event produced. */
.evts{list-style:none;margin-top:2.6rem;border-top:1px solid var(--rule)}
.evt-row{
  display:grid;grid-template-columns:172px 1fr 15rem;gap:clamp(1.2rem,3vw,2.4rem);
  align-items:center;padding:1.7rem 0.4rem;border-bottom:1px solid var(--rule);
}
.evt-fig{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--navy-deep);
  border:1px solid var(--rule)}
.evt-fig img{width:100%;height:100%;object-fit:contain;display:block;padding:0.5rem;
  transition:transform 420ms var(--ease)}
.evt-row:hover .evt-fig img{transform:scale(1.04)}
.evt-body h3{margin-bottom:0.45rem}
/* Editions, not a single date: these are running series. */
.evt-eds{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.3rem 0.5rem;margin-bottom:0.6rem}
.evt-eds span{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;color:var(--ink-4);
  border:1px solid var(--rule);border-radius:999px;padding:0.16rem 0.5rem}
.evt-eds span.next{color:var(--green);border-color:rgba(39,255,0,0.45)}
.evt-eds em{font-family:var(--mono);font-size:0.64rem;font-style:normal;color:var(--ink-4);
  letter-spacing:0.06em;opacity:0.85}
.evt-body p{font-size:0.9rem;color:var(--ink-3);max-width:52ch}
.evt-out{display:flex;flex-direction:column;gap:0.75rem;align-items:flex-start}
.evt-out .made{font-size:0.82rem;color:var(--ink-2);line-height:1.45}
.evt-links{display:flex;flex-wrap:wrap;gap:0.45rem}
.evt-links a{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.05em;
  text-decoration:none;color:var(--ink-3);border:1px solid var(--rule-strong);
  border-radius:999px;padding:0.42rem 0.85rem;white-space:nowrap;
  transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),
             background var(--t-ui) var(--ease),transform var(--t-press) var(--ease)}
.evt-links a:hover,.evt-links a:focus-visible{color:var(--green);border-color:var(--green);
  background:rgba(39,255,0,0.08)}
.evt-links a:active{transform:scale(0.96)}

@media (max-width:900px){
  .evt-row{grid-template-columns:120px 1fr;gap:1.1rem 1.3rem;align-items:start}
  .evt-out{grid-column:2}
}
@media (max-width:560px){
  .evt-row{grid-template-columns:1fr}
  .evt-fig{max-width:180px}
  .evt-out{grid-column:1}
}

/* ─── Curator ───
   The roles reuse the register vocabulary exactly: name in display weight,
   organisation in the monospace stratum, one hairline between. */
/* Column sized so the six profile marks sit on one row. */
.cur{display:grid;grid-template-columns:clamp(190px,21vw,272px) 1fr;gap:clamp(1.8rem,4vw,3.5rem);
  align-items:start;margin-top:2.6rem}
.cur-fig{position:relative}
/* The portrait PNG is a transparent cutout. No plate behind it and no frame —
   any fill reads as a mismatched box against the page. It dissolves at the
   bottom instead of ending on a hard crop line. */
.cur-fig img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 8%;
  display:block;background:transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 98%);
          mask-image:linear-gradient(180deg,#000 62%,transparent 98%)}
.cur-id{margin-top:1.1rem}
.cur-id .nm{font-size:1.25rem;font-weight:700;letter-spacing:-0.02em;line-height:1.15}
.cur-id .tl{color:var(--blue);font-size:0.9rem;margin-top:0.2rem}
/* Researcher identifiers. Same treatment as a DOI: the number is the record. */
.ids{list-style:none;margin-top:1rem;display:flex;flex-direction:column;gap:0.1rem}
.ids a{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.1rem 0.55rem;
  font-family:var(--mono);text-decoration:none;padding:0.28rem 0.4rem;
  margin-left:-0.4rem;border-radius:7px;transition:background var(--t-ui) var(--ease)}
.ids a:hover,.ids a:focus-visible{background:rgba(255,255,255,0.06)}
.ids .k{font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-4);flex:none}
.ids .v{font-size:0.72rem;color:var(--teal);transition:color var(--t-ui) var(--ease)}
.ids a:hover .v,.ids a:focus-visible .v{color:var(--green)}

/* Profile marks. Painted with currentColor through a mask so every icon takes
   one weight and one hover treatment regardless of the source artwork. */
.soc{display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:1.2rem;margin-left:-0.5rem}
.soc a{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;
  color:var(--ink-4);text-decoration:none;
  transition:color var(--t-ui) var(--ease),background var(--t-ui) var(--ease),
             transform var(--t-press) var(--ease)}
.soc a::before{content:'';width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;
          mask:var(--i) center/contain no-repeat}
.soc a:hover,.soc a:focus-visible{color:var(--green);background:rgba(255,255,255,0.07)}
.soc a:active{transform:scale(0.94)}

.cur-say{font-size:clamp(1.15rem,1.9vw,1.55rem);font-weight:500;line-height:1.35;
  letter-spacing:-0.02em;max-width:30ch}
.cur-bio{margin-top:1.3rem;color:var(--ink-2);max-width:64ch}

.roles{list-style:none;margin-top:2.2rem;border-top:1px solid var(--rule)}
.roles li{border-bottom:1px solid var(--rule)}
.rrow{display:grid;grid-template-columns:1fr auto;gap:1rem 1.6rem;align-items:baseline;
  padding:0.9rem 0.7rem;border-radius:9px;transition:background var(--t-ui) var(--ease)}
.rrow:hover,.rrow:focus-within{background:rgba(255,255,255,0.04)}
.rrow .r{font-size:0.97rem;font-weight:700;letter-spacing:-0.01em}
/* A role can hold several organisations, so each is its own link rather than
   the whole row being one anchor. */
.rrow .o{font-family:var(--mono);font-size:0.73rem;text-align:right;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0.25rem 1.1rem}
.rrow .o a,.rrow .o span{color:var(--ink-4);text-decoration:none;
  transition:color var(--t-ui) var(--ease)}
.rrow .o a:hover,.rrow .o a:focus-visible{color:var(--green)}

@media (max-width:760px){
  .cur{grid-template-columns:1fr;gap:1.8rem}
  .cur-fig{display:grid;grid-template-columns:120px 1fr;gap:1.2rem;align-items:center}
  .cur-fig img{aspect-ratio:1/1;border-radius:12px}
  .cur-id{margin-top:0}
  .rrow{grid-template-columns:1fr;gap:0.25rem}
  .rrow .o{text-align:left}
}

/* ─── Submission panel ───
   The one place on the page that asks for something, so it gets the only
   contained surface. Elevation is declared once, by the border. */
.submit{
  border:1px solid rgba(39,255,0,0.34);
  border-radius:1.5rem;
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(39,255,0,0.115), transparent 58%),
    rgba(255,255,255,0.028);
  padding:clamp(1.7rem,3.6vw,2.9rem);
}
.submit-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.1rem 2.5rem}
.submit h2{font-size:clamp(2.1rem,4.2vw,3.4rem);margin:0}
.submit .lede{margin-top:1.05rem;max-width:58ch}
.submit .btn-go{flex:none}
.submit-rule{height:1px;background:rgba(255,255,255,0.16);border:0;margin:clamp(1.8rem,3.5vw,2.6rem) 0 0}
.submit-note{margin-top:1.6rem;color:var(--ink-3);max-width:62ch;font-size:0.95rem}

/* ─── Lifecycle track ─── */
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:2.2rem;position:relative}
.track::before{content:'';position:absolute;left:6%;right:6%;top:11px;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;transition:transform 760ms var(--ease-soft)}
.track.lit::before{transform:scaleX(1)}
/* Sequence, revealed in sequence: the motion says the same thing the content does. */
.step{position:relative;padding-right:1.6rem;opacity:0;transform:translateY(10px);
  transition:opacity 440ms var(--ease),transform 440ms var(--ease)}
.track.lit .step{opacity:1;transform:none}
.track .step:nth-child(1){transition-delay:120ms}
.track .step:nth-child(2){transition-delay:250ms}
.track .step:nth-child(3){transition-delay:380ms}
.track .step:nth-child(4){transition-delay:510ms}
.step .dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rule-strong);
  background:var(--navy);display:grid;place-items:center;margin-bottom:1.1rem;position:relative;z-index:1}
.step .dot i{width:9px;height:9px;border-radius:50%;display:block}
.step-neutral .dot i{background:var(--ink-4)}
.step-unreviewed .dot i{border:2px solid var(--blue);width:11px;height:11px}
.step-reviewed .dot i{background:var(--green);box-shadow:0 0 10px rgba(39,255,0,0.6)}
.step h3{margin-bottom:0.4rem}
.step p{font-size:0.86rem;color:var(--ink-3);max-width:26ch}

/* ─── Footer ─── */
.ftr{border-top:1px solid var(--rule);padding-block:2.5rem;margin-top:clamp(3rem,7vw,6rem)}
.ftr-in{width:var(--shell);margin-inline:auto;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.ftr .cr{font-size:0.72rem;color:var(--ink-4);letter-spacing:0.04em}
.ftr nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:1.4rem}
.ftr nav a{font-size:0.75rem;color:var(--ink-4);text-decoration:none;transition:color var(--t-ui) var(--ease)}
.ftr nav a:hover{color:var(--green)}

/* ─── Responsive ─── */
@media (max-width:1100px){
  .cols{grid-template-columns:18px 1fr 8rem 10.5rem}
  .cols .c-fmt,.row .c-fmt{display:none}
  .row{grid-template-columns:18px 1fr 8rem 10.5rem}
}
@media (max-width:900px){
  .hero{min-height:0;padding-block:2.5rem 0}
  .hero-in{grid-template-columns:1fr;gap:2.2rem}
  .track{grid-template-columns:1fr 1fr;gap:2.5rem 1rem}
  .track::before{display:none}
  .cols{display:none}
  .row{grid-template-columns:18px 1fr;gap:0.95rem;padding:1.3rem 0.7rem 1.3rem 1.2rem}
  .row .cell{grid-column:2}
  .row .meta-wrap{grid-column:2;display:flex;flex-wrap:wrap;gap:0.4rem 1.1rem;margin-top:0.7rem}
}
@media (max-width:640px){
  .hdr-in{min-height:60px;gap:0.9rem}
  .nav{gap:1rem}
  .nav a{font-size:0.75rem}
  .track{grid-template-columns:1fr}
  .vol-head .yr{font-size:2.6rem}
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;
    transition-duration:0.01ms!important}
  /* Carousel still rotates on demand, it just stops moving by itself
     and lands instantly instead of sliding. */
  .stage-inner,.card,.card-img::after{transition:none!important}
  .track::before{transform:scaleX(1)!important}
  .step{opacity:1!important;transform:none!important}
  .row-wrap{clip-path:none!important;opacity:1!important}
}