/* ------------------------------------------------------------
   Design tokens (from the Figma file and our palette decisions)
   ------------------------------------------------------------ */
:root {
  --ink: #231F1C;          /* warm charcoal, instead of pure black */
  --orange: #EA5B0C;       /* "Primary orange" in Figma: labels, scribble */
  --orange-deep: #D64A1C;  /* nav "Work" and the counter in the design */
  --paper: #FFFFFF;        /* the Figma frame is white, with grain on top */
  --cream: #F7F3EC;
  --teal: #2FA593;         /* placeholder until the real blob SVG is dropped in */
  --dark: #2A211C;         /* placeholder, same reason */

  --font-display: "Antonio", "Anton", sans-serif;
  --font-body: "Lato", system-ui, sans-serif;

  /* 1 design pixel. The hero is drawn on a 1440 x 1080 canvas and scaled to fit whichever is tighter, the width or the height, so it never needs scrolling. */
  --u: min(calc(100vw / 1440), calc(100dvh / 1080));
  --cw: 1440; --ch: 1080;   /* canvas size in design pixels */
}

/* Wide windows (16:9 and wider): the 4:3 canvas would leave wide empty margins, so it is drawn a little larger.
   The top and bottom few design pixels of the canvas hold nothing important, so they may run past the window. */
@media (min-aspect-ratio: 8/5) and (min-width: 701px) {
  :root { --u: min(calc(100vw / 1440), calc(100dvh / 980)); }
  .fact--for { --x: -125 !important; }                    /* a wide window has room past the canvas edges */
  .fact--for { left: max(calc(var(--u) * var(--x)), calc(24px - (100vw - var(--u) * 1440) / 2)) !important; }   /* never closer than 24px to the window edge */
  .fact--role { --x: 1410 !important; left: min(calc(var(--u) * var(--x)), calc(50vw + var(--u) * 720 - 24px - var(--u) * 165)) !important; }   /* and never closer than 24px to the right edge */
  .fact--type { --y: 925 !important; --x: 440 !important; --w: 560 !important; }   /* clear of the bottom edge, and wide enough for two lines */
}

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

html, body { margin: 0; }

/* This screen never scrolls the page. Later, scrolling will move between cards instead. */
html, body { height: 100%; overflow: hidden; }

body {
  /* The grain is the page's own background: it tiles forever, so it never runs out on big screens. */
  /* The PNG is about 10% opaque. Stacking it twice gives about 19%; delete one of the two url() lines for ~10%, add a third for ~27%. */
  background:
    url("assets/noise.png") repeat top left / 720px 512px,
    url("assets/noise.png") repeat top left / 720px 512px,
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
}

img { display: block; max-width: none; }
ul { margin: 0; padding: 0; list-style: none; }
p, dl, dd { margin: 0; }

/* ------------------------------------------------------------
   The stage and the positioning helper
   ------------------------------------------------------------ */
.stage {
  position: relative;
  width: 100vw;
  height: 100dvh;                  /* exactly the window: logo and nav hug the top-left corner, the counter the bottom-right */
  overflow: hidden;
  isolation: isolate;              /* transparent, so the body's grain shows through */
}

/* The middle of the page keeps its design proportions and sits in the centre of the window. */
.canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * var(--cw));
  height: calc(var(--u) * var(--ch));
  transform: translate(-50%, -50%);
}

/* Anything with class "layer" is placed using --x, --y, --w, --h in design pixels. */
.layer {
  position: absolute;
  left: calc(var(--u) * var(--x));
  top: calc(var(--u) * var(--y));
  width: calc(var(--u) * var(--w));
  height: calc(var(--u) * var(--h, 0));
}
.layer:not([style*="--h"]) { height: auto; }

/* ------------------------------------------------------------
   The project cards
   Every card sits in one of four slots: centre (current), upper right (next),
   lower left (previous) or hidden. script.js gives each card its slot and its
   position (--x --y --w --h). The transition below is what makes it glide.
   ------------------------------------------------------------ */
.cards { position: absolute; inset: 0; }

