/* ═══════════════════════════════════════════════════════════════
   Carmello & John × Dacorum Heritage — proposal
   Palette and display face taken from Dacorum Heritage's own
   identity assets. Bree Serif and Atkinson Hyperlegible are both
   SIL OFL and self hosted; nothing here loads from Adobe Fonts.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Bree Serif";
  src:url("../fonts/bree-serif-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Atkinson";
  src:url("../fonts/atkinson-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Atkinson";
  src:url("../fonts/atkinson-700-latin.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  color-scheme: dark;

  /* Dacorum's own marks */
  --sage:#74BEA7;          /* DHT-logo-colour.svg */
  --mint:#71DFC1;          /* DHT_timelines-bottom.svg */
  --ink:#161615;           /* DHT-logo-colour.svg */

  --deep:#0E100F;          /* the store, one step below their black */
  --deep-2:#141817;
  --light:#E7EFEA;         /* museum wall, pulled toward their sage */
  --light-2:#DDE4DF;
  --sage-pale:#D3E6DC;     /* sage at page scale, for banded sections */
  --on-dark:#EDF0EC;
  --on-dark-dim:#9DB1A8;
  --on-light:#161615;
  --on-light-dim:#4E5A55;
  --deep-sage:#35685A;   /* meets 4.5:1 on --light at label sizes */

  --display:"Bree Serif", Georgia, serif;
  --text:"Atkinson", ui-sans-serif, system-ui, sans-serif;

  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --stack: clamp(4.5rem, 11vw, 11rem);
  --measure: 68ch;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--deep);
  color:var(--on-dark);
  font-family:var(--text);
  font-size:clamp(1rem,.94rem + .3vw,1.12rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--mint);color:var(--ink);padding:.9rem 1.4rem;
  font-weight:700;text-decoration:none;
}
.skip:focus{left:.75rem;top:.75rem}

:focus-visible{outline:2px solid var(--mint);outline-offset:4px;border-radius:2px}

.wrap{width:min(100% - (var(--gut) * 2), 1160px);margin-inline:auto}

/* The ring chain owns a reserved column on the right. Reserving it as
   padding on the sections themselves keeps every background full bleed while
   the content, hero and close all recentre inside what is left. */
:root{--reserve:0px}
@media (min-width:1100px){
  :root{--reserve:clamp(230px,25vw,430px)}
}
.act,.foot{padding-inline-end:var(--reserve)}

/* ── the concentric device ───────────────────────────────────
   Their brand ornament, read as an interlocking chain rather than one
   bullseye. It lives in the right margin and bleeds off the edge, so no
   line of copy ever crosses a stroke. The content column is capped to
   keep that margin clear. */
.rings{
  position:fixed;top:0;right:0;z-index:4;   /* over both grounds, under the chrome */
  width:clamp(240px,26vw,470px);height:100vh;
  pointer-events:none;overflow:hidden;
}
.rings svg{width:100%;height:100%;display:block}
.rings__ghost circle{
  fill:none;stroke:var(--sage);stroke-width:11;opacity:.11;
}
.ring{
  fill:none;
  stroke:var(--sage);
  stroke-width:11;
  stroke-linecap:round;
  opacity:.3;
  stroke-dasharray:1;
  stroke-dashoffset:.06;
}
/* Off the copy entirely on a phone: only the left shoulders of the chain
   show at the very edge. */
/* Below the breakpoint there is no margin to give the chain, and a stroke
   crossing a line of body copy is worse than no ornament at all. The small
   concentric glyph beside each ring label carries the motif instead. */
@media (max-width:1100px){
  .rings{display:none}
}

/* ── masthead ────────────────────────────────────────────────── */
.mast{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:clamp(1.1rem,2.6vw,2rem) var(--gut);
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark-dim);
}
.mast__marque{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--on-dark);white-space:nowrap}
.mast__x{display:inline-flex;width:1.05em;height:1.05em;flex:none}
.mast__x svg{width:100%;height:100%;fill:none;stroke:var(--sage);stroke-width:1.4}
.mast__meta{white-space:nowrap}
@media (max-width:720px){
  .mast{font-size:.6rem;letter-spacing:.1em}
  .mast__meta{display:none}
}

