/* =====================================================================
   about.css — "Behind the Design" (Figma node 504:4160)
   Illustrated scenes keep Figma coordinates: --u is one Figma pixel.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } /* the hero fills the screen, so the scroll cue sits at the fold */
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
  padding-bottom: 24px;
  padding-top: clamp(40px, calc(69 * var(--k)), 69px);
}
.hero-art {
  position: relative;
  width: min(605px, 100%);
  aspect-ratio: 605 / 348;
  container-type: inline-size;
  --u: calc(100cqw / 605);
}
.hero-art > img { position: absolute; height: auto; z-index: 1; }
.hero-art__guides { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
/* --dx/--dy: the way from each object to the centre of the portrait, in Figma px */
.hero-art__album    { left: calc(91.18 * var(--u));  top: calc(34 * var(--u));     width: calc(128.84 * var(--u)); --dx: 157.2;  --dy: 169.4; --d: .55s; --float: 5.3s; --float-gap: .15s; --tilt: -2deg; --fx1: -2; --fy1: -7; --fx2: 1.5; --fy2: -3; }
.hero-art__player   { left: calc(254 * var(--u));    top: calc(-8 * var(--u));     width: calc(108 * var(--u));    --dx: 4.8;    --dy: 211.6; --d: .62s; --float: 3.9s; --float-gap: .6s; --tilt: 1.5deg; --fx1: 1.5; --fy1: -5; --fx2: -1; --fy2: -8; }
.hero-art__comic    { left: calc(461.82 * var(--u)); top: calc(66.98 * var(--u)); width: calc(113.89 * var(--u)); --dx: -206;   --dy: 124;   --d: .69s; --float: 4.7s; --float-gap: .05s; --tilt: 2.5deg; --fx1: 2; --fy1: -8; --fx2: -1.5; --fy2: -2; }
.hero-art__popcorn  { left: calc(41 * var(--u));     top: calc(224 * var(--u));    width: calc(108 * var(--u));    --dx: 217.8;  --dy: -20.5; --d: .76s; --float: 6.1s; --float-gap: .9s; --tilt: 1.5deg; --fx1: -1.5; --fy1: 4; --fx2: 1; --fy2: -5; }
.hero-art__cat      { left: calc(481 * var(--u));    top: calc(223 * var(--u));    width: calc(108 * var(--u));    --dx: -222.2; --dy: -19.4; --d: .83s; --float: 4.3s; --float-gap: .35s; --tilt: -2deg; --fx1: 1; --fy1: -6; --fx2: 2; --fy2: 2; }
.hero-art__portrait { left: calc(223.16 * var(--u)); top: calc(168 * var(--u));    width: calc(179.2 * var(--u)); border-radius: 50%; z-index: 2 !important; }

/* Entrance: the portrait pops in, the dashed lines draw out from it,
   then each object springs out from behind it and keeps floating. */
.hero-art__portrait { animation: portrait-in .6s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
/* each dashed line draws out from the portrait together with its object */
.hero-art__draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: guide-draw .6s cubic-bezier(.22, 1, .36, 1) var(--d) both;
}
.hero-art__album, .hero-art__player, .hero-art__comic, .hero-art__popcorn, .hero-art__cat {
  animation:
    pop-out .75s cubic-bezier(.34, 1.56, .64, 1) var(--d) both,
    float var(--float) ease-in-out calc(var(--d) + .75s + var(--float-gap)) infinite;
}
/* Hover: each object grows and its fun fact appears in a chat bubble beside it,
   as placed in Figma (504:4160, bubbles 574:8607, 574:8610, 562:8459, 574:8600).
   The pointer is the Figma arrow (571:8584). Works without script; the script
   only adds tap-to-show on touch and moves a bubble that would leave the screen. */
.hero-art__album, .hero-art__player, .hero-art__comic, .hero-art__popcorn, .hero-art__cat {
  transition: scale .3s cubic-bezier(.34, 1.56, .64, 1);
}
.hero-art__album:hover, .hero-art__player:hover, .hero-art__comic:hover, .hero-art__popcorn:hover, .hero-art__cat:hover { scale: 1.2; z-index: 3; }
.hero-art [data-fact] { cursor: url("../assets/svg/pointer.svg") 1 1, default; }

/* the bubble: a zero-size box at the tip of its tail, floating with its object */
.hero-fact {
  position: absolute;
  z-index: 5;
  display: none;
  width: 0;
  height: 0;
  pointer-events: none;
  transform-origin: 0 0;
  animation: float-follow var(--float) ease-in-out calc(var(--d) + .75s + var(--float-gap)) infinite;
}
.hero-art img:hover + .hero-fact, .hero-fact.is-on { display: block; }
/* it pops out of its tail */
.hero-fact__label, .hero-fact__tail { transition: scale .3s cubic-bezier(.34, 1.56, .64, 1), opacity .15s ease; }
@starting-style {
  .hero-art img:hover + .hero-fact > *, .hero-fact.is-on > * { scale: .3; opacity: 0; }
}
#fact-album { left: calc(92.7 * var(--u)); top: calc(38.2 * var(--u)); --d: .55s; --float: 5.3s; --float-gap: .15s; --fx1: -2; --fy1: -7; --fx2: 1.5; --fy2: -3; }
#fact-player { left: calc(300.1 * var(--u)); top: calc(-18.2 * var(--u)); --d: .62s; --float: 3.9s; --float-gap: .6s; --fx1: 1.5; --fy1: -5; --fx2: -1; --fy2: -8; }
#fact-comic { left: calc(507.5 * var(--u)); top: calc(57.9 * var(--u)); --d: .69s; --float: 4.7s; --float-gap: .05s; --fx1: 2; --fy1: -8; --fx2: -1.5; --fy2: -2; }
#fact-popcorn { left: calc(23.8 * var(--u)); top: calc(287.3 * var(--u)); --d: .76s; --float: 6.1s; --float-gap: .9s; --fx1: -1.5; --fy1: 4; --fx2: 1; --fy2: -5; }
#fact-cat { left: calc(614 * var(--u)); top: calc(267.9 * var(--u)); --d: .83s; --float: 4.3s; --float-gap: .35s; --fx1: 1; --fy1: -6; --fx2: 2; --fy2: 2; }

.hero-fact__label {
  position: absolute;
  display: flex;
  align-items: center;
  height: 45px;
  padding: 0 20px;
  border-radius: 48px;
  background: #9a80da; /* #ceb9ff + 60% paper in Figma; tuned so the paper lands on Figma's rendered colour */
  --paper-opacity: .6;
  font-family: var(--font-hand);
  font-size: var(--text-tag);
  line-height: var(--lh-tag);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  color: #69497e;
}
.hero-fact__tail {
  position: absolute;
  background: #9a80da;
  --paper-opacity: .6;
}
.hero-fact__label::before, .hero-fact__tail::before { background-size: 260px auto; background-position: 30% 60%; }

/* tail pointing down (bubble above its object): iPod, comic book, album */
.hero-fact--player .hero-fact__label, .hero-fact--comic .hero-fact__label {
  left: 0; top: -53.5px; translate: calc(-50% + 2.1px + var(--shift, 0px)) 0; transform-origin: calc(50% - 2.1px - var(--shift, 0px)) 53.5px;
}
.hero-fact--player .hero-fact__tail, .hero-fact--comic .hero-fact__tail, .hero-fact--album .hero-fact__tail {
  left: -7.4px; top: -10.6px; width: 13.3px; height: 10.6px; transform-origin: 7.4px 10.6px;
  -webkit-clip-path: path("M5.782 9.795C6.658 10.869 8.333 10.748 9.046 9.561L12.969 3.03C13.77 1.697 12.81 0 11.255 0H2.003C.316 0-.613 1.958.453 3.264Z");
  clip-path: path("M5.782 9.795C6.658 10.869 8.333 10.748 9.046 9.561L12.969 3.03C13.77 1.697 12.81 0 11.255 0H2.003C.316 0-.613 1.958.453 3.264Z");
}
/* album: the same bubble tilted 23.7°, its tail at 62% of its width */
.hero-fact--album { rotate: -23.7deg; }
.hero-fact--album .hero-fact__label { left: 0; top: -53.2px; padding: 0 12px; translate: -61.9% 0; transform-origin: 61.9% 53.2px; }
.hero-fact--album .hero-fact__tail { rotate: -1.95deg; }
/* tail pointing left (bubble to the right of its object): cat */
.hero-fact--cat .hero-fact__label { left: 8.25px; top: -24.4px; transform-origin: -8.25px 24.4px; }
.hero-fact--cat .hero-fact__tail {
  left: 0; top: -7.4px; width: 10.6px; height: 13.3px; transform-origin: 0 7.4px;
  -webkit-clip-path: path("M.736 5.784C-.337 6.659-.217 8.334.97 9.048L7.501 12.971C8.834 13.771 10.531 12.811 10.531 11.256V2.004C10.531.318 8.573-.612 7.267.454Z");
  clip-path: path("M.736 5.784C-.337 6.659-.217 8.334.97 9.048L7.501 12.971C8.834 13.771 10.531 12.811 10.531 11.256V2.004C10.531.318 8.573-.612 7.267.454Z");
}
/* tail pointing right (bubble to the left of its object): popcorn (Figma 574:8603), the cat's bubble mirrored */
.hero-fact--popcorn .hero-fact__label { left: auto; right: 8.25px; top: -24.4px; transform-origin: calc(100% + 8.25px) 24.4px; }
.hero-fact--popcorn .hero-fact__tail {
  left: -10.6px; top: -7.4px; width: 10.6px; height: 13.3px; transform: scaleX(-1);
  -webkit-clip-path: path("M.736 5.784C-.337 6.659-.217 8.334.97 9.048L7.501 12.971C8.834 13.771 10.531 12.811 10.531 11.256V2.004C10.531.318 8.573-.612 7.267.454Z");
  clip-path: path("M.736 5.784C-.337 6.659-.217 8.334.97 9.048L7.501 12.971C8.834 13.771 10.531 12.811 10.531 11.256V2.004C10.531.318 8.573-.612 7.267.454Z");
}
/* while a bubble shrinks away (set by the script) it stays on screen */
.hero-art .hero-fact.is-leaving { display: block; }
.hero-art .hero-fact.is-above .hero-fact__tail { transform: none; }

/* the script measures a bubble at full size before it pops in */
.hero-art .hero-fact.is-measuring { display: block; }
.hero-art .hero-fact.is-measuring > * { scale: 1 !important; transition: none !important; }
/* a bubble that would leave the screen moves above its object (set by the script),
   with the tail pointing down whatever its Figma side */
.hero-art .hero-fact.is-above { rotate: none; }
.hero-art .hero-fact.is-above .hero-fact__label {
  left: 0; right: auto; top: -53.5px; translate: calc(-50% + 2.1px + var(--shift, 0px)) 0; transform-origin: calc(50% - 2.1px - var(--shift, 0px)) 53.5px;
}
.hero-art .hero-fact.is-above .hero-fact__tail {
  left: -7.4px; top: -10.6px; width: 13.3px; height: 10.6px; transform-origin: 7.4px 10.6px; rotate: none;
  -webkit-clip-path: path("M5.782 9.795C6.658 10.869 8.333 10.748 9.046 9.561L12.969 3.03C13.77 1.697 12.81 0 11.255 0H2.003C.316 0-.613 1.958.453 3.264Z");
  clip-path: path("M5.782 9.795C6.658 10.869 8.333 10.748 9.046 9.561L12.969 3.03C13.77 1.697 12.81 0 11.255 0H2.003C.316 0-.613 1.958.453 3.264Z");
}

@keyframes float-follow {
  0%, 100% { translate: 0 0; }
  35% { translate: calc(var(--fx1) * var(--u)) calc(var(--fy1) * var(--u)); }
  70% { translate: calc(var(--fx2) * var(--u)) calc(var(--fy2) * var(--u)); }
}

@keyframes portrait-in {
  from { opacity: 0; transform: scale(.6); }
  50% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes guide-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes pop-out {
  from { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) scale(.35); }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  35% { translate: calc(var(--fx1) * var(--u)) calc(var(--fy1) * var(--u)); rotate: var(--tilt); }
  70% { translate: calc(var(--fx2) * var(--u)) calc(var(--fy2) * var(--u)); rotate: calc(var(--tilt) * -.5); }
}


.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 741px;
  margin-top: 12px;
  text-align: center;
}
.intro__eyebrow {
  font-family: var(--font-round);
  font-size: var(--text-heading);
  line-height: 1.333;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-violet);
}
.intro__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  color: var(--ink-navy);
  text-wrap: balance;
}
.intro__lead {
  font-family: var(--font-intro);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--ink-navy);
}

