/* ══════════════════════════════════════════════════════════════════════
   TuneTreehouse — Global Stylesheet   (public/css/styles.css)
   ──────────────────────────────────────────────────────────────────────
   Cinematic design system for the single-page site.
   Stack: vanilla CSS, no build step, zero dependencies (decision D-1).

   Blocker B1 (brand colours + typography) — RESOLVED 2026-11-05.
   The PLACEHOLDER :root tokens that used to live inside <style> in
   public/index.html have been removed; this file is now the single
   source of truth for every design token.

   Conventions (systemPatterns.md §7):
     • Tokens first — no raw colour / font / radius values inside rules.
     • Mobile-first — the base rules ARE the mobile layout; desktop
       overrides live in the trailing `min-width:769px` query, which
       mirrors the hero art-direction breakpoint (D-4).
     • `prefers-reduced-motion` honoured at the foot of this file.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Webfonts ───────────────────────────────────────────────────────────
   Outfit → headings (--font-heading)    Inter → body copy (--font-body)
   `@import` must be the first rule in a stylesheet. The matching
   <link rel="preconnect"> hints sit in public/index.html <head> so both
   Google origins are warmed up before this sheet is parsed.
   ───────────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap");

/* ══ DESIGN TOKENS ═════════════════════════════════════════════════════
   ★ marks the eight tokens mandated by the B1 brand ruling. Everything
   else in this block is DERIVED from those four colours — no fifth brand
   colour is ever introduced.
   ═════════════════════════════════════════════════════════════════════ */
:root{
  /* ★ Brand palette (B1) */
  --color-twilight:#0B192C;      /* deep twilight blue — primary background    */
  --color-glow:#F8B179;          /* warm amber — buttons, highlights, glow     */
  --color-festive-red:#C62828;   /* classic red — accents (decorative only)    */
  --color-icy-blue:#E0F2FE;      /* crisp winter white/blue — text, secondary  */

  /* ★ Typography (B1) */
  --font-heading:'Outfit', sans-serif;
  --font-body:'Inter', sans-serif;

  /* ★ Shape & light (B1) — replaces harsh, rigid lines with an organic feel */
  --radius-organic:12px;
  --shadow-glow:0 4px 20px rgba(248, 177, 121, 0.15);

  /* ── Derived semantic tokens ──────────────────────────────────────────
     Surfaces are icy-blue laid over twilight at low alpha, so panels read
     as "lighter night sky" rather than as a new colour.
     Contrast ratios below are measured against --color-twilight.        */
  --color-surface:rgba(224,242,251,.05);
  --color-border:rgba(224,242,251,.14);
  --color-text:var(--color-icy-blue);              /* ~15.5:1 */
  --color-muted:rgba(224,242,251,.66);             /* ~7.2:1  — WCAG AA  */
  --color-on-glow:var(--color-twilight);           /* 9.8:1 on amber.    */

  /* Layout tokens — carried over from the skeleton. Not brand values. */
  --max:72rem;
  --gap:clamp(3rem,8vw,6rem);

  color-scheme:dark;
}

/* ══ RESET & BASE ══════════════════════════════════════════════════════
   Background is a single flat twilight field: clean and cinematic, with
   no grain, noise or texture overlays.
   ═════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--color-twilight);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,picture,video,iframe,svg{max-width:100%}
img{height:auto}

/* ══ TYPOGRAPHY ══════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--color-icy-blue);
  margin:0 0 .5em;
  text-wrap:balance;
}

a{color:var(--color-glow);text-underline-offset:.2em}
a:hover,a:focus-visible{color:var(--color-icy-blue)}

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

:focus-visible{outline:2px solid var(--color-glow);outline-offset:3px}

.copy-tbd{color:var(--color-muted);font-style:italic}

/* ── Visually-hidden utility (a11y) ─────────────────────────────────────
   Hides text visually while KEEPING it in the accessibility tree — unlike
   display:none / visibility:hidden, which would remove it entirely. Used by
   the YouTube CTA to announce that it opens in a new tab, so the accessible
   name still contains the visible label (WCAG 2.5.3 Label in Name).      */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ══ BUTTONS ══════════════════════════════════════════════════════════
   Organic radius + amber glow, per B1 step 4.
   Amber is a LIGHT fill, so the label is twilight: white on #F8B179
   measures only 1.8:1 and would fail WCAG, while twilight on amber
   measures 9.8:1. Hover brightens with `filter` so no new hex value is
   added to the palette.
   ═════════════════════════════════════════════════════════════════════ */
