/* Dark mode is DISABLED for now: every "(prefers-color-scheme: dark)" query below is suffixed with
   "and (min-width: 99999px)" so it never matches. Remove that suffix (here, in the HTML <source> tags and in
   tools/make-blog.py) to bring the night pages back. */
/* Roadbook '71 — roadbook71.com
   Paper, ink, rubber stamps and a typewriter. The palette and the type roles are
   the app's own (RoadLoop/UI/Theme.swift): "typed" for headings, distances and
   instructions, "hand" for the co-driver's margin notes, a printed serif for
   paragraphs. Night is not this inverted to grey — it is the same book under a
   map light. */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --paper:    #F3ECD9;
  --card:     #FBF6E8;
  --panel:    #F0E8D2;
  --ink:      #2B2620;
  --ink-dim:  #6B6152;
  --rule:     #C9BB98;
  --red:      #B3402F;
  --green:    #3E6B3A;
  --ochre:    #C9A15C;
  --on-stamp: #F6EFDD;

  --ground:         url("leather.jpg");
  --ground-paper:   url("paper.jpg");
  --ground-image:   var(--ground-paper);
  --ground-blend:   multiply;
  --ground-opacity: .34;
  --ground-size:    340px;
  --shadow:         rgb(43 38 32 / .20);
  --card-hairline:  rgb(43 38 32 / .06);

  --typed:  "Courier Prime", "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  --struck: "Special Elite", "Courier Prime", "Courier New", ui-monospace, monospace;
  --serif:  "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --wrap: 1120px;
  --gut:  clamp(1.15rem, 4vw, 2.75rem);
}

@media (prefers-color-scheme: dark) and (min-width: 99999px) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:    #121113;
    --card:     #25211C;
    --panel:    #1D1A16;
    --ink:      #EDE4D2;
    --ink-dim:  #A99C86;
    --rule:     #4A4238;
    --red:      #C9543F;
    --green:    #74A067;
    --ochre:    #C9A15C;
    --ground-image:   var(--ground);
    --ground-blend:   normal;
    --ground-opacity: .30;
    --ground-size:    460px;
    --shadow:         rgb(0 0 0 / .55);
    --card-hairline:  rgb(237 228 210 / .05);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:    #121113;
  --card:     #25211C;
  --panel:    #1D1A16;
  --ink:      #EDE4D2;
  --ink-dim:  #A99C86;
  --rule:     #4A4238;
  --red:      #C9543F;
  --green:    #74A067;
  --ochre:    #C9A15C;
  --ground-image:   var(--ground);
  --ground-blend:   normal;
  --ground-opacity: .30;
  --ground-size:    460px;
  --shadow:         rgb(0 0 0 / .55);
  --card-hairline:  rgb(237 228 210 / .05);
}

/* ---------------------------------------------------------------- ground */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.66;
  overflow-x: hidden;
}

/* The scan of real stock the app prints on, held still behind the page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--ground-image);
  background-size: var(--ground-size);
  background-repeat: repeat;
  opacity: var(--ground-opacity);
  mix-blend-mode: var(--ground-blend);
  pointer-events: none;
}
/* Night: the leather carries a hotspot of its own, knocked back so the printing
   still carries over it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, rgb(255 255 255 / .16), transparent 60%);
}
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
  :root:not([data-theme="light"]) body::after {
    background:
      radial-gradient(90% 55% at 50% 0%, rgb(201 161 92 / .10), transparent 70%),
      linear-gradient(180deg, rgb(0 0 0 / .45), rgb(0 0 0 / .22) 45%, rgb(0 0 0 / .5));
  }
}
:root[data-theme="dark"] body::after {
  background:
    radial-gradient(90% 55% at 50% 0%, rgb(201 161 92 / .10), transparent 70%),
    linear-gradient(180deg, rgb(0 0 0 / .45), rgb(0 0 0 / .22) 45%, rgb(0 0 0 / .5));
}

/* ---------------------------------------------------------------- basics */
a { color: var(--red); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2.5px solid var(--red);
  outline-offset: 3px;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--red); color: var(--on-stamp);
  font-family: var(--typed); padding: .6rem 1rem; z-index: 50;
}
.skip:focus { left: .5rem; top: .5rem; }

