/* ============================================================
   Weter Gallery — styles
   Single-page, image-first, Oberflacht-inspired.
   ============================================================ */

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

:root {
  --bg: #ffffff;
  --bg-soft: #f6f4f1;      /* warm off-white for alternating sections */
  --text: #0a0a0a;
  --text-muted: #6d6d6d; /* WCAG AA: 5.17:1 on white, 4.71:1 on --bg-soft */
  --line: #e7e3de;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  --hand: 'Caveat', 'Segoe Script', cursive;

  --maxw: 1280px;
  --gutter: clamp(24px, 6vw, 96px);
  --section-y: clamp(80px, 12vh, 160px);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Skip link: hidden until keyboard-focused */
.skip-link {
  position: absolute;
  top: -48px; left: 16px;
  z-index: 300;
  padding: 12px 20px;
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* Present to screen readers and the document outline, absent visually */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Shared type ────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.4;
  color: var(--text);
  max-width: 32ch;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ─── Navigation ─────────────────────────────────────────── */
/* Transparent over the hero video; solid once scrolled past it. */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px var(--gutter);
  z-index: 100;
  background: transparent;
  transition: background .35s ease, padding .35s ease;
}
nav.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-logo {
  grid-column: 2;
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 46px);
  letter-spacing: 0.2em;
  text-transform: lowercase;
  font-weight: 300;
  color: var(--text);
}
/* Language switch — sits in the nav grid's otherwise empty first column */
.lang {
  grid-column: 1;
  justify-self: start;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.lang a { color: var(--text-muted); transition: color .25s ease; }
.lang a:hover { color: var(--text); }
/* The page you are on */
.lang a[aria-current] { color: var(--text); }
.nav-toggle {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  width: 22px;
  background: none;
  border: 0;
  padding: 8px 0;
}
.nav-toggle span {
  display: block;
  height: 1px;
  width: 22px;
  background: var(--text);
  opacity: 0.75;
}

/* Fullscreen overlay menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }
.nav-overlay a {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 7vw, 68px);
  letter-spacing: 0.02em;
  color: var(--text);
  opacity: 0.85;
  transition: opacity .25s ease;
}
.nav-overlay a:hover { opacity: 0.45; }
.nav-close {
  position: absolute;
  top: 28px; right: var(--gutter);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none; border: 0; cursor: pointer;
}

/* ─── Hero: polaroid-framed video ────────────────────────── */
.hero {
  /* Deliberately short of a full viewport. At 100svh the polaroid — which is
     only ~250px tall on a phone — floated in dead space, and everything below
     it started off screen. */
  min-height: 84vh;
  min-height: 84svh; /* stable on mobile when the address bar collapses */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 106px var(--gutter) 20px;
}
.video-container {
  width: clamp(280px, 56vw, 820px);
  background: #fff;
  padding: clamp(12px, 1.5vw, 18px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.10),
    0 34px 80px rgba(0, 0, 0, 0.12);
  transform: rotate(-0.75deg);
  transition: transform .5s ease;
}
.video-container:hover { transform: rotate(0deg); }
.video-container video {
  width: 100%;
  display: block;
  /* hero.mp4 is 1920×1084. Declaring it reserves the right box before the file
     loads, so the poster arriving does not shove the page down under it. */
  aspect-ratio: 1920 / 1084;
  object-fit: cover;
}
/* Caption in the polaroid's bottom band */
.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 2.1vw, 23px);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: #3a3a3a;
  text-align: center;
  padding: clamp(14px, 2vw, 22px) 0 clamp(8px, 1.2vw, 14px);
}

/* ─── Intro ──────────────────────────────────────────────── */
/* The bio, carried on the hero's white ground with no eyebrow label and no
   section-sized padding above it, so it reads as the tail of the landing
   video rather than the first section of the page. Text only — the block is
   centred under the polaroid above it, the copy inside stays ranged left. */
.intro { padding: clamp(14px, 2.4vh, 32px) 0 clamp(72px, 11vh, 132px); }
.intro .about-text { max-width: 640px; margin: 0 auto; }
.intro .lead { max-width: none; }
/* The bio is six one-line paragraphs; at the 20px body spacing they scatter
   instead of reading as one stanza. */
.intro .about-text p { margin-bottom: 16px; }
.intro-photo { margin: clamp(30px, 4vw, 46px) 0 clamp(26px, 3.5vw, 38px); }
/* The whole instax is shown, wide border and all — that border is what makes
   it read as a print, so it is never cropped away. No frame added here. */
.intro-photo img {
  width: 100%;
  aspect-ratio: 900 / 568;   /* the full print, uncropped */
  object-fit: contain;
}

/* ─── Generic section ────────────────────────────────────── */
.section { padding: var(--section-y) 0; }
section[id] { scroll-margin-top: 72px; } /* keep anchored headings clear of the fixed nav */
.section--soft { background: var(--bg-soft); }
.section-head { margin-bottom: clamp(36px, 6vw, 72px); }
.section-head .eyebrow { display: block; margin-bottom: 16px; }

/* ─── Work / portfolio ───────────────────────────────────── */
/* One figure per session: its two photos side by side, a note in the right
   margin carrying the sitter's name, the place, and the story of the day.
   Position and tilt vary per row via nth-child so it reads as placed by
   hand, not set on a grid. */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 7vw, 96px);
}
.session {
  display: grid;
  grid-template-columns: 1fr clamp(200px, 22vw, 300px);
  gap: clamp(16px, 2.5vw, 36px);
  align-items: center;
}
.session-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 28px);
  align-items: center;
}
/* A shoot that runs across two rows; the note centres between them. */
.session-stack {
  display: grid;
  gap: clamp(12px, 2vw, 28px);
}

