/* The site's chrome, shared by the home page and the beliefs page: tokens,
   header, chapters, rail, calls, footer. Each page adds its own figure
   rules in its head. */

/* ---- tokens: the graphite ground and text scale (6 Oct 2026), the phosphor ink back (9 Oct 2026, the founder:
   the signature green is the main colour again, as before graphite). The ink is one retro code green and the
   signal is the same green: the mark, the decoding links, the field's lines and packets, the live states;
   the text scale stays neutral. The paper twin flips the scale and prints the green dark ---- */
:root{
  color-scheme:dark;
  --bg:#0a0b0c; --ink:#33ff66; --sig:#33ff66; --text:#dfe0dd; --copy:#a9aba8; --dim:#7a7c79; --base:#707270;
  --bg-rgb:10,11,12; --ink-rgb:51,255,102; --sig-rgb:51,255,102; --text-rgb:223,224,221; --line-rgb:126,128,126; --base-rgb:112,114,112;
  --grain:.035; --vig:.14; --hdr:60px; --face:.10; --face-ln:.7;
  --serif:"Source Serif 4","Iowan Old Style",Charter,Georgia,serif;
  --sans:Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gutter:clamp(20px,4vw,48px);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f0f0ed; --ink:#167a36; --sig:#167a36; --text:#1c1d1e; --copy:#45474a; --dim:#6b6d70; --base:#8a8c8e;
  --bg-rgb:240,240,237; --ink-rgb:22,122,54; --sig-rgb:22,122,54; --text-rgb:28,29,30; --line-rgb:112,114,116; --base-rgb:138,140,142;
  --grain:.03; --vig:0; --face:.06; --face-ln:.6;
}

/* ---- ground ---- */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;
     scrollbar-width:thin;scrollbar-color:rgba(var(--line-rgb),.9) var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--sans);overflow-x:clip;
     -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
::selection{background:rgba(var(--sig-rgb),.35)}
/* ---- the signature (8 Oct 2026): the mark's three squares, the latent vectors in flight, as the one small shape on every
   page: a status, a loading state, a marker. `.sq3` is one 5px square with two more beside it in the current colour;
   `.sq3.live` turns them the signal and lights them in turn, a packet crossing; still under reduced motion.
   Round dots are gone from the house. ---- */
.sq3{display:inline-block;width:5px;height:5px;margin-right:16px;flex:none;vertical-align:.1em;background:currentColor;box-shadow:8px 0 currentColor,16px 0 currentColor}
.sq3.live{--sf:rgba(var(--sig-rgb),.3);background:var(--sig);box-shadow:8px 0 var(--sf),16px 0 var(--sf);animation:sq3 1.2s steps(1,end) infinite}
@keyframes sq3{0%{background:var(--sig);box-shadow:8px 0 var(--sf),16px 0 var(--sf)}
               33%{background:var(--sf);box-shadow:8px 0 var(--sig),16px 0 var(--sf)}
               66%{background:var(--sf);box-shadow:8px 0 var(--sf),16px 0 var(--sig)}}
@media (prefers-reduced-motion:reduce){.sq3.live{animation:none}}
::-webkit-scrollbar{width:8px;height:8px;background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(var(--line-rgb),.9);border:2px solid var(--bg)}
/* grain and vignette: two fixed overlays, inert */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,var(--vig)))}
#field{position:fixed;inset:0;z-index:0;pointer-events:none;display:block}
.page{width:100%;max-width:1100px;margin:0 auto;
      padding-left:calc(var(--gutter) + env(safe-area-inset-left));padding-right:calc(var(--gutter) + env(safe-area-inset-right))}
/* the skip link: off screen until a keyboard reaches it, then a box under the header */
.skip{position:fixed;top:0;left:50%;transform:translate(-50%,calc(-100% - 12px));z-index:8;padding:.6rem .9rem;
      background:var(--bg);color:var(--ink);border:1px solid rgba(var(--line-rgb),.55);border-radius:2px;
      font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:transform .2s ease}
