/* ==========================================================================
   OFFSET CURVE — styles
   Approved endpoints: Mobile 390px  ·  Desktop 1440px
   ONE layout switch: 1024px (search "min-width: 1024px" to change it).
   Below it: the approved mobile composition (fluid gutters).
   At / above it: the approved desktop composition, interpolating to 1440.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --paper: #FDF9EE;
  --ink: #3B2114;
  --ink-2: rgba(59, 33, 20, 0.78);   /* categories, captions */
  --rule: rgba(59, 33, 20, 0.16);    /* fine dividers */
  --mustard: #D89A1E;
  --teal: #108274;
  --rust: #B5471F;
  --cream: #F5EAD0;
  --band: #FDF9EE;                   /* project paper bands (metadata / next): page paper + paper multiply 18% */

  /* Original Figma material fills (Design System §03). Files live in assets/textures/. */
  --tex-paper: url("../textures/paper.jpg");            /* original paper, 848×1264 — used as a non-repeating FILL */
  --tex-paper-tile: url("../textures/paper-tile.jpg");  /* same paper, edges blended so it repeats with no seams */
  --tex-mustard: url("../textures/pigment-mustard.jpg");/* original mustard fill, 1584×672 */
  --tex-teal: url("../textures/pigment-teal.jpg");      /* original teal fill, 1584×672 */

  --font: "Rubik", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* desktop proportional unit: 1px at 1440, shrinks to ~0.71px at 1024 */
  --k: 1px;
  --gutter: clamp(24px, 6.15vw, 48px);
  --stroke: 1.4px;
}
@media (min-width: 1024px) {
  :root {
    --k: clamp(0.7111px, 0.069444vw, 1px);
    --gutter: calc(96 * var(--k));
  }
}

/* ---------- Base ---------- */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
#app { position: relative; isolation: isolate; }
/* Original paper: context-specific multiply (Home desktop 12% · otherwise 8%), behind content.
   Figma fills the whole page frame with ONE copy of the original paper (no tiling),
   so the texture is stretched to cover the page — no repeats, no seams. */
#app::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tex-paper) center top / cover no-repeat;
  mix-blend-mode: multiply; opacity: 0.08;   /* mobile endpoints (both pages) measure 8% */
}
@media (min-width: 1024px) { #app::before { opacity: 0.12; } }   /* Homepage Desktop: 12% */
body[data-view="project"] #app::before { opacity: 0.08; }        /* Project page: 8% */

h1, h2, h3, p, figure, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 8px 12px; font-size: 14px;
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), 1248px); margin-inline: auto; }

.label { font-size: 13px; line-height: 1.25; }
.label--teal { color: var(--teal); }
.rule { display: block; height: var(--stroke); }
.rule--teal { background: var(--teal); }

/* ---------- Texture fills (GraphicAccent material) ----------
   Design System §03 "Material & texture":
     Mustard = solid #D89A1E + original mustard fill, normal, 58%
     Teal    = solid #108274 + original teal fill,    normal, 48%
     Rust    = solid #B5471F + original paper,        multiply, 76%
   The fill sits on a ::before layer and covers each shape (Figma "Fill" mode),
   so small blocks keep the fill's soft torn edge exactly as in the approved screens.
   Per-element strength: set --tex-o on the element. */
.ga { pointer-events: none; }
.ga-tex { display: block; position: relative; background-image: none !important; overflow: hidden; }
.ga-tex::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: var(--tex-o);
}
.ga-tex--mustard { background-color: var(--mustard); --tex-o: .58; }
.ga-tex--mustard::before { background-image: var(--tex-mustard); }
.ga-tex--teal    { background-color: var(--teal); --tex-o: .48; }
.ga-tex--teal::before { background-image: var(--tex-teal); }
.ga-tex--rust    { background-color: var(--rust); --tex-o: .76; }
.ga-tex--rust::before { background-image: var(--tex-paper); mix-blend-mode: multiply; }

/* ---------- Icons ---------- */
.icon-arrow { display: block; width: 22px; height: 22px; color: var(--teal); flex: none; overflow: visible; }
.icon-back { display: block; width: 14px; height: 10px; flex: none; overflow: visible; }

