/* Sawa Studios — site styles
   Palette and layout rules: knowledge/brand-book.md section 3 (locked 23 Sep 2026)
   Every value below comes from a scale. No one-off numbers in the HTML. */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  /* Colour */
  --black: #0E0C0B;
  --ink: #1A1512;
  --paper: #F4F0ED;   /* softened Paper (Anna, 2 Oct 2026), site-wide since the 7 Oct audit; was #F8EFE6, still the brand book's value */
  --oat: #DCC3B0;
  --clay: #B4917B;
  --umber: #705745;
  --body-on-paper: #4A3B33;
  --rule-on-paper: #E3D6C9;
  --rule-on-black: #2E2621;

  /* Type */
  /* Times, chosen 24 Sep 2026. Installed on Mac, iOS and Windows; Tinos (same widths) covers Android */
  --display: 'Times New Roman', Tinos, Times, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale — fluid between 390px and 1440px. Brought down 26 Sep 2026: on a laptop the
     old maximums (60px h2, 17px body) read as too large (Anna) */
  --step-0:  clamp(1.0625rem, 0.3vw + 0.875rem, 1.1875rem); /* 17-19px body, 18 on a laptop (11 Oct: "hard to read on a laptop", twice; supersedes the 26 Sep 16px) */
  --step-1:  clamp(1.0625rem, 0.2vw + 1rem,   1.1875rem); /* 17–19 lead */
  --step-2:  clamp(1.1875rem, 0.4vw + 1.05rem, 1.375rem); /* 19–22 h3 */
  --step-3:  clamp(1.625rem,  1vw + 1.3rem,   2.125rem);  /* 26–34 */
  --step-4:  clamp(2rem,      2vw + 1.3rem,   3rem);      /* 32–48 h2 */
  --step-5:  clamp(2.5rem,    4vw + 1.2rem,   5rem);      /* 40–80 h1 */
  --step--1: clamp(1rem, 0.15vw + 0.9rem, 1.0625rem);     /* 16-17px small */
  --step--2: 0.75rem;                                     /* 12px label (was 11) */

  /* Spacing scale — 4px base */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --section-y: clamp(var(--s-7), min(8vw, 9svh), var(--s-10));   /* 11 Oct 2026: also follows the screen height, so short laptop screens keep a section in one view */

  /* Measure */
  --measure: 68ch;
  --measure-tight: 42ch;

  /* Layout */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --max: clamp(76rem, 76rem + (100vw - 90rem) * 0.6, 100rem); /* 1216px incl. gutters up to a 1440 laptop (26 Sep); grows on wide monitors so the column isn't a strip between full-width rows (11 Oct) */
  --x0: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));   /* the content column's left edge, for full-bleed rows that must line up with it (7 Oct audit) */

  /* Motion — two durations, two curves */
  --t-fast: 160ms;
  --t-slow: 520ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1); /* presses and FAQ answers: fast off the mark, so the page answers the tap */

  /* Sticky header height, so anchored sections land below it */
  --header-h: 4.5rem;
}

/* ============================================================
   2. Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--sans);
  font-size: calc((var(--step-0)) * 1.2);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; height: auto; }

[hidden] { display: none !important; }

[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
section[id] { scroll-margin-top: calc(var(--header-h) + 1px); } /* menu links: a section starts right under the header, with no strip of the one before */

a { color: var(--oat); text-decoration: none; transition: color var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--paper); } }

/* Hover styles only for a mouse: on a phone a tapped link or button would stay stuck in its hover colour.
   No grey flash over what you tap either; the press state and the focus ring do that job */
:where(a, button, summary, label) { -webkit-tap-highlight-color: transparent; }

/* One focus style, visible on every ground */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--oat);
  outline-offset: 3px;
  border-radius: 1px;
}
.section--paper :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--umber); }

.skip {
  position: absolute; left: var(--s-4); top: calc(-1 * var(--s-10));
  background: var(--paper); color: var(--black);
  padding: var(--s-3) var(--s-5); font-size: calc((var(--step--1)) * 1.2); font-weight: 500;
  z-index: 60; transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: var(--s-4); color: var(--black); }

/* Regular weight, set large and slightly tight: the setting carries the identity, not the face */
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -0.025em; text-wrap: balance; } /* balance: no single word left alone on a last line */
p, li, blockquote { text-wrap: pretty; }   /* no single word left on a paragraph's last line either ("business.", "is.", 7 Oct audit) */
h1 { font-size: calc((var(--step-5)) * 1.2); line-height: 0.98; max-width: 15ch; }
h2 { font-size: calc((var(--step-4)) * 1.2); line-height: 1.04; max-width: 20ch; }
h3 { font-size: calc((var(--step-2)) * 1.2); line-height: 1.2; }

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead { font-size: calc((var(--step-1)) * 1.2); line-height: 1.55; }

/* Uppercase metadata. The brand book mandates this style; used only where the
   text really is metadata (place, date, category), never as decoration. */
.meta {
  font-size: calc((var(--step--2)) * 1.2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
}
.section--paper .meta { color: var(--umber); }

/* ============================================================
   3. Layout
   ============================================================ */
.inner { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* Pages you read and compare (Services): a narrower column on laptops and wider, so the eye
   doesn't travel edge to edge. The coloured bands behind each section stay full width. */

.section { padding-block: var(--section-y); }
.section--paper { background: var(--paper); color: var(--black); }
.section--paper p { color: var(--body-on-paper); }
.section--ink { background: var(--ink); }
.section--flush { padding-inline: 0; }

.stack   { display: flex; flex-direction: column; gap: var(--s-6); }
.stack-l { display: flex; flex-direction: column; gap: var(--s-7); }
.head    { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); }

/* Running line: a label, a hairline, a label. Used as a page's running header and as a position count */
.index-line {
  display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6);
  font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay);
}
.index-line i { flex: 1; height: 1px; background: var(--rule-on-black); }
.section--paper .index-line i { background: var(--rule-on-paper); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.split  { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(var(--s-6), 6vw, var(--s-9)); }

/* ============================================================
   4. Buttons
   ============================================================ */
.btn {
  display: inline-block;
  font-size: calc((var(--step--1)) * 1.2); font-weight: 500; letter-spacing: 0.02em;
  padding: var(--s-4) var(--s-6);
  min-height: 2.75rem;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-ui);
}
.btn:active { transform: scale(0.97); } /* the button gives a little under the finger; a uniform scale, so the shape stays true */
.btn--solid { background: var(--paper); color: var(--black); }
.btn--dark { background: var(--black); color: var(--paper); }
.btn--line { border-color: var(--umber); color: var(--paper); }
.section--paper .btn--line { border-color: var(--rule-on-paper); color: var(--black); }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: var(--oat); color: var(--black); }
  .btn--dark:hover { background: var(--ink); color: var(--paper); }
  .btn--line:hover { border-color: var(--oat); color: var(--oat); }
  .section--paper .btn--line:hover { border-color: var(--umber); color: var(--black); }
}

/* ============================================================
   5. Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgb(14 12 11 / 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-on-black);
  view-transition-name: site-header;
}
.site-header .inner {
  min-height: 4.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.wordmark { font-size: calc((var(--step--1)) * 1.2); font-weight: 500; letter-spacing: 0.5em; color: var(--paper); white-space: nowrap; } /* Inter, per the logo lockup in brand-book section 5 */
.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav__links { display: contents; } /* one row with the button on wide screens; its own row on tablets and phones */
.nav a { font-size: calc((max(var(--step--2), 0.75rem)) * 1.2); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }   /* never under 12px: these are links (4 Oct 2026) */
.nav a[aria-current="page"] { color: var(--paper); }

/* Home: the header over the hero footage, the AW ribbon centred with the links beneath, no bar (Anna, 26 Sep).
   Once it has scrolled out of view, site.js adds .is-stuck and the usual bar slides in from the top. */
.wordmark__mark { display: none; }
/* 11 Oct 2026: the AW mark beside the name in the bar. Inner pages draw it from assets/aw-mark.svg as a mask, so it takes the
   text colour; home carries the same mark inline (used over the hero) and shows it small once the bar is stuck. */
