@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Architects Daughter"; src: url("fonts/architects-daughter.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* the five brand colours, from the record identity */
  --ink: #171512;
  --paper: #EEE3C7;
  --red: #D83B27;
  --blue: #126F86;
  --yellow: #E7BA27;
  /* derived */
  --sheet: #F5EEDA;
  --ink-2: #4A443A;
  --paper-dim: #D9CFB5;
  --rule: 1.5px solid var(--ink);

  --sans: "Figtree", "Avenir Next", Avenir, system-ui, sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --hand: "Architects Daughter", "Bradley Hand", cursive;

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: 84rem;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* paper grain and pen hatching, as tiles */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg stroke='%23000' stroke-width='.7' opacity='.12'%3E%3Cpath d='M-5 20 L20 -5M-4 41 L41 -4M5 58 L58 5M24 63 L63 24M44 64 L64 44'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--ink) var(--paper); }
body { margin: 0; background: var(--paper) var(--grain); color: var(--ink); font: 400 1.0625rem/1.55 var(--sans); caret-color: var(--blue); text-rendering: optimizeLegibility; }
::selection { background: var(--yellow); color: var(--ink); }
img, svg, iframe { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.mono { font-family: var(--mono); font-size: 0.875rem; line-height: 1.45; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -4rem; background: var(--ink); color: var(--paper); padding: var(--s2) var(--s4); z-index: 60; }
.skip:focus { top: var(--s4); }

/* handwritten margin notes, in the plates' own lettering */
.hand { font-family: var(--hand); font-size: 1.2rem; line-height: 1.35; color: var(--blue); transform: rotate(-2deg); transform-origin: left center; }
.hand::before { content: ""; display: inline-block; width: 2.2em; height: 1em; margin-right: 0.4em; vertical-align: -0.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Cpath d='M2 16 C12 4 26 3 40 9 M33 3 L41 9 L33 14' fill='none' stroke='%23126F86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; transform: scaleY(-1); }

/* ---------------------------------------------------------------- header */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); max-width: var(--max); margin: 0 auto; padding: var(--s5) var(--gutter); padding-top: max(var(--s5), env(safe-area-inset-top)); }
.brand img { width: clamp(12.5rem, 21vw, 18rem); height: auto; }
.nav { display: flex; align-items: center; gap: var(--s6); font-weight: 600; }
.nav a { text-decoration: none; }
.nav a:not(.nav-cta):hover { text-decoration: underline; text-decoration-thickness: 2px; }
.nav-cta, .signup button { background: var(--ink); color: var(--paper); padding: var(--s3) var(--s5); font-weight: 700; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.nav-cta:hover, .signup button:hover { background: var(--blue); color: #fff; }

/* ---------------------------------------------------------------- plates (engine drawings in frames) */
.plate { margin: 0; }
.plate iframe { width: 100%; aspect-ratio: 16 / 10; border: 0; background: transparent; color-scheme: normal; }

/* ---------------------------------------------------------------- hero */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--s6); max-width: var(--max); margin: 0 auto; padding: var(--s5) var(--gutter) var(--s8); min-height: min(54rem, calc(100dvh - 7rem)); }
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 5.25rem); line-height: 0.98; letter-spacing: -0.035em; }
.lede { margin-top: var(--s5); font-size: clamp(1.125rem, 1.5vw, 1.3rem); max-width: 34ch; color: var(--ink-2); }
.hero-plate { margin-right: calc(var(--gutter) * -0.5); }
.hand-hero { margin-top: var(--s2); }

