/* LawWiser - home scroll-story system. Palette injected per page. */
:root{
  --shell:1340px;
  --fd:'Newsreader',Georgia,serif;
  --fb:'Inter',system-ui,-apple-system,sans-serif;
  --fm:'IBM Plex Mono',monospace;
  --brass-dark:var(--brass);
  --gap:clamp(56px,6vw,88px);

  /* Spacing scale. Every gap on the site is one of these seven values.
     If a number is not on this list it does not belong in a stylesheet. */
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--text);font-family:var(--fb);font-size:15px;font-weight:400;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ============ TYPE ============ */
/* The nine levels of the design system, as classes. Any page can reach for
   these instead of writing new type rules. Elements h1 to h6 carry the same
   values, so semantic markup lands on the system without a class at all. */
.t-h1     {font-family:var(--fd);font-weight:600;font-size:clamp(32px,4.2vw,42px);line-height:1.1;letter-spacing:-.008em;color:var(--ink)}
.t-h2     {font-family:var(--fd);font-weight:600;font-size:clamp(23px,2.6vw,26px);line-height:1.18;letter-spacing:-.008em;color:var(--ink)}
.t-card   {font-family:var(--fd);font-weight:600;font-size:19px;line-height:1.28;letter-spacing:-.008em;color:var(--ink)}
.t-sf     {font-family:var(--fd);font-weight:400;font-size:19px;line-height:1.5;color:var(--ink)}
.t-body   {font-family:var(--fb);font-weight:400;font-size:15px;line-height:1.66;color:var(--text)}
.t-link   {font-family:var(--fb);font-weight:500;font-size:13px;line-height:1.5}
.t-caption{font-family:var(--fb);font-weight:500;font-size:12px;line-height:1.5;color:var(--text-soft)}
.t-kicker {font-family:var(--fb);font-weight:600;font-size:11.5px;line-height:1;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-deep)}
.t-meta   {font-family:var(--fm);font-weight:400;font-size:11.5px;line-height:1.4;color:var(--text-soft)}
.s-dark .t-kicker,.s-deep .t-kicker{color:var(--brass)}

h1,h2,h3,h4,h5,h6{font-family:var(--fd);color:var(--ink);letter-spacing:-.008em}
h1{font-weight:600;font-size:clamp(32px,4.2vw,42px);line-height:1.1}
h2{font-weight:600;font-size:clamp(23px,2.6vw,26px);line-height:1.18}
h3{font-weight:600;font-size:22px;line-height:1.26}
h4{font-weight:600;font-size:19px;line-height:1.28}
h5{font-family:var(--fb);font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;line-height:1}
h6{font-family:var(--fb);font-weight:500;font-size:12px;letter-spacing:.02em;line-height:1.5;color:var(--text-soft)}
.standfirst{font-family:var(--fd);font-weight:400;font-size:19px;line-height:1.5;color:var(--ink)}
.kick{font-family:var(--fb);font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-deep);display:block}
.lbl{font-family:var(--fb);font-weight:500;font-size:12px;color:var(--text-soft)}
.more{font-family:var(--fb);font-weight:500;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.more:hover{color:var(--brass-deep)}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 44px}

/* ============ PREVIEW SWITCHER ============ */
.sw{background:#0E1014;color:#C9D0DE;display:flex;gap:7px;align-items:center;justify-content:center;padding:9px 16px;font:600 12px var(--fb);flex-wrap:wrap}
.sw .l{color:#79818F;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
.sw a{color:#C9D0DE;border:1px solid #2C323C;padding:6px 13px;border-radius:4px}
.sw a.on{background:var(--brass);border-color:var(--brass);color:#111}

/* ============ TOP BAR ============ */
.topstrip{background:var(--ink);color:rgba(255,255,255,.82);font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.topstrip .in{display:flex;justify-content:space-between;align-items:center;height:32px}
header.bar{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:80}
.barin{display:flex;align-items:center;gap:30px;height:64px}
.brand{display:flex;align-items:center;flex-shrink:0}
nav.main{display:flex;align-items:stretch;gap:0;flex:1;height:100%}
.nitem{position:relative;display:flex;align-items:center}
.nitem>a{font-size:13px;font-weight:500;color:var(--ink);padding:0 13px;height:100%;display:flex;align-items:center;gap:6px;white-space:nowrap;border-bottom:2px solid transparent}
.nitem:hover>a{color:var(--brass-deep);border-bottom-color:var(--brass)}
.nitem>a.on{border-bottom-color:var(--brass);color:var(--brass-deep);font-weight:600}
.car{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55}
/* dropdowns */
.dd{position:absolute;top:100%;left:6px;min-width:246px;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--brass);box-shadow:0 18px 44px rgba(0,0,0,.16);padding:9px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s;z-index:90}
.nitem:hover .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 13px;font-size:14px;font-weight:500;color:var(--ink)}
.dd a b{font-family:var(--fm);font-weight:400;font-size:10.5px;color:var(--text-soft)}
.dd a:hover{background:var(--brass-tint);color:var(--brass-deep)}
.dd .hd{font-family:var(--fb);font-weight:600;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-soft);padding:8px 13px 6px}
.barcta{margin-left:auto;flex-shrink:0}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:13px 24px;border-radius:3px;white-space:nowrap}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--brass-deep)}
.btn.accent{background:var(--brass-dark);color:#15171A}
.btn.ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn.line{border:1.5px solid var(--ink);color:var(--ink)}
.mtoggle{display:none;font-size:14px;font-weight:600;border:1.5px solid var(--ink);padding:11px 17px;background:none;cursor:pointer}

/* ============ SURFACES - adjacent sections never share one ============ */
section{padding:var(--gap) 0;position:relative}
.s-paper{background:var(--paper)}
.s-tint{background:var(--brass-tint)}
.s-dark{background:var(--ink);color:rgba(255,255,255,.84)}
.s-dark h1,.s-dark h2,.s-dark h3,.s-dark h4{color:#fff}
.s-dark .kick{color:var(--brass-dark)}
.s-dark .more{color:var(--brass-dark)}
.s-dark .lbl{color:rgba(255,255,255,.58)}
.s-deep{background:var(--ink);color:rgba(255,255,255,.84);border-bottom:3px solid var(--brass)}
.s-deep h2,.s-deep h3{color:#fff}
.s-deep .kick{color:var(--brass-dark)}
/* the pop band that always sits before the footer */

/* hairline rule between two same-tone sections */
.s-paper + .s-paper{border-top:1px solid var(--line)}

/* section heading block - fixed spacing rhythm */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:36px}
.sh-l{max-width:64ch}
.sh-l .kick{margin-bottom:10px}
.sh-l h2{margin:0 0 10px}
.shead .sub{font-size:15px;color:var(--text-soft);margin:0;max-width:58ch}
.s-dark .shead .sub,.s-deep .shead .sub{color:rgba(255,255,255,.6)}

.shead .more{align-self:end;padding-bottom:5px}

/* ============ PLACEHOLDER ART ============ */
.art{position:relative;overflow:hidden;background:var(--ink);isolation:isolate;aspect-ratio:16/9}
.art .g,.art .m{position:absolute;inset:0}
.art .m{opacity:.5}
.art .lb{position:absolute;left:16px;bottom:14px;z-index:3;font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.art .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center}
.art .pl::after{content:'';border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.art .dur{position:absolute;right:14px;bottom:14px;z-index:3;font-family:var(--fm);font-size:10px;color:rgba(255,255,255,.86);background:rgba(0,0,0,.42);padding:3px 7px}
.m-rules{background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(255,255,255,.15) 13px 14px)}
.m-grid{background:repeating-linear-gradient(0deg,transparent 0 26px,rgba(255,255,255,.12) 26px 27px),repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.12) 26px 27px)}
.m-arcs{background:radial-gradient(circle at 84% 116%,transparent 28%,rgba(255,255,255,.14) 28.6%,transparent 29.2%),radial-gradient(circle at 84% 116%,transparent 46%,rgba(255,255,255,.14) 46.6%,transparent 47.2%),radial-gradient(circle at 84% 116%,transparent 64%,rgba(255,255,255,.14) 64.6%,transparent 65.2%)}
.m-diag{background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(255,255,255,.12) 16px 17px)}
.m-cols{background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 4px,transparent 4px 34px)}
.m-dots{background:radial-gradient(circle,rgba(255,255,255,.18) 1.4px,transparent 1.5px) 0 0/20px 20px}

