/* =========================================================
   LOUIS FRAPPORTI — HOMEPAGE
   Light-first editorial. Cream / ink / bronze.
   One typeface (Archivo variable) across every role,
   hierarchy carried by width + weight, not by family.
   ========================================================= */

:root{
  --cream:#F5F2EC;
  --cream-2:#EDE8DE;
  --ink:#14120F;
  --ink-2:#4A453D;
  --bronze:#7F5D35;
  --rule:#D8D1C3;
  --rule-2:#E6E0D4;
  --cream-dim:#BFB6A6;   /* body copy on dark bands */
  --bronze-lt:#C9A46B;   /* eyebrows on dark bands */

  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --shell:1280px;
  --pad:clamp(20px,4.5vw,64px);
  --step:clamp(60px,8.4vw,118px);
  --navh:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--navh)}

/* the hidden attribute must beat any author display rule below */
[hidden]{display:none !important}

body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;
  font-weight:400;font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);
  padding:12px 20px;font-size:14px;z-index:200}
.skip:focus{left:16px;top:12px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  line-height:1.5;font-variation-settings:"wdth" 112;
  color:var(--bronze);margin:0 0 22px;max-width:30ch;
}
.eyebrow--inv{color:var(--bronze-lt)}
/* the alt band is darker: nudge the eyebrow so it reads the same as on cream */
.band--alt .eyebrow,.case--alt .case__tag{color:#74592A}

.h2{
  font-size:clamp(25px,3.4vw,39px);line-height:1.13;font-weight:600;
  font-variation-settings:"wdth" 88;letter-spacing:-.02em;
  margin:0 0 26px;max-width:17ch;
}
.h2--wide{max-width:24ch}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.txtlink{
  display:inline-block;font-size:14px;font-weight:600;letter-spacing:.02em;
  border-bottom:1px solid var(--bronze);padding-bottom:3px;color:var(--ink);
  transition:color .2s ease;
}
.txtlink span{color:var(--bronze);margin-left:6px}
.txtlink:hover{color:var(--bronze)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;
  background:var(--ink);color:var(--cream);
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;
  border:1px solid var(--ink);
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.btn:hover{background:var(--bronze);border-color:var(--bronze);color:#fff}
.btn--sm{min-height:38px;padding:0 16px;font-size:11px;letter-spacing:.12em;white-space:nowrap;flex:0 0 auto}
.btn--line{background:none;color:var(--ink)}
.btn--line:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn--inv{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn--inv:hover{background:var(--bronze);border-color:var(--bronze);color:#fff}
.btn--line-inv{background:none;color:var(--cream);border-color:rgba(245,242,236,.42)}
.btn--line-inv:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;height:var(--navh);
  background:rgba(245,242,236,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.nav.is-stuck{border-bottom-color:var(--rule)}
.nav__in{
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  height:100%;display:flex;align-items:center;gap:24px;flex-wrap:nowrap;
}
/* name appears only once the hero name has scrolled away */
.nav__home{flex:0 0 auto;overflow:hidden;white-space:nowrap;
  max-width:0;transition:max-width .35s ease}
.nav__home span{
  display:block;font-size:15px;font-weight:600;letter-spacing:-.012em;
  font-variation-settings:"wdth" 92;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease;
}
.nav.is-stuck .nav__home{max-width:220px}
.nav.is-stuck .nav__home span{opacity:1;transform:none}

.nav__links{display:flex;gap:18px;margin-left:auto;flex-wrap:nowrap}
.nav__links a{
  font-size:13px;font-weight:500;padding-block:6px;position:relative;color:var(--ink-2);
  white-space:nowrap;transition:color .2s ease;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__links a[aria-current]{color:var(--ink);font-weight:600}

.burger{
  display:none;width:44px;height:44px;margin-left:auto;
  background:none;border:0;cursor:pointer;padding:12px 9px;
}
.burger span{display:block;height:1.5px;background:var(--ink);transition:transform .3s ease,opacity .3s ease}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.mnav{
  position:fixed;inset:var(--navh) 0 0 0;z-index:99;
  background:var(--cream);padding:22px var(--pad) 40px;
  display:flex;flex-direction:column;gap:26px;overflow-y:auto;
}
.mnav nav{display:flex;flex-direction:column}
.mnav nav a{
  font-size:22px;font-weight:600;font-variation-settings:"wdth" 92;
  padding:15px 0;border-bottom:1px solid var(--rule-2);min-height:44px;
}
.mnav .btn{width:100%}

/* ---------- HERO ---------- */
.hero{padding-block:clamp(26px,3.4vw,48px) var(--step)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px,5vw,80px);align-items:start;
}
.cat{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  font-variation-settings:"wdth" 112;color:var(--bronze);margin:0 0 14px;
}
.cat b{color:var(--rule);font-weight:400;margin-inline:5px}
.cat span{white-space:nowrap}
.ident{
  font-size:13px;font-weight:500;color:var(--ink-2);margin:0 0 clamp(20px,2.6vw,32px);
  padding-bottom:clamp(18px,2.4vw,28px);border-bottom:1px solid var(--rule);
}
.ident span{color:var(--bronze);margin-inline:5px}
.ident{text-wrap:pretty}

.hero__name{
  margin:0 0 clamp(22px,3vw,34px);
  font-weight:600;font-variation-settings:"wdth" 84;
  font-size:clamp(45px,8.1vw,106px);line-height:.93;letter-spacing:-.04em;
}
.hero__name span{display:block}
.hero__name span:last-child{color:var(--bronze)}

.hero__prop{
  font-size:clamp(19.5px,2.2vw,26px);line-height:1.3;font-weight:600;
  font-variation-settings:"wdth" 92;letter-spacing:-.02em;
  margin:0 0 12px;max-width:20ch;
}
.hero__copy{font-size:16.5px;color:var(--ink-2);max-width:56ch;margin:0 0 clamp(20px,2.4vw,28px)}
/* gap between the two hero paragraphs only */
.hero__copy + .hero__copy{margin-top:-11px}
.hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:20px 0 0}

.hero__portrait{margin:0;position:relative}
.hero__portrait::before{
  content:"";position:absolute;left:-14px;bottom:-14px;width:58%;height:52%;
  border-left:1px solid var(--bronze);border-bottom:1px solid var(--bronze);
}
.hero__portrait img{width:100%;position:relative}
/* actions live beneath the portrait so they clear the fold */
.hero__aside{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hero__aside .hero__portrait{width:100%;max-width:396px}
.hero__aside .btn{flex:1 1 auto;justify-content:center}

/* ---------- credibility bar ---------- */
.cred{border-block:1px solid var(--rule);background:var(--cream-2)}
.cred ul{
  list-style:none;margin:0;padding:22px 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px 32px;
}
.cred li{
  font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--ink-2);
}

/* ---------- MODEL (dark band) ---------- */
.model{background:var(--ink);color:var(--cream);padding-block:var(--step)}
.model__h{
  font-size:clamp(27px,3.9vw,45px);line-height:1.1;font-weight:600;
  font-variation-settings:"wdth" 88;letter-spacing:-.028em;margin:0 0 26px;max-width:16ch;
}
.model__lede{font-size:clamp(16.5px,1.5vw,18px);color:var(--cream-dim);max-width:62ch;margin:0 0 clamp(44px,6vw,76px)}

.ladder{list-style:none;margin:0;padding:0;counter-reset:none}
.rung{
  border-top:1px solid rgba(245,242,236,.16);
  padding:clamp(22px,3vw,32px) 0;
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(14px,3vw,56px);align-items:start;
}
.rung:last-child{border-bottom:1px solid rgba(245,242,236,.16)}
.rung h3{
  margin:0;font-size:clamp(22px,2.9vw,34px);line-height:1.02;font-weight:600;
  font-variation-settings:"wdth" 84;letter-spacing:-.03em;color:var(--cream);
}
.rung p{margin:0;color:var(--cream-dim);max-width:48ch;font-size:16px}
/* progressive indent — the sequence advances */
.rung:nth-child(2){padding-left:clamp(0px,2.4vw,44px)}
.rung:nth-child(3){padding-left:clamp(0px,4.8vw,88px)}
.rung:nth-child(4){padding-left:clamp(0px,7.2vw,132px)}

/* ---------- value categories ---------- */
.value{padding-block:var(--step)}
.vlist{border-top:1px solid var(--rule)}
.vrow{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) 32px;
  gap:clamp(10px,3vw,48px);align-items:baseline;
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--rule);
  transition:padding-left .3s ease;
}
.vrow h3{
  margin:0;font-size:clamp(19.5px,2.2vw,25px);line-height:1.15;font-weight:600;
  font-variation-settings:"wdth" 88;letter-spacing:-.02em;
  transition:color .25s ease;
}
.vrow p{margin:0;color:var(--ink-2);max-width:52ch}
.vrow__go{color:var(--bronze);font-size:19px;opacity:0;transform:translateX(-6px);
  transition:opacity .3s ease,transform .3s ease;justify-self:end}
.vrow:hover{padding-left:clamp(0px,1.6vw,22px)}
.vrow:hover h3{color:var(--bronze)}
.vrow:hover .vrow__go{opacity:1;transform:none}

/* ---------- click-to-load video ---------- */
.proof__media{min-width:0}
.vid{
  position:relative;background:var(--ink);border:1px solid var(--rule);
  overflow:hidden;line-height:0;
}
.vid img{width:100%;transition:opacity .3s ease}
.vid video{width:100%;display:block;background:#000}
.vid__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;cursor:pointer;
  background:rgba(245,242,236,.94);border:1px solid var(--cream);
  display:grid;place-items:center;padding:0;
  transition:background .25s ease,transform .25s ease;
}
.vid__play svg{width:26px;height:26px;fill:var(--ink);margin-left:3px}
.vid__play:hover{background:var(--bronze);transform:translate(-50%,-50%) scale(1.06)}
.vid__play:hover svg{fill:#fff}
.vid:hover img{opacity:.9}
.vid__meta{
  position:absolute;left:14px;bottom:12px;line-height:1.4;
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--cream);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.vid__meta b{color:var(--bronze);margin-inline:5px;font-weight:400}
.vid.is-playing .vid__play,.vid.is-playing .vid__meta{display:none}

.proof__links{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* ---------- leadership proof ---------- */
.proof{padding-block:var(--step) var(--step)}
.proof__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,76px);align-items:center;
}

.proof__text p{color:var(--ink-2);max-width:52ch}

/* ---------- projects ---------- */
.projects{padding-block:var(--step);background:var(--cream-2);border-block:1px solid var(--rule)}
.proj{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(24px,4.5vw,72px);align-items:stretch;
  padding-block:clamp(34px,5vw,60px);border-top:1px solid var(--rule);
}
.proj:first-of-type{border-top:0;padding-top:clamp(10px,2vw,20px)}
.proj--flip .proj__img{order:2}

/* framed image: the frame stretches to the text height, giving the column
   portrait proportions while the photograph itself stays landscape */
.proj__img{
  margin:0;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(12px,1.5vw,18px);
  background:var(--cream);border:1px solid var(--rule);
}
.proj__img::after{
  content:"";position:absolute;left:-9px;bottom:-9px;width:44%;height:34%;
  border-left:1px solid var(--bronze);border-bottom:1px solid var(--bronze);
  pointer-events:none;
}
.proj__img img{width:100%}
.proj__fact{
  margin-top:auto;padding-top:clamp(16px,2vw,24px);
  display:flex;flex-direction:column;gap:5px;
}
.proj__fact-k{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--bronze);
}
.proj__fact-v{
  font-size:clamp(15px,1.5vw,17.5px);font-weight:600;line-height:1.25;
  font-variation-settings:"wdth" 92;letter-spacing:-.012em;color:var(--ink);
}
.proj__body{display:flex;flex-direction:column;justify-content:center}
.proj__tag{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--bronze);margin:0 0 12px;
}
.proj__body h3{
  margin:0 0 22px;font-size:clamp(20px,2.35vw,28px);line-height:1.17;font-weight:600;
  font-variation-settings:"wdth" 88;letter-spacing:-.02em;max-width:20ch;
}
.proj__fields{margin:0;display:grid;gap:15px}
.proj__fields dt{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--ink);margin-bottom:4px;
}
.proj__fields dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:58ch}
/* one standoff for every section CTA on the homepage */
.projects .btn--line{margin-top:clamp(28px,3.6vw,44px)}

