/* spartak-nalchik.com — Nalchik Notes
   palette: --paper ground · --ink type · --accent (ultramarine, saturated, used as area)
            --flag (red, saturated, ~240° from accent) · --mat (cool pale panel) */
:root{
  --paper:#FFFFFF; --ink:#12151A; --accent:#1E32D6; --flag:#D8232A;
  --mat:#EEF0F4; --quiet:#6B7078; --rule:#D3D8DF; --dark:#12151A;
  --prose:68ch; --body:17.5px; --wrap:1240px; --brk:9vw; --gut:20px;
  --h1:clamp(38px,4.4vw,68px); --h2:clamp(26px,2.2vw,38px);
  --serif:Spectral,Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,Segoe UI,sans-serif;
}
@media (min-width:1200px){ :root{ --wrap:1360px; --body:18px; --prose:70ch; --brk:9vw } }
@media (min-width:1600px){ :root{ --wrap:1520px; --body:19px; --prose:72ch; --brk:9vw; --gut:32px } }
@media (min-width:2100px){ :root{ --wrap:1640px; --body:20px; --prose:74ch; --brk:9vw; --gut:48px } }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0 auto;max-width:1920px;background:var(--paper);color:var(--ink);font:400 var(--body)/1.5 var(--sans);text-wrap:pretty;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--flag);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:800;letter-spacing:-.022em;line-height:1;margin:0}
.wrap{width:min(92vw,var(--wrap));margin-inline:auto}
.kicker{font:700 .74rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--flag);margin:0;display:flex;align-items:center;gap:.55em}
.ico{width:1.15em;height:1.15em;flex:none}
.mark{width:clamp(52px,3.2vw,80px);height:auto;color:var(--accent)}

/* ---- header ---- */
.site-head{padding-top:clamp(16px,1.6vw,38px)}
.head-top{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(14px,2vw,48px);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:clamp(10px,1vw,24px);color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand-t{font-family:var(--serif);font-weight:800;font-size:clamp(26px,2.6vw,52px);line-height:1;letter-spacing:-.03em;white-space:nowrap}
.brand-t b{color:var(--accent);font-weight:800}
.brand-line{margin:0 0 .35em;font-size:.8rem;line-height:1.45;color:var(--quiet);max-width:44ch}
.head-rule{margin-top:clamp(12px,1.2vw,28px);border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.nav{display:flex;flex-wrap:wrap;gap:.2em clamp(14px,1.5vw,38px);padding:.4em 0;justify-content:space-between}
.nav-a{display:flex;align-items:center;gap:.6em;color:var(--ink);font:700 .78rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;min-height:48px}
.nav-a .ico{width:1.85em;height:1.85em;stroke-width:1.5;color:var(--accent)}
.nav-a:hover{color:var(--flag)}.nav-a:hover .ico{color:var(--flag)}
.nav-a.on{color:var(--flag)}.nav-a.on .ico{color:var(--flag)}
@media (max-width:1180px){
  .nav{gap:.2em clamp(8px,1.1vw,20px)}
  .nav-a{font-size:.7rem;letter-spacing:.06em;gap:.45em}
  .nav-a .ico{width:1.5em;height:1.5em}
}
@media (max-width:780px){
  .head-rule{position:relative}
  .head-rule::after{content:"";position:absolute;top:0;bottom:0;right:0;width:28px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0) 0,var(--paper) 78%)}
  .nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;justify-content:flex-start;gap:0;padding:0;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav-a{flex:0 0 auto;scroll-snap-align:start;min-height:52px;padding:.55em 1em .55em 0;font-size:.72rem;letter-spacing:.08em}
  .nav-a .ico{width:1.6em;height:1.6em}
}

/* ---- three-width article grid: prose · breakout · bleed ---- */
.article{display:grid;grid-template-columns:
  minmax(var(--gut),1fr) minmax(0,var(--brk)) min(var(--prose),100% - var(--gut)*2) minmax(0,var(--brk)) minmax(var(--gut),1fr);
  row-gap:clamp(18px,1.5vw,34px)}
