/* ==========================================================================
   TuneTable: tokens, fonts, reset, base type
   Warm dark editorial: ink-black paper stock, cream type, one vermilion accent,
   brass for scores. Analog texture comes from film grain, paper notes and vinyl.
   Labels are written in plain sentence case; mono is kept for numbers.
   Handwriting (Caveat) is reserved for things people wrote by hand: sticky
   notes, queue notes and the editors' sign-offs.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-full-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-ext-full-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-full-italic.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* Paper stock (backgrounds, lightest last) */
  --ink-0: #0b0a08;
  --ink-1: #12110e;
  --ink-2: #191713;
  --ink-3: #221f1a;
  --ink-4: #2e2a23;
  --ink-5: #3b362d;

  /* Hardware: the turntable and similar objects. Their own tokens, so a theme can keep them dark and neutral. */
  --hw-1: #2a251e;
  --hw-2: #15130f;
  --hw-3: #3b3328;
  --tt-glow: .55;

  /* Type */
  --paper:   #efe6d5;
  --paper-2: #bdb3a2;
  --paper-3: #847b6d;
  --paper-4: #575146;

  /* Colour channels, so every translucent use of a colour follows the theme */
  --paper-rgb:  239 230 213;
  --accent-rgb: 255 106 61;
  --brass-rgb:  217 171 98;
  --glow-a:     255 140 80;      /* the warm light from above */
  --glow-b:     217 171 98;      /* and a second, from the top right */

  /* Hairlines */
  --line:   rgb(var(--paper-rgb) / .085);
  --line-2: rgb(var(--paper-rgb) / .15);
  --line-3: rgb(var(--paper-rgb) / .26);

  /* Accents */
  --accent:      #ff6a3d;
  --accent-2:    #ff8a62;
  --accent-ink:  #1c0b05;
  --accent-soft: rgb(var(--accent-rgb) / .13);
  --accent-line: rgb(var(--accent-rgb) / .38);
  --hi:          var(--accent); /* accent used for text (links on hover, kickers, numbers); a theme can give it another colour */
  --glow-k:      1;             /* how strong the light from above is */
  --brass:       #d9ab62;       /* scores and editors */
  --brass-soft:  rgb(var(--brass-rgb) / .14);
  --brass-line:  rgb(var(--brass-rgb) / .38);
  --brass-line-2: rgb(var(--brass-rgb) / .3);
  --paper-hover: color-mix(in oklab, var(--paper) 78%, #fff);   /* a paper button when pointed at */
  --ok:          #9fc48a;
  --danger:      #ef6f5f;

  /* The three sound axes */
  --energy:  #ff7f4d;
  --valence: #c3cf7c;
  --density: #8fb2dc;

  /* Sticky-note stock */
  --note-butter:    #f3df7c;
  --note-rose:      #f2b0a8;
  --note-sage:      #c6dba9;
  --note-sky:       #b7d3ee;
  --note-tangerine: #f6bd85;

  /* Type families */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-hand:    "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* Type scale */
  --t-xs: .75rem;  --t-sm: .8125rem; --t-base: .9375rem; --t-md: 1.0625rem; --t-lg: 1.25rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --t-3xl: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem);
  --t-4xl: clamp(3.2rem, 1.6rem + 6vw, 7.4rem);

  /* Space & shape */
  --gutter: clamp(1rem, .5rem + 2.4vw, 2.5rem);
  --max: 1320px;
  --r-xs: 6px; --r-sm: 9px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* Depth */
  --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.35);
  --shadow-3: 0 30px 80px -20px rgba(0,0,0,.8), 0 10px 24px -8px rgba(0,0,0,.6);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 140ms; --dur-2: 260ms; --dur-3: 520ms;

  --topbar-h: 64px;
  --tabbar-h: 0px;          /* the phone tab bar sets this */
}

/* ── Themes ──────────────────────────────────────────────────────────────
   The default above is "Vinyl". The switcher in the top bar sets data-theme on <html>
   (see js/theme.js; a tiny script in the layout's <head> sets it before first paint).
   A theme only restates colour tokens: surfaces, type, accents. The three sound-axis colours,
   the sticky-note stock and the album-art palettes are content and stay the same everywhere. */

/* Dusk: mostly graphite grey with only a cool hint of indigo; violet and a muted teal appear as accents.
   Surfaces are as dark as Vinyl's, and the turntable and other hardware stay dark neutral grey. */
