/* MRPH: single-theme "Night Shoot" world. Brand-teal ground with a survey-map contour layer, cream type, one vermilion mark.
   Layout idea: a camera-slate grid. Every project and tool carries its metadata like a slate. */
:root {
  --teal: #0F3E47;       /* brand teal: header, buttons, footer */
  --ground: #0B323A;     /* page ground: a step darker than the brand teal so the header reads on top */
  --teal-deep: #0A2E35;  /* inset panels: cards, tools, feature (opaque, so the contours never sit under their text) */
  --teal-raise: #134a55;
  --line: rgba(243, 230, 207, 0.16);
  --cream: #F3E6CF;
  --cream-dim: rgba(243, 230, 207, 0.68);
  --vermilion: #DD4115;

  --font-logo: "Shrikhand", Georgia, serif;
  --font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-mono: "Jost", "Futura", "Century Gothic", system-ui, sans-serif; /* small labels and dates: brand face, no monospace */

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: 2.5rem;
  --step-4: clamp(2.75rem, 7vw, 5.5rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* Survey-map contours: one fixed layer behind the whole site. Line opacity is capped so
   dimmed text still clears 4.5:1 where it crosses an index contour (assets/topo.svg). */
.topo {
  position: fixed; z-index: -2; pointer-events: none;
  inset: -160px -80px -300px;   /* fallback layer: oversized so its parallax (y up to -260) never shows an edge */
  background: url("topo.svg") center / cover no-repeat;
}
body::before {   /* static vignette: edges sit deeper than the centre */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 30%, rgba(7, 34, 40, 0) 35%, rgba(7, 34, 40, 0.7) 100%);
}
/* Live contours (assets/topo-gl.js) replace the static map when WebGL2 is available */
.topo-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: block; }
.topo-live .topo { display: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.dot { color: var(--vermilion); }
.mono { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.label { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); }

/* ---------- Logo ---------- */
.logo {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: var(--cream);
  border: 2px solid var(--cream); border-radius: 6px;
  font-family: var(--font-logo); line-height: 1;
  padding: 0.18em 0.42em 0.3em; text-decoration: none;
}
.logo .dot { margin-left: 0.02em; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: 0; z-index: 10; background: rgba(15, 62, 71, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.site-head .logo { font-size: 1.35rem; }
.nav { display: flex; gap: clamp(14px, 2.4vw, 32px); margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; font-weight: 500; letter-spacing: 0.02em; color: var(--cream-dim); padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--cream); }
.nav a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--vermilion); }
.nav a { position: relative; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: calc(100% + 2px); bottom: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--vermilion); }   /* brand full stop on the current tab; absolute, so the other tabs don't shift */

/* ---------- Hero: big logo over the silent reel ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Hero is the reel's own 16:9 shape so the whole frame shows on desktop; capped at the screen height below the header.
   Narrow screens keep a 560px minimum so the text fits (the video crops there). */
