/* ============================================================
   Willow Initiative: "Garden" layer.
   Loaded last. Warm paper, willow green, a little clay.
   Newsreader for everything you read, Instrument Sans for
   everything you press, Geist Mono for the small labels.
   ============================================================ */

:root {
  --paper:      #F4EFE6;
  --paper-2:    #ECE5D8;
  --paper-3:    #E1D8C6;
  --card-grey:  #EDEBE6;
  --ink-n:      #1F1E1B;
  --ink-n2:     #3A3833;
  --ink-n3:     #6B665C;
  --rule:       rgba(31, 30, 27, 0.14);
  --willow:     #3E5A3A;
  --willow-dk:  #1F2F1C;
  --moss-n:     #8A9A6C;
  --clay:       #C4623A;
  --cream:      #F7F2E8;
  --index-blue: #2F4FD8;

  /* fold the older tokens into the new palette so every page follows */
  --bg:        var(--paper);
  --bg-2:      var(--paper-2);
  --surface:   #FBF8F2;
  --ink:       var(--ink-n);
  --ink-2:     var(--ink-n2);
  --ink-soft:  var(--ink-n3);
  --ink-mute:  #8D877B;
  --line:      rgba(31, 30, 27, 0.09);
  --line-strong: rgba(31, 30, 27, 0.16);
  --bone:      var(--paper);

  --f-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-body:  var(--f-sans);
  --f-mono:  "Geist Mono", ui-monospace, Menlo, monospace;

  --ease-soft: cubic-bezier(.22, .8, .24, 1);
  --ease-fold: cubic-bezier(.76, 0, .18, 1);
}

html, body { overflow-x: clip; }
html { scroll-behavior: auto; }
body {
  font-family: var(--f-sans);
  background: var(--paper);
  color: var(--ink-n);
}
::selection { background: var(--willow); color: var(--cream); }

h1, h2, h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  font-optical-sizing: auto;
}
h2 em, h3 em, h1 em { font-style: italic; }
.eyebrow::before { background: var(--clay); }
.lede { font-family: var(--f-serif); font-weight: 350; color: var(--ink-n2); }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 6px; }

/* Film grain, laid over paintings and photos */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .38;
}

.kicker {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-n3);
}
.kicker.light { color: rgba(247, 242, 232, .62); }

.pill-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 12px;
  background: var(--ink-n);
  color: var(--cream);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.005em;
  transition: transform .5s var(--ease-soft), background .3s, color .3s, box-shadow .5s var(--ease-soft);
}
.pill-btn:hover { background: var(--willow-dk); box-shadow: 0 12px 30px -14px rgba(31,47,28,.45); }
.pill-btn:disabled { opacity: .5; cursor: not-allowed; }
.pill-btn span { transition: transform .5s var(--ease-soft); }
.pill-btn:hover span { transform: translateX(4px); }
.pill-btn.ghost { background: transparent; color: var(--ink-n); box-shadow: inset 0 0 0 1px var(--rule); }
.pill-btn.ghost:hover { background: rgba(31,30,27,.05); box-shadow: inset 0 0 0 1px rgba(31,30,27,.3); }

/* ============================================================
   Nav: floating pill
   ============================================================ */
.nav-j, .nav-sheet-j { display: none !important; }

.nb {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 20px;
  padding: 26px clamp(20px, 3.4vw, 48px);
  color: var(--ink-n);
  pointer-events: none;
  transition: padding .9s cubic-bezier(.65, 0, .25, 1), color .5s ease, opacity .8s var(--ease-soft), transform .9s var(--ease-soft);
}
.nb > * { pointer-events: auto; }
.nb::before {
  content: ""; position: absolute; inset: 0 0 -34px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,239,230,.95) 0%, rgba(244,239,230,.8) 55%, rgba(244,239,230,0) 100%);
  opacity: 0; transition: opacity .6s ease;
}
.nb.is-scrolled { padding: 14px clamp(14px, 2vw, 28px); }
.nb.is-scrolled:not(.is-dark)::before { opacity: 1; }
.nb.is-dark { color: var(--cream); }
body.intro-on .nb { opacity: 0; transform: translateY(-20px); }

.nb-logo { display: inline-flex; align-items: center; gap: 3px; height: 44px; color: inherit; font-weight: 600; font-size: 15px; letter-spacing: .17em; white-space: nowrap; transition: font-size .9s cubic-bezier(.65, 0, .25, 1); }
.nb.is-scrolled .nb-logo { font-size: 13.5px; }
.nb-leaf { color: var(--willow); transform: translateY(-1px) rotate(6deg); }
.nb.is-dark .nb-leaf { color: #C9D6A5; }
.nb-word-2 { margin-left: 5px; }

.nb-links { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.nb-links button {
  position: relative; padding: 6px 0;
  font-size: 14.5px; color: inherit; opacity: .82;
  transition: opacity .5s ease, transform .7s var(--ease-soft);
  transition-delay: calc(var(--i) * 30ms);
}
.nb-links button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-soft); }
.nb-links button:hover { opacity: 1; }
.nb-links button:hover::after, .nb-links button.on::after { transform: scaleX(1); }
.nb-links button.on { opacity: 1; }
.nb-links .nb-donate { font-weight: 600; opacity: 1; }
.nb.is-scrolled .nb-links button { opacity: 0; transform: translateY(-12px); pointer-events: none; transition-delay: calc((8 - var(--i)) * 25ms); }

.nb-burger {
  width: 44px; height: 44px; margin-left: 8px;
  display: grid; place-content: center; gap: 5px;
  color: inherit;
  opacity: 0; transform: scale(.7); pointer-events: none;
  transition: opacity .5s ease .2s, transform .6s var(--ease-soft) .2s;
}
.nb-burger i { display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: width .4s var(--ease-soft); }
.nb-burger i:nth-child(2) { width: 17px; justify-self: end; }
.nb-burger:hover i:nth-child(2) { width: 24px; }
.nb.is-scrolled .nb-burger { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 1080px) {
  .nb { padding: 14px 16px; }
  .nb.is-scrolled { padding: 10px 12px; }
  .nb-links { display: none; }
  .nb-burger { opacity: 1; transform: none; pointer-events: auto; margin-left: auto; }
  .nb:not(.is-dark)::before { opacity: 1; }
}
@media (max-width: 380px) { .nb-logo { font-size: 13px; letter-spacing: .13em; } }

/* Menu sheet */
.nv-sheet {
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 18px clamp(18px, 4vw, 48px) 28px;
  animation: nvSheet .7s var(--ease-fold) both;
}
@keyframes nvSheet { from { clip-path: inset(0 0 100% 0 round 0 0 40px 40px); } to { clip-path: inset(0 0 0 0 round 0); } }
.nv-sheet-top { display: flex; align-items: center; justify-content: space-between; height: 50px; }
.nv-sheet-mark { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; letter-spacing: .16em; font-size: 15.5px; color: var(--ink-n); }
.nv-sheet-mark .leaf-glyph { color: var(--willow); }
.nv-sheet-close { padding: 10px 18px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); font-size: 14.5px; }
.nv-sheet-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.nv-sheet-links button {
  display: flex; align-items: baseline; gap: 18px;
  text-align: left;
  font-family: var(--f-serif);
  font-size: clamp(34px, 7.5vw, 64px);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ink-n);
  animation: nvLink .8s var(--ease-soft) both;
  animation-delay: calc(120ms + var(--i) * 45ms);
  transition: color .3s, transform .5s var(--ease-soft);
}
.nv-sheet-links button .n { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-n3); transform: translateY(-.9em); }
.nv-sheet-links button:hover, .nv-sheet-links button.on { color: var(--willow); transform: translateX(10px); }
@keyframes nvLink { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.nv-sheet-foot { font-size: 14px; color: var(--ink-n3); }
.nv-sheet-foot a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Home
   ============================================================ */
.home-n { background: var(--paper); overflow-x: clip; }
.home-n h2 {
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--ink-n);
}
.home-n h2 em { color: var(--willow); }

/* ---------- (0) Hero triptych ---------- */
.hx {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 620px;
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.hx-panel {
  position: absolute; top: 0; bottom: 0;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  transition:
    left 1.5s var(--ease-fold),
    width 1.5s var(--ease-fold),
    clip-path 1.15s var(--ease-fold) var(--d);
}
.hx-panel img {
  position: absolute; inset: -4% 0;
  width: 100%; height: 108%;
  object-fit: cover;
  will-change: transform;
}
.hx-l { left: 0;   width: 27%; }
.hx-c { left: 27%; width: 46%; }
.hx-r { left: 73%; width: 27%; }
.hx-l img { object-position: 30% 50%; }
.hx-r img { object-position: 40% 40%; }
.hx-c img { object-position: 50% 40%; transform: scale(1.04); }

.hx.s1 .hx-panel, .hx.s2 .hx-panel, .hx.s3 .hx-panel { clip-path: inset(0 0 0 0); }

.hx.s3 .hx-l { left: 0;    width: 3.2%; }
.hx.s3 .hx-c { left: 3.2%; width: 89.3%; }
.hx.s3 .hx-r { left: 92.5%; width: 7.5%; }
.hx.s3 .hx-panel { transition-delay: 0ms; }

.hx-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 45%, rgba(18,24,14,.28), rgba(18,24,14,0) 70%),
    linear-gradient(180deg, rgba(18,24,14,.34) 0%, rgba(18,24,14,.05) 30%, rgba(18,24,14,.10) 62%, rgba(18,24,14,.58) 100%);
  opacity: 0;
  transition: opacity 1.4s var(--ease-soft) .3s;
}
.hx.s3 .hx-shade { opacity: 1; }

.hx-word {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-serif);
  font-size: clamp(30px, 3.4vw, 50px);
  letter-spacing: -.02em;
  color: var(--cream);
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
  opacity: 0;
  filter: blur(10px);
  transition: opacity .9s var(--ease-soft), filter .9s var(--ease-soft), transform 1.2s var(--ease-soft);
  pointer-events: none;
  z-index: 3;
}
.hx.s2 .hx-word { opacity: 1; filter: blur(0); }
.hx.s3 .hx-word { opacity: 0; filter: blur(6px); transform: translate(-50%, -80%); transition-duration: .6s; }

