/* mulholland-drive.com — Two Halves
   Palette: ground (asphalt) · ink (bone) · accent (sodium amber) · secondary (box blue) */
:root{
  --ground:#0C0D10;
  --panel:#14161C;
  --panel-2:#1B1E26;
  --ink:#EFE9DE;
  --ink-dim:#B8B2A8;
  --muted:#8C867E;
  --accent:#E8912B;
  --secondary:#1A3A87;
  --rule:#2A2D36;
  --display:'Big Shoulders Display',Haettenschweiler,'Arial Narrow',sans-serif;
  --body:'Spectral',Georgia,'Times New Roman',serif;
  --measure:68ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.65;
  font-weight:300;text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:#f7b463;text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.01em;text-transform:uppercase;margin:0;line-height:.96}
p{margin:0 0 1.1em}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
.icn{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:1320px;margin:0 auto;padding-inline:clamp(20px,4.5vw,60px)}
.piece{display:grid;grid-template-columns:
  [full-start] minmax(0,1fr)
  [wide-start] minmax(0,150px)
  [text-start] min(100%,var(--measure))
  [text-end] minmax(0,150px)
  [wide-end] minmax(0,1fr) [full-end];}
.piece>*{grid-column:text}
.piece>.full{grid-column:full}
.piece>.wide{grid-column:wide}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule)}
.mast-top{display:flex;align-items:flex-end;gap:clamp(16px,3vw,36px);padding:26px 0 20px}
.mast-emblem{color:var(--accent);flex:none;width:clamp(78px,9vw,126px);height:auto}
.mast-title{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(38px,7.4vw,92px);line-height:.84;letter-spacing:-.015em;color:var(--ink);flex:1;min-width:0}
.mast-title a{color:inherit;text-decoration:none}
.mast-sig{flex:none;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);padding-bottom:8px;white-space:nowrap}
.nav{display:flex;flex-wrap:wrap;gap:10px 26px;padding:0 0 16px;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.17em;text-transform:uppercase}
.nav a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;padding:5px 0}
.nav a:hover{color:var(--accent)}
.nav a[aria-current]{color:var(--accent)}
.nav .icn{color:var(--accent)}
.roadrule{display:block;width:100%;height:8px;color:var(--accent)}