.scroll-down {
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  min-width: 107px;
  font-family: var(--font-round);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--ink-navy);
  text-decoration: none;
}
.scroll-down__mouse { position: relative; display: block; width: 44px; height: 64px; }
.scroll-down__mouse svg { display: block; width: 44px; height: 64px; }
/* the wheel: Figma's 4px yellow stroke from y 38 to 52, rolling up and down */
.scroll-down__wheel {
  position: absolute;
  left: 20px;
  top: 36px;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: #2d106c;
  animation: wheel 1.6s ease-in-out infinite;
}
/* phones: Figma's smaller mouse (27.5 x 40) */
@media (max-width: 599px) {
  .scroll-down { margin-top: 44px; padding-bottom: 4px; font-size: 17px; line-height: 27.5px; }
  .scroll-down__mouse { zoom: .625; }
}
/* Laptops: the whole hero, scroll cue included, fits the first screen.
   The illustration gives up height first (down to 360px wide), then the gaps tighten. */
@media (min-width: 768px) {
  .hero__inner { padding-top: clamp(16px, 4vh, 69px); padding-bottom: 16px; }
  .hero-art { width: min(100%, clamp(360px, calc((100vh - 520px) * 1.7385), 605px)); }
  .scroll-down { margin-top: clamp(16px, 4vh, 40px); }
}
@keyframes wheel {
  0%, 100% { translate: 0 -6px; }
  50% { translate: 0 4px; }
}

/* ---------------------------------------------------------------------
   Section titles are banners on two crossed paper tapes (desktop 586:9808 +
   606:11686, 586:9838, 586:10014, 598:11025; phones 595:4013, 595:4039,
   595:4162, 598:11456). The back tape is paper drawn in CSS; the front tape
   is Figma's picture of the tape and its tiles, with the title as real text.
   Desktop and tablets: Figma px (--k) from the page centre, never below 75%.
   Phones: Figma's phone banners in phone px (--m), placed from the left.
   Each tape unrolls across the screen when its section scrolls into view.
   --------------------------------------------------------------------- */
:root { --k: clamp(.5px, calc(100vw / 1286), 1px); }
.tapes {
  /* the banners shrink with the screen but not below 75% */
  --k: clamp(.75px, calc(100vw / 1286), 1px);
  position: relative;
  height: calc(var(--h) * var(--k));
  overflow: hidden;
  overflow: clip;
}
.tape {
  position: absolute;
  left: 50%;
  top: calc(var(--y) * var(--k));
  margin-left: calc(var(--x) * var(--k));
  width: max(calc(var(--w) * var(--k)), 130vw);
  height: calc(var(--th) * var(--k));
  translate: -50% -50%;
  rotate: var(--r);
  /* how far along the tape the screen's left edge is (for the unroll) */
  --vl: calc(50% - 50vw - var(--x) * var(--k));
}
.tape::before { background-size: calc(600 * var(--k)) auto; background-repeat: repeat; }
.tape--back {
  --x: var(--bx); --y: var(--by); --w: var(--bw); --th: var(--bh); --r: var(--br);
  background: var(--bc);
  --paper-opacity: .5;
}
.tape--front {
  --x: var(--fx); --y: var(--fy); --w: var(--fw); --th: var(--fh); --r: var(--fr);
  background: var(--fc);
  --paper-opacity: var(--fp);
}
/* the picture is Figma's tape at its own length; the paper behind it carries on past its ends on very wide screens */
.tape__art img {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--w) * var(--k));
  max-width: none;
  height: 100%;
  translate: -50% 0;
  pointer-events: none;
}
.tape__title {
  position: absolute;
  left: calc(50% + var(--tx, 0) * var(--k));
  top: calc(50% + var(--ty, 0) * var(--k));
  translate: -50% -50%;
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(32 * var(--k));
  line-height: calc(40 * var(--k));
  font-weight: 800;
  font-variation-settings: "opsz" 14;
  white-space: nowrap;
  color: var(--title-c);
}

