/* public/src/css/page.css
   THE SHELL: masthead, nav, call to action, dateline, footer, base type.

   One dark theme now (D37) - no --day- or --late- aliases, no edition-
   attribute selector, nothing that assumes a second palette exists. Every
   colour is one of tokens.css's semantic names; if a new one is ever needed
   it gets measured into tokens.css and test/contrast.js first, never
   invented here.

   A comment-closing sequence must never appear inside a comment's own text,
   even split across a word boundary - one did, right here, until this
   sentence replaced it: the phrase naming both retired token prefixes
   together produced that exact two-character sequence and silently closed
   this whole comment early, which took the *{box-sizing:border-box} rule
   below out with it, site-wide, for as long as this file existed. Found
   during Task 8, fixed here; see docs for the guard recommended against it
   happening again.

   Cleanup carried over from Task 1's token rewrite: --box and --rule no
   longer exist. Every reference below is --panel or --edge respectively.
   The old .edition toggle button is gone with it - there is nothing left
   to switch.

   Materials (CLAUDE.md rule 3), noted per block below:
     Furniture   structure - masthead, nav, dateline, section heads, footer
     Reported    live data set in body type - kicker, standfirst, data
     Marginalia  the bloke's handwriting - .hand, always last, always signal
   Clipping lives in clipping.css, not here. */

*{box-sizing:border-box}
html{color-scheme:dark}

body{
  margin:0;
  background:var(--void);color:var(--ink);
  font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
::selection{background:var(--signal);color:var(--on-signal)}

/* Sane defaults for any link this file's own rules below don't claim more
   specifically (.wordmark, .sections a, .cta and .teasers a all override
   this with their own colour). Both pairs are measured: 'accent text on
   the ground' and 'accent text in a card'. */
a{color:var(--signal);text-decoration:underline;text-decoration-color:var(--edge-strong);text-underline-offset:.15em}
a:hover{text-decoration-color:currentColor}

.paper{max-width:64rem;margin:0 auto;padding:clamp(1rem,4vw,2.5rem)}

/* ── Masthead (Furniture) ──
   Four direct children, in DOM order: .brand, .sections, .cta, #dateline
   (see shell.js's shellMarkup()). Giving .brand and #dateline a 100% flex
   basis forces each onto its own row in this wrapping flex row; .sections
   and .cta then share the middle row and wrap onto separate rows of their
   own once a viewport is too narrow to hold both - no media query needed,
   and nothing here can overflow horizontally because every child wraps
   before it runs out of room. */
#masthead{
  display:flex;flex-wrap:wrap;align-items:center;
  column-gap:1.75rem;row-gap:.85rem;
  padding-top:clamp(1.25rem,3vw,2rem);
}

.brand{
  flex:1 1 100%;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:.9rem;row-gap:.15rem;
}

/* Sized, not hidden, per the brief - ART.saucer 404s until Task 5 lands
   the SVG, and alt="" aria-hidden="true" in the markup means a missing
   image degrades to an empty slot rather than broken-icon text. The disc
   (panel ground, edge border) gives that slot a shape of its own, so an
   unloaded mark still reads as "a badge that will hold an image" instead
   of a stray box. */
.brand-mark{
  grid-row:1/3;
  width:clamp(2.6rem,7vw,3.75rem);height:clamp(2.6rem,7vw,3.75rem);
  padding:.5rem;
  background:var(--panel);border:1px solid var(--edge);border-radius:50%;
  object-fit:contain;
}

.wordmark{
  grid-column:2;grid-row:1;
  display:block;
  font-family:var(--f-head);font-weight:800;
  font-size:var(--step-5);line-height:.92;
  letter-spacing:-.03em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  text-wrap:balance;
}
/* The struck-through NOT - the signature carried from the corkboard (D10).
   The one place signal appears inside the masthead itself. */
.wordmark s{color:var(--signal);text-decoration-thickness:.08em}

.brand-tag{
  grid-column:2;grid-row:2;
  margin:0;
  font-family:var(--f-body);font-style:italic;font-size:var(--step--1);
  color:var(--ink-dim);
}

/* ── Nav (Furniture) ── */
.sections{
  flex:1 1 260px;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.35rem 1.4rem;margin:0;
}
.sections a{
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);text-decoration:none;
  padding:.3rem 0;
  border-bottom:2px solid transparent;
}
.sections a:hover{color:var(--ink);border-bottom-color:var(--edge)}
/* Current page: colour AND a border, never colour alone (--edge-strong is
   tokens.css's own state-border token, reserved for exactly this - "focus,
   active nav, selected"). */
