/* ==========================================================================
   Project 108 — immersive documentary
   Lime-wash direction, built on the one h.ohm structure: full-bleed hero,
   narrow reading column, letterspaced hairline buttons, quiet bands.
   Palette drawn from the chortens themselves: lime-washed walls, robe
   maroon, gilt from the finials.
   ========================================================================== */

:root{
  /* --- the chorten palette --------------------------------------------- */
  --limewash:  #F4F3EF;   /* the page ground — chalk white, not bone       */
  --maroon:    #6E2C31;   /* robe maroon — the giving band                 */
  --gilt:      #A8843F;   /* finial gilt — hover, rules                    */
  --gilt-bright:#C9A257;  /* gilt on maroon — the built beads              */
  --slate:     #6F7470;   /* the stone of the base steps — eyebrows        */

  /* --- grounds and inks, derived by value ------------------------------ */
  --paper:     var(--limewash);
  --paper-2:   #ECEAE4;   /* alternating band                              */
  --paper-3:   #E1DED6;   /* wells, meter track                            */
  --night:     #1C1A1B;
  --ink:       #2A2324;
  --ink-2:     #5D5556;
  --ink-3:     #857C7D;

  --on-maroon:   #F4F3EF;
  --on-maroon-2: rgba(244,243,239,.84);
  --on-maroon-3: rgba(244,243,239,.66);
  --line-maroon: rgba(244,243,239,.28);

  --line:      rgba(42,35,36,.14);
  --line-2:    rgba(168,132,63,.48);
  --line-lite: rgba(244,243,239,.30);

  /* --- type -------------------------------------------------------------
     Newsreader stands in for one h.ohm's Larken (licensed to that site
     only): a soft reading serif with a true thin cut for display lines.
     A geometric sans carries the small letterspaced labels.               */
  --f-display: "Newsreader","Iowan Old Style",Palatino,Georgia,serif;
  --f-body:    "Newsreader","Iowan Old Style",Palatino,Georgia,serif;
  --f-ui:      "Avenir Next","Avenir","Jost",Futura,"Gill Sans",system-ui,sans-serif;

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --nav-h: 74px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-optical-sizing:auto;
  font-size:clamp(1.0625rem,1rem + .28vw,1.1875rem);line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

/* --- shared primitives ---------------------------------------------------- */
.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:860px}

.eyebrow{
  font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate);margin:0 0 1.2rem;font-weight:500;
}
h1,h2,h3{font-family:var(--f-display);font-weight:300;margin:0;text-wrap:balance}
h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);line-height:1.12;letter-spacing:-.008em}
p{margin:0 0 1.4em}
.lede{font-size:clamp(1.22rem,1.04rem + .75vw,1.6rem);line-height:1.58}

/* letterspaced hairline button — the one button shape on the site */
.btn{
  display:inline-block;font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.24em;
  text-transform:uppercase;font-weight:500;color:var(--ink);text-decoration:none;
  padding:1.05rem 2.4rem;border:1px solid var(--line-2);background:transparent;cursor:pointer;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--gilt);border-color:var(--gilt);color:var(--paper)}
.btn--light{color:var(--on-maroon);border-color:var(--line-lite)}
.btn--light:hover,.btn--light:focus-visible{background:var(--on-maroon);border-color:var(--on-maroon);color:var(--maroon)}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}

/* --- wordmark ------------------------------------------------------------- */
.mark{font-family:var(--f-display);font-weight:300;letter-spacing:.14em;text-transform:capitalize;white-space:nowrap;text-decoration:none;font-variant: small-caps}
.mark b{font-weight:300;color:var(--gilt)}

