/* op-heading-levels-ua */
:where(h2.rt-h3){display:block;font-size:1.17em;margin-block-start:1em;margin-block-end:1em;font-weight:bold}
/* op-heading-levels-ua:end */
/* ============================================================
   BLACKFIELD.ORG — "Nocturne" design system
   Cinematic, dark & atmospheric. Unofficial fan archive.
   Static HTML + CSS only. No JavaScript.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --paper:#0B0B0D;          /* page ground */
  --paper-2:#121215;        /* raised surface */
  --paper-3:#1A1A1F;        /* deeper surface / image ground */
  --ink:#F0EEE9;            /* primary text */
  --ink-70:rgba(240,238,233,.72);
  --ink-55:rgba(240,238,233,.55);
  --ink-40:rgba(240,238,233,.42);
  --ink-25:rgba(240,238,233,.25);
  --line:rgba(240,238,233,.14);
  --line-strong:rgba(240,238,233,.3);
  --brass:#C9B27C;          /* single accent — muted brass */
  --brass-dim:rgba(201,178,124,.5);
  --chart-1:#C9B27C;
  --chart-2:#7C8DC9;
  --chart-3:#5E5E6B;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --display:'Italiana',serif;
  --measure:70ch;
  --gutter:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 20px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none;transition:color .2s,opacity .2s}
a:hover{color:var(--brass)}
::selection{background:var(--brass);color:var(--paper)}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.12;margin:0}
h1{font-size:clamp(44px,7vw,88px);letter-spacing:.04em}
h2{font-size:clamp(30px,4vw,44px);letter-spacing:.03em}
h3{font-size:clamp(23px,2.6vw,28px)}

/* mono kicker label */
.kicker{
  font:500 12px/1.4 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-40);
}
.rule-row{display:flex;align-items:baseline;gap:20px}
.rule-row::after{content:"";flex:1;height:1px;background:var(--line);transform:translateY(-4px)}

/* ---------- Annotation slots (unfilled builds) ----------
   Any empty [data-fill] element shows its own annotation.
   Once copy is injected, the note disappears automatically. */
[data-fill]:empty::before{
  content:"⟨ " attr(data-fill) " ⟩";
  font:italic 400 .8em/1.5 var(--serif);
  color:var(--brass-dim);
  letter-spacing:.02em;
}

/* ============================================================
   SITE CHROME
   ============================================================ */
.site-header{
  position:relative;z-index:5;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:26px var(--gutter);
  font:500 12px var(--mono);letter-spacing:.16em;
}
.site-header .brand{color:var(--ink);letter-spacing:.2em}
.site-nav{display:flex;flex-wrap:wrap;gap:clamp(14px,2.5vw,34px)}
.site-nav a{color:var(--ink-70)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--brass)}
.header-line{border-bottom:1px solid var(--line)}

.site-footer{
  margin-top:96px;border-top:1px solid var(--line);
  padding:40px var(--gutter) 48px;
  display:flex;flex-direction:column;gap:22px;
}
.footer-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.footer-nav{display:flex;flex-wrap:wrap;gap:22px;font:500 11px var(--mono);letter-spacing:.18em}
.footer-nav a{color:var(--ink-40)}
.footer-brand{font:400 22px var(--display);letter-spacing:.14em}
.disclaimer{
  font:400 12.5px/1.6 var(--mono);color:var(--ink-40);
  border-top:1px solid var(--line);padding-top:18px;letter-spacing:.04em;
}

/* interior page hero */
.page-hero{
  padding:clamp(56px,9vw,110px) var(--gutter) clamp(36px,5vw,60px);
  border-bottom:1px solid var(--line);
}
.page-hero .kicker{display:block;margin-bottom:22px}
.page-hero p.standfirst{
  max-width:var(--measure);margin:26px 0 0;
  font:italic 400 clamp(20px,2.2vw,24px)/1.65 var(--serif);color:var(--ink-70);
}

/* main content wrap: wide stage, capped reading column */
.page-body{padding:clamp(44px,6vw,72px) var(--gutter)}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.4em;font:400 21px/1.78 var(--serif);color:var(--ink-70)}
.prose p strong{color:var(--ink)}
.prose h2{margin:2.2em 0 .8em;color:var(--ink)}
.prose h3{margin:1.8em 0 .7em;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.6em;padding-left:1.3em;font:400 20px/1.75 var(--serif);color:var(--ink-70)}
.prose li{margin-bottom:.7em}
.prose li::marker{color:var(--brass-dim)}
.prose a{color:var(--ink);border-bottom:1px solid var(--brass-dim)}
.prose a:hover{color:var(--brass)}
.prose em{color:var(--ink)}

/* ============================================================
   TEXT / STRUCTURE COMPONENTS
   ============================================================ */
