/* volleycentral.com — Volley Central
   PALETTE (5 members, each with a job)
   --ground  #F4F1EA  bone paper ground
   --ink     #0B2C4C  court navy: body ink AND a full-area band ground (saturated, hue ~210)
   --accent  #D97A16  free-zone ochre: panels, plates, marks (saturated, hue ~33 — ~180 deg from the ink)
   --flag    #B25F09  the ochre darkened to clear text contrast on bone at 15-17px
   --mute    #7A8794  credits, quiet meta
   --panel   #E7E2D6  a second bone step for mats
*/
:root{
  --ground:#F4F1EA; --ink:#0B2C4C; --ink-soft:#2A3B4C; --accent:#D97A16;
  --flag:#B25F09; --mute:#7A8794; --panel:#E7E2D6; --line:rgba(11,44,76,.22);
  --measure:70ch; --pad:clamp(18px,4vw,44px);
  --f-display:'Chivo',system-ui,sans-serif; --f-mono:'Chivo Mono',ui-monospace,monospace;
  --f-mast:'Big Shoulders Display','Chivo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-display);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--flag);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--ink);text-decoration:underline}
::selection{background:var(--accent);color:var(--ink)}
h1,h2,h3,h4{font-weight:900;letter-spacing:-.03em;line-height:1.02;margin:0}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--ground);padding:8px 12px;z-index:50}

/* ---------- masthead: wordmark + drawn mark, then four unequal court zones ---------- */
.masthead{background:var(--ground);border-bottom:2px solid var(--ink)}
.mast-top{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:22px 0 16px}
.mast-name{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink)}
.mast-name:hover{text-decoration:none;color:var(--ink)}
.mast-name svg{width:64px;height:64px;flex:none}
.mast-name .wm{font-family:var(--f-mast);font-weight:800;font-size:clamp(38px,6vw,76px);line-height:.82;
  letter-spacing:.006em;text-transform:uppercase;display:block}
.mast-name .wm em{font-style:normal;color:var(--flag)}
.mast-strap{max-width:280px;font-size:14px;line-height:1.4;color:var(--ink-soft);text-align:right;margin:6px 0 0}
.zones{display:flex;flex-wrap:nowrap;gap:0;border-top:1px solid var(--line)}
.zone{position:relative;flex:1 1 0;min-width:0;padding:13px 20px 13px 0}
.zone-head{display:flex;align-items:center;gap:11px;min-width:0}
.zone-head svg{width:clamp(24px,2vw,30px);height:clamp(24px,2vw,30px);flex:none;color:var(--flag);transition:transform .14s}
.zone:hover .zone-head svg,.zone:focus-within .zone-head svg{transform:translateY(-1px)}
.zone-no{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--mute);display:block;margin-bottom:1px}
.zone a.zone-title{display:block;font-weight:900;font-size:clamp(13px,1.15vw,16px);line-height:1.14;letter-spacing:.004em;white-space:nowrap;
  color:var(--ink);text-transform:uppercase;text-wrap:balance}
.zone--lead a.zone-title{font-size:clamp(13px,1.15vw,16px)}
/* the second level: present in the HTML, revealed on hover or keyboard focus.
   The panel starts at the row's own bottom edge (top:100%) so there is no dead gap to cross. */
.zone ul{list-style:none;margin:0;padding:10px 0 0;position:absolute;left:0;top:100%;z-index:30;
  min-width:max(100%,270px);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .13s,transform .13s,visibility .13s}
