/* ============================================================================
   assets/zen-page.css — s136
   The Zen look for every page that is not the galaxy itself: the case studies,
   the 404, the mission kit. Linked LAST in each page's head, so it wins over the
   page's own template at equal specificity, and it remaps the template's tokens.
   One hue per station, as in the galaxy: a page names its station on <body>
   (data-station), and that hue is the page's accent (--c). Black and white and
   five hues; nothing green, nothing pink. Labels are monospace, set in capitals
   with air between the letters; reading text is a sans.
   s137 · Everything after the tokens is for the screen only: a page's own print
   sheet prints exactly as it did before the kit, and the stars and the planet
   never print.
   ========================================================================= */
:root, body[data-station]{   /* s137 · on body too, so a page's own body{--accent} cannot outrank them */
  --bg0:#050810; --ink:#EEE9E1; --soft:#AEB6C2; --dim:#8A93A1; --faint:#5B6472;
  --line:rgba(175,195,220,.16); --line2:rgba(175,195,220,.3);
  --panel:rgba(9,14,26,.78); --panel2:#0A0F1B;
  --mono:ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --pixel:var(--mono);
  --sans:'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:var(--sans);
  --c:#F4A565; --c-mid:#DE7430; --c-deep:#4A1F06;
  /* the old template's tokens, pointed at the page's own hue: one accent per page, as in the galaxy */
  --cyan:var(--c); --gold:var(--c); --magenta:var(--c); --violet:var(--soft); --green:#72DCCF;
  --accent:var(--c); --accent-lo:rgba(244,165,101,.5);
  --focus:2px solid var(--c);
  /* the template's pixel caps were drawn for a pixel face; set in monospace they need the size back */
  --cap-1:9.9px; --cap-2:11.2px; --cap-3:11.2px; --cap-ls:.14em;   /* s141 · on the golden rungs T-4 and T-3 (were 9.5, 10.5, 11.5) */
  --r-pill:3px;
  /* s141 · THE GOLDEN LINE, L(n) = 16·φ^(n/4) (audit-s140/golden.md §6): type on the named rungs Tn, the column L33 and
     the reading measure L30. The kit's spacing is not moved (the audit's flag 9: churn for no reader). */
  --t11:60.1px; --t10:53.3px; --t8:41.9px; --t7:37.1px; --t6:32.9px; --t4:25.9px; --t3:23px; --t2:20.4px; --t1:18px;
  --t0:16px; --tm1:14.2px; --tm2:12.6px; --tm3:11.2px; --tm4:9.9px; --measure:590.9px;
}
body[data-station="BAY"]      { --c:#78B8EC; --c-mid:#3F86CF; --c-deep:#0C2A4E; --accent-lo:rgba(120,184,236,.5) }
body[data-station="PORTFOLIO"]{ --c:#F4A565; --c-mid:#DE7430; --c-deep:#4A1F06; --accent-lo:rgba(244,165,101,.5) }
body[data-station="ABOUT"]    { --c:#968EFC; --c-mid:#6269D6; --c-deep:#1D1D56; --accent-lo:rgba(150,142,252,.5) }   /* s137 · iris: no yellow planet */
body[data-station="LOG"]      { --c:#D3A9F9; --c-mid:#9868D8; --c-deep:#2F1B52; --accent-lo:rgba(211,169,249,.5) }
body[data-station="CAMERAS"]  { --c:#DCE2EA; --c-mid:#98A3B1; --c-deep:#262B34; --accent-lo:rgba(220,226,234,.45) }
body[data-station="WORKSHOP"] { --c:#72DCCF; --c-mid:#24A898; --c-deep:#043A3C; --accent-lo:rgba(114,220,207,.5) }

@media screen{
html{background:var(--bg0)}
body{background:var(--bg0); color:var(--ink); font-family:var(--sans); font-size:16.5px}
::selection{background:var(--c); color:var(--bg0)}
a{color:var(--c)}

/* the sky behind every page: the galaxy's own stars (zen-page.js) and a soft glow of the arms */
canvas#stars{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none}
.neb{background:
  radial-gradient(60% 46% at 10% 4%, rgba(62,111,216,.13), transparent 70%),
  radial-gradient(52% 40% at 92% 22%, rgba(122,79,201,.12), transparent 72%),
  radial-gradient(46% 38% at 70% 96%, rgba(43,168,153,.08), transparent 72%),
  radial-gradient(38% 26% at 50% -6%, rgba(247,206,140,.07), transparent 70%) !important}

/* ---------- the bar at the top: back to the galaxy ---------- */
.backbar{background:#050810 !important; padding:14px 14px 10px !important}   /* s141 · opaque, and the fade is a band below it: the copy no longer reads through (graphics H1). The pill sits 14 px in from the top left, where the editorial pages' .home sits (M9) */
.backbar::after{content:''; position:absolute; left:0; right:0; top:100%; height:20px; pointer-events:none; background:linear-gradient(#050810, rgba(5,8,16,0))}
.back{font-family:var(--mono) !important; font-size:var(--tm3) !important; letter-spacing:.14em !important; text-transform:uppercase;
  color:var(--soft) !important; background:#0A0F1B !important; border:1px solid var(--line2) !important;
  border-radius:3px !important; padding:10px 14px !important}
.back:hover{color:var(--c) !important; border-color:var(--c) !important}

/* ---------- masthead ---------- */
header.mast{padding-left:0 !important; position:relative}
header.mast::before{display:none !important}
.eyebrow{font-family:var(--mono) !important; font-size:var(--tm3) !important; font-weight:400 !important; text-transform:uppercase; letter-spacing:.18em !important; line-height:1.618 !important;
  color:var(--c) !important; display:flex; align-items:flex-start !important; gap:10px}   /* s141 · the dot keeps to the first line when the words wrap (s189 · and one weight and one case on every page: One File's and Scars' were bold) */
.eyebrow::before{content:'' !important; width:10px !important; height:10px !important; flex:0 0 10px !important; margin:calc(.809em - 5px) 0 0 !important; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #fff 0, var(--c) 32%, var(--c-mid) 62%, var(--c-deep) 100%) !important;
  box-shadow:0 0 10px var(--accent-lo)}
h1{font-family:var(--sans) !important; font-weight:600 !important; letter-spacing:-.022em !important; line-height:1.128 !important;
  font-size:clamp(var(--t6),6vw,var(--t11)) !important; color:var(--ink)}   /* s141 · T6 to T11 (was 34 to 58) */
h2{font-family:var(--sans) !important; font-weight:600 !important; letter-spacing:-.015em !important; color:var(--ink)}
h3{font-family:var(--sans); font-weight:600; letter-spacing:-.005em}
.lede{color:#C9CFD8 !important; font-size:var(--t1) !important; line-height:1.618 !important}
p, li{line-height:1.618}   /* s141 · φ leading for reading text (it was 1.72 here, and 11 values across the pages) */
strong{color:var(--ink)}

/* the page's planet, in the masthead: its station's orb, with the Portfolio's dashed ring */
.zplanet{position:absolute; right:-6px; top:18px; width:124px; height:124px; pointer-events:none; z-index:1}
.zplanet .orb{position:absolute; inset:28px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0, var(--c) 18%, var(--c-mid) 56%, var(--c-deep) 100%);
  box-shadow:0 0 34px var(--accent-lo), inset -10px -12px 22px rgba(0,0,0,.45)}
.zplanet .band{position:absolute; inset:28px; border-radius:50%; overflow:hidden; opacity:.35;
  background:repeating-linear-gradient(-14deg, transparent 0 9px, rgba(255,255,255,.35) 9px 12px, transparent 12px 20px)}
.zplanet svg{position:absolute; inset:0; overflow:visible}
.zplanet .spin{transform-origin:62px 62px; animation:zring 60s linear infinite}   /* s137 · the ring turns, its box does not */
@media (prefers-reduced-motion: reduce){ .zplanet .spin{animation:none} }
@keyframes zring{to{transform:rotate(360deg)}}
@media (max-width:720px){ .zplanet{width:84px; height:84px; top:6px; right:-4px} .zplanet .orb, .zplanet .band{inset:19px} }
header.mast > *:not(.zplanet){position:relative; z-index:2}
/* s136 · an editorial cover carries the planet off to the right of its title, out in the margin where there is room;
   a page that opens on its own art (header.open) shows it only once that art has stepped aside on a narrower screen */
header.cover{position:relative}
header.cover > .zplanet{width:176px; height:176px; right:-150px}
header.cover > .zplanet .orb, header.cover > .zplanet .band{inset:40px}
@media (max-width:1180px){ header.cover > .zplanet{width:124px; height:124px; right:-6px} header.cover > .zplanet .orb, header.cover > .zplanet .band{inset:28px} }
@media (max-width:720px){ header.cover > .zplanet{width:88px; height:88px; right:-8px} header.cover > .zplanet .orb, header.cover > .zplanet .band{inset:20px} }
header.open .beat{position:relative}
header.open .beat > :not(.zplanet){position:relative; z-index:2}   /* s137 · the words stay over the planet */
header.open .zplanet{top:-26px; right:-6px}
@media (min-width:1121px){ header.open:has(> .opendeck) .zplanet{display:none} }   /* s189 · at a desk, only an opening with art of its own (the Drawing Set's deck) goes without: Fast has none, and had no planet */
@media (max-width:720px){ header.open .zplanet{width:76px; height:76px; top:-22px} header.open .zplanet .orb, header.open .zplanet .band{inset:17px}
  header.open .beat > .zplanet + *{padding-right:70px} }   /* s137 · and the first line stops short of it */
header.cover > *:not(.zplanet){position:relative; z-index:2}
/* on a phone the masthead's planet is smaller, and the eyebrow wraps short of it */
@media (max-width:720px){ header.mast > .zplanet{width:66px; height:66px; top:-2px; right:-8px} header.mast > .zplanet .orb, header.mast > .zplanet .band{inset:15px} header.mast .eyebrow{padding-right:64px} }

/* ---------- facts ---------- */
.facts{background:var(--line) !important; border-color:var(--line) !important; border-radius:6px !important}
.fact{background:rgba(10,15,27,.92) !important}
.fact b{font-family:var(--mono) !important; font-size:var(--tm4) !important; letter-spacing:.16em !important; color:var(--dim) !important}
.fact span{font-size:var(--tm1) !important}

/* ---------- section pills ---------- */
nav.pills{background:#050810 !important}   /* s141 · opaque too, with the same band below (graphics H1) */
nav.pills::after{content:''; position:absolute; left:0; right:0; top:100%; height:20px; pointer-events:none; background:linear-gradient(#050810, rgba(5,8,16,0))}
.pill{font-family:var(--mono) !important; font-size:var(--tm3) !important; letter-spacing:.14em !important; border-radius:3px !important;
  background:#0A0F1B !important; border-color:var(--line) !important; color:var(--dim) !important}
.pill:hover{color:var(--ink) !important; border-color:var(--line2) !important}
.pill.on{color:var(--c) !important; border-color:var(--c) !important; background:rgba(9,14,26,.95) !important}

/* ---------- blocks ---------- */
hr.rule{border:0 !important; height:1px !important; background:linear-gradient(90deg, transparent, var(--line2) 18%, var(--line2) 82%, transparent) !important}
blockquote{border-left:2px solid var(--c) !important; background:linear-gradient(90deg, rgba(9,14,26,.9), rgba(9,14,26,0)) !important;
  color:#DCE0E6 !important; font-family:var(--sans) !important; font-style:normal !important}
blockquote cite{font-family:var(--mono) !important; font-size:var(--tm3) !important; letter-spacing:.14em !important; color:var(--c) !important; font-style:normal !important}
.slide, .hero, .vid{border-color:var(--line) !important; border-radius:8px !important; background:#070B14 !important}
.slide:hover{border-color:var(--c) !important}
.slide figcaption, .cap{color:var(--soft) !important}

/* ---------- downloads and buttons: they wear the page's colour, like the galaxy's GO ---------- */
.dl{background:var(--line) !important; border-color:var(--line) !important; border-radius:6px !important}
.dl a{background:rgba(10,15,27,.94) !important}
.dl a:hover{background:rgba(16,23,40,.96) !important}
.dl .k{font-family:var(--mono) !important; font-size:var(--tm4) !important; letter-spacing:.12em !important; color:var(--c) !important;
  border-color:var(--accent-lo) !important; border-radius:3px !important}
.btn{font-family:var(--mono) !important; font-size:var(--tm3) !important; letter-spacing:.14em !important; border-radius:3px !important;
  color:var(--c) !important; background:transparent !important; border:1px solid var(--c) !important; padding:13px 17px !important}
.btn:hover{background:var(--c) !important; color:var(--bg0) !important; opacity:1 !important}
.btn.ghost{color:var(--ink) !important; border-color:var(--line2) !important}
.btn.ghost:hover{background:var(--ink) !important; color:var(--bg0) !important}

/* ---------- lightbox, footer ---------- */
#lb{background:rgba(3,5,10,.94) !important}
#lb img{border-color:var(--line) !important; border-radius:6px !important}
#lb .x{font-family:var(--mono) !important; font-size:var(--tm3) !important; letter-spacing:.14em !important}
footer{border-top-color:var(--line) !important; color:var(--dim) !important; font-family:var(--mono); font-size:var(--tm3) !important; letter-spacing:.1em}

/* ---------- the editorial template (One File, Scars, Fast for the Parts, The Drawing Set) ---------- */
.home{font-family:var(--mono) !important; font-size:var(--tm3) !important; letter-spacing:.14em !important; text-transform:uppercase;
  color:var(--soft) !important; background:#0A0F1B !important; border:1px solid var(--line2) !important; border-radius:3px !important;
  left:14px !important; right:auto !important; top:14px !important; padding:10px 14px !important}   /* s141 · the way home in one place on every page, top left where the galaxy's name is (graphics M9); opaque (H1) */
.home:hover{color:var(--c) !important; border-color:var(--c) !important}
/* s189 · and a band under it, where it stands on its own: the page's words scrolled up beside it and under it, cut off at
   its edges ("…rns all of them off", a heading gone behind it). The case studies' .backbar has had one since s141. */
body:has(> a.home)::before{content:''; position:fixed; z-index:4; left:0; right:0; top:0; height:60px; pointer-events:none;
  background:linear-gradient(#050810 62%, rgba(5,8,16,0))}
.rail{background:rgba(175,195,220,.12) !important}
.rail i{background:var(--c) !important}
.skip{font-family:var(--mono) !important; font-size:var(--tm3) !important; color:var(--bg0) !important; background:var(--c) !important; border-radius:3px !important}
.lede, .sub, .close .big, .rule span{font-family:var(--sans) !important; font-style:normal !important}
.lede em, .close .big b{color:var(--c) !important}
.cue{font-family:var(--mono) !important; letter-spacing:.16em !important; font-size:var(--tm3) !important}
code{font-family:var(--mono) !important; font-size:.88em !important}

/* s137 · the kit's things that are not the page's */
figure.slide{margin:0}
/* s189 · two slides side by side are one height, so the shorter picture is set in the middle of its own card and the
   captions line up, where it used to sit at the top with an empty card below it (HumAIne's lockup beside the mark) */
figure.slide{display:flex; flex-direction:column}
figure.slide > img{flex:1 1 auto; min-height:0; object-fit:contain}
#lb .x{background:none; border:0; color:inherit; cursor:pointer}

/* ---------- s141 · the rest of the type, on the golden line (audit-s140/golden.md §6f) ----------
   Reading text is T0 16 at φ leading on a measure of L30; secondary prose T-1; captions T-2; mono labels T-3; the micro
   caps T-4, the floor. Headings: a section's h2 T3, a beat's T7, Scars' heads T4, the closing line T8. The Drawing Set's
   type specimen (.tcb, .sp) keeps the sizes it is there to show. */
button, input, select, textarea{font-family:inherit}   /* graphics M11: a button took the browser's Arial */
.wrap > section > p, .wrap > section > .blk > p, main p.beat:not(.eyebrow, .lede, .cue, .big, .cap), main .sub, .scarbody > p:not(.lab), .rule > span{font-size:var(--t0) !important; line-height:1.618 !important}
.wrap > section > p, main p.beat:not(.eyebrow, .cue, .big, .cap), main .sub{max-width:var(--measure) !important}
p.lede{font-size:var(--t1) !important; line-height:1.618 !important}   /* the lede is T1 on every page (golden §6f) */
.wrap h2{font-size:var(--t3) !important; line-height:1.272 !important}
.wrap h3{font-size:var(--t0) !important; line-height:1.272}
h2.beat, .beat > h2{font-size:var(--t7) !important; line-height:1.272 !important}
.scarhead h2{font-size:var(--t4) !important; line-height:1.272 !important}
main p.big, .wrap p.big{font-size:var(--t8) !important; line-height:1.272 !important}
.wrap blockquote{font-size:var(--t1) !important; line-height:1.618 !important}
.play p, .note p, .out p, .team p, .fn p, .ph p, .layer > span, dd, .scarbody p.lab, li.beat > p{font-size:var(--tm1) !important; line-height:1.618 !important}
.claim p{font-size:var(--t2) !important; line-height:1.618 !important}
figure.slide figcaption, .wrap p.cap, .cap, span.d, span.s, .tree p, .rm > em{font-size:var(--tm2) !important}
.play b, .vidh, p.kicker, em.desc, figure.fig > figcaption, .col h3, label, .scarno, cite, .stampx, .byline{font-size:var(--tm3) !important}   /* s189 · the stamps and the bylines carry sentences: T-3, as every page's eyebrow (they were T-4, 9.9) */
.met b, dt, .when, .gate, .rule > b, .glab, .clab, button.sw, .btabs button, p.cap.beat{font-size:var(--tm4) !important}
span.n{font-size:var(--tm1) !important}
span.v{font-size:var(--t3) !important}
nav.pills .pfade{display:none}
/* s189 · A FINGER'S TARGET on every page (Zach: "a graphica and human centered pass through the ENTIRE website"), as the
   galaxy's controls have had since s188: where the pointer is a finger, the way home, the section pills and the buttons
   each answer 44 px through an invisible part of them that a tap lands on, and look the same. */
@media (pointer: coarse){
  .back, .pill, .btn{position:relative}
  .home::after, .back::after, .pill::after, .btn::after{content:''; position:absolute; left:0; right:0; top:50%; height:max(100%, 44px); transform:translateY(-50%)}
}
/* s189 · a heading, an eyebrow or a footer that wraps does so in even lines, not with one word left alone on the last */
h1, h2, h3, .eyebrow, .lede, .byline, footer{text-wrap:balance}
/* graphics L11: a gallery of four slides is two by two, not three and an orphan */
.gal:has(> :nth-child(4):last-child){grid-template-columns:repeat(2, 1fr) !important}
/* s189 · A ROW ENDS FULL. The strips of tiles sit on their line color, so a row that stopped short showed a blank grey
   cell: three tiles on a phone went two and a gap, four on a small tablet three and two gaps, and Fast's six functions
   four and two gaps. Now three go three across or one above another, four go four, two or one, and six go three, two or
   one. Three play cards go three or one. clamp() decides, with no breakpoint to keep in step with the page: the width of
   N tiles and their gaps, less the row, times 999, is far over the row when they do not fit (a tile takes the row, or
   half of it for four) and under nothing when they do (a tile keeps its least width, --tile). */
.facts, .mets{--tile:150px} .outs{--tile:180px} .csf{--tile:158px} .plays{--tile:215px}
:is(.facts, .mets, .outs):has(> :nth-child(3):last-child){grid-template-columns:repeat(auto-fit, minmax(clamp(var(--tile), (3 * var(--tile) + 2px - 100%) * 999, 100%), 1fr))}
:is(.facts, .mets, .outs):has(> :nth-child(4):last-child){grid-template-columns:repeat(auto-fit, minmax(clamp(var(--tile), (4 * var(--tile) + 3px - 100%) * 999, max(var(--tile), 50% - 1px)), 1fr))}
.csf:has(> :nth-child(6):last-child){grid-template-columns:repeat(auto-fit, minmax(max(var(--tile), (100% - 3px) / 3), 1fr))}
.plays:has(> :nth-child(3):last-child){grid-template-columns:repeat(auto-fit, minmax(clamp(var(--tile), (3 * var(--tile) + 24px - 100%) * 999, 100%), 1fr))}
/* graphics H1, on a phone: the pills are one row that scrolls, the next one half in view, not two rows over the copy */
@media (max-width:720px){
  nav.pills{flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none}
  nav.pills::-webkit-scrollbar{display:none}
  .pill{flex:0 0 auto}
  /* s189 · the row's end fades over the pills, not over the bar: a mask on the bar (s184) faded its own dark too, and the
     page scrolling under it read through at the right end, over the last pill in view. The fade is the row's last child
     now (zen-page.js), held at the right edge as the row scrolls and set after the last pill when it is reached. */
  nav.pills .pfade{display:block; position:sticky; right:0; flex:0 0 36px; align-self:stretch; margin-left:-7px; pointer-events:none;
    background:linear-gradient(90deg, rgba(5,8,16,0), #050810 78%)}
  h1{font-size:var(--t6) !important}
  h2.beat, .beat > h2, .scarhead h2{font-size:var(--t4) !important}
  .scarhead h2{font-size:var(--t1) !important}
  main p.big, .wrap p.big{font-size:var(--t3) !important}
  ul li, .play p{font-size:var(--t0) !important}   /* the audit's flag 5: on a phone, reading text never goes under 16 */
}
}
@media print{ canvas#stars, .zplanet{display:none !important} }
/* s184 · a ring drawn inside where its box would clip it: a download row's (the list clips what lies outside it, and the
   next row covered the rest) and a toggle's in its segment */
.dl a:focus-visible, .seg button:focus-visible{outline-offset:-3px}
/* s138 · page transitions (the same block in every page the galaxy links to: zen-page.css, 404, mission kit, the two
   games, TechBag IQ and its savings model, the broadcast pane). Coming in from the galaxy, the view you left rushes past
   and this page rises into place, as if flying down into a planet. The galaxy does the reverse on the way back. Only
   where the browser knows how, and not under reduced motion. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto }
  ::view-transition-old(root){ animation: .28s cubic-bezier(.4,0,1,1) both zt-rush }
  ::view-transition-new(root){ animation: .45s cubic-bezier(.2,.6,.2,1) .05s both zt-rise }
}
@keyframes zt-rush{ to{ opacity:0; transform:scale(1.1) } }
@keyframes zt-rise{ from{ opacity:0; transform:translateY(12px) } }