/* --- nav ------------------------------------------------------------------ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  padding-top:env(safe-area-inset-top,0px);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-inline:var(--pad);border-bottom:1px solid transparent;
  transition:background .55s var(--ease),border-color .55s var(--ease);
}
.nav .mark{font-size:1.0625rem;color:var(--paper);transition:color .55s var(--ease)}
.nav-links{display:flex;gap:clamp(1.1rem,2.6vw,2.6rem);align-items:center}
.nav-links a{
  font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:rgba(244,243,239,.86);text-decoration:none;padding-block:.5rem;
  transition:color .55s var(--ease);
}
.nav-links a.give-link{border:1px solid var(--line-lite);padding:.55rem 1.1rem}
.nav.is-solid{background:rgba(244,243,239,.94);backdrop-filter:saturate(140%) blur(10px);border-bottom-color:var(--line)}
.nav.is-solid .mark{color:var(--ink)}
.nav.is-solid .nav-links a{color:var(--ink-2)}
.nav.is-solid .nav-links a.give-link{border-color:var(--line-2);color:var(--ink)}
@media (max-width:560px){.nav-links a:not(.give-link){display:none}}

/* --- hero: slow cross-fade of stills ------------------------------------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;isolation:isolate;overflow:hidden}
.stage{position:absolute;inset:0;overflow:hidden;background:var(--night)}
.kb-slide{position:absolute;inset:0;opacity:0;z-index:0;transition:opacity 2200ms ease}
.kb-slide.is-under{opacity:1;z-index:1;transition:none}
.kb-slide.is-on{opacity:1;z-index:2}
.kb-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 11000ms linear;
  filter:saturate(.82) sepia(.05)}
.kb-slide.is-on img{transform:scale(1.15)}
.kb-slide:nth-child(2n) img{transform-origin:70% 40%}
.kb-slide:nth-child(3n) img{transform-origin:30% 65%}
.scrim{
  position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(ellipse 78% 58% at 50% 46%,rgba(28,26,27,.6) 0%,rgba(28,26,27,.26) 48%,rgba(28,26,27,0) 78%),
    linear-gradient(to bottom,rgba(28,26,27,.58) 0%,rgba(28,26,27,.22) 30%,rgba(28,26,27,.34) 68%,rgba(28,26,27,.74) 100%);
}
.hero__inner{position:relative;z-index:3;text-align:center;padding:var(--nav-h) var(--pad) 0;color:var(--paper)}
.hero .mark{display:block;font-size:clamp(2.2rem,1rem + 4.8vw,4.6rem);font-weight:200;color:var(--paper);
  text-shadow:0 2px 26px rgba(28,26,27,.42)}
.hero__sub{font-family:var(--f-ui);font-size:clamp(.875rem,.75rem + .45vw,1.0625rem);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,243,239,.88);margin:1.9rem 0 0;text-shadow:0 1px 14px rgba(28,26,27,.55);line-height:2}
.hero__claim{font-family:var(--f-display);font-weight:200;font-style:italic;
  font-size:clamp(1.2rem,1rem + 1vw,1.75rem);color:rgba(244,243,239,.94);margin:1.2rem auto 0;max-width:30ch;
  text-shadow:0 2px 22px rgba(28,26,27,.5)}
.scrollcue{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:3;
  font-family:var(--f-ui);font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(244,243,239,.8);text-decoration:none;display:grid;justify-items:center;gap:.7rem;
}
.scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(rgba(244,243,239,.7),rgba(244,243,239,0));animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){
  .scrollcue i{animation:none}
  .kb-slide img,.kb-slide.is-on img{transition:none;transform:scale(1.04)}
}

/* --- sections ------------------------------------------------------------- */
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.band{background:var(--paper-2)}
.band--maroon{background:var(--maroon);color:var(--on-maroon-2)}
.band--maroon h2,.band--maroon .lede{color:var(--on-maroon)}
.band--maroon .eyebrow{color:var(--on-maroon-3)}
section[id]{scroll-margin-top:var(--nav-h)}

/* the facts of the day, set like a plaque */
.factline{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin:2.4rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line);
  font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.factline b{display:block;font-family:var(--f-display);font-size:1.6rem;font-weight:300;letter-spacing:0;color:var(--ink);text-transform:none;line-height:1.2}
/* the budget figure (t14) takes a line of its own, centred */
.factline > span:has([data-e="t14"]){flex-basis:100%;text-align:center}

