/* ============ RADAR55 — the style radar ============ */
:root{
  --ink:#16130F;
  --paper:#F5F1E8;
  --coral:#F0523C;
  --muted:rgba(22,19,15,.68);
  --faint:rgba(22,19,15,.45);
  --line:rgba(22,19,15,.14);
  --card:#e7e1d4;
  --ondark:#F5F1E8;
  --ondark-muted:rgba(245,241,232,.68);
  --ondark-line:rgba(245,241,232,.18);
  --dark2:#221e18;
  --serif:'Bodoni Moda',Didot,'Times New Roman',serif;
  --sans:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:var(--coral);text-decoration:none;}
a:hover{color:var(--ink);}
h1,h2,h3,h4{font-family:var(--serif);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance;}
p{text-wrap:pretty;}
.wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(20px,5vw,56px);}
.kicker{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);}
.btn-text{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--coral);padding-bottom:5px;width:max-content;}
.btn-text:hover{color:var(--coral);}
.on-dark .btn-text{color:var(--ondark);}
.on-dark .btn-text:hover{color:var(--coral);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------- header ---------- */
.util-bar{background:var(--ink);color:var(--ondark);}
.util-inner{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;}
.util-inner a{color:var(--ondark);}
.util-inner a:hover{color:var(--coral);}
.util-right{display:flex;gap:26px;align-items:center;}
.util-right .subscribe{color:var(--coral);}
.masthead{text-align:center;padding:30px 0 20px;border-bottom:1px solid var(--line);}
.wordmark{font-family:var(--serif);font-weight:900;letter-spacing:-.03em;line-height:.82;color:var(--ink);display:inline-block;
  font-size:clamp(52px,10vw,128px);}
.wordmark .wm-55{color:var(--coral);}
.site-header{position:relative;background:var(--paper);z-index:80;}

/* nav */
.mainnav{border-bottom:2px solid var(--ink);}
.navlist{display:flex;gap:clamp(20px,3vw,40px);justify-content:center;align-items:center;list-style:none;margin:0;padding:15px 0;flex-wrap:wrap;}
.navlist>li{position:relative;}
.nav-top{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);cursor:pointer;padding:6px 0;}
.nav-top:hover{color:var(--coral);}
.sub-caret{display:inline-flex;font-size:9px;opacity:.6;cursor:pointer;}
.sub-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:250px;max-width:300px;
  background:var(--ink);padding:12px 0;margin:0;list-style:none;z-index:90;
  box-shadow:0 26px 60px rgba(0,0,0,.32);
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px);transition:opacity .16s ease,transform .16s ease;}
.nav-sub::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:16px;}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav-sub li{margin:0;}
.nav-sub a{display:block;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ondark);padding:9px 24px;line-height:1.3;}
.nav-sub a:hover{color:var(--coral);}
.nav-sub .sub-head{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);padding:4px 24px 8px;font-weight:700;}
.nav-hamburger{display:none;}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);border-bottom:2px solid var(--ink);}
.hero-copy{padding:clamp(36px,5vw,60px);display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line);}
.hero-copy .kicker{margin-bottom:26px;}
.hero-h1{font-size:clamp(44px,5.2vw,78px);font-weight:800;margin-bottom:24px;}
.hero-dek{font-size:20px;line-height:1.55;color:var(--muted);margin:0 0 30px;max-width:32ch;}
.hero-byline{margin-top:38px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.hero-media{position:relative;min-height:640px;background:var(--card);}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------- section head ---------- */
.section{padding:clamp(48px,6vw,72px) 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:36px;}
.section-title{font-size:clamp(32px,4vw,46px);font-weight:700;}
.section-head .btn-text{border-bottom:none;font-size:13px;}
.section-head .btn-text:hover{color:var(--coral);}

/* ---------- band dark ---------- */
.band-dark{background:var(--ink);color:var(--ondark);}
.band-dark .section-title,.band-dark h2,.band-dark h3{color:var(--ondark);}

/* ---------- on the radar ---------- */
.radar-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(52px,6vw,78px) 0;}
.radar-intro h2{font-size:clamp(40px,5vw,66px);color:var(--ondark);margin:0 0 22px;}
.radar-intro .kicker{display:block;margin-bottom:18px;}
.radar-intro p{font-size:18px;line-height:1.6;color:var(--ondark-muted);margin:0 0 28px;max-width:36ch;}
.radar-dial{width:100%;max-width:560px;margin:0 auto;}
.radar-dial svg{width:100%;height:auto;display:block;overflow:visible;}
.radar-legend{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:30px;padding-top:26px;border-top:1px solid var(--ondark-line);}
.radar-legend h3{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px;}
.rl-rise h3{color:var(--coral);}
.rl-fall h3{color:var(--ondark-muted);}
.radar-legend ol{list-style:none;margin:0;padding:0;}
.radar-legend li{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--ondark-line);}
.radar-legend .rk{font-family:var(--serif);font-size:15px;font-weight:600;min-width:22px;}
.radar-legend .nm{font-family:var(--serif);font-size:19px;line-height:1.1;color:var(--ondark);}
.rl-rise .rk{color:var(--coral);}
.rl-fall .rk,.rl-fall .nm{color:var(--ondark-muted);}
.rl-fall .nm{text-decoration:line-through;text-decoration-color:rgba(240,82,60,.5);}