.hero { position: relative; overflow: hidden; min-height: clamp(560px, 56.25vw, calc(100svh - 69px)); display: grid; align-items: end; }
.hero-media { position: absolute; inset: 0; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Neutral near-black shade (no teal cast on the footage): a soft patch behind the text block, bottom-left.
   The rest of the frame stays clean. */
.hero-shade { position: absolute; inset: 0; background:
  radial-gradient(ellipse 62% 72% at 0% 100%, rgba(6, 10, 12, 0.72) 0%, rgba(6, 10, 12, 0.42) 45%, rgba(6, 10, 12, 0) 100%); }
/* Dissolve: the video and its shade fade to transparent over the bottom edge, so the footage melts into the
   page ground and the contour lines pick up underneath. No hard line between hero and the strip. */
.hero-media, .hero-shade {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--hero-fade)), rgba(0, 0, 0, 0.45) calc(100% - var(--hero-fade) * 0.45), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--hero-fade)), rgba(0, 0, 0, 0.45) calc(100% - var(--hero-fade) * 0.45), transparent 100%);
}
.hero { --hero-fade: clamp(84px, 14vh, 130px); }
.hero-id, .hero-roles { text-shadow: 0 1px 2px rgba(5, 22, 26, 0.7), 0 2px 18px rgba(5, 22, 26, 0.55); }
.hero-inner { position: relative; z-index: 1; padding-top: clamp(96px, 14vw, 180px); padding-bottom: clamp(40px, 6vw, 72px); display: grid; gap: clamp(22px, 3vw, 34px); justify-items: start; }
.hero-id { display: grid; gap: 10px; }
.hero-name { font-size: clamp(3rem, 7.1vw, 5.75rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.025em;
  margin-left: -0.065em; /* the R's built-in side gap: pulls its ink onto the same edge as the lines and buttons below */ }
.hero-title { font-size: var(--step-1); color: var(--cream-dim); }
.hero-roles { margin-top: 8px; color: var(--cream); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.reel-btn { position: absolute; right: var(--gutter); bottom: clamp(16px, 2.4vw, 28px); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--cream); background: rgba(10, 23, 25, 0.28); border: 1px solid rgba(243, 230, 207, 0.32); border-radius: 50%; opacity: 0.5; transition: opacity 0.2s ease, background-color 0.2s ease; }
.reel-btn:hover, .reel-btn:focus-visible { opacity: 1; background: rgba(10, 23, 25, 0.6); }
.reel-btn svg { width: 16px; height: 16px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 500 1rem/1 var(--font-body); letter-spacing: 0.02em; text-decoration: none;
  padding: 14px 20px; border-radius: 4px; border: 1.5px solid var(--cream);
  background: var(--cream); color: var(--teal);
}
.btn:hover { background: var(--vermilion); border-color: var(--vermilion); color: var(--cream); }
.btn.ghost { background: transparent; color: var(--cream); }
.btn.ghost:hover { border-color: var(--vermilion); background: transparent; color: var(--cream); }

/* ---------- Full reel popup ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(5, 22, 26, 0.92); display: grid; place-items: center; padding: var(--gutter); }
.modal[hidden] { display: none; }
.modal-box { width: min(1200px, 100%); position: relative; }
.modal-close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--cream); background: transparent; color: var(--cream); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.modal-close:hover { border-color: var(--vermilion); background: var(--vermilion); }

/* ---------- Credit strip ---------- */
.strip { border-bottom: 1px solid var(--line); }
.strip .wrap { display: grid; grid-template-columns: auto 1fr; gap: 12px 32px; padding-top: 22px; padding-bottom: 22px; align-items: baseline; }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: var(--step-1); font-weight: 500; }
.strip .wrap:has(.logos) { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; padding-top: 30px; padding-bottom: 30px; }
.logos { align-items: center; justify-content: center; gap: 22px clamp(28px, 3.6vw, 44px) !important; }
.logos li { display: flex; align-items: center; }
.logos img { height: 26px; width: auto; opacity: 0.85; }
.logos .logo-itv img, .logos .logo-apple img { height: 34px; }
.logos .logo-nightsky img { height: 36px; }
.logos .logo-alt img { height: 24px; }
@media (max-width: 600px) { .strip .wrap { grid-template-columns: 1fr; } .logos img { height: 20px; } .logos .logo-itv img, .logos .logo-apple img { height: 26px; } .logos .logo-nightsky img { height: 28px; } .logos .logo-alt img { height: 19px; } }

/* ---------- Sections ---------- */
.section { padding: clamp(44px, 5vw, 72px) 0; border-bottom: 1px solid var(--line); } /* one gap above and below every divider */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); flex-wrap: wrap; }
.section-head h2 { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.01em; }
.section-head a { color: var(--cream-dim); text-decoration: none; font-weight: 500; }
.section-head a:hover { color: var(--cream); }
.section-head a.all-btn { color: var(--teal); }
.section-head a.all-btn:hover { color: var(--cream); }

/* ---------- Project cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.card { display: grid; gap: 14px; align-content: start; text-decoration: none; color: inherit; }   /* top-aligned, so every card in a row starts its text at the same height */
.card .frame { aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; position: relative; background: var(--teal-deep); border: 1px solid var(--line); }
.card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card:hover .frame img { transform: scale(1.03); }
.card .frame .pv { position: absolute; inset: 0; opacity: 0; transition: opacity 0.85s ease, transform 0.5s ease; }
.card .frame .pv.on { opacity: 1; }
.frame .chip { z-index: 1; }
.card:hover h3 { color: var(--cream); text-decoration: underline; text-decoration-color: var(--vermilion); text-underline-offset: 5px; }
.card h3 { font-size: var(--step-2); font-weight: 500; line-height: 1.15; }
.card h3 small { display: block; font-size: 0.6em; font-weight: 400; color: var(--cream-dim); margin-top: 2px; }   /* subtitle on its own line */
.card .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: -4px; color: var(--cream-dim); font-size: 0.95rem; }

/* Highlighted project: one big feature */
.feature { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); color: inherit; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--teal-deep); }
.feature-media { position: relative; aspect-ratio: 16 / 9; min-width: 0; overflow: hidden; background: var(--teal-deep); touch-action: pan-y; }
@media (min-width: 861px) { .feature-media { aspect-ratio: auto; min-height: 460px; } }   /* desktop: photo fills the card's full height beside the text */
.feature-media:focus-visible { outline: 2px solid var(--vermilion); outline-offset: -2px; }
.feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature, .tool { transition: border-color 0.2s ease; }
.feature:hover, .tool:hover { border-color: rgba(243, 230, 207, 0.34); }
.slide-btn { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(10, 46, 53, 0.72); color: var(--cream); font: 400 26px/1 var(--font-body); padding-bottom: 3px; cursor: pointer; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.slide-btn.prev { left: 14px; } .slide-btn.next { right: 14px; }
.feature-media:hover .slide-btn, .slide-btn:focus-visible { opacity: 1; }
.slide-btn:hover { background: var(--vermilion); border-color: var(--vermilion); }
@media (hover: none) { .slide-btn { opacity: 1; } }
.slide-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; padding: 40px 18px 14px;
  background: linear-gradient(to top, rgba(10, 46, 53, 0.85), rgba(10, 46, 53, 0)); pointer-events: none; }
.slide-count { white-space: nowrap; color: var(--cream); }
.feature-when { margin-top: 10px; }
.feature-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.feature-text { display: grid; gap: 16px; align-content: center; padding: clamp(24px, 3vw, 40px); border-left: 2px solid var(--vermilion); }

.feature h3 { font-size: var(--step-3); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
.feature h3 small { display: block; font-size: 0.5em; font-weight: 400; color: var(--cream-dim); margin-top: 8px; letter-spacing: 0; }
.feature-text p { color: var(--cream-dim); }
.feature-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.feature-facts div { display: grid; gap: 2px; }
.feature-facts dd { margin: 0; font-weight: 500; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature-text { border-left: 0; border-top: 2px solid var(--vermilion); } }

/* Placeholder frame: an LED cabinet grid with the slate burned in */
.ph { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 16px 18px;
  background-color: var(--teal-deep);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 12.5% 22.2%;
  background-position: -1px -1px;
}
.ph .ph-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; }
.ph .ph-row { display: flex; justify-content: space-between; gap: 12px; color: var(--cream-dim); }