/* ---------------------------------------------------------------- signup */
.signup { margin-top: var(--s6); max-width: 30rem; }
.signup label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--s2); }
.field { display: flex; border: 2px solid var(--ink); background: var(--sheet); }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; padding: var(--s3) var(--s4); }
.field input::placeholder { color: #625A4D; }
.field input:focus-visible { outline: none; box-shadow: none; }
.field:focus-within { outline: 3px solid var(--yellow); outline-offset: 2px; }
.signup button { border: 0; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.signup button[disabled] { opacity: 0.6; cursor: progress; }
.status { min-height: 1.5em; margin-top: var(--s2); font-size: 0.9375rem; }
.status[data-state="error"] { font-weight: 600; }
.status[data-state="error"]::before { content: ""; display: inline-block; width: 0.5em; height: 1em; margin-right: 0.45em; vertical-align: -0.12em; background: var(--red); border-radius: 0 1em 1em 0; }

/* ---------------------------------------------------------------- sleeves: Side A / Side B */
.sleeve { position: relative; padding: var(--s8) var(--gutter) var(--s9); background-image: var(--hatch); }
.sleeve-a { background-color: var(--blue); color: var(--paper); }
.sleeve-b { background-color: var(--red); color: var(--ink); }
/* a hand-cut top edge, drawn by main.js in the band's own colour */
.edge { position: absolute; left: 0; right: 0; top: -13px; height: 14px; }
.sleeve-a .edge { color: var(--blue); }
.sleeve-b .edge { color: var(--red); }
.edge svg { width: 100%; height: 100%; }
.sleeve-head { max-width: var(--max); margin: 0 auto var(--s7); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: end; }
.sleeve-head h2 { font-size: clamp(3rem, 8vw, 6rem); line-height: 0.92; letter-spacing: -0.04em; }
.sleeve-head p { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 700; line-height: 1.3; max-width: 26ch; }
.insert { position: relative; max-width: var(--max); margin: 0 auto; background: var(--paper) var(--grain); color: var(--ink); padding: var(--s6) clamp(1.25rem, 3vw, 3rem) var(--s7); }
.insert-note { padding-bottom: var(--s4); border-bottom: 3px solid var(--ink); color: var(--ink-2); font-style: italic; }

/* the open story */
.open-story { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s6); align-items: center; padding: var(--s6) 0; }
.track-no { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.open-copy { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--s4); }
.open-copy > :not(.track-no) { grid-column: 2; }
.open-copy .track-no { padding-top: 0.35em; }
.open-story h3 { font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.04; letter-spacing: -0.03em; }
.meta { margin-top: var(--s3); color: var(--ink-2); }
.hand-a { margin-top: var(--s5); }

/* the reading key: each line carries the piece of the record it stands for */
.key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin: var(--s4) 0 0; }
.key-stack { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s5); }
.key dt { font-weight: 700; font-size: 0.9375rem; display: flex; align-items: center; gap: 0.5em; }
.key dt::before { content: ""; flex: none; width: 0.55em; height: 1.1em; }
.k-yes dt::before { background: var(--blue); border-radius: 1.1em 0 0 1.1em; }
.k-no dt::before { background: var(--red); border-radius: 0 1.1em 1.1em 0; }
.k-q dt::before { width: 1em; height: 1em; background: radial-gradient(circle, var(--ink) 0 22%, var(--yellow) 24%); border-radius: 50%; }
.k-src dt::before { width: 0.6em; height: 0.6em; margin: 0 0.2em; background: var(--ink); border-radius: 50%; }
.key dd { margin: var(--s1) 0 0; max-width: 46ch; }

/* pen-drawn rules, drawn by main.js as they scroll in */
.pen-rule { height: 14px; margin: var(--s2) 0 var(--s5); color: var(--ink); }
.pen-rule svg { width: 100%; height: 100%; overflow: visible; }
.pen-rule path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s var(--ease); }
.pen-rule.drawn path { stroke-dashoffset: 0; }

.also { font-size: 1.125rem; margin-bottom: var(--s2); }
.tracks { list-style: none; margin: 0; padding: 0; }
.tracks li { border-top: var(--rule); }
.tracks li:last-child { border-bottom: var(--rule); }
.tracks summary { display: grid; grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr) 1.5rem; gap: var(--s4); align-items: baseline; padding: var(--s4) 0; cursor: pointer; list-style: none; }
.tracks summary::-webkit-details-marker { display: none; }
.tracks summary::after { content: ""; width: 0.8rem; height: 0.8rem; justify-self: end; align-self: center; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translateY(-25%); transition: transform 200ms var(--ease); }
.tracks details[open] summary::after { transform: rotate(225deg); }
.tracks summary:hover .t-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.t-title { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.3; }
.t-q { color: var(--ink-2); }
.tracks .track-no { font-size: 1rem; }
.tracks .key { padding: 0 0 var(--s5) calc(3.5rem + var(--s4)); margin-top: 0; }

/* side B feature */
.feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s6); align-items: center; padding-top: var(--s6); }
.feature h3 { margin-top: var(--s3); font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -0.035em; }
.dek { margin-top: var(--s4); font-size: clamp(1.1rem, 1.4vw, 1.25rem); max-width: 52ch; }
.draft { background: var(--yellow); color: var(--ink); padding: 0 0.35em; }
.feature-foot { margin-top: var(--s5); color: var(--ink-2); }