.lead{
  font:italic 400 clamp(23px,2.5vw,27px)/1.6 var(--serif)!important;
  color:var(--ink)!important;
}
.lead::first-letter{
  font-family:var(--display);font-style:normal;
  font-size:3.1em;float:left;line-height:.82;
  padding:.04em .12em 0 0;color:var(--brass);
}

.pullquote{
  margin:2.4em 0;padding:0;border:0;position:relative;
  max-width:calc(var(--measure) + 6ch);
  font:italic 400 clamp(24px,3vw,32px)/1.5 var(--serif);
  color:var(--ink);letter-spacing:.01em;
}
.pullquote::before{
  content:"";display:block;width:64px;height:1px;background:var(--brass);margin-bottom:26px;
}
.pullquote p{
  margin:0;font:italic 400 clamp(26px,3.2vw,34px)/1.45 var(--serif)!important;
  color:var(--ink)!important;letter-spacing:.01em;
}
.pullquote::after{
  content:"";display:block;width:64px;height:1px;background:var(--brass);margin-top:26px;
}

blockquote.blockquote{
  margin:2em 0;padding:6px 0 6px 28px;border-left:1px solid var(--brass);
}
blockquote.blockquote p{margin:0 0 .6em;font:italic 400 22px/1.65 var(--serif);color:var(--ink-70)}
blockquote.blockquote cite{font:500 12px var(--mono);letter-spacing:.14em;color:var(--ink-40);font-style:normal}

.callout{
  margin:2.2em 0;padding:26px 30px;
  background:var(--paper-2);border:1px solid var(--line);
  position:relative;
}
.callout::before{
  content:"NOTA BENE";position:absolute;top:-8px;left:24px;
  background:var(--paper);padding:0 10px;
  font:500 10px var(--mono);letter-spacing:.26em;color:var(--brass);
}
.callout p{margin:0;font:400 18.5px/1.7 var(--sans);color:var(--ink-70)}
.callout p+p{margin-top:.8em}
div.callout{font:400 18.5px/1.7 var(--sans);color:var(--ink-70)}

.note{
  font:400 15px/1.65 var(--mono)!important;color:var(--ink-40)!important;
  padding-left:20px;border-left:1px solid var(--line-strong);
}

/* ============================================================
   DATA / COMPARISON
   ============================================================ */
table{border-collapse:collapse;width:100%;margin:2em 0;font:400 17px/1.55 var(--sans)}
table caption{
  caption-side:top;text-align:left;padding-bottom:14px;
  font:500 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-40);
}
th{
  text-align:left;font:500 11.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-40);padding:12px 16px;border-bottom:1px solid var(--line-strong);
}
td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink-70);vertical-align:top}
tbody tr:hover td{background:rgba(240,238,233,.03)}

.versus thead th:not(:first-child){color:var(--ink)}
.versus td:first-child{font:500 15px var(--sans);color:var(--ink)}

.ranktable td:first-child{
  font:400 26px var(--display);color:var(--brass);width:56px;
}
.ranktable td:nth-child(2){font:italic 500 20px var(--serif);color:var(--ink)}

.datatable td:first-child{color:var(--ink)}

.statblock{display:flex;flex-direction:column;gap:6px;min-width:130px}
.stat-num{font:400 clamp(44px,5vw,60px)/1 var(--display);color:var(--ink);letter-spacing:.02em}
.stat-label{font:500 11.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-40)}
.statrow{
  display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);
  margin:2.4em 0;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.statrow .statblock{flex:1 1 130px}

.proscons{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:2.2em 0}
.proscons .pros,.proscons .cons{background:var(--paper-2);padding:26px 28px}
.proscons h4{
  font:500 12px var(--mono);letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px;
}
.proscons .pros h4{color:var(--brass)}
.proscons .cons h4{color:var(--ink-40)}
.proscons ul{margin:0;padding:0;list-style:none;font:400 17px/1.6 var(--sans);color:var(--ink-70)}
.proscons li{padding:10px 0 10px 22px;position:relative;border-top:1px solid var(--line)}
.proscons li:first-child{border-top:0}
.proscons .pros li::before{content:"+";position:absolute;left:0;color:var(--brass)}
.proscons .cons li::before{content:"–";position:absolute;left:0;color:var(--ink-40)}

/* ============================================================
   MEDIA / FIGURES
   ============================================================ */
figure{margin:2.4em 0}
figcaption{
  margin-top:14px;font:400 13px/1.6 var(--mono);color:var(--ink-40);letter-spacing:.04em;
}
figcaption::before{content:"— ";color:var(--brass-dim)}

.article-figure img,.place-figure img{
  width:100%;display:block;background:var(--paper-3);
  filter:grayscale(.25) brightness(.92);
}
.article-figure{max-width:100%}

