/* =========================================================================
   Antara Paul — portfolio
   Replicated from Figma "MacBook Pro 14" - 21" (node 687:54), 1512 x 3584.
   Artwork is laid out in design pixels inside [data-fit] stages that are
   scaled to the available width (see assets/js/main.js).
   ========================================================================= */

:root {
  --cream:      #F2E8D3;
  --gold:       #FFB41B;
  --orange:     #F07C24;
  --red:        #E03F21;
  --crimson:    #A8143C;
  --ink-60:     rgba(0, 0, 0, 0.6);
  --font-heading: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;

  --pad-x:      clamp(20px, 4.63vw, 76px);   /* 70px @ 1512 */
  --nav-size:   clamp(13px, 1.323vw, 22px);  /* 20px @ 1512 */
}

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

/* No rubber-band overscroll: the body's cream propagates to the scroll canvas,
   so bouncing past the footer would flash cream under the red. */
html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  position: relative;
  margin: 0;
  background: var(--cream);
  color: #1a1a1a;
  font-family: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  overflow-x: hidden;
}

img { display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- surfaces */

.page-texture,
.page-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The motif tile is two staggered, overlapping columns of the Figma motif,
   so it repeats exactly as the 8-column pattern frame does. It scales with
   the page so it keeps its size relative to the artwork. */
.page-texture {
  z-index: 0;
  background: url("../img/bg-tile.svg") repeat;
  background-size: 25.6484vw 12.7853vw;   /* 387.804 x 193.3135 @ 1512 */
  background-position: -2.7116vw 0;       /* pattern frame starts at x = -41 */
}

/* Scrolls with the page on purpose. A blended layer that is position: fixed
   has to be re-composited against freshly scrolled content every frame; as
   part of the scrolling content the blend rasterises once and is then just
   translated. Same reason there is no will-change here — promoting a blended
   layer keeps it live rather than letting it bake in. */
.page-grain {
  z-index: 1;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background: url("../img/grain-tile.png") repeat;
  background-size: 300px 300px;
}

main,
.site-footer { position: relative; z-index: 2; }

/* Above main: the hero's full-bleed canvas overlaps the header band and
   would otherwise swallow every click on the nav links. */
.site-header { position: relative; z-index: 5; }

/* ------------------------------------------------------------ fit stages */
/* A [data-fit] element keeps the design aspect ratio; its .fit-in child is
   the untouched design-pixel canvas, scaled by --s to fill the width.      */

[data-fit] {
  position: relative;
  width: 100%;
  aspect-ratio: var(--w) / var(--h);
}

.fit-in {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  transform-origin: 0 0;
  transform: scale(var(--s, 1));
}

/* ------------------------------------------------------- artwork primitives */

.art {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  transform: rotate(calc(var(--deg, 0) * 1deg)) scaleX(var(--fx, 1)) scaleY(var(--fy, 1));
}

.art > img,
.art__rot > img {
  position: absolute;
  inset: var(--t, 0) var(--r, 0) var(--b, 0) var(--l, 0);
  width: auto;
  height: auto;
  max-width: none;
}

.art__rot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--rw) * 1px);
  height: calc(var(--rh) * 1px);
  transform: translate(-50%, -50%)
             rotate(calc(var(--deg, 0) * 1deg))
             scaleX(var(--fx, 1))
             scaleY(var(--fy, 1));
}

/* Flat colour rectangles: gold plates behind the lettering, orange headbars. */
.plate,
.bar {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
}
.plate { background: var(--gold); }
.bar   { background: var(--orange); }

/* ================================================================== header */

.site-header {
  position: absolute;
  top: clamp(18px, 3.44vw, 56px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pad-x);
  font-size: var(--nav-size);
  text-transform: uppercase;
  color: var(--ink-60);
}

.site-header__mark { margin: 0; }
.site-header__mark span { color: var(--crimson); }
.site-header__mark .site-header__credit { color: inherit; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.48vw, 40px);
}

.site-nav__star {
  width: clamp(16px, 2.15vw, 36px);
  height: auto;
}

/* Quiet, opt-in audio control; also available inside the project dialog. */
.sound-toggle {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(26,26,26,.2);
  border-radius: 24px;
  background: var(--cream);
  color: #38352f;
  font: 500 15px/1.2 var(--font-heading);
  cursor: pointer;
}
.sound-toggle[hidden] { display: none; }
.sound-toggle svg { width: 18px; height: 18px; }
.sound-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sound-toggle__waves, .sound-toggle[aria-pressed="true"] .sound-toggle__mute { display: none; }
.sound-toggle[aria-pressed="true"] .sound-toggle__waves { display: block; }