/* image strip, butted edge to edge */
.imgbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(2.5rem,5vw,4rem)}
.imgbar img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.85) sepia(.04)}
@media (max-width:700px){.imgbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.imgbar--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.imgbar--pair img{aspect-ratio:3/2}
@media (max-width:560px){.imgbar--pair{grid-template-columns:minmax(0,1fr)}}

/* the invitation and its verbs */
.invitation{font-family:var(--f-display);font-weight:300;font-size:clamp(1.35rem,1rem + 1.2vw,1.95rem);margin:2rem 0 0}
.verbs{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gilt);margin-top:1.2rem;line-height:2.2}
.verbs a{text-decoration:none}
.verbs a + a::before{content:"\00b7";margin-inline:.55em;opacity:.7}
.verbs a:hover,.verbs a:focus-visible{color:var(--ink)}

/* --- overview: one panel for the film, one for the dome ----------------- */
.halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);max-width:1180px;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (max-width:760px){.halves{grid-template-columns:minmax(0,1fr)}}
.half{display:grid;gap:.7rem;align-content:start;padding:clamp(1.6rem,3vw,2.4rem);border:1px solid var(--line);text-decoration:none;
  transition:border-color .5s var(--ease),background .5s var(--ease)}
.half:hover,.half:focus-visible{border-color:var(--gilt);background:var(--paper-2)}
.half .eyebrow{margin:0}
.half__title{font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);line-height:1.15}
.half__text{color:var(--ink-2);max-width:48ch}
.half__more{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gilt);margin-top:.4rem}
.half__more::after{content:" \2192"}

.section-lede{margin-top:1.4rem}

/* --- film: a wide still under the opening -------------------------------- */
/* edge to edge: the full width of the window, no side gutter */
.banner{max-width:none;padding-inline:0;margin-top:clamp(2.5rem,5vw,4rem)}
.banner img{width:100%;aspect-ratio:27/10;object-fit:cover;filter:saturate(.88) sepia(.04)}
/* when photographs end their section (the film banner, the overview pair),
   no band of page colour below them */
.section:has(> .banner:last-child),.section:has(> .imgbar:last-child){padding-bottom:0}
.imgbar img{display:block}
.banner img{display:block}
.pillar__img--right{object-position:85% 50%}

/* --- dome ------------------------------------------------------------------ */
.dome-where{margin-top:2rem}
.dome-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,1.2vw,1rem);max-width:1180px;margin-top:clamp(2.5rem,5vw,4rem)}
.dome-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.85) sepia(.04)}
@media (max-width:700px){.dome-gallery{grid-template-columns:minmax(0,1fr)}}
.dome-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,4vw,3.5rem);max-width:1180px;margin-top:clamp(2.5rem,5vw,4rem);margin-bottom:2.4rem}
@media (max-width:860px){.dome-points{grid-template-columns:minmax(0,1fr)}}
.dome-points > div{min-width:0;border-top:1px solid var(--line-2);padding-top:1.2rem}
.dome-points h3{font-weight:300;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.2;margin-bottom:.8rem}
.dome-points p{margin:0;color:var(--ink-2)}

/* --- the four movements (pillars) ---------------------------------------- */
.pillars .wrap{display:grid;gap:clamp(3rem,7vw,5.5rem)}
.pillar{display:grid;align-items:start;grid-template-columns:minmax(0,60ch) minmax(0,1fr);column-gap:clamp(2rem,5vw,4.5rem)}
.pillar__body{min-width:0}
.pillar__img{width:100%;height:auto;max-width:28rem;justify-self:end;aspect-ratio:4/5;object-fit:cover;filter:saturate(.85) sepia(.04)}
.pillar:nth-child(even) .pillar__img{order:-1;justify-self:start}
.pillar:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,60ch)}
@media (max-width:900px){
  .pillar,.pillar:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .pillar:nth-child(even) .pillar__img{order:0}
  .pillar__img{aspect-ratio:3/2;margin-top:1.8rem;max-width:34rem;justify-self:start}
}
.pillar h3{font-weight:200;font-size:clamp(1.7rem,1.1rem + 2vw,2.7rem);line-height:1.15;margin:.2rem 0 1.1rem}
.pillar p{margin:0 0 1rem}
.pillar__when{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.pillar__cta{margin-top:1.6rem}

/* --- give: the mala ------------------------------------------------------
   Mala left, the ask right; stacked on a phone with the mala first, because
   it is the picture of what the money builds. */
.give-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center;max-width:1180px}
@media (max-width:860px){.give-grid{grid-template-columns:minmax(0,1fr)}}
.give-body{min-width:0}
.give-lede{margin-top:1.4rem}