/* ── the pinned reply ────────────────────────────────────────── */
/* A phone reads this straight through and lands on the real invitation, so
   the floating shortcut is desktop only, where the right column is usually
   free. */
.cta-pin{display:none}
@media (min-width:1000px){.cta-pin{display:inline-flex}}
.cta-pin{
  position:fixed;right:var(--gut);bottom:clamp(1rem,3vw,2rem);z-index:30;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.72rem 1.15rem;border-radius:100px;
  background:var(--mint);color:var(--ink);
  font-size:.82rem;font-weight:700;letter-spacing:.02em;text-decoration:none;
  box-shadow:0 6px 22px -6px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.4);
  transition:transform .45s var(--ease), background-color .3s ease;
}
.cta-pin:hover{transform:translateY(-3px);background:#8DEBD2}
.cta-pin__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ink);flex:none}

/* ── shared type ─────────────────────────────────────────────── */
.h-display{
  font-family:var(--display);
  font-size:clamp(2rem,1.15rem + 3.9vw,4rem);
  line-height:1.06;
  letter-spacing:-.018em;
}
.h-display--lg{font-size:clamp(2.3rem,1.1rem + 5.2vw,5.1rem)}

.lede{
  font-size:clamp(1.12rem,1rem + .62vw,1.44rem);
  line-height:1.5;
  color:var(--on-dark);
  max-width:34ch;
  margin-top:1.6rem;
}
.act--light .lede,.act--turn .lede{color:var(--on-light)}

.lede + .prose{margin-top:clamp(1.5rem,3vw,2.1rem)}

.prose{max-width:var(--measure);display:grid;gap:1.15rem;color:var(--on-dark-dim)}
.prose p{max-width:var(--measure)}
.prose strong{color:var(--on-dark);font-weight:700}
.prose__turn{color:var(--on-dark)}
.act--light .prose,.act--turn .prose{color:var(--on-light-dim)}
.act--light .prose strong,.act--turn .prose strong,
.act--light .prose__turn,.act--turn .prose__turn{color:var(--on-light)}

.act{position:relative;z-index:1;padding-block:var(--stack)}
.act--light{background:var(--light);color:var(--on-light)}

/* The one turn in the page: the store comes into the light at the media day.
   The gradient lives in a band of its own above the content, so no text ever
   sits on the middle of the ramp. */
.act--turn{
  background:var(--light);
  color:var(--on-light);
  padding-top:calc(clamp(220px,34vh,430px) + var(--stack));
}
.act--turn::before{
  content:"";
  position:absolute;top:0;left:0;right:0;
  height:clamp(220px,34vh,430px);
  background:linear-gradient(180deg,
    var(--deep) 0%, #141C1A 20%, #2A3B35 44%,
    #6E837A 68%, #BCC9C2 87%, var(--light) 100%);
  pointer-events:none;
}

/* ═══ HERO ═══
   Default is a single screen, which is what no-JS and reduced-motion get.
   JS adds .hero--scroll to make the stage sticky inside a tall section, so
   the sentence turns under the reader's own thumb instead of on a timer. */
.hero{position:relative;z-index:1;min-height:100svh}
.hero__sticky{
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  align-items:center;
  padding:clamp(6rem,14vh,9rem) calc(var(--gut) + var(--reserve)) clamp(2rem,6vh,3.5rem) var(--gut);
  text-align:center;
}
.hero--scroll{height:280svh}
.hero--scroll .hero__sticky{position:sticky;top:0;height:100svh}
.hero__stage{display:grid;justify-items:center;align-content:center;gap:clamp(1.6rem,4vh,2.6rem)}

.tick{display:grid;justify-items:center}
.tick__line{
  grid-area:1/1;
  font-family:var(--display);
  font-size:clamp(1.95rem,1rem + 5.4vw,5.15rem);
  line-height:1.08;
  letter-spacing:-.022em;
  max-width:24ch;
}
.tick__line--b{opacity:0;visibility:hidden}
.w{display:inline-block;will-change:transform,opacity,filter}
.w--pivot{color:var(--mint)}

.hero__attrib{display:grid;justify-items:center;min-height:3.2em}
.attrib{
  grid-area:1/1;
  font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-dark-dim);max-width:48ch;line-height:1.7;text-wrap:balance;
}
.attrib--b{opacity:0;visibility:hidden}