/* ==================================================================== hero */

.hero { overflow: hidden; }
.hero > .fit-in { overflow: visible; }

.word {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  aspect-ratio: auto;
}

.strip {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  aspect-ratio: auto;
  overflow: hidden;
}

/* The strip's canvas is what blends onto the gold plate underneath —
   keeping the blend on .fit-in (not on the photo) preserves the backdrop. */
.strip > .fit-in { mix-blend-mode: overlay; }
/* The gold plate is a sibling, outside the clipped photo strip.
   Blend the strip itself so the native and cached artwork match. */
.hero__color-stage .strip, .hero__sketch-stage .strip { mix-blend-mode: overlay; }
.hero__color-stage .strip > .fit-in, .hero__sketch-stage .strip > .fit-in { mix-blend-mode: normal; }

.strip__photo { position: absolute; }

.photo { position: absolute; overflow: hidden; }
.photo > img { position: absolute; max-width: none; }
.strip--right .photo { overflow: visible; }
/* Continue the cropped hair behind both lotus poses. The portrait and moving
   arm keep their existing scale, position and wrist pivot. */
.portrait-lotus-rest, .portrait-lotus-base {
  mask-image: linear-gradient(to right, #000 89.5%, transparent 96%);
}
.portrait-lotus-motion { position: absolute; inset: 0; }
.portrait-lotus-motion img { position: absolute; max-width: none; }
.portrait-lotus-arm { transform-origin: 73.627845% 97.65625%; }
/* The small live strip sits above the cached lettering. Its original alpha
   still blends onto the gold beneath; only the arm rotates on hover. */
.hero-interaction-surface { position: absolute; inset: 0; pointer-events: none; isolation: isolate; }
.hero-interaction-surface > .hero-lotus-live { position: absolute; pointer-events: none; background: transparent; mix-blend-mode: overlay; }
.hero-interaction-surface > .hero-lotus-live > .fit-in { mix-blend-mode: normal; }
.hero-interaction-surface > .hero-lotus-live[hidden] { display: none; }

/* Actual vector strokes, then a broad pencil-like fill. Final artwork is the
   default: JavaScript and reduced-motion users never depend on an intro. */
.stage { position: absolute; inset: 0; }
/* The pencil settles with each word's final colour strokes. Keep the same
   compositing layer through completion so Safari does not re-rasterise it. */
.hero .word .stage[data-stage="1"],
.hero .word .stage[data-stage="2"] {
  opacity: 0;
  transform: translateZ(0);
}
@keyframes pencil-settle {
  from { opacity: 1; }
  to { opacity: 0; }
}
.hero.is-drawing > .hero__color-stage .word .stage[data-stage="1"],
.hero.is-drawing > .hero__color-stage .word .stage[data-stage="2"] {
  animation: pencil-settle 360ms ease-in-out both;
  /* Colour: 2200ms delay + 3100ms drawing, offset by each word's --wd. */
  animation-delay: calc(4940ms + var(--wd));
}
.word { --wd: 0ms; }
.word--creator { --wd: 220ms; }
.word--builder { --wd: 440ms; }
.art > .motion-svg,
.art__rot > .motion-svg {
  position: absolute;
  inset: var(--t, 0) var(--r, 0) var(--b, 0) var(--l, 0);
  width: auto;
  height: auto;
  max-width: none;
  display: block;
  pointer-events: none;
}
/* Soft graphite stays consistent during the intro and cursor reveal. */
.sketch-stroke { stroke: #6f6c64; stroke-opacity: .72; }
.sketch-echo {
  fill: none;
  stroke: #77736b;
  stroke-width: .72;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-opacity: .25;
  vector-effect: non-scaling-stroke;
}
.sketch-hatch {
  fill: none;
  stroke: #77736b;
  stroke-width: .62;
  stroke-linecap: round;
  stroke-opacity: .28;
  vector-effect: non-scaling-stroke;
}
.paint-layer { mask: none; }

@keyframes pencil-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes pencil-detail {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ink-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scribble-color {
  0% { stroke-dashoffset: 1; }
  18% { stroke-dashoffset: .88; }
  38% { stroke-dashoffset: .60; }
  49% { stroke-dashoffset: .53; }
  72% { stroke-dashoffset: .23; }
  86% { stroke-dashoffset: .16; }
  100% { stroke-dashoffset: 0; }
}
@keyframes stem-grow {
  from { stroke-dashoffset: var(--stem-from, 1); }
  to { stroke-dashoffset: 0; }
}
@keyframes leaf-open {
  0% { transform: rotate(var(--fold)) scale(.02,.08); }
  72% { transform: rotate(-2deg) scale(1.025,1.04); }
  100% { transform: none; }
}
@keyframes petal-open {
  0% { transform: rotate(var(--fold)) scale(.015,.055); }
  70% { transform: rotate(-2deg) scale(1.035,1.025); }
  100% { transform: none; }
}
@keyframes flower-heart {
  from { transform: scale(.01); }
  to { transform: none; }
}
@keyframes sparkle-draw {
  from { transform: scale(.01) rotate(-22deg); }
  to { transform: none; }
}

.hero.is-drawing .guide-stroke {
  stroke-dasharray: 1;
  animation: pencil-draw 750ms ease-out both;
  animation-delay: calc(100ms + var(--wd) + var(--stroke-delay));
}
.hero.is-drawing .sketch-stroke {
  stroke-dasharray: 1;
  animation: pencil-draw 1350ms cubic-bezier(.45,.05,.3,1) both;
  animation-delay: calc(400ms + var(--wd) + var(--stroke-delay));
}
.hero.is-drawing .sketch-echo {
  stroke-dasharray: 1;
  animation: pencil-draw 1050ms cubic-bezier(.42,.05,.32,1) both;
  animation-delay: calc(720ms + var(--wd) + var(--stroke-delay));
}
.hero.is-drawing .sketch-hatch-group {
  opacity: 0;
  animation: pencil-detail 520ms ease-out both;
  animation-delay: calc(1820ms + var(--wd));
}
/* A loose, curved scribble draws all the color layers together. */
.word-color { position: absolute; inset: 0; }
.scribble-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.has-scribble-canvas { mask-image: none !important; background: transparent !important; }
.has-scribble-canvas > :not(.scribble-canvas) { visibility: hidden !important; }
.hero.has-canvas-scribble .scribble-stroke { animation: none !important; }
.hero .paint-layer { mask: none; clip-path: none; }
.hero .scribble-stroke {
  fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.hero.is-drawing .scribble-stroke {
  animation: scribble-color 3100ms linear both;
  animation-delay: var(--fill-start,2200ms);
  transition: none;
}

.hero .bloom-ink { opacity: 0; }
.hero .bloom-ink,.hero .bloom-color { transition: opacity 900ms ease; }
.bloom-petal,.bloom-heart,.bloom-leaf { transform-box: view-box; }
.hero.is-drawing .bloom-stem {
  stroke-dasharray: 1;
  animation: stem-grow 1050ms cubic-bezier(.4,0,.3,1) both;
  animation-delay: calc(1700ms + var(--wd) + var(--stem-delay));
}
.hero.is-drawing .bloom-leaf {
  animation: leaf-open 1050ms cubic-bezier(.22,.6,.25,1) both;
  animation-delay: calc(2220ms + var(--wd) + var(--leaf-delay));
}
.hero.is-drawing .bloom-petal {
  animation: petal-open 1450ms cubic-bezier(.22,.6,.25,1) both;
  animation-delay: calc(2550ms + var(--wd) + var(--petal-delay));
}
.hero.is-drawing .bloom-heart {
  animation: flower-heart 1100ms cubic-bezier(.22,.6,.25,1) both;
  animation-delay: calc(2900ms + var(--wd));
}
.hero.is-drawing .art--pop .hero-vector-color {
  transform-origin: 50% 70%;
  animation: sparkle-draw 950ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(3100ms + var(--wd) + var(--od,0ms));
}
@media(prefers-reduced-motion:reduce) {
  .hero .scribble-stroke { animation: none !important; transition: none; stroke-dashoffset: 0; }

  .hero .bloom-color,.hero .bloom-ink { transition: none; }
}

/* The reveal is a textured, merging mask on the existing color layer. */
.liquid-mask-defs { position: absolute; width: 0; height: 0; pointer-events: none; }


.sketch-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
  contain: layout style;
}
.sketch-cursor.is-visible { opacity: 1; }
.sketch-cursor__ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--crimson);
  transform: translate(-50%, -50%);
}
.sketch-cursor__ring::after { display: none; }
.sketch-cursor.is-link .sketch-cursor__ring {
  width: 42px;
  height: 42px;
  border-color: var(--gold);
  background: var(--gold);
}
.sketch-cursor.is-link .sketch-cursor__ring::after {
  display: block;
  content: '\2197';
  width: auto;
  height: auto;
  background: none;
  color: #6a162c;
  font: 22px/1 Arial, sans-serif;
}
.site-footer a {
  transition: color 160ms ease, text-underline-offset 160ms ease;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.site-footer a:focus-visible { outline: 1px dashed var(--gold); outline-offset: 5px; }

@media (prefers-reduced-motion: reduce) {
  .hero.is-drawing *, .hero.is-drawing *::before, .hero.is-drawing *::after { animation: none !important; }
  .hero.is-drawing .paint-layer { mask: none; }
  .hero .guide-stroke, .hero .sketch-stroke, .hero .paint-stroke { stroke-dashoffset: 0; }
  .sketch-cursor { display: none; }
  .word, .site-footer a { transition: none; }
  .word.is-inspected .stage[data-stage="3"] { mask-image: none; }
  .can-sketch .hero.is-ready .word { cursor: auto; }
  .can-sketch .site-footer a { cursor: pointer; }
}


/* ================================================================== works */
.works {
  position: relative;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: transparent;
  scroll-margin-top: 0;
}
.project-reel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.project-reel.is-over-card { cursor: pointer; }
.project-reel.is-dragging { cursor: grabbing; }
.project-reel:focus { outline: none; }
.project-card { position: absolute; left: 0; top: 0; width: 36vw; aspect-ratio: 3/2; }
.project-card__image { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; background: var(--cream); }
.project-card__image img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.project-card__image--letters { background: var(--gold); }
.project-card__image--letters img { width: 84.4%; height: auto; object-fit: contain; }
.project-card__image--playground { background: #a8143c; }
.project-card__image--playground img { width: 36.1%; height: auto; object-fit: contain; }
.project-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.works.has-paper .project-card { opacity: 0; pointer-events: none; }
.project-caption {
  position: absolute;
  left: 50%;
  top: calc(var(--card-bottom, 70%) + 20px);
  transform: translateX(-50%);
  padding: 12px 20px;
  max-width: 90%;
  border: 0;
  background: none;
  color: #1a1a1a;
  font: 400 26px/1.2 "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  justify-content: center;
}
.project-caption__description {
  max-width: 36em;
  font-size: 17px;
  line-height: 1.35;
  color: #514b40;
  text-wrap: balance;
}
.project-caption.is-settled { opacity: 1; visibility: visible; }
@media(max-width:1200px) { .project-caption { font-size: 24px; } }
@media(max-width:700px) { .project-caption { font-size: 21px; width: max-content; max-width: 94%; padding-inline: 8px; } }
@media(prefers-reduced-motion:reduce) { .project-caption { transition: none; } }

/* ================================================================== footer */

/* The scalloped top edge is two full-height Figma shapes (gold behind, red
   in front). Only their top band is exposed; below it a flat red continues
   the front shape, so the seam is invisible. All of it lives on the .rise
   layer: the footer itself is just a transparent slot that clips it, so the
   red mass can slide up through the slot at its own speed on scroll. */
.site-footer {
  --wave-h: clamp(14px, 2.1vw, 34px);
  position: relative;
  /* Keep the breathing room outside the slot that drives the parallax. */
  margin-top: clamp(96px, 16svh, 192px);
  color: #fff;
  overflow: hidden;
  view-timeline-name: --footer-slot;
}

.site-footer__rise {
  position: relative;
  padding: clamp(34px, 4.5vw, 68px) clamp(20px, 6.61vw, 108px) clamp(34px, 4.56vw, 69px);
  background-color: transparent;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: 0 var(--wave-h);
  background-size: 100% calc(100% - var(--wave-h));
}

.site-footer__waves {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--wave-h);
  overflow: hidden;
  pointer-events: none;
}

/* No height: the SVGs keep their 1513 x 468 ratio so the scallop pitch
   scales with the page, and the band above crops them. */
.wave { position: absolute; top: 0; height: auto; }
.wave--back  { left: 0.2%; width: 101.48%; }
.wave--front { left: 0;    width: 100.07%; }

.site-footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 3.44vw, 56px);
}

