/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --page: #f6f4fb;
  --surface: #fdfcff;
  --surface-2: #f0edf7;
  --ink: #16131f;
  --ink-2: #4e4a61;
  --muted: #85819a;
  --grid: #e4e0ee;
  --axis: #c8c3da;
  --border: rgba(60, 40, 120, 0.11);
  --link: #3b45b8;
  --island: #efede6;

  /* Atlas: sea, and a mood ramp (cool = darker lyrics, warm = sunnier; gray midpoint) */
  --ocean: #f3f6f9;
  --ocean-2: #e2e9f1;
  --sea-line: rgba(37, 106, 191, 0.10);
  --mood-neg-2: #3d4fc2;
  --mood-neg: #6f93e0;
  --mood-mid: #b7b2a6;
  --mood-pos: #f0a03c;
  --mood-pos-2: #e0582b;

  /* Artist identity: validated categorical slots 1-5 */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;

  /* Sequential (blue) and diverging (blue <-> red, gray midpoint) */
  --seq-0: #f0edf7;
  --seq-1: #cde2fb;
  --seq-2: #9ec5f4;
  --seq-3: #5598e7;
  --seq-4: #256abf;
  --seq-5: #104281;
  --div-neg: #e34948;
  --div-mid: #f0edf7;
  --div-pos: #2a78d6;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 16px;

  /* Dreamy chrome (decoration only, never data): sky glows, glass panels, the mood gradient for accents */
  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glow-cool: rgba(111, 127, 240, 0.22);
  --glow-warm: rgba(242, 119, 74, 0.16);
  --glow-violet: rgba(160, 110, 230, 0.16);
  --shadow: rgba(60, 40, 120, 0.16);
  --stars: 0;
  --grad: linear-gradient(100deg, #3d4fc2 0%, #8a5bd6 50%, #e0582b 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #090b16;
    --glass: rgba(20, 24, 46, 0.58);
    --glass-strong: rgba(22, 27, 52, 0.9);
    --glow-cool: rgba(90, 110, 240, 0.28);
    --glow-warm: rgba(242, 119, 74, 0.16);
    --glow-violet: rgba(150, 90, 230, 0.20);
    --shadow: rgba(0, 0, 10, 0.55);
    --stars: 1;
    --grad: linear-gradient(100deg, #8da2ff 0%, #c08cf0 50%, #ff9a6b 100%);
    --surface: #121628;
    --surface-2: #1a1f36;
    --ink: #f1effa;
    --ink-2: #c4c0d8;
    --muted: #8d89a6;
    --grid: #242a44;
    --axis: #343b5c;
    --border: rgba(200, 200, 255, 0.10);
    --link: #a9b8ff;
    --island: #262624;
    --ocean: #121a26;
    --ocean-2: #0b0f16;
    --sea-line: rgba(134, 182, 239, 0.08);
    --mood-neg-2: #6f7ff0;
    --mood-neg: #8db0f3;
    --mood-mid: #8a877f;
    --mood-pos: #f4b257;
    --mood-pos-2: #f2774a;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --seq-0: #1a1f36;
    --seq-1: #104281;
    --seq-2: #1c5cab;
    --seq-3: #2a78d6;
    --seq-4: #5598e7;
    --seq-5: #9ec5f4;
    --div-neg: #e66767;
    --div-mid: #343b5c;
    --div-pos: #3987e5;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #090b16;
  --glass: rgba(20, 24, 46, 0.58);
  --glass-strong: rgba(22, 27, 52, 0.9);
  --glow-cool: rgba(90, 110, 240, 0.28);
  --glow-warm: rgba(242, 119, 74, 0.16);
  --glow-violet: rgba(150, 90, 230, 0.20);
  --shadow: rgba(0, 0, 10, 0.55);
  --stars: 1;
  --grad: linear-gradient(100deg, #8da2ff 0%, #c08cf0 50%, #ff9a6b 100%);
  --surface: #121628;
  --surface-2: #1a1f36;
  --ink: #f1effa;
  --ink-2: #c4c0d8;
  --muted: #8d89a6;
  --grid: #242a44;
  --axis: #343b5c;
  --border: rgba(200, 200, 255, 0.10);
  --link: #a9b8ff;
  --island: #262624;
  --ocean: #121a26;
  --ocean-2: #0b0f16;
  --sea-line: rgba(134, 182, 239, 0.08);
  --mood-neg-2: #6f7ff0;
  --mood-neg: #8db0f3;
  --mood-mid: #8a877f;
  --mood-pos: #f4b257;
  --mood-pos-2: #f2774a;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --seq-0: #1a1f36;
  --seq-1: #104281;
  --seq-2: #1c5cab;
  --seq-3: #2a78d6;
  --seq-4: #5598e7;
  --seq-5: #9ec5f4;
  --div-neg: #e66767;
  --div-mid: #343b5c;
  --div-pos: #3987e5;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
/* Nothing may make the page wider than the screen: phones would zoom the whole site out (and keep that zoom on
   every page, since it's one document). clip, unlike hidden, doesn't break the sticky header. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 0; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 720px) { .wrap { padding-left: 32px; padding-right: 32px; } }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.muted { color: var(--muted); }
.secondary { color: var(--ink-2); }
.small { font-size: .85rem; }
.loading { padding: 4rem 0; color: var(--muted); }

/* ---------- Header / footer ---------- */
.site-header { border-bottom: 1px solid var(--border); background: var(--page); position: sticky; top: 0; z-index: 5; }
/* Keep the header clear of the iPhone's status bar / Dynamic Island and rounded corners (viewport-fit=cover
   makes these insets real numbers; elsewhere they're 0). */
.site-header { padding-top: env(safe-area-inset-top); }
.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.wordmark { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; color: var(--ink); text-decoration: none; }
.site-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.site-nav a { color: var(--ink-2); text-decoration: none; padding: 6px 10px; border-radius: 999px; font-size: .92rem; }
.site-nav a:hover { background: var(--surface-2); }
.site-nav a.active { background: var(--ink); color: var(--page); }
.theme-toggle { border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; }
.header-search { width: 220px; }
.header-search .search-input { padding: 7px 12px; font-size: .9rem; }
@media (max-width: 860px) {
  .site-nav { margin-left: 0; order: 3; width: 100%; padding-bottom: 8px; }
  .header-search { margin-left: auto; flex: 1; max-width: 320px; }
}
.site-footer { border-top: 1px solid var(--border); margin-top: 4rem; padding: 2rem 0 3rem; color: var(--muted); font-size: .85rem; }
.site-footer p { max-width: 70ch; }

/* ---------- Layout pieces ---------- */
main { padding-top: 2rem; padding-bottom: 2rem; min-height: 60vh; }
main:focus { outline: none; }
body.wide .wrap { max-width: none; }
@media (min-width: 720px) { body.wide .wrap { padding-left: 24px; padding-right: 24px; } body.wide main { padding-top: 1rem; } }
.hero-compact { padding: 0 0 1rem; max-width: 900px; }
.hero-compact h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .4rem; }
.hero-compact .dek { font-size: 1rem; margin: 0; }
.atlas-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 24px; margin-bottom: 1rem; }
.atlas-head .hero-compact, .atlas-head .controls { padding: 0; margin: 0; }
.atlas-head .controls { min-width: min(100%, 340px); }
.hero { padding: 1.5rem 0 2rem; max-width: 760px; }
.hero .dek { font-size: 1.15rem; color: var(--ink-2); }
.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 600; color: var(--muted); margin-bottom: .5rem; }
.section { margin: 3rem 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 1rem; }
.section-head p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* Sections side by side: the grid spaces them, so their own margins don't stack into big gaps. */
.grid:has(> .section) { margin: 3rem 0; row-gap: 3rem; }
.grid > .section { margin: 0; }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.grid-artists { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.breadcrumb { font-size: .9rem; color: var(--muted); margin-bottom: .75rem; }
.breadcrumb a { color: var(--ink-2); }

/* Series marks: slot 1 is the page accent; compare and map highlights use slots 1-3 */
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; flex: none; }
.slot-1 { background: var(--series-1); }
.slot-2 { background: var(--series-2); }
.slot-3 { background: var(--series-3); }
.slot-4 { background: var(--series-4); }
.accent-bar { height: 6px; border-radius: 3px; width: 56px; margin-bottom: 14px; background: var(--series-1); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Artist cards */
.artist-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.artist-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.artist-card h3 { font-size: 1.35rem; margin: 0; }
.artist-card .meta { font-size: .85rem; color: var(--muted); }
.artist-card .words { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 1rem; line-height: 1.4; }
.artist-card .themes { display: flex; flex-wrap: wrap; gap: 6px; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: .8rem; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
a.chip:hover { border-color: var(--axis); }
.chip strong { color: var(--ink); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Page header for artist/album/song */
.page-head { display: grid; gap: 8px; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--ink-2); font-size: 1.05rem; }
.summary-quote { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--ink); border-left: 4px solid var(--series-1); padding: 4px 0 4px 18px; margin: 1rem 0 0; max-width: 60ch; }
.summary-quote small { display: block; font-family: var(--sans); font-size: .75rem; color: var(--muted); margin-top: 6px; }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.tile .label { font-size: .8rem; color: var(--ink-2); }
.tile .value { font-size: 1.9rem; font-weight: 600; line-height: 1.2; margin: 2px 0; }
.tile .note { font-size: .78rem; color: var(--muted); }
.tile .label { display: flex; align-items: center; gap: 6px; }
.help-toggle { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--ink-2);
  font: 600 .7rem/1 inherit; cursor: pointer; padding: 0; flex: none; }