/* ---------- story cards ---------- */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;align-items:stretch;}
.story-card{display:flex;flex-direction:column;height:100%;color:var(--ink);}
.story-card:hover .sc-title{color:var(--coral);}
.sc-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--card);}
.sc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.story-card:hover .sc-media img{transform:scale(1.04);}
.sc-body{padding:20px 2px 4px;display:flex;flex-direction:column;flex:1;}
.sc-kicker{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin-bottom:11px;}
.sc-title{font-family:var(--sans);font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.01em;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s;}
.sc-dek{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.sc-meta{margin-top:auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}

/* ---------- how to wear it ---------- */
.howto{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);gap:clamp(28px,4vw,48px);background:var(--ink);color:var(--ondark);}
.howto-media{position:relative;min-height:560px;background:var(--dark2);}
.howto-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.howto-body{padding:clamp(36px,4vw,52px) clamp(36px,4vw,52px) clamp(36px,4vw,52px) 8px;display:flex;flex-direction:column;justify-content:center;}
.howto-body>.kicker{margin-bottom:20px;}
.howto-body h2{font-size:clamp(34px,4vw,52px);color:var(--ondark);margin:0 0 34px;}
.steps{display:flex;flex-direction:column;gap:22px;}
.step{display:grid;grid-template-columns:52px 1fr;gap:18px;border-top:1px solid var(--ondark-line);padding-top:18px;}
.step .num{font-family:var(--serif);font-size:30px;color:var(--coral);}
.step strong{font-size:17px;}
.step p{margin:6px 0 0;color:var(--ondark-muted);line-height:1.5;}

/* ---------- lookbook ---------- */
.lb-input{position:absolute;opacity:0;pointer-events:none;}
.lb-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.lb-tabs label{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:9px 15px;border:1px solid var(--ink);cursor:pointer;color:var(--ink);user-select:none;}
.lb-tabs label:hover{background:rgba(22,19,15,.06);}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:10px;grid-auto-flow:row dense;}
.tile{position:relative;overflow:hidden;background:var(--card);}
.tile:nth-child(4n+1){grid-row:span 2;}
.tile:nth-child(6){grid-row:span 2;}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.tile:hover img{transform:scale(1.04);}
.tile-cap{pointer-events:none;position:absolute;left:0;right:0;bottom:0;padding:16px;
  background:linear-gradient(transparent,rgba(0,0,0,.62));}
