:root{--paper:#E9EDEC;--card:#F2F5F3;--ink:#16191A;--accent:#C8321C;--hair:#C2CBC8;--grid:#CDD6D3;--dark:#16191A;--dark2:#1C2123;--darkb:#343D40;--mutd:#96A2A0;--mut:#5A6563;--tint:#DFA49B;--disp:Anton,sans-serif;--mono:'IBM Plex Mono',monospace;--sans:Archivo,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.6}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding-inline:28px}
.kick{font-size:10px;letter-spacing:2px;color:var(--accent);text-transform:uppercase}

/* ---------- wordmark ---------- */
.wordmark{display:flex;align-items:center;gap:2px;font-family:var(--disp);letter-spacing:2px;color:var(--ink);line-height:1}
.wordmark .disc{border-radius:50%;background:repeating-radial-gradient(circle,#2F3739 0 2px,#111415 2px 4px);display:flex;align-items:center;justify-content:center;margin:0 3px}
.wordmark .disc i{border-radius:50%;background:var(--accent);display:block}
.wm-lg{font-size:46px;letter-spacing:3px}
.wm-lg .disc{width:44px;height:44px}
.wm-lg .disc i{width:16px;height:16px;box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
.wm-sm{font-size:23px}
.wm-sm .disc{width:22px;height:22px}
.wm-sm .disc i{width:8px;height:8px}

/* ---------- header ---------- */
.site-head{border-bottom:2px solid var(--ink);background:var(--paper)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:16px}
.nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:11px;letter-spacing:1px}
.nav a{padding-block:4px}
.nav a.on{color:var(--accent);border-bottom:2px solid var(--accent)}
.mast{padding-block:34px 24px;border-bottom:2px solid var(--ink)}
.mast .top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.tagline{margin:10px 0 0;font-size:13px;line-height:1.55;max-width:560px}
.mast .nav{flex-direction:column;align-items:flex-end;gap:6px;font-size:11.5px}

/* ---------- pinbar (tempo ruler strip) ---------- */
.pinbar{position:relative;overflow:hidden;height:52px;margin:26px 0 8px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 12.5%)}
.pinbar .tick{position:absolute;top:6px;transform:translateX(-50%);font-size:10px;letter-spacing:1px;color:var(--mut)}
.pinbar .pin{position:absolute;top:0;bottom:0;width:3px;background:var(--accent);transform:translateX(-50%)}
.pinbar .pin span{position:absolute;top:24px;left:8px;white-space:nowrap;font-size:10.5px;letter-spacing:1.5px;color:var(--accent)}
.pinbar .pin.flip span{left:auto;right:8px}
.pinbar .dot{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)}
.pinbar .dot:hover{background:var(--accent)}

/* ---------- homepage ruler ---------- */
.ruler{border-bottom:2px solid var(--ink)}
.band{display:flex;border-top:1px solid var(--ink)}
.band:first-child{border-top:0}
.band-bpm{flex:none;width:172px;padding:20px 0 20px 28px;border-right:2px solid var(--ink)}
.band-bpm b{display:block;font-family:var(--disp);font-weight:400;font-size:54px;line-height:1}
.band-bpm small{font-size:10px;letter-spacing:2px}
.band-body{flex:1;padding:24px 32px;display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.band-note{margin:0;font-size:13px;line-height:1.6;color:var(--accent);max-width:620px;align-self:center}
.dance{flex:0 1 300px;border:2px solid var(--ink);padding:16px 18px;background:var(--card);display:flex;flex-direction:column}
.dance b{font-family:var(--disp);font-weight:400;font-size:23px;letter-spacing:1px;line-height:1.1}
.dance .rg{margin-top:5px;font-size:11px;color:var(--accent)}
.dance p{margin:8px 0 0;font-size:12px;line-height:1.55}
.readlink{flex:0 1 300px;border:2px dashed var(--ink);padding:14px 16px}
.readlink .rk{display:block;font-size:10px;letter-spacing:2px;color:var(--accent)}
.readlink b{display:block;margin-top:6px;font-family:var(--disp);font-weight:400;font-size:18px;line-height:1.25;letter-spacing:.5px}
.flagship{flex:1 1 100%;max-width:648px;border:3px dashed var(--accent);padding:20px 24px;background:var(--card)}
.flagship b{font-size:26px}
.flagship p{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--mut)}
.interject{flex:0 1 300px;border-left:6px solid var(--accent);background:var(--dark);color:var(--paper);padding:16px 18px 16px 14px}
.interject .rk{display:block;font-size:10px;letter-spacing:2px;color:var(--tint)}
.interject p{margin:6px 0 0;font-size:12.5px;line-height:1.55}
.photoband{border-bottom:2px solid var(--ink)}
.photoband img{width:100%;height:420px;object-fit:cover}
.photoband figcaption{padding:10px 28px 14px;font-size:11.5px;color:var(--mut);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- sponsors ---------- */
.rhythm{background:var(--dark);color:var(--paper);border-top:6px solid var(--accent);padding-block:52px 44px}
.rhythm h2{margin:0;font-family:var(--disp);font-weight:400;font-size:26px;letter-spacing:1px}
.rhythm .intro{margin:6px 0 28px;font-size:12.5px;line-height:1.6;color:var(--mutd);max-width:620px}
.tier{display:flex;flex-wrap:wrap;gap:18px}
.tier+.tier-label{margin-top:26px}
.tier-label{margin:0 0 12px;font-size:10px;letter-spacing:2px;color:var(--tint);text-transform:uppercase}
.sponsor{flex:1 1 226px;max-width:344px;display:flex;flex-direction:column;gap:10px;background:var(--dark2);border:1px solid var(--darkb);padding:16px;text-align:center}
.sponsor:hover{border-color:var(--tint);color:var(--paper)}
.s-logo{height:64px;display:flex;align-items:center;justify-content:center;background:#111415;padding:8px 12px}
.s-logo img{max-height:44px;max-width:94%;width:auto;height:auto;object-fit:contain}
.sponsor-name{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--paper)}
.sponsor-blurb{font-size:12px;line-height:1.55;color:var(--mutd)}
.tier.roll{gap:12px}
.tier.roll .sponsor{padding:12px}

/* ---------- footer ---------- */
.site-foot{background:var(--dark);color:var(--mutd);border-top:1px solid var(--darkb);padding-block:34px 40px;font-size:12px}
.site-foot .cols{display:flex;flex-wrap:wrap;gap:28px 64px;align-items:flex-start}
.site-foot .wordmark{color:var(--paper)}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.site-foot .fl{font-size:10px;letter-spacing:2px;color:var(--tint);margin:0 0 10px;text-transform:uppercase}
.site-foot a:hover{color:var(--paper)}
.disclaimer{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--darkb);font-size:11.5px;line-height:1.6}

/* ---------- article ---------- */
.art-head{padding-block:40px 0}
.art-head .meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.art-head .meta .sec{color:var(--accent)}
.art-head h1{margin:14px 0 0;font-family:var(--disp);font-weight:400;font-size:clamp(34px,4.5vw,52px);line-height:1.08;letter-spacing:.5px;max-width:900px;text-wrap:pretty}
.lead{margin:18px 0 0;font-family:var(--sans);font-size:19px;line-height:1.5;max-width:760px;color:#2c3234;text-wrap:pretty}
.byline{margin:16px 0 0;font-size:12px;color:var(--mut)}
.article-figure{margin:30px 0 0}
.article-figure img{width:100%;max-height:560px;object-fit:cover;border:2px solid var(--ink)}
.article-figure figcaption{margin-top:8px;font-size:12px;color:var(--mut);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.art-body{padding-block:14px 40px}
.psec{max-width:768px}
.psec h2{margin:44px 0 0;font-family:var(--disp);font-weight:400;font-size:27px;letter-spacing:.5px;line-height:1.15}
.psec h2::after{content:"";display:block;width:46px;height:3px;background:var(--accent);margin-top:8px}
.psec p{margin:18px 0 0;font-family:var(--sans);font-size:16.5px;line-height:1.75}
.psec a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.psec a:hover{color:var(--ink)}
.note{font-size:13px;color:var(--mut);border-left:4px solid var(--hair);padding:8px 0 8px 16px}

/* notes-for-design bands */
.notes-band{margin:46px 0;border:2px solid var(--ink);background:var(--card)}
.nb-head{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;padding:14px 24px;border-bottom:2px solid var(--ink)}
.nb-head h2{margin:0;font-family:var(--disp);font-weight:400;font-size:21px;letter-spacing:1px;text-transform:uppercase}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;gap:22px;padding:13px 24px;border-top:1px solid var(--hair)}
.timeline li:first-child{border-top:0}
.t-when{flex:none;width:240px;font-weight:600;color:var(--accent);font-size:12.5px;padding-top:2px}
.t-what{font-family:var(--sans);font-size:14.5px;line-height:1.6}
.kd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.kd-card{padding:18px 24px;border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin-top:-1px;margin-left:-1px}
.kd-card b{display:block;font-family:var(--disp);font-weight:400;font-size:16px;letter-spacing:.5px;text-transform:uppercase}
.kd-card p{margin:7px 0 0;font-family:var(--sans);font-size:13.5px;line-height:1.6}
.method{list-style:none;margin:0;padding:12px 0;counter-reset:m;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.method li{counter-increment:m;display:flex;gap:14px;padding:12px 24px;font-family:var(--sans);font-size:14px;line-height:1.6}
.method li::before{content:counter(m);flex:none;font-family:var(--disp);font-size:26px;line-height:1;color:var(--accent)}

/* pull / quotes / callout */
.pullquote{margin:34px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:20px 8px}
.pullquote p{margin:0;font-family:var(--disp);font-weight:400;font-size:24px;line-height:1.3;letter-spacing:.5px}
.blockquote{margin:28px 0;border-left:6px solid var(--accent);padding:6px 0 6px 20px}
.blockquote p{margin:0;font-family:var(--sans);font-size:16px;line-height:1.65;font-style:italic}
.blockquote cite{display:block;margin-top:8px;font-size:12px;color:var(--mut);font-style:normal}
.callout{margin:28px 0;border:2px dashed var(--accent);background:var(--card);padding:16px 20px}
.callout p{margin:0;font-family:var(--sans);font-size:15px;line-height:1.6}

/* related */
.related{margin:52px 0 0;border-top:2px solid var(--ink);padding-top:16px;max-width:768px}
.related h2{margin:0;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.related-links{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.related-links a{display:flex;gap:12px;align-items:baseline;border:2px dashed var(--ink);padding:12px 16px}
.related-links b{font-family:var(--disp);font-weight:400;font-size:16px;letter-spacing:.5px}
.related-links .rb{flex:none;font-size:10.5px;color:var(--accent);letter-spacing:1px}

/* ---------- category ---------- */
.cat-head{padding-block:42px 6px;border-bottom:2px solid var(--ink)}
.cat-head h1{margin:8px 0 0;font-family:var(--disp);font-weight:400;font-size:48px;letter-spacing:1px}
.cat-head .blurb{margin:12px 0 0;font-size:13.5px;line-height:1.6;max-width:640px}
.cat-list{list-style:none;margin:0;padding:0;padding-bottom:46px}
.cat-list li{border-bottom:1px solid var(--hair)}
.cat-list a{display:flex;gap:26px;padding:22px 0;align-items:center}
.cat-list img{flex:none;width:190px;height:120px;object-fit:cover;border:2px solid var(--ink)}
.cat-list .cl-bpm{flex:none;width:96px;text-align:center}
.cat-list .cl-bpm b{display:block;font-family:var(--disp);font-weight:400;font-size:32px;line-height:1}
.cat-list .cl-bpm small{font-size:9.5px;letter-spacing:1.5px;color:var(--accent)}
.cat-list h3{margin:0;font-family:var(--disp);font-weight:400;font-size:24px;letter-spacing:.5px;line-height:1.15}
.cat-list p{margin:7px 0 0;font-family:var(--sans);font-size:13.5px;line-height:1.55;color:#3a4144;max-width:640px}
.cat-list .cl-meta{margin-top:8px;font-size:11px;color:var(--mut)}
.map-figure{margin:34px 0 46px;border:2px solid var(--ink);background:var(--card)}
.map-figure svg{display:block;width:100%;height:auto}
.map-figure figcaption{padding:12px 20px;border-top:2px solid var(--ink);font-size:12px;color:var(--mut)}
.map-slot{min-height:300px}

/* ---------- simple pages ---------- */
.page{padding-block:48px 64px;max-width:768px}
.page h1{font-family:var(--disp);font-weight:400;font-size:44px;letter-spacing:1px;margin:0}
.page p{font-family:var(--sans);font-size:16px;line-height:1.7}
.big404{font-family:var(--disp);font-size:120px;line-height:1;color:var(--accent);margin:0}

/* ---------- styleguide extras ---------- */
.versus,.datatable{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;margin:20px 0}
.versus th,.versus td,.datatable th,.datatable td{border:1px solid var(--hair);padding:10px 14px;text-align:left;vertical-align:top}
.versus thead th,.datatable thead th{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border-color:var(--ink)}
.versus td:first-child{font-weight:600}
.statrow{display:flex;flex-wrap:wrap;gap:16px;margin:22px 0}
.statblock{flex:1 1 160px;border:2px solid var(--ink);background:var(--card);padding:16px 18px;text-align:center}
.stat-num{display:block;font-family:var(--disp);font-size:42px;line-height:1;color:var(--accent)}
.stat-label{display:block;margin-top:6px;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.chart{margin:26px 0;border:2px solid var(--ink);background:var(--card);padding:18px}
.chart figcaption{margin-top:10px;font-size:12px;color:var(--mut)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}
.gallery figure{margin:0}
.gallery img{width:100%;height:170px;object-fit:cover;border:2px solid var(--ink)}
.gallery figcaption{margin-top:6px;font-size:11.5px;color:var(--mut)}
.profile-grid{display:flex;flex-wrap:wrap;gap:16px;margin:22px 0}
.profile-card{flex:1 1 260px;max-width:400px;border:2px solid var(--ink);background:var(--card);padding:18px 20px}
.profile-card .p-photo{width:72px;height:72px;object-fit:cover;border-radius:50%;border:2px solid var(--ink)}
.profile-card h3{margin:10px 0 0;font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:.5px}
.profile-card .p-role{margin:3px 0 0;font-size:11px;letter-spacing:1.5px;color:var(--accent);text-transform:uppercase}
.profile-card p{font-family:var(--sans);font-size:13.5px;line-height:1.6;margin:10px 0 0}
.profile-card .p-links a{color:var(--accent);text-decoration:underline}
.org-grid{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.org-card{flex:1 1 200px;max-width:300px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--hair);background:var(--card);padding:14px 16px}
.org-card .org-logo{width:40px;height:40px;object-fit:contain}
.org-card.no-logo .org-logo{display:none}
.org-name{font-weight:600;font-size:13px}
.org-host{font-size:11px;color:var(--mut)}
.entity-ref{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}
.further-grid a{border:2px dashed var(--ink);padding:14px 16px;font-family:var(--disp);font-size:16px;letter-spacing:.5px;line-height:1.3}

/* ---------- responsive ---------- */
@media(max-width:920px){
 .band{flex-direction:column}
 .band-bpm{width:auto;border-right:0;border-bottom:2px solid var(--ink);padding:14px 0 12px 24px;display:flex;align-items:baseline;gap:10px}
 .band-bpm b{font-size:40px}
 .band-body{padding:20px 24px}
 .mast .nav{flex-direction:row;align-items:flex-start}
 .cat-list img{width:130px;height:88px}
 .timeline li{flex-direction:column;gap:4px}
 .t-when{width:auto}
}
@media(max-width:640px){
 body{font-size:13.5px}
 .wrap{padding-inline:18px}
 .wm-lg{font-size:34px}
 .wm-lg .disc{width:32px;height:32px}
 .wm-lg .disc i{width:12px;height:12px}
 .dance,.readlink,.interject,.flagship{flex-basis:100%;max-width:none}
 .cat-list a{flex-wrap:wrap;gap:14px}
 .cat-list img{order:-1;width:100%;height:170px}
 .cat-list .cl-bpm{width:auto;text-align:left;display:flex;gap:8px;align-items:baseline}
 .sponsor{flex-basis:100%;max-width:none}
 .psec p{font-size:15.5px}
 .photoband img{height:240px}
 .pinbar .pin span{font-size:9px}
}

/* homepage energy */
.dance,.readlink,.interject{transition:transform .15s,box-shadow .15s,border-color .15s}
.dance:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink);color:inherit}
.readlink:hover{border-color:var(--accent)}
.interject:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 rgba(22,25,26,.3);color:var(--paper)}
.beat{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-left:10px;animation:beat 1s infinite}
@keyframes beat{0%,100%{transform:scale(.5);opacity:.4}10%{transform:scale(1);opacity:1}}
.hero-ruler{padding-block:36px 28px;border-bottom:2px solid var(--ink)}
.hero-ruler h1{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(30px,4.4vw,56px);line-height:1.05;letter-spacing:.5px;max-width:1020px;text-wrap:pretty}
.hero-ruler h1 em{font-style:normal;color:var(--accent)}
.hero-ruler .sub{margin:4px 0 0;font-size:11.5px;color:var(--mut)}
.bpm-now{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:50;background:var(--ink);color:var(--paper);border-left:5px solid var(--accent);padding:12px 16px 12px 14px;text-align:right;opacity:0;pointer-events:none;transition:opacity .25s}
.bpm-now.live{opacity:1}
.bpm-now b{display:block;font-family:var(--disp);font-weight:400;font-size:32px;line-height:1.05}
.bpm-now small{display:block;font-size:9px;letter-spacing:2px;color:var(--tint)}
@media(max-width:920px){.bpm-now{display:none}}
.photostrip{position:relative;border-top:1px solid var(--ink);margin:0}
.photostrip img{width:100%;height:290px;object-fit:cover;display:block}
.photostrip figcaption{position:absolute;left:28px;bottom:18px;background:var(--ink);color:var(--paper);padding:8px 14px;font-size:11px;letter-spacing:1.5px;border-left:4px solid var(--accent)}
@media(max-width:640px){.photostrip img{height:180px}.photostrip figcaption{left:14px;bottom:12px}}

/* article pass 2 */
.art-head .meta .beat{width:9px;height:9px;margin-left:2px;transform-origin:center}
.af-hero{position:relative}
.af-bpm{position:absolute;top:2px;left:2px;background:var(--ink);color:var(--paper);font-family:var(--disp);font-size:28px;line-height:1;padding:12px 16px 10px;border-bottom:4px solid var(--accent)}
.byline{display:inline-block;border:1px solid var(--hair);background:var(--card);padding:7px 14px}
.art-body{counter-reset:sec}
.psec h2{counter-increment:sec}
.psec h2::before{content:"0" counter(sec);display:block;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:3px;color:var(--accent);margin-bottom:4px}
.psec:first-of-type>p:first-of-type::first-letter{font-family:var(--disp);font-size:60px;line-height:.85;float:left;padding:6px 12px 0 0;color:var(--accent)}
.notes-band{box-shadow:8px 8px 0 rgba(22,25,26,.1)}
.kd-card b::before{content:"";display:inline-block;width:8px;height:8px;background:var(--accent);margin-right:8px}
.related-links a{transition:transform .15s,border-color .15s}
.related-links a:hover{border-color:var(--accent);transform:translate(-2px,-2px)}

.pinbar .tick:first-child{transform:none}
.pinbar .tick[style*="left:100"]{transform:translateX(-100%)}

/* 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{object-fit:contain!important}

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

/* ── page gate ──────────────────────────────────────────────────────────────
   The tempo ruler (main.ruler), the hero band and the masthead sat directly on
   <body> with no wrapper, so on a wide monitor the bands ran the full viewport
   while the sponsor section stayed inside .wrap at 1280px. Gate them to the same
   column so the whole page shares one measure. Additive only — no existing
   declaration is modified. */
.mast, .hero-ruler, .ruler { max-width: 1280px; margin-inline: auto; }
.hero-ruler, .ruler > .band, .ruler > .photostrip { padding-inline: 28px; }
.ruler > .band { padding-inline: 0; }
.ruler > .band > .band-bpm { padding-left: 28px; }
.ruler > .band > .band-body { padding-right: 28px; }
/* the lone full-bleed photo band read as an accident once everything else was gated */
.photoband{max-width:1280px;margin-inline:auto;padding-inline:28px}
.photoband figcaption span:first-child{letter-spacing:1.5px}

/* The closing photo band captioned below the image while the two photostrips above carry Design's
   in-image label tab. Same voice, two treatments. Adopt the strip's treatment for the band so all
   three read alike; the credit keeps its own line, because a credit is not a caption. */
.photoband{position:relative}
.photoband figcaption{padding:0;display:block}
.photoband figcaption span:first-child{position:absolute;left:28px;bottom:60px;background:var(--ink);
  color:var(--paper);padding:8px 14px;font-size:11px;letter-spacing:1.5px;border-left:4px solid var(--accent)}
@media(max-width:640px){.photoband figcaption span:first-child{left:28px;bottom:54px}}

/* 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. */
.tier .feat.sponsor .s-logo.s-logo{display:block!important;width:100%!important}
.tier .feat.sponsor.feat.sponsor img{height:44px!important;display:block!important;width:100%!important}
.tier.roll .sponsor .s-logo.s-logo{display:block!important;width:100%!important}
.tier.roll .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}

/* op-feat-full-width: operator: expand the top three to the container's full width. Design caps
   every tile at max-width:344px, so three featured tiles left the rest of the row empty. The cap
   comes off for the featured tier only; the roll below keeps it. */
@media (min-width:900px){
  .tier .sponsor.feat{max-width:none}
}

/* op-recentre-plate: the money mark sat off-centre in its own plate (measured 20px of skew:
   0px on one side, 20px on the other, with a 318px mark in a 362px plate).
   ⚠️ THE CAUSE IS OURS, NOT DESIGN'S: sp-mark-frame forces display:block on the plate, which
   replaces the flex centring Design put there — and with the mark capped by a max-width and no
   auto margins it drifts to one side. Rather than fight the block display, the mark itself is
   centred with auto inline margins, which works whatever the plate's display ends up being. */
span.s-logo{text-align:center}
span.s-logo > img{display:block!important;margin-inline:auto!important}

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

/* op-odd-tier-lead: .tier (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .tier:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
.cat-list h2:where(.rt-h3){margin: 0px; font-family: var(--disp); font-weight: 400; font-size: 24px; letter-spacing: 0.5px; line-height: 1.15;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(body > figure.photoband > img,
  div.art-body.wrap > figure.article-figure > img,
  div.wrap > figure.af-hero.article-figure > img,
  li > a > img,
  main.ruler > figure.photostrip > img){height:auto}
/* op-img-dims:end */
[data-partner] .s-logo{background:transparent!important}