.place-figure{position:relative}
.place-figure::after{
  content:"◈ PLACE";position:absolute;top:14px;right:14px;
  font:500 10px var(--mono);letter-spacing:.2em;color:var(--ink);
  background:rgba(11,11,13,.72);padding:6px 10px;backdrop-filter:blur(4px);
}

.gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
  margin:2.4em 0;
}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--paper-3);filter:grayscale(.25) brightness(.92)}
.gallery figcaption{margin-top:10px;font-size:12px}

.brand-logo-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:2.2em 0;
}
.brand-logo{
  height:52px;width:auto;padding:12px 20px;
  background:var(--paper-2);border:1px solid var(--line);
  filter:grayscale(1) brightness(1.4);opacity:.75;transition:opacity .25s,filter .25s;
}
.brand-logo:hover{opacity:1;filter:grayscale(0)}

.map-figure{
  border:1px solid var(--line);background:var(--paper-2);padding:10px;
}
.map-figure svg{display:block;width:100%;height:auto;background:var(--paper-3)}
.map-figure figcaption{padding:14px 10px 6px;margin:0}

/* ============================================================
   RICH COMPONENTS
   ============================================================ */
/* Timeline — cinematic left rail.
   .t-when tolerates multi-word phase labels ("Rise to Stardom in Israel"),
   not just years: 150px label column, wrap without mid-word breaks,
   dot anchored to the first line, rail centred in its own gutter. */
.timeline{list-style:none;margin:2.4em 0;padding:0;position:relative}
.prose .timeline{padding-left:0}
.prose .timeline li{margin-bottom:0}
.timeline::before{
  content:"";position:absolute;left:171px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,var(--brass-dim),var(--line) 30%,var(--line) 70%,transparent);
}
.timeline li{
  display:grid;grid-template-columns:150px 44px 1fr;align-items:baseline;
  padding:20px 0;
}
.timeline li+li{border-top:1px solid var(--line)}
.t-when{
  grid-column:1;grid-row:1;
  font:400 21px/1.35 var(--display);color:var(--brass);letter-spacing:.04em;text-align:right;
  white-space:normal;overflow-wrap:normal;word-break:keep-all;hyphens:none;
}
.timeline li::after{
  content:"";grid-column:2;grid-row:1;justify-self:center;align-self:start;margin-top:11px;
  width:7px;height:7px;border-radius:50%;
  background:var(--paper);border:1px solid var(--brass);
}
.t-what{grid-column:3;grid-row:1;font:400 18.5px/1.7 var(--sans);color:var(--ink-70)}
.t-what strong{font:italic 500 21px var(--serif);color:var(--ink)}

/* Profile cards */
.profile-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;margin:2.4em 0;max-width:920px;
}
.profile-card{
  background:var(--paper-2);border:1px solid var(--line);
  padding:0 0 26px;display:flex;flex-direction:column;
  transition:border-color .25s;
}
.profile-card:hover{border-color:var(--line-strong)}
.profile-card .p-photo{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--paper-3);filter:grayscale(.5) brightness(.85);
  margin-bottom:22px;
}
.profile-card:hover .p-photo{filter:grayscale(.15) brightness(.95)}
.profile-card h3{padding:0 26px;font-size:26px;letter-spacing:.03em}
.profile-card .p-role{
  margin:8px 0 14px;padding:0 26px;
  font:500 11.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
}
.profile-card p{margin:0 0 14px;padding:0 26px;font:400 16.5px/1.65 var(--sans);color:var(--ink-70)}
.profile-card .p-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:auto;padding-top:8px}
.profile-card .p-links a{
  font:500 12px var(--mono);letter-spacing:.12em;color:var(--ink);
  border-bottom:1px solid var(--brass-dim);padding-bottom:2px;
}
.profile-card .p-links a:hover{color:var(--brass)}
.profile-card .p-attr{
  margin-top:14px;margin-bottom:0;font:400 11px var(--mono);color:var(--ink-25);
}
/* no-photo variant: intentional editorial head (no faces by policy) */
.profile-card.no-photo{
  padding-top:34px;
  background:linear-gradient(180deg,rgba(201,178,124,.07),var(--paper-2) 150px);
}
.profile-card.no-photo::before{
  content:"";display:block;width:56px;height:2px;background:var(--brass);
  margin:0 26px 26px;
}
.profile-card.no-photo h3{font-size:30px}
.profile-card.no-photo .p-role{margin-top:10px}

/* Entity reference chip */
.entity-ref{
  display:inline-flex;align-items:baseline;gap:.4em;
  font:500 .82em var(--mono);letter-spacing:.06em;
  color:var(--ink);border:1px solid var(--line-strong);
  padding:.18em .7em .22em;border-radius:2px;white-space:nowrap;
  transition:border-color .2s,color .2s;
}
.entity-ref:hover{border-color:var(--brass);color:var(--brass)}

