/* Shared by every page: fonts, the Ink night palette, base styles, the mark, nav and footer. */

@font-face {
  font-family: 'Atkinson Next';
  src: url('/fonts/atkinson-next-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Next';
  src: url('/fonts/atkinson-next-wght-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
:root {
  color-scheme: dark;

  --bg: #0a0f15;
  --bg-rgb: 10 15 21;
  --bg-raised: #111a25;
  --bg-deep: #06090d;
  --section-safety: linear-gradient(to bottom, #0a0f15, #0c131c 45%, #0b1119);
  --section-faq: #0b1119;
  --closing-glow: radial-gradient(90% 120% at 50% 100%, #10283a 0%, #0b1119 62%);
  --line: #1d2734;
  --line-accent: rgba(124, 237, 185, 0.16);

  --ink: #f6f0e6;
  --text: #cfd8e2;
  --muted: #95a3b2;
  --accent-text: #7cedb9;

  --green: #0b7a4a;
  --green-hover: #0f8f58;
  --on-green: #ffffff;
  --glow: #2fd58c;
  --glow-core: #b4f7d6;
  --glow-halo: #22c07d;
  --glow-halo-opacity: 0.24;
  --pin: #f6f0e6;
  --pin-stroke: #0a0f15;
  --cab: #ffb547;

  --m-land: #0d141c;
  --m-sea: #04070b;
  --m-sea-edge: #1a2430;
  --m-park: #090f15;
  --m-street: #18222e;
  --m-road: #253242;
  --m-motorway: #2f3e50;
  --m-runway: #2a3747;
  --m-airfield: #111a25;
  --l-warm: #ffb547;
  --l-warm-opacity: 0.75;
  --l-white: #fff2da;
  --l-white-opacity: 0.6;
  --l-dim: #d29647;
  --l-dim-opacity: 0.38;
  --l-glow: #ff9a2a;
  --l-glow-opacity: 0.14;
  --map-label: rgba(207, 216, 226, 0.5);
  --map-label-water: rgba(132, 172, 214, 0.7);
  --map-label-park: rgba(140, 182, 160, 0.55);
  --vignette: rgba(3, 6, 10, 0.72);
  --shadow: rgba(0, 0, 0, 0.55);

  --paper: #f7f7f4;
  --paper-ink: #10171e;
  --paper-ink-soft: #55606b;
  --paper-line: #dee2e5;
  --tint: #e3f3eb;
  --tint-ink: #075a36;

  --font-body: 'Atkinson Next', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --gutter: clamp(20px, 5vw, 72px);
  --camera-move: 1.25s cubic-bezier(0.65, 0, 0.25, 1);
  --nav-h: 64px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { color: var(--ink); }

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

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 10px;
  font-weight: 600;
  translate: 0 -200%;
}
.skip:focus { translate: 0 0; }

/* Mark */

.mark-tile { fill: var(--green); }
.mark-route { fill: none; stroke: var(--on-green); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.mark-dot { fill: var(--on-green); }
.mark-ring { fill: none; stroke: var(--on-green); stroke-width: 2.7; }

/* Nav */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: linear-gradient(to bottom, rgb(var(--bg-rgb) / 0.92), rgb(var(--bg-rgb) / 0));
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* Home: solid once the page scrolls (js/app.js). Documents: always solid. */
.nav.is-solid, .doc .nav {
  background: rgb(var(--bg-rgb) / 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 750;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.brand .mark { width: 30px; height: 30px; }

.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }

/* Footer */

.footer {
  position: relative;
  z-index: 6;
  background: var(--bg-deep);
  padding: 36px var(--gutter) 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: var(--muted);
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .mark { width: 26px; height: 26px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer a { color: var(--text); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-copy { width: 100%; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

@media (max-width: 999px) {
  .nav-links a:not(:first-child) { display: none; }
}

@media (min-width: 1000px) {
  :root { --nav-h: 76px; }
}