.help-toggle { position: relative; }
.help-toggle:hover, .help-toggle:focus-visible { background: var(--link); border-color: var(--link); color: var(--surface); }
.tile-help { position: absolute; left: -12px; bottom: calc(100% + 8px); width: max-content; max-width: min(260px, 70vw);
  padding: 8px 10px; border-radius: 10px; background: var(--glass-strong); border: 1px solid var(--border); box-shadow: 0 8px 24px var(--shadow);
  font: 400 .8rem/1.45 var(--sans); color: var(--ink); text-align: left; white-space: normal; display: none;
  pointer-events: none; z-index: 10; }
/* Hidden pop-ups take no space (display: none), so they can't widen the page on phones. */
.help-toggle:hover .tile-help, .help-toggle:focus .tile-help { display: block; }
.tile:has(.help-toggle:hover, .help-toggle:focus) { position: relative; z-index: 20; }
.glossary { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px 24px; margin: 0; }
.glossary dt { font-weight: 600; }
.glossary dd { margin: 0; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 640px) { .glossary { grid-template-columns: 1fr; gap: 2px; } .glossary dd { margin-bottom: 12px; } }

/* Signature words */
.word-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-family: var(--serif); line-height: 1.2; }
.word-cloud span { color: var(--ink); cursor: default; }
.word-cloud span:nth-child(3n+2) { color: var(--ink-2); }
.word-cloud span:hover { text-decoration: underline; text-decoration-color: var(--series-1); text-decoration-thickness: 3px; }