.site-header:not(.site-header--hero) .wordmark,
.site-header--hero.is-stuck .wordmark { display: inline-flex; align-items: center; gap: 1.1rem; }
.site-header:not(.site-header--hero) .wordmark::before {
  content: ""; flex: none; width: 3.1rem; aspect-ratio: 1000 / 374.1; background: currentColor;
  -webkit-mask: url("assets/aw-mark.svg") center / contain no-repeat; mask: url("assets/aw-mark.svg") center / contain no-repeat;
}
.site-header--hero.is-stuck .wordmark__mark { display: block; flex: none; width: 3.1rem; height: auto; }
@media (max-width: 30rem) {   /* phones: the name, mark and quote button share one row */
  .site-header:not(.site-header--hero) .wordmark, .site-header--hero.is-stuck .wordmark { gap: 0.7rem; letter-spacing: 0.24em; }
  .site-header:not(.site-header--hero) .wordmark::before, .site-header--hero.is-stuck .wordmark__mark { width: 2.2rem; }
}
.site-header--hero { position: absolute; top: 0; left: 0; right: 0; }
.site-header--hero:not(.is-stuck) { background: linear-gradient(to bottom, rgb(14 12 11 / 0.5), rgb(14 12 11 / 0)); backdrop-filter: none; border-bottom: 0; }
.site-header--hero:not(.is-stuck) .inner { flex-direction: column; justify-content: flex-start; gap: var(--s-4); min-height: 0; padding-block: var(--s-6) var(--s-7); }
.site-header--hero:not(.is-stuck) .wordmark__mark { display: block; width: clamp(8rem, 11vw, 11.5rem); height: auto; color: var(--paper); }
.site-header--hero:not(.is-stuck) .wordmark__text { display: none; }
.site-header--hero:not(.is-stuck) .nav a:not(.btn) { color: var(--paper); text-shadow: 0 1px 8px rgb(14 12 11 / 0.5); }
.site-header--hero.is-stuck { position: fixed; animation: header-in 0.45s var(--ease) both; }
@keyframes header-in { from { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .site-header--hero.is-stuck { animation: none; } }
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.45em; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--t-fast) var(--ease);
}
.nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) { .nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; } }

/* ============================================================
   6. Hero — the one orchestrated moment on the page
   ============================================================ */
.hero {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: 34rem;
  min-height: 88svh;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }

/* Frame within a frame. The background is a small file, blurred and enlarged a
   little so its soft edges stay off-screen; the sharp shot sits in a 4:5 frame. */
.hero__media { filter: blur(24px); transform: scale(1.1); }
.hero__stage { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; width: clamp(16rem, 26vw, 28rem); }
.hero__frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Films in the frame: one visible at a time, changed only by the visitor */
.hero__media .bg { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.hero__media .bg.is-active { opacity: 1; }
.slide { position: absolute; inset: 0; visibility: hidden; }
.slide.is-active { visibility: visible; }
.slide--empty { border: 1px dashed var(--umber); }
.slide__todo {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oat);
  background: rgb(14 12 11 / 0.6); padding: var(--s-1) var(--s-2);
}
.slide--empty .slide__todo { left: 50%; bottom: 50%; translate: -50% 50%; white-space: nowrap; background: none; color: var(--clay); }
/* Hero after Cartier's 365: film full-screen behind, headline centred, a small film card
   beneath it, neighbouring films as thumbnails on both edges, progress lines at the foot */
.hero--carousel { --hero-head: 11rem; align-items: stretch; text-align: center; min-height: 100svh; }   /* the whole screen, the header over it */
.hero--carousel .hero__chrome { top: auto; bottom: var(--s-4); } /* pause sits level with the progress lines, clear of the headline */
.hero--carousel .hero__media { filter: none; transform: none; }
.hero--carousel .hero__scrim { background: linear-gradient(to bottom, rgb(14 12 11 / 0.6) 0%, rgb(14 12 11 / 0.28) 38%, rgb(14 12 11 / 0.35) 70%, rgb(14 12 11 / 0.7) 100%); }
.hero--carousel .hero__content { display: flex; align-items: center; padding-block: calc(var(--hero-head) + var(--s-4)) var(--s-9); }
.hero--carousel .hero__content .inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero--carousel h1 { font-size: calc((clamp(2.375rem, 2.6vw + 1rem, 4rem)) * 1.2); line-height: 1; max-width: 21ch; margin: var(--s-3) auto var(--s-6); }
.hero--carousel .hero__stage { position: relative; right: auto; top: auto; translate: none; width: clamp(9rem, 13vw, 12.5rem); margin: 0 auto; }
.hero--carousel .hero__caption { justify-content: center; margin-inline: auto; }
.hero--carousel .hero__sub { margin: var(--s-5) auto 0; max-width: 46ch; font-size: calc((var(--step-0)) * 1.2); }
.hero--carousel .actions { justify-content: center; margin-top: var(--s-5); }

.hero__thumbs {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  display: flex; gap: var(--s-2); list-style: none; margin: 0; padding: 0;
}
.hero__thumbs--prev { left: var(--s-5); }
.hero__thumbs--next { right: var(--s-5); }
.hero__thumb {
  display: block; width: 3rem; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--ink); border: 1px solid rgb(248 239 230 / 0.45); opacity: 0.75;
  transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero__thumb:focus-visible { opacity: 1; border-color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .hero__thumb:hover { opacity: 1; border-color: var(--paper); } }
.hero__thumb img { width: 100%; height: 100%; object-fit: cover; }

.hero__progress { position: absolute; left: 50%; bottom: var(--s-5); translate: -50% 0; z-index: 2; display: flex; gap: var(--s-2); }
.hero__progress i { position: relative; width: 2.5rem; height: 1px; overflow: hidden; background: rgb(248 239 230 / 0.3); }
.hero__progress i::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform-origin: left; transform: scaleX(0); }
.hero__progress i.is-done::after { transform: scaleX(1); }
.hero__progress i.is-running::after { animation: hero-progress var(--autoplay, 8s) linear forwards; }
.hero__progress.is-held i.is-running::after { animation-play-state: paused; }
@keyframes hero-progress { to { transform: scaleX(1); } }

/* Phones: no room for thumbnails, so two small buttons under the call to action */
.hero__nav { display: none; }
.hero__arrow {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--paper); background: rgb(14 12 11 / 0.45); border: 1px solid rgb(248 239 230 / 0.45);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-ui);
}
.hero__arrow:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hero__arrow:hover { border-color: var(--paper); } }
.hero__caption {
  display: flex; gap: var(--s-3); align-items: baseline; margin: var(--s-3) 0 0; max-width: none;
  font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase;
}
.hero__count { color: var(--oat); white-space: nowrap; flex: none; }
.hero__caption { width: max-content; max-width: calc(100vw - 2 * var(--gutter)); }
.hero__caption a { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .hero__caption a:hover { color: var(--oat); } }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(14 12 11 / 0.94) 0%, rgb(14 12 11 / 0.5) 42%, rgb(14 12 11 / 0.08) 78%);
}
.hero__content { position: relative; width: 100%; padding-block: var(--s-8) var(--s-7); }
.hero h1 { margin-block: var(--s-4) var(--s-5); }
.hero__sub { max-width: var(--measure-tight); color: var(--oat); font-size: calc((var(--step-1)) * 1.2); }
.hero .actions { margin-top: var(--s-6); }
.hero .meta { color: var(--paper); text-shadow: 0 1px 8px rgb(14 12 11 / 0.55); }

.hero__chrome {
  position: absolute; top: var(--s-6); right: var(--gutter);
  display: flex; gap: var(--s-2);
}
.hero__toggle {
  font-family: var(--sans); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper);
  background: rgb(14 12 11 / 0.5); padding: var(--s-2) var(--s-4);
  border: 1px solid rgb(248 239 230 / 0.18);
}
.hero__toggle { cursor: pointer; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-ui); }
.hero__toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hero__toggle:hover { border-color: var(--oat); } }

/* Opening shot start state (motion.js). Applied only while html.intro is set by the
   inline script in <head>, which a 3s failsafe removes if motion.js never runs. */
.intro .hero, .intro .site-header { visibility: hidden; }
/* When motion.js runs, it owns the hero entrance */
.intro .hero__content .inner > *, .motion .hero__content .inner > * { animation: none; }

/* The opening, K (motion.js builds it; it never exists without the script): "Sawa Studios" on Paper,
   which lifts off like a sheet, casting a soft shadow onto the page as it goes */
.opener { position: fixed; inset: 0; z-index: 70; background: var(--black); isolation: isolate; overflow: hidden; }
.opener--paper { background: var(--paper); }
.opener--sheet { box-shadow: 0 2.5rem 5rem rgb(14 12 11 / 0.35); overflow: visible; }
.opener__frame { position: absolute; }
.opener__label {
  position: absolute; bottom: var(--s-6); margin: 0; max-width: none;
  font-size: calc((var(--step--2)) * 1.2); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--umber);
}
.opener__label--left { left: var(--gutter); }
.opener__label--right { right: var(--gutter); }
.opener__name {
  position: absolute; left: 0; right: 0; top: 50%; margin: -0.5em 0 0; max-width: none; overflow: hidden;
  text-align: center; white-space: nowrap; font-family: var(--display); font-weight: 400; color: var(--black);
  font-size: calc((clamp(4.5rem, 16vw, 17rem)) * 1.2); line-height: 1; letter-spacing: -0.035em;
}
.opener__name span { display: inline-block; }

/* Weighted scrolling (Lenis) takes over from CSS smooth scrolling */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

/* Film strip: on desktop the rail is moved by scroll rather than scrolled itself */
.rail.rail--strip { position: relative; overflow: visible; scroll-snap-type: none; } /* relative: card offsets measure from the rail */
.is-strip { overflow: hidden; } /* clips the cards waiting off-screen */
.index-line i { position: relative; }
.index-line i b { position: absolute; inset: 0; background: var(--oat); transform-origin: left; transform: scaleX(0); }

/* Fallback entrance: one sequence, on load, CSS only.
   Deliberately animates transform, never opacity: if animations never run
   (old browser, paused rendering, print), the content is still fully visible. */
@media (prefers-reduced-motion: no-preference) {
  .hero__content .inner > * { animation: rise var(--t-slow) var(--ease) backwards; }
  .hero__content .inner > :nth-child(1) { animation-delay: 60ms; }
  .hero__content .inner > :nth-child(2) { animation-delay: 140ms; }
  .hero__content .inner > :nth-child(3) { animation-delay: 220ms; }
  .hero__content .inner > :nth-child(4) { animation-delay: 300ms; }
  @keyframes rise { from { transform: translateY(1.25rem); } }
}

/* Footage layers. The still underneath is always the content: video sits on
   top at opacity 0 and only fades in once it is actually playing. If a clip is
   missing, blocked or never loads, the page looks exactly as it does without it. */
.hero__video, .plate__preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.001; transition: opacity var(--t-slow) var(--ease);   /* not 0: Safari may refuse to start a video it counts as invisible */
}
.hero__video.is-playing, .plate__preview.is-playing { opacity: 1; }

/* Page-to-page dissolve. Two lines of CSS, no JavaScript; browsers without
   support simply change page as normal. The header is named so it holds still. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html { scroll-behavior: smooth; }
}
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--t-slow);
  animation-timing-function: var(--ease);
}
/* Home to case study: the clicked frame grows into the case study's frame. Cover keeps the
   picture true while the frame changes shape; the header stays on top throughout. */
::view-transition-group(film) { animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
::view-transition-old(film), ::view-transition-new(film) { height: 100%; object-fit: cover; overflow: clip; }
::view-transition-group(site-header) { z-index: 2; }

/* ============================================================
   7. Editorial pieces
   ============================================================ */
.plate { position: relative; overflow: hidden; background: var(--ink); display: block; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(14 12 11 / 0.74) 0%, rgb(14 12 11 / 0.1) 55%, rgb(14 12 11 / 0) 100%);
}
.plate__type { position: absolute; inset-inline: var(--s-5); bottom: var(--s-5); }
.plate__type h3 { font-size: calc((var(--step-3)) * 1.2); line-height: 1; color: var(--paper); text-transform: uppercase; letter-spacing: 0.02em; }
.plate__type .meta { color: var(--oat); display: block; margin-bottom: var(--s-2); }

.caption { font-family: var(--display); font-style: italic; font-size: calc((var(--step--1)) * 1.2); line-height: 1.5; color: var(--oat); }
.section--paper .caption { color: var(--body-on-paper); }

/* ============================================================
   8. Sections
   ============================================================ */
#uses .head { margin-bottom: var(--s-7); }
/* Promise (home): the shell, blurred, with one sharp window; the promise beside the window's top and bottom */
.promise {
  --ph: clamp(38rem, 48vw, 46rem);                                              /* block height */
  --x0: calc((100cqw - min(100cqw, var(--max))) / 2 + var(--gutter));           /* content's left edge */
  --gw: calc(var(--ww) + 3cqw + 24rem);                                        /* window, gap and text as one group */
  --wl: calc(50cqw - var(--gw) / 2);                                            /* window: left (the group centred), top, width, height */
  --wt: calc(var(--ph) * 0.12);
  --ww: clamp(10rem, 26cqw, 24rem);                                           /* wide enough to see the shell's crest and tiles (Anna, 27 Sep) */
  --wh: calc(var(--ph) * 0.66);
  --tx: calc(var(--wl) + var(--ww) + 3cqw);                                    /* the text's left edge */
  position: relative; container-type: inline-size; height: var(--ph); overflow: hidden; background: var(--black);
}
.promise__blur, .promise__window img { position: absolute; object-fit: cover; object-position: center 20%; }   /* sky above the crest inside the window */
.promise__blur { inset: 0; width: 100%; height: 100%; }
.promise::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgb(14 12 11 / 0) 25%, rgb(14 12 11 / 0.3) 55%, rgb(14 12 11 / 0.4) 100%); }   /* just enough behind the text: the shell stays readable */
.promise__window {
  position: absolute; z-index: 1; left: var(--wl); top: var(--wt); width: var(--ww); height: var(--wh);
  overflow: hidden; outline: 1px solid rgb(248 239 230 / 0.85);
}
.promise__window img { left: calc(-1 * var(--wl)); top: calc(-1 * var(--wt)); width: 100cqw; height: var(--ph); max-width: none; }
.promise__label, .promise__title, .promise__lead { position: absolute; z-index: 2; left: var(--tx); right: var(--gutter); margin: 0; }
.promise__label { left: var(--wl); top: calc(var(--wt) - 2.25rem); color: var(--oat); }
.promise__title {
  top: var(--wt); height: var(--wh); max-width: 15ch; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--paper); line-height: 1.02;
}
.promise__title > span { display: block; margin-top: -0.12em; }  /* cap height lines up with the window's top edge */
.promise__lead { top: calc(var(--wt) + var(--wh) + var(--s-5)); max-width: 44ch; color: var(--oat); }

/* What video does for your business (home), as magazine columns: a rule under the heading, three columns divided by
   hairlines, each a serif number, a serif title and one sentence (after Anna's editorial references) */
.benefits .head { padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule-on-paper); }
.benefits .head h2 { max-width: 20ch; }
.benefits__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.benefit { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-2) clamp(var(--s-5), 3vw, var(--s-7)) 0; border-left: 1px solid var(--rule-on-paper); }
.benefit:first-child { padding-left: 0; border-left: 0; }
.benefit:last-child { padding-right: 0; }
/* With motion: the heading's rule and the column hairlines are drawn by pseudo-elements that motion.js scales
   (--rule, 0 to 1). Without motion they're the plain borders above. */
.motion .benefits .head { position: relative; border-bottom-color: transparent; }
.motion .benefits .head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rule-on-paper);
  transform: scaleX(var(--rule, 1)); transform-origin: left;
}
@media (min-width: 60.0625rem) {
  .motion .benefit { position: relative; }
  .motion .benefit:not(:first-child) { border-left-color: transparent; }
  .motion .benefit:not(:first-child)::before {
    content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--rule-on-paper);
    transform: scaleY(var(--rule, 1)); transform-origin: top;
  }
}
.benefit__num { font-family: var(--display); font-size: calc((var(--step-4)) * 1.2); line-height: 1; letter-spacing: -0.02em; color: var(--umber); }
.benefit h3 { margin: var(--s-3) 0 0; font-size: calc((var(--step-2)) * 1.2); line-height: 1.2; color: var(--black); }
.benefit p { margin: 0; color: var(--body-on-paper); }

