/* tripda.com — one stylesheet.
   Palette roles: ground · ink · accent (ultramarine) · flag (signal orange) · pale (on-dark text) */

:root{
  --ground:#FFF7EC;
  --ink:#1E1520;
  --accent:#C13A1C;
  --chrome:#2E1B3C;
  --flag:#FF6B3D;
  --flag-ink:#B23A15;
  --flag-bright:#FFA277;
  --pale:#EBD8F2;

  --ink-2:#3D2F42;
  --ink-3:#4E3F53;
  --quiet:#7E6E80;
  --quiet-ink:#6A5A6C;
  --quiet-pale:#B49CB8;
  --rule:#E6D6C4;
  --hatch:#F7EAD8;
  --ink-lift:#2B2130;

  --wrap:1620px;
  --pad:44px;
  --measure:68ch;

  --display:Anton, "Arial Narrow", Impact, sans-serif;
  --text:Chivo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--text); font-size:18px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--flag)}
::selection{background:var(--flag); color:var(--ground)}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; letter-spacing:-0.015em; margin:0; overflow-wrap:break-word}
p{margin:0}
ul,ol{margin:0; padding:0}
table{border-collapse:collapse; width:100%}
hr{border:0; border-top:1px solid var(--rule); margin:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:20; background:var(--ground); color:var(--ink); padding:10px 14px}

/* ── icons ─────────────────────────────────────────────── */
.ico{width:1.5em; height:1.5em; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.ico--lg{width:2.1em; height:2.1em}

/* ── masthead ──────────────────────────────────────────── */
.masthead{background:var(--chrome); color:var(--ground)}
.masthead a{color:var(--ground)}
.masthead a:hover{color:var(--flag-bright)}
.masthead__top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 40px; padding-block:20px 20px}
.masthead__right{display:flex; flex-direction:column; align-items:flex-end; gap:14px; flex:1 1 380px}
.brand{display:flex; align-items:flex-end; gap:18px}
.brand__mark{width:clamp(44px,5.4vw,92px); height:clamp(44px,5.4vw,92px); margin-bottom:6px; color:var(--ground); stroke:currentColor; fill:none; stroke-width:3; stroke-linecap:square; stroke-linejoin:miter; flex:none}
.brand__name{font-family:var(--display); font-size:clamp(48px,6.6vw,108px); line-height:.8; letter-spacing:-0.015em; margin:0}
.masthead__strap{margin:0; max-width:44ch; color:var(--pale); font-size:16px; line-height:1.4; text-align:right; text-wrap:pretty}

.mastnav{padding-block:20px 20px; display:flex; flex-direction:column}
.mastnav__row{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; padding:11px 0; border-top:1px solid rgba(255,247,236,.28)}
.mastnav__row:last-of-type{border-bottom:1px solid rgba(255,247,236,.28)}
.mastnav__no{font-family:var(--display); font-size:19px; color:var(--flag); width:32px; flex:none}
.mastnav__title{display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-size:clamp(20px,2.1vw,29px); line-height:1; letter-spacing:-0.01em}
.mastnav__title .ico{color:var(--pale)}
.mastnav__title:hover .ico{color:var(--flag)}
.mastnav__subs{font-size:16px; color:var(--pale); font-weight:300}
.mastnav__subs a{color:var(--pale); border-bottom:1px solid rgba(235,216,242,.4)}
.mastnav__subs a:hover{color:var(--flag); border-color:var(--flag)}
.mastnav__all{margin-top:14px; align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:18px; border-bottom:2px solid var(--flag); padding-bottom:4px}

/* compact masthead (every page but the front) */
.masthead--compact .masthead__top{padding-block:20px 0}
.masthead--compact .brand__name{font-size:clamp(34px,4vw,52px)}
.masthead--compact .brand__mark{width:clamp(30px,3.4vw,46px); height:clamp(30px,3.4vw,46px); margin-bottom:4px; stroke-width:3.4}
.masthead--compact .masthead__strap{display:none}
.navrow{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:flex-end; align-items:center}
.masthead--compact .masthead__top{padding-block:16px 16px}
.masthead--compact .navrow{flex:1 1 420px}
.navrow a{display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-size:17px; line-height:1.1}
.navrow a .ico{color:var(--pale)}
.navrow a:hover .ico{color:var(--flag-bright)}
.navrow a:last-of-type{border-bottom:2px solid var(--pale)}

/* ── kickers, labels, links ────────────────────────────── */
.kicker{display:inline-flex; align-items:center; gap:9px; font-family:var(--display);
  font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.kicker--flag{color:var(--flag-ink)}
.kicker--pale{color:var(--pale)}
.kicker--pale a,
.band--ink .kicker a{color:inherit; border-bottom:1px solid rgba(235,216,242,.4)}
.kicker--pale a:hover,
.band--ink .kicker a:hover{color:var(--flag-bright); border-color:var(--flag-bright)}
.more{display:inline-flex; align-items:center; gap:12px; font-family:var(--display); font-size:18px;
  border-bottom:2px solid currentColor; padding-bottom:3px}
.more .ico{width:2.2em; height:.8em}
.meta{font-size:15px; color:var(--quiet-ink)}

/* ── homepage bands ────────────────────────────────────── */
.band{padding:clamp(52px,5.5vw,92px) 0}
.band--tight{padding:clamp(40px,4vw,64px) 0}
.band--ink{background:var(--ink); color:var(--ground)}
.band--accent{background:var(--chrome); color:var(--ground)}
.band--accent .stat-num{color:var(--ground); font-size:clamp(64px,8vw,138px)}
.band--accent .statblock:nth-child(even) .stat-num{color:var(--pale)}
.band--accent .stat-label{color:var(--pale); font-size:17px; max-width:30ch}
.band--accent .statblock{border-top-color:rgba(255,247,236,.55); border-top-width:4px}
.band--accent .statrow{gap:clamp(24px,3.4vw,52px)}
.band--accent a{color:var(--ground); border-bottom:1px solid rgba(255,247,236,.55)}
.band--accent a:hover{color:var(--ground); background:rgba(255,247,236,.18); border-color:var(--ground)}
.band--flag{background:var(--flag); color:var(--ink)}
.band--flag a{color:var(--ink)}
.rule-head{display:flex; align-items:center; gap:18px; margin-bottom:24px}
.rule-head__line{flex:1; height:1px; background:var(--rule)}

.lead-feature{display:flex; gap:clamp(14px,2vw,32px); align-items:stretch}
.lead-split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,4vw,60px); align-items:end}
.bracket{width:24px; flex:none; align-self:stretch; height:auto; color:var(--flag);
  stroke:currentColor; fill:none; stroke-width:5; stroke-linecap:round; vector-effect:non-scaling-stroke}
.lead-feature__title{font-size:clamp(38px,5.4vw,92px); line-height:.9; max-width:22ch; text-wrap:balance}
.lead-feature__dek{margin-top:clamp(22px,2.6vw,38px); max-width:48ch; font-size:clamp(19px,1.7vw,26px);
  font-weight:300; line-height:1.42; color:var(--ink-2); text-wrap:pretty}
.lead-feature__foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-top:26px}

.signature{display:flex; flex-wrap:wrap; gap:32px; align-items:flex-end; justify-content:space-between}
.signature__line{font-family:var(--display); font-size:clamp(28px,3.8vw,62px); line-height:1; max-width:26ch; text-wrap:balance}

/* statistics */
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(20px,3vw,44px)}
.statblock{display:flex; flex-direction:column; gap:8px; border-top:3px solid var(--ink); padding-top:18px}
.stat-num{font-family:var(--display); font-size:clamp(52px,6vw,92px); line-height:.82; color:var(--accent)}
.statblock:nth-child(even) .stat-num{color:var(--flag-ink)}
.stat-label{font-size:16px; line-height:1.42; color:var(--ink-2); max-width:34ch; text-wrap:pretty}