/* Album cards */
.album-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.album-card .year { font-size: .8rem; color: var(--muted); }
.album-card h3 { font-size: 1.05rem; margin: 0; }
.album-card:hover h3 { text-decoration: underline; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
th { font-weight: 600; color: var(--ink-2); font-size: .8rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.track-row { cursor: pointer; }
tr.track-row:hover td { background: var(--surface-2); }
tr.excluded td { color: var(--muted); }
.track-sub { display: none; font-size: .78rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) {
  /* Tracklist fits the screen: number/play and title only, theme and moods on a second line, no tone. */
  .col-wide { display: none; }
  .track-sub { display: block; }
  th, td { padding: 8px 6px; }
}

/* Charts */
.chart { width: 100%; position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--sans); fill: var(--ink-2); font-size: 12px; }
.chart .axis-label { fill: var(--muted); font-size: 11px; }
.chart .grid line { stroke: var(--grid); }
.chart .baseline { stroke: var(--axis); }
.chart .value-label { fill: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .hit { fill: transparent; cursor: pointer; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 12px; font-size: .85rem; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.legend-item .swatch { margin-right: 0; }

/* Rhyme schemes */
.schemes { display: flex; flex-wrap: wrap; gap: 14px; }
.scheme { display: flex; gap: 3px; }
.scheme span { width: 22px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: .75rem; font-weight: 600; border: 1px solid var(--axis); color: var(--ink-2); }
.scheme span.rhymes { background: var(--series-1); border-color: transparent; color: #fff; }

/* Scale (valence/intensity vs artist average) */
.scale-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; margin: 10px 0; font-size: .85rem; }
.scale-row .ends { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); }

/* Similar songs */
.song-list { list-style: none; margin: 0; padding: 0; }
.song-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grid); }
.song-list li:last-child { border-bottom: 0; }
.song-list a { color: var(--ink); text-decoration: none; font-weight: 500; }
.song-list a:hover { text-decoration: underline; }
.song-list .sim { margin-left: auto; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Controls */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 1rem; }
select { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--axis); background: var(--surface); color: var(--ink); max-width: 100%; }
.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .9rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--axis); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--surface-2); }