.card {
  /* Every card is the size and place of the centre card. A transform then
     moves and scales it into its slot, which the browser animates smoothly. */
  --x: 333; --y: 256; --w: 775; --h: 652;
  display: block;
  color: inherit;
  text-decoration: none;
  z-index: var(--z, 1);
  transform-origin: 0 0;
  will-change: transform;
  transition:
    transform 0.7s cubic-bezier(0.2, 0.85, 0.25, 1),   /* quick start, long soft landing */
    opacity 0.45s ease;
}
.cards:not(.is-ready) .card,
.cards:not(.is-ready) .card * { transition: none !important; }     /* no animation on the first paint */
.card[data-slot="0"] { --z: 3; }
.card[data-slot="1"], .card[data-slot="3"] { --z: 2; cursor: pointer; }
.card[data-slot="2"] { --z: 1; opacity: 0; pointer-events: none; }

/* The white card with the scribbled outline, shown when the card is current. */
.card__front {
  position: absolute;
  inset: 0;
  /* A card waiting at the side is the same card, out of focus and without its orange outline. A soft shadow
     lifts it off the page instead, since the white blob and the page are almost the same colour. */
  filter: blur(var(--soft, calc(var(--u) * 5))) drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(35, 31, 28, 0.22));
  transition: filter 0.5s ease;
}
.card[data-slot="0"] .card__front { filter: blur(0px) drop-shadow(0 0 0 rgba(35, 31, 28, 0)); }

.card__blob { position: absolute; inset: 0; }
.card__blob img { position: absolute; inset: 0; width: 100%; height: 100%; }
.card__blob-line { transition: opacity 0.4s ease; }
.card:not([data-slot="0"]) .card__blob-line { opacity: 0; }       /* the orange outline belongs to the card in focus only */

.card__shot { object-fit: cover; box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 40) rgba(6, 95, 70, 0.2); }
.card__shot--cover { object-fit: contain; box-shadow: none; border-radius: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card[data-slot="0"]:hover .card__shot--cover { transform: scale(1.04); }

/* The three screens on a card. They sit stacked while the card waits at the
   side, and fan out when it comes to the centre. Hover opens them a little more. */
.card__screen {
  object-fit: contain; transform-origin: 50% 62%;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i) * 70ms);
}
.card__screen:nth-of-type(1) { z-index: 1; transform: translateX(16%) scale(.9); }
.card__screen:nth-of-type(2) { z-index: 3; transform: scale(.94); }
.card__screen:nth-of-type(3) { z-index: 2; transform: translateX(-16%) scale(.9); }
.card[data-slot="0"] .card__screen:nth-of-type(1) { transform: translateX(1%) rotate(-3deg); }
.card[data-slot="0"] .card__screen:nth-of-type(2) { transform: translateY(-3%) scale(1.06); }
.card[data-slot="0"] .card__screen:nth-of-type(3) { transform: translateX(-1%) rotate(3deg); }
.card[data-slot="0"]:hover .card__screen:nth-of-type(1) { transform: translate(-4%, 1%) rotate(-4deg); }
.card[data-slot="0"]:hover .card__screen:nth-of-type(2) { transform: translateY(-4%) scale(1.06); }
.card[data-slot="0"]:hover .card__screen:nth-of-type(3) { transform: translate(4%, 1%) rotate(4deg); }
@media (prefers-reduced-motion: reduce) {
  .card__screen, .card__shot--cover { transition: none; }
}
.card__shot--back { border-radius: calc(var(--u) * 12); }
.card__shot--front { border-radius: calc(var(--u) * 27); }