/* ---------- kickers / meta ---------- */
.kicker{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:9px}
.kicker.sub{color:var(--muted)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.byfurniture{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- home: lead ---------- */
.lead-band{position:relative;border-bottom:1px solid var(--rule)}
.lead-figure{position:relative;aspect-ratio:16/9;min-height:340px;overflow:hidden;background:var(--panel)}
.lead-figure img{width:100%;height:100%;object-fit:cover}
.lead-scrim{position:absolute;inset:auto 0 0 0;height:78%;
  background:linear-gradient(180deg,rgba(12,13,16,0) 0%,rgba(12,13,16,.72) 46%,rgba(12,13,16,.96) 100%)}
.lead-copy{position:absolute;inset:auto 0 0 0;padding:0 0 clamp(22px,3.4vw,44px)}
.lead-grid{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,52px);align-items:flex-end}
.lead-title{flex:1 1 420px;min-width:0;font-size:clamp(30px,5.1vw,68px);line-height:.95}
.lead-title a{color:var(--ink);text-decoration:none}
.lead-title a:hover{color:var(--accent)}
.lead-deck{flex:0 1 380px;min-width:260px;font-size:17px;line-height:1.6;color:var(--ink-dim)}
.lead-deck .hair{height:1px;background:var(--accent);margin-bottom:14px}
.lead-credit{padding:12px 0 20px;display:flex;flex-wrap:wrap;gap:8px 24px;
  font-family:var(--display);font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* ---------- signature band (amber area) ---------- */
.sigband{background:var(--accent);color:#120E07}
.sigband .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(18px,3vw,44px);padding-block:clamp(30px,4vw,52px)}
.sigband h2{font-size:clamp(34px,4.4vw,58px);color:#120E07;grid-column:1/-1;max-width:22ch}
.sigyear{border-top:2px solid #120E07;padding-top:12px}
.sigyear .y{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;display:block}
.sigyear p{margin:8px 0 0;font-size:16px;line-height:1.5;color:#241B0C}

/* ---------- bands ---------- */
.band{padding-block:clamp(44px,6vw,86px);border-bottom:1px solid var(--rule)}
.band.tight{padding-block:clamp(30px,4vw,54px)}
.band.blue{background:var(--secondary);border-bottom:0}
.band.blue a{color:#fff}
.band.blue .kicker{color:#CBD6FF}
.band.blue .card-dek{color:#DCE3FF}
.band-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 22px;margin-bottom:clamp(22px,3vw,38px)}
.band-head h2{font-size:clamp(28px,3.5vw,46px);flex:0 1 auto;max-width:30ch}
.band-head h2 a{color:inherit;text-decoration:none}
.band-head h2 a:hover{color:var(--accent)}
.band-head .fill{flex:1 1 60px;height:2px;background:var(--rule);min-width:30px}
.band.blue .band-head .fill{background:rgba(255,255,255,.35)}

.split{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,3.4vw,54px);align-items:start}
.split.rev{grid-template-columns:1fr 1.5fr}
@media (max-width:860px){.split,.split.rev{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(20px,2.6vw,38px)}
.card{display:flex;flex-direction:column;height:100%;border-top:2px solid var(--rule);padding-top:16px}
.card .sec{margin-bottom:10px}
.card h3{font-size:clamp(21px,2vw,28px);line-height:1.02;min-height:2.06em}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--accent)}
.card-dek{font-size:16px;line-height:1.55;color:var(--ink-dim);margin:12px 0 0}
.card .foot{margin-top:auto;padding-top:16px;font-family:var(--display);font-weight:600;
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card.big h3{font-size:clamp(26px,3vw,40px);min-height:0}

/* ---------- figures: three treatments, one family ---------- */
figure{margin:0}
.article-figure{margin:34px 0}
.article-figure img{width:100%;height:auto}
.article-figure figcaption{font-size:16px;line-height:1.5;color:var(--ink-dim);
  padding-top:12px;border-top:1px solid var(--rule)}
.article-figure .credit{display:block;font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:7px}

/* 1 — the mat */
.article-figure.mat{background:var(--ink);padding:14px}
.article-figure.mat figcaption{color:#26231E;border-top-color:#C9C1B4;padding-inline:2px}
.article-figure.mat .credit{color:#7C756A}

/* 2 — the bleed: breaks the measure, caption offset */
.article-figure.bleed{margin:clamp(38px,5vw,64px) 0}
.article-figure.bleed img{aspect-ratio:16/10;object-fit:cover}
.article-figure.bleed figcaption{border-top:0;display:flex;flex-wrap:wrap;gap:6px 32px;
  padding-top:14px;border-left:3px solid var(--accent);padding-left:18px;margin-top:2px}
.article-figure.bleed .credit{margin-top:0;align-self:center}


/* corner-marked pair */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:34px 0}
.gallery figure{position:relative;padding:0}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font-size:15px;line-height:1.5;color:var(--ink-dim);padding-top:10px}
.gallery figure::before,.gallery figure::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--accent)}
.gallery figure::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.gallery figure::after{bottom:auto;top:calc(100% - 60px);right:-6px;border-left:0;border-top:0}

/* ---------- article body ---------- */
.article-head{padding-block:clamp(34px,4.4vw,62px) 0}
.article-head h1{font-size:clamp(34px,6vw,82px);line-height:.92;margin-top:16px;max-width:24ch}
.lead{font-size:clamp(20px,2.2vw,25px);line-height:1.5;color:var(--ink);margin:22px 0 0;max-width:44ch;font-weight:400}
.body{padding-bottom:clamp(40px,5vw,72px)}
.body p{font-size:19px;line-height:1.78;color:#DED8CD}
.body h2{font-size:clamp(25px,2.9vw,38px);margin:clamp(34px,4vw,54px) 0 16px;color:var(--ink)}
.body h2 .num{color:var(--accent);margin-right:.5em;font-size:.72em;vertical-align:.1em}
.body a{border-bottom:1px solid rgba(232,145,43,.45);text-decoration:none}
.body a:hover{border-bottom-color:var(--accent);text-decoration:none}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:5.1em;
  line-height:.72;color:var(--accent);margin:.06em .12em 0 0}

/* ---------- text components ---------- */
.pullquote{margin:clamp(30px,4vw,48px) 0;padding:0 0 0 26px;border-left:3px solid var(--secondary)}
.pullquote p{font-family:var(--display);font-weight:700;text-transform:none;letter-spacing:-.005em;
  font-size:clamp(24px,3vw,34px);line-height:1.12;color:var(--ink);margin:0}
.blockquote{margin:30px 0;padding:22px 24px;background:var(--panel);border-top:2px solid var(--accent)}
.blockquote p{margin:0 0 10px;font-size:19px;line-height:1.6}
.blockquote cite{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-style:normal}
.callout{margin:30px 0;padding:22px 24px;background:var(--secondary);color:#fff}
.callout p{margin:0;font-size:19px;line-height:1.6}
.note{font-size:16px;line-height:1.6;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px}

/* ---------- notes-for-design plates ---------- */
.plate{background:var(--panel);border-top:3px solid var(--accent);padding:clamp(22px,3vw,34px)}
.plate.blue{background:var(--secondary);border-top-color:#fff}
.plate>.kicker{margin-bottom:18px}
.plate.blue>.kicker{color:#fff}
.plate h3{font-size:clamp(22px,2.4vw,30px);margin-bottom:16px}

.timeline{list-style:none;margin:0;padding:0;counter-reset:t}
.timeline li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:6px 26px;
  padding:14px 0;border-top:1px solid var(--rule)}
.plate.blue .timeline li{border-top-color:rgba(255,255,255,.28)}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);line-height:1.2}
.plate.blue .t-when{color:#fff}
.t-what{font-size:17px;line-height:1.55;color:var(--ink-dim)}
.plate.blue .t-what{color:#E6EAFF}
@media (max-width:620px){.timeline li{grid-template-columns:1fr}}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:26px 0}
.statblock{border-top:2px solid var(--accent);padding-top:12px}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1;display:block;color:var(--ink)}
.stat-label{font-size:15px;line-height:1.45;color:var(--muted);display:block;margin-top:8px}

.datatable,.versus{width:100%;border-collapse:collapse;margin:26px 0;font-size:17px}
.datatable th,.versus th{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);text-align:left;padding:10px 14px 10px 0;border-bottom:2px solid var(--rule)}
.datatable td,.versus td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);color:var(--ink-dim);vertical-align:top}
.versus td:first-child{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);width:34%}
.table-scroll{overflow-x:auto}