/* Typed roles ------------------------------------------------------------ */
h1, h2, h3, .typed, th { font-family: var(--typed); font-weight: 700; }
h1, h2, h3 { line-height: 1.14; margin: 0; letter-spacing: -.005em; }

.eyebrow {
  font-family: var(--typed);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}

/* The co-driver's hand: not a script face, but slanted, in ochre, it reads as
   written rather than printed — which is the only job it has. */
.hand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  color: var(--ochre);
  line-height: 1.42;
  display: inline-block;
  transform: rotate(-1.6deg);
}

/* The double rule a roadbook page is headed with. */
.rules { border-top: 1.6px solid var(--ink); padding-top: 2.6px; }
.rules::after { content: ""; display: block; border-top: .8px solid var(--ink); }

/* A card cut from fresher stock: ink border, and the hard offset shadow of
   something lying on a page. No grain — cards carry the reading. */
.sheet {
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
}

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1.6px solid var(--ink);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ground-image);
  background-size: var(--ground-size);
  background-attachment: fixed;
  opacity: var(--ground-opacity);
  mix-blend-mode: var(--ground-blend);
  pointer-events: none;
}
.nav-in {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .55rem var(--gut);
  display: flex;
  align-items: center;
  gap: 1rem clamp(.9rem, 2vw, 1.6rem);
  flex-wrap: wrap;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--struck);
  font-size: 1.02rem;
  letter-spacing: .1em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}
.wordmark img { width: 30px; height: 30px; }
.wordmark:hover { color: var(--red); }

.nav-links {
  display: flex;
  gap: clamp(.7rem, 1.8vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.nav-links a {
  font-family: var(--typed);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: .2rem 0;
  border-bottom: 1.5px solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current] { border-bottom-color: var(--red); color: var(--red); }

/* The stamped control: lettering printed onto a stamp-red block. */
.stamp-btn {
  font-family: var(--typed);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--on-stamp);
  border: 2px solid var(--red);
  padding: .42rem .85rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--shadow);
}
.stamp-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--on-stamp); }

/* ---------------------------------------------------------------- bands */
section[id], header[id] { scroll-margin-top: 4.5rem; }

.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band + .band { padding-top: 0; }