.hero__scroll{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-dim);
}
.hero__scroll span{position:relative;display:inline-block;padding-bottom:2.6rem}
.hero__scroll span::after{
  content:"";position:absolute;left:50%;bottom:0;width:1px;height:2rem;
  background:linear-gradient(180deg,var(--sage),transparent);
  transform-origin:top;
  animation-name:drop;animation-duration:2.4s;animation-timing-function:var(--ease);
  animation-iteration-count:infinite;
}
@keyframes drop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ═══ CENTRE ═══ */
.centre__head{margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.centre__body{
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .centre__body{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
}

.plate{margin:0;position:relative}
.plate img{
  width:100%;
  border-radius:2px;
  box-shadow:0 26px 54px -24px rgba(0,0,0,.75), 0 4px 14px -6px rgba(0,0,0,.45);
}
.plate figcaption{
  margin-top:.95rem;
  font-size:.82rem;line-height:1.6;color:var(--on-dark-dim);
  max-width:46ch;
  border-top:1px solid rgba(116,190,167,.28);
  padding-top:.7rem;
}
.act--light .plate figcaption,.act--turn .plate figcaption{
  color:var(--on-light-dim);border-top-color:rgba(22,22,21,.16);
}
.act--light .plate img,.act--turn .plate img{
  box-shadow:0 22px 46px -26px rgba(22,26,24,.45), 0 3px 10px -4px rgba(22,26,24,.18);
  /* record shots are photographed on a white sweep, which would otherwise
     dissolve into a light ground */
  outline:1px solid rgba(22,26,24,.12);
  outline-offset:-1px;
}
.acc{
  display:block;font-weight:700;letter-spacing:.14em;font-size:.7rem;
  text-transform:uppercase;color:var(--sage);margin-bottom:.3rem;
}
.act--light .acc,.act--turn .acc{color:var(--deep-sage)}

.stat-row{
  margin-top:clamp(3rem,7vw,5rem);
  display:grid;gap:1.6rem clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  border-top:1px solid rgba(116,190,167,.24);
  padding-top:clamp(1.8rem,3vw,2.4rem);
}
.stat{display:grid;gap:.25rem;align-content:start}
.stat__n{font-family:var(--display);font-size:clamp(1.7rem,1.2rem + 1.7vw,2.7rem);line-height:1;color:var(--mint)}
.stat__l{font-size:.85rem;color:var(--on-dark-dim);line-height:1.45}

/* ═══ STAKE ═══ */
.stake{text-align:left}
.stake .h-display--lg{max-width:15ch}
.stake__cols{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid;gap:1.4rem clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,26ch),1fr));
  max-width:78ch;
  color:var(--on-dark-dim);
}
.stake__note{
  margin-top:clamp(2rem,4vw,2.8rem);
  font-family:var(--display);
  font-size:clamp(1.15rem,1rem + .8vw,1.62rem);
  line-height:1.4;max-width:30ch;color:var(--mint);
}