/* Stand-in screenshots until the real ones arrive. */
.card__ph {
  background: linear-gradient(160deg, #ffffff 0%, var(--ph, #eef3f1) 100%);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 40) rgba(6, 95, 70, 0.2);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--u) * 26);
  color: var(--ink);
  text-align: center;
}
.card__ph--back { border-radius: calc(var(--u) * 12); }
.card__ph--front { border-radius: calc(var(--u) * 27); }

.card:focus-visible { outline: none; }
.card:focus-visible .card__blob { filter: drop-shadow(0 0 calc(var(--u) * 6) var(--orange)); }

/* The facts fade out and back in when the card changes. */
.fact dd, #fact-type, .counter__num { transition: opacity 0.25s ease; }
.is-swapping .fact dd, .is-swapping #fact-type, .is-swapping .counter__num { opacity: 0; }   /* only the changing text fades; labels like "Project type:" stay */

/* ------------------------------------------------------------
   Logo and navigation
   ------------------------------------------------------------ */
.logo {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
}
.logo__blob {
  position: absolute;
  inset: 0;
  background: #F7E6D6;                                   /* apricot cream, until the real shape is dropped in */
  border-radius: 48% 52% 50% 50% / 30% 32% 68% 70%;
}
.logo__blob:has(img) { background: none; border-radius: 0; display: grid; place-items: center; }
/* The logo blob is the big entry blob, turned a quarter and squeezed, so the two always match. */
.logo__blob img { width: calc(var(--u) * 210); height: calc(var(--u) * 100); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); object-fit: fill; }
.logo__text {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 40);
  line-height: 1;
  display: grid;
  place-items: center;
}
/* The name, with its R in BBH Sans Bartle, turned the same quarter as the blob. */
.logo__r { display: block; width: calc(var(--u) * 118); height: calc(var(--u) * 28); transform: rotate(-90deg); }

.nav { z-index: 5; }
.nav ul { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }

/* Every link is the same height, so the rows are evenly spaced whichever one is active.
   Every word starts at the same left edge; the orange dot has a column of its own, to the left of the words. */
.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--u) * 31);
  padding-left: calc(var(--u) * 24);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--u) * 20);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--orange-deep); }

.nav__link--active {
  font-size: calc(var(--u) * 25);
  color: var(--orange-deep);
}
.nav__link--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 15);
  transform: translateY(-50%);
  background: url(assets/nav-dot.svg) center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------
   Project facts and counter
   ------------------------------------------------------------ */
.fact { z-index: 5; font-size: calc(var(--u) * 18); line-height: 1.3; }

.fact dt,
.fact__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--u) * 21);
  color: var(--orange);
  margin-bottom: calc(var(--u) * 6);
}
.fact dd { white-space: nowrap; }                          /* the short facts sit on one line in the design */
.fact--center { text-align: center; }
     /* the two side facts flank the cards, the right one lined up with the right margin */
.fact--center .fact__label { margin-bottom: calc(var(--u) * 9); }

/* The big number is the anchor of the page, like a page number in a book. */
.counter {
  position: absolute;
  right: calc(var(--u) * 40);
  bottom: calc(var(--u) * 10);
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  line-height: 0.8;
  color: var(--orange-deep);
}
.counter__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--u) * 190);
}
.counter__total {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--u) * 22);
}

/* Small labels along the top and bottom edges. */
.edge {
  position: absolute;
  z-index: 25;                     /* above the entry screen, so these stay crisp on both screens */
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 16);
  color: var(--ink);
  white-space: nowrap;
}
.edge--top { top: calc(var(--u) * 58); left: calc(var(--u) * 420); right: calc(var(--u) * 40); }
.edge--bottom { bottom: calc(var(--u) * 36); left: calc(var(--u) * 40); }

.edge .scroll-cue { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--u) * 22); color: var(--orange); letter-spacing: .02em; }

/* Phone-only pieces are off on bigger screens. */
.burger, .menu, .logo__blob-m, .cue-m { display: none; }

/* ------------------------------------------------------------
   Respect people who ask their device for less motion
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Entry screen
   ------------------------------------------------------------ */
.intro { --intro-scale: 1.12; position: absolute; inset: 0; z-index: 20; visibility: hidden; cursor: pointer; }
.intro .canvas { transform: translate(-50%, -50%) scale(var(--intro-scale)); }   /* a little bigger than the design, so the middle feels fuller */

/* The work page behind the glass drifts slowly while the entry screen is open. */
.stage.is-intro .cards { animation: drift 9s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate(calc(var(--u) * -70), calc(var(--u) * 45)) rotate(-4deg); }
  to   { transform: translate(calc(var(--u) * 70), calc(var(--u) * -50)) rotate(4deg); }
}
.stage.is-intro .intro { visibility: visible; }
.stage.is-intro .logo { opacity: 0; pointer-events: none; }
.stage.is-intro.is-leaving .logo { opacity: 1; transition: opacity .3s .65s; }