.sections a[aria-current="page"]{
  color:var(--signal);
  border-bottom-color:var(--edge-strong);
}

/* ── Call to action (Furniture) ──
   The rule is ONE filled lime control per band or per card - never one per
   site. The operator's reference mockup carries several (the masthead's, the
   hero's, and the live panel's "Show me"), and each is the primary action of
   the block it sits in, which is what keeps them readable as a hierarchy
   rather than as competing shouts. An earlier version of this note said
   filled accent appeared exactly once on the whole site; that predated the
   mockup and was simply wrong. If a block ever needs a second filled lime
   control, that block has two primary actions and the problem is the block.

   --on-signal on --signal measures ~12.8:1; hover and active states only
   move brightness/shadow so that measured pair never changes underneath
   them. */
.cta{
  flex:0 0 auto;margin-left:auto;
  display:inline-flex;align-items:center;
  font-family:var(--f-data);font-size:var(--step--1);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--signal);color:var(--on-signal);
  border:1px solid var(--signal);border-radius:999px;
  padding:.6rem 1.3rem;
  text-decoration:none;white-space:nowrap;
  transition:filter .15s ease,box-shadow .15s ease;
}
.cta:hover{filter:brightness(1.08);box-shadow:0 6px 18px rgb(0 0 0 / .35)}
.cta:active{filter:brightness(.95)}

/* ── Dateline (Furniture + Reported) ──
   Never lies: shell.js's setDateline() omits any field with nothing true
   to say rather than printing a dash. Hairlines are --edge (decorative,
   ungated) - this strip carries no state of its own to gate. */
#dateline{
  flex:1 1 100%;
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-dim);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  padding:.55rem 0;margin:1.1rem 0 0;
  font-variant-numeric:tabular-nums;
}

/* ── Section heads (Furniture) ── */
.sechead{
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.24em;
  text-transform:uppercase;color:var(--signal);
  border-bottom:1px solid var(--edge);padding-bottom:.4rem;
  margin:2.25rem 0 1.25rem;
}

/* ── Type scale ── */
h1,h2,h3{
  font-family:var(--f-head);font-weight:800;letter-spacing:-.025em;
  line-height:1.02;text-wrap:balance;margin:0 0 .5rem;color:var(--ink);
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}

/* Reported: the headline dresses up, the facts inside it never do. */
.kicker{
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--signal);margin:0 0 .35rem;
}
.standfirst{font-size:var(--step-1);line-height:1.5;max-width:var(--measure);color:var(--ink)}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1rem}
.cutline{
  font-family:var(--f-data);font-size:var(--step--1);color:var(--ink-dim);
  border-top:1px solid var(--edge);padding-top:.4rem;margin-top:.5rem;
}

/* ── Marginalia: the bloke. Always last, always visually separate. ── */
.hand{
  font-family:var(--f-hand);font-size:var(--step-1);line-height:1.3;
  color:var(--signal);transform:rotate(-.6deg);margin:1rem 0 0;
}

/* ── Reported data ── */
.data{font-family:var(--f-data);font-variant-numeric:tabular-nums}

/* ── Boxed containers (Furniture) ──
   Retoned to the same panel/edge/radius/shadow language as cards.css's
   .card, since every .boxed element on the site (the front page's scope
   and founding-story box, About's colophon panel) is playing the same
   "container" role .card now owns - this is the interim treatment until
   the markup itself migrates to .card in a later task. */
.boxed{
  background:var(--panel);border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:1.15rem 1.25rem 1.35rem;
  box-shadow:0 1px 0 rgb(255 255 255 / .03),0 10px 30px rgb(0 0 0 / .35);
}

/* ── Colophon (Furniture) ──
   colophonMarkup() emits a flat run of <p> lines (the promise, then the
   data/privacy/postcode credits, then the fixed licence attribution) -
   auto-fit turns that run into a responsive column grid, collapsing to
   one column rather than overflowing once a track can't fit its 220px
   minimum (the case at 390px). */
#colophon{
  border-top:1px solid var(--edge);margin-top:3rem;padding-top:1.5rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.75rem 2rem;
}
#colophon p{
  font-family:var(--f-data);font-size:var(--step--1);line-height:1.5;
  color:var(--ink-dim);margin:0;max-width:var(--measure);
}

/* Focus is owned globally by cards.css's a/button/summary rule, loaded
   after this file - not duplicated here, so there is exactly one place
   that rule can drift from. */

noscript{
  display:block;
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.05em;
  color:var(--signal);background:var(--panel);border:1px solid var(--edge);
  border-radius:var(--radius);padding:.75rem 1rem;margin:1rem 0;
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}