.zone:hover ul,.zone:focus-within ul{opacity:1;visibility:visible;transform:none}
.zone ul::before{content:"";position:absolute;left:0;right:0;top:0;height:10px}
.zone li{display:block;background:var(--ground)}
.zone li:first-of-type{border-top:3px solid var(--accent)}
.zone li a{display:block;padding:9px 16px;font-size:13.5px;line-height:1.3;color:var(--ink-soft);
  border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.zone li a:hover{background:var(--panel);color:var(--ink);text-decoration:none}
.zone:last-child ul{left:auto;right:0}
.mast-tail{display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-top:1px solid var(--line);padding:9px 0}
.mast-tail a{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- homepage bands ---------- */
.net-rule{height:9px;background:var(--accent)}
.court{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto;border:2px solid var(--ink);margin:12px 0 0}
.court .cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;position:relative}
.court .cell.pad{padding:26px 28px}
.court .front{grid-column:1 / span 2;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.court .zone2{position:relative;min-height:200px;overflow:hidden}
.court .back{grid-column:1 / span 2;border-bottom:0;position:relative;min-height:44vh}
.court .zone1{border-bottom:0;border-right:0;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.court .cell:last-child{border-right:0}
.court img{width:100%;height:100%;object-fit:cover}
.court .tag{position:absolute;top:0;left:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px}
.court h1{font-size:clamp(28px,4.3vw,62px);line-height:.96;text-transform:uppercase;max-width:24ch;text-wrap:balance}
.court .zoneline{display:flex;gap:26px;color:var(--mute)}

.band{padding:clamp(46px,6vw,84px) 0}
.band--ink{background:var(--ink);color:var(--ground)}
.band--ink a{color:var(--accent)}
.band--ink a:hover{color:var(--ground)}
.band--tight{padding:clamp(30px,3.4vw,48px) 0}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--flag);margin:0 0 12px}
.band--ink .kicker{color:var(--accent)}
.signature{font-size:clamp(30px,5.6vw,86px);line-height:.94;text-transform:uppercase;letter-spacing:-.045em;max-width:26ch;text-wrap:balance}
.sig-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.sig-row p{font-size:19px;line-height:1.55;max-width:56ch}
.court-diagram{width:100%;height:auto;color:var(--ground)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:start}
.split--wide{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.numerals{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.numerals b{display:block;font-size:clamp(56px,8vw,128px);line-height:.8;letter-spacing:-.05em}
.numerals .n1 b{color:var(--accent)}
.numerals span{font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:8px}

.sections-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;background:transparent}
.section-card{background:var(--ground);border:1px solid var(--line);padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.section-card svg{width:34px;height:34px;color:var(--flag)}
.section-card h3{font-size:22px;text-transform:uppercase;line-height:1.06}
.section-card p{margin:0;font-size:16px;color:var(--ink-soft)}
.section-card .go{margin-top:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(18px,2vw,26px)}
.trio article{display:flex;flex-direction:column;min-width:0}
.trio article h3{font-size:21px;line-height:1.08;text-transform:uppercase;margin:10px 0 8px}
.trio article p{margin:0 0 12px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.band--ink .trio article p{color:rgba(244,241,234,.8)}
.trio article .go{margin-top:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- figure system: one drawing language, four treatments ---------- */
figure{margin:0}
figcaption .cap{display:block;font-size:16px;line-height:1.45;max-width:62ch}
figcaption .cap-kicker{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--flag);margin-bottom:6px}
figcaption .credit{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--mute);margin-top:7px;max-width:60ch}
.band--ink figcaption .cap-kicker{color:var(--accent)}
.band--ink figcaption .credit{color:rgba(244,241,234,.5)}

.fig-plate{background:var(--ink);padding:10px}
.fig-plate img{aspect-ratio:16/10;object-fit:cover;width:100%}
.fig-plate figcaption{padding:12px 4px 4px;color:var(--ground)}
.fig-plate figcaption .cap-kicker{color:var(--accent)}
.fig-plate figcaption .credit{color:rgba(244,241,234,.5)}

.fig-frame{border:2px solid var(--ink);padding:10px;background:var(--ground)}
.fig-frame img{aspect-ratio:16/10;object-fit:cover;width:100%}
.fig-frame figcaption{padding:12px 2px 2px;border-top:2px solid var(--accent);margin-top:10px}

.fig-bleed{position:relative;margin:0}
.fig-bleed img{width:100%;height:clamp(280px,52vh,600px);object-fit:cover}
.fig-bleed figcaption{background:var(--ground);border-left:6px solid var(--accent);
  padding:16px 20px;max-width:min(58ch,calc(100% - var(--pad) * 2));
  margin:-52px auto 0;position:relative}

.fig-inset{float:right;width:min(330px,44%);margin:8px 0 26px 32px;background:var(--ink);padding:10px}
.fig-inset img{aspect-ratio:4/3;object-fit:cover;width:100%}
.fig-inset figcaption{padding:12px 4px 4px}
.fig-inset figcaption .cap{font-size:14.5px;line-height:1.42;color:var(--ground)}
.fig-inset figcaption .cap-kicker{color:var(--accent)}
.fig-inset figcaption .credit{color:rgba(244,241,234,.55)}
.article-figure{border:2px solid var(--ink);padding:10px;background:var(--ground)}
.article-figure img{aspect-ratio:16/10;object-fit:cover;width:100%}
.article-figure figcaption{padding-top:12px;border-top:2px solid var(--accent);margin-top:10px;font-size:16px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.gallery figure{background:var(--ink);padding:8px}
.gallery img{aspect-ratio:3/2;object-fit:cover;width:100%}
.gallery figcaption{color:var(--ground);font-size:13.5px;line-height:1.4;padding:9px 2px 2px}

/* ---------- reading page ---------- */
.article-head{padding-top:clamp(26px,3vw,42px);padding-bottom:0}
.article-kick{display:flex;align-items:center;gap:10px;margin:0 0 20px}
.article-kick svg{width:26px;height:26px;color:var(--flag)}
.article-kick a{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.article-head{max-width:var(--measure);margin:0 auto}
.article-head h1{font-size:clamp(30px,4.6vw,60px);line-height:1;text-transform:uppercase;max-width:24ch;text-wrap:balance}
.prose{max-width:var(--measure);margin:0 auto;padding:0 var(--pad)}
.prose::after{content:"";display:block;clear:both}
.prose p{font-size:18.5px;line-height:1.72;margin:0 0 26px;text-wrap:pretty}
.prose h2{clear:both;font-size:clamp(22px,2.6vw,32px);text-transform:uppercase;margin:clamp(46px,5vw,66px) 0 20px;
  padding-top:18px;border-top:2px solid var(--ink)}
.prose h3{font-size:21px;text-transform:uppercase;margin:32px 0 12px}
.lead{font-size:clamp(20px,2.2vw,26px)!important;line-height:1.44!important;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 clamp(30px,3.4vw,44px)!important;text-wrap:pretty}
.note{font-family:var(--f-mono);font-size:14px!important;line-height:1.6!important;color:var(--ink-soft);
  border-left:3px solid var(--accent);padding-left:16px}
.pullquote{margin:34px 0;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);padding:22px 0}
.pullquote p{font-size:clamp(22px,3vw,32px)!important;line-height:1.16!important;font-weight:900;
  letter-spacing:-.03em;text-transform:uppercase;margin:0!important;text-wrap:balance}
.blockquote{margin:30px 0;background:var(--panel);padding:22px 24px}
.blockquote p{margin:0 0 10px!important;font-size:19px!important;line-height:1.5!important}
.blockquote cite{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--flag);font-style:normal}
.callout{background:var(--ink);color:var(--ground);padding:24px 26px;margin:32px 0}
.callout p{margin:0!important;font-size:19px!important;line-height:1.5!important}
.callout .kicker{color:var(--accent)}

/* full-bleed interruptions: the Notes-for-Design material, out of the measure */
.plate{clear:both;background:var(--panel);margin:clamp(52px,6vw,80px) 0;padding:clamp(30px,3.6vw,48px) 0;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.plate--ink{background:var(--ink);color:var(--ground);border-color:var(--accent)}
.plate--accent{background:var(--panel);color:var(--ink);
  border-top:6px solid var(--accent);border-bottom:6px solid var(--accent)}
.plate h2,.plate h3{font-size:clamp(20px,2.4vw,30px);text-transform:uppercase;margin:0 0 24px;max-width:34ch}
.plate--ink .kicker{color:var(--accent)}
.datatable{width:100%;border-collapse:collapse;font-size:16.5px}
.datatable th,.datatable td{text-align:left;vertical-align:top;padding:12px 18px 12px 0;border-top:1px solid var(--line)}
.plate--ink .datatable th,.plate--ink .datatable td{border-color:rgba(244,241,234,.28)}
.plate--accent .datatable th,.plate--accent .datatable td{border-color:rgba(11,44,76,.28)}
.datatable th{width:34%;font-weight:900;text-transform:uppercase;font-size:14px;letter-spacing:.01em}
.datatable tr:first-child th,.datatable tr:first-child td{border-top:0}
.versus{width:100%;border-collapse:collapse;font-size:16.5px}
.versus th,.versus td{text-align:left;vertical-align:top;padding:11px 16px 11px 0;border-top:1px solid var(--line)}
.plate--accent .versus th,.plate--accent .versus td{border-color:rgba(11,44,76,.28)}
.versus thead th{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-top:0}
.versus tbody th{font-weight:900;font-size:14.5px;text-transform:uppercase;width:26%}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.statblock{background:var(--ink);color:var(--ground);padding:20px 20px 22px;min-width:0}
.plate--accent .statblock{background:var(--ink)}
.stat-num{display:block;font-size:clamp(34px,4.6vw,58px);line-height:.86;letter-spacing:-.04em;color:var(--accent)}
.stat-label{display:block;margin-top:12px;font-size:15px;line-height:1.4;color:rgba(244,241,234,.86)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:minmax(140px,26%) minmax(0,1fr);gap:20px;
  padding:14px 0;border-top:1px solid var(--line);align-items:baseline}
.plate--ink .timeline li{border-color:rgba(244,241,234,.28)}
.plate--accent .timeline li{border-color:rgba(11,44,76,.28)}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--flag)}
.plate--ink .t-when{color:var(--accent)}
.plate--accent .t-when{color:var(--ink)}
.t-what{font-size:16.5px;line-height:1.5}
.chart{margin:0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:12px;font-size:15px;color:var(--ink-soft)}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;background:transparent}
.profile-card{background:var(--ground);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.profile-card .p-photo{aspect-ratio:1;object-fit:cover;width:74px;border-radius:0}
.profile-card h3{font-size:19px;text-transform:uppercase}
.profile-card .p-role{margin:0;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--flag)}
.profile-card p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.profile-card .p-links{margin-top:auto;font-family:var(--f-mono);font-size:12px}
.profile-card .p-attr{font-size:11px;color:var(--mute)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.org-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;
  border:2px solid var(--ink);padding:12px 14px;background:var(--ground);text-decoration:none}
.org-card:hover{background:var(--panel);text-decoration:none}
.org-card svg,.org-card .org-logo{width:34px;height:34px;color:var(--flag)}
.org-name{display:block;font-weight:900;font-size:16px;text-transform:uppercase;color:var(--ink);letter-spacing:-.01em}
.org-host{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--mute)}
.entity-ref{font-weight:700;border-bottom:1px solid var(--accent)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;background:transparent}
.further-grid a{background:var(--ground);border:1px solid var(--line);padding:18px;font-weight:900;font-size:17px;line-height:1.15;
  text-transform:uppercase;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:flex-start;min-height:96px}