/* ---------- media ---------- */
.media{padding-block:var(--step)}
.mgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,36px);
  margin-bottom:0;
}
.mitem .framed{margin-bottom:16px}
.mitem picture{display:block;width:100%}
.mitem img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:opacity .3s ease}
.mitem__k{
  display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--bronze);margin-bottom:8px;
}
.mitem__t{display:block;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:34ch}
.mitem:hover img{opacity:.86}
.mitem:hover .mitem__t{color:var(--ink)}

.mgrid__more{margin:clamp(28px,3.6vw,44px) 0 clamp(38px,5vw,60px)}
.ideas--news{margin-top:clamp(34px,4.4vw,54px);padding-top:clamp(26px,3.2vw,40px);border-top:1px solid var(--rule)}
/* one gap before the "All ..." link in either block */
.ideas > ul,
.ideas .press__list{margin-bottom:clamp(28px,3.6vw,44px)}
.ideas > .txtlink{display:inline-block;margin-top:24px}
.ideas--news li a{grid-template-columns:minmax(0,1fr) auto}
.ideas{border-top:1px solid var(--rule);padding-top:clamp(28px,3.4vw,44px)}
.ideas h3{
  margin:0 0 22px;font-size:clamp(18px,1.9vw,22px);font-weight:600;
  font-variation-settings:"wdth" 92;letter-spacing:-.012em;
}
.ideas__why{font-size:15px;color:var(--ink-2);max-width:56ch;margin:0 0 18px}
.ideas ul{list-style:none;margin:0 0 clamp(28px,3.6vw,44px);padding:0}
.ideas li{border-bottom:1px solid var(--rule-2)}
.ideas li a{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;
  padding:16px 0;min-height:44px;transition:padding-left .28s ease;
}
.ideas__t{font-size:16.5px;font-weight:500;max-width:62ch;transition:color .22s ease}
.ideas__m{font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--ink-2);white-space:nowrap}
.ideas__m b{color:var(--rule);font-weight:400;margin-inline:4px}
.ideas li a:hover{padding-left:12px}
.ideas li a:hover .ideas__t{color:var(--bronze)}

