/* Yuki Collins portfolio. Hand-built, no framework. */

@font-face { font-family: "Lexend"; font-weight: 400; font-display: swap; src: url(../fonts/lexend-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 500; font-display: swap; src: url(../fonts/lexend-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 700; font-display: swap; src: url(../fonts/lexend-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 800; font-display: swap; src: url(../fonts/lexend-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Lexend Exa"; font-weight: 800; font-display: swap; src: url(../fonts/lexend-exa-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url(../fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 500; font-display: swap; src: url(../fonts/source-sans-3-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url(../fonts/source-sans-3-latin-700-normal.woff2) format("woff2"); }

:root {
  --ground: #f8f6ec;
  --ink: #0a0b3e;        /* Text */
  --brown: #451111;      /* Text secondary (brown) */
  --gray: #54606d;
  --accent: #b92c5a;     /* Text accent */

  /* The design canvas is 1440 x 874. Horizontal positions follow the
     viewport width, vertical positions follow the viewport height, and
     sizes follow whichever is smaller, so the hero always fits one screen. */
  --vh: 100vh;
  --sx: calc(100vw / 1440);
  --sy: calc(var(--vh) / 874);
  --s: min(var(--sx), var(--sy));
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { overscroll-behavior-x: none; }   /* sideways swipes move the carousel, not the browser history */

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "Source Sans 3", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
p, figcaption, li { text-wrap: pretty; }   /* extra help where supported; typeset.js covers the rest */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Text that rises in word by word (home, Selected Work, project pages).
   Scripts add these classes only when motion is allowed. The transition
   sits on the "in" state, so only the entrance animates. */
.rv-words .w { display: inline-block; opacity: 0; transform: translateY(0.45em); }
.rv-words.is-in .w {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rv-fade { opacity: 0; transform: translateY(12px); }
.rv-fade.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease var(--d, 0ms), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms);
}

/* ---------- Page transitions ----------
   One continuous site: the header stays put, the page you
   leave fades and lifts away, the next one rises in. A clicked thumbnail
   (named p-hero by transition.js) grows into the next page's hero. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: vt-fade-in 0.5s ease 0.2s both; }
/* The light and grain stay part of the page snapshot: drawn on their own
   during the change they lose their blending and show as heavy noise */
::view-transition-old(root) { animation: vt-out 0.45s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
::view-transition-group(p-hero) { animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.5, 0, 0.15, 1); z-index: 5; }
::view-transition-old(p-hero), ::view-transition-new(p-hero) {
  height: 100%; width: 100%; object-fit: cover; overflow: clip;
  animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.5, 0, 0.15, 1);
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(40px); } }
@keyframes vt-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(46 * var(--s));      /* half of the Figma 84, so content gets the room */
  color: var(--brown);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; transition: opacity 0.4s ease, transform 0.4s ease; }
/* Past the hero, only INDEX stays, as in the Selected Work frame */
.past-hero .site-name, .past-hero .site-title { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.past-hero .site-title { transform: translate(-50%, -6px); }
.site-name {
  position: absolute; left: calc(96 * var(--sx)); top: calc(14 * var(--s));
  font: 800 max(13px, calc(20 * var(--s)))/1 "Lexend Exa", sans-serif;
  text-transform: uppercase; text-decoration: none;
}
.site-title {
  position: absolute; left: 50%; top: calc(16 * var(--s)); margin: 0;
  transform: translateX(-50%);
  font: 700 max(11px, calc(16 * var(--s)))/1 "Lexend", sans-serif;
  letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
}
.index-btn {
  position: absolute; right: calc(48 * var(--sx)); top: calc(16 * var(--s));
  display: flex; align-items: center; gap: calc(18 * var(--s));
  font: 700 max(11px, calc(14 * var(--s)))/1 "Lexend", sans-serif;
  letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none;
}
.index-btn {
  border: 0; background: none; padding: 10px; margin: -10px; color: inherit; cursor: pointer;   /* icon only; screen readers hear "Index" */
}
/* Menu icon: three bars that turn into an X when the index is open.
   Plain boxes (not SVG) so every browser turns them around the same center. */
.index-btn .bars {
  --bw: max(22px, calc(30 * var(--s)));
  position: relative; display: block;
  width: var(--bw); height: calc(var(--bw) * 16 / 30);
}
.index-btn .bars i {
  position: absolute; left: 0; width: 100%;
  height: calc(var(--bw) * 3 / 30); background: currentColor;
  border-radius: calc(var(--bw) * 1.5 / 30);   /* round ends, like the pause icon */
  transition: transform 0.45s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.2s ease;
}
.index-btn .b1 { top: 0; }
.index-btn .b2 { top: calc(var(--bw) * 6.5 / 30); }
.index-btn .b3 { top: calc(var(--bw) * 13 / 30); }
.index-btn[aria-expanded="true"] .b1 { transform: translateY(calc(var(--bw) * 6.5 / 30)) rotate(45deg) scaleX(0.72); }
.index-btn[aria-expanded="true"] .b2 { opacity: 0; }
.index-btn[aria-expanded="true"] .b3 { transform: translateY(calc(var(--bw) * -6.5 / 30)) rotate(-45deg) scaleX(0.72); }
.index-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: var(--vh);
  min-height: 480px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; background: var(--ground); }

/* Light and grain over the whole page, as in the Figma bg effect:
   the iridescent shader in screen mode at 31%, grain in lighten at 30%.
   They stay fixed to the screen while the page scrolls under them. */
.fx-shader, .fx-grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.fx-shader { mix-blend-mode: screen; opacity: 0.31; }
.fx-shader.is-fallback { background: url(../media/gradient.jpg) center / cover no-repeat; }
.fx-grain { background: url(../media/grain.png) repeat 0 0 / 256px 256px; mix-blend-mode: lighten; opacity: 0.3; }
.thumb::after {
  background: url(../media/grain.png) repeat 0 0 / 256px 256px, url(../media/gradient.jpg) center / cover no-repeat;
}

/* The word. Lottie canvas is 1000 x 300; at 0.6 scale its ink matches
   the 144px Lexend word in Figma, with the period fixed at x = 945. */
.hero-word {
  position: absolute; z-index: 1;
  left: calc(945 * var(--sx) - 579 * var(--s));
  top: calc(326 * var(--sy));
  width: calc(600 * var(--s)); height: calc(180 * var(--s));
}
.word { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s ease; }
.word.is-on { opacity: 1; }
.word svg { display: block; }

.lead-in {
  position: absolute; z-index: 3; margin: 0;
  /* Tied to the word box, so "design" keeps the same spot over the "w"
     of watch at every screen size */
  left: calc(945 * var(--sx) - 477 * var(--s)); top: calc(289 * var(--sy));
  font: 700 calc(28 * var(--s))/0.9 "Lexend", sans-serif;
  letter-spacing: -0.02em; white-space: nowrap;
}
.hero-body {
  position: absolute; z-index: 3; margin: 0;
  left: calc(744 * var(--sx)); top: calc(531 * var(--sy));
  width: calc(384 * var(--s));
  font-weight: 500; font-size: max(13px, calc(18 * var(--s)));
  line-height: 1.667;
}

/* ---------- Thumbnails ---------- */
.thumb {
  position: absolute; z-index: 4; display: block; overflow: hidden;
  left: calc(var(--x) * var(--sx)); top: calc(var(--y) * var(--sy));
  opacity: 0.35;
  transform: scale(0.94);
  transform-origin: var(--o, center);   /* thumbnails that bleed off an edge stay on it */
  /* --d staggers the thumbnails that light up together (set in home.js) */
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
}
.thumb.right { left: auto; right: calc(var(--r) * var(--sx)); }
.thumb.land { width: calc(213 * var(--s)); height: calc(120 * var(--s)); }
.thumb.port { width: calc(120 * var(--s)); height: calc(160 * var(--s)); }
.thumb img, .thumb video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.7s ease; transition-delay: var(--d, 0ms);
}
.thumb.is-active img, .thumb.is-active video { filter: none; }
/* Inactive thumbnails sit under the grain and gradient, like the words */
.thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.31;
  transition: opacity 0.7s ease; transition-delay: var(--d, 0ms);
}
.thumb.is-active { opacity: 1; transform: none; }
.thumb.is-active::after { opacity: 0; }
.thumb:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* The clicked thumbnail, in full color, just before it grows into the next page */
.thumb.is-picked { opacity: 1; transform: none; transition: none; }
.thumb.is-picked img, .thumb.is-picked video { filter: none; transition: none; }
.thumb.is-picked::after { opacity: 0; transition: none; }