/* Org cards — compact links */
.org-grid{display:flex;flex-wrap:wrap;gap:12px;margin:2.2em 0}
.org-card{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--paper-2);border:1px solid var(--line);
  padding:12px 20px 12px 14px;min-height:56px;
  transition:border-color .25s;
}
.org-card:hover{border-color:var(--brass-dim);color:var(--ink)}
.org-logo{
  width:32px;height:32px;object-fit:contain;
  background:var(--ink);padding:3px;border-radius:2px;
}
.org-name{font:500 15px var(--sans);color:var(--ink)}
.org-host{font:400 11.5px var(--mono);color:var(--ink-40)}
.org-card.no-logo{padding-left:20px}
.org-card.no-logo::before{
  content:"";width:7px;height:7px;border:1px solid var(--brass);transform:rotate(45deg);
}

/* Steps */
.steps{list-style:none;counter-reset:step;margin:2.4em 0;padding:0;max-width:var(--measure)}
.steps li{
  counter-increment:step;position:relative;
  padding:22px 0 22px 88px;border-top:1px solid var(--line);
  font:400 18.5px/1.7 var(--sans);color:var(--ink-70);
}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:16px;
  font:400 34px var(--display);color:var(--brass);
}

/* Checklist */
.checklist{list-style:none;margin:2.2em 0;padding:0;max-width:var(--measure)}
.checklist li{
  position:relative;padding:12px 0 12px 40px;
  font:400 18.5px/1.65 var(--sans);color:var(--ink-70);
}
.checklist li+li{border-top:1px solid var(--line)}
.checklist li::before{
  content:"";position:absolute;left:2px;top:19px;
  width:14px;height:8px;border-left:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:rotate(-45deg);
}

/* FAQ — details/summary */
.faq{margin:2.4em 0;border-top:1px solid var(--line);max-width:calc(var(--measure) + 4ch)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;
  padding:22px 44px 22px 0;position:relative;
  font:italic 500 21px/1.5 var(--serif);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font:300 26px var(--sans);color:var(--brass);transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin:0;padding:0 0 24px;font:400 18px/1.7 var(--sans);color:var(--ink-70);max-width:var(--measure)}

/* Tabs — CSS radio hack */
.tabs{margin:2.4em 0;border:1px solid var(--line);background:var(--paper-2)}
.tabs>input{position:absolute;opacity:0;pointer-events:none}
.tabs>label{
  display:inline-block;padding:16px 26px;cursor:pointer;
  font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  transition:color .2s;
}
.tabs>label:hover{color:var(--ink)}
.tabs .tab-panel{display:none;padding:28px 30px;font:400 18px/1.7 var(--sans);color:var(--ink-70)}
.tabs .tab-panel>p{margin:0 0 1em}
.tabs .tab-panel>p:last-child{margin-bottom:0}
.tabs>input:nth-of-type(1):checked~label:nth-of-type(1),
.tabs>input:nth-of-type(2):checked~label:nth-of-type(2),
.tabs>input:nth-of-type(3):checked~label:nth-of-type(3){
  color:var(--brass);border-bottom-color:var(--brass);
}
.tabs>input:nth-of-type(1):checked~.tab-panel:nth-of-type(1),
.tabs>input:nth-of-type(2):checked~.tab-panel:nth-of-type(2),
.tabs>input:nth-of-type(3):checked~.tab-panel:nth-of-type(3){display:block}

/* Charts */
.chart{border:1px solid var(--line);background:var(--paper-2);padding:26px 26px 18px;margin:2.4em 0}
.chart svg{display:block;width:100%;height:auto}
.chart figcaption{padding-top:16px;margin-top:14px;border-top:1px solid var(--line)}
.chart text{font:500 11px var(--mono);fill:var(--ink-40);letter-spacing:.08em}
svg.chart{display:block;width:100%;height:auto;margin:2.4em 0}
.chart .c-title{font-size:12px;letter-spacing:.14em;fill:var(--ink-40)}
.chart .c-cat{font-size:12.5px;fill:rgba(240,238,233,.78);letter-spacing:.04em}
.chart .c-val{font-size:12px;fill:var(--ink-55)}