/* ---------- Text links ---------- */
.text-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 180ms ease; }
.text-link:hover, .text-link:focus-visible { background-size: 100% 1px; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav { position: relative; z-index: 5; }
.nav__inner {
  width: min(100% - 2 * var(--gutter), 1248px); margin-inline: auto;
  height: 88px; display: flex; align-items: center; justify-content: space-between;
}
.nav__logo img { width: 40px; height: 40px; }
.nav__links { display: flex; gap: 20px; font-size: 14px; }
.nav__strip { display: none; }

@media (min-width: 1024px) {
  .nav__inner { height: 112px; }
  .nav__logo img { width: 52px; height: 52px; }
  .nav__links { gap: 40px; font-size: 16px; }
  /* Project print strip: decoration inside the nav composition */
  .nav--project .nav__strip {
    display: flex; height: 3px; width: 100%; align-items: stretch;
  }
  .nav__strip > .ga-tex--teal    { width: 37.5%; background-size: 120% auto; }
  .nav__strip > .ga-tex--mustard { width: 12.5%; }
  .nav__strip > .ga-tex--rust    { width: 6.667%; }
  .nav__strip-rule { flex: 1; align-self: center; height: 1px; background: var(--rule); }
}

/* ==========================================================================
   MEDIA FRAME
   ========================================================================== */
.media { position: relative; overflow: visible; }
.media__img, .media__video {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.media__video { object-fit: contain; background: #000; }
/* Homepage showreel loop: sits exactly over the poster image, same crop/framing.
   Hidden until it is really playing; never tinted, never clickable. */
.media__loop {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none; filter: none; background: transparent;
}
.media.is-looping .media__loop { opacity: 1; }
.media.is-looping .media__treatment { display: none; }
/* Vimeo player fills the same box as the poster */
.media__embed { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; background: #000; }
/* A playing video is never tinted or filtered */
.media.is-playing .media__video, .media.is-playing .media__embed { filter: none; mix-blend-mode: normal; opacity: 1; }
/* Brand tint layer (settings: content.js → site.mediaTint). Poster/thumbnail state only, never on playing video */
.media__treatment {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--mustard); mix-blend-mode: soft-light; opacity: var(--treat, .08);
  transition: opacity 220ms ease;
}
.pcard__link:hover .media__treatment, .pcard__link:focus-visible .media__treatment { opacity: 0; }
.media .ga { z-index: 3; }

.media__play {
  position: absolute; z-index: 4; left: 16px; bottom: 17px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(253, 249, 238, 0.92); color: var(--ink);
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
  display: grid; place-items: center;
}
.media__play svg { width: 16px; height: 16px; margin-left: 2px; }
@media (min-width: 1024px) {
  .media__play { left: calc(40 * var(--k)); bottom: calc(28 * var(--k)); width: 56px; height: 56px; box-shadow: none; background: #fff; }
  .media__play svg { width: 18px; height: 18px; }
}

.captions { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.2; color: var(--ink); }

/* ==========================================================================
   PROJECT CARDS
   ========================================================================== */
.pcard__link { display: block; }
.pcard .media { aspect-ratio: 342 / 220; }
.pcard__caption { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 16px; }
.pcard__title { font-size: 23px; font-weight: 500; line-height: 1.2; }
.pcard__cat { font-size: 13px; line-height: 1.25; color: var(--ink-2); margin-top: 6px; }
.pcard__arrow { width: 22px; height: 22px; margin-top: 2px; transition: transform 180ms ease; }
.pcard__link:hover .pcard__arrow, .pcard__link:focus-visible .pcard__arrow { transform: translate(2px, -2px); }

/* ==========================================================================
   SECTION HEADING
   ========================================================================== */
.sec-head__title { font-weight: 500; line-height: 1.2; }
.sec-head__note { font-size: 13px; line-height: 1.25; }

/* ==========================================================================
   HOMEPAGE — MOBILE COMPOSITION (base)
   ========================================================================== */
.hero { padding: 32px 0 40px; }
.hero__label { margin-bottom: 15px; }
.hero__title { font-size: 40px; line-height: 1.1; letter-spacing: 1.4px; font-weight: 500; }
.hero__grid { margin-top: 31px; }
.hero__note .rule { width: 56px; margin-bottom: 15px; }
.hero__note-title { font-size: 16px; font-weight: 500; line-height: 1.25; }
.hero__note-body { font-size: 14px; line-height: 22px; margin-top: 13px; }
.hero__note-link { font-size: 12px; margin-top: 13px; }
.hero__figure { margin-top: 20px; }
.media--showreel { aspect-ratio: 342 / 220; }
.hero .captions { flex-direction: column; gap: 6px; margin-top: 16px; }

/* Hero accents (desktop only; mobile adaptation not visible in approved endpoint) */
.ga-hero-block, .ga-hero-line { display: none; }
/* Hero block: approved screen shows the pigment body only (no torn edges), so the fill is enlarged around its centre */
.ga-hero-block::before { background-size: 400% auto; }

/* Bio band */
.bio-wrap { padding: 26px var(--gutter) 0; }
.bio {
  position: relative; max-width: 1312px; margin-inline: auto;
  background: var(--cream); padding: 30px 24px 48px;
  isolation: isolate;
}
.bio::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Design System: biography band = #F5EAD0 + paper Multiply 18%, tiled at 0.55 (848×1264 × 0.55) */
  background: var(--tex-paper-tile) left top / 466.4px 695.2px repeat; mix-blend-mode: multiply; opacity: .18;
}
.bio__portrait { position: relative; width: 176px; }
.bio__portrait img { position: relative; z-index: 2; width: 176px; height: 206px; object-fit: cover; }
.ga-portrait { position: absolute; inset: 0; z-index: 1; }
.ga-portrait > i { position: absolute; display: block; }
/* Layer order, back → front (Design System §04 "Let the photo mask geometry"):
   mustard disc · teal disc (multiply) · fine ink rule · offset ring · rust rule · rust mark · photo */
.ga-portrait__mustard { left: 26px; top: 192px; width: 30px; height: 30px; border-radius: 50%; z-index: 1; }
.ga-portrait__teal { left: -16px; top: 165px; width: 66px; height: 66px; border-radius: 50%; z-index: 2; mix-blend-mode: multiply; }
.ga-portrait__inkline { left: -28px; top: 182px; width: 60px; height: 1px; background: var(--ink); opacity: .4; z-index: 3; }
.ga-portrait__ring { left: -18px; top: 162px; width: 67px; height: 67px; border-radius: 50%; border: 1px solid rgba(59,33,20,.75); z-index: 4; }
.ga-portrait__line { left: 0; top: 222px; width: 72px; height: 1px; background: var(--rust); z-index: 5; }
.ga-portrait__dash { left: -21px; top: 219px; width: 14px; height: 3px; z-index: 6; }
/* Approved mobile endpoint shows only the teal disc + the rust rule */
.ga-portrait__mustard, .ga-portrait__ring, .ga-portrait__inkline { display: none !important; }
.ga-portrait__dash { display: none !important; }

.bio__text { position: static; }
.bio .ga-dots { position: absolute; top: 33px; right: 24px; }
.ga-dots { display: flex; gap: 9px; }
.ga-dots > i { display: block; width: 19px; height: 19px; border-radius: 50%; background-size: 400% auto; }
.bio__label { margin-top: 47px; }
.bio__local { text-align: right; }
.bio__heading { font-size: 28px; line-height: 1.2; font-weight: 500; margin-top: 30px; }
.bio__body { font-size: 18px; line-height: 1.7; margin-top: 21px; }
.bio__tags { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: 13px; line-height: 1.2; justify-content: flex-start; }
.bio__tag-rule { width: 16px; height: 1px; background: var(--ink-2); opacity: .6; }

/* Selected Work */
.selected { padding: 40px 0 40px; }
.sec-head--selected { border-bottom: 1px solid var(--rule); padding-bottom: 25px; }
.sec-head--selected .sec-head__title { font-size: 32px; letter-spacing: .8px; }
.sec-head--selected .sec-head__note { margin-top: 7px; }
.selected__row1 { margin-top: 32px; }
.pcard--secondary { margin-top: 122px; }
.selected__row2 { margin-top: 34px; }
.selected__aside .label { margin-top: 22px; }
.selected__aside-text { font-size: 16px; line-height: 1.6; margin-top: 12px; }
.pcard--wide { margin-top: 21px; }

/* Arch accent: mustard circle + three crossing lines (mobile = half scale) */
.ga-arch { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 0 !important; }
.ga-arch > i { position: absolute; display: block; }
.ga-arch__circle { width: 100px; height: 100px; border-radius: 50%; right: 9.6%; top: -93px; opacity: .9; z-index: 2; }
/* Back → front: teal line, mustard disc, mustard line, rust line (Design System §04 "Conceal one layer") */
.ga-arch__line { right: calc(9.6% - 34px); width: 172px; z-index: 3; }
.ga-arch__line--1 { top: -49.9px; height: 1.4px; background: var(--mustard); }
.ga-arch__line--2 { top: -43.5px; height: 1px;   background: var(--teal); z-index: 1; }
.ga-arch__line--3 { top: -38.4px; height: 1.4px; background: var(--rust); }
.media--secondary .media__img { z-index: 1; }

/* Process fragment (built at desktop size, scaled 0.55 on mobile)
   Design System: mustard 188×36 (fill 52%, layer 92%) · teal 124×48 (fill 46%, layer 88%)
   rust 32×18 (paper multiply 60%, layer 85%) · teal registration strip 96×2 (layer 90%).
   Back → front: mustard, teal, rust, strip. */
.ga-process { position: relative; width: 272px; height: 67px; transform-origin: 0 0; } /* box height kept from V1 so the text below does not move */
.selected__aside .ga-process { transform: scale(.55); margin-bottom: calc(-67px * .45); }
.ga-process > i { position: absolute; display: block; }
.ga-process__mustard { left: 0; top: 20px; width: 188px; height: 36px; --tex-o: .52; opacity: .92; z-index: 1; }
.ga-process__teal { left: 148px; top: 0; width: 124px; height: 48px; --tex-o: .46; opacity: .88; z-index: 2; }
.ga-process__rust { left: 164px; top: 42px; width: 32px; height: 18px; --tex-o: .60; opacity: .85; z-index: 3; }
.ga-process__rule { left: 0; top: 63.7px; width: 96px; height: 2px; background: var(--teal); opacity: .9; z-index: 4; }

/* More Work */
.more { padding: 0 0 40px; border-top: 1px solid var(--rule); }
.sec-head--more { padding-top: 23px; }
.sec-head--more .sec-head__title { font-size: 28px; }
.sec-head--more .sec-head__note { margin-top: 8px; }
.more__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 28px; margin-top: 24px; }
.more__grid .media { aspect-ratio: 3 / 2; }
.pcard__caption--compact { margin-top: 11px; gap: 8px; }
.mwork__title { font-size: 18px; font-weight: 500; line-height: 1.2; }
.mwork__cat { font-size: 12px; line-height: 15px; color: var(--ink-2); margin-top: 5px; }
.pcard__caption--compact .pcard__arrow { width: 18px; height: 18px; margin-top: 1px; }
.more__show { text-align: center; margin-top: 33px; }
.show-more {
  display: inline-block; font-size: 13px; color: var(--teal); line-height: 1.25;
  padding: 0 14px 9px; border-bottom: var(--stroke) solid var(--teal);
}

/* ==========================================================================
   CONTACT / FOOTER — MOBILE (base)
   ========================================================================== */
.contact { position: relative; isolation: isolate; }
/* Contact + footer share ONE cream band (wrapper .endband) so the paper runs
   continuously across both — one non-repeating fill, as in Figma.
   Strength: Home 19% · Project footer 15% ("footer settings vary by page"). */
.endband { position: relative; isolation: isolate; background: var(--cream); }
.endband::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tex-paper) center / cover no-repeat; mix-blend-mode: multiply; opacity: .19;
}
.endband--project::before { opacity: .15; }
.contact, .footer { background: transparent; }
.footer { position: relative; isolation: isolate; }
.contact__inner { padding: 40px 0 32px; }
.contact__label { font-size: 13px; color: var(--teal); line-height: 1.25; }
.contact__heading { font-size: 32px; line-height: 1.15; letter-spacing: 1px; font-weight: 500; margin-top: 18px; }
.contact__support { font-size: 15px; line-height: 1.5; margin-top: 14px; }
.contact__email {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 26px; padding-bottom: 12px; font-size: 21px; line-height: 1.2;
  color: var(--teal); border-bottom: var(--stroke) solid var(--teal);
}
.contact--project .contact__email { border-bottom-color: var(--ink); }
.contact__arrow { width: 24px; height: 24px; color: currentColor; }
.contact__email:hover .contact__arrow, .contact__email:focus-visible .contact__arrow { transform: translate(2px, -2px); }
.contact__arrow { transition: transform 180ms ease; }

