/* SIHA WORKS. Mobile first. States: phone (base), 600px, 720px (work rows side by side),
   900px (desktop spacing + timeline labels), 1200px (wide).

   Why it looks like this (v3, kaz: "a little more minimalistic/modern"):
   - One family, Figtree (SIL Open Font License, free for commercial use), two weights.
     Bold speaks, Regular explains.
   - Black, white and one grey. The footage and the photos bring the colour.
   - Square corners and no filled panels, so the only shapes on the page are the pictures.
   - The one accent is the timeline playhead (and the keyboard focus ring). */

/* To try another font, change these two faces and --display / --sans below.
   The weights are chosen by eye and measurement, see tools/build_fonts.py: the 400 face is Figtree at 475 and the
   700 face is Figtree at 800, because Figtree's own Regular and Bold look too light here. */
@font-face {
  font-family: "Figtree";
  src: url(fonts/figtree-regular.woff) format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url(fonts/figtree-extrabold.woff) format("woff");
  font-weight: 700;
  font-display: swap;
}
/* Only for the running timecode, so its numbers can't jitter as they count. */
@font-face {
  font-family: "DM Mono";
  src: url(fonts/dm-mono-400.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* Only for the signature on the booking request, so typing your name reads as signing it. */
@font-face {
  font-family: "Herr Von Muellerhoff";
  src: url(fonts/herr-von-muellerhoff.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --fg: #f2f2f0;
  --muted: #a0a09d;
  --line: #262626;
  --surface: #161616;
  --accent: #ff5a1f;     /* playhead + focus ring, nowhere else */
  --err: #ff8a7a;
  --paper: #f5f4f0;      /* the request the client signs */
  --ink: #141413;

  --display: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --sans: "Figtree", "Helvetica Neue", Arial, sans-serif;

  --gutter: 16px;
  --header-h: 56px;
  --section-y: 88px;
  --tl-top: 32px;
  --tl-ruler: 12px;
  --tl-clips: 56px;
  --tl-h: calc(var(--tl-top) + var(--tl-ruler) + var(--tl-clips) + 28px);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f3;
  --fg: #0d0d0c;
  --muted: #62625f;
  --line: #d8d8d4;
  --surface: #e9e9e5;
  --accent: #e8470f;
  --err: #b3261e;
  --paper: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;   /* Android's blue flash fights the look; a press dims instead */
}
html.is-locked { overflow: hidden; }
a:active, button:active { opacity: .7; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }

/* Small caps-style captions: the bar under each tile on the "Untitled." grid kaz liked. */
.cap { font-size: 12px; line-height: 1.35; letter-spacing: .035em; text-transform: uppercase; }
.tc { font: 400 12px/1 "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip {
  position: absolute; left: 8px; top: -100px; z-index: 50;
  padding: 12px 16px; background: var(--fg); color: var(--bg); text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 0;
  font: 700 14px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.btn-solid { background: var(--fg); color: var(--bg); }
.btn-solid:hover { opacity: .86; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--fg); }
.btn:disabled { opacity: .6; cursor: progress; }

.btn-text {
  min-height: 44px; padding: 0 0 0 16px;
  background: none; border: 0; cursor: pointer;
  font: 700 14px/1 var(--sans);
}
.btn-text:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- header ---------- */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background-color .25s, border-color .25s, color .25s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
/* Only the landing page has a full-screen video under the header to see through to. */
body.hero-full[data-view="home"] .site-header:not(.is-scrolled) { background: transparent; color: #fff; }

.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 700 14px/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.nav { display: flex; align-items: center; margin-right: -8px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  font-size: 13.5px; text-decoration: none; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.nav-book { font-weight: 700; }
.nav-more { display: none; }

@media (max-width: 349px) {
  .nav a.nav-about { display: none; }
}

/* ---------- hero ---------- */

.hero { position: relative; padding-top: var(--header-h); }

.hero-frame {
  position: relative;
  margin: 0 var(--gutter);
  height: min(calc(100vh - var(--header-h) - var(--tl-h) - 8px), 125vw);
  height: min(calc(100svh - var(--header-h) - var(--tl-h) - 8px), 125vw);
  min-height: 300px;
  overflow: hidden;
  background: #000;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
}
.hero-video.is-shown { opacity: 1; }

/* Kaz asked for little to no vignetting: one soft fade under the name, nothing around the edges. */
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 32%);
}

.hero-clip {
  position: absolute; top: 12px; left: 14px;
  color: #fff; font-weight: 700;
  text-shadow: 0 0 2px rgba(0, 0, 0, .55), 0 1px 12px rgba(0, 0, 0, .75);   /* holds up over a bright sky */
}
.hero-copy {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  color: #fff;
}
.hero-role { margin-bottom: 10px; font-weight: 700; text-shadow: 0 1px 10px rgba(0, 0, 0, .65); }
.hero-name {
  margin: 0;
  width: max-content; max-width: none;
  font: 700 44px/.92 var(--display);
  text-transform: uppercase; letter-spacing: -.012em;
  white-space: nowrap;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .22);
}

/* full-screen opening */
.hero[data-mode="full"] { height: 100vh; height: 100svh; min-height: 520px; padding-top: 0; }
.hero[data-mode="full"] .hero-frame {
  position: absolute; inset: 0; margin: 0; height: auto; min-height: 0;
}
.hero[data-mode="full"] .hero-shade {
  background:
    linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 42%),
    linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 20%);
}
.hero[data-mode="full"] .hero-clip { top: calc(var(--header-h) + 8px); left: var(--gutter); }
.hero[data-mode="full"] .hero-copy {
  left: var(--gutter); right: var(--gutter); bottom: calc(var(--tl-h) + 4px);
}
.hero[data-mode="full"] .timeline {
  position: absolute; left: 0; right: 0; bottom: 0;
  color: #fff;
  --fg: #fff; --muted: rgba(255, 255, 255, .72); --line: rgba(255, 255, 255, .32);
}