/* What I make: three columns at the same height, rows shared across all three (subgrid) so
   frames, lines, types and links line up for comparing straight across */
.uses {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto); column-gap: clamp(var(--s-5), 3vw, var(--s-7));
}
.uses .use { grid-row: span 4; display: grid; grid-template-rows: subgrid; align-content: start; border-top: 0; padding: 0; }
/* The service name sits on its frame, in the Work page's frame type; the placeholder label moves to the top */
.use__frame .plate__type h3 { margin: 0; }
.use__frame .frame__todo { top: var(--s-3); bottom: auto; }
.use__for { color: var(--paper); }
.use__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); margin-bottom: var(--s-5); transition: opacity var(--t-slow) var(--ease); }
.use__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame__todo {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 1;
  font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oat);
  background: rgb(14 12 11 / 0.6); padding: var(--s-1) var(--s-2);
}
@media (hover: hover) {
  .uses:hover .use:not(:hover) .use__frame,
  .uses:focus-within .use:not(:focus-within) .use__frame { opacity: 0.45; }
}
.sticky-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--s-6), 6vw, var(--s-9)); }
.sticky-media { position: sticky; top: 7.5rem; align-self: start; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.sticky-media img { width: 100%; height: 100%; object-fit: cover; }
.use { border-top: 1px solid var(--rule-on-black); padding-block: var(--s-6); }
.use:first-of-type { border-top: 0; padding-top: 0; }
.use h3 { margin-bottom: var(--s-3); }
.use p { color: var(--oat); max-width: 52ch; }
.use__link { display: inline-block; margin-top: var(--s-4); font-size: calc((var(--step--1)) * 1.2); color: var(--oat); border-bottom: 1px solid var(--umber); padding-bottom: 2px; }
@media (hover: hover) and (pointer: fine) { .use__link:hover { color: var(--paper); border-color: var(--paper); } }
/* The video types each audience books, named the way people search for them */
.use__types { margin: var(--s-5) 0 var(--s-2); padding: 0; list-style: none; display: grid; gap: var(--s-3); align-content: start; }
.use__types li {
  display: block; padding-left: 2rem; line-height: 1.4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23B4917B' stroke-width='1.3'/%3E%3Cpath d='M6 10.2l2.7 2.7L14.2 7.4' fill='none' stroke='%23B4917B' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat 0 0.05em / 1.2rem;
  font-size: calc((var(--step--1)) * 1.2); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper);
}

.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 35rem);
  gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); /* snap to the gutter, not the viewport edge */
  padding-inline: var(--gutter); padding-bottom: var(--s-4);
  scrollbar-width: thin; scrollbar-color: var(--umber) transparent;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--umber); }
.rail__item { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s-4); }
.rail__media { aspect-ratio: 16 / 10; }
.rail__item--empty .rail__media {
  display: grid; place-items: center; background: var(--ink);
  border: 1px dashed var(--umber); color: var(--clay);
  font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: var(--s-5);
}

.fan { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(var(--s-6), 6vw, var(--s-9)); align-items: center; }
.fan__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-on-paper); border: 1px solid var(--rule-on-paper); }
.fan__list div { background: var(--paper); padding: var(--s-5); }
.fan__list strong { display: block; font-size: calc((var(--step--1)) * 1.2); margin-bottom: var(--s-1); }
.fan__list span { font-size: calc((var(--step--1)) * 1.2); color: var(--body-on-paper); }

/* How it works (home): the heading and next step on the left, four numbered steps joined by a line on the right */
.process { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: start; }
.process__head h2 { margin-bottom: var(--s-4); }
.process__head .lead { color: var(--oat); margin-bottom: var(--s-6); max-width: 30ch; }
.timeline { position: relative; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.timeline li { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--s-5); padding-bottom: var(--s-7); counter-increment: step; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: counter(step); grid-row: 1 / span 2; position: relative; z-index: 1;
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: #29211d; font-family: var(--display); font-size: calc((var(--step-2)) * 1.2); color: var(--paper);   /* Clay at 16% over Black, opaque so the line passes behind */
}
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.75rem - 0.5px); top: 3.5rem; bottom: 0; width: 1px; background: rgb(180 145 123 / 0.4); }
/* With motion (motion.js): a Clay line draws down the steps as the page scrolls, over a fainter track, and each
   number turns Paper as the line reaches it. Without motion the steps simply show as above. */
.motion .timeline::before {
  content: ""; position: absolute; z-index: 0; left: calc(1.75rem - 0.5px); top: 1.75rem; width: 1px; height: var(--run, 0px);
  background: var(--clay); transform: scaleY(var(--fill, 0)); transform-origin: top;
}
.motion .timeline li:not(:last-child)::after { background: rgb(180 145 123 / 0.18); }
.motion .timeline li::before { transition: background-color 0.5s var(--ease), color 0.5s var(--ease); }
.motion .timeline li.is-reached::before { background: var(--paper); color: var(--black); }
.timeline h3 { grid-column: 2; margin: 0.4rem 0 var(--s-2); font-family: var(--sans); font-size: calc((var(--step-1)) * 1.2); font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--paper); }
.timeline p { grid-column: 2; margin: 0; color: var(--oat); max-width: 46ch; }

/* Process — genuinely a sequence, so it is numbered */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); counter-reset: step; }
.step { border-top: 1px solid var(--rule-on-black); padding-top: var(--s-5); counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.18em; color: var(--clay); }
.step h3 { margin-block: var(--s-3) var(--s-2); }
.step p { color: var(--oat); }

.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.value { border-top: 1px solid var(--rule-on-paper); padding-top: var(--s-5); }
.value h3 { font-family: var(--sans); font-size: calc((var(--step--1)) * 1.2); font-weight: 600; line-height: 1.45; margin-bottom: var(--s-2); }
.value p { font-size: calc((var(--step--1)) * 1.2); }

.stills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-1); }
.stills > * { aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); }
.stills img { width: 100%; height: 100%; object-fit: cover; }
.stills .is-empty {
  display: grid; place-items: center; border: 1px dashed var(--umber); color: var(--clay);
  font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: var(--s-3);
}

/* Label, heading, text: the heading needs its own space either side */
.coverage h2, .fan h2 { margin-block: var(--s-3) var(--s-5); }
.coverage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(var(--s-6), 6vw, var(--s-9)); }
.coverage ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s-7); }
.coverage li { padding-block: var(--s-3); border-top: 1px solid var(--rule-on-black); font-size: calc((var(--step--1)) * 1.2); color: var(--oat); break-inside: avoid; }

.faq { border-top: 1px solid var(--rule-on-black); }
.faq details { border-bottom: 1px solid var(--rule-on-black); }
.faq summary {
  cursor: pointer; list-style: none; padding-block: var(--s-5);
  display: flex; gap: var(--s-4); align-items: baseline;
  font-family: var(--display); font-size: calc((var(--step-2)) * 1.2); color: var(--paper);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--clay); font-family: var(--sans); font-size: calc((var(--step-1)) * 1.2); }
.faq details[open] summary::after { content: "\2013"; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] > :not(summary) { animation: faq-open 0.25s var(--ease-ui) both; }
}
@keyframes faq-open { from { opacity: 0; transform: translateY(-0.5rem); } }
.faq p { color: var(--oat); padding-bottom: var(--s-5); }
.section--paper .faq, .section--paper .faq details { border-color: var(--rule-on-paper); }
.section--paper .faq summary { color: var(--black); }
.section--paper .faq summary::after { color: var(--umber); }
.section--paper .faq p { color: var(--body-on-paper); }