.skip:focus-visible{transform:translate(-50%,calc(var(--hdr) + 8px));outline:none}
noscript{display:block;margin-top:3rem;text-align:center;color:var(--ink);font-family:var(--mono);letter-spacing:.15em}

/* ---- type: serif for headlines and copy, mono for chrome ---- */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;color:var(--text)}
.lbl{color:var(--dim);font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.copy,.lede{font-family:var(--serif);color:var(--copy);line-height:1.6;text-wrap:pretty}
.copy{font-size:clamp(1.04rem,.95rem + .35vw,1.22rem);max-width:44ch}
.lede{font-size:clamp(1.05rem,.9rem + .6vw,1.3rem);max-width:42ch}
.copy a{color:var(--ink);text-decoration:none}
.copy a:hover{text-decoration:underline}

/* ---- the decoding link: mono caps in the ink, a small arrow, a hairline
   drawing in on hover (Begin, the header links, the beliefs page's close) ---- */
.dec{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.45rem 0;color:var(--ink);text-decoration:none;
     font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1}
.dec:hover,.dec:focus-visible{color:var(--sig);outline:none}   /* the one signal: a link under the hand (graphite theme, 6 Oct 2026) */
.dec .w{display:inline-block;white-space:pre}
.dec .ar{display:none}   /* no arrows on any decoding link (the founder, 29 Sep 2026): the word and the hairline alone; the span stays in the markup for the decode */
.dec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.6;
            transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.dec:hover::after,.dec:focus-visible::after{transform:scaleX(1)}
.dec[aria-current]{color:var(--text)}.dec[aria-current]::after{transform:scaleX(1);opacity:.9}   /* the page you are on: underlined (the founder, 29 Sep 2026) */
/* Begin: the word is the centred box, its trailing tracking taken back */
.go{margin-top:clamp(1.6rem,1.2rem + 1.2vw,2.4rem)}
.go .w{margin-right:-.2em}

/* ---- header: fixed, one hairline under it ---- */
#hdr{position:fixed;top:0;left:0;right:0;z-index:7;height:calc(var(--hdr) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);
     background:rgba(var(--bg-rgb),.94);border-bottom:1px solid rgba(var(--line-rgb),.28)}
#hdr .page{height:100%;display:flex;align-items:center}
.wm{display:inline-flex;align-items:center;gap:.42em;color:var(--text);text-decoration:none;
    font-family:var(--serif);font-weight:600;letter-spacing:-.01em;font-size:1.15rem;line-height:1}
.wm .mark{width:23px;height:23px;fill:var(--ink);flex:none}
.wm span{white-space:nowrap}
#hdr nav,#hdr .hr{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem)}
#hdr .hr{gap:.5rem}   /* the menu, theme and bird buttons sit close, one group (the founder, 22 Sep 2026) */
#hdr nav{margin-left:auto}
#hdr .hr{margin-left:clamp(.9rem,2vw,1.6rem)}
/* the theme switcher and the menu button: the house 27px hairline box */
#theme,#menu{width:27px;height:27px;padding:0;display:grid;place-items:center;flex:none;background:transparent;cursor:pointer;
             border:1px solid rgba(var(--line-rgb),.55);border-radius:2px;color:var(--dim);transition:color .2s,border-color .2s}
#theme:hover,#menu:hover{color:var(--text);border-color:rgba(var(--line-rgb),.95)}
#theme:focus-visible,#menu:focus-visible{outline:1px dashed var(--dim);outline-offset:3px}
#theme svg{display:block}
#menu{display:none}
/* the membership line (23 Sep 2026): a hairline after the wordmark, then "Part of NVIDIA Inception
   Program" in the mono, dim, NVIDIA's mark with its green eye and its wordmark in the text's tone; hover lifts it */
#hdr .bdg{position:relative;display:inline-flex;align-items:center;gap:.5em;margin-left:clamp(.8rem,1.6vw,1.2rem);
          height:18px;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
          color:var(--dim);text-decoration:none;white-space:nowrap;transition:color .2s}