.tile-cat{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--coral);margin-bottom:4px;}
.tile-ttl{display:block;font-family:var(--serif);font-size:18px;color:#fff;line-height:1.1;}
/* filter behaviour */
#lb-all:checked~.lb-tabs label[for=lb-all],
#lb-street:checked~.lb-tabs label[for=lb-street],
#lb-runway:checked~.lb-tabs label[for=lb-runway],
#lb-details:checked~.lb-tabs label[for=lb-details],
#lb-flat:checked~.lb-tabs label[for=lb-flat],
#lb-beauty:checked~.lb-tabs label[for=lb-beauty]{background:var(--ink);color:var(--ondark);}
#lb-street:checked~.mosaic .tile:not(.cat-street),
#lb-runway:checked~.mosaic .tile:not(.cat-runway),
#lb-details:checked~.mosaic .tile:not(.cat-details),
#lb-flat:checked~.mosaic .tile:not(.cat-flat),
#lb-beauty:checked~.mosaic .tile:not(.cat-beauty){display:none;}

/* ---------- most read + cover ---------- */
.mr-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,4vw,52px);border-top:2px solid var(--ink);padding-top:40px;}
.mr-list{display:flex;flex-direction:column;}
.mr-item{display:grid;grid-template-columns:60px 1fr;gap:22px;align-items:baseline;border-top:1px solid var(--line);padding:20px 0;color:var(--ink);}
.mr-list .mr-item:last-child{border-bottom:1px solid var(--line);}
.mr-item:hover .mr-ttl{color:var(--coral);}
.mr-num{font-family:var(--serif);font-size:34px;color:rgba(22,19,15,.3);}
.mr-item:first-child .mr-num{color:var(--coral);}
.mr-ttl{font-family:var(--sans);font-weight:700;font-size:21px;line-height:1.22;letter-spacing:-.01em;transition:color .2s;}
.cover-wrap{display:flex;flex-direction:column;}
.cover-wrap .kicker{margin-bottom:16px;}
.cover-media{position:relative;flex:1;min-height:520px;background:var(--card);}
.cover-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------- sponsor strip ---------- */
.sponsors{background:var(--ink);color:var(--ondark);padding:clamp(44px,5vw,64px) 0;}
.sponsors .kicker{display:block;margin-bottom:10px;}
.sponsors h2{color:var(--ondark);font-size:clamp(28px,3.4vw,40px);margin:0 0 6px;}
.sponsors .lede{color:var(--ondark-muted);font-size:15px;margin:0 0 34px;max-width:52ch;}
.sponsor-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px;}
.sponsor-roll{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.sponsor{display:flex;flex-direction:column;gap:10px;background:var(--dark2);border:1px solid var(--ondark-line);
  padding:22px;color:var(--ondark);transition:border-color .2s;}
.sponsor:hover{border-color:var(--coral);color:var(--ondark);}
.sponsor img{width:100%;height:52px;object-fit:contain;object-position:left center;opacity:1;}
.sponsor-featured .sponsor img{height:60px;}
.sponsor-blurb{font-size:13px;line-height:1.45;color:var(--ondark-muted);}
.sponsor-blurb:empty{display:none;}
.sponsor-roll .sponsor{align-items:center;}
.sponsor-roll .sponsor img{object-position:center;height:44px;}

/* ---------- newsletter ---------- */
.newsletter{background:var(--coral);color:var(--ink);padding:clamp(52px,6vw,72px) 0;text-align:center;}
.newsletter h2{font-size:clamp(38px,5vw,60px);font-weight:800;margin:0 0 16px;}
.newsletter p{font-size:18px;line-height:1.5;max-width:36ch;margin:0 auto 30px;color:rgba(22,19,15,.82);}
.nl-form{display:flex;justify-content:center;max-width:520px;margin:0 auto;}
.nl-form input{flex:1;font-family:var(--sans);font-size:16px;padding:16px 20px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);outline:none;min-width:0;}
.nl-form button{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 26px;border:2px solid var(--ink);background:var(--ink);color:var(--ondark);cursor:pointer;}
.nl-form button:hover{background:transparent;color:var(--ink);}
.nl-done{font-family:var(--serif);font-style:italic;font-size:26px;display:none;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--ondark);padding:60px 0 40px;}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;border-bottom:1px solid var(--ondark-line);padding-bottom:44px;}
.foot-brand .wordmark{font-size:44px;color:var(--ondark);}
.foot-brand p{color:var(--ondark-muted);font-size:14px;line-height:1.6;margin:14px 0 0;max-width:26ch;}
.foot-col h4{font-family:var(--sans);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--coral);margin:0 0 12px;}
.foot-col a{display:block;color:var(--ondark);font-size:14px;line-height:2.05;}
.foot-col a:hover{color:var(--coral);}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.foot-bottom span{color:rgba(245,241,232,.45);}