/* diptych + card runs */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px)}
.split--uneven{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.sect-block{display:flex; flex-direction:column; gap:16px}
.sect-block__title{font-size:clamp(26px,3vw,46px); line-height:.98; max-width:22ch; text-wrap:balance}
.sect-block__blurb{font-size:18px; font-weight:300; line-height:1.55; color:var(--ink-2); max-width:46ch; text-wrap:pretty}

.cat-list{list-style:none; display:flex; flex-direction:column}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; padding:16px 12px 16px 4px}
.cat-list a:hover{background:rgba(193,58,28,.07)}
.cat-list__title{font-family:var(--display); font-size:22px; line-height:1.1; color:var(--ink); flex:1 1 15ch; min-width:0}
.cat-list a:hover .cat-list__title{color:var(--accent)}
.cat-list__brief{flex:1 1 26ch; font-size:16px; font-weight:300; line-height:1.45; color:var(--ink-3); text-wrap:pretty}
.band--ink .cat-list li{border-color:rgba(255,247,236,.22)}
.band--ink .cat-list__title{color:var(--ground)}
.band--ink .cat-list__brief{color:var(--pale)}
.band--ink .cat-list a:hover{background:rgba(255,247,236,.06)}
.band--ink .cat-list a:hover .cat-list__title{color:var(--flag-bright)}

/* ── figure system: bleed · plate · inset · mat ─────────── */
figure{margin:0}
.fig-bleed img{width:100%; height:min(66vh,660px); object-fit:cover}
.fig-bleed figcaption{background:var(--ink); color:var(--ground)}
.fig-bleed figcaption > div{max-width:var(--wrap); margin:0 auto; padding:22px var(--pad);
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:32px; align-items:baseline}
.fig-cap{font-size:clamp(17px,1.35vw,20px); line-height:1.45; text-wrap:pretty}
.fig-credit{font-size:14px; line-height:1.4; color:var(--quiet-ink)}
.fig-bleed .fig-credit{color:var(--quiet-pale)}

.fig-plate{border:3px solid var(--ink); background:var(--ground)}
.fig-plate img{width:100%; aspect-ratio:16/10; object-fit:cover}
.fig-plate figcaption{border-top:3px solid var(--ink); padding:18px 20px; display:flex; flex-direction:column; gap:8px}
.fig-plate .fig-cap{font-size:17px}
.fig-plate--ink{background:var(--ink); border-color:var(--pale)}
.fig-plate--ink figcaption{border-top-color:var(--pale)}
.fig-plate--ink .fig-cap{color:var(--ground)}
.fig-plate--ink .fig-credit{color:var(--quiet-pale)}

.fig-inset{display:grid; grid-template-columns:14px minmax(0,1fr); gap:16px}
.fig-inset__bar{background:var(--flag)}
.fig-inset img{width:100%; aspect-ratio:4/3; object-fit:cover}
.fig-inset figcaption{padding-top:12px; display:flex; flex-direction:column; gap:7px; max-width:38ch}
.fig-inset .fig-cap{font-size:16px; line-height:1.45}

.fig-mat{background:var(--ink); padding:14px 14px 0}
.fig-mat img{width:100%; aspect-ratio:3/2; object-fit:cover; outline:1px solid rgba(255,247,236,.35); outline-offset:-1px}
.fig-mat figcaption{padding:14px 2px 16px; color:var(--ground); display:flex; flex-direction:column; gap:7px}
.fig-mat .fig-cap{font-size:16px}
.fig-mat .fig-cap,
.fig-bleed .fig-cap,
.fig-plate--ink .fig-cap{color:var(--ground)}
.fig-mat .fig-credit{color:var(--quiet-pale)}