/* ═══ RING SECTIONS ═══ */
.ring-sec__grid{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
@media (min-width:1000px){
  .ring-sec__grid{grid-template-columns:minmax(160px,200px) minmax(0,1fr)}
}
.rail{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sage);
}
@media (min-width:1000px){
  .rail{
    position:sticky;top:clamp(5rem,14vh,8rem);
    flex-direction:column;align-items:flex-start;gap:1rem;
  }
}
.rail__n{font-weight:700;color:var(--mint)}
.rail--light .rail__n{color:#2F6B58}
.rail--light{color:var(--deep-sage)}
.rail__glyph{width:2.6rem;height:2.6rem;flex:none}
.rail__glyph circle{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.5}
.rail__glyph circle:last-child{opacity:1;stroke-width:2.4}
.rail__when{letter-spacing:.11em}

.listen{margin-top:clamp(2.2rem,4vw,3rem);display:grid;gap:0}
.listen li{
  display:grid;gap:.35rem clamp(1.5rem,3vw,2.5rem);
  padding-block:clamp(1.15rem,2.2vw,1.6rem);
  border-top:1px solid rgba(116,190,167,.22);
}
.listen li:last-child{border-bottom:1px solid rgba(116,190,167,.22)}
@media (min-width:760px){
  .listen li{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:baseline}
}
.listen__k{font-family:var(--display);font-size:1.12rem;line-height:1.3;color:var(--on-dark)}
.listen__v{color:var(--on-dark-dim);font-size:.97rem;line-height:1.6}

.pull{margin:clamp(2.6rem,5vw,4rem) 0 0;padding:0}
.pull p{
  font-family:var(--display);
  font-size:clamp(1.4rem,1rem + 1.9vw,2.5rem);
  line-height:1.24;letter-spacing:-.012em;
  max-width:22ch;color:var(--mint);
  border-left:1px solid var(--sage);
  padding-left:clamp(1.1rem,2.4vw,1.8rem);
}

/* ═══ FINDING ═══ */
.finding__grid{display:grid;gap:clamp(2.2rem,5vw,4rem);align-items:start}
@media (min-width:980px){
  .finding__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}
.finding__card{
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  padding:clamp(1.4rem,3vw,2.2rem);
  background:rgba(116,190,167,.07);
  border:1px solid rgba(116,190,167,.3);
  border-radius:3px;
  display:grid;gap:.9rem;
}
.finding__claim{
  font-family:var(--display);
  font-size:clamp(1.3rem,1rem + 1.5vw,2.05rem);
  line-height:1.16;color:var(--mint);max-width:20ch;
}
.finding__detail{color:var(--on-dark-dim);font-size:.97rem;max-width:58ch}
.finding__detail em{color:var(--on-dark);font-style:italic}
.finding__fix{
  margin-top:.3rem;padding-top:.9rem;
  border-top:1px solid rgba(116,190,167,.25);
  font-size:.9rem;color:var(--on-dark);
}
.finding__fix-k{
  display:inline-block;margin-right:.6rem;
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sage);font-weight:700;
}
.finding .prose{margin-top:clamp(1.6rem,3vw,2.2rem)}

/* ═══ DEVELOP ═══ */
.deliver{
  margin-top:clamp(2.2rem,4vw,3rem);
  display:grid;gap:0;
}
.deliver__item{
  display:grid;gap:.45rem clamp(1.5rem,3vw,2.5rem);
  padding-block:clamp(1.3rem,2.4vw,1.8rem);
  border-top:1px solid rgba(116,190,167,.22);
}
.deliver__item:last-child{border-bottom:1px solid rgba(116,190,167,.22)}
@media (min-width:760px){
  .deliver__item{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr)}
}
.deliver__item h3{
  font-family:var(--display);font-size:1.2rem;line-height:1.26;color:var(--on-dark);
}
.deliver__item p{color:var(--on-dark-dim);font-size:.97rem;line-height:1.62;max-width:56ch}
.deliver__item p + p{margin-top:.8rem}
.deliver__item--cond h3{color:var(--mint)}
.deliver__honest{
  border-left:1px solid var(--sage);
  padding-left:1rem;
  color:var(--on-dark);
}

/* Develop sits on the light ground, so the whole block flips rather than
   inheriting the dark half's colours. */
.act--turn .deliver__item,
.act--light .deliver__item{border-top-color:rgba(22,22,21,.16)}
.act--turn .deliver__item:last-child,
.act--light .deliver__item:last-child{border-bottom-color:rgba(22,22,21,.16)}
.act--turn .deliver__item h3,
.act--light .deliver__item h3{color:var(--on-light)}
.act--turn .deliver__item p,
.act--light .deliver__item p{color:var(--on-light-dim)}
.act--turn .deliver__item--cond h3,
.act--light .deliver__item--cond h3{color:var(--deep-sage)}
.act--turn .deliver__honest,
.act--light .deliver__honest{
  border-left-color:var(--deep-sage);
  color:var(--on-light);
}

