/* Loisium landing, redesign (v2).
   Cream, orange and ink. Every file is ours: the typefaces sit in fonts/ with
   their licences, the libraries in vendor/. Nothing is asked of another host,
   and nothing is written into the page (the server's policy refuses inline
   style and inline script), so every rule lives here.

   Colours
     --cream  #F4EFE6  the page
     --paper  #FBF8F2  a raised card
     --sand   #EAE2D4  a quieter fill
     --ink    #141413  words, lines, the dark bands
     --orange #F2541B  the one accent. Fills, and display-size words only:
                       on cream it is 3.0 to 1, enough for large text only.
     --rust   #B53708  orange for small words on cream (5.3 to 1)
     --muted  #5F5A52  quieter words on cream (6.0 to 1)
*/

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-wdth-latin-12020a6f.woff2") format("woff2-variations"), url("/fonts/archivo-wdth-latin-12020a6f.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-1b5ebfb3.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin-5bc6413e.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #F4EFE6;
  --paper: #FBF8F2;
  --sand: #EAE2D4;
  --ink: #141413;
  --ink-2: #2A2926;
  --orange: #F2541B;
  --rust: #B53708;
  --muted: #5F5A52;
  --line: #141413;
  --hair: rgba(20, 20, 19, .14);
  --blue: #2F7CF6;
  --ok: #1F7A4A;
  --danger: #B42318;

  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --pad: clamp(1rem, 4.5vw, 5.5rem);
  --sec: clamp(5rem, 12vh, 9rem);
  --bar: 4.5rem;
  --r: 1.75rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 1rem); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--ink); color: var(--cream); padding: .6rem 1rem; border-radius: 999px; }
.skip:focus { left: .5rem; }

/* ------------------------------------------------------------------ type */
h2 {
  font-family: var(--display); font-weight: 850; font-stretch: 112%;
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 5.25rem); line-height: .98; letter-spacing: -.035em;
  text-wrap: balance; max-width: 18ch;
}
h3 { font-family: var(--display); font-weight: 800; font-stretch: 108%; letter-spacing: -.02em; line-height: 1.08; }
.hl { color: var(--orange); }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.wi { display: inline-block; }
.eyebrow {
  font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .9rem; color: var(--ink); margin-bottom: 1.4rem;
}
.eyebrow::before { content: ""; width: 2.25rem; height: 2px; background: var(--ink); }
.lead { font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); line-height: 1.5; color: var(--ink-2); max-width: 40rem; }
.scr-soft { color: var(--muted); }
.mono { font-family: var(--mono); }

/* ------------------------------------------------------------------ buttons */
.button {
  display: inline-flex; align-items: center; gap: .9rem; text-decoration: none;
  background: var(--orange); color: var(--ink); font-weight: 650; font-size: 1.05rem;
  padding: .55rem .6rem .55rem 1.5rem; border-radius: 999px; border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink); transition: box-shadow .25s var(--ease);
  min-height: 3.5rem;
}
.button .dot-arrow {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--ink); color: var(--cream); font-size: 1.1rem; transition: transform .35s var(--ease);
}
.button:hover { box-shadow: 6px 6px 0 var(--ink); }
.button:hover .dot-arrow { transform: rotate(-45deg); }
.button:active { box-shadow: 1px 1px 0 var(--ink); }

/* ------------------------------------------------------------------ top bar */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar);
  display: flex; align-items: center; gap: 1rem; padding: 0 var(--pad);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .45s var(--ease);
}
.top.solid { background: rgba(244, 239, 230, .86); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--hair); }
.top.hide { transform: translateY(-110%); }
/* past the hero the bar is lower, so the page under it has more room (the founder, 2026-10-21) */
.top { transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .45s var(--ease), height .35s var(--ease); }
.top.solid { height: 3.5rem; }
.top.solid .mark { width: 6.5rem; }
.top.solid .quiet { padding: .45rem 1rem; font-size: .9rem; }
.mark { transition: width .35s var(--ease); }
.mark { display: block; width: 7.5rem; flex: none; }
.mark img { width: 100%; }
.beta-mark {
  font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border: 1.5px solid var(--ink); border-radius: 999px; padding: .1rem .5rem; color: var(--ink);
}
.top-links { display: flex; gap: clamp(1rem, 2.4vw, 2.5rem); margin: 0 auto; font-size: .95rem; font-weight: 500; background: rgba(244, 239, 230, .82); border: 1.5px solid var(--hair); border-radius: 999px; padding: .15rem 1.4rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.top.solid .top-links { background: transparent; border-color: transparent; }
.top-links a { text-decoration: none; position: relative; padding: .5rem 0; }
.top-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.top-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.quiet {
  text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap;
  background: var(--ink); color: var(--cream); border-radius: 999px; padding: .65rem 1.15rem; display: inline-flex; gap: .5rem; align-items: center;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.quiet:hover { background: var(--orange); color: var(--ink); }
.quiet .arrow { transition: transform .3s var(--ease); }
.quiet:hover .arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------ 1. the hero */
.pov { position: relative; }
.pov-stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--cream); }

/* the paper: the hero itself. Without the film (no script, no WebGL, less
   motion asked for) it simply stands here as the first screen. */
