:root {
  --paper: #fcf7ef;
  --paper-2: #f3eadc;
  --card: #fffbf5;
  --ink: #1c1a17;
  --ink-soft: #24211d;
  --cobalt: #2c4a9a;
  --tangerine: #ff7d3f;
  --muted: rgba(28, 26, 23, 0.62);
  --line: rgba(28, 26, 23, 0.16);
  --on-dark: #f3eadc;
  --on-dark-muted: rgba(243, 234, 220, 0.66);
  --on-dark-line: rgba(243, 234, 220, 0.18);
  --font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 3vw, 48px);
  --nav-h: 76px;
  --radius-panel: clamp(18px, 1.8vw, 24px);
  --radius-card: clamp(14px, 1.3vw, 18px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); overscroll-behavior-x: none; }
body { overscroll-behavior-x: none; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, video { display: block; max-width: 100%; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--tangerine); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--tangerine); color: var(--ink); }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--tangerine); padding: 8px 12px; border-radius: 10px; }
.skip:focus { left: 8px; }

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }
section[id] { scroll-margin-top: 84px; }

.label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.label-on-dark { color: var(--on-dark-muted); }
.label-index { display: inline-block; min-width: 2.6em; color: #d85a1f; }
.label-on-dark .label-index { color: var(--tangerine); }

/* Icons: SVGs drawn centred on a 24 unit grid; the wrapping span is a flex box, so no line box shifts them */

.icon { display: block; width: 1em; height: 1em; flex: none; stroke-width: 1.8; overflow: visible; }
.ic { display: inline-flex; align-items: center; justify-content: center; }
.btn .icon { width: 1.3em; height: 1.3em; stroke-width: 1.7; }
.pill .icon { width: 1.3em; height: 1.3em; stroke-width: 2.1; }
/* In running text the arrow sits on the middle of the lowercase letters */
.index-title span.ic, .fcol li a span.ic, .service-work a span.ic { display: inline-flex; vertical-align: middle; }
.index-title .icon, .fcol .icon, .service-work .icon { width: 0.8em; height: 0.8em; stroke-width: 2; }

/* Buttons and pills */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn span { transition: transform 0.3s var(--ease); }
.btn:hover span { transform: translate(2px, -2px); }
.btn[href="#work"]:hover span { transform: translateY(3px); }
.btn-small { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-accent { background: var(--tangerine); color: var(--ink); }
.btn-accent:hover { background: #ff9362; }
.btn-ink { background: var(--ink); color: var(--on-dark); }
.btn-ink:hover { background: #2a2824; }
.btn-ghost-dark { color: var(--on-dark); border-color: rgba(236, 231, 221, 0.4); background: rgba(236, 231, 221, 0.04); }
.btn-ghost-dark:hover { border-color: var(--on-dark); background: rgba(236, 231, 221, 0.1); }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(15, 14, 12, 0.28);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pill:hover { border-color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.pill-glass { color: var(--on-dark); background: rgba(15, 14, 12, 0.62); border-color: var(--on-dark-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pill-glass:hover { border-color: var(--on-dark); }

/* Cards */

.card { border: 1px solid var(--ink); border-radius: var(--radius-panel); background: var(--card); }
.card-ink { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }

/* Navigation */

.nav {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 40;
  height: 54px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 18px;
  background: rgba(252, 247, 239, 0.86);
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-name { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; justify-self: start; }
.nav-places { display: flex; gap: 2px; }
.nav-places a { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; color: var(--muted); transition: color 0.2s, background 0.2s; }
.nav-places a:hover { color: var(--ink); background: rgba(28, 26, 23, 0.05); }
.nav-places a[aria-current="true"] { color: var(--ink); background: rgba(255, 125, 63, 0.16); }
.nav-end { display: flex; align-items: center; gap: 6px; justify-self: end; }
.nav-link { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 12px; color: var(--muted); }
.nav-link:hover { color: var(--ink); }

/* The journey: one continuous drawing of the places, crossed by scrolling */

/* The section is as tall as the screen with a phone browser's bars hidden, and the drawing as tall as the screen with
   them showing. The rail keeps to the bottom of whatever shows, so when the bars slide away no gap opens under it. */
.journey { position: relative; height: 100vh; height: 100lvh; background: var(--paper); }
.journey-view { position: relative; height: 100%; height: 100svh; overflow: hidden; touch-action: pan-y; }
.track { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; }
.panels, .callouts { position: absolute; inset: 0; }
.callouts { pointer-events: none; }
.panel {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade, 0px)), linear-gradient(to bottom, transparent, #000 4%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 var(--fade, 0px)), linear-gradient(to bottom, transparent, #000 4%, #000 90%, transparent);
  mask-composite: intersect;
}

.overlay { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.leader { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.5; transition: stroke 0.25s, opacity 0.25s; }
.pin-dot { fill: var(--tangerine); stroke: var(--paper); stroke-width: 2; }
.pin-ring { fill: none; stroke: var(--tangerine); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pin-tick { stroke: var(--ink); stroke-width: 1; opacity: 0.5; }
.is-hot .leader { stroke: #d85a1f; opacity: 1; stroke-width: 1.5; }
.is-hot .pin-ring { animation: ring 1.4s var(--ease) infinite; }
@keyframes ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.arc { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 6; opacity: 0.45; }
.arc-end { fill: var(--ink); opacity: 0.5; }
.arc-group { transition: opacity 0.2s linear; }
.arc-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--muted); paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }

.callout {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card-w, 232px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 7px 12px;
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: 12px;
  pointer-events: auto;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.callout:hover, .callout.is-hot { border-color: #d85a1f; box-shadow: 0 0 0 1px #d85a1f; }
.callout-media { position: relative; aspect-ratio: 16 / 9; margin-bottom: 4px; border-radius: 7px; overflow: hidden; background: var(--ink); }
.callout-play { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 7px 0 4px; border-radius: 999px; color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; background: linear-gradient(180deg, rgba(40, 37, 33, 0.52), rgba(20, 18, 16, 0.62)); -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.22); }
.callout-play .icon { width: 14px; height: 14px; }
.callout-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.callout:hover .callout-media img { transform: scale(1.05); }
.callout-meta, .callout-title, .callout-outcome { padding: 0 5px; }
.callout-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.callout-title { font-size: 17px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.callout-outcome { font-size: 13px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.journey.is-compact .callout-media { display: none; }
.journey.is-compact .callout { padding-top: 10px; }

.hud { position: absolute; top: calc(var(--nav-h) + 24px); left: var(--gutter); z-index: 5; width: min(460px, calc(100% - var(--gutter) * 2)); pointer-events: none; }
.hud, .journey-hint { text-shadow: 0 0 14px var(--paper), 0 0 6px var(--paper), 0 0 2px var(--paper); }
.opening, .place { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), max-height 0.7s var(--ease), padding 0.6s var(--ease), background 0.6s; overflow: hidden; }
.opening { max-height: 420px; }
.opening-name { font-size: clamp(44px, 5.4vw, 86px); font-weight: 500; line-height: 0.92; letter-spacing: -0.05em; margin: 12px 0 14px -0.04em; }
.opening-line { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.38; letter-spacing: -0.01em; max-width: 32ch; }
.opening-now { margin-top: 16px; }
.place { max-height: 0; opacity: 0; transform: translateY(10px); margin-left: -16px; padding: 0 16px; border: 1px solid transparent; border-radius: 14px; }
.hud.is-travelling .opening { max-height: 0; opacity: 0; transform: translateY(-14px); }
.hud.is-travelling .place { max-height: 380px; opacity: 1; transform: none; pointer-events: auto; padding: 11px 14px 10px; background: rgba(252, 247, 239, 0.86); border-color: var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.place-meta { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 10.5px; }
.place-name { font-size: clamp(24px, 2.1vw, 32px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; margin: 6px 0 6px -0.02em; }
/* The plate stays a small label: companies on one line, the full roles on hover or on the Roles button */
.place-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.place-orgs { font-size: 13px; line-height: 1.4; color: rgba(28, 26, 23, 0.8); }
.place-toggle { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); transition: color 0.2s, border-color 0.2s; }
.place-toggle::after { content: ""; width: 7px; height: 7px; background: linear-gradient(currentColor, currentColor) center / 100% 1.2px no-repeat, linear-gradient(currentColor, currentColor) center / 1.2px 100% no-repeat; }
.place-toggle:hover { color: var(--ink); border-color: var(--ink); }
.place-toggle[hidden] { display: none; }
.place.is-single .place-roles { display: none; }
.place.is-open .place-toggle::after { background: linear-gradient(currentColor, currentColor) center / 100% 1.2px no-repeat; }
.place-roles { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.3s, margin 0.5s var(--ease); }
.place.is-open .place-roles { max-height: 320px; opacity: 1; margin-top: 10px; }
@media (hover: hover) {
  .place:hover .place-roles { max-height: 320px; opacity: 1; margin-top: 10px; }
}
.place-roles li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; }
.place-roles li:last-child { border-bottom: 1px solid var(--line); }
.place-roles strong { font-weight: 500; }
.place-roles .role::before { content: ", "; }
.place-roles .years { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }

.journey-hint { position: absolute; top: calc(var(--nav-h) + 32px); right: var(--gutter); z-index: 5; transition: opacity 0.5s; }
.journey-hint.is-gone { opacity: 0; }

.rail { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 14px; bottom: calc(14px + 100lvh - 100dvh); z-index: 6; }
.rail-line { position: relative; height: 1px; background: rgba(28, 26, 23, 0.3); }
.rail-progress { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--tangerine); transform-origin: left; transform: scaleX(0); }
.rail-stops { position: relative; height: 36px; }
.rail-stop { position: absolute; top: -6px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.rail-stop::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); transition: background 0.3s, border-color 0.3s; }
.rail-stop:hover { color: var(--ink); }
.rail-stop[aria-current="true"] { color: var(--ink); }
.rail-stop[aria-current="true"]::before { background: var(--tangerine); border-color: var(--tangerine); }
.rail-stop.is-start { transform: translateX(-5.5px); align-items: flex-start; }
.rail-stop.is-end { transform: translateX(calc(-100% + 5.5px)); align-items: flex-end; }
.rail-stop .rail-years { display: none; }
.rail-stop[aria-current="true"] .rail-years { display: inline; color: var(--muted); }

/* Section headings */

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.tight { margin-top: clamp(72px, 9vw, 120px); margin-bottom: 20px; }
.section-title {
  font-size: clamp(44px, 6vw, 96px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin-top: 14px;
}
/* The index title's first words change with the work switch */
.work-word { display: inline-block; will-change: transform; }
.work-switch { position: relative; isolation: isolate; display: inline-flex; margin-top: clamp(20px, 2.4vw, 30px); padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.work-switch button { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color 0.35s var(--ease); }
.work-switch button:hover { color: var(--ink); }
.work-switch button[aria-checked="true"] { color: var(--on-dark); }
.work-switch button:focus-visible { outline: 2px solid var(--tangerine); outline-offset: 2px; }
.work-switch .n { font-size: 10px; opacity: 0.6; }
.work-switch .short { display: none; }
.work-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; z-index: -1; border-radius: 999px; background: var(--ink); transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1), width 0.55s cubic-bezier(0.34, 1.3, 0.64, 1); }
.sub-title { font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; margin-top: 10px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; padding: 3px 9px; border: 1px solid var(--t-line, var(--line)); border-radius: 999px; }
.pill[hidden] { display: none; }

/* Index: the work as a mosaic of tiles, packed with no holes. Rows are sized from the grid's own width, so a wide
   tile is two small ones side by side, a tall one two stacked, and a large one four. */

.index { background: var(--paper); padding: clamp(96px, 11vw, 150px) 0 clamp(80px, 9vw, 120px); border-top: 1px solid var(--line); }
.index-mosaic { container-type: inline-size; }
.mosaic { --gap: clamp(8px, 0.9vw, 12px); --cols: 4; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * 0.625); grid-auto-flow: dense; gap: var(--gap); }
.tile { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: var(--radius-card); background: var(--c, var(--ink)); color: var(--on-dark); }
.tile[hidden] { display: none; }
.tile.is-wide { grid-column: span 2; }
.tile.is-tall { grid-row: span 2; }
.tile.is-large { grid-column: span 2; grid-row: span 2; }
.tile:focus-visible { outline: 2px solid var(--tangerine); outline-offset: 3px; }
.tile-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.tile:hover .tile-media { transform: scale(1.04); }
.tile-cap { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; gap: 3px; padding: 48px clamp(12px, 1.2vw, 18px) clamp(12px, 1.1vw, 16px); background: linear-gradient(to top, rgba(20, 18, 16, 0.8), rgba(20, 18, 16, 0)); transition: padding-bottom 0.45s var(--ease); }
.tile:hover .tile-cap { padding-bottom: calc(clamp(12px, 1.1vw, 16px) + 6px); }
.tile-title { display: flex; align-items: center; gap: 6px; font-size: clamp(15px, 1.25vw, 18px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.tile.is-wide .tile-title, .tile.is-tall .tile-title { font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -0.02em; }
.tile.is-large .tile-title { font-size: clamp(22px, 2.3vw, 34px); letter-spacing: -0.03em; }
/* The arrow comes in only when a tile is hovered or focused, so it answers the pointer instead of sitting on every
   tile; it keeps its room, so the title never shifts. With no hover, on a phone, it stays out. */
.tile-title .ic { flex: none; opacity: 0; transform: translate(-3px, 3px); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.tile:hover .tile-title .ic, .tile:focus-visible .tile-title .ic { opacity: 1; transform: translate(2px, -2px); }
.tile-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-dark-muted); }
.tile-tags { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; gap: 6px; }
.tile-tag { padding: 3px 7px; border-radius: 999px; font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(252, 247, 239, 0.9); color: var(--ink); }
.tile-tag.is-soon { color: #b8481a; }
/* No picture, or one shown whole: the card colour with an ink edge, the text in the colour's own ink or paper */
.tile.is-flat { border: 1px solid var(--ink); color: var(--ink); }
.tile.is-flat.on-dark { color: var(--on-dark); }
.tile.is-flat .tile-media { object-fit: contain; padding: 9% 9% 30%; }
.tile.is-flat .tile-cap { background: none; }
.tile.is-flat .tile-meta { color: var(--muted); }
.tile.is-flat.on-dark .tile-meta { color: var(--on-dark-muted); }
.tile.is-flat .tile-tag { background: rgba(28, 26, 23, 0.07); }
.tile.is-flat.on-dark .tile-tag { background: rgba(243, 234, 220, 0.14); color: var(--on-dark); }


/* Proof */

.proof { background: var(--ink); color: var(--on-dark); padding: clamp(96px, 11vw, 150px) 0; }
.wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--on-dark-line); border-left: 1px solid var(--on-dark-line); }
.wall li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 118px;
  padding: 18px 20px;
  border-right: 1px solid var(--on-dark-line);
  border-bottom: 1px solid var(--on-dark-line);
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  transition: background 0.3s var(--ease);
}
.wall li:hover { background: rgba(243, 234, 220, 0.05); }
.wall img { width: auto; max-width: 78%; height: 40px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.78; transition: opacity 0.3s var(--ease); }
.wall li:hover img { opacity: 1; }
.wordmark { opacity: 0.78; transition: opacity 0.3s var(--ease); }
.wall li:hover .wordmark { opacity: 1; }

/* The trophy shelf over the awards (see shelf.mjs). Its height comes from its width and the number of trophies; the
   canvas reaches above it, so a cloth pulled up and away has room to go. */
.shelf { position: relative; }
.shelf-canvas { position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; opacity: 0; transition: opacity 0.8s var(--ease); }
.shelf-canvas.is-ready { opacity: 1; }
/* More trophies than three shelves hold: the shelves scroll sideways, and the block takes in the room above them,
   since a box that scrolls one way clips the other */
.shelf.is-wide { overflow-x: auto; overflow-y: hidden; margin-top: calc(-1 * var(--over)); overscroll-behavior-x: contain; }
/* Without WebGL: the trophies stand uncovered on a plain board, the hovered one lit */
.shelf-board { position: absolute; left: 0; right: 0; border-radius: 2px; background: linear-gradient(#6b4429, #2c190e); }
.shelf-flat { position: absolute; width: auto; transform: translateX(-50%); opacity: 0.55; transition: opacity 0.3s var(--ease); }
.shelf-flat.is-lit { opacity: 1; }
.awards { border-top: 1px solid var(--on-dark-line); }
.award { display: grid; grid-template-columns: 100px minmax(0, 1fr) minmax(0, 260px); gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--on-dark-line); }
.award-year { font-family: var(--mono); font-size: 13px; color: var(--on-dark-muted); }
.award-name { font-size: clamp(19px, 1.7vw, 25px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.award-work { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-muted); text-align: right; }
/* The award whose trophy is showing on the shelf lights up, its year in tangerine, and the others step back. The
   text dims rather than the row, whose opacity belongs to the scroll reveal. */
.award > * { transition: opacity 0.35s var(--ease), color 0.35s var(--ease); }
.awards.has-lit .award:not(.is-lit) > * { opacity: 0.32; }
.award.is-lit .award-year { color: var(--tangerine); }


/* What people say: the people behind the recommendations, drawn in the same hand, crossed by scrolling */

.voices { position: relative; height: 100vh; height: 100svh; background: var(--paper); border-top: 1px solid var(--line); }
/* Its heading already clears the nav, so a link to it lines the whole screen up, dots included */
section.voices[id] { scroll-margin-top: 0; }
.voices-view { position: relative; height: 100%; overflow: hidden; touch-action: pan-y; }
.voices-head { position: absolute; top: calc(var(--nav-h) + 26px); left: var(--gutter); z-index: 3; }
.voices-head .section-title { font-size: clamp(40px, 4.6vw, 76px); margin-top: 12px; }
.voices-count { position: absolute; top: calc(var(--nav-h) + 30px); right: var(--gutter); z-index: 3; }
.voices-ground { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(28, 26, 23, 0.55); }
.voices-track { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; }
.voice { position: absolute; top: 0; height: 100%; }
.voice-figure { position: absolute; margin: 0; }
.voice-figure img { display: block; width: 100%; height: 100%; }
.voice-quote { position: absolute; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.voice-quote .label-index { font-family: var(--mono); font-size: 12px; }
.voice-quote blockquote { font-size: clamp(19px, 1.65vw, 26px); font-weight: 400; line-height: 1.34; letter-spacing: -0.015em; text-wrap: pretty; }
.voice-quote figcaption { padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.voice-name { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.voice-quote figcaption .label { font-size: 11px; }
.voice-tick { position: absolute; width: 1px; background: rgba(28, 26, 23, 0.35); }
.voice.is-side { cursor: pointer; }
/* The dots under the ground line, one per person. The one in front is an ink pill that fills with tangerine while its
   person waits to move on; the round button beside them stops and starts that. */
.voices-controls { position: absolute; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 8px; transform: translateY(-50%); pointer-events: none; }
.voices-controls[hidden] { display: none; }
.voices-controls > * { pointer-events: auto; }
.voices-dots { display: flex; align-items: center; }
.voices-dot { position: relative; display: grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 0.45s var(--ease); }
.voices-dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: rgba(28, 26, 23, 0.26); transition: width 0.45s var(--ease), background 0.3s; }
.voices-dot:hover::before { background: rgba(28, 26, 23, 0.55); }
.voices-dot[aria-current="true"] { width: 46px; }
.voices-dot[aria-current="true"]::before { width: 30px; background: var(--ink); }
.voices-dot-fill { position: absolute; left: 8px; top: 50%; width: 30px; height: 7px; margin-top: -3.5px; border-radius: 999px; background: var(--tangerine); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.voices-dot:focus-visible, .voices-play:focus-visible { outline: 2px solid var(--tangerine); outline-offset: 2px; border-radius: 999px; }
.voices-play { position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(28, 26, 23, 0.22); border-radius: 999px; background: none; cursor: pointer; transition: border-color 0.2s; }
.voices-play:hover { border-color: rgba(28, 26, 23, 0.55); }
.voices-play::before { content: ""; box-sizing: border-box; width: 8px; height: 9px; border-left: 2.5px solid var(--ink); border-right: 2.5px solid var(--ink); }
.voices-play.is-stopped::before { width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 4.5px 0 4.5px 7.5px; border-color: transparent transparent transparent var(--ink); }

/* Consulting */

/* The cards here take a warm paper tone rather than near white, and the soft copy runs darker, so long reading
   doesn't glare: body text sits near 7.8:1 instead of 4.8:1 */
.consulting { --card: #f6eee2; --muted: rgba(28, 26, 23, 0.78); --accent-text: #a8421a; background: var(--paper-2); padding: clamp(96px, 11vw, 150px) 0 clamp(72px, 8vw, 110px); }
.consulting .section-title { margin-bottom: clamp(28px, 4vw, 48px); }
.intro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); padding: clamp(14px, 1.4vw, 20px); align-items: center; margin-bottom: 16px; }
/* The portrait is drawn on near-white paper; darken lets that paper take the card's tone, so no pale box shows */
.intro-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius-panel) - 8px); mix-blend-mode: darken; }
.intro-photo figcaption { margin-top: 10px; }
.intro-copy { padding: clamp(8px, 2vw, 30px) clamp(8px, 2vw, 30px) clamp(8px, 2vw, 30px) 0; }
.intro-statement { font-size: clamp(27px, 2.8vw, 44px); font-weight: 500; line-height: 1.08; letter-spacing: -0.04em; margin-bottom: 22px; max-width: 21ch; }
.intro-about p { font-size: 17px; line-height: 1.6; max-width: 58ch; margin-bottom: 12px; color: var(--muted); }

.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.service { position: relative; padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; min-height: 280px; border-radius: var(--radius-card); }
.service-index { position: absolute; top: clamp(22px, 2.4vw, 32px); right: clamp(22px, 2.4vw, 32px); color: var(--accent-text); }
.service h3 { font-size: clamp(25px, 2.3vw, 34px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; max-width: 15ch; margin-bottom: 6px; text-wrap: pretty; }
/* Only the description: the "Selected work" label is a p too and keeps the label size */
.service > p { font-size: 17px; line-height: 1.55; max-width: 50ch; color: var(--muted); }
.service-work { margin-top: auto; }
.service-work ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.service-work a { font-weight: 500; font-size: 15px; border-bottom: 1px solid var(--ink); transition: color 0.2s, border-color 0.2s; }
.service-work a:hover { color: var(--accent-text); border-color: var(--tangerine); }

.method { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 48px); padding: clamp(24px, 3vw, 44px); margin-bottom: 16px; }
.method .sub-title { color: var(--on-dark); }
.steps { counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--on-dark-line); font-size: clamp(17px, 1.4vw, 20px); font-weight: 400; line-height: 1.4; }
.steps li:last-child { border-bottom: 1px solid var(--on-dark-line); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--tangerine); }

.engagements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.engagement { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 10px; border-radius: var(--radius-card); }
.engagement h3 { font-size: 23px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.engagement p:last-child { font-size: 15.5px; line-height: 1.55; color: var(--muted); }

/* Contact and footer */

.contact { background: var(--ink); color: var(--on-dark); padding: clamp(80px, 10vw, 130px) 0 20px; }
.enquiry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); padding: clamp(26px, 3.4vw, 52px); margin-bottom: clamp(64px, 8vw, 110px); background: var(--ink-soft); border-color: var(--on-dark-line); color: var(--on-dark); }
.enquiry-title { font-size: clamp(54px, 6.6vw, 104px); font-weight: 500; line-height: 0.92; letter-spacing: -0.055em; margin: 14px 0 20px; }
.enquiry-text { font-size: 19px; line-height: 1.45; max-width: 30ch; margin-bottom: 22px; color: rgba(236, 231, 221, 0.86); }
.enquiry-mail { font-size: 15px; color: var(--on-dark-muted); }
.enquiry-mail a { color: var(--on-dark); border-bottom: 1px solid var(--tangerine); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.field > span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-muted); }
.field.half { grid-column: span 1; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  background: rgba(236, 231, 221, 0.05);
  color: var(--on-dark);
  border: 1px solid var(--on-dark-line);
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.field select option { color: var(--ink); }
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(236, 231, 221, 0.4); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--tangerine); background: rgba(236, 231, 221, 0.08); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.form-status { font-size: 15px; color: rgba(236, 231, 221, 0.86); }
/* The second step: the message waits while the sender fetches the code from their inbox */
.verify, .sent { display: none; grid-column: 1 / -1; }
.verify { gap: 18px; }
.form[data-step] > :not(.verify, .sent) { display: none; }
.form[data-step="verify"] .verify { display: grid; }
.verify-lead { font-size: 19px; line-height: 1.45; max-width: 36ch; color: rgba(236, 231, 221, 0.86); }
.verify-lead strong { font-weight: 500; color: var(--on-dark); overflow-wrap: anywhere; }
.verify-code input { max-width: 260px; font-family: var(--mono); font-size: 24px; letter-spacing: 0.3em; }
.verify-code input::placeholder { letter-spacing: 0.3em; }
.verify-help { font-size: 14px; line-height: 1.55; color: var(--on-dark-muted); }
.text-btn { color: var(--on-dark); border-bottom: 1px solid var(--tangerine); }
.text-btn:hover { color: var(--tangerine); }
/* Sent: the form gives way to a thank-you by name, so a sent message can't pass unnoticed. The check pops in and draws. */
.form[data-step="sent"] .sent { display: grid; justify-items: start; align-content: start; animation: sent-in 0.6s var(--ease) both; }
/* Taking focus scrolls it into view; the margin keeps the check clear of the nav on a phone */
.sent { scroll-margin-top: calc(var(--nav-h) + 24px); }
.sent:focus { outline: none; }
.sent-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 26px; border-radius: 50%; background: var(--tangerine); color: var(--ink); font-size: 30px; animation: sent-pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s both; }
.sent-mark .icon { stroke-width: 2.4; }
.sent-mark path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: sent-draw 0.4s var(--ease) 0.4s forwards; }
.sent-title { font-size: clamp(44px, 4.8vw, 72px); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; margin-bottom: 18px; }
.sent-text { font-size: 19px; line-height: 1.45; max-width: 34ch; color: rgba(236, 231, 221, 0.86); }
.sent-text strong { font-weight: 500; color: var(--on-dark); overflow-wrap: anywhere; }
.sent-more { margin-top: 28px; font-size: 15px; }
@keyframes sent-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes sent-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes sent-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sent-mark path { stroke-dashoffset: 0; } }