#hdr .bdg::before{content:"::";margin-right:clamp(.3rem,1vw,.7rem);font-family:var(--serif);font-size:1.15rem;line-height:1;letter-spacing:0;color:rgba(var(--line-rgb),.9)}   /* "Latent Lane :: Part of NVIDIA ...": the one separator of the repo, as every page title reads (1 Nov 2026) */
#hdr .bdg::after{content:"";position:absolute;inset:-12px -6px}
#hdr .bdg:hover,#hdr .bdg:focus-visible{color:var(--text);outline:none}
#hdr .bdg .nvl,#hdr .bdg .efl{width:auto;display:block;position:relative;top:-.5px}#hdr .bdg .nvl{height:15px}#hdr .bdg .efl{height:21px}   /* the strip's letters sit at NVIDIA's cap height */
#hdr .bdg .nvl .e{fill:#76b900}#hdr .bdg .nvl .w{fill:var(--text)}
#hdr .bdg .efm{display:none}   /* the EF monogram waits for a phone */
@media (max-width:900px){ #hdr .bdg .p{display:none} #hdr .bdg{gap:.4em} }   /* the small words around the marks go first when the line gets tight */   /* the mark at full strength (the founder, 23 Sep 2026: bigger, not faded); only the words around it are dim */
/* touch targets: the marks keep their size, an invisible box grows to about 44px */
#hdr .wm,#hdr .lnk,#theme,#menu,.go,#rail .tk{position:relative}
#hdr .wm::before,#hdr .lnk::before,#theme::before,#menu::before,.go::before{content:"";position:absolute;inset:-10px -8px}
#rail .tk::before{content:"";position:absolute;inset:-22px -3px}

/* ---- the chapter rail: ticks along the bottom edge, the live one named ---- */
#rail{position:fixed;left:0;right:0;bottom:calc(clamp(14px,2.4vh,28px) + env(safe-area-inset-bottom));z-index:6;
      display:flex;justify-content:center;pointer-events:none;transition:opacity .4s ease}
body.atend #rail{opacity:0}
#rail .tks{position:relative;display:flex;gap:7px;padding-top:1.05rem;pointer-events:auto}
#rail a{display:block;padding:.55rem 0;text-decoration:none;color:var(--dim)}
#rail .tk{display:block;width:26px;height:1px;background:rgba(var(--line-rgb),.32);transition:background-color .45s ease}
#rail .nm{position:absolute;left:50%;top:0;transform:translate(-50%,4px);white-space:nowrap;line-height:1;pointer-events:none;
          font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
          opacity:0;transition:opacity .4s ease,transform .4s ease}
#rail a.on .tk{background:var(--sig)}   /* the chapter you are in: the signal, a cursor on the rail (9 Oct 2026) */
#rail a:hover .tk,#rail a:focus-visible .tk{background:rgba(var(--line-rgb),.8)}
#rail a.on .nm,#rail a:hover .nm,#rail a:focus-visible .nm{opacity:1;transform:translate(-50%,0)}
#rail .tks:hover a.on:not(:hover) .nm,#rail .tks:focus-within a.on:not(:focus-visible) .nm{opacity:0}   /* the live name steps aside while another tick is hovered or focused */
#rail a:focus-visible{outline:none}
#rail a:focus-visible .tk{background:var(--text);outline:1px dashed var(--dim);outline-offset:5px}   /* a keyboard user sees which tick has focus */

/* ---- chapters: one screen each on a desktop, as tall as they need on a
   phone; the copy in one column and the field or the figure in the other ---- */
.ch{position:relative;z-index:1;min-height:100svh;display:flex;overflow-x:clip;
    padding-top:calc(var(--hdr) + env(safe-area-inset-top));padding-bottom:calc(4.6rem + env(safe-area-inset-bottom))}