.chart{margin:30px 0}
.chart svg{width:100%;height:auto;display:block;color:var(--accent)}
.chart figcaption{font-size:15px;line-height:1.5;color:var(--muted);padding-top:12px;border-top:1px solid var(--rule)}

/* ---------- cards / references ---------- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin:30px 0}
.profile-card{display:flex;flex-direction:column;height:100%;background:var(--panel);padding:16px}
.profile-card .p-photo{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:14px}
.profile-card.no-photo{border-left:3px solid var(--secondary)}
.profile-card h3{font-size:22px;line-height:1.05}
.profile-card .p-role{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:8px 0 10px}
.profile-card p{font-size:16px;line-height:1.55;color:var(--ink-dim)}
.profile-card .p-links{margin-top:auto;padding-top:10px;font-size:15px}
.profile-card .p-attr{font-size:13px;color:var(--muted)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:26px 0}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--panel-2);padding:16px;text-decoration:none}
.org-card:hover{background:#232732;text-decoration:none}
.org-logo{height:34px;width:auto;object-fit:contain;margin-bottom:8px}
.org-name{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.org-host{font-size:14px;color:var(--muted);word-break:break-word}
.entity-ref{white-space:nowrap}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:26px 0}
.further-grid a{display:block;border-top:2px solid var(--accent);padding-top:14px;
  font-family:var(--display);font-weight:700;font-size:21px;line-height:1.06;text-transform:uppercase;
  color:var(--ink);text-decoration:none}
.further-grid a:hover{color:var(--accent);text-decoration:none}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.related-links li{border-top:2px solid var(--rule);padding-top:14px}
.related-links a{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.06;
  text-transform:uppercase;color:var(--ink);text-decoration:none;display:block}
.related-links a:hover{color:var(--accent);text-decoration:none}
.related-links .sec{display:block;margin-bottom:8px}

.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule);padding:22px 0}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list .row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.5fr);gap:10px 34px;align-items:start}
.cat-list h3{font-size:clamp(22px,2.4vw,30px);line-height:1.04}
.cat-list h3 a{color:var(--ink);text-decoration:none}
.cat-list h3 a:hover{color:var(--accent)}
.cat-list p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-dim)}
@media (max-width:760px){.cat-list .row{grid-template-columns:1fr}}

/* ---------- supporters ---------- */
.supporters{background:var(--panel);border-bottom:1px solid var(--rule)}
.supporters .wrap{padding-block:clamp(30px,4vw,52px)}
.sup-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px;margin-bottom:8px}
.sup-head h2{font-size:clamp(22px,2.4vw,30px)}
.sup-note{font-size:16px;line-height:1.55;color:var(--muted);max-width:56ch;margin:0 0 24px}
.sup-tier{display:flex;flex-wrap:wrap;gap:18px}
.sup-tier.roll{gap:14px;margin-top:24px;padding-top:24px;border-top:1px solid var(--rule)}
.sponsor{flex:0 0 268px;display:flex;flex-direction:column;gap:10px;background:#0A0B0E;
  border:1px solid var(--rule);padding:16px;text-decoration:none}