/* Figma's centres, angles and colours. Back colours are Figma's fill + paper,
   tuned so the paper lands on Figma's rendered colour. */
.tapes--bring {
  --h: 326;
  --bx: -15.52; --by: 163.16; --bw: 1437; --bh: 93; --br: -9.32deg; --bc: #b8a8cc; /* #ecddff */
  --fx: .38; --fy: 141.03; --fw: 1473; --fh: 96; --fr: 4deg; --fc: #6c18dc; --fp: .3; /* #6400f8 */
  --title-c: #c3ffd6; --tx: .6;
}
.tapes--why {
  --h: 272;
  --bx: -.06; --by: 138.6; --bw: 1550; --bh: 92; --br: -6.89deg; --bc: #9492ce; /* #bdbbff */
  --fx: .82; --fy: 138.61; --fw: 1532; --fh: 96.21; --fr: 3.98deg; --fc: #c3228f; --fp: .4; /* #ed23aa */
  --title-c: #f9ffdd;
}
.tapes--track {
  --h: 294;
  --bx: -59.56; --by: 148.16; --bw: 1700.32; --bh: 92; --br: 7.95deg; --bc: #d6679f; /* #ff9acd */
  --fx: .49; --fy: 153.23; --fw: 1532; --fh: 96; --fr: -3.98deg; --fc: #185433; --fp: .4; /* #116939 */
  --title-c: #e9f99c;
}
.tapes--talk {
  --h: 350;
  --bx: -59.52; --by: 176.36; --bw: 1700.32; --bh: 92; --br: -10.31deg; --bc: #d6679f; /* #ff9acd */
  --fx: -24.27; --fy: 181.56; --fw: 1532; --fh: 96; --fr: 2deg; --fc: #b8dfa8; --fp: .5; /* #a2f183 */
  --title-c: #343d08;
}

/* The unroll: the back tape is laid from the left, then the front tape from
   the right, each edge sweeping across the visible screen; the title lands
   last. Before its section is on screen the tapes wait, rolled up. Without
   the script, or with reduced motion, the tapes are simply there. */
@keyframes unroll-ltr {
  0%   { clip-path: inset(-60% calc(100% - var(--vl) + 40px) -60% -10%); }
  99%  { clip-path: inset(-60% calc(100% - var(--vl) - 100vw - 40px) -60% -10%); }
  100% { clip-path: inset(-60% -10% -60% -10%); }
}
@keyframes unroll-rtl {
  0%   { clip-path: inset(-60% -10% -60% calc(var(--vl) + 100vw + 40px)); }
  99%  { clip-path: inset(-60% -10% -60% calc(var(--vl) - 40px)); }
  100% { clip-path: inset(-60% -10% -60% -10%); }
}
@keyframes tape-title-in {
  from { opacity: 0; scale: .85; }
  to { opacity: 1; scale: 1; }
}
.reveal-on [data-reveal] .tape--back { animation: unroll-ltr .8s cubic-bezier(.55, 0, .25, 1) .1s backwards paused; }
.reveal-on [data-reveal] .tape--front { animation: unroll-rtl .8s cubic-bezier(.55, 0, .25, 1) .35s both paused; }
.reveal-on [data-reveal] .tape__title { animation: tape-title-in .45s cubic-bezier(.34, 1.56, .64, 1) 1s backwards paused; }
.reveal-on [data-reveal].is-visible :is(.tape, .tape__title) { animation-play-state: running; }

/* In a section with a ribbon, the ribbon is laid first and the content
   below it rises in 0.4s after the ribbon starts. */
.reveal-on :is(.bring, .tape-section, .talk)[data-reveal] { opacity: 1; translate: none; }
.reveal-on :is(.bring, .tape-section, .talk)[data-reveal] > .container { opacity: 0; translate: 0 24px; }
.reveal-on :is(.bring, .tape-section, .talk)[data-reveal].is-visible > .container {
  opacity: 1;
  translate: none;
  transition: opacity .6s ease .4s, translate .6s cubic-bezier(.22, 1, .36, 1) .4s;
}

/* Spacing between sections, from Figma at 1286px wide, scaling with --k */
.bring { margin-top: calc(61 * var(--k)); }
.bring .board { margin-top: 0; padding-bottom: 48px; } /* room under the board before the next ribbon */
@media (min-width: 768px) { .bring .board { margin-top: calc(-70 * var(--k)); } } /* the strip's tapes reach up under the ribbon */
.tape-section--why { margin-top: calc(72 * var(--k)); }
.tape-section--why .why { margin-top: calc(19 * var(--k)); }
.tape-section--track { margin-top: calc(64 * var(--k)); }
.tape-section--track .records { margin-top: calc(21 * var(--k)); }

/* ---------------------------------------------------------------------
   What I bring to the table (Figma 643:5296 desktop, 642:8810 phone): a
   pin board with a taped strip of numbers on top and two pinned notes.
   The paper, tape and pins are one picture; the numbers and points are
   real text laid over it in Figma px (--u desktop, --m phone).
   --------------------------------------------------------------------- */
