/* Lenora · the plain pages behind the story: book, about, privacy, credits.

   These do not load story.css. That file is 41 KB of scroll machinery and
   none of it runs here, so the tokens it defines are repeated rather than
   inherited. The values below are copied from story.css:20-60 and must stay
   identical to it: the four pages sit one tap from the story and a different
   cream reads as a different site.

   Same rules as the story. Every text colour is a solid value, never ink at
   an opacity. Nothing below 11px. No webfont request. No build step. */

:root {
  --cream: var(--sc-canvas);
  --paper: var(--sc-surface);
  --ink: var(--sc-ink);
  --narr: var(--sc-ink-soft);
  --label: var(--sc-ink-soft);
  --acid: var(--sc-accent);
  --hair: var(--paper-line-2);

  --serif: var(--sc-font-display);
  --sans: var(--sc-font-text);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 660px;
  margin: 0 auto;
  padding: 28px 20px 96px;
}

/* The wordmark doubles as the way back to the story. It is the only
   navigation these pages have, and on a phone it is the only thing above the
   fold that is not reading matter. */
.back {
  display: inline-block;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
}
.back:hover { text-decoration: underline; text-underline-offset: 4px; }
.back:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

h1 {
  /* 01/11/2026. Split from the shorthand so a static reader sees the size: the detector read this h1 as 17px (ratio 1.00) because it cannot parse clamp() inside `font`. Computed: 30px at 390, 48px at 1440. */
  font: 400 1em/1.08 var(--serif);
  font-size: clamp(30px, 7vw, 48px);
  letter-spacing: -0.015em;
  margin: 40px 0 0;
}

/* The floors matter more than the ceilings, because 390px is the viewport
   almost every reader arrives on and every clamp sits on its floor there.
   At the first draft h2 was 19px against 17px body: a ratio of 1.12, which is
   not a heading, it is bold-ish text. Desktop was fine at 1.35 and hid it.
   The floors now give 1.29 on a phone and 1.47 at 1440. */
h2 {
  font: 400 1em/1.25 var(--serif);
  font-size: clamp(22px, 3.6vw, 25px);
  margin: 44px 0 0;
}

.lede {
  font: 400 clamp(20px, 4.2vw, 23px)/1.45 var(--serif);
  color: var(--narr);
  margin: 18px 0 0;
}

p { color: var(--narr); margin: 14px 0 0; }

ul { color: var(--narr); margin: 14px 0 0; padding-left: 20px; }
li { margin: 7px 0 0; }

strong { color: var(--ink); font-weight: 600; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

hr {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 44px 0 0;
}

.label {
  font: 500 11px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0;
}

/* The one button. Same shape as the story's, so a reader who arrived from the
   end panel recognises it. 8px of padding is the floor for a bordered chip;
   this carries far more, because it is the only tap target on the page. */
.btn {
  display: inline-block;
  margin: 26px 0 0;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font: 500 15px/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
}
/* 01/11/2026. animate.md. Hover colour change was instant (0ms) on the button and the wordmark link. 300ms on the story's curve. The press state moves 1px, as on the story's buttons. */
.btn { transition: background 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.btn:active { transform: translateY(1px); background: var(--narr); }
.btn:hover { background: var(--narr); border-color: var(--narr); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.foot {
  margin: 56px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font: 400 13px/1.6 var(--sans);
  color: var(--label);
}
.foot a { color: var(--label); }
/* 02/11/2026. audit.md. The footer links measured 16px tall at 820 and 1440.
   The phone rule below only ran at 760 and under. These are a 44px target at
   every width now, and the negative margin keeps the footer line height. */
.foot a { display: inline-block; min-height: 44px; line-height: 44px; margin: -12px 0; }
/* 03/11/2026. The height was fixed last time and the width was not. "About"
   measured 36.7px wide, under the brief's 44px floor on its short side. */
.foot a { padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }

/* 01/11/2026. MINIMUMS 5.4. On a phone the wordmark link was 91x33, the
   in-text and footer links 18 to 23px tall (measured on about, book, privacy
   and credits at 390). Each is now a 44px or taller target; the negative
   margin keeps the line spacing where it was. */
@media (max-width: 760px) {
  .back { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  a:not(.btn):not(.back) { display: inline-block; padding: 12px 0; margin: -12px 0; }
  /* 03/11/2026. "About" measured 36.7x68 at 320 and at 390, under the brief's
     44px floor on its short side. The rule above resets the horizontal
     padding, and `.foot a` cannot override it: a:not(.btn):not(.back) scores
     two classes to .foot a's one, so it wins whatever the order. The :not here
     matches that score and the later position decides it. The negative margin
     puts the text back where it was, so nothing moves on screen. */
  .foot a:not(.btn) { padding: 12px 6px; margin: -12px -6px; }
}

/* 01/11/2026. MINIMUMS 9.5. Headings balance, body copy avoids an orphan. */
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* 01/11/2026. delight.md. Selected text and scrollbar take the story's palette. */
::selection { background: var(--acid); color: var(--ink); }
html { scrollbar-color: var(--label) var(--cream); }

/* 01/11/2026. overdrive.md. The same 500ms dissolve as the story, so the hop between the story and its pages does not cut. Opacity only, off with reduced motion. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 500ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }