/* The Musketeer — Candlelight
   atlas.css — one stylesheet for the whole site. */

:root{
  --ink:#14100F;
  --ink-deep:#0B0908;
  --ink-raise:#191413;
  --paper:#EAE1D2;
  --cream:#F5EDDD;
  --masthead:#F0E7D6;
  --gold:#C8A24A;
  --gold-hover:#E6C87F;
  --blood:#8E2B24;
  --rule:rgba(200,162,74,.20);
  --rule-strong:rgba(200,162,74,.28);
  --dash:rgba(200,162,74,.28);
  --gutter:60px;
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Crimson Pro',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:22px;line-height:1.66;font-weight:400;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-hover)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;color:var(--cream);margin:0;text-wrap:pretty}
p{margin:0 0 26px}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--rule);margin:0}
::selection{background:rgba(200,162,74,.28);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{padding-inline:var(--gutter)}
.band{padding-block:56px;border-top:1px solid var(--rule)}
.band--flush{border-top:0}
.kicker{font-family:var(--display);font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 22px}
.kicker--red{color:var(--blood)}
.eyebrow{font-family:var(--display);font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.eyebrow--red{color:var(--blood)}
.dek{font-size:22px;line-height:1.58;font-style:italic;color:rgba(234,225,210,.78);margin:0}
.meta{font-family:var(--display);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,225,210,.52)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;background:var(--gold);color:var(--ink);padding:10px 16px}

/* ---------- header + nav ---------- */
.site-head{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px 44px;padding:22px var(--gutter);border-bottom:1px solid var(--rule)}
.site-head--over{border-bottom:0;background:transparent}
.lockup{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;text-decoration:none}
.lockup b{font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:.24em;text-transform:uppercase;color:var(--masthead);white-space:nowrap}
.lockup span{font-family:var(--display);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.lockup:hover b{color:var(--gold-hover)}

.nav{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 30px;align-items:center}
.nav>li{position:relative}
.nav>li>a{font-family:var(--display);font-size:16px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(240,231,214,.75);white-space:nowrap;display:block;padding:6px 0}
.nav>li>a:hover,.nav>li:focus-within>a{color:var(--gold)}
.nav>li>a[aria-current]{color:var(--gold)}
.nav .has-sub>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:9px;vertical-align:2px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)}
.nav .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav-sub{position:absolute;top:calc(100% + 14px);left:-22px;min-width:308px;margin:0;padding:14px 0 10px;
  list-style:none;background:var(--ink-raise);border:1px solid var(--rule-strong);
  box-shadow:0 24px 48px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:30}
.nav-sub::before{content:attr(data-cat);display:block;font-family:var(--display);font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);padding:0 22px 10px}
.nav-sub a{display:block;padding:9px 22px;font-family:var(--body);font-size:18px;line-height:1.3;color:rgba(240,231,214,.82)}
.nav-sub a:hover{color:var(--gold-hover);background:rgba(200,162,74,.08)}
.nav-sub .nav-sub-all{font-family:var(--display);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin-top:8px;border-top:1px solid var(--rule);padding-top:12px}
.nav>li:hover>.nav-sub,.nav>li:focus-within>.nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-rows:auto;background:var(--ink)}
.hero-art{position:relative;height:min(78vh,760px);min-height:560px;overflow:hidden}
.hero-art img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,15,.9) 0%,rgba(20,16,15,.2) 34%,rgba(20,16,15,.55) 78%,var(--ink) 100%)}
.hero-head{position:absolute;top:0;left:0;right:0;z-index:20}
.hero-title{padding:44px var(--gutter) 66px}
.hero-title h1{font-weight:300;font-size:88px;line-height:1.02;letter-spacing:-.015em;max-width:16ch}
.hero-title .dek{margin-top:24px;max-width:60ch;font-size:21px}

/* ---------- opening spread ---------- */
.spread{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:76px var(--gutter) 60px;border-bottom:1px solid var(--rule)}
.spread p{font-size:22px;line-height:1.66;color:rgba(234,225,210,.88)}
.dropcap::first-letter{font-family:var(--display);font-size:76px;line-height:.8;font-weight:400;color:var(--gold);
  float:left;padding:8px 12px 0 0}