/* ---------- community ---------- */
.comm{padding-block:0 var(--step)}
.comm__head{max-width:62ch;margin-bottom:clamp(28px,4vw,48px)}
.comm__lede{color:var(--ink-2)}
.comm__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,28px)}
.comm__strip figure{margin:0}
.comm__strip img{width:100%}
.comm__strip figcaption{
  margin-top:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--ink-2);
}

/* ---------- conversion ---------- */
.close{background:var(--ink);color:var(--cream);padding-block:var(--step)}
.close__h{
  margin:0 0 22px;font-size:clamp(25px,3.7vw,43px);line-height:1.1;font-weight:600;
  font-variation-settings:"wdth" 88;letter-spacing:-.028em;max-width:19ch;
}
.close__p{color:var(--cream-dim);max-width:56ch;margin:0 0 clamp(28px,3.6vw,38px);font-size:17px}
.close__acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--cream-dim);padding-block:clamp(36px,4.5vw,56px) clamp(40px,5vw,64px);
  border-top:1px solid rgba(245,242,236,.14)}
.foot__grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(22px,3vw,52px) clamp(28px,4vw,64px)}
.foot__name{margin:0;color:var(--cream);font-size:17px;font-weight:600;
  font-variation-settings:"wdth" 92;letter-spacing:-.012em}
