/* ProTibet — Direction A "Plateau"
   ground / ink / accent / secondary / gold */
:root{
  --ground:#F4EFE6;
  --paper:#FCF9F2;
  --ink:#1A1512;
  --accent:#8E1E20;      /* crimson-madder: kickers, panels, section marks */
  --secondary:#17324E;   /* indigo: bands, panels, links */
  --gold:#D9931F;        /* on dark grounds only */
  --mute:#6B6152;
  --rule:#DCD3C4;
  --tint:#E9E2D5;
  --display:'Oswald',"Helvetica Neue",sans-serif;
  --text:'Crimson Pro',Georgia,serif;
  --measure:69ch;
  --pad:clamp(18px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--text);font-size:19px;line-height:1.55;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--secondary);text-decoration:none;border-bottom:1px solid rgba(23,50,78,.3)}
a:hover{color:var(--accent);border-bottom-color:rgba(142,30,32,.55)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.005em;margin:0}
p{margin:0 0 1em;text-wrap:pretty}
figure{margin:0}
table{border-collapse:collapse}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--ground);padding:8px 12px;z-index:9}
.wrap{max-width:1220px;margin:0 auto;padding-inline:var(--pad)}
.kicker{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--accent);display:flex;align-items:center;gap:9px}
.kicker svg{flex:none}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--mute)}
.batter{color:var(--accent);flex:none}

/* ---------- masthead + index-line nav ---------- */
.mast{border-bottom:2px solid var(--ink);background:var(--ground)}
.mast-top{display:flex;align-items:flex-end;gap:28px;padding:26px 0 18px}
.mast-name{display:flex;align-items:flex-end;gap:20px;border:0;color:var(--ink);flex:none}
.mast-name:hover{color:var(--ink)}
.mast-name svg{flex:none}
.mast-word{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(34px,7vw,84px);line-height:.84;letter-spacing:-.015em}
.mast-word em{font-style:normal;color:var(--accent)}
.mast-sub{font-family:var(--display);text-transform:uppercase;letter-spacing:.28em;font-size:11px;color:var(--mute);margin-top:8px;display:block}
.mast.compact .mast-top{padding:16px 0 12px;align-items:center}
.mast.compact .mast-word{font-size:clamp(28px,4vw,36px)}
.mast.compact .mast-sub{display:none}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;padding:0 0 12px}
.menu details{position:relative}
.menu summary{display:flex;align-items:center;gap:8px;padding:8px 13px;cursor:pointer;list-style:none;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:12px;color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{color:var(--accent)}
.menu summary svg:first-child{color:var(--accent);flex:none}
.menu .m-no{color:var(--mute)}
.menu .m-caret{opacity:.5;margin-left:1px;transition:transform .15s}
.menu details[open] summary{color:var(--accent);background:var(--paper)}
.menu details[open] .m-caret{transform:rotate(180deg)}
.menu details[data-current] summary{box-shadow:inset 0 -2px 0 var(--accent)}
.m-panel{position:absolute;top:calc(100% + 1px);left:0;z-index:20;min-width:270px;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--ink);padding:6px 0}
.m-panel a{display:block;padding:8px 18px;border:0;color:var(--ink);font-size:17.5px;line-height:1.3}
.m-panel a:hover{background:var(--tint);color:var(--accent)}
.m-panel a[aria-current]{color:var(--accent)}
.m-panel .m-all{font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;
  color:var(--secondary);padding:6px 18px 9px;margin-bottom:5px;border-bottom:1px solid var(--rule)}
.m-index{margin-left:auto;padding:8px 2px;border:0;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--secondary);box-shadow:inset 0 -1px 0 currentColor}
.m-index:hover{color:var(--accent)}