.hero-paper {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(1.5rem, 4vw, 5rem);
  padding: calc(var(--bar) + 2.5rem) var(--pad) 5.5rem;
  background: var(--cream);
}
.hero-paper::before { /* the paper's own edge line, as on the printed flyer */
  content: ""; position: absolute; inset: calc(var(--bar) + .25rem) calc(var(--pad) * .5) 1rem; border: 1.5px solid var(--hair); border-radius: calc(var(--r) * 1.2); pointer-events: none;
}
.hero-main { position: relative; z-index: 2; }
.hero-paper h1 {
  font-family: var(--display); font-weight: 900; font-stretch: 112%;
  font-size: min(clamp(2.6rem, .5rem + 4.9vw, 6.75rem), 10.5vh); line-height: .92; letter-spacing: -.045em; margin-bottom: clamp(1rem, 2.6vh, 2rem);
}
.hero-paper h1 span { display: block; white-space: nowrap; }
.hero-paper h1 .h-c { color: var(--orange); }
.hero-words { display: grid; gap: clamp(.6rem, 1.6vh, 1.1rem); max-width: 38rem; }
.hero-sub { font-family: var(--display); font-weight: 750; font-stretch: 106%; font-size: min(clamp(1.35rem, 1rem + 1.1vw, 2rem), 4.2vh); line-height: 1.12; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.hero-words .lead { font-size: min(clamp(.98rem, .9rem + .3vw, 1.12rem), 2.35vh); line-height: 1.5; color: var(--ink-2); }
/* the founder's four points (2026-10-26): four capsules of one width under the headline, drawn like the
   button and the number cards (2px ink line, paper, the hard ink shadow), each with a small round chip and
   a drawing of its own. The words are plain; the orange is in the chips only. */
.hero-points { display: grid; gap: clamp(.45rem, 1.2svh, .7rem); max-width: 40rem; }
.hero-points li {
  display: flex; align-items: center; gap: .75em; min-height: 2.9em; padding: .32em 1.1em .32em .4em;
  border: 2px solid var(--ink); border-radius: 1.6em; background: var(--paper); box-shadow: .2em .2em 0 var(--ink);
  font-size: min(clamp(.9rem, .84rem + .22vw, 1.02rem), 2.25vh); line-height: 1.28; color: var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-points li:hover { transform: translate(-2px, -2px); box-shadow: calc(.2em + 2px) calc(.2em + 2px) 0 var(--ink); }
.hp-ico { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); }
.hp-ico svg { width: 1.2em; height: 1.2em; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-words .actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; }
.button.ghost { background: transparent; color: var(--ink); padding: .55rem 1.5rem; box-shadow: none; }
.button.ghost:hover { background: var(--ink); color: var(--cream); box-shadow: 4px 4px 0 var(--orange); }
/* the numbers: four cards, set like a scoreboard */
.hero-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-self: center; }
.hero-stats li { display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; min-height: min(11.5rem, 22svh); padding: 1.4rem 1.4rem 1.3rem; border: 2px solid var(--ink); border-radius: 1.4rem; background: var(--paper); }
.hero-stats b { font-family: var(--display); font-weight: 900; font-stretch: 116%; font-size: clamp(2.6rem, 1.4rem + 2.6vw, 4.4rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hero-stats .st-l { font-size: .95rem; line-height: 1.35; color: var(--ink-2); max-width: 17ch; }
/* the rating under each number: five stars, filled to the average, like a shop's */
.st-rate { display: flex; align-items: center; gap: .55rem; margin-top: -.5rem; }
.stars { position: relative; display: inline-block; line-height: 0; }
.stars > span { display: flex; gap: 2px; white-space: nowrap; }
.stars .s-on { position: absolute; inset: 0 auto 0 0; width: 0; overflow: hidden; }
.stars svg { width: 1.15rem; height: 1.15rem; flex: none; stroke-width: 1.6; stroke-linejoin: round; }
.stars .s-off svg { fill: transparent; stroke: currentColor; opacity: .55; }
.stars .s-on svg { fill: #FFB627; stroke: var(--ink); }
.st-rate em { white-space: nowrap; font-style: normal; font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.hero-stats .st-a { background: var(--orange); box-shadow: 6px 6px 0 var(--ink); }
.hero-stats .st-a .st-l { color: var(--ink); }
.hero-stats .st-a .s-on svg { fill: var(--paper); }
.hero-stats .st-b { transform: translateY(1.6rem); }
.hero-stats .st-c { background: var(--ink); color: var(--cream); }
.hero-stats .st-c .st-l { color: #CFC8BB; }
.hero-stats .st-c .s-on svg { stroke: var(--paper); }
.hero-stats .st-d { transform: translateY(1.6rem); background: var(--sand); }
.hero-stats .st-d b { color: var(--rust); }
.hero-stats .st-d .s-on svg { fill: var(--orange); }
.hero-next {
  position: absolute; left: var(--pad); bottom: 1.75rem; z-index: 3;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; font-weight: 600;
  display: inline-flex; gap: .7rem; align-items: center;
}
.hero-next span { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--ink); border-radius: 50%; }


/* ------------------------------------------------------------------ bands */
.band { padding: var(--sec) var(--pad); position: relative; }
.band > h2 + .lead, .band .lead + .lead { margin-top: 1.25rem; }

/* ------------------------------------------------------------------ 2. the walk-through */
.film { position: relative; background: var(--cream); padding: var(--sec) var(--pad) calc(var(--sec) * .6); --u: clamp(10px, .78vw, 15px); }
.film-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.film-intro .eyebrow { grid-column: 1 / -1; }
.film-intro h2 { max-width: 14ch; }
.film-rail { display: none; }
.fams { display: grid; gap: clamp(3rem, 8vh, 6rem); }

/* the application, drawn: sized in --u so it scales like a picture */
.dash {
  font-size: var(--u); line-height: 1.45; display: grid; grid-template-columns: 15em minmax(0, 1fr) 21em; grid-template-rows: auto 1fr;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 1.4em; overflow: hidden; box-shadow: .7em .7em 0 var(--ink);
  min-height: 36em;
}
.scr-top { grid-column: 1 / -1; display: flex; align-items: center; gap: .8em; padding: .9em 1.4em; border-bottom: 1.5px solid var(--ink); background: var(--cream); }
.scr-top b { font-family: var(--display); font-stretch: 115%; font-size: 1.15em; }
.scr-beta { border: 1px solid var(--ink); border-radius: 999px; padding: 0 .55em; font-size: .78em; font-family: var(--mono); }
.scr-sp { flex: 1; }
.scr-top span:last-child { font-family: var(--mono); font-size: .85em; color: var(--muted); }
.dash-menu { display: flex; flex-direction: column; gap: .15em; padding: 1.1em .8em; border-right: 1.5px solid var(--ink); font-size: .95em; background: var(--cream); }
.dash-menu span { padding: .35em .7em; border-radius: .6em; }
.dash-menu span:nth-child(2) { background: var(--ink); color: var(--cream); font-weight: 600; }
.dash-menu .scr-back { color: var(--muted); margin-bottom: .4em; }
.dash-menu .gap { margin-top: .8em; }
.dash-main { padding: 1.6em 1.8em; display: flex; flex-direction: column; gap: 1.1em; }
.scr-head { display: flex; align-items: center; gap: .9em; }
.scr-head > div { display: grid; }
.scr-name { font-family: var(--display); font-stretch: 112%; font-size: 1.7em; line-height: 1.1; }
.scr-slug { font-family: var(--mono); font-size: .85em; color: var(--muted); }
.scr-link { margin-left: auto; border: 1.5px solid var(--ink); border-radius: 999px; padding: .3em .9em; font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: .4em; border-radius: 999px; padding: .2em .75em; font-size: .85em; font-weight: 650; border: 1.5px solid var(--ink); white-space: nowrap; }
.pill.live { background: var(--orange); color: var(--ink); }
.pill.live::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--ink); }
.pill.wait { background: var(--sand); }
.pill.role { background: var(--cream); font-family: var(--mono); font-weight: 600; }
.scr-card { display: flex; flex-direction: column; gap: .55em; border: 1.5px solid var(--ink); border-radius: 1em; padding: 1.1em 1.2em; background: var(--paper); }
.scr-field { display: flex; align-items: center; gap: .6em; background: var(--cream); border: 1.5px solid var(--ink); border-radius: .7em; padding: .45em .5em .45em .9em; }
.scr-field code { font-family: var(--mono); font-size: .92em; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--cream); border-radius: 999px; padding: .35em 1em; font-weight: 600; font-size: .9em; border: 1.5px solid var(--ink); white-space: nowrap; }
.scr-btn.ghost { background: transparent; color: var(--ink); }
.scr-btn.go { background: var(--orange); color: var(--ink); align-self: flex-start; padding: .55em 1.6em; font-size: 1em; box-shadow: .25em .25em 0 var(--ink); }
.scr-h { font-family: var(--display); font-stretch: 110%; font-size: 1.1em; }
.scr-ok { display: inline-flex; gap: .55em; align-items: center; }
.dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 .25em rgba(31, 122, 74, .18); }
.scr-facts { display: grid; grid-template-columns: auto 1fr; gap: .4em 1.4em; margin-top: .3em; font-size: .92em; }
.scr-facts > span:nth-child(odd) { color: var(--muted); }
.bar { display: inline-block; width: 7em; height: .5em; border-radius: 1em; background: var(--sand); margin-left: .6em; vertical-align: middle; position: relative; overflow: hidden; border: 1px solid var(--ink); }
.bar i { position: absolute; inset: 0 79% 0 0; background: var(--orange); }
.dash-lois { border-left: 1.5px solid var(--ink); padding: 1.3em 1.2em; display: flex; flex-direction: column; gap: .9em; background: var(--cream); }
.lois-h { display: flex; gap: .8em; align-items: center; }
.lois-h > span { display: grid; }
.face { width: 3.2em; height: auto; flex: none; }
.lois-said .face { width: 2.4em; }
.lois-said.small .face { width: 2em; }
.lois-when { font-family: var(--mono); font-size: .78em; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lois-said { display: flex; gap: .6em; align-items: flex-start; }
.bubble { display: flex; flex-direction: column; gap: .35em; background: var(--paper); border: 1.5px solid var(--ink); border-radius: .3em 1em 1em 1em; padding: .8em .95em; }
.lois-meta { display: flex; justify-content: space-between; gap: 1em; font-size: .78em; color: var(--muted); font-family: var(--mono); }
.lois-got { align-self: flex-start; background: var(--ink); color: var(--cream); border-radius: 999px; padding: .3em 1em; font-weight: 600; font-size: .9em; }
.lois-ask { margin-top: auto; border: 1.5px dashed var(--ink); border-radius: .9em; padding: .7em .9em; font-size: .9em; color: var(--muted); display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.soon { display: inline-flex; font-family: var(--mono); font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--orange); color: var(--ink); border-radius: 999px; padding: .15em .7em; vertical-align: middle; white-space: nowrap; }

/* one of the seven */
.fam { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.fam-words h3 { font-size: clamp(1.7rem, 1rem + 2vw, 3rem); margin-bottom: 1.1rem; }
.fam-words .count { display: block; font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .2em; color: var(--rust); margin-bottom: .9rem; }
.fam-words > p { color: var(--ink-2); max-width: 34rem; }
.fam-list { margin-top: 1.4rem; display: grid; gap: .65rem; max-width: 34rem; }
.fam-list li { position: relative; padding-left: 1.6rem; color: var(--ink-2); }
.fam-list li::before { content: ""; position: absolute; left: 0; top: .55em; top: calc(.5lh - .325rem); box-sizing: border-box; width: .65rem; height: .65rem; border-radius: 50%; background: var(--orange); border: 1.5px solid var(--ink); }
.fam-list b { color: var(--ink); }
.fam-show { font-size: var(--u); line-height: 1.45; }
.fam-show .scr {
  display: flex; flex-direction: column; gap: 1em; background: var(--paper); border: 2px solid var(--ink); border-radius: 1.4em;
  padding: 1.8em; box-shadow: .7em .7em 0 var(--orange), .7em .7em 0 2px var(--ink); min-height: 30em; position: relative;
}
.fam-show .scr::before { content: ""; display: block; height: .8em; margin: -.6em 0 .2em; background: radial-gradient(circle at .4em 50%, var(--orange) .32em, transparent .36em), radial-gradient(circle at 1.6em 50%, var(--ink) .32em, transparent .36em), radial-gradient(circle at 2.8em 50%, var(--sand) .32em, transparent .36em); background-repeat: no-repeat; }
.chip { align-self: flex-start; display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); background: var(--cream); border: 1.5px solid var(--ink); border-radius: .7em; padding: .4em .8em; box-shadow: .2em .2em 0 var(--ink); }
.folder { width: 1.2em; height: .9em; background: var(--orange); border: 1.5px solid var(--ink); border-radius: .15em; }
.drop { display: flex; flex-direction: column; gap: .5em; align-items: center; text-align: center; border: 2px dashed var(--ink); border-radius: 1em; padding: 1.4em; background: var(--cream); }
.drop b { font-family: var(--display); font-stretch: 110%; font-size: 1.2em; }
.scr-two { display: flex; gap: .6em; margin-top: .3em; }
.said { display: inline-flex; gap: .6em; align-items: center; font-weight: 550; }
.tick { flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--ok); position: relative; }
.tick::after { content: ""; position: absolute; left: .42em; top: .22em; width: .35em; height: .65em; border: solid var(--cream); border-width: 0 .15em .15em 0; transform: rotate(45deg); }
.swap { margin-left: auto; display: grid; }
.swap .pill { grid-area: 1 / 1; }
.swap .wait { opacity: 0; }
.stages { display: flex; flex-wrap: wrap; gap: .4em; counter-reset: st; }
.stages li { counter-increment: st; font-size: .85em; border: 1.5px solid var(--ink); border-radius: 999px; padding: .2em .8em; background: var(--cream); }
.stages li::before { content: counter(st) " "; font-family: var(--mono); color: var(--rust); font-weight: 700; }
.code { display: grid; grid-template-columns: 11em minmax(0, 1fr); border: 1.5px solid var(--ink); border-radius: 1em; overflow: hidden; background: var(--ink); color: var(--cream); font-family: var(--mono); font-size: .9em; }
.code-tree { display: flex; flex-direction: column; padding: .9em .6em; gap: .15em; background: #1E1D1B; border-right: 1px solid #3A3833; }
.code-tree span { padding: .2em .6em; border-radius: .4em; color: #CFC8BB; }
.code-tree .on { background: var(--orange); color: var(--ink); }
.code-tree .in { padding-left: 1.6em; }
.code-lines { display: flex; flex-direction: column; padding: .9em 1em; white-space: pre; overflow: hidden; }
.code-lines span { color: #E9E2D5; }
.code-lines .new { background: rgba(242, 84, 27, .28); box-shadow: inset 3px 0 0 var(--orange); }
.row { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
.frames { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.frame { display: flex; flex-direction: column; gap: .55em; border: 1.5px solid var(--ink); border-radius: 1em; padding: 1em; background: var(--cream); min-height: 11em; }
.frame i { display: block; height: .7em; border-radius: 1em; background: var(--sand); border: 1px solid rgba(20,20,19,.25); }
.frame i.short { width: 60%; }
.frame.new { background: var(--paper); border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.frame i.added { background: var(--orange); width: 80%; border-color: var(--ink); }
.grid { display: grid; border: 1.5px solid var(--ink); border-radius: 1em; overflow: hidden; background: var(--paper); }
.grid.c3 { grid-template-columns: 1fr 2fr .8fr; }
.grid span { padding: .55em .9em; border-top: 1px solid var(--hair); }
.grid .h { border-top: 0; background: var(--ink); color: var(--cream); font-family: var(--mono); font-size: .85em; }
.grid .edit { background: rgba(242, 84, 27, .2); box-shadow: inset 0 0 0 2px var(--orange); font-weight: 700; }
.list { display: grid; gap: .5em; }
.list li { display: flex; flex-wrap: wrap; gap: .5em 1em; align-items: center; border: 1.5px solid var(--ink); border-radius: .8em; padding: .65em .9em; background: var(--cream); }
.list li .pill { margin-left: auto; }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.nums span { display: flex; flex-direction: column; gap: .2em; border: 1.5px solid var(--ink); border-radius: .9em; padding: .8em 1em; color: var(--muted); font-size: .9em; background: var(--cream); }
.nums b { font-family: var(--display); font-stretch: 115%; font-size: 2.2em; color: var(--ink); line-height: 1; }
.bars { display: flex; align-items: flex-end; gap: .6em; height: 8em; padding: .6em; border-bottom: 1.5px solid var(--ink); }
.bars i { flex: 1; background: var(--orange); border: 1.5px solid var(--ink); border-radius: .4em .4em 0 0; transform-origin: bottom; }
.bars i:nth-child(1) { height: 35%; } .bars i:nth-child(2) { height: 52%; } .bars i:nth-child(3) { height: 44%; } .bars i:nth-child(4) { height: 70%; }
.bars i:nth-child(5) { height: 61%; } .bars i:nth-child(6) { height: 86%; } .bars i:nth-child(7) { height: 100%; background: var(--ink); }
.logline { font-family: var(--mono); font-weight: 600; color: var(--rust); }
/* 6 / 8, sharing: an email typed, Add, the invite said, the row, Copied */
.share-box { display: flex; flex-direction: column; gap: .6em; }
.share-typed::after { content: ""; display: inline-block; width: .08em; height: 1.05em; margin-left: .08em; vertical-align: -.15em; background: var(--ink); opacity: 0; }
.share-show.typing .share-typed::after { opacity: 1; }
.share-new { background: rgba(242, 84, 27, .14); box-shadow: inset 3px 0 0 var(--orange); }
.share-copy { display: inline-grid; }
.share-copy span { grid-area: 1 / 1; }
.share-copy .c2 { opacity: 0; }

/* The three words the eye should land on (social media, Google Doc, phone's settings): a marker swipe
   behind them, a little crooked, as if drawn by hand. Drawn whole by default (no script, or less motion);
   with the film on it is drawn in, left to right, when its step comes into view (.inked, main.js). */
mark.mk {
  color: inherit; background-color: transparent; padding: 0 .12em; margin: 0 -.04em; border-radius: .25em .7em .3em .8em / .6em .3em .7em .4em;
  background-image: linear-gradient(100deg, rgba(242, 84, 27, 0) .5%, rgba(242, 84, 27, .92) 3%, rgba(242, 84, 27, .78) 55%, rgba(242, 84, 27, .95) 96.5%, rgba(242, 84, 27, 0) 99.5%),
                    linear-gradient(96deg, rgba(242, 84, 27, 0) 1.5%, rgba(242, 84, 27, .34) 5%, rgba(242, 84, 27, .28) 94%, rgba(242, 84, 27, 0) 98.5%);
  background-repeat: no-repeat; background-size: 100% .52em, 100% .3em; background-position: 0 92%, .2em 42%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.film-on .fam mark.mk { background-size: 0% .52em, 0% .3em; transition: background-size .85s cubic-bezier(.65, .05, .25, 1) .35s; }
html.film-on .fam.inked mark.mk { background-size: 100% .52em, 100% .3em; }

/* 1 / 8, side by side (the founder, 2026-10-26): one small landscape box, two equal halves that mirror
   each other row for row and beat for beat. Row 1: who, and the one button. Row 2: what is chosen.
   Row 3: what is said about it. Row 4: it is out there. The still picture (no script, less motion) is the
   last beat; .go runs the loop (main.js), .paused holds it while it is off the screen. */
.fam-show .scr.duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1em 1.1em; }
.fam-show .duel::before { grid-column: 1 / -1; }
.duel-half { display: grid; grid-template-rows: auto 1fr; gap: .5em; min-width: 0; }
.duel-tag { font-family: var(--mono); font-size: .78em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.duel-card { display: grid; grid-template-rows: 2.4em minmax(8em, 1fr) 1.5em 2.3em; gap: .6em; align-items: center; border: 1.5px solid var(--ink); border-radius: 1em; padding: .8em .9em; background: var(--paper); min-width: 0; }
.duel-row1 { display: flex; align-items: center; gap: .55em; min-width: 0; font-size: .95em; }
.duel-row1 b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-act { margin-left: auto; display: inline-grid; align-items: center; justify-items: end; }
.duel-act > * { grid-area: 1 / 1; }
.duel-row2 { height: 100%; display: flex; justify-content: center; }
.duel-row3 { display: flex; align-items: center; gap: .45em; font-size: .9em; white-space: nowrap; overflow: hidden; min-width: 0; }
.duel-row4 { display: flex; align-items: center; gap: .8em; min-width: 0; }
.duel .d-btn, .duel .d-empty, .duel .d-pending { opacity: 0; }
.duel-pick { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: .4em; color: var(--muted); font-size: .85em; border: 2px dashed rgba(20, 20, 19, .4); border-radius: inherit; }
.ig-ring, .lv-mark { flex: none; display: grid; width: 2.2em; height: 2.2em; padding: .15em; border-radius: 50%; }
.ig-ring { background: conic-gradient(from 200deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.ig-ring i { border-radius: 50%; border: .14em solid var(--paper); background: radial-gradient(circle at 50% 38%, var(--ink) 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, var(--ink) 0 42%, transparent 43%), var(--orange); }
.lv-mark { place-items: center; background: var(--cream); border: 1.5px solid var(--ink); }
.ig-dots { display: flex; gap: .2em; padding: .3em 0; }
.ig-dots i { width: .3em; height: .3em; border-radius: 50%; background: var(--ink); }
.ig-pic { position: relative; height: 100%; aspect-ratio: 1; overflow: hidden; border-radius: .4em; background: var(--sand); }
.ig-photo { position: absolute; inset: 0; background: linear-gradient(165deg, #FBD9B8 0%, #F6A577 58%, #E2693D 100%); }
.ig-sun { position: absolute; top: 12%; right: 12%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #FFF3DC; }
.ig-cup { position: absolute; left: 24%; bottom: 20%; width: 40%; height: 32%; background: var(--paper); border: .14em solid var(--ink); border-radius: .15em .15em 1em 1em; }
.ig-cup::after { content: ""; position: absolute; right: -34%; top: 14%; width: 30%; height: 46%; border: .14em solid var(--ink); border-left: 0; border-radius: 0 50% 50% 0; }
.ig-cup::before { content: ""; position: absolute; left: -18%; right: -18%; bottom: -.42em; height: .22em; background: var(--ink); border-radius: 1em; }
.lv-drop { position: relative; flex: 1; display: grid; place-items: center; border: 2px dashed var(--ink); border-radius: .8em; background: var(--cream); }
.lv-drop > .chip { align-self: center; }
.ig-icons { display: flex; gap: .6em; }
.ig-icons svg { width: 1.35em; height: 1.35em; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.ig-icons .ig-heart { fill: #E0314B; stroke: #E0314B; }
.ig-likes { margin-left: auto; font-size: .9em; font-weight: 700; white-space: nowrap; }
@property --likes { syntax: "<integer>"; inherits: false; initial-value: 0; }
.ig-count { --likes: 128; counter-reset: likes var(--likes); }
.ig-count::after { content: counter(likes); }
.duel-row3 .tick { width: 1.15em; height: 1.15em; }
.duel-row3 .tick::after { left: .38em; top: .19em; width: .3em; height: .58em; }
.d-type { display: inline-block; vertical-align: bottom; white-space: nowrap; }
.duel-row4 .scr-field { flex: 1; min-width: 0; padding: .35em .7em; }
.duel-row4 .scr-field code { font-size: .82em; }
html.film-on .duel.go .d-empty { animation: d-empty 10s linear infinite; }
html.film-on .duel.go .d-chosen { animation: d-chosen 10s ease-out infinite; }
html.film-on .duel.go .d-type { animation: d-type 10s infinite; }
html.film-on .duel.go .d-said { animation: d-said 10s ease-out infinite; }
html.film-on .duel.go .d-btn { animation: d-btn 10s ease-in-out infinite; }
html.film-on .duel.go .d-pending { animation: d-pending 10s linear infinite; }
html.film-on .duel.go .d-done { animation: d-done 10s ease-out infinite; }
html.film-on .duel.go .d-pop { animation: d-pop 10s ease-out infinite; }
html.film-on .duel.go .ig-count { animation: d-count 10s ease-out infinite; }
html.film-on .duel.go .ig-heart { animation: d-heart 10s ease-out infinite; transform-origin: 50% 60%; }
html.film-on .duel.go.paused * { animation-play-state: paused; }
/* one goes before the next comes (2026-10-27): crossed, two labels showed on top of one another for a moment */
@keyframes d-empty { 0%, 6% { opacity: 1; } 8.5%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes d-chosen { 0%, 8.5% { opacity: 0; transform: scale(.9); } 12%, 93% { opacity: 1; transform: none; } 96.5%, 100% { opacity: 0; } }
@keyframes d-type { 0%, 15% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(19, end); } 36%, 93% { clip-path: inset(0 0 0 0); } 98%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes d-said { 0%, 30% { opacity: 0; transform: translateY(.5em); } 35%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes d-btn { 0%, 40% { opacity: 1; transform: none; } 43% { opacity: 1; transform: scale(.86); } 46% { opacity: 1; transform: none; } 47%, 97% { opacity: 0; transform: none; } 100% { opacity: 1; } }
@keyframes d-pending { 0%, 47% { opacity: 0; } 48.5%, 56% { opacity: 1; } 57.5%, 100% { opacity: 0; } }
@keyframes d-done { 0%, 57.5% { opacity: 0; transform: translateY(.4em); } 61%, 93% { opacity: 1; transform: none; } 96.5%, 100% { opacity: 0; } }
@keyframes d-pop { 0%, 57% { opacity: 0; transform: scale(.6); } 61% { opacity: 1; transform: scale(1.15); } 64%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes d-count { 0%, 59% { --likes: 0; } 82%, 100% { --likes: 128; } }
@keyframes d-heart { 0%, 61% { transform: scale(1); } 65% { transform: scale(1.35); } 69%, 100% { transform: scale(1); } }

/* 9 / 9, the Scan: six rows ticked one by one, a ring that fills, no score. Whole by
   default; with the film on, played each time the step comes (.inked, main.js). */
.scan-top { display: flex; align-items: center; gap: 1em; }
.scan-top > div { display: grid; }
@property --scan { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.scan-ring { flex: none; display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 50%; --scan: 100%;
  background: radial-gradient(closest-side, var(--paper) 72%, transparent 73%), conic-gradient(var(--ok) var(--scan), var(--sand) 0); border: 1.5px solid var(--ink); }
.scan-rows { display: grid; gap: .45em; }
.scan-rows li { display: flex; align-items: center; gap: .7em; border: 1.5px solid var(--ink); border-radius: .8em; padding: .5em .8em; background: var(--cream); }
.scan-rows li b { margin-left: auto; color: var(--ok); font-weight: 700; }
.scan-rows .tick { width: 1.15em; height: 1.15em; }
.scan-rows .tick::after { left: .38em; top: .19em; width: .3em; height: .58em; }
.scan-said { display: grid; gap: .35em; }
.scan-said .scr-soft { font-size: .85em; }
html.film-on .fam.inked .scan-ring { animation: scan-ring 2.4s ease-out .2s both; }
html.film-on .fam.inked .scan-rows li { animation: scan-row .35s ease-out both; }
html.film-on .fam.inked .scan-rows li:nth-child(1) { animation-delay: .35s; }
html.film-on .fam.inked .scan-rows li:nth-child(2) { animation-delay: .7s; }
html.film-on .fam.inked .scan-rows li:nth-child(3) { animation-delay: 1.05s; }
html.film-on .fam.inked .scan-rows li:nth-child(4) { animation-delay: 1.4s; }
html.film-on .fam.inked .scan-rows li:nth-child(5) { animation-delay: 1.75s; }
html.film-on .fam.inked .scan-rows li:nth-child(6) { animation-delay: 2.1s; }
html.film-on .fam.inked .scan-rows li:nth-child(7) { animation-delay: 2.45s; }
html.film-on .fam.inked .scan-rows li:nth-child(8) { animation-delay: 2.8s; }
@keyframes scan-ring { from { --scan: 0%; } to { --scan: 100%; } }
@keyframes scan-row { from { opacity: .35; } to { opacity: 1; } }

/* held walk-through (wide screens, with the script): one step at a time */
html.film-on .film.held .film-pin { height: 100vh; height: 100svh; padding-top: calc(var(--bar) + 1.5rem); padding-bottom: 1.5rem; display: flex; flex-direction: column; }
html.film-on .film.held { padding-top: calc(var(--sec) * .5); padding-bottom: 0; --u: min(.95vw, calc((100vh - 16rem) / 37)); }
html.film-on .film.held .film-intro { margin-bottom: 1.5rem; }
html.film-on .film.held .film-intro h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.75rem); max-width: none; }
html.film-on .film.held .fams { position: relative; flex: 1; display: block; min-height: 0; }
html.film-on .film.held .dash, html.film-on .film.held .fam { position: absolute; inset: 0; margin: auto; }
html.film-on .film.held .dash { height: fit-content; max-height: 100%; }
html.film-on .film.held .fam { opacity: 0; visibility: hidden; }
html.film-on .film.held .film-rail {
  display: flex; gap: .45rem; align-items: center; font-family: var(--mono); font-size: .75rem; font-weight: 700;
}
.film-rail i { display: block; width: 1.9rem; height: 4px; border-radius: 4px; background: var(--sand); border: 1px solid var(--ink); overflow: hidden; position: relative; }
.film-rail i b { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; }

/* ------------------------------------------------------------------ the ticker */
.ticker { position: relative; height: clamp(11rem, 18vw, 15rem); overflow-x: clip; overflow-y: visible; background: var(--cream); }
/* Each band is a fixed strip, wider than the screen and tilted; only its
   lettering moves. The strip's ends never come into view. */
.tick-run { position: absolute; left: -15vw; right: -15vw; top: 50%; overflow: hidden; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; white-space: nowrap; }
.tick-track { display: flex; width: max-content; will-change: transform; }
.tick-set { display: flex; flex: none; }
.tick-set span { display: inline-flex; align-items: center; gap: 1.2em; padding: 0 1.2em; }
.tick-set span::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
.tick-run.one { background: var(--orange); color: var(--paper); font-size: clamp(1.15rem, .9rem + .7vw, 1.6rem); padding: 1.1rem 0; margin-top: -.6rem; border-block: 2px solid var(--ink); transform: rotate(-2.4deg); z-index: 2; }
.tick-run.two { background: var(--ink); color: var(--cream); font-size: clamp(.85rem, .75rem + .35vw, 1.05rem); padding: .8rem 0; margin-top: -3.4rem; transform: rotate(2.6deg); z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.js) .tick-run.one .tick-track { animation: tick 60s linear infinite; }
  html:not(.js) .tick-run.two .tick-track { animation: tick 72s linear infinite reverse; }
}
@keyframes tick { to { transform: translateX(-50%); } }
/* A phone (the founder, 2026-10-27): at the laptop's size a phone showed half a sentence at a time. Smaller
   letters fit a whole one, and main.js moves the bands slower here so each can be read as it passes. */
@media (max-width: 40rem) {
  .tick-run.one { font-size: .78rem; letter-spacing: .06em; padding: .8rem 0; }
  .tick-run.two { font-size: .75rem; letter-spacing: .06em; padding: .6rem 0; margin-top: -2.6rem; }
  .ticker { height: 8.5rem; }
}
html:not(.js) .tick-run:hover .tick-track { animation-play-state: paused; }

/* ------------------------------------------------------------------ 3. the problem */
.problem { background: var(--cream); padding-top: calc(var(--sec) * .7); overflow-x: clip; }
/* (the "With Loisium" side slides in from 40px right: without the clip a phone page grew 26px wider, 2026-10-26) */
.problem h2 { max-width: 15ch; }
.problem > .lead { margin-top: 1.5rem; }
.versus-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: clamp(2.5rem, 6vh, 4rem); margin-bottom: .9rem; font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.versus-head span:last-child { color: var(--rust); }
.versus { display: grid; gap: .9rem; }
.versus li { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.versus p { border-radius: 1.2rem; padding: 1.4rem 1.6rem; font-size: 1.05rem; line-height: 1.5; }
.versus p b { display: none; }
.versus .was { background: transparent; border: 1.5px dashed rgba(20, 20, 19, .45); color: var(--muted); }
.versus .now { background: var(--paper); border: 2px solid var(--ink); color: var(--ink); box-shadow: 5px 5px 0 var(--orange), 5px 5px 0 2px var(--ink); position: relative; }

/* ------------------------------------------------------------------ 3b. who each is for */
.cloud { background: var(--ink); color: var(--cream); border-radius: calc(var(--r) * 1.6) calc(var(--r) * 1.6) 0 0; }
.cloud h2 { max-width: 20ch; color: var(--cream); }
.cloud .versus-head span:first-child { color: #B8B2A7; }
.cloud .versus-head span:last-child { color: var(--orange); }
.cloud .versus .was { border-color: rgba(244, 239, 230, .35); color: #B8B2A7; }
.cloud .versus .now { background: var(--orange); color: var(--ink); border-color: var(--orange); box-shadow: none; }
.lead-on { margin-top: clamp(3rem, 8vh, 5rem); font-family: var(--display); font-weight: 900; font-stretch: 120%; letter-spacing: -.04em; line-height: .95; font-size: clamp(2.6rem, 1rem + 6vw, 7.5rem); }
.lead-on span { display: inline-block; }

/* ------------------------------------------------------------------ 4. Lois */
.lois { background: var(--cream); }
.lois-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.lois-top h2 { max-width: 18ch; margin-bottom: 1.5rem; font-size: clamp(2rem, 1rem + 3vw, 4.5rem); }
.lois-pose { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.lois-pose::before { content: ""; position: absolute; inset: 8%; background: var(--orange); border: 2px solid var(--ink); border-radius: calc(var(--r) * 1.5); transform: rotate(5deg); }
.lois-pose img { position: relative; width: 74%; filter: drop-shadow(8px 10px 0 rgba(20, 20, 19, .9)); }
.lois-does { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(3rem, 7vh, 5rem); counter-reset: ld; }
.lois-does > div { counter-increment: ld; display: flex; flex-direction: column; gap: 1rem; border: 2px solid var(--ink); border-radius: 1.5rem; padding: 1.75rem; background: var(--paper); transition: box-shadow .4s var(--ease); }
.lois-does > div:hover { box-shadow: 6px 6px 0 var(--orange), 6px 6px 0 2px var(--ink); }
.lois-does > div::before { content: "0" counter(ld); font-family: var(--mono); font-weight: 700; font-size: .8rem; letter-spacing: .2em; color: var(--rust); }
.lois-does h3 { font-size: clamp(1.5rem, 1rem + 1vw, 2.1rem); }
.lois-does p { color: var(--ink-2); }
.lois-says, .lois-does .lois-says { margin-top: auto; background: var(--ink); color: var(--cream); border-radius: 1rem 1rem 1rem .25rem; padding: 1rem 1.15rem; font-size: .98rem; font-weight: 500; display: grid; gap: .55rem; }
.lois-says span { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--orange); }

/* ------------------------------------------------------------------ 5. and many more */
.more-in { background: var(--sand); border-radius: calc(var(--r) * 1.6); margin: 0 calc(var(--pad) * .4); }
.more-in h2 { margin-bottom: 1rem; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 6vh, 4rem); }
.bento li { display: flex; flex-direction: column; gap: .7rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 1.4rem; padding: 1.6rem; min-height: 13rem; transition: box-shadow .4s var(--ease); }
.bento li:hover { box-shadow: 6px 6px 0 var(--ink); }
.bento li.wide { grid-column: span 2; }
.bento li:nth-child(1) { background: var(--ink); color: var(--cream); }
.bento li:nth-child(1) .scr-soft { color: #B8B2A7; }
.bento li:nth-child(4) { background: var(--orange); }
.bento li:nth-child(4) .scr-soft { color: var(--ink); }
/* Drag Lois onto something (2026-10-26, ships with the dashboard's own): Lois with the magnifier, a dotted path
   to a small card outlined in orange, the card Lois is about to explain */
.drag-art { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: .2rem; }
.drag-art picture { display: block; width: 3.6rem; transform: rotate(-6deg); }
.drag-path { width: 100%; height: 2.6rem; fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; align-self: center; }
.drag-card { display: grid; gap: .3rem; width: 4.4rem; padding: .55rem; border: 2px solid var(--orange); border-radius: .7rem; background: var(--paper); box-shadow: 0 0 0 4px rgba(242, 84, 27, .16); }
.drag-card i { display: block; height: .35rem; border-radius: 1rem; background: var(--sand); }
.drag-card i:first-child { width: 70%; background: var(--ink); }
.drag-card i:last-child { width: 55%; }
.bento b { font-family: var(--display); font-stretch: 110%; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.015em; }
.tiny { margin-top: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .88rem; font-family: var(--mono); }
.bento li:nth-child(1) .tiny .tick::after { border-color: var(--ink); }
.bento li:nth-child(1) .tiny .tick { background: var(--orange); }
.tiny .scr-btn { font-family: var(--sans); font-size: .85rem; }
.more { margin-top: 2rem; }
.more a { font-weight: 650; display: inline-flex; gap: .5rem; align-items: center; text-decoration-thickness: 2px; text-decoration-color: var(--orange); }

/* ------------------------------------------------------------------ 6. still to come */
.road { background: var(--cream); overflow: hidden; }
.road h2 { max-width: 20ch; }
.road h2 .soon { margin-left: .35em; position: relative; top: -.35em; font-size: .95rem; padding: .35em .9em; border: 2px solid var(--ink); letter-spacing: .14em; }
.road-note { margin-top: 1.25rem; color: var(--ink-2); font-size: 1.15rem; }
.road ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 6vh, 4rem); counter-reset: rd; }
.road li {
  counter-increment: rd; display: flex; flex-direction: column; gap: .6rem; border: 2px dashed var(--ink); border-radius: 1.4rem; padding: 1.5rem; background: var(--paper);
  color: var(--ink-2); line-height: 1.5; min-height: 15rem;
}
.road li::before { content: counter(rd, decimal-leading-zero); font-family: var(--display); font-weight: 900; font-stretch: 120%; font-size: 3rem; line-height: 1; color: var(--orange); -webkit-text-stroke: 1.5px var(--ink); }
.road li b { display: block; color: var(--ink); font-family: var(--display); font-stretch: 110%; font-size: 1.3rem; line-height: 1.15; }
/* held sideways (wide screens, with the script) */
html.film-on .road.sideways { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--bar) + 1rem); padding-bottom: 2rem; }
html.film-on .road.sideways ol { display: flex; width: max-content; gap: 1.25rem; grid-template-columns: none; }
html.film-on .road.sideways li { width: clamp(17rem, 24vw, 22rem); flex: none; }

/* ------------------------------------------------------------------ 7. questions, with the beta right under them */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; background: var(--cream); border-top: 2px solid var(--ink); }
.faq-top h2 { font-size: clamp(2.1rem, 1rem + 3vw, 4.25rem); max-width: 12ch; margin-bottom: 1.25rem; }
.faq-top .lead a { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .15em; overflow-wrap: anywhere; }
.faq-list { display: grid; gap: .8rem; }
.faq-q { border: 2px solid var(--ink); border-radius: 1.2rem; background: var(--paper); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.faq-q[open] { box-shadow: 5px 5px 0 var(--orange), 5px 5px 0 2px var(--ink); transform: translate(-2px, -2px); }
.faq-q summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 750; font-stretch: 106%; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.2; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--ink); border-radius: 50%; font-family: var(--mono); font-weight: 700; font-size: 1.15rem; line-height: 1; transition: transform .25s var(--ease), background .25s; }
.faq-q[open] summary::after { transform: rotate(45deg); background: var(--orange); }
.faq-q summary:hover::after { background: var(--orange); }
.faq-q summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 1rem; }
.faq-q p { padding: 0 1.25rem 1.2rem; color: var(--ink-2); max-width: 44rem; }
/* About the founders (/about): the two cards, as they were on the front page */
.about .people { margin-top: clamp(2rem, 5vh, 3rem); max-width: 40rem; }
.about .actions { margin-top: clamp(2rem, 5vh, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.people { display: grid; gap: 1rem; }
.people li { display: grid; grid-template-columns: 5.5rem 1fr auto; grid-template-rows: auto auto auto; column-gap: 1.25rem; align-items: center; border: 2px solid var(--ink); border-radius: 1.4rem; padding: 1.25rem; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }
.people .face { grid-row: 1 / 4; width: 5.5rem; height: 5.5rem; border-radius: 1rem; overflow: hidden; border: 2px solid var(--ink); background: var(--orange); }
.people .face img { width: 100%; height: 100%; object-fit: cover; }
.people b { font-family: var(--display); font-stretch: 115%; font-size: 1.2rem; letter-spacing: .02em; }
.people-place { font-family: var(--mono); font-size: .82rem; }
.people-links { grid-column: 3; grid-row: 1 / 4; display: flex; gap: .5rem; }
.people-links a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--ink); border-radius: 50%; transition: background .25s, color .25s; }
.people-links a:hover { background: var(--ink); color: var(--cream); }
.people-links svg, .foot-social svg { fill: currentColor; }

/* ------------------------------------------------------------------ 8. the beta */
.beta { background: var(--orange); color: var(--ink); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; overflow: hidden; border-top: 2px solid var(--ink); }
.beta > div:first-child { position: relative; }
.beta h2 { font-size: clamp(2.4rem, 1rem + 4.6vw, 6.25rem); max-width: 14ch; }
.lois-small { display: block; width: clamp(7rem, 12vw, 11rem); margin-bottom: 2.25rem; transform: rotate(-8deg); }
.lois-small img { filter: drop-shadow(6px 8px 0 rgba(20, 20, 19, .95)); }
.beta-words { display: grid; gap: 1rem; font-size: 1.1rem; }
.beta-words .button { background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: 4px 4px 0 var(--paper), 4px 4px 0 2px var(--ink); }
.beta-words .button:hover { box-shadow: 6px 6px 0 var(--paper), 6px 6px 0 2px var(--ink); }
.beta .actions { margin-top: .75rem; }

/* ------------------------------------------------------------------ the foot */
.foot { background: var(--ink); color: var(--cream); padding-bottom: 2.5rem; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(244, 239, 230, .2); }
.foot-cols div { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.foot-cols b { font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); margin-bottom: .4rem; }
.foot-cols a { text-decoration: none; color: #DCD5C8; }
.foot-cols a:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--orange); }
.foot-social { display: flex; gap: .75rem; }
.foot-social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid rgba(244, 239, 230, .4); border-radius: 50%; }
.foot-last { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; padding-top: 2rem; color: #B8B2A7; font-size: .9rem; }
.foot-name { display: inline-flex; gap: .75rem; align-items: center; margin-right: auto; }
.foot-name img { width: 8rem; }
.foot .beta-mark { border-color: var(--cream); color: var(--cream); }

/* ------------------------------------------------------------------ feedback */
.fb {
  position: fixed; z-index: 60; right: max(1.5rem, env(safe-area-inset-right, 0px)); bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  width: min(25rem, calc(100vw - 2rem)); background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 1.5rem; padding: 1.4rem 1.4rem 1.3rem;
  box-shadow: 7px 7px 0 var(--orange), 7px 7px 0 2px var(--ink);
  display: grid; gap: 1.1rem;
}
.fb[hidden] { display: none; }
.fb-x { position: absolute; top: .7rem; right: .7rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--cream); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.fb-x:hover { background: var(--ink); color: var(--cream); }
.fb-head { display: flex; align-items: center; gap: .9rem; padding-right: 3rem; }
.fb-head img { width: 3.6rem; height: auto; flex: none; transform: rotate(-6deg); filter: drop-shadow(3px 4px 0 rgba(20, 20, 19, .9)); }
.fb-kicker { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rust); margin-bottom: .2rem; }
.fb h2 { font-family: var(--display); font-weight: 850; font-stretch: 110%; font-size: 1.6rem; line-height: 1.05; letter-spacing: -.02em; max-width: none; }
.fb-body { display: grid; gap: .8rem; }
.fb-stars { display: flex; align-items: center; gap: .25rem; }
.fb-stars button { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; transition: transform .2s var(--ease); }
.fb-stars svg { width: 2.1rem; height: 2.1rem; fill: var(--sand); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; transition: fill .15s; }
.fb-stars button.on svg { fill: var(--orange); }
.fb-stars button:hover { transform: scale(1.12); }
.fb-stars button:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; border-radius: 50%; }
.fb-word { margin-left: .5rem; font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--muted); }
.fb-label { font-weight: 600; font-size: .95rem; display: flex; justify-content: space-between; gap: 1rem; }
.fb-label span { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.fb textarea {
  width: 100%; resize: vertical; min-height: 5.5rem; font: inherit; font-size: .98rem; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--ink); border-radius: .9rem; padding: .75rem .9rem;
}
.fb textarea::placeholder, .fb-who input::placeholder { color: var(--muted); }
.fb textarea:focus, .fb-who input:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
/* name and email side by side: the two labels, then the two boxes */
.fb-who { display: grid; grid-template-columns: 1fr 1fr; column-gap: .6rem; row-gap: .35rem; }
.fb-who input { width: 100%; min-width: 0; min-height: 2.75rem; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--ink); border-radius: .9rem; padding: .55rem .8rem; }
/* the field people never see: only a script fills it, and then nothing is kept */
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-why { font-size: .8rem; color: var(--muted); margin: -.3rem 0 0; }
.fb-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fb-send { min-height: 3.1rem; font-size: 1rem; padding-left: 1.3rem; cursor: pointer; }
.fb-send .dot-arrow { width: 2.1rem; height: 2.1rem; }
.fb-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: 4px 4px 0 var(--ink); }
.fb-note { font-size: .88rem; color: var(--muted); }
.fb-note.err { color: var(--rust); }
/* "you've already rated": red, plain, with the way to change the rating beside it */
.fb-again { display: grid; gap: .5rem; border: 1.5px solid var(--danger); border-radius: .9rem; padding: .7rem .9rem; color: var(--danger); background: var(--paper); font-size: .92rem; font-weight: 600; }
.fb-again[hidden] { display: none; }
.fb-change { justify-self: start; min-height: 2.75rem; padding: .4rem 1rem; font: inherit; font-size: .9rem; font-weight: 700; color: var(--paper); background: var(--danger); border: 0; border-radius: 999px; cursor: pointer; }
.fb-change:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* Cloudflare's check, when it is on: invisible unless it needs the reader */
.fb-check:empty { display: none; }
.fb-done { display: grid; gap: .25rem; padding: .4rem 0 .2rem; }
.fb-done[hidden], .fb-body[hidden] { display: none; }
.fb-done b { font-family: var(--display); font-stretch: 110%; font-size: 1.4rem; }
.fb-done span { color: var(--ink-2); }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 68rem) {
  .dash { grid-template-columns: 13em minmax(0, 1fr); }
  .dash-lois { grid-column: 1 / -1; border-left: 0; border-top: 1.5px solid var(--ink); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 62rem) {
  :root { --bar: 4rem; }
  .top-links { display: none; }
  .quiet { margin-left: auto; }
  .hero-paper { grid-template-columns: 1fr; align-content: center; padding-top: calc(var(--bar) + 1.5rem); gap: 1.25rem; }
  .hero-stats { gap: .55rem; }
  .hero-stats li { min-height: 0; padding: .7rem .8rem; gap: .35rem; border-radius: .9rem; }
  .hero-stats .st-a { box-shadow: 3px 3px 0 var(--ink); }
  .hero-stats .st-b, .hero-stats .st-d { transform: none; }
  .hero-stats b { font-size: min(8vw, 4.4svh); }
  .hero-stats .st-l { font-size: min(.74rem, 1.7svh); line-height: 1.25; max-width: none; }
  .st-rate { margin-top: 0; gap: .35rem; }
  .stars svg { width: min(.85rem, 1.9vh); height: min(.85rem, 1.9vh); }
  .st-rate em { font-size: .66rem; }
  .hero-paper h1 { font-size: min(clamp(2.2rem, 10vw, 4.75rem), 5.6svh); margin-bottom: .7rem; }
  .hero-paper { gap: 1rem; align-content: start; padding-top: calc(var(--bar) + 1rem); padding-bottom: 1rem; }
  .hero-sub { font-size: min(1.2rem, 2.9vh); }
  .hero-words { gap: .55rem; }
  .hero-words .lead { font-size: min(.88rem, 2vh); line-height: 1.45; }
  .hero-points li { font-size: max(.8rem, min(.9rem, 2svh)); }
  .hero-words .actions { gap: .6rem; margin-top: .2rem; }
  .hero-words .actions .button { min-height: 2.9rem; font-size: .95rem; padding-top: .35rem; padding-bottom: .35rem; }
  .hero-words .actions .dot-arrow { width: 2rem; height: 2rem; }
  .hero-words .actions { flex-wrap: nowrap; }
  .hero-words .actions .button { padding-left: 1rem; white-space: nowrap; font-size: min(.95rem, 4vw); }
  .hero-words .actions .button.ghost { padding-right: 1rem; }
  .hero-paper h1 span { white-space: normal; }
  .fam { grid-template-columns: 1fr; }
  .film { --u: clamp(9px, 2vw, 13px); }
  .lois-top, .faq, .beta { grid-template-columns: 1fr; }
  .lois-pose { width: min(70vw, 20rem); }
  .lois-does { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  :root { --pad: 1rem; }
  .fb { left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom, 0px)); width: auto; border-radius: 1.25rem; padding: 1.2rem 1.1rem 1.1rem; box-shadow: 0 6px 0 var(--orange), 0 6px 0 2px var(--ink); }
  .fb h2 { font-size: 1.35rem; }
  body { font-size: 1rem; }
  .beta-mark { display: none; }
  .top .beta-mark { display: inline-block; }
  .quiet { padding: .55rem .9rem; font-size: .88rem; }
  .mark { width: 6.25rem; }
  .hero-paper::before { display: none; }
  .hero-next { display: none; }
  .film { --u: 2.4vw; }
  .dash { grid-template-columns: 1fr; min-height: 0; }
  .dash-menu { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .dash-menu span { white-space: nowrap; }
  .dash-menu .gap { margin-top: 0; }
  .fam-show { --u: 2.6vw; }
  .fam-show .scr { padding: 1.3em; }
  .faq-q summary { padding: 1rem; }
  .faq-q p { padding: 0 1rem 1rem; }
  .versus-head { display: none; }
  .versus li { grid-template-columns: 1fr; gap: .5rem; }
  .versus p b { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .35rem; }
  .versus .now b { color: var(--rust); }
  .cloud .versus .now b { color: var(--ink); }
  .bento { grid-template-columns: 1fr; }
  .bento li.wide { grid-column: auto; }
  .people li { grid-template-columns: 4.5rem 1fr; }
  .people .face { width: 4.5rem; height: 4.5rem; }
  .people-links { grid-column: 2; grid-row: auto; margin-top: .6rem; }
  .foot-cols { grid-template-columns: 1fr; }
  .more-in { margin: 0; border-radius: var(--r); }
  /* wide enough for "22 tools to sign up for" and "Papertrail · for logs" on one line each (2026-10-27) */
}

/* ------------------------------------------------------------------ phones and small tablets (2026-10-26)
   The founder: a phone works the way the laptop does, the same walk-through and the same books, only
   scaled to fit. So nothing here is a different layout; it is sizes, and every link a thumb hits being
   at least 44px tall. All of it under max-width 61.99rem: a laptop never sees it. */
@media (max-width: 61.99rem) {
  .foot-cols div { gap: 0; }
  .foot-cols b { margin-bottom: .2rem; }
  .foot-cols a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
  .foot-social { gap: .5rem; }
  .bk-toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .more a, .about .actions a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
  .top .mark { min-height: 44px; display: flex; align-items: center; }
  .quiet { min-height: 44px; }
  /* Open Loisium drawn smaller on a phone (the founder, 2026-10-28: "too big"), still a 44px place for a thumb:
     the outer ring is a transparent border, the dark pill is only the inside */
  .quiet, .top.solid .quiet { border: .4rem solid transparent; background-clip: padding-box; padding: .1rem .7rem; font-size: .75rem; gap: .3rem; }
  .quiet .arrow { display: none; }
}
@media (max-width: 40rem) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}
@media (max-width: 22.5rem) {
  /* the smallest phones (320 to 360): the top bar keeps its wordmark, Beta and Open Loisium on one line */
  .top { gap: .5rem; }
  .mark, .top.solid .mark { width: 5.4rem; }
  .quiet, .top.solid .quiet { padding: .1rem .6rem; font-size: .75rem; }
}
@media (max-width: 61.99rem) and (max-height: 30rem) and (orientation: landscape) {
  /* a phone on its side: the hero is one short screen, so the words and the number cards sit side by side,
     at sizes that can still be read (they were 7px, and the cards' second row was cut off) */
  .hero-paper { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-content: center; align-items: center; column-gap: 1.25rem; row-gap: 0; padding-top: calc(var(--bar) + .4rem); padding-bottom: .6rem; }
  .hero-paper h1 { font-size: clamp(1.3rem, 3.7vw, 2rem); margin-bottom: .4rem; }
  .hero-words { gap: .4rem; }
  .hero-points { gap: .3rem; }
  .hero-points li { min-height: 0; padding: .18em .8em .18em .25em; font-size: .78rem; gap: .55em; }
  .hp-ico { width: 1.8em; height: 1.8em; }
  .hero-words .actions .button { min-height: 2.75rem; }
  .hero-stats { gap: .4rem; }
  .hero-stats li { padding: .45rem .6rem; gap: .2rem; }
  .hero-stats b { font-size: 1.5rem; }
  .hero-stats .st-l { font-size: .75rem; }
}

/* The walk-through on a phone or a small tablet: held, like the laptop, the scroll walking it one step at a
   time (main.js). The step's words on top and its card under them, the card drawn at whatever size makes
   the whole of it fit what is left of the screen (container units: the card measures its own box). On a
   phone on its side the words go left and the card right, as on the laptop. The bullets wait on What is
   inside: a step must fit one screen. */
@media (max-width: 61.99rem) {
  html.film-on .film.held { padding-top: 0; }
  html.film-on .film.held .film-pin { padding-top: calc(var(--bar) + .6rem); padding-bottom: .9rem; }
  html.film-on .film.held .film-intro { grid-template-columns: minmax(0, 1fr); row-gap: .45rem; margin-bottom: .7rem; }
  /* "How it works" stays, as on the laptop (the founder, 2026-10-27: it was hidden here to save a line); the
     card under it measures what is left and draws itself that much smaller */
  html.film-on .film.held .film-intro .eyebrow { margin: 0; }
  html.film-on .film.held .film-intro h2 { font-size: clamp(1.35rem, 5.6vw, 2.3rem); }
  html.film-on .film.held .film-rail { gap: .3rem; }
  html.film-on .film.held .film-rail i { flex: 1 1 0; width: auto; max-width: 2.2rem; }
  html.film-on .film.held .fams { container-type: size; }
  html.film-on .film.held .dash { font-size: min(100cqw / 40, 100cqh / 64); width: 100%; }
  html.film-on .film.held .fam { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; }
  html.film-on .film.held .fam-words .count { margin-bottom: .3rem; }
  html.film-on .film.held .fam-words h3 { font-size: clamp(1.15rem, 4.8vw, 1.75rem); margin-bottom: .4rem; }
  html.film-on .film.held .fam-words > p { font-size: .84rem; line-height: 1.42; }
  html.film-on .film.held .fam-list { display: none; }
  html.film-on .film.held .fam-show { flex: 1 1 auto; min-height: 0; container-type: size; display: grid; align-items: center; padding: 0 .7rem .7rem 0; }
  html.film-on .film.held .fam-show .scr { font-size: min(100cqw / 50, 100cqh / 31); }
}
@media (max-width: 61.99rem) and (max-height: 42.5rem) {
  /* only the shortest screens (640 and 667 tall): there the step's card needs the line, and a step must fit one screen */
  html.film-on .film.held .film-intro .eyebrow { display: none; }
}
/* The books on a phone: the same pages and the same turn as the laptop. Held upright, one page at a time;
   on its side, the spread, as tall as the screen allows. Nothing in a book under 12px: the small labels
   are .75rem here (they are .72rem on a laptop, which is not touched), and a page that would need smaller
   words gets fewer of them instead (the flowing books set their own pages). */
@media (max-width: 61.99rem) {
  html .bk-kicker, html .bk-hint, html .bk-soon, html .cmp-ok, html .cmp-key b, html .cmp-rows .cmp-side { font-size: .75rem; }
}
@media (max-width: 40rem) {
  html .bk-page { padding: 1.05rem; }
}
@media (max-width: 22.5rem) {
  html .cmp-text { font-size: clamp(.85rem, 4.8cqi, 1.3rem); }
}
@media (max-width: 61.99rem) and (orientation: landscape) and (max-height: 30rem) {
  /* under the top bar, which stays on the pages without a script; on the front page it goes away while
     the reader scrolls down, so the comparison book there may be as tall as the screen */
  html .bk-shell { --bkw: min(calc(100vw - 2rem), calc((100vh - 4.6rem) * 1.42)); margin-top: 1rem; }
  html .cmp .bk-shell { --bkw: min(calc(100vw - 2rem), calc((100vh - 2.75rem) * 1.42)); }
  html .bk-title { font-size: 1.15rem; }
  html .bk-says, html .bk-cover-says { margin-top: .5rem; font-size: .8rem; line-height: 1.4; }
  html .bk-soon { margin-top: .6rem; padding: .15rem .6rem; }
  html .bk-cover-title, html .cmp .bk-cover-title { font-size: 1.45rem; }
  html .bk-lois, html .cmp .bk-lois { width: 3.2rem; }
  html .bk-page { padding: .8rem .85rem; }
  html .bk-where { margin-top: .9rem; }
  html .cmp-job { font-size: clamp(1.05rem, 10cqi, 2.7rem); margin-top: .6rem; }
  html .cmp-head { font-size: clamp(.9rem, 8.4cqi, 2.3rem); padding-bottom: .35rem; margin-top: .5rem; }
  html .cmp-words { margin-top: .55rem; gap: .45rem; }
  html .cmp-text { font-size: .75rem; line-height: 1.32; }
  html .cmp-key { gap: .4rem; }
  html .cmp-key p { padding: .45rem .6rem; font-size: .76rem; }
  html .cmp-how .cmp-text { margin-top: .5rem; }
  html .bk-folio { padding-top: .2rem; }
  html .cmp-kicker, html .cmp-page .bk-kicker { margin-bottom: 0; }
}
@media (max-width: 61.99rem) and (orientation: landscape) and (max-height: 30rem) {
  html.film-on .film.held .film-intro h2 { display: none; }
  html.film-on .film.held .fam { flex-direction: row; align-items: center; gap: 1.1rem; }
  html.film-on .film.held .fam-words { flex: 0 0 40%; }
  html.film-on .film.held .fam-show { align-self: stretch; }
  html.film-on .film.held .dash { font-size: min(100cqw / 76, 100cqh / 40); }
}

/* less motion asked for: everything still, everything there */
@media (max-width: 40rem) and (max-height: 760px) {
  .hero-paper { padding-top: calc(var(--bar) + .6rem); }
  .hero-paper h1 { font-size: min(10vw, 5.2svh); margin-bottom: .45rem; }
  .hero-words { gap: .45rem; }
  .hero-stats { gap: .4rem; }
  .hero-stats li { padding: .4rem .65rem; gap: .2rem; }
  .hero-stats b { font-size: 3.7svh; }
}

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

/* ------------------------------------------------------------------ the other pages
   What is inside, Privacy, Terms and the 404: the same top bar and footer as the
   front page, the words in one column on the cream. No script runs on them, so the
   top bar is solid from the start. */
body.sub main.plain { max-width: 56rem; margin: 0 auto; padding-top: calc(var(--bar) + clamp(3rem, 9vh, 6rem)); }
.plain h1 {
  font-family: var(--display); font-weight: 900; font-stretch: 120%; letter-spacing: -.04em; line-height: .95;
  font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5.5rem); text-wrap: balance; max-width: 16ch;
}
.plain h1 + .lead { margin-top: 1.5rem; }
.plain h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); max-width: none; margin-top: clamp(2.75rem, 7vh, 4.5rem); margin-bottom: 1rem; }
.plain p { max-width: 44rem; }
.plain p + p { margin-top: 1rem; }
.plain > ul:not(.rows):not(.people) { list-style: disc; padding-left: 1.25rem; max-width: 44rem; display: grid; gap: .5rem; }
.plain > ul:not(.rows):not(.people) li::marker { color: var(--orange); }
.plain a:not(.button) { text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.plain .lead { margin-top: 1.25rem; }
.rows { border-top: 2px solid var(--ink); margin-top: .5rem; }
.rows li { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) auto; gap: .5rem 2rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1.5px solid var(--hair); }
.rows strong { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: 1.12rem; letter-spacing: -.01em; }
.rows .says { color: var(--ink-2); }
.rows .soon { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rust); border: 1.5px solid var(--rust); border-radius: 999px; padding: .2rem .7rem; white-space: nowrap; }
.plain .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(2.5rem, 6vh, 4rem); }
.plain .beside { color: var(--muted); }
.lost-lois { display: block; width: clamp(8rem, 18vw, 11rem); margin-bottom: 2rem; }
.lost-lois img { transform: rotate(-4deg); }
body.sub .foot { margin-top: var(--sec); }
@media (max-width: 40rem) {
  .rows li { grid-template-columns: minmax(0, 1fr); }
  .rows .soon { justify-self: start; }
}
/* a short page (the 404) still ends with the footer at the bottom of the screen */
body.sub { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.sub main.plain { flex: 1 0 auto; width: 100%; }

/* ------------------------------------------------------------------ the books (What is inside)
   book.js builds them from the lists on the page; the lists stay for readers of the
   screen and search engines, and come back with "Read as one page". */
.has-book:not(.as-one-page) [data-book] > ul.rows {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.as-one-page .bk-shell, .as-one-page .bk-where { display: none; }
.bk-tools { margin-top: 1.5rem; }
.bk-toggle { font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.bk-toggle[hidden] { display: none; }
[data-book] { margin-top: clamp(3rem, 8vh, 5rem); }
[data-book] > h2 { margin-top: 0; }
.bk-shell {
  --bkw: min(66rem, calc(100vw - 2rem));
  position: relative; width: var(--bkw); left: 50%; margin-left: calc(var(--bkw) / -2);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.5rem, 1.5vw, 1.25rem);
  margin-top: 2rem;
}
.bk {
  position: relative; isolation: isolate; aspect-ratio: 1.42; perspective: 2600px;
  -webkit-user-select: none; user-select: none; touch-action: pan-y; cursor: pointer;
}
/* the board of the cover, a little larger than the pages, with the landing's offset shadow */
.bk::before {
  content: ""; position: absolute; inset: -.65rem; z-index: -1; border-radius: 1.25rem; background: var(--ink);
  box-shadow: 9px 9px 0 var(--orange), 9px 9px 0 2px var(--ink);
}
/* the shadow the lifting page throws across the spine */
.bk::after {
  content: ""; position: absolute; top: 2%; bottom: 2%; left: 30%; right: 30%; z-index: 4; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20, 20, 19, .28), rgba(20, 20, 19, 0) 70%);
  opacity: calc(var(--lift, 0) * .9);
}
.bk.one { aspect-ratio: .72; width: min(100%, 27rem); justify-self: center; }
.bk.one::after { left: 0; right: 40%; }
.bk-slot { position: absolute; top: 0; height: 100%; }
.bk-slot.left { left: 0; width: 50%; }
.bk-slot.right { left: 50%; width: 50%; }
.bk-slot.full { left: 0; width: 100%; }
.bk-page {
  position: absolute; inset: 0; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  padding: clamp(1.25rem, 3vw, 3rem);
}
.bk-slot.left .bk-page { border-radius: .8rem 0 0 .8rem; background-image: linear-gradient(90deg, rgba(20, 20, 19, 0) 80%, rgba(20, 20, 19, .11)); }
.bk-slot.right .bk-page { border-radius: 0 .8rem .8rem 0; background-image: linear-gradient(270deg, rgba(20, 20, 19, 0) 80%, rgba(20, 20, 19, .11)); }
.bk-slot.full .bk-page { border-radius: .8rem; background-image: linear-gradient(90deg, rgba(20, 20, 19, .10), rgba(20, 20, 19, 0) 14%); }
.bk-kicker {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--rust);
}
.bk-count { color: var(--muted); }
.bk-title {
  margin-top: auto; font-family: var(--display); font-weight: 850; font-stretch: 112%; letter-spacing: -.03em; line-height: .98;
  font-size: clamp(1.6rem, .9rem + 2.3vw, 3.1rem); text-wrap: balance;
}
.bk-says { margin-top: 1.1rem; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
.bk-soon {
  align-self: flex-start; margin-top: 1.4rem; transform: rotate(-4deg);
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rust); border: 2px solid var(--rust); border-radius: 999px; padding: .3rem .8rem;
}
.bk-folio { margin-top: auto; padding-top: 1rem; font-family: var(--mono); font-size: .75rem; color: var(--muted); text-align: center; }
/* the first page of each book */
.bk-cover { background: var(--orange); background-image: none; }
.bk-cover .bk-kicker { color: var(--ink); }
.bk-cover-title {
  margin-top: auto; font-family: var(--display); font-weight: 900; font-stretch: 120%; letter-spacing: -.045em; line-height: .9;
  font-size: clamp(2.2rem, 1rem + 4.2vw, 5rem); text-wrap: balance;
}
.bk-cover-says { margin-top: 1rem; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); line-height: 1.5; max-width: 26ch; }
.bk-lois { align-self: flex-end; width: clamp(5rem, 11vw, 9rem); margin-top: auto; transform: rotate(-6deg); }
/* a cover with more words than room: Lois gives way (smaller, same place), so the hint under it is never cut */
.bk-cover .bk-lois { flex-shrink: 1; min-height: 0; object-fit: contain; object-position: right bottom; }
.bk-hint { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
[data-book="soon"] .bk-cover { background: var(--ink); color: var(--cream); }
[data-book="soon"] .bk-cover .bk-kicker { color: var(--orange); }
.bk-blank { background: var(--paper); }
/* the leaf in the air: strips nested in each other, each bent a little more */
.bk-leaf { position: absolute; top: 0; z-index: 5; transform-style: preserve-3d; }
.bk-leaf.right { left: 50%; transform-origin: left center; }
.bk-leaf.left { left: 0; transform-origin: right center; }
.bk.one .bk-leaf.right { left: 0; }
.bk-strip { position: absolute; top: 0; transform-style: preserve-3d; }
.bk-leaf.right > .bk-strip { left: 0; transform-origin: left center; }
.bk-leaf.right .bk-strip .bk-strip { left: 100%; transform-origin: left center; }
.bk-leaf.left > .bk-strip { right: 0; transform-origin: right center; }
.bk-leaf.left .bk-strip .bk-strip { right: 100%; transform-origin: right center; }
.bk-face { position: absolute; top: 0; bottom: 0; left: 0; right: -1px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-face.back { transform: rotateY(180deg); }
.bk-face .bk-page { inset: auto; top: 0; border-radius: 0; }
.bk-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(40, 30, 15, var(--a1, 0)), rgba(40, 30, 15, var(--a2, 0))); }
.bk-leaf.right .bk-face.back .bk-shade, .bk-leaf.left .bk-face.front .bk-shade { background: linear-gradient(270deg, rgba(40, 30, 15, var(--a1, 0)), rgba(40, 30, 15, var(--a2, 0))); }
.bk-arrow {
  width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font-size: 1.25rem; cursor: pointer; display: grid; place-items: center; box-shadow: 3px 3px 0 var(--ink);
  transition: box-shadow .2s var(--ease), background .2s var(--ease);
}
/* The board (.bk::before) pokes out .65rem on each side, and its orange shadow 11px
   more on the right: each arrow keeps clear of what pokes out on its side, so the
   two gaps look the same (the founder, 2026-10-19: the right one touched). */