.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; border: 1px solid var(--line); color: var(--cream); background: rgba(10, 46, 53, 0.85); }
.chip.hot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vermilion); }
.frame .chip { position: absolute; top: 12px; right: 12px; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters button { font: 500 0.95rem/1 var(--font-body); color: var(--cream-dim); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.filters button:hover { color: var(--cream); border-color: var(--cream-dim); }
.filters button[aria-pressed="true"] { background: var(--cream); color: var(--teal); border-color: var(--cream); }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.svc-group { display: grid; gap: 18px; align-content: start; padding-top: 18px; border-top: 2px solid var(--line); }
.svc-group.lead { border-top-color: var(--vermilion); }
.svc-group h3 { font-size: var(--step-1); font-weight: 500; }
.svc-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.svc-group li { font-size: var(--step-0); }
@media (max-width: 900px) { .services { grid-template-columns: 1fr; } }

/* ---------- Tools ---------- */
.intro { max-width: 60ch; color: var(--cream-dim); font-size: var(--step-1); margin-bottom: clamp(28px, 4vw, 40px); }

.tools { display: grid; gap: clamp(20px, 2.4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.tool { background: var(--teal-deep); border: 1px solid var(--line); border-radius: 6px; padding: clamp(22px, 3vw, 32px); display: grid; gap: 18px; align-content: start; }
.tool-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool h3 { font-size: var(--step-2); font-weight: 500; line-height: 1.1; }
.tool h3 .pre { font-weight: 300; color: var(--cream-dim); }
.tool p { color: var(--cream-dim); }
.tool ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tool li { padding-left: 20px; position: relative; font-size: 0.98rem; }
.tool li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 10px; height: 1.5px; background: var(--vermilion); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 72px); }
.about .prose { display: grid; gap: 18px; max-width: 62ch; font-size: var(--step-1); line-height: 1.5; }
.about .prose p:not(:first-child) { color: var(--cream-dim); font-size: var(--step-0); line-height: 1.6; }
.facts { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { margin: 0; }
.facts dd { margin: 0; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* ---------- Project page ---------- */
.back { display: inline-flex; gap: 8px; color: var(--cream-dim); text-decoration: none; font-weight: 500; margin-bottom: 28px; }
.back:hover { color: var(--cream); }
.proj-head { display: grid; gap: 24px; padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 40px); }
.proj-head h1 { font-size: var(--step-4); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.proj-head h1 small { display: block; font-size: 0.4em; font-weight: 400; color: var(--cream-dim); letter-spacing: 0; margin-top: 12px; }
.slate { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.slate div { flex: 1 1 0; min-width: 140px; padding: 14px 18px; display: grid; gap: 4px; align-content: start; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }   /* boxes share the row; Status keeps its natural width so "Released · BBC iPlayer" stays on one line */
.slate .slate-status { flex: 0 0 auto; }
.slate .slate-status dd { white-space: nowrap; }
.slate dd { margin: 0; font-weight: 500; font-size: var(--step-1); }
.slate dt { margin: 0; }
.slate dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--vermilion); text-underline-offset: 4px; }
.slate dd a:hover { color: var(--cream); text-decoration-thickness: 2px; }
.proj-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 48px) 0; }
.proj-body .lede { font-size: var(--step-2); line-height: 1.3; font-weight: 400; }
.proj-body .text { display: grid; gap: 16px; color: var(--cream-dim); max-width: 62ch; }
@media (max-width: 860px) { .proj-body { grid-template-columns: 1fr; } }
.media { display: grid; gap: clamp(16px, 2vw, 24px); padding-bottom: clamp(40px, 6vw, 72px); }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--teal-deep); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video button { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; color: var(--cream); cursor: pointer; display: grid; place-items: center; gap: 12px; font: 500 1.05rem var(--font-body); }
.video button .play { width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--cream); display: grid; place-items: center; }
.video button:hover .play { background: var(--vermilion); border-color: var(--vermilion); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.notice { border: 1px dashed var(--line); border-radius: 4px; padding: 28px; display: grid; gap: 8px; max-width: 70ch; }
.notice strong { font-weight: 500; font-size: var(--step-1); }
.notice p { color: var(--cream-dim); }
.pager { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 28px 0 0; flex-wrap: wrap; }
.pager a { text-decoration: none; display: grid; gap: 4px; }
.pager a:last-child { text-align: right; margin-left: auto; }
.pager a strong { font-size: var(--step-1); font-weight: 500; }
.pager a:hover strong { text-decoration: underline; text-decoration-color: var(--vermilion); text-underline-offset: 5px; }

/* ---------- Contact / footer ---------- */
.contact { padding: clamp(64px, 9vw, 120px) 0 40px; background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%); }
.contact h2 { font-size: var(--step-4); font-weight: 500; line-height: 1; letter-spacing: -0.02em; max-width: 12ch; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.contact-lines { display: grid; gap: 0; border-top: 1px solid var(--line); }
.contact-lines a, .contact-lines span { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: var(--step-1); font-weight: 500; align-items: baseline; }
.contact-lines a:hover b { text-decoration: underline; text-decoration-color: var(--vermilion); text-underline-offset: 5px; }
.contact-lines b { font-weight: 500; word-break: break-word; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(48px, 7vw, 88px); flex-wrap: wrap; color: var(--cream-dim); font-size: 0.95rem; }
.foot .logo { font-size: 1.1rem; }

/* Page-load: the one orchestrated moment */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
  .rise:nth-child(2) { animation-delay: 0.08s; }
  .rise:nth-child(3) { animation-delay: 0.16s; }
  @keyframes rise { from { opacity: 0.001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------- Earlier work: compact grid ---------- */
.grid.compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.card.compact h3 { font-size: var(--step-1); }
.card.compact h3 small { font-size: 0.72em; }
.card.compact .meta { font-size: 0.88rem; }

/* ---------- Project page extras ---------- */
.hero-still img { width: 100%; border-radius: 4px; border: 1px solid var(--line); }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* ---------- Password form ---------- */
.lock { border: 1px solid var(--line); background: var(--teal-deep); border-radius: 6px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 12px; max-width: 560px; }
.lock strong { font-size: var(--step-2); font-weight: 500; }
.lock p { color: var(--cream-dim); }
.lock-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lock input { flex: 1 1 220px; min-width: 0; font: 400 1rem var(--font-body); color: var(--cream); background: var(--teal); border: 1.5px solid var(--line); border-radius: 4px; padding: 13px 14px; }
.lock input:focus { outline: 2px solid var(--vermilion); outline-offset: 2px; border-color: transparent; }
.lock input::placeholder { color: var(--cream-dim); }
.lock-msg:empty { display: none; }
.lock-msg { color: var(--cream) !important; }
.lock-ask a { color: var(--cream); }

/* ---------- Logo file ---------- */
.logo-link { display: inline-flex; line-height: 0; border-radius: 6px; }
.site-head .logo-img { height: 38px; width: auto; }
@media (max-width: 480px) {   /* phones: keep the menu on one line beside the logo */
  .site-head .wrap { gap: 14px; min-height: 60px; }
  .site-head .logo-img { height: 30px; }
  .nav { gap: 14px; flex-wrap: nowrap; }
  .nav a { font-size: 0.95rem; letter-spacing: 0; }
}
.foot .logo-img { height: 32px; width: auto; }
.frame .ph .ph-row:first-child { padding-right: 112px; }

/* ---------- Clickable photos (open the full-screen viewer) ---------- */
.ph-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4px; }
.ph-btn:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }
.ph-btn img { transition: filter 0.25s ease; }
.ph-btn:hover img { filter: brightness(1.08); }
.ph-fig { margin: 0; display: grid; gap: 10px; }
.ph-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }

/* ---------- Project story layout (projects with sets) ---------- */
.story-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(28px, 4vw, 48px) 0 clamp(36px, 5vw, 56px); }
.story-intro .lede { font-size: var(--step-2); line-height: 1.3; }
.story-intro .sub { color: var(--cream-dim); margin-top: 16px; max-width: 62ch; }
.credit-panel { display: grid; gap: 18px; padding: 18px; background: var(--teal-deep); border: 1px solid var(--line); border-left: 2px solid var(--vermilion); border-radius: 6px; }
.credit-panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.credit-text { display: grid; gap: 6px; justify-items: start; }
.credit-text strong { font-size: var(--step-1); font-weight: 500; margin-bottom: 10px; }
.story-hero img { aspect-ratio: 21 / 9; }
.opener { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: end; padding: clamp(48px, 7vw, 96px) 0 0; }
.opener-text { display: grid; gap: 14px; max-width: 46ch; padding-bottom: 6px; }
.opener-text h2 { font-size: var(--step-3); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
.opener-text p { color: var(--cream-dim); }

.set { display: grid; gap: clamp(16px, 2vw, 24px); padding: clamp(56px, 8vw, 104px) 0 0; }
.set-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px clamp(24px, 4vw, 64px); align-items: end; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.set-head h2 { font-size: var(--step-3); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; padding-bottom: 14px; }
.set-head p { color: var(--cream-dim); max-width: 58ch; padding-bottom: 16px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
.set-rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.set-rest.n2, .set-rest.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set-rest.n1 { grid-template-columns: 1fr; }
.set-rest.large { grid-template-columns: 1fr; }   /* sets marked large: one photo per row, uncropped */
.set-rest.large img { aspect-ratio: auto; }
.set-rest.n1 img { aspect-ratio: 21 / 9; }   /* a lone extra photo runs full width, letterboxed, rather than leaving a half-empty row */
.set-rest.r1, .set-rest.r2 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.set-rest.r1 > *, .set-rest.r2 > * { grid-column: span 2; }
/* counts that don't fill rows of 3: lead with rows of 2 so there's never a lone photo (5 = 2+3, 7 = 2+2+3, 8 = 2+3+3…) */
.set-rest.r2 > :nth-child(-n+2), .set-rest.r1 > :nth-child(-n+4) { grid-column: span 3; }
.clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.clips.n1 { grid-template-columns: 1fr; }
.clips.n3 > :first-child { grid-column: 1 / -1; }   /* three clips: one wide, two below */
@media (max-width: 560px) { .clips { grid-template-columns: 1fr; } }
.clip { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: var(--teal-deep); }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip .clip-btn { right: 14px; bottom: 14px; }

.more-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 64px); padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-left: 2px solid var(--vermilion); border-radius: 6px; background: var(--teal-deep); }
.more-cta p { font-size: var(--step-2); line-height: 1.2; }