.board { position: relative; isolation: isolate; container-type: inline-size; }
.board__art, .board__art img { display: block; width: 100%; height: auto; }
.board__notes, .note { display: contents; }
.stats, .note__list { margin: 0; }
.stats { list-style: none; padding: 0; }
.stat {
  position: absolute;
  display: flex;
  flex-direction: column;
  font-family: var(--font-hand);
  font-weight: 500;
  color: #1e3523;
}
.stat__value { font-weight: 500; }
.note__list {
  position: absolute;
  display: grid;
  padding-left: 1.5em;
  font-family: var(--font-hand);
  font-weight: 500;
  color: var(--ink-note);
}
.note__list li::marker { font-size: .8em; }
/* Hindi words stand out in the handwriting, bolder rather than slanted */
.note__list em { font-style: normal; font-weight: 700; }

/* Handwriting (set up by the script): once the board has risen in (1s
   after the ribbon starts), all the points are written out together,
   letter by letter at 24ms a letter (about 1.2s).
   Without the script the notes are simply written. */
.note__list.is-written .ch { display: inline-block; animation: ink .22s ease-out calc(1s + var(--i) * 24ms) backwards paused; }
.note__list.is-written .word { display: inline-block; white-space: nowrap; }
.note__list.is-written li::marker { animation: ink-marker .2s ease-out 1s backwards paused; }
.is-visible .note__list.is-written li::marker, .is-visible .note__list.is-written .ch { animation-play-state: running; }
@keyframes ink {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ink-marker { from { color: transparent; } to { color: var(--ink-note); } }

/* Desktop: Figma's 960 x 788 scene; the numbers sit in a row on the strip */
@media (min-width: 768px) {
  .board { --u: calc(100cqw / 960); }
  .stat { width: calc(var(--w, 180) * var(--u)); }
  .stat__value { font-size: calc(24 * var(--u)); line-height: calc(40 * var(--u)); }
  .stat__label { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
  .stat:nth-child(1) { left: calc(63 * var(--u));  top: calc(98 * var(--u)); }
  .stat:nth-child(2) { left: calc(280 * var(--u)); top: calc(103 * var(--u)); }
  .stat:nth-child(3) { left: calc(497 * var(--u)); top: calc(93 * var(--u)); --w: 150; }
  .stat:nth-child(4) { left: calc(682 * var(--u)); top: calc(93 * var(--u)); --w: 205; }
  .note__list {
    gap: calc(13 * var(--u));
    padding-left: calc(36 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: calc(40 * var(--u));
  }
  .note--left .note__list  { left: calc(177.2 * var(--u)); top: calc(306.7 * var(--u)); width: calc(279 * var(--u)); }
  .note--right .note__list { left: calc(533 * var(--u));   top: calc(352 * var(--u));   width: calc(279 * var(--u)); }
}

/* Phones and small tablets: Figma's 360 x 815 phone board (791 tall here: the top note hugs its shorter copy), edge to edge
   (it stops growing at 480px). The strip is turned; so are the notes. */
@media (max-width: 767px) {
  .board {
    --bw: min(100vw, 480px);
    --m: calc(var(--bw) / 360);
    width: var(--bw);
    left: 50%;
    margin-left: calc(var(--bw) / -2);
  }
  .stat { width: calc(var(--w) * var(--m)); rotate: -7.22deg; transform-origin: 0 0; }
  .stat__value { font-size: calc(20 * var(--m)); line-height: calc(var(--vl) * var(--m)); }
  .stat__label { margin-left: calc(var(--lx, 3.5) * var(--m)); font-size: calc(12 * var(--m)); line-height: calc(20 * var(--m)); }
  .stat:nth-child(1) { left: calc(26.4 * var(--m));  top: calc(71.5 * var(--m));  --w: 134; --vl: 28; }
  .stat:nth-child(2) { left: calc(36.9 * var(--m));  top: calc(154.9 * var(--m)); --w: 118; --vl: 40; --lx: 0; }
  .stat:nth-child(3) { left: calc(163.3 * var(--m)); top: calc(54.2 * var(--m));  --w: 142; --vl: 28; }
  .stat:nth-child(4) { left: calc(157.9 * var(--m)); top: calc(139.5 * var(--m)); --w: 162; --vl: 40; }
  .note__list {
    width: calc(232 * var(--m));
    gap: calc(13 * var(--m));
    padding-left: calc(27 * var(--m));
    font-size: calc(16 * var(--m));
    line-height: calc(24 * var(--m));
    transform-origin: 0 0;
  }
  .note--left .note__list  { left: calc(67.1 * var(--m)); top: calc(304.8 * var(--m)); rotate: 1.88deg; }
  .note--right .note__list { left: calc(59.1 * var(--m)); top: calc(542.6 * var(--m)); rotate: -3.42deg; }
}

/* ---------------------------------------------------------------------
   Why I became a designer
   --------------------------------------------------------------------- */
.why {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  border-radius: 32px;
  color: var(--ink-body);
}
.why__paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  background: #f4e2ff; /* #f5e7ff in Figma, tuned for the paper blend */
}
.why__paper::before {
  content: "";
  position: absolute;
  left: -38px;
  top: -568.5px;
  width: 1114px;
  height: 1671px;
  background: var(--paper) 0 0 / 100% 100%;
  mix-blend-mode: luminosity;
  opacity: .5;
}
/* The art (Figma 629:6362 desktop, 595:4105 phone): the earbuds and the
   cable are pictures; the iPod in its hand is a small scene in Figma px
   (--s, one px of the 298 x 335 scene) whose thumb and album covers
   js/parallax.js moves (Figma 629:6364, "iPod — thumb scroll"). Without the
   script the scene is Figma's still picture. The earbuds drift a little as
   the card scrolls by (data-drift). */
.why__art { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; }
.why__layer, .why__cable { position: absolute; left: 0; top: -10.676%; display: block; width: 100%; height: auto; }
.why__layer { translate: 0 var(--drift, 0px); }
/* the headphone jack sits in front of the hand, at the card's bottom edge (Figma 629:6428) */
.why__jack { position: absolute; left: 76.665%; top: 95.39%; width: 7.973%; height: auto; }
.why__layer img { display: block; width: 100%; height: auto; }
.ipod {
  position: absolute;
  aspect-ratio: 298 / 335;
  container-type: inline-size;
  --s: calc(100cqw / 298);
}
.ipod__hand { position: absolute; inset: 0; width: 100%; height: auto; }
/* the screen, which clips the covers sliding across it */
.ipod__screen {
  position: absolute;
  left: calc(92.76 * var(--s));
  top: calc(52.78 * var(--s));
  width: calc(159.01 * var(--s));
  height: calc(84.91 * var(--s));
  overflow: hidden;
}
/* Cover Flow: every cover sits in the centre slot and is moved from there;
   the side ones are squeezed as if turned (start: orange, pink, PURPLE, blue, yellow, green) */
.ipod__cover {
  position: absolute;
  left: calc(37.05 * var(--s));
  top: 0;
  width: calc(84.91 * var(--s));
  height: auto;
  will-change: transform;
}
.ipod__cover:nth-child(1) { transform: translateX(calc(-98 * var(--s))) scale(.42, .86); }
.ipod__cover:nth-child(2) { transform: translateX(calc(-61.3 * var(--s))) scale(.42, .86); }
.ipod__cover:nth-child(4) { transform: translateX(calc(61.3 * var(--s))) scale(.42, .86); }
.ipod__cover:nth-child(5) { transform: translateX(calc(98 * var(--s))) scale(.42, .86); }
.ipod__cover:nth-child(6) { transform: translateX(calc(134.7 * var(--s))) scale(.42, .86); }
/* the thumb bends from its root, far down the hand (scene 450, 520) */
.ipod__thumb {
  position: absolute;
  left: calc(130 * var(--s));
  top: calc(176.22 * var(--s));
  width: calc(168 * var(--s));
  height: auto;
  transform-origin: 190.476% 217.2%;
  will-change: transform;
}
.why__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.why__title {
  font-family: var(--font-display);
  font-size: var(--text-feature);
  line-height: var(--lh-feature);
  font-weight: 700;
  font-variation-settings: "opsz" 14;
  text-wrap: balance;
}
.why__body {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
}

/* Phones and tablets (Figma 595:4105): the words on top and the iPod in
   its hand in the bottom-right corner, running off the card's bottom edge.
   No earbuds or cable. The card keeps room for the hand below the words. */
@media (max-width: 899px) {
  .why { --iw: calc(100vw - 40px); padding: 16px 16px calc(var(--iw) * .6625); border-radius: 24px; }
  .why__paper { background: #f3e6fd; } /* #f5e7ff in Figma, tuned for the paper blend */
  .why__title { font-size: 20px; line-height: 32px; }
  .why__body { font-size: var(--text-small); line-height: var(--lh-small); }
  .why__layer, .why__cable, .why__jack { display: none; }
  /* scene 197.7 of the 320px card, 21.1px past its bottom (Figma 642:8911) */
  .ipod { right: 0; bottom: calc(-21.11 * 100cqw / 320); width: calc(197.7 * 100cqw / 320); }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* the words on the left; the hand beside them, at most 300px wide */
  .why { --iw: min(calc((100vw - 48px) * .4), 300px); padding: 40px; border-radius: 32px; min-height: calc(var(--iw) * 1.0375 + 40px); }
  .why__text { width: 55%; }
  .why__title { font-size: var(--text-feature); line-height: var(--lh-feature); }
  .why__body { font-size: var(--text-body); line-height: var(--lh-small); }
  .ipod { width: var(--iw); bottom: calc(var(--iw) * -.0867); right: 0; }
}
/* desktop: Figma's card, the words over the lower left, the hand at the bottom right */
@media (min-width: 900px) {
  .why { aspect-ratio: 960 / 562; }
  /* flush with the card's right and bottom edges, no gap under the hand (Figma 629:6364) */
  .ipod { right: 0; bottom: -1px; width: 31.042%; }
  .why__text {
    position: relative;
    width: 55.42%;            /* 532 of 960 */
    padding: 26.04% 0 48px 5%; /* text starts 250px down, 48px in (Figma 504:5972) */
    box-sizing: content-box;
  }
}

/* ---------------------------------------------------------------------
   My track record
   --------------------------------------------------------------------- */
.records {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.record {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  min-height: 554px;
  padding: 120px 32px 40px;
  /* the disc, its 12px inset and the 96px corner keep Figma's proportions at every size */
  --disc: 164px;
  border-radius: 32px calc(var(--disc) * 96 / 164) 32px 32px;
  color: var(--ink-body);
}
.record::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -533.5px;
  left: calc(50% - 557px);
  width: 1114px;
  height: 1671px;
  background: var(--paper) 0 0 / 100% 100%;
  mix-blend-mode: luminosity;
  opacity: .5;
  pointer-events: none;
}
.record--zeta { background: #f2dafc; } /* #f5dcff in Figma, tuned so the paper lands on Figma's rendered colour */
.record--coditas { background: #b2d2ea; } /* rgba(180,225,255,.41) on white in Figma, made opaque and tuned the same way */
.record--coditas::before { top: -568.5px; left: -38px; }
/* the disc turns slowly, like a record playing; its holder stays still and carries the shadow */
.record__spin {
  position: absolute;
  top: calc(var(--disc) * 12 / 164);
  right: calc(var(--disc) * 12 / 164);
  width: var(--disc);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  /* Figma's soft shadow under the record (y 9.8, blur 19.6 at 164px), scaled with the disc */
  box-shadow: 0 calc(var(--disc) * .0598) calc(var(--disc) * .1196) rgba(71, 71, 117, .15);
}
.record__disc {
  display: block;
  width: 100%;
  height: auto;
  animation: record-spin 6s linear infinite;
}
@keyframes record-spin { to { rotate: 360deg; } }
.record__head { display: flex; flex-direction: column; gap: 8px; color: var(--ink-plum); }
.record__name {
  font-family: var(--font-display);
  font-size: var(--text-section);
  line-height: .9;
  font-weight: 700;
  letter-spacing: .03em;
  font-variation-settings: "opsz" 14;
}
.record__role {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: 1.25;
  font-weight: 600;
  font-variation-settings: "opsz" 14;
  color: var(--ink-plum);
}
.record__years {
  opacity: .75;
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: var(--lh-heading);
  font-weight: 500;
  letter-spacing: .03em;
  font-variation-settings: "opsz" 14;
}
.record__list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding-left: 30px;
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
}
.record__list li::marker { font-size: .7em; }
/* Phones and tablets (Figma 595:3688): the phone card. A 120px disc in the
   top-right corner, the short name and years beside it, the points below.
   One column on phones, two from 768px (desktop's layout). */
@media (max-width: 1007px) {
  .record {
    --disc: 120px;
    min-height: 395px;  /* both cards are 395px tall in Figma */
    padding: 20px;
    border-radius: 24px 84px 32px 24px;
  }
  .record--zeta { background: #f2dafc; }    /* #f5dcff in Figma, tuned for the paper blend */
  .record--coditas { background: #bfe5ff; } /* #b4e1ff in Figma, tuned the same way */
  /* Figma's phone disc, drawn with its soft shadow, so the picture is 1.24x the disc */
  /* Figma's phone disc, with its soft shadow under the holder */
  .record__spin { top: 20px; right: 20px; }
  .record__head { gap: 4px; margin-top: 56px; padding-right: 136px; }
  .record__name { font-size: 32px; line-height: 36px; font-weight: 800; }
  .record__name-more { display: none; }
  .record__role { margin-top: 2px; font-size: 16px; line-height: 20px; }
  .record__years { font-size: 14px; line-height: 20px; letter-spacing: 0; }
  .record__list { gap: 14px; margin-top: 33px; padding-left: 22px; font-size: var(--text-small); line-height: 20px; }
}
/* the narrowest phones: a smaller disc, so the name still fits beside it */
@media (max-width: 359px) {
  .record { --disc: 96px; }
  .record { min-height: 0; padding-bottom: 28px; }
  .record__spin { top: 16px; right: 16px; }
  .record__head { margin-top: 48px; padding-right: 108px; }
  .record__list { margin-top: 28px; }
}

/* ---------------------------------------------------------------------
   Footer bar. The closing card was removed from Figma; the standard footer
   bar (Figma 504:5939, outlined, 72px corners) ends the page again.
   --------------------------------------------------------------------- */
.site-footer { margin-top: calc(92 * var(--k)); padding-bottom: calc(52 * var(--k)); }
.site-footer .site-bar { border: 1px solid #000; border-radius: 72px; }
@media (max-width: 719px) {
  .site-footer .site-bar { padding-inline: 16px; border-radius: 36px; }
}

/* ---------------------------------------------------------------------
   So Let's Talk (desktop 598:11025, 598:11181; phones 598:11456, 598:11477):
   the fourth banner, then the LinkedIn and email cards.
   --------------------------------------------------------------------- */
.talk { margin-top: calc(46 * var(--k)); }
.socials { display: grid; gap: 16px; margin-top: calc(27 * var(--k)); }
.social {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  text-decoration: none;
}
.social--linkedin { min-height: 164px; padding: 34px; background: #bbd8ec; --paper-opacity: .7; } /* #b4e1ff in Figma, tuned */
/* hover: the logo and the envelope grow like the hero objects (1.2, springy) */
.social--linkedin img, .social__envelope { transition: scale .3s cubic-bezier(.34, 1.56, .64, 1); }
.social--linkedin img { width: 96px; height: 96px; }
.social--linkedin:hover img, .social--linkedin:focus-visible img, .social--email.is-copyable:hover .social__envelope { scale: 1.2; }
.social--email { min-height: 272px; padding: 24px 20px; gap: 10px; background: #f1d6ee; } /* #ffdbfb in Figma, tuned */
.social__envelope { width: 140px; height: auto; }
.social__email, .social__copy {
  font-family: var(--font-round);
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  text-align: center;
  color: #73426d;
  text-decoration: none;
  overflow-wrap: break-word;
}
.social__email:hover { text-decoration: underline; text-underline-offset: 3px; }
.social__copy { padding: 0; border: 0; background: none; cursor: pointer; }
.social__copy:hover { text-decoration: underline; text-underline-offset: 3px; }
.social__copy:focus-visible { outline: 2px solid var(--accent-violet); outline-offset: 3px; border-radius: 4px; }
/* after copying, the button says so for a moment */
/* with the script, the whole email card is the copy button */
.social--email.is-copyable { cursor: pointer; }
.social--email.is-copyable .social__email { pointer-events: none; }
.social__copy::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.social--email.is-copyable:hover .social__copy { text-decoration: underline; text-underline-offset: 3px; }
.social--email:has(.social__copy:focus-visible) { outline: 2px solid var(--accent-violet); outline-offset: 3px; }
.social__copy:focus-visible { outline: none; }
/* tablets and desktop: Figma's two cards side by side, 244px tall */
@media (min-width: 600px) {
  .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social { min-height: 244px; }
  /* same 32px corners as the other desktop cards */
  .social { border-radius: 32px; }
  .social--linkedin { background: #c9d9ed; } /* #c8e1ff in Figma, tuned */
  .social--email { background: #e6d7ec; --paper-opacity: .7; } /* #f6dfff in Figma, tuned */
  .social__email, .social__copy { color: #754193; }
}

/* ---------------------------------------------------------------------
   Phones (Figma 595:3688, 360px wide)
   --------------------------------------------------------------------- */
@media (max-width: 599px) {
  /* Figma's phone banners, placed from the left edge in phone px */
  .tapes { --m: calc(100vw / 360); height: calc(var(--mh) * var(--m)); }
  .tape {
    left: calc(var(--px) * var(--m));
    top: calc(var(--py) * var(--m));
    width: calc(var(--w) * var(--m));
    height: calc(var(--th) * var(--m));
    margin: 0;
    translate: none;
    transform-origin: 0 0;
    --vl: calc(-1 * var(--px) * var(--m));
  }
  .tape::before { background-size: calc(450 * var(--m)) auto; }
  .tape--back  { --px: var(--mbx); --py: var(--mby); --w: var(--mbw); --th: var(--mbh); --r: var(--mbr); }
  .tape--front { --px: var(--mfx); --py: var(--mfy); --w: var(--mfw); --th: var(--mfh); --r: var(--mfr); }
  .tape__art img { left: 0; width: 100%; translate: none; }
  /* phone titles wrap onto two lines at 20px, centred on the tape (24px line height) */
  .tape__title {
    display: flex;
    align-items: center;
    justify-content: center;
    left: calc(var(--mtx) * var(--m));
    top: calc(var(--mty) * var(--m));
    width: calc(var(--mtw) * var(--m));
    height: calc(var(--mth) * var(--m));
    translate: none;
    font-size: calc(20 * var(--m));
    line-height: calc(24 * var(--m));
    text-align: center;
    text-wrap: balance;
    white-space: var(--title-ws, normal);
  }
  /* Figma's phone banners (642:8789, 642:8845, 671:4614, 642:11643): each
     band runs from the content above to the content below */
  .tapes--bring {
    --mh: 234.3;
    --mbx: -357; --mby: 174.89; --mbw: 1077.75; --mbh: 69.75; --mbr: -9.32deg;
    --mfx: -93.04; --mfy: 73.3; --mfw: 549; --mfh: 64; --mfr: 1.89deg;
    --mtx: 212; --mty: 8; --mtw: 125; --mth: 48;
  }
  .tapes--why {
    --mh: 224;
    --mbx: -359.13; --mby: 148.88; --mbw: 1078.26; --mbh: 64; --mbr: -6.89deg;
    --mfx: -94.33; --mfy: 28; --mfw: 568; --mfh: 64; --mfr: 9.6deg;
    --mtx: 212; --mty: 8; --mtw: 144; --mth: 48;
  }
  .tapes--track {
    --mh: 224;
    --mbx: -448.76; --mby: 244.78; --mbw: 1182.83; --mbh: 64; --mbr: -12.65deg;
    --mfx: -113; --mfy: 90.56; --mfw: 590.58; --mfh: 63.93; --mfr: 2.42deg;
    --mtx: 211.8; --mty: 20; --mtw: 167; --mth: 24;
    --title-c: #a4f99c; --title-ws: nowrap;
  }
  .tapes--talk {
    --mh: 184;
    --mbx: -398.63; --mby: -.57; --mbw: 1182.83; --mbh: 64; --mbr: 8.77deg;
    --mfx: -92.64; --mfy: 113.94; --mfw: 543.58; --mfh: 63.93; --mfr: -9deg;
    --mtx: 211.8; --mty: 20; --mtw: 120; --mth: 24; --title-ws: nowrap;
  }

  /* cards sit 20px in from the edges */
  main .container, .site-footer.container { padding-inline: 20px; }

  /* the gaps between sections are Figma's */
  .bring { margin-top: 0; }
  .tape-section--why { margin-top: 0; }
  .tape-section--why .why { margin-top: 0; }
  .tape-section--track { margin-top: 0; }
  .tape-section--track .records { margin-top: 0; }
  .talk { margin-top: 0; }
  .socials { margin-top: 40px; }

  /* the footer keeps only its note (Figma 598:11494) */
  .site-footer { margin-top: 28px; padding-bottom: 30px; }
  .site-footer .site-bar { justify-content: center; min-height: 80px; padding: 16px; border-radius: 72px; }
  .site-footer .site-bar__avatar, .site-footer .site-bar__logo, .site-footer .pill { display: none; }
  .site-footer .site-bar__note { order: 0; margin: 0; }
}