/* wildlife-fantasy.com — The Three Sources
   Tokens, layout, components. No external runtime. */

/* ---------- tokens ---------- */
:root{
  --paper:#F1F0EA;
  --paper-2:#FBFAF7;
  --paper-3:#E7E7DF;
  --ink:#1A1C19;
  --ink-2:#474D46;
  --steel:#767D76;
  --rule:#CDCCC3;
  --rule-2:#E0DFD7;
  --oxide:#8A3A2A;
  --oxide-lt:#B4705F;
  --sky:#C6D2D7;

  --src-life:#3B5A46;
  --src-skin:#8A3A2A;
  --src-photo:#3A4B61;

  --t-xs:0.72rem;
  --t-sm:0.86rem;
  --t-md:0.95rem;
  --t-base:1.06rem;
  --t-body:1.19rem;
  --t-lead:1.42rem;
  --t-lg:1.35rem;
  --t-xl:1.75rem;
  --t-2xl:2.3rem;
  --t-3xl:clamp(2.1rem,4.4vw,3.5rem);
  --t-4xl:clamp(2.6rem,6vw,5rem);

  --serif:"Faustina",Georgia,serif;
  --text:"Spectral",Georgia,serif;
  --mono:"DM Mono","SFMono-Regular",Consolas,monospace;

  --gut:clamp(18px,4vw,64px);
  --measure:34em;
  --shell:1420px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--t-base)/1.6 var(--text);
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--oxide)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.005em}
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(--sky)}
:focus-visible{outline:2px solid var(--oxide);outline-offset:3px}

.wrap{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:940px;margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper-2);padding:10px 14px;z-index:99}

/* ---------- micro type ---------- */
.kicker,.meta,.eyebrow,.stamp,.fig-credit,.t-when,.sponsor-kicker{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;
}
.kicker{font-size:var(--t-xs);color:var(--steel)}
.eyebrow{font-size:var(--t-xs);color:var(--oxide)}
.meta{font-size:var(--t-sm);color:var(--ink-2);letter-spacing:.1em;text-transform:none}
.rule-head{display:flex;align-items:baseline;gap:18px;margin:0 0 26px}
.rule-head .line{flex:1;height:1px;background:var(--rule)}

/* source stamps */
.stamp{
  display:inline-flex;align-items:center;gap:.5em;font-size:var(--t-xs);
  border:1px solid currentColor;padding:5px 8px;line-height:1;color:var(--steel);
  background:rgba(255,255,255,.35);white-space:nowrap;
}
.stamp b{font-weight:400;letter-spacing:.2em}
.stamp--life{color:var(--src-life)}
.stamp--skin{color:var(--src-skin)}
.stamp--photo{color:var(--src-photo)}
.stamp--anatomy,.stamp--media{color:var(--steel)}

/* ---------- masthead ---------- */
.masthead{background:var(--paper-2);border-bottom:1px solid var(--ink)}
.masthead-top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:26px 0 18px;flex-wrap:wrap}
.wordmark{display:flex;flex-direction:column;align-items:flex-start}
.wordmark .wm-name{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:.95;letter-spacing:-.01em}
.wordmark .wm-domain{display:block;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.26em;text-transform:uppercase;color:var(--oxide);margin-top:9px}
.masthead-line{font-family:var(--text);font-size:var(--t-md);color:var(--ink-2);max-width:30em;font-style:italic}
.nav{border-top:1px solid var(--rule)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.nav li{border-right:1px solid var(--rule)}
.nav li:last-child{border-right:0;margin-left:auto}
.nav a{display:block;padding:14px 20px 13px;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.nav li:first-child a{padding-left:0}
.nav a:hover{background:var(--paper-3);color:var(--ink)}
.nav a[aria-current]{color:var(--oxide);box-shadow:inset 0 -3px 0 var(--oxide)}
.nav .nav-browse a{color:var(--ink);padding-right:0}

/* ---------- homepage lead ---------- */
.lead-band{border-bottom:1px solid var(--rule);padding-top:clamp(22px,2.6vw,40px);background:
  linear-gradient(168deg,rgba(198,210,215,.55),rgba(241,240,234,0) 62%)}
.lead-hero-panel{
  position:relative;display:flex;align-items:flex-end;min-height:clamp(420px,44vw,620px);
  background-size:cover;background-position:center 42%;border:1px solid var(--rule);
  padding:clamp(150px,26vw,330px) clamp(22px,3vw,44px) clamp(22px,3vw,44px);color:#EFEEE6;overflow:hidden;
  border-radius:clamp(150px,24vw,320px) clamp(150px,24vw,320px) 8px 8px;
}
.lead-hero-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,11,9,.93),rgba(10,11,9,.78) 42%,rgba(10,11,9,.42))}
.lead-hero-inner{position:relative;width:100%;max-width:34em;padding-left:clamp(0px,1.6vw,22px)}
.lead-hero-panel .byline{color:#C6C5BA}
.lead-hero-panel .stamp{background:rgba(10,11,9,.35);color:#D9C3B7}
.lead-hero-panel .lead-title{color:#FBFAF4}
.lead-hero-panel .lead-title a:hover{color:#E9BFAE}
.lead-hero-panel .lead-dek{color:#DAD9CF}
.lead-hero-panel .lead-more{color:#EFC4B3;border-bottom-color:#EFC4B3}
.lead-hero-cap{font-size:var(--t-md);line-height:1.5;color:#B4B3A8;border-top:1px solid rgba(239,238,230,.25);margin:22px 0 0;padding-top:10px;max-width:60ch}
.lead-hero-cap .fig-credit{color:#8E8D83;margin-top:6px}
.lead-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);padding:0 0 clamp(30px,3.4vw,52px)}
.lead-grid>article{display:flex;flex-direction:column}
.lead-grid>article.lead-hero-panel{flex-direction:row}
.lead-grid>article .lead-more{margin-top:auto}
.lead-figure{margin:0}
.lead-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule)}
.lead-title{font-size:var(--t-4xl);margin:.5em 0 0;font-weight:600}
.lead-dek{font-size:var(--t-lead);line-height:1.42;color:var(--ink-2);margin-top:.7em;max-width:30em}
.lead-more{display:inline-block;margin-top:1.1em;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--oxide);border-bottom:1px solid var(--oxide);padding-bottom:4px}

/* the register (tray) */
.tray{border-left:1px solid var(--rule);padding-left:clamp(18px,2vw,34px);display:flex;flex-direction:column}
.tray ol{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.tray-title{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:10px;display:flex;justify-content:space-between;gap:12px}
.tray ol{list-style:none;margin:0;padding:0}
.tray li{border-bottom:1px solid var(--rule-2);padding:15px 0}
.tray li:last-child{border-bottom:0}
.tray h3{font-size:var(--t-lg);margin:9px 0 5px;font-weight:600}
.tray p{margin:0;font-size:var(--t-md);color:var(--ink-2);line-height:1.5}

/* ---------- three-source comparator ---------- */
.sources{border-bottom:1px solid var(--rule);padding:clamp(30px,3.6vw,54px) 0}
.sources-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule)}
.source-col{background:var(--paper);padding:0 clamp(16px,1.6vw,26px);display:flex;flex-direction:column}
.source-col:first-child{padding-left:0}
.source-col:last-child{padding-right:0}
.source-col img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);margin-bottom:16px}
.source-col h3{font-size:var(--t-xl);margin:12px 0 8px}
.source-col .src-blurb{font-size:var(--t-md);color:var(--ink-2);margin-bottom:14px}
.source-col ul{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--rule-2)}
.source-col li{padding:7px 0;font-size:var(--t-md);display:flex;gap:10px}
.source-col li::before{content:"";flex:0 0 14px;height:1px;background:var(--rule);margin-top:.72em}

