/* The Interpreter — "The Booth"
   Source (mono, dim) / Translation (serif, lit), split by a hairline. */

:root{
  --ground:#0C1015;
  --source:#101820;
  --translation:#1A2632;
  --panel:#18242F;
  --ink:#E4E2DC;
  --ink-2:rgba(228,226,220,.78);
  --ink-3:rgba(228,226,220,.60);
  --ink-4:rgba(228,226,220,.62);
  --accent:#D2A24C;
  --rule:rgba(228,226,220,.16);
  --rule-soft:rgba(228,226,220,.10);
  --seam:rgba(210,162,76,.40);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif;
  --display:'Instrument Serif',Georgia,serif;
  --sans:'Archivo',system-ui,sans-serif;
  --gut:clamp(20px,4vw,56px);
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:300 21px/1.65 var(--serif);
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--rule);margin:0}
::selection{background:var(--accent);color:var(--ground)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- channel rails ---------- */
.rail{
  position:fixed;top:0;bottom:0;width:34px;z-index:40;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;background:var(--ground);
  font:400 11px/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;
}
.rail span{writing-mode:vertical-rl;white-space:nowrap}
.rail-l{left:0;border-right:1px solid var(--rule-soft);color:var(--ink-4)}
.rail-r{right:0;border-left:1px solid var(--rule-soft);color:var(--accent);transform:scaleX(1)}
.rail-r span{transform:rotate(180deg)}
.shell{margin:0 34px}
@media(max-width:960px){.rail{display:none}.shell{margin:0}}

/* ---------- shared band grammar ---------- */
.band{border-bottom:1px solid var(--rule)}
.split{display:grid;grid-template-columns:1fr 1fr}
.split>.src{border-right:1px solid var(--seam);background:var(--source)}
.split>.trn{background:var(--translation)}
.pad{padding:clamp(38px,5vw,72px) var(--gut)}
.pad-s{padding:clamp(22px,3vw,36px) var(--gut)}
.chan{
  font:400 12px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 22px;
}
.chan.warm{color:var(--accent)}
@media(max-width:860px){
  .split{grid-template-columns:1fr}
  .split>.src{border-right:0;border-bottom:1px solid var(--seam)}
}

/* ---------- masthead + nav ---------- */
.topline{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:12px var(--gut);border-bottom:1px solid var(--rule);
  font:400 12px/1.4 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
  background:var(--source);
}
.topline b{color:var(--accent);font-weight:400}
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:26px var(--gut);border-bottom:1px solid var(--rule);background:var(--source);
  position:relative;z-index:30;
}
.brand{display:flex;flex-direction:column;gap:9px}
.brand .word{font:500 34px/1 var(--mono);letter-spacing:-.03em;color:var(--ink)}
.brand .word:hover{color:var(--ink)}
.brand .standing{font:400 12px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}

.nav{display:flex;align-items:center}
.nav>ul{display:flex;gap:clamp(14px,2.2vw,34px);list-style:none;margin:0;padding:0}
.nav>ul>li{position:relative}
.nav>ul>li>a{
  display:block;padding:10px 0;font:400 19px/1 var(--serif);color:var(--ink-2);
  border-bottom:2px solid transparent;
}
.nav>ul>li>a:hover,.nav>ul>li>a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--seam)}
.nav-sub{
  position:absolute;top:100%;left:-22px;min-width:330px;list-style:none;margin:0;padding:10px 0;
  background:var(--panel);border:1px solid var(--seam);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .14s,transform .14s;
  box-shadow:0 26px 50px rgba(0,0,0,.5);z-index:50;
}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} /* hover bridge */
.nav-sub li{margin:0}
.nav-sub a{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 22px;font:400 17px/1.35 var(--serif);color:var(--ink-2);
}
.nav-sub a span{font:400 11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-4);white-space:nowrap}
.nav-sub a:hover{background:var(--translation);color:var(--accent)}
.nav-sub .sub-head{
  padding:6px 22px 12px;margin-bottom:4px;border-bottom:1px solid var(--rule-soft);
  font:400 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
.navtoggle,.navlabel{display:none}

@media(max-width:1080px){
  .masthead{align-items:flex-start}
  .navlabel{
    display:block;cursor:pointer;padding:11px 16px;border:1px solid var(--seam);
    font:400 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  }
  .nav{display:none;width:100%;order:3}
  .navtoggle:checked~.nav{display:block}
  .nav>ul{flex-direction:column;gap:0;width:100%}
  .nav>ul>li{border-top:1px solid var(--rule)}
  .nav>ul>li>a{padding:14px 0;font-size:22px}
  .nav-sub{
    position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    border:0;border-left:2px solid var(--seam);background:transparent;box-shadow:none;
    margin:0 0 14px;padding:0;
  }
  .nav-sub .sub-head{display:none}
  .nav-sub a{padding:9px 16px}
}

/* ---------- hero / fact plate ---------- */
.plate{display:flex;flex-direction:column;gap:13px;font:400 17px/1.5 var(--mono);color:var(--ink-2)}
.plate div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px dotted var(--rule);padding-bottom:12px}
.plate div:last-child{border-bottom:0;padding-bottom:0}
.plate .k{color:var(--ink-4)}
.plate .v{text-align:right}
.plate .v.hot{color:var(--accent)}