/* ============ ARTICLE ============ */
.article-hero{position:relative;}
.article-head{max-width:960px;margin:0 auto;padding:clamp(48px,6vw,72px) clamp(20px,5vw,40px) 40px;text-align:center;}
.article-head .kicker{display:inline-block;margin-bottom:24px;}
.article-h1{font-size:clamp(40px,6vw,80px);font-weight:800;margin:0 0 26px;}
.article-standfirst{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.6vw,27px);line-height:1.34;color:var(--muted);max-width:26ch;margin:0 auto 28px;}
.byline{font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);}
.byline .sep{opacity:.5;padding:0 8px;}
.lead-figure{position:relative;height:min(72vh,720px);background:var(--card);}
.lead-figure img{width:100%;height:100%;object-fit:cover;}
.lead-figure figcaption{position:absolute;left:0;bottom:0;background:rgba(22,19,15,.72);color:var(--ondark);font-size:13px;letter-spacing:.04em;padding:14px 22px;max-width:80%;}

.article-body{max-width:78ch;margin:0 auto;padding:clamp(40px,5vw,56px) clamp(20px,5vw,40px) 0;counter-reset:sec;font-size:20px;line-height:1.75;}
.article-body>p{margin:0 0 26px;color:rgba(22,19,15,.86);}
.article-body h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;margin:52px 0 20px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;}
.article-body h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--coral);border-top:2px solid var(--coral);padding-top:6px;}
.article-body h3{font-size:24px;margin:32px 0 12px;}
.lead{font-family:var(--serif);font-size:clamp(22px,2.7vw,28px);line-height:1.4;color:var(--ink);font-weight:500;margin:0 0 30px;font-style:normal;}
.dropcap::first-letter{float:left;font-family:var(--serif);font-weight:800;font-size:5.2em;line-height:.72;padding:8px 14px 0 0;color:var(--coral);}
.article-body strong{font-weight:700;}
.article-body a{border-bottom:1px solid rgba(240,82,60,.4);}
.article-body a:hover{border-color:var(--ink);}

/* breakout wrapper for wide components */
.breakout{max-width:1080px;margin-inline:auto;}

/* ---------- palette components ---------- */
.pullquote{margin:44px 0;padding:0 0 0 28px;border-left:4px solid var(--coral);}
.pullquote p{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,44px);line-height:1.06;letter-spacing:-.01em;margin:0;}
.blockquote{margin:34px 0;padding:20px 26px;background:rgba(22,19,15,.04);border-left:3px solid var(--ink);}
.blockquote p{font-family:var(--serif);font-size:23px;line-height:1.3;margin:0 0 10px;}
.blockquote cite{font-family:var(--sans);font-style:normal;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.callout{margin:34px 0;padding:26px 30px;background:var(--ink);color:var(--ondark);}
.callout p{margin:0;font-size:18px;line-height:1.55;color:var(--ondark);}
.callout p+p{margin-top:12px;}
.callout strong{color:var(--coral);}
.note{margin:26px 0;padding:16px 20px 16px 44px;position:relative;font-size:16px;line-height:1.5;color:var(--muted);background:rgba(240,82,60,.07);border:1px solid rgba(240,82,60,.25);}
.note::before{content:"";position:absolute;left:18px;top:20px;width:14px;height:14px;border-radius:50%;background:var(--coral);}

/* key facts / glossary panel */
.keyfacts{margin:40px 0;padding:30px 34px;background:var(--dark2);color:var(--ondark);}
.keyfacts h3{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin:0 0 18px;}
.keyfacts dl{margin:0;display:grid;gap:14px;}
.keyfacts dt{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ondark);}
.keyfacts dd{margin:2px 0 0;font-size:15px;line-height:1.5;color:var(--ondark-muted);}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin:36px 0;}
.statblock{border-top:3px solid var(--coral);padding-top:14px;}
.stat-num{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(40px,6vw,64px);line-height:1;letter-spacing:-.02em;}
.stat-label{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--muted);}

