/* Sebastian County Online — "Low Water"
   Palette: ground · ink · accent (brick) · secondary (blue) · mats
   Type: Familjen Grotesk (display, labels, nav) · Crimson Pro (reading) */

:root{
  --paper:#EFE7D9;        /* ground */
  --mat:#DED7C8;          /* mat  */
  --tan:#C9C0AE;          /* panel ground */
  --stone:#B8B0A0;        /* rules on tan */
  --ink:#16161A;          /* ink */
  --ink-2:#4A463F;        /* secondary ink */
  --ink-3:#8A8378;        /* quiet ink, credits */
  --brick:#B3401B;        /* accent — saturated */
  --blue:#1B4F8A;         /* secondary — saturated */
  --dark:#2A261F;         /* dark ground (logo boxes, deep bands) */

  --display:"Familjen Grotesk",system-ui,"Helvetica Neue",Arial,sans-serif;
  --read:"Crimson Pro",Georgia,"Times New Roman",serif;

  --gut:clamp(18px,4vw,56px);
  --measure:80ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--read);font-size:19px;line-height:1.62;
  text-wrap:pretty;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--brick)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.03;margin:0}
p{margin:0 0 1.05em}
hr{border:0;border-top:1px solid var(--ink);margin:0}

.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:820px;margin:0 auto;padding-inline:var(--gut)}
.kicker{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.kicker--brick{color:var(--brick)}
.icon{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.16em}

/* ── the drawn device: strata rules ─────────────────────────────── */
.strata{display:block;width:100%;height:13px;color:var(--ink)}
.strata--brick{color:var(--brick)}
.strata--tight{height:9px}

/* ── masthead: a masthead, not a menu ──────────────────────────── */
.masthead{background:var(--ink);color:var(--paper);border-bottom:3px solid var(--brick)}
.masthead a{color:var(--paper)}
.masthead a:hover{color:#E9A03C}
.masthead__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 36px;padding-block:16px 15px}
.masthead__id{display:flex;align-items:center;gap:15px;min-width:0}
.masthead__emblem{width:54px;height:54px;flex:0 0 auto}
.masthead__name{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.5vw,32px);letter-spacing:-.035em;line-height:1}
@media (min-width:560px){.masthead__name{white-space:nowrap}}
.masthead__nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(22px,2.2vw,34px)}
.masthead__nav a{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:clamp(15px,1.35vw,19px);letter-spacing:-.005em;color:var(--mat)}
.masthead__nav a .icon{color:var(--brick);width:clamp(17px,1.55vw,21px);height:clamp(17px,1.55vw,21px);flex:0 0 auto}
.masthead__nav a:hover .icon{color:#E9A03C}
.masthead__nav a[aria-current="page"]{color:#E9A03C}
.masthead__nav a[aria-current="page"] .icon{color:#E9A03C}
.masthead__all{padding-left:clamp(22px,2.2vw,34px);border-left:1px solid rgba(239,231,217,.22)}

/* ── homepage opener: the signature sits on the photograph ──────── */
.opener{position:relative;background:var(--ink)}
.opener img{width:100%;height:min(86vh,860px);object-fit:cover;display:block}
.opener__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,10,9,.88) 0%,rgba(12,10,9,.6) 34%,rgba(12,10,9,.05) 62%,transparent 100%);pointer-events:none}
.opener__over{position:absolute;left:0;right:0;bottom:0;padding:0 0 clamp(26px,4vw,54px);color:var(--paper)}
.opener__over .inner{display:grid;gap:22px 44px;grid-template-columns:1fr}
@media (min-width:1000px){.opener__over .inner{grid-template-columns:1.25fr .75fr;align-items:end}}
.opener__over h2{font-size:clamp(27px,4.1vw,54px);line-height:1.02;max-width:26ch;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.opener__over p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.42;color:#E7DFD1;max-width:50ch}
.opener__over .credit{color:#BDB3A2;margin-top:14px}
@media (max-width:719px){
  .opener img{height:56vh}
  .opener__over{position:static;background:var(--ink);padding:26px 0 30px}
  .opener__scrim{display:none}
}

/* ── figure system ──────────────────────────────────────────────── */
figure{margin:0}
figcaption{font-family:var(--read);font-size:17px;line-height:1.42;color:var(--ink-2)}
.credit{display:block;font-family:var(--display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:8px}

/* 1 · matted — photograph sits on a tan mat, caption inside the mat */
.fig-mat{background:var(--tan);padding:18px 18px 20px;margin:36px 0}
.fig-mat img{width:100%}
.fig-mat figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--stone);max-width:60ch}

/* 2 · offset — caption hangs beside the image and steps out of the column */
.fig-offset{display:grid;grid-template-columns:1fr;gap:14px;margin:40px 0}
.fig-offset img{width:100%;border-bottom:5px solid var(--brick)}
@media (min-width:860px){
  .fig-offset{grid-template-columns:1fr 220px;gap:24px;align-items:start}
  .fig-offset figcaption{padding-top:6px}
}

/* 3 · inset — small, in the column, hairline frame, prose runs beside it */
.fig-inset{margin:26px 0;padding:10px;border:1px solid var(--ink)}
.fig-inset img{width:100%}
.fig-inset figcaption{margin-top:10px;font-size:16px}
@media (min-width:760px){
  .fig-inset{float:right;width:300px;margin:8px 0 20px 32px}
}

/* 4 · full-bleed — breaks the measure entirely */
.fig-bleed{margin:56px 0}
.fig-bleed img{width:100%;height:clamp(280px,52vh,620px);object-fit:cover}
.fig-bleed figcaption{max-width:64ch;padding:16px var(--gut) 0}

/* 5 · plate — deep ground behind a smaller photograph */
.fig-plate{background:var(--ink);color:var(--mat);padding:22px;margin:40px 0}
.fig-plate figcaption{color:var(--mat)}
.fig-plate .credit{color:var(--stone)}
.fig-plate a,.article__body .fig-plate a{color:#E9A03C;border-bottom:1px solid #E9A03C}
.fig-plate a:hover,.article__body .fig-plate a:hover{background:transparent;color:#F3D6C9;border-bottom-color:#F3D6C9}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:36px 0}
.gallery figure{display:flex;flex-direction:column}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover}
.gallery figcaption{margin-top:10px;font-size:16px}

/* ── feature blocks ────────────────────────────────────────────── */
.flag{background:var(--blue);color:var(--paper)}
.flag a{color:var(--paper)}
.flag__in{display:grid;grid-template-columns:1fr;gap:30px;padding-block:clamp(40px,6vw,78px)}
.flag h2{font-size:clamp(30px,4.4vw,56px);line-height:1.0}
.flag p{font-size:19px;color:#D8E0EE;max-width:56ch}
.flag .kicker{color:#9FB6D6}
.flag img{width:100%;aspect-ratio:16/10;object-fit:cover}
.flag__more{font-family:var(--display);font-weight:700;font-size:16px;border-bottom:3px solid var(--paper);display:inline-block;padding-bottom:2px}
@media (min-width:960px){
  .flag__in{grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
}

.band-dark{background:var(--ink);color:var(--mat)}
.band-dark h2{color:var(--paper)}
.band-dark a{color:var(--paper)}
.band-tan{background:var(--tan)}
.band-brick{background:var(--brick);color:var(--paper)}
.band-brick a{color:var(--paper)}
.band-brick .kicker{color:#F3D6C9}

.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.trio h3{font-size:23px;line-height:1.1;margin-bottom:8px}
.trio p{font-size:17px;margin:0;color:var(--ink-2)}
.band-dark .trio p{color:var(--stone)}
.band-brick .trio p{color:#F5DDD2}
.trio__item{display:flex;flex-direction:column}
.trio__item .num{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--brick);margin-bottom:10px}
.band-brick .trio__item .num,.band-dark .trio__item .num{color:#E9A03C}

/* ledger — heading beside a ruled, numbered list of entries */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(30px,4.5vw,68px);align-items:start}
.ledger__head h2{font-size:clamp(28px,3.8vw,50px);line-height:1;max-width:18ch;margin:0 0 16px}
.ledger__head p{margin:0 0 22px;font-size:18px;max-width:38ch;color:var(--stone)}
.ledger__head .kicker{margin-bottom:14px}
.ledger__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(227,223,214,.22)}
.ledger__list li{border-bottom:1px solid rgba(227,223,214,.22)}
.ledger__list a{display:grid;grid-template-columns:52px 1fr;gap:0 18px;padding:20px 0;align-items:baseline;text-decoration:none}
.ledger__num{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.14em;color:#E9A03C}
.ledger__list h3{font-size:24px;line-height:1.08;margin:0 0 7px}
.ledger__list p{margin:0;font-size:17px;line-height:1.45;color:var(--stone);max-width:46ch}
.ledger__list a:hover h3{color:#E9A03C}
@media (max-width:520px){.ledger__list a{grid-template-columns:1fr;gap:8px}}

/* sections strip — six rooms in one row, each with its drawn mark */
.rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--stone);border:1px solid var(--stone)}
@media (min-width:700px){.rooms{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){
  .rooms{grid-template-columns:repeat(6,1fr)}
  .rooms__item p{display:none}
  .rooms__item h3{font-size:17px}
  .rooms__mark{width:44px;height:44px}
  .rooms__mark svg{width:25px;height:25px}
}
@media (min-width:1180px){
  .rooms__item p{display:block}
  .rooms__item h3{font-size:20px}
  .rooms__mark{width:52px;height:52px}
  .rooms__mark svg{width:30px;height:30px}
}
.rooms__item{background:var(--paper);padding:22px 18px 22px;display:flex;flex-direction:column;gap:12px}
.rooms__item:hover{background:var(--mat)}
.rooms__mark{width:52px;height:52px;border-radius:50%;background:var(--brick);color:var(--paper);display:grid;place-items:center;flex:0 0 auto}
.rooms__item:hover .rooms__mark{background:var(--blue)}
.rooms__mark svg{width:30px;height:30px}
.rooms__item h3{font-size:20px;line-height:1.1}
.rooms__item p{margin:0;font-size:16px;line-height:1.35;color:var(--ink-2)}
.rooms__item .count{margin-top:auto;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brick);padding-top:12px}

/* ── the towns band ──────────────────────────────────────────────── */
.towns-band{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,44px);align-items:center}
@media (min-width:900px){.towns-band{grid-template-columns:1fr 1.05fr}}
.towns-band__list{list-style:none;margin:24px 0 0;padding:0}
.towns-band__list li{border-top:1px solid rgba(239,231,217,.45)}
.towns-band__list li:last-child{border-bottom:1px solid rgba(239,231,217,.45)}
.towns-band__list a{display:block;padding:14px 0}
.towns-band__list h3{font-size:22px;margin-bottom:4px}
.towns-band__list p{margin:0;font-size:16.5px;color:#F5DDD2}
.towns-band figure{margin:0}
.towns-band img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ── map, with a legend and its bearings ─────────────────────────── */
.map-legend{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--stone);list-style:none}
.map-legend li{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:14px;color:var(--ink-2)}
.map-legend svg{width:22px;height:14px;flex:0 0 auto}
.map__edge{font-family:var(--display);font-size:22px;font-weight:600;fill:var(--ink-3);letter-spacing:.08em}
.map__state{font-family:var(--display);font-size:30px;font-weight:700;fill:var(--ink-3);letter-spacing:.16em}
/* ── map ────────────────────────────────────────────────────────── */
.map-band{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:1fr;align-items:start}
@media (min-width:940px){.map-band{grid-template-columns:1.1fr .9fr}}
.map-figure{margin:0}
.map-slot{width:100%;background:var(--mat);border:1px solid var(--ink)}
.map-slot svg{display:block;width:100%;height:auto}
.places-panel{background:var(--mat);border:1px solid var(--stone);border-top:4px solid var(--brick);padding:clamp(20px,2.4vw,30px)}
.places-panel h3{font-family:var(--display);font-size:clamp(19px,1.5vw,23px);line-height:1.25;margin:6px 0 10px}
.places-panel__note{font-size:16px;color:var(--ink-2);margin:0;max-width:46ch}
.places{list-style:none;margin:20px 0 0;padding:0}
.places li{border-top:1px solid var(--stone)}
.places li:last-child{border-bottom:1px solid var(--stone)}
.places a,.places .pl__row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:baseline;padding:12px 8px 12px 4px;text-decoration:none;color:inherit;border-left:3px solid transparent;transition:background .16s,border-color .16s}
.places a:hover{background:#fff;border-left-color:var(--brick)}
.pl__n{grid-row:span 2;align-self:center;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:14px;font-weight:700;color:#fff;background:var(--ink)}
.pl__n--seat{background:var(--blue)}
.pl__n--coal{background:var(--brick)}
.pl__n--terrace{background:#2C2A26}
.pl__name{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.005em}
.pl__co{font-family:var(--display);font-size:13px;color:var(--ink-3);letter-spacing:.02em;text-align:right;white-space:nowrap}
.pl__role{grid-column:2;font-size:15px;color:var(--ink-2)}
.places a .pl__co,.places .pl__row .pl__co{grid-column:3;grid-row:1}
.map-figure figcaption{margin-top:16px;max-width:62ch}
.map__pin-label{font-family:var(--display);font-size:20px;font-weight:600;fill:var(--ink)}
.map__num{font-family:var(--display);font-size:20px;font-weight:700;fill:#fff}
.map__tick text{font-family:var(--display);font-size:19px;font-weight:600;fill:var(--ink-3);letter-spacing:.04em}
.map__pin-link{cursor:pointer}
.map__pin-link:hover circle{opacity:1}
.map__pin-link:hover .map__pin-label{fill:var(--brick)}
.map__pin{fill:var(--brick)}
.map__pin-link:hover .map__pin{fill:var(--blue)}
.map__pin-link:hover .map__pin-label{fill:var(--brick)}

/* ── article ────────────────────────────────────────────────────── */
.article__head{padding-block:clamp(34px,5vw,64px) clamp(26px,3vw,44px)}
.article__head .kicker{display:flex;align-items:center;gap:9px}
.article__head .kicker .icon{color:var(--brick);width:19px;height:19px}
.article__title{font-size:clamp(32px,5.4vw,64px);line-height:.99;max-width:24ch}
.lead{font-family:var(--read);font-size:clamp(21px,2vw,25px);line-height:1.38;color:var(--ink);max-width:38ch;margin:22px 0 0;font-weight:600}
@media(min-width:1020px){
  .article__head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);column-gap:clamp(44px,5vw,86px);align-items:start}
  .article__head .kicker{grid-column:1;grid-row:1}
  .article__title{grid-column:1;grid-row:2;font-size:clamp(60px,7vw,104px);max-width:16ch;margin-top:12px}
  .article__head .lead{grid-column:2;grid-row:1/span 2;align-self:end;max-width:34ch;margin:0;padding:0 0 10px 30px;border-left:1px solid var(--stone);font-size:clamp(20px,1.5vw,23px);line-height:1.42}
}
.article__body{max-width:var(--measure);margin:0 auto;padding-inline:var(--gut)}
.article__body::after{content:"";display:block;clear:both}
.article__body h2{font-size:clamp(25px,2.6vw,33px);margin:44px 0 16px;line-height:1.08}
.article__body h3{font-size:22px;margin:32px 0 12px}
.article__body p{font-size:19.5px;line-height:1.66}
.article__body a{border-bottom:1px solid var(--brick);color:var(--ink)}
.article__body a:hover{background:#F3D9CF;color:var(--ink)}
.article__body ul,.article__body ol{padding-left:1.25em}
.article__body li{margin-bottom:.4em}
.bleedout{max-width:none;margin-inline:calc(50% - 50vw);padding-inline:0;width:100vw}

/* notes-for-design material: full-width interruptions, never a side rail */
.notes{background:var(--mat);border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);margin:56px 0;padding:34px 0 38px}
.notes--tan{background:var(--tan)}
.notes h2,.notes h3{font-size:clamp(21px,2.2vw,28px);margin:0 0 20px}
.notes__in{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:1fr;gap:2px 24px;padding:14px 0;border-top:1px solid var(--stone)}
.timeline li:last-child{border-bottom:1px solid var(--stone)}
.t-when{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.005em;color:var(--brick)}
.t-what{font-size:18px;line-height:1.45;color:var(--ink)}
@media (min-width:720px){
  .timeline li{grid-template-columns:minmax(180px,30%) 1fr}
}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--stone)}
.statblock{background:var(--paper);padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1;letter-spacing:-.03em;color:var(--blue)}
.stat-label{font-size:16.5px;line-height:1.35;color:var(--ink-2)}

.callout{background:var(--paper);border-left:0;border-top:4px solid var(--blue);padding:22px 24px;margin:34px 0}
.callout p{margin:0;font-size:19px}
.note{font-size:17px;color:var(--ink-2);border-top:1px solid var(--stone);padding-top:12px}
.pullquote{margin:44px 0;padding:0;border-top:4px solid var(--brick);border-bottom:1px solid var(--ink)}
.pullquote p{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.8vw,30px);line-height:1.14;letter-spacing:-.02em;padding:22px 0 24px;margin:0;max-width:34ch}
.pseam{width:88px;height:9px;margin:40px auto;background:linear-gradient(var(--ink),var(--ink)) 0 0/100% 1px no-repeat,linear-gradient(var(--brick),var(--brick)) 0 4px/100% 3px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 8px/100% 1px no-repeat}
.blockquote{margin:34px 0;padding-left:22px;border-left:3px solid var(--stone)}
.blockquote p{font-size:20px;margin:0 0 8px}
.blockquote cite{font-family:var(--display);font-size:14px;font-style:normal;color:var(--ink-3)}

.datatable,.versus{width:100%;border-collapse:collapse;margin:32px 0;font-size:17px}
.datatable th,.datatable td,.versus th,.versus td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--stone);vertical-align:top}
.datatable th,.versus th{font-family:var(--display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid var(--ink)}
.versus td+td{background:rgba(27,79,138,.06)}

/* related / further */
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--stone);border:1px solid var(--stone)}
.further-grid a{background:var(--paper);padding:20px;display:flex;flex-direction:column;gap:6px;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.14}
.further-grid a:hover{background:var(--mat)}
.further-grid a span{font-family:var(--read);font-weight:400;font-size:16.5px;line-height:1.4;color:var(--ink-2)}
.related-links{list-style:none;margin:0;padding:0}
.related-links li{border-top:1px solid var(--stone);padding:12px 0}
.related-links a{font-family:var(--display);font-weight:700;font-size:18px}

