/* ============================================================
   GrooveLily — an unofficial fan tribute
   Listening-room aesthetic: warm amber on near-black.
   Fonts are LOCALLY VENDORED at finalize. The stacks below name the
   intended families first, with robust system fallbacks so the build
   renders correctly offline before vendoring.
   ============================================================ */

:root{
  --paper:#0b0a0e;         /* near-black, faintly warm */
  --paper-2:#121019;       /* raised panel */
  --paper-3:#17141f;       /* deeper panel */
  --ink:#ece7dd;           /* warm cream text */
  --ink-dim:#c3bcae;
  --muted:#8f887c;
  --faint:#6f695f;
  --line:rgba(236,231,221,.12);
  --line-2:rgba(236,231,221,.2);
  --amber:#e0aa4e;         /* stage light / Band Era */
  --amber-soft:rgba(224,170,78,.16);
  --rose:#c98fa6;          /* Theatre Era */
  --rose-soft:rgba(201,143,166,.16);

  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Oswald','Bebas Neue','Haettenschweiler','Arial Narrow Bold','Arial Narrow',var(--sans);

  --measure:68ch;
  --wrap:1240px;
  --radius:6px;
  --shadow:0 30px 70px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:19px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--amber);text-decoration:none;}
a:hover{color:#f0c06a;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0;}
::selection{background:var(--amber);color:#14121b;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:rgba(236,231,221,.16);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,5vw,56px);}
.display{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.kicker{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);}
.tribute-line{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.section-eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:15px;}

/* ===================== HEADER / NAV ===================== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(11,10,14,.86);
  backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line);}
.site-header .wrap{display:flex;align-items:center;gap:28px;padding-block:14px;}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--ink);}
.brand b{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:.01em;}
.brand span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-top:4px;}
.nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line-2);color:var(--ink);
  border-radius:6px;padding:9px 12px;cursor:pointer;font-size:15px;}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:4px;}
.main-nav > a,.main-nav > .has-menu > a{display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;color:var(--ink-dim);font-size:15px;letter-spacing:.02em;border-radius:6px;
  text-transform:uppercase;font-family:var(--display);letter-spacing:.08em;font-size:14px;}
.main-nav a:hover{color:var(--ink);background:rgba(236,231,221,.05);}
.has-menu{position:relative;}
.has-menu > a::after{content:'▾';font-size:10px;color:var(--muted);}
.submenu{position:absolute;top:calc(100% + 6px);left:0;min-width:280px;background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--shadow);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;}
.has-menu:hover .submenu,.has-menu:focus-within .submenu{opacity:1;visibility:visible;transform:none;}
.submenu .sm-head{display:block;padding:8px 12px 6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);}
.submenu a{display:block;padding:9px 12px;border-radius:6px;color:var(--ink-dim);font-size:15px;
  font-family:var(--serif);text-transform:none;letter-spacing:0;}
.submenu a:hover{background:rgba(236,231,221,.06);color:var(--ink);}

/* ===================== HERO ===================== */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;border-bottom:1px solid var(--line);}
.hero-media{position:absolute;inset:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.55;animation:heroDrift 34s ease-in-out infinite alternate;}
.hero-media::after{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 80% at 50% 42%,rgba(224,170,78,.22),transparent 62%),
             linear-gradient(180deg,rgba(11,10,14,.55),rgba(11,10,14,.35) 45%,var(--paper));}
.hero-glow{position:absolute;left:50%;top:38%;width:min(70vw,760px);height:min(70vw,760px);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(224,170,78,.20),rgba(224,170,78,.06) 45%,transparent 72%);
  filter:blur(6px);z-index:1;pointer-events:none;animation:heroGlow 7s ease-in-out infinite;}
.hero-inner{position:relative;z-index:2;padding:80px 24px;max-width:840px;}
.hero .brand-xl{font-family:var(--serif);font-weight:600;font-size:clamp(56px,11vw,120px);
  line-height:.92;letter-spacing:-.015em;margin:18px 0 0;text-shadow:0 2px 40px rgba(224,170,78,.25);}
.hero-rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:26px 0 0;}
.hero-rule span{height:1px;width:clamp(40px,10vw,88px);background:linear-gradient(90deg,transparent,var(--line-2));}
.hero-rule span:last-child{background:linear-gradient(90deg,var(--line-2),transparent);}
.hero-rule i{width:9px;height:9px;transform:rotate(45deg);background:var(--amber);
  box-shadow:0 0 14px rgba(224,170,78,.7);}
.hero .tagline{margin:24px auto 0;max-width:620px;font-size:clamp(17px,2.1vw,21px);
  line-height:1.55;color:var(--ink-dim);}
.scroll-cue{display:inline-flex;align-items:center;gap:10px;margin-top:38px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.18em;font-size:14px;color:var(--muted);transition:color .25s;}
.scroll-cue:hover{color:var(--amber);}
.cue-arrow{display:inline-block;color:var(--amber);animation:cueBob 1.9s ease-in-out infinite;}
.hero-rise{opacity:0;animation:heroRise 1s cubic-bezier(.2,.7,.3,1) both;}
.hero-inner .hero-rise:nth-child(1){animation-delay:.1s;}
.hero-inner .hero-rise:nth-child(2){animation-delay:.24s;}
.hero-inner .hero-rise:nth-child(3){animation-delay:.38s;}
.hero-inner .hero-rise:nth-child(4){animation-delay:.5s;}
.hero-inner .hero-rise:nth-child(5){animation-delay:.62s;}
@keyframes heroRise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes heroDrift{from{transform:scale(1.04) translate(0,0);}to{transform:scale(1.1) translate(-1.5%,-1.5%);}}
@keyframes heroGlow{0%,100%{opacity:.75;}50%{opacity:1;}}
@keyframes cueBob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
@media(prefers-reduced-motion:reduce){
  .hero-rise{animation:none;opacity:1;}
  .hero-media img,.hero-glow,.cue-arrow{animation:none;}
}

/* ===================== SECTION SHELL ===================== */
.section{padding-block:clamp(56px,8vw,104px);}
.section-head{max-width:760px;margin:0 auto clamp(30px,5vw,52px);text-align:center;}
.section-head h2{font-size:clamp(32px,5vw,52px);margin-top:10px;}
.section-head p{color:var(--ink-dim);font-size:18px;margin:14px 0 0;line-height:1.6;}

/* ===================== BRANCHING TIMELINE ===================== */
.lens-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:52px;}
.lens{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:13px;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:transparent;
  color:var(--ink-dim);cursor:pointer;transition:.2s;}
.lens:hover{color:var(--ink);border-color:var(--amber);}
.lens[aria-pressed="true"]{background:var(--amber);color:#14121b;border-color:var(--amber);}

.branch{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;}
.branch::before{content:'';position:absolute;left:50%;top:64px;bottom:120px;width:1px;transform:translateX(-.5px);
  background:linear-gradient(180deg,transparent,var(--line-2) 8%,var(--line-2) 88%,transparent);}
.rail{padding-top:0;}
.rail-band{padding-right:clamp(20px,3.4vw,48px);text-align:right;}
.rail-theatre{padding-left:clamp(20px,3.4vw,48px);text-align:left;}
.rail-head{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;
  font-size:13px;padding:6px 14px;border-radius:999px;margin-bottom:36px;border:1px solid;}
.rail-band .rail-head{color:var(--amber);border-color:rgba(224,170,78,.4);}
.rail-theatre .rail-head{color:var(--rose);border-color:rgba(201,143,166,.4);}

.node{position:relative;width:100%;background:transparent;border:none;color:inherit;cursor:pointer;
  padding:0 26px 34px 0;margin:0;font:inherit;transition:opacity .3s,filter .3s;}
.rail-theatre .node{padding:0 0 34px 26px;text-align:left;}
.node-dot{position:absolute;top:5px;width:13px;height:13px;border-radius:50%;}
.rail-band .node-dot{right:-6.5px;background:var(--amber);box-shadow:0 0 0 4px rgba(224,170,78,.18);}
.rail-theatre .node-dot{left:-6.5px;background:var(--rose);box-shadow:0 0 0 4px rgba(201,143,166,.18);}
.node-year{display:block;font-family:var(--display);letter-spacing:.14em;font-size:15px;}
.rail-band .node-year{color:var(--amber);}
.rail-theatre .node-year{color:var(--rose);}
.node-title{display:block;font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);font-weight:600;margin-top:3px;}
.node-kind{display:block;font-size:13px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.08em;}
.node-cover{display:block;width:96px;height:96px;margin-top:14px;border-radius:4px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--paper-3);box-shadow:0 12px 26px rgba(0,0,0,.5);}
.rail-band .node-cover{margin-left:auto;}
.rail-theatre .node-cover{margin-right:auto;}
.node-cover img{width:100%;height:100%;object-fit:cover;}
.node-story{display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .35s;}
.node.open .node-story{max-height:460px;opacity:1;margin-top:16px;}
.story-inner{display:block;padding:16px 18px;border-radius:8px;background:rgba(236,231,221,.045);}
.rail-band .story-inner{border-right:2px solid var(--amber);}
.rail-theatre .story-inner{border-left:2px solid var(--rose);}
.node-story p{font-size:16px;line-height:1.62;color:var(--ink-dim);margin:0;text-wrap:pretty;}
.node-story .story-link{display:inline-block;margin-top:12px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.1em;font-size:13px;}
.rail-theatre .node-story .story-link{color:var(--rose);}
.rail-theatre .node-story .story-link:hover{color:#e0a8bf;}
.node .node-expand{font-size:12px;color:var(--faint);margin-top:12px;display:flex;width:100%;align-items:center;gap:6px;
  letter-spacing:.08em;font-family:var(--display);text-transform:uppercase;transition:color .2s;}
.rail-band .node-expand{justify-content:flex-end;}
.rail-theatre .node-expand{justify-content:flex-start;}
.node:hover .node-expand,.node:focus-visible .node-expand{color:var(--amber);}
.rail-theatre .node:hover .node-expand,.rail-theatre .node:focus-visible .node-expand{color:var(--rose);}
.node.open .node-expand{color:var(--muted);}
.node:focus-visible{outline:2px solid var(--amber);outline-offset:5px;border-radius:6px;}
.node:hover .node-title{color:#fff;}
.branch[data-lens]:not([data-lens="all"]) .node:not(.match){opacity:.22;filter:grayscale(.6);}

.now-node{margin:8px auto 0;max-width:520px;text-align:center;background:rgba(236,231,221,.03);
  border:1px solid var(--line-2);border-radius:10px;padding:30px;}
.now-node .node-year{color:var(--ink-dim);letter-spacing:.2em;}
.now-node h3{font-size:clamp(24px,3vw,32px);margin:6px 0 12px;}
.now-node p{color:var(--ink-dim);font-size:16px;margin:0 0 18px;line-height:1.6;}

/* ===================== READING FEED ===================== */
.feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;}
.post-card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;transition:.22s;height:100%;}
.post-card:hover{border-color:var(--line-2);transform:translateY(-3px);}
.card-media{aspect-ratio:16/10;background:var(--paper-3);overflow:hidden;}
.card-media img{width:100%;height:100%;object-fit:cover;}
.card-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px;}
.card-cat{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--amber);}
.card-title{font-size:23px;margin:10px 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.2em;}
.card-dek{color:var(--ink-dim);font-size:15px;line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card-meta{margin-top:auto;padding-top:16px;font-size:13px;letter-spacing:.04em;color:var(--muted);}
.feed-more{text-align:center;margin-top:40px;}
.feed:not(.show-all) .post-card:nth-child(n+7){display:none;}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.1em;font-size:14px;padding:12px 24px;border-radius:999px;border:1px solid var(--amber);
  color:var(--amber);background:transparent;cursor:pointer;transition:.2s;}
.btn:hover{background:var(--amber);color:#14121b;}

/* ===================== TRAILS ===================== */
.trails-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.trail-card{background:linear-gradient(160deg,var(--paper-2),var(--paper));border:1px solid var(--line);
  border-radius:12px;padding:32px;}
.trail-card .kicker{color:var(--rose);}
.trail-card h3{font-size:26px;margin:12px 0 6px;}
.trail-card > p{color:var(--ink-dim);font-size:16px;margin:0 0 18px;}
.trail-steps{list-style:none;margin:0;padding:0;counter-reset:tr;}
.trail-steps li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);}
.trail-steps li::before{counter-increment:tr;content:counter(tr,decimal-leading-zero);
  font-family:var(--display);color:var(--amber);font-size:14px;}
.trail-steps a{font-family:var(--serif);font-size:18px;color:var(--ink);}
.trail-steps a:hover{color:var(--amber);}

/* ===================== DISCOGRAPHY SHELF ===================== */
.shelf-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:40px;align-items:center;}
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:30px;perspective:1400px;}
.release{text-align:left;}
.release-cover{position:relative;aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--paper-3);
  border:1px solid var(--line-2);box-shadow:0 18px 38px rgba(0,0,0,.55);transition:transform .5s;transform-style:preserve-3d;}
.shelf.flipped .release-cover{transform:rotateY(-22deg);}
.release-cover img.cover{width:100%;height:100%;object-fit:cover;}
.release-cover .cover-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;color:var(--muted);background:
    radial-gradient(80% 80% at 50% 35%,var(--amber-soft),transparent 70%),var(--paper-3);}
.release-title{font-family:var(--serif);font-size:19px;margin-top:14px;line-height:1.25;}
.release-meta{font-size:14px;color:var(--muted);margin-top:3px;letter-spacing:.03em;}
.shelf[data-filter]:not([data-filter="all"]) .release:not(.match){display:none;}

/* ===================== SUPPORTERS (dark band) ===================== */
.supporters{background:#060509;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.supporters .kicker{color:var(--rose);}
.supporters .support-lede{max-width:640px;margin:12px 0 0;color:var(--ink-dim);font-size:17px;line-height:1.6;}
.support-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px;
  margin-top:44px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.sponsor{display:flex;flex-direction:column;gap:10px;justify-content:center;padding:26px 24px;min-height:132px;
  background:#0a0810;transition:.2s;text-decoration:none;}
.sponsor:hover{background:#100c18;}
.sponsor img{height:30px;width:auto;object-fit:contain;object-position:left center;
  opacity:.82;filter:grayscale(1) brightness(1.6);align-self:flex-start;max-width:80%;}
.sponsor .sponsor-blurb{font-size:14px;line-height:1.45;color:var(--muted);}
.sponsor .sponsor-blurb:empty::before{content:'A friend of the tribute.';color:var(--faint);}

/* ===================== FOOTER ===================== */
.site-footer{background:#070609;padding-block:56px;border-top:1px solid var(--line);}
.footer-top{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;}
.footer-brand b{font-family:var(--serif);font-size:24px;}
.footer-brand p{color:var(--muted);font-size:14px;margin:8px 0 0;max-width:320px;line-height:1.5;}
.footer-cols{display:flex;flex-wrap:wrap;gap:48px;}
.footer-col h4{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:13px;
  color:var(--amber);margin-bottom:14px;font-weight:700;}
.footer-col a{display:block;color:var(--ink-dim);font-size:15px;padding:5px 0;}
.footer-col a:hover{color:var(--ink);}
.footer-legal{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;font-size:13px;color:var(--faint);}
.footer-legal .tribute-strong{color:var(--ink-dim);}
.footer-legal a{color:var(--faint);}
.footer-legal a:hover{color:var(--ink-dim);}

/* ===================== ARTICLE ===================== */
.article-hero{border-bottom:1px solid var(--line);padding-block:clamp(40px,7vw,88px);
  background:radial-gradient(90% 120% at 50% -10%,var(--amber-soft),transparent 60%);}
.article-hero .wrap{max-width:900px;text-align:center;}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:14px;color:var(--amber);}
.article-title{font-size:clamp(34px,6vw,66px);margin:16px 0 0;letter-spacing:-.01em;text-wrap:balance;}
.article-dek{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,25px);
  color:var(--ink-dim);margin:20px auto 0;max-width:680px;line-height:1.45;}
.article-meta{margin-top:26px;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:14px;color:var(--muted);display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.article-meta span{color:var(--amber);}
.article-figure-hero{max-width:var(--wrap);margin:0 auto;padding:clamp(24px,4vw,48px) clamp(20px,5vw,56px) 0;}
.article-figure-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:10px;border:1px solid var(--line);}

.article-body{max-width:var(--measure);margin:0 auto;padding-inline:clamp(20px,5vw,32px);
  padding-block:clamp(40px,6vw,72px);counter-reset:sec;font-size:21px;line-height:1.75;}
.article-body > p{margin:0 0 1.35em;color:var(--ink);}
.article-body > h2{font-size:clamp(26px,3.4vw,38px);margin:2em 0 .6em;padding-top:.4em;position:relative;}
.article-body > h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);
  font-family:var(--display);color:var(--amber);font-size:.55em;letter-spacing:.1em;
  display:block;margin-bottom:.3em;}
.article-body > h3{font-size:clamp(21px,2.6vw,27px);margin:1.6em 0 .5em;}
.article-body strong{color:var(--ink);font-weight:700;}
.article-body em{color:var(--ink-dim);}
.lead{font-size:1.14em;color:var(--ink) !important;}
.lead::first-letter{float:left;font-family:var(--serif);font-size:3.5em;line-height:.82;font-weight:700;
  padding:6px 14px 0 0;color:var(--amber);}

/* palette components (shared: article + styleguide) */
.pullquote{margin:1.8em 0;padding:0;border:none;}
.pullquote p{font-family:var(--serif);font-style:italic;font-size:1.5em;line-height:1.3;color:var(--ink);
  margin:0;position:relative;padding-left:28px;border-left:3px solid var(--amber);text-wrap:pretty;}
@media(min-width:1180px){
  .article-body .pullquote.pull-wide{width:calc(var(--measure) + 22vw);max-width:1000px;
    margin-left:calc((var(--measure) - 100%)/2);text-align:center;}
  .article-body .pullquote.pull-wide p{border:none;padding:0;font-size:1.9em;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:.5em;}
}
.blockquote{margin:1.8em 0;padding:20px 26px;background:var(--paper-2);border-radius:8px;border-left:3px solid var(--rose);}
.blockquote p{font-family:var(--serif);font-size:1.15em;font-style:italic;margin:0 0 .5em;}
.blockquote cite{font-style:normal;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.62em;color:var(--muted);}
.callout{margin:1.8em 0;padding:24px 28px;background:linear-gradient(160deg,var(--amber-soft),transparent);
  border:1px solid rgba(224,170,78,.3);border-radius:10px;}
.callout p{margin:0;font-size:1em;color:var(--ink);}
.callout p + p{margin-top:.7em;}
.note{margin:1.6em 0;padding:16px 20px 16px 46px;position:relative;background:var(--paper-2);border-radius:8px;
  font-size:.82em;color:var(--ink-dim);line-height:1.55;}
.note::before{content:'';position:absolute;left:18px;top:20px;width:16px;height:16px;
  background:var(--amber);-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");}

.versus{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.82em;}
.versus th,.versus td{padding:14px 16px;border:1px solid var(--line);text-align:left;vertical-align:top;}
.versus thead th{background:var(--paper-2);font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-size:.9em;color:var(--amber);}
.versus tbody th{font-family:var(--sans);font-weight:600;color:var(--ink-dim);background:rgba(236,231,221,.03);width:26%;}
.datatable{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.8em;}
.datatable th,.datatable td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;}
.datatable thead th{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--amber);
  border-bottom:1px solid var(--line-2);}
.datatable tbody tr:hover{background:rgba(236,231,221,.03);}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;margin:1.8em 0;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.statblock{background:var(--paper-2);padding:24px 20px;text-align:center;}
.stat-num{display:block;font-family:var(--serif);font-size:2.4em;font-weight:600;color:var(--amber);line-height:1;}
.stat-label{display:block;margin-top:8px;font-size:.62em;line-height:1.4;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;}

.timeline{list-style:none;margin:1.8em 0;padding:0;position:relative;}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line-2);}
.timeline li{position:relative;padding:0 0 22px 40px;}
.timeline li::before{content:'';position:absolute;left:2px;top:7px;width:11px;height:11px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft);}
.t-when{display:block;font-family:var(--display);letter-spacing:.1em;color:var(--amber);font-size:.72em;}
.t-what{display:block;font-size:.86em;color:var(--ink-dim);margin-top:3px;line-height:1.45;}

.chart{margin:1.8em 0;}
.chart svg{width:100%;height:auto;overflow:visible;}
.chart .bar-rect{fill:var(--amber);}
.chart .bar-label{fill:var(--ink-dim);font-family:var(--sans);font-size:13px;}
.chart .bar-val{fill:var(--muted);font-family:var(--display);font-size:12px;}
.chart .axis{stroke:var(--line-2);}
.chart .line-path{fill:none;stroke:var(--amber);stroke-width:2.5;}
.chart .line-dot{fill:var(--rose);}
.chart figcaption{font-size:.72em;color:var(--muted);margin-top:12px;text-align:center;}

.article-figure{margin:2em 0;}
.article-figure img{width:100%;border-radius:8px;border:1px solid var(--line);}
.article-figure figcaption,.gallery figcaption{font-size:.72em;color:var(--muted);margin-top:10px;line-height:1.45;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:2em 0;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--line);}
.map-figure{margin:2em 0;}
.map-slot{aspect-ratio:16/9;border-radius:8px;border:1px dashed var(--line-2);background:
  repeating-linear-gradient(45deg,rgba(236,231,221,.03) 0 12px,transparent 12px 24px),var(--paper-2);
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-family:var(--display);
  text-transform:uppercase;letter-spacing:.12em;font-size:13px;}
.map-figure figcaption{font-size:.72em;color:var(--muted);margin-top:10px;}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:2em 0;}
.profile-card{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:26px;}
.profile-card .p-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:14px;border:1px solid var(--line-2);}
.profile-card.no-photo::before{content:'';display:block;width:56px;height:56px;border-radius:50%;margin-bottom:16px;
  background:radial-gradient(60% 60% at 50% 40%,var(--amber-soft),transparent),var(--paper-3);
  border:1px solid var(--line-2);
  -webkit-mask:none;}
.profile-card h3{font-size:1.05em;}
.profile-card .p-role{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:.62em;
  color:var(--amber);margin:6px 0 12px;}
.profile-card p{font-size:.78em;color:var(--ink-dim);line-height:1.55;margin:0 0 12px;}
.profile-card .p-links a{font-size:.72em;margin-right:14px;}
.profile-card .p-attr{font-size:.62em;color:var(--faint);}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:2em 0;}
.org-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:10px;}
.org-card:hover{border-color:var(--line-2);}
.org-logo{height:26px;width:auto;object-position:left;margin-bottom:4px;opacity:.8;}
.org-card.no-logo .org-logo{display:none;}
.org-name{font-family:var(--serif);font-size:.86em;color:var(--ink);}
.org-host{font-size:.62em;color:var(--muted);letter-spacing:.04em;}
.entity-ref{border-bottom:1px solid rgba(224,170,78,.4);}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.2em 0;}
.further-grid a{display:block;padding:20px 22px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:10px;font-family:var(--serif);font-size:.86em;color:var(--ink);line-height:1.35;}
.further-grid a:hover{border-color:var(--amber);color:var(--amber);}

.related{max-width:var(--measure);margin:0 auto;padding-inline:clamp(20px,5vw,32px);
  padding-block:clamp(36px,5vw,60px);border-top:1px solid var(--line);}
.related > h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:20px;
  color:var(--amber);margin-bottom:8px;}
.trail-next{background:linear-gradient(160deg,var(--rose-soft),transparent);border:1px solid rgba(201,143,166,.3);
  border-radius:10px;padding:22px 26px;margin-bottom:26px;}
.trail-next .kicker{color:var(--rose);}
.trail-next a{font-family:var(--serif);font-size:1.3em;color:var(--ink);}
.trail-next a:hover{color:var(--amber);}
.related-links{list-style:none;margin:0;padding:0;}
.related-links li{border-top:1px solid var(--line);}
.related-links li:first-child{border-top:none;}
.related-links a{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:16px 0;
  font-family:var(--serif);font-size:1.15em;color:var(--ink);}
.related-links a:hover{color:var(--amber);}
.related-links .rl-cat{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.6em;color:var(--muted);white-space:nowrap;}

/* ===================== CATEGORY / SIMPLE PAGES ===================== */
.page-hero{border-bottom:1px solid var(--line);padding-block:clamp(48px,8vw,96px);
  background:radial-gradient(90% 120% at 50% -20%,var(--amber-soft),transparent 60%);}
.page-hero .wrap{max-width:820px;}
.page-hero .eyebrow{color:var(--amber);}
.page-hero h1{font-size:clamp(38px,6.5vw,72px);margin:14px 0 0;}
.page-hero p{color:var(--ink-dim);font-size:20px;line-height:1.6;margin:20px 0 0;max-width:640px;}
.cat-list{list-style:none;margin:0;padding:0;max-width:900px;}
.cat-list li{border-bottom:1px solid var(--line);}
.cat-list a{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:28px 4px;transition:.2s;}
.cat-list a:hover{padding-left:14px;}
.cat-list .cl-main h3{font-size:clamp(23px,3vw,30px);color:var(--ink);}
.cat-list a:hover .cl-main h3{color:var(--amber);}
.cat-list .cl-dek{color:var(--ink-dim);font-size:16px;margin:8px 0 0;line-height:1.5;max-width:60ch;}
.cat-list .cl-meta{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:13px;
  color:var(--muted);text-align:right;white-space:nowrap;}
.cat-list .cl-meta .cl-kind{color:var(--amber);display:block;margin-bottom:4px;}

.simple-page{max-width:var(--measure);margin:0 auto;padding-inline:clamp(20px,5vw,32px);
  padding-block:clamp(40px,6vw,72px);}
.simple-page p{font-size:19px;line-height:1.7;color:var(--ink-dim);margin:0 0 1.2em;}
.simple-page h1{font-size:clamp(34px,6vw,56px);margin-bottom:18px;}
.simple-page .lead{color:var(--ink) !important;font-size:1.15em;}
.simple-page .lead::first-letter{float:none;font-size:1em;padding:0;color:inherit;}
.contact-form{display:flex;flex-direction:column;gap:18px;margin-top:28px;}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--muted);}
.contact-form input,.contact-form textarea{font-family:var(--sans);font-size:17px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:8px;padding:13px 15px;}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--amber);}
.contact-form button{align-self:flex-start;}
.error-page{min-height:64vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px;}
.error-page .big{font-family:var(--display);font-size:clamp(90px,20vw,200px);color:var(--amber);line-height:.9;}

/* ===================== STYLEGUIDE ===================== */
.sg-section{padding-block:48px;border-top:1px solid var(--line);}
.sg-section > .wrap > h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:24px;color:var(--amber);margin-bottom:8px;}
.sg-section > .wrap > p.sg-note{color:var(--muted);font-size:15px;margin:0 0 28px;}
.sg-demo{max-width:var(--measure);}

/* ===================== RESPONSIVE ===================== */
@media(max-width:860px){
  body{font-size:18px;}
  .nav-toggle{display:block;}
  .main-nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper-2);border-bottom:1px solid var(--line-2);padding:10px;
    max-height:0;overflow:hidden;transition:max-height .3s;margin-left:0;}
  .main-nav.open{max-height:80vh;overflow:auto;}
  .main-nav > a,.main-nav > .has-menu > a{padding:14px;font-size:16px;}
  .has-menu > a::after{margin-left:auto;}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;
    border:none;border-left:2px solid var(--line-2);border-radius:0;margin:0 0 8px 14px;
    max-height:0;overflow:hidden;transition:max-height .3s;padding:0 8px;}
  .has-menu.open .submenu{max-height:600px;padding:4px 8px 8px;}
  .branch{grid-template-columns:1fr;}
  .branch::before{left:7px;}
  .rail-band,.rail-theatre{padding-left:30px;padding-right:0;text-align:left;}
  .rail-band{margin-bottom:20px;}
  .rail-band .node{padding:0 0 30px 0;text-align:left;}
  .rail-theatre .node{padding:0 0 30px 0;}
  .rail-band .node-dot{right:auto;left:-23.5px;}
  .rail-theatre .node-dot{left:-23.5px;}
  .rail-band .node-cover,.rail-theatre .node-cover{margin-left:0;margin-right:auto;}
  .rail-band .node-expand,.rail-theatre .node-expand{justify-content:flex-start;}
  .rail-band .story-inner{border-right:none;border-left:2px solid var(--amber);}
  .versus,.datatable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .rail-head{margin-left:0;}
  .trails-grid{grid-template-columns:1fr;}
  .footer-top{flex-direction:column;gap:28px;}
  .article-body .pullquote.pull-wide{width:auto;margin-left:0;}
}
@media(max-width:480px){
  .hero{min-height:70vh;}
  .cat-list a{grid-template-columns:1fr;}
  .cat-list .cl-meta{text-align:left;}
}

.release-cover.has-cover .cover-fallback{display:none;}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.support-grid .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1752px at 390, 12% of the whole page. Two columns bring it to
   977px (44% shorter). Checked before writing: no new overflow, smallest mark still
   119px wide, longest blurb 3 lines, tile heights 161-161px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.support-grid), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .support-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:2px!important}
    .support-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .support-grid > * *{min-width:0!important;max-width:100%}
    .support-grid img,.support-grid svg{max-width:100%;height:auto}
  .support-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 823px (92 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body{--measure:min(74.696ch, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{--measure:min(clamp(74.696ch, 67.639vw, calc(74.696ch * 1.2)), 100%)!important}
  div.article-body > :is(p:not([class])), div.article-body > :is(ol.timeline) > li{font-size:clamp(21px,1.4583vw,25.2px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (823px) and was left behind when the text went to 910px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  div.article-hero > div.wrap{max-width:min(983px, 100%)!important}
  p.article-dek{max-width:min(752px, 100%)!important}
}
@media (min-width:1600px){
  div.article-hero > div.wrap{max-width:min(calc(clamp(871px, 60.486vw, 1045px) + 112px), 100%)!important}
  p.article-dek{max-width:min(calc(clamp(752px, 52.222vw, 902px) + 0px), 100%)!important}
}
/* op-article-head:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0px;}
.profile-card h2:where(.rt-h3){font-size: 1.05em;}
.cat-list .cl-main h2:where(.rt-h3){font-size: clamp(23px, 3vw, 30px); color: var(--ink);}
.cat-list a:hover .cl-main h2:where(.rt-h3){color: var(--amber);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.post-card > div.card-media > img,
  div.article-body > figure.article-figure > img,
  div.gallery > figure > img,
  div.org-grid > a.no-logo.org-card > img.org-logo,
  main.article > figure.article-figure-hero > img,
  section.hero > div.hero-media > img){height:auto}
/* op-img-dims:end */