/* ==========================================================================
   CityLayers: London, public site styles
   The map scheme: colours taken from Braun and Hogenberg's hand-coloured 1572 map of London, the map the app icon is
   cut from. Parchment ground, iron-gall ink for text, the vermilion of its roofs as the one accent, with the river's
   blue and the fields' green as supporting tints. The same parchment and vermilion as the App Store screenshots.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Colour, from the map */
  --parchment: #f1e6cc;          /* Page ground: the paper of the map. */
  --parchment-deep: #e7d8b4;     /* Sunk bands (the gallery). */
  --card: #f8f0dd;               /* Raised cards, a little paler than the page. */
  --ink: #2a1d12;                /* Iron-gall ink: headings and body text. */
  --ink-muted: #5c4a37;          /* Secondary text, 7:1 on parchment. */
  --hairline: #d4c29c;           /* Rules and keylines. */
  --hairline-strong: #b9a37a;
  --vermilion: #b23f27;          /* The roofs: links, the you-are-here dot, the accent. */
  --vermilion-deep: #8f2f1c;
  --on-vermilion: #fbf3e2;
  --river: #6f9cc0;              /* The Thames. */
  --river-pale: #cddbd9;
  --field: #a3b97c;              /* The fields outside the wall. */
  --field-deep: #55703c;
  --sand: #e2cfa2;               /* Ground drawings: today's ground, the ground of 1500, Roman ground. */
  --clay: #c9a670;
  --umber: #9a7148;
  --era-roman: #c2603f;          /* Layer tints, deepened from the app's so they hold on parchment. */
  --era-1500: #6f8f45;
  --footer: #2a1d12;
  --on-footer: #efe3c6;
  --on-footer-muted: #b9a888;
  --focus: #2a1d12;

  /* Type families */
  --font-display: Newsreader, "New York", Georgia, serif;
  --font-ui: Figtree, -apple-system, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;          /* Small capsules only: pills and chips. */

  /* Warm shadows, as if the paper were lifted off the desk. */
  --shadow-soft: 0 1px 2px rgba(60, 38, 18, 0.08), 0 8px 24px rgba(60, 38, 18, 0.1);
  --shadow-lift: 0 2px 4px rgba(60, 38, 18, 0.1), 0 24px 56px rgba(60, 38, 18, 0.22);

  /* Layout */
  --gutter: clamp(16px, 5vw, 56px);
  --measure: 65ch;
  --page-max: 1200px;

  color-scheme: light;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-ui);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

a {
  color: var(--vermilion);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--vermilion-deep); }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
p { margin: 0; text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  background: var(--ink);
  color: var(--parchment);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* Type roles */
.figure {
  font: 500 13px/16px var(--font-mono);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.era {
  font-family: var(--font-display);
  font-weight: 500;
}
.eyebrow {
  font: 500 13px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vermilion);
}
.muted { color: var(--ink-muted); }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 2;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  font: 600 26px/1 var(--font-display);
  letter-spacing: -0.01em;
}
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(42, 29, 18, 0.18);
}
.brand:hover { color: var(--ink); }

.site-nav ul {
  display: flex;
  gap: clamp(var(--space-3), 2.4vw, var(--space-8));
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font: 600 14px/44px var(--font-ui);
  letter-spacing: 0.01em;
  display: inline-block;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 720px) {
  .site-nav .nav-wide { display: none; }
}

/* ---------- Neatline (the map's ruled border: a hairline, a gap, a heavier rule) ---------- */
.neatline {
  height: 9px;
  border-top: 1px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  opacity: 0.85;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Braun and Hogenberg's 1572 map of London behind the hero, washed with parchment: almost solid behind the words,
     the map's colour showing clearly on the right. */
  background:
    linear-gradient(90deg, rgba(241, 230, 204, 0.97) 0%, rgba(241, 230, 204, 0.9) 38%, rgba(241, 230, 204, 0.35) 72%, rgba(241, 230, 204, 0.15) 100%),
    image-set(url("/assets/img/hero/map-1572-1800.webp") type("image/webp"), url("/assets/img/hero/map-1572-1400.jpg") type("image/jpeg")) center 40% / cover no-repeat,
    var(--parchment);
}
@media (max-width: 820px) {
  /* On a phone the words sit over the whole map, so the wash is heavier at the top and lifts under the view. */
  .hero {
    background:
      linear-gradient(180deg, rgba(241, 230, 204, 0.95) 0%, rgba(241, 230, 204, 0.88) 50%, rgba(241, 230, 204, 0.45) 100%),
      image-set(url("/assets/img/hero/map-1572-1000.webp") type("image/webp"), url("/assets/img/hero/map-1572-1400.jpg") type("image/jpeg")) center / cover no-repeat,
      var(--parchment);
  }
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: clamp(var(--space-8), 5vw, 80px);
  padding-top: clamp(24px, 6vw, 72px);
}
.hero-copy { padding-bottom: clamp(40px, 7vw, 96px); }
.hero-icon {
  width: clamp(72px, 9vw, 104px);
  height: auto;
  border-radius: 23%;
  box-shadow: 0 0 0 1px rgba(42, 29, 18, 0.18), var(--shadow-soft);
  margin-bottom: var(--space-6);
}
/* The name is "CityLayers: London" and breaks after the colon; the size keeps "CityLayers:" (about 4.8em wide) inside
   the hero column at every width, so it never runs under the view of Cheapside. */