/* timeline */
.timeline{list-style:none;margin:36px 0;padding:0;border-left:2px solid var(--line);}
.timeline li{position:relative;padding:0 0 26px 28px;}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--coral);}
.t-when{display:block;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);margin-bottom:4px;}
.t-what{display:block;font-size:17px;line-height:1.5;color:rgba(22,19,15,.86);}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin:36px 0;font-size:16px;}
.versus th,.versus td,.datatable th,.datatable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.versus thead th,.datatable thead th{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-bottom:2px solid var(--ink);}
.versus tbody th{font-family:var(--serif);font-size:19px;font-weight:600;}
.versus td{font-size:16px;color:rgba(22,19,15,.82);}
.datatable tbody tr:hover{background:rgba(22,19,15,.03);}
.datatable td.num{font-variant-numeric:tabular-nums;text-align:right;}

/* charts */
.chart{margin:40px 0;}
.chart svg{width:100%;height:auto;display:block;}
.chart figcaption{margin-top:12px;font-size:14px;color:var(--muted);}
.bar-track{fill:rgba(22,19,15,.08);}
.bar-fill{fill:var(--coral);}
.bar-label{font-family:var(--sans);font-size:13px;fill:var(--ink);}
.bar-val{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--muted);}
.axis-line{stroke:var(--line);stroke-width:1;}
.line-path{fill:none;stroke:var(--coral);stroke-width:2.5;}
.line-dot{fill:var(--coral);}

/* figures / gallery */
.article-figure{margin:40px 0;}
.article-figure img{width:100%;background:var(--card);}
.article-figure figcaption,.gallery figcaption{margin-top:10px;font-size:14px;color:var(--muted);}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:40px 0;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--card);}

/* map */
.map-figure{margin:40px 0;}
.map-slot{aspect-ratio:16/9;background:var(--dark2) repeating-linear-gradient(45deg,rgba(245,241,232,.03) 0 12px,transparent 12px 24px);
  display:flex;align-items:center;justify-content:center;color:var(--ondark-muted);font-size:13px;letter-spacing:.14em;text-transform:uppercase;}
.map-figure figcaption{margin-top:10px;font-size:14px;color:var(--muted);}

/* profile / org cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:36px 0;}
.profile-card{border:1px solid var(--line);padding:24px;background:rgba(22,19,15,.02);}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:14px;background:var(--card);}
.profile-card h3{font-size:23px;margin:0 0 4px;}
.profile-card .p-role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin:0 0 12px;font-family:var(--sans);}
.profile-card p{font-size:15px;line-height:1.55;color:var(--muted);margin:0;}
.profile-card .p-links{margin-top:12px;font-size:14px;}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:32px 0;}
.org-card{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);padding:16px 18px;color:var(--ink);}
.org-card:hover{border-color:var(--coral);}
.org-name{font-family:var(--serif);font-size:19px;font-weight:600;}
.org-host{font-size:13px;color:var(--faint);}
.entity-ref{border-bottom:1px solid rgba(240,82,60,.4);}

/* related / further */
.related{max-width:1080px;margin:64px auto 0;padding:0 clamp(20px,5vw,40px) 80px;}
.related h2{font-size:clamp(28px,3.4vw,40px);border-top:2px solid var(--ink);padding-top:28px;margin:0 0 28px;}
.further-grid,.related-links{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;}
.related-links li{margin:0;}
.related-links a,.further-grid a{display:block;height:100%;border:1px solid var(--line);padding:22px;color:var(--ink);
  font-family:var(--serif);font-size:22px;line-height:1.1;transition:border-color .2s,color .2s;}
.related-links a:hover,.further-grid a:hover{border-color:var(--coral);color:var(--coral);}
.related-links .rl-cat{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:10px;}

