/* Shared chrome for the woodshedmusic.studio SUBPAGES (whats-new/, faq/):
   fonts, tokens, nav, page header, footer — extracted so a brand tweak is one
   edit, not one per page. The main index.html deliberately keeps its own
   inline copy (single self-contained page, LCP-critical); a change here that
   alters shared look should be mirrored there. Subpages trade the rain canvas
   for the still ember wash on body. No build step — plain <link>. */

/* ── Fonts (self-hosted subsets; no CDN — same faces as the main page) ── */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:600 900; font-display:swap;
  src:url("fonts/archivo-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:600 900; font-display:swap;
  src:url("fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/instrument-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212; }
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/instrument-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-024F,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family:'Instrument Sans'; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/instrument-italic-latin.woff2") format('woff2'); }

/* ── Stage (the main page's tokens; still ember wash, no rain) ─────────── */
:root {
  --bg:#0B0709; --ink:#F7E9E4; --dim:rgba(247,233,228,.72); --faint:rgba(247,233,228,.52);
  --ember:#FF8C1A; --amberlt:#FFB347; --gold:#FFD23F;
  --line:rgba(247,233,228,.12); --card:rgba(11,7,9,.72);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); overflow-x:hidden;
  font-family:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,140,26,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(198,26,43,.08), transparent 60%);
  background-attachment:fixed; }
a { color:var(--amberlt); text-decoration:none; }
a:hover { color:var(--ember); }
::selection { background:var(--gold); color:var(--bg); }

/* ── Nav (the main page's pill, with the subpage's short link set) ────── */
nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:16px 28px; pointer-events:none;
  background:linear-gradient(rgba(11,7,9,.85), transparent); }
nav .brand { height:28px; display:block; pointer-events:auto; }
.navlinks { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:2px;
  pointer-events:auto; background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:5px 8px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.navlinks a { font:600 12.5px/1 'Instrument Sans',sans-serif; letter-spacing:.02em; color:var(--faint);
  padding:8px 13px; border-radius:999px; white-space:nowrap; }
.navlinks a:hover { color:var(--ink); }
.navlinks a.on { color:var(--bg); background:var(--ember); }
nav .cta { pointer-events:auto; background:var(--ember); color:var(--bg); font-size:14px; font-weight:700;
  padding:9px 18px; border-radius:999px; }
nav .cta:hover { color:var(--bg); filter:brightness(1.08); }
@media (max-width:720px){ .navlinks { position:static; transform:none; } nav { justify-content:flex-start; } nav .cta { display:none; } }

/* ── Page header + body column ────────────────────────────────────────── */
header.page { max-width:840px; margin:0 auto; padding:150px 6vw 24px; }
.kicker { margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amberlt); }
header.page h1 { font-family:Archivo,sans-serif; font-weight:900; font-size:clamp(34px,5vw,58px);
  line-height:1.02; letter-spacing:-.03em; margin:0; }
header.page h1 em { font-style:normal; color:var(--ember); }
header.page .sub { font-size:clamp(15px,1.4vw,18px); line-height:1.55; color:var(--dim); max-width:58ch; margin:18px 0 0; }
main { max-width:840px; margin:0 auto; padding:24px 6vw 80px; }

/* A dashed aside that talks back to the reader (the requests box, the
   contact box). */
.callout { margin:34px 0 0; padding:22px 26px; border:1px dashed rgba(255,179,71,.35);
  border-radius:14px; color:var(--dim); font-size:15px; line-height:1.6; }
.callout strong { color:var(--ink); }

/* ── Reveal-in (the main page's idiom) ────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ── Footer ───────────────────────────────────────────────────────────── */
footer { position:relative; border-top:1px solid var(--line); background:var(--card);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
footer .inner { max-width:840px; margin:0 auto; padding:40px 6vw 48px; }
footer .brand { height:34px; margin-bottom:22px; }
footer .meta p { margin:0 0 8px; color:var(--faint); font-size:13px; }
footer .links { display:flex; flex-wrap:wrap; gap:8px 20px; }
footer .links a { font:600 13px/1.2 'Instrument Sans',sans-serif; color:var(--dim); }
footer .links a:hover { color:var(--ink); }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
}