/* ==========================================================================
   UNDERCURRENT — COMPONENTS (M1, v2.0)
   One place per pattern. Order: chrome → structure → cards → editorial → forms.
   ========================================================================== */

/* =========================================================
   1. SITE HEADER (fixed nav + brand + mobile disclosure menu)
   ========================================================= */
nav[aria-label="Main"]{
  position:fixed;top:0;left:0;right:0;z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(23,16,7,.78);
  border-bottom:1px solid var(--rule);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;max-width:var(--measure-wide);margin:0 auto;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand-dial{width:26px;height:16px}
.brand-name{font-family:var(--font-serif);font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.brand-name em{font-style:italic;color:var(--accent);font-weight:600}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--text-dim);text-decoration:none;font-size:.88rem;font-weight:600;transition:color var(--t-base)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text)}
.nav-links a.active{color:var(--accent)}
.nav-links a:focus-visible,.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-2)}

/* Mobile disclosure menu — zero-JS, keyboard-native */
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);border:1px solid var(--rule);border-radius:var(--r-2);color:var(--text)}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.nav-menu[open] summary{border-color:var(--accent);color:var(--accent)}
.nav-drawer{position:absolute;right:0;top:calc(100% + 12px);min-width:220px;background:var(--bg-raised);border:1px solid var(--rule);border-radius:var(--r-3);padding:10px;box-shadow:var(--shadow-pop)}
.nav-drawer a{display:flex;align-items:center;min-height:var(--tap-min);padding:0 14px;color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;border-radius:var(--r-2)}
.nav-drawer a:hover{background:var(--bg-inset);color:var(--accent)}
.nav-drawer a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;background:var(--bg-inset)}
.nav-drawer a.active{color:var(--accent)}
@media(max-width:900px){.nav-menu{display:block}.nav-inner{gap:12px}.nav-links{gap:12px}}

/* =========================================================
   2. BREADCRUMBS
   ========================================================= */
.crumbs{margin-bottom:var(--s5)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 var(--s2);list-style:none;font-family:var(--font-mono);font-size:.7rem;letter-spacing:var(--mono-tracking);text-transform:uppercase}
.crumbs li{color:var(--text-dim)}
.crumbs li+li::before{content:"/";margin-right:var(--s2);color:rgba(246,234,211,.55)}
.crumbs a{color:var(--text-dim);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--t-base),border-color var(--t-base)}
.crumbs a:hover{color:var(--accent);border-color:var(--accent)}
.crumbs [aria-current="page"]{color:var(--text)}

/* =========================================================
   3. HERO & THE DIAL (signature atmosphere — homepage/index heads)
   ========================================================= */
header.hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 115%, rgba(255,120,71,.20), transparent 62%),
    radial-gradient(ellipse 70% 45% at 85% -10%, rgba(255,179,71,.08), transparent 55%),
    var(--bg);
}
header.hero.compact{min-height:0;padding:150px 0 60px}
header.hero.fill{min-height:80vh;display:flex;align-items:center}
.hero-inner{position:relative;z-index:2;padding-top:130px;padding-bottom:190px;width:100%}
header.hero.compact .hero-inner{padding:0}
.hero-meta{display:flex;gap:28px;flex-wrap:wrap;color:var(--text-dim);margin-bottom:34px}
.hero-meta .live{color:var(--accent-hot)}
.hero-meta .live::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent-hot);margin-right:8px;box-shadow:0 0 10px var(--accent-hot);
  animation:pulse 2.2s infinite;vertical-align:1px;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero-sub{max-width:520px;color:var(--text-dim);font-size:1.08rem;margin:30px 0 42px}
.hero-sub strong{color:var(--text);font-weight:700}
.hero-sub.centered{margin:26px auto 40px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-ctas.centered{justify-content:center}

.dial-band{position:absolute;left:0;right:0;bottom:0;height:130px;z-index:1;border-top:1px solid var(--rule);background:rgba(31,24,16,.5);backdrop-filter:blur(4px)}
.dial-scale{position:relative;height:100%;max-width:var(--measure-wide);margin:0 auto;padding:0 var(--gutter)}
.dial-ticks{position:absolute;left:32px;right:32px;top:38px;height:34px;display:flex;justify-content:space-between;align-items:flex-start}
.tick{width:1px;background:rgba(246,234,211,.35);height:12px}
.tick.major{height:22px;background:rgba(246,234,211,.6)}
.dial-nums{position:absolute;left:32px;right:32px;top:8px;display:flex;justify-content:space-between;color:var(--dial);font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em}
.needle{
  position:absolute;top:30px;width:2px;height:52px;left:24%;
  background:var(--accent-hot);box-shadow:0 0 12px var(--accent-hot),0 0 40px rgba(255,120,71,.5);
  animation:drift 9s ease-in-out infinite alternate;
}
.needle::after{content:"YOU ARE HERE";position:absolute;top:58px;left:-42px;width:90px;text-align:center;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--accent-hot)}
@keyframes drift{0%{left:24%}50%{left:25.2%}100%{left:23.4%}}