.further-grid a:hover{background:var(--accent);text-decoration:none}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;background:transparent}
.related-links li{background:var(--ground);border:1px solid var(--line)}
.related-links li a{display:flex;flex-direction:column;gap:6px;padding:18px;min-height:104px;color:var(--ink)}
.related-links li a:hover{background:var(--panel);text-decoration:none}
.related-links .rl-sec{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--flag)}
.related-links .rl-title{font-weight:900;font-size:17px;line-height:1.15;text-transform:uppercase;letter-spacing:-.02em}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--line)}
.cat-list li:last-child{border-bottom:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;padding:20px 0;align-items:baseline;color:var(--ink)}
.cat-list a:hover{text-decoration:none;color:var(--flag)}
.cat-list .cl-title{font-weight:900;font-size:clamp(19px,2.1vw,25px);line-height:1.08;text-transform:uppercase;letter-spacing:-.025em}
.cat-list .cl-brief{font-size:16px;line-height:1.5;color:var(--ink-soft)}

/* ---------- supporters: two woven blocks of six, identical self-contained tiles ---------- */
.supporters{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:26px 0 30px}
.sup-head{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.sup-head h2{font-size:clamp(18px,2vw,24px);text-transform:uppercase}
.sup-head p{margin:0;font-size:15px;color:var(--ink-soft);max-width:52ch}
.sponsor-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.sponsor{width:auto;display:flex;flex-direction:column;gap:9px;
  border:1px solid var(--line);padding:8px;background:var(--ground);text-decoration:none;color:var(--ink)}
.sponsor:hover{border-color:var(--ink);text-decoration:none}
.sponsor.feat{border-top:4px solid var(--accent)}
.sponsor img{width:100%;height:48px;max-height:48px;object-fit:contain;background:var(--ink);padding:6px 8px}
.sponsor-name{display:block;font-weight:900;font-size:12.5px;text-transform:uppercase;letter-spacing:-.005em;line-height:1.2;min-height:2.4em;overflow-wrap:break-word}
.sponsor-blurb{display:block;font-size:12.5px;line-height:1.42;color:var(--ink-soft);min-height:3.9em}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--ground);margin-top:0;padding:40px 0 46px}
.foot a{color:var(--accent)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(0,.7fr);gap:34px}
.foot h2{font-size:26px;text-transform:uppercase;margin-bottom:10px}
.foot p{margin:0;font-size:15px;line-height:1.5;color:rgba(244,241,234,.78);max-width:44ch}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.foot li a{font-family:var(--f-mono);font-size:12.5px}
.foot-mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,234,.5);margin-top:30px}

/* ---------- narrow screens ---------- */
@media (max-width:1160px){
  .zones{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .zone:nth-child(3),.zone:nth-child(4){border-top:1px solid var(--line);padding-top:12px}
  .zone:nth-child(3){padding-left:0}
}
@media (max-width:1100px){
  .foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .court{grid-template-columns:minmax(0,1fr)}
  .court .front,.court .back{grid-column:1}
  .court .cell{border-right:0}
  .court .back{min-height:52vw}
  .sig-row,.split,.split--wide{grid-template-columns:minmax(0,1fr)}
  .fig-inset{float:none;width:100%;margin:0 0 24px}
  .fig-bleed figcaption{margin-left:var(--pad);margin-right:var(--pad);max-width:calc(100% - var(--pad) * 2)}
  .cat-list a{grid-template-columns:minmax(0,1fr);gap:8px}
  .versus th,.versus td{padding-right:10px;font-size:15px}
}
@media (max-width:760px){
  .zone{flex:1 1 100%;padding:12px 0;border-top:1px solid var(--line)}
  .zone:first-child{border-top:0}
  .mast-top{flex-direction:column;gap:14px}
  .mast-strap{text-align:left;max-width:none}
  .mast-tail{flex-direction:column;align-items:flex-start;gap:6px}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
  .statrow{grid-template-columns:minmax(0,1fr)}
  .versus{display:block;overflow-x:auto}
  .gallery--dense{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .foot-top{grid-template-columns:minmax(0,1fr)}
}
@media print{.masthead,.foot,.supporters{break-inside:avoid}}

.gallery figcaption .credit{color:rgba(244,241,234,.45);font-size:10px}
.gallery a:hover figcaption{color:var(--accent);text-decoration:none}

.trio article{padding-top:14px;border-top:2px solid var(--accent)}
.trio-no{display:flex;align-items:baseline;gap:14px;margin:0 0 16px;
  font-weight:900;font-size:clamp(34px,3.4vw,46px);line-height:.8;letter-spacing:-.04em;color:var(--accent)}
.trio-no span{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,241,234,.62);line-height:1.3}
.trio article .go a{border-bottom:2px solid var(--accent);padding-bottom:3px;color:var(--ground)}
.trio article .go a:hover{color:var(--accent);text-decoration:none}
.trio article:hover{border-top-color:var(--ground)}
@media (max-width:900px){.trio-no{font-size:34px}}

.gallery-note{margin:14px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--mute)}
/* the beach band: the one full-bleed plate on the page */
.band-beach{position:relative;margin:clamp(40px,5vw,72px) 0 0;background:var(--ink)}
.beach-media{position:relative}
.beach-media img{width:100%;height:clamp(340px,54vh,560px);object-fit:cover}
.beach-tape{position:absolute;left:0;right:0;top:0;height:9px;background:var(--accent)}
.band-beach .wrap{position:relative}
.beach-plate{background:var(--ground);border-left:9px solid var(--accent);padding:clamp(22px,2.6vw,34px);
  max-width:min(640px,92%);margin:clamp(-160px,-14vw,-90px) 0 clamp(34px,4vw,56px)}