.practical { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.practical div { border-top: 1px solid var(--rule-on-paper); padding-top: var(--s-5); }
.practical strong { display: block; font-size: calc((var(--step--1)) * 1.2); margin-bottom: var(--s-2); }
.practical span { font-size: calc((var(--step--1)) * 1.2); color: var(--body-on-paper); }

/* Why work with me (home, on the dark ground since 26 Sep): four reasons, two by two, each an icon, a short bold title and one sentence */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) clamp(var(--s-6), 5vw, var(--s-9)); }
.reason { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.reason__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgb(180 145 123 / 0.16); color: var(--oat); }
.reason__icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reason h3 { margin: 0.55rem 0 var(--s-2); font-family: var(--sans); font-size: calc((var(--step-1)) * 1.2); font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--paper); }
.reason p { margin: 0; color: var(--oat); max-width: 44ch; }

/* Testimonials: one quote large over the footage, up to three more in a row on Ink below */
.quote { background: var(--ink); }
.quote__feature { position: relative; min-height: 26rem; display: flex; align-items: center; }
.quote__media { position: absolute; inset: 0; }
.quote__media img { width: 100%; height: 100%; object-fit: cover; }
.quote__scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgb(14 12 11 / 0.94) 0%, rgb(14 12 11 / 0.6) 52%, rgb(14 12 11 / 0.12) 100%); }
.quote__feature .inner { position: relative; width: 100%; padding-block: var(--s-8); } /* full width, so the quote lines up with the row below */
.quote__label { margin: 0 0 var(--s-5); font-family: var(--sans); font-size: calc((var(--step--2)) * 1.2); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oat); max-width: none; }
.quote figure { margin: 0; }
.quote blockquote { margin: 0; }
.quote__main { max-width: 34rem; }
.quote__main p { font-family: var(--display); font-size: calc((var(--step-3)) * 1.2); line-height: 1.3; color: var(--paper); max-width: none; margin-bottom: var(--s-5); }
.quote cite { font-style: normal; font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--oat); }
.quote__more {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-7) clamp(var(--s-6), 4vw, var(--s-8)); padding-block: var(--s-8) var(--s-9);
}
.quote__item { border-top: 1px solid var(--rule-on-black); padding-top: var(--s-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4); }
.quote__item p { font-family: var(--display); font-size: calc((var(--step-1)) * 1.2); line-height: 1.4; color: var(--paper); max-width: 40ch; }
.quote__item--todo p, .quote__item--todo cite { color: var(--clay); }

.closing p { color: var(--oat); margin-block: var(--s-5) var(--s-6); }
.closing.short { min-height: 60svh; display: flex; align-items: center; }

/* About portrait */
.portrait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(var(--s-5), 3vw, var(--s-7)); align-items: center; }
.portrait__media { aspect-ratio: 4 / 5; background: var(--ink); position: relative; overflow: hidden; display: grid; place-items: center; }
.portrait__media img { width: 100%; height: 100%; object-fit: cover; }
.portrait__media.is-empty { border: 1px dashed var(--umber); }
.portrait__brief { padding: var(--s-6); text-align: center; color: var(--clay); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.12em; text-transform: uppercase; line-height: 2; max-width: none; }
/* The name sits under the photo, not over it, so it never crosses her face. It's the page's h1. */
.portrait__name { margin: var(--s-5) 0 0; max-width: none; text-align: center; font-size: inherit; letter-spacing: normal; }
.portrait__media img { position: absolute; inset: 0; }
.portrait__name span { display: block; font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--oat); margin-bottom: var(--s-1); }
.portrait__name strong { font-family: var(--display); font-weight: 400; font-size: calc((var(--step-4)) * 1.2); letter-spacing: 0.06em; color: var(--paper); text-transform: uppercase; }
.facts { display: flex; flex-direction: column; gap: clamp(var(--s-5), 3vw, var(--s-7)); }
.fact { font-size: calc((var(--step--1)) * 1.2); line-height: 1.5; color: var(--oat); position: relative; padding-top: var(--s-3); max-width: 26ch; }
.fact::before { content: ""; position: absolute; top: 0; left: 0; width: 2.125rem; height: 1px; background: var(--umber); }
.facts--right { align-items: flex-end; }
.facts--right .fact { text-align: right; }
.facts--right .fact::before { left: auto; right: 0; }
.fact strong { color: var(--paper); font-weight: 600; }

/* Recent work (home): a quiet column beside a dense mosaic of frames, a floating fact,
   then one feature frame. After a photography-portfolio reference Anna chose. */
.folio__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: start; }
.folio__intro { position: sticky; top: calc(var(--header-h) + var(--s-8)); padding-top: var(--s-4); }
.folio__intro h2 { font-size: calc((var(--step-3)) * 1.2); line-height: 1.1; max-width: 14ch; margin-block: var(--s-3) var(--s-4); }
.folio__intro p { max-width: 32ch; margin-bottom: var(--s-6); }
.folio__mosaic {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(5.5rem, 9vw, 9.5rem); grid-auto-flow: dense; gap: var(--s-1);
}
.tile { position: relative; display: block; overflow: hidden; background: var(--rule-on-paper); }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile--big { grid-column: span 2; grid-row: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile--empty { display: grid; place-items: center; }
.tile__todo { font-size: calc((0.625rem) * 1.2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--umber); text-align: center; padding: var(--s-2); }
.tile__label {
  position: absolute; left: var(--s-2); bottom: var(--s-2);
  font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper);
  background: rgb(14 12 11 / 0.55); padding: var(--s-1) var(--s-2);
}
a.tile:focus-visible .tile__label { background: var(--black); }
@media (hover: hover) and (pointer: fine) { a.tile:hover .tile__label { background: var(--black); } }
.folio__badge {
  position: absolute; top: 9%; right: max(var(--s-2), calc(var(--gutter) - var(--s-7))); z-index: 2; margin: 0; /* overhangs the mosaic, never the screen */
  display: flex; flex-direction: column; gap: var(--s-1); max-width: 12rem;
  padding: var(--s-4) var(--s-5); background: var(--paper); border: 1px solid var(--rule-on-paper);
  box-shadow: 0 12px 32px rgb(14 12 11 / 0.1);
}
.folio__badge strong { font-family: var(--display); font-weight: 400; font-size: calc((var(--step-4)) * 1.2); line-height: 1; }
.folio__badge span { font-size: calc((var(--step--1)) * 1.2); font-weight: 500; }
.folio__badge small { font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.08em; color: var(--umber); line-height: 1.5; }
.folio__feature { position: relative; margin: var(--s-8) 0 0; overflow: hidden; }
.folio__feature img { width: 100%; height: clamp(18rem, 38vw, 34rem); object-fit: cover; }
.folio__feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 12 11 / 0.6), transparent 45%); pointer-events: none; }
.folio__feature figcaption { position: absolute; left: var(--s-6); bottom: var(--s-5); z-index: 1; display: flex; gap: var(--s-4); align-items: baseline; }
.folio__feature figcaption .meta { color: var(--paper); }
.folio__feature figcaption .todo { color: var(--oat); font-size: calc((var(--step--1)) * 1.2); }

/* Chapters: each case study on the Work page opens with one, after the scroll chapters in
   Anna's own draft (25 Sep 2026). With reduced motion, each is one full-screen frame.
   Otherwise the chapter is taller than the screen, its hold sticks under the header, and
   motion.js opens the frame from --clip-from to full. The frame only ever opens. Set in CSS
   rather than script so the page is its final length from the first paint. */