/* ---------- fight breakdown (signature) ---------- */
.breakdown{padding:64px var(--gutter);border-top:1px solid var(--rule)}
.breakdown-top{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:flex-end;justify-content:space-between;margin-bottom:38px}
.breakdown-top h2{font-size:44px;line-height:1.06;max-width:22ch}
.breakdown-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.beats{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.beats li{display:block;border-bottom:1px solid var(--rule);padding:20px 0 20px 14px;
  border-left:2px solid transparent;transition:border-color .2s,color .2s}
.beats .b-n{font-family:var(--display);font-size:30px;font-weight:300;color:var(--gold);line-height:1.1}
.beats .b-name{font-family:var(--display);font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:6px}
.beats .b-note{font-size:19px;line-height:1.55;color:rgba(234,225,210,.7);display:block}
.beats li[aria-current="step"]{border-left-color:var(--gold);background:rgba(200,162,74,.05)}
.beats li[aria-current="step"] .b-note{color:var(--cream)}
.beats-js .beats li{color:rgba(234,225,210,.45)}
.beats-js .beats li:not([aria-current="step"]) .b-name{color:rgba(200,162,74,.55)}
.beats-js .beats li:not([aria-current="step"]) .b-note{color:rgba(234,225,210,.45)}
.beats--static li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:0 22px}
@media (max-width:820px){.beats--static li{grid-template-columns:44px minmax(0,1fr);gap:0 14px}}
.beats button{all:unset;cursor:pointer;display:grid;grid-template-columns:70px minmax(0,1fr);gap:0 22px;width:100%;text-align:left;box-sizing:border-box}
.beats button>span:last-child{min-width:0}
.beat-stage{position:sticky;top:24px;border:1px solid var(--rule);background:#100D0C;padding:18px}
.beat-stage svg{width:100%;height:auto;display:block}
.beat-caption{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:baseline;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.beat-caption span{font-family:var(--display);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:rgba(234,225,210,.55)}
.beat-nav{display:flex;gap:10px}
.beat-nav button{font-family:var(--display);font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  background:transparent;border:1px solid var(--rule-strong);color:var(--gold);padding:9px 16px;cursor:pointer}
.beat-nav button:hover{background:rgba(200,162,74,.12);color:var(--gold-hover)}
.mark-hero{fill:var(--gold)}
.mark-villain{fill:var(--blood)}
.beat-marker{transition:transform .35s cubic-bezier(.4,0,.2,1)}

/* ---------- cast grid ---------- */
.cast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}
.cast-card{display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--ink-raise)}
.cast-card .cast-art{aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--rule)}
.cast-card .cast-art img{width:100%;height:100%;object-fit:cover}
.cast-card .cast-body{padding:18px;display:flex;flex-direction:column;flex:1}
.cast-card h3{font-size:26px;line-height:1.15;color:var(--gold);min-height:2.3em}
.cast-card .role{font-family:var(--display);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--blood);margin:6px 0 10px}
.cast-card p{font-size:18px;line-height:1.5;color:rgba(234,225,210,.7);margin:0}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:19px}
th{font-family:var(--display);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  font-weight:400;text-align:left;padding:0 18px 12px 0;border-bottom:1px solid var(--rule-strong)}
td{padding:16px 18px 16px 0;border-bottom:1px solid var(--rule);color:rgba(234,225,210,.78);vertical-align:top;line-height:1.45}
td:last-child,th:last-child{padding-right:0}
tr.is-subject td{color:var(--cream);background:rgba(200,162,74,.06)}
tr.is-subject td:first-child{box-shadow:inset 3px 0 0 var(--gold);padding-left:16px}
.datatable caption,.versus caption{caption-side:top;text-align:left;font-family:var(--display);font-size:14px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(234,225,210,.5);padding-bottom:14px}
.versus td:first-child{font-family:var(--display);font-size:22px;color:var(--cream)}

/* ---------- ratings rail ---------- */
.rail{margin:40px var(--gutter) 56px;padding:34px 0;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);
  display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.rail-links{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.rail-links a{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:19px;letter-spacing:.06em;
  color:var(--masthead);border-bottom:1px solid rgba(200,162,74,.5);padding-bottom:3px}
.rail-links a:hover{color:var(--gold-hover);border-bottom-color:var(--gold)}
.rail-links svg{width:20px;height:20px;flex:none;color:var(--gold)}
.rail-links .score{color:var(--blood)}
.rail-note{font-size:17px;color:rgba(234,225,210,.45);margin:0;width:100%}

/* ---------- feed / cards ---------- */
.feature{display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:center;text-decoration:none}
.feature-art{aspect-ratio:16/10;overflow:hidden}
.feature-art img{width:100%;height:100%;object-fit:cover}
.feature h2{font-size:44px;line-height:1.06;margin-bottom:14px}
.feature p{font-size:20px;line-height:1.62;color:rgba(234,225,210,.72);margin:0 0 16px}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:52px}
.post-card{display:flex;flex-direction:column;text-decoration:none}
.post-card .card-art{aspect-ratio:16/10;overflow:hidden;margin-bottom:22px}
.post-card .card-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card:hover .card-art img{transform:scale(1.03)}
.post-card h3{font-size:34px;line-height:1.1;margin-bottom:10px}
.post-card p{font-size:19px;line-height:1.6;color:rgba(234,225,210,.7);margin:0 0 14px}
.post-card .meta{margin-top:auto}