.h1{font:400 clamp(40px,5.4vw,74px)/1.02 var(--display);letter-spacing:-.02em;margin:0 0 22px;text-wrap:balance}
.dek{font:300 clamp(21px,2.1vw,26px)/1.5 var(--serif);color:var(--ink-2);max-width:46ch;text-wrap:pretty}
.jumps{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{
  display:inline-block;padding:16px 24px;font:500 13px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--seam);color:var(--ink);
}
.btn:hover{background:var(--panel);color:var(--accent)}
.btn.solid{background:var(--accent);color:var(--ground);border-color:var(--accent)}
.btn.solid:hover{background:var(--ink);color:var(--ground)}

.poster-cell{position:relative;background:var(--panel);display:flex}
.poster-cell img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.03)}
.poster-mount{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(38px,5vw,72px) var(--gut);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(210,162,76,.10) 0%,rgba(210,162,76,0) 62%),
    var(--source);
}
.one-sheet{margin:0;width:100%;max-width:400px;display:flex;flex-direction:column;gap:22px}
.one-sheet img{
  width:100%;height:auto;display:block;background:var(--panel);
  border:1px solid rgba(228,226,220,.22);
  box-shadow:0 34px 70px rgba(0,0,0,.62);
}
.os-cap{display:flex;flex-direction:column;gap:14px}
.os-k{
  display:flex;justify-content:space-between;gap:16px;
  font:400 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  padding-bottom:12px;border-bottom:1px solid var(--seam);
}
.os-plate{display:flex;flex-direction:column;gap:9px;font:400 14px/1.5 var(--mono);color:var(--ink-2)}
.os-plate span{display:grid;grid-template-columns:96px 1fr;gap:14px}
.os-plate b{font-weight:400;color:var(--ink-4)}
.poster-copy{display:flex;flex-direction:column;justify-content:center}
.tag{
  position:absolute;left:0;bottom:0;background:var(--accent);color:var(--ground);
  font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 11px;
}

/* ---------- sequence breakdown ---------- */
.seq{display:grid;grid-template-columns:1fr 1fr}
.seq .hd{padding:34px var(--gut) 18px;font:400 12px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase}
.seq .hd.s{background:var(--source);border-right:1px solid var(--seam);color:var(--ink-4)}
.seq .hd.t{background:var(--translation);color:var(--accent)}
.seq .b{padding:0 var(--gut) 26px;background:var(--source);border-right:1px solid var(--seam);display:flex;gap:20px}
.seq .b .n{font:400 14px/1.6 var(--mono);color:var(--accent)}
.seq .b .x{font:400 20px/1.55 var(--mono);color:var(--ink-2)}
.seq .m{padding:0 var(--gut) 26px;background:var(--translation);font:300 21px/1.6 var(--serif);color:var(--ink-2)}
.seq .b.last,.seq .m.last{padding-bottom:44px}
@media(max-width:860px){
  .seq{grid-template-columns:1fr}
  .seq .hd.s,.seq .b{border-right:0}
  .seq .b{padding-bottom:16px}
  .seq .m{border-bottom:1px solid var(--seam);padding-bottom:26px}
  .seq .b.last{padding-bottom:16px}
}

