@charset "utf-8";
/* ==========================================================================
   Lexicon Magazine — Room Tone
   Palette: 5 members, each with a job. Two are genuinely saturated
   (signal orange ~15deg, tape teal ~176deg) and both are used at AREA.
   ========================================================================== */
:root{
  --ground:#0E0F13;          /* ground  — the page */
  --ink:#EDE6D8;             /* ink     — type on the ground */
  --accent:#F0511A;          /* accent  — signal orange, saturated */
  --secondary:#0E7F78;       /* secondary — tape teal, saturated */
  --quiet:#8C8E99;           /* quiet   — credits, numerals, fine print (5.8:1 on ground) */

  /* derived, same five hues */
  --panel:#16181E;
  --secondary-deep:#0A5F5A;  /* teal at AREA size, holds --ink at 6.1:1 */
  --accent-deep:#B33A0C;     /* orange as type on --ink grounds, 4.8:1 */
  --ink-dim:#A9A6A0;
  --hair:rgba(237,230,216,.16);
  --hair-strong:rgba(237,230,216,.34);
  --flag:#B00020;

  --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --text:'Libre Franklin',system-ui,-apple-system,sans-serif;
  --mono:'Overpass Mono',ui-monospace,'Courier New',monospace;

  --gut:32px;
  --max:1420px;
  --measure:72ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.6 var(--text);
  overflow-x:hidden;text-wrap:pretty;
}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover,a:focus-visible{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--ground)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0}
p{margin:0}
ul,ol,dl{margin:0;padding:0}
li{list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--hair);margin:0}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.wrap-read{max-width:calc(var(--measure) + 2*var(--gut));margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--ground);padding:10px 16px;font:600 13px/1 var(--mono);z-index:99}
.skip:focus{left:8px;top:8px}

/* ── the drawn device: sixteen-step rows, chips, panel cutaway ───────────── */
.dev{display:block;color:var(--accent)}
.dev--rule{width:100%;height:14px}
.dev--chip{width:48px;height:10px;flex:none}
.dev--teal{color:var(--secondary)}
.icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.icon--lg{width:34px;height:34px;stroke-width:1.4}

/* ── kickers, labels, numerals ───────────────────────────────────────────── */
.kicker{font:600 12.5px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.kicker--quiet{color:var(--quiet);font-weight:400}
.entryno{font:400 12.5px/1.2 var(--mono);color:var(--quiet)}
.credit{display:block;font:400 13.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--quiet);margin-top:8px}
.byline{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  font:400 13.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.byline .sec{display:inline-flex;align-items:center;gap:9px;color:var(--accent)}

/* ── masthead + printed index header ────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--hair)}
.masthead__in{display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;flex-wrap:wrap;padding-block:34px 22px}
.brand{display:flex;align-items:flex-start;gap:22px;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand__mark{width:66px;height:66px;color:var(--accent);flex:none;margin-top:6px}
.brand__name{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.2vw,88px);
  line-height:.82;letter-spacing:-.045em}
.brand__sub{display:flex;align-items:baseline;gap:12px;margin-top:10px}
.brand__sub span{font:600 13px/1 var(--mono);letter-spacing:.44em;text-transform:uppercase;color:var(--accent)}
.brand__sub i{display:block;height:1px;flex:1;min-width:40px;background:var(--hair-strong)}
.standfirst{margin-bottom:6px;max-width:340px;font-size:15.5px;line-height:1.5;color:var(--ink-dim)}

.index{border-top:1px solid var(--hair);background:var(--panel)}
.index__in{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 26px;padding-block:16px 20px}
.index__col{padding-inline:0}
.index__head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--hair);color:var(--ink)}
.index__head:hover{text-decoration:none;color:var(--accent)}
.index__head b{font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.008em;line-height:1.15}
.index__head .icon{width:26px;height:26px;color:var(--accent);stroke-width:1.4}
.index__head:hover .icon{color:var(--ink)}
.index__list a{display:block;padding:3px 0;font-size:13.5px;line-height:1.4;color:var(--quiet)}
.index__list a:hover{color:var(--accent)}
.index__foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--hair);padding-block:11px;
  font:400 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}

/* ── figure system: four treatments, one drawing system ──────────────────── */
figure{margin:0}
figcaption{font-family:var(--display)}
.fig-cap{display:block;font:500 16px/1.4 var(--display);color:var(--ink)}
.fig-cap--sm{font-size:15px}

/* 1 · full bleed, caption on the ground */
.fig--bleed{margin-inline:calc(50% - 50vw);width:100vw}
.fig--bleed>img{width:100%;object-fit:cover;height:clamp(300px,54vw,660px)}
.fig--bleed figcaption{max-width:var(--max);margin:16px auto 0;padding-inline:var(--gut);
  display:flex;gap:14px;align-items:flex-start}
.fig--bleed figcaption .dev--chip{margin-top:6px}
.fig--bleed .fig-cap{max-width:66ch}

/* 2 · bone mat, hairline rule under the image, caption inside the mat */
.fig--mat{background:var(--ink);padding:22px 22px 20px;color:var(--ground)}
.fig--mat>img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ground)}
.fig--mat figcaption{margin-top:16px;border-top:1px solid var(--ground);padding-top:13px}
.fig--mat .fig-cap{color:var(--ground)}
.fig--mat .credit{color:#5C5A54}
.fig--mat--tall>img{aspect-ratio:4/5}

/* 3 · hairline frame, caption offset into the adjacent column over an orange rule */
.fig--offset{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(220px,1fr);gap:40px;align-items:start}
.fig--offset>img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--hair-strong)}
.fig--offset figcaption{border-top:2px solid var(--accent);padding-top:15px}

/* 4 · teal tint under an orange frame, caption hard against a 2px rule */
.fig--plate{max-width:340px}
.fig--plate .fig--plate__frame{display:block;line-height:0;position:relative;border:1px solid var(--accent);background:var(--secondary)}
.fig--plate img{width:100%;aspect-ratio:1/1;object-fit:cover}
.fig--plate .tint{position:absolute;inset:0;background:var(--secondary);mix-blend-mode:color;opacity:.45;pointer-events:none}
.fig--plate figcaption{border-top:2px solid var(--accent);padding-top:12px}
/* the mid-article plate: full measure with the caption beneath, so the void
   is zero by construction — independent of caption length or what follows */
.fig--plate--inset{float:none;display:block;width:auto;max-width:none;margin:38px 0}
.fig--plate--inset img{aspect-ratio:16/9}
.fig--plate--inset figcaption .fig-cap{max-width:72ch}

/* base class required by the component spec — the mat treatment is the default */
.article-figure{background:var(--ink);padding:22px 22px 20px;color:var(--ground)}
.article-figure>img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ground)}
.article-figure figcaption{margin-top:16px;border-top:1px solid var(--ground);padding-top:13px}
.article-figure .fig-cap{color:var(--ground)}
.article-figure .credit{color:#5C5A54}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.gallery figure{margin:0}
.gallery .fig--plate{max-width:none}

/* ── prose ───────────────────────────────────────────────────────────────── */
.prose{font-size:18.5px;line-height:1.68;color:#D9D3C7}
.prose>p{margin:0 0 22px;max-width:var(--measure)}
.prose>h2{margin:46px 0 18px;font-size:clamp(25px,2.7vw,32px);color:var(--ink);max-width:34ch}
.prose>h3{margin:34px 0 12px;font-size:21px;color:var(--ink)}
.prose a{border-bottom:1px solid rgba(240,81,26,.4)}
.prose a:hover{border-bottom-color:var(--ink)}
/* nothing structural wraps around a floated inset plate */
.prose>h2,.prose>h3,.prose>figure,.prose>blockquote,.prose>.callout,.prose>table,.prose>.statrow{clear:both}
.dropcap::first-letter{font-family:var(--display);font-weight:800;font-size:4.1em;
  line-height:.78;float:left;margin:.06em .07em 0 0;color:var(--accent)}
.lead{font:400 clamp(20px,2.2vw,25px)/1.42 var(--text);color:var(--ink);max-width:60ch}

.pullquote{margin:38px 0;padding:0 0 0 26px;border-left:3px solid var(--accent);max-width:56ch}
.pullquote p{font:500 clamp(21px,2.3vw,27px)/1.28 var(--display);letter-spacing:-.018em;color:var(--ink)}
.blockquote{margin:34px 0;padding:24px 28px;background:var(--panel);border-left:3px solid var(--secondary);max-width:60ch}
.blockquote p{font:500 20px/1.42 var(--display);color:var(--ink)}
.blockquote cite{display:block;margin-top:12px;font:400 13px/1.5 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);font-style:normal}
.callout{margin:34px 0;padding:22px 26px;border:1px solid var(--accent);max-width:64ch}
.callout::before{content:attr(data-label);display:block;margin-bottom:9px;
  font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.callout p{font-size:17px;line-height:1.6;color:var(--ink)}
.note{margin:24px 0;padding-left:18px;border-left:2px solid var(--quiet);
  font-size:15.5px;line-height:1.55;color:var(--ink-dim);max-width:62ch}

/* ── data / comparison ───────────────────────────────────────────────────── */
.band-panel{clear:both;margin:44px 0;padding:30px var(--gut) 32px;background:var(--panel);
  margin-inline:calc(50% - 50vw);width:100vw}
.band-panel__in{max-width:var(--max);margin:0 auto}
.band-panel__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.band-panel__head h2{font-size:clamp(21px,2.2vw,28px)}

.datatable th,.datatable td{text-align:left;vertical-align:top;
  padding:13px 20px 13px 0;border-bottom:1px solid var(--hair)}
.datatable thead th{font:600 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--hair-strong);padding-top:0}
.datatable td:first-child{font:500 16.5px/1.35 var(--display);color:var(--ink);width:38%}
.datatable td:last-child{font-size:16px;line-height:1.5;color:var(--ink-dim);padding-right:0}

.versus{border:1px solid var(--hair-strong)}
.versus caption{caption-side:top;text-align:left;padding-bottom:12px;
  font:600 12px/1.35 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.versus th,.versus td{text-align:left;vertical-align:top;padding:15px 18px;border:1px solid var(--hair)}
.versus thead th{font:700 15.5px/1.25 var(--display);color:var(--ink);background:var(--panel)}
.versus tbody th{font:500 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--quiet);width:22%}
.versus td{font-size:16px;line-height:1.5;color:var(--ink-dim)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.statrow+.datatable,.statrow+table{margin-top:26px}
.statblock{background:var(--ground);padding:20px 18px;display:flex;flex-direction:column;gap:7px}
.stat-num{font:800 clamp(30px,3.4vw,44px)/.92 var(--display);letter-spacing:-.03em;color:var(--accent)}
.stat-label{font-size:14.5px;line-height:1.4;color:var(--ink-dim)}

/* hard data pulled out of prose */
.keydata{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin:0 0 34px}
.keydata div{background:var(--panel);padding:16px 16px 15px;display:flex;flex-direction:column;gap:5px}
.keydata b{font:800 clamp(24px,2.6vw,34px)/.94 var(--display);letter-spacing:-.03em;color:var(--accent);
  font-variant-numeric:tabular-nums}
.keydata span{font-size:13.5px;line-height:1.35;color:var(--ink-dim)}
.prose .num{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);
  border-bottom:1px solid rgba(240,81,26,.42);padding-bottom:1px}

.timeline{border-top:1px solid var(--hair-strong)}
.timeline li{display:grid;grid-template-columns:minmax(160px,26%) minmax(0,1fr);gap:24px;
  padding:15px 0;border-bottom:1px solid var(--hair)}
.t-when{font:500 15px/1.35 var(--mono);letter-spacing:.04em;color:var(--accent)}
.t-what{font-size:16.5px;line-height:1.5;color:var(--ink-dim)}

.chart{margin:32px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:14px;font:400 14.5px/1.5 var(--text);color:var(--ink-dim);max-width:60ch}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar-alt{fill:var(--secondary)}
.chart .c-lab,.chart .c-val{font:400 12px/1 var(--mono);fill:var(--ink-dim)}
.chart .c-val{fill:var(--ink)}
.chart .c-axis{stroke:var(--hair-strong);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--accent);stroke-width:2}
.chart .c-dot{fill:var(--ground);stroke:var(--accent);stroke-width:2}

/* ── cards / references ──────────────────────────────────────────────────── */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.profile-card{display:flex;flex-direction:column;gap:9px;padding:22px 22px 20px;
  border:1px solid var(--hair-strong);background:var(--panel);height:100%}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:4px}
.profile-card h3{font-size:19px}
.profile-card .p-role{font:400 12.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.profile-card p{font-size:15.5px;line-height:1.55;color:var(--ink-dim)}
.profile-card .p-links{margin-top:auto;padding-top:12px;font-size:14.5px}
.profile-card .p-attr{font:400 12.5px/1.5 var(--mono);color:var(--quiet)}
.profile-card.no-photo{border-left:3px solid var(--secondary)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.org-card{display:flex;flex-direction:column;gap:5px;padding:16px 18px;
  border:1px solid var(--hair);background:var(--panel);color:var(--ink);height:100%}
.org-card:hover{border-color:var(--accent);text-decoration:none;color:var(--ink)}
.org-logo{width:100%;max-height:34px;object-fit:contain;object-position:left;margin-bottom:6px}
.org-name{font:700 16px/1.25 var(--display)}
.org-host{font:400 13px/1.4 var(--mono);color:var(--quiet)}
.org-card.no-logo{border-top:2px solid var(--secondary)}

.entity-ref{display:inline-block;padding:5px 11px;border:1px solid var(--hair-strong);
  font-size:13.5px;color:#D9D3C7}
.entity-ref:hover{border-color:var(--accent);text-decoration:none}
.chiprow{display:flex;flex-wrap:wrap;gap:7px}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.further-grid a{display:flex;flex-direction:column;height:100%;color:var(--ink);
  border:1px solid var(--hair);background:var(--panel)}
.further-grid a:hover{border-color:var(--accent);text-decoration:none;color:var(--ink)}
.further-grid img{width:100%;aspect-ratio:16/10;object-fit:cover}
.further-grid .f-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.further-grid .f-sec{display:inline-flex;align-items:center;gap:8px;
  font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.further-grid strong{font:700 18px/1.2 var(--display);letter-spacing:-.015em;min-height:2.4em}
.further-grid span.f-dek{font-size:14.5px;line-height:1.5;color:var(--ink-dim);margin-top:auto}

.related-links{border-top:1px solid var(--hair-strong)}
.related-links li{border-bottom:1px solid var(--hair)}
.related-links a{display:flex;gap:14px;align-items:baseline;padding:13px 0;color:var(--ink)}
.related-links a:hover{color:var(--accent);text-decoration:none}
.related-links .icon{color:var(--secondary);align-self:center}

.cat-list{border-top:1px solid var(--hair-strong)}
.cat-list li{border-bottom:1px solid var(--hair)}
.cat-list>li>a{display:grid;grid-template-columns:66px minmax(0,1.5fr) minmax(0,2fr);
  gap:26px;align-items:start;padding:24px 0;color:var(--ink)}
.cat-list>li>a:hover{background:rgba(240,81,26,.07);text-decoration:none;color:var(--ink)}
.cat-list .c-no{font:400 12px/1.6 var(--mono);color:var(--accent)}
.cat-list .c-title{font:700 clamp(21px,2.3vw,29px)/1.06 var(--display);letter-spacing:-.025em}
.cat-list .c-dek{font-size:16px;line-height:1.55;color:var(--ink-dim)}

/* ── homepage bands ──────────────────────────────────────────────────────── */
.band{padding-block:clamp(58px,7vw,92px)}
.band--tight{padding-block:clamp(40px,4vw,58px)}
.band--rule{border-top:1px solid var(--hair)}
.band--panel{background:var(--panel)}
.band--teal{background:var(--secondary-deep)}
.band--teal .kicker{color:var(--ink)}
.band--teal .versus{border-color:rgba(237,230,216,.4)}
.band--teal .versus th,.band--teal .versus td{border-color:rgba(237,230,216,.3)}
.band--teal .versus thead th{background:rgba(14,15,19,.22);color:var(--ink)}
.band--teal .versus caption{color:var(--ink)}
.band--teal .versus tbody th{color:rgba(237,230,216,.8)}
.band--teal .versus td{color:rgba(237,230,216,.92)}
.band__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  border-bottom:1px solid var(--hair-strong);padding-bottom:13px;margin-bottom:30px}
.band__head h2{font-size:clamp(26px,3.1vw,42px);font-weight:800;letter-spacing:-.03em}
.band--teal .band__head{border-bottom-color:rgba(237,230,216,.45)}

.hero{position:relative}
.hero__img{width:100%;height:min(78vh,720px);min-height:420px;object-fit:cover}
.hero__over{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,15,19,.9) 0%,rgba(14,15,19,.5) 44%,rgba(14,15,19,0) 74%)}
.hero__body{position:absolute;left:0;right:0;bottom:0;padding-block:0 44px}
.hero__body .in{max-width:760px}
.hero h1,.hero h2{font-weight:800;font-size:clamp(32px,4.4vw,64px);letter-spacing:-.035em;line-height:.96;text-wrap:balance}
.hero p{margin-top:18px;font-size:clamp(17px,1.5vw,19.5px);line-height:1.5;max-width:56ch}
.hero__cap{display:flex;gap:14px;align-items:flex-start;padding-top:16px}
.hero__cap .dev--chip{margin-top:6px}

.statement{font:300 clamp(24px,3vw,44px)/1.18 var(--display);letter-spacing:-.02em;
  color:var(--ink);max-width:26ch}
.statement em{font-style:normal;color:var(--accent)}

.secreg{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.secreg a{display:grid;grid-template-columns:44px minmax(0,2fr) minmax(0,2.6fr) 200px;
  gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(237,230,216,.1);color:var(--ink)}
.secreg li:last-child a{border-bottom:0}
.secreg a:hover{background:rgba(240,81,26,.07);text-decoration:none;color:var(--ink)}
.secreg .icon{color:var(--accent)}
.secreg b{font:700 clamp(21px,2.4vw,33px)/1.02 var(--display);letter-spacing:-.025em}
.secreg span{font-size:15.5px;line-height:1.45;color:var(--ink-dim)}

.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:36px}
.duo h3{font-size:clamp(21px,2.2vw,28px);margin-bottom:8px}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}

.lexi{columns:3 250px;column-gap:44px}
.lexi div{break-inside:avoid;margin-bottom:22px}
.lexi dt{font:700 16.5px/1.3 var(--display);color:var(--accent)}
.lexi dd{margin:5px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-dim)}

.cutaway{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:52px;align-items:center}

.compact{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 34px}
.compact a{display:block;padding:14px 0;border-top:1px solid var(--hair);color:var(--ink)}
.compact a:hover{color:var(--accent);text-decoration:none}
.compact b{display:block;font:700 18px/1.2 var(--display);letter-spacing:-.015em}
.compact span{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--ink-dim)}

/* ── supporters ──────────────────────────────────────────────────────────── */
/* One horizontal run. Every tile is the SAME self-contained unit at a
   CONSTANT width — never a fractional track, never a positional selector. */
.sponsors{display:grid;grid-template-columns:repeat(auto-fit,244px);justify-content:space-between;gap:14px}
.sponsor{width:244px;height:80px;display:flex;align-items:center;justify-content:center;
  padding:14px 18px;background:#0A0B0E;border:1px solid var(--hair);overflow:hidden}
.sponsor:hover{border-color:var(--accent);text-decoration:none}
.sponsor img{max-height:46px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor.feat{border-top:2px solid var(--accent)}
.sponsor-blurb{display:none}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{background:#07080B;border-top:1px solid var(--accent);margin-top:0}
.foot::before{content:"";display:block;height:7px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 15px,transparent 15px 21px)}
.foot__cols{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:20px;padding-block:34px 26px}
.foot__cols h3{display:flex;align-items:center;gap:7px;margin-bottom:8px;
  font:600 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.foot__cols h3 .icon{width:17px;height:17px;color:var(--secondary)}
.foot__cols a{display:block;padding:1px 0;font-size:12.5px;line-height:1.4;color:var(--quiet)}
.foot__cols a:hover{color:var(--accent)}
.foot__base{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--hair-strong);padding-block:20px 30px}
.foot__base .b-name{font:800 19px/1 var(--display);letter-spacing:-.03em}
.foot__base p{font:400 11.5px/1.5 var(--mono);color:var(--quiet);margin-top:4px;max-width:62ch}

/* ── article page ────────────────────────────────────────────────────────── */
.art-head{padding-block:44px 0}
.art-head h1{font-size:clamp(34px,5vw,74px);font-weight:800;letter-spacing:-.038em;
  line-height:.92;max-width:24ch;text-wrap:balance;margin-top:22px}
.art-deck{margin-top:22px;display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.art-deck .dev--rule{width:210px;flex:none;margin-top:8px}
.art-body{padding-block:44px 0}
.art-foot{padding-block:52px}
.art-nav{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--hair-strong);padding-top:22px;margin-top:44px}
.art-nav a{font:500 15px/1.4 var(--display)}

/* ── page head (category / static) ───────────────────────────────────────── */
.pagehead{padding-block:48px 34px;border-bottom:1px solid var(--hair)}
.pagehead h1{font-size:clamp(40px,5.6vw,88px);font-weight:800;letter-spacing:-.04em;line-height:.88}
.pagehead p{margin-top:22px;max-width:62ch;font-size:19px;line-height:1.5;color:var(--ink-dim)}
.pagehead .icon--lg{color:var(--accent)}
.crumbs{font:400 12.5px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)}
.crumbs a{color:var(--accent)}

.expander{border-top:1px solid var(--hair-strong)}
.expander>summary{list-style:none;cursor:pointer;padding:13px 0;border-bottom:1px solid var(--hair);
  font:600 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:10px;min-height:44px}
.expander>summary::-webkit-details-marker{display:none}
.expander>summary::after{content:"+";font-size:16px;margin-left:auto}
.expander[open]>summary::after{content:"\2013"}
.expander>summary:hover{color:var(--ink)}

/* ── styleguide only ─────────────────────────────────────────────────────── */
.sg-block{padding-block:40px;border-top:1px solid var(--hair)}
.sg-block>h2{font-size:26px;margin-bottom:6px}
.sg-block>p.sg-note{font:400 13.5px/1.55 var(--mono);color:var(--quiet);margin-bottom:24px}

/* ══ responsive ═══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .index__in{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 26px}
  .foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fig--offset{grid-template-columns:minmax(0,1.7fr) minmax(190px,1fr);gap:28px}
  .secreg a{grid-template-columns:38px minmax(0,2fr) minmax(0,2.4fr);gap:20px}
  .secreg a>.dev--rule{display:none}
  .cutaway{gap:34px}
}
@media (max-width:880px){
  :root{--gut:22px}
  .index__in{grid-template-columns:1fr;gap:0;padding-block:8px 16px}
  .index__col{padding-inline:0;border-left:0;border-top:1px solid var(--hair);padding-block:12px}
  .index__col:first-child{border-top:0}
  .index__list{columns:2 140px;column-gap:20px}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .index__list a{padding:6px 0;font-size:14.5px}
  .brand__mark{width:52px;height:52px}
  .masthead__in{padding-block:26px 18px;gap:20px}
  .standfirst{max-width:none}
  .cutaway,.fig--offset{grid-template-columns:1fr}
  .fig--offset>img{aspect-ratio:16/11}
  .band-panel{padding-inline:var(--gut)}
  .lexi{columns:2 200px;column-gap:28px}
  .prose{font-size:17.5px}
  .art-head h1{max-width:none}
  .cat-list>li>a{grid-template-columns:44px minmax(0,1fr);gap:6px 16px}
  .cat-list .c-dek{grid-column:2}
  .timeline li{grid-template-columns:1fr;gap:5px}
  .versus{display:block;border:0}
  .versus caption{display:block}
  .versus thead{display:none}
  .versus tbody,.versus tr,.versus th,.versus td{display:block;width:auto}
  .versus tr{border:1px solid var(--hair-strong);margin-bottom:14px}
  .versus tbody th{width:auto;border:0;padding-bottom:0}
  .versus td{border:0;padding-top:6px}
  .versus td+td{border-top:1px solid var(--hair)}
  .datatable td:first-child{width:42%}
  .fig--plate--inset{margin:26px 0}
  .fig--plate{max-width:none}
  .hero__img{height:min(62vh,520px);min-height:330px}
  .hero__over{background:linear-gradient(0deg,rgba(14,15,19,.94) 0%,rgba(14,15,19,.55) 52%,rgba(14,15,19,.15) 100%)}
  .sponsors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sponsor{width:auto}
  .statement{max-width:none}
}
@media (max-width:520px){
  .lexi{columns:1}
  .index__list{columns:1}
  .sponsors{grid-template-columns:1fr}
  .sponsor{width:auto;height:84px}
  .brand__name{font-size:clamp(38px,12vw,54px)}
  .datatable td:first-child,.datatable td:last-child{display:block;width:auto;padding-right:0}
  .datatable td:first-child{padding-bottom:2px;border-bottom:0}
  .further-grid strong{min-height:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

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

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

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

/* op-nav-collapse: this nav printed 1429px of stacked links at 390 before any content
   (30 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "centre-pill", seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (0px measured) the button carries the build's
   gutter (32px) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (900px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-gate{display:none}
@media (max-width:900px){
  .nav-gate{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:1.5px solid currentColor;border-radius:999px;padding:10px 22px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-gate-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .index{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-gate-c:checked ~ .index{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .masthead:has(> .nav-gate){display:flow-root}
  .nav-gate:not(:has(~ .index)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 13 tiles,
   1260px at 390, 9% of the whole page. Two columns bring it to
   672px (47% shorter). Checked before writing: no new overflow, smallest mark still
   126px wide, longest blurb 0 lines, tile heights 84-84px.
   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.
   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 (.sponsors), 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){
  .sponsors{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsors > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors > * *{min-width:0!important;max-width:100%}
    .sponsors img,.sponsors svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsors (13 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){
  .sponsors:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — div reached
   322px in a 320px screen (+2px), inside
   div. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div{grid-template-columns:minmax(0,1fr)!important}
  div{min-width:0!important;max-width:100%!important}
}

/* op-hover-pad */
.cat-list > li > a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; margin: 0px;}
.profile-card h2:where(.rt-h3){font-size: 19px;}
.foot__cols h2:where(.rt-h3){display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font: 600 10.5px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);}
.foot__cols h2:where(.rt-h3) .icon{width: 17px; height: 17px; color: var(--secondary);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.fig--mat > img,
  div > figure.fig--mat > img,
  div > figure.fig--offset > img,
  div.cutaway > figure > img,
  div.prose > figure.fig--offset > img,
  div.wrap > figure.fig--bleed > img,
  div.wrap > figure.fig--offset > img,
  figure.fig--plate > span.fig--plate__frame > img,
  figure.fig--plate.fig--plate--inset > span.fig--plate__frame > img,
  main > section.hero > img.hero__img,
  nav.further-grid > a > img){height:auto}
/* op-img-dims:end */
@media (min-width:640px) and (max-width:899px){.sponsors:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}