/* The note. Bare text still renders as handwriting (see the .note-* parts
   below for the three-line form: name, place, story). */
.gallery .note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--hand);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.25;
  color: #4a4a4a;
  text-align: left;
  align-self: center;
  transform: rotate(-2deg);
}
/* Each line takes a type role the site already uses: handwriting for the
   name, the eyebrow label for the place, body copy for the story. */
.note-who {
  font-family: var(--hand);
  font-size: clamp(25px, 2.4vw, 33px);
  font-weight: 500;
  line-height: 1.1;
  color: #3a3a3a;
}
.note-where {
  font-family: var(--sans);
  font-weight: 200;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.note-story {
  margin-top: 6px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.7;
  color: #4a4a4a;
}
/* Scatter — kept gentle (±2°): a whole paragraph on a steep tilt is hard
   to read, where a four-word scribble could carry 5°. */
.session:nth-child(2n) .note   { align-self: start; margin-top: 9%; transform: rotate(1.4deg); }
.session:nth-child(3n) .note   { align-self: end; margin-bottom: 8%; transform: rotate(-1.2deg); }
.session:nth-child(4n+1) .note { transform: rotate(2deg); }
.session:nth-child(5n+3) .note { align-self: start; margin-top: 15%; transform: rotate(-2.2deg); }
/* A two-row shoot always centres, whatever position it lands in */
.gallery .session--double .note { align-self: center; margin-top: 0; margin-bottom: 0; }

/* Image placeholder shown until real photos are dropped in.
   Swap <div class="ph"> for <img src="..."> and it just works. */
.ph {
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(45deg, #efece7 0 12px, #f6f4f1 12px 24px);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ph--wide  { aspect-ratio: 3 / 2; }
.ph--tall  { aspect-ratio: 3 / 4; }
.ph--port  { aspect-ratio: 4 / 5; }

/* ─── Journal: magazine collage ──────────────────────────── */
/* Publications scattered like magazines on a table: hand-placed,
   tilted, overlapping. Hover lifts one to the top and straightens it. */
.journal-grid {
  position: relative;
  aspect-ratio: 16 / 10;
}
.journal-grid figure {
  position: absolute;
  transition: transform .35s ease, box-shadow .35s ease;
}
.journal-grid figure:hover {
  transform: rotate(0deg) scale(1.05);
  z-index: 20;
}
.journal-grid img {
  cursor: zoom-in;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.10),
    0 12px 30px rgba(0, 0, 0, 0.16);
  background: #fff;
}
/* Hand placement — order matches the HTML (1695, 1696, 1697, 2026,
   2027, 4103, 4345, 9962) */
.journal-grid figure:nth-child(1) { left: 0;   top: 2%;  width: 34%; transform: rotate(-4deg);  z-index: 3; }
.journal-grid figure:nth-child(2) { left: 70%; top: 52%; width: 30%; transform: rotate(-3deg);  z-index: 2; }
.journal-grid figure:nth-child(3) { left: 70%; top: 8%;  width: 30%; transform: rotate(5deg);   z-index: 4; }
.journal-grid figure:nth-child(4) { left: 3%;  top: 52%; width: 31%; transform: rotate(2.5deg); z-index: 2; }
.journal-grid figure:nth-child(5) { left: 30%; top: 4%;  width: 20%; transform: rotate(3deg);   z-index: 5; }
.journal-grid figure:nth-child(6) { left: 51%; top: 0;   width: 22%; transform: rotate(-2deg);  z-index: 1; }
.journal-grid figure:nth-child(7) { left: 56%; top: 44%; width: 21%; transform: rotate(4deg);   z-index: 3; }
.journal-grid figure:nth-child(8) { left: 33%; top: 40%; width: 21%; transform: rotate(-5.5deg); z-index: 6; }

/* ─── Films: two frames between sprocket rows ────────────── */
/* The strip is dark so the perforations read as punched-out holes. They are
   painted as a repeating ellipse rather than built from elements — one
   background, no DOM, and it rescales with the strip. */
.filmstrip {
  background: #0a0a0a;
  padding: clamp(12px, 1.6vw, 20px);
  display: grid;
  gap: clamp(10px, 1.3vw, 16px);
}
.filmstrip .perf {
  height: clamp(11px, 1.5vw, 17px);
  background-image: radial-gradient(ellipse 40% 46% at center, var(--bg-soft) 0 99%, transparent 100%);
  background-size: clamp(26px, 3.2vw, 40px) 100%;
  background-repeat: repeat-x;
}
.filmstrip .frames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.3vw, 16px);
}
.frame {
  position: relative;
  aspect-ratio: 16 / 9;   /* both films are 720p, 1.77 */
  overflow: hidden;
  background: #000;
}
.frame video { width: 100%; height: 100%; object-fit: cover; }

/* The films run muted on their own; the whole frame is the sound control and
   the chip is just its visible label. */