.beach-plate h2{font-size:clamp(26px,3.6vw,50px);text-transform:uppercase;max-width:20ch;text-wrap:balance}
.beach-dek{margin:14px 0 0;font-size:18px;line-height:1.5;color:var(--ink-soft);max-width:48ch}
.beach-versus{margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line)}
.beach-versus>div{background:var(--ground);padding:12px 14px}
.beach-versus dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.beach-versus dd{margin:7px 0 0;font-size:16px;line-height:1.3;color:var(--ink)}
.beach-versus b{font-weight:900;font-size:22px;letter-spacing:-.02em}
.beach-versus span{color:var(--accent);margin:0 3px}
.beach-go{margin:22px 0 0}
.beach-go a{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:3px}
.beach-credit{margin:16px 0 0;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--mute)}
/* footer */
.foot-brand h2{font-size:26px;text-transform:uppercase;margin-bottom:10px}
.foot-nav,.foot-meta{display:flex;flex-direction:column;gap:9px}
.foot-nav a{font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.15;color:var(--ground)}
.foot-nav a:hover{color:var(--accent);text-decoration:none}
.foot-meta a{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em}
@media (max-width:900px){
  .foot-top{grid-template-columns:minmax(0,1fr)!important}
  .beach-plate{max-width:100%;margin-top:-40px}
}

.beach-versus dd{font-size:15px;line-height:1.5}
.beach-versus dd b{display:inline-block;min-width:1.6em}
.beach-plate{margin-top:clamp(-130px,-11vw,-70px)}
.trio article .fig-plate figcaption{padding-bottom:2px}

@media (hover:none){
  .zone ul{position:static;opacity:1;visibility:visible;transform:none;padding:8px 0 0;min-width:0}
  .zone li:first-of-type{border-top:0}
  .zone li a{border:0;padding:5px 0;font-size:12.5px;color:var(--mute)}
}
@media (max-width:760px){
  .zone ul{position:static;opacity:1;visibility:visible;transform:none;padding:8px 0 0;min-width:0}
  .zone li:first-of-type{border-top:0}
  .zone li a{border:0;padding:5px 0;font-size:12.5px;color:var(--mute)}
}

