/* Layout: a single 3D stage. Five spaces sit one behind another along the depth axis;
   scrolling flies the camera forward. HUD (logo, space rail, capybara guide) stays fixed on top. Single light theme. */
:root {
  --bg: #f6f2ea;
  --node: #ffffff;
  --node-2: #efe9de;
  --line: rgba(40, 30, 10, 0.08);
  --line-2: rgba(40, 30, 10, 0.14);
  --fg: #1d1b18;
  --muted: #6f685d;
  --yuzu: #f2a516;
  --capy: #9b6b45;
  --shadow: 0 30px 70px rgba(80, 55, 20, 0.14), 0 6px 18px rgba(80, 55, 20, 0.06);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --s: 1;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--fg); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--yuzu); outline-offset: 3px; border-radius: 8px; }
.capy-eye { fill: var(--bg); }
.capy-yuzu { fill: var(--yuzu); }

/* ---------- Stage ---------- */
.stage {
  position: fixed; inset: 0; overflow: hidden; perspective: 1000px; perspective-origin: 50% 50%;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(#fbf8f1 0%, #f4efe4 46%, #dcefe6 50%, #f4efe4 56%);
}
body.is-dragging .stage { cursor: grabbing; }
.world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.item { position: absolute; left: 0; top: 0; }

/* the river: a flat 2D layer under the 3D world (see drawWater in app.js) */
.water { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ripple { display: block; aspect-ratio: 3 / 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); opacity: 0.7; }
@keyframes twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
.decor { pointer-events: none; }
.dec { display: block; overflow: visible; }
.dec--pad { aspect-ratio: 1; }
.dec--lotus { aspect-ratio: 120 / 90; }
.dec--rock { aspect-ratio: 200 / 110; }
.dec--bloom { aspect-ratio: 1; }
.petal { fill: var(--petal, #fffaf5); }
.petal-b { fill: var(--petal-2, #f6d8dc); }

/* soft light behind each space, in its colour */
.glows { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.glow { position: absolute; left: 0; top: 0; width: 1800px; height: 1200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 10%, transparent) 55%, transparent); }

/* ---------- Start ---------- */
.hero { width: calc(600px * var(--s)); text-align: center; display: grid; justify-items: center; gap: calc(16px * var(--s)); }
.hero h1 { font-size: calc(64px * var(--s)); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.hero__lede { color: var(--muted); font-size: calc(18px * var(--s)); max-width: 44ch; }
.chip { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--node); box-shadow: 0 10px 30px rgba(80, 55, 20, 0.1); color: var(--muted); font-size: 15px; white-space: nowrap; }
.chip--yuzu { color: #8a5a00; background: #ffe7a8; }

/* ---------- Space labels ---------- */
.label { display: grid; gap: 6px; width: calc(380px * var(--s)); }
.label h2 { font-size: calc(46px * var(--s)); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.label p { color: var(--muted); font-size: calc(16px * var(--s)); }

/* ---------- Cards: the image is the card ---------- */
.card { display: block; width: calc(380px * var(--s)); text-align: left; cursor: pointer; }
.card--wide { width: calc(520px * var(--s)); }
.card__img { display: block; aspect-ratio: 4 / 3; border-radius: calc(22px * var(--s)); overflow: hidden; background: var(--node-2); border: 1px solid var(--line);
  box-shadow: var(--shadow); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.card--wide .card__img { aspect-ratio: 16 / 10; }
.card__img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.card:hover .card__img { transform: translateY(-6px); box-shadow: 0 40px 90px rgba(80, 55, 20, 0.2), 0 8px 20px rgba(80, 55, 20, 0.08); }

/* ---------- About ---------- */
.panel { width: calc(440px * var(--s)); padding: calc(28px * var(--s)); border-radius: calc(26px * var(--s)); background: var(--node); border: 1px solid var(--line); display: grid; gap: 14px; box-shadow: var(--shadow); }
.panel__capy { width: 40px; height: 40px; color: var(--capy); }
.panel__capy .capy-eye { fill: #2a1d14; }
.panel h3 { font-size: calc(24px * var(--s)); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.rows { border-top: 1px solid var(--line); }
.rows div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rows dt { color: var(--muted); }
.clip { position: relative; width: calc(300px * var(--s)); aspect-ratio: 4 / 5; border-radius: calc(22px * var(--s)); overflow: hidden; cursor: pointer; box-shadow: var(--shadow); }
.clip--dive { background: radial-gradient(60% 40% at 50% 0%, rgba(140, 220, 255, 0.55), transparent 70%), linear-gradient(#0f4e78, #06233c 70%, #031220); }
.clip--climb { width: calc(260px * var(--s)); background: radial-gradient(70% 50% at 70% 10%, rgba(255, 200, 140, 0.5), transparent 70%), linear-gradient(160deg, #a2643c, #5a3420 55%, #2a1810); }
.clip__play { position: absolute; left: 50%; top: 45%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.9); color: #111; }
.clip__play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.clip__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; display: grid; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); }
.clip__cap { color: #fff; }
.clip__cap strong { font-weight: 500; font-size: 17px; }
.clip__cap span { font-size: 12px; color: rgba(255, 255, 255, 0.7); }

/* ---------- Contact ---------- */
.contact { width: calc(640px * var(--s)); text-align: center; display: grid; justify-items: center; gap: 18px; }
.contact h2 { font-size: calc(72px * var(--s)); font-weight: 600; letter-spacing: -0.05em; line-height: 0.98; }
.contact__lede { color: var(--muted); font-size: calc(17px * var(--s)); }
.contact__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--node); box-shadow: 0 8px 24px rgba(80, 55, 20, 0.08); font-weight: 500; font-size: 15px; }
.btn em { font-style: normal; color: var(--muted); font-size: 12px; }
.btn:hover { background: #fffaf0; }
.btn--primary { background: var(--fg); color: #fff; border-color: transparent; font-weight: 600; }
.btn--primary:hover { background: var(--yuzu); color: var(--fg); }
.float-capy { width: 120px; height: 120px; color: var(--capy); opacity: 0.85; }
.float-capy .capy-eye { fill: #2a1d14; }
.status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #3cb179; box-shadow: 0 0 0 4px rgba(60, 177, 121, 0.18); }
.status--big { font-size: 14px; }

/* ---------- Foreground flowers framing the screen ---------- */
.fore { position: fixed; z-index: 15; bottom: 0; width: 0; height: 0; pointer-events: none; }
.fore--l { left: 0; }
.fore--r { right: 0; }
.fore svg { position: absolute; width: var(--w); overflow: visible; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; animation-delay: calc(-1 * var(--d, 0s)); rotate: var(--r, 0deg); will-change: transform; }
.f-leaf { aspect-ratio: 200 / 110; }
.f-lotus { aspect-ratio: 120 / 90; }
.f-bloom { aspect-ratio: 1; }
@keyframes sway { 50% { transform: rotate(2deg) translateY(-3px); } }

/* ---------- HUD ---------- */
.hud-top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left)); pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; letter-spacing: -0.03em; }
.logo svg { width: 26px; height: 26px; color: var(--fg); }

.rail { position: fixed; z-index: 20; right: max(18px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: grid; gap: 4px; }
.rail button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 6px 4px; color: var(--muted); font-size: 13px; }
.rail button::after { content: ""; order: 3; width: 8px; height: 8px; border-radius: 999px; background: rgba(40, 30, 10, 0.18); transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s; }
.rail span { opacity: 0; transform: translateX(6px); transition: opacity 0.25s, transform 0.25s var(--ease); }
.rail:hover span, .rail [aria-current="true"] span { opacity: 1; transform: none; }
.rail [aria-current="true"] { color: var(--fg); }
.rail [aria-current="true"]::after { width: 22px; background: var(--fg); }

.toast { position: fixed; z-index: 70; left: 50%; bottom: 90px; transform: translate(-50%, 10px); padding: 9px 14px; border-radius: 999px; background: var(--fg); color: #fff; font-size: 13px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Project modal: centred on desktop, bottom sheet on phones ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(40, 30, 15, 0.35); opacity: 0; transition: opacity 0.25s ease-out; }
.scrim.is-open { opacity: 1; }
.sheet {
  --paper: #ffffff; --ink: #121212; --ink-2: #6b6863;
  position: fixed; z-index: 61; left: 50%; top: 50%; width: min(720px, calc(100vw - 48px)); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 32px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(60, 40, 10, 0.25);
  transform: translate(-50%, -50%); opacity: 0; translate: 0 24px; scale: 0.98;
  transition: opacity 0.3s ease-out, translate 0.35s var(--ease), scale 0.35s var(--ease);
}
.sheet.is-open { opacity: 1; translate: 0 0; scale: 1; }
.sheet__grab { display: none; }
.sheet__scroll { overflow-y: auto; overscroll-behavior: contain; transition: opacity 0.16s, translate 0.16s; }
.sheet__scroll.is-swapping { opacity: 0; translate: 0 8px; }
.sheet__media { position: relative; margin: 10px 10px 0; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #e4e1db; }
.sheet__media img, .sheet__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sheet__body { display: grid; gap: 12px; padding: 24px 32px 8px; }
.sheet__role { color: var(--ink-2); font-size: 14px; }
.sheet h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.sheet__desc { color: var(--ink-2); font-size: 17px; }
.sheet__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.sheet__tags li { padding: 7px 14px; border-radius: 999px; background: #e7e4de; font-size: 13px; }
.sheet__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 32px 28px; }
.sheet__btn { padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; background: #e7e4de; color: var(--ink); transition: background 0.2s; }
.sheet__btn:hover { background: #dcd8d1; }
.sheet__btn--primary { background: var(--ink); color: #fff; }
.sheet__btn--primary:hover { background: #2c2c2c; }
.sheet__close { position: absolute; z-index: 2; top: 22px; right: 22px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(244, 242, 238, 0.92); color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
.sheet__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---------- Phones ---------- */
@media (max-width: 719px) {
  .card { width: calc(350px * var(--s)); }
  .card.card--wide { width: calc(420px * var(--s)); }
  .rail { right: max(10px, env(safe-area-inset-right)); gap: 0; }
  .rail button { padding: 5px 4px; }
  .rail span { display: none; }
  .rail button::after { width: 6px; height: 6px; }
  .rail [aria-current="true"]::after { width: 6px; height: 18px; }
  .fore--l { transform: scale(0.5); transform-origin: 0 100%; }
  .fore--r { transform: scale(0.55); transform-origin: 100% 100%; }
  .chip { font-size: 13px; }
  .contact { width: calc(100vw - 40px); }
  .contact h2 { font-size: 44px; }
  .label h2 { font-size: 34px; }
  .label { width: calc(100vw - 48px); }
  .panel { width: calc(100vw - 48px); padding: 20px; gap: 10px; }
  .panel__capy { display: none; }
  .rows div { grid-template-columns: 96px 1fr; font-size: 13px; padding: 9px 0; }
  .clip { width: calc(210px * var(--s)); }
  .clip--climb { width: calc(190px * var(--s)); }
  .sheet {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 92vh; border-radius: 28px 28px 0 0;
    transform: none; translate: 0 100%; scale: 1; opacity: 1;
    transition: translate 0.38s var(--ease), transform 0.25s ease-out; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sheet.is-open { translate: 0 0; }
  .sheet.is-dragging { transition: none; }
  .sheet__grab { display: block; position: absolute; z-index: 3; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(0, 0, 0, 0.25); }
  .sheet__media { margin: 22px 10px 0; aspect-ratio: 4 / 3; border-radius: 20px; touch-action: none; }
  .sheet__close { top: 32px; right: 20px; width: 36px; height: 36px; }
  .sheet__body { padding: 20px 20px 4px; }
  .sheet__foot { padding: 14px 20px 20px; }
  .sheet__btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .scrim, .sheet__scroll, .card__img { transition: none !important; }
}
[hidden] { display: none !important; }

/* ---------- Painted river extras ---------- */
.hero__how { margin-top: calc(10px * var(--s)); color: var(--muted); font-size: calc(14px * var(--s)); }
/* soft paper grain over everything, for a painted feel */
.grain { position: fixed; inset: 0; z-index: 16; pointer-events: none; opacity: 0.12; background-size: 220px 220px; }
.water polygon { stroke-linejoin: round; }

/* capybaras */
.cap { position: relative; }
.cap svg { display: block; width: 100%; aspect-ratio: 160 / 104; }
.cap--flip svg { transform: scaleX(-1); }
.cap .cap-yuzu-g { display: none; }
.cap--yuzu .cap-yuzu-g { display: inline; }
/* bathing: the lower part sits under the water line, with a slow ripple ring */
.cap--swim { overflow: hidden; aspect-ratio: 160 / 66; }
.cap--swim svg { animation: soak 3.4s ease-in-out infinite; }
@keyframes soak { 50% { transform: translateY(3px); } }
.cap--swim.cap--flip svg { animation-name: soak-flip; }
@keyframes soak-flip { from, to { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(3px); } }
.cap--swim::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 14%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: rgba(232, 247, 241, 0.75); }
.cap__ring { position: absolute; left: -6%; right: -6%; bottom: -10%; height: 26%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.7); animation: ring 3s ease-out infinite; }
@keyframes ring { from { transform: scale(0.75); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }

/* cards sit inside clear water droplets resting on the river. The droplet skin is its own layer (.drop) so it can pop. */
.card { position: relative; padding: 13% 16%; width: calc(460px * var(--s)); animation: float 6s ease-in-out infinite; will-change: translate; }
.card--wide { width: calc(620px * var(--s)); }
.card:nth-of-type(2n) { animation-delay: -2s; }
@keyframes float { 50% { translate: 0 calc(-10px * var(--s)); } }
.drop { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  background: radial-gradient(120% 90% at 28% 18%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06) 42%, rgba(170, 232, 222, 0.1) 72%, rgba(255, 255, 255, 0.4) 100%);
  box-shadow:
    inset 0 3px 3px rgba(255, 255, 255, 0.95), inset 0 0 0 2px rgba(255, 255, 255, 0.75), inset 0 -3px 6px rgba(255, 255, 255, 0.6),
    inset 14px 18px 36px rgba(255, 255, 255, 0.4), inset -10px -16px 30px rgba(90, 190, 180, 0.25); }
/* behind the image: a faint tint and the drop's outer shadow */
.card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; pointer-events: none;
  background: rgba(200, 240, 232, 0.18); box-shadow: 0 26px 44px rgba(30, 110, 100, 0.2); transition: opacity 0.2s; }
.card .card__img { position: relative; z-index: 1; }
/* the droplet's shine */
.drop::after { content: ""; position: absolute; left: 9%; top: 7%; width: 30%; height: 14%; border-radius: 50%;
  border-top: calc(5px * var(--s)) solid rgba(255, 255, 255, 0.9); transform: rotate(-14deg); }
/* jelly finish on the image */
.card .card__img { border: 0; border-radius: calc(26px * var(--s)); box-shadow: 0 6px 16px rgba(30, 90, 90, 0.18); }
.card .card__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), inset 0 10px 18px rgba(255, 255, 255, 0.35), inset 0 -12px 20px rgba(0, 40, 50, 0.18);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 26%); }
.card:hover .card__img { transform: none; }
.card:hover .drop { transform: scale(1.02); }
.drop { transition: transform 0.4s var(--ease); }
/* its shadow on the water */
.card::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: calc(-60px * var(--s)); height: calc(24px * var(--s)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 110, 120, 0.26), rgba(10, 110, 120, 0)); }
.panel { background: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.9); }

/* headings in Fraunces: a soft, warm serif */
.hero h1, .label h2, .panel h3, .contact h2, .sheet h2 { font-family: var(--serif); font-weight: 560; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "WONK" 0; }
.hero h1 { font-size: calc(70px * var(--s)); }

/* ---------- Zoomed case study ---------- */
body.is-zoomed .stage { cursor: default; }
body.is-zoomed .rail, body.is-zoomed .fore { opacity: 0; pointer-events: none; }
.rail, .fore { transition: opacity 0.4s; }
body.is-zoomed .card { animation-play-state: paused; }
.card__img { position: relative; }
.card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the story floats over the scene, one part at a time, with a soft mist behind it instead of a box */
.story { position: fixed; z-index: 30; right: max(5vw, 32px); top: 50%; width: min(440px, 36vw); height: min(520px, 70vh); transform: translateY(-50%); pointer-events: none; }
.story::before { content: ""; position: absolute; inset: -30% -40% -30% -30%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(250, 247, 240, 0.92), rgba(250, 247, 240, 0.75) 55%, rgba(250, 247, 240, 0)); opacity: 0; transition: opacity 0.5s; }
.story.is-open::before { opacity: 1; }
.story__steps { position: relative; height: 100%; }
.story__step { position: absolute; left: 0; right: 0; top: 50%; display: grid; gap: 12px; pointer-events: none;
  opacity: 0; transform: translateY(calc(-50% + 40px)); transition: opacity 0.45s ease-out, transform 0.6s var(--ease); }
.story__step.is-past { transform: translateY(calc(-50% - 40px)); }
.story.is-open .story__step.is-on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.story__role { color: var(--muted); font-size: 14px; }
.story h2 { font-family: var(--serif); font-weight: 560; font-variation-settings: "SOFT" 100; font-size: clamp(36px, 3.6vw, 54px); letter-spacing: -0.02em; line-height: 1.02; }
.story__lede { font-size: 19px; }
.story__hint { margin-top: 14px; font-size: 13px; color: var(--muted); }
.story__hint::before { content: "↓ "; }
.story h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #a26a2c; }
.story__big { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; letter-spacing: -0.01em; }
.story ul:not(.story__tags) { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: did; }
.story ul:not(.story__tags) li { counter-increment: did; display: grid; grid-template-columns: 30px 1fr; font-size: 17px; line-height: 1.45; }
.story ul:not(.story__tags) li::before { content: counter(did); font-family: var(--serif); font-size: 20px; color: #a26a2c; line-height: 1.2; }
.story__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 6px 0 0; padding: 0; }
.story__tags li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); font-size: 12.5px; }
.story__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.story__btn { padding: 12px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; background: rgba(255, 255, 255, 0.85); color: var(--fg); box-shadow: 0 6px 18px rgba(80, 55, 20, 0.1); }
.story__btn--primary { background: var(--fg); color: #fff; }
.story__dots { position: absolute; left: -28px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; pointer-events: auto; opacity: 0; transition: opacity 0.4s; }
.story.is-open .story__dots { opacity: 1; }
.story__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(40, 30, 10, 0.2); cursor: pointer; transition: height 0.3s var(--ease), background 0.3s; }
.story__dots i.is-on { height: 20px; background: var(--fg); }
.story__close { position: fixed; z-index: 31; top: 64px; right: max(22px, env(safe-area-inset-right)); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.85); color: var(--fg); box-shadow: 0 6px 18px rgba(80, 55, 20, 0.12); pointer-events: auto; opacity: 0; transition: opacity 0.3s; }
.story.is-open .story__close { opacity: 1; }
.story__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* the pop: the skin squashes, swells and bursts; a ring and spray fly out; the image is freed */
.card.is-popping .drop { animation: drop-pop 0.42s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
@keyframes drop-pop {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(0.94, 1.05); opacity: 1; }
  55% { transform: scale(1.08); opacity: 1; filter: brightness(1.3); }
  100% { transform: scale(1.32); opacity: 0; } }
.card.is-popped .drop { opacity: 0; transform: scale(1.32); }
.card.is-popped::before, .card.is-popped::after { opacity: 0; }
.card::after { transition: opacity 0.3s; }
.card.is-popped { animation: none; }
.card.is-reforming .drop { animation: drop-in 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes drop-in { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.card.is-popped .card__img { border-radius: calc(14px * var(--s)); box-shadow: 0 24px 60px rgba(30, 60, 50, 0.25); }
.card.is-popped .card__img::after { opacity: 0; }
.card .card__img, .card .card__img::after { transition: border-radius 0.5s var(--ease), box-shadow 0.5s, opacity 0.4s; }
.card.is-popping .card__img { animation: freed 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes freed { 0% { transform: scale(1); } 40% { transform: scale(0.97); } 100% { transform: scale(1); } }
.splash { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.splash b { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1.3; translate: -50% -50%; border-radius: 50%;
  border: calc(3px * var(--s)) solid rgba(255, 255, 255, 0.85); animation: ringout 0.55s ease-out 0.12s both; }
@keyframes ringout { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.splash i { position: absolute; left: var(--sx); top: var(--sy); width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(225, 248, 244, 0.85) 45%, rgba(150, 215, 205, 0.5));
  box-shadow: 0 2px 4px rgba(30, 110, 100, 0.2); animation: spray 0.8s cubic-bezier(0.2, 0.7, 0.4, 1) 0.12s both; }
@keyframes spray {
  0% { transform: translate(0, 0) scale(0.3); opacity: 0; }
  10% { opacity: 1; }
  60% { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--x) * 1.2), calc(var(--y) + var(--fall))) scale(0.7); opacity: 0; } }
body.is-zoomed .card:not(.is-popped) { pointer-events: none; }

/* petals floating downstream */
.petal-f { display: block; aspect-ratio: 1.6; border-radius: 60% 40% 60% 40% / 70% 50% 50% 30%; opacity: 0.95; }

/* sound toggle */
.hud-right { display: flex; align-items: center; gap: 14px; }
.sound { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 13px; color: var(--muted); }
.sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sound .spk { fill: currentColor; stroke: none; }
.sound .wave { display: none; }
.sound[aria-pressed="true"] { color: var(--fg); }
.sound[aria-pressed="true"] .wave { display: inline; }
.sound[aria-pressed="true"] .mute { display: none; }

@media (max-width: 719px) {
  .story { left: 22px; right: 22px; top: auto; bottom: max(26px, env(safe-area-inset-bottom)); width: auto; height: 46vh; transform: none; }
  .story::before { inset: -20% -30% -10%; }
  .story h2 { font-size: 34px; }
  .story__lede { font-size: 16px; }
  .story__big { font-size: 20px; }
  .story ul:not(.story__tags) li { font-size: 15px; }
  .story__dots { left: auto; right: -14px; }
  .story__btn { flex: 1; }
  .status { display: none; }
}
@media (prefers-reduced-motion: reduce) { .story__step, .story::before { transition: none; } }
.card.is-popped:focus-visible { outline: none; }

/* little notes tucked off-screen, to reward dragging */
.note { width: calc(250px * var(--s)); padding: calc(16px * var(--s)) calc(18px * var(--s)); border-radius: calc(20px * var(--s)); background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px rgba(80, 55, 20, 0.14); display: grid; grid-template-columns: calc(56px * var(--s)) 1fr; gap: calc(12px * var(--s)); align-items: center; }
.note svg { width: 100%; aspect-ratio: 160 / 104; }
.note .cap-yuzu-g { display: inline; }
.note p { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-size: calc(17px * var(--s)); line-height: 1.3; }
@media (max-width: 719px) { .note { width: 200px; grid-template-columns: 44px 1fr; padding: 12px 14px; } .note p { font-size: 14px; } }

/* ---------- Signs ---------- */
.dec--sign { aspect-ratio: 240 / 180; filter: none; }

/* ---------- Lab: how I work, as a workflow on the water ---------- */
.flow { position: relative; }
.flow__in { position: absolute; left: 0; top: 0; transform: scale(var(--s)); transform-origin: 0 0; }
.flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stream { fill: none; stroke: #9edbd0; stroke-width: 12; stroke-linecap: round; opacity: 0.9; }
.stream--y { stroke: #9fd8a4; }
.stream--n { stroke: #f4b1a4; }
.stream__glint { fill: none; stroke: #f3fffb; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 26; animation: flowdash 1.6s linear infinite; }
.stream__glint--y { stroke: #f0fff0; }
.stream__glint--n { stroke: #fff3ef; }
@keyframes flowdash { to { stroke-dashoffset: -36; } }
.bport { fill: #fffaf1; stroke: #e88e7c; stroke-width: 3; }

.node { position: absolute; display: flex; flex-direction: column; gap: 6px; padding: 8px; text-align: left; border-radius: 20px; background: #fffaf1;
  box-shadow: 0 22px 50px rgba(80, 55, 20, 0.13), 0 3px 10px rgba(80, 55, 20, 0.06); transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); cursor: pointer; }
.node:hover { transform: translateY(-3px); }
.node:focus-visible { outline: 3px solid var(--yuzu); outline-offset: 3px; }
.node__head { display: flex; align-items: center; gap: 9px; padding: 8px 8px 6px; }
.node__head i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: #f6e7cc; color: #a26a2c; font-style: normal; font-size: 13px; font-weight: 700; }
.node__head strong { flex: 1; font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 560; font-size: 19px; letter-spacing: -0.01em; }
.node__head em { font-style: normal; font-size: 11px; color: var(--muted); padding: 3px 8px; border-radius: 999px; background: #f3ece0; }
.node__box { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 14px; background: #f4ede1; }
.nrow { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.nrow span { color: var(--muted); white-space: nowrap; }
.nrow b { font-weight: 500; text-align: right; }
.nrow--y b { color: #3f9a55; } .nrow--n b { color: #d0644f; }
.nlast { font-size: 12px; color: var(--muted); }
.port { position: absolute; top: 40px; width: 13px; height: 13px; border-radius: 50%; background: #fffaf1; border: 3px solid #5fbfae; }
.port--in { left: -7px; } .port--out { right: -7px; }
.port--y { border-color: #59b46c; } .port--n { right: -7px; border-color: #e88e7c; }
.node.is-lit { box-shadow: 0 0 0 3px #ffd36b, 0 22px 50px rgba(80, 55, 20, 0.16); }
.node.is-no { box-shadow: 0 0 0 3px #f09a88, 0 22px 50px rgba(80, 55, 20, 0.16); }
.node.is-yes { box-shadow: 0 0 0 3px #7fcf8c, 0 22px 50px rgba(80, 55, 20, 0.16); }
.node.is-open { box-shadow: 0 0 0 3px var(--yuzu), 0 30px 70px rgba(80, 55, 20, 0.2); }

.flow__run { position: absolute; display: flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #1d1b18; color: #fffaf1;
  font-size: 14px; font-weight: 600; box-shadow: 0 8px 20px rgba(40, 25, 5, 0.2); transition: transform 0.2s var(--ease); }
.flow__run svg { width: 15px; height: 15px; fill: currentColor; }
.flow__run:hover { transform: scale(1.05); }
.flow__run.is-running { background: #a26a2c; }
.flow__capy { position: absolute; left: 0; top: 0; width: 86px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.flow__capy svg { width: 100%; aspect-ratio: 160 / 104; display: block; }
.flow__in.is-running .flow__capy { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stream__glint { animation: none; } }
.flow__capy .cap-yuzu-g { display: inline; }
.flow__bar { position: absolute; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.flow__bar .flow__run { position: static; }
.flow__tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #c9945e; box-shadow: inset 0 0 0 2px #8a5f38, 0 8px 20px rgba(80, 55, 20, 0.15); }
.flow__tabs button { padding: 6px 14px; border-radius: 999px; font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 15px; color: #fff8ee; transition: background 0.2s, color 0.2s; }
.flow__tabs button[aria-selected="true"] { background: #fff8ee; color: #6e4a28; }
.flow__tabs button:focus-visible { outline: 3px solid var(--yuzu); outline-offset: 2px; }
.flow__note { font-size: 14px; color: var(--muted); }
.flow__in .node, .flow__in .flow__lines { transition: opacity 0.38s var(--ease), transform 0.38s var(--ease); }
.flow__in.is-sinking .node { opacity: 0; transform: translateY(40px) scale(0.96); }
.flow__in.is-sinking .flow__lines { opacity: 0; }

/* ---------- One card style for case studies and workflow steps ---------- */
.card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: calc(8px * var(--s)); width: calc(460px * var(--s)); border-radius: calc(22px * var(--s)); background: #fffaf1; text-align: left;
  box-shadow: 0 22px 50px rgba(80, 55, 20, 0.13), 0 3px 10px rgba(80, 55, 20, 0.06); animation: none; transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); }
.card--wide, .card.card--wide { width: calc(520px * var(--s)); }
.card.card--trio { width: calc(395px * var(--s)); }
.card .drop, .card::before, .card::after { display: none; }
.card .node__head { padding: calc(8px * var(--s)) calc(8px * var(--s)) calc(4px * var(--s)); gap: calc(9px * var(--s)); }
.card .node__head i { width: calc(26px * var(--s)); height: calc(26px * var(--s)); border-radius: calc(9px * var(--s)); font-size: calc(13px * var(--s)); }
.card .node__head strong { font-size: calc(21px * var(--s)); }
.card .node__head em { font-size: calc(11px * var(--s)); padding: calc(3px * var(--s)) calc(8px * var(--s)); }
.card .card__img, .card.is-popped .card__img { border-radius: calc(14px * var(--s)); box-shadow: none; border: 0; }
.card .card__img::after { display: none; }
.card .node__box { padding: calc(10px * var(--s)) calc(12px * var(--s)); gap: calc(7px * var(--s)); border-radius: calc(14px * var(--s)); }
.card .nrow { font-size: calc(13.5px * var(--s)); }
.cta { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 7px; font-size: 14px; font-weight: 600; color: #a26a2c; }
.card .cta { padding: calc(9px * var(--s)) calc(12px * var(--s)) calc(7px * var(--s)); font-size: calc(14px * var(--s)); }
.cta i { font-style: normal; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #f6e7cc; transition: transform 0.3s var(--ease), background 0.3s; }
.card:hover, .node:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--yuzu), 0 30px 64px rgba(80, 55, 20, 0.18); }
.card:hover .cta i, .node:hover .cta i { transform: translateX(4px); background: var(--yuzu); color: #fff; }
.card.is-popped { transform: none; box-shadow: 0 0 0 3px var(--yuzu), 0 30px 70px rgba(80, 55, 20, 0.2); }
.card.is-popping .card__img { animation: none; }
.card.is-popping, .node.is-tapped { animation: tap 0.42s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes tap { 40% { transform: scale(0.96); } 100% { transform: scale(1); } }
.card.is-hinting { animation: hintpulse 1.4s ease-in-out 2; }
@keyframes hintpulse { 50% { box-shadow: 0 0 0 6px rgba(242, 165, 22, 0.45), 0 22px 50px rgba(80, 55, 20, 0.13); } }
.hint { position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%); display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: #1d1b18; color: #fffaf1; font-size: 13px; white-space: nowrap; animation: hintin 0.4s var(--ease) both; pointer-events: none; }
.hint svg { width: 38px; aspect-ratio: 160 / 104; }
.hint b { font-weight: 600; }
@keyframes hintin { from { opacity: 0; transform: translate(-50%, -90%); } }
@media (prefers-reduced-motion: reduce) { .card.is-hinting, .card.is-popping, .node.is-tapped { animation: none; } }

/* ---------- Icons: one set (Lucide), drawn with the text colour ---------- */
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.125em; }
.node__head i .ic { width: 15px; height: 15px; }
.card .node__head i .ic { width: calc(15px * var(--s)); height: calc(15px * var(--s)); }
.cta i .ic { width: 0.95em; height: 0.95em; }
.sound .ic { width: 17px; height: 17px; stroke-width: 1.8; }
.sound .ic--on { display: none; }
.sound[aria-pressed="true"] .ic--on { display: inline; }
.sound[aria-pressed="true"] .ic--off { display: none; }
.story__close .ic { width: 18px; height: 18px; }
.clip__play .ic { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.btn .ic, .story__btn .ic { width: 1em; height: 1em; margin-left: 4px; }
.card__out { display: block; padding: calc(12px * var(--s)) calc(12px * var(--s)) calc(2px * var(--s)); font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 560;
  font-size: calc(21px * var(--s)); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); }
.card__out small { display: block; margin-bottom: calc(4px * var(--s)); font-family: var(--sans); font-weight: 600; font-size: calc(11px * var(--s)); letter-spacing: 0.06em; text-transform: uppercase; color: #a26a2c; }
.card__video { pointer-events: none; background: transparent; }

/* ---------- Case study boards ---------- */
.cs { pointer-events: none; }
.cs__board { position: relative; }
.cs__in { position: absolute; left: 0; top: 0; transform: scale(var(--s)); transform-origin: 0 0; }
.cs__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cs__stop { position: absolute; transform: translate(-50%, -50%); width: 400px; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; border-radius: 22px;
  background: #fffaf1; box-shadow: 0 22px 50px rgba(80, 55, 20, 0.13), 0 3px 10px rgba(80, 55, 20, 0.06); pointer-events: auto; cursor: pointer;
  transition: box-shadow 0.35s var(--ease); }
.cs__stop--img { width: 500px; }
.cs__stop.is-here { box-shadow: 0 0 0 3px var(--yuzu), 0 30px 70px rgba(80, 55, 20, 0.18); cursor: default; }
.cs__kind { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #a26a2c; }
.cs__kind i { font-style: normal; color: var(--muted); letter-spacing: 0; }
.cs__stop h3 { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 560; font-size: 28px; line-height: 1.12; letter-spacing: -0.015em; }
.cs__stop p { font-size: 16px; line-height: 1.5; color: #4a443b; }
.cs__stat { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 104px; line-height: 0.9; letter-spacing: -0.04em; color: #a26a2c; }
.cs__stop--stat h3 { margin-top: -4px; }
.cs__img { display: block; aspect-ratio: 16 / 10; border-radius: 14px; background-color: #2a2833; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.cs__stop--wide { width: 640px; }
.cs__shots { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cs__shots--2 { grid-template-columns: 1fr 1fr; }
.cs__shots--3 { grid-template-columns: 1fr 1fr 1fr; }
.cs__shots figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #2a2833; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.cs__shots img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.cs__shots figcaption { position: absolute; left: 8px; top: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 250, 241, 0.94); color: #1d1b18; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.cs__shots--2 figure + figure figcaption { background: var(--yuzu); }
.cs__flow { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: #f4ede1; }
.cs__flowrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.cs__flowrow em { width: 52px; font-style: normal; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cs__flowrow b { padding: 5px 10px; border-radius: 999px; background: #fff; font-weight: 500; box-shadow: 0 1px 3px rgba(80, 55, 20, 0.1); }
.cs__flowrow .ic { color: var(--muted); }
.cs__flowrow--after b { background: #fff3d6; box-shadow: 0 0 0 1.5px var(--yuzu); }
.cs__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs__chips b { padding: 5px 11px; border-radius: 999px; background: #f4ede1; font-size: 13px; font-weight: 500; }
.cs__end { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cs__btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 999px; background: #efe6d6; font-weight: 600; font-size: 14px; }
.cs__btn--primary { background: var(--fg); color: #fffaf1; }
.cs__stop .port { top: 50%; margin-top: -7px; }
.cs--down .cs__stop .port--in { left: 50%; top: -7px; margin: 0 0 0 -7px; }
.cs--down .cs__stop .port--out { left: 50%; right: auto; top: auto; bottom: -7px; margin: 0 0 0 -7px; }
.cs--down .cs__stop, .cs--down .cs__stop--img, .cs--down .cs__stop--wide { width: 500px; }

.hud { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px;
  background: rgba(29, 27, 24, 0.92); color: #fffaf1; box-shadow: 0 12px 30px rgba(40, 25, 5, 0.25); font-size: 14px; white-space: nowrap; }
.hud[hidden] { display: none; }
.hud button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: inherit; }
.hud button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.hud button:disabled { opacity: 0.3; cursor: default; }
.hud .ic { width: 18px; height: 18px; }
.hud__count { font-variant-numeric: tabular-nums; font-weight: 600; padding: 0 4px; }
.hud__label { color: rgba(255, 250, 241, 0.7); padding-right: 6px; }
.hud__close { margin-left: 4px; background: rgba(255, 255, 255, 0.1); }

/* screenshots: a corner hint, then a full-screen viewer */
.cs__zoom { position: absolute; right: 8px; top: 8px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(29, 27, 24, 0.7); color: #fffaf1; opacity: 0; transform: scale(0.85); transition: opacity 0.2s, transform 0.2s var(--ease); }
.cs__zoom .ic { width: 14px; height: 14px; }
.cs__stop.is-here .cs__shots figure { cursor: zoom-in; }
.cs__stop.is-here .cs__zoom { opacity: 1; transform: none; }
.cs__stop.is-here .cs__shots figure:hover img { transform: scale(1.03); }
.cs__shots img { transition: transform 0.35s var(--ease); }
.lb { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 64px 84px; background: rgba(24, 20, 14, 0.9); opacity: 0; transition: opacity 0.22s ease-out; touch-action: none; }
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__fig { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.lb__fig img, .lb__fig video { max-width: min(1400px, calc(100vw - 168px)); max-height: calc(100vh - 150px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transform: scale(0.97); transition: transform 0.25s var(--ease); user-select: none; -webkit-user-drag: none; }
.lb.is-open .lb__fig img, .lb.is-open .lb__fig video { transform: none; }
.lb__fig video { background: #000; }
.lb__fig [hidden] { display: none; }
.lb__fig figcaption { color: #fffaf1; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; }
.lb__btn { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 250, 241, 0.12); color: #fffaf1; }
.lb__btn:hover { background: rgba(255, 250, 241, 0.24); }
.lb__btn:focus-visible { outline: 2px solid var(--yuzu); outline-offset: 2px; }
.lb__btn--prev { left: 20px; top: 50%; margin-top: -22px; }
.lb__btn--next { right: 20px; top: 50%; margin-top: -22px; }
.lb__close { right: 20px; top: 20px; }
.lb--single .lb__btn--prev, .lb--single .lb__btn--next { display: none; }
@media (max-width: 719px) {
  .lb { padding: 64px 12px 90px; }
  .lb__fig img, .lb__fig video { max-width: calc(100vw - 24px); max-height: calc(100vh - 180px); }
  .lb__btn--prev, .lb__btn--next { top: auto; bottom: 24px; margin-top: 0; }
  .lb__btn--prev { left: calc(50% - 56px); } .lb__btn--next { right: calc(50% - 56px); }
}
@media (prefers-reduced-motion: reduce) { .lb, .lb__fig img, .cs__shots img, .cs__zoom { transition: none; } }

/* freediving reel in About */
.clip--reel { display: block; padding: 0; text-align: left; }
.clip--reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__dots { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 4px; }
.reel__dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.reel__dots i.on { background: #fff; }
.clip--reel:hover { transform: translateY(-3px); }
.clip--reel { transition: transform 0.3s var(--ease); }

/* About: what I do outside UX, with freediving clips around it */
.outside { width: calc(520px * var(--s)); text-align: center; display: grid; justify-items: center; gap: calc(14px * var(--s)); }
.outside h3 { font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 560; font-size: calc(46px * var(--s)); line-height: 1.04; letter-spacing: -0.025em; }
.outside p { color: var(--muted); font-size: calc(18px * var(--s)); max-width: 34ch; }
.outside .outside__hint { font-size: calc(13px * var(--s)); }
.clip--tile { display: block; padding: 0; width: calc(220px * var(--s)); aspect-ratio: 4 / 5; background: #06233c; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.clip--tile.clip--wide { width: calc(330px * var(--s)); aspect-ratio: 16 / 10; }
.clip--tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.clip--tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--yuzu), var(--shadow); }
.clip--tile:focus-visible { outline: 3px solid var(--yuzu); outline-offset: 3px; }
@media (max-width: 719px) {
  .outside { width: calc(100vw - 80px); padding: 18px 16px; border-radius: 22px; background: rgba(255, 250, 241, 0.86); box-shadow: 0 14px 34px rgba(80, 55, 20, 0.1); }
  .outside h3 { font-size: 30px; }
  .outside p { font-size: 15px; }
  .outside .outside__hint { font-size: 12px; }
  .clip--tile { width: calc(220px * var(--s)); }
  .clip--tile.clip--wide { width: calc(300px * var(--s)); }
}

/* Contact form */
.hi { width: 100%; max-width: 520px; display: grid; gap: 10px; margin-top: 6px; text-align: left; }
.hi__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hi label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.hi input, .hi textarea { font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--fg); padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 250, 241, 0.92); resize: none; box-shadow: 0 6px 18px rgba(80, 55, 20, 0.06); }
.hi input:focus, .hi textarea:focus { outline: none; border-color: var(--yuzu); box-shadow: 0 0 0 3px rgba(242, 165, 22, 0.25); }
.hi [aria-invalid="true"] { border-color: #c4572f; }
.hi__err { justify-self: start; color: #a3401c; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 10px; background: rgba(255, 240, 232, 0.95); }
.hi__err[hidden] { display: none; }
.hi__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.hi__wa { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.hi__wa:hover { color: var(--fg); }
.hi__wa .ic { width: 14px; height: 14px; }
@media (max-width: 719px) { .contact { padding: 22px 18px; border-radius: 24px; background: rgba(255, 250, 241, 0.9); box-shadow: 0 18px 40px rgba(80, 55, 20, 0.12); gap: 12px; } .contact h2 { font-size: 36px; } .hi__row { grid-template-columns: 1fr; } .hi { gap: 8px; } .hi textarea { min-height: 76px; } }

/* ---------- Opening: the river paints itself in ---------- */
.is-intro #hills path { animation: intro-hill 0.9s var(--ease) both; }
.is-intro #hills path:nth-child(2) { animation-delay: 0.12s; }
.is-intro #hills path:nth-child(3) { animation-delay: 0.24s; }
.is-intro .item.decor > * { animation: intro-pop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) var(--id, 1s) both; transform-origin: 50% 100%; }
.is-intro .item.decor > .cap { animation: intro-plop 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) var(--id, 1.4s) both; }
.is-intro .item.decor > .petal-f { animation: none; }
.is-intro .glows { animation: intro-fade 1.2s ease-out 0.2s both; }
.is-intro .fore--l { animation: intro-rise 0.8s cubic-bezier(0.3, 1.3, 0.5, 1) 1.55s both; }
.is-intro .fore--r { animation: intro-rise 0.8s cubic-bezier(0.3, 1.3, 0.5, 1) 1.7s both; }
.is-intro .hero > * { animation: intro-up 0.7s var(--ease) both; }
.is-intro .hero > :nth-child(1) { animation-delay: 1.9s; }
.is-intro .hero > :nth-child(2) { animation-delay: 2.1s; }
.is-intro .hero > :nth-child(3) { animation-delay: 2.3s; }
.is-intro .hud-top, .is-intro .rail { animation: intro-fade 0.6s ease-out 2.3s both; }
@keyframes intro-hill { from { transform: translateY(70px); opacity: 0; } }
@keyframes intro-pop { 0% { scale: 0; opacity: 0; } 40% { opacity: 1; } 100% { scale: 1; } }
@keyframes intro-plop { 0% { translate: 0 -70px; opacity: 0; } 30% { opacity: 1; } 60% { translate: 0 6px; } 100% { translate: 0 0; } }
@keyframes intro-rise { from { translate: 0 340px; } }
@keyframes intro-up { from { opacity: 0; translate: 0 14px; } }
@keyframes intro-fade { from { opacity: 0; } }

/* capybara looks */
.cap__z { animation: snooze 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 100%; }
.cap__z--2 { animation-delay: 0.7s; }
@keyframes snooze { 0%, 100% { opacity: 0.2; transform: translate(0, 2px) scale(0.85); } 50% { opacity: 1; transform: translate(2px, -2px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .cap__z { animation: none; } }

/* work-in-progress sign on the home bank */
.wip { position: relative; }
.wip__capy { position: absolute; right: calc(-34px * var(--s)); bottom: calc(-4px * var(--s)); }

/* tappable capybaras: a little hop when they squeak or snore */
.decor .cap { pointer-events: auto; cursor: pointer; }
.decor .cap.wip__capy, .note .cap { cursor: inherit; }
.cap.is-squeak svg { animation: capy-hop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.cap--flip.is-squeak svg { animation-name: capy-hop-flip; }
@keyframes capy-hop { 40% { transform: translateY(-12%) scale(1.04); } }
@keyframes capy-hop-flip { 0%, 100% { transform: scaleX(-1); } 40% { transform: scaleX(-1) translateY(-12%) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .cap.is-squeak svg { animation: none; } }

/* contact form: hidden spam trap and the thank-you line */
.hi__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hi__ok { justify-self: start; color: #1f6447; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 12px; background: rgba(230, 246, 236, 0.95); box-shadow: 0 6px 18px rgba(80, 55, 20, 0.08); }
.hi__ok[hidden] { display: none; }
.hi__err a { color: inherit; text-decoration: underline; }
.hi button[disabled] { opacity: 0.7; cursor: progress; }