/* ============================================================================
   Document pages — privacy, terms, product, embed, 404.

   Loaded AFTER auteur.css, which owns the tokens. Nothing here redefines a
   colour, a font or an easing: this file is layout for pages made mostly of
   words, and every value it uses comes from :root next door.

   These pages ship with NO JavaScript. No GSAP, no Lenis, no canvas. A privacy
   policy that needs 130KB of scroll library to be read is an insult to the
   thing it is trying to say, and the reveal animations on the landing exist to
   direct a film that these pages are not.
   ========================================================================= */

/* ── Page head ────────────────────────────────────────────────────────── */
.phead{ padding-block:clamp(3rem,7vw,6rem) clamp(2rem,4vw,3.5rem) }
.phead h1{
  font-size:clamp(2.4rem,6vw,4.4rem);
  line-height:.96;max-width:18ch;
}
.phead .lede{ margin-top:1.5rem;max-width:60ch }
.phead__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin-top:2rem;
  padding-top:1.15rem;border-top:1.5px solid var(--ink);
}

/* ── The two-column document ──────────────────────────────────────────── */
.doc{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  padding-bottom:clamp(3rem,7vw,6rem);
}
.doc__nav{ grid-column:1 / span 3;position:sticky;top:1.75rem;align-self:start }
.doc__body{ grid-column:5 / span 8;min-width:0 }
@media (max-width:980px){
  .doc{ grid-template-columns:1fr }
  .doc__nav{ position:static;padding-bottom:1.5rem;border-bottom:1.5px solid var(--ink) }
  .doc__body{ grid-column:1 / -1 }
}
.doc__nav ol{ list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.45rem;counter-reset:s }
.doc__nav a{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 104;
  font-size:.875rem;text-decoration:none;color:var(--ink-soft);
  display:block;padding-left:1.6rem;position:relative;line-height:1.35;
  transition:color 140ms var(--ease-out-quart);
}
.doc__nav li{ counter-increment:s }
.doc__nav a::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-size:.625rem;letter-spacing:.1em;color:var(--ink-soft);opacity:.65;
}
.doc__nav a:hover{ color:var(--ink) }

/* Section opening: a hairline rule above the heading. Pattern (b) from
   design/DESIGN.md, which is the one that suits a document. */