.mala{position:relative;max-width:440px;width:100%;justify-self:center}
.mala__svg{display:block;width:100%;height:auto;overflow:visible}
.mala__count{position:absolute;left:0;right:0;top:43%;transform:translateY(-50%);text-align:center;display:grid;gap:.35rem;pointer-events:none}
.mala__count strong{font-family:var(--f-display);font-weight:200;font-size:clamp(2.6rem,1.6rem + 3vw,4rem);line-height:1;color:var(--on-maroon);font-variant-numeric:tabular-nums}
.mala__count > span{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-maroon-3)}
/* the editor needs to reach the figures inside the ring */
.is-editing .mala__count{pointer-events:auto}

.bead{fill:transparent;stroke:var(--on-maroon-3);stroke-width:1}
.bead--built{fill:var(--gilt-bright);stroke:var(--gilt-bright)}
.bead--yours{fill:rgba(201,162,87,.38);stroke:var(--gilt-bright)}
.bead-part{fill:var(--gilt-bright)}
.guru{fill:var(--gilt-bright)}
.tassel{stroke:var(--gilt-bright);stroke-width:1;opacity:.75}
.cord{fill:none;stroke:var(--line-maroon);stroke-width:1}
@media (prefers-reduced-motion:no-preference){
  .bead--yours{animation:breathe 2.8s var(--ease) infinite}
  @keyframes breathe{50%{fill-opacity:.35}}
}

.give-price{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:1.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line-maroon);
  font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-maroon-3)}
.give-price strong{font-family:var(--f-display);font-weight:300;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);letter-spacing:0;color:var(--on-maroon);font-variant-numeric:tabular-nums}

/* "Your donation is regenerative": the promise under the opening paragraph */
.give-regen{display:grid;gap:.4rem;margin:1.6rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line-maroon)}
.give-regen strong{font-family:var(--f-display);font-weight:300;font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem);line-height:1.2;color:var(--on-maroon)}
.give-regen strong + span{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-maroon-2)}
/* the aspiration or prayer offered with the gift */
.aspiration{display:grid;gap:.7rem;margin:1.4rem 0 0}
.aspiration p{margin:0;color:var(--on-maroon-2);max-width:52ch}
.aspiration__label{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-maroon-3);margin-top:.4rem}
.aspiration textarea{width:100%;min-height:5.5rem;resize:vertical;padding:.8rem .9rem;background:rgba(255,255,255,.06);
  border:1px solid var(--line-lite);border-radius:0;color:var(--on-maroon);font:300 1.1rem/1.5 var(--f-display)}
.aspiration textarea::placeholder{color:var(--on-maroon-3);font-style:italic}
.aspiration textarea:focus{outline:none;border-color:var(--gilt-bright);background:rgba(255,255,255,.09)}
.aspiration__public{display:flex;align-items:center;gap:.6rem;cursor:pointer;color:var(--on-maroon-2);font-size:.95rem}
.aspiration__public input{width:1.05rem;height:1.05rem;accent-color:var(--gilt-bright);margin:0}
.aspiration .aspiration__note{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.12em;line-height:1.8;color:var(--on-maroon-3)}

.give-beads{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.18em;color:var(--on-maroon-3);font-variant-numeric:tabular-nums}

/* the ask: one open amount */
.give-ask{margin-top:2rem}
.give-ask p{color:var(--on-maroon-2);max-width:52ch}
.amounts{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 0}
.amounts button{background:none;border:1px solid var(--line-lite);color:var(--on-maroon);padding:.8rem 1.15rem;cursor:pointer;
  font-family:var(--f-display);font-weight:300;font-size:1.2rem;font-variant-numeric:tabular-nums;
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.amounts button:last-child{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase}
.amounts button:hover{border-color:var(--on-maroon-2)}
.amounts small{margin-left:.35em;font-family:var(--f-ui);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-maroon-2)}
.amounts button[aria-checked="true"]{border-color:var(--gilt-bright);background:rgba(201,162,87,.16)}