/* Further reading */
.further-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:2.6em 0;
}
.further-grid a{
  display:flex;flex-direction:column;gap:14px;
  background:var(--paper);padding:26px 26px 30px;
  transition:background .25s;
}
.further-grid a:hover{background:var(--paper-2)}
.f-tag{font:500 10.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.f-t{font:italic 500 21px/1.4 var(--serif);color:var(--ink)}
.further-grid a:hover .f-t{color:var(--brass)}
.further-grid a::after{content:"⟶";margin-top:auto;font:400 16px var(--sans);color:var(--ink-40)}

/* ============================================================
   PARTNERS / SUPPORTERS FIELD
   Variable count (~5–25). data-partner="1" is most prominent.
   All slots in HTML; overflow reveal is CSS-only.
   ============================================================ */
.partners{padding:clamp(48px,7vw,84px) var(--gutter);border-top:1px solid var(--line)}
.partners .rule-row{margin-bottom:40px}

.sponsor-field{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(96px,auto);grid-auto-flow:dense;gap:14px;
}
.sponsor{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;
  grid-column:span 3;
  background:var(--paper-2);border:1px solid var(--line);
  padding:20px;text-align:center;position:relative;overflow:hidden;
  transition:border-color .3s,background .3s;
}
.sponsor:hover{border-color:var(--brass-dim);background:var(--paper-3)}
.sponsor img{
  max-width:72%;max-height:56px;object-fit:contain;
  filter:grayscale(1) brightness(1.25);opacity:.8;transition:filter .3s,opacity .3s;
}
.sponsor:hover img{filter:grayscale(0);opacity:1}
.sponsor-blurb{
  font:400 14px/1.55 var(--sans);color:var(--ink-55);
  max-width:44ch;
}
.sponsor-blurb:empty::before{
  content:"⟨ partner blurb ⟩";font:italic 400 13px var(--serif);color:var(--ink-25);
}
/* tier 1 — featured hero */
.sponsor[data-partner="1"]{
  grid-column:span 6;grid-row:span 2;
  border-color:var(--line-strong);gap:18px;padding:34px;
}
.sponsor[data-partner="1"]::before{
  content:"FEATURED SUPPORTER";position:absolute;top:16px;left:20px;
  font:500 9.5px var(--mono);letter-spacing:.26em;color:var(--brass);
}
.sponsor[data-partner="1"] img{max-height:96px;max-width:60%}
/* tier 2 — slots 2–4, wider */
.sponsor[data-partner="2"],.sponsor[data-partner="3"],.sponsor[data-partner="4"]{
  grid-column:span 3;grid-row:span 2;
}
/* wall tiles (5+): blurb slides in on hover — CSS-only reveal */
.sponsor:not([data-partner="1"]):not([data-partner="2"]):not([data-partner="3"]):not([data-partner="4"]) .sponsor-blurb{
  position:absolute;inset:auto 0 0;padding:10px 14px;
  background:rgba(11,11,13,.92);font-size:12.5px;
  transform:translateY(100%);transition:transform .3s ease;
}
.sponsor:not([data-partner="1"]):not([data-partner="2"]):not([data-partner="3"]):not([data-partner="4"]):hover .sponsor-blurb,
.sponsor:not([data-partner="1"]):not([data-partner="2"]):not([data-partner="3"]):not([data-partner="4"]):focus .sponsor-blurb{
  transform:translateY(0);
}
/* bounded wall: beyond 12 slots hides behind a CSS-only expander */
.sponsor:nth-of-type(n+13){display:none}
#all-supporters:checked~.sponsor-field .sponsor{display:flex}
.sponsor-toggle{display:none}
.partners:has(.sponsor:nth-of-type(13)) .sponsor-toggle{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  cursor:pointer;font:500 12px var(--mono);letter-spacing:.2em;color:var(--ink-55);
  border:1px solid var(--line-strong);padding:14px 26px;
  transition:color .2s,border-color .2s;
}
.sponsor-toggle:hover{color:var(--brass);border-color:var(--brass-dim)}
.sponsor-toggle::after{content:"↓"}
#all-supporters:checked~.sponsor-toggle{display:none}
#all-supporters{position:absolute;opacity:0;pointer-events:none}

/* ============================================================
   CSS-ONLY LIST EXPANDER  (news feed etc.)
   <input type="checkbox" id="X" class="expander-state">
   … items …  .x-hidden items revealed when checked
   <label for="X" class="expander-cta">…</label>
   ============================================================ */
.expander-state{position:absolute;opacity:0;pointer-events:none}
.x-hidden{display:none}
.expander-state:checked~.x-hidden,
.expander-state:checked~* .x-hidden{display:grid}
.expander-cta{
  display:inline-flex;align-items:baseline;gap:12px;margin-top:30px;cursor:pointer;
  font:500 12px var(--mono);letter-spacing:.2em;color:var(--ink-55);
  border-bottom:1px solid var(--brass-dim);padding-bottom:6px;
  transition:color .2s;
}
.expander-cta:hover{color:var(--brass)}
.expander-cta::after{content:"＋";color:var(--brass)}
.expander-state:checked~.expander-cta{display:none}

/* ============================================================
   FORMS (contact) — static styling only
   ============================================================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px;margin:2.2em 0}
.form-grid .field-wide{grid-column:1/-1}
.field label{
  display:block;margin-bottom:10px;
  font:500 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-40);
}
.field input,.field textarea{
  width:100%;background:var(--paper-2);border:1px solid var(--line);
  color:var(--ink);padding:16px 18px;font:400 17px var(--sans);
  transition:border-color .25s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brass-dim)}
.field textarea{min-height:180px;resize:vertical}
.btn{
  display:inline-block;padding:16px 36px;cursor:pointer;
  background:none;border:1px solid var(--line-strong);color:var(--ink);
  font:500 12.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;
  transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-brass{border-color:var(--brass);color:var(--brass)}
.btn-brass:hover{background:var(--brass);color:var(--paper);border-color:var(--brass)}

/* ============================================================
   HOMEPAGE-SPECIFIC
   ============================================================ */
@keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.11)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