/* ---------- cast billing ---------- */
.billing{display:grid;grid-template-columns:1fr 1fr}
.bill-hd{
  padding:34px var(--gut) 18px;
  font:400 12px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
}
.bill-hd.s{background:var(--source);border-right:1px solid var(--seam);color:var(--ink-4);display:flex;justify-content:space-between;gap:16px}
.bill-hd.t{background:var(--translation);color:var(--accent)}
.billing .c-s{
  background:var(--source);border-right:1px solid var(--seam);border-top:1px solid var(--rule-soft);
  padding:26px var(--gut);display:grid;grid-template-columns:34px auto 1fr;gap:22px;align-items:center;color:inherit;
}
.billing .c-t{
  background:var(--translation);border-top:1px solid var(--rule-soft);
  padding:26px var(--gut);font:300 21px/1.6 var(--serif);color:var(--ink-2);
  display:flex;flex-direction:column;gap:12px;justify-content:center;
}
.billing .c-s:hover{background:var(--panel)}
.billing .c-s:hover img{filter:none;border-color:var(--accent)}
.billing .bill-no{font:400 14px/1 var(--mono);color:var(--accent);font-variant-numeric:tabular-nums}
.billing img{
  width:104px;height:130px;object-fit:cover;object-position:50% 20%;background:var(--panel);
  border:1px solid var(--rule);filter:grayscale(1) contrast(1.06);transition:filter .2s,border-color .2s;
}
.billing .who{display:flex;flex-direction:column;gap:9px;font:400 19px/1.3 var(--mono);color:var(--ink)}
.billing .who .role{font-size:14px;letter-spacing:.1em;color:var(--accent)}
.billing .c-t .go{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:860px){
  .billing{grid-template-columns:1fr}
  .billing .c-s{border-right:0;padding-bottom:18px}
  .billing .c-t{border-top:0;border-bottom:1px solid var(--seam);padding-top:0}
  .bill-hd.s{border-right:0}
  .bill-hd.t{display:none}
}

/* ---------- shelf ---------- */
.shelf{display:flex;flex-direction:column;font:400 19px/1.35 var(--mono);color:var(--ink-2)}
.shelf .row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:15px 0;border-bottom:1px solid var(--rule-soft)}
.shelf .row .yr{color:var(--ink-4)}
.shelf .row.now{border-bottom-color:var(--accent);color:var(--ink)}
.shelf .row.now .yr{color:var(--accent)}
.shelf-notes{display:flex;flex-direction:column;gap:14px}
.shelf-notes li{font:300 19px/1.5 var(--serif);color:var(--ink-3)}
.shelf-notes b{color:var(--ink);font-weight:400}

/* ---------- feed / cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--rule)}
.card{
  background:var(--source);padding:32px var(--gut) 30px;display:flex;flex-direction:column;gap:14px;
  min-height:280px;color:inherit;
}
.card:hover{background:var(--panel)}
.card .kick{font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.card h3{
  font:400 clamp(26px,2.4vw,31px)/1.15 var(--display);color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em;
}
.card p{font:300 18px/1.5 var(--serif);color:var(--ink-3);flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.more{display:none}
.more:checked~.cards .hidden-card{display:flex}
.hidden-card{display:none}
.morelabel{
  display:inline-block;cursor:pointer;margin:26px var(--gut) 0;padding:15px 24px;border:1px solid var(--seam);
  font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.morelabel:hover{background:var(--panel)}
.more:checked~.morelabel{display:none}

/* ---------- reference rail ---------- */
.reflist{display:flex;flex-direction:column}
.reflist a{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--rule);font:400 22px/1.2 var(--mono);color:var(--ink);
}
.reflist a:hover{color:var(--accent)}
.reflist a span{font:400 13px/1 var(--mono);letter-spacing:.14em;color:var(--ink-4)}