/* ---------- timeline ---------- */

.timeline { padding: 12px var(--gutter) 16px; }

.tl-top {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--tl-top);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tl-top #tcNow { color: var(--fg); }
.tl-toggle {
  min-height: 44px; min-width: 64px; padding: 0 12px; margin: -6px 0;
  background: none; border: 0; cursor: pointer;
  color: var(--fg);
}
.tl-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }

.tl-track { position: relative; }
.tl-ruler {
  position: relative;
  height: var(--tl-ruler);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to right, var(--line) 1px, transparent 1px) 0 100% / calc(100% / var(--secs, 25)) 5px repeat-x;
  cursor: pointer;
  touch-action: manipulation;
}
.tl-ruler::before { content: ""; position: absolute; inset: -14px 0 0; }  /* bigger hit area for seeking */

.tl-clips {
  display: flex; gap: 2px;
  height: var(--tl-clips);
  margin: 0; padding: 0; list-style: none;
}
.tl-clips li { flex: var(--d, 5) 1 0; min-width: 0; }
.clip {
  width: 100%; height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 4px;
  padding: 6px 0 0;
  background: none; border: 0;
  color: var(--muted); text-align: left; cursor: pointer;
}
.clip-no { font-size: 12px; line-height: 1; letter-spacing: .03em; }
.clip-name { display: none; }
.clip img {
  width: 100%; height: 100%; min-height: 0;
  object-fit: cover;
  opacity: .55;
  transition: opacity .25s;
}
.clip.is-active { color: var(--fg); }
.clip.is-active img, .clip:hover img { opacity: 1; }