.ch > .page{margin:auto;display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);column-gap:clamp(1.5rem,5vw,5rem);align-items:center}
.ch.r > .page{grid-template-columns:minmax(0,11fr) minmax(0,9fr)}
.ch.r > .page > .copy-col{grid-column:2}
.copy-col{max-width:40ch}
.ch .lbl{margin-bottom:1.3rem}
.ch h2{font-size:clamp(2.1rem,1.2rem + 2.8vw,3.6rem);margin-bottom:1.2rem;letter-spacing:-.025em;max-width:13ch}
/* the medium recedes under what is written or drawn: a wash of the ground
   behind every content block and the rail. A new kind of block goes here
   and in LL_KEEP in site.js. */
.copy-col,figure,.fig,.cap,.slot,#rail .tks{position:relative}
.copy-col::before,figure::before,.fig::before,.cap::before,.slot::before,#rail .tks::before{content:"";position:absolute;inset:-2.4rem -3rem;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--bg-rgb),.22) 55%,rgba(var(--bg-rgb),0) 100%)}
#rail .tks::before{inset:-.9rem -2rem;background:radial-gradient(closest-side,rgba(var(--bg-rgb),.28) 50%,rgba(var(--bg-rgb),0) 100%)}
.cap::before{inset:-1rem -2rem}
/* the centred screens: the opening and the close */
.ch.mid{text-align:center}
.ch.mid > .page{grid-template-columns:minmax(0,1fr);justify-items:center}
.ch.mid .copy-col{max-width:none;display:flex;flex-direction:column;align-items:center}
.ch.mid .lbl{margin-bottom:1.6rem}
.ch.mid h1{font-size:clamp(2.6rem,1.4rem + 4.6vw,5.4rem);line-height:1.02;letter-spacing:-.028em;max-width:20ch}
.ch.mid h2{max-width:none;margin-bottom:1.1rem}
.ch.mid .lede{margin-top:1.4em}
.ch.mid h2 + .lede{margin-top:0;margin-bottom:2.2rem}
.slot{width:104px;height:104px;margin-bottom:2rem;z-index:1}
.slot svg{display:block;width:100%;height:100%;fill:var(--ink)}
/* reveals: a block rises once when its chapter comes into view */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.in .rv{opacity:1;transform:none}
.in .rv:nth-child(2){transition-delay:.1s}
.in .rv:nth-child(3){transition-delay:.2s}
.in .rv:nth-child(4){transition-delay:.3s}
.in .rv:nth-child(5){transition-delay:.4s}

/* ---- the call: the address as a quiet mono link, a click copies it ---- */
.acts{display:flex;flex-direction:column;gap:.6rem;align-items:center}
.cta{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 0;color:var(--ink);text-decoration:none;
     font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.06em;line-height:1}
.cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.6;
            transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cta:hover::after,.cta:focus-visible::after{transform:scaleX(1)}
.cta:focus-visible{outline:none}
.cta.mail .ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
               opacity:.55;transition:opacity .25s ease,transform .25s ease}
.cta.mail .ico.done{position:absolute;right:0;opacity:0;transform:scale(.6)}
.cta.mail:hover .ico.copy{opacity:1}
.cta.mail.copied .ico.copy{opacity:0;transform:scale(.6)}
.cta.mail.copied .ico.done{opacity:1;transform:scale(1)}
.cta.mail .said{position:absolute;left:50%;top:calc(100% + .7rem);transform:translate(-50%,-4px);white-space:nowrap;pointer-events:none;
                color:var(--dim);font-size:.6rem;letter-spacing:.26em;opacity:0;transition:opacity .25s ease,transform .25s ease}
.cta.mail.copied .said{opacity:1;transform:translate(-50%,0)}