.bk-arrow.prev { margin-right: .65rem; }
.bk-arrow.next { margin-left: calc(.65rem + 11px); }
.bk-arrow:hover:not(:disabled) { background: var(--orange); box-shadow: 4px 4px 0 var(--ink); }
.bk-arrow:disabled { opacity: .3; cursor: default; }
.bk-where { margin: 1.6rem 0 0; text-align: center; font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 48rem) {
  .bk-shell { grid-template-columns: minmax(0, 1fr); }
  .bk-arrow { display: none; }
}
/* flowing books (Privacy, Terms): the text set into the book's pages by book.js */
.has-book:not(.as-one-page) [data-flow-book] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.bk-measure { position: fixed; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }
.bk-measure .bk-page { inset: 0; }
.bk-body { flex: 1 1 auto; min-height: 0; overflow: hidden; margin-top: 1.25rem; font-size: clamp(.92rem, .85rem + .2vw, 1.02rem); line-height: 1.6; color: var(--ink-2); }
.bk-body h2 { font-family: var(--display); font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(1.15rem, .95rem + .6vw, 1.55rem); color: var(--ink); max-width: none; margin: 1.3rem 0 .55rem; }
.bk-body > h2:first-child { margin-top: 0; }
.bk-body p + p { margin-top: .7rem; }
.bk-body ul { list-style: disc; padding-left: 1.15rem; display: grid; gap: .35rem; }
.bk-body li::marker { color: var(--orange); }
.bk-body a { text-decoration-color: var(--orange); }
.bk-body .bk-on { margin-top: 0; }
.bk-flow .bk-folio { padding-top: .6rem; }
/* ------------------------------------------------------------------ the comparison book (#why)
   Under the six rows: the same question, job by job. Left page, most platforms today; right page,
   Loisium; a job not built yet, its heading and the stamp. book.js builds it from the list. */