.chapter { position: relative; background: var(--ink); color: var(--paper); }
.chapter--place { background: var(--paper); color: var(--black); }
.chapter__hold { position: relative; height: calc(100svh - var(--header-h)); min-height: 32rem; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .chapter { height: 175svh; }
  .chapter__hold { position: sticky; top: var(--header-h); }
}
/* The case's id: where the hold ends and the frame is fully open, less the scroll margin */
.chapter__anchor { position: absolute; left: 0; top: calc(100% - 100svh + var(--header-h) + var(--s-4)); }
.chapter__media.is-empty { display: grid; place-items: center; background: var(--ink); }
.chapter__media.is-empty p { margin: 0; max-width: 16ch; text-align: center; font-size: calc((var(--step--1)) * 1.2); line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oat); }
.chapter__num { position: absolute; z-index: 3; top: var(--s-5); left: var(--gutter); font-family: var(--display); font-size: calc((var(--step-1)) * 1.2); }
.chapter__media { position: absolute; overflow: hidden; background: var(--black); }
.chapter__media img, .chapter__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chapter__film { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.chapter__film.is-playing { opacity: 1; }
.chapter .meta { display: block; margin-bottom: var(--s-2); }

/* 01: the frame starts right of centre and opens out to the right edge, behind the title */
.chapter--open .chapter__media { top: 6%; bottom: 6%; left: 10vw; right: 0; --clip-from: inset(5% 11% 5% 16%); }
.chapter--open .chapter__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgb(14 12 11 / 0.55), rgb(14 12 11 / 0) 55%), linear-gradient(0deg, rgb(14 12 11 / 0.6), rgb(14 12 11 / 0) 45%);
}
.chapter--open .chapter__title {
  position: absolute; z-index: 2; left: var(--gutter); top: 50%; translate: 0 -50%;
  font-size: calc((clamp(4rem, 11vw, 11.5rem)) * 1.2); line-height: 0.86; letter-spacing: -0.035em;
}
.chapter--open .chapter__caption { position: absolute; z-index: 2; right: var(--gutter); bottom: var(--s-7); max-width: 24rem; }
.chapter--open .meta { color: var(--oat); }

/* 02: the frame opens from a narrow slit in the middle, over a huge word on Paper */
/* Centred by a box twice the screen's width, since GSAP owns this element's transform */
.chapter--place .chapter__word {
  position: absolute; left: -50%; right: -50%; top: 40%; margin: -0.4em 0 0; max-width: none; text-align: center;
  font-family: var(--display); font-size: calc((clamp(9rem, 28vw, 30rem)) * 1.2); line-height: 0.8; letter-spacing: -0.04em;
  white-space: nowrap; color: var(--rule-on-paper);
}
.chapter--place .chapter__media { top: 5%; bottom: 24%; left: 18vw; right: 18vw; --clip-from: inset(10% 20% 10% 31%); }
.chapter--place .chapter__caption {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-6);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6);
}
.chapter--place .chapter__title { font-size: calc((clamp(3rem, 7vw, 7rem)) * 1.2); line-height: 0.9; letter-spacing: -0.03em; }
.chapter--place .chapter__about { max-width: 24rem; }
.chapter--place .meta { color: var(--umber); }
.chapter--place .use__link { color: var(--black); }
@media (hover: hover) and (pointer: fine) { .chapter--place .use__link:hover { color: var(--umber); border-color: var(--black); } }

/* Work */
.page-head { padding-block: var(--section-y) var(--s-8); }
.page-head h1 { max-width: none; }
.page-head .lead { color: var(--oat); margin-top: var(--s-5); max-width: var(--measure-tight); }

.credits { list-style: none; margin: var(--s-8) 0 0; padding: 0; border-top: 1px solid var(--rule-on-black); }
.credits a {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s-5); align-items: baseline;
  padding-block: var(--s-5); border-bottom: 1px solid var(--rule-on-black); color: var(--paper);
}
.credits__name { font-family: var(--display); font-size: calc((var(--step-3)) * 1.2); line-height: 1.1; transition: color var(--t-fast) var(--ease); }
.credits__what { font-size: calc((var(--step--1)) * 1.2); color: var(--oat); }
@media (hover: hover) and (pointer: fine) { .credits a:hover .credits__name { color: var(--oat); } }

.reel { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel__label {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s-5);
  background: rgb(14 12 11 / 0.55);
  font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oat);
  max-width: none; margin: 0;
}

/* Fluid height, not aspect-ratio + min-height: that pair widens the box past the viewport on narrow screens */
.case__frame { height: clamp(26rem, 43vw, 46rem); }
.case__frame img { position: absolute; inset: 0; }
.case__frame .plate__type { inset-inline: 0; bottom: var(--s-7); }
.case__frame h2 { font-size: calc((var(--step-5)) * 1.2); line-height: 0.95; color: var(--paper); text-transform: uppercase; letter-spacing: 0.02em; max-width: none; }
.case__frame .meta { color: var(--paper); display: block; margin-bottom: var(--s-3); text-shadow: 0 1px 8px rgb(14 12 11 / 0.55); }
.case__frame.is-empty { border-block: 1px dashed var(--umber); }
.case__frame.is-empty .plate__note {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s-5);
  font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay);
  max-width: none; margin: 0;
}
.case__body { padding-block: var(--s-8); }
.case__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s-6); }
.case__grid > div { border-top: 1px solid var(--rule-on-paper); padding-top: var(--s-5); }
.case__grid h3 { font-family: var(--sans); font-size: calc((var(--step--1)) * 1.2); font-weight: 600; line-height: 1.45; margin-bottom: var(--s-2); }
.case__grid p { font-size: calc((var(--step--1)) * 1.2); }

/* Backdrop lettering: a word set huge in Times capitals, tone on tone, behind a
   section. Generated from data-backdrop so it is decoration, not page text: screen
   readers and search engines skip it. --drift is moved by motion.js on scroll. */
[data-backdrop] { position: relative; overflow: hidden; isolation: isolate; }
[data-backdrop]::before {
  content: attr(data-backdrop);
  position: absolute; z-index: -1; inset-inline: var(--gutter); top: 50%;
  transform: translate(var(--drift, 0px), -50%);
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: calc((clamp(5.5rem, 19vw, 20rem)) * 1.2); line-height: 0.84; letter-spacing: 0.08em;
  color: rgb(248 239 230 / 0.045);
  pointer-events: none; user-select: none;
}

/* Text for screen readers only */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The faint flower behind "Cześć, I'm ANNA": warm brown at low opacity, running off the bottom of the section */
.person { position: relative; overflow: hidden; }
.person > .inner { position: relative; z-index: 1; }
.person__flower {
  position: absolute; z-index: 0; bottom: -8%; height: 104%; width: auto; pointer-events: none;
  left: max(var(--s-4), calc((100% - var(--max)) / 2 + var(--gutter) + 6rem));
  filter: brightness(0) invert(1); opacity: 1;   /* white lines on Paper, like a watermark (Anna, 29 Sep) */
}

/* Who you'll work with (home): "Cześć, I'm", then ANNA large on the line below, all black.
   A (default): the name runs onto the top of the photo, behind Anna's head. The stage is the stacking context:
   photo (1), a Paper wash on its top left (1, after it), the name (2), the photo masked to Anna (3). The frame
   itself must not create a stacking context (no z-index, transform, opacity or clip-path on it).
   B (.person--beside): the name stays in the left column; no wash, no cut-out. */
.person__stage {
  --gap: clamp(var(--s-6), 4vw, var(--s-8));
  --pw: calc((100cqw - var(--gap)) / 2);            /* photo width */
  --hi: var(--step-5);
  --ns: calc(100cqw * 0.23);                         /* the name (2.93em wide): crosses about a third of the photo. 0.27-0.29 was too large (Anna, 26 Sep) */
  position: relative; container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap);
  grid-template-rows: calc(var(--hi) * 1.1) calc(var(--ns) * 0.8) minmax(0, 1fr);
}
.person__line { grid-area: 1 / 1 / 3 / 3; position: relative; z-index: 2; margin: 0; max-width: none; font-weight: 400; color: var(--black); pointer-events: none; }
.person__hi { display: block; font-size: calc((var(--hi)) * 1.2); line-height: 1.1; letter-spacing: -0.025em; }
.person__name { display: block; font-size: calc((var(--ns)) * 1.2); line-height: 0.8; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
.person__photo { grid-area: 2 / 2 / 4 / 3; align-self: start; position: relative; margin: 0; }   /* never stretched taller than the photo */
.person__base { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.person__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 38% at 0% 0%, rgb(248 239 230 / 0.8) 0%, rgb(248 239 230 / 0.5) 55%, rgb(248 239 230 / 0) 100%);
}
.person__cut {
  position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: auto;   /* sized by the photo itself, so it can't drift from it */
  -webkit-mask: url("assets/anna-steps-mask.png") center / 100% 100% no-repeat;
          mask: url("assets/anna-steps-mask.png") center / 100% 100% no-repeat;
}
/* B: beside the photo */
.person--beside .person__stage { --ns: calc(var(--pw) * 0.335); }
.person--beside .person__line { grid-area: 1 / 1 / 3 / 2; }
.person--beside .person__photo { grid-area: 1 / 2 / 4 / 3; }
.person--beside .person__photo::after, .person--beside .person__cut { display: none; }
.person__blocks { grid-area: 3 / 1; align-self: center; max-width: 30rem; padding-top: var(--s-6); }
.person__blocks .lead { color: var(--black); margin-bottom: var(--s-5); }
.person__rule { display: block; width: 1px; height: var(--s-8); background: var(--umber); margin-bottom: var(--s-5); }
.person__how { color: var(--body-on-paper); margin-bottom: var(--s-5); }
.person__how strong { font-weight: 600; font-size: calc((var(--step--1)) * 1.2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); }