.more-feed{margin-top:48px;border-top:1px solid var(--rule)}
.more-feed .row{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;padding:30px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.more-feed .row h3{font-size:30px;line-height:1.1;margin-bottom:8px}
.more-feed .row p{font-size:19px;line-height:1.55;color:rgba(234,225,210,.7);margin:0 0 12px;max-width:62ch}
.more-feed .row .row-art{aspect-ratio:3/2;overflow:hidden}
.more-feed .row .row-art img{width:100%;height:100%;object-fit:cover}
.expander{margin:0}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .hidden-rows{display:none}
.expander input:checked~.hidden-rows{display:block}
.expander label{display:inline-block;margin-top:26px;font-family:var(--display);font-size:15px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--rule-strong);padding:12px 22px;cursor:pointer}
.expander label:hover{background:rgba(200,162,74,.1);color:var(--gold-hover)}
.expander input:checked~label{display:none}

/* ---------- section cards ---------- */
.section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.section-card{background:var(--ink);padding:26px 24px 24px;display:flex;flex-direction:column;text-decoration:none;min-height:230px}
.section-card:hover{background:var(--ink-raise)}
.section-card .tag{font-family:var(--display);font-size:30px;font-weight:300;color:var(--gold);line-height:1}
.section-card h3{font-size:28px;line-height:1.1;margin:14px 0 8px}
.section-card p{font-size:18px;line-height:1.5;color:rgba(234,225,210,.68);margin:0}
.section-card .count{margin-top:auto;padding-top:18px;font-family:var(--display);font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(200,162,74,.8)}

/* ---------- sponsors ---------- */
.supporters{padding:60px var(--gutter);border-top:1px solid var(--rule)}
.sponsor-featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:32px}
.sponsor-featured .sponsor{display:flex;flex-direction:column;gap:16px;padding:26px;border:1px solid var(--rule-strong);background:var(--ink-deep)}
.sponsor-featured .sponsor img{width:100%;height:64px;object-fit:contain;background:var(--ink-deep)}
.sponsor-roll{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-top:28px}
.sponsor-roll .sponsor{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px dashed var(--dash);background:var(--ink-deep)}
.sponsor-roll .sponsor img{width:100%;height:40px;object-fit:contain}
.sponsor{text-decoration:none;color:inherit}
.sponsor:hover{border-color:var(--gold)}
.sponsor-blurb{font-size:18px;line-height:1.45;color:rgba(234,225,210,.62);min-height:1.45em}
.sponsor-roll .sponsor-blurb{font-size:16px}

/* ---------- footer ---------- */
.site-foot{padding:40px var(--gutter) 56px;border-top:1px solid var(--rule);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px 48px;align-items:start}
.site-foot .foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin:18px 0 0;padding:0;list-style:none}
.site-foot .foot-nav a{font-family:var(--display);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,231,214,.7)}
.disclaimer{margin:0;max-width:62ch;font-size:17px;line-height:1.6;color:rgba(234,225,210,.5)}

/* ---------- article ---------- */
.article-head{padding:64px var(--gutter) 0;display:grid;grid-template-columns:minmax(0,1fr);max-width:1180px}
.article-head h1{font-weight:300;font-size:76px;line-height:1.04;letter-spacing:-.01em;max-width:24ch}
.article-head .dek{margin-top:24px;max-width:58ch}
.article-head .meta{margin-top:26px;display:block}
.article-hero{margin:52px 0 0}
.article-hero .frame{height:420px;overflow:hidden}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article-credit{padding:12px var(--gutter) 0;font-size:16px;line-height:1.5;color:rgba(234,225,210,.45);margin:0;max-width:80ch}