.entity-ref{border-bottom:1px solid var(--blue)}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:32px 0}
.profile-card{background:var(--mat);padding:20px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:6px}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-family:var(--display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--brick);margin:0}
.profile-card p{font-size:16.5px;margin:0}
.profile-card.no-photo{border-top:4px solid var(--brick)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:28px 0}
.org-card{display:flex;flex-direction:column;gap:4px;background:var(--mat);padding:16px}
.org-name{font-family:var(--display);font-weight:700;font-size:17px}
.org-host{font-family:var(--display);font-size:13px;color:var(--ink-3)}

/* ── roster / category listings ─────────────────────────────────── */
.cat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--stone);border:1px solid var(--stone)}
.cat-list li{background:var(--paper);display:flex}
.cat-list a{display:flex;flex-direction:column;gap:7px;padding:20px;width:100%}
.cat-list li:hover{background:var(--mat)}
.cat-list h3{font-size:20px;line-height:1.12}
.cat-list p{margin:0;font-size:16.5px;color:var(--ink-2)}
.cat-hero img{width:100%;height:clamp(220px,42vh,460px);object-fit:cover}

.roster{display:grid;gap:0;margin:0;padding:0;list-style:none}
.roster li{display:grid;grid-template-columns:1fr;gap:2px 20px;padding:13px 0;border-top:1px solid var(--stone)}
.roster li:last-child{border-bottom:1px solid var(--stone)}
.roster a{font-family:var(--display);font-weight:700;font-size:18px}
.roster span{font-size:16.5px;color:var(--ink-2)}
@media (min-width:760px){.roster li{grid-template-columns:minmax(240px,34%) 1fr;align-items:baseline}}