@media (max-width: 860px) {
  .story-intro, .opener, .set-head { grid-template-columns: 1fr; }
  .story-hero img { aspect-ratio: 16 / 9; }
  .set-rest, .set-rest.r1, .set-rest.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-rest.r1 > *, .set-rest.r2 > * { grid-column: auto; }
  .set-rest.n1 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } }

/* ---------- Full-screen photo viewer ---------- */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(5, 22, 26, 0.95); touch-action: pan-y; }
.lb[hidden] { display: none; }
.lb-img { max-width: calc(100vw - 2 * clamp(16px, 7vw, 110px)); max-height: calc(100vh - 120px); object-fit: contain; border-radius: 3px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.lb-btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); background: rgba(10, 46, 53, 0.8); color: var(--cream);
  font: 400 28px/1 var(--font-body); padding-bottom: 3px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.lb-btn:hover, .lb-btn:focus-visible { background: var(--vermilion); border-color: var(--vermilion); }
.lb-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: clamp(8px, 2vw, 32px); top: 50%; translate: 0 -50%; }
.lb-next { right: clamp(8px, 2vw, 32px); top: 50%; translate: 0 -50%; }
.lb.single .lb-prev, .lb.single .lb-next { display: none; }
.lb-count { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; color: var(--cream); }
@media (max-width: 600px) { .lb-img { max-width: 100vw; border-radius: 0; } .lb-prev, .lb-next { top: auto; bottom: 10px; translate: none; } }