.hero{position:relative;min-height:min(88vh,760px);display:flex;flex-direction:column;overflow:hidden;background:#000}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.55);
  animation:heroZoom 32s ease-out both;
}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,8,.6) 0%,rgba(5,5,8,.12) 42%,rgba(11,11,13,.97) 100%);
}
.hero .site-header{position:relative}
.hero-title{
  position:relative;margin-top:auto;text-align:center;
  padding:0 var(--gutter) clamp(56px,9vh,88px);
  animation:fadeUp 1.2s .2s ease-out both;
}
.hero-title .wordmark{
  font:400 clamp(64px,11.5vw,144px)/1 var(--display);
  letter-spacing:.08em;color:var(--ink);
}
.hero-title .tagline{
  display:block;margin-top:20px;
  font:400 clamp(11px,1.3vw,15px) var(--mono);letter-spacing:.28em;color:var(--ink-55);
}

.home-section{padding:clamp(52px,7vw,88px) var(--gutter) 0}
.home-section .rule-row{margin-bottom:44px}

/* discography rail */
.disco-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(16px,2.4vw,28px);
}
.album{display:flex;flex-direction:column;gap:12px}
.album a{display:flex;flex-direction:column;gap:12px}
.album img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  background:var(--paper-3);border:1px solid var(--line);
  filter:brightness(.94);box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:filter .3s,transform .3s,border-color .3s;
}
.album a:hover img{border-color:var(--line-strong)}
.album a:hover img{filter:brightness(1.02);transform:translateY(-4px)}
.album-title{font:400 20px var(--display);letter-spacing:.02em;color:var(--ink)}
.album-year{font:400 12px var(--mono);color:var(--ink-40);margin-top:-6px}

/* dispatch / news list */
.dispatch-list{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dispatch{
  display:grid;grid-template-columns:150px 1fr auto;gap:28px;align-items:baseline;
  background:var(--paper);padding:26px 8px;
  transition:background .25s;
}
.dispatch:hover{background:var(--paper-2)}
.dispatch .d-date{font:400 13px var(--mono);color:var(--ink-40);letter-spacing:.06em}
.dispatch .d-title{font:italic 500 clamp(20px,2.2vw,25px)/1.35 var(--serif);color:var(--ink)}
.dispatch:hover .d-title{color:var(--brass)}
.dispatch .d-arrow{font:400 18px var(--sans);color:var(--ink-40)}
.dispatch-badge{
  display:inline-block;margin-right:14px;padding:3px 10px 4px;
  font:500 10px var(--mono);letter-spacing:.22em;color:var(--paper);background:var(--brass);
  vertical-align:middle;
}

/* feature split (latest release) */
.feature-split{
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,60px);align-items:center;
}
.feature-media{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#141419,#0a0a10);overflow:hidden}
.feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.6)}
.play-badge{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.play-badge::before{
  content:"";width:76px;height:76px;border:1px solid rgba(240,238,233,.6);border-radius:50%;
  position:absolute;transition:transform .3s,border-color .3s;
}
.feature-media:hover .play-badge::before{transform:scale(1.1);border-color:var(--brass)}
.play-badge::after{
  content:"";width:0;height:0;border-left:17px solid var(--ink);
  border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px;
}
.media-label{
  position:absolute;left:20px;bottom:16px;
  font:400 11px var(--mono);letter-spacing:.2em;color:var(--ink-55);
}
.feature-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.feature-copy h2{font-size:clamp(34px,4vw,48px)}
.feature-copy p{margin:0;font:400 17px/1.7 var(--sans);color:var(--ink-70);max-width:52ch}

/* ============================================================
   ARTICLE / POST TEMPLATE
   ============================================================ */
.post-hero{
  padding:clamp(64px,9vw,110px) var(--gutter) clamp(40px,5vw,56px);
  border-bottom:1px solid var(--line);max-width:1100px;
}
.post-meta{
  display:flex;flex-wrap:wrap;gap:22px;margin-bottom:26px;
  font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-40);
}
.post-meta .m-tag{color:var(--brass)}
.post-hero h1{font-size:clamp(38px,5.4vw,68px);max-width:18ch}
.post-hero .standfirst{
  max-width:var(--measure);margin:26px 0 0;
  font:italic 400 clamp(19px,2.1vw,23px)/1.65 var(--serif);color:var(--ink-70);
}
.post-body{padding:clamp(44px,6vw,72px) var(--gutter)}
.post-body>.prose{margin:0}
.post-end{
  display:flex;align-items:center;gap:18px;margin-top:64px;
  font:500 12px var(--mono);letter-spacing:.24em;color:var(--ink-40);
}
.post-end::before,.post-end::after{content:"";flex:0 0 44px;height:1px;background:var(--brass-dim)}
.back-link{
  display:inline-flex;gap:10px;margin-top:44px;
  font:500 12px var(--mono);letter-spacing:.18em;color:var(--ink-55);
  border-bottom:1px solid var(--brass-dim);padding-bottom:5px;
}

