:root {
  --story-ink: #10100f;
  --story-ink-raised: #171614;
  --story-paper: #f2eee7;
  --story-muted: #bbb5ad;
  --story-quiet: #8d8780;
  --story-line: rgba(242, 238, 231, 0.2);
  --story-accent: #c89468;
  --story-accent-soft: #ddbc97;
  --story-fill: #e7d8bd;
  --story-fill-ink: #1e1913;
  --story-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--story-ink);
}

.story-site {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(390px, 42%);
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--story-ink);
  color: var(--story-paper);
}

/* The header sat in one flex row pushed to the outer edges, so the links group
   began wherever its own width happened to put it - four pixels over the seam
   between the hero and the map, lining up with nothing underneath. It runs on
   the same two columns as the page now: the brand in the hero column, the
   links in the map column, each on that column's own inset. */
/* One row across the full width, with each side taking the inset of the column
   it sits over: the hero's own padding on the left, the map's edge inset on the
   right. Confining the links to the map column aligned them but left them only
   42% to fit in, so "Direct Line" broke onto two lines. */
.story-nav {
  position: absolute;
  z-index: 700;
  inset: 0 0 auto;
  display: flex;
  height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(18px, 3vw, 48px) 0 clamp(28px, 5vw, 76px);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(15, 14, 13, 0.7), rgba(15, 14, 13, 0.08));
}

/* A header link must never wrap. */
.story-nav__button { white-space: nowrap; }

.story-nav::after {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 0;
  width: 58%;
  height: 1px;
  background: var(--story-line);
  content: "";
  pointer-events: none;
}

.story-identity {
  display: inline-flex;
  min-width: max-content;
  min-height: 44px;
  align-items: flex-start;
  gap: 1px;
}

/* A flat 26px left the three of them bunched against the right edge with the
   map column half empty behind them. The gap grows with the window and the
   bordered entry takes more air than the two text links, because it is a
   different kind of thing sitting next to them. */
.story-nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.6vw, 46px);
}

.story-nav__button--accent { margin-left: clamp(2px, 0.9vw, 16px); }

.story-nav__button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Text links, not boxes. Three bordered slabs stacked under three more
     bordered slabs was the "box on box" that kept reading as clutter. */
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(242, 238, 231, 0.78);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 140ms var(--story-ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* One CTA carries a border. The other two stay text. */
.story-nav__button--accent {
  padding: 0 20px;
  border: 1px solid var(--story-accent);
  background: none;
  color: var(--story-accent);
}

.story-hero {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100dvh;
  flex-direction: column;
  justify-content: flex-end;
  padding: 96px clamp(28px, 5vw, 76px) 110px;
  isolation: isolate;
}

.story-hero::before,
.story-hero::after {
  position: absolute;
  inset: 0;
  content: "";
}

.story-hero::before {
  z-index: -2;
  background: url("/assets/media/home/philip-hero-desktop.webp") center / cover no-repeat;
}

.story-hero__video {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 180ms var(--story-ease-out);
}

.story-hero__video.is-ready { opacity: 1; }

.story-hero::after {
  z-index: -1;
  background: linear-gradient(90deg, rgba(15, 14, 13, 0.52), rgba(15, 14, 13, 0.08) 64%, rgba(15, 14, 13, 0.46)), linear-gradient(0deg, rgba(15, 14, 13, 0.98), rgba(15, 14, 13, 0.04) 59%);
}

.story-hero__copy { max-width: 690px; }

.mobile-entry { display: none; }

.story-hero__label {
  margin: 18px 0 0;
  color: rgba(242, 238, 231, 0.66);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1.1;
  text-transform: uppercase;
}

.story-hero h1 {
  max-width: 9ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(64px, 7.4vw, 96px);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.story-hero h1 span {
  display: block;
  padding-bottom: 0.08em;
  color: var(--story-accent-soft);
  font-style: italic;
  line-height: 1.1;
}

/* Baseline, not stretch. Two of the three facts lead with a 17px <b> and the
   third is plain 13px text; stretching the boxes left that third fact sitting
   on its own baseline instead of the line the numbers establish. */
.story-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 17px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--story-line);
  color: #c7c1b9;
  font-size: 13px;
}

.story-proof b { color: var(--story-paper); font-size: 17px; font-weight: 600; }

.story-map {
  --map-dock-h: 0px;
  /* One inset governs every corner instrument. The sides used to read this clamp
     while the bottom used a flat 18px, so at desktop the cluster sat 48px in from
     the edge but only 18px above the dock: jammed against the dock, adrift from
     the edge, and no longer reading as corner-anchored. */
  --map-edge-inset: clamp(18px, 3vw, 48px);
  position: relative;
  min-width: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: #131210;
}

#home-map {
  position: absolute;
  inset: 0;
  background: var(--story-ink);
}

#home-map .leaflet-tile {
  width: 258px !important;
  height: 258px !important;
  margin: -1px;
  mix-blend-mode: normal;
}

#home-map .leaflet-pane,
#home-map .leaflet-tile-pane { background: #131210; }