.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-bottom: clamp(48px, 6vw, 80px); }
.fcol-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-muted); padding-bottom: 12px; border-bottom: 1px solid rgba(236, 231, 221, 0.5); }
.fcol-head span:last-child { color: var(--tangerine); }
.fcol li a { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--on-dark-line); font-size: 15px; transition: color 0.2s; }
.fcol li a:hover { color: var(--tangerine); }
.fcol li a span { transition: transform 0.2s var(--ease); }
.fcol li a:hover span { transform: translate(2px, -2px); }
.footbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 0 6px; border-top: 1px solid var(--on-dark-line); }
.footbar-copy { font-size: 14px; flex: 1; color: var(--on-dark-muted); }

/* Project page */

.project { position: fixed; inset: 0; z-index: 60; background: var(--paper); }
.project[hidden] { display: none; }
/* A preview from the admin says so, above everything, so it is never taken for the live site */
.preview-flag { position: fixed; left: 50%; bottom: 16px; z-index: 95; translate: -50% 0; display: inline-flex; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; border-radius: 999px; background: var(--ink); color: var(--on-dark); font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55); }
.preview-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tangerine); }
.preview-flag button { padding: 6px 12px; border-radius: 999px; background: rgba(243, 234, 220, 0.14); letter-spacing: inherit; text-transform: inherit; }
.preview-flag button:hover { background: rgba(243, 234, 220, 0.24); }
.preview-flag button:focus-visible { outline: 2px solid var(--tangerine); outline-offset: 2px; }
.project-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) 60px; }
.project-bar { position: sticky; top: 14px; z-index: 2; display: flex; justify-content: space-between; margin: 14px 0 0; }
/* A project reads as one narrow column, as a Notion page does: header, the hero whole at its own shape, the details,
   then the text. The bar with the count and Close stays at the window's edges. */