@media (max-width:1200px){.sponsor-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.sponsor-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sponsor-row{grid-template-columns:minmax(0,1fr)}}

/* image-led run: the pictures carry the band, the words sit on them as chips */
.gallery--dense{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:3px}
.gallery--bleed{margin-inline:calc(var(--pad) * -1)}
.gallery--dense figure{position:relative;background:var(--ink);padding:0;overflow:hidden}
.gallery--dense figure>a{display:block;height:100%}
.gallery--dense img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gallery--dense figure:hover img{transform:scale(1.03)}
.gallery--dense figcaption{position:absolute;left:0;bottom:0;max-width:92%;
  background:var(--ground);color:var(--ink);font-family:var(--f-mono);font-size:11px;
  letter-spacing:.02em;line-height:1.35;padding:7px 11px}
.gallery--dense figure:hover figcaption{background:var(--accent)}
.gallery--dense figure:first-child{grid-column:span 2;grid-row:span 2}
.gallery--dense figure:first-child img{aspect-ratio:auto;min-height:100%}
.gallery--dense figure:first-child figcaption{font-size:13px;padding:10px 14px;max-width:80%}
.gallery-note{margin:12px var(--pad) 0}
@media (max-width:1000px){
  .gallery--dense figure:first-child{grid-column:auto;grid-row:auto}
  .gallery--dense figure:first-child img{aspect-ratio:4/3}
}
@media (max-width:620px){
  .gallery--dense{grid-template-columns:minmax(0,1fr)}
}

/* below tablet the row would crush, so it stacks and the second level stays open */
@media (max-width:820px){
  .zones{flex-wrap:wrap}
  .zone{flex:1 1 100%;padding:12px 0;border-top:1px solid var(--line)}
  .zone:first-child{border-top:0}
  .zone a.zone-title{font-size:15px;white-space:normal}
  .zone ul{position:static;opacity:1;visibility:visible;transform:none;padding:8px 0 0;min-width:0}
  .zone li:first-of-type{border-top:0}
  .zone li a{border:0;padding:5px 0;font-size:12.5px;color:var(--mute)}
}

.foot-brand h2{font-family:var(--f-mast);font-weight:800;font-size:38px;letter-spacing:.006em}
/* icon-centred nav: mark over the label, even columns, even padding */
.zone{padding:16px 14px 16px;text-align:center}
.zone+.zone{border-left:1px solid var(--line)}
.zone-head{flex-direction:column;align-items:center;gap:7px}
.zone-head>div{min-width:0}
.zone-no{margin-bottom:3px}
.zone a.zone-title{white-space:nowrap}
.zone ul{left:50%;right:auto;transform:translate(-50%,-4px);text-align:left}
.zone:hover ul,.zone:focus-within ul{transform:translate(-50%,0)}
.zone:last-child ul{left:auto;right:0;transform:translateY(-4px)}
.zone:last-child:hover ul,.zone:last-child:focus-within ul{transform:none}
@media (max-width:820px){
  .zone{text-align:left;padding:12px 0}
  .zone+.zone{border-left:0}
  .zone-head{flex-direction:row;align-items:center;gap:11px}
  .zone ul{left:auto;right:auto;transform:none;text-align:left}
}

/* --- article page polish: the joins between prose, plates and figures --- */
.plate>.wrap{max-width:calc(var(--measure) + 14rem);padding-inline:var(--pad)}
.plate--ink+.prose,.plate--accent+.prose,.plate+.prose{padding-top:6px}
.prose>.fig-frame,.prose>.article-figure,.prose>.fig-plate{margin:clamp(34px,4vw,48px) 0}
.prose>.callout{margin:clamp(34px,4vw,48px) 0}
.prose>.pullquote{margin:clamp(40px,4.6vw,60px) 0}
.prose>p:last-child{margin-bottom:0}
.article-head+.prose .lead{margin-top:0!important}
.fig-bleed{margin-bottom:clamp(30px,4vw,52px)}
.article-kick a{line-height:1.2}
/* the read-next band, given room to separate from whatever ends the article */
.related-links{margin-top:6px}
main>section.band--tight:last-of-type{padding-top:clamp(34px,4vw,54px);padding-bottom:clamp(40px,5vw,68px);
  border-top:1px solid var(--line)}
/* section pages inherit the same head treatment, so keep their intro on the same axis */
.article-head+ .prose{padding-top:0}
@media (max-width:760px){
  .plate>.wrap{padding-inline:var(--pad)}
  .fig-bleed figcaption{margin-top:-30px}
}

