/* La Lettrine — French literature in English, 1830–1970
   Palette roles: ground / page / ink / accent (crimson) / secondary (teal) / linen / umber */
:root{
  --ground:#EAE3D3;      /* ground: the desk the pages sit on */
  --page:#F7F3E8;        /* page: the sheet the reading happens on */
  --ink:#14120E;         /* ink */
  --crimson:#A8151B;     /* accent, saturated: half-titles, part-titles, initials, rules */
  --teal:#0F5459;        /* secondary, saturated: the map sheet and the colophon */
  --linen:#C9BFA8;       /* mat / frame */
  --umber:#6E6252;       /* quiet type: credits, small labels */
  --rule:#D7CDB8;
  --measure:70ch;
  --note:0px;
  --wide:100%;
  --pad:20px;
  --body:17px;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --grot:"Bricolage Grotesque",system-ui,sans-serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--serif);font-size:var(--body);line-height:1.62;
  text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--crimson);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-weight:400;line-height:1.06;margin:0}
p{margin:0 0 1.05em}
figure{margin:0}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- shared measures ---------- */
.wrap{width:100%;max-width:1300px;margin:0 auto;padding-inline:var(--pad)}
.wrap-wide{width:100%;max-width:1600px;margin:0 auto;padding-inline:var(--pad)}
.label{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson)}
.label--quiet{color:var(--umber)}
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.16em}