.hero h1 {
  font-size: clamp(52px, 8vw, 116px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-left: -0.04em;
}
.tagline {
  margin-top: var(--space-4);
  font: 500 clamp(22px, 2.6vw, 30px)/1.25 var(--font-display);
  color: var(--vermilion);
}
.lede {
  margin-top: var(--space-6);
  max-width: 34ch;
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--ink-muted);
}
.lede strong { color: var(--ink); font-weight: 600; }

/* Apple's App Store badge with the devices beside it. The badge is Apple's own artwork, shown as supplied. */
.store {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-8);
  font: 600 14px/20px var(--font-ui);
}
.store .figure { color: var(--ink-muted); }
.store-badge { display: inline-block; line-height: 0; border-radius: 9px; }
.store-badge img { display: block; height: auto; }
.store-badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The view: Cheapside in 1500, mounted like a plate on the map with a parchment margin. */
.hero-view {
  position: relative;
  margin: 0 0 clamp(40px, 7vw, 96px);  /* Same as the copy column, so the frame and the badge end on one line. */
  justify-self: center;
  width: min(100%, 460px);
}
.hero-view-frame {
  position: relative;
  aspect-ratio: 460 / 600;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  border: 8px solid var(--card);
  box-shadow: 0 0 0 1px rgba(42, 29, 18, 0.16), var(--shadow-lift);
}
.hero-view-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 8px);
}
.hero-view figcaption {
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-4) + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(248, 240, 221, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
}
.hero-view figcaption .era { color: var(--vermilion); font-size: 15px; margin-left: var(--space-2); }

/* The past fades in; it does not fly in. */
@media (prefers-reduced-motion: no-preference) {
  .hero-view-frame img { animation: fade-in 400ms ease-out 200ms both; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-copy { padding-bottom: 0; }
  .hero-view { width: min(78%, 360px); }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 11vw, 144px); }
.section-head { max-width: 40rem; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head h2 {
  margin-top: var(--space-3);
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.section-head p:not(.eyebrow) {
  margin-top: var(--space-4);
  color: var(--ink-muted);
  font-size: clamp(17px, 1.6vw, 19px);
  max-width: var(--measure);
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 72px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  border-top: 1px solid var(--hairline-strong);
  padding-top: var(--space-6);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-3);
}
.step > .figure { color: var(--vermilion); }
.step h3 {
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.step p { color: var(--ink-muted); max-width: 46ch; }
.step p strong { color: var(--ink); font-weight: 600; }
.step-art { margin-top: var(--space-4); }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
}

/* Status pills (from the app): borderless capsules. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font: 600 13px/18px var(--font-ui);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pill-locked { background: var(--vermilion); color: var(--on-vermilion); }
.pill-locked svg { fill: currentColor; }
.pill-aligning { background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft); }
.pill-quiet { background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft); border-radius: var(--radius-md); padding: 10px var(--space-4); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pill-arrow { stroke: var(--ink-muted); }

/* Drawings: a section through the ground, and a sketch of the map, coloured like the map. */
.depth svg,
.map-sketch svg { width: 100%; height: auto; max-width: 520px; }
.map-sketch svg { border-radius: var(--radius-md); }
.lbl { font: 500 13px var(--font-mono); letter-spacing: 0.02em; fill: var(--ink); }
.lbl-muted { font: 500 13px var(--font-mono); letter-spacing: 0.02em; fill: var(--ink-muted); }
.d-today { fill: var(--sand); }
.d-1500 { fill: var(--clay); }
.d-roman { fill: var(--umber); }
.d-line { stroke: var(--ink); }
.d-here { fill: var(--vermilion); }
.d-here-ring { fill: none; stroke: var(--vermilion); }
.d-roman-lbl { fill: var(--parchment); }
.m-paper { fill: var(--card); }
.m-field { fill: var(--field); opacity: 0.45; }
.m-river { fill: var(--river); }
.m-wall { fill: none; stroke: var(--vermilion); }
.m-street { stroke: var(--hairline-strong); }
.m-place { fill: var(--ink); }
.m-bridge { fill: var(--ink); }

/* ---------- Levels ---------- */
.levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-4), 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 760px) {
  .levels { grid-template-columns: 1fr; }
}
.level {
  --tint: var(--vermilion);
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(var(--space-3), 1.6vw, 20px) clamp(var(--space-3), 1.6vw, 20px) clamp(var(--space-6), 3vw, 36px);
  display: flex;
  flex-direction: column;
}
.level-roman { --tint: var(--era-roman); }
.level-1500 { --tint: var(--era-1500); }