/* ============================================================
   STYLEGUIDE CHROME
   ============================================================ */
.sg-section{padding:clamp(44px,6vw,64px) var(--gutter);border-top:1px solid var(--line)}
.sg-section>.kicker{display:block;margin-bottom:36px}
.sg-label{
  font:500 11px var(--mono);letter-spacing:.2em;color:var(--brass);
  margin:44px 0 18px;text-transform:uppercase;
}
.sg-label:first-of-type{margin-top:0}
.swatch-row{display:flex;flex-wrap:wrap;gap:14px}
.swatch{width:150px;border:1px solid var(--line)}
.swatch .chip{height:76px}
.swatch .chip-info{padding:10px 12px;font:400 11px/1.6 var(--mono);color:var(--ink-55);background:var(--paper-2)}
.type-row{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding:18px 0}
.type-row .kicker{font-size:10px}

/* ============================================================
   404
   ============================================================ */
.notfound{
  min-height:72vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:80px var(--gutter);position:relative;overflow:hidden;
}
.notfound .nf-code{
  font:400 clamp(120px,22vw,240px)/1 var(--display);letter-spacing:.06em;
  color:transparent;-webkit-text-stroke:1px var(--ink-40);
}
.notfound h1{font-size:clamp(28px,4vw,44px);margin-top:10px}
.notfound p{max-width:44ch;font:400 19px/1.7 var(--sans);color:var(--ink-55)}
.notfound .nf-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:30px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .feature-split{grid-template-columns:1fr}
  .sponsor{grid-column:span 4}
  .sponsor[data-partner="1"]{grid-column:span 12;grid-row:span 1}
  .sponsor[data-partner="2"],.sponsor[data-partner="3"],.sponsor[data-partner="4"]{grid-column:span 4;grid-row:span 1}
  .proscons{grid-template-columns:1fr}
  .timeline::before{left:3px}
  .timeline li{grid-template-columns:1fr;padding-left:26px;row-gap:6px}
  .timeline li::after{grid-column:1;grid-row:1;justify-self:start;align-self:center;margin-left:-26px;margin-top:0}
  .t-when{text-align:left;grid-row:1;font-size:20px}
  .t-what{grid-column:1;grid-row:auto}
}
@media (max-width:640px){
  body{font-size:18px}
  .prose p,.prose ul,.prose ol{font-size:19px}
  .site-header{flex-direction:column;gap:16px;padding-top:22px}
  .site-nav{justify-content:center;row-gap:10px}
  .dispatch{grid-template-columns:1fr;gap:8px;padding:22px 4px}
  .dispatch .d-arrow{display:none}
  .sponsor{grid-column:span 6}
  .sponsor[data-partner="1"]{grid-column:span 12}
  .sponsor[data-partner="2"],.sponsor[data-partner="3"],.sponsor[data-partner="4"]{grid-column:span 6}
  .form-grid{grid-template-columns:1fr}
  .statrow{gap:28px}
  .footer-row{flex-direction:column;gap:14px}
  table{display:block;overflow-x:auto}
  .disco-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .tabs>label{padding:13px 16px;font-size:11px}
}

/* ============================================================
   POLISH PASS — formalised (replaces the stop-gap overrides)
   ============================================================ */

/* Partner logos display in full colour on dark tiles (no grayscale panel) */
.sponsor{padding:18px;gap:10px}
.sponsor img{filter:none;opacity:.92;padding:8px;box-sizing:border-box}

/* Blurbs: one-liners, readable, centred — never walls of text */
.sponsor-blurb{font:400 15.5px/1.5 var(--sans);color:var(--ink-55);max-width:38ch;margin:0 auto}
.sponsor[data-partner="1"] .sponsor-blurb{font-size:17px}