/* styleguide-required alias */
.article-figure{border:3px solid var(--ink)}
.article-figure img{width:100%; aspect-ratio:16/10; object-fit:cover}
.article-figure figcaption{border-top:3px solid var(--ink); padding:16px 18px; font-size:17px; line-height:1.45}
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.gallery figure{border:3px solid var(--ink)}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover}
.gallery figcaption{border-top:3px solid var(--ink); padding:10px 12px; font-size:15px; line-height:1.4}
.map-figure{border:3px solid var(--ink)}
.map-figure .map-slot{aspect-ratio:4/3; background:var(--hatch)}
.map-figure figcaption{border-top:3px solid var(--ink); padding:14px 16px; font-size:16px}

/* ── article page ──────────────────────────────────────── */
.artcol{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding-block:22px 0; font-size:15px; color:var(--quiet-ink)}
.crumb a{color:var(--accent)}
.crumb .ico{width:1.15em; height:1.15em}

.art-head{padding-block:clamp(30px,3.4vw,52px) clamp(32px,3.4vw,48px)}
.art-head h1{font-size:clamp(38px,6.2vw,104px); line-height:.9; max-width:21ch; text-wrap:balance}
.art-head__deck{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); margin-top:clamp(22px,2.6vw,38px)}
.lead{font-size:clamp(19px,1.6vw,24px); font-weight:300; line-height:1.5; color:var(--ink-2); text-wrap:pretty}
.art-head__aside{display:flex; flex-direction:column; gap:10px; align-self:end}

.body{max-width:var(--measure); margin-inline:auto; padding-block:clamp(44px,4.5vw,72px) 0}
.body > .apparatus,
.body > .chart,
.body > .fig-plate,
.body > .fig-mat{width:min(126%,1160px,calc(100vw - 2 * var(--pad))); margin-left:calc((100% - min(126%,1160px,calc(100vw - 2 * var(--pad)))) / 2)}
.body > * + *{margin-top:24px}
.body p{font-size:19px; line-height:1.68; color:var(--ink-2)}
.body p strong{color:var(--ink); font-weight:700}
.body em{font-style:italic}
.body h2{font-size:clamp(26px,2.8vw,40px); line-height:1; margin-top:52px; color:var(--ink)}
.body h2::before{content:""; display:block; width:64px; height:4px; background:var(--accent); margin-bottom:18px}
.body a{border-bottom:1px solid rgba(193,58,28,.4)}
.body a:hover{border-color:var(--flag)}
.body > figure{margin-top:40px; margin-bottom:40px}
.body > .apparatus{margin-top:44px; margin-bottom:44px}
.body .fig-bleed{width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw)}
.body .fig-inset{width:min(118%,1000px,calc(100vw - 2 * var(--pad)))}

/* text components */
.pullquote{margin:44px 0; padding:6px 0 6px 28px; border-left:5px solid var(--flag)}
.pullquote p{font-family:var(--display); font-size:clamp(25px,2.7vw,40px); line-height:1.04; color:var(--ink)}
.blockquote{margin:36px 0; padding:26px 28px; background:var(--hatch); border-left:5px solid var(--accent)}
.blockquote p{font-size:19px; line-height:1.55; color:var(--ink)}
.blockquote cite{display:block; margin-top:12px; font-style:normal; font-size:15px; color:var(--quiet-ink)}
.callout{background:var(--chrome); color:var(--ground); padding:28px 30px}
.callout p{color:var(--ground); font-size:19px; line-height:1.5}
.note{font-size:16px; line-height:1.5; color:var(--ink-3); border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule); padding:18px 0}

/* apparatus: notes-for-design material lifted out of the prose */
.apparatus{border-top:3px solid var(--ink); background:var(--hatch); padding:2px 26px 14px}
.apparatus__head{display:flex; align-items:center; gap:10px; padding:18px 0 6px}
.apparatus__title{font-family:var(--display); font-size:20px; line-height:1.1; letter-spacing:.01em}
.register{list-style:none; display:flex; flex-direction:column}
.register li{display:grid; grid-template-columns:minmax(0,20ch) minmax(0,1fr); gap:8px 24px;
  padding:15px 0; border-top:1px solid var(--rule)}
