:root {
  --paper: #f4f0e6;
  --paper-2: #ebe5d7;
  --card: #fbf9f4;
  --ink: #1d1b17;
  --ink-2: #57524a;
  --ink-3: #8b8578;
  --line: #d8d0bf;
  --blue: #3b82f6;
  --blue-deep: #1d4ed8;
  --blue-soft: #bfdbfe;
  --ember: #f97316;
  --ember-deep: #c2410c;
  --ember-soft: #fed7aa;
  --red: #b91c1c;
  --calm: #3f7d52; /* a low exposure grade */
  --night: #0c0f14;
  --night-2: #151a21;
  --night-ink: #ece8df;
  --night-ink-2: #a6a198;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --radius: 14px;
  --bar: 52px; /* top bar */
  --screen: calc(100vh - var(--bar)); /* one screen below the top bar */
}
@supports (height: 100svh) { :root { --screen: calc(100svh - var(--bar)); } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--bar); padding: 0 24px;
  background: rgba(244, 240, 230, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(29, 27, 23, 0.08);
  font-size: 14px;
}
.brand { display: inline-flex; align-items: center; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; margin-right: 8px; flex: none; }
.brand span { color: var(--ink-3); font-weight: 500; letter-spacing: 0.02em; text-transform: none; font-size: 14px; margin-left: 8px; }
.topbar nav { display: flex; gap: 18px; color: var(--ink-2); }
.topbar nav a { text-decoration: none; font-size: 13px; }
.topbar nav a:hover { color: var(--ink); }
.topbar nav a.current { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: 500 13px var(--sans); text-decoration: none; cursor: pointer;
}
.button.ghost { background: transparent; color: inherit; border-color: currentColor; }
[hidden], .button[hidden] { display: none !important; } /* sections and links shown only when there is something to show */
.button.small { padding: 5px 11px; font-size: 12px; }
.button[aria-pressed="true"] { background: currentColor; }
.night .button[aria-pressed="true"] { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.paper .button[aria-pressed="true"], .button.ghost[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Sections */
section { position: relative; }
.night { background: var(--night); color: var(--night-ink); }
.paper { background: var(--paper); }
/* Each content section has its own soft tint, from its own colours, so the report doesn't read as one flat sheet */
.paper.tint-warm { background: #f6e8e0; }  /* loud days: the noise reds */
.paper.tint-cool { background: #e7edf0; }  /* rhythm: the sky, landings blue */
.paper.tint-sand { background: #ece4d4; }  /* heights: the ground under the approach */
.paper.tint-light { background: #fbf9f4; } /* sound: a quiet page */
.wrap { max-width: 1180px; margin: 0 auto; padding: 88px 24px; }
.kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.night .kicker { color: var(--night-ink-2); }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; }
h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 620px; margin: 14px 0 0; }
.night .lede { color: var(--night-ink-2); }
.note { font-size: 13px; color: var(--ink-3); }
.night .note { color: var(--night-ink-2); }

/* Maps */
.map-full { position: relative; height: var(--screen); min-height: 560px; }
.map-card { position: relative; height: 560px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map { position: absolute; inset: 0; }
canvas.overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
.mapboxgl-ctrl-logo { opacity: 0.6; }

/* Floating caption over a full map */
.caption {
  position: absolute; left: 24px; top: 24px; z-index: 5;
  width: min(430px, calc(100% - 48px));
  padding: 24px 26px; border-radius: var(--radius);
  background: rgba(251, 249, 244, 0.92); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(29, 27, 23, 0.10);
}
.night .caption { background: rgba(12, 15, 20, 0.78); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.06); }
.caption p { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; }
.night .caption p { color: var(--night-ink-2); }
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.date-pick { position: relative; display: inline-flex; }
.date-pick button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); padding: 6px 12px; font: 500 12px var(--sans); cursor: pointer; }
.date-pick button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.date-pick input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }

/* Hero */
.hero-cards { position: absolute; left: 24px; top: 20px; z-index: 5; width: min(480px, calc(100% - 48px)); display: flex; flex-direction: column; gap: 10px; }
.hero .hero-cards .caption { position: relative; left: auto; top: auto; width: auto; padding: 22px 26px; }
.hero .hero-cards .place-card { z-index: 2; } /* its numbers' pop-ups open over the map card below */
.hero .hero-cards .map-key { z-index: 1; }
.hero .hero-cards .map-key { padding: 16px 26px 18px; }
.map-key .kicker { margin: 0 0 4px; }
.hero h1 { font-size: clamp(30px, 3.6vw, 46px); }
.hero .stats { grid-template-columns: repeat(3, 1fr); gap: 14px 18px; margin-top: 18px; }
.hero .stat b { font-size: 28px; }
/* The exposure grade is the headline: big, coloured by level, with a ten-step meter */
.hero .stat.grade { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hero .stat.grade b { font-size: 64px; color: var(--grade); white-space: nowrap; }
.hero .stat.grade b small { font-size: 20px; }
.hero .stat.grade span { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.grade-meter { display: flex; gap: 3px; }
.grade-meter i { width: 16px; height: 6px; border-radius: 2px; background: var(--line); }
.grade-meter i.on { background: var(--grade); }
.hero .sub { color: var(--ink-2); margin: 12px 0 0; font-size: 15px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: 26px; }
.stat b { display: block; font: 500 40px/1 var(--serif); letter-spacing: -0.02em; }
.stat b small { font: 500 16px var(--sans); color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.stat span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.stat em { font-style: normal; color: var(--ink-3); font-size: 12px; }
.grade b { color: var(--red); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--ink-2); margin-top: 18px; }
.night .legend { color: var(--night-ink-2); }
.legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; }
/* Overview key: one measure in four labelled steps */
.key-switches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.key-switches .segmented button { padding: 6px 11px; font-size: 12px; }
.map-key .key-title { font: 500 22px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.map-key .key-title .info { font: 400 14px var(--sans); }
.map-key .key-sub { font-size: 13px; color: var(--ink-2); margin: 3px 0 12px; }
/* Details on demand: a pop-up on hover (laptops), a bottom sheet on phones */
.hero .stat, .info { position: relative; outline: none; }
.hero .stat .more, .info .more { display: none; position: absolute; z-index: 30; left: -8px; top: calc(100% + 6px); width: 260px; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 400 12px/1.5 var(--sans); font-style: normal; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); }
.info { display: inline-flex; margin-left: 6px; color: var(--ink-3); vertical-align: -2px; font-weight: 400; }
@media (hover: hover) {
  .hero .stat, .info { cursor: help; }
  .hero .stat:hover .more, .hero .stat:focus .more, .info:hover .more, .info:focus .more { display: block; }
}
.info.open .more { display: block; }
.hero .stat span .ti { margin-left: 4px; color: var(--ink-3); font-size: 13px; vertical-align: -1px; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(29, 27, 23, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-height: 78vh; overflow-y: auto; padding: 10px 20px 24px; background: var(--card); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2); transform: translateY(105%); transition: transform 0.25s ease; }
.sheet.open { transform: none; }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
.sheet h3 { font: 500 20px var(--serif); margin: 0 0 4px; }
.sheet dl { margin: 0 0 16px; }
.sheet dt { font-weight: 600; margin-top: 14px; }
.sheet dd { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.sheet .button { width: 100%; justify-content: center; }
.key-steps { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 4px; align-items: center; }
.key-steps i { display: block; height: 14px; border-radius: 3px; }
.key-steps span { font-size: 12px; color: var(--ink-2); }
.key-steps .k { font-size: 12px; font-weight: 600; color: var(--ink); padding-right: 6px; }
/* The pin's card */
.marker-home { cursor: pointer; outline: none; }
.pin-popup .mapboxgl-popup-content { padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 400 12px/1.45 var(--sans); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); }
.pin-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: var(--ink); }
.pin-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { border-bottom-color: var(--ink); }
.pin-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--ink); }
.pin-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--ink); }
.pin-popup b { display: block; font-size: 13px; font-weight: 600; }
.pin-popup span { display: block; color: #cfc9bd; }
.pin-popup .pin-loudest { margin-top: 6px; color: var(--paper); }
.night .pin-popup .mapboxgl-popup-content { background: var(--paper); color: var(--ink); }
.night .pin-popup span { color: var(--ink-2); }
.night .pin-popup .pin-loudest { color: var(--ink); }
.night .pin-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: var(--paper); }
.year-text { display: flex; flex-direction: column; gap: 3px; margin-left: 6px; min-width: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Replay */
/* A real day: one card (the day, its figures, the day picker) and the overview's bar with the day's timeline */
.day-card h2 { font-size: 30px; }
.day-card .stats.day-stats { grid-template-columns: auto auto auto; justify-content: start; gap: 12px 28px; margin-top: 16px; }
.day-stats .stat b { font-size: 26px; white-space: nowrap; }
.day-choice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.day-choice .segmented button { padding: 6px 12px; font-size: 12px; }
.caption p.day-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin: 12px 0 0; max-width: 34em; }
.day-note .ti { font-size: 15px; color: var(--ink-3); margin-top: 1px; }
.caption p.day-key { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ink-2); margin: 14px 0 0; }
.day-key .sw { display: inline-block; width: 16px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.icon-button.speed { font: 600 12px var(--sans); }
canvas.strip { flex: 1 1 auto; min-width: 0; width: 100%; height: 72px; display: block; cursor: pointer; touch-action: none; }
.year-readout b.loud { color: var(--ember-deep); }

/* The overview: the map, and under it a full-width strip with the year (play controls, the month, a draggable month bar) */
.hero .map-full { display: flex; flex-direction: column; }
.map-area { position: relative; flex: 1 1 auto; min-height: 0; }
.year-bar { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 10px 20px 8px; border-radius: var(--radius); background: rgba(251, 249, 244, 0.94); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(29, 27, 23, 0.10); }
.year-side { flex: 0 0 min(420px, 38%); display: flex; align-items: center; gap: 10px; }
.icon-button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; padding: 0; }
.icon-button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.icon-button i, .icon-button span { pointer-events: none; } /* the click is always the button's */
.icon-button.big { width: 46px; height: 46px; font-size: 22px; background: var(--ink); color: var(--paper); flex: none; }
.year-side .icon-button:not(.big) { flex: none; }
.year-label { font: 500 22px/1 var(--serif); min-width: 150px; }
.year-readout { font-size: 13px; color: var(--ink-2); }
.year-readout b { color: var(--ink); font-weight: 600; }
svg.year-months { flex: 1 1 auto; min-width: 0; width: 100%; height: 72px; display: block; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; margin-top: 4px; }