/* Rollover: the whole tile goes true black so logo + blurb read cleanly (all tiers) */
.sponsor:hover,.sponsor:focus-visible{background:#000;border-color:var(--brass)}
.sponsor:hover img,.sponsor:focus-visible img{opacity:1}
.sponsor:hover .sponsor-blurb,.sponsor:focus-visible .sponsor-blurb{color:var(--ink)}
/* wall-tile slide-up blurb sits flush on the black tile */
.sponsor:not([data-partner="1"]):not([data-partner="2"]):not([data-partner="3"]):not([data-partner="4"]) .sponsor-blurb{background:#000;font-size:13px}

/* Streaming / official links — Nocturne chips */
.stream-links{margin:3em 0}
.stream-row{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0}
.stream-row a{
  font:500 13px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:var(--paper-2);border:1px solid var(--line-strong);
  padding:14px 24px;border-radius:0;white-space:nowrap;
}
.stream-row a:hover{border-color:var(--brass);color:var(--brass);background:#000}

/* Mobile density — timeline, sponsor grid, and long pages sit tighter on ~360px */
@media (max-width:640px){
  .timeline li{padding:14px 0 14px 26px}
  .t-when{font-size:19px}
  .home-section{padding-top:44px}
  .page-hero,.post-hero{padding-top:48px}
  .page-body,.post-body{padding-top:36px}
  .partners{padding-top:40px;padding-bottom:48px}
  .partners .rule-row{margin-bottom:24px}
  .sponsor-field{gap:10px;grid-auto-rows:minmax(72px,auto)}
  .sponsor{padding:14px;gap:8px}
  .sponsor img{max-height:44px;padding:4px}
  .sponsor[data-partner="1"]{padding:22px 18px;gap:12px}
  .sponsor[data-partner="1"] img{max-height:64px}
  .sponsor-blurb{font-size:13.5px;line-height:1.45}
  .sponsor[data-partner="1"] .sponsor-blurb{font-size:14.5px}
  .site-footer{margin-top:56px}
  .pullquote{font-size:22px}
}

/* ADULT-LOGO OVERRIDE */
.sponsor img{filter:none!important;opacity:1!important}

/* ===== pipeline mobile-gutter guard (finalize) — content never touches the screen edge ===== */
@media (max-width:680px){ .wrap,.wrap-wide,.container,.hero-inner,.footer-inner,.footer-bottom,.article-inner,.climate-inner,.nav,[class$="-inner"],[class*="-inner "]{ padding-left:max(18px,env(safe-area-inset-left,0px))!important; padding-right:max(18px,env(safe-area-inset-right,0px))!important; } }

/* 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. */
.sponsor-field .sponsor.sponsor img{height:56px!important;display:block!important;width:100%!important}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 872px of tier across
   12 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){
  .sponsor-field .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:77px!important;min-height:0!important;overflow:hidden!important}
}

/* op-last-completes: .sponsor-field — Design's own full-width tile (tile 1) spans the phone row at every count; with 12 tiles the grid ended on a lone tile beside an empty cell, so the last tile completes the row. Parity-guarded (steps aside when the pairs close by themselves); only while two per row. */
@media (max-width:640px){
  .sponsor-field:has(> *:nth-child(even):last-child) > *:last-child:nth-child(n+2){grid-column:1 / -1!important}
  /* past twelve, Design shows twelve and folds the rest behind "All supporters" (#all-supporters): while it
     is closed the TWELFTH tile is the last one on screen — it completes the row; opened, the rule above counts */
  #all-supporters:not(:checked) ~ .sponsor-field:has(> *:nth-child(13)) > *:nth-child(12){grid-column:1 / -1!important}
}
/* op-last-completes:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-field 5 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){
  .sponsor-field .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:calc(2lh + 20px)!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0px;}
h3:where(.rt-h4){font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0px;}
h2:where(.rt-h3){font-size: clamp(23px, 2.6vw, 28px);}
.prose h2:where(.rt-h3){margin: 1.8em 0px 0.7em; color: var(--ink);}
.proscons h3:where(.rt-h4){font: 500 12px var(--mono); letter-spacing: 0.24em; text-transform: uppercase; margin: 0px 0px 16px;}
.proscons .pros h3:where(.rt-h4){color: var(--brass);}
.proscons .cons h3:where(.rt-h4){color: var(--ink-40);}
h2.rt-h3.rt-h3{letter-spacing:normal}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.article-figure > img,
  body > section.hero > img.hero-img,
  div.album > a > img,
  div.feature-split > a.feature-media > img,
  div.prose > figure.article-figure > img){height:auto}
/* op-img-dims:end */