.foot__role{margin:2px 0 0;font-size:13.5px}
.foot__links{display:flex;flex-wrap:wrap;gap:10px 26px;align-content:start}
.foot__links a{font-size:13.5px;min-height:24px;transition:color .2s ease}
.foot__links a:hover{color:var(--cream)}
.foot__note{grid-column:1/-1;font-size:12.5px;line-height:1.6;max-width:96ch;
  padding-top:clamp(20px,2.6vw,30px);border-top:1px solid rgba(245,242,236,.14);margin:0}
.foot__copy{grid-column:1/-1;margin:0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:"wdth" 108}

/* =========================================================
   RESPONSIVE — designed, not compressed
   ========================================================= */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px}
  .rung{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
  .vrow{grid-template-columns:minmax(0,220px) minmax(0,1fr) 28px}
}

@media (min-width:901px){
  /* the mobile panel can never appear at desktop widths, whatever its state */
  .mnav{display:none !important}
}

@media (max-width:1040px){
  /* between here and the 900px handoff the name would push the nav to wrap */
  .nav.is-stuck .nav__home{max-width:0}
  .cred ul{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  /* every two-column band goes single-column on phones */
  .band__grid,.imgblock,.abhead{grid-template-columns:1fr;gap:30px}

  .nav__links{display:none}
  .nav .btn--sm{display:none}
  .burger{display:block}
  .nav__home{max-width:none}
  .nav__home span{opacity:1;transform:none}
  .cred ul{grid-template-columns:1fr}
  .hero__grid{grid-template-columns:1fr;gap:36px;align-items:start}
  .hero{padding-block:26px var(--step)}
  .hero__portrait{max-width:400px}
  .hero__acts{flex-direction:column;align-items:stretch}
  .hero__acts .btn{width:100%}
  /* Lou's brief puts the actions ahead of the portrait on small screens */
  .hero__aside{align-items:stretch}
  .hero__aside .hero__acts{order:1;margin-top:0}
    .hero__aside .hero__portrait{order:2}

  .rung{grid-template-columns:1fr;gap:10px}
  .rung:nth-child(2),.rung:nth-child(3),.rung:nth-child(4){padding-left:0}
  .rung h3{font-size:26px}

  .vrow{grid-template-columns:1fr;gap:8px;padding-right:0}
  .vrow__go{display:none}
  .vrow:hover{padding-left:0}

  .proof__grid{grid-template-columns:1fr;gap:28px}
  .proj{grid-template-columns:1fr;gap:22px}
  .proj--flip .proj__img{order:0}
  .proj__img{padding:12px}
  .proj__img::after{left:-6px;bottom:-6px}
  .proj__fact{padding-top:16px}
  .mgrid{grid-template-columns:1fr;gap:34px}
  .mitem__t{max-width:none}
  .comm__strip{grid-template-columns:1fr;gap:22px}
  .foot__grid{grid-template-columns:1fr}
  .close__acts{flex-direction:column;align-items:stretch}
  .close__acts .btn{width:100%}
}

@media (max-width:560px){
  body{font-size:16.5px}
  .cred ul{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .cred li{font-size:10.5px}
  .ideas li a{grid-template-columns:1fr;gap:6px}
  .ideas__fig{width:100%;max-width:220px}
  .ideas li a:has(.ideas__fig) .ideas__m{grid-column:1}
  .ideas__m{white-space:normal;text-align:left}
  .hero__portrait{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* =========================================================
   INTERIOR PAGES — shared page header + writing list
   (same stylesheet as the homepage on purpose: one system,
   so pages cannot drift into different type or spacing)
   ========================================================= */

.phead{padding-block:clamp(38px,5vw,66px) clamp(30px,4vw,46px);border-bottom:1px solid var(--rule)}
.phead__h{
  font-size:clamp(34px,5.4vw,64px);line-height:1.06;font-weight:600;
  font-variation-settings:"wdth" 84;letter-spacing:-.03em;
  margin:0 0 22px;max-width:16ch;
}
.phead__lede{font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:var(--ink-2);max-width:62ch;margin:0 0 24px}

/* ---------- theme filters ---------- */
.ins{padding-block:clamp(28px,4vw,48px) var(--step)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3.4vw,42px)}
.filt{
  min-height:38px;padding:0 15px;cursor:pointer;
  background:none;border:1px solid var(--rule);color:var(--ink-2);
  font-family:inherit;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.filt:hover{border-color:var(--ink);color:var(--ink)}
.filt.is-on{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ---------- writing list ---------- */
.wlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.wpost{border-bottom:1px solid var(--rule)}
.wpost[hidden]{display:none}
.wpost a{
  position:relative;display:block;
  padding:clamp(22px,2.8vw,32px) 44px clamp(22px,2.8vw,32px) 0;
  transition:padding-left .3s ease;
}
.wpost__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin-bottom:10px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--ink-2);
}
.wpost__meta b{color:var(--rule);font-weight:400;margin-inline:6px}
.wpost__theme{color:var(--bronze)}
.wpost__t{
  display:block;font-size:clamp(19px,2.2vw,26px);line-height:1.2;font-weight:600;
  font-variation-settings:"wdth" 88;letter-spacing:-.02em;margin-bottom:10px;
  max-width:34ch;transition:color .22s ease;
}
.wpost__d{display:block;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:66ch}
.wpost__go{
  position:absolute;right:6px;top:clamp(24px,2.9vw,34px);
  color:var(--bronze);font-size:16px;opacity:0;transform:translate(-5px,4px);
  transition:opacity .3s ease,transform .3s ease;
}
.wpost a:hover{padding-left:14px}
.wpost a:hover .wpost__t{color:var(--bronze)}
.wpost a:hover .wpost__go{opacity:1;transform:none}

@media (max-width:560px){
  .wpost a{padding-right:0}
  .wpost__go{display:none}
  .wpost a:hover{padding-left:0}
  .filt{font-size:10.5px;padding:0 12px}
}

/* =========================================================
   INTERIOR PAGE COMPONENTS
   These reuse the approved homepage patterns wherever one
   exists: ruled rows (.vrow), the cream panel with hairline
   border and bronze corner rule (.proj__img), the dark band
   ladder (.rung), and .txtlink for links. No new boxes.
   ========================================================= */

.band{padding-block:var(--step)}
.band--alt{background:var(--cream-2);border-block:1px solid var(--rule)}
.band + .band:not(.band--alt){border-top:1px solid var(--rule)}
.band__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(26px,4.5vw,72px)}
.band__lead .h2{margin-bottom:0}
.band__body p{color:var(--ink-2);max-width:60ch}

/* jump nav — identical treatment to the Insights filter chips */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.jump a{
  min-height:38px;display:inline-flex;align-items:center;padding:0 15px;
  background:none;border:1px solid var(--rule);color:var(--ink-2);
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.jump a:hover{border-color:var(--ink);color:var(--ink)}

/* about header — same bronze corner rule as the approved hero portrait */
.abhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr);gap:clamp(28px,5vw,72px);align-items:end}
.abhead__img{margin:0;position:relative}
.abhead__img::before{content:"";position:absolute;left:-14px;bottom:-14px;width:58%;height:52%;
  border-left:1px solid var(--bronze);border-bottom:1px solid var(--bronze)}
.abhead__img img{width:100%;position:relative}

/* fact bands — same band treatment as the approved credibility strip */
.facts{border-bottom:1px solid var(--rule);background:var(--cream-2)}
.facts dl{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 32px;padding:22px 0}
.facts dt,.factband dt{
  font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--ink-2);margin-bottom:6px;
}
.facts dd,.factband dd{
  margin:0;font-size:clamp(15px,1.6vw,17px);font-weight:600;
  font-variation-settings:"wdth" 92;letter-spacing:-.012em;line-height:1.25;
}
.factband{margin:0 0 clamp(28px,3.4vw,44px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px 28px;padding:22px 0;border-block:1px solid var(--rule)}

/* three-column prose — same type as the approved media grid */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px);
  border-top:1px solid var(--rule);padding-top:clamp(24px,3vw,38px)}