.project-scroll > :not(.project-bar) { max-width: 800px; margin-inline: auto; }
.project-head { --t-muted: var(--muted); --t-line: var(--line); margin: 16px 0; padding: clamp(22px, 3.2vw, 44px) clamp(22px, 3.4vw, 48px) clamp(22px, 2.6vw, 34px); border: 1px solid var(--ink); border-radius: var(--radius-panel); background: var(--card); }
.project-head.on-dark { color: var(--on-dark); --t-muted: var(--on-dark-muted); --t-line: var(--on-dark-line); }
.project-head .label { color: var(--t-muted); }
/* A part's link up to its parent, above its category */
.project-parent { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.project-parent:hover { color: inherit; }
.project-parent[hidden] { display: none; }
.project-title { text-wrap: balance; font-size: clamp(40px, 5vw, 68px); font-weight: 500; line-height: 0.92; letter-spacing: -0.05em; margin: 12px 0 16px; }
.project-summary { font-size: clamp(18px, 1.6vw, 23px); font-weight: 400; line-height: 1.34; letter-spacing: -0.012em; max-width: 46ch; margin-bottom: 16px; }
/* The hero shows whole, never cropped: the column's width at its own shape, and a tall picture or a portrait video
   no taller than most of the screen, centred on ink. */
.project-hero { margin-bottom: clamp(20px, 2.6vw, 28px); }
.project-hero > figure { overflow: hidden; border-radius: var(--radius-panel); background: var(--ink); border: 1px solid var(--ink); }
.project-hero > figure:not(.player) { display: grid; place-items: center; }
.project-hero > figure:not(.player) img { display: block; width: auto; max-width: 100%; height: auto; max-height: 62vh; margin-inline: auto; }
.project-hero > figure:not(.player) img.wide { width: min(100%, calc(62vh * var(--ratio))); }
.player.is-loop .player-frame { object-fit: cover; }
.project-hero.contain > figure img { object-fit: contain; }
/* The lead video keeps its own shape and fits the screen height, so nothing is cropped */
.project-hero > .player { width: min(100%, calc(62vh * var(--ratio))); margin-inline: auto; }
/* A parent project's parts, as the grid's own tiles, all one size */
.project-parts { margin-bottom: clamp(36px, 5vw, 64px); }
.project-parts > .label { margin-bottom: 14px; }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.parts .tile { aspect-ratio: 16 / 10; }
.project-films { margin-bottom: clamp(36px, 5vw, 64px); }
.project-films > .label { margin-bottom: 14px; }
.films { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px 16px; align-items: start; }
.film .player { border: 1px solid var(--ink); border-radius: var(--radius-card); max-height: 70vh; width: min(100%, calc(70vh * var(--ratio))); }
/* A video can take a row of its own; otherwise it shares one with the videos beside it */
.film.is-full { grid-column: 1 / -1; }
.film.is-full > .player { margin-inline: auto; }
/* A picture among the body's videos: no taller than a player, and the whole picture, which opens in the viewer */
.film .still { width: min(100%, calc(70vh * var(--ratio, 100))); border: 1px solid var(--ink); border-radius: var(--radius-card); overflow: hidden; }
.film.is-full > .still { margin-inline: auto; }
.film .still img { display: block; width: 100%; height: auto; }
/* A looping video file: the clip at its own shape, with no player and no sound; a click pauses it */
.clip { width: min(100%, calc(80vh * var(--ratio))); margin: 0 auto; overflow: hidden; border-radius: var(--radius-card); background: var(--paper-2); cursor: pointer; }
.clip:focus-visible { outline: 2px solid var(--tangerine); outline-offset: 3px; }
.clip-video { display: block; width: 100%; height: auto; aspect-ratio: auto var(--ratio); }

/* Players: a still, a play button and a title until clicked, then the host's player in the same frame */
.player { position: relative; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; background: var(--ink); }
.player-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.player:hover .player-poster { transform: scale(1.02); }
.player-play { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 14px; padding: clamp(14px, 2.2vw, 30px); color: #fff; text-align: left; background: linear-gradient(to top, rgba(20, 18, 16, 0.62), rgba(20, 18, 16, 0) 52%); }
/* Liquid glass: clear rather than frosted. The still behind shows through, lightly softened and brightened;
   a thin rim catches the light at the top left and bottom right; a brighter band just inside the edge gives
   the lens its thickness; a small glint sits high on the left. It gives a little on hover and press.
   The before-and-after handle and its pause button are the same glass. */
.player-icon, .compare-knob, .compare-pause {
  position: relative;
  isolation: isolate;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(52px, 4.8vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.14) 74%, rgba(255, 255, 255, 0.32) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08) 60%, rgba(255, 255, 255, 0.14));
  -webkit-backdrop-filter: blur(4px) saturate(125%) brightness(1.14);
  backdrop-filter: blur(4px) saturate(125%) brightness(1.14);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.75),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.35),
    inset 0 -10px 16px -10px rgba(255, 255, 255, 0.45),
    0 12px 30px -10px rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s var(--ease);
}
/* The rim: a thin ring, brightest where the light hits */
.player-icon::after, .compare-knob::after, .compare-pause::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.22) 30%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.28) 78%, rgba(255, 255, 255, 0.8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* The glint */
.player-icon::before, .compare-knob::before, .compare-pause::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 20%;
  width: 30%;
  height: 16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: rotate(-35deg);
  pointer-events: none;
}
.player-icon .icon { width: 44%; height: 44%; stroke-width: 1.6; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }
.player-play:hover .player-icon, .player-play:focus-visible .player-icon { transform: scale(1.08); background-color: rgba(255, 255, 255, 0.06); }
.player-play:active .player-icon { transform: scale(0.95); transition-duration: 0.15s; }
.player-label { display: grid; gap: 3px; min-width: 0; padding-bottom: 2px; }
.player-label strong { font-size: clamp(16px, 1.5vw, 22px); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.player-label span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.82; }
.player-label span:empty { display: none; }
.film .player-label strong { font-size: 16px; }
/* On the hero the play button sits in the middle, so it is in view above the fold */
.project-hero .player-play { flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: radial-gradient(ellipse at center, rgba(20, 18, 16, 0.38), rgba(20, 18, 16, 0.08) 62%); }
.project-hero .player-icon { width: clamp(68px, 6.4vw, 100px); }
.project-hero .player-label { justify-items: center; }
.player-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player.is-playing .player-play, .player.is-playing .player-poster { display: none; }
.film-caption { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.film-caption a { flex: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding-top: 2px; transition: color 0.2s; }
.film-caption a:hover { color: var(--ink); }
.project-hero .film-caption { width: min(100%, calc(62vh * var(--ratio))); margin-inline: auto; }
.project-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 36px); margin-bottom: clamp(36px, 5vw, 64px); }
/* The text is Markdown: paragraphs, headings, lists and quotes. Only the text's own elements are styled here, so
   the captions inside blocks keep their small type. */
.project-text > p { font-size: 19px; line-height: 1.6; max-width: 60ch; margin-bottom: 16px; }
.project-text > h3 { font-size: clamp(22px, 1.9vw, 27px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; max-width: 32ch; margin: 36px 0 12px; }
.project-text > h4 { font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 30px 0 10px; }
.project-text > :first-child { margin-top: 0; }
.project-text > ul, .project-text > ol { max-width: 60ch; margin: 0 0 18px; padding-left: 1.3em; font-size: 19px; line-height: 1.6; }
.project-text > ul { list-style: disc; }
.project-text > ol { list-style: decimal; }
.project-text > ul li, .project-text > ol li { padding-left: 0.25em; margin-bottom: 6px; }
.project-text > ul li::marker, .project-text > ol li::marker { color: var(--tangerine); }
.project-text > blockquote { max-width: 56ch; margin: 28px 0; padding-left: 20px; border-left: 2px solid var(--tangerine); }
.project-text > blockquote p { font-size: 22px; line-height: 1.45; letter-spacing: -0.012em; }
.project-text > :is(p, ul, ol, blockquote, h3, h4) a { text-decoration: underline; text-decoration-color: var(--tangerine); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color 0.2s; }
.project-text > :is(p, ul, ol, blockquote, h3, h4) a:hover { color: #c24c14; }
.project-text > :is(p, ul, ol, blockquote, h3, h4) code { font-family: var(--mono); font-size: 0.84em; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); }
.project-text > :is(p, ul, ol, blockquote, h3, h4) strong { font-weight: 600; }
.project-text .project-link { margin-top: 8px; }
/* Coming soon: the link button's ink pill, not a link, with a slow tangerine status dot and an optional note */
.project-soon { height: auto; min-height: 48px; padding-block: 11px; border-radius: 24px; white-space: normal; cursor: default; }
.btn-ink.project-soon:hover { background: var(--ink); }
.project-soon span, .project-soon:hover span { transform: none; }
.soon-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tangerine); }
.soon-dot::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid var(--tangerine); border-radius: 50%; opacity: 0; animation: soon-ping 2.6s var(--ease) infinite; }
@keyframes soon-ping { 0% { transform: scale(0.5); opacity: 0.9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.soon-note { padding-left: 12px; border-left: 1px solid var(--on-dark-line); color: var(--on-dark-muted); font-weight: 400; }
@media (max-width: 560px) {
  .project-soon { flex-wrap: wrap; row-gap: 2px; justify-content: flex-start; }
  .soon-note { flex-basis: 100%; padding-left: 18px; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .soon-dot::after { animation: none; } }

/* Blocks between the paragraphs of a project */
.project-text .block { margin: 30px 0 34px; }
.project-text .block:first-child { margin-top: 4px; }
.project-text .block:last-child { margin-bottom: 0; }
.project-text .block .film-caption { margin-top: 10px; }

/* Code, on ink, coloured from the site's own palette */
.code { overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius-card); background: var(--ink); color: var(--on-dark); }
.code-bar { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--on-dark-line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--on-dark-muted); }
.code-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; letter-spacing: 0; color: var(--on-dark); }
.code-lang { text-transform: uppercase; }
.code-copy { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; font: inherit; text-transform: uppercase; color: inherit; transition: background 0.2s, color 0.2s; }
.code-copy:hover { color: #fff; background: rgba(243, 234, 220, 0.09); }
.code-copy .ic { display: inline-flex; }
.code-copy .icon { width: 14px; height: 14px; stroke-width: 1.8; }
.code pre { margin: 0; padding: 18px 20px 22px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.7; tab-size: 2; scrollbar-color: rgba(243, 234, 220, 0.25) transparent; }
.code pre:focus-visible { outline: 2px solid var(--tangerine); outline-offset: -3px; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.code .hljs-comment, .code .hljs-quote { color: rgba(243, 234, 220, 0.42); font-style: italic; }
.code .hljs-keyword, .code .hljs-selector-tag, .code .hljs-literal, .code .hljs-doctag, .code .hljs-meta .hljs-keyword { color: #ff9a66; }
.code .hljs-string, .code .hljs-regexp, .code .hljs-template-string, .code .hljs-char.escape_ { color: #a8bdf5; }
.code .hljs-number, .code .hljs-symbol, .code .hljs-bullet { color: #f3c77a; }
.code .hljs-title, .code .hljs-section, .code .hljs-name, .code .hljs-selector-id, .code .hljs-selector-class { color: #fff; }
.code .hljs-type, .code .hljs-built_in, .code .hljs-title.class_ { color: #ffc4a3; }
.code .hljs-attr, .code .hljs-attribute, .code .hljs-property, .code .hljs-variable, .code .hljs-params, .code .hljs-template-variable { color: #e3d6c1; }
.code .hljs-meta { color: rgba(243, 234, 220, 0.6); }
.code .hljs-addition { color: #a6d7b8; }
.code .hljs-deletion { color: #ff9b8f; }
.code .hljs-emphasis { font-style: italic; }
.code .hljs-strong { font-weight: 600; }

/* Embeds */
.embed-frame { position: relative; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius-card); background: var(--paper-2); }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed.is-strip .embed-frame { aspect-ratio: auto; border: 0; border-radius: 12px; background: transparent; }
/* Devices drawn in CSS around a picture, a clip, a video or an embed: iPhone, iPhone with a home button, iPad,
   MacBook and a browser window. Each is a size container, so its bezels, corners and buttons are measured in its
   own width (cqw) and it scales as one piece. --shape is the whole device's width over height, which keeps it from
   growing taller than --tall. The finish is the site's ink rather than a real metal. */
.device { --tall: 80vh; --metal: #1c1a17; --edge: #46413a; --deep: #121110; position: relative; container-type: inline-size; width: min(100%, var(--max), calc(var(--tall) * var(--shape))); margin-inline: auto; }
.device-iphone { --max: 300px; --shape: 0.483; }
.device-iphone-home { --max: 300px; --shape: 0.515; }
.device-ipad { --max: 460px; --shape: 0.715; }
.device-ipad-landscape { --max: 680px; --shape: 1.4; }
.device-macbook { --max: 760px; --shape: 1.65; }
.device-browser { width: min(100%, calc((var(--tall) - 38px) * var(--screen))); }
.device-body, .device-lid { position: relative; background: var(--metal); box-shadow: inset 0 0 0 0.45cqw var(--edge), inset 0 0 0 0.9cqw var(--deep), 0 40px 70px -40px rgba(28, 26, 23, 0.6), 0 14px 26px -18px rgba(28, 26, 23, 0.4); }
.device-screen { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: var(--screen); background: #000; }
.device-screen > img, .device-screen > video, .device-screen > iframe, .device-screen > .zoom, .device-screen > .player { position: absolute; inset: 0; width: 100%; height: 100%; }
.device-screen > img, .device-screen > video, .device-screen > .zoom img, .device-screen > .zoom video { display: block; width: 100%; height: 100%; object-fit: cover; }
.device-screen > iframe { border: 0; background: var(--paper); }
.device-screen > .player { aspect-ratio: auto; max-height: none; border: 0; border-radius: 0; }
.device-screen .player-icon { width: clamp(44px, 20cqw, 76px); }
.device-screen .player-label strong { font-size: clamp(14px, 5.2cqw, 20px); }
/* Side buttons on phones */
.device-iphone .device-body::before, .device-iphone-home .device-body::before, .device-iphone .device-body::after, .device-iphone-home .device-body::after { content: ""; position: absolute; width: 1.1cqw; border-radius: 0.6cqw; background: #2b2723; }
.device-iphone .device-body::before, .device-iphone-home .device-body::before { left: -0.9cqw; top: 19%; height: 7%; box-shadow: 0 11cqw 0 #2b2723; }
.device-iphone .device-body::after, .device-iphone-home .device-body::after { right: -0.9cqw; top: 25%; height: 12%; }
/* iPhone: thin even bezel, the Dynamic Island */
.device-iphone .device-body { padding: 4cqw; border-radius: 16cqw; }
.device-iphone .device-screen { border-radius: 12.4cqw; }
.device-island { position: absolute; z-index: 3; top: 6.6cqw; left: 50%; width: 29cqw; height: 8.4cqw; translate: -50% 0; border-radius: 999px; background: #000; pointer-events: none; }
/* iPhone with a home button: deep top and bottom bezels, speaker and home button */
.device-iphone-home .device-body { padding: 18cqw 5.5cqw; border-radius: 15cqw; }
.device-iphone-home .device-screen { border-radius: 0.8cqw; }
.device-speaker { position: absolute; top: 8.1cqw; left: 50%; width: 17cqw; height: 1.8cqw; translate: -50% 0; border-radius: 999px; background: #0c0b0a; box-shadow: inset 0 0.3cqw 0.4cqw #000; }
.device-speaker::before { content: ""; position: absolute; left: -7cqw; top: 50%; width: 2.4cqw; height: 2.4cqw; translate: 0 -50%; border-radius: 50%; background: #0c0b0a; box-shadow: inset 0 0 0 0.45cqw #26221f; }
.device-home { position: absolute; bottom: 3cqw; left: 50%; width: 12cqw; height: 12cqw; translate: -50% 0; border-radius: 50%; box-shadow: inset 0 0 0 0.7cqw #3a3631; }
/* iPad, upright and landscape */
.device-ipad .device-body { padding: 4.4cqw; border-radius: 6.5cqw; }
.device-ipad .device-screen { border-radius: 2.6cqw; }
.device-ipad-landscape .device-body { padding: 3.1cqw; border-radius: 4.6cqw; }
.device-ipad-landscape .device-screen { border-radius: 1.8cqw; }
.device-lens { position: absolute; z-index: 3; top: 1.75cqw; left: 50%; width: 1.1cqw; height: 1.1cqw; translate: -50% 0; border-radius: 50%; background: #0c0b0a; box-shadow: inset 0 0 0 0.25cqw #2c2825; }
.device-ipad-landscape .device-lens { top: 1.2cqw; width: 0.8cqw; height: 0.8cqw; }
/* MacBook: the lid, and the base with its thumb scoop */
.device-lid { margin: 0 6.5%; padding: 2.2cqw 2.2cqw 3cqw; border-radius: 2.8cqw 2.8cqw 0 0; box-shadow: inset 0 0 0 0.35cqw var(--edge), inset 0 0 0 0.6cqw var(--deep); }
.device-macbook .device-screen { border-radius: 0.5cqw; }
.device-macbook .device-lens { top: 0.75cqw; width: 0.7cqw; height: 0.7cqw; }
.device-base { position: relative; height: 2.4cqw; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#4b463f, var(--metal) 65%); box-shadow: 0 34px 50px -30px rgba(28, 26, 23, 0.55); }
.device-scoop { position: absolute; top: 0; left: 50%; width: 15cqw; height: 1cqw; translate: -50% 0; border-radius: 0 0 1.2cqw 1.2cqw; background: #121110; }
/* Browser window, in the site's own paper and ink */
.device-browser .device-body { overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius-card); background: var(--paper-2); box-shadow: 0 30px 60px -40px rgba(28, 26, 23, 0.45); }
.device-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.device-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(28, 26, 23, 0.18); }
.device-address { flex: 1; max-width: 46%; height: 20px; margin-inline: auto; translate: -20px 0; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.device-browser .device-screen { background: var(--paper); }
/* In the text: centred, with the caption under it */
.project-text .device-block { display: grid; justify-items: center; gap: 12px; }
.device-block .film-caption { width: min(100%, 420px); justify-content: center; text-align: center; }
/* As the hero: the device on ink, over a blurred copy of the hero image */
.project-hero > .device-stage { position: relative; overflow: hidden; display: grid; place-items: center; padding: clamp(16px, 2.2vw, 28px) 16px; border: 1px solid var(--ink); border-radius: var(--radius-panel); background: var(--ink); }
.device-stage > .device { --tall: clamp(260px, 56vh, 600px); --edge: #77706a; z-index: 1; filter: drop-shadow(0 0 1px rgba(243, 234, 220, 0.35)); }
.device-backdrop { position: absolute; inset: -140px; width: calc(100% + 280px); max-width: none; height: calc(100% + 280px); object-fit: cover; filter: blur(34px) brightness(0.78) saturate(1.15); }

/* Before and after */
.compare-stage { position: relative; isolation: isolate; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius-card); background: var(--ink); cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.compare-before, .compare-after { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-after { clip-path: inset(0 0 0 var(--pos)); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 0; pointer-events: none; }
.compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.28); }
.compare-knob { position: absolute; top: 50%; left: 0; width: clamp(42px, 3.6vw, 52px); translate: -50% -50%; }
.compare-knob .icon { width: 46%; height: 46%; stroke-width: 1.8; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }
.compare-stage:hover .compare-knob, .compare-stage.is-dragging .compare-knob { transform: scale(1.08); }
.compare-stage.is-dragging .compare-knob { transform: scale(0.96); transition-duration: 0.15s; }
.compare-range { position: absolute; left: var(--pos); top: 50%; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.compare-range:focus-visible ~ .compare-handle .compare-knob { outline: 2px solid var(--tangerine); outline-offset: 4px; }
.compare-label { position: absolute; top: 12px; z-index: 1; padding: 4px 9px; border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; pointer-events: none; background: linear-gradient(180deg, rgba(40, 37, 33, 0.5), rgba(20, 18, 16, 0.6)); -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: opacity 0.3s var(--ease); }
.compare-label.is-before { left: 12px; }
.compare-label.is-after { right: 12px; }
.compare-stage.near-left .compare-label.is-before, .compare-stage.near-right .compare-label.is-after { opacity: 0; }
.compare-pause { position: absolute; left: 12px; bottom: 12px; z-index: 3; width: 36px; cursor: pointer; }
.compare-pause .icon { width: 38%; height: 38%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.compare-pause:hover { transform: scale(1.08); }
/* The details sit above the text as properties: two to a row, a hairline under each, no card around them */
.project-facts { order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.project-facts div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.project-facts .is-notes { grid-column: 1 / -1; }
.project-facts .is-notes ul { display: grid; gap: 4px; }
.project-facts .is-notes li { font-weight: 400; }
.project-facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.project-facts dd { font-size: 15px; font-weight: 500; line-height: 1.4; }
.project-gallery { columns: 3 300px; column-gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
.project-gallery figure { break-inside: avoid; margin-bottom: 16px; border: 1px solid var(--ink); border-radius: var(--radius-card); overflow: hidden; }
.project-gallery img, .project-gallery video { display: block; width: 100%; height: auto; }
/* Stills open in the image viewer */
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom img, .zoom video { transition: transform 0.9s var(--ease), opacity 0.3s; }
.zoom:hover img, .zoom:hover video { transform: scale(1.015); }
/* Pictures on a drawn device's screen stay still on hover, like a real display; a click still opens them larger */
.device-screen .zoom:hover img, .device-screen .zoom:hover video { transform: none; }
.zoom:focus-visible { outline: 2px solid var(--tangerine); outline-offset: -4px; }

.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 14px var(--gutter) 18px; background: rgba(20, 18, 16, 0.97); color: var(--on-dark); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[hidden] { display: none; }
/* Swipes in the viewer are the page's own: sideways between pictures, down to close */
.lightbox { touch-action: none; overflow: hidden; }
.lightbox-actions { display: flex; gap: 8px; }
.lightbox-zoom .ic { display: inline-flex; }
.lightbox-zoom .icon { width: 15px; height: 15px; stroke-width: 1.8; }
/* The picture says it can be zoomed, then grabbed; while zoomed, the arrows and caption step aside */
.lightbox-stage img { cursor: zoom-in; will-change: transform; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.lightbox.is-zoomed .lightbox-stage img { cursor: grab; }
.lightbox.is-panning .lightbox-stage img { cursor: grabbing; }
.lightbox-nav, .lightbox-caption { transition: opacity 0.25s var(--ease); }
.lightbox.is-zoomed .lightbox-nav, .lightbox.is-zoomed .lightbox-caption { opacity: 0; pointer-events: none; }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
/* The picture fits the space between the bar and the caption, whole, and stays clear of the arrows on either side.
   The stage's one grid cell has a definite size, so the picture's 100% limits resolve against it. */
.lightbox-stage { --nav-room: calc(52px + 20px); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; margin: 12px var(--nav-room); }
.lightbox-stage img, .lightbox-stage video { display: block; max-width: min(100%, 1800px); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); }
.lightbox-caption { text-align: center; font-size: 14px; line-height: 1.45; color: var(--on-dark-muted); max-width: 70ch; margin: 0 auto; min-height: 1.45em; }
.lightbox-nav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); transition: transform 0.25s var(--ease), background 0.2s; }
.lightbox-nav:hover { background: var(--tangerine); transform: scale(1.06); }
.lightbox-nav.prev { left: var(--gutter); }
.lightbox-nav.next { right: var(--gutter); }
.lightbox-nav[hidden] { display: none; }
.project-next { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.next-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; text-align: left; border: 1px solid var(--ink); border-radius: var(--radius-card); background: var(--card); transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.next-card:hover { background: var(--ink); color: var(--on-dark); }
.next-card .label { display: inline-flex; align-items: center; gap: 8px; }
.next-card .label .icon { width: 1.4em; height: 1.4em; stroke-width: 1.8; }
.next-card:hover .label { color: var(--on-dark-muted); }
.next-card strong { font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.next-card.right { text-align: right; align-items: flex-end; }

/* Intro: what it animates in waits unseen from the first paint, rather than showing, vanishing and coming back once the
   drawings and fonts have loaded. Hidden keeps its layout, so the journey can still measure it. app.js adds is-ready. */

.js:not(.is-ready) :is(.nav, .opening > *, [data-panels], [data-callouts], .overlay, .rail) { visibility: hidden; }

/* Reveal */

.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.js [data-split] { visibility: hidden; }

/* Narrow screens */

@media (max-width: 1100px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-places { display: none; }
}
@media (max-width: 980px) {
  .intro, .method, .enquiry { grid-template-columns: 1fr; }
  .intro-copy { padding: 4px 6px 10px; }
  /* The portrait keeps its own shape, whole, rather than a landscape crop of it */
  .intro-photo img { width: min(100%, 440px); margin-inline: auto; }
  .engagements { grid-template-columns: 1fr; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .award { grid-template-columns: 80px minmax(0, 1fr); }
  .award-work { grid-column: 2; text-align: left; }
}
@media (max-width: 760px) {
  :root { --nav-h: 66px; }
  .nav { height: 50px; padding-left: 14px; }
  .nav-link { display: none; }
  .hud { top: calc(var(--nav-h) + 16px); }
  .place { margin-left: -10px; }
  .hud.is-travelling .place { padding: 9px 10px 8px; }
  .place-orgs { font-size: 12.5px; }
  .opening-line { max-width: 28ch; }
  .place-roles li { font-size: 13px; gap: 10px; }
  .journey-hint { display: none; }
  .rail-stop { font-size: 10px; }
  .place-roles .role { display: none; }
  .place-roles .same-org strong { display: none; }
  .place-roles .same-org .role { display: inline; }
  .place-roles .same-org .role::before { content: none; }
  .place-roles li { padding: 3px 0; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall li { min-height: 88px; padding: 14px; }
  .wall img { max-height: 40px; }
  .services { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .field.half { grid-column: 1 / -1; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .project-next { grid-template-columns: 1fr; }
  .project-facts { grid-template-columns: minmax(0, 1fr); }
  .lightbox { padding-bottom: 12px; }
  /* On a phone the arrows sit in the caption row, so the picture can use the full width */
  .lightbox-stage { --nav-room: 0px; }
  .lightbox-nav { top: auto; bottom: 12px; margin-top: 0; width: 44px; height: 44px; }
  .lightbox-caption { display: grid; place-items: center; min-height: 44px; padding: 0 52px; }
  .next-card.right { text-align: left; align-items: flex-start; }
  /* Two columns of tiles; a small one shows only its title */
  .mosaic { --cols: 2; }
  .tile:not(.is-wide):not(.is-tall):not(.is-large) .tile-meta { display: none; }
  .tile-cap { padding-top: 36px; }
  .work-switch button { padding: 0 12px; gap: 6px; }
  .work-switch .n { display: none; }
  .work-switch .long { display: none; }
  .work-switch .short { display: inline; }
  .voice-quote blockquote { font-size: 16px; line-height: 1.4; }
  .voice-quote { gap: 12px; }
  .voice-name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* The disco ball's hint in the footer: the code as small keys, lit as it is typed or tapped */
.konami-hint { display: inline-flex; gap: 3px; padding: 4px; margin: -4px; border-radius: 8px; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.konami-hint kbd { display: inline-grid; place-items: center; min-width: 19px; height: 20px; padding: 0 4px; font-family: var(--mono); font-size: 10.5px; line-height: 1; color: var(--on-dark-muted); border: 1px solid var(--on-dark-line); border-radius: 5px; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.konami-hint:hover kbd { border-color: rgba(243, 234, 220, 0.4); }
.konami-hint kbd.is-lit { color: #1c1a17; background: var(--tangerine); border-color: var(--tangerine); }

/* The disco ball (see disco.mjs): the lights go down, beams sweep up from both sides, and the ball hangs at the top
   of the window while the page scrolls under it. The site underneath can't be clicked while it is on: the dim takes
   every click, and only the ball, the player and the close button answer. It sits over the nav and project pages,
   under the image viewer. */

/* The wire is as long as it takes to hang the ball's centre just above the middle of the window */
.disco { --size: 180px; --wire: max(90px, calc(42vh - var(--size) / 2)); --wire: max(90px, calc(42svh - var(--size) / 2)); }
.disco-dim, .disco-beams { position: fixed; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.disco.is-on :is(.disco-dim, .disco-beams) { opacity: 1; }
.disco.is-leaving :is(.disco-dim, .disco-beams) { transition-duration: 0.8s; }
.disco.is-leaving .disco-dim { pointer-events: none; }
.disco-dim { inset: 0; z-index: 66; pointer-events: auto; background: radial-gradient(120% 90% at 50% 14%, rgba(14, 9, 30, 0.62), rgba(5, 3, 14, 0.88)); }

/* Each beam is a narrow cone from a corner, fading along its length, swinging on its own time */
.disco-beams { bottom: -6vh; z-index: 67; width: 0; height: 0; }
.disco-beams-left { left: -4vw; }
.disco-beams-right { right: -4vw; }
.disco-beams i {
  position: absolute;
  bottom: 0;
  left: -28vh;
  width: 56vh;
  height: 150vh;
  transform-origin: 50% 100%;
  rotate: var(--from);
  background: conic-gradient(from -5deg at 50% 100%, rgba(var(--c), 0) 0deg, rgba(var(--c), 0.26) 3deg, rgba(var(--c), 0.26) 7deg, rgba(var(--c), 0) 10deg, rgba(var(--c), 0) 360deg);
  -webkit-mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0.55) 45%, transparent 92%);
  mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0.55) 45%, transparent 92%);
  animation: disco-beam var(--d) ease-in-out infinite alternate;
}
@keyframes disco-beam { to { rotate: var(--to); } }

/* The ball drops in on its wire. disco.mjs swings it from the top of the wire and stretches the wire when it is
   pulled, so the ball takes the pointer, and a drag on it never scrolls the page. */
.disco-rig { position: fixed; top: 0; left: 50%; z-index: 68; width: var(--size); margin-left: calc(var(--size) / -2); pointer-events: none; animation: disco-drop 1.7s cubic-bezier(0.22, 1.3, 0.36, 1) both; }
.disco.is-leaving .disco-rig { animation: disco-rise 0.9s cubic-bezier(0.55, 0, 0.8, 0.2) both; }
@keyframes disco-drop { from { translate: 0 -120%; } to { translate: 0 0; } }
@keyframes disco-rise { from { translate: 0 0; } to { translate: 0 -120%; } }
.disco-swing { transform-origin: 50% 0; }
.disco-wire { display: block; width: 1px; height: calc(var(--wire) + var(--stretch, 0px) + var(--size) * 0.1); margin: 0 auto calc(var(--size) * -0.1); background: linear-gradient(rgba(243, 234, 220, 0), rgba(243, 234, 220, 0.75)); }
.disco-ball { position: relative; width: var(--size); height: var(--size); pointer-events: auto; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.disco-ball.is-held { cursor: grabbing; }
.disco-ball canvas { display: block; width: 100%; height: 100%; }
/* Without WebGL: a drawn ball, its tiles a grid over a lit sphere */
.disco-ball.is-drawn canvas { display: none; }
.disco-ball.is-drawn::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: repeating-linear-gradient(0deg, rgba(20, 18, 24, 0.7) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(20, 18, 24, 0.7) 0 1px, transparent 1px 9px), radial-gradient(circle at 36% 30%, #fff 0 3%, #d9d6dc 12%, #8d8a94 42%, #2a2830 74%, #121016); }
/* The close button waits in the bottom right corner, clear of the ball however it swings */
.disco-close {
  position: fixed;
  z-index: 69;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  pointer-events: auto;
  color: #f3eadc;
  background: rgba(14, 10, 26, 0.72);
  border: 1px solid rgba(243, 234, 220, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.5s ease, background 0.2s, border-color 0.2s;
}
.disco.is-on .disco-close { opacity: 1; transition-delay: 1.2s, 0s, 0s; }
.disco.is-leaving .disco-close { transition-duration: 0.3s; }
.disco-close:hover { background: rgba(40, 32, 60, 0.85); border-color: rgba(243, 234, 220, 0.7); }
.disco-close .icon { width: 16px; height: 16px; stroke-width: 2; }
.disco-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The capsule player: centred at the bottom, clear of the close button in the corner */
.disco-player {
  position: fixed;
  z-index: 69;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100vw - 140px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  color: #f3eadc;
  background: rgba(14, 10, 26, 0.74);
  border: 1px solid rgba(243, 234, 220, 0.18);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(243, 234, 220, 0.08);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  opacity: 0;
  translate: -50% 10px;
  transition: opacity 0.5s ease, translate 0.5s var(--ease);
}
.disco.is-on .disco-player { opacity: 1; translate: -50% 0; transition-delay: 1.2s; }
.disco.is-leaving .disco-player { transition-duration: 0.3s; }
.disco-play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #14101f; background: #f3eadc; transition: background 0.2s, transform 0.2s var(--ease); }
.disco-play:hover { background: #fff; transform: scale(1.05); }
.disco-play .icon { width: 16px; height: 16px; }
.disco-time { flex: none; min-width: 3.4ch; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: rgba(243, 234, 220, 0.62); font-variant-numeric: tabular-nums; text-align: center; }
.disco-volume { flex: none; display: flex; align-items: center; gap: 6px; }
.disco-mute { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: rgba(243, 234, 220, 0.82); transition: color 0.2s, background 0.2s; }
.disco-mute:hover { color: #fff; background: rgba(243, 234, 220, 0.08); }
.disco-mute .icon { width: 18px; height: 18px; stroke-width: 1.7; }
.disco-level { width: 72px; }
/* Both sliders: a thin track, filled in tangerine to the handle */
.disco-player input[type="range"] { --p: 0%; -webkit-appearance: none; appearance: none; height: 16px; margin: 0; background: none; cursor: pointer; }
.disco-seek { flex: 1; min-width: 0; }
.disco-player input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, #ff7d3f var(--p), rgba(243, 234, 220, 0.2) var(--p)); }
.disco-player input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #f3eadc; box-shadow: 0 0 0 3px rgba(255, 125, 63, 0.28); transition: transform 0.15s; }
.disco-player input[type="range"]:hover::-webkit-slider-thumb, .disco-player input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); }
.disco-player input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(243, 234, 220, 0.2); }
.disco-player input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: #ff7d3f; }
.disco-player input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #f3eadc; box-shadow: 0 0 0 3px rgba(255, 125, 63, 0.28); }
.disco-player input[type="range"]:focus-visible { outline: none; }
.disco-player input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #ff7d3f; }
.disco-player input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #ff7d3f; }

/* Karaoke under the ball: the line being sung, big and bold, with the next one small beneath it. Each word fills white
   hot from the left as it is sung and pops as it lands; ad-libs stamp in as a raised tangerine echo; the Konami code
   lines are keys, lit one by one as in the footer's hint. */
.disco-lyrics { position: fixed; z-index: 67; left: 50%; top: calc(var(--wire) + var(--size) + 36px); width: min(980px, calc(100vw - 32px)); translate: -50% 0; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.disco.is-on .disco-lyrics { opacity: 1; transition-delay: 1.3s; }
/* Every word that lands gives the whole block a kick, like a beat */
.disco-lyrics.is-beat { animation: lyric-beat 0.2s ease-out; }
@keyframes lyric-beat { from { scale: 1.035; } to { scale: 1; } }
.disco.is-leaving .disco-lyrics { transition-duration: 0.3s; }
.disco-line { margin: 0; text-wrap: balance; }
.disco-line.is-now { font-size: clamp(26px, 3.9vw, 54px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-transform: uppercase; transform: skewX(-6deg); color: rgba(243, 234, 220, 0.3); text-shadow: 0 2px 16px rgba(4, 3, 12, 0.55); animation: line-in 0.36s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
/* The code lines stand straight, the same keys as the footer's hint */
.disco-line.is-now.is-chant { transform: none; }
.disco-line.is-leaving { position: absolute; left: 0; right: 0; top: 0; animation: line-out 0.3s ease-in both; }
.disco-line.is-next { margin-top: 0.7em; font-size: clamp(14px, 1.5vw, 20px); font-weight: 500; letter-spacing: -0.01em; color: rgba(243, 234, 220, 0.5); text-shadow: 0 1px 10px rgba(4, 3, 12, 0.85); }
@keyframes line-in { from { opacity: 0; translate: 0 0.45em; scale: 0.94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes line-out { to { opacity: 0; translate: 0 -0.5em; scale: 0.96; } }
.disco-line .kw { display: inline-block; transition: color 0.12s linear; }
.disco-line.is-now .kw.is-sung { color: #fff7ec; text-shadow: 0 0 22px rgba(255, 125, 63, 0.55), 0 2px 16px rgba(4, 3, 12, 0.5); }
.disco-line.is-now .kw.is-active { color: transparent; background: linear-gradient(90deg, #fff 0%, #ffd0a3 calc(var(--p, 0%) - 6%), #ff8a52 var(--p, 0%), rgba(243, 234, 220, 0.3) var(--p, 0%)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 16px rgba(255, 125, 63, 0.85)); }
.disco-line.is-now .kw.is-hit { animation: word-pop 0.38s cubic-bezier(0.2, 1.8, 0.4, 1); }
@keyframes word-pop { 0% { translate: 0 0; scale: 1; rotate: 0deg; } 35% { translate: 0 -0.18em; scale: 1.28; rotate: var(--tilt, 3deg); } 100% { translate: 0 0; scale: 1; rotate: 0deg; } }
/* Ad-libs: the echo, small, raised, in tangerine, stamped in */
.disco-line .kw-adlib { margin-left: 0.1em; font-family: var(--mono); font-size: 0.4em; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.95em; color: rgba(255, 138, 82, 0.4); }
.disco-line.is-now .kw-adlib.is-sung, .disco-line.is-now .kw-adlib.is-active { color: #ff8a52; background: none; filter: none; text-shadow: 0 0 16px rgba(255, 125, 63, 0.8); }
.disco-line.is-now .kw-adlib.is-hit { animation: adlib-stamp 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes adlib-stamp { 0% { scale: 1.9; rotate: -12deg; opacity: 0; } 60% { scale: 0.92; rotate: -4deg; opacity: 1; } 100% { scale: 1; rotate: -4deg; } }
.disco-line.is-now .kw-adlib.is-sung { rotate: -4deg; }
/* The code as keys */
.disco-line .kk { display: inline-grid; place-items: center; min-width: 1.25em; height: 1.25em; margin: 0 0.04em; padding: 0 0.18em; font-family: var(--mono); font-size: 0.78em; font-weight: 500; line-height: 1; color: rgba(243, 234, 220, 0.5); border: 0.06em solid rgba(243, 234, 220, 0.3); border-radius: 0.22em; vertical-align: 0.06em; text-shadow: none; transition: color 0.12s, background 0.12s, border-color 0.12s, box-shadow 0.2s; }
.disco-line.is-now .kk.is-active, .disco-line.is-now .kk.is-sung { color: #1c1a17; background: #ff7d3f; border-color: #ff7d3f; box-shadow: 0 0 26px rgba(255, 125, 63, 0.6); }
.disco-line.is-now .kk.is-hit { animation: word-pop 0.34s cubic-bezier(0.2, 1.8, 0.4, 1); }
.disco-line.is-next .kk { font-size: 0.9em; }

@media (max-width: 760px) {
  .disco { --size: 128px; }
  /* Phones set the volume with their own buttons, so the slider goes and mute stays */
  .disco-level { display: none; }
  /* From the left edge to just short of the close button, so the title has room */
  .disco-player { left: 16px; width: calc(100vw - 84px); gap: 8px; padding-right: 8px; translate: 0 10px; }
  .disco.is-on .disco-player { translate: 0 0; }
  .disco-beams i { left: -20vh; width: 40vh; height: 120vh; }
  .disco-line.is-now { font-size: clamp(22px, 7.2vw, 30px); }
  .disco-line.is-next { font-size: 13.5px; }
}