/* ═══ MAKE ═══ */
.ring-sec--make{padding-bottom:calc(var(--stack) * 1.1)}
.make__gal{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  display:grid;gap:clamp(1.4rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  align-items:start;
}

/* ═══ REACH ═══ */
.reach__split{
  margin-top:clamp(1.8rem,4vw,2.6rem);
  display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
@media (min-width:900px){
  .reach__split{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
}
.plate--joy img{border-radius:2px}

/* ═══ AGAINST THE BRIEF ═══ */
.brief__head{display:grid;gap:clamp(1.2rem,2.5vw,1.8rem);align-items:start}
@media (min-width:900px){
  .brief__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.brief__head .lede{margin-top:0;max-width:44ch}

.bmap{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  display:grid;gap:0;
  counter-reset:bmap;
}
.bmap__i{
  display:grid;gap:.9rem clamp(1.8rem,4vw,3.2rem);
  padding-block:clamp(1.4rem,2.8vw,2.1rem);
  border-top:1px solid rgba(22,22,21,.18);
}
.bmap__i:last-child{border-bottom:1px solid rgba(22,22,21,.18)}
@media (min-width:860px){
  .bmap__i{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}
}
.bmap__ask{display:grid;grid-template-columns:2.4rem 1fr;gap:.4rem;align-items:start}
.bmap__n{
  font-size:.72rem;letter-spacing:.12em;font-weight:700;
  color:var(--deep-sage);padding-top:.42em;
}
/* the brief's own words, set as quoted material rather than our copy */
.bmap__ask q{
  quotes:"\201C" "\201D";
  font-family:var(--display);
  font-size:clamp(1.02rem,.96rem + .38vw,1.24rem);
  line-height:1.34;color:var(--on-light);
}
.bmap__ans p{color:var(--on-light-dim);font-size:.97rem;line-height:1.62;max-width:56ch}
.bmap__ans a{
  color:var(--deep-sage);font-weight:700;
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(53,104,90,.4);
}
.bmap__ans a:hover{text-decoration-color:var(--deep-sage)}
.brief__foot{
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  max-width:66ch;color:var(--on-light-dim);font-size:.97rem;line-height:1.62;
}

/* ═══ INVESTMENT ═══ */
/* The money sits in their own colour, so the one commercial section reads as
   part of the museum rather than an invoice dropped into it. */
.invest{background:var(--sage-pale)}
.invest .invest__head{border-bottom-color:rgba(22,22,21,.22)}
.invest .incl li{border-bottom-color:rgba(22,22,21,.16)}

.invest__head{
  display:grid;gap:clamp(1.2rem,2.5vw,1.8rem);align-items:end;
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(22,22,21,.18);
}
@media (min-width:900px){
  .invest__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.invest__sub{color:var(--on-light-dim);max-width:42ch;font-size:1.02rem}
.incl{
  margin-top:clamp(2rem,4vw,2.8rem);
  display:grid;gap:0;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){.incl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,4vw,3.5rem)}}
.incl li{
  padding-block:.95rem;
  border-bottom:1px solid rgba(22,22,21,.13);
  display:grid;grid-template-columns:1.5rem 1fr;align-items:baseline;gap:.5rem;
  font-size:.98rem;line-height:1.55;color:var(--on-light);
}
.incl li::before{
  content:"";width:.62rem;height:.62rem;border-radius:50%;
  border:1.5px solid var(--deep-sage);
  transform:translateY(.05rem);
}
.invest__who{
  margin-top:clamp(2rem,4vw,2.8rem);
  max-width:60ch;color:var(--on-light-dim);
}

/* ═══ TIMELINE ═══ */
.tl{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid;gap:0;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:960px){
  .tl{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
}
.tl__i{
  display:grid;gap:.5rem;align-content:start;
  padding:clamp(1.1rem,2.2vw,1.5rem) 0;
  border-top:1px solid rgba(22,22,21,.16);
  position:relative;
}
@media (min-width:960px){
  .tl__i{padding:1.7rem clamp(1rem,2vw,1.5rem) 0 0}
}
.tl__i::before{
  content:"";position:absolute;top:-.3rem;left:0;
  width:.6rem;height:.6rem;border-radius:50%;background:var(--deep-sage);
}
.tl__m{
  font-family:var(--display);font-size:1.18rem;color:var(--on-light);line-height:1.2;
}
.tl__d{font-size:.93rem;line-height:1.55;color:var(--on-light-dim);max-width:30ch}

/* ═══ WHO ═══ */
.who__grid{display:grid;gap:clamp(2.2rem,5vw,4rem);align-items:start}
@media (min-width:980px){
  .who__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
}
.who .prose{margin-top:clamp(1.6rem,3vw,2.2rem)}
.who__aside{
  padding:clamp(1.5rem,3vw,2.2rem);
  background:rgba(22,22,21,.045);
  border-top:2px solid var(--deep-sage);
  display:grid;gap:1.4rem;align-content:start;
}
.who__quote{
  font-family:var(--display);
  font-size:clamp(1.1rem,1rem + .7vw,1.42rem);
  line-height:1.32;color:var(--on-light);
}
.who__sig{font-size:.86rem;line-height:1.6;color:var(--on-light);font-weight:700}
.who__sig span{color:var(--on-light-dim);font-weight:400}

/* ═══ CLOSE ═══ */
.close{
  background:var(--sage);
  color:var(--ink);
  text-align:center;
  padding-block:calc(var(--stack) * 1.15);
  overflow:hidden;
}
.close__wrap{display:grid;justify-items:center;gap:clamp(1.6rem,4vw,2.6rem)}
.close__pre{
  font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  color:#1F4438;max-width:44ch;line-height:1.8;
}
.close__h{
  font-family:var(--display);
  font-size:clamp(2.4rem,1.1rem + 6.4vw,6rem);
  line-height:1.02;letter-spacing:-.026em;color:var(--ink);
}
.close__act{display:grid;justify-items:center;gap:1.3rem}
.btn{
  display:inline-block;
  padding:1rem 2rem;border-radius:100px;
  background:var(--ink);color:var(--light);
  text-decoration:none;font-weight:700;font-size:1rem;letter-spacing:.01em;
  transition:transform .45s var(--ease), background-color .3s ease;
}
.btn:hover{transform:translateY(-3px);background:#000}
.close__note{max-width:42ch;font-size:.92rem;line-height:1.6;color:#1F4438}

/* ── footnote marker and its note ───────────────────────────── */
.fn{
  font-size:.62em;vertical-align:super;line-height:0;
  text-decoration:none;font-weight:700;
  color:var(--deep-sage);padding-inline:.12em;
}
.act--dark .fn{color:var(--mint)}
.fn:hover{text-decoration:underline}
.note{
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  max-width:62ch;
  display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem;
  padding-top:1rem;
  border-top:1px solid rgba(22,22,21,.16);
  font-size:.88rem;line-height:1.6;color:var(--on-light-dim);
}
.note__star{color:var(--deep-sage);font-weight:700}
.act--dark .note{border-top-color:rgba(116,190,167,.24);color:var(--on-dark-dim)}
.act--dark .note__star{color:var(--mint)}

/* ── the sign off ───────────────────────────────────────────── */
.sign{
  margin-top:clamp(2.6rem,6vw,4.5rem);
  padding-top:clamp(1.8rem,4vw,2.6rem);
  border-top:1px solid rgba(22,22,21,.22);
  width:min(100%,30rem);
  display:grid;justify-items:center;gap:.75rem;
}
.sign__mark{display:block;width:2.5rem;height:2.5rem}
.sign__mark svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.5}
.sign__name{
  font-family:var(--display);font-size:1.32rem;line-height:1;color:var(--ink);
}
.sign__line{
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:#1F4438;
}

/* ═══ FOOT ═══ */
.foot{
  position:relative;z-index:1;
  background:var(--deep);color:var(--on-dark-dim);
  padding-block:clamp(2.6rem,6vw,4rem);
  font-size:.8rem;line-height:1.7;
}
.foot__grid{
  display:grid;gap:1.6rem clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  align-items:start;
}
.foot strong{color:var(--on-dark)}
.foot__cred{max-width:44ch}

/* ── motion preferences ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero__scroll span::after{animation:none;transform:scaleY(1)}
}