.trio__h{margin:0 0 12px;font-size:clamp(17px,1.8vw,20px);font-weight:600;
  font-variation-settings:"wdth" 92;letter-spacing:-.012em}
.trio p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55}

/* static ruled rows — the approved .vrow, without the link affordance */
.vlist--flat{border-top:1px solid var(--rule)}
.vrow--static{cursor:default}
.vrow--static:hover{padding-left:0}
.vrow--static:hover h3{color:var(--ink)}

/* image + text block — same proportions as the approved leadership section */
.imgblock{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.imgblock--flip .imgblock__img{order:2}
.imgblock__img{margin:0}
.imgblock__img img{width:100%}
.imgblock__img--portrait{max-width:400px}
.imgblock__body p{color:var(--ink-2);max-width:56ch}
.imgblock__body .hero__acts{margin-top:26px;margin-bottom:22px}

/* links in lists — the approved .txtlink, never pills */
.profiles,.caselinks{list-style:none;margin:clamp(20px,2.6vw,30px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:14px 34px}
.profiles a,.caselinks a{
  display:inline-block;font-size:14px;font-weight:600;letter-spacing:.02em;
  border-bottom:1px solid var(--bronze);padding-bottom:3px;color:var(--ink);
  min-height:34px;transition:color .2s ease;
}
.profiles a span,.caselinks a span{color:var(--bronze);margin-left:6px}
.profiles a:hover,.caselinks a:hover{color:var(--bronze)}

/* project case studies */
.case{padding-block:var(--step);border-top:1px solid var(--rule)}
.case--alt{background:var(--cream-2)}
.case__img{margin:0 0 clamp(26px,3.4vw,44px);max-width:720px}
.case__img picture{display:block;width:100%}
.case__img img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.case__tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--bronze);margin:0 0 12px}
.case__head{margin-bottom:clamp(24px,3vw,36px)}
.case__body{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,42px)}

/* platform module — the approved project frame: cream panel, hairline, bronze corner */
.platform{position:relative;margin-top:clamp(30px,4vw,52px);
  border:1px solid var(--rule);background:var(--cream);padding:clamp(24px,3vw,36px)}
.platform::after{content:"";position:absolute;left:-9px;bottom:-9px;width:26%;height:30%;
  border-left:1px solid var(--bronze);border-bottom:1px solid var(--bronze);pointer-events:none}
.platform__h{margin:0 0 22px;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-variation-settings:"wdth" 112;color:var(--bronze)}
.platform__grid{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px clamp(20px,3vw,40px)}
.platform__grid dt{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--ink);margin-bottom:5px}
.platform__grid dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* upcoming talk — same frame treatment as the project panel */
.upcoming{position:relative;margin:26px 0;padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--rule);background:var(--cream)}
.upcoming::after{content:"";position:absolute;left:-8px;bottom:-8px;width:30%;height:34%;
  border-left:1px solid var(--bronze);border-bottom:1px solid var(--bronze);pointer-events:none}