.tl-playhead {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 2px; margin-left: -1px;
  background: var(--accent);
  pointer-events: none;
  will-change: transform;
}
.tl-playhead::before {
  content: ""; position: absolute; top: -2px; left: 50%;
  width: 10px; height: 8px; transform: translateX(-50%);
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---------- sections ---------- */

.section { padding: var(--section-y) var(--gutter); }
.sec-title {
  margin: 0 0 32px;
  font: 700 clamp(22px, 2.3vw, 30px)/1.15 var(--display);
  letter-spacing: -.012em;
}

/* ---------- selected work (gavnfx's alternating rows, with the panels taken away) ---------- */

.work-list { display: grid; gap: 44px; margin: 0; padding: 0; list-style: none; }
.work-link { display: grid; gap: 12px; text-decoration: none; }
.work-media {
  position: relative; margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}
.work-media img, .work-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.work-media video { opacity: 0; transition: opacity .5s; }
.work-media video.is-playing { opacity: 1; }

.work-text, .work-info { display: grid; gap: 3px; }
.work-no { display: none; color: var(--muted); }
.work-title { margin: 0; font: 700 19px/1.2 var(--display); letter-spacing: -.008em; }
.work-meta { color: var(--muted); font-size: 13.5px; }
.work-link:hover .work-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* The way from the highlights to everything else. */
.all-work {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 44px; padding: 20px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.all-work-text { font: 700 clamp(20px, 2vw, 26px)/1.1 var(--display); letter-spacing: -.01em; }
.all-work-count { color: var(--muted); white-space: nowrap; }
.all-work:hover .all-work-text { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- photography: a grid of covers, each one opens its shoot as a carousel ---------- */

.covers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 6px;
  margin: 0; padding: 0; list-style: none;
}
.cover:only-child { grid-column: 1 / -1; }   /* one shoot doesn't sit beside an empty half */
.cover-link { display: grid; gap: 10px; text-decoration: none; }
.cover-media { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface); }
.cover-media img { width: 100%; height: 100%; object-fit: cover; }
.cover-cap { display: grid; gap: 3px; }
.cover-title { font-weight: 700; }
.cover-sub { color: var(--muted); }
.cover-link:hover .cover-title { text-decoration: underline; text-underline-offset: 3px; }

.viewer-arrow svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ---------- portfolio pages (Film grid: the "Untitled." layout kaz liked; Photography) ---------- */

.work-page { padding: calc(var(--header-h) + 36px) var(--gutter) var(--section-y); }
.wp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 22px; margin-bottom: 14px; }
.wp-title {
  margin: 0;
  font: 700 clamp(30px, 5vw, 60px)/1.12 var(--display);
  letter-spacing: -.02em;
  text-decoration: none;
}
.wp-title:focus { outline: none; }
.wp-other { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); transition: color .2s; }
.wp-other:hover { color: var(--fg); }
.wp-other:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wp-count { margin-bottom: 20px; color: var(--muted); }

/* Phones: one scrolling row of filters instead of three wrapped ones. */
.filters {
  display: flex; gap: 18px;
  margin: 0 calc(-1 * var(--gutter)) 24px; padding: 0 var(--gutter);
  overflow-x: auto; scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter {
  flex: none;
  display: inline-flex; align-items: baseline; gap: 6px;
  min-height: 44px; padding: 13px 0 0;
  background: none; border: 0;
  color: var(--muted);
  font-size: 13.5px; line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: color .15s;
}
.filter:hover { color: var(--fg); }
.filter-n { font-size: 12px; }
.filter[aria-pressed="true"] { color: var(--fg); font-weight: 700; }

.grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 6px;
  margin: 0; padding: 0; list-style: none;
}
.tile-link { display: grid; gap: 10px; text-decoration: none; }
.tile-media {
  position: relative; margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
}
.tile-media img, .tile-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tile-media video { opacity: 0; transition: opacity .4s; }
.tile-media video.is-playing { opacity: 1; }
/* 9:16 pieces stay whole, standing on a blurred copy of their own frame. */
.tile-media.is-tall .tile-bg { filter: blur(28px) brightness(.5); transform: scale(1.2); }
.tile-media.is-tall .tile-poster, .tile-media.is-tall video { object-fit: contain; }