/* ---- blurred wall of ARTICLES (replaces the photo where wanted) ---- */
.paperwall{position:absolute;inset:-10%;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;transform:rotate(-5deg) scale(1.2);filter:blur(7px)}
.pw{background:#fff;padding:16px;display:flex;flex-direction:column;gap:8px;min-height:150px;opacity:.9}
.pw i{display:block;height:9px;background:rgba(0,0,0,.72);width:88%}
.pw i+i{width:64%}
.pw u{display:block;height:5px;background:rgba(0,0,0,.2);width:100%;margin-top:4px}
.pw u.s{width:76%}
.pw .im{height:44px;background:rgba(0,0,0,.14);margin-bottom:4px}

/* ============ HERO VARIANTS ============ */
.hero{position:relative;overflow:hidden;background:var(--ink-deep)}
.hero .layer{position:absolute;inset:0}
.hero .layer img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) brightness(.7) contrast(1.05)}
.hero .scrim{position:absolute;inset:0;z-index:2}
.hero{background:linear-gradient(118deg,var(--ink) 0%,var(--ink-deep) 58%,color-mix(in srgb,var(--brass-dark) 22%,var(--ink-deep)) 100%)}
.hero .scrim{background:
  radial-gradient(70% 110% at 90% 4%,color-mix(in srgb,var(--brass-dark) 22%,transparent) 0%,transparent 58%)}