.article-body{padding:56px var(--gutter) 20px;display:grid;grid-template-columns:120px minmax(0,68ch) minmax(0,1fr);
  column-gap:40px;max-width:1400px}
.article-body>*{grid-column:2}
.article-body .sec-no{grid-column:1;font-family:var(--display);font-size:34px;font-weight:300;color:rgba(200,162,74,.75);
  line-height:1;padding-top:10px;margin:0}
.article-body h2{grid-column:2;font-size:40px;line-height:1.1;margin:8px 0 22px}
.article-body h3{font-size:28px;margin:34px 0 14px}
.article-body p{font-size:22px;line-height:1.72;color:rgba(234,225,210,.9)}
.article-body ul,.article-body ol{font-size:21px;line-height:1.6;color:rgba(234,225,210,.85);padding-left:1.2em;margin:0 0 26px}
.article-body li{margin-bottom:10px}
.article-body>.breakout{grid-column:1/-1}
.lead,.article-body p.lead,.article-body .lead{font-size:26px;line-height:1.5;font-style:italic;color:var(--cream);margin-bottom:34px}
@media (max-width:820px){.lead,.article-body p.lead,.article-body .lead{font-size:22px}}
.lead-open p:first-of-type::first-letter{font-family:var(--display);font-size:74px;line-height:.78;color:var(--gold);
  float:left;padding:6px 12px 0 0}

.pullquote{margin:44px 0;padding:0;text-align:center;border:0}
.pullquote p{font-family:var(--display);font-weight:300;font-size:38px;line-height:1.24;font-style:italic;color:var(--cream);margin:0}
.blockquote{margin:34px 0;padding:0 0 0 26px;border-left:2px solid var(--gold)}
.blockquote p{font-size:22px;line-height:1.6;font-style:italic;color:var(--cream);margin:0 0 12px}
.blockquote cite{font-family:var(--display);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,225,210,.6);font-style:normal}
.callout{margin:34px 0;padding:26px 28px;border:1px solid var(--rule-strong);background:rgba(200,162,74,.05)}
.callout p{font-size:21px;line-height:1.6;color:var(--cream);margin:0}
.note{font-size:19px;line-height:1.6;color:rgba(234,225,210,.62);border-left:2px solid var(--rule-strong);padding-left:20px;margin:30px 0}

.keyfacts{margin:52px 0;padding:36px 0;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
.keyfacts h2{font-size:15px!important;font-family:var(--display);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 26px!important}
.keyfacts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px 48px;margin:0}
.keyfacts dt{font-family:var(--display);font-size:22px;color:var(--cream);margin-bottom:6px}
.keyfacts dd{margin:0;font-size:19px;line-height:1.5;color:rgba(234,225,210,.7);max-width:46ch}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:36px 0}
.statblock{background:var(--ink);padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--display);font-size:44px;font-weight:300;line-height:1;color:var(--gold)}
.stat-label{font-size:17px;line-height:1.45;color:rgba(234,225,210,.65)}

.timeline{list-style:none;margin:36px 0;padding:0;border-top:1px solid var(--rule)}
.timeline li{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:12px 28px;padding:18px 0;border-bottom:1px solid var(--rule)}
.timeline--stacked li{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0}
.timeline--stacked .t-what{font-size:18px}
.t-when{font-family:var(--display);font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);line-height:1.4}
.t-what{font-size:19px;line-height:1.55;color:rgba(234,225,210,.82)}

.chart{margin:40px 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:16px;font-size:17px;line-height:1.5;color:rgba(234,225,210,.55)}
.chart .c-bar{fill:var(--gold)}
.chart .c-bar.is-low{fill:var(--blood)}
.chart .c-label,.chart .c-value{font-family:var(--display);font-size:15px;letter-spacing:.08em;fill:rgba(234,225,210,.75)}
.chart .c-value{fill:var(--gold)}
.chart .c-axis{stroke:var(--rule-strong)}
.chart .c-line{fill:none;stroke:var(--gold);stroke-width:2}
.chart .c-dot{fill:var(--gold)}

.article-figure{margin:44px 0}
.article-figure img{width:100%;max-height:520px;object-fit:cover}
.article-figure figcaption{margin-top:14px;font-size:17px;line-height:1.5;color:rgba(234,225,210,.5)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:40px 0}
.gallery figure{margin:0}
.gallery img{aspect-ratio:3/2;object-fit:cover;width:100%}
.gallery figcaption{margin-top:10px;font-size:16px;color:rgba(234,225,210,.5)}
.map-figure{margin:40px 0;border:1px solid var(--rule-strong)}
.map-figure .map-slot{aspect-ratio:16/9;background:
  repeating-linear-gradient(45deg,rgba(200,162,74,.05) 0 12px,transparent 12px 24px)}