.sponsor:hover{border-color:var(--accent);text-decoration:none}
.sponsor img{width:100%;height:44px;max-height:44px;object-fit:contain;object-position:left center}
.sponsor .sponsor-name{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor .sponsor-blurb{font-size:15px;line-height:1.45;color:var(--muted);min-width:200px}
@media (max-width:620px){.sponsor{flex:0 0 100%}}

/* ---------- footer ---------- */
.foot{background:#07080A;padding-block:clamp(34px,4vw,54px)}
.foot .cols{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);align-items:flex-start}
.foot .about{flex:1 1 300px;min-width:260px}
.foot .standing{font-size:17px;line-height:1.6;color:var(--ink-dim);margin:16px 0 0;max-width:42ch}
.foot nav{display:flex;flex-wrap:wrap;gap:28px}
.foot nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot nav a{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-dim);text-decoration:none}
.foot nav a:hover{color:var(--accent);text-decoration:none}
.foot .fh{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}

/* ---------- collapsible ---------- */
details.more{margin-top:18px}
details.more>summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);list-style:none;padding:10px 0}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:" +"}
details.more[open]>summary::after{content:" –"}

/* ---------- misc pages ---------- */
.page-head{padding-block:clamp(34px,4.5vw,66px) clamp(20px,3vw,34px)}
.page-head h1{font-size:clamp(34px,5.4vw,72px);max-width:26ch}
.page-head .intro{font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--ink-dim);max-width:52ch;margin:20px 0 0}
.sec-hero{aspect-ratio:21/9;min-height:220px;overflow:hidden;background:var(--panel)}
.sec-hero img{width:100%;height:100%;object-fit:cover}
.archive-group{padding-block:clamp(30px,4vw,52px);border-top:1px solid var(--rule)}
.archive-group .gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px;margin-bottom:18px}
.archive-group h2{font-size:clamp(24px,2.8vw,36px)}
@media (max-width:520px){
  body{font-size:17px}
  .body p{font-size:18px}
  .mast-sig{display:none}
}

