/* ── the faces ────────────────────────────────────────────────
   Self-hosted, the same way three.js is vendored: no runtime call
   out to a font CDN, and nothing to go missing offline. Latin
   subsets only. Inter, Inter Tight and Syne are variable, so one
   file each covers every weight the page asks for.

   These were named throughout the stylesheet long before they were
   ever loaded, so until now every one of them was silently falling
   back to the system sans. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2-variations"),
       url("../fonts/geist.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif.woff2") format("woff2-variations"),
       url("../fonts/source-serif.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2-variations"),
       url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight.woff2") format("woff2-variations"),
       url("../fonts/inter-tight.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../fonts/syne.woff2") format("woff2-variations"),
       url("../fonts/syne.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ═══════════════════════════════════════════════════════════
   r7d.creative — Rahulraj P V
   Near-black ground, oversized light grotesque, and the
   observer crossing in front of the type.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:     #131313;
  --type-1: #f0f0f0;
  --type-2: #c9c9c9;
  --type-3: #8a8a8a;
  --muted:  #6d6d6d;
  --accent: #ff5a1f;
}

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

html { background: var(--bg); }

body {
  background: var(--bg);
  overflow-x: hidden;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--type-2);
  -webkit-font-smoothing: antialiased;
}

canvas { display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ── hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
}

/* ── heading layer ────────────────────────────────────────── */
.stage {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6vw clamp(1.1rem, 3vw, 4rem);
}