/* =========================================================
   4. SECTIONS, SECTION HEADERS, EYEBROWS
   ========================================================= */
section{position:relative;padding:var(--s11) 0}
section.section-tight{padding-top:var(--s10)}
.tinted{background:var(--bg-raised);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:var(--s9);flex-wrap:wrap}
.eyebrow{color:var(--accent-hot);margin-bottom:14px;display:block}
.sec-link{color:var(--text-dim);text-decoration:none;font-size:.88rem;border-bottom:1px solid transparent;transition:color var(--t-base),border-color var(--t-base)}
.sec-link:hover{color:var(--accent);border-color:var(--accent)}

/* =========================================================
   5. BUTTONS
   ========================================================= */
.btn{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:var(--mono-tracking);text-transform:uppercase;font-weight:700;
  color:var(--bg);background:var(--accent);
  border:none;padding:11px 22px;cursor:pointer;border-radius:var(--r-1);
  box-shadow:var(--glow-amber);text-decoration:none;display:inline-block;
  transition:transform var(--t-fast), box-shadow var(--t-base);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--glow-amber-hover)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--rule-strong);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}

/* =========================================================
   6. CARDS — shared chassis, then variants
   ========================================================= */
.tool,.member,.roster-card,.priority-card,.status-card,.callout,.rumor-meter,.empty-state{
  background:var(--bg-raised);border:1px solid var(--rule);border-radius:var(--r-3);
}
.tool{
  padding:30px 26px;position:relative;overflow:hidden;
  transition:transform var(--t-base),border-color var(--t-base);text-decoration:none;color:inherit;display:block;
}
.tool:hover{transform:translateY(-4px);border-color:rgba(255,179,71,.55)}
.tool:hover .tool-num{color:var(--accent);text-shadow:0 0 14px rgba(255,179,71,.6)}
.tool-num{font-family:var(--font-mono);color:rgba(246,234,211,.55);font-size:.76rem;letter-spacing:var(--mono-tracking);transition:color var(--t-base)}
.tool h3{font-family:var(--font-serif);font-weight:650;font-size:1.2rem;margin:42px 0 10px}
.tool p{color:var(--text-dim);font-size:.9rem}
.tool .soon{position:absolute;top:18px;right:18px;color:var(--accent-hot);font-size:.62rem}

.member{padding:24px}
.member b{font-family:var(--font-serif);font-weight:650;font-size:1.05rem;display:block}
.member span{color:var(--text-dim);font-size:.85rem}
.member-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:10px}
.member-grid.cols-3{grid-template-columns:repeat(3,1fr)}

.status-card{
  border-color:rgba(255,179,71,.35);
  padding:28px 30px;margin:0 0 60px;box-shadow:0 0 40px rgba(255,179,71,.06);
}
.status-card .mono{color:var(--accent-hot);display:block;margin-bottom:10px}
.status-card p{color:var(--text-dim);margin:0}
.status-card p strong{color:var(--text)}
.status-card a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,179,71,.5)}
.status-card a:hover{text-decoration-color:var(--accent)}

.callout{
  border:none;border-left:3px solid var(--accent);border-radius:0 var(--r-3) var(--r-3) 0;
  padding:22px 26px;margin:2em 0;color:var(--text-dim);font-size:.95rem;
}
.callout .mono{color:var(--accent);display:block;margin-bottom:8px}

.rumor-meter{padding:24px 26px;margin:2em 0}
.rumor-meter .mono{color:var(--accent-hot);display:block;margin-bottom:12px}
.meter-track{height:8px;background:var(--bg-inset);border-radius:var(--r-2);overflow:hidden;margin-bottom:10px}
.meter-fill{height:100%;background:linear-gradient(90deg,var(--accent-hot),var(--accent));border-radius:var(--r-2)}
.rumor-meter p{color:var(--text-dim);font-size:.9rem;margin:0}