/* ---- footer: the masthead and one link ---- */
footer{position:relative;z-index:1;border-top:1px solid rgba(var(--line-rgb),.28);background:rgba(var(--bg-rgb),.72);font-family:var(--mono)}
footer .page{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1.6rem 3rem;padding-top:2.4rem;padding-bottom:2rem}
footer .ftag{margin-top:.8rem;font-family:var(--serif);font-size:.98rem;color:var(--copy);white-space:nowrap}
footer .fmail{display:inline-block;margin-top:.9rem;font-size:.72rem;letter-spacing:.06em;color:var(--dim)}   /* the address under the one-liner, where a footer keeps its contact */
footer .flinks{display:flex;flex-direction:column;gap:.85rem;padding-top:.4rem;font-size:.72rem;letter-spacing:.06em;line-height:1}   /* a column, as a footer usually is (the founder, 12 Sep 2026) */
footer .fcols{display:flex;gap:4rem}   /* two columns of links (the founder, 29 Sep 2026) */
footer .fh{color:var(--text);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.2rem}
/* the opening's two links: one each side of the page's centre line, a hairline
   on the line between them, so the pair balances on the lede's axis whatever
   their lengths; the second one dim until hovered (the founder, 30 Sep 2026) */
footer a{color:var(--dim);text-decoration:none;transition:color .2s}
footer a:hover,footer a:focus-visible{color:var(--text);outline:none}
footer .wm{color:var(--text)}
footer .fbase{display:block;padding-top:0;padding-bottom:calc(1.4rem + env(safe-area-inset-bottom));color:var(--dim);font-size:.66rem;letter-spacing:.06em}
footer .fbase span{display:block;border-top:1px solid rgba(var(--line-rgb),.18);padding-top:1rem}   /* the hairline sits on the column, flush with the masthead and the links */
@media (max-width:600px){ footer .ftag{white-space:normal} }

/* ---- a desktop: one screen a chapter, the page snaps chapter to chapter
   and site.js paces the wheel; the footer is one more stop ---- */
