/* Layout: a drafting sheet, light only by choice: white paper, graphite ink, non-photo-blue guides. Guides draw first, ink builds over them. */
:root {
  --paper: #ffffff;
  --sheet: #fafafa;
  --ink: #17181a;
  --muted: #5e6166;
  --rule: #dcdde0;
  --guide: #4f9fd6;
  --guide-ink: #1f6fa8;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-label: 0.72rem;
  --t-h2: clamp(1.9rem, 4vw, 2.8rem);
  --t-h1: clamp(2.4rem, 5.4vw, 4.4rem);

  --wide: 74rem;
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; }
body {
  margin: 0; background-color: var(--paper); color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--sans); font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
/* Drafting paper, only where something is being drawn: fine lines every 12px, major lines every 60px,
   fading out from the drawing so the grid never meets an edge. */
.paper { position: relative; isolation: isolate; }
.paper::before {
  content: ""; position: absolute; z-index: -1; inset: -2rem 0 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--guide) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--guide) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, var(--guide) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--guide) 8%, transparent) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at var(--fade-x, 72%) 48%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 70% at var(--fade-x, 72%) 48%, #000 25%, transparent 75%);
  pointer-events: none;
}
img { max-width: 100%; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--guide); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--guide-ink); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-family: var(--sans); text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 800; font-stretch: 112%; line-height: 0.98; letter-spacing: -0.025em; }
h2 { font-size: var(--t-h2); font-weight: 750; font-stretch: 115%; line-height: 1.05; letter-spacing: -0.015em; }
h3 { font-size: 1.35rem; font-weight: 700; font-stretch: 110%; line-height: 1.2; }
.label { font: 500 var(--t-label)/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.page { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wide { max-width: var(--wide); margin-inline: auto; }

/* Top bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; font-weight: 700; font-stretch: 112%; white-space: nowrap; }
.brand svg { width: 40px; height: auto; display: block; }
.nav { display: flex; gap: 1.25rem; font-size: var(--t-small); }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }

/* Hero: words on the left, the mark on its construction drawing on the right. */
/* The top bar and the hero fill the first screen exactly, so nothing below peeks in on landing;
   the next divider starts just under the fold, ticks included. */
.first { position: relative; overflow-x: hidden; overflow-x: clip; display: grid; grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100svh; }
/* A faded line at the bottom centre of the first screen, pointing down to the work. */
/* It sets itself like a label on a drawing (letters tighten into place), with a short guide stroke
   under the text that a pen mark runs down every couple of seconds. It fades gradually as the page scrolls. */
.scroll-cue {
  position: absolute; inset-inline: 0; bottom: 1rem; margin-inline: auto; width: max-content;
  display: grid; justify-items: center; gap: 0.6rem;
  color: var(--muted); text-decoration: none;
  opacity: 0; animation: cue-in 0.8s cubic-bezier(.2, .7, .2, 1) 1.5s forwards;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
html.intro .scroll-cue { animation-delay: 4.5s; }
.cue-text { font: 500 var(--t-label)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: color 0.2s ease; }
.cue-rail { position: relative; width: 1px; height: 20px; background: color-mix(in srgb, var(--guide) 45%, transparent); overflow: hidden; transform-origin: top; transition: transform 0.35s cubic-bezier(.2, .7, .2, 1); }
.cue-rail::after { content: ""; position: absolute; left: 0; top: -8px; width: 1px; height: 8px; background: var(--ink); animation: cue-pen 2.2s cubic-bezier(.65, 0, .35, 1) 2.4s infinite; }
html.intro .cue-rail::after { animation-delay: 5.4s; }
.scroll-cue:hover .cue-text, .scroll-cue:focus-visible .cue-text { color: var(--ink); }
.scroll-cue:hover .cue-rail, .scroll-cue:focus-visible .cue-rail { transform: scaleY(1.2); }
/* --cue-fade goes from 1 to 0 over the first part of the scroll (set by home.js). */
.cue-text, .cue-rail { opacity: var(--cue-fade, 1); }
.scroll-cue.faded { pointer-events: none; }
@keyframes cue-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.scroll-cue .cue-text { animation: cue-set 0.9s cubic-bezier(.2, .7, .2, 1) 1.5s both; }
html.intro .scroll-cue .cue-text { animation-delay: 4.5s; }
@keyframes cue-set { from { letter-spacing: 0.5em; } to { letter-spacing: 0.14em; } }
@keyframes cue-pen {
  0% { top: -8px; opacity: 0; }
  15% { opacity: 1; }
  70% { top: 20px; opacity: 1; }
  100% { top: 20px; opacity: 0; }
}
.first + .section { margin-top: 0.5rem; }
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; align-content: center; padding-block: 1.5rem 3rem; }
.hero-text { display: grid; gap: 1.5rem; min-width: 0; }
.hero-text .lede { font-size: 1.2rem; line-height: 1.5; color: var(--muted); max-width: 34rem; }
.hero-text .lede strong { color: var(--ink); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.email { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid var(--rule); background: var(--sheet); border-radius: 999px; padding: 0.35rem 0.4rem 0.35rem 1rem; font-size: var(--t-small); }
.email span { font-family: var(--mono); font-size: 0.8rem; user-select: all; overflow-wrap: anywhere; }
.copy { font: 600 var(--t-label) var(--sans); letter-spacing: 0.04em; border: 0; border-radius: 999px; padding: 0.4rem 0.8rem; cursor: pointer; background: var(--ink); color: var(--paper); }
.drawing { position: relative; isolation: isolate; min-width: 0; }
/* The drafting paper sits behind the drawing and is centred on it, so it lines up with the MD at any width. */
#drawing::before {
  content: ""; position: absolute; z-index: -1; inset: -36% -42%;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--guide) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--guide) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, var(--guide) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--guide) 8%, transparent) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
  background-position: center;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  pointer-events: none;
}
.drawing svg { display: block; width: 100%; height: auto; overflow: visible; }