/* Two-column layouts */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 40px; }
.cols.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.fact b { display: block; font: 500 30px/1.1 var(--serif); }
.fact span { font-size: 13px; color: var(--ink-2); }

/* Loud days and quiet days */
/* Loud days: the days as a histogram, and what decides them */
.ld-cols { margin-top: 26px; align-items: start; }
svg.ld-chart { width: 100%; height: 270px; display: block; overflow: visible; }
.ld-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.ld-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ld-legend b { color: var(--ink); font-weight: 600; }
.ld-legend small { color: var(--ink-3); font-size: 12px; }
.ld-why { background: rgba(251, 249, 244, 0.7); border-radius: var(--radius); padding: 22px 24px; }
.ld-why .kicker { margin: 0 0 6px; }
.ld-why h3 { font: 500 24px/1.2 var(--serif); margin: 0; }
.ld-why .why-sub { font-size: 14px; color: var(--ink-2); margin: 6px 0 12px; }
.why-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.why-row > .ti { font-size: 20px; color: var(--ink-2); justify-self: center; }
.why-row b { display: block; font-size: 14px; font-weight: 600; }
.why-row span { font-size: 13px; color: var(--ink-2); }
.why-row em { font-style: normal; text-align: right; font-size: 12px; color: var(--ink-2); }
.why-row em b { font: 500 24px/1 var(--serif); color: var(--ink); }
.why-bars { display: flex; gap: 4px; align-items: flex-end; height: 84px; margin-top: 8px; }
.why-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.why-bars i { width: 100%; background: #c2352b; border-radius: 3px 3px 0 0; opacity: 0.85; }
.why-bars span { font-size: 11px; color: var(--ink-3); }
.why-share { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.why-share p { margin: 0 0 6px; }
.why-share div { display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px; align-items: center; margin-top: 4px; }
.why-share i { display: block; height: 6px; border-radius: 3px; background: rgba(29, 27, 23, 0.08); overflow: hidden; }
.why-share i b { display: block; height: 100%; background: var(--ink-2); }
.why-share em { font-style: normal; text-align: right; }
.fact.replay { cursor: pointer; border-radius: 8px; }
.fact.replay:hover span, .fact.replay:focus span { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fact.replay .ti { font-size: 12px; vertical-align: -1px; }
/* Before you decide: what to check here, and the way to a report for another address */
.next-cols { margin-top: 24px; align-items: start; }
ul.tips { list-style: none; margin: 0; padding: 0; counter-reset: tip; }
ul.tips li { position: relative; padding: 12px 0 12px 40px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); counter-increment: tip; }
ul.tips li:first-child { border-top: 0; }
ul.tips li::before { content: counter(tip); position: absolute; left: 0; top: 11px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 13px/26px var(--sans); text-align: center; }
ul.tips li b { color: var(--ink); font-weight: 600; }
.order-card { background: var(--card); border-radius: var(--radius); padding: 26px 28px; box-shadow: 0 10px 30px rgba(29, 27, 23, 0.08); }
.order-card .kicker { margin: 0 0 6px; }
.order-card h3 { font: 500 26px/1.2 var(--serif); margin: 0 0 10px; }
.order-card p { color: var(--ink-2); font-size: 15px; margin: 0 0 18px; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.order-actions .button { text-decoration: none; }
/* Rhythm: the facts under the clock, and the airport's night rules */
.rhythm-facts { margin-top: 22px; }
.rhythm-facts .fact b { font-size: 26px; }
.rhythm-rules { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); max-width: 900px; }
.rhythm-rules:empty { display: none; }
/* Research sources: small links named after their site */
a.src { display: inline-block; margin: 0 6px 0 0; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
a.src:hover { border-color: var(--ink-3); color: var(--ink); }
/* Sound: the planes behind the loud events, small and last */
.aircraft-mix { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.aircraft-mix .kicker { margin: 0 0 8px; }
.ac-types { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.ac-types b { font-weight: 600; color: var(--ink); margin-right: 5px; }
.aircraft-mix .note { margin: 6px 0 0; }
/* What's coming: the airport's planned changes and more, researched */
.coming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 24px; }
.change { background: rgba(251, 249, 244, 0.8); border-radius: var(--radius); padding: 16px 18px; }
.change-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.change .status { white-space: nowrap; flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #e3ddd0; color: var(--ink-2); }
.change .s-approved, .change .s-under-construction { background: #fbe0d2; color: var(--ember-deep); }
.change .s-in-effect { background: #dbe7df; color: var(--calm); }
.change .s-consultation, .change .s-proposed { background: #e3e8f3; color: #3a4f7a; }
.change .when { font-size: 12px; color: var(--ink-3); }
.change h3 { font: 500 19px/1.25 var(--serif); margin: 0 0 6px; }
.change p { font-size: 14px; color: var(--ink-2); margin: 0 0 6px; }
.change .where b { color: var(--ink); font-weight: 600; }
.change .srcs, .coming-more .srcs { margin: 8px 0 0; }
.coming-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; margin-top: 22px; }
.coming-more h4 { font: 600 14px var(--sans); margin: 0 0 6px; }
.coming-more p { font-size: 14px; color: var(--ink-2); margin: 0; }
.coming-more ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.coming-more li { margin-bottom: 6px; } .coming-more li span { display: block; font-size: 12px; color: var(--ink-3); }
#coming-note { margin-top: 18px; }
/* Rhythm: the map card's key */
.map-card .map-key { position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; border-radius: 10px; background: rgba(251, 249, 244, 0.92); font-size: 12px; color: var(--ink-2); max-width: calc(100% - 70px); }
.map-card .map-key b { font: 500 16px var(--serif); color: var(--ink); }
.map-card .map-key i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.map-card .map-key small { flex-basis: 100%; color: var(--ink-3); }
.tooltip { position: fixed; z-index: 100; pointer-events: none; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.45; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.1s; max-width: 260px; }
.tooltip b { font-weight: 600; }
.segmented { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.segmented button { border: 0; background: transparent; padding: 7px 14px; font: 500 13px var(--sans); cursor: pointer; color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.scale { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); margin-top: 14px; flex-wrap: wrap; }
.scale .ramp { display: flex; }
.scale .ramp i { width: 18px; height: 12px; display: block; }

/* Clock, wind, profile */
svg.clock24, svg.rose { width: 100%; max-width: 460px; display: block; margin: 0 auto; }
svg.profile { width: 100%; display: block; }
.axis text { font: 12px var(--sans); fill: var(--ink-3); }
.axis line, .axis path { stroke: var(--line); }

/* Sound */
/* The sound scale: everyday sounds left of the bar, this place's peaks right of it (positions set in app.js) */
.ruler { position: relative; height: 470px; margin-top: 8px; }
.ruler .track { position: absolute; top: 12px; bottom: 12px; width: 10px; border-radius: 5px; background: linear-gradient(to top, #dcefe0, #fbe3b8 55%, #f3b4b0); }
.ruler .thing { position: absolute; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ruler .thing small { margin-left: 6px; font-size: 11px; color: var(--ink-3); }
.ruler .thing i { font-size: 17px; color: var(--ink-3); }
.ruler .mark { position: absolute; z-index: 2; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; background: var(--card); transform: translateY(-50%); }
.ruler .mark-label { position: absolute; right: 0; transform: translateY(-50%); font-size: 12px; line-height: 1.3; }
.ruler .mark-label b { display: block; font-size: 13px; font-weight: 600; }
.ruler .mark-label span { color: var(--ink-2); }
.ruler svg.leaders { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.ruler.phone .thing i { display: none; }
.ruler.phone .thing { font-size: 12px; }
/* The Lden map's key: three bands, each with what it means */
#trail-scale .step i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
#trail-note { font-size: 14px; color: var(--ink-2); }
#sound-scale { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12px; color: var(--ink-2); }
#sound-scale .lden-title { flex-basis: 100%; font-weight: 600; color: var(--ink); }
#sound-scale .lden-band i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
#sound-scale .lden-band b { color: var(--ink); font-weight: 600; }

/* Pin */
.up { color: var(--red); } .down { color: #15803d; }
.marker-home { width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; background: var(--ink); color: #fff; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; }
.marker-home svg { width: 17px; height: 17px; display: block; margin-top: -1px; }

footer { background: var(--ink); color: #d9d4c7; }
footer .wrap { padding: 64px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 14px; }
footer h3 { font: 500 18px var(--serif); color: #fff; margin: 0 0 10px; }
footer p { margin: 0 0 10px; color: #b9b3a6; }

/* Laptops and desktops: every section is exactly one screen, and each scroll moves one section. */
@media (min-width: 861px) and (min-height: 600px) {
  html { scroll-snap-type: y mandatory; scroll-padding-top: var(--bar); }
  body > section { min-height: var(--screen); scroll-snap-align: start; scroll-snap-stop: always; }
  body > section.paper { display: flex; flex-direction: column; justify-content: center; }
  body > section.paper > .wrap { width: 100%; padding-top: 28px; padding-bottom: 28px; }
  body > section .lede { max-width: 760px; }
  body > section .cols { margin-top: 24px; }
  footer { scroll-snap-align: end; }
  svg.clock24, svg.rose { max-height: clamp(300px, calc(var(--screen) - 300px), 460px); }
  #rhythm .map-card { height: clamp(300px, calc(var(--screen) - 300px), 560px); }
  .trail-cols { align-items: start; }
  #trail .map-card { height: clamp(280px, calc(var(--screen) - 330px), 560px); }
  #sound .map-card { height: clamp(260px, calc(var(--screen) - 420px), 520px); }
  #sound .ruler { height: clamp(260px, calc(var(--screen) - 420px), 470px); }
  #sound .facts { margin-top: 18px; }
  #pin .caption { width: min(400px, calc(100% - 48px)); }
}

/* Short laptop screens: a more compact overview card, so it stays clear of the year strip. */
@media (min-width: 861px) and (max-height: 760px) {
  .hero-cards { top: 14px; gap: 8px; }
  .hero .hero-cards .caption { padding: 18px 24px; }
  .hero .hero-cards .map-key { padding: 12px 24px 14px; }
  .hero .place-card .kicker { display: none; }
  .hero h1 { font-size: 34px; }
  .hero .stats { margin-top: 12px; gap: 10px 18px; }
  .hero .stat.grade { padding-bottom: 12px; }
  .hero .stat.grade b { font-size: 52px; }
  .map-key .key-sub { margin-bottom: 8px; }
  .key-switches { margin-bottom: 8px; }
}

@media (max-width: 860px) {
  .topbar nav { display: none; }
  .cols, .cols.wide-left, footer .wrap { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .ld-group { grid-template-columns: 1fr; gap: 8px; }
  .map-full { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .map-full .map { position: relative; height: 70vh; }
  .caption, .hero .caption { position: relative; left: auto; top: auto; width: auto; margin: 0; border-radius: 0; box-shadow: none; }
  .hero-cards { position: static; width: auto; gap: 0; }
  .hero .hero-cards .map-key { border-top: 1px solid var(--line); }
  .year-bar { position: relative; left: auto; right: auto; bottom: auto; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
  .year-bar { flex-direction: column; align-items: stretch; gap: 8px; }
}
/* Runways and their numbers: above the maps' canvas overlays, under the pin and its card. */
svg.runway-layer { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 1; }
svg.runway-layer line { stroke-linecap: round; }
svg.runway-layer .casing line { stroke: #fff; stroke-width: 7px; }
svg.runway-layer .line line { stroke: var(--ink); stroke-width: 3.5px; }
svg.runway-layer text { font: 600 12px var(--sans); fill: var(--ink); stroke: #fff; stroke-width: 3.5px; paint-order: stroke; text-anchor: middle; }
svg.runway-layer.dark .casing line, svg.runway-layer.dark text { stroke: #0c0f14; }
svg.runway-layer.dark .line line { stroke: #d9d4c7; } svg.runway-layer.dark text { fill: #f4f0e6; }
.mapboxgl-marker { z-index: 2; }
.mapboxgl-popup { z-index: 3; }