.sound-toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(10px, 1.4vw, 16px);
  background: none;
  border: 0;
  cursor: pointer;
}
.sound-toggle span {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 10, 10, 0.55);
  padding: 7px 12px;
  transition: background .25s ease;
}
.sound-toggle:hover span { background: rgba(10, 10, 10, 0.85); }
.sound-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
/* Sound on: invert the chip so the state is legible without reading it */
.sound-toggle[aria-pressed="true"] span { background: #fff; color: #0a0a0a; }

/* ─── About ──────────────────────────────────────────────── */
.about-text p { margin-bottom: 20px; color: #2a2a2a; }
/* The proof row is otherwise plain text, so its one link needs an underline
   to read as clickable at this size */
.proof a { border-bottom: 1px solid var(--line); transition: color .25s ease, border-color .25s ease; }
.proof a:hover { color: var(--text); border-bottom-color: var(--text); }
.proof {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─── Pricing ────────────────────────────────────────────── */
/* Three steps above the tiers. Same column count and gap as .tiers, so the
   two grids line up as one block rather than reading as separate sections. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  list-style: none;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.steps h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  margin-bottom: 10px;
}
/* The numeral recedes; the verb carries the line */
.steps .step-n { color: var(--text-muted); }
.steps p {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  max-width: 30ch;
}
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
}
.tier {
  border: 1px solid var(--line);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.tier h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  margin-bottom: 8px;
}
.tier .price {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.tier .price b { color: var(--text); font-weight: 400; }
.tier ul { list-style: none; margin-bottom: 28px; }
.tier li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: #333;
}
.tier .btn { margin-top: auto; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid var(--text);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.btn:hover { background: var(--text); color: var(--bg); }
.btn--block { display: block; width: 100%; text-align: center; }

/* ─── Contact ────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
}
.contact-direct p { margin-bottom: 18px; max-width: 40ch; }
.contact-direct a.big {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 38px);
  border-bottom: 1px solid var(--line);
}
.contact-meta { margin-top: 28px; color: var(--text-muted); font-size: 13px; }
.socials { margin-top: 20px; display: flex; gap: 22px; }
.socials a {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted); transition: color .25s ease;
}
.socials a:hover { color: var(--text); }
/* The handle is the brand name, so it stays lowercase like the logo rather
   than being upper-cased with the rest of the social links. */
.socials a.handle { text-transform: none; letter-spacing: 0.08em; font-size: 13px; }

form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--text);
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ─── Footer ─────────────────────────────────────────────── */
footer {
  padding: 48px var(--gutter);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Nothing else in the footer is clickable, so the link needs a hover cue */
footer a { transition: color .25s ease; }
footer a:hover { color: var(--text); }

/* ─── Lightbox ───────────────────────────────────────────── */
.gallery figure img { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.lb-btn {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity .25s ease;
  z-index: 2;
}
.lb-btn:hover { opacity: 1; }
.lb-close {
  top: 24px; right: 28px;
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
}
.lb-prev, .lb-next {
  top: 50%; transform: translateY(-50%);
  font-family: var(--serif);
  font-size: 44px; line-height: 1;
  padding: 16px 22px;
  user-select: none;
}
.lb-prev { left: 6px; }
.lb-next { right: 6px; }
@media (max-width: 600px) { .lb-prev, .lb-next { font-size: 32px; padding: 12px 14px; } }

/* ─── Scroll reveal ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .tiers, .steps { grid-template-columns: 1fr; }
  .steps { gap: clamp(22px, 4vw, 32px); }
  .steps p { max-width: none; }
}
@media (max-width: 768px) {
  nav { padding: 18px var(--gutter); }
  .nav-logo { font-size: clamp(24px, 7vw, 32px); letter-spacing: 0.16em; }
  .lang { gap: 8px; font-size: 10px; letter-spacing: 0.12em; }
  .video-container { width: min(88vw, 560px); }
  /* Content-sized on phones. Forcing a viewport height here buys nothing: the
     polaroid just sits in a column of white with the intro pushed off screen.
     Sized to its content, the video sits under the nav and the bio starts
     right below it — both visible on the first screen. */
  .hero {
    min-height: 0;
    padding: clamp(80px, 12vh, 100px) var(--gutter) clamp(14px, 2vh, 22px);
  }
  .intro { padding-top: clamp(10px, 1.8vh, 20px); }
  .two-col { grid-template-columns: 1fr; }
  /* Two 16:9 frames side by side are unwatchably small on a phone */
  .filmstrip .frames { grid-template-columns: 1fr; }

  /* Journal on phones: a centered cascade — every piece overlaps the one
     before it and swings left/right of the centreline, a true collage pile.
     (Static positioning: later siblings naturally paint on top.) */
  .journal-grid {
    aspect-ratio: auto;
    position: static;
    padding: 6px 0;
  }
  .journal-grid figure:nth-child(n) {
    position: static;
    width: 84%;
    margin: 0 auto;
    transform: rotate(-2.5deg) translateX(-3%);
    z-index: auto;
  }
  .journal-grid figure:nth-child(2) { margin-top: -9%; transform: rotate(2deg)    translateX(4%); }
  .journal-grid figure:nth-child(3) { margin-top: -8%; transform: rotate(-2deg)   translateX(-4%); }
  .journal-grid figure:nth-child(4) { margin-top: -9%; transform: rotate(2.5deg)  translateX(3%); }
  .journal-grid figure:nth-child(5) { margin-top: -8%; transform: rotate(-1.8deg) translateX(-2%); }
  .journal-grid figure:nth-child(6) { margin-top: -9%; transform: rotate(1.5deg)  translateX(4%); }
  .journal-grid figure:nth-child(7) { margin-top: -7%; transform: rotate(-2.8deg) translateX(-4%); }
  .journal-grid figure:nth-child(8) { margin-top: -2%; transform: rotate(2deg)    translateX(3%); }

  /* No right margin on phones: the note tucks under its pair. Always ranged
     left here — a centred or right-ranged paragraph is hard to read, which
     is a cost the old four-word notes never had to pay. */
  .session { grid-template-columns: 1fr; gap: 8px; }
  .session:nth-child(n) .note {
    align-self: auto;
    margin: 14px 0 0;
    text-align: left;
    padding-left: 3%;
    padding-right: 3%;
    transform: rotate(-1deg);
  }
  .session:nth-child(3n+2) .note { transform: rotate(1deg); }
  .session:nth-child(3n) .note   { transform: rotate(-0.6deg); }
}

/* A phone turned sideways: width is plentiful, height is not. Size the
   polaroid from the height available instead, or a 16:9 video set by width
   runs straight off the bottom of the screen. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    min-height: 0;
    padding: clamp(64px, 15vh, 88px) var(--gutter) clamp(12px, 3vh, 20px);
  }
  .video-container { width: min(calc(58svh * 1.771), 88vw); }
}


/* ═══════════════════════════════════════════════════════════════
   V2 OVERRIDES
   Everything above this line is V1, untouched. The whole delta
   between the two versions is this block, so it can be lifted out
   wholesale if V2 is abandoned.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Masthead: the wordmark carries the top of the page ──── */
nav { border-bottom: 1px solid var(--line); }
.nav-logo {
  font-size: clamp(30px, 5.2vw, 74px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  color: #000;
  transition: font-size .35s ease;
}
/* Shrinks once scrolled, or a 74px wordmark eats the viewport */
nav.scrolled .nav-logo { font-size: clamp(20px, 2.4vw, 32px); }

/* Clear the taller masthead; hairline closes the hero off */
.hero { padding-top: clamp(150px, 17vh, 190px); }
.intro { border-top: 1px solid var(--line); }

/* ─── Intro: the print, annotated like a gallery session ──── */
.intro-photo {
  display: grid;
  grid-template-columns: 1fr clamp(115px, 16vw, 180px);
  gap: clamp(14px, 2.5vw, 30px);
  align-items: center;
}
.intro-photo picture { display: block; }
.intro-photo .note {
  font-family: var(--hand);
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.2;
  color: #4a4a4a;
  transform: rotate(-4deg);
}

/* ─── How it goes ─────────────────────────────────────────── */
/* A vertical list, not the three-column grid the short steps
   used: each one now carries a question and a full answer, and
   columns squeeze that into a ribbon. */
.process { display: grid; gap: clamp(38px, 5vw, 66px); list-style: none; }
.process li {
  display: grid;
  grid-template-columns: clamp(170px, 24vw, 300px) 1fr;
  gap: clamp(14px, 3vw, 48px);
  align-items: start;
}
.process h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.15;
}
.process .step-n { color: var(--text-muted); }
.process .step-q {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.35;
  color: #3a3a3a;
  margin-bottom: 12px;
}
.process .step-a {
  font-size: 15px;
  line-height: 1.75;
  color: #333;
  max-width: 62ch;
}

/* ─── Your session: one price, not three tiers ────────────── */
/* No card border here — this sits on white, and a white card on
   white reads as an outline rather than an object. */
.session {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 6vw, 84px);
  align-items: start;
}
.session .price {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 82px);
  line-height: 1;
  letter-spacing: 0.005em;
}
.session .eyebrow { display: block; margin-bottom: 16px; }
.session ul { list-style: none; margin: 0 0 30px; }
.session li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: #333;
}
.session li:last-child { border-bottom: 1px solid var(--line); }