.article > *{grid-column:3}
.article > .breakout{grid-column:2/5}
.article > .bleed{grid-column:1/-1}
.article p{margin:0}
.article p:not([class]){font-size:1em;line-height:1.62}
.article h2{grid-column:3;text-wrap:balance;font-size:var(--h2);margin-top:clamp(14px,1.4vw,30px);max-width:26ch}
.lead{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(20px,1.4vw,27px);line-height:1.34;margin:0}
.art-head{display:grid;gap:clamp(12px,1.1vw,26px);border-top:8px solid var(--ink);padding-top:clamp(14px,1.3vw,32px);margin-bottom:clamp(6px,.6vw,16px)}
.art-head h1{font-size:clamp(31px,4.6vw,86px);line-height:.99;letter-spacing:-.03em;max-width:30ch}
.art-head .lead{max-width:60ch;font-size:clamp(21px,1.6vw,32px)}
.art-meta{display:flex;flex-wrap:wrap;gap:.4em 1.6em;margin:.2em 0 0;font:700 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.art-meta span+span{border-left:1px solid var(--rule);padding-left:1.6em}
.art-end{margin-top:clamp(18px,1.6vw,44px);color:var(--ink)}
.fig-pair{display:grid;gap:clamp(16px,1.5vw,40px);align-items:start}
@media (min-width:820px){.fig-pair{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.fig-pair .fig-img{background:var(--mat)}

/* ---- figure system: three treatments, one drawing system ---- */
.fig{margin:0}
.fig-img{background:var(--mat)}
.fig img{width:100%;aspect-ratio:16/10;object-fit:cover}
figcaption{display:flex;flex-wrap:wrap;gap:.3em 1.4em;align-items:baseline;padding-top:.7em}
.cap{flex:1 1 auto;min-width:0;max-width:none;font:600 .88rem/1.42 var(--sans)}
.credit{flex:0 0 auto;margin-left:auto;white-space:nowrap;font:400 .68rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.fig-bleed figcaption{width:min(92vw,var(--wrap));margin-inline:auto}
.fig-mat{background:var(--mat);padding:clamp(10px,.8vw,22px)}
.fig-mat figcaption{padding:.8em .2em 0}
.fig-inset .fig-img{outline:1px solid var(--rule);outline-offset:-1px}
.fig-inset figcaption{border-top:2px solid var(--flag);margin-top:.6em;padding-top:.6em}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(6px,.5vw,14px)}
.gallery figcaption{padding-top:.5em}

/* ---- plates / notes material ---- */
.plate{background:var(--mat);padding:clamp(22px,2.1vw,52px) clamp(20px,2vw,50px)}
.plate-h{font-family:var(--sans);font-weight:700;font-size:.78rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 1.6em;padding-bottom:1em;border-bottom:1px solid var(--rule)}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:.7em}
.timeline li{display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);gap:.4em 1.4em;align-items:baseline;border-top:1px solid var(--rule);padding-top:.65em}
.timeline li:first-child{border-top:0;padding-top:0}
.t-when{font-family:var(--serif);font-weight:800;font-size:1.15em;line-height:1.1;color:var(--accent)}
.t-what{font-size:.95em;line-height:1.5}
@media (max-width:600px){.timeline li{grid-template-columns:1fr}}
.keyterms{margin:0;display:grid;gap:.7em}
.keyterms > div{display:grid;grid-template-columns:minmax(0,14ch) minmax(0,1fr);gap:.3em 1.4em;border-top:1px solid var(--rule);padding-top:.65em}
.keyterms > div:first-child{border-top:0;padding-top:0}
.keyterms dt{font-weight:700}
.keyterms dd{margin:0;font-size:.95em}
@media (max-width:600px){.keyterms > div{grid-template-columns:1fr}}
.callout{background:var(--accent);color:#fff;padding:clamp(22px,2.1vw,52px) clamp(20px,2vw,50px)}
.callout .plate-h{color:#fff;opacity:.8;border-bottom-color:rgba(255,255,255,.28)}
.callout ul{margin:0;padding-left:1.1em;display:grid;gap:.55em}
.callout a{color:#fff;text-decoration:underline}
.note{font-size:.92em;color:var(--quiet);border-left:2px solid var(--flag);padding-left:1em;margin:0}
.pullquote{margin:0;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:.7em 0}
.pullquote p{font-family:var(--serif);font-weight:600;font-size:clamp(24px,1.9vw,36px);line-height:1.12;margin:0}
.blockquote{margin:0;padding-left:clamp(14px,1.2vw,28px);border-left:3px solid var(--accent)}
.blockquote p{font-family:var(--serif);font-size:1.15em;line-height:1.4;margin:0}
.blockquote cite{display:block;margin-top:.6em;font:400 .8rem/1.4 var(--sans);font-style:normal;color:var(--quiet)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18ch),1fr));gap:clamp(14px,1.4vw,40px);border-top:3px solid var(--ink);padding-top:clamp(12px,1vw,26px)}
.statblock{display:grid;gap:.3em}
.stat-num{font-family:var(--serif);font-weight:800;font-size:clamp(38px,2.9vw,68px);line-height:.86;color:var(--accent)}
.statblock.flag .stat-num{color:var(--flag)}
.stat-label{font-size:.86rem;line-height:1.4}
table.datatable,table.versus{width:100%;border-collapse:collapse;font-size:.95em;text-align:left}

.datatable caption,.versus caption{text-align:left;font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.3em;padding-bottom:.6em}
.datatable th,.versus th{border-bottom:3px solid var(--ink);padding:.6em .9em .6em 0;font:700 .72rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.datatable td,.versus td{border-bottom:1px solid var(--rule);padding:.75em .9em .75em 0;vertical-align:top}
.versus tbody th{border-bottom:1px solid var(--rule);font:700 .95em/1.4 var(--sans);letter-spacing:0;text-transform:none;padding-right:1.2em}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .bar-r{fill:var(--accent)}
.chart .bar-r.alt{fill:var(--flag)}
.chart text{font-family:var(--sans);font-weight:600;font-size:3.2px;fill:var(--ink)}
.chart svg{max-width:100%}
.chart figcaption{display:block;padding-top:.8em;font:600 .84rem/1.4 var(--sans)}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(14px,1.4vw,36px)}
.card{display:flex;flex-direction:column;gap:.6em;color:var(--ink)}
.card:hover{text-decoration:none}
.card .fig-img{background:var(--mat)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card h3{font-size:clamp(19px,1.25vw,27px);line-height:1.06;min-height:2.2em}
.card:hover h3{color:var(--accent)}
.card p{margin:0;font-size:.9em;line-height:1.5;color:#33383F}
.card .kicker{margin-top:auto;padding-top:.5em}
.cat-list{list-style:none;margin:0;padding:0;display:grid}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr);gap:.3em;padding:clamp(12px,1vw,26px) 0;color:var(--ink)}
.cat-list a:hover{text-decoration:none;background:var(--mat)}
.cat-list .ct{font-family:var(--serif);font-weight:800;font-size:clamp(20px,1.6vw,34px);line-height:1.05}
.cat-list a:hover .ct{color:var(--accent)}
.cat-list .cb{font-size:.92em;color:#33383F;max-width:78ch}
@media (min-width:1000px){.cat-list a{grid-template-columns:minmax(0,34ch) minmax(0,1fr);gap:clamp(16px,2vw,56px);align-items:baseline}}
.readnext{background:var(--mat);padding:clamp(20px,1.9vw,48px);display:grid;gap:clamp(16px,1.5vw,38px);margin-top:clamp(8px,.8vw,20px)}
.rn-head{display:grid;gap:.7em;border-top:8px solid var(--ink);padding-top:clamp(12px,1.1vw,26px)}
.rn-eyebrow{display:inline-flex;align-items:center;gap:.5em;justify-self:start;margin:0;background:var(--flag);color:#fff;padding:.6em 1em .56em;font:700 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.rn-eyebrow .ico{width:1.5em;height:1.5em;stroke-width:1.6;color:#fff}
.rn-h{margin:0;font-family:var(--serif);font-weight:800;font-size:clamp(24px,2.1vw,42px);line-height:1;letter-spacing:-.025em;max-width:32ch}
.rn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.3vw,32px)}
.rn-card{display:grid;grid-template-rows:auto auto auto 1fr;gap:.55em;background:var(--paper);padding:clamp(12px,1vw,22px);color:var(--ink)}
.rn-card:hover{text-decoration:none;outline:2px solid var(--accent)}
.rn-card .fig-img{background:var(--mat);overflow:hidden}
.rn-card img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.94) contrast(1.04);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.rn-card:hover img{transform:scale(1.035)}
.rn-lab{margin:0;font:700 .66rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--flag)}
.rn-card h3{font-size:clamp(17px,1.15vw,25px);line-height:1.08;max-width:24ch}
.rn-card:hover h3{color:var(--accent)}
.rn-dek{margin:0;font-size:clamp(13px,.8vw,17px);line-height:1.48;color:#33383F}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:.5em}
.related-links a{font-family:var(--serif);font-weight:600;font-size:1.1em}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:2px}
.further-grid a{background:var(--mat);padding:clamp(12px,1vw,24px);color:var(--ink);font-family:var(--serif);font-weight:600;font-size:1.05em;line-height:1.15;min-height:5.5em;display:flex;align-items:flex-end}
.further-grid a:hover{background:var(--accent);color:#fff;text-decoration:none}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(14px,1.4vw,36px)}
.profile-card{display:grid;gap:.5em;background:var(--mat);padding:clamp(14px,1.2vw,30px);align-content:start}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover}
.profile-card h3{font-size:1.3em}
.profile-card .p-role{margin:0;font:700 .74rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--flag)}
.profile-card p{margin:0;font-size:.92em;line-height:1.5}
.profile-card.no-photo{border-left:3px solid var(--accent)}
.p-links a{font-weight:600}
.p-attr{font-size:.72rem!important;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:2px}
.org-card{display:grid;gap:.2em;background:var(--dark);color:#fff;padding:clamp(12px,1vw,22px);align-content:end;min-height:6em}
.org-card:hover{text-decoration:none;color:#fff;outline:2px solid var(--accent)}
.org-logo{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain;margin-bottom:.4em}
.org-name{font-family:var(--serif);font-weight:800;font-size:1.1em;line-height:1.1}
.org-host{font:400 .7rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#9AA1AC}
.entity-ref{font-weight:600;white-space:nowrap}

/* ---- supporters: fixed 232px unit, uneven mosaic driven by CLASS ---- */
.sponsors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(104px,auto);gap:2px}
.sponsor{background:var(--mat);padding:clamp(12px,.9vw,20px);display:flex;flex-direction:column;justify-content:flex-start;gap:.45em;color:var(--ink);overflow:hidden;border-top:1px solid var(--rule)}
.sponsor.feat{border-top:2px solid var(--accent)}
.sponsor:hover{background:var(--dark);color:#fff;text-decoration:none}
.sponsor .sponsor-name{font-family:var(--serif);font-weight:800;font-size:1.15em;line-height:1.08}
.sponsor.feat .sponsor-name{font-size:1.45em}
.sponsor .sponsor-blurb{font-size:.84em;line-height:1.4;color:#33383F}
.sponsor:hover .sponsor-blurb{color:#D3D8DF}
.sponsor--wide{grid-column:span 2}
.sponsor--tall{grid-row:span 2}
@media (max-width:900px){.sponsors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.sponsors{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- homepage bands ---- */
.band{margin-top:clamp(40px,4vw,120px)}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5em;flex-wrap:wrap;margin-bottom:clamp(14px,1.2vw,32px)}
.band-h{font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(23px,1.9vw,40px);line-height:1.04;max-width:34ch}
.band-more{font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ink-rule{width:100%;height:9px;display:block;color:var(--ink)}
.lead-band{position:relative;margin-top:clamp(14px,1.4vw,34px);color:#fff;isolation:isolate}
.lead-img img{width:100%;height:clamp(460px,52vw,880px);object-fit:cover}
.lead-band .lead-img figcaption{position:absolute;top:0;right:0;width:min(92vw,var(--wrap));left:50%;transform:translateX(-50%);padding-top:clamp(12px,1vw,26px);z-index:2}
.lead-band .lead-img .cap{flex:0 1 auto;margin-left:auto;text-align:right;max-width:46ch;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.lead-band::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(8,12,20,.42) 0 22%,rgba(8,12,20,0) 46%,rgba(8,12,20,.62) 74%,rgba(8,12,20,.88) 100%)}
.lead-over{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(20px,2.4vw,62px);z-index:2}
.lead-over .kicker{color:#fff}
.lead-over .kicker a{color:#fff}
.lead-over .kicker .ico{color:#fff}
.lead-over .lead-grid p:last-child{color:#DCE0E6}
.lead-over p{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.lead-title{font-size:clamp(32px,3.7vw,76px);line-height:.96;max-width:24ch;margin:0;text-shadow:0 2px 22px rgba(0,0,0,.5)}
.lead-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,30ch),1fr));gap:clamp(18px,1.8vw,54px);max-width:min(100%,1180px)}
.lead-grid p:first-child{font-size:clamp(18px,1.2vw,29px);line-height:1.42;margin:0}
.lead-grid p:last-child{margin:0;color:var(--quiet);font-size:clamp(15px,.95vw,22px);line-height:1.5}
/* --- band heads: eyebrow, ruled headline, standfirst --- */
.band-head{display:grid;gap:clamp(10px,.85vw,20px);border-top:8px solid var(--ink);padding-top:clamp(12px,1.1vw,26px);margin-bottom:clamp(20px,1.9vw,50px)}
.band-eyebrow{display:inline-flex;align-items:center;gap:.55em;justify-self:start;margin:0;
  background:var(--accent);color:#fff;padding:.62em 1.05em .58em;
  font:700 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.band-eyebrow .ico{width:1.5em;height:1.5em;stroke-width:1.5;color:#fff}
.band-line{display:flex;flex-wrap:wrap;gap:.5em 2.5em;align-items:baseline;justify-content:space-between}
.band-h{font-family:var(--serif);font-style:normal;font-weight:800;font-size:clamp(25px,2.7vw,58px);line-height:.99;letter-spacing:-.028em;max-width:32ch}
.band-more{font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border-bottom:2px solid var(--flag);padding-bottom:.35em;color:var(--ink)}
.band-more:hover{color:var(--flag);text-decoration:none}
.band-more.quiet{color:var(--quiet);border-bottom-color:var(--rule)}
.band-standfirst{margin:0;font-size:clamp(16px,1.05vw,23px);line-height:1.48;max-width:72ch;color:#33383F}

/* --- signature numbers --- */
.sig{background:var(--paper);color:var(--ink);padding:0;margin-top:clamp(44px,4.4vw,130px)}
.sig .band-eyebrow{margin-bottom:clamp(12px,1.1vw,28px)}
.sig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22ch),1fr));gap:0;border-top:8px solid var(--ink)}
.sig-item{padding:clamp(16px,1.5vw,38px) clamp(16px,1.6vw,44px) clamp(18px,1.7vw,44px);border-left:1px solid var(--rule);display:grid;align-content:start;gap:.3em}
.sig-item:first-child{border-left:0;padding-left:0}
.sig-item.key{background:var(--mat)}
.sig-lab{margin:0;font:700 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.sig-num{font-family:var(--serif);font-weight:800;font-size:clamp(54px,4.2vw,100px);line-height:.8;margin:.12em 0 .08em;color:var(--accent);font-variant-numeric:lining tabular-nums;letter-spacing:-.035em;display:flex;align-items:flex-start}
.sig-item.key .sig-num{color:var(--flag)}
.sig-suf{font-size:.42em;line-height:1;padding-top:.22em;letter-spacing:0}
.sig-txt{margin:.3em 0 0;font-size:clamp(14px,.88vw,19px);line-height:1.48;max-width:34ch;color:#33383F}
.sig-go{margin:.9em 0 0}
.sig-go a{font:700 .7rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
@media (max-width:620px){.sig-item{border-left:0;border-top:1px solid var(--rule);padding-inline:0}.sig-item:first-child{border-top:0}}

/* --- feature band --- */
.feature{display:grid;gap:clamp(22px,2.2vw,60px);align-items:start}
@media (min-width:960px){.feature{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.feature-main .fig-img{background:var(--mat)}
.feature-main img{width:100%;aspect-ratio:16/9;object-fit:cover}
.feature-h{margin:clamp(12px,1.1vw,26px) 0 0;font-size:clamp(26px,2.4vw,50px);line-height:1.02;max-width:26ch}
.feature-h a{color:var(--ink)}
.feature-h a:hover{color:var(--accent);text-decoration:none}
.feature-dek{margin:.6em 0 0;font-size:clamp(16px,1.02vw,23px);line-height:1.5;max-width:56ch;color:#33383F}
.feature-side{display:grid;gap:clamp(18px,1.6vw,42px);align-content:start}
.side-item{border-top:3px solid var(--ink);padding-top:clamp(12px,1vw,24px)}
.side-lab{margin:0 0 .6em;font:700 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--flag)}
.side-item h3{font-size:clamp(21px,1.55vw,33px);line-height:1.06;max-width:26ch}
.side-item h3 a{color:var(--ink)}
.side-item h3 a:hover{color:var(--accent);text-decoration:none}
.side-item p{margin:.6em 0 0;font-size:clamp(14px,.9vw,20px);line-height:1.5;color:#33383F;max-width:46ch}
.side-list{display:grid}
.side-list .side-lab{color:var(--quiet)}
.side-list a{display:grid;grid-template-columns:6ch minmax(0,1fr);gap:0 1.2em;align-items:baseline;border-top:1px solid var(--rule);padding:.7em 0;color:var(--ink)}
.side-list a:last-child{border-bottom:1px solid var(--rule)}
.side-list a:hover{text-decoration:none;color:var(--accent)}
.sl-yr{font-family:var(--serif);font-weight:800;font-size:1.05em;color:var(--accent);font-variant-numeric:tabular-nums}
.sl-t{font:600 .92em/1.32 var(--sans)}

/* --- tiles: one card component, equal columns, formatted images --- */
.tiles{display:grid;gap:clamp(16px,1.6vw,42px) clamp(14px,1.4vw,36px)}
.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.tiles-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.tiles-3{grid-template-columns:minmax(0,1fr)}}
.tile{display:grid;grid-template-rows:auto auto auto 1fr;gap:.55em;color:var(--ink);border-top:3px solid var(--ink);padding-top:.75em}
.tile:hover{text-decoration:none}
.tile .fig-img{background:var(--mat);overflow:hidden;position:relative;outline:1px solid var(--rule);outline-offset:-1px;border-bottom:1px solid var(--rule);padding-bottom:0}
.tile .fig-img::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(18,21,26,.10);
  background:linear-gradient(180deg,rgba(18,21,26,.10) 0 18%,rgba(18,21,26,0) 55%)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.94) contrast(1.04);transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease}
.tiles-tall img{aspect-ratio:4/5}
.tile:hover img{transform:scale(1.035);filter:saturate(1.02) contrast(1.02)}
.tile .fig-img{margin-bottom:.15em}
.tile-lab{margin:0;font:700 .68rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--flag)}
.tile h3{font-size:clamp(19px,1.35vw,29px);line-height:1.06;max-width:24ch}
.tile:hover h3{color:var(--accent)}
.tile-dek{margin:0;font-size:clamp(14px,.86vw,18px);line-height:1.5;color:#33383F;max-width:44ch}

/* --- section directory --- */
.dir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.dir a{background:var(--paper);display:grid;gap:.45em;align-content:start;padding:clamp(14px,1.2vw,30px);color:var(--ink);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (max-width:700px){.dir{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.dir{grid-template-columns:minmax(0,1fr)}}
.dir a:hover{background:var(--mat);text-decoration:none}
.dir-ico .ico{width:1.7em;height:1.7em;color:var(--accent)}
.dir-t{font-family:var(--serif);font-weight:800;font-size:clamp(18px,1.25vw,27px);line-height:1.06}
.dir-n{font:600 .72rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--quiet)}
.dark-panel{background:var(--dark);color:#fff;padding:clamp(16px,1.3vw,34px)}
.dark-panel h3{color:#fff}
.dark-panel p{color:#D3D8DF}
.dark-panel a{color:#fff}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,32ch),1fr));gap:clamp(24px,2.6vw,80px);align-items:start}
.duo .minor{border-left:1px solid var(--rule);padding-left:clamp(16px,1.4vw,42px)}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(46%,180px),1fr));gap:clamp(6px,.5vw,14px)}
.strip a{display:block;color:var(--ink)}
.strip img{aspect-ratio:3/4;object-fit:cover;width:100%}
.strip span{display:block;padding-top:.5em;font:600 .82rem/1.35 var(--sans)}
.strip a:hover{text-decoration:none}.strip a:hover span{color:var(--accent)}
.quiet-line{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2vw,44px);line-height:1.06;max-width:44ch;margin:0}

/* ---- page furniture ---- */
main{padding-bottom:clamp(40px,4vw,110px)}
.page-head{margin-top:clamp(22px,2.2vw,60px)}
.page-head h1{font-size:var(--h1);max-width:24ch;margin:.4em 0 0}
.page-intro{margin:clamp(14px,1.3vw,34px) 0 0;max-width:min(100%,58ch);font-size:clamp(17px,1.15vw,26px);line-height:1.45}
.site-foot{margin-top:clamp(48px,4.6vw,140px);background:var(--dark);color:#fff;border-top:8px solid var(--accent)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20ch),1fr));gap:clamp(20px,1.8vw,52px);padding:clamp(26px,2.4vw,64px) 0 clamp(24px,2.2vw,58px);align-items:start}
.foot-id{display:grid;gap:.5em;align-content:start}
.foot-brand{font-family:var(--serif);font-weight:800;font-size:clamp(24px,1.7vw,42px);line-height:.95;margin:0;color:#fff}
.foot-brand b{color:#8E9DFF;font-weight:800}
.foot-line{margin:.3em 0 0;font-size:.86rem;line-height:1.45;color:#A8AEB8;max-width:36ch}
.foot-nav{display:grid;gap:.55em;font:600 .74rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase}
.foot-nav-cont{padding-top:calc(.68rem + .3em + .55em)}
@media (max-width:640px){.foot-nav-cont{padding-top:0}}
.foot-nav-h{margin:0 0 .3em;font:700 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--flag)}
.foot-nav a{color:#E6E8EC;min-height:24px}
.foot-nav a:hover{color:#fff}
.foot-mark{color:#8E9DFF}
.foot-mark .mark{width:clamp(56px,3.4vw,86px)}
.foot-base{display:flex;flex-wrap:wrap;gap:.4em 2em;justify-content:space-between;border-top:1px solid #2A2F38;padding:clamp(12px,1vw,24px) 0 clamp(18px,1.6vw,40px)}
.foot-base p{margin:0;font:400 .74rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#7C838E}
.reserved{border-top:1px solid var(--rule);padding-top:clamp(14px,1.2vw,32px)}

/* ---- mobile layer: must stay last so it is not reset by base rules ---- */
@media (max-width:760px){
  .lead-band{color:var(--ink)}
  .lead-band::after{display:none}
  .lead-img img{height:auto;aspect-ratio:4/3}
  .lead-band .lead-img figcaption{position:static;left:auto;right:auto;transform:none;width:min(92vw,var(--wrap));margin-inline:auto;padding-top:.7em}
  .lead-band .lead-img .cap{color:var(--ink);text-shadow:none;text-align:left;margin-left:0;max-width:none}
  .lead-over{position:static;left:auto;transform:none;bottom:auto;padding-top:clamp(14px,4vw,26px)}
  .lead-over .kicker,.lead-over .kicker a,.lead-over .kicker .ico{color:var(--flag)}
  .lead-over .kicker .ico{color:var(--accent)}
  .lead-over p,.lead-title{text-shadow:none}
  .lead-over .lead-grid p:last-child{color:var(--quiet)}
}

@media (max-width:560px){
  .art-head{border-top-width:5px}
  .art-head .lead{font-size:19px}
  .art-meta span+span{border-left:0;padding-left:0}
}

@media (max-width:560px){
  .band-head{border-top-width:5px}
  .band-eyebrow{letter-spacing:.13em;padding:.55em .8em .5em}
  .sig-grid{border-top-width:5px}
  .lead-title{font-size:clamp(30px,8.6vw,52px)}
}

@media (max-width:760px){.rn-grid{grid-template-columns:minmax(0,1fr)}
  .rn-card{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:.9em}
  .rn-card .fig-img{grid-row:1/4}
  .rn-card img{aspect-ratio:1/1}
  .rn-dek{display:none}
  .rn-head{border-top-width:5px}}

@media (max-width:640px){
  /* zero the automatic minimum size up the chain so the table's own scroller can act */
  .wrap,.wrap > *,.wrap > * > *{min-width:0}
  table.datatable,table.versus{display:block;max-width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .datatable td,.versus td,.versus tbody th{white-space:normal;min-width:14ch}
}

@media (max-width:640px){
  /* the single-row caption is a desktop requirement; on a phone let it stack and shrink */
  .fig,.fig-img,figcaption{min-width:0}
  .cap{flex:1 1 100%}
  .credit{flex:1 1 100%;margin-left:0;white-space:normal}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* 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}

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.tile > div.fig-img > img){height:auto}
/* op-img-dims:end */
