/* =========================================================================
   Not Okay Pop design system — the single source of truth for both pages.
   Pages load this file, then add only their own layout rules.

   1. Color: primitives (pink scale) feed semantic tokens. Pages use only
      the semantic tokens, never raw values.
   2. Type: nine steps, each with size, weight and line height.
   3. Spacing: 4px base unit. Every margin, padding and gap is a token.
   4. Components: every state (default, hover, active, focus, disabled).
   5. Motion: named durations and easings. Interactions stay at or under
      240ms and never block input. Entrances use ease-out; exits are
      faster rather than eased-in, so the UI never feels sluggish.
   ========================================================================= */

/* Self-hosted (SIL Open Font License), so no visitor data goes to Google. */
@font-face {
  font-family: "Anton";
  src: url("/fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- 1. Color ---------- */
  /* Primitive: brand pink, 100 (lightest) to 900 (darkest). 500 is the brand. */
  --pink-100: #ffe5f4;
  --pink-200: #ffbce4;
  --pink-300: #ff92d3;
  --pink-400: #ff68c2;
  --pink-500: #ff4fb8;
  --pink-600: #cd3f94;
  --pink-700: #992e6e;
  --pink-800: #57193f;
  --pink-900: #1c0614;

  /* Semantic: name by purpose.
     Dark-mode rules: near-black base, never #000; higher surfaces are lighter;
     text is one colour at three opacities; hairlines are white alpha so they
     adapt to whatever surface they sit on. */
  --color-bg: #0b0a0d;
  --color-surface-1: #15121a;          /* raised: player, row hover, portrait frame */
  --color-surface-2: #1e1a24;          /* highest: sticky nav */
  --color-surface: var(--color-surface-1);
  --color-bg-overlay: rgb(30 26 36 / 0.92);

  --text-rgb: 245 242 244;
  --color-text: rgb(var(--text-rgb) / 0.87);           /* 13.4:1 on bg */
  --color-text-muted: rgb(var(--text-rgb) / 0.6);      /* 6.7:1 on bg, passes AA */
  --color-text-disabled: rgb(var(--text-rgb) / 0.38);

  --color-border: rgb(255 255 255 / 0.08);             /* dividers */
  --color-border-strong: rgb(255 255 255 / 0.16);      /* control outlines */

  /* Full pink for filled shapes (buttons, marquee, badges) with dark text on top.
     A lighter, less saturated pink for pink text and thin lines, so it does not
     glow past its edges on the dark background. */
  /* Saturated colour glows on dark and outshines the content, so the brand pink used on
     screen is desaturated (same hue 324, about 55-60% saturation). The full #ff4fb8 stays in
     the primitive scale for print and reference only. */
  --color-brand: #e265b0;                              /* fills and Rei's headline word; sat 68%, 6.3:1 on bg, dark text on it 6.2:1 */
  --color-brand-hover: #ea86c2;                        /* lighter on hover */
  --color-brand-text: #e8a2cb;                         /* pink text and hairlines, sat 60%, 9.8:1 on bg */
  --color-brand-deep: #401c32;                         /* deep plum surface for large brand areas */
  --color-on-brand: var(--pink-900);
  --color-focus: var(--color-brand-text);

  /* Photos are dimmed so a bright image never outshines the page.
     Illustrations are drawn dark instead of filtered. */
  --photo-filter: brightness(0.9);
  /* Reserved for forms (e.g. a future newsletter sign-up). AA on --color-bg. */
  --color-success: #3ddc97;
  --color-error: #ff6b6b;

  /* ---------- 2. Type ---------- */
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* role: size / line height. Display roles use Anton at its single weight. */
  --text-display: clamp(3.5rem, 10.5vw, 9.5rem);   --leading-display: 0.86;
  --text-h1: clamp(3rem, 9vw, 7.5rem);             --leading-h1: 0.9;
  --text-h2: clamp(2.5rem, 7vw, 5rem);             --leading-h2: 0.95;
  --text-h3: clamp(1.75rem, 3.5vw, 2.75rem);       --leading-h3: 1;
  --text-title: 1.5rem;                            --leading-title: 1;
  --text-lead: clamp(1.125rem, 1.6vw, 1.375rem);   --leading-lead: 1.5;
  --text-body: 1.0625rem;                          --leading-body: 1.6;
  --text-small: 0.9375rem;                         --leading-small: 1.5;
  --text-xs: 0.8125rem;                            --leading-xs: 1.2;

  --measure: 62ch;

  /* ---------- 3. Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  /* Fluid steps, still on the grid at both ends. */
  --gutter: clamp(16px, 4vw, 40px);
  --space-section: clamp(48px, 7vw, 96px);
  --space-stack: clamp(32px, 5vw, 56px);
  --tap-min: 44px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ---------- 5. Motion ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-standard: ease;
  --duration-fast: 160ms;      /* press, hover colour, exits */
  --duration-base: 240ms;      /* toggles, wipes, state changes */
  --duration-slow: 600ms;      /* scroll reveals (decorative, never blocking) */
  --duration-entrance: 800ms;  /* one-time page-load entrance */
  --stagger: 80ms;
}

@media (max-width: 767px) {
  :root { --text-display: clamp(3.5rem, 16vw, 5rem); }
}

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

html {
  background: var(--color-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Grain: fixed and non-interactive, so scrolling never repaints it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--color-brand); color: var(--color-on-brand); }

a { color: inherit; }

:focus-visible {
  /* The ring follows each element's own radius (outer = inner + gap). */
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-h1); }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }

p { margin: 0 0 1em; max-width: var(--measure); }

.text-lead { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-text-muted); }
.text-small { font-size: var(--text-small); line-height: var(--leading-small); }

.skip {
  position: absolute;
  left: var(--space-2);
  top: -60px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.skip:focus { top: var(--space-2); }

/* ---------- 4. Components ---------- */

/* Button: .btn + one variant (.btn-primary / .btn-ghost / .btn-quiet), optional .btn-sm.
   States: default, hover (mouse only), active (press), focus-visible, disabled. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: var(--tap-min); padding: var(--space-2) var(--space-4); }
.btn-primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.btn-quiet { border-width: 1px; border-color: var(--color-border-strong); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--color-text); color: var(--color-bg); }
  .btn-primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); color: var(--color-on-brand); }
  .btn-quiet:hover { background: transparent; border-color: var(--color-brand-text); color: var(--color-brand-text); }
}
/* On a pink surface the pink focus ring would vanish. */
.on-brand :focus-visible { outline-color: var(--color-on-brand); }

/* Icon button: square, icon-only, needs an aria-label. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition:
    transform var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.icon-btn svg { width: 24px; height: 24px; fill: currentColor; }
.icon-btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { border-color: var(--color-text-muted); color: var(--color-text); }
}

/* Badge: short status label, e.g. "New". */
.badge {
  display: inline-block;
  vertical-align: 0.35em;
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-xs);
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
}

/* Teeth: the sawtooth edge that marks the brand. Add .down to flip it. */
.teeth {
  height: var(--space-3);
  background: conic-gradient(from -45deg at 50% 100%, var(--color-brand) 90deg, transparent 0) 0 0 / var(--space-6) var(--space-3) repeat-x;
}
.teeth.down { transform: scaleY(-1); }

/* Player: a link to Spotify that JS upgrades to the embedded player on tap.
   .player-facade--lg for the tall variant. */
.player-label { display: block; font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.player-label strong { color: var(--color-brand-text); }
.player-facade {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  height: 80px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-standard);
}
.player-facade:active { transform: scale(0.98); }
/* Concentric corners: inner radius = outer (12) minus padding (8). */
.player-facade img { width: 64px; height: 64px; border-radius: var(--radius-sm); flex: none; }
.facade-text { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.facade-title {
  font-weight: var(--weight-bold);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.facade-note { color: var(--color-text-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.facade-play {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-on-brand);
  flex: none;
  transition: transform var(--duration-fast) var(--ease-out);
}
.facade-play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 2px; }
@media (hover: hover) and (pointer: fine) {
  .player-facade:hover { border-color: var(--color-brand-text); }
  .player-facade:hover .facade-play { transform: scale(1.06); }
}
.player-facade--lg { height: 152px; }
.player-facade--lg img { width: 120px; height: 120px; }
.player-facade--lg .facade-title { font-size: var(--text-lead); }
.player-frame {
  display: block;
  width: 100%;
  height: 80px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.player-frame--lg { height: 152px; }
.player-frame.is-loading { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
.open-app {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  text-underline-offset: var(--space-1);
  transition: color var(--duration-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .open-app:hover { color: var(--color-text); }
}

/* Masked line reveal for display headings: wrap each line in .line > span. */
.line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.line > span { display: block; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { transform: translateY(105%); } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(var(--space-3)); } }
}