/* La Cerveteca — "The Core" */
:root{
  --paper:#0e0b08;          /* near-black warm ground */
  --ink:#ece3d1;            /* cream text */
  --muted:#9d8f77;
  --faint:#8f826a;
  --amber:#c98a3c;
  --accent-text:#e0a066;
  --copper:#a3653a;
  --grain:#d9c68a;
  --rule:#2e261c;
  --rule-soft:#241d15;
  --panel:#14100c;
  --panel-2:#191309;
  --serif:"Source Serif 4","Source Serif Pro",Georgia,serif;
  --sans:Archivo,system-ui,"Helvetica Neue",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --step-label:clamp(10.5px,.72rem,11.5px);
  --measure:74ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--grain);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;margin:0}
p{margin:0 0 1.05em;text-wrap:pretty}
hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
::selection{background:var(--copper);color:#fff}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(18px,4vw,48px)}
.kicker{font:500 var(--step-label)/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.kicker--accent{color:var(--accent-text)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:50;background:var(--amber);color:#14100c;padding:10px 14px}

/* ---------- masthead ---------- */
.masthead{background:#1e1913;border-bottom:1px solid var(--rule);position:relative;z-index:20}
.masthead__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding-block:22px 18px}
.brand{display:block;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand__name,.brand__tag{display:block}
.brand__name{font-family:var(--serif);font-size:clamp(30px,3.6vw,42px);line-height:1;color:#efe6d6}
.brand__tag{font:400 12.5px/1 var(--sans);color:var(--muted);margin-top:9px;letter-spacing:.01em}
.nav{display:flex;flex-wrap:wrap;gap:10px 24px;padding-bottom:6px}
.nav a{font:500 var(--step-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#c7b294;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{color:#efe6d6;border-bottom-color:var(--copper);text-decoration:none}
.navtoggle{display:none}

/* ---------- depth rail / bands ---------- */
.band{position:relative;border-bottom:1px solid var(--rule)}
.band__inner{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0}
.band__gutter{position:relative;border-right:1px solid var(--rule);padding:34px 18px 34px 0}
.band__depth{font:500 var(--step-label)/1.7 var(--mono);letter-spacing:.16em;color:#b3a68d;text-transform:uppercase}
.band__no{font-family:var(--serif);font-size:46px;line-height:1;color:rgba(236,227,209,.16);margin-bottom:14px}
.band__seam{position:absolute;top:0;right:-1px;width:5px;height:100%;background:var(--seam,var(--copper));opacity:.85}
.band__body{padding:34px 0 40px clamp(20px,3vw,44px)}
.band--l1{background:#3a2e21}
.band--l2{background:#302518}
.band--l3{background:#271f16}
.band--l4{background:#221b13}
.band--l5{background:#1e1913}

/* ---------- hero ---------- */
.hero{position:relative;background:#0b0906;border-bottom:1px solid var(--rule)}
.hero__img{position:relative;height:clamp(380px,62vh,640px)}
.hero__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.03) brightness(.78)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,9,6,.72) 0%,rgba(11,9,6,.14) 34%,rgba(11,9,6,.86) 100%)}
.hero__text{position:absolute;left:0;right:0;bottom:0;padding-bottom:clamp(28px,5vw,54px)}
.hero__text .kicker{text-shadow:0 1px 12px rgba(8,6,4,.7)}
.hero h1{font-size:clamp(36px,6vw,76px);line-height:1.04;max-width:17ch;color:#fffaf0;text-shadow:0 2px 26px rgba(8,6,4,.62),0 1px 3px rgba(8,6,4,.45)}
.hero__stand{margin:18px 0 0;max-width:62ch;font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:#d8ccb6;text-shadow:0 1px 16px rgba(8,6,4,.6)}
.hero__meta{text-shadow:0 1px 12px rgba(8,6,4,.6);display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font:500 var(--step-label)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#b09a78}

/* ---------- cards ---------- */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.card{display:flex;flex-direction:column;background:transparent;text-decoration:none;color:inherit;min-width:0}
.card:hover{text-decoration:none}
.card__img{aspect-ratio:16/10;overflow:hidden;background:#1a140e;border:1px solid var(--rule)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;filter:saturate(.85) brightness(.92)}
.card:hover .card__img img{transform:scale(1.035);filter:saturate(1) brightness(1)}
.card__pillar{font:500 var(--step-label)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);margin:14px 0 8px}
.card__title{font-family:var(--serif);font-size:23px;line-height:1.16;color:var(--ink);margin:0}
.card:hover .card__title{color:#fffaf0}
.card__dek{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.card__meta{margin-top:auto;padding-top:14px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#9a8c73}

/* ---------- featured ---------- */
.feature{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:center}
.feature__media{position:relative;border:1px solid var(--rule)}
.feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.88) brightness(.9)}
.feature__depth{position:absolute;left:0;top:0;background:#1e1913;color:var(--grain);font:500 var(--step-label)/1 var(--mono);letter-spacing:.18em;padding:9px 12px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.feature h2{font-size:clamp(28px,3.2vw,44px);line-height:1.06;margin:0 0 18px}
.feature__quote{font-family:var(--serif);font-size:clamp(22px,2.2vw,29px);line-height:1.26;color:#f2e7d2;border-left:3px solid var(--copper);padding-left:20px;margin:0 0 18px}
.feature__dek{color:var(--muted);max-width:56ch;margin-bottom:20px;font-size:16.5px;line-height:1.62}

/* ---------- strata list (section band contents) ---------- */
.stratlist{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rule-soft)}
.stratlist li{border-bottom:1px solid var(--rule-soft)}
.stratlist a{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:13px 0;color:var(--ink);text-decoration:none}
.stratlist a:hover{color:#fffaf0;text-decoration:none}
.stratlist a:hover .st-title{text-decoration:underline;text-underline-offset:3px}
.st-depth{font:500 var(--step-label)/1.6 var(--mono);color:var(--accent-text)}
.st-title{font-family:var(--serif);font-size:20px;line-height:1.2}
.st-read{font:500 11px/1.6 var(--mono);color:#b3a68d;white-space:nowrap}
.band__lead{max-width:64ch;color:#cbbda3;margin:0}
.band__title{font-size:clamp(30px,3.6vw,46px);line-height:1.03}
.band__period{font:500 var(--step-label)/1 var(--mono);letter-spacing:.18em;color:var(--seam,var(--copper));margin-bottom:12px;text-transform:uppercase}

/* ---------- supporters ---------- */
.support{background:#100c08}
.support__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px}
.inscription{border:1px solid #3a3025;background:linear-gradient(#191309,#120e09);padding:clamp(20px,3vw,34px);box-shadow:inset 0 1px 0 rgba(236,227,209,.06)}
.inscription h2{font-size:clamp(26px,3vw,38px);color:#efe6d6;letter-spacing:.01em}
.support__note{color:var(--faint);max-width:60ch;font-size:14.5px;margin:10px 0 0}
.tier{margin-top:26px}
.tier__label{font:500 var(--step-label)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.sponsor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sponsor-grid--roll{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sponsor{display:flex;flex-direction:column;gap:10px;background:#0c0906;border:1px solid #342c22;padding:16px 18px;text-decoration:none;min-width:0;transition:border-color .2s ease,background .2s ease}
.sponsor:hover{border-color:var(--copper);background:#120d08;text-decoration:none}
.sponsor img{width:100%;height:40px;max-height:40px;object-fit:contain;object-position:center}
.sponsor.feat{padding:22px 24px}
.sponsor.feat img{height:56px;max-height:56px}
.sponsor-blurb{display:block;width:100%;min-width:200px;font-size:14px;line-height:1.5;color:var(--muted)}
.sponsor-blurb:empty{display:none}

/* ---------- article ---------- */
.article-head{background:#1a140e;border-bottom:1px solid var(--rule)}
.article-head__inner{padding-block:clamp(30px,4vw,54px) clamp(26px,3vw,40px);max-width:calc(78ch + 2 * clamp(18px,4vw,48px))}
.article-head h1{font-size:clamp(34px,5.2vw,64px);line-height:1.03;color:#fffaf0;max-width:20ch}
.lead{font-size:clamp(18px,1.9vw,23px);line-height:1.5;color:#dbcfb7;margin:20px 0 0;max-width:60ch;font-family:var(--sans);font-weight:400}
.byline{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:24px;font:500 11.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a2947a}
.byline .sep{color:#4a4136}
.article-body{display:grid;grid-template-columns:minmax(0,1fr) min(var(--measure),100%) minmax(0,1fr);padding:clamp(30px,4vw,52px) 0 20px}
.article-body>*{grid-column:2}
.article-body>.bleed{grid-column:1/-1}
.article-body h2{font-size:clamp(25px,2.8vw,34px);line-height:1.14;margin:2.1em 0 .5em;color:#f6ecd8}
.article-body h3{font-size:20px;margin:1.8em 0 .4em;color:#f0e5d0}
.article-body p{font-size:18.5px;line-height:1.72;color:#ddd3c0}
.article-body>p:first-of-type{font-size:19.5px}
.article-body a{color:var(--amber);border-bottom:1px solid rgba(201,138,60,.35);text-decoration:none}
.article-body a:hover{color:var(--grain);border-bottom-color:var(--grain);text-decoration:none}
.article-body ul,.article-body ol{padding-left:1.2em;margin:0 0 1.2em;color:#ddd3c0}
.article-body li{margin-bottom:.45em;font-size:18px;line-height:1.65}

/* full-bleed strata interruptions inside articles */
.stratum{margin:2.6rem 0;padding:clamp(24px,3.4vw,40px) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--st-bg,#191309);position:relative}
.stratum::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--seam,var(--copper))}
.stratum__inner{max-width:min(94ch,100%);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.stratum__label{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#c9b493;margin-bottom:16px}
.stratum h3{font-family:var(--serif);font-size:clamp(21px,2.2vw,27px);margin:0 0 14px;color:#f4ead6}

/* ---------- prose components (styleguide contract) ---------- */
.pullquote{margin:2.4rem 0;padding:0 0 0 24px;border-left:3px solid var(--copper)}
.stratum .pullquote{margin:0;padding:0;border-left:0}
.pullquote p{font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.24;color:#f6ecd8;margin:0}
.pullquote p+p{margin-top:.5em}
.blockquote{margin:2rem 0;padding:20px 24px;background:#181209;border:1px solid var(--rule)}
.blockquote p{margin:0;font-family:var(--serif);font-size:22px;line-height:1.36;color:#f0e5d0}
.blockquote cite{display:block;margin-top:12px;font:500 var(--step-label)/1.6 var(--mono);letter-spacing:.12em;color:var(--muted);font-style:normal}
.callout{margin:2rem 0;padding:22px 24px;background:#1c1509;border:1px solid #3a3025;border-left:4px solid var(--grain)}
.callout p{margin:0 0 .8em;font-size:17px;color:#e2d8c4}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout ul{margin:0;padding-left:1.1em}
.note{font-size:15px;line-height:1.6;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px}
.deflist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.deflist li{display:block;padding-bottom:13px;border-bottom:1px solid var(--rule)}
.deflist li:last-child{border-bottom:0;padding-bottom:0}
.deflist .dt{display:block;font-family:var(--serif);font-size:20px;line-height:1.2;color:#f4ead6;margin-bottom:5px}
.deflist .dd{display:block;font-size:16px;line-height:1.6;color:#c7bba6}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:var(--rule)}
.timeline li{position:relative;padding:0 0 20px 40px;display:block}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:5px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--seam,var(--copper));box-shadow:0 0 0 3px #191309}
.t-when{display:block;font:500 var(--step-label)/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grain);margin-bottom:3px}
.t-what{display:block;font-size:16.5px;line-height:1.6;color:#d5cab5;max-width:70ch}

/* stats */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.6rem 0}
.statblock{background:#12100c;border:1px solid var(--rule);padding:18px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stat-num{font-family:var(--serif);font-size:clamp(30px,4vw,44px);line-height:1;color:var(--grain)}
.stat-label{font:500 var(--step-label)/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:16px;display:table}
.versus th,.versus td,.datatable th,.datatable td{padding:11px 14px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top;color:#d5cab5}
.versus th,.datatable th{font:500 var(--step-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom-color:#463a2b}
.versus tbody th{font-family:var(--sans);font-size:16px;letter-spacing:0;text-transform:none;color:#f0e5d0;font-weight:600}
.datatable tbody tr:hover td{background:#181209}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* charts */
.chart{margin:1.8rem 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.chart .c-axis{stroke:var(--rule)}
.chart .c-label{font:500 10px var(--mono);fill:var(--muted);letter-spacing:.06em}
.chart .c-value{font:500 10px var(--mono);fill:var(--grain)}
.chart .c-bar{fill:var(--copper)}
.chart .c-line{fill:none;stroke:var(--amber);stroke-width:2}
.chart .c-dot{fill:var(--grain)}

/* figures */
.article-figure{margin:2.2rem 0}
.article-figure img{width:100%;border:1px solid var(--rule)}
.article-figure figcaption,.map-figure figcaption,.gallery figcaption{margin-top:11px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.credit{display:block;margin-top:6px;font:500 11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#9a8c73}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:2rem 0}
.gallery figure{margin:0}
.map-figure{margin:2.2rem 0}
.map-slot{min-height:320px;border:1px dashed #4a3d2c;background:#141009}

/* cards / refs */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:1.6rem 0}
.profile-card{background:#12100c;border:1px solid var(--rule);padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.profile-card .p-photo{width:64px;height:64px;object-fit:cover;border-radius:50%;margin-bottom:6px}
.profile-card h3{font-size:21px}
.profile-card .p-role{font:500 var(--step-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin:0}
.profile-card p{font-size:15.5px;color:#c7bba6;margin:0}
.profile-card .p-links{margin-top:auto;padding-top:10px}
.profile-card.no-photo{border-left:3px solid var(--copper)}
.p-attr{font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#9a8c73;margin:0}
.chart .c-slice{fill:none;stroke-width:26}
.chart .c-hole{font-family:var(--serif);fill:#f4ead6}
.chart .legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font:500 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--muted)}
.chart .legend span{display:flex;align-items:center;gap:7px}
.chart .legend i{width:11px;height:11px;display:block}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:1.6rem 0}
.org-card{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"logo name" "logo host";gap:0 14px;align-items:center;background:#12100c;border:1px solid var(--rule);padding:14px;text-decoration:none}
.org-card:hover{border-color:var(--copper);text-decoration:none}
.org-logo{grid-area:logo;width:48px;height:48px;object-fit:contain}
.org-card.no-logo{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "host"}
.org-name{grid-area:name;font-family:var(--serif);font-size:19px;color:var(--ink);line-height:1.2}
.org-host{grid-area:host;font:500 11px/1.6 var(--mono);letter-spacing:.1em;color:#9a8c73}
.entity-ref{white-space:nowrap;border-bottom:1px solid rgba(201,138,60,.4)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:1.4rem 0}
.further-grid a{display:block;padding:16px 18px;background:#12100c;border:1px solid var(--rule);font-family:var(--serif);font-size:19px;line-height:1.22;color:var(--ink);text-decoration:none}
.further-grid a:hover{border-color:var(--copper);color:#fffaf0;text-decoration:none}
.related{border-top:1px solid var(--rule);margin-top:2.6rem;padding-top:22px}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.related-links:empty{display:none}
.related-links li{min-width:0}
.related-links a{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 18px;background:#12100c;border:1px solid var(--rule);text-decoration:none}
.related-links a:hover{border-color:var(--copper);text-decoration:none}
.related-links .rl-pillar{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.related-links .rl-title{font-family:var(--serif);font-size:19px;line-height:1.22;color:var(--ink)}

/* ---------- category / hub ---------- */
.cat-list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--rule)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list>li>a{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:18px 0;text-decoration:none;color:var(--ink)}
.cat-list>li>a:hover{text-decoration:none;background:rgba(236,227,209,.03)}
.cat-list .cl-title{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);line-height:1.18}
.cat-list .cl-dek{display:block;font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--muted);margin-top:6px;max-width:70ch}
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.hubcell{background:#161009;padding:24px}
.hubcell h2{font-size:26px;margin-bottom:8px}
.hubcell p{font-size:15px;color:var(--muted)}

/* ---------- footer ---------- */
.foot{background:#0b0906;border-top:1px solid var(--rule);padding-block:44px 40px;margin-top:0}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(auto-fit,minmax(160px,1fr));gap:30px}
.foot h3{font-family:var(--mono);font-size:var(--step-label);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:#bfb29a;font-size:15px;text-decoration:none}
.foot a:hover{color:var(--grain)}
.foot__brand{font-family:var(--serif);font-size:30px;color:#efe6d6;line-height:1}
.foot__say{color:var(--faint);font-size:14.5px;margin-top:12px;max-width:40ch}
.foot__rules{margin-top:34px;padding-top:18px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:10px 30px;font:500 11.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a2947a}

/* ---------- utility ---------- */
.sec{padding-block:clamp(38px,5vw,64px)}
.sec--tight{padding-block:clamp(26px,3.4vw,40px)}
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:26px;border-bottom:1px solid var(--rule);padding-bottom:14px}
.sechead h2{font-size:clamp(24px,2.8vw,34px)}
.sechead .more{font:500 var(--step-label)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.measure{max-width:var(--measure);padding-inline:0}

/* expander */
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more-items{display:none}
.expander input:checked~.more-items{display:block}
.expander label{display:inline-block;margin-top:16px;cursor:pointer;font:500 var(--step-label)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);border-bottom:1px solid var(--copper);padding-bottom:5px}
.expander input:checked~label .lbl-more{display:none}
.expander label .lbl-less{display:none}
.expander input:checked~label .lbl-less{display:inline}

@media (max-width:900px){
  .band__inner{grid-template-columns:1fr}
  .band__gutter{border-right:0;border-bottom:1px solid var(--rule);padding:22px 0 14px;display:flex;align-items:baseline;gap:16px}
  .band__no{margin-bottom:0;font-size:34px}
  .band__seam{top:auto;bottom:-1px;right:auto;left:0;width:100%;height:4px}
  .band__body{padding:24px 0 34px}
  .feature{grid-template-columns:1fr}
  .stratlist a{grid-template-columns:1fr;gap:5px;padding:15px 0}
  .st-read{white-space:normal}
  .cat-list>li>a{grid-template-columns:1fr;gap:7px}
  .masthead__bar{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:0}
  .nav{gap:0;width:100%;flex-direction:column;flex-wrap:nowrap;border-top:1px solid var(--rule);max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav a{padding:13px 0;border-bottom:1px solid var(--rule-soft);width:100%}
  .navtoggle{display:block;position:absolute;right:clamp(18px,4vw,48px);top:26px;background:transparent;border:1px solid var(--rule);color:#c7b294;font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:9px 13px;cursor:pointer}
  .masthead[data-open="true"] .nav{max-height:420px}
}
@media (max-width:560px){
  body{font-size:16px}
  .article-body p{font-size:17.5px}
  .sponsor-grid,.sponsor-grid--roll{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr 1fr}
  .hero__img{height:clamp(320px,54vh,460px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

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

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* op-fit-copy: three corrections asked for on the supporters band.
   1. OVERFLOW. The design sets `.sponsor-blurb{min-width:200px}` while its roll track is
      minmax(210px,1fr) — a 220px tile less 36px padding leaves 184px, so every line spilled ~16px
      past its own border. min-width:0 lets the copy shrink to the tile it is in.
   2. CENTRING. The mark is centred and the copy was not, so the tiles read lopsided.
   3. RAGGED ROWS. auto-fit at 240/210px resolved to 4 columns for 6 items (4+2, then 5+1). Widening
      the track floor gives 3 even columns for each tier of six. */
.sponsor-blurb{min-width:0}
.sponsor{align-items:center;text-align:center}
.sponsor-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sponsor-grid--roll{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* op-centre-copy: our own sp-blurb-unhide adds `margin-left:20px` to a blurb that is not the first
   child — written for a design that puts the copy BESIDE the mark. Here the copy sits BELOW it, so
   the margin only pushed every line 10px right of the mark it belongs to. */
.sponsor > .sponsor-blurb:not(:first-child),
.sponsor > *:not(.sponsor-blurb) + .sponsor-blurb{margin-left:0}

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

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1967px at 390, 18% of the whole page. Two columns bring it to
   1589px (19% shorter). Checked before writing: no new overflow, smallest mark still
   99px wide, longest blurb 2 lines, tile heights 210-294px.
   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.
   Only the tier(s) that were one-per-row are touched (.sponsor-grid, .sponsor-grid.sponsor-grid--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-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid > * *{min-width:0!important;max-width:100%}
    .sponsor-grid img,.sponsor-grid svg{max-width:100%;height:auto}
  .sponsor-grid.sponsor-grid--roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-grid.sponsor-grid--roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid.sponsor-grid--roll > * *{min-width:0!important;max-width:100%}
    .sponsor-grid.sponsor-grid--roll img,.sponsor-grid.sponsor-grid--roll svg{max-width:100%;height:auto}
}

/* op-blurb-rows: money blurbs ran to 10 rows at 390, 1589px of tier across
   12 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-grid.sponsor-grid--roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 720px (89 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(0,1fr) min(var(--measure),100%) minmax(0,1fr)" (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article div.article-body{grid-template-columns:minmax(0,1fr) min(823px, 100%) minmax(0,1fr)!important}
}
@media (min-width:1600px){
  article div.article-body{grid-template-columns:minmax(0,1fr) min(clamp(823px, 57.153vw, 988px), 100%) minmax(0,1fr)!important}
  article div.article-body > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (720px) and was left behind when the text went to 823px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  article div.wrap.article-head__inner{max-width:min(919px, 100%)!important}
}
@media (min-width:1600px){
  article div.wrap.article-head__inner{max-width:min(calc(clamp(823px, 57.153vw, 988px) + 96px), 100%)!important}
}
/* op-article-head:end */

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