/* Tooltip */
.tooltip { position: fixed; z-index: 20; pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: .82rem; box-shadow: 0 6px 24px rgba(0,0,0,.12); max-width: 280px; }
.tooltip .tt-value { font-weight: 600; font-size: .95rem; }
.tooltip .tt-sub { color: var(--ink-2); }
.tooltip .tt-row { display: flex; align-items: center; gap: 6px; }
.tooltip .tt-key { display: inline-block; width: 12px; height: 2px; }

/* Compare */
.vs-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; text-align: center; }
.vs-head .big { font-size: clamp(2.2rem, 6vw, 3.5rem); font-weight: 600; font-family: var(--sans); }
.vs-head h2 { margin: 0; font-size: clamp(1.1rem, 3vw, 1.6rem); }
.word-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 640px) {
  .word-columns { grid-template-columns: 1fr; gap: 20px; }
  /* Words flow as a paragraph on phones instead of one long column each. */
  .word-columns ul { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  /* Sibling pairs: one song per line, the score beside them. */
  .sibling-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
  .sibling-list .sib-link { display: none; }
  .sibling-list .sib:nth-of-type(2) { grid-row: 2; }
  .sibling-list .sim { grid-column: 2; grid-row: 1 / span 2; }
  .sibling-list .sib-why { grid-column: 1 / -1; grid-row: 3; }
}
.sib { display: inline-flex; align-items: baseline; gap: 6px; }
.sibling-list li { flex-wrap: wrap; }
.sib-why { flex-basis: 100%; font-size: .78rem; color: var(--muted); margin-top: -2px; }
.word-columns ul { list-style: none; padding: 0; margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.7; }

/* ---------- Search ---------- */
.search { position: relative; width: 100%; }
.search-input { -webkit-appearance: none; appearance: none; width: 100%; font: inherit; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--axis); background: var(--surface); color: var(--ink); }
.search-input::placeholder { color: var(--muted); }
.search-big .search-input { font-size: 1.15rem; padding: 16px 22px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.search-results { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14); min-width: min(360px, 90vw); }
.search-results li { display: grid; grid-template-columns: 52px 1fr; column-gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.search-results li.active, .search-results li:hover { background: var(--surface-2); }
.search-results .kind { grid-row: span 2; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 3px; }
.search-results .label { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results .sub { font-size: .8rem; color: var(--muted); }
.search-dropdown .search-input { padding-right: 36px; cursor: pointer; }
.search-dropdown .search-input::-webkit-search-cancel-button { display: none; }
.search-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); font-size: .9rem; cursor: pointer; }
.search-toggle:hover { background: var(--surface-2); }
.search-dropdown .search-results { max-height: min(340px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.search-dropdown .search-results li { grid-template-columns: 1fr; text-align: left; }
.search-results li.search-more { cursor: default; color: var(--muted); font-size: .8rem; }
.search-results li.search-more:hover { background: none; }

/* ---------- Home ---------- */
.hero-home { max-width: 820px; padding-top: 2.5rem; }
.hero-home h1 { font-size: clamp(2.3rem, 6.5vw, 4.4rem); }
.hero-home h1 em { font-style: italic; font-weight: 400; }
.hero-home .search { margin: 1.5rem 0 1rem; max-width: 640px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.btn-primary { background: var(--ink); color: var(--page); border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-2); }
.twin { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; margin-bottom: 14px; }
.twin-song { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.twin-song h3 { font-size: 1.4rem; margin: 0; }
.twin-song p { margin: 0; }
.twin-song:hover h3 { text-decoration: underline; }
.twin-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 4px; }
.twin-refresh { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--glass); color: var(--ink-2); font-size: 1.1rem; cursor: pointer; transition: transform .35s ease, color .2s ease, border-color .2s ease; }
.twin-refresh:hover { transform: rotate(180deg); color: var(--ink); border-color: rgba(138, 91, 214, 0.45); }
@media (prefers-reduced-motion: reduce) { .twin-refresh:hover { transform: none; } }
.twin-score { font-size: 2.4rem; font-weight: 600; line-height: 1; }
@media (max-width: 720px) { .twin { grid-template-columns: 1fr; } .twin-mid { flex-direction: row; } }
.grid-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-bottom: 14px; }
.fact { text-decoration: none; color: inherit; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.fact p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; margin: 0; }
.fact:hover p { text-decoration: underline; text-decoration-thickness: 1px; }
.directory { columns: 3 260px; column-gap: 32px; margin-bottom: 14px; }
.dir-group { break-inside: avoid; margin-bottom: 18px; }
.dir-letter { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; border-bottom: 1px solid var(--grid); margin-bottom: 4px; }
.dir-group ul { list-style: none; margin: 0; padding: 0; }
.dir-group li { padding: 5px 0; }
.dir-group li a { font-weight: 600; color: var(--ink); text-decoration: none; }
.dir-group li a:hover { text-decoration: underline; }
.dir-words { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: .9rem; }