.faq .areas { list-style: none; margin: 0 0 var(--s-5); padding: 0; columns: 2; column-gap: var(--s-6); font-size: calc((var(--step--1)) * 1.2); }
.faq .areas li { padding-block: var(--s-1); break-inside: avoid; }
.section--paper .faq .areas li { color: var(--body-on-paper); }

/* Contact */
.enquiry { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: start; }
.enquiry--simple fieldset { margin: 0 0 var(--s-6); padding: 0; border: 0; min-width: 0; }
.enquiry--simple legend { padding: 0; margin-bottom: var(--s-3); }
.enquiry--simple .hint-inline { font-weight: 400; color: var(--umber); }
.enquiry--simple input[type="file"] { display: block; width: 100%; padding: var(--s-3) 0; border: 0; font: inherit; font-size: var(--step--1); color: var(--ink); }
.enquiry--simple input[type="file"]::file-selector-button { margin-right: var(--s-4); padding: var(--s-2) var(--s-4); border: 1px solid rgb(26 21 18 / 0.28); background: transparent; font: inherit; color: var(--ink); cursor: pointer; }
.enquiry--simple .chip span { border: 1px solid rgb(26 21 18 / 0.28); padding: var(--s-3) var(--s-4); }
.enquiry__aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.enquiry__aside h2 { font-size: calc((var(--step-3)) * 1.2); margin-bottom: var(--s-5); }

.next { list-style: none; margin: 0 0 var(--s-8); padding: 0; counter-reset: next; }
.next li {
  counter-increment: next; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr);
  padding-block: var(--s-4); border-top: 1px solid var(--rule-on-paper); font-size: calc((var(--step--1)) * 1.2);
}
.next li::before { content: counter(next, decimal-leading-zero); grid-row: span 2; font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.18em; color: var(--umber); padding-top: 0.2em; }
.next strong { font-weight: 600; }
.next span { color: var(--body-on-paper); }

.terms { margin: 0 0 var(--s-5); }
.terms div { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--s-4); padding-block: var(--s-4); border-top: 1px solid var(--rule-on-paper); }
.terms dt { font-size: calc((var(--step--1)) * 1.2); font-weight: 600; }
.terms dd { margin: 0; font-size: calc((var(--step--1)) * 1.2); color: var(--body-on-paper); }

/* Forms: underlined fields on Paper, 16px or larger so phones don't zoom in */
.form fieldset { border: 0; margin: 0 0 var(--s-7); padding: 0; min-width: 0; }
.form legend { font-family: var(--display); font-size: calc((var(--step-3)) * 1.2); letter-spacing: -0.025em; line-height: 1.1; padding: 0; margin-bottom: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-6); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.field label { font-size: calc((var(--step--1)) * 1.2); font-weight: 500; }
.optional { font-weight: 400; color: var(--umber); margin-left: var(--s-1); }
.hint { margin: 0; font-size: calc((var(--step--1)) * 1.2); color: var(--umber); }
.form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  font: inherit; font-size: calc((var(--step-0)) * 1.2); color: inherit; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--umber); border-radius: 0;
  padding: var(--s-3) 0; min-height: 2.75rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form textarea { border: 1px solid var(--umber); padding: var(--s-3); resize: vertical; }
.form select {
  appearance: none; cursor: pointer; padding-right: var(--s-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23705745' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.25rem center;
}
.form :is(input, select, textarea):focus-visible { outline: none; border-color: currentColor; box-shadow: 0 1px 0 0 currentColor; }
.form textarea:focus-visible { box-shadow: 0 0 0 1px currentColor; }
.field.is-invalid :is(input, select, textarea) { border-color: currentColor; border-bottom-width: 2px; }
.error { margin: 0; font-size: calc((var(--step--1)) * 1.2); font-weight: 600; }
.error::before { content: "! "; }
.field--check { flex-direction: row; align-items: flex-start; gap: var(--s-3); }
.field--check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--oat); flex: none; }
.field--check label { font-weight: 400; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__legal { font-size: calc((var(--step--1)) * 1.2); }
.section--paper .form__legal { color: var(--body-on-paper); }
.form__status { margin: var(--s-4) 0 0; font-size: calc((var(--step--1)) * 1.2); font-weight: 500; }
.form--dark :is(input[type="text"], input[type="email"]) { border-bottom-color: var(--umber); }
.form--dark label { color: var(--paper); }

.guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: end; }
.guide p { color: var(--oat); margin-top: var(--s-4); }

/* ============================================================
   9. Footer
   ============================================================ */
.site-footer { background: var(--ink); padding-block: var(--s-8) var(--s-6); font-size: calc((var(--step--1)) * 1.2); }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-6); }
.site-footer h2 { font-family: var(--sans); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); font-weight: 500; margin-bottom: var(--s-3); max-width: none; }
.site-footer p, .site-footer li { color: var(--oat); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer .legal {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule-on-black);
  display: flex; justify-content: space-between; gap: var(--s-5); font-size: calc((var(--step--2)) * 1.2); color: var(--umber); flex-wrap: wrap;
}
.site-footer .legal a { color: var(--umber); }
@media (hover: hover) and (pointer: fine) { .site-footer .legal a:hover { color: var(--oat); } }

.todo { color: var(--clay); }

/* ============================================================
   10. Responsive
   ============================================================ */
/* Below desktop the frame sits above the headline instead of beside it */
@media (max-width: 64rem) {
  .hero { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .hero__stage {
    position: relative; right: auto; top: auto; translate: none;
    width: min(52vw, 17rem); margin: var(--s-10) 0 0 var(--gutter);
  }
  .hero--carousel .hero__stage { margin: 0 auto; width: min(40vw, 11rem); }
}

@media (max-width: 68rem) {
  .sticky-wrap, .fan, .coverage, .split { grid-template-columns: minmax(0, 1fr); }
  .sticky-media { position: static; aspect-ratio: 16 / 9; }
  .portrait { grid-template-columns: minmax(0, 1fr); }
  .facts { flex-direction: row; flex-wrap: wrap; gap: var(--s-5); }
  .facts--right { align-items: stretch; }
  .facts--right .fact { text-align: left; }
  .facts--right .fact::before { left: 0; right: auto; }
  .fact { flex: 1 1 15rem; max-width: none; }
  .values, .practical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enquiry, .guide { grid-template-columns: minmax(0, 1fr); }
  .uses { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s-8); }
  .uses .use { grid-row: auto; display: flex; flex-direction: column; }
  .use__frame { aspect-ratio: 3 / 2; }
  .folio__grid { grid-template-columns: minmax(0, 1fr); }
  .folio__intro { position: static; }
  .enquiry__aside { position: static; }
  .stills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 60rem) {
  /* Header in two rows rather than overflowing or needing a burger menu: the wordmark and
     Get in touch, then the five links on their own row */
  :root { --header-h: 6.625rem; } /* measured: 106px */
  .site-header .inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: var(--s-3) var(--s-4); padding-block: var(--s-3);
  }
  .nav { display: contents; }
  .nav__links { grid-column: 1 / -1; grid-row: 2; display: flex; gap: var(--s-6); }
  .site-header .btn { grid-column: 2; grid-row: 1; }
  .quote__more { grid-template-columns: minmax(0, 1fr); } /* one quote per row until there's room for three */
  .site-header--hero:not(.is-stuck) .inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding-block: var(--s-5) var(--s-6); }
  .site-header--hero:not(.is-stuck) .nav { display: flex; }
  .site-header--hero:not(.is-stuck) .nav__links { gap: var(--s-5); }
  .site-header--hero:not(.is-stuck) .btn { display: none; }
  .hero--carousel { --hero-head: 8rem; }
  .process { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .benefits__cards { grid-template-columns: minmax(0, 1fr); }
  .benefit { padding: var(--s-6) 0; border-left: 0; border-top: 1px solid var(--rule-on-paper); }
  .benefit:first-child { padding-top: 0; border-top: 0; }
  /* Phones and tablets: one column. A: the name overlaps the top of the photo. B: the photo starts below it. */
  .person__stage { --pw: min(100cqw, 34rem); --ns: calc(var(--pw) * 0.3); grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--hi) * 1.1) calc(var(--ns) * 0.8) auto auto; }
  .person__line { grid-area: 1 / 1 / 3 / 2; }
  .person__photo { grid-area: 2 / 1 / 4 / 2; max-width: 34rem; }
  .person__blocks { grid-area: 4 / 1; margin-top: var(--s-7); padding-top: 0; }
  .person__flower { height: 58%; bottom: -6%; left: auto; right: -3rem; }   /* behind the words, which come under the photo here */
  .person--beside .person__stage { --ns: calc(var(--pw) * 0.335); }
  .person--beside .person__line { grid-area: 1 / 1 / 3 / 2; }
  .person--beside .person__photo { grid-area: 3 / 1; margin-top: var(--s-5); }
  .promise { --ph: 40rem; --wl: var(--gutter); --ww: clamp(8rem, 42cqw, 16rem); --wt: 5rem; --wh: 24rem; --tx: calc(var(--wl) + var(--ww) + var(--s-5)); }
  .promise__lead { left: var(--wl); }
}