/* The mark: ink is the filled shape, revealed by a mask stroke drawn along its centreline. */
.ink { fill: var(--ink); }
.guides line, .guides circle, .guides path { fill: none; stroke: var(--guide); stroke-width: 0.35; }
.guides .dim { stroke-width: 0.3; }
.guides text { fill: var(--guide-ink); font: 500 3.4px var(--mono); letter-spacing: 0.06em; }
.reveal { fill: none; stroke: #fff; stroke-linecap: butt; stroke-linejoin: round; }
.play .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw calc(var(--dur, 0.6s) * var(--slow, 1)) cubic-bezier(.65, 0, .35, 1) calc(var(--delay, 0s) * var(--slow, 1)) forwards; }
.play .note { opacity: 0; animation: fade calc(0.3s * var(--slow, 1)) ease calc(var(--delay, 0.35s) * var(--slow, 1)) forwards, settle-out calc(0.5s * var(--slow, 1)) ease calc(1.8s * var(--slow, 1)) forwards; }
.play .guides { animation: settle calc(0.6s * var(--slow, 1)) ease calc(1.7s * var(--slow, 1)) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes settle { to { opacity: 0.35; } }
@keyframes settle-out { to { opacity: 0; } }

/* Work: each case study is a drawing sheet with a title block. */
.section { position: relative; display: grid; gap: 1.75rem; padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--rule); }
/* Section dividers are dimension lines: a tick at each end, in the guide colour. */
.section::before, .section::after, footer::before, footer::after { content: ""; position: absolute; top: -5px; width: 1px; height: 9px; background: var(--guide); }
.section::before, footer::before { left: 0; }
.section::after, footer::after { right: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.section-head p { color: var(--muted); max-width: 32rem; }
/* Field tabs on the Products, Programmes and Games pages: links styled as chips, the current page filled. */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: -0.5rem; }
.chip { font: 500 var(--t-label) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--rule); border-radius: 999px; padding: 0.55rem 1rem; background: var(--paper); color: var(--muted); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.chip:hover { color: var(--ink); border-color: var(--ink); }
a.chip { text-decoration: none; }
.chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip:focus-visible { outline: 2px solid var(--guide); outline-offset: 2px; }
/* The register: one full-width row per sheet. Its screenshot is pinned over the row at an angle,
   drifts a little with the scroll and squares up on hover. */