.ga-dots--contact { display: none; }
.ga-footer-pigments { position: absolute; top: 0; right: calc(var(--gutter) + 6px); width: 40px; height: 40px; }
.ga-footer-pigments > i { position: absolute; left: 0; width: 40px; height: 20px; display: block; }
.ga-footer-pigments > i:first-child { top: 0; border-radius: 0 0 20px 20px; }
.ga-footer-pigments > i:last-child { top: 20px; border-radius: 20px 20px 0 0; }
.ga-footer-pigments > span { position: absolute; right: 0; top: 16px; width: 50px; height: 1px; background: var(--ink); opacity: .8; z-index: 1; }

.footer__inner { border-top: 1px solid var(--rule); padding: 28px 0 24px; display: flex; flex-direction: column; gap: 22px; font-size: 13px; line-height: 1.2; }
.footer__brand { display: flex; align-items: center; gap: 16px; }
.footer__brand img { width: 26px; height: 26px; margin-left: 2px; }
.footer__top { align-self: flex-start; font-size: 12px; }

/* ==========================================================================
   PROJECT PAGE — MOBILE (base)
   ========================================================================== */
.p-open { padding: 28px var(--gutter) 32px; max-width: calc(1248px + 2 * var(--gutter)); margin-inline: auto; }
.p-open__back { display: inline-flex; align-items: center; gap: 13px; font-size: 14px; color: var(--teal); }
.p-open__body { margin-top: 38px; }
.p-open__cat { color: var(--ink); }
.p-open__title { font-size: 40px; line-height: 1.1; letter-spacing: 1.4px; font-weight: 500; margin-top: 23px; }
.ga-title-rule { display: none; }
.p-open__intro { font-size: 16px; line-height: 1.65; margin-top: 19px; }