/* ---------- supporters ---------- */
.woven{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule);background:var(--source)}
.woven .lab{
  border-right:1px solid var(--seam);padding:24px var(--gut);
  display:flex;flex-direction:column;gap:8px;justify-content:center;
}
.woven .lab .t{font:400 13px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.woven .lab .k{font:300 18px/1.45 var(--serif);color:var(--ink-3)}
.woven .slot{padding:20px var(--gut);display:flex;align-items:center}
.sponsor{
  display:flex;align-items:center;gap:20px;width:100%;min-height:92px;
  background:#0A0E13;border:1px solid var(--rule);padding:16px 22px;color:var(--ink-3);
}
.sponsor:hover{border-color:var(--seam)}
.sponsor img{width:150px;height:52px;object-fit:contain;flex:none;background:#0A0E13}
.sponsor-blurb{font:300 17px/1.45 var(--serif);color:var(--ink-3)}
.sponsor-blurb:empty{display:none}
.roll{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.roll .sponsor{min-height:84px}
@media(max-width:860px){
  .woven{grid-template-columns:1fr}
  .woven .lab{border-right:0;border-bottom:1px solid var(--seam)}
  .roll{grid-template-columns:1fr}
}

/* ---------- footer ---------- */
.foot{display:grid;grid-template-columns:1fr 1fr;background:var(--source)}
.foot .a{border-right:1px solid var(--seam);padding:44px var(--gut);display:flex;flex-direction:column;gap:14px}
.foot .b{background:var(--translation);padding:44px var(--gut);display:flex;flex-direction:column;gap:16px}
.foot .word{font:500 26px/1 var(--mono);letter-spacing:-.02em}
.foot .standing{font:400 12px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap;font:400 16px/1.9 var(--mono)}
.disclaimer{font:300 17px/1.6 var(--serif);color:rgba(228,226,220,.72);max-width:56ch;text-wrap:pretty}
.credits{font:400 13px/1.6 var(--mono);color:var(--ink-4)}
.credits a{color:var(--ink-3)}
@media(max-width:860px){.foot{grid-template-columns:1fr}.foot .a{border-right:0;border-bottom:1px solid var(--seam)}}

/* ---------- page headers (category / article / pages) ---------- */
.phead{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)}
.phead .s{background:var(--source);border-right:1px solid var(--seam);padding:clamp(34px,4.4vw,64px) var(--gut)}
.phead .t{background:var(--translation);padding:clamp(34px,4.4vw,64px) var(--gut);display:flex;flex-direction:column;justify-content:center}
.phead .no{font:400 clamp(46px,6vw,72px)/1 var(--mono);letter-spacing:-.04em;color:var(--ink)}
.crumb{font:400 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);margin-bottom:20px}
.crumb a{color:var(--ink-4)}
.crumb a:hover{color:var(--accent)}
@media(max-width:860px){.phead{grid-template-columns:1fr}.phead .s{border-right:0;border-bottom:1px solid var(--seam)}}

.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:88px 1fr;gap:clamp(16px,3vw,40px);padding:30px var(--gut);color:inherit;align-items:start}
.cat-list a:hover{background:var(--panel)}
.cat-list .n{font:400 15px/1.5 var(--mono);color:var(--accent)}
.cat-list h3{font:400 clamp(28px,3vw,38px)/1.12 var(--display);color:var(--ink);margin-bottom:10px}
.cat-list p{font:300 19px/1.55 var(--serif);color:var(--ink-3);max-width:62ch;margin:0 0 10px}
.cat-list .meta{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
@media(max-width:640px){.cat-list a{grid-template-columns:1fr;gap:10px}}

/* ---------- article ---------- */
.a-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--rule)}
.a-hero .s{background:var(--source);border-right:1px solid var(--seam);padding:clamp(34px,4.4vw,64px) var(--gut);display:flex;flex-direction:column;gap:26px}
.a-hero .t{background:var(--translation);padding:clamp(34px,4.4vw,64px) var(--gut);display:flex;flex-direction:column;justify-content:center;gap:20px}
.a-hero .h1{margin:0}
.a-hero figure{margin:0}
.a-hero figure img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--panel)}
.a-hero figcaption{font:400 13px/1.5 var(--mono);color:var(--ink-4);padding-top:10px}
@media(max-width:860px){.a-hero{grid-template-columns:1fr}.a-hero .s{border-right:0;border-bottom:1px solid var(--seam)}}

