/* Shared styling for the standalone pages (privacy, 404, and the long-form
   sub-pages). They are served straight from public/ with no build step, so they
   cannot import the app's stylesheet and instead restate its system here.

   That restatement had drifted badly: system-ui instead of Geist, a body size
   and heading ramp that matched nothing on the landing page, four class hooks
   the pages used that no rule ever defined (.callout, .updated, .code, .btn),
   and a heading treatment whose entire signal was the flyer world's uppercase
   800 weight. In classic that signal vanished and an h2 was a 1.15rem line the
   same colour as the paragraph under it, which is why these pages read as a
   different, flatter product than the page they are linked from.

   The tokens and the type ramp below are the ones in src/app.css. Where a value
   appears in both files it is the same value on purpose. */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* ---- Classic: the instrument panel, and the default ---- */
:root {
  --bg: #0e0f12;
  --bg-raised: #16181c;
  --bg-sunken: #0a0b0d;
  --ink: #dcdee3;
  --ink-dim: #83868f;
  --ink-faint: #5a5d66;
  --grid: #33363d;
  --grid-soft: #24272c;
  --audio: #8fb6c9;
  --warn: #e0a53d;
  --downbeat: #e05d3d;

  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;

  --t-micro: 0.68rem;
  --t-small: 0.76rem;
  --t-meta: 0.85rem;
  --t-ui: 0.95rem;
  --t-lead: 1.05rem;

  --radius: 6px;
  --radius-sm: 3px;

  --bg-hover: #1d2025;
  --misreg: 0px;
  --page-halftone: none;
  --heading-case: none;
  --heading-shadow: none;
  --heading-weight: 600;
  --h1-tracking: -0.035em;
  --h1-leading: 1.1;
}

/* ---- Flyer: day-glo ink on press black ---- */
:root[data-theme='flyer'] {
  --bg: #0a0908;
  --bg-raised: #141210;
  --bg-sunken: #050505;
  --ink: #e6e2d8;
  --ink-dim: #918b7e;
  --ink-faint: #635e55;
  --grid: #3b382f;
  --grid-soft: #221f1b;
  --audio: #6fd2e8;
  --warn: #f2e94e;
  --downbeat: #ff4d1c;

  --bg-hover: #1f1b16;
  --misreg: 3px;
  --page-halftone: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.05) 1px, transparent 1.6px);
  --heading-case: uppercase;
  /* A weaker second pass under the main one, not a full-strength double image:
     the same correction the landing headline needed. */
  --heading-shadow: 2px 2px 0 color-mix(in srgb, var(--audio) 45%, var(--bg));
  --heading-weight: 800;
  --h1-tracking: -0.015em;
  --h1-leading: 1.02;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--page-halftone);
  background-size: 6px 6px;
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Read mode: one column, a measure that stays inside 75ch at every size, and
   room at the top so the page starts rather than begins mid-sentence. */
main {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s8);
}

h1 {
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  line-height: var(--h1-leading);
  margin: 0 0 var(--s4);
  max-width: 20ch;
  text-wrap: balance;
  text-transform: var(--heading-case);
  text-shadow: var(--heading-shadow);
  font-weight: var(--heading-weight);
  letter-spacing: var(--h1-tracking);
}

/* Sections are separated by a rule rather than by the heading shouting, which
   is what lets classic hold structure without the flyer's uppercase weight.
   Depth from three tones and 1px rules is the system's own device.

   The rule is the h2's own top border, so the heading box must span the column:
   capping it at a 34ch measure (as the landing page does, where the rule lives
   on a wrapping <section>) stopped every divider halfway across and read as a
   broken line rather than a separator. These headings are short enough that the
   measure was doing nothing anyway. */
h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: var(--s7) 0 var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--grid-soft);
  text-transform: var(--heading-case);
  font-weight: var(--heading-weight);
}

p {
  max-width: 68ch;
}
p,
li {
  color: var(--ink);
}
strong {
  color: var(--ink);
  font-weight: 600;
}
.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  line-height: 1.55;
  max-width: 44ch;
  color: var(--ink);
}
ul,
ol {
  padding-left: 1.3rem;
}
li {
  margin-bottom: 0.4rem;
}

a {
  color: var(--audio);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--audio) 35%, transparent);
}
a:hover {
  border-bottom-color: var(--audio);
}
a:focus-visible {
  outline: 2px solid var(--audio);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.crumb {
  font-size: var(--t-meta);
  color: var(--ink-dim);
  margin-bottom: var(--s6);
}
.crumb a {
  color: var(--ink-dim);
  border-bottom-color: transparent;
}
.crumb a:hover {
  color: var(--audio);
}

/* Date stamp under an h1. Mono, because it is a value someone might check. */
.updated {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-faint);
  margin: 0 0 var(--s5);
}

/* The one claim the privacy page exists to make, printed on a raised panel so
   it is read before the prose explaining it. Hairline, no lift, no shadow. */
.callout {
  background: var(--bg-raised);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0 0;
  max-width: 68ch;
}
.callout strong {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--t-lead);
}

.cta {
  margin: var(--s6) 0 0;
}
.cta a,
.btn.primary {
  display: inline-block;
  background: var(--downbeat);
  color: #fff;
  border: 1px solid var(--downbeat);
  border-radius: var(--radius);
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  text-transform: var(--heading-case);
  letter-spacing: 0.04em;
  transition: background 0.15s;
}
.cta a:hover,
.btn.primary:hover {
  background: color-mix(in srgb, var(--downbeat) 85%, #fff);
}

hr {
  border: 0;
  border-top: 1px solid var(--grid-soft);
  margin: var(--s7) 0 var(--s5);
}

/* ---- Footer: the landing page's site map, so every page ends the same way
   and the links sit in named columns instead of one undifferentiated row. ---- */
footer {
  font-size: var(--t-meta);
  color: var(--ink-dim);
}
.site-map {
  display: grid;
  gap: var(--s5);
}
.site-map h2 {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  font-weight: 600;
  margin: 0 0 var(--s2);
  padding-top: 0;
  border-top: 0;
  max-width: none;
  line-height: 1.2;
}
.site-map ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-map li {
  margin: 0 0 0.35rem;
  font-size: var(--t-meta);
}
.foot {
  font-size: var(--t-meta);
  color: var(--ink-dim);
}
.foot a {
  color: var(--ink-dim);
}
.foot a:hover {
  color: var(--audio);
}

@media (min-width: 640px) {
  .site-map {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 404 ---- */
.code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s3);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}
.btn {
  display: inline-block;
  background: var(--bg-raised);
  color: var(--ink);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: 0.7rem 1.2rem;
  font-weight: 500;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.btn:hover {
  border-color: var(--ink-dim);
  background: var(--bg-hover);
}

/* The page-level design switch, matching the app's. */
.page-theme {
  position: fixed;
  top: 0.8rem;
  right: 0.8rem;
  display: inline-flex;
  padding: 2px;
  font: 600 var(--t-micro) / 1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--bg-raised);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  cursor: pointer;
  color: inherit;
}
.page-theme span {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
}
.page-theme span.on {
  background: var(--downbeat);
  color: #fff;
}
.page-theme:focus-visible {
  outline: 2px solid var(--audio);
  outline-offset: 2px;
}