/* The work page, blurred behind a milky pane. */
.intro__glass {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .8s ease;
}

.intro__blob, .intro__name { transition: transform .95s cubic-bezier(.65, 0, .25, 1), opacity .3s ease; transform-origin: 50% 50%; }
.intro__blob img { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; animation: pulse 4.5s ease-in-out infinite; }
.intro__blob.is-fallback::before {                       /* stand-in until assets/first-blob.svg is uploaded */
  content: ""; position: absolute; inset: 0;
  background: #fbf3e6; border: calc(var(--u) * 3) solid var(--orange); border-radius: 50%;
  animation: pulse 4.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.stage.is-leaving .intro__blob img, .stage.is-leaving .intro__blob.is-fallback::before { animation-play-state: paused; }

.intro__hello, .intro__bio { margin: 0; color: var(--ink); text-align: center; transition: opacity .35s ease .5s; }
.intro__hello { font: 400 calc(var(--u) * 38)/1 "Kaushan Script", "Caveat", cursive; color: var(--orange); transform: rotate(-4deg); transform-origin: 0 50%; text-align: left; }
.intro__bio { font: 400 calc(var(--u) * 16)/1.4 var(--font-body); }

.intro__name {
  margin: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: calc(var(--u) * 207); line-height: 1;
  color: var(--ink);
  filter: url(#grain);
}
.intro__cue { display: none; }
/* The small labels along the top go soft with the rest of the page while the entry screen is open. */
.edge--top { transition: filter .5s ease .45s; }
.stage.is-intro:not(.is-leaving) .edge--top { filter: blur(calc(var(--u) * 6)); transition-delay: 0s; }
/* Leaving: texts and glass fade, the blob and name are moved by script.js. */
.stage.is-leaving .intro__glass,
.stage.is-leaving .intro__hello,
.stage.is-leaving .intro__bio { opacity: 0; transition-delay: 0s; }
.stage.is-leaving .intro__hello, .stage.is-leaving .intro__bio { transition-duration: .3s; }
.stage.is-leaving .intro__blob, .stage.is-leaving .intro__name { opacity: 0; transition: transform .95s cubic-bezier(.65, 0, .25, 1), opacity .3s ease .65s; }
.stage.is-pre .intro * { transition: none !important; }
.stage.is-pre .intro__glass, .stage.is-pre .intro__hello, .stage.is-pre .intro__bio { opacity: 0; }

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

/* ------------------------------------------------------------
   Phones: the Figma "Android Compact" frame, 412 x 917.
   The width sets the size of everything (--u = 1 design pixel = 1/412 of the window width).
   Then each thing is pinned where it belongs: logo and top texts to the top, the project type,
   swipe cue and number to the bottom, the cards centred in between. So browsers with different
   toolbar heights never leave the logo floating in from the edge.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  :root {
    --u: min(calc(100vw / 412), calc(100dvh / 780));
    --ox: calc((100vw - var(--u) * 412) / 2);
  }
  html, body { overscroll-behavior: none; }

  .nav, .edge--top { display: none !important; }

  /* the canvas is the whole window; the cards get their own centred 412 x 917 area */
  .canvas { left: 0; top: 0; width: 100vw; height: 100dvh; transform: none; }
  .cards {
    inset: auto; left: var(--ox); width: calc(var(--u) * 412); height: calc(var(--u) * 917);
    top: calc(50dvh - var(--u) * 458.5 + var(--u) * 6);
  }
  .stage > .layer, .canvas > .layer { left: calc(var(--ox) + var(--u) * var(--x)); }
  .stage > .layer, .canvas > .layer { top: calc(var(--u) * var(--y)); }

  /* cards */
  .card__front { --soft: calc(var(--u) * 4); }
  .card__shot--back, .card__ph--back { border-radius: calc(var(--u) * 6); }
  .card__shot--front, .card__ph--front { border-radius: calc(var(--u) * 13); }
  .card__ph { font-size: calc(var(--u) * 13); }

  /* facts: label in Antonio, text in Lato Light */
  .fact { font-size: calc(var(--u) * 11.5); }
  .fact--role { margin-left: calc(var(--u) * -30); }   /* keeps the left-aligned role text inside the screen */
  .fact dt, .fact__label { font-size: calc(var(--u) * 13.5); margin-bottom: calc(var(--u) * 4); }
  .fact--center .fact__label { margin-bottom: calc(var(--u) * 8); }
  .fact--for  { --x: 24 !important;  --y: 120 !important; --w: 260 !important; }
  .fact--role { --x: 308 !important; --y: 160 !important; --w: 100 !important; }   /* both facts sit in one band: Role ends where Designed for's band ends */
  .fact--type { --x: 30 !important;  --w: 352 !important; top: auto !important; bottom: calc(var(--u) * 116); }

  /* logo: wide apricot pill, name across it, hugging the left margin */
  .logo { --x: 24 !important; --y: 10 !important; --w: 140 !important; --h: 66 !important; }
  .logo { justify-content: center; }
  .logo__blob { justify-content: start; right: auto; left: calc(var(--u) * -16); width: calc(var(--u) * 140); }   /* the word, not the blob, lines up with the texts below */
  .logo__blob img:not(.logo__blob-m) { display: none; }
  .logo__blob img.logo__blob-m { display: block; width: calc(var(--u) * 140); height: calc(var(--u) * 66); position: static; transform: none; object-fit: fill; }
  .logo__text { font-size: calc(var(--u) * 28); }
  .logo__r { width: calc(var(--u) * 88); height: calc(var(--u) * 21); transform: translateX(calc(var(--u) * -16)); }

  /* menu button and menu */
  .burger {
    display: block; position: absolute; z-index: 40;
    right: calc(var(--ox) + var(--u) * 18); top: calc(var(--u) * 18);
    padding: calc(var(--u) * 10) calc(var(--u) * 6);
    background: none; border: 0; color: var(--orange); cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none;
  }
  .burger svg { display: block; width: calc(var(--u) * 34); height: calc(var(--u) * 19); }
  .menu {
    display: block;
    position: absolute; inset: 0; z-index: 30;
    /* No blur: the menu is a plain sheet of the site's own grainy paper, so nothing behind it shows through. */
    background:
      url("assets/noise.png") repeat top left / 720px 512px,
      url("assets/noise.png") repeat top left / 720px 512px,
      var(--paper);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  .menu.is-open { opacity: 1; pointer-events: auto; }
  /* The blob grows out of the menu button (top right) and settles in the middle. */
  .menu__blob {
    position: absolute;
    left: calc(var(--ox) + var(--u) * 53); top: calc(var(--u) * 166);
    width: calc(var(--u) * 340); height: calc(var(--u) * 342);
    transform-origin: 90% 0%; transform: scale(.15) rotate(8deg); opacity: 0;
    transition: transform .3s ease, opacity .25s ease;
  }
  .menu__blob::before {                 /* the scribbled orange outline on its own; it breathes like the entry blob */
    content: ""; position: absolute; inset: 0;
    background: url(assets/menu-blob-line.svg) center / 100% 100% no-repeat;
    animation: pulse 4.5s ease-in-out infinite; animation-play-state: paused;
  }
  .menu.is-open .menu__blob::before { animation-play-state: running; }
  .menu.is-open .menu__blob { transform: none; opacity: 1; transition: transform .6s cubic-bezier(.34, 1.4, .5, 1), opacity .25s ease; }
  .menu ul {
    position: absolute; left: calc(var(--ox) + var(--u) * 150); top: calc(var(--u) * 268);
    display: flex; flex-direction: column; gap: calc(var(--u) * 5); margin: 0; padding: 0; list-style: none;
  }
  .menu__link {
    display: flex; align-items: center; gap: calc(var(--u) * 8);
    font-family: var(--font-display); font-weight: 600; font-size: calc(var(--u) * 29); line-height: normal;
    color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: translateY(calc(var(--u) * 8)); transition: opacity .2s ease, transform .2s ease;
  }
  .menu.is-open .menu__link { opacity: 1; transform: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .3, 1); }
  .menu.is-open li:nth-child(1) .menu__link { transition-delay: .18s; }
  .menu.is-open li:nth-child(2) .menu__link { transition-delay: .24s; }
  .menu.is-open li:nth-child(3) .menu__link { transition-delay: .30s; }
  .menu.is-open li:nth-child(4) .menu__link { transition-delay: .36s; }
  .menu.is-open li:nth-child(5) .menu__link { transition-delay: .42s; }
  .menu__link--active { font-size: calc(var(--u) * 36); color: var(--orange-deep); margin-bottom: calc(var(--u) * 4); }
  /* The pages you are not on sit a little lighter; touching one brings it to full ink. */
  .menu__link:not(.menu__link--active) { color: rgba(35, 31, 28, .72); transition: color .25s ease, opacity .35s ease, transform .45s cubic-bezier(.2, .8, .3, 1); }
  .menu__link:not(.menu__link--active):active { color: var(--ink); }
  .menu__link--active::before {
    content: ""; flex: none; width: calc(var(--u) * 20); height: calc(var(--u) * 20);
    background: url(assets/nav-dot.svg) center / 100% 100% no-repeat;
  }

  /* bottom, like desktop: "Swipe" bottom left, big number bottom right */
  .edge--bottom { left: calc(var(--ox) + var(--u) * 24); right: auto; top: auto; bottom: calc(var(--u) * 24); }
  .cue-d { display: none; }
  .cue-m { display: inline; }
  .cue-m i { display: none; }
  .edge .scroll-cue { font-size: calc(var(--u) * 15); }
  .counter {
    left: auto; top: auto; width: auto; line-height: .8; gap: calc(var(--u) * 5); color: var(--orange-deep);
    right: calc(var(--ox) + var(--u) * 24); bottom: calc(var(--u) * 12);
  }
  .counter__num { font-size: calc(var(--u) * 62); }
  .counter__total { font-size: calc(var(--u) * 14); }

  /* ---- entry screen: the same as desktop (blur, drift, fonts, hover, grain), at the phone's own size ---- */
  .intro { --intro-scale: 1; }
  .intro .canvas { transform: none; }
  .intro .canvas > .layer { top: calc(50dvh - var(--u) * 458.5 + var(--u) * 6 + var(--u) * var(--y)); }
  .intro__blob img { width: 100%; height: 100%; object-fit: fill; }   /* stand-in shape until the phone blob is exported */
  .intro__hello { font-size: calc(var(--u) * 15); }
  .intro__name { font-size: calc(var(--u) * 80); }
  .intro__bio { font-size: calc(var(--u) * 10); }
  .stage.is-intro .burger { opacity: 0; }
  .stage.is-intro.is-leaving .burger { opacity: 1; transition: opacity .3s .65s; }
  /* the cue is the same one as desktop: crisp above the entry screen, reading "Scroll" */
  .stage.is-intro .cue-d { display: inline; }
  .stage.is-intro .cue-m { display: none; }
  .stage.is-intro .cards { animation: drift-m 9s ease-in-out infinite alternate; }
  @keyframes drift-m {
    from { transform: translate(calc(var(--u) * -28), calc(var(--u) * 20)) rotate(-4deg); }
    to   { transform: translate(calc(var(--u) * 28), calc(var(--u) * -22)) rotate(4deg); }
  }
  .intro__blob  { --x: 11.8 !important;  --y: 226.3 !important; --w: 401 !important; --h: 309 !important; }
  .intro__hello { --x: 62 !important;  --y: 325 !important; --w: 110 !important; text-align: left; }
  .intro__name  { --x: 0 !important;   --y: 329 !important; --w: 412 !important; --h: 120 !important; }
  .intro__bio   { --x: 56 !important; --y: 433 !important; --w: 300 !important; }
}

/* Lato has no weight between regular (400) and bold (700), so a hairline stroke gives it one step more weight. */
.fact dd, #fact-type { font-weight: 400; }   /* the Designed for, Role and Project type texts are a step heavier than the rest */
@media (max-width: 700px) { .fact dd, #fact-type { -webkit-text-stroke: .35px currentColor; } }   /* and on the phone one more step */