.hero .in{position:relative;z-index:3}
.hero .in{padding:80px 0 76px}
.hero.tall .in{padding:104px 0 96px}
.hero.panel .in{padding:82px 0 82px}
.hero.mid  .in{padding:72px 0 64px}
.hero.slim .in{padding:48px 0 46px}
.hero .kick{color:var(--brass-dark)}
.hero h1{color:#fff;max-width:20ch;margin:16px 0 18px}
.hero h1 em{font-style:italic;color:var(--brass-dark)}
.hero .lede{font-family:var(--fd);font-weight:400;color:rgba(255,255,255,.92);font-size:19px;line-height:1.5;max-width:58ch;margin-bottom:12px}
.hero .sub{color:rgba(255,255,255,.6);font-size:15px;max-width:56ch}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* what-we-do strip, in the hero */
.hstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;border-top:1px solid rgba(255,255,255,.22)}
.hstrip a{padding:22px 26px 20px;border-right:1px solid rgba(255,255,255,.16);transition:.15s}
.hstrip a:last-child{border-right:none}
.hstrip a:hover{background:rgba(255,255,255,.06)}
.hstrip .n{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;color:var(--brass-dark)}
.hstrip h4{color:#fff;font-size:19px;margin:9px 0 6px}
.hstrip p{font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.5}
.hstrip .go{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:600;color:var(--brass-dark);text-decoration:underline;text-underline-offset:4px}
.hero .facts{display:flex;gap:40px;margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22);flex-wrap:wrap}
.hero .facts .n{font-family:var(--fd);font-weight:600;font-size:31px;color:#fff;line-height:1}
.hero .facts .t{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:6px}
/* slim hero: headline + one line, side by side */
.hero.slim .row{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.hero.slim h1{font-size:clamp(28px,3vw,36px);margin:12px 0 10px;max-width:24ch}
.hero.slim .lede{font-size:17px;margin-bottom:0}
.hero.slim .facts{margin-top:0;padding-top:0;border-top:none;gap:28px;justify-content:flex-end}
.hero.slim .facts .n{font-size:25px}

/* ============ COMPONENTS ============ */
/* intro */
.intro{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:start}
.intro h2{margin-bottom:16px}
.intro p+p{margin-top:14px}
.intro p{color:var(--text-soft)}
.pillars{display:flex;flex-direction:column;gap:14px}
.pillar{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--brass);padding:22px 26px}
.pillar .no{font-family:var(--fm);font-size:11px;color:var(--brass-deep);display:block;margin-bottom:7px}
.pillar h4{margin-bottom:6px}
.pillar p{font-size:14px;color:var(--text-soft)}

/* three doors */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.door{position:relative;overflow:hidden;min-height:290px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;color:#fff}
.door .g,.door .m{position:absolute;inset:0}
.door .m{opacity:.42}
.door>*{position:relative;z-index:3}
.door .n{font-family:var(--fm);font-size:11px;color:var(--brass-dark);letter-spacing:.12em;margin-bottom:auto}
.door h3{color:#fff;font-size:27px;margin-bottom:9px}
.door p{font-size:14.5px;color:rgba(255,255,255,.76);max-width:32ch}
.door .go{margin-top:18px;font-size:13.5px;font-weight:600;color:var(--brass-dark);text-decoration:underline;text-underline-offset:4px}

/* subject cards - each shows what formats live inside */
.subgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.subcard{background:var(--paper);padding:22px 22px 18px;display:flex;flex-direction:column;position:relative;transition:.15s;min-height:158px}
.subcard:hover{background:var(--brass-tint)}
.subcard .no{font-family:var(--fm);font-size:10.5px;color:var(--text-soft);letter-spacing:.1em}
.subcard h4{font-size:19px;margin:10px 0 auto;line-height:1.24}
.subcard .fm{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.subcard .fm span{font-family:var(--fm);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);border:1px solid var(--line);padding:3px 7px}
.subcard:hover .fm span{border-color:var(--brass);color:var(--brass-deep)}
.subcard .arw{position:absolute;top:20px;right:20px;font-size:14px;color:var(--text-soft);opacity:0;transform:translateX(-5px);transition:.15s}
.subcard:hover .arw{opacity:1;transform:none;color:var(--brass-deep)}
.subsmore{margin-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.subsmore .hint{font-size:14px;color:var(--text-soft)}

/* streams */
.streams{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.stream{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.stream .art{aspect-ratio:4/3}
.stream .bd{padding:17px 18px;flex:1;display:flex;flex-direction:column}
.stream .tp{font-family:var(--fb);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep)}
.stream h4{font-size:17px;margin:9px 0 10px;flex:1}
.stream .mt{font-size:12px;color:var(--text-soft)}
.stream .ex{display:block;padding:12px 18px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink)}
.stream .ex:hover{color:var(--brass-deep)}

/* topic explorer */
.tex{display:grid;grid-template-columns:280px 1fr;border:1px solid var(--line);background:var(--paper)}
.texnav{border-right:1px solid var(--line)}
.texnav a{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600}
.texnav a:last-child{border-bottom:none}
.texnav a.on{background:var(--ink);color:#fff}
.texnav a.on b{color:var(--brass-dark)}
.texnav a b{font-family:var(--fm);font-weight:400;font-size:11px;color:var(--text-soft)}
.texbody{padding:28px}
.texgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.texitem .art{aspect-ratio:16/10;margin-bottom:12px}
.texitem .tag{font-family:var(--fb);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep)}
.texitem h4{font-size:16px;margin-top:7px}

/* show */
.show{display:grid;grid-template-columns:1fr 400px;gap:36px;align-items:center}
.show .copy{padding:0}
.show h2{margin:14px 0 14px}
.show .sf{font-family:var(--fd);font-weight:400;font-size:18px;line-height:1.5;color:rgba(255,255,255,.78);max-width:46ch;margin-top:10px}
.show .eps{display:flex;gap:30px;margin-top:22px;flex-wrap:wrap}
.show .eps .n{font-family:var(--fd);font-weight:600;font-size:26px;color:#fff}
.show .eps .t{font-size:12px;color:rgba(255,255,255,.55);margin-top:3px}
.show .vis{position:relative}
.show .vis .art{aspect-ratio:16/9}

/* events */
.evgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:26px}
.evmain{position:relative;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:36px;color:#fff}
.evmain .g,.evmain .m{position:absolute;inset:0}
.evmain>*{position:relative;z-index:3}
.evmain h3{color:#fff;font-size:28px;margin:12px 0 10px;max-width:22ch}
.evmain p{font-size:15px;color:rgba(255,255,255,.76);max-width:42ch}
.evlist{display:flex;flex-direction:column;gap:14px}
.evrow{border:1px solid var(--line);border-left:3px solid var(--brass);background:var(--paper);padding:20px 24px;display:flex;gap:20px;align-items:flex-start}
.evrow .dt{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-deep);min-width:74px;padding-top:3px}
.evrow h4{margin-bottom:5px}
.evrow p{font-size:13.5px;color:var(--text-soft)}

/* newspaper lead block */
.masthead{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:2px solid var(--ink);font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft)}
.leadgrid{display:grid;grid-template-columns:1.7fr 1fr;gap:44px;padding-top:34px}
.leadmain .art{aspect-ratio:16/9;margin-bottom:20px}
.leadmain .kick{margin-bottom:10px}
.leadline{font-family:var(--fd);font-weight:400;font-size:19px;line-height:1.5;color:var(--text-soft);padding:0 0 20px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.leadline b{color:var(--ink);font-weight:600}
.leadmain h2{font-size:clamp(28px,3.2vw,40px);line-height:1.12;margin-bottom:14px}
.leadmain p{font-size:16.5px;color:var(--text-soft);max-width:60ch}
.leadmain .by{font-family:var(--fm);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft);margin-top:16px}
.leadside{border-left:1px solid var(--line);padding-left:34px}
.leadside .hd{font-family:var(--fb);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);padding-bottom:12px;border-bottom:1px solid var(--line)}
.leadside a{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
.leadside .tg{font-family:var(--fb);font-weight:600;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brass-deep)}
.leadside h4{font-size:16.5px;margin-top:6px;line-height:1.32}
.leadside a:hover h4{color:var(--brass-deep)}

/* report cover block (looks like a cover, not a note) */
.cover{position:relative;aspect-ratio:3/4;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:22px}
.cover .g,.cover .m{position:absolute;inset:0}
.cover>*{position:relative;z-index:3}
.cover .ct{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-dark)}
.cover .cn{font-family:var(--fd);font-weight:600;font-size:23px;line-height:1.16;color:#fff}
.cover .cr{width:44px;height:2px;background:var(--brass-dark)}

/* journal hero panel + ledger offerings */
.jhero{display:grid;grid-template-columns:1.15fr 380px;gap:56px;align-items:end}
.jpanel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);padding:28px}
.jpanel .k{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-dark)}
.jpanel h3{color:#fff;font-size:21px;margin:11px 0 14px;line-height:1.3}
.jpanel .lnk{font-size:13px;font-weight:600;color:var(--brass-dark);text-decoration:underline;text-underline-offset:4px}
.jpanel .cover{margin-top:20px;aspect-ratio:16/11}
.ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.lcell{background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;min-height:186px}
.lcell:hover{background:var(--brass-tint)}
.lcell .ic{width:34px;height:34px;border:1px solid var(--brass);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:600;color:var(--brass-deep);font-size:15px;margin-bottom:auto}
.lcell h4{margin:16px 0 6px}
.lcell p{font-size:13.5px;color:var(--text-soft)}
.lcell .go{margin-top:14px;padding-top:11px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between}
.lcell:hover .go{color:var(--brass-deep)}

/* articles */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.acard .art{aspect-ratio:16/10;margin-bottom:15px}
.acard .tag{font-family:var(--fb);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep)}
.acard h3{font-size:20px;margin:9px 0 8px}
.acard .mt{font-size:12.5px;color:var(--text-soft)}
.alist{margin-top:36px;border-top:1px solid var(--line)}
.alist a{display:grid;grid-template-columns:118px 1fr auto;gap:26px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.alist .d{font-family:var(--fm);font-size:11.5px;color:var(--text-soft)}
.alist h4{font-size:17.5px}
.alist .t{font-size:12.5px;color:var(--text-soft);margin-top:5px}
.alist .go{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;text-decoration:underline;text-underline-offset:4px}

/* deals */
.dlist{border-top:1px solid var(--line)}
.dlist a{display:grid;grid-template-columns:128px 1fr auto;gap:26px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dlist .d{font-family:var(--fm);font-size:11.5px;color:var(--brass-deep)}
.dlist h4{font-family:var(--fb);font-weight:600;font-size:16px;line-height:1.4;color:var(--ink)}
.dlist .k{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft)}
.s-dark .dlist{border-top-color:rgba(255,255,255,.16)}
.s-dark .dlist a{border-bottom-color:rgba(255,255,255,.13)}
.s-dark .dlist h4{color:#fff}

/* community */
.comm{display:flex;align-items:center;gap:40px;border:1px solid var(--line);border-left:4px solid var(--brass);background:var(--paper);padding:30px 36px;flex-wrap:wrap}
.comm .c{flex:1;min-width:300px}
.comm h2{margin:8px 0 8px;font-size:26px}
.comm p{color:var(--text-soft);max-width:60ch;font-size:14.5px}
.comm .who{display:flex;gap:14px;align-items:center;flex-shrink:0}
.comm .av{display:flex}
.comm .av span{width:40px;height:40px;border-radius:50%;border:2px solid var(--paper);margin-left:-12px;overflow:hidden;position:relative;background:var(--ink)}
.comm .av span:first-child{margin-left:0}
.comm .av img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}



/* newsletter */
.nlin{display:flex;justify-content:space-between;align-items:center;gap:44px;flex-wrap:wrap}
.nlin h2{max-width:20ch}
.nlin .sf{font-size:15.5px;margin-top:10px;max-width:44ch}
.nlf{display:flex;min-width:400px}
.nlf input{flex:1;background:rgba(255,255,255,.06);border:1.5px solid rgba(0,0,0,.25);border-right:none;padding:16px 18px;font:15.5px var(--fb);color:#15171A}
.nlf input::placeholder{color:rgba(0,0,0,.45)}
.nlf button{background:#15171A;color:#fff;border:none;padding:16px 28px;font:600 15px var(--fb);cursor:pointer}

/* footer */
footer{background:#0C0D10;color:rgba(255,255,255,.7);padding:64px 0 28px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:38px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.14)}

.fbrand p{font-size:14px;color:rgba(255,255,255,.56);margin-top:16px;max-width:34ch}
.fbrand .soc{display:flex;gap:16px;margin-top:22px}
.fbrand .soc a{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-dark)}
.fcol h5{font-family:var(--fb);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.44);margin-bottom:17px}
.fcol a{display:block;font-size:14.5px;color:rgba(255,255,255,.8);padding:6px 0}
.fcol a:hover{color:var(--brass-dark)}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:12.5px;color:rgba(255,255,255,.44);flex-wrap:wrap;gap:12px}

@media(max-width:1200px){
  nav.main{display:none}
  .mtoggle{display:block;margin-left:auto}
  .barcta{display:none}
  .streams{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:980px){
  .wrap{padding:0 28px}
  .intro,.show,.evgrid,.tex,.hero.slim .row,.jhero,.leadgrid{grid-template-columns:1fr;gap:34px}
  .subgrid{grid-template-columns:1fr 1fr}
  .hstrip{grid-template-columns:1fr}
  .hstrip a{border-right:none;border-bottom:1px solid rgba(255,255,255,.16)}
  .leadside{border-left:none;padding-left:0}
  .ledger{grid-template-columns:1fr 1fr}
  .doors,.agrid,.texgrid{grid-template-columns:1fr 1fr}
  .streams{grid-template-columns:1fr 1fr}
  .show .vis,.comm .vis{min-height:230px}
  .hero.slim .facts{justify-content:flex-start;margin-top:22px}
  .barin{height:56px}
}
@media(max-width:620px){
  .wrap{padding:0 20px}
  .doors,.agrid,.texgrid,.streams,.subgrid{grid-template-columns:1fr}
  .alist a,.dlist a{grid-template-columns:1fr;gap:6px}
  .alist .go,.dlist .k{display:none}
  .shead{grid-template-columns:1fr}
  .shead .more{justify-self:start;margin-top:14px}
  .fgrid{grid-template-columns:1fr 1fr}
  .nlf{min-width:100%}
  .show .copy,.comm .c{padding:30px}
}


/* ============ DIGEST: hero as a contained card, CTAs right ============ */
.hero.card{background:var(--paper);padding:36px 0 0}
.hero.card .scrim{display:none}
.hero.card .in{padding:0 0 4px}
.herocard{display:grid;grid-template-columns:1.35fr auto;gap:52px;align-items:center;
  background:linear-gradient(118deg,var(--ink) 0%,var(--ink-deep) 62%,color-mix(in srgb,var(--brass-dark) 20%,var(--ink-deep)) 100%);
  border-left:4px solid var(--brass);padding:40px 46px}
.herocard h1{font-size:clamp(28px,3vw,38px);margin:12px 0 12px;max-width:24ch}
.herocard .lede{font-size:17.5px;margin-bottom:0;max-width:56ch}
.herocard .side{display:flex;flex-direction:column;gap:12px;min-width:230px;border-left:1px solid rgba(255,255,255,.18);padding-left:44px}
.herocard .side .lbl2{font-family:var(--fm);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-dark);margin-bottom:2px}
.herocard .side .btn{justify-content:center}
.herocard .side .nx{font-size:13px;color:rgba(255,255,255,.62);line-height:1.45;padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}
.herocard .side .nx b{display:block;color:#fff;font-weight:600;font-size:14.5px;margin-top:3px}

/* ============ RICH UPDATE CARDS (images with each news item) ============ */
/* home page rich-deal grid. Renamed from .rich, which the prose layer needs. */
.richgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.richcard{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.richcard .art{aspect-ratio:16/10}
.richcard .bd{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.richcard .dt{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep)}
.richcard h4{font-size:17px;line-height:1.34;margin:10px 0 12px;flex:1}
.richcard .go{font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.richcard:hover h4{color:var(--brass-deep)}

/* ============ EVENTS-LED hero: next event card instead of pillars ============ */
.nextev{display:grid;grid-template-columns:1fr 380px;gap:52px;align-items:end;margin-top:38px;padding-top:30px;border-top:1px solid rgba(255,255,255,.22)}
.nextev .card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);padding:24px 26px}
.nextev .card .l{font-family:var(--fm);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-dark)}
.nextev .card h4{color:#fff;font-size:20px;margin:10px 0 8px;line-height:1.28}
.nextev .card p{font-size:13.5px;color:rgba(255,255,255,.62)}
.nextev .card .btn{margin-top:16px}
.nextev .roll{display:flex;flex-direction:column;gap:0}
.nextev .roll a{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:14.5px;color:rgba(255,255,255,.86)}
.nextev .roll a:first-child{border-top:1px solid rgba(255,255,255,.16)}
.nextev .roll a span{font-family:var(--fm);font-size:11px;color:var(--brass-dark);white-space:nowrap}
.nextev .roll a:hover{color:#fff}

/* ============ JOURNAL hero: equal columns, aligned tops ============ */
.jhero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
.jhero .jleft{display:flex;flex-direction:column;justify-content:center}
.jpanel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);padding:32px;display:flex;flex-direction:column;justify-content:center}
.jpanel .k{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-dark)}
.jpanel h3{color:#fff;font-size:23px;margin:12px 0 16px;line-height:1.28}
.jpanel .cover{margin-top:0;aspect-ratio:16/9}
.jpanel .lnk{margin-top:18px;display:inline-block}

@media(max-width:980px){
  .herocard{grid-template-columns:1fr;gap:30px;padding:30px}
  .herocard .side{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:24px}
  .rich{grid-template-columns:1fr 1fr}
  .nextev{grid-template-columns:1fr;gap:26px}
  .jhero{grid-template-columns:1fr}
}
@media(max-width:620px){ .rich{grid-template-columns:1fr} }

/* Straight to Work: headline only at the top */
.leadhead{font-family:var(--fd);font-weight:600;font-size:clamp(30px,3.6vw,44px);line-height:1.12;color:var(--ink);max-width:22ch;padding:6px 0 30px;margin-bottom:30px;border-bottom:2px solid var(--ink)}
.leadhead em{font-style:italic;color:var(--brass-deep)}

/* ledger offerings grid (used by "As Presented") */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.lcell{background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;min-height:194px}
.lcell:hover{background:var(--brass-tint)}
.lcell .ic{width:36px;height:36px;border:1px solid var(--brass);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:600;color:var(--brass-deep);font-size:16px;margin-bottom:auto}
.lcell h4{margin:18px 0 7px}
.lcell p{font-size:13.5px;color:var(--text-soft)}
.lcell .go{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between}
.lcell:hover .go{color:var(--brass-deep)}
@media(max-width:980px){ .ledger{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .ledger{grid-template-columns:1fr} }

/* hero numbers (replaces the CTA buttons - client selection) */
.heronums{display:flex;align-items:flex-start;flex-wrap:wrap;margin-top:36px}
.heronums>div{padding:2px 30px}
.heronums>div:first-child{padding-left:0}
.heronums>div+div{border-left:1px solid rgba(255,255,255,.16)}
.heronums .n{font-family:var(--fd);font-weight:600;font-size:clamp(28px,3vw,38px);color:#fff;line-height:1;letter-spacing:-.02em}
.heronums .t{font-family:var(--fb);font-weight:500;font-size:13px;color:rgba(255,255,255,.62);margin-top:9px;white-space:nowrap}
@media(max-width:620px){
  .heronums{display:block}
  .heronums>div{padding:14px 0;border-left:none;border-bottom:1px solid rgba(255,255,255,.16)}
  .heronums>div:first-child{padding-top:0}
  .heronums>div:last-child{border-bottom:none;padding-bottom:0}
  .heronums .t{white-space:normal}
}

/* --- brand lockup (SVG, supplied 2026-08-12) --- */

/* logo comparison switcher (only rendered when ?logo= is set) */
.lgsw{background:#0E1014;color:#C9D0DE;display:flex;gap:7px;align-items:center;justify-content:center;
      padding:9px 16px;font:600 12px var(--fb);flex-wrap:wrap}
.lgsw .l{color:#79818F;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
.lgsw a{border:1px solid #2A2F38;padding:5px 12px;color:#C9D0DE}
.lgsw a.on{background:var(--brass);border-color:var(--brass);color:#15171A}
.lgsw .n{color:#79818F;font-weight:400;margin-left:10px;font-size:11.5px}
@media(max-width:560px){.lgsw .n{display:none}}

/* ---- Brand lockup (Identity Kit 7A / 7B) ----
   Mark is inline SVG, wordmark is live Archivo 700 with a dotless i.
   Accent rule: brass on dark, brass deep on light. Set per call, never here. */
.lwlogo{display:inline-flex;line-height:0;flex-shrink:0}
.lwlogo svg{display:block;flex-shrink:0}
.lwword{font-family:'Archivo',var(--fb);font-weight:700;letter-spacing:-.025em;line-height:1;white-space:nowrap}
.lwi{position:relative;display:inline-block}
.lwi i{position:absolute;left:.136em;top:.091em;transform:translateX(-50%);
       width:.205em;height:.205em;border-radius:50%}
/* clear space: one dot diameter, 8px at header size */
header.bar .brand{padding:0}
@media(max-width:560px){
  .lwlogo{gap:8px!important}
  .lwword{font-size:15px!important}
  .lwlogo svg{width:23px;height:auto}
}

/* ============================================================
   PHASE 1 — the shell.
   Navigation, search, mobile drawer, skip link.
   Colours, type and spacing all come from the design system:
   nav is Inter 500 13.5px; hover is brass DEEP because brass on
   paper is 2.74:1 and fails as text; dark surfaces use brass.
   ============================================================ */

/* skip link, visible only on keyboard focus */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
 font:600 13px/1 var(--fb);padding:14px 18px}
.skip:focus{left:0}

/* header search */
.barcta{display:flex;align-items:center;gap:14px}
.isearch{background:none;border:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;
 padding:6px;line-height:0}
.isearch:hover{color:var(--brass-deep)}
.isearch[aria-expanded="true"]{color:var(--brass-deep)}
.searchbar{border-top:1px solid var(--line);background:var(--brass-tint)}
.searchbar form{display:flex;gap:0;padding:16px 0}
.searchbar input{flex:1;border:1px solid var(--line);border-right:none;background:var(--paper);
 padding:13px 16px;font:400 15px var(--fb);color:var(--text)}
.searchbar input:focus{outline:none;border-color:var(--brass)}
.searchbar button{background:var(--ink);color:var(--paper);border:none;padding:13px 26px;
 font:600 13px var(--fb);cursor:pointer}
.searchbar button:hover{background:var(--brass-deep)}

/* mobile toggle, three rules */
.mtoggle{display:none;background:none;border:none;cursor:pointer;padding:10px 4px;
 flex-direction:column;gap:5px;width:38px}
.mtoggle span{display:block;height:2px;width:22px;background:var(--ink);transition:.18s}
.mtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.mdrawer{display:none;background:var(--paper);border-top:1px solid var(--line);
 position:sticky;top:96px;z-index:70;max-height:calc(100vh - 96px);overflow-y:auto}
.mdrawer.open{display:block}
.mgrp{border-bottom:1px solid var(--line)}
.mtop{display:block;font:600 16px/1 var(--fd);color:var(--ink);padding:17px 24px 15px}
.msub{padding:0 24px 14px}
.msub a{display:block;font:500 14px/1 var(--fb);color:var(--text-soft);padding:9px 0 9px 14px;
 border-left:1px solid var(--line)}
.msub a:hover{color:var(--brass-deep);border-left-color:var(--brass)}
.mfoot{padding:22px 24px 30px;display:flex;flex-direction:column;gap:14px}
.mfoot .btn{justify-content:center}
.mfoot input{border:1px solid var(--line);background:#fff;padding:13px 15px;font:400 15px var(--fb);width:100%}

/* footer links are real now */
.fbot a{text-decoration:underline;text-underline-offset:3px}
.fbot a:hover{color:var(--brass-dark)}

@media(max-width:1080px){
  nav.main{display:none}
  .mtoggle{display:flex}
  .barin{justify-content:space-between;gap:16px}
  .barcta .btn{display:none}
}
@media(max-width:560px){
  .mdrawer{top:88px;max-height:calc(100vh - 88px)}
  .searchbar button{padding:13px 18px}
  .barcta{gap:6px}
}

/* ============================================================
   BUILD MARKERS. Staging only, removed at go-live.
   A red dot means the link has no destination yet. Nothing is
   hidden or removed; it is flagged so it can be fixed later.
   The dot disappears on its own the moment a real URL is set,
   because it is driven by the link, not by a hand-kept list.
   ============================================================ */
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#C0392B;
 margin-left:6px;vertical-align:middle;flex-shrink:0}
.nitem>a.todo,.dd a.todo,.mtop.todo,.msub a.todo,.fcol a.todo{opacity:.72}
.dd a.todo,.msub a.todo,.fcol a.todo{display:flex;align-items:center;justify-content:flex-start;gap:2px}
.fcol a.todo .dot{margin-left:5px}

/* any other link on the build with nowhere to go */
/* Two marker systems exist: an explicit <i class="dot"> written into the
   nav markup, and this automatic one on any dead link inside main. They
   never collided while the nav sat in <header>, outside main. Moving the
   nav below the hero put it inside main, so every .todo nav link started
   drawing both. Suppress the automatic one wherever an explicit dot is
   already present; links without one (e.g. .more.todo) keep it. */
body.lw-build main a:has(> .dot)::after{content:none!important}
body.lw-build main a[href="#"]{position:relative}
body.lw-build main a[href="#"]::after{content:"";position:absolute;top:6px;right:-2px;
 width:6px;height:6px;border-radius:50%;background:#C0392B;z-index:5}
body.lw-build main .door[href="#"]::after,
body.lw-build main .acard[href="#"]::after,
body.lw-build main .subcard[href="#"]::after{top:10px;right:10px}

/* ============================================================
   PHASE 2 - the index engine.
   One set of rules for every listing page. Type, colour and
   spacing all from the design system; nothing new invented.
   ============================================================ */

/* head: position + how much is here */
.ixhead{padding-bottom:0}
.ixtop{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);flex-wrap:wrap}
.ixtitle{flex:1 1 460px}
.ixtitle .kick{padding-bottom:var(--s2);border-bottom:2px solid var(--ink);display:inline-block}
.ixtop h1{margin:var(--s2) 0 0;max-width:18ch}
.ixtop .standfirst{margin-top:var(--s2);max-width:60ch}
.ixstats{display:flex;gap:0;flex-shrink:0;padding-bottom:4px}
.ixstats > div{padding:0 var(--s4);border-left:1px solid var(--line)}
.ixstats > div:first-child{padding-left:0;border-left:none}
.ixstats > div:last-child{padding-right:0}
.ixstats dt{font-family:var(--fb);font-weight:500;font-size:12px;line-height:1.5;color:var(--text-soft);
 letter-spacing:.02em;margin-bottom:var(--s1)}
.ixstats dd{margin:0;font-family:var(--fd);font-weight:600;font-size:23px;line-height:1;color:var(--ink)}
.ixstats dd.n{font-size:42px}

/* facets */
.ixfacets{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.fx{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--paper);
 padding:8px 13px;font:500 13px var(--fb);color:var(--text);white-space:nowrap}
.fx b{font-family:var(--fm);font-weight:400;font-size:10.5px;color:var(--text-soft)}
.fx:hover{border-color:var(--brass);color:var(--brass-deep)}
.fx.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.fx.on b{color:rgba(255,255,255,.6)}

/* body */
.ixbody{padding-top:var(--s5)}
.ixempty{font-family:var(--fd);font-size:19px;color:var(--text-soft);padding:40px 0}
.ixempty a{color:var(--brass-deep);text-decoration:underline;text-underline-offset:4px}

/* art block, image or pattern */
.ixart{position:relative;overflow:hidden;background:var(--ink-deep);margin-bottom:14px}
.ixart img{width:100%;height:100%;object-fit:cover;display:block}
.ixart .g{position:absolute;inset:0;background:linear-gradient(140deg,
 color-mix(in srgb,var(--ink) 92%,#000),color-mix(in srgb,var(--brass-dark) 38%,var(--ink-deep)))}
.ixart .m{position:absolute;inset:0;opacity:.5}

/* grid of cards */
.ixgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
.ixcard{display:block}
.ixcard .tag{font:600 11.5px/1 var(--fb);letter-spacing:.13em;text-transform:uppercase;
 color:var(--brass-deep);display:block;margin-bottom:9px}
.ixcard h3{font-family:var(--fd);font-weight:600;font-size:19px;line-height:1.28;margin-bottom:9px;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ixcard .mt{font-family:var(--fm);font-weight:400;font-size:11.5px;color:var(--text-soft)}
.ixcard:hover h3{color:var(--brass-deep)}
.ixcard:hover .ixart img{transform:scale(1.03)}
.ixart img{transition:transform .35s ease}

/* rows */
.ixrows{border-top:1px solid var(--line)}
.ixrow{display:grid;grid-template-columns:100px 1fr auto;gap:24px;align-items:baseline;
 padding:19px 0;border-bottom:1px solid var(--line)}
.ixrow .d{font-family:var(--fm);font-size:11.5px;color:var(--text-soft);white-space:nowrap}
.ixrow h4{font-family:var(--fb);font-weight:600;font-size:16px;line-height:1.42;color:var(--ink)}
.ixrow .t{font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
 color:var(--text-soft);margin-top:6px}
.ixrow .go{font:500 13px var(--fb);color:var(--brass-deep);white-space:nowrap;opacity:0;transition:.15s}
.ixrow:hover{background:var(--brass-tint)}
.ixrow:hover .go{opacity:1}
.ixrow:hover h4{color:var(--brass-deep)}

/* events grouping */
.ixgroup{margin-bottom:56px}
.ixgroup:last-child{margin-bottom:0}
.ixgroup h2{padding-bottom:16px;margin-bottom:30px;border-bottom:2px solid var(--ink)}

/* glossary A to Z */
.azbar{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:30px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.azbar a,.azbar span{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
 font:500 13px var(--fm);border:1px solid var(--line)}
.azbar a{color:var(--ink)}
.azbar a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.azbar span{color:var(--line);border-color:transparent}
.azgroup{padding:26px 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.azgroup h2{font-size:26px;color:var(--brass-deep);margin-bottom:14px}
.azlist{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 26px}
.azlist a{font-size:15px;color:var(--text);padding:4px 0}
.azlist a:hover{color:var(--brass-deep);text-decoration:underline;text-underline-offset:4px}

/* pagination */
.ixpager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:52px;padding-top:34px;
 border-top:1px solid var(--line)}
.ixpager .page-numbers{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
 padding:0 13px;border:1px solid var(--line);font:500 13.5px var(--fb);color:var(--ink)}
.ixpager .page-numbers:hover{border-color:var(--brass);color:var(--brass-deep)}
.ixpager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ixpager .dots{border-color:transparent}
.ixpagenote{text-align:center;font-family:var(--fm);font-size:11.5px;color:var(--text-soft);margin-top:14px}

/* onward */
.ixonward{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ixonward a{background:var(--paper);border:1px solid var(--line);padding:24px 22px;display:block}
.ixonward h3{font-family:var(--fd);font-weight:600;font-size:19px;margin-bottom:7px}
.ixonward p{font-size:15px;color:var(--text-soft);margin-bottom:14px}
.ixonward .go{font:500 13px var(--fb);color:var(--brass-deep)}
.ixonward a:hover{border-color:var(--brass)}
.ixonward a:hover h3{color:var(--brass-deep)}

@media(max-width:1000px){
  .ixgrid,.ixonward{grid-template-columns:repeat(2,1fr)}
  .azlist{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .ixgrid,.ixonward{grid-template-columns:1fr}
  .azlist{grid-template-columns:1fr}
  .ixtop{flex-direction:column;align-items:flex-start;gap:22px}
  .ixcount{text-align:left}
  .ixrow{grid-template-columns:1fr;gap:6px}
  .ixrow .d{order:-1}
  .ixrow .go{display:none}
}

/* reCAPTCHA badge only where a form actually exists (Google allows this when the
   required attribution text is shown alongside the form). */
.grecaptcha-badge{visibility:hidden}
body.page-community .grecaptcha-badge,body.page-contact-us .grecaptcha-badge{visibility:visible}

/* generated card art: stable per record, palette only, never a supplied thumbnail */
.ixart.gen .g{background:linear-gradient(var(--a),
 color-mix(in srgb,var(--ink) var(--d),#000),
 color-mix(in srgb,var(--brass-dark) var(--w),var(--ink-deep)))}
.ixart.gen .m{opacity:.42}

/* card metadata row */
.ixmeta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tops{display:flex;gap:6px;flex-wrap:wrap}
.tops span{font-family:var(--fb);font-weight:500;font-size:12px;color:var(--text-soft);
 border:1px solid var(--line);padding:3px 8px;line-height:1.3}
.tops .more{border-color:transparent;color:var(--brass-deep)}
.ixcard:hover .tops span{border-color:var(--brass-tint)}

/* ════════════════════════════════════════════════════════════════════
   PROSE. The body of an article, a video description, a deal, a
   definition. Everything below is what WordPress actually outputs from
   the editor, so a writer can publish without knowing any of it exists.
   Measure is capped at 68 characters. Nothing here invents a type level.
   ════════════════════════════════════════════════════════════════════ */
.rich{font-family:var(--fb);font-size:16px;line-height:1.75;color:var(--text);max-width:68ch}
.rich > * + *{margin-top:var(--s4)}
.rich p{max-width:none}
.rich h2{font-family:var(--fd);font-weight:600;font-size:26px;line-height:1.18;color:var(--ink);
 margin-top:var(--s7);margin-bottom:calc(var(--s4) * -1 + var(--s3))}
.rich h3{font-family:var(--fd);font-weight:600;font-size:19px;line-height:1.28;color:var(--ink);margin-top:var(--s6)}
.rich h4{font-family:var(--fb);font-weight:600;font-size:16px;line-height:1.4;color:var(--ink);margin-top:var(--s5)}
.rich h2:first-child,.rich h3:first-child{margin-top:0}
.rich a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass);
 text-underline-offset:3px;text-decoration-thickness:1px}
.rich a:hover{color:var(--brass-deep);text-decoration-color:var(--brass-deep)}
.rich strong,.rich b{font-weight:600;color:var(--ink)}
.rich em,.rich i{font-style:italic}
.rich ul,.rich ol{padding-left:var(--s4)}
.rich li{margin-top:var(--s2)}
.rich li::marker{color:var(--brass-deep)}
.rich ol li::marker{font-family:var(--fm);font-size:13px}
.rich ul ul,.rich ol ol,.rich ul ol,.rich ol ul{margin-top:var(--s2)}
.rich blockquote{border-left:2px solid var(--brass);padding:var(--s1) 0 var(--s1) var(--s4);
 font-family:var(--fd);font-weight:400;font-size:19px;line-height:1.5;color:var(--ink)}
.rich blockquote cite{display:block;margin-top:var(--s2);font-family:var(--fb);font-weight:500;
 font-size:12px;font-style:normal;color:var(--text-soft)}
.rich hr{border:none;border-top:1px solid var(--line);margin:var(--s7) 0}
.rich code{font-family:var(--fm);font-size:13.5px;background:var(--brass-tint);padding:2px 6px}
.rich pre{background:var(--ink);color:#F4F1EA;padding:var(--s4);overflow-x:auto;font-family:var(--fm);font-size:13px;line-height:1.6}
.rich pre code{background:none;padding:0;color:inherit}
.rich img{height:auto}
.rich figure{margin-left:0;margin-right:0}
.rich figcaption,.wp-caption-text{font-family:var(--fb);font-weight:500;font-size:12px;line-height:1.5;
 color:var(--text-soft);margin-top:var(--s2)}
.rich table{width:100%;border-collapse:collapse;font-size:14.5px}
.rich table th{text-align:left;font-family:var(--fb);font-weight:600;font-size:11.5px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--text-soft);padding:0 var(--s3) var(--s2) 0;border-bottom:2px solid var(--ink)}
.rich table td{padding:var(--s2) var(--s3) var(--s2) 0;border-bottom:1px solid var(--line);vertical-align:top}
.rich .tblwrap,.rich figure.wp-block-table{overflow-x:auto}
.rich dl dt{font-weight:600;color:var(--ink)}
.rich dl dd{margin-left:0;color:var(--text-soft)}

/* embeds: any video keeps a 16 by 9 frame at any width */
.rich iframe,.rich .wp-block-embed__wrapper iframe,.rich video{width:100%;aspect-ratio:16/9;height:auto;display:block;border:0}
.rich .wp-block-embed,.rich .wp-embed-responsive{margin-left:0;margin-right:0}
.rich iframe[src*="spotify"],.rich iframe[src*="soundcloud"]{aspect-ratio:auto;height:160px}

/* pull quote, used when a page wants to lift a line out */
.pullquote,.wp-block-pullquote{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
 padding:var(--s5) 0;margin:var(--s6) 0;font-family:var(--fd);font-weight:400;font-size:26px;
 line-height:1.28;color:var(--ink);text-align:left}
.wp-block-pullquote blockquote{border:none;padding:0}

/* ── WordPress core output ─────────────────────────────────────────── */
.alignleft{float:left;margin:var(--s1) var(--s4) var(--s3) 0;max-width:50%}
.alignright{float:right;margin:var(--s1) 0 var(--s3) var(--s4);max-width:50%}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide{max-width:min(1100px,92vw);margin-left:50%;transform:translateX(-50%)}
.alignfull{max-width:100vw;margin-left:50%;transform:translateX(-50%)}
.wp-caption{max-width:100%}
.wp-block-image img{height:auto}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.gallery-item img{width:100%;height:auto}
.gallery-caption{font-size:12px;color:var(--text-soft)}
.sticky{position:relative}
.rich .wp-block-separator{border-top:1px solid var(--line)}

/* ── Accessibility ─────────────────────────────────────────────────── */
.screen-reader-text,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
 overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static;width:auto;height:auto;margin:0;clip:auto;
 background:var(--ink);color:var(--paper);padding:var(--s2) var(--s3)}
:focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px}
.s-dark :focus-visible,.s-deep :focus-visible,footer :focus-visible{outline-color:var(--brass)}
::selection{background:var(--brass-tint);color:var(--ink)}
.s-dark ::selection,.s-deep ::selection,footer ::selection{background:var(--brass);color:var(--ink)}
html{scroll-behavior:smooth}
:target{scroll-margin-top:var(--s7)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
   transition-duration:.01ms!important}
}

/* ── Forms ─────────────────────────────────────────────────────────── */
.field{margin-bottom:var(--s4)}
.field label,label.lbl{display:block;font-family:var(--fb);font-weight:500;font-size:12px;
 letter-spacing:.02em;color:var(--ink);margin-bottom:var(--s1)}
.field .req{color:var(--brass-deep)}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=search],
input[type=number],input[type=password],select,textarea{
 width:100%;font-family:var(--fb);font-size:15px;line-height:1.5;color:var(--text);
 background:#fff;border:1px solid var(--line);padding:13px 15px;appearance:none;border-radius:0}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
 linear-gradient(135deg,var(--ink) 50%,transparent 50%);
 background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
 background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass)}
input::placeholder,textarea::placeholder{color:var(--text-soft);opacity:1}
input:disabled,textarea:disabled,select:disabled{background:var(--brass-tint);color:var(--text-soft)}
.field .hint{font-family:var(--fb);font-weight:500;font-size:12px;color:var(--text-soft);margin-top:var(--s1)}
.check{display:flex;align-items:flex-start;gap:var(--s2);font-size:14.5px}
.check input[type=checkbox],.check input[type=radio]{width:17px;height:17px;flex-shrink:0;margin-top:3px;
 border:1px solid var(--ink);background:#fff;appearance:none;cursor:pointer}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--ink)}
.check input[type=checkbox]:checked{background-image:linear-gradient(45deg,transparent 42%,#F4F1EA 42%,#F4F1EA 55%,transparent 55%),
 linear-gradient(-45deg,transparent 45%,#F4F1EA 45%,#F4F1EA 58%,transparent 58%)}
.check input[type=radio]:checked{box-shadow:inset 0 0 0 3px var(--paper)}

/* messages */
.notice,.errbox,.okbox{padding:var(--s3) var(--s4);font-size:14.5px;margin-bottom:var(--s4);border-left:3px solid}
.errbox{background:#FBEAE8;border-color:#9A3B32;color:#7A2C25}
.okbox{background:#E7F1ED;border-color:#2C6E49;color:#205437}
.notice{background:var(--brass-tint);border-color:var(--brass);color:var(--ink)}

/* ── Page states ───────────────────────────────────────────────────── */
.ixhead .crumbs{margin-bottom:var(--s4)}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center;font-family:var(--fb);font-weight:500;font-size:12px;
 color:var(--text-soft);margin-bottom:var(--s3)}
.crumbs a{color:var(--text-soft)}
.crumbs a:hover{color:var(--brass-deep)}
.crumbs span[aria-current]{color:var(--ink)}
.e404{padding:var(--s7) 0}
.e404 h1{max-width:16ch}
.e404 .standfirst{margin-top:var(--s3);max-width:56ch}
.srchform{display:flex;margin:var(--s5) 0;max-width:640px}
.srchform input{border-right:none}
.srchform button{background:var(--ink);color:var(--paper);border:none;padding:0 var(--s5);
 font:600 13px var(--fb);cursor:pointer;white-space:nowrap}
.srchform button:hover{background:var(--brass-deep)}
.srchmeta{font-family:var(--fm);font-size:11.5px;color:var(--text-soft);margin-bottom:var(--s4)}
mark,.srch-hit{background:var(--brass-tint);color:var(--ink);padding:0 3px}

/* ── Print ─────────────────────────────────────────────────────────── */
@media print{
  .topstrip,header.bar,.mdrawer,.searchbar,footer,.ixfacets,.ixpager,.ixonward,.skip,.dot{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0}
  a{text-decoration:underline}
  .rich a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .ixart,.art{display:none}
  h1,h2,h3{page-break-after:avoid}
  .rich p,.rich li{orphans:3;widows:3}
}

@media(max-width:640px){
  .alignleft,.alignright{float:none;margin:var(--s3) 0;max-width:100%}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .rich{font-size:15.5px}
  .rich h2{font-size:23px}
}

/* The index head and body are one block, not two sections. The generic rule that
   separates two adjacent paper sections was drawing a second line hard against the
   bottom of the filter pills. Suppress it for this pair. */
/* The filter zone is closed by a rule, but with a full space either side of it.
   The earlier fault was not the second line, it was that the line sat hard
   against the pills with nothing between them. */
.ixhead + .ixbody{border-top:none}
.ixhead{padding-bottom:0}
.ixfacets{padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.ixbody{padding-top:var(--s5)}
.ixrows{border-top:none}

@media(max-width:820px){
  .ixstats{align-self:flex-start;padding-bottom:0}
  .ixstats dd.n{font-size:32px}
  .ixstats dd{font-size:19px}
}
@media(max-width:640px){
  .ixstats > div{padding:0 var(--s3)}
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 3 - the record engine. One layout for every single item.
   ════════════════════════════════════════════════════════════════════ */
.rechead{padding-bottom:var(--s6)}
.recwrap{max-width:26ch}
.recwrap h1{margin-top:var(--s2);max-width:20ch}
.rechead .kick{display:inline-block;padding-bottom:var(--s2);border-bottom:2px solid var(--ink)}
.rechead a.kick:hover{color:var(--ink);border-bottom-color:var(--brass)}
.recwrap{max-width:none}
.recfacts{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s4);
 padding-top:var(--s4);border-top:1px solid var(--line)}
.recfacts span{font-family:var(--fm);font-weight:400;font-size:11.5px;line-height:1.4;color:var(--text-soft)}
.recfacts span + span::before{content:"·";margin-right:var(--s3);color:var(--line)}
.recfacts b{font-family:var(--fb);font-weight:600;font-size:10.5px;letter-spacing:.1em;
 text-transform:uppercase;padding:4px 8px}
.st-open{background:var(--ink);color:var(--paper)}
.st-past{background:var(--brass-tint);color:var(--brass-deep)}

.recbody{padding-top:0}
.reccol{max-width:68ch}
.player{position:relative;margin-bottom:var(--s6)}
.player iframe{width:100%;aspect-ratio:16/9;height:auto;display:block;border:0;background:var(--ink)}
.player.noembed .ixart{margin-bottom:0}

/* subjects covered */
.recsubj{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.recsubj h2{margin-bottom:var(--s3)}
.recsubj .tops{gap:var(--s1)}
.recsubj .tops a{font-family:var(--fb);font-weight:500;font-size:13px;color:var(--text);
 border:1px solid var(--line);padding:7px 12px;line-height:1.3}
.recsubj .tops a:hover{border-color:var(--brass);color:var(--brass-deep)}

/* event call to action */
.evcta{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap;
 background:var(--ink);color:#fff;padding:var(--s5);margin-bottom:var(--s6)}
.evcta h2{color:#fff;margin-top:var(--s2)}
.evcta .kick{color:var(--brass)}
.evcta .btn.solid{background:var(--brass);color:var(--ink)}
.evcta .btn.solid:hover{background:#fff}
.evafter{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)}
.evafter .standfirst{margin:var(--s2) 0 var(--s5);max-width:56ch}

/* glossary walk */
.azstep{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6);
 padding-top:var(--s5);border-top:1px solid var(--line)}
.azstep a{border:1px solid var(--line);padding:var(--s3) var(--s4);display:block}
.azstep a.nx{text-align:right}
.azstep span{font-family:var(--fb);font-weight:500;font-size:12px;color:var(--text-soft);display:block;margin-bottom:4px}
.azstep b{font-family:var(--fd);font-weight:600;font-size:19px;line-height:1.28;color:var(--ink)}
.azstep a:hover{border-color:var(--brass)}
.azstep a:hover b{color:var(--brass-deep)}

@media(max-width:820px){
  .evcta{flex-direction:column;align-items:flex-start}
  .azstep{grid-template-columns:1fr}
  .azstep a.nx{text-align:left}
}

/* ════════════════════════════════════════════════════════════════════
   Page mastheads on ink.
   A listing or a record now opens with weight, the way the home page
   does, instead of starting flat on paper. Contrast follows the system:
   white headings, brass accents, brass never as small text on light.
   ════════════════════════════════════════════════════════════════════ */
/* The same ground as the home hero, not a flat panel, so every page on the
   site opens with one treatment. Both layers are lifted from .hero verbatim:
   the diagonal ink-to-brass wash, and the radial brass glow at the top right. */
.ixhead.s-dark,.rechead.s-dark{
  padding-top:var(--s7);
  background:
    radial-gradient(70% 110% at 90% 4%,color-mix(in srgb,var(--brass-dark) 22%,transparent) 0%,transparent 58%),
    linear-gradient(118deg,var(--ink) 0%,var(--ink-deep) 58%,color-mix(in srgb,var(--brass-dark) 22%,var(--ink-deep)) 100%);
}
/* a record head is shorter, so the wash is steeper to read the same way */
.rechead.s-dark{
  background:
    radial-gradient(80% 130% at 92% 0%,color-mix(in srgb,var(--brass-dark) 20%,transparent) 0%,transparent 60%),
    linear-gradient(112deg,var(--ink) 0%,var(--ink-deep) 62%,color-mix(in srgb,var(--brass-dark) 18%,var(--ink-deep)) 100%);
}
.ixhead.s-dark{padding-bottom:0}
.rechead.s-dark{padding-bottom:var(--s6)}

/* head type on ink */
.s-dark .crumbs{color:rgba(255,255,255,.5)}
.s-dark .crumbs a{color:rgba(255,255,255,.62)}
.s-dark .crumbs a:hover{color:var(--brass)}
.s-dark .crumbs span[aria-current]{color:#fff}
.s-dark .ixtitle .kick,.s-dark .rechead .kick{color:var(--brass);border-bottom-color:var(--brass)}
.s-dark .ixtop h1,.s-dark .recwrap h1{color:#fff}
.s-dark .ixtop .standfirst{color:rgba(255,255,255,.74)}

/* stat pair on ink */
.s-dark .ixstats > div{border-left-color:rgba(255,255,255,.18)}
.s-dark .ixstats dt{color:rgba(255,255,255,.55)}
.s-dark .ixstats dd{color:#fff}
.s-dark .ixstats dd.n{color:var(--brass)}

/* facts line on ink */
.s-dark .recfacts{border-top-color:rgba(255,255,255,.16)}
.s-dark .recfacts span{color:rgba(255,255,255,.62)}
.s-dark .recfacts span + span::before{color:rgba(255,255,255,.28)}
.s-dark .st-open{background:var(--brass);color:var(--ink)}
.s-dark .st-past{background:rgba(255,255,255,.1);color:var(--brass)}

/* filters on ink */
.s-dark .ixfacets{border-top-color:rgba(255,255,255,.16);border-bottom-color:rgba(255,255,255,.16)}
.s-dark .fx{background:transparent;border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.84)}
.s-dark .fx b{color:rgba(255,255,255,.45)}
.s-dark .fx:hover{border-color:var(--brass);color:var(--brass)}
.s-dark .fx.on{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.s-dark .fx.on b{color:rgba(26,29,35,.6)}

/* the body that follows is paper again, so the two never blur */
.ixhead.s-dark + .ixbody,.rechead.s-dark + .recbody{padding-top:var(--s6)}

/* the header lost its strip, so it needs its own footing */
header.bar{border-bottom:1px solid var(--line)}

/* who appears in a piece */
.recppl{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.recppl h2{margin-bottom:var(--s4)}
.pplgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.ppl{display:flex;align-items:center;gap:var(--s3);border:1px solid var(--line);padding:var(--s3)}
.ppl:hover{border-color:var(--brass)}
.ppl .pic{width:52px;height:52px;flex-shrink:0;overflow:hidden;background:var(--ink)}
.ppl .pic img{width:100%;height:100%;object-fit:cover;display:block}
.ppl .pic.init{display:flex;align-items:center;justify-content:center;
 font-family:var(--fd);font-weight:600;font-size:23px;color:var(--brass)}
.ppl .who{display:flex;flex-direction:column;gap:3px;min-width:0}
.ppl .who b{font-family:var(--fd);font-weight:600;font-size:19px;line-height:1.28;color:var(--ink)}
.ppl .who span{font-family:var(--fb);font-weight:500;font-size:12px;line-height:1.5;color:var(--text-soft)}
.ppl:hover .who b{color:var(--brass-deep)}
@media(max-width:640px){.pplgrid{grid-template-columns:1fr}}

/* ── onward doors: the exit block, on the home page's door treatment ── */
.onward{padding-top:var(--s7)}
.ondoors{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.ondoors .door{position:relative;overflow:hidden;min-height:230px;display:flex;flex-direction:column;
 padding:var(--s4);color:#fff}
.ondoors .door .g,.ondoors .door .m{position:absolute;inset:0}
.ondoors .door .m{opacity:.4}
/* the home .door rule puts every child at z-index 3, including the two art
   layers, so the text has to sit above that, not below it */
.ondoors .door > *:not(.g):not(.m){position:relative;z-index:4}
.ondoors .door .g,.ondoors .door .m{z-index:1}
.ondoors .door .n{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--brass);margin-bottom:auto}
.ondoors .door h3{font-family:var(--fd);font-weight:600;font-size:26px;line-height:1.18;color:#fff;margin-top:var(--s5)}
.ondoors .door p{font-size:15px;color:rgba(255,255,255,.68);margin-top:var(--s2);max-width:30ch}
.ondoors .door .cnt{font-family:var(--fm);font-size:11.5px;color:var(--brass);margin-top:var(--s3)}
.ondoors .door .go{font-family:var(--fb);font-weight:500;font-size:13px;color:#fff;margin-top:var(--s3);
 padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.2)}
.ondoors .door:hover .go{color:var(--brass)}
.ondoors .door:hover .m{opacity:.62}

/* ── video poster: our art, our type, YouTube only after a click ── */
.player{margin-bottom:var(--s6)}
.ytposter{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;
 cursor:pointer;overflow:hidden;background:var(--ink-deep);text-align:left}
.ytposter .g{position:absolute;inset:0;background:linear-gradient(var(--a),
 color-mix(in srgb,var(--ink) var(--d),#000),
 color-mix(in srgb,var(--brass-dark) var(--w),var(--ink-deep)))}
.ytposter .m{position:absolute;inset:0;opacity:.4}
.ytposter .cap{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s5);z-index:2;
 display:flex;flex-direction:column;gap:var(--s2);max-width:34ch}
.ytposter .cap .k{font-family:var(--fb);font-weight:600;font-size:11.5px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--brass)}
.ytposter .cap .t{font-family:var(--fd);font-weight:600;font-size:26px;line-height:1.18;color:#fff}
.ytposter .play{position:absolute;left:var(--s5);top:var(--s5);z-index:2;width:56px;height:56px;
 display:flex;align-items:center;justify-content:center;color:var(--ink);
 background:var(--brass);transition:.18s}
.ytposter:hover .play{background:#fff;transform:scale(1.06)}
.ytposter:hover .m{opacity:.58}
.ytposter:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.player iframe{width:100%;aspect-ratio:16/9;height:auto;display:block;border:0;background:var(--ink)}

@media(max-width:900px){.ondoors{grid-template-columns:1fr}}
@media(max-width:640px){
  .ytposter .cap{left:var(--s3);right:var(--s3);bottom:var(--s3)}
  .ytposter .cap .t{font-size:19px}
  .ytposter .play{left:var(--s3);top:var(--s3);width:44px;height:44px}
}

/* When the people sit directly under the video they open the column, so no rule
   above them and the space belongs below, before the writing starts. */
.recppl.first{margin-top:0;padding-top:0;border-top:none;margin-bottom:var(--s6);
 padding-bottom:var(--s5);border-bottom:1px solid var(--line)}

/* ── hub pages: one subject, every format on it ────────────────────── */
.hubhead .ixstats dd.n{color:var(--brass)}
.hubterms{gap:var(--s1)}
.hubterms a{font-family:var(--fb);font-weight:500;font-size:14px;color:var(--text);
 border:1px solid var(--line);padding:8px 14px;line-height:1.3;background:var(--paper)}
.hubterms a:hover{border-color:var(--brass);color:var(--brass-deep)}
.s-tint .hubterms a{background:#fff}

/* A masthead only gives up its bottom padding when a filter bar closes it.
   Hubs, the glossary and events have no filters, so the standfirst was sitting
   flush against the bottom edge of the ink. */
.ixhead.s-dark.nofacets,.hubhead.s-dark{padding-bottom:var(--s7)}
.ixhead.s-dark.nofacets .ixtop,.hubhead .ixtop{align-items:flex-start}
.hubhead .ixstats{padding-bottom:0}

/* subjects index */
.subjlist{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 26px}
.subjlist a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
 padding:7px 0;border-bottom:1px solid transparent}
.subjlist .nm{font-family:var(--fb);font-weight:500;font-size:15px;color:var(--text)}
.subjlist .ct{font-family:var(--fm);font-size:11px;color:var(--text-soft)}
.subjlist a:hover{border-bottom-color:var(--brass)}
.subjlist a:hover .nm{color:var(--brass-deep)}
@media(max-width:900px){.subjlist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.subjlist{grid-template-columns:1fr}}

/* not found: the four ways in */
.e404grid{grid-template-columns:repeat(4,1fr)}
.e404grid .ixcard{border:1px solid var(--line);padding:var(--s4);min-height:150px;
 display:flex;flex-direction:column;justify-content:space-between}
.e404grid .ixcard:hover{border-color:var(--brass)}
.ixhead .srchform{margin-top:var(--s5);max-width:560px}
.s-dark .srchform input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:#fff}
.s-dark .srchform input::placeholder{color:rgba(255,255,255,.45)}
.s-dark .srchform button{background:var(--brass);color:var(--ink)}
.s-dark .srchform button:hover{background:#fff}
@media(max-width:900px){.e404grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.e404grid{grid-template-columns:1fr}}

/* ── hero photograph, sitting under the brand gradient ──────────────
   The picture is a ground, not the subject. It is desaturated and pulled
   down so the brass wash still reads as the brand rather than as a filter
   over a stock photo, and so white text keeps its contrast. */
.hero.haspic .layer{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero.haspic .layer img{width:100%;height:100%;object-fit:cover;display:block;
 filter:grayscale(.55) contrast(1.06) brightness(.62)}
/* The wash is heavy on the left, where the headline sits, and lifts across to the
   right so the room is actually visible. It was uniformly dark before, which
   flattened the photograph to the point that mirroring it made no difference. */
.hero.haspic .scrim{z-index:2;background:
  radial-gradient(64% 104% at 88% 6%,color-mix(in srgb,var(--brass-dark) 30%,transparent) 0%,transparent 62%),
  linear-gradient(96deg,
    color-mix(in srgb,var(--ink) 95%,transparent) 0%,
    color-mix(in srgb,var(--ink) 88%,transparent) 34%,
    color-mix(in srgb,var(--ink-deep) 52%,transparent) 64%,
    color-mix(in srgb,var(--ink-deep) 26%,transparent) 100%)}
/* the text column gets a little extra floor so it never fights the picture */
.hero.haspic .in::before{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(90deg,rgba(16,18,22,.42) 0%,rgba(16,18,22,.12) 46%,transparent 66%)}
.hero.haspic .in{position:relative;z-index:3}

/* The office photograph has its lit half on the left, which is exactly where the
   headline sits. Mirrored so the light falls on the right and the type keeps a
   dark, quiet ground. Nothing in the picture reads as text or as a logo, so
   there is nothing that mirroring makes wrong. */
/* The office photograph is mirrored in the file itself, so the light falls on the
   right and the headline keeps a dark ground. No CSS transform: transform and
   object-fit interact badly and made the result hard to reason about. */