.tile-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; }
.tile-title { font-weight: 700; }
.tile-sub { grid-column: 1; color: var(--muted); }
.tile-year, .tile-len { grid-column: 2; color: var(--muted); text-align: right; }
.tile-year { grid-row: 1; }
.tile-len { grid-row: 2; }
.tile-link:hover .tile-title { text-decoration: underline; text-underline-offset: 3px; }

.grid-empty { padding: 48px 0; color: var(--muted); }

.wp-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line);
}
.wp-foot-text { font: 700 clamp(20px, 2vw, 26px)/1.15 var(--display); letter-spacing: -.01em; }
.home-book { padding-top: 0; }
.home-book .wp-foot { margin-top: 0; }

/* ---------- services ---------- */

.svc-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.svc-list li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.svc-title { margin: 0; font: 700 16px/1.25 var(--display); }
.svc-text { color: var(--muted); max-width: 52ch; font-size: 14px; }
.svc-note { margin-top: 24px; max-width: 60ch; color: var(--muted); font-size: 14px; }

/* ---------- about ---------- */

.about { display: grid; }
.about-body { display: grid; gap: 18px; }
.about-body p { max-width: 62ch; color: var(--muted); }
.about-body .about-lead {
  max-width: 30ch;
  color: var(--fg);
  font-size: clamp(21px, 2.7vw, 34px); line-height: 1.25; font-weight: 700; letter-spacing: -.015em;
}
/* Logo icons, in About and the footer. 44 px to tap, pulled left so the logo itself lines up with the text. */
.social, .foot-links { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 0 -11px; padding: 0; list-style: none; }
.social-link {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--fg); transition: opacity .2s;
}
.social-link svg { width: 22px; height: 22px; fill: currentColor; }
.social-link:hover { opacity: .6; }

/* ---------- booking ---------- */