.p-hero { width: min(100% - 2 * var(--gutter), 1248px); margin-inline: auto; }
.media--poster { aspect-ratio: 3 / 2; }
.captions--project { width: 100%; margin-top: 16px; align-items: baseline; }
.captions--project span:last-child { font-size: 10px; }

/* Video-edge overprint */
.ga-video { position: absolute; inset: 0; }
.ga-video > i, .ga-video__discs { position: absolute; display: block; }
.ga-video__block, .ga-video__edge-h, .ga-video__edge-v, .ga-video__hairline { display: none !important; }
.ga-video__discs { right: 25px; top: -20px; width: 116px; height: 20px; overflow: hidden; z-index: 0; }
.ga-video__discs > i { position: absolute; top: 0; width: 44px; height: 44px; border-radius: 50%; display: block; }
.ga-video__discs > i:nth-child(1) { left: 0; }
.ga-video__discs > i:nth-child(2) { left: 37px; }
.ga-video__discs > i:nth-child(3) { left: 72px; }
.ga-video__mline { right: 0; top: -3px; width: 158px; height: 1px; background: var(--ink); opacity: .75; }

.p-meta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 30px 0 0; position: relative; }
.p-meta__item dt { font-size: 12px; line-height: 1.2; color: var(--teal); }
.p-meta__item dd { font-size: 15px; line-height: 1.2; margin-top: 10px; }
.ga-meta-dash { display: none; }

