/* raksutka.org — Direction 1A. Image-led: photographs carry the page, text captions them.
Palette (5, each with a job) · type: Faustina / Chivo / DM Mono */
:root{
--ground:#E9EBE5; /* page ground */
--paper:#F7F5F0; /* raised paper: panels, registers, figures */
--ink:#191C19; /* text, rules */
--pink:#CC2A79; /* accent — masthead plate, numerals, figure mats */
--moss:#33682E; /* secondary — contested evidence, dividers, captions rules */
--ink-2:#2C312C;
--ink-3:#3F463F;
--quiet:#5A625A;
--credit:#7A8177;
--line:#C9CEC4;
--line-2:#E0E2D9;
--serif:Faustina,Georgia,serif;
--sans:Chivo,system-ui,sans-serif;
--mono:"DM Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--pink);text-decoration:none}
a:hover{color:var(--moss);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:1280px;margin:0 auto;padding-inline:28px}
.wrap-wide{max-width:1600px;margin:0 auto;padding-inline:28px}
.measure{max-width:70ch}
.kicker{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.kicker--pink{color:var(--pink)}
.kicker--moss{color:var(--moss)}
.num{font-family:var(--mono);font-weight:500;color:var(--pink)}
.icon{width:22px;height:22px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon--lg{width:34px;height:34px}
/* ---------- masthead: pink plate + running index strap ---------- */
.plate{background:var(--pink);color:var(--paper)}
.plate-in{display:flex;align-items:center;gap:32px;padding:26px 0 24px}
.plate a{color:var(--paper)}
.plate a:hover{color:#fff}
.brand{display:flex;align-items:center;gap:20px;text-decoration:none}
.brand-stack{display:flex;flex-direction:column;gap:9px}
.brand svg{flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;width:56px;height:56px;position:relative;top:4px}
.brand-word{font:800 54px/.88 var(--serif);letter-spacing:-.025em}
.plate-line{font:400 16px/1.4 var(--serif);color:#FFFFFF;max-width:46ch;padding-top:9px;border-top:1px solid rgba(247,245,240,.35)}
.home .plate-line{font-size:18px;max-width:52ch}
.home .plate-in{padding:38px 0 30px}
.home .brand svg{width:92px;height:92px;top:7px}
.home .brand-word{font-size:96px}
.strap{background:var(--ground);border-bottom:1.5px solid var(--ink)}
.strap-in{padding:16px 0 18px;display:flex;flex-direction:column;gap:9px}
.strap-row{display:flex;align-items:baseline;gap:12px}
.strap-head{display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap;flex:0 0 auto}
.strap-head a,.strap-head span.here{font:600 15.5px/1.3 var(--sans);color:var(--ink)}
.strap-head .here{border-bottom:2px solid var(--pink);padding-bottom:2px;color:var(--pink)}
.strap-entries{display:flex;align-items:baseline;gap:6px 22px;flex-wrap:wrap;min-width:0}
.strap-entries a{font:400 14.5px/1.35 var(--sans);color:var(--ink-3)}
.strap-entries li{white-space:nowrap}
.strap-entries li{display:inline}
.strap-foot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:14px}
.strap-foot a{font:500 13px/1 var(--mono);letter-spacing:.04em;color:var(--moss)}
/* ---------- generic bands ---------- */
.band{border-bottom:1px solid var(--line)}
.band--paper{background:var(--paper)}
.band--pad{padding:44px 0 48px}
.band--tight{padding:30px 0 32px}
.band--moss{background:var(--moss);color:#F2F4EE;border-bottom:none}
.band--moss h2,.band--moss h3{color:#fff}
.band--moss a{color:#EAF2E7;text-decoration:underline;text-underline-offset:3px}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:18px}
.deck{font:400 clamp(21px,2.2vw,29px)/1.38 var(--serif);color:var(--ink)}
/* ---------- figures: four treatments, one pen ---------- */
.fig-plate{position:relative;background:#DCE0D6}
.fig-plate>img{width:100%;height:clamp(300px,46vw,600px);object-fit:cover}
.fig-plate figcaption,.plate-panel{background:var(--paper);border-top:3px solid var(--pink);padding:24px 28px 20px}
@media (min-width:900px){
.fig-plate figcaption,.plate-panel{position:absolute;left:28px;bottom:0;max-width:560px}
}
.fig-mat{background:var(--pink);padding:14px}
.fig-mat>img{width:100%;height:auto}
.fig-mat figcaption{background:var(--paper);margin:14px -14px -14px;padding:16px 18px 14px;display:grid;gap:14px}
@media (min-width:820px){.fig-mat figcaption{grid-template-columns:1fr 200px;align-items:start}}
.fig-mount{position:relative;padding:14px}
.fig-mount::before,.fig-mount::after{content:"";position:absolute;width:18px;height:18px;border:1.4px solid var(--pink)}
.fig-mount::before{top:0;left:0;border-right:0;border-bottom:0}
.fig-mount::after{bottom:0;right:0;border-left:0;border-top:0}
.fig-mount>img{width:100%;height:auto}
.fig-mount figcaption{border-top:1px solid var(--moss);margin-top:12px;padding-top:10px}
.fig-tint{position:relative;background:#DCE0D6}
.fig-tint>img{width:100%;height:clamp(240px,32vw,400px);object-fit:cover;mix-blend-mode:multiply;opacity:.92}
.fig-tint figcaption{padding:12px 0 0}
.article-figure{background:var(--paper);padding:16px;border:1px solid var(--line-2)}
.article-figure>img{width:100%;height:auto}
.article-figure figcaption{margin-top:14px}
figcaption{font:400 15.5px/1.5 var(--serif);color:var(--ink-2)}
figcaption b,.cap-lead{font:500 15.5px/1.5 var(--sans);color:var(--ink);display:block}
.credit{font:500 12.5px/1.45 var(--mono);letter-spacing:.04em;color:var(--quiet);margin-top:6px}
.gallery{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gallery figure{background:var(--paper);padding:12px;border:1px solid var(--line-2)}
/* ---------- register / tables ---------- */
.register{font:400 15.5px/1.45 var(--sans)}
.register th{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);text-align:left;padding:0 14px 8px 0;border-bottom:1.5px solid var(--ink)}
.register td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line-2);vertical-align:top}
.register tr:last-child td{border-bottom:none}
.register td:last-child,.register th:last-child{padding-right:0;font-size:14px;color:var(--ink-3)}
.register .yr{font:500 15px/1.45 var(--mono);color:var(--pink);white-space:nowrap}
.register td a{color:var(--ink);font-weight:500}
.register td a:hover{color:var(--pink)}
.datatable{font:400 16px/1.45 var(--sans)}
.datatable th{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);text-align:left;padding:0 14px 8px 0;border-bottom:1.5px solid var(--ink)}
.datatable td{padding:13px 14px;border-bottom:1px solid var(--line-2)}
.datatable td:first-child,.datatable th:first-child{padding-left:0}
.versus{font:400 16px/1.45 var(--sans);background:var(--paper)}
.versus caption{font:500 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pink);text-align:left;padding:0 0 10px}
.versus th{font:600 15px/1.3 var(--sans);color:var(--ink);text-align:left;padding:12px 16px;border-bottom:1.5px solid var(--ink);background:var(--paper)}
.versus td{padding:14px 16px;border-bottom:1px solid var(--line-2);vertical-align:top}
.versus tr td:first-child{border-right:1px solid var(--line-2)}
/* ---------- article ---------- */
.lede-wrap{padding:40px 0 26px}
.article-title{font-size:clamp(34px,4.4vw,54px);line-height:1.03;font-weight:800;max-width:22ch}
.where{display:flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-bottom:16px}
.where svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.established{background:var(--paper);border-top:3px solid var(--pink);padding:20px 24px;margin-top:26px;max-width:52ch}
.established .kicker{margin-bottom:8px}
.lead{font:400 clamp(19px,1.7vw,22px)/1.45 var(--serif);color:var(--ink-2)}
.prose{display:flex;flex-direction:column;gap:16px}
.prose p{font:400 18px/1.62 var(--sans);color:var(--ink-2)}
.prose h2{font-size:clamp(24px,2.4vw,30px);line-height:1.15;margin-top:14px}
.prose a{color:var(--pink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose em{font-style:italic}
.pullquote{margin:0;display:flex;gap:22px;align-items:flex-start}
.pullquote svg{width:30px;height:96px;flex:0 0 auto;stroke:var(--pink);fill:none;stroke-width:1.6}
.pullquote p{font:400 clamp(22px,2.3vw,27px)/1.38 var(--serif);color:var(--ink);margin:0}
.blockquote{margin:0;background:var(--paper);border-left:3px solid var(--moss);padding:20px 24px}
.blockquote p{font:400 20px/1.45 var(--serif);color:var(--ink);margin:0}
.blockquote cite{display:block;margin-top:10px;font:500 13px/1.4 var(--mono);font-style:normal;color:var(--quiet)}
.callout{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--moss);padding:20px 24px}
.callout p{font:400 17.5px/1.55 var(--sans);color:var(--ink-2);margin:0}
.note{font:400 15.5px/1.5 var(--sans);color:var(--quiet);border-left:2px solid var(--line);padding-left:14px}
/* notes-for-design bands (full width interruptions, never a side rail) */
.notes-band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0 34px;margin:8px 0}
.notes-band h2{font-size:24px;margin-bottom:4px}
.timeline{display:flex;flex-direction:column;margin-top:16px}
.timeline li{display:grid;gap:8px 22px;padding:13px 0;border-top:1px solid var(--line-2)}
.timeline li:first-child{border-top:1.5px solid var(--ink)}
.timeline li:last-child{border-bottom:1px solid var(--line-2)}
@media (min-width:760px){.timeline li{grid-template-columns:230px 1fr}}
.t-when{font:500 14px/1.45 var(--mono);color:var(--pink)}
.t-what{font:400 16.5px/1.5 var(--sans);color:var(--ink-2)}
.pairs{display:grid;gap:20px;margin-top:16px}
@media (min-width:760px){.pairs{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.pairs li{border-top:1.5px solid var(--ink);padding-top:12px;font:400 16.5px/1.5 var(--sans);color:var(--ink-2)}
.pairs li b{font:600 16.5px/1.5 var(--sans);color:var(--ink);display:block}
.statrow{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:16px}
.statblock{background:var(--moss);color:#F2F4EE;padding:20px 22px}
.stat-num{display:block;font:500 40px/1 var(--mono)}
.stat-label{display:block;margin-top:10px;font:400 15px/1.45 var(--sans);color:#D3E0CD}
.chart{background:var(--paper);padding:18px;border:1px solid var(--line-2)}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin-top:12px}
/* related / further / cards */
.related-links,.further-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.related-links li,.further-grid a{border-top:1.5px solid var(--ink);padding-top:10px}
.related-links a,.further-grid a{font:700 19px/1.22 var(--serif);color:var(--ink);display:block}
.related-links a:hover,.further-grid a:hover{color:var(--pink)}
.related-links .rl-note{display:block;font:400 14.5px/1.45 var(--sans);color:var(--quiet);margin-top:5px}
.cat-list{display:flex;flex-direction:column}
.cat-list li{border-top:1px solid var(--line-2);padding:18px 0}
.cat-list li:first-child{border-top:1.5px solid var(--ink)}
.cat-list a{font:700 clamp(21px,2vw,26px)/1.16 var(--serif);color:var(--ink)}
.cat-list a:hover{color:var(--pink)}
.cat-list p{font:400 16px/1.5 var(--sans);color:var(--ink-3);margin-top:7px;max-width:78ch}
.cat-list .cl-row{display:grid;gap:16px}
@media (min-width:820px){.cat-list .cl-row{grid-template-columns:200px 1fr;align-items:start}}
.entity-ref{font-weight:500}
.profile-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.profile-card{background:var(--paper);border:1px solid var(--line-2);padding:18px;display:flex;flex-direction:column;gap:8px;height:100%}
.profile-card .p-photo{width:100%;height:190px;object-fit:cover}
.profile-card h3{font-size:21px}
.profile-card .p-role{font:500 12.5px/1.3 var(--mono);letter-spacing:.06em;color:var(--pink)}
.profile-card p{font:400 15.5px/1.5 var(--sans);color:var(--ink-2)}
.profile-card .p-links{margin-top:auto;padding-top:8px}
.org-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.org-card{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:center;background:var(--paper);border:1px solid var(--line-2);padding:14px 16px}
.org-card .org-logo{grid-row:span 2;width:44px;height:44px;object-fit:contain}
.org-card .org-name{font:600 16px/1.25 var(--sans);color:var(--ink)}
.org-card .org-host{font:500 12.5px/1.3 var(--mono);color:var(--quiet)}
/* ---------- homepage grid: feed + supporters rail ---------- */
.feed{display:grid;gap:44px;padding:38px 0 44px}
@media (min-width:1120px){.feed{grid-template-columns:minmax(0,1fr) 344px;gap:56px}}
.feed-main{display:flex;flex-direction:column;gap:38px;min-width:0}
.rail{align-self:start;display:flex;flex-direction:column;gap:28px}
.rail-group{display:flex;flex-direction:column;gap:16px}
.rail-group h2{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);font-family:var(--mono);font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sponsor-list{display:flex;flex-wrap:wrap;gap:18px}
.sponsor{flex:0 0 296px;display:flex;flex-direction:column;gap:9px;padding-top:10px;border-top:1px solid var(--line-2)}
.sponsor.feat{border-top:2px solid var(--pink)}
.sponsor-mark{background:var(--ink);height:52px;display:flex;align-items:center;justify-content:center;padding:6px 16px}
.sponsor-mark img{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor-name{font:500 14.5px/1.3 var(--sans);color:var(--ink-2)}
.sponsor:hover .sponsor-name{color:var(--pink)}
/* homepage bands */
.lead-story{display:flex;flex-direction:column}
.lead-story h1{font-size:clamp(30px,3.4vw,42px);line-height:1.08;font-weight:800}
.pair{display:grid;gap:30px}
@media (min-width:900px){.pair{grid-template-columns:1.55fr 1fr;align-items:start}}
.dir{display:grid;gap:26px 40px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.dir-item{border-top:1.5px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.dir-item .dir-head{display:flex;align-items:baseline;gap:10px;color:var(--pink)}
.dir-item h3{font-size:22px;line-height:1.15}
.dir-item h3 a{color:var(--ink)}
.dir-item h3 a:hover{color:var(--pink)}
.dir-item p{font:400 15px/1.5 var(--sans);color:var(--ink-3)}
.nuclei{width:100%;height:20px;stroke:var(--moss);fill:none;stroke-width:1.2}
/* ---------- footer ---------- */
.foot{background:var(--ink);color:#DDE2D9;padding:34px 0 38px}
.foot-in{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap}
.foot a{color:#DDE2D9}
.foot a:hover{color:#fff}
.foot-brand{display:flex;align-items:center;gap:16px}
.foot-brand svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:2.4;flex:0 0 auto}
.foot-word{font:700 28px/1 var(--serif);color:var(--paper)}
.foot-line{font:400 14.5px/1.4 var(--sans);color:#A8B0A4;margin-top:5px;max-width:46ch}
.foot-cols{display:flex;gap:34px;flex-wrap:wrap}
.foot-cols ul{display:flex;flex-direction:column;gap:4px;font:400 15px/1.5 var(--sans)}
.foot-meta{font:500 11.5px/1.5 var(--mono);letter-spacing:.05em;color:#7E867C;margin-top:22px}
@media (max-width:900px){
.plate-in{flex-direction:column;align-items:flex-start;gap:14px}
.home .brand-word{font-size:clamp(44px,13vw,72px)}
.home .brand svg{width:60px;height:60px;top:5px}
.brand-word{font-size:clamp(34px,10vw,46px)}
.brand svg{width:40px;height:40px;top:3px}
.strap-row{flex-direction:column;gap:6px}
}
/* ---------- additions ---------- */
.prose{display:block;max-width:104ch}
.prose>*+*{margin-top:16px}
.prose>p,.prose>h2{max-width:70ch}
.prose>h2{margin-top:30px}
.prose::after{content:"";display:block;clear:both}
.fig-inset{float:right;width:min(360px,44%);margin:4px 0 22px 40px;background:var(--paper)}
@media (max-width:760px){.fig-inset{float:none;width:100%;margin:0 0 18px}}
.fig-tint figcaption{padding-top:14px;max-width:70ch}
.cat-list .fig-mount{padding:9px}
.cat-list .fig-mount::before,.cat-list .fig-mount::after{width:13px;height:13px}
.lead-panel h1{font-size:clamp(27px,3.2vw,40px);line-height:1.07;font-weight:800;margin-bottom:12px}
.lead-panel h1 a{color:var(--ink)}
.lead-panel h1 a:hover{color:var(--pink);text-decoration:none}
.lead-panel .lead{margin-bottom:14px}
.lead-panel .cap{border-top:1px solid var(--line-2);padding-top:10px;font:400 15px/1.5 var(--serif);color:var(--ink-3)}
.sg-band{padding:34px 0;border-bottom:1px solid var(--line)}
.sg-band h2{font-size:26px;margin-bottom:6px}
.sg-note{font:500 12.5px/1.4 var(--mono);color:var(--quiet);margin-bottom:18px}
.sg-narrow{width:360px;max-width:100%;border:1px dashed var(--line);padding:14px;overflow:hidden;resize:horizontal}
/* large section icons */
.icon-lg{width:52px;height:52px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dir{gap:34px 44px}
.dir-item{border-top:1.5px solid var(--ink);padding-top:16px;gap:12px}
.dir-item .dir-head{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--pink);min-height:52px}
.dir-item .dir-head .num{font-size:15px}
.dir-item:hover .icon-lg{color:var(--moss)}
.icon-lg{transition:color .18s ease}
.cat-open{display:flex;align-items:center;gap:16px;color:var(--pink);margin-bottom:6px}
/* interactive timeline */
.tl-axis{position:relative;display:flex;justify-content:space-between;align-items:center;gap:4px;padding:30px 6px 10px;margin-bottom:22px}
.tl-axis::before{content:"";position:absolute;left:6px;right:6px;bottom:16px;height:1.5px;background:var(--line)}
.tl-dot{position:relative;z-index:1;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;font:500 13px/1 var(--mono);color:var(--quiet);letter-spacing:.02em}
.tl-dot::after{content:"";width:13px;height:13px;border-radius:50%;border:1.5px solid var(--pink);background:var(--paper)}
.tl-dot:hover{color:var(--pink)}
.tl-dot[aria-selected="true"]{color:var(--pink)}
.tl-dot[aria-selected="true"]::after{background:var(--pink);box-shadow:0 0 0 5px rgba(204,42,121,.16)}
.tl-panel{border-top:1.5px solid var(--ink);padding-top:14px}
.tl-panel+.tl-panel{margin-top:18px}
.tl-panel h3{font-size:clamp(21px,2.1vw,26px);line-height:1.18;max-width:34ch}
.tl-panel h3 a{color:var(--ink)}
.tl-panel h3 a:hover{color:var(--pink)}
.tl-meta{display:grid;gap:4px 18px;margin-top:14px;font:400 15.5px/1.5 var(--sans)}
@media (min-width:620px){.tl-meta{grid-template-columns:150px 1fr}}
.tl-meta dt{font:500 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.tl-meta dd{margin:0;color:var(--ink-2)}
.tl-hint{font:500 12.5px/1.4 var(--mono);letter-spacing:.05em;color:var(--quiet);margin-top:16px}
@media (max-width:700px){
.tl-axis{flex-wrap:wrap;justify-content:flex-start;gap:14px 18px;padding:18px 0 6px}
.tl-axis::before{display:none}
.tl-dot{flex-direction:row;gap:8px}
}
/* ---------- header menu: six sections at size, entries on hover / focus / tap ---------- */
.strap-in--menu{display:flex;align-items:center;justify-content:space-between;gap:18px 30px;flex-wrap:wrap;padding:0 0 0;flex-direction:row}
.menu{display:flex;align-items:stretch;flex-wrap:wrap;gap:0 0;row-gap:2px}
.menu-item{position:relative}
.menu-row{display:flex;align-items:center;gap:3px;padding:15px 16px 15px 0}
.menu-item:not(:first-child) .menu-row{padding-left:20px}
.menu-link{display:flex;align-items:baseline;gap:8px;font:600 clamp(15.5px,1.28vw,18.5px)/1.25 var(--sans);color:var(--ink);white-space:nowrap}
.menu-link .num{font-size:12.5px}
.menu-link:hover,.menu-item:hover .menu-link{color:var(--pink);text-decoration:none}
.menu-item.is-here .menu-link{color:var(--pink)}
.menu-item.is-here .menu-row{box-shadow:inset 0 -3px 0 var(--pink)}
.menu-toggle{background:none;border:0;padding:4px;cursor:pointer;color:var(--quiet);display:flex;align-items:center}
.menu-toggle .chev{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.menu-item:hover .menu-toggle,.menu-toggle:hover{color:var(--pink)}
.menu-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.menu-panel{display:none;position:absolute;top:100%;left:0;z-index:40;min-width:290px;background:var(--paper);border:1px solid var(--ink);border-top:3px solid var(--pink);padding:16px 20px 18px;box-shadow:0 14px 34px rgba(25,28,25,.14)}
.menu-item:hover>.menu-panel,.menu-item:focus-within>.menu-panel,.menu-panel[data-open]{display:block;animation:menu-in .16s ease both}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu-panel{max-width:min(340px,calc(100vw - 28px))}
.menu-panel.flip{left:auto;right:0}
.menu-kick{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin-bottom:12px}
.menu-list{display:flex;flex-direction:column}
.menu-list li+li{border-top:1px solid var(--line-2)}
.menu-list a{display:block;padding:8px 0;font:400 16px/1.35 var(--sans);color:var(--ink-2)}
.menu-list a:hover{color:var(--pink);text-decoration:none}
.menu-more{display:inline-block;margin-top:12px;font:500 12.5px/1 var(--mono);letter-spacing:.04em;color:var(--moss)}
.strap-all{font:500 13px/1 var(--mono);letter-spacing:.04em;color:var(--moss);white-space:nowrap;padding:12px 0}
.no-js-note{display:none}
@media (max-width:900px){
.strap-in--menu{flex-direction:column;align-items:stretch;gap:0;padding-bottom:12px}
.menu{flex-direction:column;gap:0}
.menu-item{border-top:1px solid rgba(25,28,25,.08)}
.menu-item:first-child{border-top:0}
.menu-row{justify-content:space-between;padding:13px 0}
.menu-item:not(:first-child) .menu-row{padding-left:0}
.menu-toggle{padding:8px 4px}
.menu-panel{position:static;min-width:0;max-width:none;display:none;animation:none;box-shadow:none;border:0;border-top:1px solid var(--line);background:transparent;padding:4px 0 14px}
.menu-item:hover>.menu-panel{display:none}
.menu-panel[data-open]{display:block}
.menu-item:focus-within>.menu-panel{display:block}
.strap-all{padding:14px 0 0}
}
/* contested-evidence band */
.contest{display:grid;gap:22px}
@media (min-width:880px){.contest{grid-template-columns:1fr 1fr;gap:0}}
.contest-col{display:flex;flex-direction:column;background:rgba(247,245,240,.07);padding:22px 24px 20px;border-top:2px solid rgba(247,245,240,.5)}
@media (min-width:880px){.contest-col+.contest-col{border-left:1px solid rgba(247,245,240,.28)}}
.contest-col h3{font:500 12px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#D3E0CD;margin-bottom:12px}
.contest-col p{font:400 17px/1.55 var(--sans);color:#F2F4EE}
.contest-col .src{margin-top:auto;padding-top:16px;font:500 12.5px/1.45 var(--mono);letter-spacing:.04em;color:#D3E0CD;border-top:1px solid rgba(247,245,240,.22)}
.contest-lead{font:400 clamp(19px,1.9vw,23px)/1.4 var(--serif);color:#fff;max-width:56ch;margin:0 0 26px}
.contest-foot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid rgba(247,245,240,.28)}
.contest-foot a{font:600 17px/1.3 var(--sans);color:#fff}
/* ---------- article rhythm ---------- */
.where{flex-wrap:wrap}
.where-ref{color:var(--quiet);font-weight:500}
.where-ref::before{content:"\00b7";margin-right:8px;color:var(--line)}
.prose>h2{position:relative;padding-top:20px;scroll-margin-top:24px}
.prose>h2::before{content:"";position:absolute;top:0;left:0;width:46px;height:2px;background:var(--pink)}
.prose>p.prose-open{font-size:19.5px;line-height:1.58;color:var(--ink)}
.in-entry{padding:26px 28px 30px}
.in-entry .kicker{margin-bottom:12px}
.in-entry-list{display:grid;gap:8px 30px;border-top:1.5px solid var(--ink);padding-top:12px}
@media (min-width:760px){.in-entry-list{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.in-entry-list a{display:flex;gap:10px;align-items:baseline;font:500 16px/1.35 var(--sans);color:var(--ink-2)}
.in-entry-list a:hover{color:var(--pink);text-decoration:none}
.in-entry-list .num{font-size:12.5px}
/* ---------- mobile ---------- */
@media (max-width:700px){
.wrap,.wrap-wide{padding-inline:20px}
.register thead{display:none}
.register,.register tbody,.register tr,.register td{display:block;width:auto}
.register tr{padding:14px 0;border-bottom:1px solid var(--line-2)}
.register tr:last-child{border-bottom:none}
.register td{border:0;padding:2px 0}
.register td.yr{font-size:14px;margin-bottom:4px}
.register td:last-child{font-size:13.5px;color:var(--quiet)}
.datatable{font-size:15px}
.datatable td,.datatable th{padding:10px 8px}
.datatable td:first-child,.datatable th:first-child{padding-left:0}
.versus th,.versus td{display:block;padding:12px 14px}
.versus tr td:first-child{border-right:0}
.article-title{font-size:clamp(28px,8vw,36px)}
.established{padding:18px 20px}
.in-entry{padding:22px 20px 24px}
.prose>p{font-size:17px}
.prose>p.prose-open{font-size:18px}
.fig-mat{padding:10px}
.fig-mat figcaption{margin:10px -10px -10px;padding:14px 16px 12px}
.tl-panel h3{font-size:20px}
.foot-in{gap:24px}
.foot-cols{gap:24px}
}
@media (max-width:420px){
.sponsor{flex:1 1 100%}
.statrow{grid-template-columns:1fr}
}
/* touch targets */
@media (max-width:900px){
.menu-toggle{min-width:46px;min-height:46px;justify-content:center}
.menu-link{min-height:46px;align-items:center}
.menu-list a{padding:12px 0;min-height:44px;display:flex;align-items:center}
.menu-more{padding:10px 0}
.tl-dot{min-height:44px;padding:2px 0}
.strap-all{min-height:44px;display:flex;align-items:center}
.in-entry-list a{min-height:44px;align-items:center}
.foot-cols a{display:inline-block;padding:5px 0}
}
figcaption .credit{display:block}
/* related block with sibling pictures */
.related-links--img li{display:flex;flex-direction:column;gap:10px;border-top:1.5px solid var(--ink);padding-top:12px}
.related-links--img .rl-thumb{display:block;background:var(--paper);padding:0}
.related-links--img .rl-thumb img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.related-links--img .rl-thumb:hover{opacity:.88}
.related-links--img a:not(.rl-thumb){margin-top:2px}
/* 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}
.sponsor-list{flex-wrap:wrap!important}
.sponsor-list > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor-mark{flex-wrap:wrap!important}
.sponsor-mark > .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-mark-panel: Design set no ground on the mark, so light and dark logos cannot
both read against the page. Give every mark the same dark plate and an inset — and
GROW the box by that inset so the artwork keeps the size Design chose. */
.sponsor img,.sponsor-box img,.sp-logo img{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:56px!important;max-height:56px!important;width:100%!important;object-fit:contain!important;border-radius:2px}
/* sp-domain-override: per-domain, from work/css_override.css */
/* Breathing space inside the supporter logo panel.
⚠️ MY FIRST ATTEMPT MADE THIS WORSE, and the mistake is worth recording. I read
getComputedStyle(img).backgroundColor, saw `rgba(0,0,0,0)`, and concluded the build had no dark
panel — so I painted one onto the ![]()
itself. It already had one: the panel lives on the
WRAPPER, span.sponsor-mark (296x52, background rgb(25,28,25)). Painting a second background on
the image produced two overlapping black rectangles with mismatched edges, and content-box
padding grew the image to 79px tall inside a 52px wrapper so it spilled out of its own panel.
Check the PARENT before concluding an element lacks a background — the same "aim at the right
element" lesson as la-g, where three rules on the ![]()
did nothing because the thing being
centred was the span around it.
The fix pads the element that actually carries the panel, and takes the background back off the
image so there is exactly one rectangle:
before mark 296x52 img 276x79 two panels, image overflowing its wrapper
after mark 296x85 img 236x53 one panel, image fully inside it */
.sponsor[data-partner] img{
background: none !important;
box-sizing: border-box !important;
padding: 0 !important;
max-height: none !important;
}
.sponsor[data-partner] .sponsor-mark{
padding: 16px 20px !important;
height: auto !important;
}
/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}
/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}
/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}
/* 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:3;-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}
/* op-unify-marks: operator: unify the black grid sizing for the logos. .sponsor-mark is a
content-width flex item, so in a 344px tile the black boxes measured 223 / 344 / 344 / 157px
and several sat well off-centre (61px and 93px from the tile's left edge). The box takes the
tile — one plate size for the whole band, with object-fit still keeping each wordmark inside it.
⚠️ My first attempt also made .sponsor-list a five-column grid, which was wrong: the list is a
344px column, so five tracks collapsed every plate to 54px. The tiles were already full width;
only the box needed fixing. */
.sponsor-list .sponsor .sponsor-mark{width:100%}
/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
1415px at 390, 17% of the whole page. Two columns bring it to
835px (41% shorter). Checked before writing: no new overflow, smallest mark still
125px wide, longest blurb 1 lines, tile heights 127-128px.
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-list), 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-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
.sponsor-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
.sponsor-list > * *{min-width:0!important;max-width:100%}
.sponsor-list img,.sponsor-list svg{max-width:100%;height:auto}
}
/* op-odd-tier-lead: .sponsor-list (5 tiles), .sponsor-list (5 tiles) lay out two per row with an ODD tile count, so the
block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
complete. These tiers were already two-per-row, which is why the column pass never wrote the
rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
.sponsor-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
.sponsor-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:701px) and (max-width:1199px){
div.rail-group{padding-left:max(28px, 18px);padding-right:max(28px, 18px)}
ul.menu{padding-left:max(28px, 18px);padding-right:max(28px, 18px)}
div.wrap.strap-in.strap-in--menu ul.menu{padding-left:0;padding-right:0}
}
@media (min-width:1101px) and (max-width:1299px){
div.wrap.feed{padding-left:max(28px, 18px);padding-right:max(28px, 18px)}
}
@media (min-width:701px) and (max-width:1299px){
div.wrap.lede-wrap{padding-left:max(28px, 18px);padding-right:max(28px, 18px)}
div.wrap.strap-in.strap-in--menu{padding-left:max(28px, 18px);padding-right:max(28px, 18px)}
}
@media (min-width:681px) and (max-width:1299px){
div.wrap.plate-in{padding-left:max(28px, 18px);padding-right:max(28px, 18px)}
}
@media (min-width:801px) and (max-width:1199px){
section.pair{padding-left:max(28px, 18px);padding-right:max(28px, 18px)}
}
@media (min-width:701px) and (max-width:899px){
section.pair > div{padding-left:max(28px, 18px);padding-right:max(28px, 18px)}
section.pullquote > div{padding-left:max(28px, 18px);padding-right:max(28px, 18px)}
}
/* op-tablet-gutter:end */