/* The picture on the card, its radius inside the card's. */
.level-view {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-md);
  background: var(--parchment-deep);
  overflow: hidden;
}
.level-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.level-body { padding-inline: clamp(var(--space-2), 1.4vw, 20px); }
.level h3 {
  margin-top: var(--space-6);
  font-size: clamp(44px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
}
/* The year as a borderless pill in the layer's tint. */
.level .year {
  display: inline-block;
  margin-top: var(--space-4);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--tint);
  color: var(--on-vermilion);
  font: 500 14px/20px var(--font-mono);
  letter-spacing: 0.02em;
}
.level .era {
  display: block;
  margin-top: var(--space-3);
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.25;
  color: var(--ink);
}
.level-desc { margin-top: var(--space-4); color: var(--ink-muted); max-width: 44ch; }
.level-facts {
  margin: var(--space-6) 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3) var(--space-4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-4);
}
.level-facts dt {
  font: 500 12px/22px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.level-facts dd { margin: 0; }
.price {
  font: 600 17px/22px var(--font-ui);
}
.price-note { color: var(--ink-muted); font-size: 15px; }
@media (max-width: 400px) {
  .level-facts { grid-template-columns: 1fr; gap: 2px; }
  .level-facts dd + dt { margin-top: var(--space-3); }
}

/* ---------- Gallery ---------- */
.gallery-section { background: var(--parchment-deep); }
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 26vw, 300px);
  gap: clamp(var(--space-4), 2.5vw, 36px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  --gallery-inset: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  scroll-padding-inline: var(--gallery-inset);
  padding: var(--space-2) var(--gallery-inset) var(--space-8);
  margin: 0;
  list-style: none;
  scrollbar-color: var(--hairline-strong) transparent;
}
.gallery:focus-visible { outline-offset: -2px; }
.gallery li { scroll-snap-align: start; }
.gallery figure { margin: 0; }
.shot {
  border-radius: clamp(22px, 2.6vw, 30px);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 1320 / 2868;
  box-shadow: 0 0 0 1px rgba(42, 29, 18, 0.14), var(--shadow-soft);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { margin-top: var(--space-4); }
.gallery figcaption strong {
  display: block;
  font: 600 22px/1.2 var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}
.gallery figcaption span {
  display: block;
  margin-top: var(--space-1);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.gallery-hint { margin-top: var(--space-2); }

/* ---------- More cities ---------- */
/* A row of layer tiles on an ink rule: the two open layers filled in their tints, the ones to come outlined in
   dashes and fading into the distance. */
.layer-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 2.2vw, 28px);
  border-bottom: 2px solid var(--ink);
  padding: 0 var(--space-2) clamp(10px, 1.4vw, 16px);
  margin-bottom: var(--space-8);
  overflow: hidden;
}
.layer-tile {
  --tint: var(--hairline);
  flex: 0 0 auto;
  width: clamp(44px, 8vw, 96px);
  aspect-ratio: 3 / 4;
  border-radius: clamp(8px, 1.1vw, 12px);
  position: relative;
  overflow: hidden;
}
.layer-tile.lit { background: var(--tint); box-shadow: var(--shadow-soft); }
.layer-tile.roman { --tint: var(--era-roman); }
.layer-tile.late { --tint: var(--era-1500); }
.layer-tile.unlit { border: 1.5px dashed var(--hairline-strong); background: transparent; }
.layer-tile:nth-child(4) { width: clamp(38px, 6.5vw, 80px); }
.layer-tile:nth-child(5) { width: clamp(34px, 5.5vw, 70px); opacity: 0.8; }
.layer-tile:nth-child(6) { width: clamp(30px, 4.5vw, 60px); opacity: 0.6; }
.layer-tile:nth-child(7) { width: clamp(26px, 3.8vw, 50px); opacity: 0.4; }

.more-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 5vw, 72px);
  align-items: start;
}
.more-grid h2 {
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.more-grid p { color: var(--ink-muted); font-size: clamp(17px, 1.6vw, 19px); max-width: var(--measure); }
.more-grid p + p { margin-top: var(--space-4); }
@media (max-width: 760px) { .more-grid { grid-template-columns: 1fr; } }

/* ---------- Availability ---------- */
.available {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}
.available > img { width: 88px; height: 88px; border-radius: 23%; box-shadow: 0 0 0 1px rgba(42, 29, 18, 0.18), var(--shadow-soft); }
.available h2 {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-top: var(--space-2);
}
.available p { color: var(--ink-muted); max-width: 48ch; }
.store-slot {
  margin-top: var(--space-4);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.store-slot span { color: var(--ink-muted); }

/* ---------- Footer: ink, like the map's title cartouche ---------- */
.site-footer {
  background: var(--footer);
  color: var(--on-footer);
  padding-block: clamp(40px, 6vw, 64px);
  font-size: 15px;
}
.site-footer .brand { color: var(--on-footer); }
.site-footer .brand img { box-shadow: none; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}
.footer-grid h2 {
  font: 500 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-footer-muted);
  margin-bottom: var(--space-3);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.footer-grid a { color: var(--on-footer); text-decoration: none; line-height: 32px; }
.footer-grid a:hover { color: var(--on-footer); text-decoration: underline; }
.footer-brand p { color: var(--on-footer-muted); margin-top: var(--space-3); max-width: 36ch; }
.footer-legal {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(239, 227, 198, 0.18);
  color: var(--on-footer-muted);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* The single contact element (filled from assets/js/config.js). */
[data-contact] { color: var(--ink); }
[data-contact] a { color: var(--vermilion); }
.site-footer [data-contact],
.site-footer [data-contact] a { color: var(--on-footer); }

/* ---------- Document pages (privacy, support, credits) ---------- */
.doc-head {
  padding-top: clamp(32px, 7vw, 88px);
  padding-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--hairline-strong);
}
.doc-head .wrap { display: grid; gap: var(--space-4); }
.doc-head h1 {
  font-size: clamp(46px, 7.5vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.doc-head p { color: var(--ink-muted); font-size: clamp(17px, 1.7vw, 20px); max-width: 52ch; }
/* The page mark: a small square of the map, the same crop as the icon. */
.doc-mark {
  width: 44px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: url("/citylayers-london-icon.png") center / cover;
  box-shadow: 0 0 0 1px rgba(42, 29, 18, 0.18);
}

.doc {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(var(--space-8), 6vw, 96px);
  padding-block: clamp(40px, 6vw, 80px) clamp(72px, 10vw, 128px);
}
.doc-toc { position: sticky; top: var(--space-8); align-self: start; }
.doc-toc h2 {
  font: 500 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vermilion);
  margin-bottom: var(--space-3);
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-toc a { color: var(--ink-muted); text-decoration: none; font-size: 15px; line-height: 1.4; display: block; padding: 6px 0; }
.doc-toc a:hover { color: var(--ink); }
@media (max-width: 860px) {
  .doc { grid-template-columns: 1fr; }
  .doc-toc { position: static; border-bottom: 1px solid var(--hairline); padding-bottom: var(--space-6); }
}

.prose { max-width: var(--measure); }
.prose section { scroll-margin-top: var(--space-6); }
.prose section + section { margin-top: clamp(40px, 5vw, 56px); }
.prose h2 {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}
.prose h3 {
  font: 600 17px/1.4 var(--font-ui);
  margin: var(--space-6) 0 var(--space-2);
}
.prose p,
.prose li { color: var(--ink-muted); }
.prose p + p { margin-top: var(--space-4); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul,
.prose ol { padding-left: 1.2em; margin: var(--space-4) 0 0; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--vermilion); }
.prose .lead { color: var(--ink); font-size: 19px; }

/* Credits list */
.credit-list { list-style: none; padding: 0 !important; margin: var(--space-6) 0 0 !important; border-top: 1px solid var(--hairline); }
.credit-list li {
  margin: 0 !important;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 2px;
}
.credit-list .title { font: 500 21px/1.3 var(--font-display); color: var(--ink); }
.credit-list .title a { color: var(--ink); }
.credit-list .title a:hover { color: var(--vermilion); }
.credit-list .meta { font-size: 15px; }

/* 404 */
.lost { min-height: 60vh; display: grid; align-content: center; gap: var(--space-4); padding-block: 96px; }
.lost h1 { font-size: clamp(46px, 7.5vw, 88px); line-height: 1; }
.lost p { color: var(--ink-muted); max-width: 44ch; }

/* Spacing after lists inside prose, and the effective-date figure under a page title. */
.prose ul + p,
.prose ol + p { margin-top: var(--space-4); }
.doc-head p.figure { font-size: 14px; color: var(--ink-muted); }

/* The film */
.film-frame {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(42, 29, 18, 0.14), var(--shadow-lift);
}
.film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.film-note { margin-top: 14px; color: var(--ink-muted); }