.cta,
.btn,
button{
  display:inline-block;
  background:var(--color-glow);
  color:var(--color-on-glow);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:700;
  line-height:1.2;
  padding:.85rem 1.7rem;
  border:0;
  border-radius:var(--radius-organic);
  box-shadow:var(--shadow-glow);
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.cta:hover,.btn:hover,button:hover{
  filter:brightness(1.07);
  box-shadow:0 6px 28px rgba(248,177,121,.32);
  transform:translateY(-2px);
}
.cta:active,.btn:active,button:active{
  filter:none;transform:translateY(0);box-shadow:var(--shadow-glow);
}

/* ── Skip link (a11y) ── */
.skip-link{position:absolute;left:-999px;top:0;background:var(--color-glow);
  color:var(--color-on-glow);padding:.6rem 1rem;font-weight:700;
  text-decoration:none;border-radius:0 0 var(--radius-organic) 0;z-index:10}
.skip-link:focus{left:0}

/* ══ HEADER ══════════════════════════════════════════════════════════ */
.site-header{border-bottom:1px solid var(--color-border)}
.site-header .bar{max-width:var(--max);margin:0 auto;padding:.75rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
/* ── Logo contrast plate (TEMPORARY — tied to D-7) ──────────────────────
   The interim logo.png artwork is DARK on transparency, so the treehouse
   lines vanish against the twilight background — measured: the artwork's
   dominant fill #0B183A is 1.01:1 on twilight (invisible) and ~15.2:1 on
   this plate, which is itself 15.38:1 on the page background. The padding
   keeps the artwork off the plate edge
   so it reads as a framed box, and --radius-organic matches every other
   framed container. box-sizing:border-box (reset) means the plate fits
   inside the existing 2.75rem footprint, so there is no layout shift.
   DELETE the background + padding here and on .footer-logo once the
   deferred logo.svg (Solomon Augusteyn) delivers contrast-safe artwork. */
.brand img{width:2.75rem;height:2.75rem;object-fit:contain;
  background-color:var(--color-icy-blue);padding:.5rem;   /* 8px  */
  border-radius:var(--radius-organic)}
.brand-name{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;
  letter-spacing:.01em}
.site-nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.site-nav a{text-decoration:none;font-weight:600}

/* ══ HERO ══════════════════════════════════════════════════════════════
   The hero is deliberately FULL-BLEED: it is edge-to-edge art direction,
   not a framed image container, so it carries no radius and no glow.
   Rounding it would crop the cinematic frame and fight the "Disney/Pixar
   polish" bar. Framed containers (poster, stills) DO get the same
   organic radius + glow — see the release section below.
   ═════════════════════════════════════════════════════════════════════ */
.hero{margin:0}
.hero-img{display:block;width:100%;height:auto}

/* The mobile source is 768x1376 while the desktop source is 3168x1344
   (~21:9), so the reserved ratio must flip at the breakpoint or the
   layout will shift when the mobile image loads.
   ⚠ UPDATED 2026-11-05 (I-15): the owner's UNLOGGED commit f69c043
     ("changed hero artwork") replaced BOTH hero files at new dimensions,
     so this ratio no longer matched disk. It now does, following the D-8
     precedent — markup tracks the delivered file, while blueprints/assets.md
     §2 RETAINS the strict 1080x1920 spec unchanged. Ratification pending. */
@media (max-width:768px){.hero-img{aspect-ratio:768/1376;object-fit:cover}}

.hero-copy{max-width:var(--max);margin:0 auto;padding:1.5rem 1rem;text-align:center}
.hero-copy h1{font-size:clamp(2rem,6vw,3.5rem);font-weight:800}
.tagline{font-size:clamp(1rem,2.5vw,1.35rem);color:var(--color-muted);margin:0 0 1.25rem}

/* ── Accent bar ───────────────────────────────────────────────────────
   The one place --color-festive-red is consumed. It is DECORATIVE ONLY:
   #C62828 on #0B192C measures just 3.1:1, so festive red must never be
   used for body text on twilight. As a non-text graphic it is exempt
   from the WCAG contrast minimums, and the amber→red gradient keeps both
   mandated accent colours in play.                                     */
.hero-copy h1::after,
.section h2::after{content:"";display:block;width:3.5rem;height:3px;
  margin-top:.65rem;border-radius:999px;
  background:linear-gradient(90deg,var(--color-glow),var(--color-festive-red))}
.hero-copy h1::after{margin-left:auto;margin-right:auto}

/* ══ SECTIONS ════════════════════════════════════════════════════════ */
.section{max-width:var(--max);margin:0 auto;padding:var(--gap) 1rem}
.section h2{font-size:clamp(1.6rem,4vw,2.4rem)}

/* ── Release announcement tag ───────────────────────────────────────────
   Added 2026-11-05 alongside the owner-supplied Hero + Release copy
   (B2 partial / blueprint R-5). An italic amber "eyebrow" line that sits
   between the h2 accent bar and the release grid, so the release reads as
   an upcoming premiere. Still accurate while the YouTube URL is unsupplied
   (B3), and it must be reworded the moment that link goes live (I-13).
   Contrast: amber on twilight measures 9.8:1, so --color-glow is safe as
   real text here. --color-festive-red was NOT used - at 3.1:1 it stays
   decorative-only (§7). The italics come from the semantic <em> in
   index.html rather than from font-style, so the emphasis is announced by
   screen readers and survives a failed stylesheet load.
   Left-aligned to match every other .section heading (only .hero-copy is
   centred).                                                       */
.announcement{margin:.9rem 0 2rem;color:var(--color-glow);
  font-size:clamp(.95rem,2.4vw,1.15rem);font-weight:600;letter-spacing:.045em}

.release-grid{display:grid;gap:1.5rem}

/* ── Image containers → organic radius + amber glow (B1 step 4) ──
   The former 16:9 player container and its pending-copy box were DELETED
   2026-11-05 when the owner retired the on-page embed in favour of an
   outbound YouTube CTA (D-12). This project keeps dead code out of the
   sheet, so they were removed rather than commented out — and their class
   names are deliberately NOT repeated here, so a grep for them returns
   zero hits and the removal stays verifiable.                          */

/* ── Release CTA (D-12) ─────────────────────────────────────────────────
   Sits beside the album cover in .release-grid and carries the traffic out
   to YouTube, where the engagement metrics are captured. Built from the
   existing .cta component plus a size modifier — TOKEN-ONLY: no new token
   and no fifth brand colour (§7). The label keeps --color-on-glow (twilight
   on amber = 9.8:1); white on amber measures 1.8:1 and is forbidden.
   The play triangle is drawn from borders in currentColor, so it inherits
   the label colour and adds no hex value to the palette.
   Centred at every width: it is a call to action, not body copy, so the
   left-alignment convention for .section headings does not apply.        */
.release-cta{display:flex;flex-direction:column;justify-content:center;
  align-items:stretch;gap:1rem;text-align:center}
.cta-youtube{width:100%;font-size:clamp(1.05rem,2.6vw,1.25rem);
  padding:1.1rem 2.2rem;letter-spacing:.01em}
.cta-youtube::before{content:"";display:inline-block;width:0;height:0;
  margin-right:.65rem;vertical-align:middle;
  border-left:.7em solid currentColor;
  border-top:.45em solid transparent;border-bottom:.45em solid transparent}

.poster{margin:0}
.poster img{display:block;width:100%;height:auto;
  border-radius:var(--radius-organic);box-shadow:var(--shadow-glow)}
.poster figcaption{color:var(--color-muted);font-size:.9rem;margin-top:.5rem}

/* Pre-staged for blocker B4: styles are ready so the stills block in
   index.html can simply be uncommented once the files are delivered. */
.still-grid{display:grid;gap:1rem;margin-bottom:2rem}
.still-grid img{display:block;width:100%;height:auto;
  border-radius:var(--radius-organic);box-shadow:var(--shadow-glow)}

.bio-grid{display:grid;gap:1.5rem}
.bio{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-organic);box-shadow:var(--shadow-glow);padding:1.25rem}
.bio h3{margin-bottom:.15rem;color:var(--color-glow)}
.bio .role{color:var(--color-muted);font-weight:600;margin:0 0 .75rem;font-size:.95rem}

/* ══ FOOTER ══════════════════════════════════════════════════════════ */
.site-footer{border-top:1px solid var(--color-border);padding:var(--gap) 1rem;
  text-align:center;background:var(--color-surface)}
.site-footer .brand-name{margin:.5rem 0}
/* Same temporary contrast plate as .brand img in the header (see the note
   there): icy-blue background + padding + organic radius so the dark
   interim logo.png reads against the twilight footer. Remove together
   with the header plate when logo.svg lands (D-7). */
.footer-logo{width:4rem;height:4rem;object-fit:contain;
  background-color:var(--color-icy-blue);padding:.75rem;  /* 12px */
  border-radius:var(--radius-organic)}
.legal{color:var(--color-muted);font-size:.85rem}

/* ══ DESKTOP ═══════════════════════════════════════════════════════════
   Mobile-first: everything above IS the mobile base. 769px mirrors the
   hero art-direction breakpoint so structure and imagery switch together.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px){
  /* Cover-led layout (D-12): the square album cover takes the wide column and
     the YouTube CTA the narrow one, vertically centred against it. The 1.6fr
     ratio was originally sized for a 16:9 player beside the cover and is
     retained because it still gives the square art the dominant share.   */
  .release-grid{grid-template-columns:1.6fr 1fr;align-items:center}
  .bio-grid{grid-template-columns:1fr 1fr}
  .still-grid{grid-template-columns:repeat(3,1fr)}
}

/* ══ MOTION PREFERENCES ══════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}