/* ==========================================================================
   BIPOLARIST home (v2) — built in lab/v2 against docs/design-review-2026-11-02.md
   Direction (derived from a random seed string, not reproduced here):
   - The string opens on 2 and then 4: radius is 2px where a corner exists
     (inputs, focus), and the one accent is --a4 (cyan / deep teal).
   - It carries a single 9 and a 37: spacing runs on a 9px unit
     (9 / 18 / 27 / 36 / 54 / 72 / 108), and the reading measure is 37em.
   - It begins and ends on the same capital pair (F…F): the double rule that
     closes the cover is repeated to close every page. Bookends, not ornaments.
   - Its capitals cluster in a dense knot near the end: the one grid-break per
     page is a dense block breaking out of the column — the issue numerals
     hang into the margin on the cover; clock-time/event-time breaks the 37em
     measure on the essay.
   Round 2: everything below the hero sits flush on one 12-column grid; rules,
   not boxes, divide. One strip on every page: caps links centred around the
   bp mark; under it the wordmark on inner pages; theme via live's disc. The
   cover nameplate is home only. Italic is for decks (and the hero accent line).
   Round 4 (owner): the hero panel, glow and animated clock-head figure are
   restored from www/live, scoped under .hero--live.
   Type: Ubuntu Sans only. Three sizes (display / title / body) + one label
   size (13px). The cover nameplate is the one display-only extra.
   ========================================================================== */


:root,
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0b0f19;
  --figure:#1e293b;
  --panel:#0f172a;
  --ink:#e5e7eb;
  --ink-mute:#a3a7af;
  --ink-soft:#8b92a0;          /* was #6b7280 (3.96:1). Now 6.1:1 on --page */
  --rule:#1f2937;
  --rule-strong:#374151;
  --a1:#ff7a59; --a2:#f97316; --a3:#8b5cf6; --a4:#22d3ee;
  --accent:var(--a4);
  /* Part numerals 01–05 only. One hue each, used nowhere else. All ≥4.5:1 on --page. */
  --n1:var(--a1); --n2:var(--a3); --n3:var(--a2); --n4:#4ade80; --n5:var(--ink);

  --font:'Ubuntu Sans',system-ui,sans-serif;
  --fs-plate:clamp(48px,13.5vw,140px);   /* cover nameplate only */
  --fs-display:clamp(40px,7.2vw,68px);
  --fs-title:24px;
  --fs-body:18px;
  --fs-label:13px;

  --u:9px;
  --r:2px;
  --gutter:clamp(18px,5vw,72px);
  --col-gap:calc(var(--u)*3);
  --max:1188px;                 /* 132 units */
  --measure:37em;
}
:root[data-theme="light"]{
  color-scheme:light;
  --page:#f7f8fb;
  --figure:#d8dce6;
  --panel:#ffffff;
  --ink:#12151c;
  --ink-mute:#3e4654;
  --ink-soft:#5c6574;
  --rule:#d8dce6;
  --rule-strong:#b4bac7;
  --a1:#c2410c; --a2:#c05609; --a3:#6d28d9; --a4:#0e7490;
  --accent:var(--a4);
  --n1:#c2410c; --n2:#6d28d9; --n3:#a34a06; --n4:#15803d; --n5:var(--ink);   /* --a2 is 4.3:1 here, so 03 is darkened */
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--page); -webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.55;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3,h4{font-weight:500; font-variation-settings:normal}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}
em,i{font-style:normal}          /* italic is reserved for decks; inline emphasis is weight */
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r)}

/* ---- the four sizes ---------------------------------------------------- */
.cover-line,.essay-title{
  font-size:var(--fs-display); font-weight:500; line-height:1.02; letter-spacing:-.04em;
}
.hed,.sec-hed{
  font-size:var(--fs-title); font-weight:500; line-height:1.18; letter-spacing:-.02em;
}
.hed em,.sec-hed em{font-weight:inherit}
/* One label treatment: 13px, 600, caps, .04em. Nav, switch, kickers, footer, refs. */
.label,.kicker,.page-ref,.footer-menu,.footer-copy,.skip-link,.coda,.hq-label,.num{
  font-size:var(--fs-label); font-weight:600; line-height:1.3; letter-spacing:.04em; text-transform:uppercase;
}
/* Decks: the only italic on the site. */
.dek,.sec-dek{font-size:var(--fs-body); font-style:italic; line-height:1.5; color:var(--ink-mute)}
.blurb{font-size:var(--fs-body); line-height:1.5; color:var(--ink-mute); margin:0}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--page); color:var(--ink); padding:calc(var(--u)*1.5) calc(var(--u)*2);
  border:1px solid var(--ink);
}
.skip-link:focus{left:12px; top:12px}

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