/* ---------------------------------------------------------------- method */
.method { max-width: var(--max); margin: 0 auto; padding: var(--s9) var(--gutter) var(--s8); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); }
.method h2 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 0.95; letter-spacing: -0.035em; }
.liner-plate { margin-top: var(--s5); margin-left: calc(var(--s4) * -1); }
.rules { list-style: none; margin: 0; padding: 0; }
.rules li { padding: var(--s5) 0; border-top: var(--rule); font-size: 1.125rem; max-width: 60ch; color: var(--ink-2); }
.rules li:last-child { border-bottom: var(--rule); }
.rules strong { display: block; color: var(--ink); font-size: 1.3rem; line-height: 1.35; margin-bottom: var(--s1); }

/* ---------------------------------------------------------------- faq */
.faq { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) var(--s9); }
.faq h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em; margin-bottom: var(--s5); }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); }
.faq details { border-top: var(--rule); padding: var(--s4) 0; }
.faq summary { font-weight: 700; font-size: 1.125rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.7rem; height: 0.7rem; margin-top: 0.3em; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 0.6em; }
.faq details p { margin-top: var(--s2); color: var(--ink-2); max-width: 52ch; }

/* ---------------------------------------------------------------- close: reversed on ink */
.close { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: var(--s9) var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: center; min-height: 34rem; }
.close-record { width: clamp(22rem, 46vw, 44rem); margin-left: calc(var(--gutter) * -1 - 18%); }
.close-record svg { width: 100%; height: auto; animation: spin 24s linear infinite; }
.close.paused .close-record svg, .close.offscreen .close-record svg { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
.close-copy { max-width: 34rem; }
.close h2 { font-size: clamp(2.6rem, 5vw, 4.25rem); line-height: 0.98; letter-spacing: -0.035em; }
.close-copy > p { margin-top: var(--s4); font-size: 1.1875rem; color: var(--paper-dim); max-width: 40ch; }
.close .field { border-color: var(--paper); }
.close .signup button { background: var(--yellow); color: var(--ink); }
.close .signup button:hover { background: var(--paper); color: var(--ink); }
.close :focus-visible { box-shadow: 0 0 0 6px var(--paper); }
.spin-toggle { margin-top: var(--s5); background: none; border: 0; padding: 0; color: var(--paper-dim); font: inherit; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.spin-toggle:hover { color: var(--paper); }

/* ---------------------------------------------------------------- footer: the name, loud */
.foot { max-width: var(--max); margin: 0 auto; padding: var(--s8) var(--gutter) max(var(--s6), env(safe-area-inset-bottom)); }
.foot-mark { width: 100%; height: auto; }
.foot p { margin-top: var(--s5); font-size: 0.9375rem; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .close-record svg { animation: none; }
  .spin-toggle { display: none; }
  .pen-rule path { transition: none; stroke-dashoffset: 0; }
}

@media (max-width: 960px) {
  .hero, .method, .close, .sleeve-head, .open-story, .feature { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-top: var(--s3); gap: var(--s5); }
  .hero-plate { order: -1; margin: 0 calc(var(--gutter) * -1); }
  .story-plate, .feature-plate { margin: 0 calc(clamp(1.25rem, 3vw, 3rem) * -1); }
  .feature-plate { order: -1; }
  .key { grid-template-columns: 1fr; gap: var(--s3); }
  .tracks summary { grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; }
  .t-q { grid-column: 2; grid-row: 2; }
  .tracks summary::after { grid-column: 3; grid-row: 1; }
  .tracks .key { padding-left: calc(2.5rem + var(--s4)); }
  .faq-list { grid-template-columns: 1fr; }
  .close-record { position: absolute; right: -9rem; top: -7rem; width: 20rem; margin: 0; opacity: 0.9; }
  .close-copy { position: relative; padding-top: 6rem; }
}
@media (max-width: 640px) {
  .nav a:not(.nav-cta) { display: none; }
  .brand img { width: 11.5rem; }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .field { flex-direction: column; }
  .signup button { padding: var(--s3) var(--s4); }
  .sleeve { padding-top: var(--s7); padding-bottom: var(--s7); }
  .insert { padding-left: var(--s4); padding-right: var(--s4); }
  .story-plate, .feature-plate { margin: 0 calc(var(--s4) * -1); }
  .foot { text-align: center; }
  .foot-mark { width: min(100%, 22rem); margin: 0 auto; }
}