.fig-bleed{margin-top:clamp(8px,1.6vw,20px)}

.timeline li.t-solo{grid-template-columns:minmax(0,1fr)}
.timeline li.t-solo .t-what{font-weight:700}
.datatable tr.d-solo td{font-weight:900;text-transform:uppercase;font-size:14px}

/* --- reference plates reformatted as label/value registers --- */
.plate .kicker{margin-bottom:12px}
.plate .datatable th,.plate .datatable td,.plate .timeline li{padding-top:17px;padding-bottom:17px}
.plate .datatable th,.plate .timeline .t-when{font-family:var(--f-mono);font-weight:400;
  font-size:12px;letter-spacing:.1em;line-height:1.55;padding-right:clamp(24px,4vw,64px)}
.plate .datatable th{width:30%}
.plate .datatable td,.plate .timeline .t-what{font-size:clamp(16px,1.5vw,18.5px);line-height:1.55}
.plate .timeline li{grid-template-columns:minmax(150px,28%) minmax(0,1fr);gap:clamp(20px,4vw,56px)}
.plate--ink .datatable th{color:var(--accent)}
.plate--ink .datatable th,.plate--ink .datatable td,.plate--ink .timeline li{border-color:rgba(217,122,22,.32)}
/* the accent plate: bone ground held by two heavy ochre rules, no ink-on-orange field */
.plate--accent .kicker,.plate--accent .datatable th,.plate--accent .t-when{color:var(--flag)}
.plate--accent .datatable th,.plate--accent .datatable td,.plate--accent .timeline li{border-color:rgba(11,44,76,.14)}
.plate--ink+.plate--accent{margin-top:0}

/* long label cells read badly in mono caps — sans, bold, no tracking */
.plate .datatable th{font-family:var(--f-display);font-weight:700;font-size:15.5px;
  letter-spacing:0;text-transform:none;line-height:1.42}
.plate .timeline li.t-solo{grid-template-columns:minmax(0,1fr)}
.plate .timeline li.t-solo .t-what{font-weight:700;max-width:60ch}
.plate .datatable tr.d-solo td{font-family:var(--f-display);font-weight:700;font-size:17px;
  letter-spacing:0;text-transform:none}

/* --- register tables: the rule reads first, its verdict sits as a tag --- */
.plate table.reg{counter-reset:reg}
.plate .reg tr{counter-increment:reg}
.plate .reg th{width:auto;font-family:var(--f-display);font-weight:700;
  font-size:clamp(16.5px,1.6vw,19px);line-height:1.36;letter-spacing:-.005em;
  padding:20px 28px 20px 48px;position:relative;color:inherit;max-width:46ch}
.plate .reg th::before{content:counter(reg,decimal-leading-zero);position:absolute;left:0;top:24px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em}
.plate--ink .reg th::before{color:rgba(217,122,22,.85)}
.plate--accent .reg th::before{color:rgba(11,44,76,.45)}
.plate .reg td{padding:20px 0;vertical-align:middle}
.plate .reg td.v--tag{width:1%;white-space:nowrap;text-align:right}
.plate .reg td.v--tag .tag{display:inline-block;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 11px 6px;line-height:1}
.plate--ink .reg td.v--tag .tag{color:var(--accent);border:1px solid rgba(217,122,22,.5)}
.plate--accent .reg td.v--tag .tag{color:var(--flag);border:1px solid rgba(11,44,76,.28)}
.plate .reg td.v--long{width:42%;font-size:clamp(15.5px,1.4vw,17px);line-height:1.55;
  padding-left:clamp(20px,3vw,44px);vertical-align:baseline}
.plate--ink .reg td.v--long{color:rgba(244,241,234,.84)}
.plate .reg tr:first-child th,.plate .reg tr:first-child td{border-top:0;padding-top:4px}
.plate .reg tr:first-child th::before{top:8px}

/* --- mobile: reachable hit areas and stacked register rows --- */
@media (max-width:700px){
  .plate .reg tr{display:grid;grid-template-columns:minmax(0,1fr)}
  .plate .reg th{display:block;padding:16px 0 8px 40px;border-bottom:0}
  .plate .reg td{display:block;padding:0 0 18px 40px;text-align:left!important;width:auto!important;
    white-space:normal!important}
  .plate .reg td.v--long{padding-left:40px}
  .plate .reg th::before{top:19px}
  .plate .reg tr+tr th{border-top:1px solid rgba(217,122,22,.32)}
  .plate--accent .reg tr+tr th{border-top-color:rgba(11,44,76,.14)}
  .plate .reg tr td{border-top:0}
  .zones a,.mast-tail a,.foot a,.cat-list a,.related-links a{min-height:44px;display:flex;
    align-items:center}
  .zone ul li a{padding:11px 0}
  .foot-links a{padding:9px 0}
  .related-links a{display:grid;align-content:center}
}

