@font-face {
  font-family: "RX100";
  src: url("fonts/RX100-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-latin-opsz-italic.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --sky: rgb(225, 234, 242);
  --ink: #21190d;
  --ink-70: rgba(39, 27, 10, 0.7);
  --text-tertiary: rgba(39, 27, 10, 0.7);   /* Figma style Text/Tertiary (was 50%) */
  --green: #3d826b;
  --cream: #fdfcf7;
  --yellow: #e5de52;
  --sage: #ccdcaf;
  --lavender: #8686b8;
  --sky-ink: #afc7dc;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --zoom: 1;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--sky);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  overflow: clip;            /* clip, not hidden: keeps .page from becoming its own scroll box (anchor jumps scroll the window) */
}

/* The illustration is a fixed 1512px canvas, centred. Wider screens get
   wider gutters (the edges of the art are extended); narrower desktop
   screens get the whole canvas scaled down via --zoom (set in script.js). */
.stage {
  position: relative;
  width: 1512px;
  height: 3776px;
  margin: 0 auto;
  zoom: var(--zoom);
  background: var(--sky);
}

.bleed {
  position: absolute;
  top: 0;
  width: 3000px;
  height: 3776px;
  background-repeat: repeat-x;
  background-size: 1px 3776px;
  pointer-events: none;
}
.bleed--left  { right: 100%; background-image: url("assets/edge-left.png?v=3"); }
.bleed--right { left: calc(100% - 1px);  background-image: url("assets/edge-right.png?v=3"); }

.layer, .t, .sign, .case__sign, .case__hit, .fish, .line, .line-live, .bait, .contact__row {
  position: absolute;
}
.ug-fill { position: absolute; left: 0; top: 899px; width: 1512px; height: 2016px; background: rgb(92, 66, 27); }
.layer { display: block; user-select: none; pointer-events: none; }

ul { list-style: none; margin: 0; padding: 0; }

/* ---------------- Type ---------------- */
.t { margin: 0; }

.t-hello {
  font: 18px/27px "RX100", ui-monospace, monospace;
  letter-spacing: -0.25px;
  color: var(--green);
}
.t-display {
  font: 400 48px/1.1 "RX100", ui-monospace, monospace;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.t-display--light { color: var(--cream); }
/* hero (Figma 1016:648100): "Hi! I'm Aparna" 48/110%, subtitle RX100 22/120%, body 18/25 */
.t-hero-sub { font: 400 22px/1.2 "RX100", ui-monospace, monospace; color: var(--ink); }
.t-body.t-body--hero { line-height: 25px; }

.t-body, .t-credit, .t-role, .t-footer-body, .t-copy, .t-hint, .contact__row span, .t-link {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 18;
}
.t-body { font-size: 18px; line-height: 27px; letter-spacing: -0.25px; color: var(--text-tertiary); }
.t-credit { font-size: 18px; line-height: 1; color: var(--text-tertiary); }
.t-role { font-size: 18px; line-height: 1; color: var(--text-tertiary); }
.t-name { font: 22px/1 "RX100", ui-monospace, monospace; color: var(--ink-70); }

.t-footer-body { font-size: 18px; line-height: 1.2; color: var(--cream); }
.t-subhead { font: 22px/1.2 "RX100", ui-monospace, monospace; color: var(--cream); }
.t-copy { font-size: 18px; line-height: 1.2; color: #63461d; }
.t-hint {
  white-space: nowrap;
  left: 0; top: 0;
  transform-origin: 0 0;
  font-size: 16px; line-height: 1.1; font-style: italic; font-weight: 500; font-variation-settings: "opsz" 18;
  letter-spacing: 0;               /* Figma 1016:650693: Newsreader Medium Italic 16/110% */
  color: var(--sage);
  pointer-events: none;
}

/* ---------------- Links: shared ---------------- */
a { color: inherit; -webkit-tap-highlight-color: transparent; }
a:focus { outline: none; }
a:focus-visible {
  outline: 2px dashed var(--yellow);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---------------- Signpost ---------------- */
.sign {
  display: block;
  transform-origin: var(--ox) var(--oy);
  transition: transform 450ms var(--ease-out), filter 300ms ease;
  cursor: pointer;
}
.sign img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
a.sign:hover, a.sign:focus-visible {
  transform: rotate(var(--swing));
  filter: brightness(1.06) drop-shadow(0 4px 3px rgba(33, 25, 13, 0.18));
}
.sign--socials { cursor: default; pointer-events: none; }
.sign--socials img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* only the plank itself (and, once open, the tab under it) catches the pointer,
   so the empty box around it never blocks the "My journey" sign below */
.soc-hit {
  position: absolute; inset: 0; pointer-events: auto;
  clip-path: polygon(13px 8px, 226px 32px, 220px 84px, 9px 58px);
}
.sign--socials:hover, .sign--socials:focus-within { transform: rotate(var(--swing)); }
/* the tab slides straight out of the middle of the sign (from the bottom of
   its face, over the thickness), square to it so it comes down evenly */
.soc-tab-clip {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  clip-path: polygon(0 50.4px, 226px 79.3px, 226px 163px, 0 163px);
}
.soc-tab {
  position: absolute; inset: 0;
  translate: 9.5px -74px;         /* tucked up under the plank (along its tilt) */
  transition: translate 380ms cubic-bezier(0.4, 0, 1, 1);
}
.sign--socials:hover .soc-tab, .sign--socials:focus-within .soc-tab {
  translate: 0 0;
  transition: translate 520ms cubic-bezier(0.16, 1, 0.3, 1) 60ms;
}
.soc-plank { z-index: 1; }
.soc-hit { z-index: 2; }
.soc-tab-hit {
  position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(112px 64px, 192px 74px, 184px 132px, 170px 142px, 116px 135px, 105px 121px);
}
.sign--socials .t-social { pointer-events: none; z-index: 1; }
.sign--socials:hover .t-social, .sign--socials:focus-within .t-social,
.sign--socials:hover .soc-tab-hit { pointer-events: auto; }

.t-social {
  left: 0; top: 0;
  transform-origin: 0 0;
  font: 14px/16px "RX100", ui-monospace, monospace;
  letter-spacing: 0.2px;
  color: var(--sky-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 0;
  transition: color 200ms ease;
}
.t-social::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms var(--ease-out);
}
.t-social:hover, .t-social:focus-visible { color: var(--cream); }
.t-social:hover::after, .t-social:focus-visible::after { transform: scaleX(1); }

/* ---------------- Case-study chambers ---------------- */
.case { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* Spotlight: dim the rest of the page while a case-study sign is hovered */
.dim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(39, 27, 10, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}
body.is-spotlight .dim,
body:has(.case:focus-visible) .dim { opacity: 1; }
.case:focus-visible, .case.is-hover { z-index: 60; }
.case:focus-visible { outline: none; }
.case__sign { pointer-events: auto; }
.case:focus-visible .case__sign { outline: 2px dashed var(--yellow); outline-offset: 6px; }
.case__sign {
  display: block;
  cursor: pointer;
  transform-origin: 45% 94%;
  transition: transform 500ms var(--ease-out), filter 300ms ease;
  user-select: none;
}
.case:focus-visible .case__sign,
.case.is-hover .case__sign {
  transform: translateY(-6px) rotate(var(--swing));
  filter: brightness(1.05) drop-shadow(0 8px 6px rgba(20, 12, 2, 0.28));
}

/* ---------------- Footer ---------------- */
.contact__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 24px;
  text-decoration: none;
  color: var(--cream);
}
.contact__row img { display: block; transition: transform 300ms var(--ease-out); }
.contact__row span {
  font-size: 18px; line-height: 1.1; letter-spacing: -0.3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color 200ms ease, background-size 300ms var(--ease-out);
}
.contact__row:hover span, .contact__row:focus-visible span { color: var(--yellow); background-size: 100% 1px; }
.contact__row:hover img, .contact__row:focus-visible img { transform: translateY(-2px) rotate(-6deg); }

.t-link {
  font-size: 18px; line-height: 1.1; letter-spacing: -0.2px;
  color: var(--yellow);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: color 200ms ease, text-underline-offset 250ms var(--ease-out);
}
.t-link:hover, .t-link:focus-visible { color: var(--cream); text-underline-offset: 5px; }

/* Fish drift forward a little when you point at them */
.fish {
  transition: transform 1.4s var(--ease-out);
  user-select: none;
}
.fish:hover { transform: translate(-14px, -3px) rotate(1.5deg); }
.fish--slow:hover { transform: translate(-10px, 2px) rotate(-1deg); }

/* Fishing line + envelope bait */
.line { pointer-events: none; transition: opacity 120ms; }
.line-live { left: 0; top: 2721px; overflow: visible; pointer-events: none; }
.line-live path { fill: none; stroke: var(--cream); stroke-opacity: 0.15; stroke-width: 3; stroke-linecap: round; }

.bait {
  display: block;
  transform-origin: 112px 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
.bait img { display: block; width: 100%; height: 100%; pointer-events: none; }
.bait:not(.is-dragging):not(.is-springing) { animation: sway 5.5s ease-in-out infinite; }
.bait:not(.is-dragging):not(.is-springing):hover { animation-play-state: paused; }
/* no dashed focus box round the envelope: when it's focused from the keyboard
   it takes the same nibble as hover (script.js), which is its focus cue */
.bait:focus-visible { outline: none; }
/* on hover script.js drops the hook + envelope together with the line and knot */
.bait img { transform-origin: 112px 0; }
.bait.is-dragging { cursor: grabbing; }

@keyframes sway {
  0%, 100% { transform: rotate(1.2deg); }
  50% { transform: rotate(-1.2deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* "View case study" toast that follows the cursor over a signboard */
.toast {
  position: fixed;
  left: 0; top: 0;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #21190d;
  color: var(--cream);
  font: 14px/16px "RX100", ui-monospace, monospace;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(20, 12, 2, 0.35);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(0.9);
  transform-origin: 0 0;
  transition: opacity 180ms ease, transform 180ms var(--ease-out);
}
.toast.is-visible {
  opacity: 1;
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(1);
}

/* ---------- Subtle hover motion on scenery ---------- */
.layer.hov { pointer-events: auto; transition: transform 900ms var(--ease-out); will-change: transform; }
.hov--drift:hover { transform: translateX(14px); transition-duration: 2.4s; }
.hov--flutter { transform-origin: 50% 60%; }
.hov--flutter:hover { transform: rotate(-3deg) translateY(-3px); transition-duration: 700ms; }
/* me: only the hair moves on hover — a breezy toss from the crown */
.me { overflow: visible; pointer-events: none; }
.me path, .me circle { pointer-events: auto; }
.me__hair { transform-box: view-box; transform-origin: 58px 22px; }
.me.is-hover .me__hair--back { animation: hair-back 1.6s ease-in-out infinite; }
.me.is-hover .me__hair--bangs { animation: hair-bangs 1.6s ease-in-out infinite; }
@keyframes hair-back {
  0%, 100% { transform: rotate(0) skewX(0); }
  30% { transform: rotate(4deg) skewX(-5deg); }
  65% { transform: rotate(-3deg) skewX(4deg); }
}
@keyframes hair-bangs {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-3deg) translateY(-1px); }
  70% { transform: rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) { .me.is-hover .me__hair { animation: none; } }
.hov--shroom { transform-origin: 45% 40%; }       /* caps sway, roots stay put */
.hov--shroom:hover { transform: rotate(2.5deg); transition-duration: 700ms; }

/* ---------- Case studies: "Back to top" (Figma 1005:605851) ---------- */
.to-top {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 50;
  zoom: var(--zoom);
  display: flex;
  align-items: center;
  gap: 16px;
  height: 34px;
  padding: 8px 16px;
  border: 1px solid rgba(39, 27, 10, 0.5);
  border-radius: 24px;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1 "RX100", ui-monospace, monospace;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(33, 25, 13, 0);
  /* parked just below the bottom edge of the window */
  translate: -50% calc(100% + 64px);
  visibility: hidden;
  transition:
    translate 0.55s cubic-bezier(0.55, 0, 0.85, 0.35),
    visibility 0s linear 0.55s,
    background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.35s ease;
}
.to-top.is-shown {
  translate: -50% 0;
  visibility: visible;
  /* rises with a long, soft ease-out */
  transition:
    translate 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s,
    background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.35s ease;
}
.to-top__arrow {
  flex: none;
  width: 8.17px;
  height: 16px;
  overflow: visible;
  color: rgba(39, 27, 10, 0.5);
  transition: translate 0.35s var(--ease-out), color 0.25s ease;
}
.to-top:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  box-shadow: 0 8px 24px rgba(33, 25, 13, 0.18);
}
.to-top:hover .to-top__arrow {
  color: var(--cream);
  /* a quick hop up that settles back home, so the button stays balanced */
  animation: to-top-hop 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes to-top-hop {
  0%   { translate: 0 0; }
  40%  { translate: 0 -5px; }
  100% { translate: 0 0; }
}
.to-top:active { scale: 0.97; }
.to-top:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top.is-shown { translate: -50% 0; opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
  .to-top.is-shown { opacity: 1; transition: opacity 0.3s ease; }
}

/* ---------- Case studies: scroll reveal ---------- */
/* #stage keeps these above the per-element hover transitions */
#stage > .rv { opacity: 0; translate: 0 28px; }
#stage > .rv.rv--orbit { translate: var(--fx, 0) var(--fy, 0); scale: 0.95; }
#stage > .rv.rv-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: opacity 0.7s ease var(--rd, 0ms), translate 1s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms), scale 1s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms);
}

/* ---------- Home: underground scroll reveal (script.js) ---------- */
.underground .rv { opacity: 0; translate: 0 32px; }
.underground .rv.rv-in {
  opacity: var(--rest, 1);   /* the finds settle at their faded resting look */
  translate: 0 0;
  transition: opacity 0.7s ease var(--rd, 0ms), translate 1s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms);
}

/* ---------- Home: hovering me dims the park and pops up three notes ---------- */
body:has(.me.is-hover) .dim { opacity: 1; }
.me.is-hover { z-index: 60; }
.note {
  z-index: 61;
  pointer-events: none;
  opacity: 0;
  scale: 0.55;
  translate: 0 14px;
  /* leaving: they all tuck away together, quickly */
  transition: opacity 180ms ease, scale 220ms ease-in, translate 220ms ease-in;
}
body:has(.me.is-hover) .note {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  /* arriving: one at a time — boom, boom, boom — with a little overshoot */
  transition: opacity 140ms ease var(--d), scale 480ms cubic-bezier(0.34, 1.6, 0.64, 1) var(--d), translate 480ms cubic-bezier(0.34, 1.6, 0.64, 1) var(--d);
}
@media (prefers-reduced-motion: reduce) {
  .note, body:has(.me.is-hover) .note { scale: 1; translate: 0 0; transition: opacity 200ms ease; }
}

/* ---------- Home: hovering the mushroom shows its field-guide card ---------- */
.shroom { pointer-events: auto; cursor: default; transition: transform 400ms var(--ease-out); transform-origin: 50% 100%; }
.shroom.is-hover { z-index: 60; }
body:has(.shroom.is-hover) .dim { opacity: 1; }
.shroom-card, .mud-card {
  position: absolute;
  z-index: 61;
  width: 465px;
  height: 233px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 12px;
  background: var(--cream);
  pointer-events: none;
  opacity: 0;
  scale: 0.85;
  translate: 12px 14px;
  transform-origin: 100% 100%;          /* grows out from the mushroom's side */
  transition: opacity 160ms ease, scale 200ms ease-in, translate 200ms ease-in;
}
body:has(.shroom.is-hover) .shroom-card {
  opacity: 1; scale: 1; translate: 0 0;
  transition: opacity 180ms ease 80ms, scale 460ms cubic-bezier(0.34, 1.45, 0.64, 1) 80ms, translate 460ms cubic-bezier(0.34, 1.45, 0.64, 1) 80ms;
}
.shroom-card__text { width: 230px; display: flex; flex-direction: column; }
.shroom-card p, .mud-card p { margin: 0; }
.shroom-card__name { font: 22px/1.2 "RX100", ui-monospace, monospace; color: var(--ink); }
.shroom-card__latin {
  margin-top: 4px !important;
  font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 500; font-variation-settings: "opsz" 18;
  font-size: 18px; line-height: 1.2; color: #dd3d23;
}
.shroom-card__body {
  font-family: "Newsreader", Georgia, serif; font-weight: 400; font-variation-settings: "opsz" 18;
  font-size: 16px; line-height: 1.2; color: var(--text-tertiary);
}
.shroom-card__latin + .shroom-card__body { margin-top: 16px !important; }
.shroom-card__body + .shroom-card__body { margin-top: 19.2px !important; }
.shroom-card__photo { position: absolute; left: 281.6px; top: 11.25px; width: 173px; height: 212.3px; }
@media (prefers-reduced-motion: reduce) {
  .shroom-card, body:has(.shroom.is-hover) .shroom-card { scale: 1; translate: 0 0; transition: opacity 200ms ease; }
  .shroom.is-hover { transform: none; }
}

/* ---------- Home: mudlarking finds underground ---------- */
.dig { pointer-events: auto; opacity: var(--rest, 1); transition: opacity 250ms ease; }   /* the finds themselves, at their resting (faded) opacity */
.dig-ring { pointer-events: none; opacity: 0; scale: 0.8; transition: opacity 200ms ease, scale 250ms ease-in; }
body.is-digging .dim { opacity: 1; }
.dig.is-lit { opacity: 1; z-index: 61; }
.dig-ring.is-lit {
  z-index: 61; opacity: 1; scale: 1;
  transition: opacity 220ms ease calc(var(--i) * 60ms), scale 420ms cubic-bezier(0.34, 1.5, 0.64, 1) calc(var(--i) * 60ms);
}
.mud-card { height: 226px; transform-origin: 50% 0%; translate: 0 14px; }
.mud-card.is-lit {
  opacity: 1; scale: 1; translate: 0 0;
  transition: opacity 180ms ease 120ms, scale 460ms cubic-bezier(0.34, 1.45, 0.64, 1) 120ms, translate 460ms cubic-bezier(0.34, 1.45, 0.64, 1) 120ms;
}
.mud-card__first { margin-top: 16px !important; }
.mud-card__photo { left: 278px; top: 7px; width: 182px; height: 217px; }
@media (prefers-reduced-motion: reduce) {
  .dig-ring, .dig-ring.is-lit, .mud-card, .mud-card.is-lit { scale: 1; translate: 0 0; transition: opacity 200ms ease; }
}

/* fossils: full-strength copies over the faded ones in the ground art */
.dig--fossil { transition: opacity 220ms ease; }
.fossil-card { translate: 0 0; scale: 0.88; }   /* grows out from the fossil's side (origin set by script.js) */
.fossil-card .shroom-card__text { width: 246px; }
.fossil-card__photo { position: absolute; left: 270px; top: 0; width: 195px; height: 100%; }

/* ---------- Home: the park comes in on first load ----------
   The quietest version of the site's entrance: every piece fades in as it
   rises a few pixels into place, back to front (delays in data-d, 0–825ms). */
.home-intro [data-in] { opacity: 0; translate: 0 10px; }
/* the clouds and the blimp drive their own translate, so they rise with transform */
.home-intro [data-in="puff"] { translate: none; transform: translateY(10px); }
.home-intro.home-go [data-in] {
  opacity: 1; translate: 0 0;
  transition: opacity 0.9s ease var(--d, 0ms), translate 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}
.home-intro.home-go [data-in="puff"] {
  transform: none;
  transition: opacity 0.9s ease var(--d, 0ms), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}

/* ---------- Home: blimp towing its banner (moved by script.js) ---------- */
.blimp-sky > svg { position: absolute; overflow: visible; }
.blimp-rope { left: 0; top: 0; }
.blimp-rope path { fill: none; stroke: var(--cream); stroke-width: 1; stroke-linecap: square; }
.blimp { transform-origin: 55.5px 31px; will-change: transform; }
/* hangs from the clip at its leading corner, which is where it pivots and turns */
.blimp-banner { transform-origin: 168.6px 1.5px; will-change: transform; }
.blimp-banner__words {
  font: italic 400 16px "Newsreader", Georgia, serif;
  font-variation-settings: "opsz" 16;
  letter-spacing: -0.25px;
  fill: #740A38;
  white-space: pre;
}

/* ---------- Footer: "Case studies" + "Browse" columns ---------- */
.fnav { list-style: none; margin: 0; padding: 0; }
.t-fhead { font: 22px/1.2 "RX100", ui-monospace, monospace; color: var(--yellow); }
.t-flink {
  font-family: "Newsreader", Georgia, serif; font-weight: 400; font-variation-settings: "opsz" 18;
  font-size: 18px; line-height: 1.1; letter-spacing: -0.2px;
  color: var(--cream) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 220ms ease, translate 320ms var(--ease-out);
}
/* the underline draws itself left to right under every line of the title */
.t-flink > span {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 380ms var(--ease-out);
}
.t-flink:hover, .t-flink:focus-visible { color: var(--yellow) !important; translate: 4px 0; }
.t-flink:hover > span, .t-flink:focus-visible > span { background-size: 100% 1px; }

/* ---------- Footer: the envelope opens into a note (script.js) ---------- */
/* Figma 1066:50043 — a 520.5 × 549.1 composition, centred, scaled to fit */
.letter { position: fixed; inset: 0; z-index: 200; }
.letter[hidden] { display: none; }
.letter__shade { position: absolute; inset: 0; background: rgba(39, 27, 10, 0.7); }
.letter__fit {
  position: absolute; left: 50%; top: 50%;
  width: 520.5px; height: 549.1px;
  transform: translate(-50%, -50%) scale(var(--s, 1));
}
.letter__stage { position: absolute; inset: 0; }
.letter__stage > * { position: absolute; margin: 0; }
.letter__body { left: 0; top: 201.7px; width: 521px; height: 348px; z-index: 2; }
/* the envelope's inside, between the hinge (y 201.7) and the body's dipped top
   edge: under the flap and the body, so it only shows where they'd leave a gap */
.letter__inside { left: 0; top: 201.7px; width: 521px; height: 40px; z-index: 1; overflow: visible; }
/* the flap hinges on the envelope's top edge (y 162.8 in its own box) */
.letter__flap {
  left: 32.9px; top: 38.9px; width: 487px; height: 188px; z-index: 1;
  transform-origin: 50% 162.8px;
  transition: transform 700ms cubic-bezier(0.45, 0, 0.2, 1), z-index 0s linear 350ms;
}
/* the heart seal: sits on the flap's tip when sealed, rides up with it and becomes Close */
.letter__heart {
  left: 214.7px; top: 0; width: 96px; height: 96px; z-index: 0;
  transform: none;
  transition: transform 700ms cubic-bezier(0.45, 0, 0.2, 1), z-index 0s linear 350ms;
}
.letter__note {
  left: 75.85px; top: 240px; width: 405px; z-index: 3;
  display: flex; flex-direction: column; gap: 12px;
  transform: rotate(1.89deg); transform-origin: 0 0;
  transition: opacity 450ms ease 650ms, translate 600ms cubic-bezier(0.22, 1, 0.36, 1) 650ms;
}
.letter__note p { margin: 0; }
.letter__dear { font: 400 24px/1.2 "Fasthand", cursive; color: #21190d; }
.letter__text { font: 400 19px/1.2 "Fasthand", cursive; color: rgba(39, 27, 10, 0.7); white-space: pre-line; }
/* the sign-off, bottom right of the note */
.letter__love {
  left: 415.54px; top: 463px; width: 60px; z-index: 3;
  font: 400 19px/1.2 "Fasthand", cursive; color: #000;
  transform: rotate(1.93deg); transform-origin: 0 0;
  transition: opacity 450ms ease 800ms, translate 600ms cubic-bezier(0.22, 1, 0.36, 1) 800ms;
}
.letter.is-closed .letter__love { opacity: 0; translate: 0 10px; transition-delay: 0s; transition-duration: 200ms; }
.letter__close {
  left: 214px; top: 0; width: 96px; height: 108px; z-index: 6;
  padding: 87px 0 0 34px; border: 0; background: none; cursor: pointer;
  text-align: left; white-space: nowrap;
  font: 16px/16px "RX100", ui-monospace, monospace; letter-spacing: 0.2px;
  color: rgba(39, 27, 10, 0.7);
  transition: opacity 300ms ease 900ms, color 200ms ease;
}
.letter__close:hover, .letter__close:focus-visible { color: #21190d; }
.letter__close:focus-visible { outline: 2px dashed var(--yellow); outline-offset: 2px; border-radius: 6px; }
.letter__flyer {
  position: fixed; z-index: 7; pointer-events: none; opacity: 0;
  transform-origin: 50% 50%;
}
/* sealed: flap folded down over the front, heart on its tip, no words yet */
.letter.is-closed .letter__flap { transform: scaleY(-1); z-index: 4; }
.letter.is-closed .letter__heart { transform: translateY(312px) scaleY(-1); z-index: 5; }   /* flips with the flap */
.letter.is-closed .letter__note { opacity: 0; translate: 0 10px; transition-delay: 0s; transition-duration: 200ms; }
.letter.is-closed .letter__close { opacity: 0; pointer-events: none; transition-delay: 0s; transition-duration: 150ms; }
/* closing: the words go first, then the flap folds */
.letter.is-closing .letter__flap,
.letter.is-closing .letter__heart { transition-delay: 220ms, 570ms; }
@media (prefers-reduced-motion: reduce) {
  .letter__flap, .letter__heart, .letter__note, .letter__love, .letter__close { transition: none !important; }
}

/* after the note: the envelope's gone — the line and hook reel up out of the
   water, the hint goes, the little fish swims over to where the bait was
   (Figma 1067:54005) */
.note-read .line, .note-read .line-live, .note-read .bait {
  translate: 0 -420px; opacity: 0 !important;   /* the drag code sets the line's opacity inline */
  pointer-events: none;
  transition: translate 1.6s cubic-bezier(0.55, 0, 0.35, 1) 0.2s, opacity 0.5s ease 1.2s;
}
/* the hint stays gone once the note is read, on every page — !important so the
   case studies' scroll reveal can't fade it back in for a moment */
.note-read .bait-hint { opacity: 0 !important; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s !important; }
/* the swim rides on margins, so the idle bob (translate/rotate) keeps going
   underneath without a snap; a slow, soft glide */
.note-read .fish:not(.fish--slow) { margin-left: -340px; transition: transform 1.4s var(--ease-out), margin-left 5.2s cubic-bezier(0.37, 0, 0.2, 1) 0.9s; }
.note-read .fish--slow { margin-left: 10px; margin-top: 10px; transition: transform 1.4s var(--ease-out), margin 3.6s ease-in-out 1.2s; }
.note-read--instant, .note-read--instant * { transition: none !important; }

/* ---------- Case studies: top nav (Figma 1074:59000) ---------- */
.casenav {
  position: absolute; left: 50%; top: 36px; translate: -50% 0; z-index: 5;
  display: flex; align-items: center; gap: 20px;
  height: 44px; padding: 12px 20px; box-sizing: border-box;
  border-radius: 100px;
  background: rgba(134, 134, 184, 0.16);   /* Taro at 16% */
}
.casenav__link {
  font: 16px/16px "RX100", ui-monospace, monospace; letter-spacing: 0;
  color: rgba(39, 27, 10, 0.7); text-decoration: none; white-space: nowrap;
  transition: color 200ms ease;
}
.casenav__link:hover, .casenav__link:focus-visible { color: #21190d; text-decoration: underline; text-underline-offset: 3px; }
.casenav__rule { width: 1px; height: 19.5px; background: #271b0a; }

/* ---------- Footer: the envelope is dipped into the water on arrival (script.js) ---------- */
.bait-waiting .bait, .bait-waiting .bait-hint { opacity: 0; pointer-events: none; }
.bait-waiting .bait { translate: 0 -300px; }
.bait-waiting .line { transform: scaleY(0.0625); transform-origin: 50% 0; }   /* only the first 20 of its 320px are out */
/* the line and the envelope share one timing, so the hook stays on the knot all the way down */
/* (outranks the idle sway, which picks up again once it has landed) */
.bait-dip .bait:not(.is-dragging):not(.is-springing) { animation: bait-dip 1.5s both; pointer-events: none; }
.bait-dip .line { animation: line-dip 1.5s both; transform-origin: 50% 0; }
.bait-dip .bait-hint { animation: hint-in 0.6s ease 1.15s both; }
@keyframes bait-dip {
  0%   { translate: 0 -300px; opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.7, 0.6); }
  12%  { opacity: 1; }
  62%  { translate: 0 14px; animation-timing-function: cubic-bezier(0.35, 0, 0.45, 1); }
  82%  { translate: 0 -5px; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { translate: 0 0; opacity: 1; }
}
@keyframes line-dip {
  0%   { transform: scaleY(0.0625); animation-timing-function: cubic-bezier(0.45, 0, 0.7, 0.6); }
  62%  { transform: scaleY(1.044); animation-timing-function: cubic-bezier(0.35, 0, 0.45, 1); }
  82%  { transform: scaleY(0.984); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { transform: scaleY(1); }
}
@keyframes hint-in {
  from { opacity: 0; translate: -8px 0; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- Footer: plants sway, fish idle (script.js inlines the plants) ---------- */
.footer-art .plant {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: plant-sway var(--dur, 6s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes plant-sway {
  from { transform: skewX(calc(var(--a) * -1)); }
  to   { transform: skewX(var(--a)); }
}
.fish { animation: fish-idle 6.5s ease-in-out infinite; }
.fish--slow { animation: fish-idle-slow 9s ease-in-out -3s infinite; }
@keyframes fish-idle {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25%      { translate: -7px -4px; rotate: -1.4deg; }
  50%      { translate: -11px 0; rotate: 0.3deg; }
  75%      { translate: -5px 4px; rotate: 1.1deg; }
}
@keyframes fish-idle-slow {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30%      { translate: 6px 3px; rotate: 0.8deg; }
  60%      { translate: 10px -2px; rotate: -0.6deg; }
}
/* once the note is read the fish swim over (above) and keep bobbing */
@media (prefers-reduced-motion: reduce) { .fish { animation: none; } }

/* ---------- Footer: bubbles from a fish (script.js) ---------- */
.fish-bubble {
  position: absolute; z-index: 4; pointer-events: none;
  border-radius: 50%;
  /* flat fills, no outline: a pale bubble with a brighter glint */
  background: radial-gradient(circle at 32% 30%, rgba(253, 252, 247, 0.8) 0 16%, rgba(253, 252, 247, 0.32) 17% 100%);
  will-change: transform, opacity;
}

/* ---------- Home hero: a notice hung from the tree (Figma 1288:84480) ----------
   The card is posed by script.js (two-string swing). Card-local coordinates
   are Figma's; the strings are redrawn every frame from branch to hook. */
.hang { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hang__strings { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.hang__strings path { fill: none; stroke: #dd3d23; stroke-width: 2; stroke-linecap: round; }
.hang__card {
  position: absolute; left: 0; top: 0; width: 352.25px; height: 538.9px;
  transform-origin: 0 0; will-change: transform; cursor: default;
}
.hang__paper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; -webkit-user-drag: none; }
.hang__text { position: absolute; left: 32.2px; top: 140.6px; width: 286.2px; }
.hang__text p, .hang__title { margin: 0; }
.hang__title { font: 400 36px/39.6px "RX100", ui-monospace, monospace; letter-spacing: -0.3px; color: rgb(39, 27, 10); }
.hang__tagline { width: 227.2px; margin-top: 6px !important; font: 400 22px/26.4px "RX100", ui-monospace, monospace; color: rgb(53, 95, 132); }
.hang__body {
  margin-top: 20px !important;
  font-family: "Newsreader", Georgia, serif; font-weight: 400; font-variation-settings: "opsz" 18;
  font-size: 16px; line-height: 25px; letter-spacing: -0.25px; color: rgb(41, 40, 37);
}
.hang__body strong { font-weight: 500; }
/* until the card has been hung (first visit), card and strings wait out of sight */
.hang.is-waiting { visibility: hidden; }

/* the signs: same art as before, scaled as a group to the new, slimmer post */
.signpost--hero { position: absolute; left: 0; top: 0; width: 0; height: 0; scale: 0.8235; transform-origin: 0 0; }
/* the new Socials plank (Figma 1288:88603): shorter and flatter than the old art,
   so the hit area, the tab's clip line and the tab's hang follow its edges */
.sign--socials-new .soc-plank { width: 227.1px; height: 159.1px; }
.sign--socials-new .soc-hit { clip-path: polygon(17px 12.4px, 205.5px 26.7px, 199.2px 73.5px, 13.1px 60.7px); }
.sign--socials-new .soc-tab-clip { clip-path: polygon(0 53.9px, 227.1px 70.4px, 227.1px 163px, 0 163px); }
.sign--socials-new .soc-tab { rotate: -3.2deg; transform-origin: 20px 55px; }   /* hangs square under the flatter plank */

/* signpost: a thin line of light runs across a sign as you point at it. It's a
   light line masked by the sign's own artwork, so it only lights the painted
   plank (not the box around it), and it replays on every new hover. */
.sign::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; opacity: 0;
  /* a thin, crisp, low-opacity white line (about 6px across a board) */
  background: linear-gradient(110deg, transparent 49.2%, rgba(255, 255, 255, 0.4) 49.6%, rgba(255, 255, 255, 0.4) 50.4%, transparent 50.8%) no-repeat;
  background-size: 200% 100%; background-position: 108% 0;   /* 100% → 0% carries the line edge to edge */
  -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat;
}
/* the Socials box is taller than its plank (room for the tab), so its mask is sized to the plank */
.sign--socials-new::after { height: 159.1px; }
a.sign:hover::after, a.sign:focus-visible::after,
.sign--socials:hover::after, .sign--socials:focus-within::after {
  animation: sign-shimmer 850ms cubic-bezier(0.4, 0, 0.6, 1) 60ms both;
}
@keyframes sign-shimmer {
  0%   { opacity: 1; background-position: 108% 0; }
  85%  { opacity: 1; }
  100% { opacity: 0; background-position: -8% 0; }
}
@media (prefers-reduced-motion: reduce) { .sign::after { display: none; } }