.p-context { padding: 56px 0 89px; }
.p-context__aside .rule { width: 56px; height: 1px; background: var(--ink-2); }
.p-context__aside .label { font-size: 14px; margin-top: 17px; }
.ga-context-rule { display: none; }
.p-context__heading { font-size: 28px; line-height: 1.25; letter-spacing: .5px; font-weight: 500; margin-top: 25px; }
.p-context__body { font-size: 16px; line-height: 1.65; margin-top: 23px; }

.p-next { position: relative; }
.p-next__link { display: block; width: min(100% - 2 * var(--gutter), 1248px); margin-inline: auto; padding: 24px 0 56px; border-top: 1px solid var(--rule); position: relative; }
.p-next__link::before { content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 1px; background: var(--ink); }
.p-next__label { font-size: 14px; line-height: 1.25; }
.ga-next-rule, .ga-next-lines, .ga-next-disc, .ga-next-bar, .ga-stack { display: none !important; }
.p-next__title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.p-next__title { font-size: 32px; line-height: 1.2; letter-spacing: 1px; font-weight: 500; }
.p-next__arrow { width: 26px; height: 26px; }
.p-next__link:hover .p-next__arrow, .p-next__link:focus-visible .p-next__arrow { transform: translate(2px, -2px); }
.p-next__arrow { transition: transform 180ms ease; }
.p-next__cat { font-size: 14px; line-height: 1.25; margin-top: 14px; }
.p-next__media { margin-top: 24px; position: relative; }
.media--next { aspect-ratio: 3 / 2; }

/* ==========================================================================
   DESKTOP COMPOSITION  (≥ 1024px, measured at 1440px)
   ========================================================================== */
@media (min-width: 1024px) {

  /* ---------- Home hero ---------- */
  .hero { padding: calc(56 * var(--k)) 0 calc(112 * var(--k)); }
  .hero__label { margin-bottom: calc(20 * var(--k)); }
  .hero__title { font-size: clamp(52px, calc(68 * var(--k)), 68px); line-height: 1.12; letter-spacing: 2.4px; }
  .hero__grid {
    margin-top: calc(44 * var(--k));
    display: grid; grid-template-columns: minmax(170px, 212fr) 44fr 944fr 48fr; align-items: end;
  }
  .hero__note { grid-column: 1; padding-bottom: 27px; }
  .hero__note .rule { margin-bottom: 18px; }
  .hero__note-body { margin-top: 16px; }
  .hero__note-link { margin-top: 12px; }
  .hero__figure { grid-column: 3; margin-top: 0; }
  .media--showreel { aspect-ratio: 944 / 531; }
  .hero .captions { flex-direction: row; margin-top: 13px; }

  .ga-hero-block { display: block; position: absolute; right: 100%; top: calc(66 * var(--k)); width: calc(152 * var(--k)); height: calc(77 * var(--k)); }
  .ga-hero-line { display: block; position: absolute; left: 100%; top: calc(177 * var(--k)); width: calc(95 * var(--k)); height: 1px; background: var(--rust); }
  .ga-hero-line::after { content: ""; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--rust); }

  /* ---------- Bio band ---------- */
  .bio-wrap { padding: 0 calc(64 * var(--k)); }
  .bio {
    display: grid; grid-template-columns: calc(336 * var(--k)) 1fr; column-gap: calc(96 * var(--k));
    padding: calc(72 * var(--k)) calc(102 * var(--k)) calc(84 * var(--k)) calc(96 * var(--k));
  }
  .bio__portrait { width: calc(336 * var(--k)); }
  .bio__portrait img { width: calc(336 * var(--k)); height: calc(392 * var(--k)); }
  /* Measured from the approved Homepage Desktop (photo 336×392 at its top-left = 0,0) */
  .ga-portrait__mustard, .ga-portrait__ring, .ga-portrait__inkline { display: block !important; }
  .ga-portrait__mustard { left: calc(19 * var(--k)); top: calc(342 * var(--k)); width: calc(66 * var(--k)); height: calc(66 * var(--k)); }
  .ga-portrait__teal { left: calc(-68 * var(--k)); top: calc(296 * var(--k)); width: calc(136 * var(--k)); height: calc(136 * var(--k)); }
  .ga-portrait__inkline { left: calc(-54 * var(--k)); top: calc(348 * var(--k)); width: calc(80 * var(--k)); }
  .ga-portrait__ring { left: calc(-61 * var(--k)); top: calc(289 * var(--k)); width: calc(136 * var(--k)); height: calc(136 * var(--k)); }
  .ga-portrait__line { left: 0; top: calc(408 * var(--k)); width: calc(128 * var(--k)); }
  .ga-portrait__dash { display: block !important; left: calc(-40 * var(--k)); top: calc(418 * var(--k)); width: calc(26 * var(--k)); height: calc(5 * var(--k)); }

  .bio__text { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
  .bio .ga-dots { position: static; }
  .bio__label { margin-top: 43px; text-align: right; }
  .bio__local { width: min(100%, 640px); }
  .bio__heading { font-size: clamp(38px, calc(46 * var(--k)), 46px); margin-top: 31px; }
  .bio__body { font-size: clamp(19px, calc(22 * var(--k)), 22px); margin-top: 21px; }
  .bio__tags { justify-content: flex-end; margin-top: 33px; }

  /* ---------- Selected Work ---------- */
  .selected { padding: calc(104 * var(--k)) 0 calc(88 * var(--k)); }
  .sec-head--selected { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 24px; }
  .sec-head--selected .sec-head__title { font-size: clamp(34px, calc(40 * var(--k)), 40px); letter-spacing: 1px; }
  .sec-head--selected .sec-head__note { margin-top: 0; }

  .selected__row1 { margin-top: 48px; display: grid; grid-template-columns: 744fr 440fr; column-gap: calc(64 * var(--k)); align-items: end; }
  .pcard--secondary { margin-top: 0; }
  .pcard--lead .media { aspect-ratio: 744 / 418.5; }
  .pcard--secondary .media { aspect-ratio: 440 / 293.965; }
  .pcard__caption { margin-top: 18px; }

  .ga-arch__circle { width: calc(204 * var(--k)); height: calc(204 * var(--k)); right: auto; left: calc(114 * var(--k)); top: calc(-169 * var(--k)); }
  /* Design System: lines at y112.2 / 124.9 / 135.1 of the 255px footprint (disc top = 26) */
  .ga-arch__line { right: auto; left: calc(41 * var(--k)); width: calc(344.3 * var(--k)); }
  .ga-arch__line--1 { top: calc(-82.8 * var(--k)); height: 2.8px; }
  .ga-arch__line--2 { top: calc(-70.1 * var(--k)); height: 2px; }
  .ga-arch__line--3 { top: calc(-59.9 * var(--k)); height: 2.8px; }

  .selected__row2 { margin-top: 72px; display: grid; grid-template-columns: 512fr 736fr; align-items: stretch; }
  .selected__aside { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 70px; }
  .selected__aside .ga-process {
    position: absolute; right: calc(-4px * var(--kk, 1)); top: calc(185 * var(--k));
    transform: scale(var(--kk, 1)); transform-origin: 100% 0; margin: 0;
  }
  .selected__aside .label { margin-top: 0; }
  .selected__aside-text { font-size: clamp(16px, calc(18 * var(--k)), 18px); line-height: 1.6; margin-top: 16px; max-width: 280px; }
  .pcard--wide { margin-top: 0; }
  .pcard--wide .media { aspect-ratio: 736 / 352; }

  /* ---------- More Work ---------- */
  .more { padding-bottom: calc(96 * var(--k)); }
  .sec-head--more { display: flex; justify-content: space-between; align-items: baseline; padding-top: 33px; }
  .sec-head--more .sec-head__note { margin-top: 0; }
  .more__grid { grid-template-columns: repeat(4, 1fr); column-gap: calc(32 * var(--k)); row-gap: 32px; margin-top: 32px; }
  .more__grid .media { aspect-ratio: 16 / 9; }
  .pcard__caption--compact { margin-top: 10px; }
  .mwork__cat { margin-top: 6px; }
  .more__show { margin-top: 44px; }
  .show-more { padding: 0 12px 9px; }

  /* ---------- Contact / Footer ---------- */
  .contact__inner {
    display: grid; grid-template-columns: 788fr 320fr 140fr; align-items: start;
    padding: calc(64 * var(--k)) 0 calc(32 * var(--k));
  }
  .contact__heading { font-size: clamp(40px, calc(48 * var(--k)), 48px); line-height: 1.2; letter-spacing: 1.5px; margin-top: 18px; }
  .contact__support { font-size: 16px; margin-top: 17px; }
  .contact__email { grid-column: 2; margin-top: 45px; font-size: clamp(21px, calc(24 * var(--k)), 24px); padding-bottom: 12px; }

  .ga-footer-pigments { display: none; }
  .ga-dots--contact { display: flex; position: absolute; top: 17px; right: calc(81 * var(--k)); }

  .footer__inner { flex-direction: row; justify-content: space-between; align-items: center; padding: 30px 0 54px; }
  .footer__top { align-self: center; }

  /* project variant: contact on paper, footer on cream */
  .endband--project { background: transparent; }
  .endband--project::before { display: none; }
  .footer--project { background: var(--cream); isolation: isolate; }
  .footer--project::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--tex-paper) center / cover no-repeat; mix-blend-mode: multiply; opacity: .15;
  }
  .contact--project .contact__inner { grid-template-columns: minmax(0, 1fr) 320px; padding: 40px 0 45px; column-gap: 40px; }
  .contact--project .contact__heading { font-size: clamp(40px, calc(46 * var(--k)), 46px); line-height: 1.12; letter-spacing: 1.2px; margin-top: 16px; }
  .contact--project .contact__support { margin-top: 15px; }
  .contact--project .contact__email { color: var(--ink); border-bottom-width: 2px; margin-top: 39px; width: 320px; justify-self: end; }
  .footer--project { padding-top: 24px; }
  .footer--project .footer__inner { padding: 21px 0 28px; }

  /* ---------- Project opening ---------- */
  .p-open { position: relative; max-width: none; padding: calc(41 * var(--k)) 0 calc(88 * var(--k)); }
  .p-open__back { position: absolute; left: calc(42 * var(--k)); top: calc(51 * var(--k)); color: var(--ink); }
  .p-open__body {
    width: min(100% - 2 * var(--gutter), 1248px); margin: 0 auto;
    padding-left: calc(316 * var(--k));
  }
  .p-open__cat { color: var(--teal); }
  .p-open__title { font-size: clamp(50px, calc(64 * var(--k)), 64px); line-height: 1.08; letter-spacing: 2.5px; margin-top: 18px; }
  .ga-title-rule { display: block; margin-top: 24px; }
  .ga-title-rule > i { display: block; }
  .ga-title-rule > i:first-child { width: calc(240 * var(--k)); height: 3px; background-size: 100% auto; }
  .ga-title-rule > i:last-child { width: calc(160 * var(--k)); height: 1px; margin-top: 3px; background: var(--rule); }
  .p-open__intro { font-size: clamp(16px, calc(18 * var(--k)), 18px); line-height: 1.65; margin-top: 24px; }

  /* ---------- Project hero video: full viewport width, 2:1 ---------- */
  .p-hero { width: 100%; }
  .media--poster { aspect-ratio: 2 / 1; }
  .captions--project { width: min(100% - 2 * var(--gutter), 1248px); margin: 16px auto 0; padding-bottom: 2px; }
  .captions--project span:last-child { font-size: 12px; }

  .ga-video__discs, .ga-video__mline { display: none !important; }
  .ga-video__block { display: block !important; left: var(--gutter); top: -16px; width: calc(48 * var(--k)); height: 16px; }
  .ga-video__edge-h { display: block !important; right: 0; top: 0; width: calc(120 * var(--k)); height: 2px; background: var(--mustard); z-index: 4; }
  .ga-video__edge-v { display: block !important; right: 0; top: 0; width: 3px; height: 26.4%; background: var(--mustard); z-index: 4; }
  .ga-video__hairline { display: block !important; left: 0; top: 80.7%; width: 66.7%; height: var(--stroke); background: linear-gradient(90deg, rgba(16,130,116,.9) 0%, rgba(16,130,116,.9) 70%, rgba(16,130,116,0) 100%); z-index: 4; }

  /* ---------- Metadata band ---------- */
  .p-meta { position: relative; background: var(--band); isolation: isolate; }
  .p-meta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tex-paper) center / cover no-repeat; mix-blend-mode: multiply; opacity: .18; }
  .p-meta__grid { grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 31px 0 31px; }
  .p-meta__item dt { color: var(--ink); text-transform: uppercase; letter-spacing: 1px; }
  .p-meta__item dd { font-size: 17px; margin-top: 8px; }
  .ga-meta-dash { display: block; position: absolute; right: 2px; bottom: 36px; width: 14px; height: 2px; background: var(--rust); }

  /* ---------- About the project ---------- */
  .p-context { position: relative; display: grid; grid-template-columns: 272fr 976fr; padding: 65px 0 88px; }
  .p-context__aside { padding-left: 52.94%; }
  .p-context__aside .rule { width: 48px; height: 2px; background: var(--teal); }
  .p-context__aside .label { font-size: 13px; margin-top: 18px; white-space: nowrap; }
  .ga-context-rule { display: block; width: 80px; height: 3px; background: var(--rust); margin-top: 8px; }
  .p-context__heading { font-size: clamp(28px, calc(34 * var(--k)), 34px); line-height: 1.22; letter-spacing: .8px; margin-top: 27px; }
  .p-context__body { font-size: clamp(16px, calc(18 * var(--k)), 18px); margin-top: 28px; max-width: 976px; }

  /* ---------- Next project ---------- */
  .p-next { background: var(--band); isolation: isolate; overflow: hidden; }
  .p-next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tex-paper) center / cover no-repeat; mix-blend-mode: multiply; opacity: .18; }
  .ga-stack { display: block !important; }
  .p-next__link {
    width: 100%; padding: 0; border: 0;
    display: grid; grid-template-columns: 1fr min(700px, 48.61vw); min-height: calc(380 * var(--k));
  }
  .p-next__link::before { display: none; }
  .p-next__text { position: relative; padding: calc(55 * var(--k)) calc(64 * var(--k)) 0 var(--gutter); }
  .p-next__label { font-size: 13px; letter-spacing: .5px; }
  .ga-next-rule { display: block !important; width: 48px; height: 2px; margin-top: 15px; background-size: 400% auto; }
  .p-next__title-row { margin-top: 17px; align-items: flex-start; }
  .p-next__title { font-size: clamp(42px, calc(52 * var(--k)), 52px); line-height: 1.2; letter-spacing: 1.2px; }
  .p-next__arrow { width: calc(33 * var(--k)); height: calc(33 * var(--k)); margin-top: calc(13 * var(--k)); }
  .p-next__cat { margin-top: 15px; }
  .ga-next-lines { display: block !important; position: absolute; left: var(--gutter); bottom: calc(40 * var(--k)); }
  .ga-next-lines > i { display: block; height: 1px; background: var(--rule); }
  .ga-next-lines > i:nth-child(1) { width: calc(400 * var(--k)); }
  .ga-next-lines > i:nth-child(2) { width: calc(280 * var(--k)); margin-top: 6px; opacity: .7; }
  .ga-next-lines > i:nth-child(3) { width: calc(160 * var(--k)); margin-top: 6px; opacity: .5; }

  .p-next__media { margin-top: 0; position: relative; }
  .media--next { aspect-ratio: auto; height: 100%; }
  .ga-next-bar { display: block !important; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; z-index: 4; background-size: 1200% auto; }
  .ga-next-disc { display: block !important; position: absolute; left: 0; bottom: 0; width: 0; height: 0; z-index: 0; }
  .ga-next-disc > i { position: absolute; display: block; }
  .ga-next-disc__fill { left: calc(-130 * var(--k)); top: calc(-133 * var(--k)); width: calc(190 * var(--k)); height: calc(190 * var(--k)); border-radius: 50%; }
  .ga-next-disc__ring { left: calc(-115 * var(--k)); top: calc(-148 * var(--k)); width: calc(230 * var(--k)); height: calc(230 * var(--k)); border-radius: 50%; border: var(--stroke) solid var(--ink); }
  .ga-next-disc__line { left: calc(-167 * var(--k)); top: calc(-26 * var(--k)); width: calc(167 * var(--k)); height: var(--stroke); background: var(--ink); }
  .media--next .media__img { z-index: 2; position: absolute; inset: 0; } /* image fills the band; its own proportions never change the band height */

  /* stacked grey lines, just above the Next band */
  .ga-stack { position: absolute; left: calc(24 * var(--k)); top: -32px; z-index: 1; }
  .ga-stack > i { display: block; height: 1px; }
  .ga-stack > i:nth-child(1) { width: calc(140 * var(--k)); background: rgba(59,33,20,.6); }
  .ga-stack > i:nth-child(2) { width: calc(100 * var(--k)); margin-top: 7px; background: rgba(59,33,20,.3); }
  .ga-stack > i:nth-child(3) { width: calc(32 * var(--k)); margin-left: calc(28 * var(--k)); margin-top: 5px; background: rgba(59,33,20,.2); }
}

/* Next section must not clip the stacked lines (they sit above it) */
@media (min-width: 1024px) {
  .p-next { overflow: visible; }
  .p-next__link { overflow: hidden; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}