/* ---------- Atlas ---------- */
.atlas { position: relative; }
.atlas canvas, .atlas svg { position: absolute; inset: 0; display: block; }
.atlas { overflow: hidden; }
.atlas canvas { transform-origin: 0 0; will-change: transform; }
.atlas svg { overflow: visible; }
.atlas { border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--border); }
.mood-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.mood-ramp { width: 160px; height: 8px; border-radius: 4px; }
.region-label:focus-visible text { text-decoration: underline; }
.touch-hint { display: none; margin: 0 0 8px; }
.atlas-card { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 28px var(--shadow); font-size: .85rem; }
.atlas-card.top { top: 10px; bottom: auto; right: 54px; }
.atlas-card[hidden] { display: none; }
.atlas-card-text { flex: 1; min-width: 0; }
.atlas-card-text .tt-value { font-weight: 600; font-size: .98rem; }
.atlas-card-text .tt-sub { color: var(--ink-2); }
.atlas-card-open { flex: none; white-space: nowrap; }
@media (hover: none) { .touch-hint { display: block; } }
.zoom-controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.zoom-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--glass-strong); color: var(--ink);
  font: 600 1.1rem/1 var(--sans); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 10px var(--shadow); }
.zoom-btn:hover { border-color: var(--link); }
.zoom-btn[hidden] { display: none; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 960px) { .map-layout { grid-template-columns: 1fr; } }
.map-panel { max-height: 720px; overflow-y: auto; }
body.wide .map-layout { grid-template-columns: minmax(0, 1fr) 340px; }
body.wide .map-panel { max-height: max(480px, calc(100vh - 150px)); position: sticky; top: 76px; }
@media (max-width: 960px) { body.wide .map-layout { grid-template-columns: 1fr; } body.wide .map-panel { position: static; max-height: none; } }
.map-panel h2 { margin-top: 8px; }
.map-panel h3 { font-size: 1rem; margin-top: 1.2rem; }
.region-list { list-style: none; padding: 0; margin: 0; }
.region-list li { padding: 10px 0; border-bottom: 1px solid var(--grid); }
.region-list li:last-child { border-bottom: 0; }
.region-list a { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.region-list a:hover { text-decoration: underline; }
.show-all { margin-top: 12px; }
@media (min-width: 600px) { .show-all { display: none; } }
.chip-more { cursor: pointer; font: inherit; font-size: .8rem; color: var(--link); }
.chip-remove { cursor: pointer; font: inherit; font-size: .8rem; border: 1px solid var(--border); }
.controls .search { width: min(100%, 340px); }

/* ---------- Themes ---------- */
.theme-card, .song-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.theme-card h3, .song-card h3 { margin: 0; }
.theme-card { border-top: 3px solid transparent; }
.theme-sky { display: block; max-width: 100%; height: auto; overflow: visible; }
.sky-guide { stroke: var(--grid); stroke-dasharray: 2 4; }
.sky-cue { font-size: .72rem; fill: var(--muted); letter-spacing: .02em; }
.sky-node { cursor: pointer; outline: none; transition: opacity .25s; }
.sky-node.dim { opacity: .22; }
.sky-glow { opacity: .55; transition: opacity .25s; }
.sky-node.lit .sky-glow, .sky-node:focus-visible .sky-glow { opacity: 1; }
.sky-ball { stroke: var(--surface); stroke-opacity: .5; stroke-width: 1; transition: transform .25s; }
.sky-node.lit .sky-ball { stroke: var(--ink); stroke-opacity: .6; stroke-width: 1.5; }
.sky-node:focus-visible .sky-ball { stroke: var(--ink); stroke-width: 2; stroke-opacity: 1; }
.sky-label { fill: var(--ink); font-weight: 600; pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-opacity: .7; stroke-linejoin: round; }
.picker-name { color: inherit; text-decoration: none; }
.picker-name:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: none) { .picker-name { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; } }
.sky-card { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 28px var(--shadow); font-size: .85rem; }
.sky-card.top { top: 8px; bottom: auto; }
.sky-card[hidden] { display: none; }
.sky-card-text { flex: 1; min-width: 0; }
.sky-card .btn { flex: none; white-space: nowrap; }
.sky-links path { fill: none; stroke-width: 2; stroke-dasharray: 4 5; opacity: .8; animation: sky-dash 1.2s linear infinite; }
@keyframes sky-dash { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .sky-links path { animation: none; } }
.theme-card:hover h3, .song-card:hover h3 { text-decoration: underline; }
.meter { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--series-1); border-radius: 0 4px 4px 0; }