.give-cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin:1.8rem 0 0}
.btn--solid{background:var(--on-maroon);color:var(--maroon);border-color:var(--on-maroon)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--gilt-bright);border-color:var(--gilt-bright);color:var(--ink)}
.give-alt{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-maroon-2);text-decoration:none;border-bottom:1px solid var(--line-lite);padding-bottom:.2rem}
.give-alt:hover{color:var(--on-maroon);border-bottom-color:var(--on-maroon)}
.give-note{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-maroon-3);margin:2rem 0 0;line-height:1.9}

.give-budget{list-style:none;margin:2.2rem 0 0;padding:0}
.give-budget li{display:flex;justify-content:space-between;gap:1.5rem;padding-block:1rem;border-bottom:1px solid var(--line)}
.give-budget__amt{font-family:var(--f-ui);font-size:.8125rem;letter-spacing:.12em;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.give-budget__total{border-bottom:0!important;font-weight:500}
.give-budget__group{font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);padding-top:1.8rem!important;border-bottom-color:var(--line-2)!important}
.give-budget__group:first-child{padding-top:0!important}

/* --- with thanks: the donor list ---------------------------------------- */
.donors{list-style:none;margin:2rem 0 0;padding:0;columns:3 12rem;column-gap:2.4rem}
.donors li{break-inside:avoid;padding-block:.55rem;border-bottom:1px solid var(--line);font-family:var(--f-display);font-weight:300;font-size:1.15rem}
.donors:empty{display:none}
.donors__empty,.donors__anon{margin:1.6rem 0 0;color:var(--ink-2)}
.donors__anon{font-style:italic}

/* aspirations shared with the gifts, under With thanks */
.offerings{margin-top:2.6rem}
.offerings h3{font-weight:300;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin-bottom:1rem}
.offerings__list{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.offerings__list li{border-left:1px solid var(--line-2);padding-left:1.2rem}
.offerings__list blockquote{margin:0;font-family:var(--f-display);font-weight:300;font-style:italic;font-size:1.15rem;line-height:1.55;white-space:pre-line}
.offerings__by{display:block;margin-top:.4rem;font-family:var(--f-ui);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}

/* --- us: 4SG, then the film team ---------------------------------------- */
.us-org{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1rem clamp(2rem,5vw,4.5rem);max-width:1180px;
  margin-top:clamp(2.2rem,4.5vw,3.2rem);padding-top:1.6rem;border-top:1px solid var(--line-2)}
@media (max-width:760px){.us-org{grid-template-columns:minmax(0,1fr)}}
.us-org > div{min-width:0}
.us-org h3{font-weight:300;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.2}
.us-org .lede{margin-bottom:1rem}
.us-org p:last-child{margin-bottom:0}
.people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2rem);max-width:1180px;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (max-width:1000px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.person{min-width:0;display:grid;gap:.45rem;align-content:start;border-bottom:1px solid var(--line);padding-bottom:1.2rem}
/* square, cropped from just above centre so faces stay in frame */
.person__shot{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;background:var(--paper-3);margin-bottom:.5rem}
.person__name{font-weight:300;font-size:1.2rem;line-height:1.25}
.person__role{margin:0;font-family:var(--f-ui);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.person__bio{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink-2)}

/* full-bleed image band */
.bleed{position:relative;height:clamp(320px,62vh,620px);overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) sepia(.05)}

/* --- footer --------------------------------------------------------------- */
.foot{background:#FFFFFF;padding-block:clamp(3rem,6vw,4.5rem)}
.foot .mark{font-size:1.35rem;color:var(--ink)}
.foot-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-end}
.foot-blurb{margin:1.2rem 0 0;max-width:36ch;font-size:.95rem;color:var(--ink-2)}
.foot-links{display:flex;gap:1.6rem;flex-wrap:wrap;font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--ink)}
.partners{margin-top:2.6rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.partners img{height:52px;width:auto}
.foot small{display:block;font-family:var(--f-ui);font-size:.625rem;letter-spacing:.14em;color:var(--ink-3);margin-top:2rem;line-height:2;max-width:82ch}