/* Empty state — honest absence, defined for gated modules (M3+) */
.empty-state{border-style:dashed;background:transparent;padding:44px 28px;text-align:center;color:var(--text-dim);font-size:.95rem}
.empty-state .mono{color:var(--accent);display:block;margin-bottom:10px}

/* =========================================================
   7. ARTIST PREVIEWS (roster page; formerly page-scoped styles)
   ========================================================= */
.roster-tier{margin-bottom:var(--s10)}
.priority-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.priority-card{
  position:relative;display:block;text-decoration:none;color:inherit;
  border-color:rgba(255,179,71,.35);
  padding:38px 34px;overflow:hidden;transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base);
}
.priority-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 120%, rgba(255,120,71,.16), transparent 60%);
}
.priority-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 0 40px rgba(255,179,71,.12)}
.priority-card .mono{color:var(--accent-hot);position:relative}
.priority-card h3{font-family:var(--font-serif);font-style:italic;font-weight:750;font-size:2.1rem;margin:14px 0 10px;position:relative}
.priority-card p{color:var(--text-dim);font-size:.95rem;position:relative;margin-bottom:18px}
.priority-card .go{color:var(--accent);font-size:.85rem;position:relative}
.roster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.roster-card{padding:22px 22px 20px;transition:border-color var(--t-base),background var(--t-base)}
.roster-card:hover{border-color:rgba(255,179,71,.4);background:#241C12}
.roster-card b{font-family:var(--font-serif);font-weight:650;font-size:1.1rem;display:block;margin-bottom:4px}
.roster-card span{color:var(--text-dim);font-size:.85rem;display:block}
.roster-card .mono{color:rgba(246,234,211,.55);display:block;margin-top:12px;font-size:.7rem}

/* =========================================================
   8. HOMEPAGE SPOTLIGHT + ERA STRIP
   ========================================================= */
.spot-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.spot-visual{
  aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:var(--r-3);
  background:
    radial-gradient(ellipse 100% 75% at 50% 100%, rgba(255,120,71,.4), transparent 62%),
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(255,179,71,.12), transparent 60%),
    linear-gradient(180deg,#2A2115,#191209);
  border:1px solid rgba(246,234,211,.15);
}
.spot-visual::before{
  content:"";position:absolute;left:50%;top:58%;width:180px;height:180px;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,179,71,.9), rgba(255,120,71,.55) 55%, transparent 72%);
  filter:blur(6px);
}
.spot-visual::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 14px,rgba(23,16,7,.65) 14px 20px);
}
.spot-band{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;
  text-align:center;font-family:var(--font-serif);font-weight:800;font-style:italic;
  font-size:clamp(3rem,7vw,5.2rem);letter-spacing:.01em;
  color:var(--text);text-shadow:0 0 30px rgba(255,179,71,.55),0 4px 30px rgba(0,0,0,.5);
}
.spot-tag{position:absolute;top:20px;left:20px;color:var(--accent);z-index:2}
.spot-freq{position:absolute;bottom:18px;right:20px;color:var(--text-dim);z-index:2}
.spot-copy h3{font-family:var(--font-serif);font-weight:650;font-size:1.7rem;margin-bottom:16px}
.spot-copy p{color:var(--text-dim);margin-bottom:32px;max-width:46ch}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.stat{padding:20px 4px 0;border-left:1px solid var(--rule);padding-left:18px}
.stat:first-child{border-left:none;padding-left:0}
.stat b{font-family:var(--font-serif);font-weight:700;font-size:1.8rem;display:block;color:var(--accent)}
.stat span{color:var(--text-dim);font-size:.8rem}

.eras{display:flex;gap:2px;margin-top:44px;border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.era{flex:1;padding:16px 14px;background:var(--bg-inset);transition:background var(--t-base);position:relative}
.era:hover{background:#332A1E}
.era::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--era-c,var(--accent))}
.era .mono{color:var(--text-dim);display:block;margin-bottom:6px}
.era b{font-size:.83rem;font-weight:700;display:block;line-height:1.3}

/* =========================================================
   9. ARTICLE PREVIEWS (the Wire list)
   ========================================================= */