@media (min-width:821px) and (min-height:521px){
  html{scroll-snap-type:y mandatory}
  .ch{height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
  footer{scroll-snap-align:end;scroll-snap-stop:always}
}
@media (max-height:520px){ #rail{display:none} }

/* ---- a phone: native scroll, chapters as tall as they need, one column,
   the header solid and its links folded behind the menu button ---- */
@media (max-width:820px){
  .ch{padding-top:calc(var(--hdr) + 2rem + env(safe-area-inset-top));padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  .ch > .page,.ch.r > .page{grid-template-columns:minmax(0,1fr);row-gap:1.6rem}
  .ch.r > .page > .copy-col{grid-column:1}
  .slot{width:84px;height:84px;margin-bottom:1.6rem}
  .ch.mid h2 + .lede{margin-bottom:1.8rem}
  #hdr{background:var(--bg)}
  /* content passes under the rail: a fade behind it so its name never sits on the words */
  #rail::before{content:"";position:fixed;left:0;right:0;bottom:0;height:5.5rem;z-index:-1;pointer-events:none;
    background:linear-gradient(to top,rgba(var(--bg-rgb),.96) 45%,rgba(var(--bg-rgb),0))}
}
@media (max-width:720px){ #rail .tk{width:18px} #rail .tks{gap:6px;padding-top:.9rem} #rail a{padding:.45rem 0} }
/* the menu, at every width (6 Oct 2026, the founder: always collapsed; under 1000px from 29 Sep 2026, under 600px before):
   the links fold behind the menu button, the theme and bird buttons take the right edge */
  #hdr .hr{margin-left:auto;gap:.5rem}
  #menu{display:grid}
  #menu span{display:block;width:11px;height:11px;position:relative}
  #menu span::before,#menu span::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .25s ease,top .25s ease}
  #menu span::before{top:2px} #menu span::after{top:8px}
  #hdr.open #menu{color:var(--text);border-color:rgba(var(--line-rgb),.95)}
  #hdr.open #menu span::before{top:5px;transform:rotate(45deg)} #hdr.open #menu span::after{top:5px;transform:rotate(-45deg)}
  #hdr nav{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;
           padding:.2rem var(--gutter) .6rem;background:var(--bg);border-bottom:1px solid rgba(var(--line-rgb),.28);
           opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
  #hdr.open nav{opacity:1;transform:none;pointer-events:auto}
  #hdr nav a.lnk{display:flex;justify-content:space-between;padding:1rem 0;border-top:1px solid rgba(var(--line-rgb),.18)}
  #hdr nav a.lnk:first-child{border-top:0}
  #hdr nav a.lnk::after{display:none}
/* a desktop (over 600px): the links drop as a small panel under the menu button, in the buttons' own chrome,
   its rows right-aligned toward the button that opened it; a phone keeps the full-width sheet */
@media (min-width:601px){
  #hdr .page{position:relative}
  #hdr nav{left:auto;right:calc(var(--gutter) + env(safe-area-inset-right) + 27px + .5rem);top:calc(100% - 10px);min-width:190px;
           padding:.25rem 1rem .35rem;border:1px solid rgba(var(--line-rgb),.55);border-radius:2px;background:var(--bg);align-items:stretch}
  #hdr nav a.lnk{justify-content:flex-end;padding:.8rem 0}
}
@media (max-width:600px){
  #hdr .bdg .p{display:none} #hdr .bdg{margin-left:.45rem;padding-left:.45rem;gap:.35em;font-size:.55rem;letter-spacing:.08em} #hdr .bdg .nvl{height:12px} #hdr .bdg .efl{height:17px}   /* the membership line keeps the mark and INCEPTION, a step smaller */
  .wm{font-size:1.1rem}
}
@media (max-width:420px){ #hdr .page{padding-left:14px;padding-right:14px} }
@media (max-width:480px){ #hdr .bdg span{display:none} #hdr .bdg{gap:0;margin-left:.5rem;padding-left:.5rem} #hdr .bdg .nvl{width:21px} #hdr .bdg .nvl .w{display:none} #hdr .bdg .efl{display:none} #hdr .bdg .efm{display:block;width:18px;height:18px} }   /* a phone: NVIDIA's eye and the EF monogram alone (9 Oct 2026, the founder: the smaller logo; the strip until then); the aria-labels still say the whole lines */
/* the smallest phones kept the eye alone until 9 Oct 2026; the 18px monogram fits beside it down to 320px */

/* ---- a reading page on a phone (12 Sep 2026): the study pages' small
   type comes up to a readable floor, a table's text columns may wrap so
   the table fits, a table that still overflows fades at its right edge
   as a hint, and a citation chip grows an invisible tap box ---- */
@media (max-width:640px){
  .k,.cite,.dials h3,.spec li span:first-child,figcaption,.tbl th,.tbl td,tr.sub td,button.on,.a,.b,.refs li span:first-child,.legend,.list .n{font-size:.7rem !important}   /* important: a floor over each page's own sizes, phones only */
  .next .w{white-space:normal}   /* the studies' long next link wraps on a phone (13 Sep 2026: it ran off the edge on every study) */
  .chart svg text{font-size:11px !important}   /* the measurement's charts, drawn 420 wide on a phone by their script */
  .tbl td{white-space:normal}
  .tbl td.prose{text-align:left;min-width:15rem}   /* a cell of prose reads left-aligned and keeps a column to itself */
  .tblwrap{position:relative}
  .tblwrap.scrolls::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2.5rem;pointer-events:none;background:linear-gradient(to right,rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.92))}
  button{font-size:.7rem !important}
  figure svg text{font-size:11px !important}
  body .cite{position:relative}
  body .cite::before{content:"";position:absolute;inset:-12px -8px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-snap-type:none;scroll-behavior:auto}
  .rv,#rail .tk,#rail .nm,.dec .ar,.dec::after,.cta::after{transition:none}
  .rv{opacity:1;transform:none}
}
@media print{   /* paper carries the content only: no header, rail, menu, medium or theme switch, on every page */
  #hdr,#rail,#field,#menu,#theme,.skip{display:none !important}
  html{scroll-snap-type:none;scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}