.upcoming__k{margin:0 0 10px;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-variation-settings:"wdth" 108;color:var(--bronze)}
.upcoming__t{margin:0 0 8px;font-size:clamp(17px,1.9vw,21px);font-weight:600;
  font-variation-settings:"wdth" 92;letter-spacing:-.012em;line-height:1.25;color:var(--ink)}
.upcoming__m{margin:0 0 12px;font-size:13px;color:var(--ink-2)}
.upcoming__m b{color:var(--rule);font-weight:400;margin-inline:5px}
.upcoming__d{margin:0;font-size:14.5px;color:var(--ink-2)}
.mav{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.mav__logo{width:200px;height:auto}

/* contact — same ruled-row behaviour as the approved Ideas list */
.bigcontact{display:block;padding:18px 0;border-bottom:1px solid var(--rule);transition:padding-left .28s ease}
.contact__primary .bigcontact:first-of-type{border-top:1px solid var(--rule)}
.bigcontact__k{display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-variation-settings:"wdth" 108;color:var(--ink-2);margin-bottom:7px}
.bigcontact__v{display:block;font-size:clamp(17px,2vw,23px);font-weight:600;
  font-variation-settings:"wdth" 92;letter-spacing:-.02em;line-height:1.25;
  overflow-wrap:anywhere;transition:color .25s ease}
.bigcontact:hover{padding-left:12px}
.bigcontact:hover .bigcontact__v{color:var(--bronze)}
.contact__where{margin-top:26px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}

/* small print */
.note{padding-block:clamp(30px,3.6vw,48px);border-top:1px solid var(--rule);background:var(--cream-2)}
.note p{margin:0;font-size:12.5px;line-height:1.65;color:var(--ink-2);max-width:96ch}
.note-inline{margin-top:20px;font-size:12.5px;line-height:1.6;color:var(--ink-2);max-width:70ch}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .platform__grid{grid-template-columns:repeat(2,1fr)}
  .factband{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .imgblock--flip .imgblock__img{order:0}
  .abhead__img{max-width:340px}
  .trio,.case__body{grid-template-columns:1fr}
  .facts dl{grid-template-columns:repeat(2,1fr)}
  .platform__grid{grid-template-columns:1fr}
  .factband{grid-template-columns:repeat(2,1fr)}
  .imgblock__img--portrait{max-width:320px}
}
@media (max-width:560px){
  .facts dl,.factband{grid-template-columns:1fr}
  .jump a{font-size:10.5px;padding:0 12px}
  .bigcontact:hover{padding-left:0}
}

/* contact: details beside portrait, pathways full width below */
.contact__paths{margin-top:clamp(44px,6vw,84px)}

/* =========================================================
   PARTIAL FRAME
   The bronze corner rule used on the approved hero portrait,
   applied consistently to every photograph on the site.
   Offsets sit inside the page gutter and grid gaps, so it
   never overflows a container.
   ========================================================= */
.framed{position:relative;display:block}
/* .proj__img distributes its children; never let .framed flatten it */
.proj__img.framed{display:flex}
.framed > img,.framed > svg,.framed > .vid,.framed > picture{position:relative;display:block;width:100%}
.framed::before{
  content:"";position:absolute;left:-10px;bottom:-10px;
  width:46%;height:40%;
  border-left:1px solid var(--bronze);border-bottom:1px solid var(--bronze);
  pointer-events:none;
}
@media (max-width:560px){.framed::before{left:-6px;bottom:-6px}}

/* the hero, about and contact portraits already carried this rule —
   fold them into the same geometry so all four match exactly */
.hero__portrait::before,.abhead__img::before,
/* insights: artwork beside each entry */
.wpost a{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start}
.wpost__fig{width:100%}
.wpost__fig picture,.wpost__fig img{display:block;width:100%;height:auto}
.wpost__txt{display:block;min-width:0}
.wpost__go{top:clamp(24px,2.9vw,34px)}
@media (max-width:700px){
  .wpost a{grid-template-columns:1fr;gap:16px}
  .wpost__fig{max-width:280px}
}

/* inline link inside prose — matches .txtlink without the block behaviour */
a.inlink{border-bottom:1px solid var(--rule);transition:color .2s ease,border-color .2s ease}
a.inlink:hover{color:var(--bronze);border-color:var(--bronze)}

/* homepage Ideas rows: thumbnail, title, meta — same artwork as Insights */
.ideas li a{grid-template-columns:120px minmax(0,1fr) auto;display:grid;align-items:center;gap:8px 22px}
.ideas__fig{width:120px}
.ideas__fig picture{display:block;width:100%}
.ideas__fig img{width:100%;aspect-ratio:8/5;object-fit:cover;display:block}
.ideas li a:hover{padding-left:8px}
@media (max-width:700px){
  /* only rows that actually carry a thumbnail keep the image column */
  .ideas li a:has(.ideas__fig){grid-template-columns:88px minmax(0,1fr);gap:6px 16px}
  .ideas li a:has(.ideas__fig) .ideas__m{grid-column:2}
  .ideas__fig{width:88px}
  /* rows without a thumbnail stack: title, then meta */
  .ideas li a:not(:has(.ideas__fig)){grid-template-columns:1fr;gap:6px}
  .ideas--nofig li a,.ideas--news li a{grid-template-columns:1fr;gap:6px}
  .ideas__m{white-space:normal;text-align:left}
}

/* episode list — same ruled rows as the homepage Ideas block, without artwork */
.ideas--nofig{border-top:0}
.ideas--nofig li a{grid-template-columns:minmax(0,1fr) auto}

/* podcast cover + numbered episode list */
.imgblock__img--cover{max-width:300px}
.ideas--eps{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--rule)}
.ideas--eps:not(.ideas--nofig) li a{grid-template-columns:120px minmax(0,1fr) auto}
@media (max-width:700px){
  .ideas--eps:not(.ideas--nofig) li a{grid-template-columns:88px minmax(0,1fr)}
  .ideas--eps.ideas--nofig li a{grid-template-columns:1fr}
}
.epno{
  display:block;margin-bottom:6px;font-size:10.5px;font-weight:600;color:var(--bronze);
  text-transform:uppercase;letter-spacing:.16em;font-variation-settings:"wdth" 108;
}
.eplinks{display:flex;flex-wrap:wrap;gap:14px 30px}

/* =========================================================
   DISCUSS A MANDATE — dialog
   Same tokens as the rest of the site: cream field, hairline
   rules, bronze accents, ruled contact rows.
   ========================================================= */
.mandate{
  width:min(680px,calc(100vw - 32px));max-height:min(86vh,900px);
  padding:0;border:1px solid var(--rule);background:var(--cream);color:var(--ink);
  box-shadow:0 24px 60px rgba(20,18,15,.18);
  /* the dialog element itself must never scroll — only .mandate__in does.
     Browsers give <dialog> a default overflow:auto, which produces a second,
     near-empty scrollbar nested around the real one. */
  overflow:hidden;
}
.mandate::backdrop{background:rgba(20,18,15,.5)}
.mandate__in{padding:clamp(26px,4vw,44px);overflow-y:auto;max-height:inherit;position:relative}
.mandate__x{
  position:absolute;top:10px;right:10px;width:44px;height:44px;
  background:none;border:0;cursor:pointer;font-size:26px;line-height:1;
  color:var(--ink-2);transition:color .2s ease;
}
.mandate__x:hover{color:var(--bronze)}
.mandate__h{
  margin:0 0 14px;font-size:clamp(24px,3.2vw,34px);line-height:1.14;font-weight:600;
  font-variation-settings:"wdth" 88;letter-spacing:-.02em;max-width:18ch;
}
.mandate__lede{margin:0 0 clamp(22px,3vw,30px);color:var(--ink-2);max-width:52ch}
.mandate__direct{border-top:1px solid var(--rule)}
.mandate__direct .bigcontact:last-of-type{border-bottom:1px solid var(--rule)}
.mandate__direct .bigcontact__k b{color:var(--rule);font-weight:400;margin-inline:5px}
.mandate__sub{
  margin:clamp(24px,3vw,32px) 0 4px;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-variation-settings:"wdth" 112;color:var(--bronze);
}
.mandate__routes{margin:0;border-top:1px solid var(--rule)}
.mandate__routes > div{padding:14px 0;border-bottom:1px solid var(--rule-2)}
.mandate__routes dt{
  font-size:15px;font-weight:600;font-variation-settings:"wdth" 92;
  letter-spacing:-.012em;margin-bottom:4px;
}
.mandate__routes dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.mandate__note{
  margin:clamp(22px,3vw,28px) 0 22px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:12px;line-height:1.6;color:var(--ink-2);
}
@media (max-width:560px){
  .mandate{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-left:0;border-right:0;border-bottom:0}
  .mandate__routes dt{font-size:14.5px}
}
@media (prefers-reduced-motion:no-preference){
  .mandate[open]{animation:mandateIn .28s cubic-bezier(.22,.61,.36,1)}
  @keyframes mandateIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

.band__intro{color:var(--ink-2);max-width:64ch;margin:0 0 clamp(24px,3vw,34px)}

/* ---------- Lou in the News: outlet plate + framed row ---------- */
.press__list{border-top:1px solid var(--rule)}
.press{
  position:relative;display:grid;
  grid-template-columns:minmax(0,140px) minmax(0,1fr) minmax(0,124px);
  gap:6px clamp(18px,2.4vw,34px);align-items:start;
  padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--rule);
  transition:padding-left .32s cubic-bezier(.22,.61,.36,1),background .32s ease;
}
.press::before{
  content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;background:var(--bronze);
  transform:scaleY(0);transform-origin:top;transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
/* the site's corner rule, carried onto every press row */
.press::after{
  content:"";position:absolute;left:-8px;bottom:-8px;width:34px;height:22px;
  border-left:1px solid var(--bronze);border-bottom:1px solid var(--bronze);
  opacity:0;transition:opacity .38s ease;pointer-events:none;
}
.press:hover::after{opacity:1}
.press:hover{padding-left:18px;background:var(--cream-2)}
.press:hover::before{transform:scaleY(1)}
.press__plate{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:58px;padding:10px 14px;
  border:1px solid var(--rule);background:var(--cream);
  transition:border-color .32s ease,color .32s ease,background .32s ease;
}
.press__plate::before,.press__plate::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none;
  border-color:var(--bronze);opacity:0;transition:opacity .32s ease;
}
.press__plate::before{top:3px;left:3px;border-left:1px solid;border-top:1px solid}
.press__plate::after{bottom:3px;right:3px;border-right:1px solid;border-bottom:1px solid}
.press:hover .press__plate::before,.press:hover .press__plate::after{opacity:1}
.press__plate b{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  font-variation-settings:"wdth" 106;color:var(--ink);text-align:center;line-height:1.3;
}
.press:hover .press__plate{border-color:var(--bronze)}
.press:hover .press__plate b{color:var(--bronze)}
.press__t{
  display:block;font-size:clamp(16px,1.7vw,19px);font-weight:600;
  font-variation-settings:"wdth" 90;letter-spacing:-.018em;line-height:1.28;
  margin-bottom:7px;transition:color .28s ease;
}
.press:hover .press__t{color:var(--bronze)}
.press__d{display:block;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.press__meta{display:flex;flex-direction:column;gap:5px;text-align:right;padding-top:3px}
.press__meta em{
  font-style:normal;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:"wdth" 108;color:var(--bronze);
}
.press__meta i{font-style:normal;font-size:12px;color:var(--ink-2)}

/* episode numbers read as EP 01 */
.epno i{font-style:normal;letter-spacing:.16em;opacity:.8;margin-right:6px}

.press__list--sm .press{grid-template-columns:minmax(0,120px) minmax(0,1fr) minmax(0,86px);padding-block:14px}
.press__list--sm .press__plate{min-height:42px}
.press__list--sm .press__t{font-size:15.5px;margin-bottom:0}

@media (max-width:860px){
  .press,.press__list--sm .press{grid-template-columns:1fr;gap:10px}
  .press__plate{justify-self:start;min-height:40px}
  .press__meta{flex-direction:row;gap:14px;text-align:left}
  .press:hover{padding-left:12px}
}

/* ---------- Lou in the News: featured item with photograph ---------- */
.newslead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,48px);align-items:center;
  margin-bottom:clamp(28px,3.6vw,44px);padding-bottom:clamp(26px,3.4vw,40px);
  border-bottom:1px solid var(--rule)}