/* ---------- card grids (even height) ---------- */
.section-band{padding:clamp(30px,3.6vw,54px) 0;border-bottom:1px solid var(--rule)}
.section-band.alt{background:var(--paper-2)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(18px,2vw,30px)}
.card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--rule);height:100%}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card-body{padding:16px 16px 14px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:var(--t-lg);margin:10px 0 7px;min-height:2.2em}
.card p{font-size:var(--t-md);color:var(--ink-2);margin:0 0 12px;line-height:1.5}
.card .meta{margin-top:auto;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.card:hover{border-color:var(--ink)}

/* section listing */
.sect-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule)}
.sect-list .sect h3{font-size:var(--t-lg)}
.sect-list .cat-list a{font-size:var(--t-md)}
.sect-list .cat-list li{padding:9px 0;gap:8px}
.sect-list .cat-list .n{flex:0 0 1.8em}
.sect{background:var(--paper);padding:22px clamp(16px,1.6vw,26px) 24px;display:flex;flex-direction:column}
.sect h3{font-size:var(--t-xl);margin:12px 0 8px}
.sect .sect-blurb{font-size:var(--t-md);color:var(--ink-2)}
.cat-list{list-style:none;margin:16px 0 0;padding:0}
.cat-list li{border-top:1px solid var(--rule-2);padding:10px 0;display:flex;gap:12px;align-items:baseline}
.cat-list .n{font-family:var(--mono);font-size:var(--t-xs);color:var(--steel);flex:0 0 2.4em}
.cat-list a{font-family:var(--serif);font-size:var(--t-base);font-weight:500}
.sect-more{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--oxide)}

/* ---------- article ---------- */
.article-head{border-bottom:1px solid var(--rule);padding:clamp(24px,3vw,42px) 0 0}
.article-head .wrap>*{max-width:58rem;margin-inline:auto}
.article-foot{max-width:58rem;margin-inline:auto}
.crumbs{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:22px}
.crumbs a:hover{color:var(--oxide)}
.article-title{font-size:var(--t-3xl);max-width:24em}
.article-lead,.lead{font-size:var(--t-lead);line-height:1.44;color:var(--ink-2);max-width:32em;margin:.85em 0 0}
.byline{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:26px 0 clamp(20px,2.4vw,32px);font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}

/* source strip: the site's filing device */
.source-strip{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0 0 clamp(22px,2.6vw,34px)}
.source-strip div{background:var(--paper-2);padding:11px 16px;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);flex:1 1 180px}
.source-strip div.on{background:var(--ink);color:var(--paper-2)}
.source-strip div.on.life{background:var(--src-life)}
.source-strip div.on.skin{background:var(--src-skin)}
.source-strip div.on.photo{background:var(--src-photo)}

.article-body{max-width:var(--measure);margin:0 auto;font-size:var(--t-body);line-height:1.68}
.article-body>h2{font-size:var(--t-2xl);margin:2.1em 0 .55em;max-width:22em;clear:both}
.article-body>h3{font-size:var(--t-xl);margin:1.8em 0 .5em;clear:both}
.article-body>.bench,.article-body>.pullquote,.article-body>.fig-bleed{clear:both}
.article-body>p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-weight:600;font-size:4.1em;line-height:.8;
  padding:.04em .1em 0 0;color:var(--oxide);
}
.article-body>p>a,.article-body li>a{color:var(--oxide);border-bottom:1px solid var(--oxide-lt)}
.article-body>p>a:hover,.article-body li>a:hover{background:rgba(138,58,42,.08)}
.article-body ul,.article-body ol{padding-left:1.2em}
.article-body li{margin-bottom:.5em}
.article-wrap{padding:clamp(26px,3vw,44px) 0 0}