.hx-copy {
  position: absolute; inset: 0;
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 90px 8vw 70px;
  color: var(--cream);
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.hx-copy > * { pointer-events: auto; }
.hx-date { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .9em; }
.hx-date span { white-space: nowrap; }
.hx-date {
  font-family: var(--f-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247,242,232,.82);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s var(--ease-soft) .1s, transform 1s var(--ease-soft) .1s;
}
.hx-title {
  margin: 22px 0 0;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(58px, 10.4vw, 176px);
  line-height: .94;
  letter-spacing: -.045em;
  color: var(--cream);
  text-shadow: 0 2px 40px rgba(16,20,12,.25);
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .22em;
}
.hx-w { display: inline-block; overflow: hidden; padding: 0 .02em .1em; }
.hx:not(.s3) .hx-title { visibility: hidden; }
.hx-w > span {
  display: inline-block;
  transform: translateY(125%);
  transition: transform 1.3s var(--ease-fold);
}
.hx-sub {
  margin: 14px 0 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  color: rgba(247,242,232,.88);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s var(--ease-soft) .55s, transform 1s var(--ease-soft) .55s;
}
.hx-toc {
  list-style: none;
  margin: clamp(34px, 5.5vh, 64px) 0 0; padding: 0;
  width: min(420px, 100%);
}
.hx-toc li {
  opacity: 0; transform: translateY(8px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
  transition-delay: calc(700ms + var(--i) * 80ms);
}
.hx-toc button {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 3px 0;
  font-size: 14px;
  color: rgba(247,242,232,.9);
}
.hx-toc .n { font-family: var(--f-mono); font-size: 11px; opacity: .8; width: 2.4em; text-align: left; }
.hx-toc .rule {
  flex: 1; height: 1px;
  background: rgba(247,242,232,.45);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.2s var(--ease-fold), background .3s;
  transition-delay: calc(800ms + var(--i) * 80ms);
}
.hx-toc .t { font-family: var(--f-serif); font-size: 16px; transition: transform .4s var(--ease-soft); }
.hx-toc button:hover .rule { background: var(--cream); }
.hx-toc button:hover .t { transform: translateX(-4px); }

.hx.s3 .hx-date, .hx.s3 .hx-sub, .hx.s3 .hx-toc li { opacity: 1; transform: none; }
.hx.s3 .hx-w > span { transform: none; }
.hx.s3 .hx-toc .rule { transform: scaleX(1); }

.hx-cue, .hx-credit {
  position: absolute; bottom: 20px; z-index: 5;
  font-size: 11.5px;
  color: rgba(247,242,232,.7);
  opacity: 0;
  transition: opacity 1s var(--ease-soft) 1.2s;
}
.hx-cue { left: 50%; transform: translateX(-50%); letter-spacing: .04em; padding: 6px 10px; }
.hx-cue::after {
  content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0;
  background: linear-gradient(rgba(247,242,232,.8), rgba(247,242,232,0));
  animation: cueDrip 2.4s var(--ease-soft) infinite;
  transform-origin: top;
}
@keyframes cueDrip { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hx-credit { right: calc(7.5% + 18px); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .02em; }
.hx.s3 .hx-cue, .hx.s3 .hx-credit { opacity: 1; }

@media (max-width: 760px) {
  .hx-l { width: 22%; } .hx-c { left: 22%; width: 56%; } .hx-r { left: 78%; width: 22%; }
  .hx.s3 .hx-l { width: 3.5%; }
  .hx.s3 .hx-c { left: 3.5%; width: 91%; }
  .hx.s3 .hx-r { left: 94.5%; width: 5.5%; }
  .hx-copy { padding: 90px 9vw 80px; }
  .hx-date { font-size: 10.5px; letter-spacing: .16em; }
  .hx-title { flex-direction: column; align-items: center; }
  .hx-credit { display: none; }
  .hx-toc .t { font-size: 15px; }
}

/* ---------- The note ---------- */
.note { position: relative; height: 230vh; background: var(--paper); }
.note-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}
.note-inner { position: relative; z-index: 2; width: min(900px, 100% - 40px); }
.note-text {
  margin: 22px 0 0;
  font-family: var(--f-serif);
  font-weight: 380;
  font-size: clamp(27px, 3.55vw, 54px);
  line-height: 1.2;
  letter-spacing: -.022em;
  color: var(--ink-n);
}
.note-text span { opacity: .13; transition: opacity .25s linear; }
.note-text span.em { font-style: italic; color: var(--willow); }
.note-sign { display: block; margin-top: 30px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-n3); }
.note-art {
  position: absolute; margin: 0;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(31,30,27,.45);
  will-change: transform;
}
.note-art img { width: 100%; height: 100%; object-fit: cover; }
.note-art-l { width: clamp(120px, 12vw, 200px); aspect-ratio: 4/5; left: 2.5vw; top: 10vh; }
.note-art-r { width: clamp(150px, 16vw, 260px); aspect-ratio: 5/4; right: 3vw; bottom: 12vh; }
@media (max-width: 1100px) { .note-art { opacity: .35; } }
@media (max-width: 760px) { .note-art { display: none; } .note { height: 190vh; } }

/* ---------- (1) Why ---------- */
.why { position: relative; height: 420vh; background: var(--paper); }
.why-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  padding: 84px clamp(12px, 2.4vw, 32px) clamp(12px, 2.4vw, 32px);
}
.why-card {
  --enter: 1;
  width: 100%; height: 100%;
  max-width: 1480px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  border-radius: 22px;
  overflow: hidden;
  background: var(--willow-dk);
  color: var(--cream);
  transform: translate3d(0, calc((1 - var(--enter)) * 90px), 0) scale(calc(.9 + var(--enter) * .1));
  opacity: calc(.3 + var(--enter) * .7);
}
.why-left {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 4.2vw, 64px);
}
.why-left .kicker { position: absolute; top: clamp(28px, 4.2vw, 64px); left: clamp(28px, 4.2vw, 64px); }
.why-num {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(88px, 13vw, 210px);
  line-height: .9;
  letter-spacing: -.05em;
  color: #EAE5C4;
  animation: whyIn .9s var(--ease-soft) both;
}
.why-num .suf { font-size: .42em; letter-spacing: -.02em; margin-left: .06em; font-style: italic; color: var(--moss-n); }
.why-line {
  max-width: 34ch;
  margin: 22px 0 0;
  font-family: var(--f-serif);
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.32;
  color: rgba(247,242,232,.92);
  animation: whyIn 1s var(--ease-soft) .08s both;
}
@keyframes whyIn { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.why-src { margin-top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: rgba(247,242,232,.5); }
.why-steps { display: flex; gap: 6px; margin-top: clamp(24px, 4vh, 44px); }
.why-steps span { height: 2px; width: 34px; border-radius: 2px; background: rgba(247,242,232,.18); transition: background .6s, width .8s var(--ease-soft); }
.why-steps span.done { background: rgba(247,242,232,.5); }
.why-steps span.on { background: #EAE5C4; width: 64px; }
.why-right { position: relative; overflow: hidden; }
.why-right img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.2s var(--ease-soft), transform 2.4s var(--ease-soft);
}
.why-right img.on { opacity: 1; transform: scale(1.02); }
.why-label {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(247,242,232,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink-n);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .02em;
}
@media (max-width: 860px) {
  .why-card { grid-template-columns: 1fr; grid-template-rows: 40% 60%; }
  .why-right { order: -1; }
  .why-left { justify-content: flex-start; padding-top: 58px; }
  .why-left .kicker { top: 22px; }
  .why-line { margin-top: 14px; }
  .why-sticky { padding-top: 76px; }
}

/* ---------- (2) Work: field cards ---------- */
.work { position: relative; height: 320vh; background: var(--paper-3); }
.work-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.work-track {
  display: flex; align-items: stretch;
  gap: clamp(20px, 2.6vw, 44px);
  padding: 80px clamp(20px, 5vw, 80px) 40px;
  will-change: transform;
}
.work-intro {
  flex: 0 0 clamp(300px, 30vw, 460px);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--ink-n);
}
.home-n .work-intro h2 { margin-top: 18px; font-size: clamp(40px, 4.6vw, 72px); }
.work-intro p { margin: 20px 0 28px; font-family: var(--f-serif); font-size: 19px; line-height: 1.45; color: var(--ink-n2); max-width: 36ch; }
.work-intro .pill-btn.ghost { align-self: flex-start; box-shadow: inset 0 0 0 1px rgba(31,30,27,.25); }

.fcard {
  flex: 0 0 clamp(280px, 27vw, 420px);
  display: flex; flex-direction: column;
  background: #F8F5EF;
  color: var(--ink-n);
  cursor: pointer;
  box-shadow: 0 30px 60px -36px rgba(31,30,27,.4);
  transition: transform .7s var(--ease-soft);
}
.fcard:hover { transform: translateY(-6px); }
.fcard-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #000; }
.fcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcard-img .dith { image-rendering: pixelated; transition: opacity .8s var(--ease-soft), transform 1.6s var(--ease-soft); }
.fcard:hover .fcard-img .dith { transform: scale(1.03); }
.fcard-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; min-height: 250px; }
.fcard-meta { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-n2); }
.fcard h3 { margin: 16px 0 0; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.14; letter-spacing: -.018em; }
.fcard h3 .mono { font-family: var(--f-mono); font-size: .9em; letter-spacing: -.02em; }
.fcard-note { margin-top: auto; padding-top: 22px; font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--ink-n3); }