/* ---------- About ---------- */
.ab-intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ab-portrait, .ab-desk { margin: 0; }
.ab-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 4px; display: block; }
.ab-story h1 { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 20px; }
.ab-story .lede { margin-bottom: 18px; }
.ab-story p:not(.lede):not(.label) { color: var(--cream-dim); margin-top: 14px; max-width: 60ch; line-height: 1.6; }
.ab-roles { margin-top: 26px; }
.ab-roles span { color: var(--vermilion); }
.ab-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.ab-cards li { border: 1px solid var(--line); border-top: 2px solid var(--vermilion); border-radius: 4px; padding: 22px 20px; }
.ab-cards h3 { font-size: 1.15rem; font-weight: 500; margin: 0 0 8px; }
.ab-cards p { color: var(--cream-dim); line-height: 1.55; font-size: 0.95rem; }
.ab-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ab-desk img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; display: block; }
.ab-approach h2, .ab-history h2 { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 20px; }
.ab-approach p { color: var(--cream-dim); line-height: 1.6; margin-top: 14px; max-width: 60ch; }
.ab-approach p:first-of-type { color: var(--cream); font-size: 1.1rem; }
.ab-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.ab-tool { border: 1px solid var(--line); border-radius: 4px; padding: 22px 22px 24px; background: rgba(10, 23, 25, 0.18); }
.ab-tool h3 { margin-bottom: 14px; }
.ab-tool ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.ab-tool li { position: relative; padding-left: 16px; font-size: 1.05rem; line-height: 1.35; }
.ab-tool li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--vermilion); }
.ab-tool li.more { color: var(--cream-dim); }
.ab-tool li.more::before { background: var(--cream-dim); }
.ab-history { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.ab-rows { list-style: none; padding: 0; margin: 0; }
.ab-rows li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.ab-rows li:last-child { border-bottom: 1px solid var(--line); }
.ab-rows .label { padding-top: 3px; }
.ab-rows strong { display: block; font-weight: 500; }
.ab-rows div span { color: var(--cream-dim); font-size: 0.95rem; }
@media (max-width: 1100px) { .ab-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ab-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .ab-intro-grid, .ab-split, .ab-history { grid-template-columns: 1fr; }
  .ab-portrait { max-width: 420px; }
  .ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .ab-cards, .ab-tools { grid-template-columns: 1fr; } .ab-rows li { grid-template-columns: 84px minmax(0, 1fr); } }

/* ---------- Contact section ---------- */
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ct-left h1, .ct-left h2 { font-size: var(--step-4); font-weight: 500; line-height: 1; letter-spacing: -0.02em; max-width: 12ch; }
.ct-intro { color: var(--cream-dim); font-size: 1.1rem; line-height: 1.6; max-width: 46ch; margin: clamp(18px, 2.5vw, 28px) 0 clamp(24px, 3.5vw, 40px); }
.ct-ways { display: grid; border-top: 1px solid var(--line); }
.contact-page { min-height: calc(100vh - 69px); padding-top: clamp(56px, 7vw, 96px); }
.contact-slim { padding: 0 0 40px; background: var(--teal-deep); }
.contact-slim .foot { margin-top: 0; padding-top: 28px; border-top: 1px solid var(--line); }
.ct-way { display: grid; grid-template-columns: 110px 1fr; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; align-items: baseline; }
.ct-way b { font-size: var(--step-1); font-weight: 500; word-break: break-word; }
a.ct-way:hover b { text-decoration: underline; text-decoration-color: var(--vermilion); text-underline-offset: 5px; }
.ct-note { grid-column: 2; color: var(--cream-dim); font-size: 0.95rem; }
.ct-book b { color: var(--cream); }
.ct-form { border: 1px solid var(--line); border-top: 2px solid var(--vermilion); border-radius: 6px; background: rgba(10, 23, 25, 0.22); padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; }
.ct-form h3 { margin-bottom: 2px; }
.ct-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ct-field { display: grid; gap: 7px; }
.ct-field label { font-weight: 500; font-size: 0.95rem; }
.ct-opt { color: var(--cream-dim); font-weight: 400; font-size: 0.85rem; }
.ct-form input, .ct-form select, .ct-form textarea { width: 100%; min-width: 0; font: 400 1rem var(--font-body); color: var(--cream); background: var(--teal); border: 1.5px solid var(--line); border-radius: 4px; padding: 12px 14px; }
.ct-form textarea { resize: vertical; min-height: 120px; }
.ct-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cream-dim) 50%), linear-gradient(135deg, var(--cream-dim) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.ct-form select option { background: var(--teal-deep); color: var(--cream); }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: 2px solid var(--vermilion); outline-offset: 2px; border-color: transparent; }
.ct-form input::placeholder { color: var(--cream-dim); opacity: 0.7; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.ct-send .btn:disabled { opacity: 0.6; cursor: wait; }
.ct-msg { color: var(--cream-dim); font-size: 0.95rem; }
@media (max-width: 860px) { .ct-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ct-row { grid-template-columns: 1fr; } .ct-way { grid-template-columns: 1fr; } .ct-note { grid-column: 1; } }

/* YouTube thumbnail behind the play button until the video is loaded */
.video.has-thumb { background-size: cover; background-position: center; }
.video.has-thumb button { background: rgba(10, 23, 25, 0.35); transition: background-color 0.2s ease; }
.video.has-thumb button:hover { background: rgba(10, 23, 25, 0.15); }
.set > .video { margin-bottom: clamp(12px, 1.6vw, 20px); }

/* Unreleased / NDA project screen */
.lock-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lock-msgbox h2 { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.lock-msgbox p { color: var(--cream-dim); font-size: 1.15rem; margin-top: 14px; }
.lock-msgbox .lock-more { color: var(--cream); margin-top: 28px; }
.lock-msgbox .btn { margin-top: 16px; }
.lock-wrap .lock { max-width: none; }
.lock-wrap .lock strong { font-size: var(--step-1); }
@media (max-width: 860px) { .lock-wrap { grid-template-columns: 1fr; } }
.ct-cv { margin-top: clamp(24px, 3vw, 32px); }