.wire-list{border-top:1px solid var(--rule)}
.wire{
  display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:padding-left var(--t-base);
}
.wire:hover{padding-left:14px}
.wire:hover .wire-title{color:var(--accent)}
.wire:focus-visible{outline-offset:-2px}
.wire .mono{color:var(--text-dim)}
.wire-title{font-family:var(--font-serif);font-weight:550;font-size:1.15rem;transition:color var(--t-base)}
.wire-dek{grid-column:2;color:var(--text-dim);font-size:.9rem;margin-top:4px}
.wire-cat{color:var(--accent-hot)}
.wire-cat.rumor{color:#D98E5F}

/* =========================================================
   10. ARTICLE PAGES + METADATA ROWS + PAGE LOG
   ========================================================= */
article.post{padding:150px 0 90px}
.post-kicker{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.post-kicker .k-cat{color:var(--accent-hot)}
.post-kicker .k-dim{color:var(--text-dim)}
.post h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:600;line-height:1.1;margin-bottom:22px}
.post .dek{font-size:1.2rem;color:var(--text-dim);font-family:var(--font-serif);font-weight:400;font-style:italic;margin-bottom:28px;line-height:1.5}

/* Metadata rows — one chassis, three contexts */
.post-meta,.band-facts{display:flex;flex-wrap:wrap;color:var(--text-dim)}
.post-meta{gap:22px;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:44px}
.band-facts{gap:34px;margin-top:26px}
.band-facts span b{color:var(--text);font-weight:700}

.post-body{margin-top:0}
.post-body.pad-top{margin-top:30px}
.post-body p{margin-bottom:1.4em;color:var(--prose)}
.post-body p:first-of-type::first-letter{
  font-family:var(--font-serif);font-weight:700;font-style:italic;color:var(--accent);
  font-size:3.4em;float:left;line-height:.85;padding-right:10px;
}
.post-body h2{font-size:1.5rem;margin:1.8em 0 .7em;font-family:var(--font-serif);font-weight:650}
.post-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(255,179,71,.4)}
.post-body a:hover{border-color:var(--accent)}
.post-body ul{margin:0 0 1.4em 1.2em;color:var(--prose)}
.post-body li{margin-bottom:.5em}

.sources{margin-top:56px;padding-top:28px;border-top:1px solid var(--rule)}
.sources .mono{color:var(--accent);display:block;margin-bottom:14px}
.sources li{color:var(--text-dim);font-size:.88rem;margin-bottom:8px;list-style:none}

.page-log{color:var(--text-dim);font-size:.68rem;margin-top:48px;padding-top:18px;border-top:1px solid var(--rule)}

/* =========================================================
   11. STATUS BADGES
   ========================================================= */
.tag-status{display:inline-block;padding:3px 10px;border-radius:var(--r-1);font-family:var(--font-mono);font-size:.68rem;letter-spacing:var(--mono-tracking);text-transform:uppercase;vertical-align:2px}
.tag-status.confirmed{background:rgba(255,179,71,.15);color:var(--accent);border:1px solid rgba(255,179,71,.4)}
.tag-status.reported{background:rgba(232,213,163,.1);color:var(--dial);border:1px solid rgba(232,213,163,.35)}
.tag-status.rumor{background:rgba(255,120,71,.12);color:var(--accent-hot);border:1px solid rgba(255,120,71,.4)}

/* =========================================================
   12. ARTIST HUB CHROME + DISCOGRAPHY TABLE
   ========================================================= */
.band-hero{
  position:relative;padding:170px 0 80px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 115%, rgba(255,120,71,.18), transparent 62%),
    var(--bg);
  border-bottom:1px solid var(--rule);
}
.band-hero h1{font-style:italic;font-weight:750}
.disco{width:100%;border-collapse:collapse;margin-top:10px}
.disco th{font-family:var(--font-mono);font-size:.72rem;letter-spacing:var(--mono-tracking);text-transform:uppercase;color:var(--text-dim);text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule)}
.disco td{padding:16px;border-bottom:1px solid var(--rule);font-size:.95rem}
.disco td:first-child{font-family:var(--font-serif);font-weight:600}
.disco .yr{font-family:var(--font-mono);color:var(--accent)}

/* =========================================================
   13. CTA + NEWSLETTER FORM
   ========================================================= */
.cta{
  text-align:center;
  background:
    radial-gradient(ellipse 60% 85% at 50% 125%, rgba(255,179,71,.16), transparent 62%),
    var(--bg);
}
.cta h2{font-size:clamp(2.3rem,5vw,4.1rem);margin-bottom:18px}
.cta p{color:var(--text-dim);max-width:46ch;margin:0 auto 40px}
.join-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:480px;margin:0 auto}
.join-form input[type="email"]{
  flex:1;min-width:240px;background:var(--bg-raised);border:1px solid var(--rule-strong);
  border-radius:var(--r-1);padding:12px 16px;color:var(--text);font-family:var(--font-sans);font-size:.95rem;
}
.join-form input[type="email"]::placeholder{color:var(--text-dim)}
.join-form input[type="email"]:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--accent)}