@media (max-width: 899px) {
  .work { height: auto; padding: 90px 0 70px; }
  .work-sticky { position: static; height: auto; display: block; }
  .work-track {
    padding: 0 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .work-track::-webkit-scrollbar { display: none; }
  .work-intro { flex-basis: 84vw; }
  .fcard { flex-basis: 78vw; scroll-snap-align: center; }
}

/* ---------- (3) Around the table ---------- */
.table {
  position: relative;
  background: var(--paper-2);
  padding: clamp(90px, 12vw, 160px) clamp(16px, 4vw, 56px) clamp(80px, 10vw, 140px);
  overflow: hidden;
}
.table::before {
  /* the faint grid of a cutting mat */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(31,30,27,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,30,27,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 55%, #000, transparent);
          mask-image: radial-gradient(90% 80% at 50% 55%, #000, transparent);
}
.table-head { position: relative; max-width: 1280px; margin: 0 auto clamp(40px, 6vw, 80px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; align-items: end; }
.table-head .kicker { grid-column: 1 / -1; }
.table-head p { max-width: 40ch; font-family: var(--f-serif); font-size: 19px; line-height: 1.45; color: var(--ink-n2); margin: 0; justify-self: end; }
@media (max-width: 860px) { .table-head { grid-template-columns: 1fr; } .table-head p { justify-self: start; } }

.table-stage {
  --mx: 0; --my: 0;
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  aspect-ratio: 16 / 10.5;
}
.scrap {
  position: absolute;
  cursor: grab;
  opacity: 0;
  translate: var(--fx) var(--fy);
  rotate: calc(var(--r) * 3);
  transition:
    opacity 1s var(--ease-soft),
    translate 1.3s var(--ease-soft),
    rotate 1.3s var(--ease-soft),
    scale .6s var(--ease-soft),
    filter .6s;
  filter: drop-shadow(0 18px 22px rgba(31,30,27,.18)) drop-shadow(0 2px 3px rgba(31,30,27,.12));
}
.scrap:active { cursor: grabbing; }
.table-stage.in .scrap {
  opacity: 1;
  translate: calc(var(--mx) * var(--dz) * -1px) calc(var(--my) * var(--dz) * -1px);
  rotate: var(--r);
}
.table-stage.in .scrap:hover, .table-stage.in .scrap:focus-visible {
  rotate: 0deg;
  scale: 1.045;
  filter: drop-shadow(0 34px 40px rgba(31,30,27,.26)) drop-shadow(0 3px 4px rgba(31,30,27,.12));
  z-index: 200 !important;
  transition-delay: 0ms !important;
}

.fr { position: relative; background: #FBF9F4; }
.fr img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.fr-polaroid { padding: 3.2% 3.2% 0; }
.fr-polaroid .fr-cap { display: block; padding: 12px 4px 16px; font-family: var(--f-serif); font-style: italic; font-size: clamp(13px, 1.2vw, 17px); color: var(--ink-n2); }
.fr-tape { padding: 0; background: none; }
.fr-tape img { aspect-ratio: 4 / 3; }
.fr-tape .fr-cap, .fr-print .fr-cap, .fr-photo .fr-cap, .fr-stamp .fr-cap {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 9px;
  background: rgba(251,249,244,.9);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .02em;
  color: var(--ink-n);
}
.tape {
  position: absolute; width: 34%; height: 26px;
  background: rgba(233, 222, 186, .78);
  box-shadow: 0 1px 2px rgba(31,30,27,.08);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
}
.tape.t1 { top: -12px; left: 8%; rotate: -4deg; }
.tape.t2 { top: -10px; right: 6%; rotate: 5deg; background: rgba(196, 98, 58, .35); }
.fr-print { padding: 4%; background: #F7F4EC; }
.fr-print img { aspect-ratio: 3 / 4; }
.fr-photo { padding: 0; border: 6px solid #FBF9F4; }
.fr-photo img { aspect-ratio: 3 / 4; }
.fr-stamp { padding: 3.5%; background: #EDE6D6; }
.fr-stamp img { aspect-ratio: 4 / 3; filter: sepia(.12) saturate(.95); }
.stampmark {
  position: absolute; right: -4%; top: -8%;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  border: 1.5px solid rgba(196, 98, 58, .85);
  box-shadow: inset 0 0 0 4px rgba(237,230,214,.1), inset 0 0 0 5.5px rgba(196,98,58,.6);
  color: var(--clay);
  font-family: var(--f-mono); font-size: 11px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
  rotate: 14deg;
  background: rgba(237,230,214,.35);
}

.tk { display: flex; background: var(--clay); color: #FBEFE4; border-radius: 6px; overflow: hidden; }
.tk-main { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-right: 2px dashed rgba(251,239,228,.45); }
.tk-top { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.tk-big { font-family: var(--f-serif); font-size: clamp(20px, 2vw, 30px); line-height: 1; letter-spacing: -.02em; }
.tk-sub { font-family: var(--f-mono); font-size: 10.5px; opacity: .85; }
.tk-stub { width: 25%; display: grid; place-content: center; text-align: center; font-family: var(--f-mono); font-size: 10.5px; }
.tk-stub b { font-size: clamp(16px, 1.6vw, 24px); font-weight: 500; }

.ix { background: var(--index-blue); color: #F2F4FF; padding: 16px 16px 14px; border-radius: 6px; display: flex; flex-direction: column; gap: 10px; }
.ix-h { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ix p { margin: 0; font-family: var(--f-mono); font-size: clamp(11px, .95vw, 13px); line-height: 1.5; }
.ix-f { align-self: flex-start; padding: 4px 8px; border-radius: 4px; background: #F5D547; color: #1C1B17; font-family: var(--f-mono); font-size: 10px; }

@media (max-width: 860px) {
  .table-stage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .scrap { position: relative; left: auto !important; top: auto !important; width: auto !important; }
  .scrap-ticket, .scrap-polaroid { grid-column: 1 / -1; }
  .table-stage.in .scrap { translate: 0 0; rotate: calc(var(--r) * .6); }
  .stampmark { width: 64px; height: 64px; font-size: 9px; }
}

/* ---------- (4) Towns ---------- */
.towns { background: var(--paper); padding: clamp(100px, 13vw, 180px) clamp(16px, 4vw, 56px) clamp(70px, 9vw, 120px); }
.towns-head { max-width: 1280px; margin: 0 auto clamp(40px, 6vw, 70px); }
.towns-head h2 { margin-top: 18px; }
.towns-head p { max-width: 46ch; margin: 22px 0 0; font-family: var(--f-serif); font-size: 19px; line-height: 1.45; color: var(--ink-n2); }
.towns-wrap { position: relative; max-width: 1280px; margin: 0 auto; }
.towns-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.towns-list li {
  border-bottom: 1px solid var(--rule);
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  transition-delay: calc(var(--i) * 60ms);
}
.towns.in .towns-list li { opacity: 1; transform: none; }
.towns-list button {
  width: 100%;
  display: grid; grid-template-columns: 56px 1fr auto auto; align-items: baseline; gap: 20px;
  padding: clamp(14px, 1.8vw, 22px) 4px;
  text-align: left;
  color: var(--ink-n);
  transition: padding .6s var(--ease-soft), color .3s;
}
.towns-list .tn { font-family: var(--f-mono); font-size: 12px; color: var(--ink-n3); }
.towns-list .tc { font-family: var(--f-serif); font-size: clamp(30px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -.03em; }
.towns-list .tc em { color: var(--willow); }
.towns-list .ts { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-n3); }
.towns-list .ta { font-size: 14px; color: var(--willow); opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .6s var(--ease-soft); min-width: 64px; text-align: right; }
.towns-list button:hover { padding-left: 18px; }
.towns-list button:hover .ta { opacity: 1; transform: none; }
.towns-float {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: clamp(180px, 18vw, 280px); aspect-ratio: 4 / 5;
  pointer-events: none;
  opacity: 0; scale: .85;
  transition: opacity .5s var(--ease-soft), scale .7s var(--ease-soft);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(31,30,27,.45);
}
.towns-float.on { opacity: 1; scale: 1; }
.towns-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.towns-float img.on { opacity: 1; }
@media (hover: none), (max-width: 760px) { .towns-float { display: none; } }
@media (max-width: 760px) {
  .towns-list button { grid-template-columns: 34px 1fr; row-gap: 4px; }
  .towns-list .ts { grid-column: 2; }
  .towns-list .ta { display: none; }
}

/* ---------- Partners ---------- */
.partners { background: var(--paper); padding: 30px 0 clamp(80px, 10vw, 130px); text-align: center; }
.partners-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-n3); }
.marquee {
  margin-top: 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: clamp(50px, 7vw, 110px); width: max-content; animation: marq 42s linear infinite; padding-inline: clamp(25px, 3.5vw, 55px); }
.marquee-track img { height: 40px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .6; mix-blend-mode: multiply; transition: opacity .4s, filter .4s; }
.marquee-track img:hover { opacity: 1; filter: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- (5) Join ---------- */
.join {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(60px, 8vw, 110px) clamp(14px, 4vw, 56px);
  overflow: hidden;
  isolation: isolate;
}
.join-bg { position: absolute; inset: 0; z-index: -1; }
.join-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.1); transform: scale(1.18); }
.join-bg::after { content: ""; position: absolute; inset: 0; background: rgba(244,239,230,.08); }
.join-card {
  width: min(1120px, 100%);
  display: grid; grid-template-columns: .92fr 1fr;
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(8px, 1vw, 14px);
  border-radius: 30px;
  background: var(--cream);
  box-shadow: 0 50px 120px -40px rgba(20,24,14,.55);
  will-change: transform, opacity;
}
.join-art { border-radius: 22px; overflow: hidden; min-height: 520px; }
.join-art img { width: 100%; height: 100%; object-fit: cover; }
.join-body { display: flex; flex-direction: column; padding: clamp(24px, 3.4vw, 50px) clamp(18px, 3vw, 44px) clamp(20px, 2.6vw, 34px); }
.join-body h2 { margin-top: 20px; font-size: clamp(34px, 3.9vw, 58px); line-height: 1.04; letter-spacing: -.03em; }
.join-body h2 em { color: var(--willow); }
.join-sub { margin: 16px 0 0; font-family: var(--f-serif); font-size: 18px; line-height: 1.45; color: var(--ink-n2); max-width: 38ch; }
.join-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.join-link { align-self: flex-start; margin-top: 18px; font-size: 15px; color: var(--ink-n3); }
.join-link:hover { color: var(--clay); text-decoration: underline; text-underline-offset: 4px; }
.join-sig { margin-top: auto; padding-top: 40px; display: flex; align-items: center; gap: 12px; color: var(--ink-n); }
.join-sig .leaf-glyph { color: var(--willow); }
.join-sig-name { font-family: var(--f-serif); font-size: 32px; letter-spacing: -.03em; }
.join-sig-line { font-family: var(--f-serif); font-size: 13px; line-height: 1.3; color: var(--ink-n2); padding-left: 12px; border-left: 1px solid var(--rule); }
@media (max-width: 860px) {
  .join-card { grid-template-columns: 1fr; }
  .join-art { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer { display: none; }
.ft {
  position: relative;
  background: var(--willow-dk);
  color: var(--cream);
  padding: clamp(70px, 9vw, 120px) clamp(20px, 4vw, 56px) 26px;
  overflow: hidden;
}
.ft-top { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; }
.ft-say { margin: 0; max-width: 16ch; font-family: var(--f-serif); font-size: clamp(34px, 3.8vw, 56px); line-height: 1.04; letter-spacing: -.03em; }
.ft-say em { color: #C9D6A5; }
.ft-help { margin-top: 32px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.ft-help span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(247,242,232,.55); margin-bottom: 4px; }
.ft-help a { color: var(--cream); text-decoration: underline; text-decoration-color: rgba(247,242,232,.3); text-underline-offset: 4px; }
.ft-help a:hover { text-decoration-color: var(--cream); }
.ft-cols { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 28px; }
.ft h4 { margin: 0 0 16px; font-family: var(--f-mono); font-weight: 400; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(247,242,232,.55); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ft ul a { font-size: 15px; color: rgba(247,242,232,.88); transition: color .25s; overflow-wrap: anywhere; }
.ft ul a[href^="mailto"] { font-size: 14px; overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 520px) { .ft ul a[href^="mailto"] { white-space: normal; overflow-wrap: anywhere; } }
.ft ul a:hover { color: #fff; }
.ft-mark {
  display: flex; justify-content: center;
  margin: clamp(60px, 8vw, 110px) 0 0;
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(110px, 25vw, 400px);
  line-height: .78;
  letter-spacing: -.055em;
  color: rgba(247,242,232,.94);
  user-select: none;
}
.ft-mark span { display: inline-block; animation: ftRise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; animation-delay: calc(var(--i) * 20ms); }
@keyframes ftRise { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.ft-base { max-width: 1280px; margin: 34px auto 0; padding-top: 20px; border-top: 1px solid rgba(247,242,232,.14); display: flex; justify-content: space-between; gap: 24px; font-size: 12.5px; color: rgba(247,242,232,.55); }
.ft-credits { max-width: 60ch; text-align: right; }
.ft-credits a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .ft-top { grid-template-columns: 1fr; gap: 44px; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .ft-base { flex-direction: column; }
  .ft-credits { text-align: left; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hx-panel, .hx-w > span, .hx-toc li, .hx-toc .rule, .hx-date, .hx-sub, .scrap, .towns-list li { transition: none !important; }
  .marquee-track, .hx-cue::after { animation: none !important; }
  .ft-mark span { animation: none !important; }
  .note { height: auto; }
  .note-sticky { position: static; height: auto; padding: 120px 0; }
  .note-text span { opacity: 1 !important; }
  .why { height: auto; }
  .why-sticky { position: static; height: 90vh; }
  .rise, .ph-w > span, .ph-art { transition: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
}
.hx-date span + span::before { content: "·"; margin-right: .9em; opacity: .7; }

/* ============================================================
   Inner pages
   ============================================================ */
.inner { background: var(--paper); overflow-x: clip; }
.inner h2 { font-size: clamp(38px, 5vw, 76px); line-height: 1.02; letter-spacing: -.03em; color: var(--ink-n); }
.inner h2 em, .inner h3 em { color: var(--willow); }

.rise { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 1.1s var(--ease-soft), transform 1.2s var(--ease-soft); }
.rise.in { opacity: 1; transform: none; }

/* ---------- page hero ---------- */
.ph {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
  min-height: min(92vh, 900px);
  max-width: 1440px; margin: 0 auto;
  padding: clamp(120px, 15vh, 170px) clamp(18px, 4vw, 56px) clamp(50px, 7vw, 90px);
}
.ph-text { padding-bottom: clamp(4px, 2vw, 30px); }
.ph-kick { opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.ph.on .ph-kick { opacity: 1; transform: none; }
.ph-title {
  margin: 22px 0 0;
  font-size: clamp(52px, 7.6vw, 128px);
  line-height: .96;
  letter-spacing: -.045em;
  color: var(--ink-n);
}
.ph-line { display: block; }
.ph-line.em { font-style: italic; color: var(--willow); }
.ph-w { display: inline-block; overflow: hidden; padding: 0 .02em .12em 0; margin-bottom: -.12em; margin-right: .2em; vertical-align: top; }
.ph-w > span { display: inline-block; transform: translateY(115%); transition: transform 1.25s var(--ease-fold); }
.ph.on .ph-w > span { transform: none; }
.ph-lede {
  max-width: 44ch; margin: 28px 0 0;
  font-family: var(--f-serif); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--ink-n2);
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.1s var(--ease-soft) .55s, transform 1.1s var(--ease-soft) .55s;
}
.ph-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease-soft) .7s, transform 1.1s var(--ease-soft) .7s; }
.ph.on .ph-lede, .ph.on .ph-actions { opacity: 1; transform: none; }
.ph-art {
  position: relative;
  height: min(70vh, 700px);
  border-radius: 18px;
  overflow: hidden;
  clip-path: inset(100% 0 0 0 round 18px);
  transition: clip-path 1.5s var(--ease-fold) .15s;
}
.ph.on .ph-art { clip-path: inset(0 0 0 0 round 18px); }
.ph-art img { position: absolute; inset: -5% 0; width: 100%; height: 110%; object-fit: cover; transform: scale(1.06); will-change: transform; }
@media (max-width: 860px) {
  .ph { grid-template-columns: 1fr; min-height: 0; align-items: start; padding-top: 110px; }
  .ph-art { height: auto; aspect-ratio: 4 / 3; order: 2; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(80px, 11vw, 150px) clamp(18px, 4vw, 56px); }
.sec > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.sec-tan { background: var(--paper-2); }
.sh { margin-bottom: clamp(40px, 6vw, 80px); }
.sh h2 { margin-top: 18px; max-width: 18ch; }
.sh.center { text-align: center; }
.sh.center h2 { margin-inline: auto; }
.sh-sub { max-width: 46ch; margin: 22px 0 0; font-family: var(--f-serif); font-size: 19px; line-height: 1.45; color: var(--ink-n2); }
.center-actions { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* ---------- frames ---------- */
.frame { margin: 0; position: relative; rotate: var(--tilt, 0deg); transition: rotate .8s var(--ease-soft), scale .8s var(--ease-soft), filter .8s; filter: drop-shadow(0 18px 24px rgba(31,30,27,.16)) drop-shadow(0 2px 3px rgba(31,30,27,.1)); }
.frame:hover { rotate: 0deg; scale: 1.02; filter: drop-shadow(0 30px 40px rgba(31,30,27,.22)) drop-shadow(0 2px 4px rgba(31,30,27,.1)); }
.frame-img { overflow: hidden; background: var(--paper-3); }
.frame-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-polaroid { background: #FBF9F4; padding: 3.5% 3.5% 0; }
.frame-polaroid figcaption { padding: 12px 4px 16px; font-family: var(--f-serif); font-style: italic; font-size: clamp(14px, 1.2vw, 17px); color: var(--ink-n2); }
.frame-print { background: #F7F4EC; padding: 4%; }
.frame-plain { border: 6px solid #FBF9F4; }
.frame-tape { background: none; }
.frame-print figcaption, .frame-plain figcaption, .frame-tape figcaption {
  position: absolute; left: 10px; bottom: 10px; padding: 5px 9px;
  background: rgba(251,249,244,.92); font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-n);
}
.frame-print figcaption { left: calc(4% + 10px); bottom: calc(4% + 10px); }

/* ---------- story rows (Our Work) ---------- */
.stories { display: grid; gap: clamp(90px, 12vw, 170px); }
.story { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.story.flip .story-frames { order: 2; }
.story-frames { position: relative; min-height: clamp(360px, 38vw, 560px); }
.story-f { position: absolute; will-change: translate; }
.story-frames.n3 .f0 { left: 0; top: 8%; width: 66%; z-index: 2; }
.story-frames.n3 .f1 { right: 0; top: 0; width: 34%; z-index: 1; }
.story-frames.n3 .f2 { right: 8%; bottom: 0; width: 30%; z-index: 3; }
.story-frames.n2 .f0 { left: 0; top: 0; width: 70%; z-index: 2; }
.story-frames.n2 .f1 { right: 0; bottom: 0; width: 48%; z-index: 3; }
.story-text .kicker { color: var(--clay); }
.story-text h3 { margin: 16px 0 0; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -.03em; }
.story-text p { margin: 20px 0 0; max-width: 40ch; font-family: var(--f-serif); font-size: 19px; line-height: 1.5; color: var(--ink-n2); }
.big-num { font-style: italic; color: var(--willow); }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
  .story.flip .story-frames { order: 0; }
  .story-frames { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .story-f { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; translate: none !important; }
  .story-f.f0 { grid-column: 1 / -1; }
}

/* ---------- branch cards ---------- */
.branch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.fcard.static { cursor: default; }
.fcard.static:hover { transform: none; }
.fcard.rise.in:hover { transform: translateY(-6px); }
.fcard-desc { margin: 14px 0 0; font-family: var(--f-serif); font-size: 16px; line-height: 1.5; color: var(--ink-n2); }
@media (max-width: 1100px) { .branch-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .branch-grid { grid-template-columns: 1fr; } }

/* ---------- reels ---------- */
.reels { display: flex; justify-content: center; gap: clamp(20px, 4vw, 60px); flex-wrap: wrap; }
.reel { margin: 0; width: min(360px, 88vw); }
.reel-screen { aspect-ratio: 9 / 15.5; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 8px #FBF9F4, 0 30px 60px -24px rgba(31,30,27,.35); }
.reel-screen iframe { width: 100%; height: 100%; border: 0; display: block; }
.reel figcaption { margin-top: 20px; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--ink-n2); }

/* ---------- ambassador ---------- */
.duty-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.duty-photos { position: sticky; top: 110px; padding-bottom: 60px; }
.duty-photos > .rise:first-child { width: 78%; }
.duty-photo-2 { width: 46%; margin: -34% 0 0 auto; position: relative; z-index: 2; }
.duty-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.duty-list li { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: clamp(18px, 2.2vw, 28px) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.duty-list .n { font-family: var(--f-mono); font-size: 12px; color: var(--clay); }
.duty-list .t { font-family: var(--f-serif); font-size: clamp(22px, 2.3vw, 32px); line-height: 1.2; letter-spacing: -.02em; }
@media (max-width: 860px) {
  .duty-grid { grid-template-columns: 1fr; }
  .duty-photos { position: relative; top: 0; }
}

/* index cards */
.idx-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 30px); }
.idx-card { border-radius: 10px; padding: clamp(22px, 2.4vw, 32px); min-height: 250px; display: flex; flex-direction: column; rotate: var(--tilt); box-shadow: 0 24px 40px -24px rgba(31,30,27,.4); }
.idx-card.rise.in:hover { rotate: 0deg; }
.idx-card { transition: opacity 1.1s var(--ease-soft), transform 1.2s var(--ease-soft), rotate .8s var(--ease-soft); }
.idx-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.idx-card h3 { margin: auto 0 0; padding-top: 40px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.02em; }
.idx-card p { margin: 12px 0 0; font-family: var(--f-mono); font-size: 13px; line-height: 1.55; }
.idx-clay { background: var(--clay); color: #FBEFE4; }
.idx-blue { background: var(--index-blue); color: #F2F4FF; }
.idx-sage { background: #CBD6B4; color: var(--willow-dk); }
@media (max-width: 860px) { .idx-row { grid-template-columns: 1fr; } .idx-card { min-height: 0; } }

/* apply section */
.apply-sec { background: var(--paper-2); padding: clamp(80px, 10vw, 140px) clamp(18px, 4vw, 56px); scroll-margin-top: 20px; }
.apply-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.apply-side { position: sticky; top: 110px; }
.apply-side h2 { margin-top: 18px; font-size: clamp(36px, 4vw, 60px); }
.apply-side p { margin: 20px 0 36px; font-family: var(--f-serif); font-size: 18px; line-height: 1.5; color: var(--ink-n2); max-width: 36ch; }
.apply-side .frame { width: 78%; }
.apply-form .card { background: #FBF8F2; border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 40px 80px -50px rgba(31,30,27,.45); }
.apply-form .form-row label { font-family: var(--f-sans); font-weight: 500; font-size: 14px; color: var(--ink-n); letter-spacing: 0; text-transform: none; }
.apply-form input, .apply-form textarea { background: #EFEAE0; border: 1px solid transparent; border-radius: 10px; font-family: var(--f-sans); font-size: 15.5px; color: var(--ink-n); transition: border-color .2s, background .2s, box-shadow .2s; }
.apply-form input:focus, .apply-form textarea:focus { outline: none; background: #fff; border-color: var(--willow); box-shadow: 0 0 0 3px rgba(62,90,58,.12); }
.apply-form .btn { border-radius: 12px; }
.apply-form .btn-primary { background: var(--ink-n); color: var(--cream); }
.apply-form button[style*="--r-pill"] { border-radius: 10px !important; }
@media (max-width: 960px) {
  .apply-grid { grid-template-columns: 1fr; }
  .apply-side { position: relative; top: 0; }
  .apply-side .frame { display: none; }
}

/* ---------- professors ---------- */
.prof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 5vw, 70px) clamp(24px, 3vw, 44px); }
.prof-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-3); border: 8px solid #FBF9F4; box-shadow: 0 24px 40px -26px rgba(31,30,27,.45); rotate: var(--tilt); transition: rotate .8s var(--ease-soft), scale .8s var(--ease-soft); }
.prof:hover .prof-photo { rotate: 0deg; scale: 1.02; }
.prof-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; filter: saturate(.9); transition: filter .8s; }
.prof:hover .prof-photo img { filter: none; }
.prof-org { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-n3); }
.prof-badge { color: #fff; font-weight: 600; font-size: 10px; letter-spacing: .06em; padding: 4px 7px; border-radius: 4px; }
.prof h3 { margin: 12px 0 0; font-size: clamp(26px, 2.2vw, 32px); letter-spacing: -.02em; }
.prof-title { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--willow); }
.prof p { margin: 14px 0 0; font-family: var(--f-serif); font-size: 16.5px; line-height: 1.55; color: var(--ink-n2); }
@media (max-width: 1000px) { .prof-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .prof-grid { grid-template-columns: 1fr; } }

/* ---------- officers ---------- */
.sec-table { background: var(--paper-2); }
.sec-table::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(31,30,27,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,30,27,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 55%, #000, transparent); mask-image: radial-gradient(90% 80% at 50% 55%, #000, transparent);
}
.officer-wall { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(30px, 4vw, 60px) clamp(20px, 3vw, 44px); }
.officer { width: calc((100% - 3 * clamp(20px, 3vw, 44px)) / 4); }
.officer-you .frame { width: 100%; text-align: left; cursor: pointer; }
.you-slot { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #ECE5D8 0 10px, #E6DECE 10px 20px); border: 1.5px dashed rgba(31,30,27,.22); }
.you-slot span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--ink-n3); }
.officer-you figcaption span { color: var(--clay) !important; }
.officer .frame { rotate: var(--tilt); }
.officer .frame figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: clamp(17px, 1.5vw, 21px); }
.officer .frame figcaption span { font-family: var(--f-mono); font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-n3); }
.officer:nth-child(4n+2) { margin-top: 40px; }
.officer:nth-child(4n+4) { margin-top: 24px; }
@media (max-width: 900px) { .officer { width: calc((100% - clamp(20px, 3vw, 44px)) / 2); } .officer:nth-child(n) { margin-top: 0; } .officer:nth-child(2n) { margin-top: 30px; } }

/* ---------- about ---------- */
.about-note { height: 200vh; }
.stat-band { padding-top: 0; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.stat-cell { padding: 30px 20px 10px 0; border-right: 1px solid var(--rule); }
.stat-cell:last-child { border-right: 0; }
.stat-cell + .stat-cell { padding-left: 24px; }
.stat-n { display: block; font-family: var(--f-serif); font-weight: 300; font-size: clamp(64px, 8vw, 128px); line-height: .95; letter-spacing: -.05em; color: var(--willow); }
.stat-l { display: block; margin-top: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-n3); }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr 1fr; } .stat-cell:nth-child(2) { border-right: 0; } .stat-cell:nth-child(3) { padding-left: 0; } }

.strip-sec { padding: clamp(40px, 6vw, 80px) 0 clamp(90px, 11vw, 150px); overflow: hidden; }
.strip-head { max-width: 1280px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 56px); }
.strip-track { display: flex; align-items: flex-start; gap: clamp(26px, 3vw, 50px); padding: 10px clamp(18px, 4vw, 56px) 40px; width: max-content; will-change: transform; }
.strip-item { width: clamp(240px, 26vw, 380px); flex: 0 0 auto; }

.values-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.values-art { position: sticky; top: 110px; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; }
.values-art img { width: 100%; height: 100%; object-fit: cover; }
.values { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.values li { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--rule); }
.values .n { font-family: var(--f-mono); font-size: 12px; color: var(--clay); padding-top: 12px; }
.values h3 { margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -.025em; }
.values p { margin: 12px 0 0; font-family: var(--f-serif); font-size: 18px; line-height: 1.5; color: var(--ink-n2); max-width: 46ch; }
@media (max-width: 860px) { .values-grid { grid-template-columns: 1fr; } .values-art { position: relative; top: 0; aspect-ratio: 16 / 10; } }

/* ---------- donate ---------- */
.give-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.give-card { background: #FBF8F2; border: 1px solid var(--rule); border-radius: 18px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 40px 80px -50px rgba(31,30,27,.45); }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: #EFEAE0; border-radius: 12px; }
.seg button { padding: 11px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink-n3); transition: background .35s var(--ease-soft), color .35s, box-shadow .35s; }
.seg button.on { background: #FBF8F2; color: var(--ink-n); box-shadow: 0 1px 2px rgba(31,30,27,.08), 0 4px 12px -4px rgba(31,30,27,.14); }
.give-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: -6px; }
.give-amounts button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 12px; border-radius: 12px; background: #EFEAE0; border: 1px solid transparent; transition: background .3s, border-color .3s, transform .5s var(--ease-soft); text-align: left; }
.give-amounts button:hover { background: #E8E1D3; }
.give-amounts button.on { background: var(--willow-dk); color: var(--cream); }
.give-amounts .v { font-family: var(--f-serif); font-size: 26px; letter-spacing: -.03em; line-height: 1; }
.give-amounts .l { font-family: var(--f-mono); font-size: 10.5px; opacity: .7; }
.give-custom { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 12px; background: #EFEAE0; border: 1px solid transparent; transition: border-color .2s, background .2s; }
.give-custom.on, .give-custom:focus-within { border-color: var(--willow); background: #fff; }
.give-custom span { font-family: var(--f-serif); font-size: 22px; color: var(--ink-n3); }
.give-custom input { flex: 1; border: 0; background: transparent; padding: 15px 0; font-size: 16px; font-family: var(--f-sans); outline: none; color: var(--ink-n); }
.give-impact { margin: 4px 0 0; font-family: var(--f-serif); font-size: 18px; line-height: 1.45; color: var(--ink-n2); animation: whyIn .7s var(--ease-soft) both; }
.give-impact b { font-weight: 500; color: var(--willow); }
.give-go { justify-content: center; padding: 17px 22px; font-size: 16px; }
.give-trust { display: flex; justify-content: center; gap: 20px; font-size: 12.5px; color: var(--ink-n3); }
.give-trust span { display: inline-flex; align-items: center; gap: 6px; }
.give-h { margin-top: 18px; font-size: clamp(34px, 3.6vw, 54px) !important; }
.funds { display: grid; gap: 20px; margin: 36px 0 48px; }
.fund-head { display: flex; justify-content: space-between; font-size: 15px; color: var(--ink-n2); }
.fund-head b { font-family: var(--f-serif); font-weight: 400; font-size: 20px; color: var(--ink-n); }
.fund-bar { margin-top: 8px; height: 6px; border-radius: 6px; background: var(--paper-3); overflow: hidden; }
.fund-bar i { display: block; height: 100%; width: 100%; background: var(--willow); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease-fold); transition-delay: calc(var(--i) * 140ms); }
.funds.in .fund-bar i { transform: scaleX(var(--v)); }
.give-side .frame { width: 70%; margin-left: auto; }
@media (max-width: 900px) { .give-grid { grid-template-columns: 1fr; } .give-amounts { grid-template-columns: 1fr 1fr; } }

/* ---------- get help ---------- */
.lines { list-style: none; margin: 0 auto; padding: 0; border-top: 1px solid var(--rule); }
.lines a { display: grid; grid-template-columns: 1.1fr 1.3fr auto; grid-template-rows: auto auto; column-gap: 30px; align-items: baseline; padding: clamp(22px, 2.6vw, 34px) 6px; border-bottom: 1px solid var(--rule); transition: background .4s, padding .6s var(--ease-soft); }
.lines a:hover { background: rgba(62,90,58,.06); padding-left: 18px; }
.lines-tag { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--clay); margin-bottom: 8px; }
.lines-name { font-family: var(--f-serif); font-size: clamp(28px, 3vw, 44px); letter-spacing: -.025em; line-height: 1.05; }
.lines-desc { font-family: var(--f-serif); font-size: 17px; color: var(--ink-n2); }
.lines-contact { font-family: var(--f-mono); font-size: clamp(15px, 1.4vw, 19px); color: var(--willow); white-space: nowrap; }
.lines-note { margin-top: 40px; }
.lines-note p { max-width: 60ch; font-family: var(--f-serif); font-size: 18px; line-height: 1.5; color: var(--ink-n2); padding: 20px 24px; border-radius: 12px; background: var(--paper-2); }
.lines-note a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .lines a { grid-template-columns: 1fr; row-gap: 6px; }
}

/* ---------- portal ---------- */
.portal-scene { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 100px clamp(12px, 3vw, 40px) 50px; overflow: hidden; isolation: isolate; }
.portal-bg { position: absolute; inset: 0; z-index: -1; }
.portal-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(1.05); transform: scale(1.12); }
.portal-card { width: min(1060px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; border-radius: 28px; background: var(--cream); box-shadow: 0 50px 120px -40px rgba(20,24,14,.6); animation: portalIn 1.1s var(--ease-soft) both; }
@keyframes portalIn { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
.portal-art { border-radius: 20px; overflow: hidden; min-height: 560px; }
.portal-art img { width: 100%; height: 100%; object-fit: cover; }
.portal-form { display: flex; flex-direction: column; padding: clamp(18px, 3vw, 40px) clamp(14px, 3vw, 40px) clamp(14px, 2vw, 26px); }
.portal-back { align-self: flex-start; font-size: 14px; color: var(--ink-n2); padding: 4px 0; }
.portal-back:hover { color: var(--clay); }
.portal-form-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px 0; }
.portal-h { margin: 0 0 8px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.03em; color: var(--ink-n); }
.portal-h em { color: var(--willow); }
.portal-brand { display: flex; align-items: center; gap: 14px; padding-top: 18px; }
.portal-brand-mark { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; letter-spacing: .16em; font-size: 17px; color: var(--ink-n); }
.portal-brand-mark .leaf-glyph { color: var(--willow); }
.portal-brand-line { font-family: var(--f-serif); font-size: 13px; line-height: 1.3; color: var(--ink-n2); padding-left: 14px; border-left: 1px solid var(--rule); }
.portal-dash-shell { min-height: 100vh; padding: clamp(110px, 14vh, 150px) clamp(18px, 4vw, 56px) 80px; background: var(--paper); }
.portal-dash-shell h1 { font-family: var(--f-serif) !important; font-weight: 400 !important; }
.portal-dash-shell button[style*="--r-pill"] { border-radius: 10px !important; }
@media (max-width: 820px) {
  .portal-card { grid-template-columns: 1fr; }
  .portal-art { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ============================================================
   Home title: never clip the tall letters
   ============================================================ */
.hx-title { font-size: clamp(56px, min(10.4vw, 17vh), 176px); }
.hx-w { padding: .16em .03em .14em; margin: -.16em 0 -.14em; }

/* ============================================================
   Page openings (heroes.jsx)
   ============================================================ */
.rw-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .04em .16em 0; margin: -.16em .2em -.16em 0; }
.rw-w > span { display: inline-block; transform: translateY(118%); transition: transform 1.25s var(--ease-fold); }
.on .rw-w > span { transform: none; }
.wh h1, .bh h1, .fh h1, .rh h1, .gh h1, .bre h1 {
  margin: 20px 0 0;
  font-size: clamp(46px, 6.8vw, 112px);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--ink-n);
}
.wh h1 em, .bh h1 em, .fh h1 em, .rh h1 em, .gh h1 em, .bre h1 em { color: var(--willow); }
.hero-fade { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease-soft) .6s, transform 1.1s var(--ease-soft) .6s; }
.bh-lede, .bh-inputs, .bh-actions, .fh-lede, .rh-center p, .gh-lede, .gh-chips, .bre-lede, .bre-actions, .ch-foot, .wh .kicker, .bh .kicker, .fh .kicker, .rh .kicker, .gh .kicker, .bre .kicker, .ch-kick {
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.1s var(--ease-soft) .55s, transform 1.1s var(--ease-soft) .55s;
}
.on .bh-lede, .on .bh-inputs, .on .bh-actions, .on .fh-lede, .on .rh-center p, .on .gh-lede, .on .gh-chips, .on .bre-lede, .on .bre-actions, .on .ch-foot, .wh.on .kicker, .bh.on .kicker, .fh.on .kicker, .rh.on .kicker, .gh.on .kicker, .bre.on .kicker, .on .ch-kick { opacity: 1; transform: none; }
.wh .kicker, .bh .kicker, .fh .kicker, .rh .kicker, .gh .kicker, .bre .kicker, .ch-kick { transition-delay: 0s; }
.bh-inputs, .gh-chips, .bre-actions { transition-delay: .7s; }
.bh-actions { transition-delay: .82s; }

/* ---------- Our Work: branch accordion ---------- */
.wh { padding: clamp(120px, 15vh, 160px) clamp(16px, 3vw, 44px) clamp(60px, 8vw, 110px); max-width: 1500px; margin: 0 auto; }
.wh-head { display: flex; flex-direction: column; padding: 0 clamp(4px, 1vw, 12px); }
.wh-panels { display: flex; gap: 10px; height: clamp(340px, calc(100svh - 440px), 620px); margin-top: clamp(24px, 3vw, 40px); }
.wh-p {
  position: relative; flex: 1; min-width: 0;
  border-radius: 14px; overflow: hidden;
  background: #111;
  text-align: left;
  clip-path: inset(100% 0 0 0 round 14px);
  transition: flex 1.15s cubic-bezier(.65, 0, .25, 1), clip-path 1.3s var(--ease-fold);
  transition-delay: 0s, calc(250ms + var(--i) * 110ms);
}
.wh.on .wh-p { clip-path: inset(0 0 0 0 round 14px); }
.wh-p.open { flex: 4.4; }
.wh-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transform: scale(1.12); transition: transform 1.6s var(--ease-soft); }
.wh-p.open img { transform: scale(1); }
.wh-tab {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 10px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 14px 8px; border-radius: 8px;
  background: rgba(247,242,232,.92); color: var(--ink-n);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  transition: opacity .45s;
}
.wh-tab .n { color: var(--clay); }
.wh-p.open .wh-tab { opacity: 0; }
.wh-card {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  max-width: 460px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px 22px; border-radius: 12px;
  background: rgba(247,242,232,.95); color: var(--ink-n);
  opacity: 0; transform: translateY(24px);
  transition: opacity .4s, transform .5s var(--ease-soft);
}
.wh-p.open .wh-card { opacity: 1; transform: none; transition: opacity .7s .5s, transform .9s var(--ease-soft) .5s; }
.wh-card .n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--clay); }
.wh-card .t { font-family: var(--f-serif); font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.03em; }
.wh-card .l { font-family: var(--f-serif); font-size: 18px; line-height: 1.35; color: var(--ink-n2); }
@media (max-width: 760px) {
  .wh-panels { flex-direction: column; height: 620px; gap: 8px; }
  .wh-p.open { flex: 5; }
  .wh-tab { writing-mode: horizontal-tb; transform: none; top: 50%; bottom: auto; translate: 0 -50%; padding: 8px 12px; }
}

/* ---------- Ambassador: badge ---------- */
.bh {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(20px, 4vw, 60px);
  min-height: 100vh; min-height: 100svh;
  max-width: 1440px; margin: 0 auto;
  padding: clamp(110px, 14vh, 150px) clamp(18px, 4vw, 56px) 60px;
  overflow: hidden;
}
.bh-lede { max-width: 42ch; margin: 24px 0 0; font-family: var(--f-serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--ink-n2); }
.bh-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; max-width: 520px; }
.bh-inputs label { display: flex; flex-direction: column; gap: 6px; }
.bh-inputs span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-n3); }
.bh-inputs input { padding: 13px 14px; border-radius: 10px; border: 1px solid transparent; background: #EFEAE0; font: 15.5px var(--f-sans); color: var(--ink-n); outline: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.bh-inputs input:focus { background: #fff; border-color: var(--willow); box-shadow: 0 0 0 3px rgba(62,90,58,.12); }
.bh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bh-stage { position: relative; align-self: stretch; min-height: 560px; }
.bh-swing {
  position: absolute; left: 50%; top: -160px;
  width: 300px; margin-left: -150px;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 0;
  will-change: transform;
  translate: 0 -60px; opacity: 0;
  transition: translate 1.4s var(--ease-fold) .2s, opacity .8s .2s;
}
.bh.on .bh-swing { translate: 0 0; opacity: 1; }
.bh-strap { width: 28px; height: 250px; border-radius: 3px; background: repeating-linear-gradient(180deg, #3E5A3A 0 3px, #46663F 3px 6px); box-shadow: inset -3px 0 6px rgba(0,0,0,.18); }
.bh-clip { width: 46px; height: 30px; margin-top: -4px; border-radius: 6px 6px 10px 10px; background: linear-gradient(180deg, #E3E1DA, #A9A69C); box-shadow: 0 3px 6px rgba(0,0,0,.2); }
.badge {
  width: 300px; margin-top: -10px;
  border-radius: 18px; overflow: hidden;
  background: #FBF8F2;
  box-shadow: 0 40px 70px -30px rgba(31,30,27,.5), 0 2px 4px rgba(31,30,27,.12), inset 0 0 0 1px rgba(31,30,27,.06);
  padding-bottom: 18px;
  text-align: center;
}
.badge-top { height: 50px; background: var(--clay); display: flex; justify-content: center; padding-top: 14px; }
.badge-hole { width: 64px; height: 11px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 2px 3px rgba(0,0,0,.25); }
.badge-brand { display: inline-flex; align-items: center; gap: 2px; margin-top: 16px; font-weight: 600; font-size: 13px; letter-spacing: .18em; color: var(--ink-n); }
.badge-brand .leaf-glyph { color: var(--willow); }
.badge-photo { position: relative; width: 148px; height: 148px; margin: 16px auto 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(31,30,27,.08); }
.badge-photo img { width: 100%; height: 100%; object-fit: cover; }
.badge-photo span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-serif); font-size: 58px; color: var(--cream); text-shadow: 0 2px 20px rgba(0,0,0,.35); letter-spacing: -.03em; }
.badge-name { margin: 16px 18px 0; font-family: var(--f-serif); font-size: 30px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink-n); overflow-wrap: anywhere; }
.badge-role { margin-top: 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); }
.badge-school { margin: 6px 18px 0; font-family: var(--f-serif); font-style: italic; font-size: 16px; color: var(--ink-n2); }
.badge-foot { display: flex; justify-content: space-between; align-items: center; margin: 18px 20px 0; padding-top: 14px; border-top: 1px dashed rgba(31,30,27,.2); font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-n3); }
.badge-bars { display: flex; gap: 2px; height: 20px; }
.badge-bars i { display: block; height: 100%; background: var(--ink-n); }
@media (max-width: 860px) {
  .bh { grid-template-columns: 1fr; }
  .bh-stage { min-height: 520px; order: -1; margin-top: -30px; }
  .bh-swing { top: -200px; transform-origin: 50% 0; scale: .86; }
  .bh-inputs { grid-template-columns: 1fr; }
}

/* ---------- Professors: fanned hand ---------- */
.fh { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: clamp(120px, 15vh, 160px) 18px 0; overflow: hidden; }
.fh-text { text-align: center; max-width: 980px; }
.fh-lede { margin: 20px auto 0; max-width: 40ch; font-family: var(--f-serif); font-size: 19px; line-height: 1.45; color: var(--ink-n2); }
.fh-hand { position: relative; width: 100%; flex: 1; min-height: clamp(360px, 48vh, 500px); margin-top: 10px; }
.fh-card {
  position: absolute; left: 50%; bottom: 4%;
  width: clamp(140px, 14vw, 205px); aspect-ratio: 3 / 4;
  border: 7px solid #FBF9F4; border-radius: 6px; overflow: hidden;
  background: var(--paper-3);
  box-shadow: 0 30px 50px -24px rgba(31,30,27,.5);
  transform-origin: 50% 140%;
  transform: translateX(calc(-50% + var(--x))) translateY(var(--y, 0px)) rotate(var(--r)) scale(var(--s, 1));
  transition: transform 1.3s var(--ease-fold) var(--d), box-shadow .5s;
  cursor: default;
}
.fh:not(.on) .fh-card { --x: 0vw !important; --r: 0deg !important; --y: 90%; }
.fh-card.hot { --y: -44px; --s: 1.07; transition: transform .6s var(--ease-soft); box-shadow: 0 40px 70px -24px rgba(31,30,27,.6); }
.fh-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.fh-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: rgba(251,249,244,.95); font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-n3); opacity: 0; transform: translateY(100%); transition: opacity .4s, transform .5s var(--ease-soft); }
.fh-cap b { font-family: var(--f-serif); font-weight: 400; font-size: 17px; letter-spacing: -.01em; color: var(--ink-n); }
.fh-card.hot .fh-cap { opacity: 1; transform: none; }
@media (max-width: 700px) { .fh-card { width: 118px; } .fh-hand { min-height: 300px; } }

/* ---------- Officers: ring of faces ---------- */
.rh { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 90px 16px 40px; }
.rh-ring {
  --D: min(92vw, 880px, 112vh);
  --R: calc(var(--D) / 2 - 58px);
  position: absolute; left: 50%; top: 52%;
  width: var(--D); height: var(--D);
  margin: calc(var(--D) / -2) 0 0 calc(var(--D) / -2);
  border-radius: 50%;
  animation: ringSpin 110s linear infinite;
}
.rh-ring::before { content: ""; position: absolute; inset: 58px; border-radius: 50%; border: 1px dashed rgba(31,30,27,.14); }
.rh-slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--R)) rotate(calc(-1 * var(--a))); }
.rh-face {
  position: absolute; width: 104px; height: 104px; left: -52px; top: -52px;
  animation: ringSpin 110s linear infinite reverse;
  scale: 0; opacity: 0;
  transition: scale 1s var(--ease-soft) var(--d), opacity .8s var(--d);
}
.rh.on .rh-face { scale: 1; opacity: 1; }
.rh-face img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: 50%; border: 4px solid #FBF9F4; box-shadow: 0 16px 30px -14px rgba(31,30,27,.5); transition: transform .5s var(--ease-soft); }
.rh-face span { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); font-family: var(--f-serif); font-style: italic; font-size: 15px; color: var(--ink-n2); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.rh-face:hover img { transform: scale(1.12); }
.rh-face:hover span { opacity: 1; }
.rh:hover .rh-ring, .rh:hover .rh-face { animation-play-state: paused; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.rh-center { position: relative; z-index: 2; text-align: center; max-width: 520px; }
.rh-center h1 { font-size: clamp(42px, 5.6vw, 88px) !important; }
.rh-center p { margin: 18px auto 0; max-width: 32ch; font-family: var(--f-serif); font-size: 18px; line-height: 1.45; color: var(--ink-n2); }
@media (max-width: 700px) {
  .rh-ring { --D: 128vw; top: 50%; }
  .rh-face { width: 60px; height: 60px; left: -30px; top: -30px; }
  .rh-center { max-width: 250px; }
  .rh-center p { display: none; }
}

/* ---------- Apply: letter + envelope ---------- */
.lh {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(110px, 14vh, 150px) 16px 70px;
  background: var(--paper-2);
  overflow: hidden;
}
.lh::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(31,30,27,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,30,27,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 50%, #000, transparent);
}
.lh-scene { position: relative; width: min(660px, 100%); perspective: 1400px; }
.letter {
  position: relative; z-index: 2;
  padding: clamp(28px, 5vw, 52px) clamp(22px, 5vw, 56px) clamp(26px, 4vw, 44px);
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(47,79,216,.07) 33px 34px) 0 110px / 100% auto no-repeat,
    #FDFBF6;
  box-shadow: 0 50px 90px -40px rgba(31,30,27,.5), 0 2px 4px rgba(31,30,27,.08);
  opacity: 0; transform: translateY(46%) scale(.94);
  transition: transform 1.5s var(--ease-fold) .75s, opacity .9s ease .75s;
}
.lh.on .letter { opacity: 1; transform: none; }
.letter-date { display: block; text-align: right; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-n3); }
.letter-dear { display: block; margin-top: 18px; font-family: var(--f-serif); font-style: italic; font-size: 22px; color: var(--ink-n2); }
.letter h1 { margin: 12px 0 0; font-size: clamp(38px, 5vw, 66px); line-height: 1.02; letter-spacing: -.035em; color: var(--ink-n); }
.letter h1 em { color: var(--willow); }
.letter p { margin: 20px 0 0; font-family: var(--f-serif); font-size: 18.5px; line-height: 1.55; color: var(--ink-n2); }
.letter-sign { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--ink-n3); }
.letter-sign b { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 22px; color: var(--ink-n); }
.letter-sign .leaf-glyph { color: var(--willow); }
.letter-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.env { position: absolute; left: -7%; right: -7%; pointer-events: none; transition: transform 1.2s var(--ease-fold) 1.9s, opacity .9s ease 2s; }
.env-back { bottom: -40px; height: 56%; border-radius: 10px; background: #D6C9AE; z-index: 1; }
.env-front { bottom: -40px; height: 56%; border-radius: 10px; background: #E4D8BF; z-index: 3; clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); box-shadow: 0 30px 60px -30px rgba(31,30,27,.45); }
.env-stamp { position: absolute; right: 22px; bottom: 20px; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; text-align: center; border: 1.5px solid rgba(196,98,58,.8); color: var(--clay); font-family: var(--f-mono); font-size: 10px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; rotate: 12deg; }
.env-flap {
  top: calc(44% + 40px); height: 32%;
  background: #DCCFB4; z-index: 4;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transform: rotateX(0deg);
  transition: transform .8s var(--ease-fold) .15s, z-index 0s .55s, opacity .9s ease 2s;
}
.lh.on .env-flap { transform: rotateX(180deg); z-index: 0; }
.lh.on .env-back, .lh.on .env-front { transform: translateY(70%); opacity: 0; }
.lh.on .env-flap { opacity: 0; }

/* ---------- About: cut-out words ---------- */
.ch { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(120px, 15vh, 160px) 0 clamp(50px, 6vw, 80px); overflow: hidden; }
.ch-kick { margin: 0 clamp(18px, 4vw, 56px); }
.ch-title { margin: 18px 0 0; font-size: clamp(64px, 14vw, 250px); line-height: .92; letter-spacing: -.055em; white-space: nowrap; }
.ch-l1, .ch-l2 { display: block; will-change: transform; }
.ch-l1 { padding-left: clamp(18px, 4vw, 56px); color: var(--ink-n); }
.ch-l2 {
  font-style: italic;
  text-align: right;
  padding: 0 clamp(18px, 4vw, 56px) .08em 0;
  color: transparent;
  background-size: 150% auto;
  background-position: 30% 40%;
  -webkit-background-clip: text; background-clip: text;
  filter: saturate(1.15) contrast(1.05);
}
.ch-l1, .ch-l2 { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-fold); }
.ch-l2 { transition-delay: .25s; }
.ch.on .ch-l1, .ch.on .ch-l2 { clip-path: inset(-10% -5% -20% -5%); }
.ch-foot { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: clamp(30px, 5vw, 60px); padding: 0 clamp(18px, 4vw, 56px); }
.ch-foot p { max-width: 42ch; margin: 0; font-family: var(--f-serif); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--ink-n2); }
.ch-seal { width: clamp(110px, 12vw, 170px); flex: 0 0 auto; animation: ringSpin 36s linear infinite; }
.ch-seal text { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .22em; fill: var(--clay); }
@media (max-width: 700px) {
  .ch-title { font-size: 13.6vw; }
  .ch-l2 { text-align: left; padding-left: clamp(18px, 4vw, 56px); }
  .ch-foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- Donate: growing willow ---------- */
.gh { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(20px, 4vw, 60px); min-height: 100vh; min-height: 100svh; max-width: 1440px; margin: 0 auto; padding: clamp(110px, 14vh, 150px) clamp(18px, 4vw, 56px) 50px; }
.gh-lede { max-width: 40ch; margin: 24px 0 0; font-family: var(--f-serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--ink-n2); }
.gh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.gh-chips button { padding: 12px 20px; border-radius: 10px; background: #EFEAE0; font-family: var(--f-serif); font-size: 22px; letter-spacing: -.02em; color: var(--ink-n); transition: background .3s, color .3s; }
.gh-chips button:hover { background: #E6DECF; }
.gh-chips button.on { background: var(--willow-dk); color: var(--cream); }
.gh-tree { margin: 0; display: flex; flex-direction: column; align-items: center; }
.gh-tree svg { width: 100%; max-width: 560px; max-height: 66vh; overflow: visible; }
.gh-ground { fill: none; stroke: rgba(31,30,27,.25); stroke-width: 1.5; stroke-dasharray: 2 6; }
.gh-trunk { fill: none; stroke: var(--willow-dk); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ghDraw .9s var(--ease-soft) forwards; }
.gh-branches path { fill: none; stroke: var(--willow); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ghDraw 1.2s var(--ease-soft) forwards; }
.gh-leaves circle { fill: var(--moss-n); opacity: 0; transform-box: fill-box; transform-origin: center; animation: ghLeaf .8s var(--ease-soft) forwards; }
@keyframes ghDraw { to { stroke-dashoffset: 0; } }
@keyframes ghLeaf { from { opacity: 0; transform: scale(0); } to { opacity: .8; transform: scale(1); } }
.gh-tree figcaption { margin-top: 10px; font-family: var(--f-serif); font-size: 20px; color: var(--ink-n2); text-align: center; }
.gh-tree figcaption b { font-weight: 400; color: var(--willow); }
@media (max-width: 860px) { .gh { grid-template-columns: 1fr; } .gh-tree svg { max-height: 50vh; } }

/* ---------- Get Help: breathing circle ---------- */
.bre { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(30px, 5vw, 80px); min-height: 100vh; min-height: 100svh; max-width: 1440px; margin: 0 auto; padding: clamp(110px, 14vh, 150px) clamp(18px, 4vw, 56px) 60px; }
.bre-lede { max-width: 42ch; margin: 24px 0 0; font-family: var(--f-serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--ink-n2); }
.bre-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.bre-orb { position: relative; width: min(40vw, 520px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.bre-disc, .bre-glow { position: absolute; inset: 0; border-radius: 50%; transform: scale(.7); transition: transform 4s cubic-bezier(.45, 0, .55, 1); }
.bre-disc { overflow: hidden; box-shadow: 0 40px 80px -40px rgba(31,30,27,.5); }
.bre-disc img { width: 100%; height: 100%; object-fit: cover; }
.bre-glow { inset: -8%; background: radial-gradient(circle, rgba(203,214,180,.9), rgba(203,214,180,0) 68%); filter: blur(10px); }
.bre-orb.in .bre-disc, .bre-orb.in .bre-glow { transform: scale(1); }
.bre-say { position: relative; z-index: 2; font-family: var(--f-serif); font-style: italic; font-size: clamp(22px, 2.2vw, 32px); color: var(--cream); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
@media (max-width: 860px) { .bre { grid-template-columns: 1fr; } .bre-orb { width: min(78vw, 380px); order: -1; } }

@media (prefers-reduced-motion: reduce) {
  .rw-w > span, .wh-p, .fh-card, .rh-face, .letter, .env, .ch-l1, .ch-l2 { transition: none !important; }
  .rh-ring, .rh-face, .ch-seal { animation: none !important; }
  .gh-trunk, .gh-branches path { animation: none !important; stroke-dashoffset: 0; }
  .gh-leaves circle { animation: none !important; opacity: .8; }
}

/* ---------- Donate: centred title, row of trees ---------- */
.dh { padding: clamp(120px, 15vh, 160px) clamp(14px, 3vw, 40px) clamp(60px, 8vw, 100px); text-align: center; }
.dh-head { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.dh h1 { margin: 18px 0 0; font-size: clamp(48px, 7.4vw, 120px); line-height: 1; letter-spacing: -.045em; color: var(--ink-n); }
.dh h1 em { color: var(--willow); }
.dh-lede { margin: 20px 0 0; font-family: var(--f-serif); font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-n2); }
.dh-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(640px, 100%); margin-top: 30px; }
.dh-chips button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 12px; background: #EFEAE0; color: var(--ink-n); transition: background .35s, color .35s, transform .5s var(--ease-soft); }
.dh-chips button:hover { background: #E6DECF; }
.dh-chips button.on { background: var(--willow-dk); color: var(--cream); }
.dh-chips .v { font-family: var(--f-serif); font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.03em; line-height: 1; }
.dh-chips .l { font-family: var(--f-mono); font-size: 11px; opacity: .7; }
.dh-say { margin: 18px 0 0; font-family: var(--f-serif); font-size: 19px; color: var(--ink-n2); animation: whyIn .7s var(--ease-soft) both; }
.dh-say b { font-weight: 400; color: var(--willow); }
.dh-head .kicker, .dh-lede, .dh-chips, .dh-say { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease-soft) .55s, transform 1.1s var(--ease-soft) .55s; }
.dh-head .kicker { transition-delay: 0s; }
.dh-chips { transition-delay: .7s; }
.dh.on .dh-head .kicker, .dh.on .dh-lede, .dh.on .dh-chips, .dh.on .dh-say { opacity: 1; transform: none; }
.dh-row { display: flex; gap: 6px; max-width: 1400px; height: clamp(300px, 46vh, 520px); margin: clamp(40px, 5vw, 64px) auto 0; }
.dh-cell {
  position: relative; flex: 1; overflow: hidden; border-radius: 6px;
  clip-path: inset(100% 0 0 0 round 6px);
  transition: clip-path 1.3s var(--ease-fold), flex 1s cubic-bezier(.65, 0, .25, 1);
  transition-delay: calc(500ms + var(--i) * 110ms), 0s;
}
.dh-cell:first-child { border-radius: 16px 6px 6px 16px; }
.dh-cell:last-child { border-radius: 6px 16px 16px 6px; }
.dh.on .dh-cell { clip-path: inset(0 0 0 0 round 6px); }
.dh-cell:hover { flex: 1.5; }
.dh-cell img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transform: scale(1.12); filter: grayscale(1) contrast(.9) brightness(1.08); opacity: .5; transition: filter 1.2s var(--ease-soft), opacity 1.2s var(--ease-soft); will-change: transform; }
.dh-cell.lit img { filter: none; opacity: 1; }
@media (max-width: 700px) {
  .dh-row { height: 280px; gap: 4px; }
  .dh-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Home hero: university logos along the bottom ---------- */
.hx-logos {
  position: absolute; left: 3.2%; right: 7.5%; bottom: 22px; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 1.2s var(--ease-soft) 1.2s, transform 1.2s var(--ease-soft) 1.2s;
}
.hx.s3 .hx-logos { opacity: 1; transform: none; }
.hx-logos > span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,242,232,.7); }
.hx-logos-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px clamp(22px, 3.6vw, 56px); padding: 0 16px; }
.hx-logos-row img { height: clamp(22px, 2.6vw, 34px); width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: .82; transition: opacity .3s; }
.hx-logos-row img:hover { opacity: 1; }
@media (max-width: 760px) {
  .hx-logos { left: 3.5%; right: 5.5%; bottom: 18px; }
  .hx-logos-row { gap: 10px 20px; }
  .hx-logos-row img { height: 20px; max-width: 96px; }
  .hx-toc { margin-top: 26px; }
}

/* ---------- Phone comfort: bigger tap targets, no tiny text ---------- */
.ft ul { gap: 2px; }
.ft ul a { display: inline-block; padding: 8px 0; }
.ft-help a { display: inline-block; padding: 6px 0; }
.ft-credits a { display: inline-block; padding: 8px 2px; }
.lines-note a { display: inline-block; padding: 4px 2px; }
.portal-back { padding: 10px 0; }
.officer .frame figcaption span, .you-slot span, .fh-cap, .frame-print figcaption, .frame-plain figcaption, .frame-tape figcaption { font-size: 11px; }
@media (max-width: 760px) {
  .kicker { font-size: 11.5px; }
  .fcard-note, .fcard-meta { font-size: 11.5px; }
  .note-text { font-size: clamp(25px, 7vw, 32px); }
  .towns-list .tc { font-size: clamp(28px, 8vw, 40px); }
  .sec { padding-top: 76px; padding-bottom: 76px; }
}
.hx-logos-row img.pre { filter: none; }