.book { display: grid; gap: 40px; }
.book-intro .sec-title { margin-bottom: 14px; }
.book-intro .sec-title:focus { outline: none; }
.book-lede { max-width: 42ch; color: var(--muted); }
.book-lede a { padding-block: 13px; }   /* a 44 px tap target that doesn't move the lines around it */
.book-steps { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.book-steps li {
  display: grid; grid-template-columns: 32px 1fr; gap: 2px 8px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.book-steps .cap { color: var(--muted); padding-top: 3px; }
.book-steps strong { font-weight: 700; }
.book-steps span:last-child { grid-column: 2; color: var(--muted); font-size: 14px; }

.field { display: grid; gap: 4px; margin-bottom: 22px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 700; }
.err { color: var(--err); font-size: 12.5px; font-weight: 700; }
.err:empty { display: none; }

/* Fields are a line to write on, not a box. */
input[type="text"] {
  width: 100%; min-height: 44px;
  padding: 10px 0;
  background: transparent; color: var(--fg);
  border: 0; border-bottom: 1px solid var(--muted); border-radius: 0;
  font: 400 16px/1.4 var(--sans);   /* 16px stops iOS zooming into the field */
  -webkit-appearance: none; appearance: none;
}
input::placeholder { color: var(--muted); opacity: 1; font-size: 14px; }
input[type="text"]:focus-visible { outline: none; border-bottom-color: var(--fg); box-shadow: 0 1px 0 var(--fg); }
[aria-invalid="true"] { border-bottom-color: var(--err) !important; }

.prefixed { display: flex; align-items: stretch; border-bottom: 1px solid var(--muted); }
.prefixed span { display: flex; align-items: center; padding-right: 2px; color: var(--muted); }
.prefixed input { border: 0; }
.prefixed input:focus-visible { box-shadow: none; }
.prefixed:focus-within { border-bottom-color: var(--fg); box-shadow: 0 1px 0 var(--fg); }
.prefixed:has([aria-invalid="true"]) { border-bottom-color: var(--err); }

/* kaz's agreement as a sheet of paper: title centred at the top, numbered clauses that hang in the margin,
   all the text on one column, and the blanks are ruled lines the client writes on.
   It's the one raised object on the page (the shadow), because it's the thing you put your name to. */
.contract {
  --fg: var(--ink); --muted: #5d5b56; --line: #d6d3ca; --err: #b3261e;
  --clause-no: 24px;
  color-scheme: light;   /* native radio buttons drawn for paper, not for the dark page around it */
  margin: 0 0 24px;
  padding: 26px 18px 18px;
  background: var(--paper); color: var(--ink);
  font-size: 14px; line-height: 1.5;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
:root[data-theme="light"] .contract { box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 12px 30px rgba(0, 0, 0, .08); }

.contract-head {
  display: grid; justify-items: center; gap: 6px;
  padding-bottom: 18px; border-bottom: 1px solid var(--ink);
  text-align: center;
}
.contract-brand { font: 700 19px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.contract-title { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance; }
.contract-parties { padding: 16px 0; text-align: center; text-wrap: balance; }

.clause { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.clause-head {
  display: grid; grid-template-columns: var(--clause-no) minmax(0, 1fr); align-items: baseline;
  margin: 0 0 8px; font: inherit;
}
.clause-no { color: var(--muted); font-size: 12px; }
.clause-title { font-weight: 700; }
.clause-body { display: grid; gap: 8px; margin-left: var(--clause-no); min-width: 0; }
.clause-body ul, .pack ul { display: grid; gap: 2px; margin: 0; padding-left: 16px; }
.clause-text { display: grid; gap: 8px; }

/* A blank: its label, then a ruled line to write on. */
.blank { gap: 0; margin: 0; }
.blank label, .blank-label { font-size: 14px; font-weight: 400; }
.blank input[type="text"], .blank .prefixed { border-bottom-color: var(--ink); }
.blank-value { display: block; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--ink); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }

.packs-field { margin: 0 0 6px; gap: 6px; }
.packs { display: grid; }
.pack { padding: 4px 0 12px; border-top: 1px solid var(--line); cursor: pointer; }
.pack-head { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px !important; cursor: pointer; }
.pack-head input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.pack ul { margin-left: 28px; font-size: 13.5px; }
/* Once a package is picked, the others step back, like circling one option on paper. */
.packs:has(input:checked) .pack:not(:has(input:checked)) { color: var(--muted); }
.packs:has(input:checked) .pack:not(:has(input:checked)) .pack-head { font-weight: 400; }

.contract-thanks { padding-top: 16px; border-top: 1px solid var(--ink); text-align: center; text-wrap: balance; }

.sign-line { display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--ink); }
.sign-line input[type="text"]::placeholder { font: 400 14px/1.4 var(--sans); }
.sign-line input[type="text"] {
  min-height: 62px; padding: 10px 0 0;
  background: transparent; border: 0;
  color: var(--ink);
  font: 400 42px/1.1 "Herr Von Muellerhoff", cursive;
}
.sign-line input[type="text"]:focus-visible { outline: none; box-shadow: none; }
.sign-line:focus-within { box-shadow: 0 1px 0 var(--ink); }   /* same focus mark as every other field */
.sign-line:has([aria-invalid="true"]) { border-bottom-color: var(--err); }

.form-nav { display: flex; justify-content: flex-end; margin-top: 8px; }
.form-nav .btn { min-width: 160px; }
.form-error { margin-top: 12px; }

.book-done { display: grid; gap: 14px; justify-items: start; }
.book-done:focus { outline: none; }
.done-title { margin: 0; font: 700 clamp(26px, 4vw, 40px)/1.1 var(--display); letter-spacing: -.018em; }
.done-text { max-width: 44ch; }
.done-proto { color: var(--muted); max-width: 50ch; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }

/* ---------- footer ---------- */

.site-footer {
  display: grid; gap: 6px;
  padding: 28px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
}
.foot-name { color: var(--fg); font: 700 14px/1.4 var(--display); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- film view ---------- */

dialog.project {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--fg);
  overflow-y: auto; overscroll-behavior: contain;
}
dialog.project::backdrop { background: var(--bg); }
.project-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding: 0 var(--gutter);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.project-bar .cap { color: var(--muted); }
.project-body { max-width: 1400px; margin: 0 auto; padding: 24px var(--gutter) 48px; }
.project-head { display: grid; gap: 14px; margin-bottom: 22px; }
.project-title { margin: 0; font: 700 clamp(26px, 4.2vw, 52px)/1.12 var(--display); letter-spacing: -.02em; }
.project-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px;
  margin: 0;
}
.project-facts dt { color: var(--muted); }
.project-facts dd { margin: 1px 0 0; font-size: 14px; }

.player {
  --r: 16 / 9;
  width: min(100%, calc((100vh - var(--header-h) - 48px) * var(--r)));
  width: min(100%, calc((100svh - var(--header-h) - 48px) * var(--r)));
  aspect-ratio: var(--r);
  margin: 0 auto 12px;
  background: #000; overflow: hidden;
}
.player video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.project-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line);
}
.project-step { display: grid; gap: 3px; align-content: start; min-height: 44px; text-decoration: none; }
.project-step span:first-child { color: var(--muted); }
.project-step span:last-child { font: 700 clamp(15px, 1.7vw, 22px)/1.2 var(--display); letter-spacing: -.008em; }
.project-step:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.project-step-next { text-align: right; justify-items: end; }