/* Quick entrance on load */
.thumb.pre { opacity: 0; transform: scale(0.88); }

/* ---------- Pause / play ---------- */
.motion-btn {
  position: fixed; z-index: 10;
  right: calc(18 * var(--sx)); bottom: calc(34 * var(--sy));
  width: max(48px, calc(65 * var(--s))); aspect-ratio: 1;
  border: 0; border-radius: 50%;
  background: rgba(248, 246, 236, 0.92);
  box-shadow: 0 1px 6px rgba(10, 11, 62, 0.12);
  color: var(--brown); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: max(4px, calc(6 * var(--s)));
  font: 700 max(9px, calc(12 * var(--s)))/1 "Lexend", sans-serif;
  letter-spacing: 0.03em; text-transform: uppercase;
}
/* Round caps and corners, as in the Figma bt pause / bt play */
.motion-btn svg { height: max(13px, calc(18 * var(--s))); width: auto; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; fill: none; overflow: visible; }
.motion-btn .i-play { margin-left: 2px; }   /* optical centering of the triangle */
.motion-btn .i-play { fill: currentColor; stroke-width: 3; display: none; }
.motion-btn[aria-pressed="true"] .i-play { display: block; }
.motion-btn[aria-pressed="true"] .i-pause { display: none; }
.motion-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- Selected work ---------- */
.work {
  position: relative;
  height: var(--vh);
  min-height: 480px;
  overflow: hidden;
}
.work-title {
  position: absolute; z-index: 1; margin: 0;   /* under the light, like the hero word */
  left: calc(96 * var(--sx)); top: calc(58 * var(--sy));
  font: 800 calc(102 * var(--s))/calc(96 * var(--s)) "Lexend", sans-serif;
  letter-spacing: -0.02em;
}
.work-note {
  position: absolute; z-index: 3; margin: 0;
  right: calc(96 * var(--sx)); top: calc(159 * var(--sy));
  width: calc(492 * var(--s));
  font-weight: 400; font-size: max(13px, calc(18 * var(--s)));
  line-height: 1.667;
}
.work-note strong { font-weight: 700; }
.work-note { transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.menu-open .work-note { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }

/* ---------- Index ---------- */
.site-menu {
  position: fixed; z-index: 1;       /* under the light, like "selected work" */
  /* Right edge lines up with the menu icon */
  right: calc(48 * var(--sx));
  top: calc(56 * var(--sy));
  text-align: right;
  visibility: hidden; transition: visibility 0s linear 0.5s;
}
.menu-open .site-menu { visibility: visible; transition-delay: 0s; }
.site-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: calc(24 * var(--s)); }
/* The first entry is always the other screen */
.past-hero .site-menu .to-work, body:not(.past-hero) .site-menu .to-home { display: none; }
/* On the hero, the thumbnails step back while the index is open */
.menu-open:not(.past-hero) .hero .thumb { opacity: 0.08; pointer-events: none; transition-delay: 0s; }
.site-menu a {
  display: inline-block;
  font: 800 max(22px, calc(36 * var(--s)))/1 "Lexend", sans-serif;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
  padding-bottom: 0.08em;
  /* underline that grows from the right on hover */
  background: linear-gradient(currentColor, currentColor) right bottom / 0 3px no-repeat;
  opacity: 0; transform: translateX(calc(24 * var(--s)));
  transition: opacity 0.3s ease, transform 0.3s ease, background-size 0.35s cubic-bezier(0.6, 0, 0.2, 1);
}
.menu-open .site-menu a {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), background-size 0.35s cubic-bezier(0.6, 0, 0.2, 1);
}
/* Items 1 and 2 share a slot (only one shows), then a short stagger */
.menu-open .site-menu li:nth-child(3) a { transition-delay: 0.07s, 0.07s, 0s; }
.menu-open .site-menu li:nth-child(4) a { transition-delay: 0.14s, 0.14s, 0s; }
.menu-open .site-menu li:nth-child(5) a { transition-delay: 0.21s, 0.21s, 0s; }
.site-menu a:hover, .site-menu a:focus-visible { background-size: 100% 3px; background-position: left bottom; }
.site-menu a:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }

/* Project pages and About: the index opens over the page. A soft
   page-colored layer covers the content; the list sits under the icon
   as on Home, with all five entries appearing one after another. */
@media (min-width: 700px) {
  .site-menu.is-sub {
    z-index: 45; inset: 0;
    padding: calc(56 * var(--sy)) calc(48 * var(--sx)) 0 0;
    background: rgba(248, 246, 236, 0.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .menu-open .site-menu.is-sub { opacity: 1; transition: opacity 0.35s ease, visibility 0s; }
  .project .site-menu.is-sub { padding: calc(64 * var(--u)) calc(32 * var(--u)) 0 0; }
}
.menu-open .site-menu.is-sub li:nth-child(2) a { transition-delay: 0.07s, 0.07s, 0s; }
.menu-open .site-menu.is-sub li:nth-child(3) a { transition-delay: 0.14s, 0.14s, 0s; }
.menu-open .site-menu.is-sub li:nth-child(4) a { transition-delay: 0.21s, 0.21s, 0s; }
.menu-open .site-menu.is-sub li:nth-child(5) a { transition-delay: 0.28s, 0.28s, 0s; }
.project.menu-open, .about.menu-open { overflow: hidden; }

.carousel {
  --cs: var(--s);                 /* card scale; smaller on phones */
  --start: -156;                  /* where the first card begins, in design px */
  position: absolute; z-index: 3; left: 0; right: 0;
  top: calc(372 * var(--sy));
  height: calc(440 * var(--cs));
  touch-action: pan-y;            /* vertical swipes still scroll the page */
  user-select: none; -webkit-user-select: none;
}
.carousel.is-dragging { cursor: grabbing; }
.track { list-style: none; margin: 0; padding: 0; position: relative; height: 100%; }
.card {
  position: absolute; left: 0; top: 0;
  will-change: transform;
}
.card.port  { width: calc(240 * var(--cs)); --mh: calc(320 * var(--cs)); }
.card.land  { width: calc(384 * var(--cs)); --mh: calc(216 * var(--cs)); }
.card.short { width: calc(180 * var(--cs)); --mh: calc(320 * var(--cs)); }
/* Image bottoms line up, so titles start on one line */
.card a {
  display: flex; flex-direction: column; text-decoration: none;
  padding-top: calc(320 * var(--cs) - var(--mh));
  -webkit-user-drag: none;
}
.card .media { display: block; height: var(--mh); overflow: hidden; background: #0a0b3e10; }
.card .media img, .card .media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  -webkit-user-drag: none; pointer-events: none;
}
.card a:hover .media img, .card a:hover .media video,
.card a:focus-visible .media img, .card a:focus-visible .media video { transform: scale(1.04); }
.card a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.card .cat {
  margin-top: calc(15 * var(--cs));
  font: 700 max(11px, calc(16 * var(--cs)))/1 "Lexend", sans-serif;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--accent);
}
.card .name {
  margin: calc(2 * var(--cs)) 0 0;
  font: 700 max(15px, calc(24 * var(--cs)))/1.1 "Lexend", sans-serif;
  color: var(--ink);
}
.card .client {
  margin-top: calc(5 * var(--cs));
  font-size: max(11px, calc(15 * var(--cs))); line-height: 1.15;
}

/* ---------- Showreel overlay ---------- */
.lb-open { overflow: hidden; }
/* Header and pause button step aside so they don't ghost through behind the labels */
.lb-open .site-header, .lb-open .motion-btn { visibility: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 11, 10, 0.95);
  display: grid; place-items: center;
  --lb-pad: clamp(12px, 1.7vw, 24px);
  padding: var(--lb-pad);
  opacity: 0; transition: opacity 0.35s ease;
}
.lb[hidden] { display: none; }
.lb.is-in { opacity: 1; }
/* As large as the screen allows: full width, or full height minus the bar */
.lb-box { width: min(100%, calc((100vh - 2 * var(--lb-pad) - 30px) * 16 / 9)); }
@supports (height: 100svh) { .lb-box { width: min(100%, calc((100svh - 2 * var(--lb-pad) - 30px) * 16 / 9)); } }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; height: 22px; margin: 0 0 8px; }
.lb-title, .lb-x {
  font: 700 max(11px, calc(13 * var(--s)))/1 "Lexend", sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(248, 246, 236, 0.6);
}
.lb-x {
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 4px 0 3px; cursor: pointer;
}
.lb-x:hover, .lb-x:focus-visible { color: var(--ground); border-bottom-color: currentColor; }
.lb-x:focus-visible { outline: 2px solid var(--ground); outline-offset: 4px; }
/* Language switch for a film with two versions */
.lb-lang { margin-left: 18px; }
.lb-lang button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; border-bottom: 1px solid transparent; padding: 4px 0 3px; margin-right: 14px; cursor: pointer;
}
.lb-lang button[aria-pressed="true"] { color: var(--ground); border-bottom-color: currentColor; }
.lb-lang button:hover { color: var(--ground); }
.lb-lang button:focus-visible { outline: 2px solid var(--ground); outline-offset: 4px; }
.lb-ratio { position: relative; aspect-ratio: 16 / 9; background: #000; }
.lb-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lb-missing {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(248, 246, 236, 0.6); font: 500 16px/1.4 "Source Sans 3", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .lb { transition: none; }
  .site-menu a, .menu-open .site-menu a { transform: none !important; transition-duration: 0.2s; transition-delay: 0s !important; }
  .index-btn .bars i { transition-duration: 0.01s; }
  .card .media img, .card .media video { transition: none; }
  .thumb, .thumb.is-active, .thumb.pre { transform: none; }
  .thumb, .word, .thumb::after, .thumb img, .thumb video { transition-duration: 0.3s; transition-delay: 0ms; }
}

/* =====================================================================
   Phones (Figma frames "Hero-watch" 236:98127 and "Selected Work"
   236:98128, 402 x 874). Same idea as desktop: x follows the width,
   y follows the height, sizes follow the smaller of the two.
   ===================================================================== */
@media (max-width: 699px) {
  :root {
    --sx: calc(100vw / 402);
    --sy: calc(var(--vh) / 874);
    --s: min(var(--sx), var(--sy));
  }
  html { scroll-behavior: smooth; }

  /* Header */
  .site-header { height: calc(64 * var(--s)); }
  .site-name { left: calc(24 * var(--sx)); top: calc(18 * var(--s)); font-size: max(14px, calc(16 * var(--s))); }
  .site-title {
    left: calc(24 * var(--sx)); top: calc(41 * var(--s)); transform: none;
    font-size: max(12px, calc(14 * var(--s)));
  }
  .past-hero .site-title { transform: translateY(-6px); }
  .index-btn {
    right: calc(19 * var(--sx)); top: calc(17 * var(--s));
    gap: calc(12 * var(--s)); font-size: max(12px, calc(14 * var(--s)));
    padding: 10px; margin: -10px;        /* a bigger tap area */
  }
  .index-btn .bars { --bw: max(22px, calc(26 * var(--s))); }

  /* Hero */
  .hero-word {
    left: calc(362 * var(--sx) - 362 * var(--s));
    top: calc(330 * var(--sy));
    width: calc(375 * var(--s)); height: calc(112.5 * var(--s));
  }
  .lead-in {
    left: calc(40 * var(--sx)); top: calc(312 * var(--sy));
    font-size: max(16px, calc(18 * var(--s)));
  }
  .hero-body {
    left: calc(40 * var(--sx)); top: calc(442 * var(--sy));
    width: calc(322 * var(--sx));
    font-size: max(14px, calc(16 * var(--s))); line-height: 1.5;
  }
  .thumb, .thumb.right {
    left: calc(var(--mx, 0) * var(--sx)); right: auto;
    top: calc(var(--my) * var(--sy));
    transform-origin: var(--mo, var(--o, center));
  }
  .thumb.right { left: auto; right: calc(var(--mr) * var(--sx)); }
  .thumb.land { width: calc(126 * var(--s)); height: calc(70.9 * var(--s)); }
  .thumb.port { width: calc(70.9 * var(--s)); height: calc(94.6 * var(--s)); }

  /* Pause button: 44 px at least, for fingers */
  .motion-btn {
    right: calc(24 * var(--sx)); bottom: calc(20 * var(--sy));
    width: max(44px, calc(46 * var(--s)));
    gap: 2px; font-size: 8px;
  }
  .motion-btn svg { height: 12px; }

  /* Selected work */
  .work-title {
    left: calc(24 * var(--sx)); top: calc(74 * var(--sy));
    font-size: calc(60 * var(--s)); line-height: 0.9;
  }
  .work-note {
    left: calc(24 * var(--sx)); right: auto; top: calc(703 * var(--sy));
    width: calc(354 * var(--sx));
    font-size: max(14px, calc(16 * var(--s))); line-height: 1.5;
  }
  .carousel { top: calc(256 * var(--sy)); --cs: calc(var(--s) * 0.861); --start: -220.7; }
  .card .cat { font-size: max(11px, calc(13.2 * var(--s))); }
  .card .name { font-size: max(16px, calc(19.8 * var(--s))); }
  .card .client { font-size: max(12px, calc(13.2 * var(--s))); }

  /* Index: a full screen of its own on phones, since there is no room
     beside the title. The first entry is still the other screen. */
  .site-menu {
    inset: 0; z-index: 40;
    background: var(--ground);
    padding: calc(120 * var(--sy)) calc(24 * var(--sx)) 0;
    text-align: left;
  }
  .menu-open { overflow: hidden; }
  .site-menu ul { align-items: flex-start; gap: calc(22 * var(--s)); }
  .site-menu a { font-size: max(32px, calc(44 * var(--s))); transform: translateY(calc(16 * var(--s))); }
  .site-menu li:last-child a { font-size: max(20px, calc(24 * var(--s))); margin-top: calc(18 * var(--s)); }
  .site-menu a:hover, .site-menu a:focus-visible { background-position: left bottom; }

  /* Showreel: the label line stays readable on a narrow screen */
  .lb-title, .lb-x { font-size: 12px; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}