:root[data-theme="dusk"] {
  --ink-0: #08080a;
  --ink-1: #0d0d10;
  --ink-2: #131316;
  --ink-3: #1a1a1f;
  --ink-4: #25252c;
  --ink-5: #31313a;

  --paper:   #e9e9ef;
  --paper-2: #b5b5c0;
  --paper-3: #82828f;
  --paper-4: #565661;

  --paper-rgb:  233 233 240;
  --accent-rgb: 138 128 232;
  --brass-rgb:  108 192 176;
  --glow-a:     110 104 220;
  --glow-b:     80 170 160;
  --glow-k:     .7;

  --accent:     #8a80e8;
  --accent-2:   #a39bf0;
  --accent-ink: #0b0a1e;
  --brass:      #6cc0b0;
  --ok:         #8dd4ae;
  --danger:     #f08090;

  --hw-1: #2b2b30;  --hw-2: #141417;  --hw-3: #3a3a41;   /* turntable and other hardware */
  --tt-glow: .28;
}

/* Moss: a dark room of sage and forest green, with terracotta orange as the touches (buttons, the record label,
   the little dots). Surfaces are as dark as Vinyl's; the green is in the type, the lines, the scores, the glow from
   above and every accent that is text. Orange stays on the solid things you press. */
:root[data-theme="moss"] {
  --ink-0: #070807;
  --ink-1: #0c0e0c;
  --ink-2: #121512;
  --ink-3: #191d19;
  --ink-4: #242a24;
  --ink-5: #313931;

  --paper:   #e7e9e0;
  --paper-2: #b5baa9;
  --paper-3: #81887a;
  --paper-4: #555b4f;

  --paper-rgb:  190 205 175;     /* hairlines are a grey sage: just enough green */
  --accent-rgb: 238 122 52;
  --brass-rgb:  146 190 118;
  --glow-a:     80 160 100;
  --glow-b:     140 185 115;
  --glow-k:     1.1;

  --accent:     #ee7a34;
  --accent-2:   #f59a5e;
  --accent-ink: #1d0b02;
  --brass:      #92be76;
  --ok:         #a6cf8c;
  --danger:     #e8756a;

  --hw-1: #292b26;  --hw-2: #131512;  --hw-3: #373a33;   /* turntable and other hardware: dark grey, barely green */
  --tt-glow: .28;

  /* Text accents, outlines and soft fills go green; solid fills (buttons, checks, dots) stay orange. */
  --hi:          var(--brass);
  --accent-soft: rgb(var(--brass-rgb) / .13);
  --accent-line: rgb(var(--brass-rgb) / .38);
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Decorative glows bleed past the edges on purpose; clip (unlike hidden) keeps sticky headers working and stops phones panning sideways. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); overflow-x: clip; }
body {
  min-height: 100dvh;
  background: var(--ink-0);
  color: var(--paper);
  font: 400 var(--t-base)/1.55 var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:where(dialog) { padding: 0; border: 0; color: inherit; background: none; max-width: none; max-height: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Film grain over everything: the "printed on paper" feel. */
body::after {
  content: "";
  position: fixed; inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* Warm vignette so pages feel lit from above. */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgb(var(--glow-a) / calc(.07 * var(--glow-k))), transparent 60%),
    radial-gradient(80% 60% at 100% 0%, rgb(var(--glow-b) / calc(.05 * var(--glow-k))), transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body::after { animation: none; }
}

/* ── Type ────────────────────────────────────────────────────────────── */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 420;
  font-variation-settings: "SOFT" 40, "WONK" 0;
  letter-spacing: -.022em;
  line-height: 1.02;
  text-wrap: balance;
}
.display-1 { font-size: var(--t-4xl); font-weight: 340; letter-spacing: -.04em; line-height: .92; }
.display-2 { font-size: var(--t-3xl); font-weight: 360; letter-spacing: -.035em; line-height: .96; }
.display-3 { font-size: var(--t-2xl); font-weight: 400; letter-spacing: -.028em; }
.display-4 { font-size: var(--t-xl); font-weight: 450; letter-spacing: -.02em; line-height: 1.1; }
.display em, h1 em, h2 em, h3 em, .serif-italic {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: inherit;
}

/* A quiet line above a heading: "Album of the week", "From your queue". Used sparingly. */
.kicker {
  display: inline-flex; align-items: center; gap: .45em;
  font: 500 var(--t-sm)/1.2 var(--font-sans);
  letter-spacing: 0;
  color: var(--paper-3);
}
.kicker--accent { color: var(--hi); }
.kicker .dot { display: none; }

.lede { font-size: var(--t-md); color: var(--paper-2); line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.meta { font: 400 var(--t-xs)/1.45 var(--font-sans); color: var(--paper-3); font-variant-numeric: tabular-nums; }
.meta a:hover { color: var(--paper); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--paper-3); }
.prose { color: var(--paper-2); line-height: 1.7; max-width: 66ch; text-wrap: pretty; }
.prose p + p { margin-top: .9em; }
.link { color: var(--paper); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-2) var(--ease-out); }
.link:hover { background-size: 100% 1px; }
.hand { font-family: var(--font-hand); font-weight: 500; font-size: 1.3em; line-height: 1.05; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i--sm { width: 15px; height: 15px; }
.i--lg { width: 22px; height: 22px; }