.title {
  display: flex; flex-direction: column;
  /* Source Serif 4 for headings and Geist for text, the same pairing
     as pitute, so the two sites read as one hand. */
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-size: clamp(1.95rem, 7.1vw, 7.4rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-feature-settings: "kern" 1, "liga" 1;

  color: var(--type-2);                 /* fallback where clip is unsupported */
  background: linear-gradient(178deg, var(--type-1) 0%, var(--type-2) 42%, var(--type-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .title { background: none; -webkit-text-fill-color: currentColor; }
}

/* ── the observer ─────────────────────────────────────────── */
/* Above the type: the canvas is transparent everywhere but the head, so he
   occludes the words he crosses and the rest reads straight through. */
.observer {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.observer__canvas { width: 100%; height: 100%; }
.observer__canvas > canvas { width: 100% !important; height: 100% !important; }

.observer__status {
  position: absolute; right: 4vw; bottom: 4vw;
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: #3a3a3a;
}
.observer.is-live .observer__status { display: none; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .stage { justify-content: flex-end; padding-bottom: 12vh; }
  .title { letter-spacing: -0.025em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── madhuri ──────────────────────────────────────────────── */
.wireless {
  position: relative;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.25rem, 5vw, 4rem) clamp(5rem, 14vh, 10rem);
  max-width: 1460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* ── the panel beside the set ─────────────────────────────── */
.about__lede {
  margin-top: 1.2rem;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.62; color: #b6b6b6;
}
.about__body {
  margin-top: 0.9rem;
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  line-height: 1.75; color: #8c8c8c;
}

/* ── play store ── */
.store {
  margin-top: 1.9rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 1.15rem 0.6rem 0.9rem;
  border: 1px solid #3a3a3a; border-radius: 8px;
  background: #1b1b1b;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.15s ease;
}
.store:hover { border-color: #6a6a6a; background: #232323; transform: translateY(-1px); }
.store:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.store__icon { width: 1.6rem; height: 1.6rem; flex: none; }
.store__text {
  display: flex; flex-direction: column; line-height: 1.15;
  font-size: 0.94rem; font-weight: 500; color: #e8e8e8;
}
.store__text small {
  font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a8a8a;
}

@media (max-width: 900px) {
  .wireless { grid-template-columns: 1fr; }
}


/* ── the set ──────────────────────────────────────────────────
   Cutout coordinates come straight from the chassis PNG's alpha
   channel, so the controls land exactly in their holes.
   ─────────────────────────────────────────────────────────── */
.radio {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  user-select: none; -webkit-user-select: none;
}
.radio__chassis {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6));
  pointer-events: none;
}
.radio__back { position: absolute; inset: 0; z-index: 1; }

/* ── screen, seen through the grille cutout ── */
.screen {
  position: absolute;
  left: 17.90%; top: 12.79%; width: 64.26%; height: 33.30%;
  overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(120% 140% at 50% 40%, #14100c 0%, #070605 70%);
  container-type: inline-size;
}
.screen::after {                       /* glass */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,220,170,0.07), transparent 45%);
  pointer-events: none;
}
.screen__vu {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.5s ease;
}
.radio.is-on .screen__vu { opacity: 1; }
.screen__hud {
  position: absolute; inset: 0;
  padding: 4.2% 4.6% 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  pointer-events: none;
}
.screen__mark {
  font-family: "Syne", "Inter", sans-serif;
  line-height: 1;
  opacity: 0.16;
  transition: opacity 0.55s ease, filter 0.55s ease;
}
.radio.is-on .screen__mark { opacity: 0.75; }
.radio.is-playing .screen__mark { opacity: 1; }
.screen__mark-en {
  font-weight: 400;
  font-size: clamp(0.5rem, 1.5cqw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.3em; text-transform: lowercase;
  background: linear-gradient(96deg, #ff5ea0, #d63cdc 55%, #8b5cf6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ff8ec0;
}

.screen__state {
  display: flex; align-items: center; gap: 0.45em;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.36rem, 0.95cqw, 0.72rem);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255, 205, 150, 0.45);
  transition: color 0.4s ease;
}
.screen__state i {
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: currentColor; flex: none;
}
.radio.is-on .screen__state { color: rgba(255, 200, 130, 0.85); }
.radio.is-playing .screen__state { color: #ff6b8f; }
.radio.is-playing .screen__state i { animation: onair 1.6s ease-in-out infinite; }
@keyframes onair { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.screen__scan {
  position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,0.045) 0 1px, transparent 1px 3px);
  transition: opacity 0.5s ease;
}

.radio.is-on .screen__scan { opacity: 1; }

/* ── tuning scale, seen through the slot ── */
.dialface {
  position: absolute;
  left: 26.95%; top: 50.39%; width: 46.22%; height: 2.93%;
  background: linear-gradient(to bottom, #17120c, #241a10);
  overflow: hidden;
}
.dialface canvas { width: 100%; height: 100%; }

/* ── knobs, filling their holes ── */
.knob {
  position: absolute; z-index: 3;
  border-radius: 50%;
  cursor: grab; touch-action: none;
}
.knob:active { cursor: grabbing; }
.knob--vol  { left: 18.82%; top: 59.18%; width: 11.78%; height: 18.07%; }
.knob--tune { left: 69.40%; top: 59.18%; width: 11.78%; height: 18.16%; }

.knob__face {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(60% 60% at 34% 28%, #6b6357 0%, #40392f 45%, #241f19 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,225,180,0.28),
    inset 0 -3px 8px rgba(0,0,0,0.75),
    0 2px 6px rgba(0,0,0,0.6);
}
.knob__face::after {                   /* brass collar */
  content: ""; position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 36% 30%, #b99a5e, #6d5730 70%, #3a2e19);
  box-shadow: inset 0 -2px 5px rgba(0,0,0,0.6);
}
.knob__pointer {
  position: absolute; left: 50%; top: 8%;
  width: 6%; height: 34%;
  margin-left: -3%;
  transform-origin: 50% 123%;
  transform: rotate(0deg);
  border-radius: 3px;
  background: linear-gradient(to bottom, #ffd9a0, rgba(255,180,90,0.15));
  box-shadow: 0 0 6px rgba(255,170,80,0.5);
  opacity: 0.25;
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
  pointer-events: none;
}
.radio.is-on .knob__pointer {
  opacity: 1;
  box-shadow: 0 0 10px rgba(255,150,60,0.9);
}
.knob input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
  /* the knob handles the rotary drag; the input keeps it keyboard-operable */
  pointer-events: none;
}
.knob:focus-within { box-shadow: 0 0 0 3px var(--accent); }

/* ── the five keys, filling their holes ── */
.radio__keys button {
  position: absolute; z-index: 3;
  top: 71.00%; width: 3.12%; height: 4.79%;
  border: 0; border-radius: 50%;
  font-size: 0; color: transparent;
  cursor: pointer;
  background: radial-gradient(62% 62% at 36% 28%, #efe6d2 0%, #cbbfa4 55%, #8d8168 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.45), 0 2px 3px rgba(0,0,0,0.6);
  transition: transform 0.07s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.radio__keys button:nth-child(1) { left: 36.91%; }
.radio__keys button:nth-child(2) { left: 42.58%; }
.radio__keys button:nth-child(3) { left: 48.37%; }
.radio__keys button:nth-child(4) { left: 54.17%; }
.radio__keys button:nth-child(5) { left: 59.96%; }
.radio__keys button:hover { filter: brightness(1.15); }
.radio__keys button:active { transform: translateY(9%); }
.radio__keys button:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.radio__keys button[aria-pressed="true"] {
  transform: translateY(9%);
  background: radial-gradient(62% 62% at 36% 28%, #ffd9ea 0%, #f07ab4 55%, #b93b78 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.4), 0 0 12px 2px rgba(236,72,153,0.8);
}

@media (max-width: 640px) {
  .radio__chassis { filter: none; }
}

/* the set is on but silent — nudge the play key, since the legend is gone */
.radio.is-on:not(.is-playing) .radio__keys button[data-key="play"] {
  animation: keyhint 1.9s ease-in-out infinite;
}
@keyframes keyhint {
  0%, 100% { box-shadow: inset 0 -2px 3px rgba(0,0,0,0.45), 0 0 0 0 rgba(236,72,153,0); }
  50%      { box-shadow: inset 0 -2px 3px rgba(0,0,0,0.45), 0 0 10px 2px rgba(236,72,153,0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .radio.is-on:not(.is-playing) .radio__keys button[data-key="play"] { animation: none; }
}

.about__tag {
  margin-top: 1.1rem;
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(236, 72, 153, 0.45);
  border-radius: 999px;
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #ff6b9d;
}
.about__tag + .about__lede { margin-top: 1rem; }

/* ── gradient ─────────────────────────────────────────────────
   Mirror of the Madhuri block: set on the left, panel on the
   right, so the two sections alternate down the page.
   ─────────────────────────────────────────────────────────── */
.gradient {
  position: relative;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.25rem, 5vw, 4rem) clamp(5rem, 14vh, 10rem);
  max-width: 1460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.78fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.tv {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1422 / 984;
  /* the cabinet is cut out now, so this shadow follows its actual
     silhouette instead of a rectangle */
  filter: drop-shadow(0 26px 42px rgba(0,0,0,0.72));
}
.tv__body { width: 100%; height: 100%; display: block; }

/* screen face, measured off the photograph */
.tv__screen {
  container-type: inline-size;
  position: absolute;
  left: 12.38%; top: 11.69%; width: 56.33%; height: 56.10%;
  border-radius: 4% / 5%;
  overflow: hidden;
  background: #050505;
  display: grid; place-items: center;
}
.tv__frame { width: 100%; height: 100%; border: 0; display: block; }

/* ── panel on the right ── */
.about--right { order: 2; }

.store--plain .store__icon { color: #d8d8d8; }
.about__meta {
  margin-top: 1.1rem;
  font-size: 0.58rem; letter-spacing: 0.12em; line-height: 1.8;
  color: #5c5c5c;
}

@media (max-width: 900px) {
  .gradient { grid-template-columns: 1fr; }
  .about--right { order: 0; }
}

/* ── keep YouTube's furniture off the screen ───────────────── */
.tv__frame {
  /* non-interactive, so hover can never raise the title bar, channel
     avatar, CC button or logo overlay */
  pointer-events: none;
}
/* Once the broadcast is running, the tube takes no mouse at all — no
   clicks, no hover, no cursor change. The set is driven from its knobs. */
/* the tube never takes the mouse at all — the set is worked from its knobs */
.tv__screen { pointer-events: none; }

/* ── the picture fills the tube ─────────────────────────────
   The screen face is 1.451:1 and the video is 16:9, so a
   100%-wide iframe letterboxes. Widen it to 16/9 ÷ 1.451 =
   122.5% and let the screen clip the overspill.
   ─────────────────────────────────────────────────────────── */
.tv__frame {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* the tube is 1.451:1 and the video 16:9, so a full-width iframe would
     letterbox. Cover it instead, with a little overscan so no edge shows. */
  height: 106%;
  width: 129.86%;          /* 106% x 16/9 / 1.451 */
  pointer-events: none;
  z-index: 1;
}

/* ── snow ──────────────────────────────────────────────────
   Opaque while it is covering. Screen blending cannot darken —
   a white YouTube logo underneath would stay white however much
   static sat on top — so normal blending is what actually hides
   the branding. Only the leftover grain, once the picture is
   running, blends as screen.
   ─────────────────────────────────────────────────────────── */
.tv__noise {
  position: absolute; inset: 0;
  z-index: 2;                        /* over the picture, always */
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;                        /* a set that is off is simply black */
  transition: opacity 1.1s ease;
  mix-blend-mode: normal;
}
/* once the picture is genuinely running, dissolve to a trace of grain */
.tv__screen.is-live .tv__noise { opacity: 1; }
.tv__screen.is-tuned .tv__noise {
  opacity: 0.05;
  mix-blend-mode: screen;
}

/* ── the set's own knobs, made real ────────────────────────
   Positions read off the artwork. Only an index mark is drawn:
   the knob faces are already in the photograph.
   ─────────────────────────────────────────────────────────── */
.tvknob {
  position: absolute; z-index: 3;
  left: 81.01%; width: 9.00%; height: 13.01%;
  border-radius: 50%;
  cursor: grab; touch-action: none;
}
.tvknob:active { cursor: grabbing; }
.tvknob--power { top: 11.91%; }
.tvknob--vol  { top: 30.64%; }

/* A real control rather than a mark floating on the artwork: dark face,
   amber ring, cream index. Sized to sit inside its painted hole. */
.tvknob__face {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid #d97f31;
  background:
    radial-gradient(62% 62% at 36% 28%, #40382f 0%, #241e18 52%, #120f0c 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 214, 165, 0.18),
    inset 0 -6px 14px rgba(0, 0, 0, 0.8),
    0 3px 9px rgba(0, 0, 0, 0.65);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tvknob:hover .tvknob__face { border-color: #f0954a; }

.tvknob__mark {
  position: absolute; left: 50%; top: 12%;
  width: 6.5%; height: 32%;
  margin-left: -3.25%;
  transform-origin: 50% 125%;
  transform: rotate(0deg);
  border-radius: 4px;
  background: linear-gradient(to bottom, #fff4e2, #e8cfa8);
  box-shadow: 0 0 7px rgba(255, 210, 150, 0.75);
  pointer-events: none;
}

.tvknob__state {
  position: absolute; left: 50%; top: 104%;
  transform: translateX(-50%);
  font-size: clamp(0.32rem, 0.85cqw, 0.56rem);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #8a7660;
  white-space: nowrap; pointer-events: none;
  transition: color 0.3s ease;
}
.tv.is-live .tvknob--power .tvknob__state { color: #ff9d4d; }

/* The input is the keyboard handle and nothing else. Without this it paints
   as a native range slider: a horizontal track with a thumb, straight across
   the cabinet. */
.tvknob input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
}

.tvknob:focus-within { box-shadow: 0 0 0 3px var(--accent); }

.about__alt {
  display: inline-block; margin-top: 0.5rem;
  color: #8a8a8a; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: #3a3a3a;
}
.about__alt:hover { color: var(--accent); text-decoration-color: var(--accent); }

.about__cue {
  display: inline-block; margin-top: 0.5rem;
  color: #7d7d7d; letter-spacing: 0.06em;
}

/* ── play it on YouTube ───────────────────────────────────── */
.yt {
  margin-top: 1.2rem;
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 1.1rem 0.55rem 0.85rem;
  border: 1px solid #3a3a3a; border-radius: 8px;
  background: #1b1b1b;
  font-size: 0.8rem; color: #e2e2e2;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.15s ease;
}
.yt:hover { border-color: #ff0000; background: #221819; transform: translateY(-1px); }
.yt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.yt__mark { width: 1.5rem; height: 1.5rem; flex: none; }

/* ── gradient panel ───────────────────────────────────────── */
/* Instrument Serif for the wordmark: an editorial face, which suits a
   research instrument, and it sets it apart from Madhuri's Syne. */
.about__grad {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.9rem, 6.4vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: none;
  background: linear-gradient(100deg, #ffffff 0%, #b9c6ff 46%, #7ee0c8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e8e8e8;                       /* where background-clip is unsupported */
}

/* the two links sit together */
.links {
  margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  align-items: stretch;
}
.links .store, .links .yt { margin-top: 0; }
.yt__text {
  display: flex; flex-direction: column; line-height: 1.15;
  font-size: 0.94rem; font-weight: 500; color: #e8e8e8;
}
.yt__text small {
  font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a8a8a;
}
.yt { padding: 0.6rem 1.15rem 0.6rem 0.9rem; font-size: inherit; }

/* Syne for Madhuri: geometric with enough character to read as a station
   wordmark, and clearly not the serif that Gradient uses. */
.about__mad {
  font-family: "Syne", "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  background: linear-gradient(96deg, #ff2d78 0%, #d63cdc 48%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ff5ea0;                      /* where background-clip is unsupported */
}


/* ── capability boxes ─────────────────────────────────────── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* A <use> clones the symbol into a shadow tree, which '.sprite g' cannot
   reach — the clones fell back to fill:black, stroke:none and rendered as
   blobs. fill and stroke are inherited, so they must be set on the svg that
   does the using. */
.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.feats {
  margin-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.feats li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  border: 1px solid #303030; border-radius: 9px;
  background: #1a1a1a;
  font-size: 0.74rem; letter-spacing: 0.01em; color: #cfcfcf;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.feats li:hover { background: #1f1f1f; }
.feats .icon { width: 1.15rem; height: 1.15rem; flex: none; opacity: 0.95; }
.feats--warm li { color: #d9c2cd; }
.feats--warm svg { color: #ff5ea0; }
.feats--warm li:hover { border-color: rgba(255,94,160,0.45); }
.feats--cool li { color: #c2cbd9; }
.feats--cool svg { color: #8fb6ff; }
.feats--cool li:hover { border-color: rgba(143,182,255,0.45); }

/* ── what it is built with ────────────────────────────────── */
.label--kit {
  margin-top: 1.6rem; margin-bottom: 0.7rem;
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #6d6d6d; border: 0; padding: 0; font-weight: 400;
}
.kit { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kit li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.34rem 0.7rem 0.34rem 0.55rem;
  border: 1px solid #2c2c2c; border-radius: 999px;
  font-size: 0.66rem; letter-spacing: 0.06em; color: #a8a8a8;
  font-variant-numeric: tabular-nums;
}
.kit .icon { width: 0.95rem; height: 0.95rem; flex: none; color: #7ee0c8; stroke-width: 1.9; }

.store--live .store__icon { color: #7ee0c8; }
.store--live:hover { border-color: #7ee0c8; }

.about__tag--cool {
  border-color: rgba(143, 182, 255, 0.45);
  color: #9fc0ff;
}

/* ── text arrives ─────────────────────────────────────────────
   Blocks rise and fade as they are reached. No blur or scale on
   the wordmarks: they are painted with background-clip: text and
   a filter on that can drop the clip in some browsers.
   ─────────────────────────────────────────────────────────── */
.rise {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
.rise.is-shown {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: auto;
}

/* the wordmarks take a touch longer, and come from a little lower */
.about__title.rise { transform: translateY(26px); }
.about__title.rise.is-shown {
  transform: none;                      /* it was never reset, so every title sat 26px low, on its pill */
  transition:
    opacity 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* the hero name, on load */
.hero .title span.rise { transform: translateY(24px); }
.hero .title span.rise.is-shown {
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Belt and braces. The script already skips animating under reduced motion,
   but the wordmark rules above are more specific than a bare .rise, so if the
   class ever did land there it would leave text sitting 24px low with no
   transition to bring it back. */
@media (prefers-reduced-motion: reduce) {
  .rise, .rise.is-shown,
  .about__title.rise, .about__title.rise.is-shown,
  .hero .title span.rise, .hero .title span.rise.is-shown {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── the opening caption ──────────────────────────────────────
   Named under the eyes while they are the only thing on screen,
   then cleared so his name can take the space. Centred on the
   viewport rather than in the heading's column, because the eyes
   it belongs to are centred too. It never takes the pointer. */
.intro-cap {
  position: fixed;
  left: 50%;
  top: 62%;
  transform: translate(-50%, 0) translateY(0.6rem);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0 1.5rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 620ms ease, transform 620ms ease;
}
.intro-cap.is-up {
  opacity: 1;
  transform: translate(-50%, 0) translateY(0);
}
.intro-cap__what {
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: #eaf6ff;
}
.intro-cap__who,
.intro-cap__where {
  font-size: clamp(0.72rem, 1.35vw, 0.94rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(190, 222, 240, 0.62);
}
.intro-cap__where { letter-spacing: 0.1em; color: rgba(190, 222, 240, 0.4); }

/* The name waits for the head to hand off; without this it would be
   on screen through the whole opening. */
.hero .title span { opacity: 0; }
.hero .title span.is-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .intro-cap { display: none; }
}

/* ── who he is, under the name ────────────────────────────────
   Held to a narrow measure on the left so it never runs under the
   head, which sits to the right. It arrives with the name, not
   before: see the head:name hand-off in js/head.js. */
.bio {
  /* 34vw keeps it clear of him on a wide screen and holds the overlap to
     the outermost lines on a short one, where he is bounded by height and
     so sits much wider. */
  max-width: min(31rem, 34vw);
  margin-top: clamp(1.4rem, 3.2vh, 2.6rem);
  display: grid;
  gap: 0.85rem;
}
.bio p {
  margin: 0;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.86rem, 1.05vw, 1.02rem);
  font-weight: 300;
  line-height: 1.62;
  color: rgba(228, 234, 242, 0.68);   /* reads over the mesh where they cross */
  text-wrap: pretty;
}
.bio__lede {
  font-size: clamp(1rem, 1.45vw, 1.35rem) !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  color: rgba(238, 244, 250, 0.9) !important;
}
.bio__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 0.5rem !important;
  font-size: clamp(0.64rem, 0.82vw, 0.76rem) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(190, 222, 240, 0.42) !important;
}

/* the bio waits for the head to hand off, exactly as the name does */
.hero .bio > * { opacity: 0; }
.hero .bio > *.is-shown { opacity: 1; }

/* Only once the head fills the frame does the measure go full width.
   Above this he is still beside the text, and widening the column there
   ran the bio underneath him. */
@media (max-width: 640px) {
  .bio { max-width: none; }
  .bio p { color: rgba(226, 232, 240, 0.66); }
}


/* ── the pointer ──────────────────────────────────────────────
   A fixation reticle rather than an arrow. The whole page is built
   around him watching where you point, so the pointer is drawn as
   the thing being watched. Both carry a dark halo under the stroke
   so they stay visible against the mesh as well as the black.

   The knobs keep grab and grabbing: those say "this turns", which
   is worth more than the theme. Every cursor falls back to a real
   keyword, so nothing is lost if the data URI is refused. */
body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%20%3Cg%20fill='none'%20stroke='%23000'%20stroke-opacity='.55'%20stroke-width='3.2'%3E%20%3Ccircle%20cx='12'%20cy='12'%20r='7.5'/%3E%3C/g%3E%20%3Ccircle%20cx='12'%20cy='12'%20r='7.5'%20fill='none'%20stroke='%23e9eef7'%20stroke-opacity='.92'%20stroke-width='1.2'/%3E%20%3Ccircle%20cx='12'%20cy='12'%20r='1.6'%20fill='%23e9eef7'%20fill-opacity='.95'/%3E%3C/svg%3E") 12 12, default; }

a, button, summary, label[for], .radio__keys button, .store, .yt {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke='%23000'%20stroke-opacity='.55'%20stroke-width='3.4'%3E%20%3Ccircle%20cx='14'%20cy='14'%20r='7.5'/%3E%20%3Cpath%20d='M14%201.6v3.4M14%2023v3.4M1.6%2014h3.4M23%2014h3.4'/%3E%3C/g%3E%20%3Cg%20fill='none'%20stroke='%23d3a9ff'%20stroke-opacity='.98'%20stroke-width='1.5'%3E%20%3Ccircle%20cx='14'%20cy='14'%20r='7.5'/%3E%20%3Cpath%20d='M14%201.6v3.4M14%2023v3.4M1.6%2014h3.4M23%2014h3.4'/%3E%3C/g%3E%20%3Ccircle%20cx='14'%20cy='14'%20r='2.1'%20fill='%23d3a9ff'/%3E%3C/svg%3E") 14 14, pointer;
}

/* he is not clickable, and the canvas takes no pointer events */
.observer, .observer__canvas { cursor: inherit; }

/* ── the written work ─────────────────────────────────────────
   Editorial two column: the label holds its place on the left
   while the entries run past it on the right. Everything sits on
   hairlines rather than boxes, which suits a page whose only
   other furniture is a wireframe. */
.work {
  display: grid;
  grid-template-columns: minmax(12rem, 26%) 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 7rem) clamp(1.1rem, 3vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.work--last { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }

.work__head { position: sticky; top: 2.5rem; align-self: start; }
.work__label {
  font-size: clamp(0.62rem, 0.8vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.work__title {
  margin-top: 0.7rem;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 200;
  font-size: clamp(1.3rem, 2.25vw, 2.05rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--type-1);
  text-wrap: balance;
}

.work__body { max-width: 46rem; }
.work__lede {
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--type-1);
}
.work__note {
  margin-top: 1.1rem;
  font-size: clamp(0.88rem, 1.05vw, 1rem);
  font-weight: 300;
  line-height: 1.68;
  color: var(--type-3);
}
.work__kicker {
  margin: 2.6rem 0 0.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--muted);
}
.work__kicker:first-child { margin-top: 0; }

/* the three research strands */
.strands { margin-top: 2.4rem; display: grid; gap: 1.7rem; }
.strands h3 {
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  font-weight: 500;
  color: var(--type-1);
  letter-spacing: -0.006em;
}
.strands p {
  margin-top: 0.4rem;
  font-size: clamp(0.85rem, 1.02vw, 0.96rem);
  font-weight: 300;
  line-height: 1.62;
  color: var(--type-3);
}

/* dated entries: systems, posts, degrees, talks */
.entries { display: grid; gap: 0; margin-top: 1.4rem; }
.entries > li {
  display: grid;
  grid-template-columns: minmax(6.5rem, 11rem) 1fr;
  gap: 0.4rem clamp(0.9rem, 2vw, 2rem);
  padding: 1.15rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.entries > li:first-child { border-top: 0; }
.entries--refs > li { grid-template-columns: 1fr; }
.entries__when {
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.25rem;
}
.entries h3 {
  font-size: clamp(0.94rem, 1.12vw, 1.04rem);
  font-weight: 500;
  line-height: 1.34;
  color: var(--type-1);
  letter-spacing: -0.006em;
}
.entries p {
  margin-top: 0.35rem;
  font-size: clamp(0.84rem, 1vw, 0.94rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--type-3);
}
.entries .cite {
  margin-top: 0.3rem;
  font-size: clamp(0.78rem, 0.95vw, 0.86rem);
  color: var(--muted);
  font-style: normal;
}

.prizes { margin-top: 1.2rem; display: grid; gap: 0.62rem; }
.prizes li {
  position: relative;
  padding-left: 1.05rem;
  font-size: clamp(0.85rem, 1.02vw, 0.95rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--type-3);
}
.prizes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border: 1px solid var(--muted);
  border-radius: 50%;
}

/* contact */
.mail { margin-top: 1.8rem; }
.mail a {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  font-weight: 250;
  letter-spacing: -0.02em;
  color: var(--type-1);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 0.1em;
  transition: border-color 0.35s ease, color 0.35s ease;
  word-break: break-word;
}
.mail a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }

.elsewhere { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.elsewhere a {
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--type-3);
  text-decoration: none;
  transition: color 0.3s ease;
}
.elsewhere a:hover { color: var(--type-1); }

.colophon {
  margin-top: 2.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* the label cannot hold its place once it is above the text, and the
   column is too narrow to set a heading in much below this */
@media (max-width: 900px) {
  .work { grid-template-columns: 1fr; gap: 1.6rem; }
  .work__head { position: static; }
  .entries > li { grid-template-columns: 1fr; }
  .entries__when { padding-top: 0; }
}

/* festival selections under a film: a plain list, indented under the
   entry it belongs to rather than competing with it */
.laurels { margin-top: 0.7rem; display: grid; gap: 0.34rem; }
.laurels li {
  position: relative;
  padding-left: 0.95rem;
  font-size: clamp(0.78rem, 0.94vw, 0.87rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}
.laurels li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.66em;
  width: 4px; height: 1px;
  background: var(--muted);
}
.entries--film > li { padding: 1.5rem 0; }

/* ── film stills ──────────────────────────────────────────────
   The still leads the entry. It sits dim until you go near it,
   so a column of them reads as a list rather than as a wall of
   competing pictures. */
.film {
  display: block;
  position: relative;
  margin-bottom: 0.95rem;
  max-width: 27rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  background: #0d0d0d;
  text-decoration: none;
}
.film img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.66;
  filter: saturate(0.75);
  transform: scale(1.01);
  transition: opacity 0.5s ease, filter 0.5s ease, transform 0.7s ease;
}
.film:hover img, .film:focus-visible img {
  opacity: 1;
  filter: saturate(1);
  transform: scale(1.035);
}
.film__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.42);
  color: #fff;
  backdrop-filter: blur(2px);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.film:hover .film__play { background: rgba(10,10,10,0.6); border-color: #fff; transform: translate(-50%,-50%) scale(1.06); }
.film__play .icon { width: 1.15rem; height: 1.15rem; fill: currentColor; stroke: none; }

/* laurels, on the selections and the awards */
.laurels li, .prizes--laurel li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding-left: 0;
}
.laurels li::before, .prizes--laurel li::before { content: none; }
.laurel {
  width: 1.25rem; height: 1.25rem;
  stroke-width: 1.15;
  color: rgba(211, 169, 255, 0.55);
  margin-top: 0.12em;
  flex: none;
}
.prizes--laurel .laurel { color: rgba(211, 169, 255, 0.45); }

/* press: the same film, seen from outside */
.press { display: flex; flex-wrap: wrap; gap: 0.45rem 1.3rem; margin-top: 0.75rem; }
.press a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: clamp(0.74rem, 0.9vw, 0.82rem);
  color: var(--type-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.press a:hover { color: var(--type-1); border-bottom-color: rgba(255,255,255,0.3); }
.press .icon { width: 0.85rem; height: 0.85rem; fill: currentColor; stroke: none; }

/* a paper you can actually go and read */
.paper {
  display: inline-flex; align-items: center; gap: 0.38rem;
  margin-top: 0.5rem;
  font-size: clamp(0.74rem, 0.9vw, 0.82rem);
  letter-spacing: 0.04em;
  color: var(--type-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.paper:hover { color: var(--type-1); border-bottom-color: rgba(255,255,255,0.3); }
.paper .icon { width: 0.86rem; height: 0.86rem; }

.elsewhere a { display: inline-flex; align-items: center; gap: 0.4rem; }
.elsewhere .icon { width: 0.92rem; height: 0.92rem; }

/* ── the three rooms ──────────────────────────────────────────
   The same block sits at the foot of all three sites, with the
   current one marked rather than removed, so you can always see
   how many there are and which one you are standing in. */
.rooms { display: grid; gap: 0; margin-top: 1.4rem; }
.rooms li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.rooms li:first-child { border-top: 0; }
.rooms a, .rooms__here {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr auto;
  gap: 0.3rem clamp(0.9rem, 2vw, 2rem);
  align-items: baseline;
  padding: 1.15rem 0;
  text-decoration: none;
  color: inherit;
}
.rooms a > span:first-child, .rooms__here > span:first-child {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  font-weight: 300;
  letter-spacing: -0.012em;
  color: var(--type-1);
  transition: color 0.3s ease;
}
.rooms__blurb {
  font-size: clamp(0.8rem, 0.98vw, 0.9rem);
  font-weight: 300;
  color: var(--type-3);
}
.rooms a:hover > span:first-child { color: #fff; }
.rooms a:hover .rooms__blurb { color: var(--type-2); }
.rooms__here { opacity: 0.5; }
.rooms__you {
  font-size: 0.64rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 640px) {
  .rooms a, .rooms__here { grid-template-columns: 1fr; }
  .rooms__you { display: none; }
}

/* ── the flagship systems, in full ────────────────────────────
   These carry a subtitle, a paragraph, what the system actually
   does, and what it is built from. Everything is on show rather
   than folded behind a disclosure, because the point of the page
   is the detail. */
.entries--sys > li { padding: 1.7rem 0; }
.sys__sub {
  margin-top: 0.15rem !important;
  font-size: clamp(0.78rem, 0.95vw, 0.87rem) !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.sys__points { margin-top: 0.85rem; display: grid; gap: 0.42rem; }
.sys__points li {
  position: relative;
  padding-left: 1rem;
  font-size: clamp(0.82rem, 0.98vw, 0.92rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--type-3);
}
.sys__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 6px; height: 1px;
  background: rgba(211, 169, 255, 0.5);
}
.sys__methods {
  margin-top: 0.85rem !important;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: clamp(0.75rem, 0.9vw, 0.83rem) !important;
  color: var(--muted) !important;
  letter-spacing: 0.02em;
}

/* the toolchain reads better as a column than as three strands */
.strands--kit { gap: 1.35rem; }
.strands--kit h3 {
  font-size: clamp(0.74rem, 0.9vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.strands--kit p { margin-top: 0.4rem; color: var(--type-2); }


/* ── the ground ───────────────────────────────────────────────
   A flat #131313 made the page feel like a slide rather than a
   room. Two very soft lights instead, one warm violet up where
   the head sits and one cold behind the text, over a base that
   darkens down the page. Both are fixed, so they stay put while
   the content moves past them.

   The grain on top is what keeps the gradients from banding: a
   flat dark ramp shows visible steps on an 8 bit display, and a
   little noise breaks them up. It is generated, not fetched. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(52rem 38rem at 78% 0%,  rgba(150, 104, 214, 0.085), transparent 60%),
    radial-gradient(44rem 38rem at 4% 40%,  rgba(70, 106, 178, 0.045),  transparent 58%),
    linear-gradient(178deg, #141318 0%, #111013 44%, #0e0e10 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url(%23n)'%20opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* the head sits over the ground, not on a black plate */
html, body { background: transparent; }
html { background-color: #0f0f11; }

@media (prefers-reduced-motion: reduce) { body::after { opacity: 0.22; } }

/* ═══════════════════════════════════════════════════════════════
   Giving the page a pulse.

   Nine sections all set the same way is a template, not a
   portfolio: after the radio and the television the page went
   flat and stayed flat. Three things fix that without touching a
   word of the copy.

   One, scale. The section titles were 2rem next to a 7rem name,
   so nothing after the hero ever felt like an arrival. They are
   display size now, and each section is counted, with the numeral
   set large and hollow so it reads as structure rather than
   decoration.

   Two, colour. The mesh is violet and the page was grey. The
   numerals, the rules and the section marks take the accent, so
   the head and the writing belong to the same object.

   Three, air. Sections breathe further apart, and each opens with
   a hairline that runs the full width rather than a boxed edge.
   ═══════════════════════════════════════════════════════════════ */

:root { --ink: #c9a6ff; }

body { counter-reset: section; }

.work {
  counter-increment: section;
  grid-template-columns: minmax(13rem, 30%) 1fr;
  padding-top: clamp(5rem, 14vh, 10rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
  border-top: 0;
  position: relative;
}
/* a full width hairline, not a boxed edge */
.work::before {
  content: "";
  position: absolute;
  left: clamp(1.1rem, 3vw, 4rem);
  right: clamp(1.1rem, 3vw, 4rem);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201, 166, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.09) 22%,
    rgba(255, 255, 255, 0.05) 100%);
}
.work--last { border-bottom: 0; }

.work__head { top: 4rem; }

/* the count, set large and hollow */
.work__label {
  display: block;
  font-size: clamp(0.6rem, 0.76vw, 0.7rem);
  letter-spacing: 0.24em;
  color: var(--ink);
  opacity: 0.75;
}
.work__label::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  margin-bottom: 0.55rem;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 200;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 166, 255, 0.42);
  opacity: 0.9;
}

.work__title {
  margin-top: 0.9rem;
  font-size: clamp(1.7rem, 3.4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.work__body { max-width: 48rem; }
.work__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  line-height: 1.48;
}

/* the accent reaches the small marks too */
.work__kicker { color: var(--ink); opacity: 0.8; }
.entries__when { color: var(--ink); opacity: 0.62; }
.strands h3::before {
  content: "";
  display: inline-block;
  width: 14px; height: 1px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: var(--ink);
  opacity: 0.7;
}

@media (max-width: 900px) {
  .work__label::before { font-size: clamp(2.2rem, 12vw, 3.4rem); }
  .work { padding-top: clamp(3.2rem, 9vh, 5rem); }
}

/* ── the films, as a gallery ──────────────────────────────────
   A 27rem still stacked in a single column read as an inventory.
   The work is visual, so it gets shown at size: two across, the
   still filling its cell, the title sitting on the image rather
   than queueing underneath it. */
#film .work__body { max-width: none; }
.entries--film {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  margin-top: 2rem;
}
.entries--film > li {
  display: block;
  padding: 0;
  border-top: 0;
}
.entries--film .entries__when {
  display: inline-block;
  margin-bottom: 0.55rem;
  font-size: 0.63rem;
  letter-spacing: 0.19em;
}
.entries--film .film {
  max-width: none;
  margin-bottom: 0.9rem;
  border-radius: 3px;
}
.entries--film .film img { opacity: 0.8; }
.entries--film h3 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.75vw, 1.55rem);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.12;
}
.entries--film p { margin-top: 0.45rem; }

/* the laurels go quiet in a grid; they are supporting detail here */
.entries--film .laurels { margin-top: 0.7rem; gap: 0.26rem; }
.entries--film .laurels li { grid-template-columns: 1rem 1fr; }
.entries--film .laurel { width: 0.92rem; height: 0.92rem; }
.entries--film .laurels li span {
  font-size: clamp(0.72rem, 0.86vw, 0.79rem);
  line-height: 1.45;
}

/* the two with no still should not leave a hole in the grid */
.entries--film > li:not(:has(.film)) {
  align-self: start;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.015);
}

/* ── pitute, on a screen ──────────────────────────────────────
   Set in pitute's own system rather than in an approximation of
   it: the tokens are lifted from its globals.css, the faces are
   the two it actually loads. Geist runs the interface, Source
   Serif carries the names and the prose, which is how pitute sets
   a profile: font-serif on the heading, sans on everything round
   it. Cards are white on a cool near-white ground at its 0.5rem
   radius, and the blue is its --primary rather than one I picked.

   The other two devices are warm wood; this one is glass and
   light, because that is what the product is and because it is
   the current work rather than the archive. */
.pitute {
  position: relative;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.25rem, 5vw, 4rem) clamp(5rem, 14vh, 10rem);
  max-width: 1460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.78fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* straight out of pitute/src/app/globals.css */
.screenbox {
  --background: oklch(0.965 0.003 255);
  --foreground: oklch(0.255 0.005 265);
  --card: oklch(1 0 0);
  --primary: oklch(0.6 0.2 256);
  --muted-fg: oklch(0.51 0.008 265);
  --border: oklch(0.895 0.005 255);
  --accent-fg: oklch(0.46 0.16 256);
  --radius: 0.5rem;
  position: relative;
}



/* ── the machine ──────────────────────────────────────────────
   A lid, a hinge and a base, drawn rather than photographed,
   because the other two are period objects and this one is not.
   The screen holds the real pitute; see js/pitute.js for why it
   takes no pointer. */
.lap { position: relative; }

.lap__lid {
  position: relative;
  padding: 0.62rem 0.62rem 0.9rem;
  border-radius: 14px 14px 5px 5px;
  background: linear-gradient(176deg, #34363c 0%, #212328 62%, #191b1f 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 26px 50px -26px rgba(0, 0, 0, 0.9);
}
.lap__notch {
  position: absolute;
  left: 50%; bottom: 0.34rem;
  transform: translateX(-50%);
  width: 3.2rem; height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.09);
}

.lap__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow-y: auto;             /* the page is 1764px tall; let people read it */
  overflow-x: hidden;
  overscroll-behavior: contain; /* and do not drag the article with it */
  border-radius: 7px;
  background: #0b0c0e;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
.lap__screen::-webkit-scrollbar { width: 7px; }
.lap__screen::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
}
.lap:not(.is-on) .lap__screen { overflow: hidden; }


/* the real screen, captured from pitute running */
.lap__shot {
  display: block;
  width: 100%;
  height: auto;                 /* taller than the lid, which is the point */
  opacity: 0;
  transition: opacity 0.5s ease;
}
.lap.is-on .lap__shot { opacity: 1; }

/* three dots while it is coming up, and the dark screen when it is off */
.lap__boot {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lap:not(.is-on) .lap__boot { opacity: 0; }
.lap__boot span {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.6 0.2 256);
  animation: lap-pulse 1.15s ease-in-out infinite;
}
.lap__boot span:nth-child(2) { animation-delay: 0.16s; }
.lap__boot span:nth-child(3) { animation-delay: 0.32s; }
@keyframes lap-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lap__boot span { animation: none; opacity: 0.7; }
}

.lap__base {
  position: relative;
  height: 1.9rem;
  width: 110%;
  margin-left: -5%;
  border-radius: 0 0 14px 14px;
  background:
    linear-gradient(180deg, #34363c 0%, #26282d 42%, #17191c 100%);
  box-shadow: 0 18px 30px -20px rgba(0, 0, 0, 0.95);
}
.lap__hinge {
  position: absolute;
  left: 50%; top: 0.3rem;
  transform: translateX(-50%);
  width: 6rem; height: 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
}

/* the power key sits on the deck, where a laptop keeps one */
.lap__power {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background: linear-gradient(180deg, #2f3238 0%, #212328 100%);
  color: #6d727c;
  cursor: inherit;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.lap__power svg {
  width: 0.82rem; height: 0.82rem;
  fill: none; stroke: currentColor; stroke-width: 2.1;
  stroke-linecap: round;
}
.lap__power:hover { border-color: rgba(255, 255, 255, 0.3); color: #9aa0aa; }
.lap.is-on .lap__power {
  color: oklch(0.72 0.16 256);
  border-color: oklch(0.6 0.2 256 / 0.5);
  box-shadow: 0 0 10px oklch(0.6 0.2 256 / 0.35);
}
.lap__power:focus-visible {
  outline: 2px solid oklch(0.72 0.16 256);
  outline-offset: 2px;
}

.lap__note {
  margin-top: 1.1rem;
  font-family: "Geist", "Inter", sans-serif;
  font-size: clamp(0.7rem, 0.85vw, 0.78rem);
  color: var(--muted);
}

/* the wordmark, as pitute sets its own: the mark, the serif, the
   accent full stop. Lifted from components/brand.tsx rather than
   restyled, so the section is headed by the real thing. */
.about__title--pit { display: block; }
/* At Madhuri's scale. The wordmark was sitting at body size next to a
   5rem one, which is why the two sections did not read as siblings.
   Same size, same weight in its own face, and the mark scales with it. */
.about__pitmark {
  width: clamp(2.6rem, 5.6vw, 4.6rem);
  height: auto;
  flex: none;
}
.about__pit {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: clamp(3rem, 6.6vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: #f4f6fa;
}
.about__pitstop {
  color: oklch(0.66 0.21 256);
  margin-left: 0.01em;
  text-shadow: 0 0 26px oklch(0.6 0.2 256 / 0.55);
}

/* pitute's blue, where Madhuri has pink and Gradient has ice */
.feats--pit li { color: #c3d0ea; }
.feats--pit svg { color: oklch(0.72 0.16 256); }
.feats--pit li:hover { border-color: oklch(0.6 0.2 256 / 0.5); }

@media (max-width: 900px) {
  .pitute { grid-template-columns: 1fr; }
}

/* ── the pitute button ────────────────────────────────────────
   It was carrying the generic network glyph, which rendered as
   four loose dots and read as a broken image. It takes pitute's
   own mark instead, the way the Play button takes Google's and
   the source button takes GitHub's. */
.store--pit {
  border-color: oklch(0.6 0.2 256 / 0.32);
  background: oklch(0.6 0.2 256 / 0.07);
}
.store--pit:hover {
  border-color: oklch(0.6 0.2 256 / 0.62);
  background: oklch(0.6 0.2 256 / 0.13);
}
.store__mark {
  width: 1.6rem;
  height: auto;
  flex: none;
  object-fit: contain;
}
.store--pit .store__text { color: var(--type-1); }
.store--pit small { color: oklch(0.74 0.14 256); }

/* the toolchain, tinted like its chips */
.kit--pit li { color: #c3d0ea; }
.kit--pit .icon { color: oklch(0.72 0.16 256); }   /* .kit .icon is 0-2-0, so this has to match it */

/* ── shoo shoo, on two phones ─────────────────────────────────
   Two devices rather than one, because it is a space for two
   people and a single handset would say the wrong thing. The
   screens are the real app, run locally and photographed at 390
   by 844 on a 3x screen.

   The mark is drawn rather than fetched: two overlapping circles,
   the yellow one behind the pink, which is what the app puts
   above its own name. */
.shoo {
  position: relative;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.25rem, 5vw, 4rem) clamp(5rem, 14vh, 10rem);
  max-width: 1460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.pair {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 46vw, 34rem);
}
.phone {
  position: absolute;
  width: clamp(9.5rem, 17vw, 14rem);
  aspect-ratio: 390 / 844;
  border-radius: clamp(1.4rem, 2.4vw, 2.1rem);
  padding: 0.42rem;
  background: linear-gradient(168deg, #3a3c42 0%, #232529 55%, #17181c 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 34px 60px -28px rgba(0, 0, 0, 0.92);
}
.phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(1.1rem, 2vw, 1.75rem);
  background: #f7f5ef;
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.phone__notch {
  position: absolute;
  left: 50%; top: 0.78rem;
  transform: translateX(-50%);
  width: 27%; height: 0.32rem;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
}
.phone--back {
  transform: translate(-26%, -6%) rotate(-8deg) scale(0.94);
  filter: brightness(0.82) saturate(0.9);
}
.phone--front { transform: translate(24%, 6%) rotate(5deg); }

/* the two circles */
.about__shoomark, .store__shoomark { display: inline-flex; align-items: center; flex: none; }
.about__shoomark i, .store__shoomark i {
  display: block;
  border-radius: 50%;
}
.about__shoomark i { width: clamp(1.5rem, 3vw, 2.4rem); aspect-ratio: 1; }
.about__shoomark i:first-child { background: #f2c318; }
.about__shoomark i:last-child { background: #e0416b; margin-left: -0.42em; }
.store__shoomark i { width: 0.85rem; aspect-ratio: 1; }
.store__shoomark i:first-child { background: #f2c318; }
.store__shoomark i:last-child { background: #e0416b; margin-left: -0.34em; }

.about__title--shoo { display: flex; align-items: center; gap: 0.7rem; }
.about__shoo {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: #f6f2ea;
}

.feats--shoo li { color: #e6d6c6; }
.feats--shoo svg { color: #f2c318; }
.feats--shoo li:hover { border-color: rgba(242, 195, 24, 0.45); }
.kit--shoo .icon { color: #e0416b; }

.store--shoo { border-color: rgba(242, 195, 24, 0.34); background: rgba(242, 195, 24, 0.07); }
.store--shoo:hover { border-color: rgba(242, 195, 24, 0.62); background: rgba(242, 195, 24, 0.12); }
.store--shoo small { color: #f2c318; }

@media (max-width: 900px) {
  .shoo { grid-template-columns: 1fr; }
  .pair { min-height: 22rem; }
}

/* ── DinoSynthesis ────────────────────────────────────────────
   The animal is a downloaded model under CC BY 4.0, credited in the
   colophon. It has a rig and no clips, so the walk is driven bone by
   bone in js/dino.js, and its jaw rides the RMS of the call, which
   makes the movement the envelope of the sound itself. */
.dino {
  position: relative;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.25rem, 5vw, 4rem) clamp(5rem, 14vh, 10rem);
  max-width: 1460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.dino__stage { position: relative; }


.about__dino {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 250;
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(96deg, #f0b357 0%, #e0704a 52%, #b8564f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f0b357;
}
.feats--dino li { color: #e8d3bb; }
.feats--dino svg { color: #e0a04a; }
.feats--dino li:hover { border-color: rgba(224, 160, 74, 0.45); }
.kit--dino .icon { color: #e0a04a; }

.dino__spec {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.6rem;
  border-radius: 6px;
  opacity: 0.9;
}

@media (max-width: 900px) {
  .dino { grid-template-columns: 1fr; }
}

/* The model sits on the page, not in a box: no frame, no panel, no
   inner shadow. The waves are behind it and the animal walks in place
   over them, which is what carries the forward motion. */
.dino__field {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.dino__waves,
.dino__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dino__waves { z-index: 0; pointer-events: none; }
.dino__canvas { z-index: 1; }
.dino__canvas > canvas { width: 100% !important; height: 100% !important; display: block; }

/* Sound starts by itself and loops, so it has to be stoppable: this is
   that switch. Small, out of the way, bars still when it is off. */
@media (max-width: 900px) { .dino__field { aspect-ratio: 1 / 1; } }

/* test card shown while the set warms up, before the bulletin */
/* show the whole 16:9 broadcast, letterboxed like widescreen on an old set */
video.tv__frame {
  width: 100%; height: 100%;   /* undo the iframe overscan: the full frame must show */
  object-fit: contain; background: #000;
}
.tv__card {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; z-index: 1; opacity: 0;
  transition: opacity .25s steps(2, end);
  pointer-events: none;
}
.tv__card.is-up { opacity: 1; }

/* phones: the later .work grid rule overrode the single-column one, and the
   fixed caption under the eyes was wider than the screen */
@media (max-width: 900px) {
  .work { grid-template-columns: 1fr; }
  .work__body { min-width: 0; max-width: 100%; }
}
@media (max-width: 640px) {
  .intro-cap { left: 0; right: 0; width: 100%; box-sizing: border-box; transform: translateY(0.6rem); }
  .intro-cap.is-up { transform: translateY(0); }
}

/* ── the television takes the head's place in the hero ───────── */
.hero-tv {
  position: absolute; z-index: 2;
  right: clamp(1rem, 4vw, 4.5rem); top: 50%;
  width: min(48vw, 700px);
  transform: translateY(-50%);
  margin: 0;
}
.hero-tv__cap {
  margin-top: 1.4rem; text-align: center;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(190, 222, 240, 0.45);
}
.hero-tv__cap a { color: rgba(234, 246, 255, 0.85); }
.hero .stage { padding-right: calc(min(48vw, 700px) + clamp(2rem, 6vw, 6rem)); }

/* Gradient's own section keeps its words; the set now lives at the top */
.gradient { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); justify-content: stretch; }
.grad-tv { margin: 0; order: 1; }
@media (max-width: 900px) { .gradient { grid-template-columns: 1fr; } .grad-tv { order: 1; max-width: 560px; margin: 0 auto; width: 100%; } }

@media (max-width: 900px) {
  .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .hero-tv {
    position: relative; right: auto; top: auto; transform: none;
    width: min(92%, 560px); margin: clamp(4.5rem, 12vh, 7rem) auto 0;
  }
  .hero .stage { position: relative; inset: auto; padding-right: clamp(1.1rem, 3vw, 4rem); padding-bottom: 10vh; }
}

/* skills: no date column */
.entries--skills > li { grid-template-columns: 1fr !important; }

/* JOY's opening film, in the research section */
.joyfilm { position: relative; margin: 2.4rem 0 2.6rem; }
.joyfilm video {
  display: block; width: 100%; aspect-ratio: 1280 / 668; background: #000;
  border-radius: 10px; cursor: pointer;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.joyfilm__sound {
  position: absolute; right: 14px; top: 14px;
  font: 500 0.66rem/1 "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  color: #eaf6ff; background: rgba(10,12,20,.55); border: 1px solid rgba(255,255,255,.18);
  padding: 0.55rem 0.8rem; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px);
}
.joyfilm__sound[aria-pressed="true"] { color: #ffcf8a; border-color: rgba(255,207,138,.5); }
.joyfilm figcaption {
  margin-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(190,222,240,.5);
}

/* ── the hero: pitute's world at night, on dark paper ───────────── */
.hero {
  isolation: isolate;
  background-color: #0b1020;
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(40, 52, 96, 0.35) 0%, rgba(11, 16, 32, 0) 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.86  0 0 0 0 0.95  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.75  0 0 0 0 0.8  0 0 0 0 0.95  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  background-size: auto, 320px 320px, 600px 600px;
}
/* a vignette, so the edges of the sheet fall into the night */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, rgba(0,0,0,0) 55%, rgba(4, 6, 14, 0.75) 100%);
}
.nightmap { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
.nightmap.is-ready { opacity: 1; }
.nightmap canvas { position: absolute; inset: 0; display: block; }
/* legibility for the name and bio, which sit over the Americas */
.hero .stage { z-index: 1; }
.hero .stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 11, 24, 0.82) 0%, rgba(8, 11, 24, 0.55) 30%, rgba(8, 11, 24, 0) 50%);
}

/* a liquid-glass card beside each stop, as on pitute */
.nightmap__card {
  position: absolute; left: 0; top: 0; z-index: 2; width: 15rem;
  padding: 0.85rem 1rem 0.9rem;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  opacity: 0; transition: opacity 0.45s ease;
  pointer-events: none;
}
.nightmap__card.is-up { opacity: 1; }
.nightmap__pic {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 9px; margin-bottom: 0.7rem;
  border: 1px solid rgba(255,255,255,0.12);
  filter: saturate(0.85) brightness(0.92);       /* sit into the night palette */
}
.nightmap__pic[hidden] { display: none; }
.nightmap__card p { margin: 0; }
.nightmap__kind { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #ffcf8a; }
.nightmap__title { margin-top: 0.3rem !important; font-size: 0.92rem; line-height: 1.35; color: #f1f4fb; font-weight: 500; }
.nightmap__place { margin-top: 0.35rem !important; font-size: 0.74rem; color: rgba(205, 215, 240, 0.65); }

.nightmap__tip {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; white-space: nowrap;
  padding: 0.45rem 0.7rem; border-radius: 8px; font-size: 0.78rem; color: #fff;
  background: rgba(10, 12, 22, 0.9); border: 1px solid rgba(255,255,255,0.12);
  opacity: 0; transition: opacity 0.15s ease;
}
.nightmap__tip.is-up { opacity: 1; }

.nightmap__legend {
  position: absolute; z-index: 2; left: clamp(1.1rem, 3vw, 4rem); bottom: clamp(1.2rem, 4vh, 2.4rem);
  font-size: 0.68rem; letter-spacing: 0.06em; color: rgba(205, 215, 240, 0.6);
}
.nightmap__legend p { margin: 0; }
.nightmap__legend a { color: rgba(234, 240, 255, 0.85); }
.nightmap__scale {
  display: block; width: 11rem; height: 6px; margin: 0.5rem 0 0.3rem; border-radius: 3px;
  background: linear-gradient(90deg, rgb(64,120,214), rgb(104,134,255), rgb(160,98,246), rgb(190,92,255));
}
.nightmap__ends { display: flex; justify-content: space-between; width: 11rem; }
.nightmap__total { margin-top: 0.35rem !important; color: rgba(205, 215, 240, 0.45); }

/* the set, smaller, over the southern ocean so the route stays clear */
.hero-tv { width: min(27vw, 430px); top: auto; bottom: clamp(3rem, 8vh, 5rem); transform: none; right: clamp(1rem, 3vw, 3rem); }
.hero .stage { padding-right: clamp(1.1rem, 3vw, 4rem); }
.hero .bio { max-width: min(30rem, 36vw); }

/* Two columns on a wide screen: the name and bio on clean paper at the left,
   the map to the right, fading in under the column's edge. Nothing on the map
   ever sits under the words (nightmap.js keeps its cards clear as well). */
@media (min-width: 901px) {
  .hero .stage { right: auto; width: 40%; padding-right: 0; }
  .hero .stage::before { inset: 0 -12% 0 0; background: linear-gradient(90deg, rgba(8, 11, 24, 0.94) 0%, rgba(8, 11, 24, 0.9) 70%, rgba(8, 11, 24, 0) 100%); }
  .hero .title { font-size: clamp(2.6rem, 5.4vw, 6.2rem); }
  .hero .bio { max-width: 30rem; }
  .hero-tv { width: min(21vw, 340px); right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(1.5rem, 5vh, 3rem); }
  .nightmap { left: 36%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .nightmap { position: relative; inset: auto; height: 64vw; order: 0; }
  .nightmap__card { width: 12rem; padding: 0.6rem 0.75rem; }
  .nightmap__title { font-size: 0.8rem; }
  .nightmap__legend { position: relative; left: auto; bottom: auto; order: 1; margin: 0.6rem clamp(1.1rem, 3vw, 4rem) 0; }
  .hero-tv { order: 3; width: min(92%, 520px); margin: 2.5rem auto 3rem; bottom: auto; right: auto; }
  .hero .stage { order: 2; }
  .hero .stage::before { display: none; }
  .hero .bio { max-width: none; }
}


/* ── pitute's agents on the night map ─────────────────────── */
.nightmap__agents { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.nightmap__agent {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 7px; overflow: visible;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.18), 0 0 14px rgba(160,120,255,0.25);
  animation: agentPop 520ms cubic-bezier(0.34,1.56,0.64,1) both, agentBob 3.4s ease-in-out infinite;
  animation-delay: var(--d), calc(var(--d) + 520ms);
  transition: scale 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.nightmap__agent img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: contain; }
.nightmap__agent.is-say { scale: 1.55; z-index: 3; }
.nightmap__say {
  position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%) scale(0.65);
  white-space: nowrap; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.18rem 0.42rem; border-radius: 999px; color: #f1f4fb;
  background: rgba(22, 24, 40, 0.88); border: 1px solid rgba(255,255,255,0.16);
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
}
.nightmap__agent.is-say .nightmap__say { opacity: 1; transform: translateX(-50%) scale(0.65) translateY(-1px); }
.nightmap__agent.is-east .nightmap__say { left: auto; right: 0; transform-origin: right bottom; transform: scale(0.65); }
.nightmap__agent.is-west .nightmap__say { left: 0; transform-origin: left bottom; transform: scale(0.65); }
@keyframes agentPop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes agentBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (max-width: 760px) {
  .nightmap__agent { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 5px; }
  .nightmap__say { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nightmap__agent { animation: none; }
}

/* ═══ What pitute does: its onboarding scenes (js/pitfeat.js) ═══════
   Ported from pitute's quick-start-intro.tsx and its CSS module, set in
   pitute's dark theme so they sit on this page. */
.pitquote { margin-top: 1.5rem; padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.pitquote__score { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--type-3); }
.pitquote__score b { font-family: "Source Serif 4", Georgia, serif; font-size: 1.3rem; letter-spacing: 0; color: #f5c451; margin-right: 0.3rem; text-transform: none; }
.pitquote blockquote { margin-top: 0.4rem; font-family: "Source Serif 4", Georgia, serif; font-size: 1.08rem; color: var(--type-1); line-height: 1.4; }
.pitquote figcaption { margin-top: 0.35rem; font-size: 0.78rem; color: var(--type-3); }

.pitfeat {
  --pf-card: #1a1c22; --pf-card2: #22252d; --pf-muted: #2a2d36; --pf-border: rgba(255,255,255,0.09);
  --pf-fg: #eceef3; --pf-mfg: #9aa1ad; --pf-primary: #4f8cff; --pf-ok: #34d399;
  max-width: 1460px; margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(5rem, 14vh, 9rem);
  color: var(--pf-fg);
}
.pitfeat svg:not(.icon) { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pitfeat__title { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.01em; color: var(--type-1); }
.pitfeat__sub { margin-top: 0.5rem; max-width: 40rem; color: var(--type-3); font-size: 0.98rem; line-height: 1.6; }
.pitfeat__grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.pf {
  min-width: 0; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.25rem; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--pf-border);
}
.pf--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 2rem; }
.pf__top { display: flex; gap: 0.85rem; align-items: flex-start; }
.pf__top--wide { flex-direction: column; width: 19rem; flex-shrink: 0; }
.pf__top h3 { font-family: "Geist", sans-serif; font-size: 1rem; font-weight: 600; color: var(--pf-fg); line-height: 1.3; }
.pf__top p { margin-top: 0.3rem; font-size: 0.86rem; line-height: 1.55; color: var(--pf-mfg); }
.pf__icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; }
.pf__icon .icon { width: 20px; height: 20px; stroke-width: 1.9; }
.pf__icon--violet { background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(217,70,239,.12)); color: #c4b5fd; }
.pf__icon--emerald { background: linear-gradient(135deg, rgba(16,185,129,.28), rgba(132,204,22,.12)); color: #6ee7b7; }
.pf__icon--amber { background: linear-gradient(135deg, rgba(245,158,11,.28), rgba(249,115,22,.12)); color: #fcd34d; }
.pf__icon--rose { background: linear-gradient(135deg, rgba(244,63,94,.28), rgba(236,72,153,.12)); color: #fda4af; }
.pf__icon--sky { background: linear-gradient(135deg, rgba(14,165,233,.28), rgba(59,130,246,.12)); color: #7dd3fc; }
.pf__icon--indigo { background: linear-gradient(135deg, rgba(99,102,241,.28), rgba(139,92,246,.12)); color: #a5b4fc; }
.pf__stage { position: relative; margin-top: auto; height: 220px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(79,140,255,0.08), transparent 70%), rgba(0,0,0,0.18); }
.pf__scene { position: absolute; top: 0; left: 0; width: 320px; height: 220px; transform-origin: top left; text-align: left; }

/* the scene kit */
.sc { width: 320px; height: 220px; padding: 10px 8px; font-family: "Geist", sans-serif; color: var(--pf-fg); }
.sc--col { display: flex; flex-direction: column; gap: 10px; }
.sc--center { display: flex; align-items: center; justify-content: center; }
.sc--gap { flex-direction: column; gap: 12px; }
.sc--split { display: flex; align-items: center; gap: 12px; }
.sc-row { display: flex; gap: 10px; flex: 1; min-height: 0; }
.pf-card { background: var(--pf-card); border: 1px solid var(--pf-border); border-radius: 14px; box-shadow: 0 14px 30px -18px rgba(0,0,0,0.9); }
.pf-cap { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-mfg); }
.pf-cap--rule { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--pf-border); }
.pf-h { font-size: 13px; font-weight: 600; line-height: 1.2; }
.pf-m { margin-top: 2px; font-size: 11px; color: var(--pf-mfg); }
.pf-b { font-size: 11px; font-weight: 600; }
.pf-ask { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 999px; background: var(--pf-card); border: 1px solid var(--pf-border); flex-shrink: 0; }
.pf-joy { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.pf-joy--big { width: 40px; height: 40px; }
.pf-ask__text { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.pf-send { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pf-primary); color: #fff; flex-shrink: 0; }
.pf-send svg { width: 13px; height: 13px; }
.pf-card--ask { width: 176px; padding: 10px; align-self: flex-start; flex-shrink: 0; }
.pf-chips { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 9px; background: var(--pf-muted); font-size: 9px; }
.pf-chips span { display: flex; align-items: center; gap: 4px; }
.pf-chips i { font-style: normal; color: var(--pf-mfg); }
.pf-chips b { padding: 1px 6px; border-radius: 999px; background: var(--pf-card); border: 1px solid var(--pf-border); font-weight: 600; }
.pf-lt { text-decoration: line-through; }
.pf-swap { position: relative; display: flex; height: 24px; margin-top: 8px; font-size: 10px; font-weight: 600; }
.pf-swap > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 999px; }
.pf-btn { background: var(--pf-primary); color: #fff; }
.pf-ok { background: rgba(52,211,153,0.15); color: var(--pf-ok); }
.pf-ok svg { width: 12px; height: 12px; stroke-width: 3; }
.pf-ok--plain { background: var(--pf-card2); color: var(--pf-fg); border: 1px solid var(--pf-border); }
.pf-feed { position: relative; flex: 1; min-width: 0; }
.pf-feedrow { position: absolute; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: 9px; background: var(--pf-card); border: 1px solid var(--pf-border); font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.pf-feedrow i { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.pf-card--match { position: relative; width: 300px; padding: 14px; }
.pf-badge { position: absolute; top: -10px; right: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #059669; color: #fff; font-size: 10px; font-weight: 600; box-shadow: 0 6px 14px -6px rgba(5,150,105,0.8); }
.pf-badge svg { width: 12px; height: 12px; stroke-width: 3; }
.pf-meter { margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.pf-meter > span { width: 28px; height: 6px; border-radius: 999px; background: var(--pf-muted); overflow: hidden; }
.pf-meter i { display: block; height: 100%; border-radius: 999px; background: #10b981; }
.pf-meter b { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--pf-ok); }
.pf-quotes { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.pf-quotes li { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; line-height: 1.35; }
.pf-quotes q { font-style: italic; color: rgba(236,238,243,0.88); }
.pf-tick { display: grid; place-items: center; width: 14px; height: 14px; margin-top: 1px; flex-shrink: 0; border-radius: 50%; background: rgba(16,185,129,0.18); color: var(--pf-ok); }
.pf-tick svg { width: 10px; height: 10px; stroke-width: 3.2; }
.pf-card--brief { width: 300px; overflow: hidden; }
.pf-brief__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(90deg, #0ea5e9, #d946ef, #fbbf24); }
.pf-h--w { font-size: 14px; color: #fff; }
.pf-m--w { color: rgba(255,255,255,0.85); }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px 0; }
.pf-stats span { padding: 6px 8px; border-radius: 9px; background: var(--pf-muted); }
.pf-stats b { display: block; font-family: "Source Serif 4", Georgia, serif; font-size: 20px; line-height: 1; font-weight: 600; }
.pf-stats i { display: block; margin-top: 2px; font-style: normal; font-size: 9px; line-height: 1.2; color: var(--pf-mfg); }
.pf-tabs { display: flex; gap: 4px; margin: 10px 12px 0; padding: 2px; border-radius: 999px; background: var(--pf-muted); font-size: 10px; font-weight: 600; }
.pf-tabs span { flex: 1; padding: 4px 0; text-align: center; border-radius: 999px; color: var(--pf-mfg); transition: background-color .3s, color .3s; }
.pf-tabs span.is-on { background: var(--pf-card2); color: var(--pf-fg); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.pf-row { display: flex; align-items: center; gap: 10px; }
.pf-row > span:last-child { min-width: 0; flex: 1; }
.pf-row b { display: block; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row i { display: block; margin-top: 2px; font-style: normal; font-size: 9px; color: var(--pf-mfg); }
.pf-row--line { margin: 10px 12px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--pf-border); }
.pf-sq { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; background: linear-gradient(135deg, #fdba74, #fb7185); }
.pf-row--card { padding: 8px 10px; border-radius: 12px; background: var(--pf-card); border: 1px solid var(--pf-border); box-shadow: 0 10px 22px -16px rgba(0,0,0,0.9); }
.pf-row--alert { padding: 8px 10px; border-radius: 12px; background: rgba(79,140,255,0.1); border: 1px solid rgba(79,140,255,0.35); box-shadow: 0 10px 22px -14px rgba(79,140,255,0.45); }
.pf-bell { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--pf-primary); color: #fff; }
.pf-bell svg { width: 16px; height: 16px; }
.pf-face { position: relative; display: inline-block; flex-shrink: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07); }
.pf-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pf-tags em { font-style: normal; font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--pf-muted); border: 1px solid var(--pf-border); }
.pf-count { display: flex; gap: 8px; }
.pf-count span { display: flex; flex-direction: column; align-items: center; width: 56px; padding: 6px 0; border-radius: 12px; background: var(--pf-card); border: 1px solid var(--pf-border); box-shadow: 0 8px 18px -12px rgba(0,0,0,0.9); }
.pf-count b { font-family: "Source Serif 4", Georgia, serif; font-size: 22px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-count i { margin-top: 4px; font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-mfg); }
.pf-card--plan { width: 284px; padding: 10px; }
.pf-plan__head { display: flex; align-items: center; justify-content: space-between; }
.pf-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 999px; background: rgba(79,140,255,0.14); color: #8fb4ff; font-size: 9px; font-weight: 600; }
.pf-pill svg { width: 10px; height: 10px; }
.pf-plan { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.pf-plan li { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.pf-plan li > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-plan i { font-style: normal; font-size: 9px; color: var(--pf-mfg); }
.pf-box2 { display: grid; place-items: center; width: 14px; height: 14px; flex-shrink: 0; border-radius: 4px; border: 1px solid var(--pf-primary); background: var(--pf-primary); color: #fff; }
.pf-box2 svg { width: 10px; height: 10px; stroke-width: 3.2; }
.pf-deck { width: 132px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.pf-deck__pile { position: relative; width: 132px; height: 165px; perspective: 600px; }
.pf-deck__pile > span { position: absolute; inset: 0; border-radius: 12px; background: var(--pf-card); border: 1px solid var(--pf-border); }
.pf-deck__pile > span:nth-child(1) { transform: translate(8px, 4px) rotate(4deg); }
.pf-deck__pile > span:nth-child(2) { transform: translateX(4px) rotate(2deg); }
.pf-deck__card { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 10px; border-radius: 12px; background: var(--pf-card2); border: 1px solid var(--pf-border); box-shadow: 0 10px 22px -12px rgba(0,0,0,0.9); }
.pf-deck__art { margin-top: 6px; flex: 1; display: flex; align-items: flex-end; padding: 8px; border-radius: 9px; }
.pf-l { display: block; margin-top: 6px; height: 6px; width: 80%; border-radius: 999px; background: rgba(255,255,255,0.18); }
.pf-l--s { margin-top: 4px; width: 60%; background: rgba(255,255,255,0.1); }
.pf-lines { width: 100%; align-self: flex-start; }
.pf-lines i { display: block; height: 6px; margin-bottom: 6px; border-radius: 999px; background: rgba(255,255,255,0.35); }
.pf-steps { display: flex; justify-content: space-between; width: 100%; align-self: center; }
.pf-steps i { width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,0.32); }
.pf-bars { display: flex; align-items: flex-end; gap: 4px; width: 100%; height: 100%; }
.pf-bars i { flex: 1; border-radius: 2px; background: rgba(255,255,255,0.5); transform-origin: bottom; animation: pfBar 520ms cubic-bezier(0.16,1,0.3,1) both; }
.pf-done { display: grid; place-items: center; width: 32px; height: 32px; margin: auto; border-radius: 50%; background: rgba(255,255,255,0.4); color: #0d2b22; }
.pf-done svg { width: 16px; height: 16px; stroke-width: 3; }
.pf-dots { display: flex; gap: 4px; margin-top: 10px; }
.pf-dots span { width: 6px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.2); transition: width .3s, background-color .3s; }
.pf-dots span.is-on { width: 16px; background: var(--pf-primary); }
.pf-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-card--who { padding: 8px; }
.pf-who { display: flex; align-items: center; gap: 8px; }
.pf-who b { display: block; font-size: 11px; font-weight: 600; }
.pf-who i { display: block; font-style: normal; font-size: 9px; color: var(--pf-mfg); }
.pf-av { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #2dd4bf, #0ea5e9); color: #fff; font-size: 10px; font-weight: 600; }
.pf-card--who .pf-swap { margin-top: 6px; }

/* the crowd of agents */
.pf-crowd { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 0.6rem; }
.pf-crowd { perspective: 900px; }
.pf-crowd__face { position: relative; aspect-ratio: 1; transform-style: preserve-3d; }
/* a glass block: the face on its tile, a glossy front, a lit top edge and a
   darker foot that reads as the cube's depth */
.pf-cube {
  position: absolute; inset: 0; border-radius: 27%; overflow: hidden;
  transform-style: preserve-3d; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -3px 0 rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.28),
    0 5px 0 -1px rgba(60, 50, 110, 0.55), 0 16px 26px -12px rgba(0,0,0,0.9);
}
.pf-cube img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: translateZ(14px); }
.pf-cube::before {                               /* the glass front */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(155deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.12) 100%);
}
.pf-cube__glare {
  position: absolute; inset: -30%; z-index: 2; pointer-events: none;
  background: radial-gradient(35% 35% at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,0.85), rgba(255,255,255,0) 70%);
  opacity: var(--ga, 0.18); mix-blend-mode: soft-light; transition: opacity 0.3s ease;
}
.pf-crowd.is-on .pf-crowd__face { animation: pfPop 480ms cubic-bezier(0.34,1.56,0.64,1) both, pfBob 3.4s ease-in-out infinite; animation-delay: var(--d), calc(var(--d) + 500ms); }

/* the motion, from quick-start-intro.module.css */
.s-rise { animation: pfRise 650ms cubic-bezier(0.16,1,0.3,1) both; }
.s-pop { animation: pfPop 520ms cubic-bezier(0.34,1.56,0.64,1) both; }
.s-slideIn { animation: pfSlide 560ms cubic-bezier(0.16,1,0.3,1) both; }
.s-wordOut { opacity: 0; animation: pfOut 260ms ease 900ms both; }
.s-wordIn { animation: pfWordIn 380ms cubic-bezier(0.34,1.56,0.64,1) 900ms both; }
.s-meterFill { transform-origin: left; animation: pfMeter 380ms cubic-bezier(0.16,1,0.3,1) both; }
.s-steerUp { animation: pfSteerUp 700ms cubic-bezier(0.65,0,0.35,1) 3200ms both; }
.s-steerDown { opacity: 0.45; animation: pfSteerDown 700ms cubic-bezier(0.65,0,0.35,1) 3200ms both; }
.s-strike { text-decoration: line-through; text-decoration-color: currentColor; animation: pfStrike 300ms ease 3800ms both; }
.s-tick { animation: pfTick 1s steps(1) infinite; }
.s-ringBell { transform-origin: 50% 10%; animation: pfBell 2.4s ease-in-out 900ms infinite; }
.s-checkFill { animation: pfCheck 360ms cubic-bezier(0.34,1.56,0.64,1) both; }
.s-flip { transform-origin: left center; animation: pfFlip 520ms cubic-bezier(0.16,1,0.3,1) both; }
.s-caret { display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--pf-fg); animation: pfCaret 0.9s steps(1) infinite; }
@keyframes pfRise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pfPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes pfSlide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes pfOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pfWordIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes pfMeter { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pfSteerUp { from { transform: translateY(72px); } 50% { transform: translateY(36px) scale(1.04); box-shadow: 0 10px 20px -12px rgba(0,0,0,0.8); } to { transform: none; } }
@keyframes pfSteerDown { from { opacity: 1; transform: translateY(-72px); } to { opacity: 0.45; transform: none; } }
@keyframes pfStrike { from { text-decoration-color: transparent; } to { text-decoration-color: currentColor; } }
@keyframes pfTick { 50% { color: var(--pf-primary); } }
@keyframes pfBell { 0%, 30%, 100% { transform: none; } 6%, 18% { transform: rotate(16deg); } 12%, 24% { transform: rotate(-16deg); } }
@keyframes pfCheck { from { background-color: transparent; color: transparent; transform: scale(0.85); } to { transform: none; } }
@keyframes pfFlip { from { opacity: 0.2; transform: rotateY(-75deg); } to { opacity: 1; transform: none; } }
@keyframes pfBar { from { transform: scaleY(0); } to { transform: none; } }
@keyframes pfCaret { 50% { opacity: 0; } }
@keyframes pfBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes pfFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1100px) {
  .pitfeat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf--wide { flex-direction: column; align-items: stretch; }
  .pf__top--wide { width: auto; flex-direction: row; }
  .pf-crowd { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .pitfeat__grid { grid-template-columns: minmax(0, 1fr); }
  .pf-crowd { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .s-rise, .s-pop, .s-slideIn, .s-wordIn, .s-flip { animation-name: pfFadeIn; }
  .s-meterFill, .s-ringBell, .s-checkFill, .s-wordOut, .s-steerUp, .s-steerDown, .s-strike, .s-tick, .s-caret, .pf-bars i { animation: none; }
  .pf-crowd.is-on .pf-crowd__face { animation: none; }
}


/* early testers' reviews, floating over the sea on the night map */
.nightmap__review {
  position: absolute; left: 0; top: 0; z-index: 2; width: 13.5rem; margin: 0;
  padding: 0.7rem 0.85rem 0.75rem; border-radius: 13px;
  background: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035));
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 16px 34px -18px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(9px) saturate(1.25); -webkit-backdrop-filter: blur(9px) saturate(1.25);
  opacity: 0; transition: opacity 0.42s ease; pointer-events: none;
}
.nightmap__review.is-up { opacity: 1; }
.nightmap__stars { display: flex; align-items: baseline; gap: 0.35rem; margin: 0; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(205,215,240,0.6); }
.nightmap__stars b { font-family: "Source Serif 4", Georgia, serif; font-size: 0.95rem; letter-spacing: 0; color: #f5c451; }
.nightmap__stars span { color: #f5c451; letter-spacing: 0.06em; font-size: 0.66rem; }
.nightmap__stars i { font-style: normal; }
.nightmap__review blockquote { margin: 0.35rem 0 0; font-family: "Source Serif 4", Georgia, serif; font-size: 0.84rem; line-height: 1.35; color: #f1f4fb; }
.nightmap__review figcaption { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.68rem; color: rgba(205,215,240,0.7); }
.nightmap__av { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: 0.5rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #8b5cf6, #4f8cff); }
@media (max-width: 760px) {
  .nightmap__review { width: 10.5rem; padding: 0.5rem 0.6rem; }
  .nightmap__review blockquote { font-size: 0.7rem; }
}

/* ═══ windmill.ai: a deck making itself (js/windmill.js) ═════════════ */
.windmill {
  position: relative; max-width: 1460px; margin: 0 auto;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.25rem, 5vw, 4rem) clamp(5rem, 14vh, 10rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.wm__mark { display: block; width: min(100%, 22rem); height: auto; }
.about--wm .about__title { margin-bottom: 0; line-height: 1; }
.about--wm .about__tag { display: table; margin-top: 1rem; }
.about__tag--wm { color: #8fe3ff; border-color: rgba(143,227,255,0.35); }
.feats--wm li .icon, .kit--wm li .icon { color: #8fe3ff; }

.wm { margin: 0; order: 1; }
.wm__win {
  --wm-a: #7c5cff; --wm-b: #23d5c4; --wm-ink: #f4f2ff; --wm-bg: #14122b; --wm-soft: rgba(255,255,255,0.08);
  border-radius: 16px; overflow: hidden; background: #0f1016;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.4);
  font-family: "Geist", sans-serif; color: #e9ecf3;
}
.wm--midnight { --wm-a: #e8b04a; --wm-b: #4e6bd8; --wm-ink: #fff6e3; --wm-bg: #0b1230; }
.wm--ocean { --wm-a: #18a0fb; --wm-b: #39e0c8; --wm-ink: #eafcff; --wm-bg: #062236; }
.wm--sakura { --wm-a: #ff7fb0; --wm-b: #ffc7a8; --wm-ink: #fff3f7; --wm-bg: #2b1220; }
.wm__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; background: #17181f; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 0.72rem; }
.wm__bar > span { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.wm__bar > span:nth-child(2) { background: #febc2e; }
.wm__bar > span:nth-child(3) { background: #28c840; }
.wm__bar b { margin-left: 0.6rem; font-weight: 600; letter-spacing: 0.01em; }
.wm__mode { margin-left: auto; font-style: normal; font-size: 0.64rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(255,255,255,0.07); color: #aeb6c6; }
.wm[data-step="present"] .wm__mode { background: rgba(255, 80, 80, 0.18); color: #ff9c9c; }
.wm__body { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); aspect-ratio: 16 / 9.6; }
.wm__rail { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.55rem 0.5rem; background: #121319; border-right: 1px solid rgba(255,255,255,0.06); }
.wm__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); opacity: 0; transform: scale(0.6); transition: opacity .35s, transform .45s cubic-bezier(0.34,1.56,0.64,1), border-color .3s; }
.wm__thumb.is-made { opacity: 1; transform: none; }
.wm__thumb.is-on { border-color: var(--wm-a); box-shadow: 0 0 0 1px var(--wm-a); }
.wm__mini { position: absolute; left: 0; top: 0; width: 1000%; height: 1000%; transform: scale(0.1); transform-origin: 0 0; pointer-events: none; }
.wm__mini .wms { position: absolute; inset: 0; }
.wm__stage { position: relative; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.wm__ask { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-size: 0.78rem; min-height: 2rem; }
.wm__ask svg { width: 15px; height: 15px; fill: none; stroke: #8fe3ff; stroke-width: 2; flex-shrink: 0; }
.wm__caret { display: inline-block; width: 1px; height: 0.95em; background: #e9ecf3; animation: pfCaret 0.9s steps(1) infinite; margin-left: -0.35rem; }
.wm__slide { position: relative; flex: 1; border-radius: 10px; overflow: hidden; min-height: 0; }
.wm__slide .wms { position: absolute; inset: 0; }
.wm__slide.is-in, .wm__now.is-in, .wm__next.is-in { animation: wmIn 0.5s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes wmIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.wm__present { display: none; flex: 1; gap: 0.7rem; min-height: 0; }
.wm[data-step="present"] .wm__ask, .wm[data-step="present"] .wm__slide { display: none; }
.wm[data-step="present"] .wm__present { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.wm__now { position: relative; border-radius: 10px; overflow: hidden; }
.wm__now .wms, .wm__next .wms { position: absolute; inset: 0; }
.wm__side { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.wm__timer { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; column-gap: 0.55rem; padding: 0.5rem; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.wm__timer svg { grid-row: span 2; width: 2.6rem; height: 2.6rem; transform: rotate(-90deg); fill: none; stroke-width: 4; }
.wm__timer circle { stroke: rgba(255,255,255,0.12); }
.wm__timer .wm__ring { stroke: #39e0a0; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke 0.3s; }
.wm.is-late .wm__ring { stroke: #ff6b6b; }
.wm__clock { font-family: "Source Serif 4", Georgia, serif; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.wm.is-late .wm__clock { color: #ff8c8c; }
.wm__timer i { font-style: normal; font-size: 0.6rem; color: #98a1b3; }
.wm__cap { margin: 0.2rem 0 0; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8790a3; }
.wm__next { position: relative; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; }
.wm__next .wms { font-size: 0.42em; }
.wm__notes { margin: 0; font-size: 0.66rem; line-height: 1.45; color: #c6ccd8; }
.wm__foot { display: flex; justify-content: space-between; padding: 0.5rem 0.8rem; background: #121319; border-top: 1px solid rgba(255,255,255,0.06); font-size: 0.66rem; color: #98a1b3; }
.wm__step { color: #e9ecf3; }

/* the slides themselves, in the window's theme */
.wms {
  container-type: size; padding: 7% 8%; color: var(--wm-ink);
  background:
    radial-gradient(70% 90% at 90% 10%, color-mix(in oklab, var(--wm-a) 55%, transparent), transparent 70%),
    radial-gradient(70% 90% at 0% 100%, color-mix(in oklab, var(--wm-b) 45%, transparent), transparent 70%),
    var(--wm-bg);
  display: flex; flex-direction: column; justify-content: center; transition: background 0.5s;
}
.wms h4 { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 500; font-size: 9cqw; line-height: 1.05; }
.wms h5 { margin: 0 0 4cqh; font-family: "Source Serif 4", Georgia, serif; font-weight: 500; font-size: 5.6cqw; }
.wms__kick { margin: 0 0 3cqh; font-size: 2.6cqw; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.wms__by { margin: 4cqh 0 0; font-size: 3cqw; opacity: 0.8; }
.wms--points ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3cqh; }
.wms--points li { font-size: 4.2cqw; display: flex; align-items: center; gap: 2cqw; }
.wms--points li::before { content: ""; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--wm-a); }
.wms--code { justify-content: flex-start; }
.wms__code { margin: 0; padding: 4cqh 4cqw; border-radius: 1.6cqw; background: rgba(5, 6, 14, 0.72); border: 1px solid rgba(255,255,255,0.1); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 2.7cqw; line-height: 1.55; color: #d7def0; white-space: pre; overflow: hidden; min-height: 52cqh; }
.wms__code span { display: block; animation: wmIn 0.3s ease both; }
.wms__code .k { font-style: normal; color: #c792ea; }
.wms__code .f { font-style: normal; color: #82aaff; }
.wms__code .n { font-style: normal; color: #f78c6c; }
.wms__code .c { color: #7f8aa3; }
.wms__bars { flex: 1; display: flex; align-items: flex-end; gap: 3cqw; max-height: 55cqh; }
.wms__bars i { flex: 1; border-radius: 1cqw 1cqw 0 0; background: linear-gradient(180deg, var(--wm-a), var(--wm-b)); animation: pfBar 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.wms__bars i:nth-child(2) { animation-delay: 0.1s; } .wms__bars i:nth-child(3) { animation-delay: 0.2s; }
.wms__bars i:nth-child(4) { animation-delay: 0.3s; } .wms__bars i:nth-child(5) { animation-delay: 0.4s; }
.wms--end { align-items: center; text-align: center; }

@media (max-width: 900px) {
  .windmill { grid-template-columns: 1fr; }
  .wm { order: 1; }
  .wm__body { grid-template-columns: 3.4rem minmax(0, 1fr); }
}

/* JOY on its own set, in the research column */
.joyfilm--tv { background: none; border: 0; box-shadow: none; max-width: 640px; }
.joyfilm--tv .tv { margin: 0 auto; }
.joyfilm--tv video.tv__frame { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; box-shadow: none; cursor: default; background: #000; object-fit: contain; }

/* ═══ In motion: ShadowStage and Narrative DNA (js/labs.js) ══════════ */
.labs { max-width: 1460px; margin: 0 auto; padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem) clamp(5rem, 14vh, 9rem); }
.labs__title { margin-top: 0.4rem; font-family: "Source Serif 4", Georgia, serif; font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.6rem); color: var(--type-1); letter-spacing: -0.01em; }
.labs__grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lab { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09); background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); }
.lab__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.lab__text { padding: 1.3rem 1.4rem 1.5rem; }
.lab__text h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0; }
.lab__name { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; font-size: 1.5rem; color: var(--type-1); }
.lab__when { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--type-3); }
.lab__text p { margin: 0.6rem 0 0; font-size: 0.92rem; line-height: 1.65; color: rgba(228,234,242,0.68); }
.kit--lab { margin-top: 1rem; }
.kit--lab li { padding-left: 0.75rem; }

/* ── ShadowStage: lamps behind a cloth ── */
.shadow { background: #0a0705; }
.shadow__cloth {
  position: absolute; inset: 7% 6% 18%; border-radius: 6px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 6px),
    radial-gradient(70% 85% at 50% 92%, #ffd28a 0%, #f4a24a 34%, #b9581d 68%, #4a1d08 100%);
  box-shadow: inset 0 0 60px rgba(40, 10, 0, 0.75), 0 0 0 6px #2a160b, 0 0 0 8px #120904;
}
.shadow__glow { position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 100%, rgba(255, 232, 170, 0.55), transparent 70%); mix-blend-mode: screen; animation: lampFlicker 2.4s infinite steps(24); }
@keyframes lampFlicker { 0%,100% { opacity: 0.85 } 12% { opacity: 0.7 } 25% { opacity: 0.95 } 38% { opacity: 0.78 } 55% { opacity: 1 } 70% { opacity: 0.74 } 85% { opacity: 0.92 } }
.shadow[data-move="1"] .shadow__glow { animation-duration: 1.2s; }
.shadow[data-move="2"] .shadow__glow { animation-duration: 0.45s; }
.shadow[data-move="3"] .shadow__glow { animation-duration: 3.6s; opacity: 0.7; }
.shadow__puppet { position: absolute; left: 50%; bottom: -4%; height: 104%; transform: translateX(-50%); overflow: visible; filter: blur(0.6px) drop-shadow(0 0 2px rgba(20, 6, 0, 0.6)); }
.shadow__puppet path, .shadow__puppet .sp-crown { fill: #1a0b04; }
.shadow__puppet .sp-hole { fill: #e8954a; opacity: 0.9; }
.shadow__puppet .sp-stick { stroke: #2a1407; stroke-width: 2.2; opacity: 0.85; }
.shadow__puppet .sp-bow { fill: none !important; stroke: #1a0b04; stroke-width: 3; }
.sp-body, .sp-arm, .sp-fore { transition: transform 1.1s cubic-bezier(0.45, 0, 0.2, 1); }
.shadow[data-move="0"] .sp-body { transform: translateY(-4px); }
.shadow[data-move="0"] .sp-arm--front { transform: rotate(18deg); }
.shadow[data-move="1"] .sp-arm--front { transform: rotate(-8deg); }
.shadow[data-move="1"] .sp-arm--back { transform: rotate(-58deg); }
.shadow[data-move="1"] .sp-arm--back .sp-fore { transform: rotate(-70deg); }
.shadow[data-move="2"] .sp-arm--front { transform: rotate(-14deg); }
.shadow[data-move="2"] .sp-arm--back { transform: rotate(12deg); }
.shadow[data-move="2"] .sp-body { transform: translateX(6px); }
.shadow[data-move="3"] .sp-body { transform: rotate(9deg) translateY(10px); transform-origin: 103px 240px; }
.shadow[data-move="3"] .sp-arm--front { transform: rotate(40deg); }
.shadow[data-move="3"] .sp-arm--back { transform: rotate(30deg); }
.sp-joints { opacity: 0; transition: opacity 0.6s; }
.sp-joints line { stroke: rgba(140, 220, 255, 0.85); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sp-joints circle { fill: #8fdcff; filter: drop-shadow(0 0 3px #8fdcff); }
.lab--shadow:hover .sp-joints, .shadow[data-move="1"] .sp-joints { opacity: 0.85; }
.shadow__lamps { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: space-around; padding: 0 12%; }
.shadow__lamps i { width: 8px; height: 14px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 70%, #fff6d0, #ffb347 55%, rgba(255,120,30,0) 72%); filter: blur(0.4px); animation: flame 0.9s ease-in-out infinite alternate; }
.shadow__lamps i:nth-child(2n) { animation-duration: 0.7s; } .shadow__lamps i:nth-child(3n) { animation-duration: 1.1s; }
@keyframes flame { from { transform: scale(0.9, 1) translateY(0); } to { transform: scale(1.1, 1.25) translateY(-2px); } }
.shadow__hud { position: absolute; left: 6%; right: 6%; bottom: 3%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; font-size: 0.68rem; color: rgba(255, 220, 180, 0.7); }
.shadow__cap { margin: 0; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.58rem; }
.shadow__seq { margin: 0; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.shadow__seq b { font-weight: 500; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid rgba(255, 200, 140, 0.2); transition: background .3s, color .3s; }
.shadow__seq b.is-on { background: rgba(255, 190, 110, 0.9); color: #2a1407; }
.shadow__light { margin: 0; }
.lab--shadow .lab__stage { aspect-ratio: 16 / 11; }

/* ── Narrative DNA ── */
.dna { background: radial-gradient(120% 80% at 50% 0%, rgba(80, 100, 200, 0.14), transparent 60%), #0c0e16; padding: 4% 5%; display: flex; flex-direction: column; gap: 0.6rem; aspect-ratio: 16 / 11; }
.dna__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.dna__cap { margin: 0; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8f99b0; }
.dna__acts { margin: 0; display: grid; grid-template-columns: 1fr 2fr 1fr; width: 60%; font-size: 0.6rem; color: #aab3c7; text-align: center; }
.dna__acts span { border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 0.2rem; }
.dna__helix { width: 100%; height: 26%; overflow: visible; }
.dna__strand { fill: none; stroke: rgba(220, 228, 255, 0.55); stroke-width: 1.6; }
.dna__strand--b { stroke: rgba(220, 228, 255, 0.3); }
.dna__rung { stroke-width: 5; stroke-linecap: round; opacity: 0.12; transition: opacity 0.25s; }
.dna__rung.is-read { opacity: 0.95; }
.dna__head { stroke: #fff; stroke-width: 1; opacity: 0.6; }
.dna.is-done .dna__head { opacity: 0; }
.dna__legend { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.66rem; color: #c8cfdd; }
.dna__legend li { display: flex; align-items: center; gap: 0.35rem; }
.dna__legend i { width: 9px; height: 9px; border-radius: 3px; }
.dna__legend b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.dna__model { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 0.7rem; align-items: center; margin-top: 0.3rem; }
.dna__script { padding: 0.6rem 0.7rem; border-radius: 10px; background: #f3efe4; color: #26221a; font-family: "Courier New", ui-monospace, monospace; font-size: 0.6rem; line-height: 1.5; box-shadow: 0 10px 22px -12px rgba(0,0,0,0.9); }
.dna__script p { margin: 0 0 0.25rem; }
.dna__script p:first-child { font-weight: 700; }
.dna__lstm { display: flex; flex-direction: column; gap: 0.3rem; }
.dna__dir { margin: 0; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8f99b0; }
.dna__cells { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.dna__cells span { aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); transition: background .25s, box-shadow .25s; }
.js-fwd span.is-on { background: #6aa8ff; box-shadow: 0 0 10px rgba(106,168,255,0.7); }
.js-bwd span.is-on { background: #b18cff; box-shadow: 0 0 10px rgba(177,140,255,0.7); }
.dna__out { padding: 0.6rem 0.7rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
.dna__verdict { margin: 0.35rem 0 0; font-family: "Source Serif 4", Georgia, serif; font-size: 1rem; color: #fff; }
.dna.is-done .dna__verdict b { color: #5ee6a8; }
.dna__score { margin: 0.2rem 0 0; font-size: 0.66rem; color: #aab3c7; }
.dna__score span { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.dna__acc { margin: 0.45rem 0 0; font-size: 0.62rem; color: #aab3c7; }
.dna__acc b { font-family: "Source Serif 4", Georgia, serif; font-size: 1.05rem; color: #ffd166; margin-right: 0.2rem; }

@media (max-width: 1000px) { .labs__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .dna { aspect-ratio: auto; }
  .dna__model { grid-template-columns: 1fr; }
  .dna__acts { width: 100%; }
  .dna__top { flex-direction: column; }
  .shadow__hud { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { .shadow__glow, .shadow__lamps i { animation: none; } .sp-body, .sp-arm, .sp-fore { transition: none; } }
.labs { counter-increment: section; }
@media (max-width: 560px) { .lab--shadow .lab__stage { aspect-ratio: 4 / 4; } .shadow__cloth { inset: 6% 5% 30%; } }

/* ── titles and their pills ────────────────────────────────────
   The wordmarks are big inline spans in a heading with a tight line,
   so their descenders hung below the heading's box and the pill under
   them rode up into the letters. Each wordmark now holds its full
   height, and the pill keeps a clear gap below it. */
.about__title { line-height: 1.1; }
.about__title > span:not(.about__shoomark):not(.about__pitstop) { display: inline-block; line-height: 1.14; padding-bottom: 0.04em; }
.about__title + .about__tag { display: table; margin-top: 0.95rem; }
.about__title--shoo + .about__tag { margin-top: 0.8rem; }

/* the Watch the Bulletin button: its play mark had no size and squeezed the words out */
.yt > .icon { width: 1.5rem; height: 1.5rem; flex: none; }
.yt__text { white-space: nowrap; }
.store__text { white-space: nowrap; }

/* the knob hint reads as a quiet note, not body text */
.about__cue { font-size: 0.74rem; letter-spacing: 0.03em; line-height: 1.5; margin-top: 1rem; }

/* ── ShadowStage, on a big screen ─────────────────────────────
   It takes the full width above Narrative DNA, like a koothumadam's
   long cloth, with the real puppets cut out of their photographs. */
.lab--shadow { grid-column: 1 / -1; }
.lab--shadow .lab__stage { aspect-ratio: 21 / 9; }
.lab--shadow .lab__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 0.5rem 2.5rem; align-items: start; }
.lab--shadow .lab__text h3 { grid-column: 1 / -1; }
.lab--shadow .lab__text .kit { margin-top: 0.6rem; }
.lab--shadow .shadow__cloth { inset: 5% 3% 15%; }
.lab--shadow .shadow__puppet { height: 96%; }
.shadow.has-cast .shadow__puppet { display: none; }
.shadow__cast { position: absolute; inset: 0; }
.shadow__fig {
  position: absolute; bottom: -2%; height: 96%; width: auto;
  opacity: 0; transform-origin: 50% 100%;
  transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.45, 0, 0.2, 1), filter 0.9s ease;
  filter: blur(4px) drop-shadow(0 0 2px rgba(20, 6, 0, 0.5));
}
.shadow__fig.is-left { left: 14%; transform: translateX(-30%); }
.shadow__fig.is-right { right: 14%; transform: translateX(30%); }
.shadow__fig.is-on { opacity: 1; filter: blur(0.5px) drop-shadow(0 0 2px rgba(20, 6, 0, 0.5)); animation: figSway 4.4s ease-in-out infinite; }
.shadow__fig.is-on.is-left { transform: none; }
.shadow__fig.is-on.is-right { transform: none; animation-delay: -2.2s; }
@keyframes figSway { 0%, 100% { rotate: -1.6deg; translate: 0 0; } 50% { rotate: 1.6deg; translate: 0 -6px; } }
.shadow__sound {
  position: absolute; top: 4%; right: 3.5%; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.8rem; border-radius: 999px; cursor: pointer;
  font: 600 0.66rem/1 "Geist", sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: #ffe2b8; background: rgba(30, 12, 2, 0.6); border: 1px solid rgba(255, 210, 150, 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.shadow__sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shadow__sound[aria-pressed="false"] .sw { opacity: 0.25; }
.shadow__sound[aria-pressed="true"] { background: rgba(255, 190, 110, 0.92); color: #2a1407; }
@media (max-width: 900px) {
  .lab--shadow .lab__stage { aspect-ratio: 4 / 3; }
  .lab--shadow .lab__text { grid-template-columns: 1fr; }
  .shadow__fig.is-left { left: 2%; } .shadow__fig.is-right { right: 2%; }
  .shadow__fig { height: 80%; }
}
@media (prefers-reduced-motion: reduce) { .shadow__fig.is-on { animation: none; } }
.shadow__fig[data-wide] { height: 62%; }
.lab__credit { margin-top: 0.8rem !important; font-size: 0.72rem !important; color: var(--type-3) !important; }
.lab__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── the koothumadam screen, as the audience sees it ───────────────
   A white cloth lit from behind by 21 lamps on a beam (the vilakku
   madam). The puppets are pressed flat against the cloth between the
   lamps and the audience, so each throws a sharp black shadow and its
   punched holes become points of light. A puppet drawn back from the
   cloth throws a larger, softer shadow, which is how the puppeteers
   make a figure loom. */
.lab--shadow .shadow__cloth {
  inset: 5% 3% 15%;
  background:
    repeating-linear-gradient(90deg, rgba(120, 70, 20, 0.05) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 50% 100%, #fff8e6 0%, #ffe9bf 38%, #f7c983 70%, #d9893f 100%);
  box-shadow: inset 0 0 50px rgba(120, 50, 0, 0.45), 0 0 0 5px #2a160b, 0 0 0 7px #120904, 0 30px 60px -20px rgba(255, 170, 70, 0.25);
}
.lab--shadow .shadow__glow { mix-blend-mode: normal; background: radial-gradient(90% 60% at 50% 100%, rgba(255, 250, 230, 0.35), transparent 70%); opacity: 0.6; animation: lampFlicker 3.2s infinite steps(30); }
.shadow__lamps { position: absolute; left: 2%; right: 2%; bottom: 5%; height: 22%; display: flex; justify-content: space-between; align-items: flex-end; padding: 0; z-index: 0; }
.shadow__lamps i {
  width: 4.2%; height: 100%; border-radius: 50%;
  background: radial-gradient(50% 45% at 50% 70%, rgba(255, 255, 245, 0.95), rgba(255, 226, 150, 0.55) 40%, rgba(255, 190, 90, 0) 75%);
  filter: blur(2px); animation: lampBreath 1.6s ease-in-out infinite alternate;
}
.shadow__lamps i:nth-child(3n) { animation-duration: 1.1s; } .shadow__lamps i:nth-child(4n+1) { animation-duration: 2.1s; } .shadow__lamps i:nth-child(5n+2) { animation-delay: -0.7s; }
@keyframes lampBreath { from { opacity: 0.7; transform: scale(0.94, 0.9); } to { opacity: 1; transform: scale(1.06, 1.08); } }
.shadow[data-move="2"] .shadow__lamps i { animation-duration: 0.35s; }         /* the strike: a flare */
.shadow[data-move="3"] .shadow__lamps i { opacity: 0.75; }
.shadow__cast { z-index: 1; }

/* the puppets: pressed to the cloth, so sharp; moved along it on their sticks */
.shadow__fig, .shadow__fig.is-on {
  animation: none; filter: none;
  transition: opacity 0.8s ease, translate 1.1s cubic-bezier(0.45, 0, 0.2, 1), rotate 0.9s cubic-bezier(0.45, 0, 0.2, 1), scale 0.9s ease, filter 0.9s ease, transform 1.4s cubic-bezier(0.45, 0, 0.2, 1);
  transform-origin: 50% 100%;
}
.shadow__fig.is-left { left: 10%; transform: translateX(-70%); }
.shadow__fig.is-right { right: 10%; transform: translateX(70%); }
.shadow__fig.is-on.is-left, .shadow__fig.is-on.is-right { transform: none; opacity: 1; }
.shadow__fig.is-off.is-left { transform: translateX(-80%); opacity: 0; }
.shadow__fig.is-off.is-right { transform: translateX(80%); opacity: 0; }
/* enter: up to the cloth, upright */
.shadow[data-move="0"] .shadow__fig.is-on { translate: 0 0; rotate: 0deg; }
/* address: the pair turn in toward each other, a small step */
.shadow[data-move="1"] .shadow__fig.is-on.is-left { translate: 4% 0; rotate: 2deg; }
.shadow[data-move="1"] .shadow__fig.is-on.is-right { translate: -4% 0; rotate: -2deg; }
/* strike: the left lunges, the right recoils and is pulled back from the cloth, looming and soft */
.shadow[data-move="2"] .shadow__fig.is-on.is-left { translate: 16% -2%; rotate: 6deg; }
.shadow[data-move="2"] .shadow__fig.is-on.is-right { translate: 6% 0; rotate: 7deg; scale: 1.08; filter: blur(2.5px); }
/* withdraw: both ease back and bow toward the lamps */
.shadow[data-move="3"] .shadow__fig.is-on.is-left { translate: -3% 3%; rotate: -4deg; }
.shadow[data-move="3"] .shadow__fig.is-on.is-right { translate: 3% 3%; rotate: 4deg; }
.shadow__fig[data-wide] { height: 58%; }
@media (prefers-reduced-motion: reduce) { .shadow__fig, .shadow__lamps i { transition: none; animation: none; } }

.lab__intro { padding: 1.6rem 1.6rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.07); background: linear-gradient(180deg, rgba(255, 190, 110, 0.05), transparent); }
.lab__kicker { margin: 0; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #ffcf8a; }
.lab__ititle { margin: 0.35rem 0 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--type-1); }
.lab__icols { margin-top: 0.9rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.lab__icols p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: rgba(228, 234, 242, 0.72); }
.lab__icols i { color: #ffe2b8; }
@media (max-width: 900px) { .lab__icols { grid-template-columns: 1fr; gap: 0.8rem; } }

/* ── ShadowStage, staged in scenes (js/labs.js drives the moves) ── */
.lab__show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); }
.lab--shadow .lab__show .lab__stage { aspect-ratio: 16 / 9; }
.shadow__fig, .shadow__fig.is-on, .shadow__fig.is-off {
  position: absolute; bottom: -1%; height: 94%; width: max-content;
  opacity: 0; transform: none; translate: none; rotate: none; scale: none; filter: none;
  transition: none; animation: none; transform-origin: 50% 100%; will-change: transform, opacity;
}
.shadow__fig img { display: block; height: 100%; width: auto; animation: stickBob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.shadow__fig.is-right img { animation-delay: -1.6s; }
@keyframes stickBob { 0%, 100% { translate: 0 0; rotate: -0.6deg; } 50% { translate: 0 -5px; rotate: 0.6deg; } }
.shadow__fig.is-left { left: 6%; right: auto; }
.shadow__fig.is-right { right: 6%; left: auto; }
.shadow__fig.is-centre { left: 0; right: 0; margin-inline: auto; }
.shadow__fig[data-wide] { height: 60%; }
.shadow__fig.is-still { opacity: 1; }
.shadow__side {
  padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem;
  background: linear-gradient(180deg, rgba(255, 190, 110, 0.06), rgba(0, 0, 0, 0.25)); border-left: 1px solid rgba(255,255,255,0.07);
}
.shadow__stitle { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 400; font-size: 1.45rem; color: var(--type-1); }
.shadow__stext { margin: 0; font-size: 0.86rem; color: rgba(228, 234, 242, 0.65); line-height: 1.5; }
.shadow__chars { margin: 0.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.shadow__chars li { padding: 0.65rem 0.75rem; border-radius: 12px; border: 1px solid rgba(255, 210, 150, 0.16); background: rgba(255, 190, 110, 0.05); animation: pfRise 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.shadow__chars li + li { animation-delay: 0.12s; }
.shadow__chars b { display: block; font-family: "Source Serif 4", Georgia, serif; font-weight: 500; font-size: 1.05rem; color: #ffe2b8; }
.shadow__chars span { display: block; margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.5; color: rgba(228, 234, 242, 0.72); }
.shadow__move { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.08); }
.shadow__mcap { margin: 0; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--type-3); }
.shadow__mname { margin: 0.2rem 0 0; font-weight: 600; font-size: 0.95rem; color: #ffcf8a; }
.shadow__mtext { margin: 0.25rem 0 0; font-size: 0.8rem; line-height: 1.5; color: rgba(228, 234, 242, 0.7); }
@media (max-width: 1000px) {
  .lab__show { grid-template-columns: 1fr; }
  .shadow__side { border-left: 0; border-top: 1px solid rgba(255,255,255,0.07); }
  .lab--shadow .lab__show .lab__stage { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .shadow__fig img { animation: none; } }

/* ── captions on the cloth ──────────────────────────────────────
   The screen is full width again; the puppets stand a little lower so
   the notes for each one sit above it on its own side, and the move
   runs along the foot of the cloth like a surtitle. */
.lab__show { display: block; }
.lab--shadow .lab__show .lab__stage { aspect-ratio: 21 / 9; }
.shadow__fig, .shadow__fig.is-on, .shadow__fig.is-off { height: 80%; }
.shadow__fig[data-wide] { height: 52%; }
.shadow__over { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.shadow__scene {
  position: absolute; top: 3.5%; left: 50%; transform: translateX(-50%); margin: 0;
  font-family: "Source Serif 4", Georgia, serif; font-size: clamp(0.95rem, 1.5vw, 1.35rem); color: #3a1a06; white-space: nowrap;
}
.shadow__sn { font-family: "Geist", sans-serif; font-size: 0.6em; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(70, 30, 6, 0.7); margin-right: 0.5em; }
.shadow__tag {
  position: absolute; top: 3%; max-width: min(30%, 21rem);
  padding: 0.6rem 0.8rem; border-radius: 10px;
  background: rgba(36, 14, 2, 0.78); border: 1px solid rgba(255, 210, 150, 0.22);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,0.8);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.6s ease, transform 0.6s ease;
}
.shadow__tag--left { left: 2.5%; }
.shadow__tag--right { right: 2.5%; top: 14%; text-align: right; }
.shadow__tag.is-up { opacity: 1; transform: none; }
.shadow__tag:empty { display: none; }
.shadow__tag b { display: block; font-family: "Source Serif 4", Georgia, serif; font-weight: 500; font-size: 1rem; color: #ffe2b8; }
.shadow__tag span { display: block; margin-top: 0.2rem; font-size: 0.74rem; line-height: 1.45; color: rgba(255, 240, 220, 0.82); }
.shadow__sub {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); margin: 0;
  width: min(62%, 40rem); padding: 0.45rem 0.9rem; border-radius: 8px; text-align: center;
  background: rgba(36, 14, 2, 0.72); color: rgba(255, 240, 220, 0.88); font-size: 0.78rem; line-height: 1.45;
}
.shadow__sub b { color: #ffcf8a; font-weight: 600; margin-right: 0.45rem; }
@media (max-width: 1000px) {
  .lab--shadow .lab__show .lab__stage { aspect-ratio: 4 / 3; }
  .shadow__tag { max-width: 44%; padding: 0.4rem 0.55rem; }
  .shadow__tag span { display: none; }
  .shadow__sub { width: 88%; font-size: 0.68rem; }
  .shadow__scene { font-size: 0.9rem; top: 2%; }
  .shadow__tag--right { top: 3%; }
}

/* the notes are written on the cloth, not laid on it in boxes */
.shadow__tag, .shadow__sub { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.shadow__tag b { color: #3a1a06; font-size: 1.1rem; }
.shadow__tag span { color: rgba(58, 26, 6, 0.86); font-size: 0.78rem; }
.shadow__sub { color: rgba(58, 26, 6, 0.9); bottom: 3%; font-size: 0.8rem; text-shadow: 0 0 8px rgba(255, 248, 230, 0.9), 0 0 2px rgba(255, 248, 230, 0.9); }
.shadow__sub b { color: #7a3200; }
.shadow__tag { text-shadow: 0 0 10px rgba(255, 248, 230, 0.85); }

/* ── a scene told in turn ──────────────────────────────────────
   The scene's words first, large in the middle of the empty cloth,
   fading; then each figure comes on with its note written beside it. */
.shadow__tag, .shadow__sub { display: none; }
.shadow__scene { opacity: 0.75; font-size: clamp(0.8rem, 1.1vw, 1rem); }
.shadow__intro {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -40%); width: min(64%, 36rem); text-align: center;
  opacity: 0; transition: opacity 1.1s ease, transform 1.6s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.shadow__intro.is-up { opacity: 1; transform: translate(-50%, -50%); }
.shadow__ikick { margin: 0; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(70, 30, 6, 0.65); }
.shadow__ititle { margin: 0.35rem 0 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1.1; color: #2e1404; }
.shadow__itext { margin: 0.6rem 0 0; font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: clamp(0.95rem, 1.4vw, 1.25rem); color: rgba(46, 20, 4, 0.8); }
.shadow__desc {
  position: absolute; top: 30%; width: min(30%, 22rem);
  opacity: 0; transform: translateY(8px); transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 0.7, 0.2, 1);
  text-shadow: 0 0 12px rgba(255, 248, 230, 0.9);
}
.shadow__desc.is-left { left: 39%; text-align: left; }
.shadow__desc.is-right { right: 39%; text-align: right; }
.shadow__desc.is-up { opacity: 1; transform: none; }
.shadow__desc b { display: block; font-family: "Source Serif 4", Georgia, serif; font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: #2e1404; }
.shadow__desc span { display: block; margin-top: 0.4rem; font-size: clamp(0.82rem, 1vw, 0.95rem); line-height: 1.55; color: rgba(46, 20, 4, 0.85); }
.shadow__mline { margin: 0; flex: 1 1 100%; order: 3; font-size: 0.72rem; color: rgba(255, 220, 180, 0.75); }
.shadow__mline b { color: #ffcf8a; font-weight: 600; margin-right: 0.3rem; }
@media (max-width: 1000px) {
  .shadow__desc { width: 52%; top: 8%; }
  .shadow__desc.is-left { left: auto; right: 4%; text-align: right; }
  .shadow__desc.is-right { right: auto; left: 4%; text-align: left; }
  .shadow__desc span { font-size: 0.72rem; }
}

/* ShadowStage in its own section, between pitute and Madhuri */
.shadowsec { max-width: 1460px; margin: 0 auto; padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 10vh, 7rem); }
.shadowsec .labs__grid { margin-top: 0; }
.labs .lab--dna { grid-column: 1 / -1; flex-direction: row; }
.labs .lab--dna .lab__stage { flex: 1.25 1 0; min-width: 0; }
.labs .lab--dna .lab__text { flex: 1 1 0; align-self: center; }
@media (max-width: 1000px) { .labs .lab--dna { flex-direction: column; } }

/* ═══ the site header ════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id] { scroll-margin-top: 4.5rem; }
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.85rem clamp(1.1rem, 3vw, 2.6rem);
  transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-head.is-scrolled {
  padding-top: 0.6rem; padding-bottom: 0.6rem;
  background: rgba(10, 12, 22, 0.72); border-bottom-color: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.site-head__name { font-family: "Source Serif 4", Georgia, serif; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--type-1); white-space: nowrap; }
.site-head__nav { display: flex; align-items: center; gap: 0.2rem; }
.site-head__nav a {
  position: relative; padding: 0.42rem 0.7rem; border-radius: 999px;
  font-size: 0.8rem; letter-spacing: 0.01em; color: rgba(228, 234, 242, 0.72);
  transition: color 0.2s ease, background 0.2s ease;
}
.site-head__nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.site-head__nav a.is-here { color: #fff; background: rgba(255, 255, 255, 0.1); }
.site-head__nav a.site-head__cta { margin-left: 0.4rem; color: #12131a; background: #f0f2f6; font-weight: 600; }
.site-head__nav a.site-head__cta:hover { background: #fff; }
.site-head__menu { display: none; }
@media (max-width: 1100px) {
  .site-head__menu {
    display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.8rem; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--type-1);
    font: 600 0.72rem/1 "Geist", sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .site-head__menu span { display: block; width: 14px; height: 1.5px; background: currentColor; transition: transform 0.3s ease; }
  .site-head__menu span + span { margin-left: -1.2rem; transform: translateY(4px); }
  .site-head__menu span:first-child { transform: translateY(-2px); }
  .site-head.is-open .site-head__menu span:first-child { transform: rotate(45deg); }
  .site-head.is-open .site-head__menu span + span { transform: rotate(-45deg); }
  .site-head__nav {
    position: fixed; top: 3.6rem; left: 0.75rem; right: 0.75rem;
    flex-direction: column; align-items: stretch; gap: 0.15rem; padding: 0.6rem;
    border-radius: 16px; background: rgba(12, 14, 24, 0.94); border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .site-head.is-open .site-head__nav { opacity: 1; transform: none; pointer-events: auto; }
  .site-head__nav a { padding: 0.75rem 0.9rem; font-size: 0.95rem; border-radius: 10px; }
  .site-head__nav a.site-head__cta { margin: 0.3rem 0 0; text-align: center; }
}
@media (max-width: 1100px) {
  .site-head__nav { background: #0c0e18; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s; }
  .site-head.is-open .site-head__nav { visibility: visible; transition: opacity 0.25s ease, transform 0.25s ease; }
  .site-head.is-open { background: #0c0e18; }
  .site-head__bars { position: relative; display: block; width: 14px; height: 1.5px; background: currentColor; box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor; transition: box-shadow 0.25s ease, transform 0.25s ease; }
  .site-head.is-open .site-head__bars { box-shadow: none; transform: rotate(45deg); }
}

/* Narrative DNA, turning as it is read */
.dna__strand { stroke-width: 2; stroke: rgba(225, 232, 255, 0.85); }
.dna__strand--b { stroke: rgba(200, 210, 255, 0.7); }
.dna__strand--back { stroke: rgba(200, 210, 255, 0.22); stroke-width: 1.4; }
.dna__rung { transition: none; stroke-width: 4.5; }
.dna__rung.is-now { stroke-width: 7; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)); }
.dna__head { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.2; filter: drop-shadow(0 0 4px rgba(160, 190, 255, 0.9)); }
.dna__script p { transition: background 0.25s ease, color 0.25s ease; border-radius: 3px; padding: 0 0.15rem; margin-left: -0.15rem; }
.dna__script p.is-reading { background: #ffe58a; color: #1d1608; }
.dna__verdict b { transition: color 0.4s ease; }
.dna.is-done .dna__out { border-color: rgba(94, 230, 168, 0.4); box-shadow: 0 0 30px -12px rgba(94, 230, 168, 0.5); }

/* Projects, opening into its list */
.site-head__group { position: relative; }
.site-head__drop {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.7rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.8rem; color: rgba(228, 234, 242, 0.72); background: none; border: 0;
}
.site-head__drop svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.2s ease; }
.site-head__drop:hover, .site-head__drop.is-here, .site-head__group.is-open .site-head__drop { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-head__group.is-open .site-head__drop svg { transform: rotate(180deg); }
.site-head__panel {
  position: absolute; top: calc(100% + 0.6rem); left: 50%; width: 21rem; padding: 0.45rem;
  display: grid; gap: 0.1rem; border-radius: 16px;
  background: rgba(14, 16, 26, 0.96); border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}
.site-head__group.is-open .site-head__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.2s ease, transform 0.2s ease; }
.site-head__panel a { display: grid; gap: 0.1rem; padding: 0.55rem 0.75rem; border-radius: 10px; }
.site-head__panel a b { font-weight: 600; font-size: 0.86rem; color: #f0f2f6; }
.site-head__panel a span { font-size: 0.72rem; color: rgba(228, 234, 242, 0.55); }
.site-head__panel a:hover, .site-head__panel a.is-here { background: rgba(255, 255, 255, 0.07); }
@media (max-width: 1100px) {
  .site-head__drop { width: 100%; justify-content: space-between; padding: 0.75rem 0.9rem; font-size: 0.95rem; border-radius: 10px; }
  .site-head__panel { position: static; width: auto; transform: none; display: none; box-shadow: none; border: 0; background: rgba(255, 255, 255, 0.03); margin: 0.1rem 0 0.3rem; }
  .site-head__group.is-open .site-head__panel { display: grid; transform: none; }
  .site-head__nav { max-height: calc(100svh - 5rem); overflow-y: auto; }
}

/* smaller cards on the map, so the land shows round them */
.nightmap__card { width: 11rem; padding: 0.55rem 0.65rem 0.6rem; border-radius: 11px; }
.nightmap__pic { margin-bottom: 0.45rem; border-radius: 7px; aspect-ratio: 16 / 9; }
.nightmap__kind { font-size: 0.56rem; }
.nightmap__title { font-size: 0.76rem !important; line-height: 1.3; }
.nightmap__place { font-size: 0.64rem !important; }
.nightmap__review { width: 10.5rem; padding: 0.5rem 0.65rem 0.55rem; border-radius: 11px; }
.nightmap__review blockquote { font-size: 0.72rem; }
.nightmap__review figcaption { font-size: 0.6rem; margin-top: 0.35rem; }
.nightmap__stars b { font-size: 0.82rem; }
@media (min-width: 901px) { .hero-tv { width: min(18vw, 300px); } }

/* the name lives in the header now; the heading stays for readers and search */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hero .bio__lede { font-size: clamp(1.5rem, 2.6vw, 2.5rem) !important; line-height: 1.2 !important; font-family: "Source Serif 4", Georgia, serif; font-weight: 300 !important; letter-spacing: -0.01em; }
.hero .bio { max-width: min(34rem, 36vw); }

/* ═══ the opening: a glass lotus on black (js/bloom.js) ═════════════ */
.bloom { position: relative; height: 1550vh; background: #050407; }
.bloom__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(70% 60% at 50% 42%, #140c12 0%, #050407 70%); }
.bloom__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.bloom__marquee { position: absolute; left: 0; top: 50%; z-index: 2; display: flex; white-space: nowrap; transform: translateY(-38%); animation: bloomMarq 46s linear infinite; pointer-events: none; }
.bloom__marquee span { font: italic 400 clamp(8rem, 24vw, 22rem)/1 "Instrument Serif", "Source Serif 4", Georgia, serif; letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1px rgba(255, 236, 244, 0.2); }
@keyframes bloomMarq { to { transform: translate(-50%, -38%); } }
.bloom__hud { position: absolute; z-index: 2; left: clamp(1rem, 3vw, 2.5rem); top: 42%; margin: 0; font: 500 0.66rem/1.7 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 240, 246, 0.55); }
.bloom__hud b { font-weight: 500; color: rgba(255, 240, 246, 0.85); }
.bloom__note {
  position: absolute; z-index: 2; width: min(19rem, 80vw); padding: 1.1rem 1.25rem 1.2rem; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 240, 246, 0.12), rgba(255, 240, 246, 0.04));
  border: 1px solid rgba(255, 236, 244, 0.16); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  color: #fdf1f5; opacity: 0; transform: translateY(24px) scale(0.97); filter: blur(6px);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 0.7, 0.2, 1), filter 0.8s ease; pointer-events: none;
}
.bloom__note.is-on { opacity: 1; transform: none; filter: none; }
.bloom__note--a { left: clamp(1rem, 7vw, 7rem); bottom: 14vh; }
.bloom__note--b { right: clamp(1rem, 7vw, 7rem); top: 22vh; }
.bloom__note--c { left: clamp(1rem, 9vw, 9rem); top: 20vh; }
.bloom__k { margin: 0 0 0.6rem; font: 500 0.62rem/1 ui-monospace, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 214, 228, 0.7); }
.bloom__note h2 { margin: 0 0 0.45rem; font: italic 400 1.7rem/1.05 "Instrument Serif", Georgia, serif; color: #fff; }
.bloom__note p:last-child { margin: 0; font: 400 0.9rem/1.5 "Geist", "Inter", sans-serif; color: rgba(253, 241, 245, 0.78); }
.bloom__title { position: absolute; z-index: 2; left: 0; right: 0; bottom: 11vh; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22, 0.7, 0.2, 1); pointer-events: none; }
.bloom__title.is-on { opacity: 1; transform: none; }
.bloom__title p { margin: 0; font: 500 0.64rem/1 ui-monospace, Consolas, monospace; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 236, 244, 0.6); }
.bloom__title .bloom__name { margin-top: 0.6rem; font: italic 400 clamp(3rem, 8vw, 6.5rem)/1 "Instrument Serif", Georgia, serif; letter-spacing: -0.01em; text-transform: none; color: rgba(255, 244, 248, 0.92); text-shadow: 0 0 40px rgba(255, 170, 200, 0.35); }
.bloom__name sup { font-size: 0.32em; font-style: normal; letter-spacing: 0.04em; vertical-align: 1.6em; margin-left: 0.2em; color: rgba(255, 220, 232, 0.75); }
.bloom__cue { position: absolute; z-index: 2; left: 50%; bottom: 4vh; margin: 0; transform: translateX(-50%); font: 500 0.64rem/1 ui-monospace, Consolas, monospace; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 236, 244, 0.6); transition: opacity 0.6s ease; }
.bloom__cue::after { content: ""; display: block; width: 1px; height: 2.2rem; margin: 0.7rem auto 0; background: linear-gradient(rgba(255, 236, 244, 0.7), transparent); animation: bloomCue 2s ease-in-out infinite; transform-origin: top; }
@keyframes bloomCue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.bloom__cue.is-gone { opacity: 0; }
.bloom.is-flat .bloom__note { opacity: 1; transform: none; filter: none; position: relative; inset: auto; margin: 1rem auto; }
@media (max-width: 700px) {
  .bloom { height: 1150vh; }
  .bloom__hud { top: 11vh; }
  .bloom__note { width: auto; left: 1rem !important; right: 1rem !important; top: auto !important; bottom: 7vh !important; }
  .bloom__title { bottom: 16vh; }
}
@media (prefers-reduced-motion: reduce) { .bloom__marquee { animation: none; } }

/* ═══ the projects as folders ═══════════════════════════════════════
   An iridescent sheet sits at the back; the folder face is cut by an SVG
   mask (a tab on the left, a notch on the right), so the face can be any
   colour. On hover the face slides down and the object rises behind it. */
.folders { position: relative; padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 4vw, 3rem); background: #07070a; }
.folders__head { max-width: 64rem; margin: 0 auto 2.4rem; }
.folders__kick { margin: 0 0 0.6rem; font: 600 0.68rem/1 "Geist", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.folders__title { margin: 0; font: 300 clamp(1.8rem, 3.6vw, 3rem)/1.1 "Source Serif 4", Georgia, serif; color: #f4f2f7; letter-spacing: -0.01em; }
.folders__row { max-width: 64rem; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.fold {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; isolation: isolate;
  text-decoration: none; color: var(--ink); background: #0d0d10;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 50px -20px rgba(0, 0, 0, 0.8);
  transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.2, 1), box-shadow 0.6s ease;
}
.fold:hover, .fold:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 0 4px rgba(255, 255, 255, 0.05), 0 34px 60px -22px rgba(0, 0, 0, 0.9); outline: none; }
/* the sheet behind: three colours, slowly moving, with a streak of light */
.fold__back {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 46%, transparent 54%) 0 0 / 260% 100%,
    radial-gradient(90% 70% at 20% 10%, var(--g3), transparent 60%),
    linear-gradient(140deg, var(--g1), var(--g2) 55%, var(--g1));
  background-size: 260% 100%, 100% 100%, 200% 200%;
  background-position: 120% 0, 0 0, 0 0;
  filter: saturate(1.15);
  transition: background-position 1.4s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.fold:hover .fold__back, .fold:focus-visible .fold__back { background-position: -40% 0, 0 0, 100% 100%; }
/* the object, behind the face until the face drops */
.fold__obj {
  position: absolute; z-index: 1; left: 50%; top: 4%; width: 72%; height: auto;
  transform: translate(-50%, 70%) scale(0.86) rotate(-4deg); opacity: 0;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.4));
  transition: transform 0.75s cubic-bezier(0.2, 0.9, 0.25, 1.15), opacity 0.4s ease;
}
.fold__obj--mark { width: 48%; top: 8%; }
.fold__obj--puppet { width: 54%; top: -2%; filter: drop-shadow(0 0 1px rgba(255, 230, 190, 0.6)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35)); }
.fold__obj--dino { width: 90%; top: 14%; }
.fold__obj--radio { width: 84%; top: 10%; }
.fold__obj--mill { width: 52%; top: 0; }
.fold:hover .fold__obj, .fold:focus-visible .fold__obj { transform: translate(-50%, 0) scale(1) rotate(0); opacity: 1; transition-delay: 0.08s; }
.fold__sails { transform-origin: 100px 92px; animation: foldMill 6s linear infinite; animation-play-state: paused; }
.fold:hover .fold__sails, .fold:focus-visible .fold__sails { animation-play-state: running; }
@keyframes foldMill { to { transform: rotate(360deg); } }
/* the face: a tab on the left, a notch on the right, cut by the mask */
.fold__face {
  position: absolute; z-index: 2; left: 0; right: 0; top: 22%; bottom: 0;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; padding: 1.1rem 1.25rem 1.3rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--face) 92%, #fff), var(--face) 45%, color-mix(in srgb, var(--face) 85%, #000));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q0 0 14 0 H158 C172 0 176 26 194 26 H300 V400 H0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cpath d='M0 14 Q0 0 14 0 H158 C172 0 176 26 194 26 H300 V400 H0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transition: top 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.fold:hover .fold__face, .fold:focus-visible .fold__face { top: 44%; }
.fold__n { grid-column: 1; margin-top: 0.15rem; font: 700 clamp(2.6rem, 4.4vw, 3.4rem)/1 "Inter Tight", "Inter", sans-serif; letter-spacing: -0.04em; }
.fold__go { grid-column: 2; align-self: start; margin-top: 2.1rem; font-style: normal; font-size: 0.95rem; opacity: 0.8; transition: transform 0.4s ease; }
.fold:hover .fold__go { transform: translate(2px, -2px); }
.fold__name { grid-column: 1 / -1; grid-row: 3; font: 600 0.92rem/1.2 "Geist", "Inter", sans-serif; }
.fold__text { grid-column: 1 / -1; grid-row: 4; margin-top: 0.3rem; font: 400 0.8rem/1.45 "Geist", "Inter", sans-serif; color: var(--sub); }
/* touch has no hover: a folder opens as it comes into view instead */
@media (hover: none) {
  .fold.is-open .fold__face { top: 44%; }
  .fold.is-open .fold__obj { transform: translate(-50%, 0) scale(1) rotate(0); opacity: 1; }
  .fold.is-open .fold__back { background-position: -40% 0, 0 0, 100% 100%; }
  .fold.is-open .fold__sails { animation-play-state: running; }
}
@media (max-width: 860px) { .folders__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .folders__row { grid-template-columns: 1fr; } .fold { aspect-ratio: 5 / 5.4; } }
@media (prefers-reduced-motion: reduce) { .fold, .fold__face, .fold__obj, .fold__back { transition: none; } .fold__sails { animation: none; } }

/* the lens glow over the lotus, drawn from its own frame (js/bloom.js) */
.bloom__halo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0.75; }

/* ═══ the story inside the lotus ═══════════════════════════════════ */
.bloom__veil, .bloom__flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.bloom__veil { background: #000; }
.bloom__flash { background: radial-gradient(circle at 50% 50%, #fff 0%, #fff4ea 40%, #ffd9e8 100%); }
.bloom__story { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bloom__line {
  position: absolute; left: 50%; top: 50%; width: min(46rem, 86vw); margin: 0; opacity: 0; transform: translate(-50%, -50%);
  text-align: center; font: italic 400 clamp(1.6rem, 3.4vw, 3rem)/1.18 "Instrument Serif", "Source Serif 4", Georgia, serif;
  color: #fff6f9; letter-spacing: -0.005em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
  padding: 2rem 1.5rem; background: radial-gradient(closest-side, rgba(6, 3, 6, 0.78), rgba(6, 3, 6, 0));
}
.bloom__yr { display: block; margin-bottom: 0.5rem; font: 500 0.72rem/1 ui-monospace, Consolas, monospace; letter-spacing: 0.4em; font-style: normal; color: rgba(255, 214, 160, 0.9); }
.bloom__line--big { width: min(52rem, 88vw); padding: 2.2rem 1.5rem; background: radial-gradient(closest-side, rgba(10, 4, 8, 0.72), rgba(10, 4, 8, 0)); }
.bloom__line--big em { display: block; margin-top: 0.9rem; font-size: 0.62em; color: rgba(255, 222, 190, 0.95); }
.bloom__name { width: 96vw; }
.bloom__name span { display: block; margin-bottom: 0.4rem; font: 500 clamp(0.7rem, 1vw, 0.85rem)/1 ui-monospace, Consolas, monospace; font-style: normal; letter-spacing: 0.45em; text-transform: uppercase; color: rgba(255, 230, 238, 0.75); }
.bloom__name b { display: block; font: italic 400 clamp(4rem, 13vw, 13rem)/0.95 "Instrument Serif", Georgia, serif; letter-spacing: -0.02em; color: #fff; text-shadow: 0 0 60px rgba(255, 170, 205, 0.45), 0 4px 40px rgba(0, 0, 0, 0.7); }
.bloom__cue { opacity: 0; animation: bloomCueIn 1.2s ease 3.5s forwards; }
@keyframes bloomCueIn { to { opacity: 1; } }
.bloom__cue.is-gone { opacity: 0 !important; animation: none; }
/* nothing but the flower until the story is told */
.site-head { transition: translate 0.6s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 0.5s ease; }
html.is-blooming .site-head { translate: 0 -120%; opacity: 0; pointer-events: none; }
.bloom__line--low { top: 82%; font-size: clamp(1.3rem, 2.4vw, 2.2rem); }

/* the story lines, one shape for all: a small label, two balanced lines, sometimes a quieter third */
.bloom__line { font-size: inherit; padding: 2.4rem 2rem; text-align: center; }
.bloom__line p { margin: 0; text-wrap: balance; }
.bloom__k { margin-bottom: 0.9rem !important; font: 500 clamp(0.62rem, 0.85vw, 0.74rem)/1.3 ui-monospace, Consolas, monospace; letter-spacing: 0.38em; text-transform: uppercase; color: rgba(255, 214, 170, 0.9); font-style: normal; }
.bloom__t { font: italic 400 clamp(1.7rem, 3.3vw, 3rem)/1.16 "Instrument Serif", "Source Serif 4", Georgia, serif; color: #fff6f9; }
.bloom__s { margin-top: 0.85rem !important; font: 400 clamp(0.9rem, 1.2vw, 1.05rem)/1.5 "Geist", "Inter", sans-serif; color: rgba(255, 236, 228, 0.82); }
.bloom__line--low { top: 80%; }
.bloom__line--low .bloom__t { font-size: clamp(1.4rem, 2.6vw, 2.4rem); }
.bloom__name { background: none; }
.bloom__n { font: italic 400 clamp(4rem, 13vw, 13rem)/0.95 "Instrument Serif", Georgia, serif; letter-spacing: -0.02em; color: #fff; text-shadow: 0 0 60px rgba(255, 170, 205, 0.45), 0 4px 40px rgba(0, 0, 0, 0.7); }

/* upright type: the light serif for the lines, Instrument Serif (which has no italic) for the name */
.bloom__t { font: 300 clamp(1.6rem, 3vw, 2.7rem)/1.2 "Source Serif 4", Georgia, serif; font-style: normal; letter-spacing: -0.012em; }
.bloom__line--low .bloom__t { font-size: clamp(1.35rem, 2.4vw, 2.2rem); }
.bloom__n { font-style: normal; font-size: clamp(3.6rem, 10vw, 10rem); }
.bloom__name { top: 84%; }

/* the field's stems go down into a dark mist */
.bloom__mist { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(6, 4, 8, 0) 0%, rgba(6, 4, 8, 0.75) 55%, #060408 100%); }

/* the journey's lines over the sky; and the night map arriving after it */
.bloom__line--top { top: 20%; }
html.has-bloom .hero .nightmap { opacity: 0; transform: scale(1.18); transition: opacity 2.2s ease, transform 3s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.has-bloom .hero.is-arrived .nightmap { opacity: 1; transform: none; }
html.has-bloom .hero .stage { opacity: 0; transition: opacity 1.6s ease 0.9s; }
html.has-bloom .hero.is-arrived .stage { opacity: 1; }

/* the map alone, full screen: the words that sat beside it are gone */
.hero .stage { display: none !important; }
@media (min-width: 901px) { .nightmap { left: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; } }

/* the line held between the director's hands */
.bloom__line--frame { background: none; width: min(30rem, 52vw); top: 47%; }
.bloom__line--frame .bloom__t { font-size: clamp(1.4rem, 2.6vw, 2.4rem); }

/* the name on the left, in the middle of the height; the body stands to the right */
@media (min-width: 701px) {
  .bloom__name { left: 27%; top: 50%; width: 46vw; text-align: left; }
  .bloom__name .bloom__n { font-size: clamp(3.4rem, 7.6vw, 8.6rem); line-height: 0.98; }
  .bloom__name .bloom__k { margin-left: 0.3rem; }
}

/* the name held inside the frame on the left, whatever the width */
@media (min-width: 701px) {
  .bloom__name { left: 7vw !important; right: auto; width: 44vw !important; top: 40% !important; transform: none !important; padding: 0 !important; }
  .bloom__name .bloom__n { font-size: clamp(3rem, 6.8vw, 8rem) !important; white-space: nowrap; }
}

/* after the name, the map comes up slowly out of the dark */
html.has-bloom .hero .nightmap { transition: opacity 3.6s ease 0.3s, transform 5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s !important; }

/* no header over the opening, from the first frame */
html.is-blooming .site-head { transition: none; }

.bloom__line--frame { width: min(40rem, 62vw) !important; }

/* the story's chapters: wider lines so each sits on two rows; the name's lead-in */
.bloom__line { width: min(52rem, 90vw); }
.bloom__line--frame { width: min(46rem, 66vw) !important; }
.bloom__lead { margin: 0 0 0.4rem !important; font-size: clamp(1rem, 1.4vw, 1.25rem) !important; color: rgba(255, 236, 228, 0.85); }

/* the story, set like a film's titles: a display serif for what he says,
   a small spaced label for the chapter, a plain sans for the quiet line */
.bloom__line { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8); }
.bloom__t { font-family: "Instrument Serif", "Source Serif 4", Georgia, serif !important; font-weight: 400 !important; font-style: normal !important;
  font-size: clamp(2rem, 4.1vw, 3.9rem) !important; line-height: 1.04 !important; letter-spacing: -0.018em !important; color: #fff8f4 !important; }
.bloom__line--low .bloom__t, .bloom__line--frame .bloom__t { font-size: clamp(1.7rem, 3.2vw, 3rem) !important; }
.bloom__k { font: 600 clamp(0.6rem, 0.78vw, 0.7rem)/1 "Geist", "Inter", sans-serif !important; letter-spacing: 0.32em !important; text-transform: uppercase;
  color: rgba(255, 210, 160, 0.92) !important; margin-bottom: 1.1rem !important; }
.bloom__k::after { content: ""; display: block; width: 2.4rem; height: 1px; margin: 0.8rem auto 0; background: rgba(255, 210, 160, 0.5); }
.bloom__name .bloom__k::after { margin-left: 0.3rem; }
.bloom__s { font: 400 clamp(0.92rem, 1.15vw, 1.08rem)/1.55 "Geist", "Inter", sans-serif !important; letter-spacing: 0.005em; color: rgba(255, 238, 230, 0.8) !important; margin-top: 1.1rem !important; }

.bloom__line { width: min(64rem, 92vw) !important; }
.bloom__name { width: 46vw !important; }

/* Cormorant Garamond (SIL OFL), self-hosted: the voice of the story */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* no chapter labels; the lines carry the story */
.bloom__story .bloom__k { display: none !important; }
.bloom__t { font-family: "Cormorant Garamond", "Instrument Serif", Georgia, serif !important; font-weight: 500 !important; font-style: italic !important;
  font-size: clamp(2.1rem, 4.2vw, 4rem) !important; line-height: 1.08 !important; letter-spacing: -0.005em !important; }
.bloom__line--low .bloom__t, .bloom__line--frame .bloom__t { font-size: clamp(1.8rem, 3.3vw, 3.1rem) !important; }
.bloom__s { font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 500 !important; font-style: normal !important; font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important; letter-spacing: 0.01em; color: rgba(255, 232, 220, 0.82) !important; }
.bloom__lead { font-style: italic !important; }
.bloom__n { font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600 !important; font-style: normal !important; letter-spacing: -0.01em !important; }

.bloom__lead { font-size: clamp(1.3rem, 2vw, 1.9rem) !important; margin-bottom: 0.2rem !important; }

/* ═══ multimodal viewer engagement analysis (js/engage.js) ═══ */
.eng { max-width: 1460px; margin: 0 auto; padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.eng__title { margin: 0.5rem 0 1rem; font-family: "Source Serif 4", Georgia, serif; font-weight: 300; font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.08; color: var(--type-1); letter-spacing: -0.01em; }
.eng__lede { margin: 0 0 1.4rem; font: 400 1.02rem/1.6 "Geist", "Inter", sans-serif; color: rgba(235, 238, 248, 0.75); }
.eng__how { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.55rem; font: 400 0.92rem/1.4 "Geist", sans-serif; color: rgba(235, 238, 248, 0.7); }
.eng__how b { display: inline-block; min-width: 6.5rem; font-weight: 600; color: #9fe8ff; letter-spacing: 0.04em; }
.eng__note { margin: 0; font: 400 0.78rem/1.4 "Geist", sans-serif; color: rgba(235, 238, 248, 0.45); }
.eng__stage { position: relative; aspect-ratio: 16 / 11; border-radius: 22px; overflow: hidden; background: radial-gradient(80% 70% at 50% 40%, #12203a, #060912 75%); box-shadow: 0 0 0 1px rgba(159, 232, 255, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.8); }
.eng__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.eng__hud { position: absolute; font: 500 0.7rem/1.3 ui-monospace, Consolas, monospace; color: rgba(220, 240, 255, 0.85); letter-spacing: 0.06em; }
.eng__hud--tl { left: 1.1rem; top: 1rem; display: flex; gap: 1rem; }
.eng__hud--tr { right: 1.1rem; top: 1rem; width: min(13rem, 34%); padding: 0.8rem 0.9rem; border-radius: 14px; background: rgba(8, 14, 28, 0.55); border: 1px solid rgba(159, 232, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.eng__hud--ml { left: 1.1rem; top: 3.2rem; padding: 0.8rem 0.9rem; border-radius: 14px; background: rgba(8, 14, 28, 0.55); border: 1px solid rgba(159, 232, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.eng__k { margin: 0 0 0.45rem; font: 600 0.6rem/1 "Geist", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(159, 232, 255, 0.75); }
.eng__big { margin: 0 0 0.15rem; font: 300 1.9rem/1 "Source Serif 4", Georgia, serif; color: #fff; }
.eng__sub { margin: 0 0 0.8rem; color: rgba(220, 240, 255, 0.6); }
.eng__bar { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: 0.5rem; margin: 0.3rem 0; }
.eng__bar i { height: 5px; border-radius: 3px; background: linear-gradient(90deg, #7fd6ff, #ff9f7a); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform 0.15s linear; opacity: 0.6; }
.eng__bar.is-top { color: #fff; } .eng__bar.is-top i { opacity: 1; }
.eng__time { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0.9rem; }
.eng__curve { display: block; width: 100%; height: 4.2rem; }
.eng__strip { position: relative; display: flex; gap: 2px; height: 0.9rem; margin-top: 0.3rem; border-radius: 4px; overflow: hidden; }
.eng__strip i { display: block; opacity: 0.85; }
.eng__head { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; }
.eng__k--t { margin: 0.45rem 0 0; }
@media (max-width: 900px) { .eng { grid-template-columns: 1fr; } .eng__stage { aspect-ratio: 4 / 5; } .eng__hud--ml { top: auto; bottom: 7.2rem; } }

/* the laurel, drawn in gold: filled leaves, a fine stem */
.laurel { width: 1.45rem; height: 1.45rem; color: #d9b45a !important; filter: drop-shadow(0 0 6px rgba(217, 180, 90, 0.25)); }
.laurel .lr-l { fill: currentColor; stroke: none; }
.laurel .lr-s { fill: none; stroke: currentColor; stroke-width: 0.9; stroke-linecap: round; }
.laurels li, .prizes--laurel li { grid-template-columns: 1.6rem 1fr; align-items: center; }

/* the name over the moon at the very start */
.bloom__hello { position: absolute; z-index: 3; left: 50%; top: 50%; width: 92vw; transform: translate(-50%, -50%); text-align: center; pointer-events: none; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.85); }
.bloom__hello-k { margin: 0 0 0.6rem; font: 600 0.7rem/1 "Geist", sans-serif; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255, 220, 190, 0.9); }
.bloom__hello-n { margin: 0; font: 600 clamp(3.4rem, 9vw, 9rem)/0.95 "Cormorant Garamond", Georgia, serif; letter-spacing: -0.01em; color: #fff; }
/* skip, as in a game: a glass petal pill whose ring fills with the story */
.bloom__skip { position: absolute; z-index: 5; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 4vh, 2rem); display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 1rem 0.45rem 0.45rem; border-radius: 999px; cursor: pointer;
  font: 600 0.72rem/1 "Geist", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #fff3f6;
  background: linear-gradient(135deg, rgba(255, 190, 215, 0.22), rgba(255, 220, 190, 0.1)); border: 1px solid rgba(255, 210, 225, 0.35);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: opacity 0.4s ease, transform 0.3s ease, background 0.3s ease; }
.bloom__skip:hover { transform: translateY(-2px); background: linear-gradient(135deg, rgba(255, 190, 215, 0.34), rgba(255, 220, 190, 0.16)); }
.bloom__skip svg { width: 2.1rem; height: 2.1rem; transform: rotate(-90deg); }
.bloom__ring-bg { fill: none; stroke: rgba(255, 220, 230, 0.2); stroke-width: 2; }
.bloom__ring { fill: none; stroke: #ffc4d8; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bloom__petal { fill: rgba(255, 200, 220, 0.85); transform: rotate(90deg); transform-origin: 20px 20px; }
.bloom__skip.is-gone { opacity: 0; pointer-events: none; }

/* the name on the moon: carved capitals in moonlit stone, standing in depth */
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
.bloom__hello { perspective: 900px; }
.bloom__hello-w { position: relative; display: inline-block; transform: rotateX(16deg); transform-origin: 50% 100%; }
.bloom__hello-n { font: 500 clamp(3rem, 8.4vw, 8.4rem)/1 "Cinzel", "Cormorant Garamond", Georgia, serif !important; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; margin: 0; }
.bloom__hello-sh { position: absolute; inset: 0; color: transparent; text-shadow: 0 1px 0 #6f645c,0 2px 0 #6f645c,0 3px 0 #6f645c,0 4px 0 #6f645c,0 5px 0 #6f645c,0 6px 0 #6f645c,0 7px 0 #6f645c,0 8px 0 #6f645c,0 9px 0 #6f645c,0 10px 0 #6f645c, 0 18px 40px rgba(0, 0, 0, 0.75); }
.bloom__hello-fg { position: relative; color: transparent; background: linear-gradient(180deg, #fffaf2, #e4dbcf 55%, #aba196); -webkit-background-clip: text; background-clip: text; text-shadow: none; }

/* the name as a studio title: wide heavy capitals, a chrome face, a gold edge, deep extrusion, gold spaced line beneath */
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
.bloom__hello-w { transform: rotateX(12deg) !important; }
.bloom__hello-n { font: 800 clamp(2.8rem, 8.6vw, 8.8rem)/1 "Montserrat", "Geist", sans-serif !important; letter-spacing: 0.02em !important; }
.bloom__hello-sh { text-shadow: 0 1px 0 #e7b54e,0 2px 0 #c8902f,0 3px 0 hsl(215,14%,39%),0 4px 0 hsl(215,14%,36%),0 5px 0 hsl(215,14%,34%),0 6px 0 hsl(215,14%,32%),0 7px 0 hsl(215,14%,29%),0 8px 0 hsl(215,14%,27%),0 9px 0 hsl(215,14%,24%),0 10px 0 hsl(215,14%,22%),0 11px 0 hsl(215,14%,20%),0 12px 0 hsl(215,14%,17%),0 13px 0 hsl(215,14%,15%), 0 22px 40px rgba(0, 0, 0, 0.8) !important; }
.bloom__hello-fg { background: linear-gradient(180deg, #ffffff 0%, #eef2f8 38%, #b8c2d0 50%, #f4f6fa 62%, #d7dde7 100%) !important; -webkit-background-clip: text !important; background-clip: text !important;
  filter: drop-shadow(0 0 0.6px #f3c766) drop-shadow(0 0 0.6px #d9a640); }
.bloom__hello-k { order: 2; margin: 1.1rem 0 0 !important; font: 700 clamp(0.9rem, 1.9vw, 1.7rem)/1 "Montserrat", sans-serif !important; letter-spacing: 0.42em !important;
  background: linear-gradient(180deg, #fff1b8, #e0a83e 55%, #a8701c); -webkit-background-clip: text; background-clip: text; color: transparent !important; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7)); }
.bloom__hello { display: flex; flex-direction: column; align-items: center; }

/* a gold rim round each letter, under the chrome face */
.bloom__hello-rim { position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 0.075em #e3b24f; filter: drop-shadow(0 0 2px rgba(255, 214, 120, 0.7)); }
.bloom__hello-fg { filter: none !important; background: linear-gradient(180deg, #ffffff 0%, #f1f4f9 30%, #c3cbd8 48%, #8f9aab 52%, #e9edf3 70%, #ffffff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }

/* every line of the story on exactly two rows: no wrapping inside a row, sized to the widest */
@media (min-width: 701px) {
  .bloom__line { width: 96vw !important; }
  .bloom__t { white-space: nowrap; font-size: min(clamp(2.1rem, 4.2vw, 4rem), 3.4vw) !important; }
  .bloom__line--low .bloom__t, .bloom__line--frame .bloom__t { font-size: min(clamp(1.8rem, 3.3vw, 3.1rem), 3vw) !important; }
}
@media (min-width: 701px) { .bloom__s { white-space: nowrap; } }

/* the name itself is drawn in 3D now; only the gold line stays in the page */
.bloom__hello-w { visibility: hidden; height: clamp(3rem, 8.6vw, 8.8rem); }
.bloom__hello-k { margin-top: clamp(4.6rem, 11vw, 11rem) !important; }

/* the name at the end of the story in carved Cinzel capitals */
.bloom__n { font-family: "Cinzel", "Cormorant Garamond", Georgia, serif !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: 0.03em !important; font-size: clamp(3rem, 6.4vw, 7rem) !important; }

/* under the backwater: blue dark, light from above */
.bloom__deep { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(70% 50% at 50% 0%, rgba(90, 170, 210, 0.55), rgba(8, 30, 52, 0.9) 60%, #02101c 100%); }

/* Start: a glass petal button under the night moon; the name waits for the light */
.bloom__start { position: absolute; z-index: 5; left: 50%; bottom: 10vh; transform: translateX(-50%); display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.6rem 0.85rem 1.1rem; border-radius: 999px; cursor: pointer;
  font: 600 0.82rem/1 "Geist", sans-serif; letter-spacing: 0.32em; text-transform: uppercase; color: #fff4f8;
  background: linear-gradient(135deg, rgba(255, 190, 215, 0.25), rgba(170, 200, 255, 0.12)); border: 1px solid rgba(255, 215, 230, 0.4);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 0 40px rgba(150, 180, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: opacity 0.8s ease, transform 0.8s ease; animation: bloomStartPulse 2.6s ease-in-out infinite; }
.bloom__start-p { width: 0.9rem; height: 1.3rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(180deg, #ffe0ec, #ff9fc2); box-shadow: 0 0 12px rgba(255, 170, 205, 0.8); }
@keyframes bloomStartPulse { 50% { box-shadow: 0 0 60px rgba(150, 180, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); } }
.bloom.is-started .bloom__start { opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }
.bloom__cue { transition: opacity 1.2s ease 1.4s; }
.bloom__hello { transition: opacity 0.8s ease !important; }
.bloom.is-started .bloom__hello { opacity: 0 !important; }
.bloom:not(.is-started) .bloom__cue { opacity: 0 !important; }

/* the line under the name: the same italic serif, plain colour */
.bloom__hello-k { font: 400 italic clamp(1.4rem, 2.6vw, 2.4rem)/1 "Instrument Serif", Georgia, serif !important; letter-spacing: 0.01em !important; text-transform: none !important;
  background: none !important; color: rgba(255, 244, 248, 0.88) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; filter: none !important; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }

/* two choices under the name: Start, or skip straight to the work */
.bloom__choices { position: absolute; z-index: 5; left: 50%; top: calc(50% + clamp(7rem, 15vw, 14rem)); transform: translateX(-50%); display: flex; gap: 1rem; transition: opacity 0.8s ease, transform 0.8s ease; }
.bloom__choices .bloom__start { position: static; transform: none; bottom: auto; left: auto; }
.bloom__skip2 { animation: none !important; background: rgba(255, 255, 255, 0.06) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; }
.bloom__skip2:hover, .bloom__choices .bloom__start:hover { transform: translateY(-2px); }
.bloom.is-started .bloom__choices { opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }
.bloom.is-started .bloom__choices .bloom__start { opacity: 1; transform: none; }
.bloom:not(.is-started) .bloom__skip { opacity: 0; pointer-events: none; }

/* Start first: bright and full; Skip quiet beside it */
.bloom__choices { align-items: center; }
.bloom__choices .bloom__start:not(.bloom__skip2) { padding: 1.05rem 2.3rem 1.05rem 1.4rem; font-size: 0.95rem; color: #2a0f1c;
  background: linear-gradient(135deg, #ffe3ee, #ffb3cf 55%, #f6c9ff) !important; border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 40px rgba(255, 170, 210, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.bloom__choices .bloom__start:not(.bloom__skip2) .bloom__start-p { background: linear-gradient(180deg, #ff8fb6, #d94f86); box-shadow: none; }
.bloom__skip2 { padding: 0.7rem 1.3rem !important; font-size: 0.72rem !important; color: rgba(255, 240, 246, 0.75) !important; background: transparent !important; border-color: rgba(255, 220, 235, 0.25) !important; box-shadow: none !important; backdrop-filter: none !important; }

/* the latest project, over the map: a glass card that opens pitute.org */
.latest { position: absolute; z-index: 6; left: clamp(1rem, 3vw, 2.5rem); top: clamp(4.5rem, 10vh, 6.5rem); width: min(23rem, calc(100% - 2rem)); display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.4rem 0.9rem; align-items: center;
  padding: 1rem 1.1rem; border-radius: 18px; text-decoration: none; color: #f2eeff;
  background: linear-gradient(150deg, rgba(150, 110, 255, 0.22), rgba(20, 22, 48, 0.72)); border: 1px solid rgba(190, 160, 255, 0.35);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(150, 100, 255, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease; }
.latest:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(170, 120, 255, 0.35); }
.latest__mark { width: 3.2rem; height: auto; filter: drop-shadow(0 0 10px rgba(180, 140, 255, 0.6)); }
.latest__txt { display: flex; flex-direction: column; gap: 0.2rem; }
.latest__k { font: 600 0.62rem/1 "Geist", sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #c9b4ff; }
.latest__n { font: 500 1.35rem/1.1 "Instrument Serif", Georgia, serif; color: #fff; }
.latest__d { font: 400 0.8rem/1.4 "Geist", sans-serif; color: rgba(235, 230, 255, 0.72); }
.latest__go { grid-column: 1 / -1; justify-self: start; margin-top: 0.4rem; padding: 0.6rem 1rem; border-radius: 999px; font: 600 0.78rem/1 "Geist", sans-serif; color: #1a1033;
  background: linear-gradient(135deg, #e4d8ff, #b493ff); box-shadow: 0 0 24px rgba(170, 130, 255, 0.5); }

/* the map stands on its own: no television over it */
.hero .hero-tv { display: none !important; }

/* equations surfacing behind the map */
.eqfield { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.eqfield span { position: absolute; white-space: nowrap; font: 400 italic 1rem/1 "Instrument Serif", "Source Serif 4", Georgia, serif; color: rgba(190, 175, 255, 0.0);
  text-shadow: 0 0 14px rgba(160, 130, 255, 0.35); animation: eqFloat var(--d, 9s) ease-in-out forwards; }
@keyframes eqFloat { 0% { color: rgba(190, 175, 255, 0); transform: translateY(14px); filter: blur(4px); } 25% { color: rgba(200, 188, 255, 0.32); filter: blur(0); } 75% { color: rgba(200, 188, 255, 0.28); } 100% { color: rgba(190, 175, 255, 0); transform: translateY(-18px); filter: blur(3px); } }
.hero .nightmap { z-index: 1; }

/* the equations live in the sky round the moon at the start, not on it */
.bloom .eqfield { z-index: 1; -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 46vh, #000 50vh); mask-image: radial-gradient(circle at 50% 50%, transparent 0 46vh, #000 50vh); transition: opacity 1.2s ease; }
.bloom.is-started .eqfield { opacity: 0; }
.eqfield span { animation-name: eqFloat2; }
@keyframes eqFloat2 { 0% { color: rgba(190, 200, 255, 0); transform: translateY(14px); filter: blur(4px); } 25% { color: rgba(200, 210, 255, 0.42); filter: blur(0); } 75% { color: rgba(200, 210, 255, 0.36); } 100% { color: rgba(190, 200, 255, 0); transform: translateY(-18px); filter: blur(3px); } }

/* the map lies under the last frame of the story and shows through as it fades */
.bloom { z-index: 2; }
.bloom + .hero, html.has-bloom .hero { margin-top: -100vh; margin-top: -100svh; position: relative; z-index: 1; }
html.has-bloom .hero .nightmap { transition: opacity 2.6s ease, transform 4s cubic-bezier(0.2, 0.7, 0.2, 1) !important; }
.site-head { transition: translate 1.6s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 1.6s ease !important; }

/* everywhere else, at the foot of the start screen */
.bloom__social { position: absolute; z-index: 5; left: 50%; bottom: clamp(1rem, 3.5vh, 2rem); transform: translateX(-50%); display: flex; gap: 0.55rem; transition: opacity 0.8s ease; }
.bloom__social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: #fff0f6;
  background: linear-gradient(135deg, rgba(255, 200, 225, 0.18), rgba(160, 190, 255, 0.08)); border: 1px solid rgba(255, 220, 235, 0.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; }
.bloom__social a:hover { transform: translateY(-3px); background: linear-gradient(135deg, rgba(255, 190, 220, 0.4), rgba(170, 190, 255, 0.2)); box-shadow: 0 0 22px rgba(255, 170, 210, 0.5); }
.bloom__social svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bloom.is-started .bloom__social { opacity: 0; pointer-events: none; }
.bloom__cue { display: none !important; }

.bloom { background: transparent !important; }

/* folder cards: when open, the number shrinks so the name and line always fit; objects sit inside the opening */
.fold__face { transition: top 0.7s cubic-bezier(0.22, 0.7, 0.2, 1), padding 0.5s ease; overflow: hidden; }
.fold__n { transition: font-size 0.5s ease, margin 0.5s ease; }
.fold:hover .fold__face, .fold:focus-visible .fold__face, .fold.is-open .fold__face { top: 52% !important; padding-top: 0.8rem; grid-template-rows: auto 1fr auto auto; }
.fold:hover .fold__n, .fold:focus-visible .fold__n, .fold.is-open .fold__n { font-size: 1.4rem; margin-top: 0.1rem; }
.fold:hover .fold__go, .fold:focus-visible .fold__go, .fold.is-open .fold__go { margin-top: 0.15rem; }
.fold__obj--radio { width: 74% !important; top: 7% !important; }
.fold__obj--tv { width: 66% !important; top: 6% !important; }
.fold__obj--dino { top: 12% !important; }

/* the social row sits just under Start and Skip */
.bloom__social { bottom: auto !important; top: calc(50% + clamp(7rem, 15vw, 14rem) + 4.2rem); }
.bloom__social a { width: 2.2rem; height: 2.2rem; }
.bloom__social svg { width: 1rem; height: 1rem; }

/* the latest-project card in clear glass, headed by pitute's own wordmark */
.latest { background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(22px) saturate(1.6) !important; -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important; }
.latest__n { font-family: "Source Serif 4", Georgia, serif !important; font-weight: 600 !important; font-size: 2rem !important; line-height: 0.95 !important; letter-spacing: -0.045em; color: #f4f6fa !important; }
.latest__stop { color: oklch(0.66 0.21 256); }
.latest__k { color: rgba(220, 230, 255, 0.75) !important; }
.latest__go { color: #fff !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)) !important; border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3) !important; }
.latest__go:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.12)) !important; }

/* the Projects menu in petal glass: rose-tinted, frosted, a soft pink edge and sheen */
@media (min-width: 901px) {
  .site-head__panel { background: linear-gradient(160deg, rgba(255, 214, 230, 0.16), rgba(255, 190, 215, 0.06) 45%, rgba(190, 200, 255, 0.07)) !important;
    border: 1px solid rgba(255, 210, 228, 0.32) !important; border-radius: 20px !important;
    backdrop-filter: blur(24px) saturate(1.6) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 50px rgba(255, 170, 205, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 200, 225, 0.12) !important; }
  .site-head__panel a b { color: #fff4f8 !important; }
  .site-head__panel a span { color: rgba(255, 228, 238, 0.66) !important; }
  .site-head__panel a:hover, .site-head__panel a.is-here { background: linear-gradient(135deg, rgba(255, 200, 225, 0.2), rgba(255, 255, 255, 0.06)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
}

/* ═══ every screen size ═══════════════════════════════════════════ */
html, body { overflow-x: clip; max-width: 100%; }
img, video, canvas, svg { max-width: 100%; }
@media (max-width: 1100px) {
  .site-head__nav { background: linear-gradient(160deg, rgba(255, 214, 230, 0.14), rgba(20, 16, 30, 0.9) 40%) !important; border-color: rgba(255, 210, 228, 0.25) !important; }
}
/* phones and small tablets */
@media (max-width: 700px) {
  /* the opening: everything stacked under the moon, thumb-sized */
  .bloom__hello { top: 46%; }
  .bloom__hello-k { font-size: 1.25rem !important; margin-top: 4.2rem !important; }
  .bloom__choices { top: calc(46% + 6.5rem); gap: 0.6rem; }
  .bloom__choices .bloom__start:not(.bloom__skip2) { padding: 0.95rem 1.8rem 0.95rem 1.2rem; }
  .bloom__social { top: calc(46% + 11rem); gap: 0.4rem; flex-wrap: wrap; justify-content: center; width: 90vw; }
  .bloom__social a { width: 2.4rem; height: 2.4rem; }
  .bloom__skip { right: 0.75rem; bottom: 0.9rem; padding: 0.35rem 0.8rem 0.35rem 0.35rem; font-size: 0.62rem; }
  .bloom__skip svg { width: 1.7rem; height: 1.7rem; }
  /* the story lines: wrap freely, sit low, readable */
  .bloom__line { width: 92vw !important; padding: 1.4rem 0.8rem !important; }
  .bloom__t { white-space: normal !important; font-size: clamp(1.45rem, 6.4vw, 2rem) !important; }
  .bloom__line--low { top: 76% !important; }
  .bloom__line--low .bloom__t, .bloom__line--frame .bloom__t { font-size: clamp(1.3rem, 5.6vw, 1.8rem) !important; }
  .bloom__s { white-space: normal !important; font-size: 1rem !important; }
  /* the name at the end: below the figure, across the width */
  .bloom__name { left: 50% !important; top: 80% !important; width: 92vw !important; text-align: center !important; transform: translate(-50%, -50%) !important; }
  .bloom__name .bloom__n { font-size: 12vw !important; white-space: normal !important; }
  /* the map: the pitute card in the flow above it, the map full width */
  .latest { position: relative; left: auto; top: auto; margin: 4.4rem 1rem 0.8rem; width: auto; }
  .eqfield span { font-size: 0.8rem !important; }
  /* folder cards: one per row, open by scrolling */
  .folders__row { grid-template-columns: 1fr !important; }
  .fold { aspect-ratio: 4 / 4.2; }
  /* engagement replay: panels compact */
  .eng__hud--tr { width: 46%; padding: 0.55rem 0.6rem; }
  .eng__hud--ml { top: 2.6rem; padding: 0.55rem 0.6rem; }
  .eng__big { font-size: 1.4rem; }
  .eng__bar { grid-template-columns: 3.6rem 1fr; }
}
/* tablets in portrait */
@media (min-width: 701px) and (max-width: 1100px) {
  .bloom__line { width: 90vw !important; }
  .bloom__t { white-space: normal !important; }
  .folders__row { grid-template-columns: repeat(2, 1fr) !important; }
  .eng { grid-template-columns: 1fr; }
}
/* very short landscape screens (phones turned sideways) */
@media (max-height: 500px) and (orientation: landscape) {
  .bloom__hello { top: 40%; }
  .bloom__choices { top: calc(40% + 4.6rem); }
  .bloom__social { display: none; }
  .bloom__t { font-size: clamp(1.1rem, 3.4vw, 1.6rem) !important; }
}
/* notches and home bars */
@supports (padding: max(0px)) {
  .bloom__skip { bottom: max(0.9rem, env(safe-area-inset-bottom)); right: max(0.75rem, env(safe-area-inset-right)); }
  .site-head { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
}

/* the pitute mark in white on its folder */
.fold__obj--mark { filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(255, 255, 255, 0.45)) !important; }

/* any portrait screen: the end name sits under the figure, not beside it */
@media (orientation: portrait) {
  .bloom__name { left: 50% !important; top: 82% !important; width: 92vw !important; text-align: center !important; transform: translate(-50%, -50%) !important; }
  .bloom__name .bloom__n { font-size: 11vw !important; white-space: normal !important; }
}

/* the loader: night, a glass petal in a filling ring, the count in the name's serif */
.loader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  background: radial-gradient(60% 50% at 50% 45%, #1a1030, #07050c 75%); transition: opacity 1s ease, filter 1s ease; }
.loader.is-done { opacity: 0; filter: blur(8px); pointer-events: none; }
.loader__ring { width: 7.5rem; height: 7.5rem; transform: rotate(-90deg); overflow: visible; }
.loader__track { fill: none; stroke: rgba(255, 220, 235, 0.12); stroke-width: 2; }
.loader__fill { fill: none; stroke: url(#none); stroke: #ffc4d8; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(255, 170, 210, 0.8)); }
.loader__petal { fill: rgba(255, 205, 225, 0.85); transform: rotate(90deg); transform-origin: 60px 60px; filter: drop-shadow(0 0 14px rgba(255, 170, 210, 0.7)); animation: loaderPetal 2.4s ease-in-out infinite; }
@keyframes loaderPetal { 50% { opacity: 0.55; transform: rotate(90deg) scale(0.92); } }
.loader__pct { margin: 0; font: italic 400 clamp(2.4rem, 6vw, 3.4rem)/1 "Instrument Serif", Georgia, serif; color: #fff4f8; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.loader__k { margin: 0; font: 600 0.62rem/1 "Geist", sans-serif; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255, 220, 235, 0.6); }
@media (prefers-reduced-motion: reduce) { .loader__petal { animation: none; } }

/* nothing of the opening shows under the loader until it is ready */
html:not(.is-loaded) .bloom__hello, html:not(.is-loaded) .bloom__choices, html:not(.is-loaded) .bloom__social { opacity: 0 !important; }
.bloom__hello, .bloom__choices, .bloom__social { transition: opacity 0.9s ease; }

/* folders on phones and tablets: tall enough that the opened card shows the object, number, name and line in full */
@media (max-width: 1100px) {
  .fold { aspect-ratio: 4 / 5.2 !important; }
  .fold.is-open .fold__face, .fold:hover .fold__face { top: 56% !important; }
  .fold__obj { top: 4% !important; }
  .fold__obj--radio, .fold__obj--tv { width: 70% !important; }
  .fold__face { padding: 0.9rem 1.1rem 1.1rem !important; }
  .fold__text { font-size: 0.9rem; }
}

/* the header's frost on a layer of its own, so the menu glass inside can see the page behind it */
.site-head.is-scrolled { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.site-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
  background: rgba(10, 12, 22, 0.6); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.site-head.is-scrolled::before { opacity: 1; }
/* the Projects menu: clear glass with a light frost, bright edges, rose sheen */
@media (min-width: 901px) {
  .site-head__panel { background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 225, 238, 0.05) 40%, rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(10px) saturate(1.8) brightness(1.08) !important; -webkit-backdrop-filter: blur(10px) saturate(1.8) brightness(1.08) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(255, 190, 220, 0.18) !important; }
  .site-head__panel a b { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
  .site-head__panel a span { color: rgba(255, 240, 246, 0.82) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
}

/* the faded story section lies over the top of the map: let clicks through to it */
.bloom { pointer-events: none; }
.bloom__stick { pointer-events: auto; }
.bloom.is-ended, .bloom.is-ended * { pointer-events: none !important; }