.cmp { margin-top: clamp(3.5rem, 9vh, 6rem); }
.cmp-line { font-family: var(--display); font-weight: 800; font-stretch: 108%; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(1.35rem, 1rem + 1.2vw, 2.1rem); max-width: 30ch; }
.cmp .bk-tools { margin-top: .9rem; }
.has-book:not(.as-one-page) [data-compare-book] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* the book never taller than the window it is read in (a laptop at 1366 x 640 sees a whole spread) */
.cmp .bk-shell { --bkw: min(66rem, calc(100vw - 2rem), calc((100vh - 7rem) * 1.42 + 8.5rem)); }
.cmp-page, .cmp .bk-cover { container-type: inline-size; }
.cmp .bk-cover-title { font-size: clamp(1.9rem, 12.5cqi, 4.3rem); }
.cmp .bk-lois { width: clamp(4rem, 26cqi, 8.5rem); }
.cmp-job, .cmp-head {
  margin-top: 1.4rem; font-family: var(--display); font-weight: 850; font-stretch: 110%; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(1.45rem, 10cqi, 2.7rem); text-wrap: balance;
}
.cmp-head { font-size: clamp(1.3rem, 8.4cqi, 2.3rem); line-height: 1.04; }
.cmp-words { margin-top: clamp(1rem, 5cqi, 1.75rem); display: grid; gap: .8rem; }
.cmp-text { font-size: clamp(.92rem, 5.2cqi, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.cmp-page .bk-folio { margin-top: auto; }
.cmp-num, .cmp-ok { margin-top: auto; }
.cmp-num + .bk-folio, .cmp-ok + .bk-folio { margin-top: 0; }
.cmp-num { font-family: var(--display); font-weight: 900; font-stretch: 125%; line-height: .8; letter-spacing: -.05em; font-size: clamp(3rem, 30cqi, 8rem); color: var(--sand); }
.cmp-ok { display: flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ok); }
.cmp-ok::before { content: ""; width: .5rem; height: .9rem; margin: -.25rem .2rem 0 .15rem; border: solid var(--ok); border-width: 0 .17rem .17rem 0; transform: rotate(45deg); }
/* left: what is usual today, drawn as the table draws it, dashed and quiet */
.cmp-l::after { content: ""; position: absolute; inset: clamp(.55rem, 2.4cqi, .9rem); border: 1.5px dashed rgba(20, 20, 19, .32); border-radius: .55rem; pointer-events: none; }
.cmp-l .bk-kicker { color: var(--muted); }
.cmp-l .cmp-text { color: var(--muted); }
/* right: Loisium, ink on paper with the orange rule under its answer */
.cmp-r .cmp-head { padding-bottom: .55rem; border-bottom: 4px solid var(--orange); }
.cmp-r .bk-count { text-align: right; }
.cmp-key { margin-top: auto; display: grid; gap: .7rem; }
.cmp-key p { display: grid; gap: .2rem; border-radius: .7rem; padding: .8rem 1rem; font-size: clamp(.9rem, 3.9cqi, 1.1rem); }
.cmp-key b { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.cmp-key-l { border: 1.5px dashed rgba(20, 20, 19, .45); color: var(--muted); }
.cmp-key-r { border: 2px solid var(--ink); background: var(--cream); box-shadow: 4px 4px 0 var(--orange), 4px 4px 0 2px var(--ink); }
.cmp-key-r b { color: var(--rust); }
.cmp-how .cmp-text { margin-top: 1.1rem; }
.cmp-last .cmp-job { margin-top: auto; }
.cmp-last .cmp-text { margin-top: 1rem; }
/* a job not built yet: its heading, and a rubber stamp across the page. Worn ink: two grids
   of small holes at sizes that never line up, laid over a fainter patch, cut out of the stamp. */
.cmp-stamp {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-13deg);
  display: grid; justify-items: center; gap: .02em; padding: .3em .5em .34em;
  font-family: var(--display); font-weight: 900; font-stretch: 118%; text-transform: uppercase; letter-spacing: .05em; line-height: .92;
  font-size: clamp(1.5rem, 9.6cqi, 3.2rem); white-space: nowrap; color: var(--rust);
  border: .12em solid currentColor; border-radius: .14em;
  box-shadow: inset 0 0 0 .05em var(--paper), inset 0 0 0 .1em currentColor;
  mix-blend-mode: multiply; opacity: .9;
  --holes: radial-gradient(circle at 30% 40%, transparent 0 .7px, #000 1.6px) 0 0 / 7px 9px,
           radial-gradient(circle at 70% 60%, transparent 0 .9px, #000 1.9px) 3px 2px / 11px 13px,
           radial-gradient(ellipse 45% 35% at 78% 28%, rgba(0, 0, 0, .55), #000 75%);
  -webkit-mask: var(--holes); -webkit-mask-composite: source-in, source-in;
  mask: var(--holes); mask-composite: intersect;
}
.cmp-stamp span:last-child { font-size: 1.32em; letter-spacing: .12em; }
/* read as one page: the list itself, three columns on a wide screen, one on a phone */
.cmp-rows { margin-top: 1.5rem; border-top: 2px solid var(--ink); }
.cmp-rows > li { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(0, 1fr); gap: .6rem 2rem; padding: 1.3rem 0; border-bottom: 1.5px solid var(--hair); align-items: start; }
.cmp-rows h3 { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: 1.15rem; letter-spacing: -.01em; }
.cmp-rows .cmp-side { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cmp-rows .cmp-now .cmp-side { color: var(--rust); }
.cmp-rows .cmp-was p, .cmp-rows .cmp-now p { margin-top: .35rem; }
.cmp-rows .cmp-was { color: var(--muted); }
.cmp-rows .cmp-head { font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: 0; line-height: 1.4; margin-top: .35rem; padding: 0; border: 0; text-wrap: initial; }
.cmp-rows .soon { justify-self: start; grid-column: 2; }
@media (max-width: 40rem) {
  .cmp-rows > li { grid-template-columns: minmax(0, 1fr); }
  .cmp-rows .soon { grid-column: auto; }
}
/* A short window (a laptop at 125%: about 1100 x 560) still gets the held walk-through
   and the sideways road (main.js asks for 30rem of height); the heading gives up room
   so the drawn window and its steps fit under it (measured 2026-10-18). */
@media (max-height: 52rem) {
  html.film-on .film.held .film-pin { padding-top: calc(var(--bar) + .5rem); padding-bottom: .5rem; }
  html.film-on .film.held .film-intro { margin-bottom: .6rem; }
  html.film-on .film.held .film-intro .eyebrow { margin-bottom: .5rem; }
  html.film-on .film.held .film-intro h2 { font-size: clamp(1.6rem, .8rem + 1.8vw, 2.4rem); }
  /* the drawn window is sized in --u: smaller here, so it and its step fit under the heading */
  html.film-on .film.held { --u: min(.95vw, calc((100vh - 12rem) / 54)); padding-top: 0; }
  html.film-on .film.held .fam-words h3 { font-size: clamp(1.3rem, .8rem + 1.2vw, 1.85rem); margin-bottom: .6rem; }
  html.film-on .film.held .fam-words .count { margin-bottom: .45rem; }
  html.film-on .film.held .fam-words > p, html.film-on .film.held .fam-list { font-size: .9rem; line-height: 1.45; }
  html.film-on .film.held .fam-list { margin-top: .75rem; gap: .35rem; }
  html.film-on .road.sideways { padding-top: calc(var(--bar) + .25rem); padding-bottom: .75rem; }
  html.film-on .road.sideways h2 { font-size: clamp(1.8rem, 1rem + 2vw, 2.8rem); }
  html.film-on .road.sideways .road-note { margin-top: .5rem; font-size: 1rem; }
  html.film-on .road.sideways ol { margin-top: 1rem; }
  html.film-on .road.sideways li::before { font-size: 2.1rem; }
}

/* the signed-in person's round initial, as the dashboard draws it (landingme.go) */
.me-dot { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-left: .6rem; border-radius: 999px;
  background: var(--orange); color: var(--ink); font-weight: 600; font-size: .875rem; text-decoration: none; flex: none;
  transition: transform .2s var(--ease); }
.me-dot:hover { transform: scale(1.06); }
.me-dot[hidden] { display: none; }

/* ------------------------------------------------------------------ a phone held upright (2026-10-26, later)
   The walk-through's card was the laptop's picture shrunk to 5-7px words. Held upright, the card is now the
   same rectangle for every step, filling what is left under the words (main.js sets --wh to the longest
   step's words), and what is inside it is laid out again for that shape at a size that can be read: the
   post on top and Loisium under it, rows one under another. The scroll walks it as before. Last in the file
   so it wins over the short-window rules above; a laptop and a phone on its side never see it. */
@media (max-width: 61.99rem) and (orientation: portrait) {
  html.film-on .film.held .film-pin { padding-bottom: .7rem; }
  html.film-on .film.held .film-intro { margin-bottom: .55rem; }
  html.film-on .film.held .film-intro h2 { font-size: clamp(1.15rem, 4.9vw, 1.9rem); }
  html.film-on .film.held .fam { gap: .6rem; }
  html.film-on .film.held .fam-words { flex: 0 0 auto; min-height: var(--wh, 0); display: flex; flex-direction: column; justify-content: flex-end; }
  html.film-on .film.held .fam-words .count { margin-bottom: .25rem; }
  html.film-on .film.held .fam-words h3 { font-size: clamp(1.08rem, 4.5vw, 1.6rem); margin-bottom: .3rem; }
  html.film-on .film.held .fam-words > p { font-size: .82rem; line-height: 1.38; }
  html.film-on .film.held .fam-show { display: block; padding: 0 .45rem .45rem 0; }
  html.film-on .film.held .fam-show .scr {
    font-size: clamp(12.8px, 3.45vw, 15px); height: 100%; min-height: 0; padding: .95em; gap: .65em; overflow: hidden;
    box-shadow: .4em .4em 0 var(--orange), .4em .4em 0 2px var(--ink);
  }
  html.film-on .film.held .fam-show .scr::before { margin: -.45em 0 0; }
  html.film-on .film.held .dash { font-size: clamp(12.8px, 3.4vw, 13.5px); height: 100%; max-height: none; overflow: hidden; grid-template-columns: minmax(0, 1fr); }
  html.film-on .film.held .dash .scr-card > .scr-soft, html.film-on .film.held .dash .scr-facts, html.film-on .film.held .dash .lois-meta,
  html.film-on .film.held .dash .lois-when { display: none; }
  html.film-on .film.held .dash .dash-menu, html.film-on .film.held .dash .lois-ask, html.film-on .film.held .dash .lois-got,
  html.film-on .film.held .dash .lois-said.small { display: none; }
  html.film-on .film.held .dash .scr-head { flex-wrap: wrap; row-gap: .4em; }
  html.film-on .film.held .dash .scr-top span:last-child { display: none; }
  html.film-on .film.held .dash .dash-main, html.film-on .film.held .dash .dash-lois { min-width: 0; }
  /* step 1: the post on top, Loisium under it, row for row */
  html.film-on .film.held .fam-show .scr.duel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); gap: .55em; }
  html.film-on .film.held .duel-half { grid-template-rows: auto minmax(0, 1fr); gap: .3em; }
  html.film-on .film.held .duel-card { grid-template-rows: 2.1em minmax(2.5em, 1fr) 1.35em 2.1em; gap: .4em; padding: .55em .7em; }
  html.film-on .film.held .duel-tag { font-size: .8em; }
  /* step 2: the file list narrower beside the code */
  html.film-on .film.held .code { grid-template-columns: 6.5em minmax(0, 1fr); font-size: .8em; }
  html.film-on .film.held .frame { min-height: 6em; }
}
@media (max-width: 61.99rem) and (orientation: portrait) and (max-height: 45rem) {
  /* a short phone (an SE, a small Android): the walk-through's heading gives its room to the card; the dashes stay */
  html.film-on .film.held .film-intro h2 { display: none; }
  html.film-on .film.held .fam-show .scr { gap: .5em; padding: .8em; }
  html.film-on .film.held .dash .scr-h { display: none; }
  html.film-on .film.held .dash .dash-lois { padding-top: .6em; padding-bottom: .5em; }
  html.film-on .film.held .dash .lois-h .scr-soft { display: none; }
}
@media (max-width: 61.99rem) {
  /* Today beside With Loisium, as on the laptop: two columns, smaller boxes, words never under 13px */
  .versus-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; margin-top: 1.75rem; margin-bottom: .6rem; font-size: .82rem; letter-spacing: .14em; }
  .versus li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; }
  .versus p { padding: .8rem .75rem; font-size: .82rem; line-height: 1.45; border-radius: .9rem; }
  .versus p b { display: none; }
  .problem .versus .now { box-shadow: 3px 3px 0 var(--orange), 3px 3px 0 2px var(--ink); }
  /* and many more, and what is still to come: two to a row, as the laptop's grid, scaled */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .bento li { padding: 1rem .9rem; min-height: 0; gap: .5rem; }
  .bento li.wide, .bento li.drag-lois { grid-column: span 2; }
  .bento { grid-auto-flow: row dense; }
  .bento b { font-size: 1.02rem; }
  .bento .scr-soft { font-size: .82rem; }
  .bento .tiny, .bento .tiny .pill, .bento .tiny .scr-btn { font-size: .82rem; }
  .road ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .road li { padding: 1rem .85rem; font-size: .82rem; min-height: 0; }
  .road li::before { font-size: 2rem; }
  .road li b { font-size: .98rem; }
}

/* ------------------------------------------------------------------ 2026-10-26, the founder in a phone view
   (A laptop 1024 wide: the number cards were 15px past the screen; their two columns may shrink now,
   minmax(0, 1fr) on .hero-stats, which changes nothing on a wider screen.) */
@media (max-width: 61.99rem) {
  /* Launching soon on a phone: held, the scroll carries one wide card at a time sideways, as on the laptop */
  html.film-on .road.sideways { padding-top: calc(var(--bar) + .5rem); padding-bottom: 1rem; }
  html.film-on .road.sideways h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); line-height: 1.06; }
  .road h2 .soon { top: -.1em; margin-left: .25em; font-size: .75rem; padding: .3em .7em; }
  html.film-on .road.sideways .road-note { margin-top: .6rem; font-size: .95rem; }
  html.film-on .road.sideways ol { margin-top: 1.25rem; gap: .9rem; }
  html.film-on .road.sideways li { width: min(85vw, 26rem); padding: 1.3rem 1.2rem; font-size: .92rem; min-height: 13rem; }
  html.film-on .road.sideways li::before { font-size: 2.6rem; }
  html.film-on .road.sideways li b { font-size: 1.15rem; }
  /* the round social links: the drawing in the middle of its ring (the 44px rule had made them flex, left) */
  .foot-cols .foot-social a { display: grid; place-items: center; }
}
@media (max-width: 61.99rem) and (orientation: landscape) and (max-height: 30rem) {
  html.film-on .road.sideways h2 { font-size: 1.35rem; }
  html.film-on .road.sideways .road-note { display: none; }
  html.film-on .road.sideways ol { margin-top: .7rem; }
  html.film-on .road.sideways li { width: min(60vw, 24rem); min-height: 0; padding: .9rem 1rem; }
}
@media (max-width: 61.99rem) and (orientation: portrait) {
  /* 3) step 2 held upright: the files as a row of tabs over the code, and the code wrapped, each wrapped line
     indented under its own, so no line is cut at the card's edge */
  html.film-on .film.held .code { grid-template-columns: minmax(0, 1fr); }
  html.film-on .film.held .code-tree { flex-direction: row; flex-wrap: wrap; gap: .3em; padding: .55em; border-right: 0; border-bottom: 1px solid #3A3833; }
  html.film-on .film.held .code-tree span { padding: .15em .55em; border: 1px solid #3A3833; border-radius: .4em; }
  html.film-on .film.held .code-tree .in { padding-left: .55em; }
  html.film-on .film.held .code-lines { white-space: pre-wrap; padding: .6em .7em; }
  html.film-on .film.held .code-lines span { display: block; padding-left: 2ch; text-indent: -2ch; overflow-wrap: anywhere; }
  html.film-on .film.held .scr-field code, html.film-on .film.held .dash .scr-field code { white-space: normal; overflow-wrap: anywhere; }
  html.film-on .film.held .duel-row3 { white-space: normal; }
  /* step 4's table: the email column wider, a long address may break rather than run under the edge */
  html.film-on .film.held .grid.c3 { grid-template-columns: .9fr 2.3fr .7fr; }
  html.film-on .film.held .grid span { padding: .5em .55em; overflow-wrap: anywhere; min-width: 0; }
}
/* 4) The books on a phone held upright (the founder, 2026-10-26): turned a quarter. The spine runs across the
   middle, the left page of the spread on top and the right page under it, and a page turns upward from the
   spine (book.js). The pages under this spread show at the open edge (the bottom), the spine is shaded where
   the paper curves into it, a chapter opens with its number and an orange rule, the lower corner turns up
   (a tap on the lower page, or a swipe up, turns forward; on the upper page, or down, back), and a strip under
   the book shows how far through it is. Tablets upright keep one page; a phone on its side and a laptop keep
   the spread side by side. */
.bk-leaf.lower { left: 0; top: 50%; transform-origin: center top; }
.bk-leaf.upper { left: 0; top: 0; transform-origin: center bottom; }
.bk-leaf.lower > .bk-strip { top: 0; left: 0; transform-origin: center top; }
.bk-leaf.lower .bk-strip .bk-strip { top: 100%; left: 0; transform-origin: center top; }
.bk-leaf.upper > .bk-strip { top: auto; bottom: 0; left: 0; transform-origin: center bottom; }
.bk-leaf.upper .bk-strip .bk-strip { top: auto; bottom: 100%; left: 0; transform-origin: center bottom; }
.bk-leaf.upper .bk-face, .bk-leaf.lower .bk-face { left: 0; right: 0; top: 0; bottom: -1px; }
.bk-leaf.upper .bk-face.back, .bk-leaf.lower .bk-face.back { transform: rotateX(180deg); }
.bk-leaf.lower .bk-face.front .bk-shade, .bk-leaf.upper .bk-face.back .bk-shade { background: linear-gradient(180deg, rgba(40, 30, 15, var(--a1, 0)), rgba(40, 30, 15, var(--a2, 0))); }
.bk-leaf.upper .bk-face.front .bk-shade, .bk-leaf.lower .bk-face.back .bk-shade { background: linear-gradient(0deg, rgba(40, 30, 15, var(--a1, 0)), rgba(40, 30, 15, var(--a2, 0))); }
@media (max-width: 47.99rem) and (orientation: portrait) {
  /* One laptop page is one phone page, the same words (the founder): never split. A page fits its half of the
     screen by tightening, in this order: smaller headings (not under about 18px), tighter padding and lines
     (1.35), the chapter number beside the heading, the words down to 12px and never under. */
  /* A book in the hand, not a screen (the founder, 2026-10-27: "it fits the screen, no edges or corners, no
     book feel"). Paper shows all round it: the board's edge and its orange shadow on both sides, and above and
     below it with the counter under it, all in one screen. The shadow pokes 11px further right, so the book
     sits that much left of centre and the two margins look the same. */
  /* The smallest phones (320 wide; 640 and 667 tall) keep the room for the words first: the margins shrink there. */
  html .bk-shell:has(.bk.tall) { --bkw: calc(100vw - clamp(3.5rem, 100vw - 18rem, 4.5rem)); margin-left: calc(var(--bkw) / -2 - 6px); }
  /* Sized by the screen with the browser's bar showing: 100svh does not move when the bar slides, and the top bar, the book and the counter all fit in it (the founder, 2026-11-02). */
  .bk.tall { aspect-ratio: auto; width: 100%; height: min(calc(100vh - 11rem), calc(var(--bkw) * 2.1)); height: min(calc(100svh - 8.25rem), calc(var(--bkw) * 2.1)); }
  .bk-shell:has(.bk.tall) + .bk-where { margin-top: 1.4rem; }
  /* the book only: no "Read as one page" on a phone held upright (the founder, 2026-10-27) */
  .bk-tools { display: none; }   /* on every page: the toggle sits in a different place on each */
  .bk.tall::after { left: 3%; right: 3%; top: 32%; bottom: 32%; }
  .bk.tall .bk-slot.upper { left: 0; top: 0; width: 100%; height: 50%; }
  .bk.tall .bk-slot.lower { left: 0; top: 50%; width: 100%; height: 50%; border-radius: 0 0 .8rem .8rem;
    box-shadow: 1px 2px 0 -1px #E3DACB, 2px 3px 0 -1px var(--paper), 3px 5px 0 -1px #D8CDBB, 4px 6px 0 -1px var(--paper), 5px 8px 0 -1px #CFC3AF; }
  .bk.tall .bk-slot.upper .bk-page { border-radius: .8rem .8rem 0 0; background-image: linear-gradient(0deg, rgba(20, 20, 19, .16), rgba(20, 20, 19, .05) 6%, rgba(20, 20, 19, 0) 18%); }
  .bk.tall .bk-slot.lower .bk-page { border-radius: 0 0 .8rem .8rem; background-image: linear-gradient(180deg, rgba(20, 20, 19, .16), rgba(20, 20, 19, .05) 6%, rgba(20, 20, 19, 0) 18%); }
  .bk.tall .bk-slot.lower::after {
    content: ""; position: absolute; right: 0; bottom: 0; z-index: 3; width: 2.2rem; height: 2.2rem; pointer-events: none;
    border-top-left-radius: .9rem; border-bottom-right-radius: .8rem;
    background: linear-gradient(135deg, rgba(20, 20, 19, 0) 46%, rgba(20, 20, 19, .18) 50%, #E6DDCD 52%, var(--paper) 78%, #EFE7DA 100%);
    box-shadow: -2px -2px 5px rgba(20, 20, 19, .12);
  }
  .bk.tall .bk-page { padding: .7rem .85rem .45rem; line-height: 1.35; }
  .bk.tall .bk-kicker { padding-bottom: .3rem; border-bottom: 1px solid rgba(20, 20, 19, .14); }
  .bk.tall .bk-cover .bk-kicker { border-bottom-color: rgba(20, 20, 19, .3); }
  /* the chapter: its number large in orange beside the heading, an orange rule under the heading */
  .bk.tall .cmp-l .cmp-num { position: absolute; right: .85rem; top: 2.15rem; margin: 0; font-size: clamp(2rem, 11vw, 2.8rem); color: var(--orange); -webkit-text-stroke: 1.5px var(--ink); line-height: .85; }
  .bk.tall .cmp-l .cmp-job { padding-right: 3.4rem; }
  .bk.tall .cmp-l .bk-count { display: none; }   /* the big number says which job it is */
  .bk.tall .cmp-l .cmp-job, .bk.tall .bk-title { padding-bottom: .3rem; border-bottom: 4px solid var(--orange); }
  .bk.tall .cmp-job { margin-top: .45rem; font-size: clamp(1.12rem, 6vw, 1.6rem); line-height: 1.05; }
  .bk.tall .cmp-head { margin-top: .45rem; font-size: clamp(1.12rem, 5.6vw, 1.5rem); line-height: 1.05; padding-bottom: .3rem; }
  .bk.tall .cmp-words { margin-top: .45rem; gap: .35rem; }
  .bk.tall .cmp-text { font-size: clamp(.75rem, min(3.65vw, 1.87svh), .88rem); line-height: 1.35; }
  .bk.tall .cmp-key { gap: .35rem; }
  .bk.tall .cmp-key p { padding: .35rem .55rem; font-size: clamp(.75rem, min(3.65vw, 1.87svh), .85rem); gap: .1rem; }
  .bk.tall .cmp-ok { margin-top: auto; }
  .bk.tall .cmp-stamp { font-size: clamp(1.4rem, 8vw, 2.2rem); }
  .bk.tall .bk-title { margin-top: .5rem; font-size: clamp(1.12rem, 5.6vw, 1.45rem); line-height: 1.08; }
  .bk.tall .bk-says, .bk.tall .bk-cover-says { margin-top: .5rem; font-size: clamp(.75rem, min(3.65vw, 1.87svh), .9rem); line-height: 1.35; }
  .bk.tall .bk-soon { margin-top: .5rem; }
  .bk.tall .bk-cover-title, .bk.tall .cmp .bk-cover-title { font-size: clamp(1.4rem, 8.5vw, 2.2rem); }
  .bk.tall .bk-lois { width: clamp(3rem, 15vw, 4.4rem); }
  .bk.tall .bk-folio { padding-top: .15rem; }
}
@media (max-width: 22.5rem) and (orientation: portrait) {
  /* the smallest phones: the last few pixels, from the gaps and not from the words */
  .bk.tall .bk-page { padding: .6rem .75rem .35rem; }
  .bk.tall .cmp-head, .bk.tall .cmp-job { margin-top: .35rem; }
  .bk.tall .cmp-words { margin-top: .35rem; gap: .25rem; }
  .bk.tall .cmp-r .cmp-ok { margin-top: .2rem; }
  .bk.tall .bk-kicker { letter-spacing: .07em; }
}

/* ------------------------------------------------------------------ the hero, the founder's design (2026-10-27)
   Left: the headline with Lois drawn into the paper behind it (lines only, faded, filling the left side).
   Right: the four number cards now carry his four lines, word for word: the first half bold, "the way you…"
   marked, numbered 01-04 here (not in the words). */
.hero-lois { position: absolute; z-index: 0; pointer-events: none; left: calc(var(--pad) * .5 + 1rem); top: calc(var(--bar) + 1.5rem); bottom: 1.5rem;
  width: 52%; height: calc(100% - var(--bar) - 3rem); object-fit: contain; object-position: center; }
.hero-paper .hero-stats.hero-points { counter-reset: hp; max-width: none; gap: 1rem; }
.hero-stats.hero-points li { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .6rem; position: relative;
  min-height: min(15rem, 27vh); padding: 1.2rem 1.25rem 1.35rem; border-radius: 1.5rem; box-shadow: none; font-size: 1rem; counter-increment: hp; }
.hero-stats.hero-points li:hover { transform: none; box-shadow: none; }
.hero-stats.hero-points .st-a { box-shadow: 6px 6px 0 var(--ink); }
.hero-stats.hero-points .st-a:hover { box-shadow: 6px 6px 0 var(--ink); }
.hero-stats.hero-points .st-b, .hero-stats.hero-points .st-d { transform: translateY(1.6rem); }
.hero-stats.hero-points li::after { content: counter(hp, decimal-leading-zero); position: absolute; right: 1.2rem; top: 1.35rem; font: 700 .75rem/1 var(--mono); letter-spacing: .1em; opacity: .75; }
.hero-stats.hero-points .hp-ico { width: 2.6rem; height: 2.6rem; margin-bottom: .35rem; }
.hero-stats.hero-points .hp-ico svg { width: 1.3rem; height: 1.3rem; }
.hp-h { font-family: var(--display); font-weight: 900; font-stretch: 106%; font-size: min(clamp(1.25rem, .8rem + 1.1vw, 1.95rem), 3.6svh); line-height: .98; letter-spacing: -.02em; }
.hp-m { font-weight: 800; font-size: min(clamp(.85rem, .75rem + .3vw, 1.05rem), 2.2svh); line-height: 1.62; }
.hp-m span { padding: .1em .35em; border-radius: .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-stats.hero-points .st-a .hp-ico { background: var(--paper); }
.hero-stats.hero-points .st-a .hp-m span { background: var(--ink); color: var(--paper); }
.hero-stats.hero-points .st-b .hp-m span { background: var(--orange); color: var(--ink); }
.hero-stats.hero-points .st-c .hp-ico { border-color: var(--orange); }
.hero-stats.hero-points .st-c .hp-ico svg { stroke: var(--ink); }
.hero-stats.hero-points .st-c .hp-m span { background: #FEBC2E; color: var(--ink); }
.hero-stats.hero-points .st-d .hp-ico { background: var(--ink); }
.hero-stats.hero-points .st-d .hp-ico svg { stroke: var(--orange); }
.hero-stats.hero-points .st-d .hp-h { margin-top: auto; color: var(--rust); font-size: min(clamp(1.35rem, .85rem + 1.2vw, 2.1rem), 3.8svh); }
@media (max-width: 62rem) {
  .hero-lois { left: 50%; width: min(92vw, 30rem); top: calc(var(--bar) + .5rem); bottom: auto; height: auto; transform: translateX(-50%); }
  .hero-paper .hero-stats.hero-points { gap: .55rem; }
  .hero-stats.hero-points li { min-height: 0; padding: .75rem .8rem .85rem; gap: .35rem; border-radius: 1rem; }
  .hero-stats.hero-points .st-a { box-shadow: 3px 3px 0 var(--ink); }
  .hero-stats.hero-points .st-b, .hero-stats.hero-points .st-d { transform: none; }
  .hero-stats.hero-points li::after { right: .75rem; top: .85rem; font-size: .7rem; }
  .hero-stats.hero-points .hp-ico { width: 2rem; height: 2rem; margin-bottom: .1rem; }
  .hero-stats.hero-points .hp-ico svg { width: 1rem; height: 1rem; }
  .hp-h { font-size: min(1.05rem, 4.4vw); }
  .hp-m { font-size: .75rem; line-height: 1.55; }
  .hero-stats.hero-points .st-d .hp-h { font-size: min(1.15rem, 4.8vw); }
}

/* the cards come in with the hero's own reveal (hero.js); the old capsules' rise would hold them hidden */
/* a tablet upright: the cards get the room a tablet has, not the phone's sizes */
@media (min-width: 40rem) and (max-width: 62rem) {
  .hero-paper .hero-stats.hero-points { gap: 1rem; margin-top: 1rem; }
  .hero-stats.hero-points li { min-height: 13rem; padding: 1.1rem 1.2rem 1.3rem; gap: .55rem; border-radius: 1.4rem; }
  .hero-stats.hero-points .hp-ico { width: 2.6rem; height: 2.6rem; }
  .hero-stats.hero-points .hp-ico svg { width: 1.3rem; height: 1.3rem; }
  .hp-h { font-size: 1.7rem; }
  .hp-m { font-size: 1rem; }
  .hero-stats.hero-points .st-d .hp-h { font-size: 1.85rem; }
  .hero-lois { width: min(80vw, 34rem); }
}
/* 2026-10-27, the founder on his own screen: the outer line clearer; the headline to fill the left side;
   the lower cards were past the line on his laptop — the cards now take only the height there is. */
.hero-paper::before { border-color: rgba(20, 20, 19, .34); border-width: 2px; }
.hero-paper:has(.hero-lois) h1 { font-size: min(clamp(2.6rem, .2rem + 5.75vw, 8.4rem), 12svh); }
.hero-stats.hero-points li { min-height: min(15rem, 25svh); }
.hero-stats.hero-points .st-b, .hero-stats.hero-points .st-d { transform: translateY(min(1.6rem, 2.4svh)); }
/* the lowered column is moved by a transform, which takes no room: keep that room under the cards, and a little
   more, so the last card never runs past the paper's line or off the hero (the founder's phone, 2026-10-28) */
.hero-stats.hero-points { padding-bottom: calc(min(1.6rem, 2.4svh) + .5rem); }
.hp-h { font-size: min(clamp(1.2rem, .75rem + 1.05vw, 1.9rem), 3.3svh); }
.hp-m { font-size: min(clamp(.82rem, .72rem + .3vw, 1.02rem), 2.05svh); }
@media (max-width: 62rem) {
  /* taller letters on a phone: the narrow cut of the same face, set larger */
  .hero-paper:has(.hero-lois) h1 { font-stretch: 100%; font-size: min(13.4vw, 8svh); line-height: .9; }
}
/* the wide phones and folded foldables (448 to 640 wide): the headline grew with the width until the fourth card
   needed a scroll; it stops growing at 3.5rem so the whole hero fits the screen (the founder, 2026-10-28) */
@media (min-width: 28rem) and (max-width: 40rem) {
  .hero-paper:has(.hero-lois) h1 { font-size: min(13.4vw, 8svh, 3.5rem); }
}
/* the biggest screens: no cap below what fills the left side */
@media (min-width: 100rem) { .hero-paper:has(.hero-lois) h1 { font-size: min(5.75vw, 12svh); } }
/* short phones (667 tall and under): the headline gives way first, then the cards' padding */
@media (max-width: 62rem) and (max-height: 50rem) {
  .hero-paper:has(.hero-lois) h1 { font-size: min(13.4vw, 6.4svh); }
  .hero-paper .hero-stats.hero-points { gap: .45rem; }
  .hero-stats.hero-points li { padding: .55rem .65rem .65rem; gap: .25rem; }
  .hero-stats.hero-points .hp-ico { width: 1.7rem; height: 1.7rem; }
  .hero-stats.hero-points .hp-ico svg { width: .9rem; height: .9rem; }
  .hero-stats.hero-points li::after { top: .65rem; right: .6rem; }
  .hp-h { font-size: min(.98rem, 4.2vw); }
  .hp-m { font-size: .75rem; line-height: 1.45; }
  .hero-stats.hero-points .st-d .hp-h { font-size: min(1.05rem, 4.5vw); }
  .hero-words .actions .button { min-height: 2.6rem; }
}
/* the narrowest phones (360 and 320 wide): a little less of everything, words never under 12px */
@media (max-width: 23rem) {
  .hero-paper:has(.hero-lois) h1 { font-size: min(12.6vw, 5.9svh); margin-bottom: .45rem; }
  .hero-paper:has(.hero-lois) { gap: .7rem; }
  .hero-stats.hero-points li { padding: .5rem .55rem .6rem; gap: .2rem; }
  .hero-stats.hero-points .hp-ico { width: 1.55rem; height: 1.55rem; margin-bottom: 0; }
  .hp-h { font-size: min(.95rem, 4.4vw); }
  .hp-m { font-size: .75rem; line-height: 1.42; }
  .hero-stats.hero-points .st-d .hp-h { font-size: min(1rem, 4.6vw); }
}
@media (max-width: 21rem) and (max-height: 42rem) {
  .hero-paper:has(.hero-lois) h1 { font-size: min(12vw, 5.4svh); }
  .hero-words .actions .button { min-height: 2.75rem; font-size: .85rem; }
  .hero-words .actions .dot-arrow { width: 1.6rem; height: 1.6rem; }
  .hero-paper .hero-stats.hero-points { gap: .35rem; }
}
/* a phone on its side (375 tall): laid out like the laptop, the headline left and the cards right, small */
@media (max-width: 62rem) and (orientation: landscape) and (max-height: 30rem) {
  .hero-paper:has(.hero-lois) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-content: center; align-items: center; gap: .9rem; padding-top: calc(var(--bar) + .6rem); padding-bottom: 1.4rem; }
  .hero-paper:has(.hero-lois) h1 { font-stretch: 100%; font-size: min(6.4vw, 13svh); }
  .hero-lois { left: 1rem; width: 46%; top: calc(var(--bar) + .4rem); height: calc(100% - var(--bar) - 1.6rem); transform: none; }
  .hero-paper .hero-stats.hero-points { gap: .4rem; margin-top: 0; }
  .hero-stats.hero-points li { min-height: 0; padding: .45rem .55rem .5rem; gap: .15rem; border-radius: .8rem; }
  .hero-stats.hero-points .hp-ico { display: none; }
  .hero-stats.hero-points li::after { top: .45rem; right: .5rem; font-size: .62rem; }
  .hp-h { font-size: .9rem; padding-right: 1.4rem; }
  .hp-m { font-size: .75rem; line-height: 1.4; }
  .hero-stats.hero-points .st-d .hp-h { font-size: .95rem; margin-top: 0; }
}

/* ------------------------------------------------------------------ every phone, not one phone (2026-11-01)
   The founder looked on a 360 and it was right; on a phone a little bigger the hero's headline broke onto a
   fourth line, the cards went past the screen, and the words in the boxes stopped growing at 390 while the
   boxes went on growing to 640. So on a phone: the headline is always sized to keep its three lines, and the
   boxes and their words grow together with the width. Nothing here reaches 768 or wider. */
@media (max-width: 39.99rem) and (orientation: portrait) {
  /* "An autonomous" is 7.85 times its own letter size wide: never larger than that fits the screen */
  .hero-paper:has(.hero-lois) h1 { font-size: min(calc((100vw - 2rem) / 7.95), 8svh, 3.5rem); }
}
@media (max-width: 39.99rem) and (orientation: portrait) and (max-height: 50rem) {
  .hero-paper:has(.hero-lois) h1 { font-size: min(calc((100vw - 2rem) / 7.95), 6.4svh, 3.5rem); }
}
@media (max-width: 23rem) and (orientation: portrait) {
  .hero-paper:has(.hero-lois) h1 { font-size: min(calc((100vw - 2rem) / 7.95), 5.9svh); }
}
@media (max-width: 21rem) and (orientation: portrait) and (max-height: 42rem) {
  .hero-paper:has(.hero-lois) h1 { font-size: min(calc((100vw - 2rem) / 7.95), 5.4svh); }
}
@media (min-width: 23.01rem) and (max-width: 39.99rem) and (orientation: portrait) {
  /* the four cards: every number here is the 360's own size written as a share of the width */
  .hero-paper .hero-stats.hero-points { gap: clamp(.45rem, 2.44vw, .9rem); }
  .hero-stats.hero-points li { padding: clamp(.5rem, 2.2vw, 1rem) clamp(.55rem, 2.44vw, 1.1rem) clamp(.6rem, 2.67vw, 1.1rem); gap: clamp(.2rem, .9vw, .5rem); }
  .hero-stats.hero-points .hp-ico { width: clamp(1.55rem, 6.9vw, 2.5rem); height: clamp(1.55rem, 6.9vw, 2.5rem); margin-bottom: 0; }
  .hero-stats.hero-points .hp-ico svg { width: clamp(.9rem, 4vw, 1.3rem); height: clamp(.9rem, 4vw, 1.3rem); }
  .hero-stats.hero-points li::after { font-size: clamp(.62rem, 2.8vw, .8rem); }
  .hp-h { font-size: min(clamp(.95rem, 4.22vw, 1.6rem), 3.2svh); }
  .hero-stats.hero-points .st-d .hp-h { font-size: min(clamp(1rem, 4.44vw, 1.7rem), 3.4svh); }
  .hp-m { font-size: min(clamp(.75rem, 3.33vw, 1.05rem), 2.1svh); line-height: 1.42; }
}
@media (max-width: 39.99rem) and (orientation: portrait) and (max-height: 36rem), (min-width: 28rem) and (max-width: 39.99rem) and (orientation: portrait) and (max-height: 42rem) {
  /* the shortest screens (an old small phone with the browser's bars showing): the cards stand level, so the last one is on the screen */
  .hero-paper { padding-top: calc(var(--bar) + .25rem); padding-bottom: .5rem; }
  .hero-stats.hero-points .st-b, .hero-stats.hero-points .st-d { transform: none; }
  .hero-stats.hero-points { padding-bottom: .25rem; }
  .hero-words .actions .button { min-height: 2.5rem; }
}
@media (max-width: 47.99rem) {
  /* The same page at every phone width: headings, boxes and the words in them keep the share of the width they
     have on a 360, so the lines break in the same places and the boxes keep their shape. Each stops at a size
     that still reads as a phone (about 500 wide); past that a box only gets more room. */
  h2 { font-size: clamp(2.25rem, 10vw, 3.5rem); }
  .lois-top h2 { font-size: clamp(2rem, 8.9vw, 3.2rem); }
  .faq-top h2 { font-size: clamp(2.1rem, 9.33vw, 3.3rem); }
  .beta h2 { font-size: clamp(2.4rem, 10.67vw, 3.8rem); }
  .cmp-line { font-size: clamp(1.35rem, 6vw, 2.1rem); }
  .lead-on { font-size: clamp(2.6rem, 11.6vw, 4.2rem); }
  .plain h1 { font-size: clamp(2.6rem, 11.6vw, 4rem); }
  .plain h2:not(.bk-body h2) { font-size: clamp(1.6rem, 7.1vw, 2.2rem); }
  .lead { font-size: clamp(1.05rem, 4.67vw, 1.3rem); }
  .versus-head, .versus li { gap: clamp(.55rem, 2.44vw, .9rem); }
  .versus-head { font-size: clamp(.82rem, 3.64vw, 1.05rem); }
  .versus p { padding: clamp(.8rem, 3.55vw, 1.25rem) clamp(.75rem, 3.33vw, 1.2rem); font-size: clamp(.82rem, 3.64vw, 1.125rem); }
  .lois-does > div { padding: clamp(1.75rem, 7.8vw, 2.25rem); gap: clamp(1rem, 4.44vw, 1.3rem); }
  .lois-does h3 { font-size: clamp(1.5rem, 6.67vw, 2.1rem); }
  .lois-does p { font-size: clamp(1rem, 4.44vw, 1.2rem); }
  .lois-says, .lois-does .lois-says { font-size: clamp(.98rem, 4.36vw, 1.15rem); padding: clamp(1rem, 4.44vw, 1.3rem) clamp(1.15rem, 5.1vw, 1.45rem); }
  .bento { gap: clamp(.55rem, 2.44vw, .9rem); }
  .bento li { padding: clamp(1rem, 4.44vw, 1.5rem) clamp(.9rem, 4vw, 1.4rem); gap: clamp(.5rem, 2.2vw, .75rem); }
  .bento b { font-size: clamp(1.02rem, 4.53vw, 1.4rem); }
  .bento .scr-soft, .bento .tiny, .bento .tiny .pill, .bento .tiny .scr-btn { font-size: clamp(.82rem, 3.64vw, 1.125rem); }
  .faq-q summary { font-size: clamp(1.05rem, 4.67vw, 1.3rem); }
  .faq-q p { font-size: clamp(1rem, 4.44vw, 1.15rem); }
  html.film-on .road.sideways .road-note { font-size: clamp(.95rem, 4.22vw, 1.15rem); }
  html.film-on .road.sideways li { font-size: clamp(.92rem, 4.09vw, 1.15rem); padding: clamp(1.3rem, 5.8vw, 1.8rem) clamp(1.2rem, 5.33vw, 1.7rem); min-height: clamp(13rem, 57.8vw, 18rem); }
  html.film-on .road.sideways li::before { font-size: clamp(2.6rem, 11.6vw, 3.6rem); }
  html.film-on .road.sideways li b { font-size: clamp(1.15rem, 5.1vw, 1.5rem); }
}
@media (max-width: 47.99rem) and (orientation: portrait) {
  /* the walk-through held upright: the words above the card and the card itself scale the same way, as far as the height allows */
  html.film-on .film.held .fam-words > p { font-size: max(.82rem, min(3.64vw, 1.85svh)); }
  html.film-on .film.held .fam-show .scr, html.film-on .film.held .dash { font-size: clamp(12.8px, min(3.56vw, 1.64svh), 17px); }
  .bk.tall .cmp-text { font-size: clamp(.75rem, min(3.65vw, 1.87svh), .95rem); }
}
/* The counter's strip on every phone, not only the smallest (the founder saw it on one of his two phones, 2026-11-02). */
/* A page that still does not fit its half tightens by itself, whatever the phone or its settings (book.js). */
@media (max-width: 47.99rem) and (orientation: portrait) {
  .bk-where { display: grid; justify-items: center; gap: .55rem; margin-top: 1.1rem; }
  .bk-where::after {
    content: ""; width: min(13rem, 66%); height: 6px; border-radius: 6px; border: 1.5px solid var(--ink);
    background: linear-gradient(90deg, var(--orange) calc(var(--p, 0) * 100%), var(--paper) 0);
  }
  .bk.tall .bk-page.snug { padding-top: .45rem; padding-bottom: .2rem; line-height: 1.25; }
  .bk.tall .snug .cmp-head, .bk.tall .snug .cmp-job, .bk.tall .snug .bk-title { margin-top: .25rem; font-size: 1.12rem; line-height: 1.02; }
  .bk.tall .snug .cmp-words { margin-top: .25rem; gap: .2rem; }
  .bk.tall .snug .cmp-text, .bk.tall .snug .bk-says, .bk.tall .snug .bk-cover-says { margin-top: .25rem; font-size: .75rem; line-height: 1.25; }
  .bk.tall .snug .cmp-key p { padding: .2rem .45rem; font-size: .75rem; }
  .bk.tall .bk-page.snugger { padding-top: .3rem; padding-bottom: .1rem; }
  .bk.tall .snugger .cmp-text, .bk.tall .snugger .bk-says, .bk.tall .snugger .bk-cover-says { margin-top: .15rem; line-height: 1.16; }
  .bk.tall .snugger .cmp-words { margin-top: .15rem; gap: .1rem; }
  .bk.tall .snugger .bk-kicker { padding-bottom: .1rem; }
  .bk.tall .snugger .bk-folio { padding-top: 0; }
}
@media (max-width: 39.99rem) {
  /* the walk-through standing still (less motion asked for): a line of code wraps, as it does when held */
  .code-lines { white-space: pre-wrap; }
  .code-lines span { display: block; padding-left: 2ch; text-indent: -2ch; overflow-wrap: anywhere; }
  .scr-field code { white-space: normal; overflow-wrap: anywhere; }
  .duel-row3 { white-space: normal; }
  .film { --u: max(2.4vw, 11.5px); }
  .fam-show { --u: max(2.6vw, 12px); }
  /* and step 1 standing still: its two narrow halves let their lines wrap instead of running out of the box */
  .duel-card { grid-template-rows: auto minmax(8em, 1fr) auto auto; }
  .d-type { white-space: normal; }
  .duel-row3 { flex-wrap: wrap; }
  .duel-row4 { flex-wrap: wrap; row-gap: .3em; }
  .duel-half { grid-template-rows: auto auto; }
  .fam-show .scr.duel { grid-template-rows: auto auto; }
}
@media (max-width: 47.99rem) {
  /* Launching soon standing still: an odd last card takes the row, so no empty corner is left */
  .road ol li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html.film-on .road.sideways ol li:last-child:nth-child(odd) { grid-column: auto; }
}
/* step 9 has eight rows now (2026-11-04): a little closer on every phone held upright, by width only, because a height
   rule flips when the address bar slides. At 360 x 780 the last words ran past the card. */
@media (max-width: 47.99rem) and (orientation: portrait) {
  html.film-on .film.held .scan-rows { gap: .4em; }
  html.film-on .film.held .scan-rows li { padding: .45em .7em; }
}
/* the walk-through on a short screen (the browser's bars take a lot of a small phone): the card's words were
   cut at its bottom edge, so its rows close up, then the whole card draws a little smaller */
@media (max-width: 47.99rem) and (orientation: portrait) and (max-height: 46rem) {
  html.film-on .film.held .scan-rows { gap: .2em; }
  html.film-on .film.held .scan-rows li { padding: .2em .7em; }
  html.film-on .film.held .scan-said { gap: .2em; }
}
@media (max-width: 47.99rem) and (orientation: portrait) and (max-height: 42.5rem) {
  html.film-on .film.held .fam-show .scr, html.film-on .film.held .dash { font-size: clamp(11px, 2.05svh, 12.8px); }
  html.film-on .film.held .code-lines { padding: .35em .6em; }
  html.film-on .film.held .fam-show .scr { gap: .4em; padding: .7em; }
}
@media (max-width: 47.99rem) and (orientation: portrait) and (max-height: 36rem) {
  html.film-on .film.held .fam-words > p { display: none; }
  html.film-on .film.held .fam-words { min-height: 0; }
}
/* a phone on its side */
@media (max-width: 61.99rem) and (orientation: landscape) and (max-height: 30rem) {
  /* the first picture was cut off half way (the Lois column fell under the screen's bottom): three columns, as on the laptop */
  html.film-on .film.held .dash { grid-template-columns: 11em minmax(0, 1fr) 21em; font-size: min(100cqw / 78, 100cqh / 48); }
  html.film-on .film.held .dash-lois { grid-column: auto; border-top: 0; border-left: 1.5px solid var(--ink); }
  /* How was this page? was taller than the screen, its top and its close button out of reach: it scrolls inside itself now */
  .fb { max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
}
/* every link in the foot wide enough for a thumb (FAQ and Lois are short words) */
@media (max-width: 47.99rem), (max-width: 61.99rem) and (max-height: 30rem) {
  .foot-cols a { min-width: 44px; }
  .plain .actions a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------------------------------------ the guides (2026-11-04) */
/* A long question in the big heading would fill a phone's screen: a size of its own, and as wide as it likes. */
.plain.q-page h1 { font-size: clamp(2rem, 1.15rem + 3.6vw, 3.75rem); line-height: 1.02; letter-spacing: -.03em; max-width: min(22ch, 44rem); overflow-wrap: break-word; }
.q-page { font-size: 1.0625rem; line-height: 1.6; }
.q-page .lead { font-weight: 500; color: var(--ink); }
.q-page h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); letter-spacing: -.02em; line-height: 1.15; margin-top: clamp(2.25rem, 5vh, 3.25rem); margin-bottom: .75rem; text-wrap: balance; }
.q-page b { font-weight: 650; }
.plain.q-page > ul:not(.q-more) { margin-top: 1rem; }

.q-steps { list-style: none; counter-reset: q; display: grid; gap: .95rem; margin-top: 1.1rem; max-width: 44rem; }
.q-steps li { counter-increment: q; position: relative; padding-left: 3rem; min-height: 2.1rem; }
.q-steps li::before {
  content: counter(q); position: absolute; left: 0; top: -.05rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--orange); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: .95rem; line-height: 1;
}
.q-steps + p { margin-top: 1.25rem; }

.q-words { max-width: 44rem; border-top: 2px solid var(--ink); margin-top: 1rem; }
.q-words dt { font-family: var(--display); font-weight: 800; font-stretch: 108%; padding-top: .85rem; }
.q-words dd { padding-bottom: .85rem; border-bottom: 1.5px solid var(--hair); }

.q-cta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: center;
  margin-top: clamp(2.5rem, 6vh, 3.5rem); padding: clamp(1.25rem, 3vw, 2rem); max-width: 44rem;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 1.1rem; box-shadow: 5px 5px 0 var(--ink);
}
.q-lois { display: block; width: clamp(5.5rem, 16vw, 8.5rem); }
.q-cta-head { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); line-height: 1.15; letter-spacing: -.015em; }
.plain.q-page .q-cta p + p { margin-top: .4rem; }
.plain.q-page .q-cta .actions { margin-top: 1rem; }
@media (max-width: 26rem) {
  .q-cta { grid-template-columns: minmax(0, 1fr); }
  .q-lois { width: 5.5rem; }
}

.plain.q-page h2.q-more-head { margin-top: clamp(2.5rem, 6vh, 3.5rem); font-size: 1.15rem; }
.plain.q-page > ul.q-more { list-style: none; padding-left: 0; display: block; max-width: 44rem; border-top: 2px solid var(--ink); }
.q-page ul + p { margin-top: 1.1rem; }
.q-more li { border-bottom: 1.5px solid var(--hair); }
.q-more a { display: flex; align-items: center; min-height: 48px; padding: .55rem 0; }
.q-checked { margin-top: 1.5rem; font-size: .875rem; color: var(--muted); }

.q-crumb { font-family: var(--mono); font-size: .85rem; font-weight: 600; margin-bottom: .75rem; }
.q-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.q-crumb a::before { content: "\2190"; margin-right: .5rem; }
.plain.q-page .q-first { margin-top: 1.5rem; }
.q-shot { margin: 1.1rem 0 .4rem; max-width: 44rem; }
.q-shot a { display: block; }
.q-shot img { display: block; width: 100%; height: auto; border: 1.5px solid var(--hair); border-radius: .75rem; }
.q-page dd { color: var(--ink-2); }
@media (max-width: 40rem) {
  .q-steps .q-shot { margin-left: -3rem; }
}

/* The Guides page. No cards: rows between black lines, and the marker from the walk-through on its own heading. */
body.sub main.plain.gd { max-width: none; margin: 0; padding-bottom: clamp(3rem, 7vh, 5.5rem); }
.gd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; margin-bottom: clamp(2.25rem, 6vh, 3.5rem); }
.plain.gd h1 { font-stretch: 112%; font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.4rem); line-height: 1.02; letter-spacing: -.035em; max-width: 15ch; margin-bottom: 1.4rem; }
.gd-lois { display: block; flex: none; width: clamp(7rem, 13vw, 11.9rem); margin-bottom: .5rem; }
.gd-lois img { display: block; width: 100%; height: auto; transform: rotate(-5deg); }
/* The ink is drawn across when the page opens, as in the walk-through, and whole if less motion is asked for. */
.gd mark.mk { animation: gd-ink .85s cubic-bezier(.65, .05, .25, 1) .35s backwards; }
@keyframes gd-ink { from { background-size: 0% .52em, 0% .3em; } to { background-size: 100% .52em, 100% .3em; } }
@media (prefers-reduced-motion: reduce) { .gd mark.mk { animation: none; } }
.gd-rows { list-style: none; border-top: 2px solid var(--ink); }
.gd-rows li { border-bottom: 2px solid var(--ink); }
.gd-rows a { display: grid; grid-template-columns: 4.5rem minmax(0, 1.25fr) minmax(0, 1fr) 3.25rem; gap: 1.5rem; align-items: center; padding: 1.55rem .25rem; color: var(--ink); text-decoration: none; }
.gd-n { font-family: var(--mono); font-size: .85rem; font-weight: 600; letter-spacing: .12em; color: var(--rust); }
.gd-t { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: clamp(1.2rem, .95rem + .85vw, 1.7rem); line-height: 1.12; letter-spacing: -.02em; }
.gd-d { color: var(--ink-2); font-size: 1.02rem; line-height: 1.45; }
.gd-go { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 1.25rem; font-weight: 700; transition: box-shadow .25s var(--ease); }
.gd-rows a:hover .gd-go { box-shadow: 5px 5px 0 var(--ink); }
.gd-rows a:hover .gd-t { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .15em; }
.gd-band { background: var(--orange); padding: clamp(2.5rem, 7vh, 4.5rem) var(--pad); display: flex; justify-content: space-between; align-items: center; gap: 2rem 3rem; color: var(--ink); }
.gd-band h2 { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(2rem, 1.3rem + 2.8vw, 4rem); line-height: 1.03; letter-spacing: -.03em; margin-bottom: .7rem; max-width: 14ch; }
.gd-band p { font-size: clamp(1rem, .95rem + .2vw, 1.15rem); }
.gd-open { display: inline-flex; align-items: center; gap: .9rem; background: var(--ink); color: var(--cream); padding: .8rem 1rem .8rem 1.6rem; border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap; min-height: 3.5rem; flex: none; }
.gd-open span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cream); color: var(--ink); }
body.sub .gd-band + .foot { margin-top: 0; }
@media (max-width: 61.99rem) {
  .gd-rows a { grid-template-columns: 2.75rem minmax(0, 1fr) 3rem; gap: .85rem; padding: 1.1rem .1rem; min-height: 4.5rem; }
  .gd-d { display: none; }
  .gd-t { font-size: clamp(1.1rem, 1rem + .9vw, 1.35rem); line-height: 1.18; }
  .gd-go { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
}
@media (max-width: 40rem) {
  .gd-head { gap: 1rem; align-items: flex-start; }
  .gd-lois { width: 5rem; margin-top: 2.5rem; }
  .gd-band { flex-direction: column; align-items: flex-start; }
}
.q-words dd { margin: 0; }
.gd-head > div:first-child { min-width: 0; }
@media (max-width: 26rem) {
  .plain.gd h1 { font-size: 2.2rem; }
  .gd-lois { width: 3.75rem; margin-top: 2.25rem; }
}
.plain.q-page .q-first + p { margin-top: 1.6rem; }