.map-fallback {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  width: min(280px, calc(100% - 40px));
  margin: 0;
  color: var(--story-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  transform: translate(-50%, -50%);
}

.map-fallback a { color: var(--story-accent-soft); text-decoration: underline; }

.map-vignette {
  position: absolute;
  z-index: 410;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(16, 15, 14, 0.58), transparent 18%), linear-gradient(0deg, rgba(16, 15, 14, 0.88), transparent 38%);
}

/* The title owns the top-left of the map and nothing shares that line. The
   controls used to sit here too, and at a 447px map column the title plus a
   282px control bar could not fit, so the bar overflowed its own container. */
.map-bar {
  position: absolute;
  z-index: 540;
  top: 102px;
  left: 26px;
  right: auto;
  max-width: calc(100% - 52px);
  display: flex;
  align-items: flex-start;
}

.map-title {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--story-paper);
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 34px);
  font-weight: 470;
  letter-spacing: -0.035em;
  line-height: 1;
}

/* One instrument panel. Grouping is carried by divider weight, not by gaps:
   hairline (0.08) separates buttons inside a group, a real rule (0.28)
   separates one group from the next. */
/* Bottom-right of the map, clear of the nav, the title and the start dock.
   Three separate instruments that do not touch: mode, reset, zoom. The wrapper
   only spaces them; each group carries its own surface. */
.map-controls {
  position: absolute;
  z-index: 545;
  right: auto;
  bottom: calc(var(--map-dock-h) + var(--map-edge-inset));
  left: var(--map-edge-inset);
  display: flex;
  min-width: max-content;
  align-items: stretch;
  gap: 12px;
  border: 0;
  background: none;
  backdrop-filter: none;
}

/* Border + backdrop blur carry each surface. No wide drop shadow on top of a
   border: that pairing is decoration stacked on decoration. */
.map-control-set {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow: visible;
  border: 0;
  background: none;
  backdrop-filter: none;
}

.map-button {
  min-width: 38px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(242, 238, 231, 0.24);
  border-radius: 0;
  background: rgba(18, 17, 15, 0.8);
  backdrop-filter: blur(16px) saturate(1.15);
  color: rgba(242, 238, 231, 0.82);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 170ms var(--story-ease-out), color 170ms var(--story-ease-out), transform 120ms var(--story-ease-out);
}

.map-control-set .map-button:last-child { border-right: 1px solid rgba(242, 238, 231, 0.24); }
.map-reset { margin-left: 4px; }
.map-button--zoom { padding: 0; font-family: var(--serif); font-size: 19px; font-weight: 450; letter-spacing: 0; }
.map-button[aria-pressed="true"] { border-color: rgba(242, 238, 231, 0.86); background: var(--story-paper); color: var(--story-ink); }

/* Shares the exact bottom offset and edge inset of .map-controls so the mode row
   and the zoom column read as one corner-anchored cluster instead of two
   instruments floating at different heights. */
.map-zoom {
  position: absolute;
  z-index: 545;
  right: var(--map-edge-inset);
  bottom: calc(var(--map-dock-h) + var(--map-edge-inset));
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.map-zoom .map-button { min-width: 36px; }

.map-button:focus-visible,
.story-nav__button:focus-visible,
.map-credit:focus-visible {
  outline: 2px solid var(--story-accent);
  outline-offset: -2px;
}

/* Attribution belongs at the map's bottom corner, where a map credit is read
   as a credit. At 7px under the zoom button it read as a broken sixth control.
   96px clears the start dock. */
/* Tucked under the map title, not in the controls' lane. The bottom lane is only
   ~390px wide here, so attribution and a 304px control panel cannot share it. */
.map-credit {
  position: absolute;
  z-index: 535;
  top: auto;
  right: 12px;
  bottom: calc(var(--map-dock-h) + 6px);
  left: auto;
  min-height: 0;
  /* Philip asked for a clean corner. The link stays in the DOM so the tile-style
     switch keeps writing the correct attribution target into it. */
  display: none;
  align-items: center;
  padding: 0;
  background: none;
  backdrop-filter: none;
  color: rgba(242, 238, 231, 0.3);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(6, 5, 4, 0.9);
  transition: color 170ms var(--story-ease-out);
}

.map-credit:hover { color: var(--story-paper); }

.start-dock {
  position: absolute;
  z-index: 570;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 42%;
  height: 76px;
  border-top: 1px solid rgba(242, 238, 231, 0.25);
}

.start-choice {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid rgba(16, 15, 14, 0.32);
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  transition: transform 140ms var(--story-ease-out), filter 180ms ease;
}

.start-choice:first-child { background: var(--story-paper); color: var(--story-ink); }
.start-choice:nth-child(2) { background: var(--story-paper); color: var(--story-ink); }
.start-choice:last-child { border-right: 0; background: var(--story-fill); color: var(--story-fill-ink); }
.start-choice b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 560; letter-spacing: -0.025em; line-height: 1; }
.start-choice small { margin-top: 4px; color: currentColor; font-size: 8px; font-weight: 740; }
.start-choice i { font-size: 22px; font-style: normal; }