/* ============================================================
   SPECTRUM — base

   The page is drawn on a 1440-wide artboard: --s is one artboard
   pixel, and sizes are written as calc(N * var(--s)) so the whole
   composition scales with the viewport instead of reflowing.

   Layer contract, and it is the important part of this file:

     0  the fixed wordmark and the fixed strip
     1  every scrolling section

   The mark is pinned to the top of the viewport and never moves.
   Content slides up over it and buries it. Sections themselves are
   transparent — only plates, bands and cards are opaque — so the
   mark shows through the gaps in the composition.
   ============================================================ */

:root {
  --s: calc(100vw / 1440);

  --grid-margin: 20;
  --content-width: 1400;

  --bg:        #08080a;
  --ink:       #ffffff;
  --plate:     #f4f4f2;
  --plate-ink: #08080a;
  --muted:     #86868c;
  --hair:      #23232a;
  --hair-ink:  rgba(8, 8, 10, .16);

  --hue: 42;
  --live: hsl(var(--hue) 100% 58%);

  --z-back:    0;   /* wordmark + strip */
  --z-content: 1;   /* everything that scrolls */
  --z-notes:   6;
  --z-switches: 30;
  --z-grain:   40;
  --z-desat:   38;
  --z-curtain: 60;

  --parallax: 70;
  --drift: .085;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-nar: "Archivo Narrow", "Archivo", sans-serif;
}

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

html { background: var(--bg); }
html.is-loading, html.is-loading body { height: 100%; overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: calc(16 * var(--s));
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { position: relative; z-index: var(--z-content); }

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* every section is transparent; only its plates are solid */
main > section, main > footer { position: relative; }

/* ---------- line mask ---------- */
.ln { display: block; overflow: hidden; }
.ln > i { display: block; font-style: normal; will-change: transform; }

/* ---------- hairline underline ---------- */
.u { position: relative; display: inline-block; }
.u::after {
  content: "";
  position: absolute; left: 0; right: 0; top: calc(100% + 1px);
  height: 1px; background: currentColor;
  transform-origin: right center;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.u:hover::after { transform-origin: left center; transform: scaleX(0); }

/* ---------- parallax frame ---------- */
.frame { position: relative; overflow: hidden; display: block; }
.fill {
  position: absolute; left: 0; top: -14%;
  width: 100%; height: 128%;
  will-change: transform;
}

/* ---------- small type roles ---------- */
.plate__no, .plate__kicker, .weeks__no, .weeks__kicker, .out__no,
.out__kicker, .rig__no, .stamp, .week__no, .plate__fine {
  font-family: var(--font-nar);
  font-size: calc(11.5 * var(--s));
  letter-spacing: .06em;
}
.plate__kicker, .weeks__kicker, .out__kicker {
  font-size: calc(19 * var(--s));
  font-family: var(--font);
  letter-spacing: -.012em;
}
.muted { color: var(--muted); }

.spec {
  display: grid;
  grid-template-columns: calc(96 * var(--s)) 1fr;
  font-family: var(--font-nar);
  font-size: calc(12.5 * var(--s));
}
.spec dt { padding: calc(6 * var(--s)) 0; border-top: 1px solid var(--hair-ink); opacity: .55; }
.spec dd { padding: calc(6 * var(--s)) 0; border-top: 1px solid var(--hair-ink); }

/* ---------- call to action ---------- */
.btn {
  display: inline-block;
  padding: calc(11 * var(--s)) calc(20 * var(--s));
  background: var(--plate-ink);
  color: var(--plate);
  font-family: var(--font-nar);
  font-size: calc(12.5 * var(--s));
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .3s, color .3s;
}
.btn:hover { background: var(--live); color: var(--plate-ink); }
.btn--big {
  display: block;
  text-align: center;
  padding: calc(16 * var(--s));
  font-size: calc(14 * var(--s));
}

/* ---------- overlays ---------- */
.grain {
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background-size: calc(200 * var(--s));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.6'/></svg>");
}
.desat {
  position: fixed; inset: 0;
  z-index: var(--z-desat);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  -webkit-backdrop-filter: grayscale(1) contrast(1.05);
  backdrop-filter: grayscale(1) contrast(1.05);
}
html[data-gray="true"] .desat { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .grain { opacity: .08; } }

/* ============================================================
   NOTES MODE — warm wash and hand marks.
   Kept here on purpose: these lived in feature stylesheets twice
   before and were lost twice when those files were replaced. Both
   times the marks SVG fell out of `position: fixed`, dropped into
   the flow at the end of the document and added a thousand pixels
   of empty page under the footer.
   ============================================================ */
.warm {
  position: fixed; inset: 0;
  z-index: 37;
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s ease;
  -webkit-backdrop-filter: sepia(.5) saturate(1.25) brightness(1.08) hue-rotate(-8deg);
  backdrop-filter: sepia(.5) saturate(1.25) brightness(1.08) hue-rotate(-8deg);
}
html[data-notes="true"] .warm { opacity: 1; }

.marks {
  position: fixed; inset: 0;
  z-index: 39;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease .1s;
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.marks path { stroke: #c8871f; }
.marks path:nth-child(2) { stroke: #2f7d4f; }
.marks path:nth-child(4) { stroke: #b3402f; }
.marks path:nth-child(5) { stroke: #2f7d4f; }
html[data-notes="true"] .marks { opacity: .85; }