/* =========================================================
   14. FOOTER
   ========================================================= */
footer{border-top:1px solid var(--rule);padding:56px 0 40px;color:var(--text-dim);font-size:.87rem}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.foot-col a{display:block;color:var(--text-dim);text-decoration:none;margin-bottom:10px;transition:color var(--t-base)}
.foot-col a:hover{color:var(--text)}
.foot-col .mono{color:var(--accent);display:block;margin-bottom:16px}
.foot-about{max-width:280px}
.foot-about p{font-size:.85rem}
.foot-brand{margin-bottom:16px}
.foot-soon{display:block;margin-bottom:10px;color:var(--text-dim)}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:24px}
.foot-base.bare{border-top:none;padding-top:0}

/* =========================================================
   15. RESPONSIVE GRID COLLAPSES
   ========================================================= */
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){
  .spot-grid{grid-template-columns:1fr;gap:40px}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .member-grid,.member-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .eras{flex-wrap:wrap}
  .era{flex:1 1 45%}
  .nav-links a:not(.btn){display:none}
  .needle::after{display:none}
  .priority-grid{grid-template-columns:1fr}
  .roster-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .tools-grid,.member-grid,.member-grid.cols-3,.roster-grid{grid-template-columns:1fr}
  .wire{grid-template-columns:1fr;gap:6px}
  .wire-dek{grid-column:1}
  .wrap,.wrap-narrow{padding:0 20px}
  .nav-inner{padding:0 20px}
}

/* =========================================================
   16. ARTIST HUB MODULES (M3 Phase 0)
   ========================================================= */
/* Masthead ident line */
.hub-ident{color:var(--text-dim);font-size:1.08rem;max-width:56ch;margin-top:18px;font-family:var(--font-serif);font-style:italic}

/* On-this-page jump index (derived from live modules only) */
.hub-index{border-bottom:1px solid var(--rule);background:rgba(31,24,16,.5)}
.hub-index .wrap{display:flex;gap:4px 18px;flex-wrap:wrap;align-items:center;padding-top:14px;padding-bottom:14px}
.hub-index-label{color:var(--accent-hot);margin-right:6px}
.hub-index a{color:var(--text-dim);text-decoration:none;font-size:.82rem;font-weight:600;padding:6px 0;transition:color var(--t-base)}
.hub-index a:hover{color:var(--accent)}

/* Latest verified update */
.update-card{background:var(--bg-raised);border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:0 var(--r-3) var(--r-3) 0;padding:24px 28px;margin-top:26px}
.update-card>.mono{color:var(--accent);display:block;margin-bottom:10px}
.update-card p{color:var(--text-dim)}
.update-card p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,179,71,.5)}
.update-card p a:hover{text-decoration-color:var(--accent)}
.update-source{display:block;margin-top:12px;color:rgba(246,234,211,.55)}

/* Overview prose */
.overview-p{color:var(--prose);max-width:70ch;margin-bottom:1.2em}

/* Essential facts */
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-3);overflow:hidden}
.fact{background:var(--bg-raised);padding:20px 22px}
.fact dt{color:var(--accent);margin-bottom:6px}
.fact dd{color:var(--text);font-size:.95rem;line-height:1.4}

/* Discography extras */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.disco{min-width:640px}
.disc-type{color:var(--text-dim);white-space:nowrap}
.disco td a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,179,71,.35)}
.disco td a:hover{color:var(--accent);border-color:var(--accent)}
.disco-note{color:var(--text-dim);font-size:.85rem;margin-top:14px}

/* Era guide */
.era-list{display:grid;gap:20px}
.era-card{background:var(--bg-raised);border:1px solid var(--rule);border-left:3px solid var(--era-c,var(--accent));border-radius:0 var(--r-3) var(--r-3) 0;padding:26px 30px;scroll-margin-top:90px}
.era-card-head{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.era-card-head .mono{color:var(--text-dim)}
.era-card h3{font-family:var(--font-serif);font-weight:650;font-size:1.35rem}
.era-card p{color:var(--text-dim);max-width:72ch}
.era-key{display:block;margin-top:14px;color:var(--accent)}

/* Essential songs */
.module-note{color:var(--text-dim);margin-bottom:22px;display:block}
.song-list{list-style:none;counter-reset:song;border-top:1px solid var(--rule)}
.song{display:grid;grid-template-columns:auto 1fr auto;gap:6px 20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule);counter-increment:song}
.song::before{content:counter(song,decimal-leading-zero);font-family:var(--font-mono);font-size:.74rem;color:rgba(246,234,211,.55);grid-row:span 2}
.song-title{font-family:var(--font-serif);font-weight:600;font-size:1.1rem}
.song-era{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(255,179,71,.35)}
.song-era:hover{border-color:var(--accent)}
.song-line{grid-column:2/4;color:var(--text-dim);font-size:.9rem}

/* Start here */
.start-card{background:var(--bg-raised);border:1px solid rgba(255,179,71,.35);border-radius:var(--r-3);padding:28px 30px;box-shadow:0 0 40px rgba(255,179,71,.06)}
.start-card>.mono{color:var(--accent-hot);display:block;margin-bottom:12px}
.start-primary{color:var(--text-dim)}
.start-primary a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,179,71,.5)}
.start-primary a:hover{text-decoration-color:var(--accent)}
.start-paths{list-style:none;margin-top:20px;border-top:1px solid var(--rule)}
.start-paths li{display:flex;gap:16px;justify-content:space-between;align-items:baseline;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--rule)}
.path-if{color:var(--text-dim);font-size:.92rem}
.path-then{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,179,71,.5);font-weight:600}
.path-then:hover{text-decoration-color:var(--accent)}

/* FAQ — native disclosure, keyboard-first */
.faq-list{border-top:1px solid var(--rule)}
.faq{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;min-height:var(--tap-min)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--accent);font-size:1.1rem;transition:transform var(--t-base)}
.faq[open] summary::after{content:"\2212"}
.faq summary:hover .faq-q{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r-2)}
.faq-q{font-family:var(--font-serif);font-weight:600;font-size:1.1rem;transition:color var(--t-base)}
.faq-a{padding:0 4px 22px;color:var(--text-dim);max-width:74ch}
.faq-a a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,179,71,.5)}
.faq-a a:hover{text-decoration-color:var(--accent)}
.faq-meta{display:block;margin-top:12px;color:rgba(246,234,211,.55)}

/* About this page */
.about-page-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.ap-label{color:var(--accent);display:block;margin-bottom:14px}
.ap-log{list-style:none}
.ap-log li{color:var(--text-dim);font-size:.9rem;padding:10px 0;border-bottom:1px solid var(--rule)}
.ap-log .mono{color:var(--accent);margin-right:12px}
.ap-sources{margin-top:0;padding-top:0}

@media(max-width:900px){
  .facts-grid{grid-template-columns:repeat(2,1fr)}
  .about-page-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:560px){
  .facts-grid{grid-template-columns:1fr}
  .song{grid-template-columns:auto 1fr}
  .song-era{grid-column:2}
  .song-line{grid-column:2}
}
.post-kicker a.k-link{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(246,234,211,.35)}
.post-kicker a.k-link:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* =========================================================
   17. LIVING TRACKER MODULES
   ========================================================= */
.trk-hero{padding-bottom:60px}
.trk-hero h1{font-style:normal;font-weight:600}
.trk-hero h1 em{font-style:italic;font-weight:750}
.trk-artist-link{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(246,234,211,.35)}
.trk-artist-link:hover{color:var(--accent);text-decoration-color:var(--accent)}
.trk-h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}

/* The answer — the query answered at the top */
.answer-card{background:var(--bg-raised);border:1px solid rgba(255,179,71,.35);border-radius:var(--r-3);padding:30px 32px;box-shadow:0 0 40px rgba(255,179,71,.06)}
.answer-q{font-family:var(--font-serif);font-weight:650;font-size:1.45rem;margin-bottom:14px;color:var(--accent)}
.answer-a{color:var(--prose)}
.answer-a strong,.answer-a b{color:var(--text)}

/* Confirmed facts */
.conf-list{list-style:none;border-top:1px solid var(--rule)}
.conf-list li{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--rule);color:var(--prose)}
.conf-date{color:var(--accent);padding-top:3px}

/* Evidence log timeline */
.tl-list{list-style:none;position:relative;margin-top:30px}
.tl-list::before{content:"";position:absolute;left:130px;top:0;bottom:0;width:1px;background:var(--rule)}
.tl-entry{display:grid;grid-template-columns:110px 1fr;gap:40px;padding:0 0 34px;position:relative}
.tl-entry::before{content:"";position:absolute;left:126px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.tl-date{color:var(--accent);text-align:right;padding-top:2px}
.tl-body p{color:var(--prose);margin:8px 0 10px;max-width:64ch}
.tl-body p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,179,71,.5)}
.tl-body p a:hover{text-decoration-color:var(--accent)}
.tl-source{color:rgba(246,234,211,.55)}

.tl-class{display:block}

/* Analysis */
.analysis-list{list-style:none;border-top:1px solid var(--rule)}
.analysis-list li{padding:16px 0;border-bottom:1px solid var(--rule);color:var(--text-dim);max-width:72ch}
.analysis-list li strong{color:var(--text)}

/* Rumor board */
.rumor-board{display:grid;gap:16px}
.rumor-row{background:var(--bg-raised);border:1px solid rgba(255,120,71,.3);border-radius:var(--r-3);padding:22px 26px}
.rumor-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.rumor-claim{font-family:var(--font-serif);font-weight:600;font-size:1.08rem}
.rumor-row p{color:var(--text-dim);font-size:.95rem;max-width:70ch}
.rumor-row p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,179,71,.5)}
.rumor-row p a:hover{text-decoration-color:var(--accent)}

/* Unknowns + watch */
.unknown-list{list-style:none;border-top:1px solid var(--rule)}
.unknown-list li{padding:13px 0 13px 26px;border-bottom:1px solid var(--rule);color:var(--text-dim);position:relative}
.unknown-list li::before{content:"?";position:absolute;left:2px;font-family:var(--font-mono);color:var(--accent-hot)}
.watch-list{list-style:none;border-top:1px solid var(--rule)}
.watch-list li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
.watch-list b{font-family:var(--font-serif);font-weight:650;font-size:1.05rem}
.watch-list span{color:var(--text-dim);font-size:.92rem}

@media(max-width:560px){
  .conf-list li{grid-template-columns:1fr;gap:4px}
  .tl-list::before,.tl-entry::before{display:none}
  .tl-entry{grid-template-columns:1fr;gap:6px;padding-bottom:28px}
  .tl-date{text-align:left}
}

/* =========================================================
   14. ARTICLE CONNECTIVE TISSUE  (News Refactor, Jul 2026)
   Dated stories point at living pages; every article carries
   a figure, a context surface, and a curated onward path.
   ========================================================= */

/* Living-page pointer — the hatnote that resolves query hierarchy:
   the dated report defers to the tracker/hub for "what's true now". */
.live-pointer{
  display:flex;gap:14px;align-items:baseline;
  background:var(--bg-inset);border:1px solid var(--rule);border-radius:var(--r-3);
  padding:14px 18px;margin:-26px 0 40px;font-size:.88rem;color:var(--text-dim);
}
.live-pointer .mono{color:var(--accent);white-space:nowrap}
.live-pointer a{color:var(--text)}

/* Article figure — original informational graphics, never stock. */
.post-figure{margin:2.4em 0}
.post-figure svg{display:block;width:100%;height:auto;background:var(--bg-raised);
  border:1px solid var(--rule);border-radius:var(--r-3)}
.post-figure figcaption{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dim);margin-top:10px;line-height:1.6;
}

/* Keep reading — curated onward path (relevance, not chronology).
   Role labels differ per article by design; sameness reads as automation. */
.keep-reading{margin-top:52px;padding-top:28px;border-top:1px solid var(--rule)}
.keep-reading>.mono{color:var(--accent);display:block;margin-bottom:16px}
.kr-item{
  display:block;padding:16px 18px;margin-bottom:10px;
  background:var(--bg-raised);border:1px solid var(--rule);border-radius:var(--r-3);
  text-decoration:none;transition:border-color var(--t-base);
}
.kr-item:hover{border-color:var(--rule-strong)}
.kr-role{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-hot);display:block;margin-bottom:5px}
.kr-title{color:var(--text);font-weight:600;display:block;margin-bottom:3px}
.kr-why{color:var(--text-dim);font-size:.85rem;display:block}

/* =========================================================
   15. HOMEPAGE CONSOLE  (interim M5 — real counts only)
   The station's meters: every number derived from pages that
   exist, every cell a destination. No invented counters.
   ========================================================= */
.console-strip{display:flex;flex-wrap:wrap;border:1px solid var(--rule);border-radius:var(--r-3);overflow:hidden;background:var(--bg-raised)}
.console-cell{flex:1 1 auto;min-width:128px;padding:18px 22px;text-decoration:none;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:-1px;display:flex;flex-direction:column;gap:5px;transition:background var(--t-base)}
.console-cell:last-child{border-right:none}
.console-cell:hover{background:var(--bg-inset)}
.console-cell b{font-family:var(--font-serif);font-size:1.6rem;color:var(--text);font-weight:600;line-height:1}
.console-cell span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}

/* "Updated" lamp on living-record cards — date must be real */
.tool-updated{display:inline-block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(255,179,71,.35);border-radius:var(--r-1);padding:3px 9px;margin-bottom:12px}

/* Ways in — evergreen routes under the featured artist */
.routes-row{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:28px;padding-top:20px;border-top:1px solid var(--rule)}
.routes-row a{font-size:.9rem}
.routes-row .mono{color:var(--accent-hot);margin-right:7px}

/* Wire label legend — one honest line, not a lecture */
.wire-legend{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin:-6px 0 26px}
.wire-legend b{color:var(--text);font-weight:700}

/* The practice — trust strip above the sign-off */
.practice-strip{border-top:1px solid var(--rule);padding:30px 0;color:var(--text-dim);font-size:.88rem}
.practice-strip .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline}
.practice-strip .mono{color:var(--accent)}

/* Era chips can be doorways */
a.era{text-decoration:none;color:inherit}
a.spot-visual{display:block;text-decoration:none;color:inherit;transition:border-color var(--t-base)}
a.spot-visual:hover{border-color:var(--rule-strong)}

/* ==========================================================================
   IMAGERY — the Golden Hour visual-content system (canon/09-imagery-system.md)
   Three tiers: t1 signature artwork · t2 editorial photo treatment · t3 signal plates.
   Every image on the site lives inside a .art figure; captions and credits are
   part of the component, not an afterthought.
   ========================================================================== */
.art{margin:var(--s8) 0}
.art img,.art svg{display:block;width:100%;height:auto;border-radius:var(--r-2)}

/* Caption + credit chassis — shared by every tier */
.art-caption{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s5);
  margin-top:var(--s3);padding:0 2px}
.art-caption>span:first-child{color:var(--text-dim);font-size:.86rem;line-height:1.5}
.art-credit{font-family:var(--font-mono);font-size:.66rem;letter-spacing:var(--mono-tracking);
  text-transform:uppercase;color:var(--text-dim);white-space:nowrap;flex-shrink:0}
@media(max-width:560px){.art-caption{flex-direction:column;gap:var(--s1)}}

/* Tier 3 — signal plates carry their own frame, grain, and vignette; mount bare */
.art-t3 img{border-radius:var(--r-3)}

/* Tier 2 — licensed editorial photography, passed through the house treatment:
   duotone (espresso shadows → dial-cream highlights), lifted grain, hairline plate frame.
   Photos are graded, never distorted; crops follow canon cropping rules. */
.art-t2 .art-frame{position:relative;isolation:isolate;border:1px solid var(--rule);
  border-radius:var(--r-3);padding:var(--s2);background:var(--bg-raised)}
.art-duotone{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-2)}
.art-duotone img{filter:grayscale(1) contrast(1.06) brightness(.96)}
.art-duotone::before{content:"";position:absolute;inset:0;background:var(--espresso);
  mix-blend-mode:lighten;pointer-events:none}          /* blacks settle to espresso  */
.art-duotone::after{content:"";position:absolute;inset:0;background:var(--dial);
  mix-blend-mode:multiply;pointer-events:none}         /* whites warm to dial cream  */
.art-t2 .art-frame::after{content:"";position:absolute;inset:var(--s2);opacity:.07;
  pointer-events:none;border-radius:var(--r-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Tier 1 — commissioned/signature artwork: framed like t2, mounted without the grade */
.art-t1 .art-frame{border:1px solid var(--rule);border-radius:var(--r-3);
  padding:var(--s2);background:var(--bg-raised)}

/* Album artwork — never graded, never cropped, never overlaid (canon rule).
   Presented square on a sleeve mount with a catalog line. */
.art-sleeve{max-width:420px}
.art-sleeve .art-frame{border:1px solid var(--rule);border-radius:var(--r-3);
  padding:var(--s4);background:var(--bg-inset)}
.art-sleeve img{aspect-ratio:1/1;object-fit:contain;filter:none;border-radius:var(--r-1)}

/* Crop discipline — components declare their ratio; images fill it */
.ratio-169{aspect-ratio:16/9;object-fit:cover}
.ratio-43{aspect-ratio:4/3;object-fit:cover}
.ratio-45{aspect-ratio:4/5;object-fit:cover}
.ratio-11{aspect-ratio:1/1;object-fit:cover}
.ratio-219{aspect-ratio:21/9;object-fit:cover}