/* spec-r11 B "The last stop" (docs/design/spec-r11.md, FROZEN 2026-11-05): the four pages (founders, security, privacy,
   terms), built from the sketch's b (proto/r11/r11.css). The site's tokens (index.html :root) and the ink footer's
   (rest.css :root), the same values, held equal by tests/pages.test.mjs; the footer's own styles are foot.css (rest.css's
   footer block, copied by docs/design/frames/pages.mjs). The words sit on plain paper in one column, 720 px at most (§6);
   the motion is the title's dots and the reading line (§4, §7), both script's: scripting off, the h1 is the title in
   type and the rail is empty. */
@font-face { font-family: Overpass; src: url('/assets/fonts/overpass-latin.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
:root {
  --paper: #F2F4F5; --blue: #0057A8; --ink: #1E2328; --grey: #666F77; --mute: #5D666E; --line: #DCE1E4; --card: #FFFFFF;
  --on-ink: #F2F4F5; --mute-on-ink: #9AA3AB; --link-on-ink: #8FBCEB; --blue-on-ink: #4F94DE;
  --pad: clamp(20px, 4.4vw, 64px); --font: Overpass, system-ui, sans-serif; --barh: 76px;
}
@media (max-width: 760px) { :root { --barh: 64px; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); overflow-x: clip; }
body { font-size: 17px; line-height: 1.6; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* the site's bar: the logo's lockup (36 px tall from 761, 28 px under), home; opaque, its hairline its own last row */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center;
  height: calc(var(--barh) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--pad) 0;
  background: var(--paper); box-shadow: inset 0 -1px 0 var(--line); }
.mark { display: block; line-height: 0; }
.mark img { display: block; height: 36px; width: auto; }
@media (max-width: 760px) { .mark img { height: 28px; } }
main { padding-top: calc(var(--barh) + env(safe-area-inset-top, 0px)); }

/* the head: the title in dots across the field (pages.js, a canvas behind it); the h1 is the text. Scripting off it is
   the title in Overpass 900, in the same room */
.dhead { position: relative; height: clamp(360px, 64vh, 660px); padding: 0 var(--pad); display: flex; align-items: flex-end; }
@media (max-width: 760px) { .dhead { height: clamp(280px, 46vh, 420px); } }
.dhead canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dhead h1 { margin: 0 0 18vh; font-size: clamp(48px, 9vw, 150px); line-height: .92; letter-spacing: -0.035em; font-weight: 900; text-wrap: balance; }
@media (max-width: 760px) { .dhead h1 { margin-bottom: 8vh; } }
.js .dhead h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* the reading line beside the words: the line's dotted rule, lit blue to the point being read, a stop at each section */
.dgrid { display: grid; grid-template-columns: minmax(64px, 1fr) minmax(0, 720px) minmax(0, 1fr); padding: 0 var(--pad); }
.rail { position: relative; }
.line { position: absolute; top: 0; bottom: 0; right: clamp(28px, 4vw, 64px); width: 2.3px; color: var(--grey);
  background: linear-gradient(currentColor 2.3px, transparent 2.3px) 0 0 / 2.3px 7px repeat-y; }
.line::after { content: ""; position: absolute; bottom: -6px; left: -5px; width: 12px; height: 12px; background: var(--ink); }
.lit { position: absolute; top: 0; left: 0; width: 2.3px; height: 0; color: var(--blue);
  background: linear-gradient(currentColor 2.3px, transparent 2.3px) 0 0 / 2.3px 7px repeat-y; }
.stop { position: absolute; left: -4px; width: 10.3px; height: 10.3px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--grey);
  transition: background .3s, box-shadow .3s; }
.stop.on { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
@media (max-width: 1023px) { .dgrid { grid-template-columns: 36px minmax(0, 1fr); } .line { right: auto; left: 2px; } }

/* the words (§6): body 17 px on 1.6, the lede 21 to 26 px 700, a section 900 30 to 48 px, a sub-section 800 19 px */
.dbody { max-width: 720px; padding-top: 24px; padding-bottom: 120px; }
.dbody p, .dbody li { text-wrap: pretty; }
.dbody p { margin: 0 0 18px; }
.dbody .lede { font-size: clamp(21px, 2vw, 26px); line-height: 1.4; font-weight: 700; margin-bottom: 36px; }
.dbody h2 { margin: 72px 0 20px; font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(30px, 3.4vw, 48px);
  text-wrap: balance; scroll-margin-top: calc(var(--barh) + 40px); }
.dbody h3 { margin: 40px 0 10px; font-size: 19px; line-height: 1.3; font-weight: 800; }
.dbody ul { margin: 0 0 22px; padding: 0; list-style: none; }
.dbody li { position: relative; margin: 0 0 10px; padding-left: 24px; }
.dbody li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--blue); }
/* the founders page's register line: a panel, white with an ink edge, its address 24 to 34 px 900 */
.dbody .cta { margin-top: 40px; padding: 28px 32px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 19px; }
.dbody .cta .mail { display: block; margin-top: 8px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; letter-spacing: -0.02em; overflow-wrap: anywhere; }
@media (max-width: 760px) { .dbody .cta { padding: 22px 20px; } }

/* the footer's link to the page you are on: the light blue, its dotted lead drawn (the sketch's) */
#foot nav a[aria-current="page"] { color: var(--link-on-ink); }
#foot nav a[aria-current="page"]::after { width: clamp(40px, 6vw, 96px); }

/* reduced motion and ?still: every move is held at its end (§7) */
.still *, .still *::before, .still *::after { transition: none !important; }