.register__k,.t-when{overflow-wrap:anywhere}
.register__k{font-family:var(--display); font-size:17px; line-height:1.2; color:var(--accent)}
.register__v{font-size:16px; line-height:1.5; color:var(--ink-2); text-wrap:pretty}
.register li.solo{grid-template-columns:1fr}
.timeline{list-style:none; display:flex; flex-direction:column; border-left:3px solid var(--flag); padding-left:26px}
.timeline li{display:grid; grid-template-columns:minmax(0,17ch) minmax(0,1fr); gap:6px 24px; padding:16px 0}
.timeline li + li{border-top:1px solid var(--rule)}
.t-when{font-family:var(--display); font-size:18px; line-height:1.15; color:var(--flag-ink)}
.t-what{font-size:16px; line-height:1.5; color:var(--ink-2)}

/* tables */
.datatable,.versus{font-size:16px; margin:8px 0}
.datatable th,.versus th{text-align:left; font-family:var(--display); font-weight:400; font-size:14px;
  letter-spacing:.13em; text-transform:uppercase; padding:0 16px 10px 0; border-bottom:3px solid var(--ink)}
.datatable td,.versus td{padding:16px 20px 16px 0; border-bottom:1px solid var(--rule);
  color:var(--ink-2); font-weight:300; line-height:1.45; vertical-align:top}
.datatable td:first-child,.versus td:first-child{color:var(--ink); font-weight:600}
.versus td + td{border-left:1px solid var(--rule); padding-left:16px}
.table-scroll{overflow-x:auto}

/* charts */
.chart{border-top:3px solid var(--ink); padding-top:20px}
.chart svg{width:100%; height:auto; display:block; overflow:hidden}
.chart figcaption{margin-top:14px; font-size:15px; line-height:1.45; color:var(--ink-3); max-width:52ch; text-wrap:pretty}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar--flag{fill:var(--flag)}
.chart .c-label{font-family:var(--text); font-size:13px; fill:var(--ink-2)}
.chart .c-value{font-family:var(--display); font-size:15px; fill:var(--ink)}
.chart .c-axis{stroke:var(--rule); stroke-width:1}
.chart .c-line{fill:none; stroke:var(--flag); stroke-width:3}
.chart .c-dot{fill:var(--ink)}
.chart .c-ring{fill:none; stroke:var(--rule); stroke-width:16}
.chart .c-ring--on{stroke:var(--accent)}

/* related + reference cards */
.related-links{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2px}
.related-links li{background:var(--hatch)}
.related-links a{display:flex; flex-direction:column; gap:8px; height:100%; padding:24px}
.related-links a:hover{background:var(--accent); color:var(--ground)}
.related-links .rl-title{font-family:var(--display); font-size:21px; line-height:1.08; color:var(--ink)}
.related-links a:hover .rl-title,.related-links a:hover .rl-brief{color:var(--ground)}
.related-links .rl-brief{font-size:15px; font-weight:300; line-height:1.45; color:var(--ink-3); margin-top:auto}
.further-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2px}
.further-grid a{background:var(--hatch); padding:22px 24px; font-family:var(--display); font-size:20px; line-height:1.1; color:var(--ink)}
.further-grid a:hover{background:var(--accent); color:var(--ground)}
.entity-ref{border-bottom:1px solid rgba(193,58,28,.4)}
.profile-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px}
.profile-card{display:flex; flex-direction:column; gap:10px; border:3px solid var(--ink); padding:18px}
.profile-card .p-photo{width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:6px}
.profile-card h3{font-size:24px; line-height:1.05}
.profile-card .p-role{font-family:var(--display); font-size:14px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent)}
.profile-card p{font-size:16px; line-height:1.5; color:var(--ink-2)}
.profile-card .p-links{margin-top:auto; font-size:15px}
.profile-card .p-attr{font-size:13px; color:var(--quiet-ink)}
.org-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.org-card{display:flex; align-items:center; gap:14px; border:1px solid var(--rule); padding:14px 16px; background:var(--ground)}
.org-card:hover{border-color:var(--accent)}
.org-logo{width:52px; height:52px; object-fit:contain; flex:none}
.org-name{font-family:var(--display); font-size:19px; line-height:1.1; color:var(--ink)}
.org-host{font-size:14px; color:var(--quiet-ink)}