.head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.head-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .45rem;
}
.head h2 {
  font-size: clamp(1.15rem, .95rem + 1vw, 1.6rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.head-ref {
  font-family: var(--typed);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  text-align: right;
}
.lede {
  max-width: 62ch;
  margin: 1.4rem 0 0;
  font-size: 1.06em;
}
.prose p { max-width: 62ch; }
.prose p + p { margin-top: 1.05em; }

/* ---------------------------------------------------------------- hero */
.hero { padding-block: clamp(1.7rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }

/* The binding along the top edge of the page — a photograph of a real coil, with
   the stock beneath it eased into the colour of the card it binds, so the strip
   joins the page rather than sitting on top of it. Two exposures: the book on a
   desk, and the same book on leather under a map light. */
.coil {
  aspect-ratio: 1400 / 304;
  background: url("coil.jpg") center top / 100% 100% no-repeat;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
  :root:not([data-theme="light"]) .coil { background-image: url("coil-night.jpg"); }
}
:root[data-theme="dark"] .coil { background-image: url("coil-night.jpg"); }

.page { padding: clamp(.7rem, 1.8vw, 1.2rem) clamp(1.1rem, 3.2vw, 2.4rem) clamp(1.4rem, 3vw, 2rem); }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .6rem 1rem;
  flex-wrap: wrap;
  margin-bottom: .45rem;
}
.page-head .sheet-title {
  margin: 0;
  font-family: var(--struck);
  font-weight: 400;
  font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-head > p:not(.sheet-title) {
  margin: 0;
  font-family: var(--typed);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.thesis {
  font-family: var(--typed);
  font-weight: 700;
  font-size: clamp(1.55rem, 1rem + 2.9vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  max-width: 19ch;
  text-wrap: balance;
}
.thesis em { font-style: normal; color: var(--red); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: end;
  margin: 1.3rem 0 1.6rem;
}
.hero-grid > p { margin: 0; max-width: 56ch; }
.get {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
}
.get img { width: 168px; }
.get small {
  font-family: var(--typed);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.badge-link { display: inline-block; line-height: 0; }

/* ---------------------------------------------------------------- roadbook */
.rb {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(1.2rem, 3vw, 2.6rem);
  column-rule: 1px solid var(--rule);
}
.rb-row {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 4.6ch 46px minmax(0, 1fr) 22px;
  align-items: center;
  gap: .7rem;
  padding: .42rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.rb-km {
  font-family: var(--typed);
  font-weight: 700;
  font-size: .92rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: color .5s ease;
  line-height: 1.15;
}
/* The increment since the line above — the number a co-driver actually reads. */
.rb-km b {
  display: block;
  font-weight: 400;
  font-size: .74em;
  color: var(--ink-dim);
}

/* A box to tick as you pass. On paper you tick it; here the stamp lands on it. */
.rb-tick {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--rule);
  justify-self: end;
}
.rb-tulip {
  display: block;
  width: 46px;
  height: 46px;
  background: var(--panel);
  border: 1.5px solid var(--rule);
  padding: 3px;
}
.rb-note {
  font-family: var(--typed);
  font-size: .84rem;
  line-height: 1.32;
  color: var(--ink);
  padding-right: 3.6rem;
}

/* The rubber stamp: rotated, bordered, struck onto the entry as you read past it. */
.rb-stamp {
  position: absolute;
  right: -.15rem;
  top: 50%;
  font-family: var(--typed);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  border: 1.8px solid var(--red);
  padding: .1rem .3rem;
  opacity: 0;
  transform: translateY(-50%) rotate(-11deg) scale(1.75);
  transition: opacity .16s linear, transform .18s cubic-bezier(.2, 1.6, .5, 1);
  /* Eaten away where the pad did not take. */
  -webkit-mask-image: var(--ground-paper);
  mask-image: var(--ground-paper);
  -webkit-mask-size: 90px;
  mask-size: 90px;
  pointer-events: none;
}
.rb-row.is-driven .rb-stamp { opacity: .88; transform: translateY(-50%) rotate(-11deg) scale(1); }
.rb-row.is-driven .rb-km { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .rb-stamp { transition: none; }
  .rb-row.is-driven .rb-stamp { transform: translateY(-50%) rotate(-11deg); }
}

.rb-foot {
  display: grid;
  grid-template-columns: 4.6ch 46px minmax(0, 1fr) 22px;
  align-items: center;
  gap: .7rem;
  margin-top: .7rem;
  padding-top: .55rem;
}
.rb-foot .rb-km { color: var(--red); }
.rb-foot .rb-note { color: var(--ink-dim); padding-right: 0; }
.rb-mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
}
.rb-mark svg { width: 26px; height: 26px; }

.rb-margin {
  margin: 1.15rem 0 0;
  font-size: .95rem;
  max-width: 46ch;
}

/* tulip ink ------------------------------------------------------------- */
.tulip { display: block; width: 100%; height: 100%; }
.tulip-line { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.tulip-stub { fill: none; stroke: var(--ochre); stroke-linecap: round; }
/* The roads not taken, surveyed rather than guessed: same ink as the road you are
   on, thinner, dashed where the surface is not. */
.tulip-arm  { fill: none; stroke: var(--ink); stroke-linecap: butt; }

/* Where data comes from somebody else, said quietly and in the place it is used. */
.credit { color: var(--ink-dim); }
.mono   { font-family: var(--typed); font-size: .92em; white-space: nowrap; }
.tulip-dot  { fill: var(--ink); }


/* ---------------------------------------------------------------- particulars */
/* A roadbook opens with a block of particulars — distance, crew, class — before
   the first instruction. This is that block: the one-sentence answer to "what is
   this", and the six facts anyone asking about the app actually wants. */
.facts {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.4rem, 4vw, 3.2rem);
  align-items: start;
}
.definition { margin: 0; max-width: 52ch; font-size: 1.06em; }
.definition strong { font-weight: 600; }

.particulars { margin: 0; }
.particulars > div {
  display: grid;
  grid-template-columns: 8.6rem minmax(0, 1fr);
  gap: .5rem 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
}
.particulars > div:first-child { border-top: 1.6px solid var(--ink); }
.particulars dt {
  font-family: var(--typed);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-top: .18em;
}
.particulars dd {
  margin: 0;
  font-family: var(--typed);
  font-size: .86rem;
  line-height: 1.45;
  color: var(--ink);
}

/* Present to a screen reader and to a crawler, absent from the page. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------------------------------------------------------------- the real thing */
/* Screenshots are the product; illustrations are not allowed to stand in for
   them. Both get a piece of hardware around them so they read as a photograph of
   something that exists rather than as artwork. */
.device {
  border: 3px solid var(--ink);
  border-radius: 30px;
  padding: 5px;
  background: var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  display: inline-block;
  line-height: 0;
  max-width: 280px;
}
.device img, .device picture { border-radius: 24px; display: block; width: 100%; }
.device-fig { margin: 0; }
.device-fig figcaption,
.shotnote {
  font-family: var(--typed);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-dim);
  margin: .8rem 0 0;
  max-width: 46ch;
}

/* A head unit: a dark fascia with the screen recessed into it. */
.headunit { margin: 0; }
.headunit img {
  width: 100%;
  border: 9px solid #16181b;
  border-bottom-width: 16px;
  border-radius: 9px;
  background: #16181b;
  box-shadow: 6px 6px 0 var(--shadow), inset 0 0 0 1px rgb(255 255 255 / .06);
}
.headunit figcaption {
  font-family: var(--typed);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-dim);
  margin-top: .8rem;
}
.headunit figcaption b { color: var(--ink); font-weight: 700; }

.cars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  align-items: start;
}
/* The capture behind this one was taken before a distance-formatting fix landed
   in the car's estimates row. Cropping the row is a display crop of a real
   screenshot, not a retouch; it comes off when the re-capture arrives. */
.shotnote { max-width: 68ch; margin-top: 1.4rem; }
.carplay-notes { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------------------------------------------------------------- figures */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
}
.split.flip { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

.shot { max-width: 280px; }
.shot img { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--shadow); background: var(--card); }
.shot figcaption {
  font-family: var(--typed);
  font-size: .74rem;
  line-height: 1.4;
  color: var(--ink-dim);
  margin-top: .7rem;
}

/* How it works: a genuine sequence, so it is numbered. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3.5vw, 2.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps > li { counter-increment: step; display: flex; flex-direction: column; }
.steps > li p { flex: 1; }
.steps h3 {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: 1rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.steps h3::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--typed);
  font-size: .82rem;
  color: var(--on-stamp);
  background: var(--red);
  padding: .1rem .38rem;
  letter-spacing: .06em;
}
.steps p { margin: 0 0 1.1rem; font-size: .97rem; }
.steps img { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--shadow); }

/* Tulip gallery */
.tulips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1rem, 2.6vw, 1.8rem);
  margin: 0;
}
.tulip-card { margin: 0; }
.tulip-card .tulip {
  height: auto;
  aspect-ratio: 1;
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  padding: 8px;
}
.tulip-card figcaption {
  font-family: var(--typed);
  font-size: .74rem;
  line-height: 1.4;
  color: var(--ink-dim);
  margin-top: .6rem;
  min-height: 2.8em;
}
.tulip-card b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The loop diagram */
.loopfig { margin: 0; }
.loopfig svg { width: 100%; height: auto; display: block; }
.loop-track { fill: none; stroke: var(--ochre); stroke-width: 3; stroke-linecap: round; }
.loop-route { fill: none; stroke: var(--ink); stroke-width: 5.5; stroke-linecap: round; }
.loop-done  { fill: none; stroke: var(--green); stroke-width: 5.5; stroke-linecap: round; }
.loop-label { font-family: var(--typed); font-size: 11px; fill: var(--ink-dim); letter-spacing: .1em; }
.loop-label.on-ink { fill: var(--ink); font-weight: 700; }

/* Day / night pair */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  max-width: 620px;
}
.pair figure { margin: 0; }
.pair img { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--shadow); }
.pair figcaption {
  font-family: var(--typed);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: .6rem;
}

/* The car screen, drawn */
.car { margin: 0; }
.split.wide-figure { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.car svg { width: 100%; height: auto; display: block; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--shadow); }
.car figcaption {
  font-family: var(--typed);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-dim);
  margin-top: .7rem;
  max-width: 52ch;
}
.car-panel { fill: var(--card); }
.car-map   { fill: var(--panel); }
.car-rule  { fill: none; stroke: var(--ink); stroke-width: 2; }
.car-hair  { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.car-text  { font-family: var(--typed); fill: var(--ink); }
.car-dim   { font-family: var(--typed); fill: var(--ink-dim); }

/* Requirements */
.reqs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.reqs li { border-top: 1.6px solid var(--ink); padding-top: .7rem; }
.reqs h3 {
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.reqs p { margin: 0; font-size: .96rem; }

/* Privacy block */
.quiet {
  padding: clamp(1.3rem, 3vw, 2.1rem) clamp(1.2rem, 3vw, 2.2rem);
}
.quiet ul {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .55rem 1.6rem;
}
.quiet li {
  font-family: var(--typed);
  font-size: .86rem;
  padding-left: 1.5rem;
  position: relative;
}
.quiet li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--red);
}