/* ── supporters strip (homepage only) ───────────────────────────── */
.supporters{background:var(--dark);color:var(--mat);padding:44px 0 40px;border-top:3px solid var(--brick)}
.supporters h2{color:var(--paper);font-size:clamp(20px,2.2vw,26px);margin-bottom:6px}
.supporters .kicker{color:#A79C88}
.supporters__note{font-size:16.5px;color:var(--stone);max-width:56ch;margin:0 0 26px}
.supporters__tier{margin-top:26px}
.supporters__tier h3{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#A79C88;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid rgba(239,231,217,.2)}
.sponsor-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.sponsor{display:grid;grid-template-columns:1fr;gap:12px;background:#231F19;padding:14px;color:var(--mat)}
.sponsor:hover{background:#2F2A22}
.sponsor img{width:100%;max-width:100%;max-height:44px;height:auto;object-fit:contain;object-position:left center;background:#16161A;padding:8px 10px;border:1px solid rgba(239,231,217,.14)}
.sponsor-name{font-family:var(--display);font-weight:700;font-size:15px;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor-blurb{font-size:15.5px;line-height:1.38;color:var(--stone);min-width:200px}
.sponsor.feat{background:#332B1C;box-shadow:inset 0 0 0 1px rgba(233,160,60,.4)}
@media (max-width:600px){.sponsor-row{grid-template-columns:1fr}}

/* ── footer ─────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--mat);padding:0 0 34px}
.foot a{color:var(--mat);text-decoration:none}
.foot a:hover{color:#E9A03C}
.foot__rule{padding-top:0}
.foot__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(26px,3vw,52px);padding:36px 0 34px}
@media (min-width:1000px){.foot__in{grid-template-columns:1.7fr .8fr .9fr 1.1fr}}
.foot__brand{display:flex;gap:18px;align-items:flex-start}
.foot__emblem{width:58px;height:58px;flex:0 0 auto;color:var(--brick)}
.foot__name{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.06;letter-spacing:-.03em;color:var(--paper);margin:2px 0 12px}
.foot__coord{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#A79C88;margin:14px 0 0}
.foot__note{font-size:16px;color:var(--stone);margin:0;max-width:34ch}
.foot__col h3{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#A79C88;margin:0 0 14px}
.foot__col ul{list-style:none;margin:0;padding:0}
.foot__col li{font-family:var(--display);font-size:15.5px;padding:7px 0;border-top:1px solid rgba(255,255,255,.1)}
.foot__col li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-family:var(--display);font-size:13.5px;letter-spacing:.05em;color:#8E836F}

.foot{background:var(--ink);color:var(--mat);padding:40px 0 46px}
.foot a{color:var(--mat)}
.foot a:hover{color:#E9A03C}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.foot h2{color:var(--paper);font-size:20px;max-width:34ch;margin-bottom:10px}
.foot h3{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#A79C88;margin:0 0 10px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:6px;font-family:var(--display);font-size:15px}
.foot__line{font-size:16.5px;color:var(--stone);max-width:52ch;margin:0}

.pad{padding-block:clamp(44px,6vw,84px)}
.pad-s{padding-block:clamp(28px,4vw,52px)}
.stack-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:30px}
.stack-head h2{font-size:clamp(26px,3.4vw,42px);max-width:22ch}
.stack-head p{margin:0;max-width:44ch;font-size:17.5px;color:var(--ink-2)}
.band-dark .stack-head p,.band-brick .stack-head p{color:inherit;opacity:.86}
.more{font-family:var(--display);font-weight:700;font-size:15.5px;border-bottom:2px solid var(--brick);display:inline-block;padding-bottom:2px}
.band-dark .more,.band-brick .more,.flag .more{border-color:currentColor}

.crumb{font-family:var(--display);font-size:13.5px;letter-spacing:.06em;color:var(--ink-3);padding-block:16px 0}
.crumb a{color:var(--ink-2)}

/* ── narrow screens: the nav becomes one full-height index panel ── */
@media (max-width:767px){
  .fig-inset{float:none;width:auto;margin:26px 0}
  .bleedout{margin-inline:0;width:auto}
}


/* ── shared article components ───────── */
.article-figure{background:var(--tan);padding:18px 18px 20px;margin:36px 0}
.article-figure img{width:100%}
.article-figure figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--stone);max-width:60ch}
.chart{margin:34px 0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .c-label{font-family:var(--display);font-size:13px;fill:var(--ink-2)}
.chart .c-value{font-family:var(--display);font-size:13px;font-weight:700;fill:var(--ink)}
.chart .c-bar{fill:var(--brick)}
.chart .c-bar--alt{fill:var(--blue)}
.chart .c-axis{stroke:var(--stone);stroke-width:1}
.chart figcaption{margin-top:14px;font-size:17px;color:var(--ink-2);max-width:60ch}
.profile-card .p-links a{font-family:var(--display);font-size:15px;font-weight:700;border-bottom:2px solid var(--brick)}
.profile-card .p-attr{font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0}
.org-card.no-logo{border-left:4px solid var(--blue)}
.org-card img.org-logo{max-height:34px;width:auto;object-fit:contain;background:var(--ink);padding:6px 8px;margin-bottom:6px}
.sg-dark{background:var(--dark);color:var(--mat);padding:26px;margin:26px 0}
.sg-dark h3{color:var(--paper)}
.sg-row{border-top:3px solid var(--ink);margin-top:56px;padding-top:14px}
.sg-row>h2{font-size:26px;margin-bottom:6px}
.sg-row>p.note{margin-bottom:20px}

@media (max-width:560px){
  .datatable tr,.versus tr{display:grid;grid-template-columns:1fr;padding:8px 0;border-bottom:1px solid var(--stone)}
  .datatable th,.datatable td,.versus th,.versus td{border-bottom:0;padding:4px 0}
  .datatable thead,.versus thead{display:none}
  .places a,.places .pl__row{grid-template-columns:26px minmax(0,1fr)}
  .places a .pl__co,.places .pl__row .pl__co{grid-column:2;grid-row:auto;text-align:left}
}

/* towns band — deep oxide */
.band-oxide{background:#4A2214;color:#F2E4DA}
.band-oxide a{color:#F7EDE6}
.band-oxide .kicker{color:#E5A183}
.towns-band{display:grid;gap:clamp(26px,3.2vw,52px);grid-template-columns:1fr;align-items:stretch}
@media (min-width:940px){.towns-band{grid-template-columns:1.06fr .94fr}}
.towns-band h2{font-size:clamp(26px,3.4vw,42px);max-width:20ch;margin:8px 0 0;color:#FFF7F2}
.towns-band__dek{margin:16px 0 0;font-size:17.5px;max-width:44ch;color:#E9D3C7}
.towns-band__list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:16px}
@media (min-width:620px){.towns-band__list{grid-template-columns:1fr 1fr}}
.towns-band__list a{display:block;height:100%;padding:16px 18px 18px;background:rgba(255,255,255,.05);border-top:3px solid #C4562B;transition:background .16s,transform .16s}
.towns-band__list a:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)}
.towns-band__n{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;color:#E5A183}
.towns-band__list h3{font-family:var(--display);font-size:19px;margin:8px 0 6px;color:#FFF7F2}
.towns-band__list p{margin:0;font-size:15.5px;line-height:1.5;color:#E3CDC1}
.towns-band__fig{margin:0;display:flex;flex-direction:column}
.towns-band__fig img{width:100%;flex:1 1 auto;min-height:clamp(280px,38vh,460px);object-fit:cover}
.towns-band__fig figcaption{margin-top:14px;font-size:15.5px;color:#E9D3C7}
.towns-band__fig .credit{color:#C99C86}

/* ── narrow screens: touch sizing and map legibility ────────────── */
@media (max-width:767px){
  .masthead__nav{gap:2px clamp(18px,4.6vw,26px)}
  .masthead__nav a{padding-block:9px}
  .masthead__all{padding-left:clamp(18px,4.6vw,26px)}
  .foot li a,.flag__more,.more{padding-block:11px}
  .foot li{margin:0}
  .count,.towns-band__n{font-size:13px}
  /* the map is drawn in projected units, so its type shrinks with the frame:
     drop the graticule ticks and lift the rest back to a readable size */
  .map__tick{display:none}
  .map__edge{font-size:44px !important;letter-spacing:.05em}
  .map__state{font-size:56px}
  .map__num{font-size:38px}
  .map__pin-label{font-size:38px}
  .map-legend{gap:8px 20px}
}

/* 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-mark-fit: width:100% + padding must not overflow the tile — but the declared
   HEIGHT is the mark's size and border-box alone steals the vertical padding from it.
   earlychristianireland declares height:66px with 10px top/bottom padding: border-box
   left a 46px mark and the operator read it as 'logos too small'. Keep the horizontal
   inset, drop the vertical padding, so the mark occupies the full height Design set. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!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-domain-override: per-domain, from work/css_override.css */
/* Supporter logo panels: breathing space, and a uniform height.
   Measured before: `padding: 0 10px` — zero vertical — with border-box and max-height:44px, so the
   wordmark sat hard against the panel's top and bottom edge. The panels were also ragged, because
   each image took its own natural height: 24, 44, 30, 37, 19px down the column.

   ⚠️ content-box was tried first and rejected. It preserves the artwork, but releasing the height
   cap let every panel find its own height (43, 64, 88px) and the row became more uneven, not less.
   A fixed panel height with border-box padding gives both: the panel grows to 64, the padding is
   real, and the artwork keeps its full 44px.
       before  panel 274x44  art 254x44  heights 24/44/30/37/19  padding 0 vertical
       after   panel 274x64  art 246x44  every panel 64          padding 10px/14px */
.sponsor[data-partner] img{
  box-sizing: border-box !important;
  max-height: none !important;
  height: 64px !important;
  padding: 10px 14px !important;
  object-fit: contain !important;
}

/* op-footer-compact: the footer printed 6 rows for 6 link(s) in
   1 list(s) — 1011px at 390, 9% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 1011 -> 822px (19% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(6px,2.99vw,43px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2181px at 390, 20% of the whole page. Two columns bring it to
   1494px (31% shorter). Checked before writing: no new overflow, smallest mark still
   141px wide, longest blurb 3 lines, tile heights 187-210px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-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:14px!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-odd-tier-lead: .sponsor-row (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-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-name-wrap: at 320 the money tile truncated its brand name — "Gangbang Creampie" — losing up to 30px to an
   ellipsis. The name is allowed to wrap instead of being cut: a brand that reads as half a word
   is worse than a brand on two lines. Structural only, phone widths only, desktop untouched. */
@media (max-width:360px){
  .sponsor-name{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.03; margin: 0px;}
.cat-list h2:where(.rt-h3){font-size: 20px; line-height: 1.12;}
.foot__col h2:where(.rt-h3){font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(167, 156, 136); margin: 0px 0px 14px;}
.foot h2:where(.rt-h3){font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(167, 156, 136); margin: 0px 0px 10px;}
h1:where(.rt-h2){font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.03; margin: 0px;}
.opener__over h1:where(.rt-h2){font-size: clamp(27px, 4.1vw, 54px); line-height: 1.02; max-width: 26ch; text-shadow: rgba(0, 0, 0, 0.35) 0px 2px 18px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.article__body > figure.fig-mat > img,
  div.article__body > figure.fig-offset > img,
  div.article__body > figure.fig-plate > img,
  div.flag__in.wrap > figure > img,
  div.towns-band.wrap > figure.towns-band__fig > img,
  main > figure.cat-hero > img,
  main > figure.fig-bleed > img,
  main > section.band-dark > img,
  main > section.opener > img){height:auto}
/* op-img-dims:end */