/* CSS-only expander for long lists */
.expander input{position:absolute; opacity:0; pointer-events:none}
.expander__extra{display:none}
.expander input:checked ~ .expander__extra{display:block}
.expander__label{display:inline-flex; align-items:center; gap:10px; margin-top:16px; cursor:pointer;
  font-family:var(--display); font-size:17px; color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:3px}
.expander input:checked ~ .expander__label .expander__more{display:none}
.expander__less{display:none}
.expander input:checked ~ .expander__label .expander__less{display:inline}

/* ── colophon (supporters) ─────────────────────────────── */
.colophon{background:var(--ink); color:var(--ground)}
.colophon__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 22px; padding-bottom:20px;
  border-bottom:1px solid rgba(255,247,236,.28)}
.colophon__head .kicker{color:var(--pale)}
.colophon__note{font-size:15px; color:var(--quiet-pale); max-width:52ch; line-height:1.45}
.sponsor-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; padding-top:26px; align-items:start}
.sponsor{display:flex; flex-direction:column; gap:10px; width:auto; padding:16px;
  background:var(--ink-lift); border:1px solid rgba(255,247,236,.16); color:var(--ground)}
.sponsor:hover{border-color:var(--flag)}
.sponsor img{width:100%; height:44px; max-height:44px; object-fit:contain; object-position:left center}
.sponsor-name{font-family:var(--display); font-size:17px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sponsor-blurb{font-size:14px; line-height:1.45; color:var(--pale)}

/* ── footer ────────────────────────────────────────────── */
.foot{background:var(--ink); color:var(--ground); border-top:1px solid rgba(255,247,236,.18)}
.foot a{color:var(--pale)}
.foot a:hover{color:var(--flag-bright)}
.foot__in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr); gap:clamp(28px,4vw,72px);
  padding-block:clamp(38px,4vw,64px)}
.foot__brand{display:flex; align-items:flex-end; gap:12px}
.foot__brand .brand__mark{width:40px; height:40px; margin-bottom:4px; stroke-width:3.4}
.foot__name{font-family:var(--display); font-size:46px; line-height:.8}
.foot__strap{margin-top:16px; max-width:34ch; font-size:16px; font-weight:300; line-height:1.5; color:var(--quiet-pale)}
.foot__links{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:26px clamp(24px,4vw,60px); font-size:16px}
.foot__group{display:flex; flex-direction:column; gap:11px}
.foot__group-h{font-family:var(--display); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--quiet-pale); padding-bottom:8px; border-bottom:1px solid rgba(255,247,236,.18)}
.foot__links a{display:inline-flex; align-items:center; gap:9px}