/* Footer reveal: as the footer's slot scrolls into view, the red mass lags
   below it and rises through at roughly half scroll speed, meeting the page
   exactly when the slot is fully on screen — so there is never a gap at the
   document end. The timeline is the slot's own (untransformed) box, so the
   moving layer can't feed back into its own progress. Scroll-driven: it
   tracks the scrollbar, not a timer. Desktop only — on small screens the
   footer can be taller than the viewport, which would strand it mid-rise. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
    /* Longhands only — the `animation` shorthand resets animation-duration to
       0s, which makes a scroll-driven animation snap to its end state. */
    .site-footer__rise {
      animation-name: footer-reveal;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --footer-slot;
      animation-range: entry 0% entry 100%;
    }
  }
}

@keyframes footer-reveal {
  from { transform: translateY(52%); }
  to   { transform: translateY(0); }
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 64px);
  flex-wrap: wrap;
}

.footer-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.193vw, 20px);
}

.footer-kicker {
  margin: 0;
  font-size: clamp(15px, 1.3915vw, 23px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

/* Figma sizes this as `width: min-content; min-width: 100%` so it wraps
   inside the identity column (whose width is set by the status pill). */
.footer-headline {
  margin: 0;
  width: min-content;
  min-width: 100%;
  font-size: clamp(24px, 2.2529vw, 38px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  color: #fff;
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 0.6626vw, 11px);
  margin: 0;
  padding: clamp(9px, 0.9276vw, 16px) clamp(16px, 1.8553vw, 31px);
  border-radius: 999px;
  background: var(--gold);
  color: rgba(0, 0, 0, 0.85);
  font-size: clamp(12px, 1.1927vw, 20px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-status img { width: clamp(7px, 0.6626vw, 11px); height: auto; }

.footer-columns {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 96px);
  width: min(100%, 29.62vw);
  min-width: 260px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(9px, 0.9276vw, 16px);
}

.footer-col h2 {
  margin: 0;
  font-size: clamp(12px, 1.0602vw, 18px);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-col a {
  font-size: clamp(15px, 1.3915vw, 23px);
  color: rgba(255, 255, 255, 0.85);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4577vw, 24px);
}

.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.footer-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: clamp(11px, 1.1927vw, 20px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-meta p { margin: 0; }

/* ============================================================ small screens */
/* Recompose the artwork for a portrait screen. The illustration strips
   sit between the lettering, with the same alternating rhythm as desktop. */

@media (max-width: 860px) {

  :root { --pad-x: 20px; }
  .page-texture { background-size: 240px 120px; background-position: -20px 0; }
  .site-header {
    position: relative;
    top: auto;
    padding: max(16px, env(safe-area-inset-top)) 20px 12px;
    flex-wrap: nowrap;
    gap: 16px;
    font-size: 15px;
    color: #39362f;
  }
  .site-header__mark { flex-shrink: 0; line-height: 1.25; }
  .site-header__mark .site-header__credit { display: block; font-size: 11px; letter-spacing: .06em; }
  .site-header__mark > span:last-child { font-size: 17px; }
  .site-nav { gap: 18px; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-nav__star { display: none; }

  .hero {
    --hero-bleed: max(20px, calc((100vw - 560px) / 2));
    aspect-ratio: auto;
    height: auto;
    min-height: calc(100svh - 72px);
    padding: 24px 0 72px;
  }

  .hero > .fit-in {
    position: relative;
    width: 100%;
    padding-inline: var(--hero-bleed);
    margin-inline: auto;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: 24px;
  }

  /* Keep the gold backing on its original scribble layer. Its grid area and
     dimensions match the portrait so both are revealed by the same stroke. */
  .hero__stage > .plate,
  .hero__stage > .word,
  .hero__stage > .strip {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--w) / var(--h);
  }

  .hero__stage > .word--designer { grid-area: 1 / 1 / 2 / 13; z-index: 1; }
  .hero__stage > .plate--right,
  .hero__stage > .strip--right { grid-area: 2 / 4 / 3 / 13; margin-top: -6px; }
  .hero__stage > .word--creator { grid-area: 3 / 1 / 4 / 12; margin-top: -8px; z-index: 1; }
  .hero__stage > .plate--left,
  .hero__stage > .strip--left { grid-area: 4 / 1 / 5 / 11; aspect-ratio: 764 / 162; }
  .hero__stage > .word--builder { grid-area: 5 / 3 / 6 / 13; margin-top: -10px; z-index: 1; }
  .hero__stage > .plate,
  .hero__stage > .strip--right,
  .hero__stage > .strip--left { width: calc(100% + var(--hero-bleed)); }
  .hero__stage > .plate--left,
  .hero__stage > .strip--left { margin-left: calc(-1 * var(--hero-bleed)); }

  /* Each section has its own viewport, with the card and caption centred
     together. Native vertical scrolling remains available through the reel. */
  .works { height: 100svh; min-height: 520px; }
  .project-caption {
    top: calc(var(--card-bottom, 65%) + 24px);
    width: calc(100% - 40px);
    max-width: 560px;
    padding: 0;
    font-size: 28px;
    line-height: 1.15;
    gap: 8px;
  }
  .project-caption__description { max-width: 27em; font-size: 17px; line-height: 1.4; }
  .site-footer { margin-top: clamp(72px, 12svh, 120px); --wave-h: 32px; }
  /* Crop the original waves at their natural scale instead of squeezing
     every scallop into the width of a phone. */
  .site-footer__waves .wave { left: 50%; max-width: none; transform: translateX(-50%); }
  .site-footer__waves .wave--front { width: 1513px; }
  .site-footer__waves .wave--back { width: 1534px; }
  .site-footer__rise { min-height: 100svh; display: flex; flex-direction: column; padding: 64px 24px max(76px, env(safe-area-inset-bottom)); }
  .site-footer__inner { flex: 1; width: 100%; justify-content: space-between; gap: 36px; max-width: 560px; margin-inline: auto; }
  .footer-top { flex-direction: column; gap: 36px; }
  .footer-identity { width: 100%; gap: 18px; }
  .footer-kicker { font-size: 18px; }
  .footer-headline { width: 100%; min-width: 0; font-size: clamp(40px, 9.5vw, 58px); line-height: 1.02; text-wrap: balance; }
  .footer-status { max-width: 100%; padding: 12px 16px; font-size: 12px; letter-spacing: .035em; line-height: 1.5; }
  .footer-status img { flex-shrink: 0; }
  .footer-columns { display: grid; grid-template-columns: .8fr 1.4fr; gap: 24px; width: 100%; min-width: 0; }
  .footer-col { min-width: 0; gap: 0; }
  .footer-col h2 { margin-bottom: 12px; font-size: 12px; }
  .footer-col a { display: flex; align-items: center; min-height: 44px; font-size: 17px; overflow-wrap: anywhere; }
  .footer-col a[href^="mailto:"] { font-size: clamp(14px, 4vw, 17px); }
  .footer-meta { flex-direction: column; gap: 10px; font-size: 11px; letter-spacing: .035em; line-height: 1.5; }

  /* A small fixed audio control leaves the artwork and reading column clear. */
  body > .sound-toggle { left: auto; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: 44px; padding: 0; }
  body > .sound-toggle [data-sound-label] { display: none; }
  .project-preview .sound-toggle { position: absolute; top: 12px; bottom: auto; left: 20px; font-size: 14px; }

}

@media (prefers-reduced-motion: no-preference) {
  .site-nav a { transition: color 0.2s ease; }
  .site-nav a:hover { color: var(--crimson); }
}

/* The existing gallery canvas stays alive in the dialog's top layer. */
html.project-is-open { overflow: hidden; }
.project-preview { --paper-width: 78.125dvh; --details-width: 71dvh; position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--cream) url('../img/bg-tile.svg') repeat; background-size: 25.6484vw 12.7853vw; background-position: -2.7116vw var(--project-pattern-y,0px); color: var(--crimson); overflow: hidden; overscroll-behavior: contain; }
.project-preview::backdrop { background: transparent; }
.project-preview[open] { display: block; }
.project-preview__stage { position: absolute; inset: 0; pointer-events: none; }
.project-preview__paper { position: absolute; inset: 0 auto 0 0; width: var(--paper-width); background: var(--project-accent,var(--gold)); transform: scaleX(0); transform-origin: left; }
.project-preview__content { position: absolute; left: var(--paper-width); top: 0; width: min(var(--details-width),calc(100% - var(--paper-width))); height: 100%; padding: 14.5dvh 30px 40px; background: transparent; text-align: center; opacity: 0; }
.project-preview h2 { margin: 0; color: #1a1a1a; font: 400 clamp(44px,9dvh,76px)/1.12 var(--font-heading); letter-spacing: -1px; text-wrap: balance; }
.project-preview h2 span { display: inline-block; white-space: pre; }
.project-preview h2>span { white-space: nowrap; }
.project-preview__subtitle { margin: 16px auto 0; max-width: 30em; color: #514b40; font: 400 20px/1.4 "Archivo Narrow","Arial Narrow",Arial,sans-serif; opacity: 0; }
.project-preview__subtitle:empty { display: none; }
.project-preview__mobile-image { display: none; margin: 50px 0 0; background: var(--project-paper,var(--cream)); }
.project-preview__mobile-image img { width: 100%; height: auto; display: block; }
.project-preview__close { position: fixed; z-index: 2; top: 8px; right: 8px; min-height: 44px; padding: 12px; border: 0; background: none; color: inherit; font: 600 14px/1.2 "Archivo Narrow","Arial Narrow",Arial,sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.project-preview__close span { margin-left: 8px; }
.project-preview__close:hover { text-decoration: underline; text-underline-offset: 5px; }
.project-preview__close:focus-visible { outline: 1px solid currentColor; outline-offset: -3px; }
.project-preview.is-mobile { overflow-y: auto; }
.project-preview.is-mobile .project-preview__paper { display: none; }
.project-preview.is-mobile .project-preview__content { position: relative; left: 0; width: 100%; min-height: 100%; height: auto; padding: 105px 20px 30px; }
.project-preview.is-mobile h2 { font-size: clamp(44px,18vw,72px); letter-spacing: -1px; }
.project-preview.is-mobile h2.has-long-word { font-size: clamp(40px,16vw,68px); }
.project-preview.is-mobile .project-preview__mobile-image { display: block; }
.project-preview.is-mobile .project-preview__stage { position: fixed; }

.project-preview__content :is(h2,p), .site-footer p { cursor: text; }

.hero-transition-defs { position: absolute; width: 0; height: 0; pointer-events: none; }
.hero-render-canvas { position: absolute; pointer-events: none; }
.hero-render-canvas[hidden] { display: none; }

/* Hide the inactive stage when settled so its filters do no idle paint work. */
.hero > .hero__sketch-stage {
  pointer-events: none;
  visibility: hidden;
}
.hero.is-drawing > .hero__color-stage { mask-image: none; }
.hero.is-drawing > .hero__sketch-stage { visibility: hidden; }
.hero .hero__sketch-stage * { animation: none !important; transition: none !important; }
.hero .hero__sketch-stage .stage[data-stage="1"],
.hero .hero__sketch-stage .stage[data-stage="2"] { opacity: 1; }
/* The hover cache is built during the intro. Keep its pencil shading complete
   even while the visible stage is still drawing that shading in. */
.hero .hero__sketch-stage .sketch-hatch-group { opacity: 1; }
.hero .hero__sketch-stage .bloom-ink { opacity: 0; }
.hero .hero__sketch-stage .bloom-color { opacity: 1; }
.hero .hero__sketch-stage .stage[data-stage="1"],
.hero .hero__sketch-stage .stage[data-stage="2"] { transform: none; }
.hero .hero__sketch-stage .guide-stroke,
.hero .hero__sketch-stage .sketch-stroke,
.hero .hero__sketch-stage .sketch-echo {
  /* Safari applies normalised intro dashes differently when the SVG is
     rasterised at Retina scale. The finished hover artwork is never dashed. */
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.hero .hero__sketch-stage .word-color,
.hero .hero__sketch-stage .bar { visibility: hidden; }
@media (max-width:860px) {
  .hero > .hero__sketch-stage { position: absolute; top: 24px; left: 0; width: 100%; transform: none; }
  .project-preview { background-size: 240px 120px; background-position-x: -20px; }
  .project-preview.is-mobile .project-preview__content { padding: 88px 24px 36px; text-align: left; }
  .project-preview.is-mobile h2, .project-preview.is-mobile h2.has-long-word { max-width: 12ch; font-size: clamp(40px, 11vw, 64px); line-height: 1.05; letter-spacing: -.02em; }
  .project-preview.is-mobile .project-preview__subtitle { margin: 18px 0 0; font-size: 18px; }
  .project-preview__close { top: max(12px, env(safe-area-inset-top)); right: 12px; }
}