/* ---- rules (the bookends) ---------------------------------------------- */
/* The one heavy rule on the site: under the cover nameplate. */
.double-rule{border-top:2px solid var(--ink); border-bottom:1px solid var(--rule-strong); height:5px}

/* ---- cover (home only) ------------------------------------------------- */
.cover{padding-top:calc(var(--u)*3)}
.nameplate{
  font-size:var(--fs-plate); font-weight:600; line-height:.92; letter-spacing:-.055em;
  text-align:center; white-space:nowrap; margin:0 0 calc(var(--u)*2);
}

/* ---- clock classes (base; the hero scopes its own) */
.clock-ring{fill:none; stroke:var(--a4); stroke-width:9}
.clock-hand-hour{stroke:var(--ink); stroke-width:16; stroke-linecap:round}
.clock-hand-minute{stroke:var(--a4); stroke-width:10; stroke-linecap:round}

/* ---- hero: restored from www/live/index.html (owner's call) -------------
   Panel, border, radial glow, text-left / figure-right, italic accent line,
   gradient clock-head with animated hands. Scoped to .hero--live so none of
   it leaks into the rest of v2. Sizes stay on the v2 scale. */
.hero--live{
  margin-top:28px; position:relative; background:var(--panel);
  border:1px solid var(--rule);
  padding:26px 22px; display:grid; grid-template-columns:1fr;
  gap:32px; min-height:0; overflow:hidden; max-width:100%;
}
.hero--live > *{min-width:0}
.hero--live::before{
  content:''; position:absolute; right:0; top:5%;
  width:min(720px,80%); height:720px; pointer-events:none;
  background:radial-gradient(circle, rgba(139,92,246,.20) 0%, rgba(34,211,238,.10) 45%, transparent 70%);
}
:root[data-theme="light"] .hero--live::before{opacity:.45}
.hero--live .hero-text{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center}  /* live: space-between; centred so the cover story reads with the headline */
.hero--live .hero-text > div > .dek{margin-top:22px; max-width:36ch}
.hero--live .cover-line .accent{
  display:block; margin-top:10px; font-style:italic; font-weight:400; color:var(--accent);
}
.hero--live .hero-art{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; order:-1; max-height:260px}
.hero--live .hero-art a{display:block; width:100%}
.hero--live .hero-art svg{width:100%; height:auto; max-height:260px}
.hero--live .figure-body{fill:url(#shoulderGrad)}
.hero--live .clock-ring{fill:none; stroke:url(#rimGrad); stroke-width:4.5}
.hero--live .clock-hand-hour{stroke:var(--ink); stroke-width:5.5; stroke-linecap:round}
.hero--live .clock-hand-minute{stroke:var(--a4); stroke-width:3; stroke-linecap:round}
.hero--live .clock-hub{fill:var(--a4)}
.hero--live .clock-hub-core{fill:#152033}
/* Cover story bound into the headline unit: no rule, tight steps. */
.hero--live .hero-secondary{margin-top:calc(var(--u)*3); display:grid; gap:calc(var(--u)*1.5); max-width:44ch}
.hero--live .hero-secondary .card{border-top-color:transparent; padding-top:0; gap:calc(var(--u)*.5)}
.hero--live .hero-secondary a.card:hover,.hero--live .hero-secondary a.card:focus-visible{box-shadow:none}
.hero--live .hero-secondary a.card:hover .sec-hed{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.hero--live .hero-secondary .sec-hed{margin-top:calc(var(--u)*.5)}
@media (min-width:721px){
  .hero--live{padding:40px}
  .hero--live .hero-art,.hero--live .hero-art svg{max-height:340px}
}
@media (min-width:1100px){
  .hero--live{grid-template-columns:1.15fr 1fr; min-height:680px; padding:56px 64px}
  .hero--live .hero-art{order:0; max-height:none}
  .hero--live .hero-art svg{max-height:620px}
}
.explore{justify-self:start}

/* ---- the one card pattern: whole card is the link, top border shifts ---- */
.card{
  display:flex; flex-direction:column; gap:calc(var(--u));
  padding-top:calc(var(--u)*2);
  border-top:1px solid var(--rule-strong);
  box-shadow:inset 0 0 0 0 var(--ink);
  transition:box-shadow .14s ease;
  color:inherit;
}
a.card:hover,a.card:focus-visible{box-shadow:inset 0 3px 0 0 var(--ink)}
a.card:focus-visible{outline-offset:6px}
.card .kicker{color:var(--ink-soft)}
.card .page-ref{color:var(--ink-soft)}

/* Inline links: underline carries the cue; hover thickens it. Never colour alone. */
.inline-link,.blurb a,.dek a,.prose a,.coda a{
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em;
  text-decoration-color:var(--rule-strong);
}
.inline-link:hover,.blurb a:hover,.dek a:hover,.prose a:hover,.footer-menu a:hover,.footer-copy a:hover,.coda a:hover{
  text-decoration-thickness:2px; text-decoration-color:currentColor;
}
.explore{color:var(--ink); min-height:44px; display:inline-flex; align-items:center}

/* ---- sections ---------------------------------------------------------- */
.section{margin-top:calc(var(--u)*6)}
.section > .kicker{display:block; color:var(--ink-soft); margin-bottom:calc(var(--u)*2)}
.grid{display:grid; grid-template-columns:1fr; gap:calc(var(--u)*3)}

/* Issue index. Grid-break: at desktop the numerals hang in the left margin. */
.issue{list-style:none; margin:0; padding:0}
/* Contents sits a step inside the hero's width so the hero reads as the wider, framing element.
   A percentage, not a fixed cap: a 55rem cap did nothing below ~1000px, where the hero is already narrower. */
@media (min-width:721px){
  .section[aria-label="Inside this issue"]{width:83%; margin-inline:auto}
}
.issue .card{
  padding-block:calc(var(--u)*1.5) calc(var(--u)*2);
  display:grid; grid-template-columns:2.5ch 1fr; column-gap:calc(var(--u)*1.5); row-gap:calc(var(--u)*.5);
}
.issue .num{grid-row:1 / span 2; font-variant-numeric:tabular-nums; color:var(--ink-soft); padding-top:.45em}
.issue li:nth-child(1) .num{color:var(--n1)}
.issue li:nth-child(2) .num{color:var(--n2)}
.issue li:nth-child(3) .num{color:var(--n3)}
.issue li:nth-child(4) .num{color:var(--n4)}
.issue li:nth-child(5) .num{color:var(--n5)}
.issue .hed,.issue .blurb{grid-column:2}
/* Title carries the row; description recedes. */
.issue .hed{font-weight:650; color:var(--ink)}
.issue .blurb{color:var(--ink-soft); font-weight:400}

/* ---- join -------------------------------------------------------------- */
.join{display:grid; gap:calc(var(--u)*3); align-items:end; margin-bottom:calc(var(--u)*5)}
.join .kicker{display:block; margin-bottom:calc(var(--u)); color:var(--ink-soft)}
.join .dek{margin-top:calc(var(--u)*1.5); max-width:36ch}
.join-form label{display:block; color:var(--ink-soft); margin-bottom:calc(var(--u))}
.join-row{display:flex; gap:calc(var(--u))}
.join-row input{
  flex:1; min-width:0; min-height:44px; padding:0;
  font:inherit; font-size:var(--fs-body); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--ink); border-radius:0;
}
.join-row input::placeholder{color:var(--ink-soft)}
.join-row input:focus{outline:none; box-shadow:inset 0 -2px 0 0 var(--ink)}
.join-row button{
  flex:0 0 auto; min-width:44px; min-height:44px; padding:0 calc(var(--u)*3);
  font:inherit; font-size:var(--fs-body); font-weight:600; cursor:pointer;
  background:var(--ink); color:var(--page); border:1px solid var(--ink); border-radius:var(--r);
}
.join-row button:hover{background:var(--page); color:var(--ink)}

/* ---- footer ------------------------------------------------------------ */
.footer{margin-top:calc(var(--u)*6); padding-bottom:calc(var(--u)*3); border-top:1px solid var(--rule-strong)}
.footer-row{
  margin-top:calc(var(--u)*2);
  display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--u)*2);
}
.footer-brandline{display:flex; align-items:center; gap:calc(var(--u)*1.5); flex-wrap:wrap}
.footer-logo{display:grid; place-items:center; min-width:44px; min-height:44px; color:var(--ink)}
.footer-logo .bp-mark{width:auto; height:32px; display:block}
.footer-copy{color:var(--ink-soft)}
.footer-menu{display:flex; flex-wrap:wrap; gap:0 calc(var(--u)*2); color:var(--ink-soft)}
.footer-menu a{display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.25em}
.footer-menu a:hover,.footer-copy a:hover{color:var(--ink); text-decoration:underline; text-decoration-color:currentColor}

/* ---- essay ------------------------------------------------------------- */
.essay{
  display:grid;
  grid-template-columns:1fr min(var(--measure),100%) 1fr;
  margin-top:calc(var(--u)*6);
}
.essay > *{grid-column:2; min-width:0}
.essay-head{margin-bottom:calc(var(--u)*4)}
.essay-head .hq-label{display:block; color:var(--ink-soft); margin-bottom:calc(var(--u)*1.5)}
.essay-head .dek{margin-top:calc(var(--u)*2)}
.prose{line-height:1.65}
.prose > *{grid-column:2}
.prose p{margin:0 0 calc(var(--u)*2)}
/* Author's note: body size (it is the reader's way in, too long for label size), muted, between hairlines. */
.prose .lede{
  font-size:var(--fs-body); line-height:1.6;
  color:var(--ink-mute); padding:calc(var(--u)*1.5) 0;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
  margin-bottom:calc(var(--u)*3);
}
.prose .lede + p{font-weight:600; color:var(--ink)}
.prose h3{
  font-size:var(--fs-title); font-weight:650; letter-spacing:-.02em; line-height:1.18; color:var(--ink);
  margin:calc(var(--u)*6) 0 calc(var(--u)*1.5);
}
.prose h4{font-size:var(--fs-body); font-weight:650; margin:0 0 calc(var(--u)*.5)}
.prose em{font-weight:500}
.prose .lede em{font-weight:inherit}
.prose cite{font-style:normal; font-weight:500}
.prose .a-pull{margin:calc(var(--u)*5) 0 calc(var(--u)*5) calc(var(--u)*3)}
.prose .a-pull p{font-size:var(--fs-title); font-weight:600; line-height:1.3; letter-spacing:-.02em; color:var(--ink); margin:0}
.prose blockquote{margin:calc(var(--u)*4) 0 calc(var(--u)*4) calc(var(--u)*3); color:var(--ink-mute)}
.prose blockquote p{margin-bottom:calc(var(--u))}
.prose blockquote cite{display:block; font-size:var(--fs-label); font-weight:600; color:var(--ink-soft)}
.prose .a-card{margin:0; padding:calc(var(--u)*2) 0; border-top:1px solid var(--rule-strong)}
.prose .a-card p{margin:0; color:var(--ink-mute)}
.prose .a-card + p{margin-top:calc(var(--u)*3)}
/* Grid-break: the compare block leaves the 37em measure. */
.prose .a-compare{
  grid-column:1 / -1; justify-self:center; width:100%; max-width:60em;
  display:grid; grid-template-columns:1fr; gap:calc(var(--u)*3);
  margin:calc(var(--u)*5) 0; padding-block:calc(var(--u)*3);
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
}
.prose .a-compare h4{font-size:var(--fs-title); font-weight:650; letter-spacing:-.02em; margin-bottom:calc(var(--u))}
.prose .a-compare p{margin:0; color:var(--ink-mute)}
.prose .a-endnote{color:var(--ink-mute)}
.prose .a-rule{border:0; border-top:1px solid var(--rule); margin:calc(var(--u)*4) 0}
.coda{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:calc(var(--u)) calc(var(--u)*2);
  margin-top:calc(var(--u)*4); padding-top:calc(var(--u)*2); border-top:1px solid var(--rule);
  color:var(--ink-soft);
}
.coda a{color:var(--ink); min-height:44px; display:inline-flex; align-items:center}
.prose-foot{margin-top:calc(var(--u)*4)}

.essay .prose{grid-column:1 / -1; display:grid; grid-template-columns:subgrid}
@supports not (grid-template-columns:subgrid){
  .essay .prose{grid-column:2; display:block}
  .essay .prose .a-compare{max-width:none}
}

/* ---- breakpoints ------------------------------------------------------- */
@media (min-width:721px){
  /* One 12-column grid. Halves = 6, thirds = 4: every column edge is shared. */
  .grid,.join{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--col-gap)}
  .grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prose .a-compare{grid-template-columns:1fr 1fr; gap:calc(var(--u)*5)}
  .prose .a-pull{margin-left:calc(var(--u)*6)}
}
@media (min-width:1000px){
  /* The page grid: 12 columns. */
  .issue .card{grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap)}
  .footer-row{flex-direction:row; align-items:center; justify-content:space-between}
  .footer-menu{justify-content:flex-end}
  /* Grid-break: numerals hang outside the column; decks start on column 5,
     the same line as the second third below. */
  .issue .card{position:relative; align-items:baseline}
  .issue .num{grid-area:auto; position:absolute; left:0; top:calc(var(--u)*2 + .55em); transform:translateX(calc(-100% - var(--u)*2)); padding-top:0}
  .issue .hed{grid-column:1 / 5}
  .issue .blurb{grid-column:5 / 13}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}