/* Closing block with the badge illustration */
.closing {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}
.closing img { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--shadow); }

/* ---------------------------------------------------------------- footer */
.foot {
  border-top: 1.6px solid var(--ink);
  padding-block: 1.6rem 2.6rem;
  font-family: var(--typed);
  font-size: .78rem;
  color: var(--ink-dim);
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  align-items: baseline;
  justify-content: space-between;
}
.foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0; padding: 0; }
.foot a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot a:hover { color: var(--red); border-bottom-color: var(--red); }

/* ---------------------------------------------------------------- article pages */
/* A document page is set in one measure, centred, rather than left-aligned in a
   layout grid it does not use. */
.doc-wrap { max-width: 800px; }
.doc { max-width: 68ch; }
.doc h1 {
  font-family: var(--struck);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.doc .stand {
  font-family: var(--typed);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: .8rem 0 0;
}
.doc h2 {
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 2.6rem 0 .8rem;
  padding-top: .5rem;
  border-top: 1.6px solid var(--ink);
}
.doc h3 {
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: none;
  margin: 1.8rem 0 .35rem;
}
.doc p, .doc li { max-width: 66ch; }
.doc p { margin: 0 0 1em; }
.doc ol, .doc ul { padding-left: 1.3rem; margin: 0 0 1em; }
.doc li { margin-bottom: .5em; }
.doc ol { counter-reset: none; }
.doc .note {
  font-family: var(--typed);
  font-size: .88rem;
  border-left: 3px solid var(--ochre);
  padding: .1rem 0 .1rem 1rem;
  color: var(--ink-dim);
  margin: 1.4rem 0;
}
.doc strong { font-weight: 600; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .split, .split.flip, .facts { grid-template-columns: minmax(0, 1fr); }
  .cars { grid-template-columns: minmax(0, 1fr); }
  .printed { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 180px); gap: 1.2rem 1.6rem; align-items: start; }
  .steps h3 { grid-column: 1 / -1; }
  .closing { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .closing img { max-width: 180px; }
}

@media (max-width: 720px) {
  .rb { columns: 1; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .thesis { max-width: none; }
}

@media (max-width: 560px) {
  /* Wrapped over three lines the bar is a tenth of a phone screen, so it stops
     following the reader down the page. The footer repeats every link. */
  .nav { position: static; }
  section[id], header[id] { scroll-margin-top: 1rem; }
  .nav-in { padding-block: .5rem; row-gap: .5rem; }
  .wordmark { font-size: .95rem; }
  .nav-links { order: 3; width: 100%; gap: .45rem .9rem; }
  .nav-links a { font-size: .72rem; }
  .steps > li { grid-template-columns: minmax(0, 1fr); }
  .steps img { max-width: 220px; }
  .rb-row { grid-template-columns: 4.6ch 42px minmax(0, 1fr) 20px; gap: .5rem; }
  .rb-tulip, .rb-mark { width: 42px; height: 42px; }
  .rb-note { font-size: .78rem; padding-right: 3.4rem; }
  .rb-foot { grid-template-columns: 4.6ch 42px minmax(0, 1fr) 20px; gap: .5rem; }
  .pair { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
  .head-top { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .particulars > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .head-ref { text-align: left; }
}

@media print {
  .nav, .rb-stamp { display: none; }
  body::before, body::after { display: none; }
}

/* ---------------------------------------------------------------- the notebook */
/* Blog pages. A post is a page torn out of the same book: the plate at the top,
   the date and the byline in the particulars line, one instruction to a line. */

.post-head { margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
.post-head .rules { margin-top: .5rem; }
.post-kicker {
  font-family: var(--typed);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 .9rem;
}
.post-head h1 {
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 22ch;
}
.standfirst {
  margin: 1rem 0 0;
  font-size: 1.14em;
  line-height: 1.55;
  max-width: 56ch;
  color: var(--ink);
}
.byline {
  margin: 1.1rem 0 0;
  font-family: var(--typed);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* The plate: an illustration printed onto the page, ruled like a figure. */
.plate { margin: 0 0 clamp(1.8rem, 4vw, 2.8rem); }
.plate img {
  width: 100%;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  background: var(--card);
}
.plate figcaption {
  font-family: var(--typed);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: .7rem;
}

.post-body { max-width: 68ch; }
.post-body h2 {
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 2.8rem 0 .9rem;
  padding-top: .55rem;
  border-top: 1.6px solid var(--ink);
}
.post-body h3 {
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  margin: 1.9rem 0 .4rem;
}
.post-body p { margin: 0 0 1.05em; }
.post-body ul, .post-body ol { margin: 0 0 1.2em; padding-left: 1.35rem; }
.post-body li { margin-bottom: .55em; }
.post-body strong { font-weight: 600; }
.post-body code {
  font-family: var(--typed);
  font-size: .88em;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: .08em .32em;
}

/* The one note in the co-driver's hand. */
.margin-note {
  margin: clamp(2rem, 4vw, 2.8rem) 0;
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 3px solid var(--ochre);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.45;
  color: var(--ochre);
  max-width: 34ch;
  transform: rotate(-.7deg);
}

/* Where to go next. */
.related { margin-top: clamp(3rem, 6vw, 4.5rem); }
.related h2 {
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: .8rem;
}
.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem 2rem;
}
.related li { border-top: 1.6px solid var(--ink); padding-top: .7rem; }
.related a {
  font-family: var(--typed);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  display: block;
}
.related a:hover { color: var(--red); }
.related p { margin: .35rem 0 0; font-size: .92rem; color: var(--ink-dim); }

/* The index: the notebook's own contents page, set as roadbook entries. */
.entries { list-style: none; margin: 0; padding: 0; }
.entry {
  display: grid;
  grid-template-columns: 7.4rem minmax(0, 1fr) minmax(0, 170px);
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  border-bottom: 1px solid var(--rule);
}
.entry:first-child { border-top: 1.6px solid var(--ink); }
.entry-date {
  font-family: var(--typed);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-top: .3rem;
  font-variant-numeric: tabular-nums;
}
.entry h2 { font-size: 1.08rem; line-height: 1.3; margin: 0 0 .4rem; letter-spacing: 0; }
.entry h2 a { color: var(--ink); text-decoration: none; }
.entry h2 a:hover { color: var(--red); }
.entry p { margin: 0; font-size: .98rem; color: var(--ink-dim); max-width: 58ch; }
.entry img {
  width: 100%;
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
}

@media (max-width: 760px) {
  .entry { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .entry-date { padding-top: 0; }
  .entry .entry-thumb { order: -1; max-width: 260px; }
  .margin-note { max-width: none; }
}

/* ---------------------------------------------------------------- the drive */
/* One big atmospheric plate per section, never five small ones. These are
   printed in the same three inks as everything else, and they are always
   illustrations — never standing in for a screenshot of the product. */
.mood {
  margin: 0;
  padding-block: clamp(1.4rem, 3vw, 2.4rem) 0;
}
.mood img {
  width: 100%;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  background: var(--card);
}
.mood figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  color: var(--ochre);
  font-size: clamp(.98rem, .92rem + .3vw, 1.15rem);
  line-height: 1.45;
  margin-top: .9rem;
  max-width: 46ch;
  transform: rotate(-.6deg);
}
/* A section opener: the plate carries the mood, the prose sits under it. */
.mood-wide { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.mood-side img { box-shadow: 5px 5px 0 var(--shadow); }

/* ---------------------------------------------------------------- printed */
.printed {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
}
.printed-pair {
  display: flex;
  align-items: flex-end;
  gap: clamp(.8rem, 2.5vw, 2rem);
}
/* The sheet lies on the page at the angle a sheet lies at. */
.printed-sheet {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  transform: rotate(-2.2deg);
  transform-origin: 60% 100%;
}
.printed-sheet img {
  width: 100%;
  border: 1.5px solid var(--rule);
  box-shadow: 7px 9px 18px rgb(43 38 32 / .28);
  background: #fff;
}
.printed-phone { flex: 0 0 clamp(96px, 20%, 150px); transform: rotate(1.4deg); }

/* A stamp that carries a sentence rather than two words has to be allowed to
   wrap; only the bar's own control stays on one line. */
.stamp-btn.wide {
  white-space: normal;
  display: inline-block;
  max-width: 100%;
  line-height: 1.45;
}
.printed-phone .device { max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .printed-sheet, .printed-phone { transform: none; }
}

/* ---------------------------------------------------------------- beta stamp */
.beta-link {
  display: inline-flex; align-items: center; gap: .7rem; margin-top: .9rem;
  font-family: var(--typed); font-size: .8rem; letter-spacing: .04em; color: var(--ink);
  text-decoration: none; max-width: 30ch; line-height: 1.4;
}
.beta-link b { color: var(--red); text-decoration: underline; text-underline-offset: .18em; }
.beta-link:hover b { color: var(--ink); }
.beta-stamp {
  flex: 0 0 auto; font-weight: 700; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--red); border: 2px solid var(--red); border-radius: 3px; padding: .2rem .4rem .16rem .6rem;
  transform: rotate(-8deg); opacity: .9; box-shadow: inset 0 0 0 1px var(--card, transparent);
}