/* ---------- photo viewer: the same carousel, one photo at a time, on black ---------- */

dialog.viewer {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #000; color: #f2f2f0;
  overflow: hidden; overscroll-behavior: contain;
}
dialog.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
dialog.viewer::backdrop { background: #000; }
.viewer-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  height: var(--header-h); padding: 0 var(--gutter);
}
.viewer-title { overflow: hidden; font: 700 14px/1.2 var(--display); white-space: nowrap; text-overflow: ellipsis; }
.viewer-count { color: rgba(242, 242, 240, .8); font-size: 13px; }
.viewer-close { justify-self: end; color: inherit; }
.viewer-rail {
  display: flex; min-height: 0;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.viewer-rail::-webkit-scrollbar { display: none; }
.viewer-slide {
  flex: 0 0 100%; min-width: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 calc(12px + env(safe-area-inset-bottom));
  scroll-snap-align: center; scroll-snap-stop: always;
}
.viewer-slide img, .viewer-slide video { width: 100%; height: 100%; object-fit: contain; }
/* On a computer the arrows sit right beside the photo, level with its middle, so the mouse barely travels (USER 11-04).
   --shown-w = the photo's width on screen, set in app.js. A wide photo that leaves no room keeps them just inside the
   window, on top of the picture, where the shadow keeps them visible. */
.viewer-arrow {
  position: absolute; top: calc((100% + var(--header-h) - 12px) / 2); display: none; place-items: center;
  width: 56px; height: 96px; margin-top: -48px; padding: 0;
  background: none; border: 0; color: inherit; cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .65));
  transition: opacity .2s;
}
.viewer-arrow[aria-disabled="true"] { opacity: .38; cursor: default; }
.viewer-prev { left: max(4px, calc(50% - var(--shown-w, 30vw) / 2 - 56px)); }
.viewer-next { right: max(4px, calc(50% - var(--shown-w, 30vw) / 2 - 56px)); }

/* ---------- prototype switcher (delete with prototype: false) ---------- */