/* ---------- bands ---------- */
.band{border-bottom:1px solid var(--rule)}
.band.hard{border-bottom-width:2px;border-bottom-color:var(--ink)}
.band-pad{padding:clamp(34px,5vw,58px) 0}
.band.ink{background:var(--secondary);color:#E8EDF4;border-bottom:0}
.band.ink h2,.band.ink h3{color:#fff}
.band.ink .eyebrow{color:#93A9C4}
.band.ink a{color:#E8EDF4;border-bottom-color:rgba(255,255,255,.35)}
.band.tinted{background:var(--tint)}

/* lead plate: full-bleed photo with crimson caption panel overlapping */
.lead-plate{position:relative;border-bottom:2px solid var(--ink);background:#DDD5C7}
.lead-plate>img{width:100%;height:clamp(360px,58vw,760px);object-fit:cover;filter:saturate(1.06) contrast(1.05)}
.lead-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(190deg,rgba(26,21,18,.42) 0%,rgba(26,21,18,0) 34%),
             linear-gradient(0deg,rgba(26,21,18,.62) 0%,rgba(26,21,18,.12) 30%,rgba(26,21,18,0) 55%)}
.lead-stamp{position:absolute;top:clamp(16px,3vw,34px);right:var(--pad);text-align:right;color:#FCF6EE;
  font-family:var(--display);font-weight:300;font-size:clamp(26px,4.6vw,58px);line-height:.9;letter-spacing:-.01em;
  text-shadow:0 2px 26px rgba(26,21,18,.5)}
.lead-stamp span{display:block;font-size:clamp(10px,1vw,12.5px);letter-spacing:.26em;text-transform:uppercase;margin-top:9px;color:#EFE3D2}
.lead-go{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 0}
.lead-go a{font-family:var(--display);text-transform:uppercase;letter-spacing:.15em;font-size:12px;color:#FDF6EF;border-bottom:1px solid rgba(253,246,239,.5)}
.lead-go a:hover{color:#FCF9F2;border-bottom-color:#FCF9F2}
.drop{float:left;font-family:var(--display);font-weight:500;font-size:3.35em;line-height:.78;
  margin:.06em .07em -.04em 0;color:var(--accent)}
.lead-panel{background:var(--accent);color:#FDF6EF;padding:clamp(20px,3vw,32px)}
.lead-panel h1{font-size:clamp(30px,4vw,58px);line-height:.98;text-transform:uppercase;font-weight:500;margin-bottom:13px}
.lead-panel p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:#FDF6EF}
.lead-panel .kicker{color:#EFC9C3;margin-bottom:13px}
@media(min-width:900px){
  .lead-plate .lead-panel{position:absolute;left:var(--pad);bottom:-1px;width:min(700px,60%);box-shadow:0 -18px 60px rgba(26,21,18,.35)}
}

/* quiet line */
.quiet{display:flex;align-items:center;justify-content:center;gap:20px;padding:clamp(30px,4.5vw,60px) 0}
.quiet p{margin:0;font-size:clamp(19px,2vw,25px);line-height:1.35;text-align:center;max-width:760px;color:#2A241E}
.quiet .flip{transform:scaleX(-1)}
.quiet .batter{color:var(--secondary)}

/* ---------- figure system ---------- */
/* 1 · plate — photo with an offset caption panel keyed to the accent */
.fig{margin:0}
.fig figcaption{padding-top:13px}
.fig .cap{font-size:17.5px;line-height:1.45;color:#2A241E;max-width:56ch}
.fig .credit{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;color:#8A8073;margin-top:7px}
.fig .cap-k{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--secondary);margin-bottom:5px}

/* 2 · mat — the print sits on a paper mat inside a hairline frame */
.fig-mat{background:var(--paper);border:1px solid var(--ink);padding:clamp(14px,1.6vw,24px)}
.fig-mat img{width:100%}
.fig-mat figcaption{padding:14px 0 0;border-top:1px solid var(--rule);margin-top:14px}

/* 3 · bleed — breaks the measure, caption on a tinted shelf */
.fig-bleed img{width:100%;height:clamp(240px,34vw,440px);object-fit:cover}
.fig-bleed figcaption{background:var(--tint);padding:16px clamp(14px,2vw,24px) 20px}

/* 4 · inset — hangs into the left margin, prose runs beside it */
.fig-inset img{width:100%;border:1px solid var(--ink)}
.fig-inset figcaption{padding-top:10px;border-left:2px solid var(--accent);padding-left:13px}
.fig-inset .cap{font-size:16.5px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--ink)}
.gallery figcaption{padding-top:9px;font-size:15.5px;line-height:1.4;color:var(--mute)}

/* ---------- homepage runs ---------- */
.sixup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
@media(min-width:1000px){.sixup{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.sixup{grid-template-columns:1fr}}
.sec-card{display:flex;flex-direction:column;gap:11px}
.sec-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.sec-card h3{font-size:23px;text-transform:uppercase;line-height:1.05}
.sec-card p{margin:0;font-size:17px;color:#302A22}
.sec-card .lead-in{margin-top:auto;padding-top:9px;border-top:1px solid var(--rule);font-size:16.5px}
.pair{display:grid;grid-template-columns:7fr 5fr}
.pair>*{border-right:2px solid var(--ink)}
.pair>*:last-child{border-right:0}
.pair .fig-bleed img{height:clamp(240px,30vw,420px)}

.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,34px)}
@media(min-width:1100px){.picks{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.picks{grid-template-columns:1fr}}
.pick{display:flex;flex-direction:column;gap:10px;border:0;color:var(--ink)}
.pick:hover{color:var(--ink)}
.pick img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pick h3{font-size:21px;text-transform:uppercase;line-height:1.08;min-height:2.16em}
.pick p{margin:0;font-size:16.5px;color:#302A22}
.pick:hover h3{color:var(--accent)}

/* ---------- article ---------- */
.piece{padding:clamp(26px,4vw,46px) 0 0}
.measure{max-width:var(--measure);margin-inline:auto}
.piece h1{font-size:clamp(32px,5vw,62px);line-height:.99;text-transform:uppercase;font-weight:500;margin-bottom:16px}
.piece .lead{font-size:clamp(19px,1.8vw,23px);line-height:1.4;color:#2A241E;margin:0 0 22px}
.piece h2{font-size:clamp(23px,2.4vw,31px);text-transform:uppercase;line-height:1.1;margin:2em 0 .5em;display:flex;gap:12px;align-items:baseline}
.piece h2 .batter{position:relative;top:-.15em}
.piece p{font-size:20px;line-height:1.62}
.piece ul{font-size:19px;line-height:1.55}
.piece .fig{margin:34px auto}
.piece .fig-bleed,.piece .notes,.piece .fig-wide{max-width:1180px}
.altnote{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:16px 0 18px;margin:0 0 26px}
.altnote p{margin:6px 0 0;font-size:18.5px;line-height:1.45;color:#302A22}
.byline{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;color:var(--mute);margin-bottom:22px}
.byline .n{color:var(--accent)}
@media(min-width:1000px){
  .piece .fig-inset{float:left;width:330px;margin:12px 30px 22px -140px}
  .piece .fig-mat.hang{margin-left:-70px;margin-right:-70px;max-width:none}
}

/* ---------- components ---------- */
.pullquote{margin:32px auto;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);padding:20px 0}
.pullquote p{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(21px,2.3vw,29px);line-height:1.18;text-transform:uppercase;color:var(--accent)}
.blockquote{margin:28px 0;padding-left:22px;border-left:3px solid var(--secondary)}
.blockquote p{margin:0 0 .4em;font-size:20px;font-style:italic}
.blockquote cite{font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-style:normal;color:var(--mute)}
.callout{background:var(--paper);border:1px solid var(--ink);padding:20px 22px;margin:28px 0;position:relative}
.callout p{margin:0;font-size:19px}
.callout::before,.callout::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--accent)}
.callout::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.callout::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.note{font-size:17px;color:var(--mute);border-left:2px solid var(--rule);padding-left:14px}

.notes{margin:36px auto;background:var(--tint);border-top:2px solid var(--ink);padding:24px clamp(16px,2.4vw,30px) 28px}
.notes>.eyebrow{margin-bottom:16px}
.notes h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:15px;color:var(--accent);margin:0 0 12px}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:26px 34px}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:18px}
.statblock{display:flex;flex-direction:column;gap:4px;border-top:2px solid var(--accent);padding-top:9px}
.stat-num{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.6vw,33px);line-height:1;color:var(--accent)}
.stat-label{font-size:16px;line-height:1.35;color:#302A22}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:8px 20px;padding:11px 0;border-bottom:1px solid var(--rule)}
.timeline li:last-child{border-bottom:0}
.t-when{font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;font-size:13.5px;color:var(--secondary);line-height:1.35}
.t-what{font-size:17.5px;line-height:1.45}

.tablewrap{overflow-x:auto}
.datatable,.versus{width:100%;font-size:17.5px}
.datatable th,.versus th{font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;font-weight:500;color:var(--mute);text-align:left;padding:9px 12px 8px 0;border-bottom:1px solid var(--ink);white-space:nowrap}
.datatable td,.versus td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}
.datatable td:first-child,.versus td:first-child{width:34%;font-weight:600}
.versus td+td{border-left:1px solid var(--rule);padding-left:14px}
.register td:nth-child(2),.register td:nth-child(3){font-family:var(--display);letter-spacing:.02em}
.register .bar{height:6px;background:var(--secondary)}
.register .bar.high{background:var(--accent)}

.chart figcaption{padding-top:10px;font-size:16px;color:var(--mute);max-width:60ch}
.chart svg{width:100%;height:auto;overflow:hidden}
.chart .c-bar{fill:var(--secondary)}
.chart .c-bar.hi{fill:var(--accent)}
.chart .c-lab,.chart .c-val{font-family:var(--display);font-size:13px;letter-spacing:.06em;fill:var(--ink)}
.chart .c-val{fill:var(--accent)}

.map-figure{margin:0}
.map-figure .map-slot{background:var(--tint);border:1px solid var(--ink);min-height:280px}
.map-figure svg{width:100%;height:auto;display:block;overflow:hidden;background:var(--paper);border:1px solid var(--ink)}
.map-figure figcaption{padding-top:13px;display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.map-figure .cap{font-size:17px;color:#302A22;max-width:60ch}
.m-land{fill:#E3D9C6;stroke:#B3A897;stroke-width:1.4}
.m-pin{fill:var(--accent)}
.m-pin-ring{stroke-width:2.4}
.m-pin-ring{fill:none;stroke:var(--accent);stroke-width:2}
.m-lab{font-family:var(--display);font-size:34px;letter-spacing:.05em;fill:var(--ink)}
.m-area{font-family:var(--display);font-size:36px;letter-spacing:.26em;fill:var(--mute);text-transform:uppercase}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px}
.profile-card{display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1px solid var(--ink);padding:18px 18px 20px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:6px}
.profile-card h3{font-size:21px;text-transform:uppercase;line-height:1.1}
.profile-card .p-role{margin:0;font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;color:var(--accent)}
.profile-card p{margin:0;font-size:16.5px;line-height:1.45}
.profile-card .p-links,.profile-card .p-attr{margin-top:auto;padding-top:8px;font-size:15.5px}
.profile-card .p-attr{color:var(--mute);font-size:13px;font-family:var(--display);letter-spacing:.06em;text-transform:uppercase}
.profile-card.no-photo .p-mark{width:44px;height:44px;color:var(--accent)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px}
.org-card{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;border:1px solid var(--rule);background:var(--paper);padding:13px 15px;color:var(--ink)}
.org-card:hover{border-color:var(--ink);color:var(--ink)}
.org-card .org-logo{grid-row:span 2;width:46px;height:46px;object-fit:contain}
.org-card .org-name{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:15px;line-height:1.15}
.org-card .org-host{font-size:14px;color:var(--mute)}
.entity-ref{overflow-wrap:anywhere}
.entity-ref::after{content:" ↗";font-size:.8em;color:var(--mute)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:0;border-top:2px solid var(--ink)}
.further-grid a{display:flex;flex-direction:column;gap:7px;padding:20px 24px 24px;border:0;border-right:1px solid var(--rule);color:var(--ink)}
.further-grid a:last-child{border-right:0}
.further-grid a:hover{background:var(--paper);color:var(--accent)}
.further-grid .f-sec{font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;color:var(--secondary);display:flex;align-items:center;gap:7px}
.further-grid .f-t{font-family:var(--display);font-size:22px;text-transform:uppercase;line-height:1.08}

.related-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.related-links li{border-bottom:1px solid var(--rule)}
.related-links a{display:flex;align-items:baseline;gap:10px;padding:11px 0;border:0;color:var(--ink);font-size:18px}
.related-links a:hover{color:var(--accent)}
.related-links .r-sec{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--secondary);flex:none;width:9.5em}

.cat-list{list-style:none;margin:0;padding:0}
.cat-list>li{border-top:1px solid var(--rule)}
.cat-list>li:first-child{border-top:2px solid var(--ink)}
.cat-list a.c-row{display:grid;grid-template-columns:64px 1fr minmax(0,320px);gap:6px 26px;align-items:start;padding:20px 0 22px;border:0;color:var(--ink)}
.cat-list a.c-row:hover{color:var(--ink);background:var(--paper)}
.cat-list .c-n{font-family:var(--display);font-weight:500;font-size:26px;color:var(--accent);line-height:1}
.cat-list .c-t{font-family:var(--display);font-size:27px;text-transform:uppercase;line-height:1.06}
.cat-list a.c-row:hover .c-t{color:var(--accent)}
.cat-list .c-b{font-size:17px;color:#302A22;margin:5px 0 0}
.cat-list .c-i{width:100%;aspect-ratio:16/10;object-fit:cover}

/* expander for long lists (CSS only) */
.more{margin-top:14px}
.more input{position:absolute;opacity:0;pointer-events:none}
.more .more-body{display:none}
.more input:checked~.more-body{display:block}
.more label{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--secondary);cursor:pointer;border-bottom:1px solid currentColor}
.more input:checked~label .lbl-open,.more label .lbl-shut{display:none}
.more input:checked~label .lbl-shut{display:inline}

/* ---------- supporters colophon ---------- */
.colophon{background:var(--ink);color:#DDD5C7;padding:clamp(28px,4vw,44px) 0}
.colophon .col-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 24px;border-bottom:1px solid #3A322A;padding-bottom:12px;margin-bottom:22px}
.colophon h2{font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:.24em;color:var(--gold)}
.colophon .col-note{font-size:16px;color:#BFB5A6;max-width:52ch}
.col-block{margin-bottom:22px}
.col-block .col-label{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:#8A8073;margin-bottom:12px}
.sponsor{display:flex;align-items:center;justify-content:center;padding:14px 16px}
.sponsor img{max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor .sponsor-blurb:empty{display:none}


/* ---------- footer ---------- */
.foot{background:var(--ink);color:#DDD5C7;padding:clamp(30px,4vw,46px) 0 38px;border-top:1px solid #3A322A}
.foot-top{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(24px,4vw,56px)}
.foot-word{font-family:var(--display);font-weight:600;font-size:34px;text-transform:uppercase;line-height:1;color:#DDD5C7}
.foot-word em{font-style:normal;color:var(--gold)}
.foot p{font-size:17px;line-height:1.45;color:#BFB5A6;margin:12px 0 0}
.foot-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:18px 24px}
.foot-nav h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--gold);margin-bottom:7px}
.foot-nav a{display:block;color:#DDD5C7;border:0;font-size:17px;line-height:1.75}
.foot-nav a:hover{color:var(--gold)}
.foot-end{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:28px;padding-top:16px;border-top:1px solid #3A322A;font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;color:#8A8073}

/* ---------- forms (contact) ---------- */
.form{display:grid;gap:16px;max-width:560px}
.form label{display:grid;gap:6px;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--mute)}
.form input,.form textarea{font-family:var(--text);font-size:18px;padding:11px 13px;border:1px solid var(--ink);background:var(--paper);color:var(--ink)}
.form textarea{min-height:150px;resize:vertical}
.form button{justify-self:start;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:13px;padding:13px 26px;background:var(--accent);color:#FDF6EF;border:0;cursor:pointer}
.form button:hover{background:var(--secondary)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .pair{grid-template-columns:1fr}
  .pair>*{border-right:0;border-bottom:2px solid var(--ink)}
  .pair>*:last-child{border-bottom:0}
  .foot-top{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{font-size:18px}
  .mast-top{flex-wrap:wrap;gap:14px}
  .menu{display:block;padding-bottom:6px}
  .menu details{border-top:1px solid var(--rule)}
  .menu details:first-child{border-top:2px solid var(--ink)}
  .menu summary{padding:12px 0}
  .menu summary .m-caret{margin-left:auto}
  .m-panel{position:static;border:0;padding:0 0 10px;background:transparent;min-width:0}
  .m-panel a{padding:7px 0 7px 22px}
  .m-index{display:block;margin:0;padding:13px 0;border-top:1px solid var(--rule)}
  .piece h1{font-size:clamp(28px,8vw,40px)}
  .piece p{font-size:18.5px}
  .cat-list a.c-row{grid-template-columns:44px 1fr;gap:4px 16px}
  .cat-list .c-i{grid-column:1/-1;margin-top:10px}
  .timeline li{grid-template-columns:1fr}
  .datatable td:first-child,.versus td:first-child{width:auto}
  .versus,.datatable{font-size:16.5px}
  .quiet{gap:12px}
  .quiet .batter{display:none}
}
@media(max-width:420px){
  .col-grid{grid-template-columns:1fr}
}
@media print{
  .menu,.colophon{display:none}
  body{background:#fff}
}

/* homepage split bands */
.split-essay{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:start}
.intro-eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.22em;font-size:11.5px;color:var(--accent);white-space:nowrap}
.intro-eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}
.intro-lead{margin:20px 0 22px;font-size:clamp(21px,2.2vw,27px);line-height:1.34;letter-spacing:-.005em;max-width:36ch}
.intro-out{margin:0;padding-left:16px;border-left:2px solid var(--accent);font-size:17px;line-height:1.5;
  color:#4E463A;max-width:34ch}
.split-diagram{display:grid;gap:clamp(26px,4vw,58px);grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center}
.split-map{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:minmax(0,1fr) minmax(0,360px)}
@media(max-width:900px){
  .split-essay,.split-diagram,.split-map{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .mast-name{gap:13px}
  .mast-name>svg{width:54px;height:54px}
  .mast-sub{display:none}
  .mast.compact .mast-name>svg{width:38px;height:38px}
}

/* lead + picks refinements */
.pick{gap:11px}
.pick-img{position:relative;display:block}
.pick-img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:filter .2s}
.pick-n{position:absolute;top:0;left:0;background:var(--accent);color:#FDF6EF;font-family:var(--display);
  font-size:12px;letter-spacing:.14em;padding:5px 10px}
.pick:hover .pick-img img{filter:saturate(1.08) brightness(1.03)}
.pick-go{font-family:var(--display);text-transform:uppercase;letter-spacing:.15em;font-size:11.5px;
  color:var(--secondary);margin-top:auto;padding-top:9px;border-top:1px solid var(--rule)}
.pick:hover .pick-go{color:var(--accent);border-top-color:var(--accent)}
.pick.feature h3{font-size:clamp(24px,2.6vw,32px)}
.pick.feature p{font-size:18px}
.pick.feature .pick-img img{aspect-ratio:4/3}
@media(min-width:1100px){
  .picks{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pick{grid-column:span 2}
  .pick.feature{grid-column:span 3}
  .pick.feature+.pick{grid-column:span 3}
}
.bl-head{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr) auto;gap:14px 40px;align-items:baseline;
  padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid #3A5878}
.bl-head h2{font-size:clamp(24px,2.6vw,34px);text-transform:uppercase;line-height:1.05;margin-top:12px;color:#fff}
.bl-head p{margin:0;font-size:17.5px;line-height:1.5;color:#C9D6E5;max-width:56ch}
.bl-links{white-space:nowrap}
@media(max-width:900px){.bl-head{grid-template-columns:1fr}}
.bl-wrap{background:rgba(255,255,255,.05);border:1px solid #3A5878;padding:clamp(14px,1.8vw,26px)}
svg.bl{width:100%;height:auto;display:block;overflow:hidden}
.bl-zone{font-family:var(--display);font-size:34px;letter-spacing:4px}
.bl-sub{font-family:var(--display);font-size:24px;letter-spacing:2px}
.bl-line{font-family:var(--display);font-size:30px;letter-spacing:2px}
.bl-h{font-family:var(--display);font-size:30px;letter-spacing:1px}
.bl-p{font-family:var(--display);font-size:26px;letter-spacing:2px}

/* map orientation + legend */
.m-grat path{stroke:#C6B9A2;stroke-width:1;stroke-dasharray:4 8;fill:none}
.m-grat-lab text{font-family:var(--display);font-size:32px;letter-spacing:.12em;fill:#8A8073}
.m-scale path{stroke:var(--ink);fill:none}
.m-scale-lab{font-family:var(--display);font-size:34px;letter-spacing:.08em;fill:var(--ink)}
.m-north-ring{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.m-north-needle{fill:var(--accent)}
.m-north-lab{font-family:var(--display);font-size:36px;letter-spacing:.14em;fill:var(--ink)}
.m-legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;
  font-size:15.5px;line-height:1.35;color:var(--mute);width:100%}
.m-legend li{display:flex;align-items:center;gap:9px}
.m-legend .k{flex:none;width:18px;height:12px}
.m-legend .k-pin{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--ground),0 0 0 3.5px var(--accent)}
.m-legend .k-grat{border-top:1px dashed #C6B9A2;height:0}
.m-legend .k-land{background:#E3D9C6;border:1px solid #B3A897;height:13px}

/* six sections band */
.sec-card .sec-img{position:relative;display:block;border:0}
.sec-card .sec-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.sec-card .sec-no{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--gold);
  font-family:var(--display);font-size:13px;letter-spacing:.16em;padding:6px 11px}
.sec-card h3{font-size:25px}
.sec-card h3 a:hover{color:var(--accent)}
.sec-entries{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--rule);display:grid;gap:1px}
.sec-entries li{display:flex;align-items:baseline;gap:9px;font-size:16.5px;line-height:1.5}
.sec-entries .e-n{font-family:var(--display);font-size:11.5px;letter-spacing:.1em;color:var(--mute);flex:none;width:2.6em}
.sec-entries a{color:var(--ink);border:0}
.sec-entries a:hover{color:var(--accent)}

/* colophon grid */
.col-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  border-top:1px solid #3A322A;border-left:1px solid #3A322A}
.sponsor{width:auto;height:clamp(84px,7vw,104px);border:0;border-right:1px solid #3A322A;border-bottom:1px solid #3A322A;
  background:#15110E;transition:background .18s}
.sponsor img{max-height:44px;opacity:1;transition:opacity .18s}
.sponsor:hover{background:#1F1915}
.sponsor:hover img{opacity:1}
.col-block{margin-bottom:0}
.colophon .col-block+.col-block{margin-top:26px}
.col-block .col-label{margin-bottom:10px}
@media(max-width:900px){.col-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.col-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* reading route */
.route-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px 34px;align-items:baseline;
  padding-bottom:18px;margin-bottom:0;border-bottom:2px solid var(--ink)}
.route-head h2{font-size:clamp(24px,2.8vw,34px);text-transform:uppercase;letter-spacing:.02em}
.route-head p{margin:0;font-size:17.5px;line-height:1.45;color:#4E463A;max-width:52ch}
.route{--rg:clamp(20px,3vw,44px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--rg);row-gap:0}
.route-step{position:relative;display:flex;flex-direction:column;gap:11px;border:0;color:var(--ink);padding:0 0 26px}
.route-step:not(:last-child)::after{content:"";position:absolute;top:0;bottom:26px;
  right:calc(-1 * var(--rg) / 2);width:1px;background:var(--rule)}
.route-step:hover{color:var(--ink)}
.rs-rail{display:flex;align-items:center;gap:10px;height:34px;position:relative}
.rs-rail::after{content:"";position:absolute;left:0;right:calc(-1 * var(--rg));top:16px;height:1px;background:var(--rule)}
.route-step:last-child .rs-rail::after{right:0}
.rs-dot{width:9px;height:9px;background:var(--accent);border-radius:50%;position:relative;z-index:1;flex:none;
  box-shadow:0 0 0 4px var(--ground)}
.rs-n{position:relative;z-index:1;background:var(--ground);padding-right:8px;
  font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:.06em;color:var(--accent)}
.rs-img{display:block;overflow:hidden}
.rs-img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .3s ease,filter .3s ease}
.route-step:hover .rs-img img{transform:scale(1.03);filter:saturate(1.07)}
.rs-sec{display:flex;align-items:center;gap:7px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.15em;font-size:11px;color:var(--secondary)}
.rs-sec svg{color:var(--accent)}
.route-step h3{font-size:clamp(20px,2vw,25px);text-transform:uppercase;line-height:1.05}
.route-step:hover h3{color:var(--accent)}
.route-step p{margin:0;font-size:16.5px;line-height:1.45;color:#302A22}
@media(max-width:900px){
  .route-head{grid-template-columns:1fr}
  .route{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .route-step:nth-child(2n)::after{display:none}
}
@media(max-width:520px){
  .route{grid-template-columns:1fr}
  .route-step::after{display:none}
  .rs-img img{aspect-ratio:3/2}
}

/* six-sections band — dark ground so it separates from the paper bands */
.sixup-band{background:var(--ink);color:#E4DCCE;border-bottom:0}
.sixup-band .sixup-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px 34px;
  align-items:baseline;padding-bottom:20px;margin-bottom:30px;border-bottom:1px solid #3A322A}
.sixup-band .sixup-head h2{font-size:clamp(24px,2.8vw,34px);text-transform:uppercase;letter-spacing:.02em;color:#FCF9F2}
.sixup-band .sixup-head p{margin:0;font-size:17.5px;line-height:1.45;color:#A99C88;max-width:46ch}
.sixup-band .eyebrow{color:var(--gold)}
.sixup-band .eyebrow a{color:var(--gold);border-bottom-color:rgba(217,147,31,.45)}
.sixup-band .eyebrow a:hover{color:#FCF9F2;border-bottom-color:#FCF9F2}
.sixup-band .sec-card h3 a{color:#FCF9F2}
.sixup-band .sec-card h3 a:hover{color:var(--gold)}
.sixup-band .sec-card>p{color:#A99C88}
.sixup-band .sec-card .kicker{color:var(--gold)}
.sixup-band .sec-no{background:var(--accent);color:#FDF6EF}
.sixup-band .sec-img img{filter:saturate(.92) brightness(.94);transition:filter .25s}
.sixup-band .sec-card:hover .sec-img img{filter:saturate(1.04) brightness(1)}
.sixup-band .sec-entries{border-top:1px solid #3A322A}
.sixup-band .sec-entries .e-n{color:#7A6E5C}
.sixup-band .sec-entries a{color:#DDD5C7}
.sixup-band .sec-entries a:hover{color:var(--gold)}
@media(max-width:900px){.sixup-band .sixup-head{grid-template-columns:1fr}}

/* SVG label sizes are user units, so they shrink with the container — raise them where the container is small */
@media(max-width:760px){
  .bl-zone{font-size:52px;letter-spacing:5px}
  .bl-sub{display:none}
  .bl-line{font-size:44px;letter-spacing:2px}
  .bl-h{font-size:44px}
  .bl-p{font-size:38px;letter-spacing:1px}
  .m-lab{font-size:48px}
  .m-grat-lab text{font-size:44px}
  .m-scale-lab{font-size:46px}
  .m-north-lab{font-size:50px}
  .m-area{font-size:48px;letter-spacing:.2em}
  .m-north-ring{r:38}
  .chart .c-lab,.chart .c-val{font-size:19px}
}

/* image edges: a hairline plus a crimson accent rule that fills on hover */
.sixup-band .sec-img{position:relative;display:block;outline:1px solid rgba(217,147,31,.22);outline-offset:0}
.sixup-band .sec-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--accent);transform:scaleX(.18);transform-origin:left;transition:transform .35s ease}
.sixup-band .sec-card:hover .sec-img::after{transform:scaleX(1)}
.sixup-band .sec-card:hover .sec-img{outline-color:var(--gold)}
.sixup-band .sec-no{bottom:3px}

.rs-img{outline:1px solid var(--rule)}
.rs-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);
  transform:scaleX(.18);transform-origin:left;transition:transform .35s ease}
.rs-img{position:relative}
.route-step:hover .rs-img::after{transform:scaleX(1)}
.route-step:hover .rs-img{outline-color:var(--ink)}

.pick-img{outline:1px solid var(--rule)}
.pick:hover .pick-img{outline-color:var(--ink)}
.cat-list .c-i{outline:1px solid var(--rule)}
.cat-list a.c-row:hover .c-i{outline-color:var(--accent)}
.fig-bleed img,.gallery img{outline:1px solid var(--rule)}

/* register beside the map */
.places-head{display:flex;flex-direction:column;gap:5px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.places-head .eyebrow:last-child{letter-spacing:.1em;text-transform:none;font-size:14.5px;
  font-family:var(--text);color:var(--mute)}
.place-list{list-style:none;margin:0 0 16px;padding:0}
.place-list li{border-bottom:1px solid var(--rule)}
.place-list a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name sec" "pos sec";
  gap:2px 14px;align-items:center;padding:11px 0;border:0;color:var(--ink)}
.place-list a:hover{color:var(--accent)}
.pl-name{grid-area:name;font-size:19px;line-height:1.2}
.pl-pos{grid-area:pos;font-family:var(--display);font-weight:300;font-size:13.5px;letter-spacing:.09em;color:var(--mute)}
.pl-pos i{font-style:normal;padding:0 5px;color:#C6B9A2}
.pl-sec{grid-area:sec;display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:12px;
  letter-spacing:.14em;color:var(--secondary);border:1px solid var(--rule);padding:4px 8px}
.place-list a:hover .pl-sec{border-color:var(--accent);color:var(--accent)}

/* footer — the six section marks carry it */
.foot-top{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:start}
.foot-brand p{max-width:34ch}
.ft-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
  border-top:1px solid #3A322A;border-left:1px solid #3A322A}
.ft-tile{display:flex;flex-direction:column;gap:7px;padding:16px 14px 18px;border:0;
  border-right:1px solid #3A322A;border-bottom:1px solid #3A322A;color:#DDD5C7;transition:background .18s}
.ft-tile:hover{background:#231C17;color:#FCF9F2}
.ft-ic{color:var(--gold);height:30px}
.ft-no{font-family:var(--display);font-size:12px;letter-spacing:.18em;color:#7A6E5C}
.ft-nm{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;line-height:1.25}
.ft-tile:hover .ft-nm{color:var(--gold)}
.foot-end{align-items:center}
.ft-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.ft-links a{color:#DDD5C7;border:0;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:11.5px}
.ft-links a:hover{color:var(--gold)}
@media(max-width:1000px){.ft-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-end{gap:14px}}

/* the nav is a bar in its own right, so it holds against the wordmark */
.menu{background:var(--ink);margin-inline:calc(-1 * var(--pad));padding:0 calc(var(--pad) - 4px) 0 var(--pad);
  gap:0;min-height:46px;position:relative;z-index:30}
.mast{border-bottom-width:0}
.menu summary{padding:14px 15px;font-size:13.5px;font-weight:500;letter-spacing:.15em;color:#EDE5D8}
.menu summary:hover{color:var(--gold);background:#231C17}
.menu summary svg:first-child{color:var(--gold)}
.menu .m-no{color:#8A7C68}
.menu .m-caret{opacity:.7}
.menu details[open] summary{color:#FDF6EF;background:var(--accent)}
.menu details[open] summary svg:first-child,.menu details[open] .m-no{color:#F0C4BC}
.menu details[data-current] summary{box-shadow:inset 0 -3px 0 var(--accent);color:#fff}
.menu details[data-current][open] summary{box-shadow:none}
.m-panel{top:100%;border-color:var(--ink);border-top:0;box-shadow:0 18px 40px rgba(26,21,18,.28)}
.m-index{margin-left:auto;padding:14px 8px;color:var(--gold);font-size:12.5px;font-weight:500;box-shadow:none;
  border-bottom:1px solid transparent}
.m-index:hover{color:#FDF6EF;border-bottom-color:var(--gold)}
.mast-top{padding-bottom:14px}
@media(max-width:760px){
  .menu{padding:0;min-height:0}
  .menu details{border-top:1px solid #3A322A}
  .menu details:first-child{border-top:0}
  .menu summary{padding:14px var(--pad)}
  .m-panel{background:#231C17;border:0;box-shadow:none;padding:0 0 8px}
  .m-panel a{color:#DDD5C7;padding:8px var(--pad) 8px calc(var(--pad) + 22px)}
  .m-panel a:hover{background:transparent;color:var(--gold)}
  .m-panel .m-all{color:var(--gold);border-bottom-color:#3A322A;padding-left:var(--pad)}
  .m-index{padding:14px var(--pad);border-top:1px solid #3A322A;border-bottom:0}
}

/* full-bleed bar, icons leading */
.menu{margin-inline:0;padding:0;min-height:0;width:100%}
.menu-in{max-width:1220px;margin:0 auto;padding-inline:calc(var(--pad) - 14px);
  display:flex;flex-wrap:wrap;align-items:stretch}
.m-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border:1px solid rgba(217,147,31,.3);color:var(--gold);transition:background .18s,border-color .18s,color .18s}
.menu summary{gap:11px;padding:11px 14px}
.menu summary:hover .m-ic{background:rgba(217,147,31,.14);border-color:var(--gold)}
.menu details[open] summary .m-ic{background:#FDF6EF;border-color:#FDF6EF;color:var(--accent)}
.menu details[data-current] summary .m-ic{background:var(--accent);border-color:var(--accent);color:#FDF6EF}
.menu details[data-current][open] summary .m-ic{background:#FDF6EF;border-color:#FDF6EF;color:var(--accent)}
.m-site{margin-left:auto}
.m-site .m-no{color:#6E6252}
@media(max-width:760px){
  .menu-in{padding-inline:0;display:block}
  .m-site{margin-left:0}
  .m-ic{width:30px;height:30px}
}
.m-site .m-panel{left:auto;right:0}

/* one row: marks and numbers always, the name written into a readout at the right */
.menu-in{position:relative;flex-wrap:nowrap;align-items:center;gap:0;
  padding-inline:calc(var(--pad) - 12px) var(--pad)}
.menu summary{padding:11px 12px;gap:9px;white-space:nowrap}
.menu .m-caret{display:none}
.m-nm{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:13px;
  color:var(--gold);opacity:0;transition:opacity .18s;pointer-events:none;max-width:44%;
  overflow:hidden;text-overflow:ellipsis}
.m-sec[data-current] .m-nm{opacity:1;color:#FDF6EF}
.menu-in:hover .m-sec[data-current] .m-nm{opacity:0}
.m-sec:hover .m-nm,.m-sec[open] .m-nm{opacity:1}
.m-sec[open] .m-nm{color:#FDF6EF}
.m-site{margin-left:auto}
@media(max-width:760px){
  .menu-in{flex-wrap:wrap;padding-inline:0;display:block;position:static}
  .menu .m-caret{display:block;margin-left:auto}
  .m-nm{position:static;transform:none;opacity:1;color:inherit;max-width:none;letter-spacing:.15em;font-size:13.5px}
  .m-sec[data-current] .m-nm,.menu-in:hover .m-sec[data-current] .m-nm{opacity:1;color:inherit}
}
.menu{display:block}
.m-site .m-no{display:none}

/* the premise, in three consequences */
.conseq{list-style:none;margin:24px 0 22px;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.conseq li{display:grid;grid-template-columns:38px 30px 1fr;gap:0 14px;align-items:start;
  padding:15px 0 16px;border-bottom:1px solid var(--rule)}
.cq-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--rule);color:var(--accent);background:var(--paper)}
.cq-n{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.1em;color:var(--mute);padding-top:9px}
.cq-b{display:flex;flex-direction:column;gap:3px}
.cq-l{font-family:var(--display);text-transform:uppercase;letter-spacing:.15em;font-size:12px;color:var(--secondary)}
.cq-t{font-size:17.5px;line-height:1.4;color:#302A22}
.cq-b a{align-self:start;font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;
  color:var(--accent);border-bottom:1px solid rgba(142,30,32,.4);margin-top:3px}
.cq-b a:hover{color:var(--secondary);border-bottom-color:var(--secondary)}
.conseq li:hover .cq-ic{background:var(--accent);border-color:var(--accent);color:#FDF6EF}
.intro-lead{max-width:32ch}

/* labels back in the bar, one row: icon + short name */
.m-nm{position:static;transform:none;opacity:1;max-width:none;overflow:visible;pointer-events:auto;
  color:inherit;font-size:12.5px;letter-spacing:.13em}
.m-sec[data-current] .m-nm,.menu-in:hover .m-sec[data-current] .m-nm{opacity:1;color:inherit}
.menu summary{padding:11px 13px;gap:10px}
.m-ic{width:30px;height:30px}
.m-panel .m-all{color:var(--accent);font-size:12px}
@media(max-width:820px){
  .menu summary{padding:11px 9px;gap:8px}
  .m-nm{font-size:11.5px;letter-spacing:.1em}
}
@media(max-width:760px){
  .menu summary{padding:14px var(--pad);gap:12px}
  .m-nm{font-size:13.5px;letter-spacing:.15em}
}

/* the one-row bar needs ~1065px; below that it becomes the stacked menu */
@media(max-width:1100px){
  .menu-in{display:block;padding-inline:0;position:static}
  .menu details{border-top:1px solid #3A322A}
  .menu details:first-child{border-top:0}
  .menu summary{padding:14px var(--pad);gap:12px}
  .menu .m-caret{display:block;margin-left:auto}
  .m-nm{font-size:13.5px;letter-spacing:.15em}
  .m-site{margin-left:0}
  .m-panel{position:static;left:auto;right:auto;background:#231C17;border:0;box-shadow:none;padding:0 0 8px;min-width:0}
  .m-panel a{color:#DDD5C7;padding:8px var(--pad) 8px calc(var(--pad) + 22px)}
  .m-panel a:hover{background:transparent;color:var(--gold)}
  .m-panel .m-all{color:var(--gold);border-bottom-color:#3A322A;padding-left:var(--pad)}
  .m-panel a[aria-current]{color:var(--gold)}
}

/* labels may shrink rather than push the bar past its container */
.menu-in{min-width:0}
.m-sec{min-width:0}
.menu summary{min-width:0}
.m-nm{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* --- article devices --- */
.piece h2{align-items:baseline;gap:14px;border-top:1px solid var(--rule);padding-top:16px}
.h2-n{font-family:var(--display);font-weight:500;font-size:.52em;letter-spacing:.1em;color:var(--accent);flex:none}
.h2-t{display:block}
.p-open::first-letter{font-size:1.06em}
.piece .p-lede{font-size:22px;line-height:1.42;color:#241F19;margin-bottom:.7em}
.p-cont{margin-top:0}
.p-long{max-width:64ch}
.piece ul.marks{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:9px}
.piece ul.marks li{position:relative;padding-left:24px;font-size:19px;line-height:1.5}
.piece ul.marks li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--accent)}
.notes-head{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:baseline;
  padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--rule)}
.waypoint{display:flex;align-items:center;justify-content:center;gap:18px;margin:30px auto;color:var(--accent)}
.waypoint::before,.waypoint::after{content:"";flex:1;height:1px;background:var(--rule);max-width:34%}
.tail-sec{padding:22px 0 6px;border-top:1px solid var(--rule)}
.tail-sec .eyebrow{display:block;margin-bottom:14px}
.piece .callout{margin:30px 0}
@media(max-width:760px){
  .piece .p-lede{font-size:19.5px}
  .piece h2{gap:10px;padding-top:14px}
  .waypoint{margin:26px auto;gap:12px}
}

/* one collapse control below the one-row breakpoint */
.m-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.m-label{display:none;align-items:center;gap:12px;padding:13px var(--pad);cursor:pointer;color:#EDE5D8;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.15em;font-size:13px}
.m-label-c{margin-left:auto;opacity:.7;transition:transform .18s}
.m-label:hover{color:var(--gold)}
.m-toggle:focus-visible + .m-label{outline:2px solid var(--gold);outline-offset:-2px}
@media(max-width:1100px){
  .m-label{display:flex}
  .m-toggle:checked ~ .m-label{background:#231C17;color:var(--gold)}
  .m-toggle:checked ~ .m-label .m-label-c{transform:rotate(180deg)}
  .m-toggle:checked ~ .m-label .m-ic{background:rgba(217,147,31,.14);border-color:var(--gold)}
  .menu-in{display:none}
  .m-toggle:checked ~ .menu-in{display:block;border-top:1px solid #3A322A}
}

/* paragraph-level metadata inside .piece must outrank .piece p */
.piece .byline{font-size:12.5px;letter-spacing:.14em;color:var(--mute);line-height:1.4}
.piece .byline a{color:inherit;border:0}
.piece .byline a:hover{color:var(--accent)}
.piece .byline .n{color:var(--accent)}
.piece .note{font-size:17px;color:var(--mute)}
.piece .altnote p{font-size:18.5px}
/* one centred mark between the hairlines */
.waypoint svg.batter.flip{display:none}
.waypoint{gap:22px}

/* mobile drawer: every panel row is a 44px target */
@media(max-width:1100px){
  .m-panel a{display:flex;align-items:center;min-height:44px;padding:9px var(--pad) 9px calc(var(--pad) + 22px)}
  .m-panel .m-all{min-height:44px;padding:9px var(--pad)}
}
/* credit line meets AA on the paper ground */
.fig .credit{color:#6E6559}
.map-figure figcaption .eyebrow,.gallery figcaption{color:#6E6559}

/* notes panel: a heading rail with the data beside it, on paper rather than a tinted slab */
.piece .notes{background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--ink);
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.4vw,32px) clamp(24px,2.8vw,34px);
  margin:34px auto;display:grid;gap:18px 40px;grid-template-columns:minmax(0,1fr)}
.piece .notes>.notes-head{display:flex;flex-direction:column;gap:6px;border-bottom:0;padding-bottom:0;margin-bottom:0}
.piece .notes .notes-head .eyebrow:first-child{color:var(--accent);letter-spacing:.2em}
.piece .notes .notes-head .eyebrow:last-child{font-family:var(--text);text-transform:none;letter-spacing:0;
  font-size:16px;color:var(--mute)}
.piece .notes-grid{display:grid;gap:26px 40px;grid-template-columns:minmax(0,1fr)}
.piece .notes-cell h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:14px;
  color:var(--ink);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.piece .notes .datatable td:first-child{width:32%;font-weight:400;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.09em;font-size:13px;color:var(--secondary);padding-right:22px}
.piece .notes .datatable td{border-bottom:1px solid var(--rule);padding:12px 0}
.piece .notes .datatable tr:last-child td{border-bottom:0}
@media(min-width:900px){
  .piece .notes{grid-template-columns:210px minmax(0,1fr)}
  .piece .notes-cell+.notes-cell{margin-top:0}
  .piece .notes-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* 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. */
.col-grid .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.col-grid .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

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

/* op-article-width: the article column was capped at 741px (93 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .measure) 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 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  article.piece div.measure{--measure:min(76.048ch, 100%)!important}
}
@media (min-width:1600px){
  article.piece div.measure{--measure:min(clamp(76.048ch, 56.736vw, calc(76.048ch * 1.2)), 100%)!important}
  article.piece div.measure > :is(p.p-cont, p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */