/* Amar C. Bakshi — shared site stylesheet
   Extracted from homepage.html, 17 Aug 2026. Single source of truth for the
   design system: tokens, typography, nav, scrollers, tiles, footer.
   Page-specific rules belong in a <style> block on that page, not here.
   System of record: ../TYPE-AND-COLOR-SYSTEM.md */

:root{
  --paper:#fafaf7; --off:#f2f1ed; --deep:#eceae5;
  --ink:#11120f; --body:#181815; --mid:#4a4a44; --soft:#6b6b63;
  --rule:#d8d7d0; --cobalt:#1749dc;
  --display:'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif;
  --text:'Source Serif 4',Georgia,serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --pad:clamp(20px,5vw,64px);
  --maxw:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
a{color:inherit}
img{max-width:100%;display:block}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--cobalt);margin:0 0 18px}
.eyebrow.quiet{color:var(--soft)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:.98;margin:0;color:var(--ink)}
h1{font-size:clamp(38px,5.8vw,74px)}
h2{font-size:clamp(28px,3.8vw,46px)}
h3{font-size:clamp(21px,2.2vw,27px);letter-spacing:-.015em}
.lead{font-size:clamp(19px,2.1vw,25px);line-height:1.5;max-width:34em}
.lead + .lead{margin-top:clamp(24px,3vw,34px)}
.body{max-width:36em}
.cobalt{color:var(--cobalt)}
.rule{border-top:1px solid var(--rule)}

header{position:sticky;top:0;z-index:20;background:rgba(250,250,247,.94);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--rule)}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;gap:20px}
header img{width:186px}
nav{display:flex;gap:24px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid)}
nav a{text-decoration:none}
nav a:hover{color:var(--cobalt)}
nav a.cta{color:var(--cobalt)}

/* hero with gallery */
.hero{padding:clamp(44px,6.5vw,86px) 0 clamp(28px,3.5vw,44px)}
.hero h1{max-width:21ch}

/* horizontal scroller — reused by the practice mosaic, Shared Studios, and Noro */
.scroller{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:smooth;padding-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.scroller::-webkit-scrollbar{height:5px}
.scroller::-webkit-scrollbar-track{background:transparent}
.scroller::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.scroller:hover::-webkit-scrollbar-thumb{background:#b9b7ae}
.scroller > *{scroll-snap-align:start;flex:0 0 auto}
.stack{display:flex;flex-direction:column;gap:9px}
.mtile{position:relative;overflow:hidden;background:var(--off);display:flex;align-items:flex-end;justify-content:flex-end;margin:0}
.mtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mtile figcaption{position:relative;z-index:2;background:#fff;font-family:var(--mono);font-size:clamp(8px,.85vw,10px);letter-spacing:.11em;text-transform:uppercase;color:var(--mid);padding:7px 12px;margin-bottom:14px;transform:translateX(-14px);white-space:nowrap}
.m-tall{width:min(62vw,720px);height:clamp(280px,32vw,420px)}
.m-med{width:min(50vw,560px);height:clamp(280px,32vw,420px)}
.m-half{width:min(44vw,470px);height:clamp(136px,15.5vw,206px)}
.scrollhint{display:flex;justify-content:flex-end;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:-2px}

.argument{padding:clamp(40px,5.5vw,72px) 0 clamp(10px,1.5vw,20px)}


.inits{padding:clamp(20px,2.6vw,38px) 0 0}
.opener{font-weight:500;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;line-height:1.06;max-width:26ch;margin-bottom:clamp(28px,3.6vw,44px)}
.markbox.bigger{height:52px}
.init{border-top:1px solid var(--rule);display:grid;grid-template-columns:212px minmax(0,46ch) auto;justify-content:start;gap:clamp(20px,4vw,56px);align-items:start;padding:34px 0}
.init:last-of-type{border-bottom:1px solid var(--rule)}
.init .mark{display:flex;flex-direction:column;gap:14px}
.markbox{width:198px;height:38px;display:flex;align-items:center;justify-content:flex-start}
.markbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:left center;display:block}
.markbox.big{height:42px}
.init .scale{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.init .role{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cobalt);margin-bottom:10px}
.init p{margin:0;font-size:17px;line-height:1.55;color:var(--body)}
.init .go{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cobalt);text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--cobalt);padding-bottom:3px;align-self:center}
.init .go:hover{color:var(--ink);border-color:var(--ink)}

.ss{background:var(--ink);color:#e8e6df;padding:clamp(60px,8.5vw,120px) 0 clamp(46px,6vw,84px)}
.ss .eyebrow{color:#4d7bff}
.ss h2{color:#fafaf7}
.ss .quote{color:#e8e6df}
.ss .stat .n{color:#fafaf7}
.ss .stat .l{color:#8f8f86}
.ss .links a{color:#4d7bff;border-bottom-color:#33332e}
.ss .links a:hover{border-bottom-color:#4d7bff}
.ss .says{border-top-color:#33332e}
.ss .says blockquote p{color:#e8e6df}
.ss .says cite{color:#8f8f86}
.ss .mtile{background:#22221e}
.ss .scrollhint{color:#8f8f86}
.ss .scroller{scrollbar-color:#3d3d37 transparent}
.ss .scroller::-webkit-scrollbar-thumb{background:#3d3d37}
.ss .scroller:hover::-webkit-scrollbar-thumb{background:#5a5a52}
.ss .cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.ss .quote{font-size:clamp(19px,2vw,23px);line-height:1.5}
.ss .quote em{font-style:italic;color:#7d9dff}
.stats{display:flex;gap:38px;flex-wrap:wrap;margin:26px 0 24px}
.stat .n{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.02em;color:var(--ink);line-height:1}
.stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:8px}
.links{display:flex;flex-direction:column;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.links a{color:var(--cobalt);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:8px}
.links a:hover{border-color:var(--cobalt)}
.says{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(24px,3.4vw,48px);margin-top:clamp(38px,5vw,64px);border-top:1px solid var(--rule);padding-top:clamp(28px,3.4vw,42px)}
.says blockquote{margin:0}
.says blockquote p{margin:0 0 14px;font-size:17px;line-height:1.5;color:var(--ink)}
.says cite{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--soft);font-style:normal;line-height:1.7}

.continues{background:var(--deep);margin-top:0}
.continues .wrap{padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(44px,6vw,80px)}
.continues .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.noroshot{width:100%;height:clamp(280px,34vw,470px)}

.other{padding:clamp(56px,8vw,100px) 0}
.owitem{border-top:1px solid var(--rule);display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);align-items:start;padding:26px 0}
.owitem:last-child{border-bottom:1px solid var(--rule)}
.owitem .thumb{width:104px;height:72px;object-fit:cover;background:var(--off)}
.owitem h3{margin-bottom:4px}
.owitem .role{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin-bottom:9px}
.owitem p{margin:0;font-size:16px;line-height:1.55;color:var(--mid);max-width:52ch}
.owitem .go{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cobalt);text-decoration:none;white-space:nowrap;align-self:center}

.essay{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,110px) 0}
.essay h2{color:var(--paper);max-width:20ch}
.essay blockquote{margin:32px 0 0;font-size:clamp(20px,2.3vw,27px);line-height:1.45;max-width:32em;color:#e8e6df;border-left:2px solid #4d7bff;padding-left:clamp(18px,2.5vw,32px)}
.essay .eyebrow{color:#4d7bff}
.essay a{color:#4d7bff;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;display:inline-block;margin-top:30px;border-bottom:1px solid #4d7bff;padding-bottom:4px}

.cred{padding:clamp(50px,7vw,92px) 0}
.marquee{overflow:hidden;margin:20px 0 46px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.marquee .track{display:flex;align-items:center;gap:clamp(30px,4.4vw,62px);width:max-content;animation:drift 52s linear infinite}
.marquee.slow .track{animation-duration:66s;animation-direction:reverse}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
.marquee img{height:clamp(20px,2.3vw,30px);width:auto;object-fit:contain;flex:0 0 auto;filter:grayscale(1);opacity:.45;transition:filter .3s ease,opacity .3s ease}
.marquee img:hover{filter:grayscale(0);opacity:1}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.credgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(26px,4vw,52px);border-top:1px solid var(--rule);padding-top:32px}
.credgrid dt{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cobalt);margin-bottom:12px}
.credgrid dd{margin:0;font-size:15.5px;line-height:1.65;color:var(--mid)}
.stacklist span{display:block}
.stacklist span + span{margin-top:14px}
.credgrid dd b{font-weight:600;color:var(--body)}

.ways{background:var(--off);border-top:1px solid var(--rule)}
.ways .wrap{padding-top:clamp(50px,7vw,92px);padding-bottom:clamp(50px,7vw,92px)}
.waysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(24px,3.4vw,48px);margin-top:38px}
.way{border-top:2px solid var(--cobalt);padding-top:18px}
.way h3{margin-bottom:10px}
.way p{margin:0;font-size:16px;line-height:1.55;color:var(--mid)}

.close{padding:clamp(60px,9vw,120px) 0 clamp(30px,4vw,50px)}
.close h2{margin:14px 0 14px}
.collabwrap{margin:18px 0 6px;line-height:0}
.collab{display:block;max-width:min(100%,720px)}
.collab svg{width:100%;height:auto;display:block;overflow:visible}
.collab text{font-family:var(--display);font-size:160px;font-weight:600;letter-spacing:-4px}
.collab .ct{fill:var(--cobalt)}
.collab .cr{fill:var(--ink)}
.collab:hover .ct{fill:var(--ink)}
.collab:hover .cr{fill:var(--cobalt)}
.collab:focus-visible{outline:2px solid var(--cobalt);outline-offset:8px}
footer{border-top:1px solid var(--rule)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:20px;padding-bottom:44px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
footer a{text-decoration:none}

@media(max-width:900px){
  nav{display:none}
  .m-tall{width:82vw;height:clamp(230px,54vw,320px)}
  .m-med{width:74vw;height:clamp(230px,54vw,320px)}
  .m-half{width:74vw;height:clamp(140px,30vw,190px)}
  .says{grid-template-columns:1fr}
  .init{grid-template-columns:1fr;gap:14px}
  .init .go{justify-self:start}
  .ss .cols,.continues .cols{grid-template-columns:1fr}
  .owitem{grid-template-columns:78px minmax(0,1fr);gap:16px}
  .owitem .thumb{width:78px;height:56px}
  .owitem .go{grid-column:2}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .marquee .track{width:auto;flex-wrap:wrap}}

/* Long verbatim pull quotes: a 30-word quote at 32ch towers 13 lines down the page
   and leaves the column beside it dead. Widen the measure and step the type down.
   Applied automatically to any .pull over ~18 words. */
.pull.long{max-width:min(100%,38rem)}
.pull.long p{font-size:clamp(19px,2.05vw,25px);line-height:1.28}

/* ============================================================================
   SHARED SUB-PAGE PATTERNS
   Absorbed from 26 sub-pages on 2026-08-18. These rules were duplicated
   4-24 times each (~63KB of copy-paste), which is why the same bug kept
   reappearing per page. Change them HERE and every page follows.
   Page-specific rules still belong in a <style> block on that page.
   ============================================================================ */

/* --- page header ------------------------------------------------------- */
.pagehead{padding:clamp(42px,5.5vw,78px) 0 clamp(24px,3vw,38px)}
.pagehead h1{max-width:24ch;font-size:clamp(32px,4.4vw,56px)}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin:0 0 18px}
.crumb a{color:var(--cobalt);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.meta{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin:22px 0 0;display:flex;gap:20px;flex-wrap:wrap}

/* --- prose -------------------------------------------------------------
   A 60ch measure is the right reading width, but inside the 1220px .wrap it
   used only 45% of the page and left 55% dead. Constrain the CONTAINER so the
   column fills it and reads as deliberate, rather than capping the paragraph
   inside a container far too wide for it. */
.prose{padding:clamp(36px,4.8vw,60px) 0}
.prose p{font-size:18px;line-height:1.62;max-width:none;margin:0 0 20px;color:var(--body)}
.prose p:last-child{margin-bottom:0}
.prose em{font-style:italic}
.prose a{color:var(--cobalt);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--cobalt) 35%,transparent)}
.prose a:hover{border-bottom-color:var(--cobalt)}

/* --- pull quotes -------------------------------------------------------
   32ch suits a 6-18 word line. Anything longer towers down the page beside a
   dead column, so .long widens the measure and steps the type down. Applied
   automatically by tools/check-pages.py. */
.pull{border-left:2px solid var(--cobalt);padding:2px 0 2px clamp(20px,2.6vw,32px);margin:clamp(30px,4vw,48px) 0;max-width:min(100%,30rem)}
.pull p{font-family:var(--display);font-weight:500;font-size:clamp(23px,2.9vw,34px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:0}
.pull cite{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-style:normal;margin-top:14px}

/* --- bands and dark sections ------------------------------------------- */
.band{background:var(--off);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band > .wrap{padding-top:clamp(36px,4.8vw,60px);padding-bottom:clamp(36px,4.8vw,60px)}
.dark,.figs{background:var(--ink);color:#e8e6df;padding:clamp(40px,5.2vw,76px) 0}
.dark .eyebrow,.figs .eyebrow{color:#4d7bff}
.dark h2,.figs h2{color:#fafaf7;max-width:26ch;margin-bottom:clamp(24px,3vw,38px)}
.dark p,.figs p{color:#c9c8c0}
.figs .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:clamp(18px,2.6vw,36px);border-top:1px solid #33332e;padding-top:clamp(20px,2.6vw,30px)}
.figs .n{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.02em;color:#fafaf7;line-height:1;margin:0}
.figs .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8f8f86;margin:9px 0 0;line-height:1.6}

/* --- video: click-to-play facade -------------------------------------- */
.vfig{margin:clamp(28px,3.6vw,44px) 0 0}
.vplay{display:block;position:relative;width:100%;aspect-ratio:16/9;background:#22221e;overflow:hidden;border:0;padding:0;cursor:pointer;text-align:left}
.vplay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.82);transition:transform .6s cubic-bezier(.16,1,.3,1),filter .3s ease}
.vplay:hover img{transform:scale(1.03);filter:brightness(.7)}
.vplay .tri{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(52px,6vw,74px);height:clamp(52px,6vw,74px);border-radius:50%;background:var(--cobalt);display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
.vplay:hover .tri{transform:translate(-50%,-50%) scale(1.08)}
.vplay .tri svg{width:38%;height:38%;fill:#fff;margin-left:8%}
.vplay .vt{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,2vw,22px);font-family:var(--display);font-weight:600;font-size:clamp(16px,1.9vw,23px);letter-spacing:-.015em;line-height:1.1;color:#fff;background:linear-gradient(transparent,rgba(17,18,15,.75))}
.vplay:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}

/* --- poster-less play card -------------------------------------------
   For the 2007–08 Washington Post dispatches. The only posters available
   were YouTube's own auto-selected frames at 480x360, pulled live from
   i.ytimg.com — soft on any modern display, and a remote dependency on a
   URL scheme we don't control. A typographic card states what the thing
   is, loads nothing, and cannot break. */
.vplay.vcard{background:var(--ink);border:1px solid #2a2a26}
.vplay.vcard::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(23,73,220,.20),transparent 62%);
  transition:opacity .3s ease}
.vplay.vcard:hover::before{opacity:.6}
.vplay.vcard .vk{position:absolute;top:clamp(14px,2vw,22px);left:clamp(14px,2vw,22px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#7d9dff;z-index:2}
.vplay.vcard .vt{background:none;z-index:2}
@media(prefers-reduced-motion:reduce){.vplay.vcard::before{transition:none}}
.vwrap{position:relative;width:100%;aspect-ratio:16/9;background:#22221e;overflow:hidden}
.vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vfig figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:12px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,2.6vw,34px);margin-top:clamp(24px,3vw,40px)}
.vgrid .vfig{margin:0}
.dark .vfig figcaption,.figs .vfig figcaption{color:#8f8f86}

/* --- outbound project link -------------------------------------------- */
.extlink{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cobalt);text-decoration:none;border-bottom:1px solid transparent}
.extlink:hover{border-bottom-color:var(--cobalt)}

/* --- page footer nav --------------------------------------------------- */
.pagenav{border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;padding:20px 0 44px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.pagenav a{color:var(--cobalt);text-decoration:none}
.pagenav a:hover{color:var(--ink)}

@media(max-width:900px){
  .pull,.pull.long{max-width:none}
  .prose > .wrap{max-width:none}
}

/* --- outbound site CTA -------------------------------------------------
   Every project page ends by sending the reader to the real thing. */
.sitecta{background:var(--ink);color:#e8e6df;padding:clamp(40px,5.2vw,74px) 0}
.sitecta .eyebrow{color:#4d7bff}
.sitecta h2{color:#fafaf7;max-width:24ch;margin:12px 0 16px}
.sitecta p{font-family:var(--text);font-size:17.5px;line-height:1.6;color:#c9c8c0;max-width:54ch;margin:0}
.ctarow{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin:clamp(24px,3vw,36px) 0 0}
.ctabtn{display:inline-block;background:var(--cobalt);color:#fff;text-decoration:none;padding:15px 26px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;transition:background .2s ease,color .2s ease}
.ctabtn:hover{background:#fafaf7;color:var(--ink)}
.ctaalt{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#7d9dff;text-decoration:none;border-bottom:1px solid transparent}
.ctaalt:hover{border-bottom-color:#7d9dff}

/* --- dispatch articles ------------------------------------------------
   Shared by the 32 Washington Post dispatch pages (How the World Sees
   America ×30, Race in '08 ×2). Defined once here, not per page. */
.wapo-band{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:12px 0 11px;margin:0 0 clamp(20px,2.6vw,30px);display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.wapo-band .masthead{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(15px,1.7vw,20px);letter-spacing:-.01em;color:var(--ink)}
.wapo-band .series{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.artbody h1{font-size:clamp(28px,3.8vw,46px);line-height:1.07;letter-spacing:-.025em;max-width:26ch;margin:0 0 clamp(18px,2.2vw,26px)}
.artbody p{font-family:var(--text);font-size:18px;line-height:1.68;color:var(--body);margin:0 0 22px}
.artbody p em{font-style:italic}
.artbody p strong{font-weight:600;color:var(--ink)}
.artbody h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.4vw,29px);line-height:1.16;letter-spacing:-.018em;margin:clamp(34px,4vw,52px) 0 16px}
.artbody blockquote{border-left:2px solid var(--cobalt);padding-left:clamp(18px,2.4vw,28px);margin:clamp(28px,3.4vw,42px) 0}
.dek{font-family:var(--text);font-size:clamp(18px,1.95vw,21px);line-height:1.55;color:var(--mid);margin:0 0 clamp(26px,3.2vw,40px);padding-left:clamp(16px,2vw,22px);border-left:2px solid var(--cobalt)}
.vcap{font-family:var(--mono)!important;font-size:9.5px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)!important;margin-top:12px!important}
.artbody .note{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);border-top:1px solid var(--rule);padding-top:18px;margin:clamp(34px,4vw,52px) 0 0}
/* --- one text column -------------------------------------------------
   Every text-led section shares the same centred 760px measure so they
   sit on the same left edge. Previously .prose was centred while .band
   and .dark were left-aligned in the 1220px wrap, which read as a bug. */
.pagehead > .wrap,
.prose > .wrap,
.band > .wrap,
.dark > .wrap{max-width:min(var(--maxw),760px);margin-inline:auto}
@media(max-width:900px){
  .pagehead > .wrap,.prose > .wrap,.band > .wrap,.dark > .wrap{max-width:none}
}

/* --- collapse stacked section padding --------------------------------
   .pagehead's bottom padding and .prose's top padding were adding up to
   ~100px wherever prose follows the masthead directly. The masthead's own
   bottom padding is the intended gap. */
.pagehead + .prose,
.pagehead + .band,
.pagehead + .dark{padding-top:0}
.pagehead + .band > .wrap,
.pagehead + .dark > .wrap{padding-top:clamp(30px,3.8vw,48px)}

/* ── PBS documentary poster ─────────────────────────────────────────────────
   Replaces the small text link in the Shared Studios section with a clickable
   still. Lives on the dark .ss background, so it uses that section's palette. */
.docposter{position:relative;display:block;margin:0 0 20px;border:1px solid #33332e;background:#22221e;overflow:hidden;text-decoration:none;color:#fafaf7;isolation:isolate}
.docposter img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:saturate(.85) brightness(.8);transition:filter .35s ease,transform .5s ease}
.docposter:hover img,.docposter:focus-visible img{filter:saturate(1) brightness(.95);transform:scale(1.03)}
.docposter::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(17,18,15,.88),rgba(17,18,15,.04) 62%)}
.docposter-play{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(50px,5.4vw,66px);aspect-ratio:1;border-radius:50%;background:rgba(250,250,247,.93);color:#11120f;display:grid;place-items:center;transition:background .3s ease,color .3s ease,transform .3s ease}
.docposter-play svg{margin-left:3px}
.docposter:hover .docposter-play,.docposter:focus-visible .docposter-play{background:#4d7bff;color:#fafaf7;transform:translate(-50%,-50%) scale(1.08)}
.docposter-cap{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(12px,1.6vw,18px);display:flex;flex-direction:column;gap:5px}
.docposter-kick{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#7d9dff}
.docposter-title{font-family:var(--display);font-size:clamp(17px,1.7vw,22px);line-height:1.15}
.docposter:focus-visible{outline:2px solid #4d7bff;outline-offset:3px}

/* Link from the "Covered by" logo marquee through to the full press archive. */
.credlink{display:inline-flex;align-items:center;gap:.5em;margin:-30px 0 46px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cobalt);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:4px}
.credlink:hover{border-bottom-color:var(--cobalt)}
.credlink:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .docposter img,.docposter-play{transition:none}
  .docposter:hover img,.docposter:focus-visible img{transform:none}
}

/* --- gold book lightbox ------------------------------------------------
   Scan at full size, verified transcript below. Wired by scripts/lightbox.js
   to .leaf figure, .gbgrid figure, and any [data-lb] figure. */
.lbtrigger{cursor:zoom-in}
.lbtrigger:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.lb{position:fixed;inset:0;z-index:100;background:rgba(17,18,15,.95);display:flex;overflow-y:auto;padding:clamp(52px,6vw,72px) clamp(16px,3vw,44px) clamp(24px,3vw,44px)}
.lb[hidden]{display:none}
.lbinner{max-width:min(1100px,100%);width:100%;margin:auto}
.lbfig{margin:0;display:flex;justify-content:center}
.lbfig img{max-width:100%;max-height:66vh;width:auto;height:auto;background:#22221e}
.lbmeta{width:100%;max-width:760px;margin:clamp(20px,2.6vw,30px) auto 0}
.lbmeta .where{color:#7d9dff;margin:0 0 16px}
.lbmeta .lines li{color:#f2f1ed;border-left-color:#3d3d37}
.lbmeta .lines li:before{color:#7d9dff}
.lbnote{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#8f8f86;line-height:1.9;margin:0;max-width:58ch}
.lbclose,.lbprev,.lbnext{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#e8e6df;background:transparent;border:1px solid #3d3d37;padding:9px 14px;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.lbclose:hover,.lbprev:hover:not(:disabled),.lbnext:hover:not(:disabled){border-color:#7d9dff;color:#fff}
.lbprev:disabled,.lbnext:disabled{opacity:.3;cursor:default}
.lbclose{position:fixed;top:16px;right:18px;z-index:2}
.lbbar{display:flex;align-items:center;justify-content:center;gap:18px;max-width:760px;margin:clamp(22px,3vw,34px) auto 0;border-top:1px solid #33332e;padding-top:18px}
.lbcount{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8f8f86;min-width:6ch;text-align:center}
@media(max-width:700px){.lbfig img{max-height:52vh}}