.doc__body section{ padding-top:clamp(2rem,3.5vw,3rem) }
.doc__body section + section{ margin-top:clamp(1rem,2vw,1.75rem) }
.doc__body h2{
  font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.05;
  border-top:1.5px solid var(--ink);padding-top:1.1rem;
}
.doc__body h3{
  margin-top:2rem;font-size:clamp(1rem,1.4vw,1.15rem);
}
.doc__body p{ margin-top:1rem;max-width:72ch;line-height:1.62 }
.doc__body p:first-of-type{ margin-top:1.15rem }
.doc__body strong{ font-weight:600 }
.doc__body a{ text-underline-offset:3px }
.doc__body ul{ margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.65rem;max-width:72ch }
.doc__body li{ padding-left:1.2rem;position:relative;line-height:1.55 }
.doc__body li::before{
  content:"";position:absolute;left:0;top:.68em;width:.62rem;height:1.5px;background:var(--ink);
}
.doc__body dl{ margin:1.15rem 0 0;max-width:72ch;display:grid;gap:.1rem }
.doc__body dl > div{
  display:grid;grid-template-columns:11rem 1fr;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.doc__body dt{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 100;
  font-weight:600;font-size:.8125rem;
}
.doc__body dd{ margin:0;font-size:.9375rem;line-height:1.5;color:var(--ink-soft) }
@media (max-width:560px){
  .doc__body dl > div{ grid-template-columns:1fr;gap:.15rem }
}

/* ── A note the reader must not skim past ─────────────────────────────── */
.note{
  margin-top:1.6rem;padding:1.1rem 1.25rem;
  background:var(--brand);border:1.5px solid var(--ink);max-width:72ch;
}
.note p{ margin-top:0;color:var(--ink) }
.note p + p{ margin-top:.8rem }
.note--quiet{ background:var(--paper-sunk) }

/* ── Code ─────────────────────────────────────────────────────────────────
   The one place a monospace face is allowed, and it is a system stack rather
   than a downloaded font: code has to align, and nothing else on these pages
   asks for a third family. See design/DESIGN.md, Typography. */
:root{ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace }
.doc__body pre{
  margin:1.25rem 0 0;padding:1.1rem 1.25rem;overflow-x:auto;
  background:var(--paper-sunk);border:1.5px solid var(--ink);
  font-family:var(--mono);font-size:.8125rem;line-height:1.65;
  -webkit-overflow-scrolling:touch;
}
.doc__body pre code{ font:inherit;color:inherit }
.doc__body :not(pre) > code{
  font-family:var(--mono);font-size:.86em;
  background:var(--paper-sunk);border:1px solid var(--rule);
  padding:.08em .32em;
}
.doc__body table{
  width:100%;border-collapse:collapse;margin-top:1.25rem;
  font-feature-settings:"tnum" 1;
}
.doc__body th,.doc__body td{
  text-align:left;padding:.65rem .8rem .65rem 0;
  border-bottom:1px solid var(--rule);vertical-align:baseline;
}
.doc__body th{ font-weight:600;border-bottom-color:var(--rule-mid);white-space:nowrap }
.doc__body td{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 104;
  font-size:.875rem;line-height:1.4;
}
.doc__body td code{ font-size:.9em }
.doc__scroll{ overflow-x:auto;overscroll-behavior-x:contain }
@media (max-width:700px){ .doc__scroll table{ min-width:34rem } }

/* Product tables reuse .sheet from auteur.css rather than restating it. Only
   the caption needs nudging, because there it sits above a two-column band. */
.surface__show .sheet caption{ padding-bottom:.65rem }

/* ── Product page: one surface per band ───────────────────────────────── */
.surface{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  padding-block:clamp(2.5rem,5vw,4.5rem);
  border-top:1.5px solid var(--ink);
}
/* Both halves are pinned to row 1. On the even bands the prose is written
   first but sits in the right-hand columns, which puts `.surface__show` at a
   column *behind* the auto-placement cursor — and sparse flow never walks the
   cursor backwards, so it opened a second row and dropped the table under the
   prose with half a band of white above it. It looked like generous spacing
   and was six broken layouts. */
.surface__say{ grid-column:1 / span 5;grid-row:1 }
.surface__show{ grid-column:7 / -1;grid-row:1;min-width:0 }
.surface:nth-child(even) .surface__say{ grid-column:8 / -1 }
.surface:nth-child(even) .surface__show{ grid-column:1 / span 6 }
@media (max-width:980px){
  .surface__say,.surface__show,
  .surface:nth-child(even) .surface__say,
  .surface:nth-child(even) .surface__show{ grid-column:1 / -1;grid-row:auto }
  .surface__show{ margin-top:1.75rem }
}
.surface h2{ font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.02 }
.surface p{ margin-top:1rem;max-width:46ch;line-height:1.6;color:var(--ink-soft) }
.surface p strong{ color:var(--ink);font-weight:600 }
.surface__k{
  margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--rule);
  display:grid;gap:.5rem;
}
.surface__k span{ font-size:.9375rem;color:var(--ink-soft);padding-left:1.2rem;position:relative }
.surface__k span::before{
  content:"";position:absolute;left:0;top:.68em;width:.62rem;height:1.5px;background:var(--ink);
}
.surface__k b{ color:var(--ink);font-weight:600 }

/* ── Three drawn artifacts for .surface__show ─────────────────────────────
   Ten surfaces each showing one table taught the reader that the right-hand
   column is always a table, which is the same failure the aside diagram had
   on the landing: a picture that never changes stops being read. These three
   are the surfaces whose subject is an *object* rather than a set of rows.
   All three are ink, hairlines and square corners; none is decoration, and
   each one carries a fact the prose beside it would otherwise have to spend
   a sentence on. ==================================================== */

/* (1) The ticket. The page's whole metaphor is a printed ticket, and this is
   the one place the object is actually drawn: an order code, a perforation,
   and one numbered line per ticket, because a line with quantity four IS
   four tickets and each of them carries its own code and its own seat. */