.article{
  display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.1fr);
  gap:0;background:var(--translation);
}
.article>*{min-width:0}
.article>.margin{
  border-right:1px solid var(--seam);background:var(--source);
  padding:clamp(34px,4vw,60px) clamp(18px,2.4vw,34px);
  display:flex;flex-direction:column;gap:34px;
}
.article-body{
  padding:clamp(34px,4vw,60px) var(--gut);
  padding-inline:var(--gut);
  max-width:calc(var(--measure) + 2*var(--gut));
  font:300 22px/1.72 var(--serif);color:rgba(228,226,220,.9);
}
.article-body h2{
  font:400 clamp(30px,3.2vw,40px)/1.16 var(--display);color:var(--ink);
  margin:2.1em 0 .6em;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
}
.article-body h2:first-child{margin-top:0}
.article-body h2 .sec{font:400 14px/1 var(--mono);color:var(--accent);letter-spacing:.06em}
.article-body h3{font:400 26px/1.25 var(--sans);font-weight:600;color:var(--ink);margin:1.8em 0 .5em}
.article-body ul,.article-body ol{margin:0 0 1.2em;padding-left:1.3em}
.article-body li{margin-bottom:.5em}
.article-body hr{margin:2.2em 0}
.article-body em{font-style:italic}
.article-body strong{font-weight:600;color:var(--ink)}
.article-body a{border-bottom:1px solid var(--seam)}
.lead{font:300 clamp(23px,2.3vw,28px)/1.5 var(--serif);color:var(--ink);margin-bottom:1em;text-wrap:pretty}
.dropcap::first-letter{
  float:left;font:400 84px/.72 var(--display);color:var(--accent);
  margin:10px 14px 0 0;
}
.margin-note{display:flex;flex-direction:column;gap:10px}
.margin-note .mk{font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.margin-note p{font:400 16px/1.55 var(--mono);color:var(--ink-3);margin:0;overflow-wrap:break-word}
.margin-quote{
  border-left:2px solid var(--accent);padding-left:18px;margin:0;
  font:400 clamp(21px,2vw,26px)/1.28 var(--display);color:var(--ink);
}
.margin-quote span{display:block;margin-top:12px;font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.margin-mark{font:400 13px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.article>.margin.cont,.article>.article-body.cont{padding-top:clamp(24px,2.6vw,40px);padding-bottom:0}
.article>.article-body.last{padding-bottom:clamp(34px,4vw,60px)}
.article-body.cont>h2:first-child{margin-top:0}
.article-body>h2:first-child{margin-top:0}
@media(max-width:960px){
  .article{grid-template-columns:minmax(0,1fr)}
  .article>.margin{border-right:0;border-bottom:1px solid var(--seam);gap:26px;padding-inline:var(--gut)}
  .article>.margin.cont{border-bottom:0;padding-bottom:clamp(20px,2.6vw,32px)}
}

/* ---------- palette components ---------- */
.pullquote{
  margin:1.8em 0;padding:0 0 0 26px;border-left:3px solid var(--accent);
  font:400 clamp(26px,2.8vw,34px)/1.3 var(--display);color:var(--ink);
}
.pullquote p{margin:0}
.blockquote{margin:1.8em 0;padding:22px 26px;background:var(--source);border-left:3px solid var(--seam)}
.blockquote p{font:300 21px/1.6 var(--serif);color:var(--ink-2)}
.blockquote cite{display:block;margin-top:12px;font:400 13px/1.4 var(--mono);font-style:normal;color:var(--ink-4)}
.callout{
  margin:1.8em 0;padding:26px 28px;background:var(--source);border:1px solid var(--seam);
}
.callout p{font:300 20px/1.6 var(--serif);color:var(--ink-2);margin:0}
.callout::before{
  content:"Callout";display:block;margin-bottom:12px;
  font:400 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.note{
  margin:1.6em 0;padding:16px 20px;border-left:2px solid var(--rule);
  font:400 17px/1.6 var(--mono);color:var(--ink-3);
}

.versus,.datatable{width:100%;table-layout:fixed;border-collapse:collapse;margin:1.8em 0;font:400 17px/1.5 var(--mono);color:var(--ink-2)}
.versus th,.versus td,.datatable th,.datatable td{overflow-wrap:break-word}
.versus caption,.datatable caption{
  text-align:left;padding-bottom:12px;
  font:400 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.versus th,.datatable th{
  text-align:left;padding:14px 16px;border-bottom:1px solid var(--seam);
  font:400 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);vertical-align:bottom;
}
.versus td,.datatable td{padding:14px 16px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.versus tbody th{text-transform:none;letter-spacing:0;color:var(--ink);font-size:16px;width:26%}
.datatable tr:hover td{background:var(--source)}
.table-scroll{overflow-x:auto;margin:1.8em 0}
.table-scroll>table{margin:0}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);margin:1.8em 0}
.statblock{background:var(--source);padding:24px 20px;display:flex;flex-direction:column;gap:8px}
.stat-num{font:400 clamp(34px,4vw,46px)/1 var(--display);color:var(--accent)}
.stat-label{font:400 13px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}

.timeline{list-style:none;margin:1.8em 0;padding:0}
.timeline li{
  display:grid;grid-template-columns:minmax(140px,26%) 1fr;gap:clamp(14px,2.4vw,28px);
  padding:18px 0 18px 22px;border-left:1px solid var(--seam);position:relative;
}
.timeline li::before{
  content:"";position:absolute;left:-5px;top:26px;width:9px;height:9px;background:var(--accent);border-radius:50%;
}
.t-when{font:400 14px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.t-what{font:300 19px/1.55 var(--serif);color:var(--ink-2)}
@media(max-width:640px){.timeline li{grid-template-columns:1fr;gap:6px}}

.chart{margin:1.8em 0;background:var(--source);border:1px solid var(--rule);padding:26px 24px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:16px;font:400 14px/1.5 var(--mono);color:var(--ink-4)}
.chart .c-lab{font:400 12px var(--mono);fill:rgba(228,226,220,.6)}
.chart .c-val{font:400 12px var(--mono);fill:#D2A24C}
.chart .c-bar{fill:#D2A24C}
.chart .c-bar.dim{fill:rgba(210,162,76,.35)}
.chart .c-grid{stroke:rgba(228,226,220,.12)}

.article-figure{margin:2em 0}
.article-figure img{width:100%;background:var(--panel)}
.article-figure figcaption{margin-top:12px;font:400 14px/1.55 var(--mono);color:var(--ink-4)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:2em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--panel)}
.gallery figcaption{margin-top:8px;font:400 13px/1.5 var(--mono);color:var(--ink-4)}
.map-figure{margin:2em 0}
.map-figure .map-slot{
  aspect-ratio:16/9;background:var(--source);border:1px solid var(--seam);
}
.map-figure figcaption{margin-top:12px;font:400 14px/1.55 var(--mono);color:var(--ink-4)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule);margin:2em 0}
.profile-card{background:var(--source);padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.profile-card .p-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;background:var(--panel);filter:grayscale(1) contrast(1.06)}
.profile-card h3{font:400 26px/1.15 var(--display);color:var(--ink)}
.profile-card .p-role{font:400 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{font:300 18px/1.55 var(--serif);color:var(--ink-3);margin:0}
.profile-card .p-links{font:400 14px/1.5 var(--mono)}
.profile-card .p-attr{font:400 12px/1.5 var(--mono);color:var(--ink-4)}
.profile-card.no-photo{border-left:2px solid var(--seam)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:2em 0}
.org-card{
  display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--source);
  border:1px solid var(--rule);color:var(--ink);
}
.org-card:hover{border-color:var(--seam)}
.org-logo{width:100%;height:44px;object-fit:contain}
.org-name{font:400 22px/1.2 var(--mono)}
.org-host{font:400 13px/1 var(--mono);letter-spacing:.1em;color:var(--ink-4)}
.entity-ref{font:400 .95em var(--mono);white-space:nowrap}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);margin:1.6em 0}
.further-grid a{background:var(--source);padding:22px;font:400 20px/1.3 var(--display);color:var(--ink);min-height:120px;display:flex;align-items:flex-end}
.further-grid a:hover{background:var(--panel);color:var(--accent)}

.fn-ref{font:400 .58em/0 var(--mono);vertical-align:super;margin-left:2px;white-space:nowrap}
.fn-ref a{color:var(--accent);border-bottom:0;padding:0 1px}
.fn-ref a:hover,.fn-ref a:target{color:var(--ink);background:var(--accent)}
.footnotes{margin-top:3em;padding:26px 28px;background:var(--source);border:1px solid var(--seam)}
.footnotes .fn-head{font:400 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.footnotes .fn-intro{font:400 15px/1.6 var(--mono);color:var(--ink-4);margin:0 0 18px}
.footnotes ol{list-style:none;margin:0;padding:0;counter-reset:fn}
.footnotes li{
  counter-increment:fn;display:grid;grid-template-columns:34px 1fr;gap:12px;
  padding:12px 0;border-top:1px solid var(--rule-soft);
  font:400 16px/1.6 var(--mono);color:var(--ink-3);
}
.footnotes li::before{content:counter(fn);color:var(--accent);font-variant-numeric:tabular-nums}
.footnotes li:first-child{border-top:0}
.footnotes li:target{background:rgba(210,162,76,.08)}
.footnotes a{overflow-wrap:anywhere}
.fn-back{color:var(--ink-4);margin-left:6px;border-bottom:0}
.related{border-top:1px solid var(--seam);margin-top:3em;padding-top:1.6em}.related h2{font:400 28px/1.2 var(--display);color:var(--ink);margin-bottom:.6em;display:block}
.related-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.related-links li{border-bottom:1px solid var(--rule-soft)}
.related-links a{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:16px 0;font:300 21px/1.35 var(--serif);color:var(--ink)}
.related-links a:hover{color:var(--accent)}
.related-links span{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}

/* ---------- prose page (about/contact/404/styleguide) ---------- */
.prose{padding:clamp(34px,4vw,64px) var(--gut);max-width:calc(var(--measure) + 2*var(--gut));font:300 22px/1.72 var(--serif);color:rgba(228,226,220,.9)}
.prose h2{font:400 clamp(28px,3vw,38px)/1.18 var(--display);color:var(--ink);margin:1.8em 0 .5em}
.prose h3{font:600 22px/1.3 var(--sans);color:var(--ink);margin:1.6em 0 .4em}
.prose ul{padding-left:1.2em}
.sg-band{border-bottom:1px solid var(--rule);padding:clamp(30px,4vw,56px) var(--gut)}
.sg-band>h2{font:400 clamp(26px,2.6vw,34px)/1.2 var(--display);color:var(--ink);margin-bottom:6px}
.sg-band>.k{font:400 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.sg-narrow{max-width:900px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--accent);color:var(--ground);padding:10px 16px}


/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 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. */
.slot .sponsor.sponsor img{box-sizing:border-box!important;padding:8px 14px!important}
.roll .sponsor.sponsor img{box-sizing:border-box!important;height:52px!important;display:block!important;width:87px!important;max-width:100%!important;flex:none!important;padding:8px 14px!important}

/* op-roll-marks-bigger: operator: bigger logos in the bottom rows. sp-mark-frame pins the roll
   mark to width:87px at 52px tall, so it measured 46-97px inside an anchor 500px wide. The plate
   takes the tile and grows; the selector matches sp-mark-frame's four classes or nothing changes. */
.roll .sponsor.sponsor img{width:100%!important;height:70px!important;max-width:none!important}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 876px of tier across
   6 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:75px!important;min-height:0!important;overflow:hidden!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .roll 7 rows at 1024). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; font-weight: 400;}
.cat-list h2:where(.rt-h3){font: 400 clamp(28px,3vw,38px)/1.12 var(--display); color: var(--ink); margin-bottom: 10px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.article-body > figure.article-figure > img,
  div.article-body.cont > figure.article-figure > img,
  div.billing > a.c-s > img,
  div.poster-mount.src > figure.one-sheet > img,
  div.profile-grid > div.profile-card > img.p-photo,
  div.s > figure > img,
  section.band.split > div.pad.src > img){height:auto}
/* op-img-dims:end */
@media (min-width:800px) and (max-width:879px){.roll:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))!important;gap:var(--sp-gap,14px)!important;justify-content:start!important}.roll:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}[data-partner].sponsor > .sp-logo{flex:0 0 auto!important;width:max(150px,min(220px,42%))!important;display:block!important}@media (max-width:560px){[data-partner].sponsor{flex-direction:column!important;align-items:stretch!important;gap:10px!important}[data-partner].sponsor > .sp-logo{width:min(260px,100%)!important}}
@media (min-width:880px) and (max-width:1239px){.roll:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,14px)!important}.roll:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}