@media (max-width:700px){
  /* four cramped 90px nav columns become a 2x2 board */
  .zones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zone{border-right:1px solid var(--line)}
  .zone:nth-child(2n){border-right:0}
  .zone:nth-child(n+3){border-top:1px solid var(--line)}
  /* standalone call-to-action links get a real hit area */
  .go a,.beach-go a,p>a.mono{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:430px){
  .zones{grid-template-columns:minmax(0,1fr)}
  .zone{border-right:0}
  .zone+.zone{border-top:1px solid var(--line)}
  .zone-head{justify-content:flex-start;text-align:left}
}

/* the whole 15-link index open on a phone made a 1400px masthead — on small screens
   the four section links carry the nav and the archive holds the full list */
@media (max-width:820px){
  .zone ul{display:none}
  .zone{padding:0;border-top:1px solid var(--line)}
  .zone-head{padding:12px 0;gap:12px}
  .zone a.zone-title{font-size:16px}
  .zones{flex-direction:column}
  .zone+.zone{border-left:0}
}

/* four stacked 88px rows still cost 350px of masthead — a 2x2 board of icon+label
   keeps the same hit areas in a quarter of the height */
@media (max-width:820px){
  .zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex-direction:unset}
  .zone{border-top:1px solid var(--line);padding:0}
  .zone:nth-child(2n){border-left:1px solid var(--line)}
  .zone-head{flex-direction:row;align-items:center;gap:10px;padding:11px 12px;min-height:56px}
  .zone-head>div{text-align:left}
  .zone-head svg{width:22px;height:22px}
  .zone a.zone-title{font-size:14px;white-space:normal;min-height:0}
  .zone-no{font-size:9.5px;margin-bottom:1px}
}
@media (max-width:430px){
  .zone a.zone-title{font-size:13px}
  .zone-head{padding:10px 8px;gap:8px}
}

@media (max-width:560px){
  .mast-strap{display:none}
  .mast-top{gap:8px;padding:14px 0 10px}
  .mast-name svg{width:34px;height:34px}
  .mast-tail{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;padding:4px 0}
  .mast-tail a{min-height:40px}
}

@media (max-width:820px){
  /* the whole cell is the target, not just the 20px of label */
  .zone-head a.zone-title::after{content:"";position:absolute;inset:0}
}

/* a right-floated inset must not have a block figure flow underneath it */
.prose>figure:not(.fig-inset),.prose>.fig-frame,.prose>.article-figure,.prose>.fig-plate,
.prose>blockquote,.prose>h2,.plate{clear:both}

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

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

/* sp-mark-pad: the mark keeps the height Design declared AND the inset Design drew.
   border-box stops width:100%+padding overflowing the tile; the box grows by the
   vertical padding and border so the artwork is not shrunk to pay for the inset. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;height:60px!important;max-height:60px!important}

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

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

/* sp-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-money-columns: the supporters block ran one tile per row — 12 tiles,
   2182px at 390, 16% of the whole page. Two columns bring it to
   1128px (48% shorter). Checked before writing: no new overflow, smallest mark still
   149px wide, longest blurb 3 lines, tile heights 180-183px.
   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. Only the tier(s) that were one-per-row are touched (.sponsor-row), 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-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}
  .sponsor-row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 687px (79 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose) 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){
  main#main div.prose{--measure:min(88.437ch, 100%)!important}
}
@media (min-width:1600px){
  main#main div.prose{--measure:min(clamp(88.437ch, 67.986vw, calc(88.437ch * 1.2)), 100%)!important}
  main#main div.prose > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (687px) and was left behind when the text went to 891px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again through Design's own measure --measure. */
@media (min-width:1024px){
  div.wrap.article-head{--measure:min(88.437ch, 100%)!important}
}
@media (min-width:1600px){
  div.wrap.article-head{--measure:min(clamp(88.437ch, 67.986vw, calc(88.437ch * 1.2)), 100%)!important}
}
/* op-article-head:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.fig-plate > img,
  div.court > div.back.cell > img,
  div.court > div.cell.zone2 > img,
  div.prose > figure.fig-frame > img,
  div.prose > figure.fig-inset > img,
  div.split.split--wide > figure.fig-frame > img,
  figure > a > img,
  main > figure.fig-bleed > img,
  section.band-beach > div.beach-media > img){height:auto}
/* op-img-dims:end */