.map-figure figcaption{padding:14px 18px;font-size:17px;color:rgba(234,225,210,.55);border-top:1px solid var(--rule)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin:36px 0}
.profile-card{border:1px solid var(--rule);background:var(--ink-raise);padding:20px;display:flex;flex-direction:column;gap:8px}
.profile-card h3{font-size:24px;line-height:1.15;color:var(--gold);margin:0}
.profile-card .p-role{font-family:var(--display);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--blood);margin:0}
.profile-card p{font-size:18px;line-height:1.5;color:rgba(234,225,210,.72);margin:0}
.profile-card .p-photo{aspect-ratio:4/3;object-fit:cover;width:100%}
.profile-card .p-links a{font-size:17px}
.profile-card .p-attr{font-size:15px;color:rgba(234,225,210,.45);margin-top:auto}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:32px 0}
.org-card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--rule);background:var(--ink-deep)}
.org-logo{height:34px;width:auto;object-fit:contain;margin-bottom:6px}
.org-name{font-family:var(--display);font-size:21px;color:var(--cream)}
.org-host{font-size:16px;color:rgba(234,225,210,.5)}
.entity-ref{border-bottom:1px solid rgba(200,162,74,.45)}

.further,.related{margin:56px 0 0;padding:34px 0;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
.further h2,.related h2{font-family:var(--display);font-size:15px!important;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 22px!important}
.related-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px 34px}
.related-links a{font-family:var(--display);font-size:24px;line-height:1.2;color:var(--masthead)}
.related-links a:hover{color:var(--gold-hover)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}
.further-grid a{border:1px solid var(--rule);padding:20px;font-family:var(--display);font-size:24px;line-height:1.2;color:var(--masthead)}
.further-grid a:hover{border-color:var(--gold);color:var(--gold-hover)}

/* ---------- index / category pages ---------- */
.page-head{padding:70px var(--gutter) 46px}
.page-head h1{font-weight:300;font-size:74px;line-height:1.04}
.page-head .dek{margin-top:24px;max-width:64ch}
.cat-list{list-style:none;margin:0;padding:0 var(--gutter) 20px}
.cat-list>li{border-top:1px solid var(--rule)}
.cat-list>li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:center;padding:40px 0;text-decoration:none}
.cat-list h2{font-size:40px;line-height:1.08;margin-bottom:12px}
.cat-list p{font-size:20px;line-height:1.62;color:rgba(234,225,210,.72);margin:0 0 14px;max-width:64ch}
.cat-list .row-art{height:240px;overflow:hidden}
.cat-list .row-art img{width:100%;height:100%;object-fit:cover}

.factstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;padding:44px var(--gutter) 52px}
.factstrip .f-label{font-family:var(--display);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.factstrip .f-value{font-size:20px;line-height:1.4}
.factstrip .f-value small{display:block;font-size:17px;color:rgba(234,225,210,.5)}

.prose{padding:56px var(--gutter) 20px;max-width:80ch}
.prose h2{font-size:38px;margin:44px 0 18px}
.prose ul{font-size:21px;line-height:1.6}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:36px 0 0}
.contact-card{border:1px solid var(--rule);padding:24px;background:var(--ink-raise)}
.contact-card svg{width:26px;height:26px;color:var(--gold);margin-bottom:14px}
.contact-card h3{font-size:24px;margin-bottom:8px}
.contact-card p{font-size:18px;line-height:1.5;color:rgba(234,225,210,.7);margin:0}

.sg-block{padding:44px var(--gutter);border-top:1px solid var(--rule)}
.sg-block>h2{font-family:var(--display);font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:28px}
.sg-inner{max-width:78ch}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  :root{--gutter:40px}
  .hero-title h1{font-size:68px}
  .article-body{grid-template-columns:76px minmax(0,1fr)}
  .article-head h1{font-size:58px}
  .breakdown-grid{grid-template-columns:1fr;gap:40px}
  .beat-stage{position:static}
  .feature{grid-template-columns:1fr;gap:26px}
  .cat-list a{grid-template-columns:1fr;gap:22px}
  .cat-list .row-art{height:220px;order:-1}
  .more-feed .row{grid-template-columns:1fr;gap:20px}
  .more-feed .row .row-art{order:-1}
  .site-foot{grid-template-columns:1fr}
}
@media (max-width:820px){
  :root{--gutter:28px}
  body{font-size:20px}
  .site-head{padding:16px var(--gutter)}
  .nav{width:100%;gap:0;flex-direction:column;align-items:stretch;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-toggle:checked~.nav{max-height:1400px}
  .nav>li{border-top:1px solid var(--rule)}
  .nav>li>a{padding:14px 0;font-size:17px}
  .nav .has-sub::after{display:none}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;min-width:0;border:0;box-shadow:none;
    background:transparent;padding:0 0 12px 18px;display:none}
  .nav>li>a:focus~.nav-sub,.nav>li:focus-within .nav-sub,.nav>li:hover .nav-sub{display:block}
  .nav-sub::before{padding-left:0}
  .nav-sub a{padding:8px 0;font-size:17px}
  .nav-burger{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:14px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--gold);border:1px solid var(--rule-strong);padding:10px 14px;cursor:pointer}
  .hero-art{height:min(62vh,460px);min-height:340px}
  .hero-title{padding:30px var(--gutter) 44px}
  .hero-title h1{font-size:46px;max-width:none}
  .hero-title .dek,.dek{font-size:19px}
  .spread{grid-template-columns:1fr;gap:30px;padding:44px var(--gutter)}
  .two-up{grid-template-columns:1fr;gap:40px}
  .article-body{grid-template-columns:minmax(0,1fr);padding-inline:var(--gutter)}
  .article-body>*{grid-column:1}
  .article-body .sec-no{grid-column:1;font-size:26px;padding-top:0;margin-bottom:-8px}
  .article-body h2{grid-column:1;font-size:32px}
  .article-body p{font-size:20px}
  .article-head{padding:40px var(--gutter) 0}
  .article-head h1{font-size:40px}
  .article-hero .frame{height:260px}
  .pullquote p{font-size:28px}
  .lead{font-size:22px}
  .page-head{padding:44px var(--gutter) 30px}
  .page-head h1{font-size:44px}
  .breakdown-top h2{font-size:32px}
  .feature h2{font-size:32px}
  .post-card h3{font-size:28px}
  .rail{margin:30px var(--gutter) 40px}
  .timeline li{grid-template-columns:1fr}
  .keyfacts dl{grid-template-columns:1fr}
  .beats button{grid-template-columns:44px minmax(0,1fr);gap:0 14px}
  .beats .b-n{font-size:24px}
  .stat-num{font-size:34px}
}
@media (min-width:821px){.nav-burger{display:none}}
@media print{
  body{background:#fff;color:#111}
  .site-head,.rail,.supporters,.beat-nav{display:none}
}


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

/* sp-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-featured .sponsor.sponsor img{box-sizing:border-box!important;padding:10px 17px!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1960px at 390, 10% of the whole page. Two columns bring it to
   1101px (44% shorter). Checked before writing: no new overflow, smallest mark still
   104px wide, longest blurb 3 lines, tile heights 154-212px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-featured, .sponsor-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-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sponsor-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-featured > * *{min-width:0!important;max-width:100%}
    .sponsor-featured img,.sponsor-featured svg{max-width:100%;height:auto}
  .sponsor-roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sponsor-roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-roll > * *{min-width:0!important;max-width:100%}
    .sponsor-roll img,.sponsor-roll svg{max-width:100%;height:auto}
  .sponsor-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsor-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-featured (3 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-featured:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — ul.beats reached
   358px in a 320px screen (+38px), inside
   div.breakdown-grid. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.breakdown-grid{grid-template-columns:minmax(0,1fr)!important}
  ul.beats{min-width:0!important;max-width:100%!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-featured 5 rows at 900, .sponsor-roll 6 rows at 1280). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
  .sponsor-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h2.rt-h3{font-family: var(--display); font-weight: 400; color: var(--cream); margin: 0px; text-wrap: pretty;}
.contact-card h2.rt-h3{font-size: 24px; margin-bottom: 8px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > div.row-art > img,
  a.feature > div.feature-art > img,
  a.post-card > div.card-art > img,
  a.row > div.row-art > img,
  article.cast-card > div.cast-art > img,
  div.article-body > figure.article-figure.breakout > img,
  div.article-hero > div.frame > img,
  div.feature > div.feature-art > img,
  div.hero > div.hero-art > img){height:auto}
/* op-img-dims:end */