.newslead__img{margin:0}
.newslead__img img{width:100%}
.newslead__k{margin:0 0 10px;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-variation-settings:"wdth" 108;color:var(--bronze)}
.newslead__t{margin:0 0 12px;font-size:clamp(20px,2.4vw,28px);font-weight:600;
  font-variation-settings:"wdth" 88;letter-spacing:-.022em;line-height:1.16}
.newslead__body p:last-child{margin:0;color:var(--ink-2);max-width:52ch}
.upcoming--next{margin-top:14px}
@media (max-width:860px){.newslead{grid-template-columns:1fr;gap:20px}}

/* ---------- footer social icons ---------- */
.foot__social{grid-column:1/-1;list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.foot__social li{list-style:none;display:block;margin:0;padding:0}
.foot__social li::marker{content:""}
.foot__social a{
  display:grid;place-items:center;
  flex:0 0 auto;width:44px;height:44px;min-width:44px;max-width:44px;
  border:1px solid rgba(245,242,236,.22);color:var(--cream-dim);
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.foot__social svg{
  display:block;width:17px;height:17px;min-width:17px;max-width:17px;
  flex:0 0 auto;fill:currentColor;
}
.foot__social a:hover{color:var(--ink);background:var(--bronze-lt);border-color:var(--bronze-lt)}
@media (max-width:900px){.foot__social{margin-bottom:4px}}

@media (max-width:860px){
    }

.none{margin-top:20px;color:var(--ink-2)}


/* =========================================================
   MOBILE HARDENING
   Desktop rules are untouched: everything here is inside a
   max-width query, so nothing above 900px changes.
   ========================================================= */
@media (max-width:900px){
  /* nothing may exceed the viewport */
  .shell,.wrap{overflow-x:clip}
  img,picture,figure,table{max-width:100%}
  /* prose that had a narrow measure on desktop should use the full column */
  .band__body p,.imgblock__body p,.case__field p,.trio p,.cols p,
  .row2__v,.vrow p,.press__d,.wpost__d,.mitem__t,.upcoming__d{max-width:none}
  .h2,.h2--wide,.head,.mega,.phead__h,.model__h,.close__h{max-width:20ch}
  /* key/value rows stack rather than squeezing the value */
  .rec > div,.factband,.facts dl,.platform__grid{grid-template-columns:1fr;gap:6px}
  .factband > div,.facts dl > div{padding-block:4px}
  /* press rows: plate above, text below, meta inline */
  .press{grid-template-columns:1fr;gap:8px;padding-block:18px}
  .press__plate{justify-self:start;min-height:38px;padding:6px 12px}
  .press__meta{flex-direction:row;gap:12px;text-align:left}
  .press:hover{padding-left:10px}
  /* episode rows never split the title into a narrow column */
  .ideas--eps li a,.ideas--nofig li a,.ideas--news li a{grid-template-columns:1fr;gap:6px}
  .epno{margin-bottom:4px}
  /* image blocks centre rather than stretch oddly */
  .imgblock__img,.fig{max-width:420px}
  .abhead__img{max-width:320px}
}

@media (max-width:560px){
  .press__meta{flex-wrap:wrap;gap:6px 12px}
  .imgblock__img,.fig,.abhead__img{max-width:none}
  .jump{gap:6px}
  .tags li{font-size:12px;padding:8px 12px}
}