@media (max-width: 48rem) {
  :root { --header-h: 5.6875rem; } /* measured: 91px, the smaller button */
  .hero__thumbs { display: none !important; }
  .folio__badge { right: var(--gutter); top: auto; bottom: var(--s-5); }
  .folio__feature figcaption { left: var(--s-4); bottom: var(--s-4); }
  .hero__nav:not([hidden]) { display: flex; gap: var(--s-4); justify-content: center; margin-top: var(--s-5); }
  .grid-3, .steps, .values, .practical, .fan__list, .field-row { grid-template-columns: minmax(0, 1fr); }
  .faq .areas { columns: 1; }
  @media (prefers-reduced-motion: no-preference) { .chapter { height: 150svh; } }
  .chapter__hold { min-height: 30rem; }
  .chapter--open .chapter__media { left: var(--gutter); top: 9%; bottom: 34%; --clip-from: inset(8% 14% 8% 22%); }
  .chapter--open .chapter__title { top: auto; bottom: 34%; translate: 0 40%; font-size: calc((clamp(3.5rem, 17vw, 6.5rem)) * 1.2); }
  .chapter--open .chapter__caption { left: var(--gutter); right: var(--gutter); bottom: var(--s-5); max-width: none; }
  .chapter--place .chapter__media { left: var(--gutter); right: var(--gutter); top: 9%; bottom: 36%; --clip-from: inset(12% 18% 12% 26%); }
  .chapter--place .chapter__word { font-size: calc((42vw) * 1.2); top: 34%; }
  .chapter--place .chapter__caption { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .terms div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .stills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage ul { columns: 1; }
  .rail { grid-auto-columns: 86vw; }
  .site-header .inner { padding-inline: var(--s-4); }
  .wordmark { letter-spacing: 0.34em; }
  .nav__home { display: none; }   /* 11 Oct 2026: six links don't fit a phone's row; the wordmark above them goes home */
  .nav__links { justify-content: space-between; gap: var(--s-3); } /* the five links fill the phone's width */
  .nav__links a { padding-block: 0.625rem; }   /* about 36px to tap, not 15px (7 Oct audit) */
  .site-header--hero:not(.is-stuck) .nav, .site-header--hero:not(.is-stuck) .nav__links { width: 100%; }
  .site-header--hero:not(.is-stuck) .nav__links { gap: var(--s-3); }
  .reasons { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .site-header .btn { padding: var(--s-2) var(--s-4); min-height: 2.25rem; }

  /* Scrim has to cover more of a tall, narrow hero or the headline loses contrast */
  .hero__scrim {
    background: linear-gradient(to top, rgb(14 12 11 / 0.95) 0%, rgb(14 12 11 / 0.78) 38%, rgb(14 12 11 / 0.3) 72%, rgb(14 12 11 / 0.05) 100%);
  }
  .hero { min-height: 80svh; }
  .credits a { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .case__frame .plate__type { bottom: var(--s-6); }
  .quote__feature { min-height: 22rem; }
}

/* Phones up to 420px (was 380px until the 7 Oct audit: a 390px iPhone cut "FAQ" to "FA"): tighten the menu so
   all five links fit on one row */
@media (max-width: 26.25rem) {
  .nav__links { gap: var(--s-2); }
  .nav a { letter-spacing: 0.06em; }
  .site-header .btn { padding-inline: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rail { scroll-snap-type: none; }
}

/* ============================================================
   11. Print: black on white, no navigation or motion layers
   ============================================================ */
@media print {
  *, *::before, *::after { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  .site-header, .skip, .opener, .hero__media, .hero__scrim, .hero__chrome, .hero__video, .plate__preview, .plate__veil,
  .form, .guide form, [data-backdrop]::before { display: none !important; }
  .hero { min-height: 0; display: block; }
  .hero__stage { position: static; translate: none; width: 40%; margin: 0 0 1rem; }
  .hero__arrow, .slide:not(.is-active) { display: none !important; }
  .section { padding-block: 1.5rem; }
  .rail { display: block; overflow: visible; }
  .rail__item { margin-bottom: 1rem; break-inside: avoid; }
  .faq details { display: block; }
  .chapter { height: auto !important; break-inside: avoid; }
  .chapter__hold { position: relative !important; height: 60vh; }
  .chapter__word, .chapter__film { display: none !important; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  h1, h2, h3 { break-after: avoid; }
}

/* About: Anna's signed line (2 Oct 2026) */
.about__why { margin: var(--s-7) 0; }
.about__why p { font-family: var(--display); font-size: calc((var(--step-3)) * 1.2); line-height: 1.15; letter-spacing: -0.02em; }
.about__why footer { margin-top: var(--s-3); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--umber); }
.site-footer .social { flex-direction: row; display: flex; gap: var(--s-4); }
.site-footer .social a { color: var(--oat); display: inline-flex; }
@media (hover: hover) and (pointer: fine) { .site-footer .social a:hover { color: var(--paper); } }
.hero__social { margin: 0 0 0 var(--s-3); display: flex; align-items: center; gap: var(--s-4); }
.hero__social a { color: var(--paper); display: inline-flex; padding: var(--s-2); transition: color var(--t-fast) var(--ease), transform 140ms var(--ease-ui); }
.hero__social a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .hero__social a:hover { color: var(--oat); } }
/* 11 Oct 2026: the footer on Black too, set off by a hairline instead of a brown band */
.site-footer { background: var(--black); border-top: 1px solid rgb(248 239 230 / 0.08); }

/* Phone header (25 Oct 2026): the wordmark ran into "Request a quote" and the five links ran off the right edge.
   Tighter tracking and a smaller size on phones only; desktop is unchanged. */
@media (max-width: 48rem) {
  .site-header .wordmark { font-size: 0.8125rem; letter-spacing: 0.22em; gap: 0.6rem; }
  .site-header .btn { font-size: 0.6875rem; letter-spacing: 0.1em; white-space: nowrap; }
  .nav__links { gap: var(--s-2); }
  .nav__links a { font-size: 0.6875rem; letter-spacing: 0.08em; white-space: nowrap; }
}
@media (max-width: 23rem) {   /* the smallest phones, 320-360px */
  .site-header .wordmark { font-size: 0.75rem; letter-spacing: 0.16em; }
  .site-header .btn { padding-inline: var(--s-2); letter-spacing: 0.06em; }
  .nav__links { gap: 0.35rem; }
  .nav__links a { font-size: 0.625rem; letter-spacing: 0.03em; }
}