.register { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 1.5rem; padding: clamp(1.5rem, 3.5vw, 2.25rem) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; min-height: clamp(12rem, 19vw, 15rem); align-content: center; }
.row-main { display: grid; gap: 0.7rem; align-content: start; max-width: 30rem; min-width: 0; }
.row-main h3 { font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: 750; font-stretch: 115%; line-height: 1; letter-spacing: -0.02em; }
.row-main p { color: var(--muted); }
.row-meta { font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.tags li { font: 500 0.74rem var(--mono); border: 1px solid var(--rule); border-radius: 999px; padding: 0.2rem 0.6rem; color: var(--muted); }
.pin { position: absolute; right: 2%; top: 50%; width: min(29%, 22rem); z-index: 1; transform: translateY(calc(-50% + var(--drift, 0px))) rotate(var(--tilt, -3deg)); transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), box-shadow 0.5s ease; pointer-events: none; }
.pin img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 1px 0 var(--rule), 0 24px 50px -26px rgba(23, 24, 26, 0.45); }
.pin.phones { display: flex; justify-content: flex-end; gap: 4%; width: min(20%, 13rem); }
.pin.phones img { width: 48%; border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 22px rgba(23, 24, 26, 0.16)); }
/* Vyltic shows both products: the dashboard, with the player app standing in front of its corner. */
.pin.combo { width: min(30%, 23rem); }
.pin.combo .app { position: absolute; right: -5%; bottom: -16%; width: 25%; border-radius: 14px; border: 3px solid #0b0c0e; box-shadow: 0 18px 34px -14px rgba(23, 24, 26, 0.5); }
.pin .open { position: absolute; left: 0.8rem; top: 0.8rem; font: 500 var(--t-label) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 0.3rem 0.55rem; border-radius: 4px; opacity: 0; transition: opacity 0.25s ease; }
.row:nth-child(even) .pin { --tilt: 2.5deg; }
.row:hover .pin, .row:focus-visible .pin { --tilt: 0deg; }
.row:hover .pin .open, .row:focus-visible .pin .open { opacity: 1; }
.row:hover h3, .row:focus-visible h3 { text-decoration: underline; text-decoration-color: var(--guide); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Intro, first visit only: the sheet starts blank, the mark draws in the middle, its guides run to the
   page edges, then the mark settles into the hero and the page comes in. Any click or key skips it. */
.intro-sheet { position: fixed; inset: 0; z-index: 50; background: var(--paper); display: grid; place-items: center; overflow: hidden; transition: background-color 0.85s ease; }
.intro-sheet[hidden] { display: none; }
/* In the intro the dimension numbers fade out slowly once the mark is built, and are gone before the page comes in. */
.intro-stage.play .note { animation: fade 0.48s ease 0.56s forwards, settle-out 0.9s ease 2.5s forwards; }
.intro-stage { --slow: 1.6; position: relative; width: min(72vw, 34rem); }
.intro-stage svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 0 0; transition: transform 0.95s cubic-bezier(.65, 0, .35, 1); }
.intro-stage i { position: absolute; background: var(--guide); opacity: 0.55; }
.intro-stage i.h { left: -100vw; right: -100vw; height: 1px; transform: scaleX(0); animation: run-x 0.9s cubic-bezier(.65, 0, .35, 1) forwards; }
.intro-stage i.v { top: -100vh; bottom: -100vh; width: 1px; transform: scaleY(0); animation: run-y 0.9s cubic-bezier(.65, 0, .35, 1) 0.2s forwards; }
@keyframes run-x { to { transform: scaleX(1); } }
@keyframes run-y { to { transform: scaleY(1); } }
.intro-sheet.opening { background-color: transparent; pointer-events: none; }
.intro-sheet.opening i { transition: opacity 0.6s ease; opacity: 0; }
html.intro .page { opacity: 0; animation: intro-failsafe 0.3s ease 7s forwards; }
html.intro.opening .page { opacity: 1; transition: opacity 0.85s ease; animation: none; }
@keyframes intro-failsafe { to { opacity: 1; } }
/* After the intro has drawn the mark, the hero drawing shows finished instead of drawing again. */
html.intro #drawing .draw, html.intro-done #drawing .draw { animation: none; stroke-dashoffset: 0; }
html.intro #drawing .guides, html.intro-done #drawing .guides { animation: none; opacity: 0.35; }
html.intro #drawing .note, html.intro-done #drawing .note { animation: none; opacity: 0; }
/* While the intro mark glides in, the hero drawing is hidden entirely (no ghost guides or grid where it
   will land). When it lands the two swap in one frame, and the drafting paper fades in around it. */
html.intro #drawing { opacity: 0; }
html.intro #drawing::before { opacity: 0; }
#drawing::before { transition: opacity 0.9s ease; }
.intro-sheet.skipped svg { opacity: 0; transition: opacity 0.3s ease; }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.5rem 3rem; }
.about .prose { display: grid; gap: 1rem; max-width: 40rem; }
.about .prose p { color: var(--muted); }
.about .prose p:first-child { color: var(--ink); font-size: 1.2rem; line-height: 1.5; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.25rem 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.timeline .years { font: 400 0.8rem/1.6 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline b { font-weight: 600; }
.timeline .org { color: var(--muted); }

footer { position: relative; display: grid; gap: 1rem; padding-block: clamp(2.5rem, 6vw, 4.5rem) 3rem; border-top: 1px solid var(--rule); }
footer p { color: var(--muted); }

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .drawing { order: -1; width: min(15rem, 66%); }
  .hero { gap: 1.25rem; padding-block: 0.5rem 2rem; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pin, .pin.phones { position: static; width: 100%; transform: none; margin-top: 0.75rem; }
  .pin.phones { justify-content: flex-start; }
  .pin.phones img { width: 34%; }
  .pin.combo { position: relative; top: auto; right: auto; width: 100%; padding-right: 12%; padding-bottom: 12%; }
  .pin.combo .app { right: 0; bottom: 0; width: 24%; }
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .nav { gap: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .play .draw { animation: none; stroke-dashoffset: 0; }
  .play .note { animation: none; opacity: 0; }
  .play .guides { animation: none; opacity: 0.35; }
  .pin, .pin .open { transition: none; }
  .scroll-cue, .scroll-cue .cue-text { animation: none; opacity: 1; }
  .cue-rail::after { animation: none; display: none; }
}

/* Programmes have no photos yet: their pin is a figure drawn on a plate of drafting paper. */
.pin.figure { width: min(25%, 18rem); }
.plate { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10; display: grid; place-content: center; justify-items: center; gap: 0.35rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 1px 0 var(--rule), 0 24px 50px -26px rgba(23, 24, 26, 0.45); }
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--guide) 18%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--guide) 18%, transparent) 1px, transparent 1px);
  background-size: 12px 12px; background-position: center;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.plate b { font-size: clamp(2rem, 4.2vw, 3.2rem); white-space: nowrap; font-weight: 800; font-stretch: 118%; line-height: 1; letter-spacing: -0.02em; }
.plate span { font: 500 var(--t-label) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.plate i { font: 400 0.7rem var(--mono); font-style: normal; color: var(--guide-ink); }

/* Speaking: the talk as one wide sheet, the photo on the left. */
.talk { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; text-decoration: none; color: inherit; }
.talk img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 1px 0 var(--rule), 0 24px 50px -26px rgba(23, 24, 26, 0.45); }
.talk-text { display: grid; gap: 0.7rem; }
.talk-text h3 { font: 700 clamp(2rem, 4.2vw, 3.2rem)/1.25 "IBM Plex Sans Arabic", var(--sans); }
.talk-en { font-size: 1.25rem; font-weight: 600; font-stretch: 110%; }
.talk-text p:not(.talk-en) { color: var(--muted); }
.watch { font: 500 var(--t-label) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); transition: color 0.2s ease; }
.talk:hover .watch, .talk:focus-visible .watch { color: var(--ink); text-decoration: underline; text-decoration-color: var(--guide); }

/* About, below the story: recognition, community and life outside work, side by side. */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3.5rem); }
.col { display: grid; gap: 1rem; align-content: start; }
.col p { color: var(--muted); }
.roles { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.roles li { display: grid; gap: 0.15rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.roles b { font-weight: 600; }
.roles span { color: var(--muted); font-size: var(--t-small); }

/* Home: four figures under the hero, then a lane per field with three featured cards and a link to the field's page. */
.proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.proof .stat { display: grid; gap: 0.35rem; align-content: start; }
.proof .stat b { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; font-stretch: 115%; line-height: 1; letter-spacing: -0.02em; }
.proof .stat span { color: var(--muted); font-size: var(--t-small); }
.bento { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.75rem); }
.tile { display: grid; grid-template-rows: auto 1fr; gap: 0.8rem; align-content: start; text-decoration: none; color: inherit; min-width: 0; }
.tile.lead { grid-row: span 2; grid-template-rows: 1fr auto; }
.tile .frame { aspect-ratio: 16 / 10; }
.tile.lead .frame { aspect-ratio: auto; min-height: 16rem; height: 100%; }
.tile-text { display: grid; gap: 0.35rem; align-content: start; }
.tile h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 750; font-stretch: 115%; line-height: 1.05; letter-spacing: -0.015em; }
.tile.lead h3 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.tile p { color: var(--muted); font-size: 0.95rem; }
.tile.lead p { max-width: 32rem; }
.frame { position: relative; margin: 0; border-radius: 8px; overflow: hidden; background: #eef0f2; box-shadow: 0 1px 0 var(--rule), 0 24px 50px -30px rgba(23, 24, 26, 0.45); transition: transform 0.4s cubic-bezier(.2, .7, .2, 1); }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.frame .plate { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.tile:hover .frame, .tile:focus-visible .frame { transform: translateY(-4px); }
.tile:hover h3, .tile:focus-visible h3 { text-decoration: underline; text-decoration-color: var(--guide); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* The way in to the rest of a field: a construction box under the two small tiles, showing what's behind it. */
.more { grid-column: 2 / span 2; align-self: end; display: flex; align-items: center; gap: 1.25rem; padding: 1.1rem 1.25rem; border: 1px dashed var(--guide); border-radius: 8px; text-decoration: none; color: inherit; transition: border-color 0.2s ease, background-color 0.2s ease; }
.more:hover, .more:focus-visible { border-style: solid; background: var(--sheet); }
.thumbs { display: flex; flex: none; }
.thumbs img { width: 4.4rem; height: 3.3rem; object-fit: cover; object-position: top left; border-radius: 6px; border: 2px solid var(--paper); background: #eef0f2; box-shadow: 0 6px 14px -8px rgba(23, 24, 26, 0.45); }
.thumbs img + img { margin-left: -1.4rem; }
.more-text { display: grid; gap: 0.2rem; min-width: 0; flex: 1; }
.more-text strong { font-size: 1.1rem; font-weight: 700; font-stretch: 112%; line-height: 1.2; }
.more-text span { color: var(--muted); font-size: var(--t-small); }
.go { flex: none; font: 500 var(--t-label) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--ink); border-radius: 999px; padding: 0.55rem 1rem; transition: background-color 0.2s ease, color 0.2s ease; }
.more:hover .go, .more:focus-visible .go { background: var(--ink); color: var(--paper); }
/* Programmes read like reports: a photo beside the facts and a planned-against-actual table. */
.report { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.report-photo { display: block; border-radius: 8px; overflow: hidden; background: #eef0f2; box-shadow: 0 1px 0 var(--rule), 0 24px 50px -30px rgba(23, 24, 26, 0.45); }
.report-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.report-photo .plate { aspect-ratio: 3 / 2; border: 0; border-radius: 0; box-shadow: none; }
.report-body { display: grid; gap: 0.9rem; align-content: start; }
.report-body h3 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 750; font-stretch: 115%; line-height: 1.05; letter-spacing: -0.015em; }
.report-body h3 a { text-decoration: none; }
.report-body h3 a:hover { text-decoration: underline; text-decoration-color: var(--guide); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.report-body > p { color: var(--muted); }
.report-body .go { justify-self: start; text-decoration: none; color: var(--ink); }
.report-body .go:hover, .report-body .go:focus-visible { background: var(--ink); color: var(--paper); }
.facts { margin: 0; display: grid; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 500 var(--t-label)/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: var(--t-small); }
.pva { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pva th, .pva td { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
.pva thead th { font: 500 var(--t-label) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink); }
.pva td { text-align: right; color: var(--muted); }
.pva td:last-child { color: var(--ink); font-weight: 700; font-stretch: 112%; }
.pva tbody th { font-size: var(--t-small); }
.report-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 1rem; }
.report.small { grid-template-columns: minmax(0, 1fr); }
.report.small h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
/* A field page: its title, the tabs to the other fields, then every project as a register row. */
.field { display: grid; gap: 1.75rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

@media (max-width: 820px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile.lead { grid-row: auto; }
  .tile.lead .frame { aspect-ratio: 16 / 10; min-height: 0; }
  .more { grid-column: auto; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .report, .report-pair { grid-template-columns: minmax(0, 1fr); }
  .pin.figure { width: 100%; }
  .talk { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
}