/* A slim tab on the right edge: the bottom corners belong to the timeline and the form buttons. */
.proto {
  position: fixed; right: 0; top: 50%; z-index: 30;
  display: flex; flex-direction: row-reverse; align-items: center; gap: 8px;
  transform: translateY(-50%);
  transition: opacity .25s, transform .25s;
}
.proto.is-tucked { opacity: 0; transform: translate(100%, -50%); pointer-events: none; }
.proto-toggle {
  width: 26px; min-height: 96px; padding: 10px 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: rgba(12, 12, 11, .82); color: rgba(255, 255, 255, .85);
  border: 0; cursor: pointer;
  font-size: 10px;
}
.proto-toggle[aria-expanded="true"] { color: #fff; }
.proto-panel {
  width: min(300px, calc(100vw - 56px));
  padding: 14px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line);
}
.proto-note { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.proto-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.proto-row .cap { width: 64px; color: var(--muted); }
.proto-row button {
  min-height: 44px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line);
  font-size: 13px; cursor: pointer;
}
.proto-row button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ================= 600px ================= */
@media (min-width: 600px) {
  :root { --gutter: 24px; }
  .nav-more { display: inline; }
  .nav a { padding: 0 10px; font-size: 14px; }
  .project-facts { grid-template-columns: repeat(4, auto); justify-content: start; gap: 10px 40px; }
  .site-footer { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
  .foot-meta { grid-column: 1; grid-row: 2; }
  .foot-links { grid-column: 2; grid-row: 1 / span 2; }
  .foot-copy { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
  .svc-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; gap: 16px; padding: 20px 0; }

  .contract { --clause-no: 34px; padding: 36px 34px 26px; }
  /* Label and line on one row, the way a paper form reads. */
  .blank { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: end; }
  .blank label, .blank-label { padding-bottom: 11px; white-space: nowrap; }
  .blank .err { grid-column: 1 / -1; }
}

/* ================= 720px: work rows side by side ================= */
@media (min-width: 720px) {
  .work-list { gap: 72px; }
  .work-link { grid-template-columns: 8fr 4fr; gap: 28px; align-items: stretch; }
  .work-row:nth-child(even) .work-link { grid-template-columns: 4fr 8fr; }
  .work-row:nth-child(even) .work-media { order: 2; }
  .work-text { align-content: space-between; }
  .work-info { gap: 6px; }
  .work-no { display: block; }
  .work-title { font-size: clamp(20px, 2.2vw, 30px); }

  .filters { flex-wrap: wrap; overflow: visible; margin: 0 0 28px; padding: 0; gap: 4px 22px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 6px; }
  .covers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 6px; }
  /* A single shoot keeps a cover's size, with its caption beside it, like the selected-work rows. */
  .cover:only-child .cover-link { grid-template-columns: calc((100% - 12px) / 3) minmax(0, 1fr); gap: 20px; align-items: end; }
  .viewer-arrow { display: grid; }
}

/* ================= 900px ================= */
@media (min-width: 900px) {
  :root {
    --gutter: 32px;
    --header-h: 64px;
    --section-y: 136px;
    --tl-clips: 76px;
  }
  .wordmark { font-size: 15px; }
  .nav a { padding: 0 14px; }

  .hero-frame { height: calc(100svh - var(--header-h) - var(--tl-h) - 8px); min-height: 420px; }
  .hero-clip { top: 18px; left: 22px; }
  .hero-copy { left: 22px; right: 22px; bottom: 20px; }

  .clip { grid-template-columns: auto 1fr; grid-template-rows: auto minmax(0, 1fr); column-gap: 8px; padding: 8px 0 0; }
  .clip-name { display: block; font-size: 12px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .clip img { grid-column: 1 / -1; width: auto; max-width: 112px; aspect-ratio: 16 / 9; height: 100%; }

  .sec-title { margin-bottom: 44px; }
  .svc-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svc-title { font-size: 18px; }

  .about { grid-template-columns: 1fr 3fr; gap: 32px; }
  .about .sec-title { margin-bottom: 0; }

  .book { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .book-intro { position: sticky; top: 96px; }   /* stays beside the agreement while it's being read */

  .project-head { grid-template-columns: 1fr auto; align-items: end; }
  .project-body { padding-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}