/* ---------- masthead ---------- */
.half-title{background:var(--crimson);color:#F7EDE4;text-align:center;padding:54px var(--pad) 44px}
.half-title .kicker{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;opacity:.85}
.half-title .mark{display:flex;justify-content:center;margin:22px 0 0}
.half-title h1,.half-title .name{font-family:var(--grot);font-weight:600;font-size:clamp(46px,11vw,150px);line-height:.86;letter-spacing:-.045em;margin:16px 0 0;color:#F7EDE4}
.half-title .name a{color:inherit}
.half-title .deck{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.4vw,29px);margin:20px auto 0;max-width:26em}
.half-title .orn{display:block;margin:26px auto 0;color:#F0C9A8}
.half-title--compact{padding:20px var(--pad) 18px;display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}
.half-title--compact .name{font-size:clamp(26px,4vw,40px);margin:0}
.half-title--compact .mark{margin:0}

/* ---------- nav ---------- */
.nav{background:var(--page);border-bottom:1px solid var(--rule);position:relative}
.nav__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 40px;padding:16px var(--pad)}
.nav a{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:10px 2px;min-height:48px}
.nav a:hover{color:var(--crimson);text-decoration:none}
.nav a[aria-current]{color:var(--crimson);box-shadow:inset 0 -2px 0 var(--crimson)}
.nav__toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.nav__burger{display:none}
@media (max-width:800px){
  .nav__inner{display:none;flex-direction:column;align-items:stretch;gap:0;padding-bottom:10px}
  .nav__inner a{justify-content:flex-start;border-top:1px solid var(--rule);letter-spacing:.14em}
  .nav__toggle:checked ~ .nav__inner{display:flex}
  .nav__burger{display:flex;align-items:center;gap:10px;justify-content:center;padding:14px var(--pad);min-height:48px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
}
.crumb{background:var(--page);border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber)}
.crumb .wrap-wide{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;padding-block:10px}
.crumb a{color:var(--umber)}

/* ---------- home: hero ---------- */
.hero{position:relative;background:#1a1713}
.hero img{width:100%;height:clamp(360px,68vh,820px);object-fit:cover;object-position:center 55%}
.hero__plate{background:var(--page);border-top:3px solid var(--crimson)}
.hero__plate .wrap{padding-block:30px 34px}
.hero__plate h2{font-family:var(--serif);font-size:clamp(30px,5.2vw,74px);line-height:1.02;letter-spacing:-.015em;max-width:24em}
.hero__plate .deck{font-family:var(--sans);font-size:clamp(15px,1.5vw,20px);line-height:1.5;color:var(--umber);margin:18px 0 0;max-width:46em}
@media (min-width:1100px){
  .hero__plate{margin:0 auto;position:relative}
  .hero__plate .wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:0 56px;align-items:end}
  .hero__plate .deck{margin:0}
}

/* ---------- bands ---------- */
.band{padding:clamp(48px,7vw,120px) 0;background:var(--page)}
.band--ground{background:var(--ground)}
.band--tight{padding-block:clamp(36px,4vw,68px)}
.band__head{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;justify-content:space-between;margin-bottom:clamp(24px,3vw,48px)}
.band__head h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,50px);line-height:1.08;max-width:30em}
.band__head .more{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.orn-rule{display:flex;justify-content:center;color:var(--crimson);padding:6px 0}

/* opening piece */
.opening{display:grid;gap:30px}
.opening__fig{border:1px solid var(--linen);background:#EFE9DB;padding:12px}
.opening h3{font-family:var(--serif);font-size:clamp(28px,4vw,58px);line-height:1.04;margin-bottom:18px}
.opening h3 a{color:var(--ink)}
.opening .drop{float:left;margin:8px 22px 4px 0;color:var(--crimson)}
.opening p{font-size:1.06em}
@media (min-width:1100px){
  .opening{grid-template-columns:1.15fr 1fr;gap:0 clamp(40px,4vw,88px);align-items:start}
  .opening__body{padding-top:4px}
}

/* writers band — three unequal cards */
.writers{display:grid;gap:28px}
.wcard{background:var(--page);border-top:2px solid var(--crimson);display:flex;flex-direction:column;height:100%}
.band--ground .wcard{background:var(--page)}
.wcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.wcard__b{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.wcard h3{font-family:var(--grot);font-weight:600;letter-spacing:-.02em;font-size:clamp(22px,2.2vw,32px);line-height:1.02;margin-bottom:12px}
.wcard h3 a{color:var(--ink)}
.wcard p{font-size:.95em;color:#3B342A}
.wcard .label{margin-top:auto;padding-top:14px}
.wcard--lead img{aspect-ratio:3/2}
@media (min-width:900px){
  .writers{grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,2.4vw,40px)}
  .wcard--lead h3{font-size:clamp(30px,3.4vw,50px)}
  .wcard--lead img{aspect-ratio:4/3}
  .wcard--lead .wcard__b{padding:26px 28px 30px}
}

/* houses strip */
.strip{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.chip{flex:0 0 240px;background:var(--page);border:1px solid var(--linen);padding:10px;display:block}
.band--ground .chip{background:var(--page)}
.chip img{aspect-ratio:5/3;object-fit:cover;width:100%}
.chip strong{display:block;font-family:var(--grot);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink);margin:12px 2px 4px}
.chip span{display:block;font-family:var(--sans);font-size:12.5px;color:var(--umber);margin:0 2px 4px}
@media (min-width:1100px){.strip{overflow:visible}.chip{flex:1 1 0}}

/* two-column editorial pair */
.pair{display:grid;gap:clamp(32px,4vw,64px)}
.pair article{display:flex;flex-direction:column}
.pair img{width:100%;object-fit:cover;aspect-ratio:3/2}
.pair h3{font-family:var(--serif);font-size:clamp(24px,2.8vw,42px);line-height:1.06;margin:18px 0 12px}
.pair h3 a{color:var(--ink)}
.pair p{color:#3B342A}
.pair .matte{border:1px solid var(--linen);background:#EFE9DB;padding:12px}
@media (min-width:1000px){.pair{grid-template-columns:1.45fr 1fr;align-items:start}}

/* prizes: one quiet line */
.quiet{background:var(--page);text-align:center;padding:clamp(52px,7vw,110px) var(--pad)}
.quiet .rule{width:120px;height:3px;background:var(--crimson);margin:0 auto 30px}
.quiet p{font-family:var(--serif);font-size:clamp(24px,3.4vw,50px);line-height:1.16;max-width:32em;margin:0 auto}
.quiet .more{display:inline-flex;align-items:center;gap:9px;margin-top:30px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

/* ---------- map: the one dark sheet in the site ---------- */
.mapband{background:var(--ink);color:var(--page);padding:clamp(48px,6vw,104px) 0;border-top:6px solid var(--crimson)}
.mapband h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,52px);line-height:1.06;max-width:26em;color:var(--page)}
.mapband p{color:var(--linen);max-width:44em}
.map-figure{margin-top:clamp(24px,3vw,44px)}
.map-slot{background:#100E0A;border:1px solid rgba(201,191,168,.3)}
.map-slot svg{display:block;width:100%;height:auto}
.map-land{fill:var(--linen);stroke:#100E0A;stroke-width:1.4}
.map-neighbour{fill:rgba(201,191,168,.09);stroke:rgba(201,191,168,.22);stroke-width:1}
.map-pin circle{fill:var(--crimson);stroke:#F7EDE4;stroke-width:2.5;r:26px}
.map-pin text{font-family:var(--sans);font-size:46px;font-weight:600;fill:#14120E;paint-order:stroke;stroke:#EFE7D6;stroke-width:9px}
/* on a phone the map is ~330px wide: the labels would be 6px on screen, so the legend below carries the names */
@media (max-width:999px){.map-pin text{display:none}}
@media (min-width:1920px){.map-pin text{font-size:40px;stroke-width:8px}}
@media (min-width:2200px){.map-pin text{font-size:34px;stroke-width:7px}}
.map-pin:hover circle{fill:#E0575C}
.map-figure figcaption{font-family:var(--sans);font-size:14.5px;color:#A79C8C;margin-top:16px;max-width:50em}
.mapband .credit{color:#8C7F6C}
.map-legend{list-style:none;margin:22px 0 0;padding:0}
.map-legend .lbl{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#F0C9A8;padding-bottom:8px}
.map-legend li{border-top:1px solid rgba(201,191,168,.26)}
.map-legend a{display:block;padding:13px 14px 13px 12px;color:var(--page);border-left:3px solid transparent}
.map-legend a:hover{text-decoration:none;background:rgba(168,21,27,.28);border-left-color:var(--crimson);color:#fff}
.map-legend .pl{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#E0575C}
.map-legend .dot{width:10px;height:10px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 2px #F0C9A8;flex:none}
.map-legend .ti{display:block;font-family:var(--serif);font-size:1.04em;line-height:1.22;margin-top:5px;color:#F3EEE1}
@media (min-width:1000px){
  .map-figure{display:grid;grid-template-columns:minmax(0,600px) minmax(300px,1fr);gap:0 clamp(32px,3.5vw,56px);align-items:start}
  .map-figure figcaption{grid-column:1/-1}
  .map-legend{margin-top:0}
}
@media (min-width:1440px){
  .map-figure{grid-template-columns:minmax(0,680px) minmax(320px,1fr)}
  .map-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,2.5vw,48px)}
  .map-legend .lbl{grid-column:1/-1}
}
@media (min-width:1920px){.map-figure{grid-template-columns:minmax(0,900px) minmax(340px,1fr)}}
@media (min-width:2560px){.map-figure{grid-template-columns:minmax(0,1060px) minmax(340px,1fr)}}

/* ---------- supporters ---------- */
.sponsors{background:var(--ground);padding:clamp(44px,5vw,84px) 0}
.sponsor-group{--cols:1;--sgap:20px;--tile:calc((100% - (var(--cols) - 1) * var(--sgap)) / var(--cols));display:grid;grid-template-columns:repeat(auto-fill,minmax(0,var(--tile)));justify-content:start;gap:var(--sgap)}
.sponsor-group--feat{margin-bottom:30px;gap:var(--sgap)}
.sponsor-group--feat .sponsor{border-top:3px solid var(--crimson)}
.sponsor-group--roll{gap:var(--sgap)}
.sponsor-tier{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--umber);margin:0 0 12px}
.sponsor{background:var(--page);border:1px solid var(--linen);padding:16px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.sponsor:hover{text-decoration:none;border-color:var(--crimson)}
.sponsor .logo-box{background:#241F1A;display:flex;align-items:center;justify-content:center;padding:10px 14px;aspect-ratio:4/1;width:100%;overflow:hidden}
.sponsor .logo-box img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-name{font-family:var(--grot);font-weight:600;font-size:19px;letter-spacing:-.01em}
.sponsor-blurb{font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--umber)}
/* one constant tile and one logo-box size for every slot, every row, every tier;
   the tracks are fixed and the slack goes into the gaps, so a part-filled last row still reads as a grid */
@media (min-width:760px){.sponsor-group{--cols:2}}
@media (min-width:1100px){.sponsor-group{--cols:3}}
@media (min-width:1600px){.sponsor-group{--cols:4;--sgap:24px}}
@media (min-width:2200px){.sponsor-group{--cols:5;--sgap:28px}}

/* ---------- footer ---------- */
.colophon{background:var(--teal);color:#E7F1F0;padding:clamp(44px,5vw,76px) 0 40px;text-align:center}
.colophon .orn{display:block;margin:0 auto 18px;color:#F0C9A8}
.colophon .name{font-family:var(--grot);font-weight:600;font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;color:#F7EDE4}
.colophon nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:24px 0 0}
.colophon nav a{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#E7F1F0}
.colophon .line{font-family:var(--serif);font-style:italic;font-size:17px;color:#A8C6C4;margin:24px auto 0;max-width:44em}

/* ---------- section (category) pages ---------- */
.part-title{background:var(--crimson);color:#F7EDE4;text-align:center;padding:clamp(44px,5vw,80px) var(--pad)}
.part-title .kicker{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;opacity:.85}
.part-title h1{font-family:var(--serif);font-size:clamp(40px,8vw,104px);line-height:.98;margin:16px 0 0}
.part-title .deck{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,27px);line-height:1.4;max-width:34em;margin:20px auto 0}
.part-title .ico{width:34px;height:34px;margin:0 auto}
.opener{position:relative;background:#1a1713}
.opener img{width:100%;height:clamp(260px,44vh,560px);object-fit:cover}
.opener figcaption{font-family:var(--sans);font-size:13.5px;color:var(--umber);background:var(--page);padding:14px var(--pad)}
.opener figcaption .credit{color:var(--umber);opacity:.8}

.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:32px}
.cat-list li{display:flex}
.entry{background:var(--page);border:1px solid var(--rule);display:flex;flex-direction:column;width:100%;height:100%}
.band--ground .entry{background:var(--page)}
.entry img{width:100%;aspect-ratio:3/2;object-fit:cover}
.entry__b{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.entry h2,.entry h3{font-family:var(--serif);font-size:clamp(22px,2vw,31px);line-height:1.1;margin-bottom:12px;min-height:2.2em}
.entry h2 a,.entry h3 a{color:var(--ink)}
.entry p{font-size:.95em;color:#3B342A}
.entry .label{margin-top:auto;padding-top:16px}
@media (min-width:760px){.cat-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){
  .cat-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:40px}
  .cat-list li{grid-column:span 2}
  .cat-list li.lead{grid-column:span 6}
  .cat-list li.lead .entry{flex-direction:row}
  .cat-list li.lead img{width:58%;aspect-ratio:16/10;flex:none}
  .cat-list li.lead .entry__b{padding:clamp(28px,3vw,52px)}
  .cat-list li.lead h2{font-size:clamp(30px,3.4vw,52px);min-height:0}
  .cat-list li.lead p{font-size:1.12em;max-width:32em}
}
@media (min-width:1900px){.cat-list li{grid-column:span 2}.cat-list li.lead img{width:54%}}

/* archive */
.arch{display:grid;gap:44px}
.arch h2{font-family:var(--serif);font-size:clamp(24px,2.6vw,38px);border-bottom:2px solid var(--crimson);padding-bottom:10px;margin-bottom:6px}
.arch ul{list-style:none;margin:0;padding:0}
.arch li{border-bottom:1px solid var(--rule)}
.arch li a{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;padding:14px 2px;color:var(--ink)}
.arch li a:hover{color:var(--crimson);text-decoration:none;background:rgba(168,21,27,.05)}
.arch .t{font-size:1.02em;flex:1 1 320px}
.arch .s{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--umber)}
@media (min-width:1000px){.arch{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px clamp(40px,4vw,80px)}}
@media (min-width:1800px){.arch{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- article ---------- */
.art-head{background:var(--page);padding:clamp(38px,5vw,80px) 0 clamp(24px,3vw,40px)}
.art-head .kicker{display:inline-flex;align-items:center;gap:9px}
.art-head h1{font-family:var(--serif);font-size:clamp(34px,6vw,92px);line-height:.98;letter-spacing:-.015em;margin:18px 0 0;max-width:24em}
.art-head .lead{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,30px);line-height:1.4;color:#3B342A;margin:22px 0 0;max-width:34em}
.art-head .orn{display:block;color:var(--crimson);margin-top:26px}

.a-body{background:var(--page);padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,96px)}
.a-flow{padding-inline:var(--pad);max-width:calc(var(--measure) + 2*var(--pad));margin:0 auto;display:flow-root}
.a-unit,.fig-bleed,.fig-breakout{clear:both}
.a-flow > h2{font-family:var(--serif);font-size:clamp(25px,3vw,42px);line-height:1.1;margin:1.5em 0 .55em}
.a-flow > h3{font-family:var(--grot);font-weight:600;font-size:clamp(19px,2vw,26px);letter-spacing:-.01em;margin:1.4em 0 .5em}
.a-flow > p{margin:0 0 1.15em}
.a-flow > p.first::first-letter{float:left;font-family:var(--serif);font-size:4.1em;line-height:.82;padding:.06em .12em 0 0;color:var(--crimson)}
.a-side{font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--umber);border-top:2px solid var(--crimson);padding-top:10px;margin:0 0 1.6em}
.credit{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.02em;color:var(--umber);opacity:.85;margin-top:7px}

/* figure treatments */
.article-figure{margin:2.6em 0 2.8em}
.article-figure img{width:100%}
.article-figure figcaption{font-family:var(--sans);font-size:15px;line-height:1.5;color:#3B342A;margin-top:12px}
.fig-bleed{margin:2.4em 0 2.6em}
.fig-bleed img{aspect-ratio:16/9;object-fit:cover;width:100%}
.fig-bleed figcaption{max-width:64ch;padding-inline:var(--pad);margin-inline:auto}
.fig-mat{border:1px solid var(--linen);background:#EFE9DB;padding:12px}
.fig-mat figcaption{padding:0 2px}
.fig-inset{border-left:3px solid var(--crimson);padding-left:16px}
.fig-inset img{aspect-ratio:1/1;object-fit:cover}
@media (min-width:620px){
  .fig-inset{float:right;width:44%;margin:.4em 0 2.2em 28px}
  .fig-inset--left{float:left;margin:.4em 28px 2.2em 0}
}

/* pulled units */
.a-unit{margin:2.8em 0 2.4em}
.pullquote{margin:2em 0;border-top:2px solid var(--crimson);border-bottom:1px solid var(--rule);padding:22px 0}
.pullquote p{font-family:var(--serif);font-size:clamp(22px,2.6vw,36px);line-height:1.18;margin:0}
.blockquote{margin:2em 0;padding-left:20px;border-left:3px solid var(--linen)}
.blockquote p{font-style:italic;font-size:1.06em;margin-bottom:.5em}
.blockquote cite{font-family:var(--sans);font-size:13.5px;font-style:normal;color:var(--umber)}
.callout{background:var(--ground);border-top:3px solid var(--crimson);padding:clamp(20px,2.4vw,32px)}
.callout h3,.a-unit h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);margin:0 0 14px}
.callout p:last-child,.callout dl:last-child{margin-bottom:0}
.callout dt{font-family:var(--grot);font-weight:600;font-size:1.02em;font-style:italic}
.callout dd{margin:4px 0 16px;font-size:.98em}
.callout dd:last-child{margin-bottom:0}
.note{font-family:var(--sans);font-size:15px;color:var(--umber);border-left:3px solid var(--linen);padding-left:16px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;gap:2px 26px;padding:15px 0;border-top:1px solid var(--rule)}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--grot);font-size:clamp(21px,2.1vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.02;color:var(--crimson)}
.t-what{font-size:1em}
@media (min-width:700px){.timeline li{grid-template-columns:minmax(150px,240px) minmax(0,1fr);align-items:baseline}}
.datatable,.versus{width:100%;font-family:var(--sans);font-size:15.5px;margin:1.6em 0}
.datatable th,.versus th{text-align:left;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--umber);border-bottom:2px solid var(--ink);padding:10px 12px 10px 0}
.datatable td,.versus td{border-bottom:1px solid var(--rule);padding:12px 12px 12px 0;vertical-align:top}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;background:var(--rule);margin:1.8em 0}
.statblock{background:var(--page);padding:20px}
.stat-num{display:block;font-family:var(--grot);font-weight:600;font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:-.03em;color:var(--crimson)}
.stat-label{display:block;font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--umber);margin-top:8px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:2em 0}
.gallery figcaption{font-family:var(--sans);font-size:13px;color:var(--umber);margin-top:8px}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-family:var(--sans);font-size:14px;color:var(--umber);margin-top:10px}

/* cards / refs */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:2em 0}
.profile-card{background:var(--ground);border-top:2px solid var(--crimson);padding:18px;display:flex;flex-direction:column}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-family:var(--grot);font-weight:600;font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
.profile-card .p-role{font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);margin-bottom:10px}
.profile-card p{font-size:.95em}
.profile-card .p-links,.profile-card .p-attr{font-family:var(--sans);font-size:13px;margin-top:auto;padding-top:10px}
.profile-card .p-attr{color:var(--umber)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:1.8em 0}
.org-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 14px;align-items:center;background:var(--ground);border:1px solid var(--linen);padding:12px 14px;color:var(--ink)}
.org-card:hover{text-decoration:none;border-color:var(--crimson)}
.org-logo{width:56px;height:56px;object-fit:contain;grid-row:span 2}
.org-name{font-family:var(--grot);font-weight:600;font-size:16px;align-self:end}
.org-host{font-family:var(--sans);font-size:12.5px;color:var(--umber);align-self:start}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-card.no-logo .org-name,.org-card.no-logo .org-host{grid-column:1}
.entity-ref{font-family:var(--sans);font-size:.94em;white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:1.4em 0 0}
.further-grid a{background:var(--ground);border-top:2px solid var(--crimson);padding:18px;font-family:var(--serif);font-size:1.05em;line-height:1.25;color:var(--ink)}
.further-grid a:hover{text-decoration:none;background:#E3DAC5}
.related{background:var(--ground);padding:clamp(36px,4vw,64px) 0}
.related h2{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);margin-bottom:18px}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.related-links a{display:block;background:var(--page);border-top:2px solid var(--crimson);padding:20px;font-family:var(--serif);font-size:1.08em;line-height:1.2;color:var(--ink)}
.related-links a:hover{text-decoration:none;color:var(--crimson)}
.related-links .s{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--umber);margin-bottom:10px}

/* prose flow on big screens: the outer margins carry captions and attributions */
@media (min-width:1100px){
  .a-flow{display:grid;grid-template-columns:var(--note) minmax(0,var(--measure)) var(--note);justify-content:center;column-gap:clamp(28px,3vw,56px);max-width:none;padding-inline:var(--pad)}
  .a-flow > *{grid-column:2}
  .a-side{grid-column:1;text-align:right;border-top-width:2px;margin-top:.4em;align-self:start}
  .a-side--right{grid-column:3;text-align:left}
  .fig-breakout{grid-column:2/4;display:grid;grid-template-columns:minmax(0,1fr) var(--note);column-gap:clamp(28px,3vw,56px);align-items:start;margin:2.4em 0}
  .fig-breakout figcaption{margin-top:0}
  .a-unit{grid-column:2/4;display:grid;grid-template-columns:minmax(0,1fr) var(--note);column-gap:clamp(28px,3vw,56px)}
  .a-unit > h3{grid-column:2;grid-row:1;margin:0}
  .a-unit > *:not(h3){grid-column:1}
  .fig-bleed{grid-column:1/4}
  /* the margin figure spans several prose rows, so it never sets the height of one row */
  /* the margin figure is hung off the left margin: zero-height cell, so it never sizes a prose row */
  .fig-inset,.fig-inset--left{grid-column:1;align-self:start;justify-self:stretch;width:auto;float:none;height:0;overflow:visible;margin:.35em 0 0;border:0;padding:0;text-align:right}
  .fig-inset > img{border-right:3px solid var(--crimson);padding-right:16px}
  .fig-inset > figcaption{border-right:3px solid var(--crimson);padding-right:16px}
  .fig-inset img{aspect-ratio:4/3}
}
/* token steps, ascending — the page gains width and type above the desktop cap */
@media (min-width:760px){:root{--body:18px;--pad:32px}}
@media (min-width:1100px){:root{--note:230px;--body:18.5px;--pad:40px}.nav a{font-size:20px}}
@media (min-width:1440px){:root{--note:300px;--measure:72ch;--body:19.5px}.wrap{max-width:1400px}.nav a{font-size:22px}.nav__inner{gap:2px 52px}}
@media (min-width:1920px){:root{--note:430px;--measure:76ch;--body:21.5px}.wrap{max-width:1560px}.wrap-wide{max-width:1840px}.hero img{height:min(78vh,980px)}.nav a{font-size:25px}.nav__inner{gap:2px 64px;padding-block:22px}}
@media (min-width:2560px){:root{--note:560px;--measure:80ch;--body:23px}.wrap{max-width:1760px}.wrap-wide{max-width:2200px}.nav a{font-size:28px}.nav__inner{gap:2px 76px}}

/* styleguide only */
.sg{background:var(--page)}
.sg section{border-top:1px solid var(--rule);padding:34px 0}
.sg h2{font-family:var(--grot);font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:18px;color:var(--crimson)}

/* ---------- compaction for phones ---------- */
@media (max-width:760px){
  .half-title{padding:34px var(--pad) 30px}
  .half-title .mark svg{width:64px;height:64px}
  .half-title .deck{font-size:17px;margin-top:14px}
  .half-title .orn{width:200px;margin-top:18px}
  .half-title--compact{padding:14px var(--pad)}
  .half-title--compact .mark svg{width:30px;height:30px}
  .hero img{height:clamp(280px,56vh,440px)}
  .hero__plate .wrap{padding-block:22px 26px}
  .crumb .wrap-wide{padding-block:8px;gap:2px 12px}
  .crumb span:last-child{display:none}
  .art-head{padding-top:26px}
  .art-head .orn{width:180px;margin-top:18px}
  .colophon .orn{width:180px}
  .colophon nav{gap:6px 18px}
  .strip{margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-snap-type:x mandatory}
  .chip{flex:0 0 226px;scroll-snap-align:start}
  .band__head{gap:6px 18px}
  .quiet{padding-block:44px}
  .part-title{padding-block:34px 30px}
  .part-title .ico{width:26px;height:26px}
  .opener img{height:clamp(200px,32vh,300px)}
  .a-flow > p.first::first-letter{font-size:3.4em}
  .fig-bleed img{aspect-ratio:4/3}
  .a-unit,.article-figure{margin-block:2.4em}
  .callout{padding:18px}
  .map-figure figcaption{margin-top:12px}
  .map-legend{margin-top:16px}
  .map-legend a{padding:12px 8px}
  .sponsors{padding-block:36px}
  .entry h2 a,.entry h3 a{display:inline-block;padding-block:10px}
  .map-pin circle{r:60px}
}

/* 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}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.colophon nav{flex-wrap:wrap!important}
.colophon nav > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!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-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

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

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit-panels{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px;width:100%}
.mapkit-panels>svg.mapkit{width:100%;height:auto;display:block}
@media (max-width:700px){.mapkit-panels{grid-template-columns:minmax(0,1fr)}}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#EAE3D3;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:10.3}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

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

/* op-money-columns: the supporters block ran one tile per row — 9 tiles,
   1764px at 390, 19% of the whole page. Two columns bring it to
   1156px (34% shorter). Checked before writing: no new overflow, smallest mark still
   104px wide, longest blurb 2 lines, tile heights 193-239px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-group.sponsor-group--feat, .sponsor-group.sponsor-group--roll), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-group.sponsor-group--feat{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sponsor-group.sponsor-group--feat > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group.sponsor-group--feat > * *{min-width:0!important;max-width:100%}
    .sponsor-group.sponsor-group--feat img,.sponsor-group.sponsor-group--feat svg{max-width:100%;height:auto}
  .sponsor-group.sponsor-group--roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sponsor-group.sponsor-group--roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group.sponsor-group--roll > * *{min-width:0!important;max-width:100%}
    .sponsor-group.sponsor-group--roll img,.sponsor-group.sponsor-group--roll svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-group.sponsor-group--roll (7 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-group.sponsor-group--roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

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

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.matte > img,
  body > figure.opener > img,
  body > section.hero > img,
  div.a-flow > figure.article-figure.fig-bleed > img,
  div.a-flow > figure.article-figure.fig-inset > img,
  div.a-flow > figure.article-figure.fig-inset.fig-inset--left > img,
  div.opening > figure.opening__fig > img,
  div.pair > article > img,
  div.strip > a.chip > img,
  div.writers > article.wcard > img,
  div.writers > article.wcard.wcard--lead > img,
  figure.article-figure.fig-breakout > div.fig-mat > img,
  li > article.entry > img,
  li.lead > article.entry > img){height:auto}
/* op-img-dims:end */
@media (min-width:1060px) and (max-width:1439px){.sponsor-group.sponsor-group:has(> [data-partner]){grid-template-columns:repeat(auto-fit,minmax(min(327px,calc(50% - 10px)),1fr))!important;justify-content:stretch!important}.sponsor-group.sponsor-group > [data-partner]{width:auto!important;max-width:none!important}}

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}