/* ── generic page (about/contact/404) ──────────────────── */
.page-head{padding-block:clamp(34px,4vw,64px) 0}
.page-head h1{font-size:clamp(38px,5.4vw,84px); line-height:.92; max-width:22ch; text-wrap:balance}
.prose{max-width:var(--measure); padding-block:clamp(28px,3vw,44px) clamp(52px,5vw,84px)}
.prose > * + *{margin-top:22px}
.prose p{font-size:19px; line-height:1.68; color:var(--ink-2)}
.prose h2{font-size:clamp(24px,2.4vw,34px); line-height:1.05; margin-top:44px}
.prose ul{list-style:none; display:flex; flex-direction:column; gap:10px}
.prose ul li{padding-left:22px; position:relative; font-size:18px; line-height:1.55; color:var(--ink-2)}
.prose ul li::before{content:""; position:absolute; left:0; top:.62em; width:11px; height:3px; background:var(--flag)}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1080px){
  .split,.split--uneven,.lead-split{grid-template-columns:minmax(0,1fr)}
  .art-head__deck{grid-template-columns:minmax(0,1fr)}
  .fig-bleed figcaption > div{grid-template-columns:minmax(0,1fr); gap:12px}
  .foot__in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .masthead__top{flex-direction:column; align-items:flex-start; gap:14px}
  .masthead__right{align-items:flex-start; flex:1 1 auto; width:100%; gap:12px}
  .masthead__strap{text-align:left; max-width:52ch}
  .navrow{justify-content:flex-start}
  .masthead--compact .masthead__top{gap:10px}
  .masthead--compact .navrow{flex:1 1 auto}
}
@media (max-width:760px){
  :root{--pad:20px}
  body{font-size:17px}
  .body p,.prose p{font-size:18px}
  .body{max-width:none}
  .body .fig-inset,
  .body > .apparatus,
  .body > .chart,
  .body > .fig-plate,
  .body > .fig-mat{width:100%; margin-left:0}
  .fig-bleed img{height:min(52vh,420px)}
  .mastnav__title{font-size:22px}
  .register li,.timeline li{grid-template-columns:minmax(0,1fr); gap:4px}
  .apparatus{padding-inline:18px}
  .register__k,.t-when{font-size:16px}
  .cat-list a{padding:13px 0}
  .cat-list__title{flex:1 1 100%}
  .cat-list__brief{flex:1 1 100%}
  .sponsor-grid{grid-template-columns:1fr}
  .sponsor{width:auto}
  .brand__mark{width:38px; height:38px; margin-bottom:4px}
  .fig-inset{grid-template-columns:10px minmax(0,1fr); gap:12px}
  .related-links{grid-template-columns:1fr}
  .further-grid{grid-template-columns:1fr}
  .navrow{gap:2px 22px}
  .navrow a{padding-block:13px}
  .foot__links a{padding-block:10px}
  .crumb a{padding-block:8px}
  .versus td + td{border-left:0; padding-left:0}
}

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

/* op-nav-collapse: this nav printed 161px of stacked links at 390 before any content
   (5 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 "filled-soft", bold, 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 (44px) 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 (940px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-gate{display:none}
@media (max-width:940px){
  .nav-gate{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;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:0;border-radius:2px;padding:12px 20px;background:color-mix(in srgb, currentColor 14%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-gate-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .navrow{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 ~ .navrow{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .masthead__right:has(> .nav-gate){display:flow-root}
  .nav-gate:not(:has(~ .navrow)){display:none}
}

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

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

/* op-name-wrap: at 320 the money tile truncated its brand name — "Brazzers Exxtra" — losing up to 5px to an
   ellipsis. The name is allowed to wrap instead of being cut: a brand that reads as half a word
   is worse than a brand on two lines. Structural only, phone widths only, desktop untouched. */
@media (max-width:360px){
  .sponsor-name{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip}
}

/* op-article-width: the article column was capped at 753px (84 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .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 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.body{--measure:min(82.204ch, 100%)!important}
}
@media (min-width:1600px){
  div.body{--measure:min(clamp(82.204ch, 63.194vw, calc(82.204ch * 1.2)), 100%)!important}
  div.body > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

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

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.fig-bleed > img,
  div.body > figure.fig-mat > img,
  div.body > figure.fig-plate > img,
  div.lead-split.wrap > figure.fig-plate > img,
  div.sect-block > figure.fig-plate > img,
  div.split.split--uneven.wrap > figure.fig-plate > img,
  div.split.split--uneven.wrap > figure.fig-plate.fig-plate--ink > img,
  figure.fig-inset > div > img){height:auto}
/* op-img-dims:end */
@media (min-width:941px) and (max-width:1019px){.fig-inset.fig-inset{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}}
@media (min-width:900px) and (max-width:1059px){.fig-inset.fig-inset{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}}
.sponsor-grid:has(> [data-partner]){align-items:stretch!important}.sponsor-grid > [data-partner]{height:auto!important;align-self:stretch!important}