/* ============ CATEGORY / HUB / PAGES ============ */
.page-hero{border-bottom:2px solid var(--ink);padding:clamp(48px,6vw,80px) 0;}
.page-hero .kicker{display:block;margin-bottom:20px;}
.page-hero h1{font-size:clamp(44px,7vw,92px);font-weight:900;margin:0 0 20px;}
.page-hero p{font-size:20px;line-height:1.55;color:var(--muted);max-width:52ch;margin:0;}
.cat-list{list-style:none;margin:0;padding:0;}
.cat-item{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  border-bottom:1px solid var(--line);padding:28px 0;color:var(--ink);}
.cat-item:hover .ci-title{color:var(--coral);}
.ci-num{font-family:var(--serif);font-size:30px;color:rgba(22,19,15,.28);}
.ci-title{font-family:var(--serif);font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1.05;margin:0 0 8px;transition:color .2s;}
.ci-dek{font-size:16px;line-height:1.5;color:var(--muted);margin:0;max-width:70ch;}
.ci-meta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}
.ci-thumb{width:120px;height:150px;object-fit:cover;background:var(--card);}

.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.hub-card{border:1px solid var(--line);padding:32px;color:var(--ink);display:flex;flex-direction:column;min-height:220px;}
.hub-card:hover{border-color:var(--coral);}
.hub-card .hc-no{font-family:var(--serif);font-size:22px;color:var(--coral);}
.hub-card h2{font-size:32px;margin:14px 0 10px;}
.hub-card p{font-size:15px;color:var(--muted);line-height:1.5;margin:0 0 18px;}
.hub-card ul{list-style:none;margin:auto 0 0;padding:0;font-size:14px;}
.hub-card li{padding:5px 0;border-top:1px solid var(--line);}
.hub-card li a{color:var(--muted);}
.hub-card li a:hover{color:var(--coral);}

.prose{max-width:72ch;margin:0 auto;padding:clamp(40px,5vw,60px) clamp(20px,5vw,40px) 80px;font-size:19px;line-height:1.7;}
.prose h2{font-size:32px;margin:40px 0 16px;}
.prose p{margin:0 0 22px;color:rgba(22,19,15,.86);}
.prose a{border-bottom:1px solid rgba(240,82,60,.4);}
.contact-methods{list-style:none;padding:0;margin:28px 0;display:grid;gap:2px;}
.contact-methods li{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--line);}
.contact-methods svg{width:22px;height:22px;flex:none;color:var(--coral);}
.contact-methods b{font-family:var(--serif);font-size:20px;font-weight:600;}

.err-wrap{text-align:center;padding:clamp(60px,10vw,140px) 20px;}
.err-wrap .big{font-family:var(--serif);font-weight:900;font-size:clamp(90px,20vw,220px);line-height:.8;color:var(--coral);letter-spacing:-.04em;}
.err-wrap h1{font-size:clamp(30px,5vw,52px);margin:20px 0 14px;}
.err-wrap p{color:var(--muted);margin:0 0 28px;}