/* figures — three instruments: bleed, column, inset */
.article-figure{margin:2.2em 0}
.article-figure img{width:100%;border:1px solid var(--rule);aspect-ratio:3/2;object-fit:cover}
.article-figure figcaption,.gallery figcaption,.map-figure figcaption{
  font-family:var(--text);font-size:var(--t-md);line-height:1.5;color:var(--ink-2);
  padding-top:10px;border-top:1px solid var(--rule);margin-top:10px;
}
.fig-credit{display:block;font-size:var(--t-xs);color:var(--steel);margin-top:7px;letter-spacing:.1em}
.fig-bleed{max-width:none;width:min(1420px,100vw - var(--gut)*2);margin-left:calc(50% - min(1420px,100vw - var(--gut)*2)/2);margin-top:2.6em;margin-bottom:2.6em}
.fig-bleed img{aspect-ratio:21/9;object-fit:cover}
.fig-bleed figcaption{max-width:56em}
.fig-wide{max-width:none;width:min(1060px,100vw - var(--gut)*2);margin-left:calc(50% - min(1060px,100vw - var(--gut)*2)/2)}
.fig-wide img{aspect-ratio:16/9}
.fig-inset{float:right;width:min(340px,42%);margin:.4em 0 1.4em clamp(18px,2.4vw,34px)}
.fig-inset img{aspect-ratio:4/5;object-fit:cover}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,1.6vw,22px);margin:2.4em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--rule)}
.hero-figure{margin:0 auto clamp(24px,3vw,40px);max-width:1080px}
.hero-figure img{width:100%;aspect-ratio:2/1;object-fit:cover;border:1px solid var(--rule);border-radius:clamp(120px,18vw,260px) clamp(120px,18vw,260px) 8px 8px}
.hero-figure figcaption{max-width:52em}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,3vw,46px)}

/* text components */
.pullquote{margin:2.2em 0;padding:1.1em 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.pullquote p{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.24;margin:0;text-wrap:balance}
.blockquote{margin:2em 0;padding-left:1.2em;border-left:3px solid var(--oxide)}
.blockquote p{font-size:var(--t-lg);line-height:1.5;margin:0 0 .5em}
.blockquote cite{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);font-style:normal}
.callout{margin:2em 0;background:var(--paper-2);border:1px solid var(--rule);border-left:4px solid var(--oxide);padding:20px 22px}
.callout p{margin:0;font-size:var(--t-base);line-height:1.6}
.note{font-size:var(--t-md);color:var(--ink-2);background:var(--paper-3);padding:14px 16px;border-left:2px solid var(--steel);margin:1.6em 0}