@media (max-width: 900px) {
  .session { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
}
@media (max-width: 768px) {
  /* Two rows on phones so the wordmark keeps its weight — mobile
     is where most of this site is read. */
  nav {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "lang . toggle" "logo logo logo";
    row-gap: 8px;
  }
  .lang      { grid-area: lang;   grid-column: auto; }
  .nav-toggle{ grid-area: toggle; grid-column: auto; }
  .nav-logo  {
    grid-area: logo; grid-column: auto; justify-self: center;
    font-size: clamp(32px, 9vw, 52px);
  }
  nav.scrolled .nav-logo { font-size: clamp(23px, 6.4vw, 34px); }
  .hero { padding-top: clamp(122px, 18vh, 156px); }
  .intro-photo { grid-template-columns: 1fr; gap: 8px; }
  .intro-photo .note { text-align: right; padding-right: 4%; transform: rotate(-2deg); }
  .process li { grid-template-columns: 1fr; gap: 8px; }
}

/* ─── V2b — juicier wordmark, full-bleed hero ──────────────── */

/* Archivo Black — a single-weight grotesque, genuinely fat. Cormorant
   is a refined face that never reads heavy no matter what weight you
   set it at, which is why 700 of it still looked thin. Latin subset
   only: the wordmark is ASCII on all three language pages. */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../../assets/fonts/archivo-black-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* font-weight MUST stay 400: Archivo Black is already the black cut,
   and asking for 700 makes the browser synthesise fake bold on top of
   it, which smears the letterforms. Tracking is slightly negative —
   heavy grotesques want to sit tight. */
.nav-logo {
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* The masthead is opaque now. With video running edge to edge a
   transparent bar would put black nav text over moving picture. */
nav { background: var(--bg); }

/* Top padding equals the masthead's own height — 28 + 28 + 1px of
   chrome plus the wordmark — so the video begins exactly at its
   lower edge rather than sliding under it. */
.hero {
  min-height: 0;
  display: block;
  padding: calc(57px + clamp(30px, 5.2vw, 74px)) 0 0;
}
.video-container,
.video-container:hover {
  width: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
/* Edge to edge, but at the clip's own ratio so nothing is ever cropped.
   hero.mp4 is a wide establishing shot — house left, meadow right, the
   cyclist small in the middle of it — and its width IS the composition.
   A cover-crop to a taller box threw away 40% of the frame on a phone.
   object-fit: contain, not cover: if this file is ever swapped for one
   of a different ratio, it letterboxes visibly instead of silently
   cutting the picture. Update the aspect-ratio with the file. */
.video-container video {
  width: 100%;
  aspect-ratio: 16 / 9;      /* header.mp4 is 1920x1080, exactly 16:9 */
  height: auto;
  object-fit: contain;
}
/* The caption is the page's only h1, so it stays — under the video
   rather than inside a polaroid band that no longer exists. */
.tagline { padding: clamp(20px, 2.6vw, 32px) var(--gutter) 0; }

@media (max-width: 768px) {
  .hero { padding: calc(61px + clamp(32px, 9vw, 52px)) 0 0; }
  .video-container, .video-container:hover { width: 100%; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hero { padding: calc(61px + clamp(32px, 9vw, 52px)) 0 0; }
  .video-container, .video-container:hover { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   V2c — paper ground, and a mobile layout that breathes
   ═══════════════════════════════════════════════════════════════ */

/* ─── Paper ────────────────────────────────────────────────── */
/* Three tiled turbulence layers rather than one. A single high-frequency
   noise reads as television static; handmade paper has structure at three
   scales at once, so each gets its own layer at its own tile size:
     grain  160px  the fibre tooth you see up close
     fibre  420px  stretched horizontally (baseFrequency 0.015 x 0.7),
                   which is what makes it read as pulp and not as noise
     mottle 620px  slow density variation across the sheet
   The tiles are deliberately coprime-ish sizes so the three repeats never
   line up into a visible grid.
   They MULTIPLY rather than sit on top: grey noise composited normally
   greys the cream out, multiplied it darkens it while keeping the hue. */
:root {
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.40'/%3E%3C/svg%3E");
  --paper-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)' opacity='0.13'/%3E%3C/svg%3E");
  --paper-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='620' height='620' filter='url(%23m)' opacity='0.17'/%3E%3C/svg%3E");

  --paper: var(--paper-grain), var(--paper-fibre), var(--paper-mottle);
  --paper-size: 160px 160px, 420px 420px, 620px 620px;
  --paper-blend: multiply, multiply, multiply;

  --bg: #ebe2cf;        /* warm sheet, a touch deeper than before */
  --bg-soft: #e3d9c2;   /* the alternating band */
  --line: #d2c5aa;      /* #e7e3de was invisible on paper */
  /* #6d6d6d reached only 4.1:1 on this ground - below AA for the 10-13px
     labels it carries. This warm grey makes 5.3:1. */
  --text-muted: #5c574e;
}
body,
nav,
.section--soft {
  background-image: var(--paper);
  background-size: var(--paper-size);
  background-blend-mode: var(--paper-blend);
  background-repeat: repeat;
}
body { background-color: var(--bg); }
nav  { background-color: var(--bg); }
.section--soft { background-color: var(--bg-soft); }
.nav-overlay { background: rgba(235, 226, 207, 0.97); }

/* ─── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 24px of margin on a 390px screen is most of the cramped feeling */
  :root {
    --gutter: clamp(22px, 7.5vw, 36px);
    --section-y: clamp(88px, 21vw, 130px);
  }

  /* The pair stays side by side. Stacking them made each photo 332px wide
     but tripled the gallery — ~11.9k px against 2-up's ~4.6k — and length
     won. To buy back some size at no cost in length, the gallery breaks
     out past the page gutter: 160px per photo becomes ~175px. */
  .session-pair { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery {
    gap: clamp(44px, 10vw, 72px);
    margin-left: -13px;
    margin-right: -13px;
  }

  /* Inset with soft corners rather than butting against the screen
     edge — full-bleed is a desktop move. */
  .hero { padding-left: var(--gutter); padding-right: var(--gutter); }
  .video-container video { border-radius: 14px; }
  .tagline { padding-left: 0; padding-right: 0; }

  /* Centred, with more air between lines */
  .intro .about-text { text-align: center; }
  .intro .about-text p { margin-bottom: 20px; }
  .proof { justify-content: center; gap: 18px 24px; }

  /* The print, hand-placed: tilted, with the note angled beside it */
  .intro-photo { grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
  .intro-photo picture { transform: rotate(-1.5deg); }
  .intro-photo .note {
    font-size: clamp(15px, 4.2vw, 19px);
    text-align: left;
    padding: 0;
    transform: rotate(-24deg);
  }

  /* Chunkier, to match the reference */
  .nav-toggle { width: 30px; gap: 7px; }
  .nav-toggle span { height: 2.5px; width: 30px; opacity: 1; }
}

/* nav.scrolled outranks the plain nav rule, so its white had to be
   restated in paper — otherwise the bar turns white mid-scroll. */
nav.scrolled { background-color: rgba(235, 226, 207, 0.92); }

/* ═══════════════════════════════════════════════════════════════
   V2d — measured masthead, mobile strips, and pencil marks
   ═══════════════════════════════════════════════════════════════ */

/* --nav-h is set by main.js from the bar's real height. The fallbacks
   only apply for the instant before the script runs. */
.hero { padding-top: var(--nav-h, 131px); }

/* ─── Pencil marks ────────────────────────────────────────── */
/* Incidental graphite marks, like the ones on the reference sheet. Purely
   decorative: no markup, no text, pointer-events off, so nothing reaches
   the accessibility tree.
   What makes these read as pencil rather than pen:
     · a feTurbulence + feDisplacementMap filter roughens every edge, so no
       stroke is the smooth constant-width line a nib would leave
     · each mark is drawn twice, slightly offset and at different opacity —
       graphite is laid down in passes, ink is not
     · the colour is warm graphite (#4a4640), never black
   Vertical offsets are in px, not %, so they stay inside a section's
   padding band however tall its content grows. */
:root {
  --mark-loop:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 70'%3E%3Cfilter id='p' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='none' stroke='%234a4640' stroke-linecap='round'%3E%3Cpath d='M60 12C20 4 6 30 22 48c16 18 60 12 56-12C75 19 48 12 34 20' stroke-width='1.7' opacity='.85'/%3E%3Cpath d='M58 15C22 8 9 31 24 47c15 16 57 11 53-11' stroke-width='1.1' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  --mark-flick:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cfilter id='p' x='-15%25' y='-40%25' width='130%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='none' stroke='%234a4640' stroke-linecap='round'%3E%3Cpath d='M4 16C28 8 52 20 78 11s30-5 38 2' stroke-width='1.7' opacity='.85'/%3E%3Cpath d='M7 19C30 12 54 23 80 14' stroke-width='1' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --mark-cross:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cfilter id='p' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='4' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='none' stroke='%234a4640' stroke-linecap='round'%3E%3Cpath d='M8 9l24 22M31 10L9 30' stroke-width='1.8' opacity='.85'/%3E%3Cpath d='M10 7l23 22' stroke-width='1' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  --mark-specks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='%234a4640'%3E%3Ccircle cx='14' cy='22' r='1.8' opacity='.8'/%3E%3Ccircle cx='47' cy='11' r='1.2' opacity='.6'/%3E%3Ccircle cx='63' cy='44' r='2' opacity='.85'/%3E%3Ccircle cx='29' cy='58' r='1.3' opacity='.55'/%3E%3Ccircle cx='70' cy='68' r='1' opacity='.5'/%3E%3Ccircle cx='38' cy='34' r='.9' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --mark-hatch:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 44'%3E%3Cfilter id='p' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' seed='17'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='none' stroke='%234a4640' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M8 36L20 7' opacity='.8'/%3E%3Cpath d='M20 37L32 8' opacity='.65'/%3E%3Cpath d='M32 36L44 6' opacity='.8'/%3E%3Cpath d='M44 38L54 12' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  --mark-tick:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cfilter id='p' x='-18%25' y='-18%25' width='136%25' height='136%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' seed='23'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='none' stroke='%234a4640' stroke-linecap='round'%3E%3Cpath d='M6 22l11 11L43 6' stroke-width='1.8' opacity='.85'/%3E%3Cpath d='M8 20l10 11' stroke-width='1' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  --mark-star:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cfilter id='p' x='-18%25' y='-18%25' width='136%25' height='136%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='4' seed='31'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='none' stroke='%234a4640' stroke-linecap='round' stroke-width='1.6'%3E%3Cpath d='M22 6v32' opacity='.8'/%3E%3Cpath d='M8 14l28 16' opacity='.7'/%3E%3Cpath d='M36 14L8 30' opacity='.75'/%3E%3C/g%3E%3C/svg%3E");
  --mark-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 28'%3E%3Cfilter id='p' x='-12%25' y='-30%25' width='124%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='41'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='none' stroke='%234a4640' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20l14-13 14 13 14-13 14 13 14-13 14 13' stroke-width='1.6' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
  --mark-bracket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 96'%3E%3Cfilter id='p' x='-30%25' y='-8%25' width='160%25' height='116%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='53'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='none' stroke='%234a4640' stroke-linecap='round'%3E%3Cpath d='M20 6C9 10 12 40 6 48c6 8 3 38 14 42' stroke-width='1.6' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
}
#about, #work, #journal, #films, #process, #pricing, #contact, footer { position: relative; }
#about::before,  #about::after,
#work::before,   #work::after,
#journal::before,#journal::after,
#films::before,  #films::after,
#process::before,#process::after,
#pricing::before,#pricing::after,
#contact::before,#contact::after,
footer::before {
  content: '';
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.42;
}
#about::before    { background-image: var(--mark-specks); width: 70px;  height: 70px; top: 8px;    left: 3%;  }
#about::after     { background-image: var(--mark-tick);   width: 34px;  height: 28px; bottom: 34px; right: 5%; transform: rotate(-8deg); }
#work::before     { background-image: var(--mark-loop);   width: 76px;  height: 60px; top: 34px;   right: 4%; transform: rotate(9deg); }
#work::after      { background-image: var(--mark-hatch);  width: 54px;  height: 40px; bottom: 40px; left: 3%;  transform: rotate(-4deg); }
#journal::before  { background-image: var(--mark-star);   width: 32px;  height: 32px; top: 40px;   left: 6%;  transform: rotate(12deg); }
#journal::after   { background-image: var(--mark-flick);  width: 126px; height: 26px; bottom: 36px; right: 5%; transform: rotate(-3deg); }
#films::before    { background-image: var(--mark-bracket);width: 24px;  height: 84px; top: 46px;   left: 3.5%; }
#films::after     { background-image: var(--mark-specks); width: 64px;  height: 64px; bottom: 30px; right: 4%; }
#process::before  { background-image: var(--mark-zigzag); width: 104px; height: 26px; top: 38px;   right: 6%; transform: rotate(2deg); }
#process::after   { background-image: var(--mark-cross);  width: 30px;  height: 30px; bottom: 42px; left: 5%;  transform: rotate(6deg); }
#pricing::before  { background-image: var(--mark-hatch);  width: 50px;  height: 36px; top: 40px;   left: 4%;  transform: rotate(5deg); }
#pricing::after   { background-image: var(--mark-tick);   width: 38px;  height: 32px; bottom: 38px; right: 6%; transform: rotate(-5deg); }
#contact::before  { background-image: var(--mark-flick);  width: 96px;  height: 20px; top: 36px;   right: 5%; transform: rotate(4deg); }
#contact::after   { background-image: var(--mark-loop);   width: 58px;  height: 46px; bottom: 36px; left: 4%;  transform: rotate(-14deg); }
footer::before    { background-image: var(--mark-specks); width: 52px;  height: 52px; top: -6px;   right: 8%; opacity: 0.3; }

@media (max-width: 768px) {
  /* Gutters are only ~29px here, so the wide marks would be clipped and the
     inset ones would sit on the copy. Keep a scattered handful, smaller and
     tucked into the corners of each padding band. */
  #about::after, #journal::after, #films::before,
  #process::before, #pricing::before, #contact::before { display: none; }

  #about::before   { width: 46px; height: 46px; top: 6px;    left: 1%;  }
  #work::before    { width: 52px; height: 41px; top: 22px;   right: 1%; }
  #work::after     { width: 40px; height: 30px; bottom: 26px; left: 1%; }
  #journal::before { width: 26px; height: 26px; top: 26px;   left: 2%; }
  #films::after    { width: 46px; height: 46px; bottom: 20px; right: 1%; }
  #process::after  { width: 24px; height: 24px; bottom: 26px; left: 2%; }
  #pricing::after  { width: 30px; height: 26px; bottom: 24px; right: 2%; }
  #contact::after  { width: 44px; height: 35px; bottom: 24px; left: 1%; }
  footer::before   { width: 38px; height: 38px; top: -4px;   right: 4%; }

  /* ─── Film roll: a roll, not a stack ────────────────────── */
  /* Two 16:9 frames side by side on a phone are 91px tall. Stacked they
     doubled the section. Scrolling sideways keeps them watchable AND
     costs one frame's height — and a roll of film is the right metaphor
     for a horizontal drag. The next frame peeks, which is the affordance. */
  .filmstrip .frames {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filmstrip .frames::-webkit-scrollbar { display: none; }
  .filmstrip .frame { flex: 0 0 82%; scroll-snap-align: center; }

  /* ─── In print: magazines you flip through sideways ─────── */
  .journal-grid {
    aspect-ratio: auto;
    position: static;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 12px 0 18px;
  }
  .journal-grid::-webkit-scrollbar { display: none; }
  /* :nth-child(n) matches the specificity of the hand-placement rules
     above, and comes later, so it resets them. */
  .journal-grid figure:nth-child(n) {
    position: static;
    flex: 0 0 62%;
    width: auto;
    margin: 0;
    z-index: auto;
    scroll-snap-align: center;
    transform: rotate(-2deg);
  }
  .journal-grid figure:nth-child(2n) { transform: rotate(2.2deg); }
  .journal-grid figure:nth-child(3n) { transform: rotate(-1.1deg); }
}

/* ═══════════════════════════════════════════════════════════════
   V2e — two families only: Archivo Black and Jost
   Cormorant Garamond and Caveat are dropped. Redefining the two
   custom properties reroutes all 16 rules that used them, so no
   rule below had to be hunted down and rewritten.
   Caveat's job was to signal hand-made; the pencil marks do that
   now, so it was saying the same thing twice.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --serif: 'Jost', system-ui, sans-serif;   /* was Cormorant Garamond */
  --hand:  'Jost', system-ui, sans-serif;   /* was Caveat */
}

/* No italic is self-hosted for either family, so italic would render as a
   synthesised slant. These two carried Cormorant's italic; they stand
   upright now. */
.tagline,
.process .step-q { font-style: normal; }

/* Sizes tuned for a display serif and a handwriting face are wrong for a
   geometric sans: Cormorant runs small on the body, Caveat runs huge. */
.section-title  { font-weight: 300; letter-spacing: -0.015em; }
.nav-overlay a  { font-weight: 300; letter-spacing: 0.01em; }
.lead           { font-weight: 300; letter-spacing: -0.005em; }
.tagline        { font-size: clamp(13px, 1.35vw, 17px); letter-spacing: 0.22em; text-transform: uppercase; }
.process h3     { font-weight: 500; font-size: clamp(19px, 1.9vw, 25px); letter-spacing: 0.005em; }
.process .step-q{ font-weight: 500; font-size: clamp(15px, 1.35vw, 18px); }
.session .price { font-weight: 300; letter-spacing: -0.02em; }
.contact-direct a.big { font-weight: 300; letter-spacing: -0.005em; }
.lb-prev, .lb-next { font-weight: 300; }

/* The gallery notes: a name, a place, a story. Caveat set the name at 33px
   because handwriting needs the size; a sans at 33px would shout over the
   photographs it annotates. */
.gallery .note { font-size: 14px; font-weight: 300; }
.note-who {
  font-weight: 500;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.25;
  letter-spacing: 0.005em;
}
/* The polaroid label reads as a written annotation now, not handwriting —
   so it takes the small tracked-caps idiom the rest of the site uses. */
.intro-photo .note {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   V2f — Caveat everywhere, Archivo Black on the headers
   Still two families. Caveat's x-height is small and its strokes
   are thin, so a straight family swap reads about 25% smaller than
   the sans it replaces: every size below is bumped to compensate.
   Uppercase + wide tracking is dropped throughout — it is a
   typesetting idiom that handwriting cannot carry.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --sans:  'Caveat', 'Segoe Script', cursive;
  --hand:  'Caveat', 'Segoe Script', cursive;
  --serif: 'Caveat', 'Segoe Script', cursive;
  /* thin handwriting needs more weight of colour than a sans to hold
     the same apparent contrast */
  --text-muted: #55504a;
}
body { font-size: 19px; font-weight: 400; line-height: 1.5; }

/* Headers — the one place Archivo Black appears besides the wordmark.
   Smaller than the serif was: Archivo's cap height is far larger, so it
   reads bigger at the same pixel size. */
.section-title {
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(23px, 3.4vw, 42px);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Labels: handwriting, natural case, near-normal tracking */
.eyebrow, .note-where {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: none;
}
.field label { font-size: 16px; letter-spacing: 0.03em; text-transform: none; }
.nav-close, .lb-close, .sound-toggle span, .socials a, .skip-link {
  font-size: 16px; letter-spacing: 0.03em; text-transform: none;
}
.lang { font-size: 15px; letter-spacing: 0.06em; }
footer { font-size: 15px; letter-spacing: 0.03em; text-transform: none; }
.proof { font-size: 16px; letter-spacing: 0.03em; text-transform: none; }
.btn {
  font-weight: 400; font-size: 18px;
  letter-spacing: 0.04em; text-transform: none;
  padding: 12px 28px;
}

/* Running copy */
.lead { font-weight: 400; font-size: clamp(23px, 2.7vw, 32px); line-height: 1.35; letter-spacing: 0; }
.intro .about-text p { font-size: 19px; line-height: 1.55; margin-bottom: 18px; }
.about-text p { font-size: 19px; line-height: 1.55; }
.contact-direct p { font-size: 19px; }
.contact-meta { font-size: 16px; }
.field input, .field select, .field textarea { font-size: 18px; }
.nav-overlay a { font-weight: 400; font-size: clamp(34px, 7vw, 60px); letter-spacing: 0.01em; }
.contact-direct a.big { font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: 0; }

/* Gallery notes — back to actual handwriting, which is what they were */
.gallery .note { font-size: 18px; font-weight: 400; }
.note-who   { font-weight: 500; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.15; letter-spacing: 0; }
.note-story { font-size: 16px; line-height: 1.5; }
.intro-photo .note {
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

/* Process and price */
.process h3      { font-weight: 500; font-size: clamp(22px, 2.2vw, 29px); letter-spacing: 0; }
.process .step-q { font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); }
.process .step-a { font-size: 18px; line-height: 1.6; }
.session .price  { font-weight: 500; font-size: clamp(46px, 6.6vw, 84px); letter-spacing: 0; }
.session li      { font-size: 18px; padding: 10px 0; }

@media (max-width: 768px) {
  /* The film strip runs edge to edge: the dark strip is the full width of
     the screen, the frames keep their inset inside it. */
  #films .wrap { padding-left: 0; padding-right: 0; }
  #films .section-head { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* ═══════════════════════════════════════════════════════════════
   V2g — the intro runs into the gallery
   The "Selected work" label is gone (it survives as an sr-only h2
   so the section still has a heading), which removed .section-head
   and its margin. These two cut the remaining gap roughly in half:
   at a 1080px-tall viewport, 248px of padding becomes ~119px.
   ═══════════════════════════════════════════════════════════════ */
.intro { padding-bottom: clamp(44px, 6vh, 80px); }
#work  { padding-top: clamp(36px, 5vh, 68px); }

/* ═══════════════════════════════════════════════════════════════
   V2h — "Included" carries the list; "Investment" is gone
   The eyebrow treatment made it the quietest thing in the block,
   when it is the label the whole list hangs off. It now takes the
   heavier Caveat cut at full text colour, underlined with the same
   pencil stroke the page scribbles use — emphasis drawn from the
   site's own vocabulary rather than a rule or a background tint.
   ═══════════════════════════════════════════════════════════════ */
.session .eyebrow {
  display: inline-block;          /* so the underline sizes to the word */
  position: relative;
  margin-bottom: 26px;
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: 0.01em;
  color: var(--text);
  text-transform: none;
}
.session .eyebrow::after {
  content: '';
  position: absolute;
  left: -5px;
  right: -11px;
  bottom: -9px;
  height: 11px;
  background-image: var(--mark-flick);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.55;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   V2i — Motion subtitle, Instagram in the language switch
   ═══════════════════════════════════════════════════════════════ */

/* Sits under a section title, in the handwriting, quieter than body
   copy but not as quiet as a label. */
.section-sub {
  margin-top: 14px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 46ch;
}

/* Instagram sits with EN / DE / RU: both are "where else this lives".
   A rule divides it from the languages so it does not read as a fourth
   one. The glyph inherits colour, so it dims and lifts with them. */
.lang-ig {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.lang-ig svg {
  width: 17px;
  height: 17px;
  display: block;
}
@media (max-width: 768px) {
  .lang-ig { margin-left: 2px; padding-left: 9px; }
  .lang-ig svg { width: 15px; height: 15px; }
}

/* ═══════════════════════════════════════════════════════════════
   V2j — the enquiry form
   ═══════════════════════════════════════════════════════════════ */

/* Honeypot. Off-screen rather than display:none or hidden, both of which
   bots are built to skip — this one they fill, and Formspree bins it.
   tabindex and aria-hidden keep it away from keyboards and screen readers. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Replaces the form once it has sent — so the confirmation sits in the same
   place the form did, in the page's own type, rather than on a Formspree
   screen the visitor has to navigate back from. */
.form-done {
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.4;
  color: var(--text);
  padding: 8px 0;
  max-width: 28ch;
}
.form-error {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.5;
  color: #8a3a2a;    /* 5.6:1 on the paper */
}