/* styleguide */
.sg-section{padding:48px 0;border-top:1px solid var(--line);}
.sg-section>h2{font-size:34px;margin:0 0 6px;}
.sg-section>.sg-note{color:var(--muted);font-size:15px;margin:0 0 28px;}
.sg-label{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:28px 0 12px;font-weight:700;}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;}
.swatch{border:1px solid var(--line);}
.swatch .sw-chip{height:80px;}
.swatch .sw-name{padding:8px 10px;font-size:12px;letter-spacing:.06em;}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .cards4{grid-template-columns:repeat(2,1fr);}
  .mosaic{grid-template-columns:repeat(3,1fr);grid-auto-rows:180px;}
  .sponsor-roll{grid-template-columns:repeat(3,1fr);}
  .foot-top{grid-template-columns:1fr 1fr;}
  .hub-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  body{font-size:18px;}
  /* nav → hamburger */
  .nav-hamburger{display:flex;align-items:center;gap:10px;justify-content:center;padding:12px 0;cursor:pointer;
    font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
  .nav-hamburger svg{width:20px;height:20px;}
  .navlist{display:none;flex-direction:column;align-items:stretch;gap:0;padding:0 0 10px;}
  #navmenu:checked~.navlist{display:flex;}
  .navlist>li{border-top:1px solid var(--line);}
  .nav-top{justify-content:space-between;width:100%;padding:14px clamp(20px,5vw,56px);}
  .nav-sub{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;background:var(--dark2);
    min-width:0;max-width:none;padding:0;display:none;}
  .nav-sub::before{display:none;}
  .has-sub .sub-toggle:checked~.nav-sub{display:block;}
  .nav-sub a{padding:12px clamp(28px,6vw,64px);}
  .radar-grid{grid-template-columns:1fr;}
  .radar-legend{max-width:560px;margin-inline:auto;}
  .mr-grid{grid-template-columns:1fr;}
  .cover-media{min-height:420px;}
  .related-links,.further-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:720px){
  .hero{grid-template-columns:1fr;}
  .hero-copy{border-right:none;border-bottom:1px solid var(--line);}
  .hero-media{min-height:70vw;}
  .howto{grid-template-columns:1fr;}
  .howto-media{min-height:70vw;}
  .howto-body{padding:36px clamp(20px,5vw,36px);}
  .cards4{grid-template-columns:1fr 1fr;gap:20px;}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;gap:8px;}
  .sponsor-featured{grid-template-columns:1fr;}
  .sponsor-roll{grid-template-columns:1fr 1fr;}
  .foot-top{grid-template-columns:1fr;gap:28px;}
  .hub-grid{grid-template-columns:1fr;}
  .cat-item{grid-template-columns:auto 1fr;gap:16px;}
  .ci-thumb,.ci-meta{display:none;}
  .lead-figure figcaption{max-width:100%;font-size:12px;}
  .article-body{font-size:18px;}
  .versus,.datatable{font-size:14px;}
  .versus th,.versus td,.datatable th,.datatable td{padding:10px 9px;}
  .versus tbody th{font-size:16px;}
}
@media(max-width:420px){
  .cards4{grid-template-columns:1fr;}
  .sc-media{aspect-ratio:16/11;}
  .sponsor-roll{grid-template-columns:1fr;}
}

/* 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;background:transparent}

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

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


/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.util-inner{padding-inline:clamp(20px,5vw,56px)}
  .wrap.radar-grid{padding-inline:clamp(20px,5vw,56px)}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1868px at 390, 16% of the whole page. Two columns bring it to
   1174px (37% shorter). Checked before writing: no new overflow, smallest mark still
   122px wide, longest blurb 3 lines, tile heights 138-173px.
   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 (.sponsor-featured, .sponsor-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){
  .sponsor-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sponsor-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-featured > * *{min-width:0!important;max-width:100%}
    .sponsor-featured img,.sponsor-featured svg{max-width:100%;height:auto}
  .sponsor-roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sponsor-roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-roll > * *{min-width:0!important;max-width:100%}
    .sponsor-roll img,.sponsor-roll svg{max-width:100%;height:auto}
  .sponsor-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-featured (3 tiles), .sponsor-roll (9 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){
  .sponsor-featured:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 813px (94 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 78ch (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1440 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1440px){
  div.article-body{max-width:min(960px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{max-width:min(clamp(960px, 66.667vw, 1152px), 100%)!important}
  div.article-body > :is(p.dropcap, p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (813px) and was left behind when the text went to 880px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1440px){
  p.article-standfirst{max-width:min(471px, 100%)!important}
}
@media (min-width:1600px){
  p.article-standfirst{max-width:min(calc(clamp(471px, 32.708vw, 565px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px) and (max-width:1399px){
  div.wrap.radar-grid{padding-left:max(clamp(20px,5vw,56px), 18px);padding-right:max(clamp(20px,5vw,56px), 18px)}
  div.wrap.util-inner{padding-left:max(clamp(20px,5vw,56px), 18px);padding-right:max(clamp(20px,5vw,56px), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.story-card > div.sc-media > img,
  div.article-hero > figure.lead-figure > img,
  div.cover-wrap > div.cover-media > img,
  div.howto > div.howto-media > img,
  div.mosaic > figure.cat-beauty.tile > img,
  div.mosaic > figure.cat-details.tile > img,
  div.mosaic > figure.cat-flat.tile > img,
  div.mosaic > figure.cat-runway.tile > img,
  div.mosaic > figure.cat-street.tile > img,
  ol.cat-list > a.cat-item > img.ci-thumb,
  section.hero > div.hero-media > img){height:auto}
/* op-img-dims:end */