/* ---------- blue-band card overrides ---------- */
.band.blue .card{border-top-color:rgba(255,255,255,.42)}
.band.blue .card h3 a{color:#fff}
.band.blue .card h3 a:hover{color:#DDE4FF}
.band.blue .card .foot{color:#C6D0FF}
.band.blue .band-head h2 a{color:#fff}
.band.blue .article-figure.mat figcaption{color:#26231E;border-top-color:#C9C1B4}
.eyebrow{text-decoration:none}
.card .kicker.sec{margin-bottom:10px}
.lead-band .lead-figure img{filter:saturate(1.02)}
.article-figure.bleed figcaption span:first-child{flex:1 1 30ch}
.page-head .kicker{margin-bottom:14px;display:inline-flex}
.archive-group .fill{flex:1 1 40px;height:2px;background:var(--rule);min-width:30px}
.archive-group h2 a{color:inherit;text-decoration:none}
.archive-group h2 a:hover{color:var(--accent)}
.sup-tier.roll .sponsor{background:transparent}

/* ---------- fixes ---------- */
.split .cards{align-content:start}
.split .card{height:auto}
.related-links .kicker.sec,.card .kicker.sec{display:inline-flex}
.kicker.sec{margin-bottom:9px}
.further-grid a .icn{color:var(--accent);margin-right:8px}

@media (max-width:560px){
  .mast-top{flex-wrap:wrap;gap:12px;padding-bottom:14px}
  .mast-emblem{width:62px;margin-bottom:0}
  .mast-title{flex:1 1 100%;font-size:clamp(34px,12.5vw,56px)}
  .nav{gap:8px 18px;font-size:14px}
  .sigband h2{font-size:32px}
}

/* masthead on one line */
.mast-title{font-size:clamp(30px,5.2vw,68px);white-space:nowrap}
@media (max-width:560px){.mast-title{font-size:clamp(26px,8.4vw,44px);white-space:nowrap}}

/* nav: full row width, larger */
.nav{gap:14px 28px;justify-content:space-between;font-size:19px;letter-spacing:.14em;padding-bottom:20px}
.nav a{gap:11px;padding:7px 0}
.nav .icn{width:1.32em;height:1.32em}
@media (max-width:860px){.nav{justify-content:flex-start;gap:12px 22px;font-size:17px}}
@media (max-width:560px){.nav{font-size:15px;gap:10px 18px}}

/* signature band — full width, years given room */
.sigband .wrap{display:block;padding-block:clamp(40px,5.6vw,76px)}
.sigband h2{font-size:clamp(30px,3.9vw,52px);max-width:26ch;margin-bottom:clamp(28px,3.6vw,46px)}
.sigyears{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3.4vw,56px);width:100%}
.sigband .sigyear{border-top:3px solid #120E07;padding-top:14px}
.sigband .sigyear .lab{display:block;font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:.24em;text-transform:uppercase;color:#5C4718}
.sigband .sigyear .y{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(52px,7.4vw,116px);line-height:.86;letter-spacing:-.02em;color:#120E07;margin-top:6px}
.sigband .sigyear p{margin:14px 0 0;font-size:17px;line-height:1.55;color:#2A200E;max-width:34ch}
@media (max-width:780px){.sigyears{grid-template-columns:1fr}.sigband .sigyear .y{font-size:64px}}

/* emblem matched to the cap-height block of the title */
.mast-top{align-items:center}
.mast-emblem{width:auto;height:clamp(38px,6.2vw,72px);margin-bottom:0}

/* objects band — object-led, images carry it */
.objects-band .wrap{padding-block:clamp(44px,5.6vw,80px)}
.objects-note{font-size:clamp(18px,2vw,23px);line-height:1.5;color:#DCE3FF;max-width:46ch;margin:-6px 0 clamp(26px,3.4vw,42px)}
.objgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.8vw,40px)}
.obj{display:flex;flex-direction:column;text-decoration:none;color:#fff}
.obj:hover{text-decoration:none}
.obj-frame{display:block;background:var(--ink);padding:10px;margin-bottom:16px}
.obj-frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.obj:hover .obj-frame{background:var(--accent)}
.obj-no{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.2em;color:#9EB0E8;display:block}
.obj-title{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,2.1vw,28px);line-height:1.02;letter-spacing:-.005em;margin:8px 0 0;display:block;
  border-top:2px solid rgba(255,255,255,.4);padding-top:12px}
.obj:hover .obj-title{color:var(--accent)}
.obj-line{font-size:16px;line-height:1.55;color:#D3DBF7;margin-top:10px;display:block}
@media (max-width:820px){.objgrid{grid-template-columns:1fr;gap:30px}}

/* faces band — the cast, with photographs */
.faces-band .wrap{padding-block:clamp(40px,5vw,72px)}
.faces-note{font-size:clamp(18px,2vw,23px);line-height:1.5;color:var(--ink-dim);max-width:62ch;margin:-6px 0 clamp(24px,3vw,38px)}
.faces-band .profile-grid{grid-template-columns:repeat(4,1fr);margin:0}
.faces-band .profile-card h3{font-size:clamp(20px,1.9vw,25px)}
.faces-band .profile-card .p-links{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:1000px){.faces-band .profile-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.faces-band .profile-grid{grid-template-columns:1fr}}

/* reserve figure space before the image decodes */
.article-figure.mat img,.article-figure.inset img{aspect-ratio:16/10;object-fit:cover}
.profile-grid{align-items:stretch}

/* timeline rows: a label-less bullet spans the full width */
.timeline li{grid-template-columns:minmax(0,12em) minmax(0,1fr)}
.timeline li>.t-what:only-child{grid-column:1/-1}

/* --- figure system, final pass (kept last so nothing overrides it) --- */
/* 1. the mat */
.article-figure.mat{background:var(--ink);padding:14px}
.article-figure.mat figcaption{color:#26231E;border-top:1px solid #C9C1B4;padding-inline:2px}
.article-figure.mat .credit{color:#7C756A}
/* 3. the offset plate: narrow picture stepped into the gutter, caption beside it */
.article-figure.inset{display:grid;grid-template-columns:340px minmax(0,1fr);
  gap:0 24px;align-items:end;grid-column:wide-start/text-end;
  background:none;border:0;padding:0;margin:clamp(30px,3.6vw,48px) 0;justify-self:stretch;width:auto}
.article-figure.inset img{aspect-ratio:4/3;border:1px solid var(--rule)}
.article-figure.inset figcaption{border-top:0;border-left:3px solid var(--secondary);
  padding:2px 0 2px 18px;font-size:16px;color:var(--ink-dim)}
@media (max-width:820px){
  .article-figure.inset{grid-template-columns:1fr;gap:0;grid-column:text;margin:28px 0}
  .article-figure.inset figcaption{border-left:0;border-top:1px solid var(--rule);padding:12px 0 0}
}

/* opening capital — an element, not ::first-letter, so it renders everywhere */
.body .cap{float:left;font-family:var(--display);font-weight:800;font-size:5.05em;
  line-height:.7;color:var(--accent);margin:.07em .1em 0 0}
.dropcap::first-letter{float:none;font-size:inherit;color:inherit;margin:0;line-height:inherit}

/* below the point where the margin tracks can freeze, collapse them so the
   reading column takes the full width instead of a third of it */
@media (max-width:940px){
  .piece{grid-template-columns:[full-start][wide-start] 0 [text-start] minmax(0,1fr) [text-end] 0 [wide-end][full-end]}
}
.body h2 .num{margin-right:0}

/* plates: more room inside */
.plate{padding:clamp(26px,3.4vw,42px) clamp(24px,3.2vw,44px) clamp(30px,3.6vw,46px)}
.plate>.kicker{margin-bottom:22px}
.plate .timeline li{padding:16px 0}

/* plates need clear air from the prose on both sides */
.plate{margin:clamp(34px,4.2vw,56px) 0}
.plate+p,.plate+h2{margin-top:0}

/* second plate variant: blue as ink on bone, not white on blue */
.plate.blue{background:var(--ink);border-top:3px solid var(--secondary)}
.plate.blue>.kicker{color:var(--secondary)}
.plate.blue .timeline li{border-top-color:#C9C1B4}
.plate.blue .t-when{color:var(--secondary)}
.plate.blue .t-what{color:#2A2822}
.plate.blue .t-what a{color:var(--secondary);border-bottom-color:rgba(26,58,135,.45)}
.plate.blue .t-what a:hover{border-bottom-color:var(--secondary)}

/* ---------- wider reading pages on desktop and large displays ---------- */
:root{--outer:150px}
.wrap{max-width:1440px}
.piece{grid-template-columns:
  [full-start] minmax(0,1fr)
  [wide-start] minmax(0,var(--outer))
  [text-start] min(100%,var(--measure))
  [text-end] minmax(0,var(--outer))
  [wide-end] minmax(0,1fr) [full-end];}
@media (min-width:1200px){
  :root{--measure:72ch;--outer:180px}
  .body p{font-size:20px;line-height:1.76}
  .body h2{font-size:clamp(28px,2.9vw,40px)}
  .lead{font-size:clamp(22px,2.2vw,27px);max-width:46ch}
  .t-what,.plate .t-when{font-size:18px}
  .article-figure figcaption{font-size:17px}
}
@media (min-width:1600px){
  :root{--measure:74ch;--outer:230px}
  .wrap{max-width:1560px}
  .body p{font-size:21px}
}

/* keep the narrow-screen collapse last so it wins over the desktop track sizes */
@media (max-width:940px){
  .piece{grid-template-columns:[full-start][wide-start] 0 [text-start] minmax(0,1fr) [text-end] 0 [wide-end][full-end]}
}

/* offset figure: caption sits at the top of a full-height rule, so the
   space beside the picture reads as a margin note rather than a gap */
.article-figure.inset{align-items:stretch}
.article-figure.inset figcaption{align-self:stretch;padding-top:2px}

/* plate labels in the text face — the condensed display face reads badly
   at small sizes on long multi-word phrases */
.plate>.kicker{font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.14em}
.plate .t-when{font-family:var(--body);font-weight:600;font-size:17px;letter-spacing:.02em;
  text-transform:none;line-height:1.4}
@media (min-width:1200px){.plate .t-when{font-size:18px}}

/* compact footer */
.foot{padding-block:clamp(22px,2.4vw,34px)}
.foot .cols{gap:clamp(18px,2.6vw,40px);align-items:center}
.foot .about{flex:1 1 260px;min-width:220px}
.foot .about .mast-emblem{height:32px}
.foot .standing{margin-top:8px;font-size:16px;line-height:1.45;max-width:38ch}
.foot nav{gap:18px 30px}
.foot nav ul{gap:5px}
.foot nav a{font-size:14px;letter-spacing:.15em}
.foot .fh{margin-bottom:8px;font-size:12px;letter-spacing:.2em}

/* wider still on desktop — the reading column was leaving too much
   empty space either side of it */
@media (min-width:1200px){:root{--measure:80ch}}
@media (min-width:1600px){:root{--measure:88ch}}

/* offset figure, final shape: a letterbox stepped into the gutter with the
   caption offset beneath it — no tall empty column beside a short caption */
.article-figure.inset{display:block;grid-column:wide-start/text-end;
  margin:clamp(30px,3.6vw,48px) 0;background:none;border:0;padding:0;width:auto}
.article-figure.inset img{aspect-ratio:21/9;object-fit:cover;width:100%;border:1px solid var(--rule)}
.article-figure.inset figcaption{display:block;margin:14px 0 0 auto;max-width:52ch;
  border-top:0;border-left:3px solid var(--secondary);padding:2px 0 2px 18px;
  font-size:16px;color:var(--ink-dim);align-self:auto}
@media (min-width:1200px){.article-figure.inset figcaption{font-size:17px}}
@media (max-width:820px){
  .article-figure.inset{grid-column:text}
  .article-figure.inset img{aspect-ratio:16/10}
  .article-figure.inset figcaption{max-width:none;margin-left:0}
}

/* phones: the lead stops being an overlay — the copy sits under the picture
   so nothing can be clipped by the figure box */
@media (max-width:760px){
  .lead-figure{aspect-ratio:auto;min-height:0;overflow:visible;display:block}
  .lead-figure img{height:auto;aspect-ratio:4/3}
  .lead-scrim{display:none}
  .lead-copy{position:static;padding:22px 0 0}
  .lead-title{flex:1 1 100%;font-size:clamp(28px,7.8vw,42px)}
  .lead-deck{flex:1 1 100%;min-width:0}
}

/* --- narrow-screen collapses, kept last so later appends cannot defeat them --- */
.sec-hero{width:100%}
@media (max-width:760px){.sec-hero{aspect-ratio:16/10;min-height:0}}
@media (max-width:700px){.timeline li{grid-template-columns:1fr}}

/* 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}
.sup-head{flex-wrap:wrap!important}
.sup-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sup-tier{flex-wrap:wrap!important}
.sup-tier > .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:60px!important;max-height:60px!important;width:100%!important;object-fit:contain!important;border-radius:2px}

/* 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-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}
: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-no-extra-plate: operator asked for no extra background darkness on the marks. Our
   sp-mark-panel block above gives every mark a #121013 plate — on this build the tiles are
   already #0A0B0E on a #0C0D10 page, so the plate reads as a third box rather than a ground.
   The GEOMETRY stays (one 60px height, full width, contain, the same inset), only the fill goes,
   so the marks keep the size and alignment they have now. */
.sponsor img,.sponsor-box img,.sp-logo img{background:transparent!important;border-radius:0!important}

/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.lead-credit{padding-inline:clamp(20px,4.5vw,60px)}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   2351px at 390, 20% of the whole page. Two columns bring it to
   1363px (42% shorter). Checked before writing: no new overflow, smallest mark still
   132px wide, longest blurb 4 lines, tile heights 206-228px.
   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. Only the tier(s) that were one-per-row are touched (.sup-tier, .sup-tier.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){
  .sup-tier{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sup-tier > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-tier > * *{min-width:0!important;max-width:100%}
    .sup-tier img,.sup-tier svg{max-width:100%;height:auto}
  .sup-tier.roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sup-tier.roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-tier.roll > * *{min-width:0!important;max-width:100%}
    .sup-tier.roll img,.sup-tier.roll svg{max-width:100%;height:auto}
  .sup-tier .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sup-tier.roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-name-wrap: at 320 the money tile truncated its brand name — "Disruptive Films" — losing up to 28px to an
   ellipsis. The name is allowed to wrap instead of being cut: a brand that reads as half a word
   is worse than a brand on two lines. Structural only, phone widths only, desktop untouched. */
@media (max-width:360px){
  .sponsor-name{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip}
}

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px){
  div.wrap.lead-credit{padding-left:max(0px, calc(max(clamp(20px,4.5vw,60px), 18px) - max(0px, (100vw - 1440px) / 2)));padding-right:max(0px, calc(max(clamp(20px,4.5vw,60px), 18px) - max(0px, (100vw - 1440px) / 2)))}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.obj > span.obj-frame > img,
  article > figure.article-figure.bleed > img,
  div > figure.article-figure.mat > img,
  div.body.piece > figure.article-figure.inset > img,
  div.body.piece > figure.article-figure.mat.wide > img,
  div.profile-grid > div.profile-card > img.p-photo,
  main > div.sec-hero > img,
  section.lead-band > div.lead-figure > img){height:auto}
/* op-img-dims:end */