.ticket{
  background:var(--paper);border:1.5px solid var(--ink);
  color:var(--ink);
}
.ticket__head{ padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.4vw,1.6rem) clamp(1rem,2vw,1.35rem) }
.ticket__code{
  margin-top:.5rem;
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 110;
  font-weight:700;font-size:clamp(1.9rem,4.4vw,3rem);line-height:.92;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.ticket__meta{ margin-top:.7rem;font-size:.9375rem;line-height:1.45;color:var(--ink-soft) }
/* the perforation, horizontal: the same die-cut language as the section
   joins and the stub's spine, turned through ninety degrees */
.ticket__perf{
  border-top:1.5px dashed var(--rule-hard);position:relative;height:0;
}
.ticket__perf::before,.ticket__perf::after{
  content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;
  background:var(--paper-sunk);border:1.5px dashed var(--rule-hard);
}
.ticket__perf::before{ left:-12px;clip-path:inset(0 0 0 50%) }
.ticket__perf::after{ right:-12px;clip-path:inset(0 50% 0 0) }
.ticket__list{ list-style:none;margin:0;padding:0 }
.ticket__list li{
  display:grid;grid-template-columns:1.6rem minmax(0,1fr) 2.6rem auto;
  gap:.75rem;align-items:baseline;
  padding:.72rem clamp(1.1rem,2.4vw,1.6rem);
  border-bottom:1px solid var(--rule);
}
.ticket__list li:last-child{ border-bottom:0 }
.ticket__n,.ticket__c,.ticket__s,.ticket__st{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 104;
  font-size:.8125rem;font-variant-numeric:tabular-nums;
}
.ticket__n{ color:var(--ink-soft) }
.ticket__c{ font-weight:600;letter-spacing:.01em }
/* the signature is the half nobody can derive: it is the reason a photographed
   square does not hand over the rest of the party's codes */
.ticket__c i{ font-style:normal;background:var(--brand);padding:.05em .18em;margin-left:-.18em }
.ticket__s{ color:var(--ink-soft);text-align:right }
.ticket__st{ font-weight:600;text-align:right;white-space:nowrap }
.ticket__st--out{ color:var(--ink-soft);font-weight:400 }
.ticket__foot{
  padding:.85rem clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.4vw,1.4rem);
  border-top:1.5px solid var(--ink);font-size:.875rem;line-height:1.5;color:var(--ink-soft);
}

/* (2) The meter. One dimension, in a table row: a count and its share of the
   step above it. DESIGN.md keeps these hand-drawn on purpose — a number and a
   proportion in a row is not a chart with an axis, and wrapping each one in a
   charting container would cost more than it says. */
.meter{ display:grid;gap:0;border-top:1.5px solid var(--ink) }
.meter__row{ padding:.85rem 0;border-bottom:1px solid var(--rule) }
.meter__row:last-child{ border-bottom:0 }
.meter__h{ display:flex;justify-content:space-between;align-items:baseline;gap:1rem }
.meter__l{ font-size:.9375rem;color:var(--ink-soft) }
.meter__l b{ color:var(--ink);font-weight:600 }
.meter__n{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 108;
  font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.meter__bar{ margin-top:.55rem;height:10px;background:var(--paper-sunk);border:1px solid var(--rule) }
.meter__bar span{ display:block;height:100%;width:var(--w);background:var(--ink) }
/* the step that loses the most is the one worth looking at, so it is the one
   thing on this diagram allowed to be the brand colour */
.meter__row--worst .meter__bar span{ background:var(--brand) }
.meter__row--worst .meter__bar{ border-color:var(--ink) }

/* (3) The code alphabet. Thirty characters, and the five that are missing —
   which is the entire argument: this gets read aloud across a counter and
   typed by somebody standing up, so O and 0 cannot both be in it. */
.codeset{ display:grid;gap:1.1rem }
/* Ten across, so the thirty land as three even rows and the five that are
   missing get a row of their own instead of orphaning under the alphabet. */
.codeset__grid{ display:grid;grid-template-columns:repeat(10,1fr);gap:.3rem }
.codeset__grid--out{ grid-template-columns:repeat(10,1fr) }
.codeset__grid--out span{ grid-column:span 1 }
.codeset__k{ margin-bottom:.45rem }
@media (max-width:420px){ .codeset__grid,.codeset__grid--out{ grid-template-columns:repeat(6,1fr) } }
.codeset__grid span{
  display:grid;place-items:center;aspect-ratio:1;
  border:1px solid var(--rule-mid);
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 106;
  font-weight:600;font-size:.9375rem;
}
.codeset__grid span.is-out{
  color:var(--ink-soft);border-style:dashed;border-color:var(--rule);
  position:relative;
}
.codeset__grid span.is-out::after{
  content:"";position:absolute;left:12%;right:12%;top:50%;height:1.5px;background:var(--ink-soft);
}
.codeset__l{ font-size:.9375rem;line-height:1.55;color:var(--ink-soft) }
.codeset__l b{ color:var(--ink);font-weight:600 }

/* `.surface p` caps every paragraph at 46ch, which is right for the prose
   column and wrong inside a drawn object: it clipped the ticket's footer rule
   at 46ch and wrapped its venue line a word early. The artifacts opt out, and
   set their own vertical rhythm rather than inheriting the band's. */
.ticket p,.meter p,.codeset p{ max-width:none;margin-top:0 }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.gone{
  min-height:72vh;display:grid;place-items:center;text-align:center;
  padding:clamp(3rem,8vw,6rem) var(--pad);
}
.gone h1{ font-size:clamp(2.6rem,8vw,6rem);line-height:.94;max-width:16ch;margin-inline:auto }
.gone .lede{ margin:1.5rem auto 0;max-width:48ch }
.gone__links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;margin-top:2.5rem;
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 106;
  font-weight:600;font-size:.9375rem;
}
.gone__links a{ text-underline-offset:4px }