/* ---------- Compare / album bits ---------- */
.picker { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
/* Both pickers fill the row's height with the name on top and the dropdown at the bottom, so the dropdowns line up
   even when one artist's name wraps onto two lines. */
.vs-head > .picker { align-self: stretch; justify-content: space-between; }
.picker .search { max-width: 220px; }
.picker .search-input { padding: 6px 32px 6px 12px; font-size: .85rem; text-align: left; }  /* the header around it is centered */
.tone-bar { display: inline-block; width: 60px; height: 8px; background: var(--grid); border-radius: 4px; position: relative; vertical-align: middle; }
.tone-bar span { position: absolute; top: 0; height: 8px; border-radius: 4px; }
.butterfly-legend { justify-content: center; }

/* =========================================================================
   Dreamy layer: a night-sky (or dawn) backdrop, glass panels, gradient accents.
   Purely decorative; chart colors stay on the validated tokens above.
   ========================================================================= */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--page); }
.sky::before, .sky::after { content: ""; position: absolute; inset: -20%; }
.sky::before {
  background:
    radial-gradient(40% 35% at 12% 8%, var(--glow-cool), transparent 70%),
    radial-gradient(35% 30% at 88% 18%, var(--glow-violet), transparent 70%),
    radial-gradient(45% 40% at 80% 95%, var(--glow-warm), transparent 70%),
    radial-gradient(35% 35% at 20% 85%, var(--glow-violet), transparent 70%);
  animation: drift 60s ease-in-out infinite alternate;
}
.sky::after {
  opacity: calc(var(--stars) * 0.55);
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent 60%),
    radial-gradient(1px 1px at 140px 90px, #dfe4ff, transparent 60%),
    radial-gradient(1.5px 1.5px at 90px 160px, #fff, transparent 60%),
    radial-gradient(1px 1px at 210px 210px, #ffe2d1, transparent 60%),
    radial-gradient(1px 1px at 260px 60px, #fff, transparent 60%);
  background-size: 300px 260px;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(4%, -3%, 0) rotate(8deg); } }
@keyframes twinkle { from { opacity: calc(var(--stars) * 0.35); } to { opacity: calc(var(--stars) * 0.65); } }
body { background: transparent; }
::selection { background: rgba(138, 91, 214, 0.35); }

/* Gradient ink for brand moments */
.hero-home h1 em, .kicker, .twin-score {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kicker { width: fit-content; }

/* Header and footer float over the sky */
.site-header { background: color-mix(in srgb, var(--page) 62%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.site-footer { background: transparent; }
.site-nav a.active { background: var(--grad); color: #fff; box-shadow: 0 4px 16px -6px rgba(138, 91, 214, 0.7); }
.theme-toggle { background: var(--glass); }

/* Glass panels */
.card, .tile, .search-results, .tooltip {
  background: var(--glass); border: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 18px 50px -28px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.search-results, .tooltip { background: var(--glass-strong); }
.tooltip { border-radius: 12px; }
a.card, .artist-card, .fact, .twin-song { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
a.card:hover, .artist-card:hover, .fact:hover, .twin-song:hover {
  transform: translateY(-3px); border-color: rgba(138, 91, 214, 0.35);
  box-shadow: 0 22px 50px -24px var(--shadow), 0 0 0 1px rgba(138, 91, 214, 0.15), 0 10px 40px -20px rgba(138, 91, 214, 0.5);
}

/* Controls: soft pills */
.search-input, .btn, .chip { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.search-input { border-color: var(--border); transition: box-shadow .2s ease, border-color .2s ease; }
.search-input:focus { outline: none; border-color: rgba(138, 91, 214, 0.55); box-shadow: 0 0 0 4px rgba(138, 91, 214, 0.15), 0 10px 30px -14px rgba(90, 110, 240, 0.5); }
.search-big .search-input { box-shadow: 0 14px 40px -18px var(--shadow); }
.btn { border-color: var(--border); transition: transform .2s ease, background .2s ease; }
.btn:hover { background: var(--glass-strong); transform: translateY(-1px); }
.btn-primary { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 10px 30px -12px rgba(138, 91, 214, 0.7); }
.btn-primary:hover { background: var(--grad); filter: brightness(1.08); }
.chip { border-color: var(--border); }
a.chip:hover { border-color: rgba(138, 91, 214, 0.45); }

/* Atlas sits in a soft halo */
.atlas { box-shadow: inset 0 0 0 1px var(--border), 0 30px 80px -40px rgba(90, 110, 240, 0.55); }

/* Pages drift in */
main > * { animation: float-in .5s ease both; }
main.instant > * { animation: none; }
@keyframes float-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sky::before, .sky::after, main > * { animation: none; }
  a.card:hover, .artist-card:hover, .fact:hover, .twin-song:hover, .btn:hover { transform: none; }
}

/* ---------- Album covers and previews ---------- */
.cover { display: block; object-fit: cover; border-radius: 10px; background: var(--surface-2); box-shadow: 0 12px 30px -16px var(--shadow); flex: none; }
.cover-sm { width: 56px; height: 56px; border-radius: 8px; }
.cover-lg { width: clamp(120px, 22vw, 200px); height: clamp(120px, 22vw, 200px); border-radius: 14px; }
.cover-fill { width: 100%; aspect-ratio: 1; height: auto; margin-bottom: 4px; }
.cover-blank { background: var(--grad); opacity: .35; }
.album-card:hover .cover { transform: scale(1.015); }
.album-card .cover { transition: transform .25s ease; }
.page-head-art { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 24px; }
.page-head-art h1 { margin-bottom: .2em; }
.page-head-art > div { display: grid; gap: 8px; }
@media (max-width: 560px) { .page-head-art { grid-template-columns: 1fr; } }

.play { --p: 0; position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; display: inline-grid; place-items: center;
  background: var(--grad); color: #fff; font-size: .85rem; cursor: pointer; box-shadow: 0 8px 22px -10px rgba(138, 91, 214, 0.8); transition: transform .2s ease; }
.play:hover { transform: scale(1.06); }
.play::before { content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(rgba(160, 120, 240, 0.95) calc(var(--p) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.play.playing { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(138, 91, 214, 0.15), 0 8px 22px -10px rgba(138, 91, 214, 0.8); } }
.play-sm { width: 30px; height: 30px; font-size: .62rem; }
.play-sm::before { inset: -4px; }
.listen { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.apple-link { color: var(--muted); }
.twin-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.twin-title { flex: 1; min-width: 0; }
.twin-title h3 { margin: 0; }
.track-row td.num .play { vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .play.playing { animation: none; } .play:hover, .album-card:hover .cover { transform: none; } }

/* Career timeline: one column per release, in order */
.career-summary { font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; max-width: 62ch; color: var(--ink); }
/* Columns never get wider than four to a row, so artists with 1–3 releases don't get giant covers. */
.career { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, calc((100% - 36px) / 4)); gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.career-album { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; scroll-snap-align: start; position: relative; }
.career-head { display: grid; gap: 4px; text-decoration: none; color: var(--ink); margin-bottom: 14px; }
.career-head .cover { margin-bottom: 8px; transition: transform .25s ease; }
.career-head:hover .cover { transform: scale(1.015); }
.career-head:hover .career-title { text-decoration: underline; }
.career-head > div { min-width: 0; }
.career-title { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; line-height: 1.2; overflow-wrap: anywhere; }
.career-themes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.career-themes li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: .9rem; }
.career-themes a { color: var(--ink); text-decoration: none; }
.career-themes a:hover { text-decoration: underline; }
.career-bar { grid-column: 1 / -1; height: 6px; border-radius: 0 3px 3px 0; background: var(--series-1); min-width: 4px; }
.career.more-right { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.career.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); }
.career.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.career-hint { margin: 0 0 8px; }
.listen { flex-wrap: wrap; }
.btn-spotify { margin-left: 8px; }
.btn-spotify:hover { border-color: rgba(30, 215, 96, 0.6); }

/* Theme lines: chips are the legend and the toggles */
.theme-lines { margin: 28px 0 0; }
.theme-lines h3 { margin-bottom: 10px; }
.theme-toggles { margin-bottom: 10px; }
.chip-toggle { cursor: pointer; font: inherit; font-size: .8rem; color: var(--ink-2); }
.chip-toggle.on { color: var(--ink); border-color: var(--axis); }
.chip-toggle:disabled { opacity: .45; cursor: not-allowed; }
.chip-toggle .swatch { margin-right: 0; }

/* An open dropdown must sit above everything below it. Glass cards (backdrop-filter) each start their own
   stacking layer, so raise whichever card holds the open list. */
.card:has(.search-results:not([hidden])), .controls:has(.search-results:not([hidden])) { position: relative; z-index: 30; }
.search-results { background: var(--surface); box-shadow: 0 24px 60px -20px var(--shadow), 0 0 0 1px var(--border); max-height: min(360px, 60vh); overflow-y: auto; }
.picker .search-results { min-width: 380px; left: 50%; right: auto; transform: translateX(-50%); text-align: left; }
.search-dropdown .search-results li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 7px 10px; }
.search-dropdown .search-results .sub { white-space: nowrap; }
.search-dropdown .search-results li.search-more { grid-template-columns: 1fr; }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  /* Header: logo and theme toggle, then the nav, then a full-width search. Not sticky, to save screen. */
  .site-header { position: static; }
  .header-inner { gap: 10px; padding-top: 10px; }
  .wordmark { order: 1; }
  .theme-toggle { order: 2; margin-left: auto; }
  .site-nav { order: 3; width: 100%; padding-bottom: 0; }
  .header-search { order: 4; width: 100%; max-width: none; flex: none; margin: 0 0 10px; }
  /* The home page has its own big search box, and other pages skip it to save room. */
  .header-search { display: none; }
  .site-nav { padding-bottom: 8px; }

  /* Compare: the score on top, the two artists side by side under it, dropdowns as wide as the card. */
  .vs-head { grid-template-columns: 1fr 1fr; }
  .vs-head > div:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .picker .search { max-width: none; }
  .picker .search-results { transform: none; min-width: 0; width: calc(100vw - 72px); }
  .vs-head > .picker:first-child .search-results { left: 0; right: auto; }
  .vs-head > .picker:last-child .search-results { left: auto; right: 0; }

  .btn-spotify { margin-left: 0; }
  .hero-home h1 { font-size: 2.1rem; }

  /* Tighter vertical rhythm on phones. */
  .section, .grid:has(> .section) { margin: 2.25rem 0; }
  .grid:has(> .section) { row-gap: 2.25rem; }
  .card { padding: 16px; }

  /* Stat tiles: two compact columns, the ? pinned top-right. */
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 12px; }
  .tile .label { align-items: flex-start; justify-content: space-between; min-height: 2.4em; }
  .tile .value { font-size: 1.55rem; }
  /* Pop-ups span their tile, so they never run off either side of the screen. */
  .tile { position: relative; }
  .help-toggle { position: static; }
  .tile-help { left: 0; right: 0; width: auto; max-width: none; bottom: calc(100% - 6px); }
}

/* Compare page: its two artists wear the site's own gradient ends, violet and coral (validated for color-vision
   deficiency and contrast in both modes), instead of the generic blue/orange series colors. */
:root { --vs-a: #6a4fd6; --vs-b: #e0663a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vs-a: #8a74f0; --vs-b: #e46a3e; } }
:root[data-theme="dark"] { --vs-a: #8a74f0; --vs-b: #e46a3e; }
:root[data-page="compare"] { --series-1: var(--vs-a); --series-2: var(--vs-b); }

/* Phones zoom the page into any text box with type under 16px; keep every input at 16px on touch screens. */
@media (hover: none) { input, select, textarea, .picker .search-input, .header-search .search-input { font-size: 16px; } }

/* iOS Safari styles search boxes natively (its own insets, decorations, and caret placement) unless told not to. */
.search-input::-webkit-search-decoration, .search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button, .search-input::-webkit-search-results-decoration { -webkit-appearance: none; }
.search-input[readonly] { caret-color: transparent; cursor: pointer; -webkit-user-select: none; user-select: none; }

/* Contact form */
.contact-form { display: grid; gap: 16px; max-width: 620px; }
.form-field { display: grid; gap: 6px; font-size: .9rem; color: var(--ink-2); }
.form-field input, .form-field textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; -webkit-appearance: none; appearance: none; }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-primary { background: var(--grad); color: #fff; border: 0; font-weight: 600; padding: 9px 22px; }
.btn-primary:disabled { opacity: .6; cursor: default; }
.form-status { margin: 0; font-size: .85rem; color: var(--ink-2); }