/* bench bands — full-width interruptions carrying the notes material */
.bench{
  max-width:none;width:100vw;margin-left:calc(50% - 50vw);
  background:var(--ink);color:#E6E5DC;padding:clamp(28px,3.4vw,48px) 0;margin-top:3em;margin-bottom:3em;
}
.bench.pale{background:var(--paper-3);color:var(--ink);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bench-inner{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.bench-head{display:flex;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.bench-head .k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--oxide-lt)}
.bench.pale .bench-head .k{color:var(--oxide)}
.bench-head h2{font-family:var(--serif);font-size:var(--t-xl);margin:0}
.bench-head .line{flex:1;height:1px;background:rgba(230,229,220,.28);min-width:30px}
.bench.pale .bench-head .line{background:var(--rule)}
.bench .datatable td,.bench .datatable th{border-color:rgba(230,229,220,.2)}
.bench.pale .datatable td,.bench.pale .datatable th{border-color:var(--rule)}

/* data */
.datatable,.versus{width:100%;border-collapse:collapse;font-size:var(--t-base);margin:1.4em 0}
.datatable caption,.versus caption{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  text-align:left;color:var(--steel);padding-bottom:10px;
}
.datatable th,.versus th{
  font-family:var(--mono);font-weight:400;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top;
}
.datatable td,.versus td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule-2);vertical-align:top;line-height:1.5}
.datatable tbody th{width:34%;color:inherit;font-family:var(--serif);font-size:var(--t-base);letter-spacing:0;text-transform:none;font-weight:600;border-bottom:1px solid var(--rule-2)}
.versus td+td{border-left:1px solid var(--rule-2);padding-left:14px}
.versus th+th{border-left:1px solid var(--rule);padding-left:14px}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--rule);margin:1.6em 0;border:1px solid var(--rule)}
.statblock{background:var(--paper-2);padding:18px;display:flex;flex-direction:column;gap:8px}
.bench .statblock{background:#22241F}
.bench.pale .statblock{background:var(--paper-2)}
.stat-num{font-family:var(--serif);font-size:2.4rem;line-height:.95;font-weight:600;color:var(--oxide)}
.bench .stat-num{color:#D89A7F}
.stat-label{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--steel);line-height:1.4}
.bench .stat-label{color:#A9A79C}

.timeline{list-style:none;margin:1.4em 0 0;padding:0;counter-reset:tl}
.timeline li{display:grid;grid-template-columns:minmax(140px,20%) minmax(0,1fr);gap:clamp(14px,2vw,30px);padding:15px 0;border-top:1px solid var(--rule-2)}
.bench .timeline li{border-top-color:rgba(230,229,220,.2)}
.t-when{font-size:var(--t-xs);letter-spacing:.14em;color:var(--oxide);line-height:1.5}
.bench .t-when{color:#D89A7F}
.t-what{font-size:var(--t-base);line-height:1.55}

/* charts */
.chart{margin:1.6em 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-size:var(--t-md);color:var(--ink-2);padding-top:12px;border-top:1px solid var(--rule);margin-top:8px}
.chart .bar-rect{fill:var(--oxide)}
.chart .bar-label,.chart .axis-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;fill:var(--ink-2)}
.chart .bar-value{font-family:var(--mono);font-size:11px;fill:var(--steel)}
.chart .line-path{fill:none;stroke:var(--oxide);stroke-width:2}
.chart .grid-line{stroke:var(--rule);stroke-width:1}
.chart .donut-track{fill:none;stroke:var(--rule)}
.chart .donut-arc{fill:none;stroke:var(--oxide)}

/* map */
.map-figure{margin:2.4em 0}
.map-figure .map-slot{border:1px solid var(--rule);background:var(--paper-2);overflow:hidden;line-height:0}
.map-figure svg{display:block;width:100%;height:auto}
.map-land{fill:var(--paper-3);stroke:var(--steel);stroke-width:.7;vector-effect:non-scaling-stroke}
.map-pin circle{fill:var(--oxide);stroke:var(--paper-2);stroke-width:1.4}
a.map-pin{cursor:pointer}
a.map-pin circle,a.map-pin text{transition:fill .15s ease}
a.map-pin:hover circle{fill:var(--ink);r:5.5}
a.map-pin:hover text{fill:var(--oxide)}
a.map-pin:focus-visible circle{fill:var(--ink)}
.map-refs{margin-top:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.map-refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.map-refs{grid-template-columns:1fr}}
.map-refs .org-host{text-transform:none;letter-spacing:.04em;font-family:var(--text);font-size:var(--t-md);color:var(--ink-2)}
.map-refs .org-name{font-size:var(--t-md)}
.map-pin text{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink);paint-order:stroke;stroke:var(--paper-2);stroke-width:2.6px;stroke-linejoin:round}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.6vw,22px);margin:1.6em 0}
.profile-card{background:var(--paper-2);border:1px solid var(--rule);padding:18px;display:flex;flex-direction:column;gap:8px;height:100%}
.bench .profile-card{background:#22241F;border-color:rgba(230,229,220,.2)}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--rule);margin-bottom:6px}
.profile-card h3{font-size:var(--t-lg)}
.profile-card .p-role{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:0}
.profile-card p{font-size:var(--t-md);line-height:1.55;margin:0}
.profile-card .p-links{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:12px}
.profile-card .p-attr{font-family:var(--mono);font-size:var(--t-xs);color:var(--steel);letter-spacing:.1em}
.profile-card.no-photo{border-left:4px solid var(--steel)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);margin:1.6em 0;border:1px solid var(--rule)}
.org-card{background:var(--paper-2);padding:16px;display:flex;flex-direction:column;gap:6px}
.org-card .org-logo{width:100%;max-height:34px;width:auto;object-fit:contain;object-position:left}
.org-card .org-name{font-family:var(--serif);font-size:var(--t-base);font-weight:600}
.org-card .org-host{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;color:var(--steel);overflow-wrap:anywhere}
.org-card:hover{background:var(--paper-3)}
.entity-ref{color:var(--oxide);border-bottom:1px solid var(--oxide-lt);white-space:nowrap}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:1.6em 0}
.further-grid a{background:var(--paper-2);padding:18px;font-family:var(--serif);font-size:var(--t-lg);font-weight:500;display:block}
.further-grid a:hover{background:var(--paper-3)}
.related-links{list-style:none;margin:1.2em 0 0;padding:0}
.related-links li{border-top:1px solid var(--rule-2);padding:12px 0}
.related-links a{font-family:var(--serif);font-size:var(--t-lg);font-weight:500}
.related-links .rel-src{display:block;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-top:5px}

/* article foot */
.article-foot{border-top:1px solid var(--ink);margin-top:clamp(34px,4vw,60px);padding-top:26px}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tagrow span,.tagrow a{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--rule);padding:7px 10px;color:var(--ink-2)}
.tagrow a:hover{border-color:var(--oxide);color:var(--oxide)}
.crosslink{background:var(--paper-2);border:1px solid var(--rule);padding:18px 20px}
.crosslink .k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--oxide);display:block;margin-bottom:10px}
.crosslink a{font-family:var(--serif);font-size:var(--t-lg);font-weight:500}

/* ---------- colophon / supporters ---------- */
.colophon{background:var(--ink);color:#DEDDD3;padding:clamp(30px,3.6vw,52px) 0}
.colophon-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.sponsor-kicker{font-size:var(--t-xs);letter-spacing:.24em;color:#A9A79C}
.colophon-head h2{font-family:var(--serif);font-size:var(--t-xl);color:var(--paper-2);margin:0}
.colophon-note{font-size:var(--t-md);color:#A9A79C;max-width:46em;margin:0 0 26px}
.sponsor-group{margin-top:26px}
.sponsor-group>h3{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:#A9A79C;
  border-bottom:1px solid rgba(222,221,211,.25);padding-bottom:10px;margin:0 0 1px;font-weight:400;
}
.sponsor-list{display:flex;flex-wrap:wrap;gap:1px;background:rgba(222,221,211,.18)}
.sponsor{
  flex:1 1 260px;min-width:230px;background:var(--ink);
  padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;
}
.sponsor:hover{background:#24261F}
.sponsor .sponsor-name{
  font-family:var(--serif);font-size:var(--t-lg);font-weight:500;color:var(--paper-2);line-height:1.2;
  overflow-wrap:break-word;
}
.sponsor:hover .sponsor-name{color:#E9BFAE}
.sponsor .sponsor-blurb{font-family:var(--text);font-size:var(--t-md);line-height:1.5;color:#A9A79C;min-width:200px}
.sponsor.feat .sponsor-name{font-size:var(--t-xl)}

/* ---------- footer ---------- */
.site-foot{background:#111310;color:#9E9C92;padding:clamp(30px,3.4vw,50px) 0 40px}
.foot-cols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.site-foot h2{font-family:var(--serif);font-size:var(--t-xl);color:var(--paper-2);margin:0 0 12px}
.site-foot h3{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:#6F7268;margin:0 0 14px;font-weight:400}
.site-foot p{font-size:var(--t-md);line-height:1.55;max-width:30em}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.site-foot a{color:#CFCEC4}
.site-foot a:hover{color:#E9BFAE}
.foot-base{margin-top:34px;padding-top:16px;border-top:1px solid rgba(222,221,211,.14);font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:10px 26px;color:#6F7268}

/* ---------- section / category page ---------- */
.cat-head{border-bottom:1px solid var(--rule);padding:clamp(26px,3vw,46px) 0 clamp(24px,3vw,40px);background:linear-gradient(170deg,rgba(198,210,215,.42),rgba(241,240,234,0) 78%)}
.cat-head h1{font-size:var(--t-4xl);max-width:18em}
.cat-head .cat-intro{font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);max-width:34em;margin-top:.7em}
.cat-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}

/* rows: dense index listing */
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,220px);gap:clamp(16px,2.4vw,34px);padding:22px 0;border-bottom:1px solid var(--rule-2);align-items:start}
.row img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--rule)}
.row h3{font-size:var(--t-xl);margin:8px 0 8px}
.row p{font-size:var(--t-md);color:var(--ink-2);margin:0;line-height:1.55}
.row .row-meta{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);line-height:1.7}
.row:hover h3{color:var(--oxide)}

/* expander for long lists (CSS only) */
.expander{margin-top:14px}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander input:checked ~ .more{display:block}
.expander label{
  display:inline-block;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--oxide);border-bottom:1px solid var(--oxide);padding-bottom:4px;cursor:pointer;margin-top:12px;
}
.expander input:checked ~ label .lbl-more{display:none}
.expander label .lbl-less{display:none}
.expander input:checked ~ label .lbl-less{display:inline}

/* prose pages (about/contact/404) */
.page-body{max-width:36em;margin:0 auto;font-size:var(--t-body);line-height:1.66;padding:clamp(26px,3vw,46px) 0}
.page-body h2{font-size:var(--t-xl);margin:1.8em 0 .5em}
.page-body a{color:var(--oxide);border-bottom:1px solid var(--oxide-lt)}
.err{padding:clamp(40px,7vw,110px) 0;text-align:left}
.err h1{font-size:var(--t-4xl)}

/* styleguide only */
.sg-block{border-top:1px solid var(--ink);padding:30px 0 10px}
.sg-block>h2{font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.18em;text-transform:uppercase;color:var(--oxide);margin-bottom:18px}
.sg-narrow{max-width:var(--measure)}
.sg-360{width:360px;max-width:100%;border:1px dashed var(--steel);padding:12px;overflow:hidden;resize:horizontal}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .sect-list{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .sect-list .sect h3{font-size:var(--t-xl)}
}
@media (max-width:1100px){
  .lead-hero-panel{min-height:clamp(380px,60vw,520px);border-radius:clamp(120px,30vw,240px) clamp(120px,30vw,240px) 8px 8px;padding-top:clamp(130px,32vw,260px)}
  .lead-grid>article .lead-more{margin-top:1.1em}
  .lead-grid{grid-template-columns:1fr}
  .tray{border-left:0;border-top:1px solid var(--ink);padding-left:0;padding-top:18px}
  .tray ol{display:block}
  .sources-grid{grid-template-columns:1fr}
  .source-col{padding:22px 0}
  .source-col:first-child{padding-top:0}
  .foot-cols{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:minmax(0,180px) minmax(0,1fr)}
  .row .row-meta{grid-column:2}
}
@media (max-width:760px){
  :root{--t-body:1.1rem;--t-lead:1.22rem}
  .masthead-line{display:none}
  .nav{position:relative}
  .nav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;background:linear-gradient(to right,rgba(251,250,247,0),var(--paper-2))}
  .nav ul{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:0 0 auto;border-right:1px solid var(--rule);border-bottom:0;width:auto}
  .nav li:last-child{margin-left:0;border-right:0}
  .nav a,.nav li:first-child a{padding:13px 14px}
  .nav li:first-child a{padding-left:0}
  .nav .nav-browse a{color:var(--oxide);padding-right:34px}
  .hero-figure img{aspect-ratio:3/2;border-radius:clamp(70px,20vw,180px) clamp(70px,20vw,180px) 8px 8px}
  .article-body>p:first-of-type::first-letter{font-size:3.4em}
  .fig-inset{float:none;width:100%;margin:1.6em 0}
  .lead-hero-panel{min-height:0;padding:170px clamp(18px,5vw,28px) clamp(18px,5vw,28px);background-position:center 38%;border-radius:150px 150px 8px 8px}
  .fig-bleed img{aspect-ratio:3/2}
  .row{grid-template-columns:1fr}
  .row .row-meta{grid-column:1}
  .foot-cols{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:6px}
  .versus,.datatable{font-size:var(--t-md)}
  .datatable tbody th{width:40%}
  .article-body{max-width:none}
  .sponsor{flex:1 1 100%;min-width:0}
}
@media print{
  body::before,.nav,.colophon,.site-foot{display:none}
  body{background:#fff}
}

/* bench lists (notes material) */
.bench-list{list-style:none;margin:1.2em 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:rgba(230,229,220,.2)}
.bench.pale .bench-list{background:var(--rule)}
.bench-list li{background:var(--ink);padding:16px 18px;font-size:var(--t-base);line-height:1.55}
.bench.pale .bench-list li{background:var(--paper-2)}
.bench-list li b{display:block;font-family:var(--serif);font-weight:600;font-size:var(--t-lg);margin-bottom:6px;color:var(--paper-2)}
.bench.pale .bench-list li b{color:var(--ink)}
.bench .versus caption,.bench .datatable caption{color:#A9A79C}
.bench .versus th,.bench .datatable tbody th{color:#F1F0EA}
.bench .profile-card h3{color:var(--paper-2)}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* 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{object-fit:contain!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-article-width: the article column was capped at 647px (78 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (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){
  div.article-body{--measure:min(44.275em, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{--measure:min(clamp(44.275em, 58.542vw, calc(44.275em * 1.2)), 100%)!important}
  div.article-body > :is(p:not([class])){font-size:clamp(19.04px,1.3222vw,22.85px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0px; letter-spacing: -0.005em;}
.site-foot h2:where(.rt-h3){font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: rgb(111, 114, 104); margin: 0px 0px 14px; font-weight: 400;}
.row h2:where(.rt-h3){font-size: var(--t-xl); margin: 8px 0px;}
.row:hover h2:where(.rt-h3){color: var(--oxide);}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:799px){
  blockquote.pullquote{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
  div.article-body{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
  div.gallery{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
  figure.article-figure.fig-inset > figcaption, figure.article-figure.fig-inset > :is(p,h2,h3,h4,ul,ol,[class*=cap],.credit,.chart-title,.chart-note){padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
  div.article-body blockquote.pullquote{padding-left:0;padding-right:0}
  div.article-body div.gallery{padding-left:0;padding-right:0}
  div.article-body figure.article-figure.fig-inset > figcaption, div.article-body figure.article-figure.fig-inset > :is(p,h2,h3,h4,ul,ol,[class*=cap],.credit,.chart-title,.chart-note){padding-left:0;padding-right:0}
}
@media (min-width:681px) and (max-width:999px){
  div.foot-grid{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.article-body > figure.article-figure.fig-bleed > img,
  div.article-body > figure.article-figure.fig-inset > img,
  div.article-body > figure.article-figure.fig-wide > img,
  div.cards > a.card > img,
  div.gallery > figure > img,
  div.rows > a.row > img,
  div.sources-grid > div.source-col > img,
  div.wrap > figure.hero-figure > img){height:auto}
/* op-img-dims:end */