/* The public front page at "/". Its own stylesheet, not style.css: the app is
   dark and tinted per trip, the front page is paper and fixed, in the same
   family as the other phares.io sites (mono eyebrows, serif display, one
   accent). Fonts are self-hosted under /fonts so the CSP stays default-src
   'self'; licences in /fonts/LICENSES.txt. */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrumentserif-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrumentserif-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/instrumentsans-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrainsmono-normal.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --paper: #f1ecdf;
  --paper-2: #f7f3e8;
  --ink: #262a28;
  --muted: #5f645d;
  --line: #cfc9b8;
  --accent: #0f9488;
  --accent-ink: #062621;
  --dark: #262a28;
  --dark-line: #4a4f4b;
  --dark-muted: #a8ada3;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --gutter: clamp(20px, 5.5vw, 72px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--accent); }
a:hover { color: #0a5e56; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { margin: 0; }

.skip-link {
  position: absolute; left: var(--gutter); top: -40px;
  padding: 8px 12px; background: var(--ink); color: var(--paper);
  border-radius: 4px; text-decoration: none; z-index: 10;
}
.skip-link:focus { top: 12px; }

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.display em { font-style: italic; }
.display .beat { color: var(--accent); font-style: normal; }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: 0.02em;
}
.brand svg { color: var(--accent); }
.header-note { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.site-header nav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
.site-header nav a { color: var(--ink); text-decoration: none; }
.site-header nav a:hover { color: var(--accent); }
.site-header nav a.button-dark { color: var(--paper); }
.site-header nav a.button-dark:hover { color: var(--paper); background: #111412; }

/* Buttons */
.button, .button-dark, .button-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 4px;
  font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.button { background: var(--accent); color: var(--accent-ink); }
.button:hover { background: #0c7b71; color: var(--accent-ink); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: #111412; color: var(--paper); }
.button-outline { background: none; color: var(--ink); border: 1px solid var(--ink); font-weight: 500; }
.button-outline:hover { color: var(--accent); border-color: var(--accent); }
.site-header nav .button-dark { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.text-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
.text-link:hover { color: var(--accent); border-color: var(--accent); }

/* Hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
  padding: 72px var(--gutter) 64px;
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(56px, 8vw, 96px); }
.lede { margin: 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4; max-width: 30ch; }
.hero-description { margin: 0; color: var(--muted); max-width: 46ch; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
.footnotes {
  display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted);
}

/* The figure: a small board in the app's own colours */
.figure {
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  background: #0b1016; border-radius: 12px; color: #dde6ef;
  box-shadow: 0 20px 50px -30px rgba(38, 42, 40, 0.6);
}
.figure-caption { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: #7d8da0; }
.figure-map { border-radius: 8px; background: #0f1620; border: 1px solid #1e2836; overflow: hidden; line-height: 0; }
.figure-map svg { width: 100%; height: auto; }
.figure-rows { display: flex; flex-direction: column; gap: 6px; }
.figure-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; background: #111925; border: 1px solid #1e2836; border-radius: 8px; font-size: 14px;
}
.figure-pills { display: flex; gap: 6px; }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.pill.day { background: rgba(125, 211, 252, 0.12); color: #7dd3fc; }
.pill.maybe { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.pill.mine { background: rgba(45, 212, 191, 0.11); color: #2dd4bf; }

/* Principles strip */
.principles {
  display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  padding: 18px var(--gutter);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted);
}

/* What it does */
.what {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px;
  padding: 80px var(--gutter);
}
.section-intro { display: flex; flex-direction: column; gap: 16px; }
.section-intro h2 { font-size: clamp(36px, 4.2vw, 52px); }
.section-intro p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.6; max-width: 40ch; }
.what-list { display: flex; flex-direction: column; }
.what-list article {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.what-list article:last-child { border-bottom: 1px solid var(--line); }
.numeral { font-family: var(--serif); font-size: 28px; color: var(--accent); line-height: 1; padding-top: 2px; }
.what-list h3 { font-size: 20px; font-weight: 600; }
.what-list p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* How it's built */
.how {
  display: flex; flex-direction: column; gap: 28px;
  padding: 72px var(--gutter) 80px;
  background: var(--dark); color: var(--paper);
}
.how .eyebrow, .how .aside { color: var(--dark-muted); }
.how-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.how-head > div { display: flex; flex-direction: column; gap: 14px; }
.how h2 { font-size: clamp(34px, 3.6vw, 44px); }
.how .aside { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-align: right; line-height: 1.6; }
.how-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.how-grid > div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--dark-line); }
.how-grid .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--dark-muted); }
.how-grid p { margin: 0; font-size: 15px; line-height: 1.5; }

/* Getting in */
.getin {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center;
  padding: 80px var(--gutter);
}
.getin-card {
  display: flex; flex-direction: column; gap: 14px; padding: 28px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2);
}
.getin-card .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.getin-card p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Footer */
.site-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  padding: 26px var(--gutter) 36px;
  border-top: 1px solid var(--line); font-size: 14px; color: var(--muted);
}
.site-footer .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer nav a { color: var(--ink); text-decoration: none; }
.site-footer nav a.quiet { color: var(--muted); }
.site-footer nav a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .hero, .what, .getin { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 44px; padding-bottom: 44px; }
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-note { display: none; }
  .site-header nav a:not(.button-dark) { display: none; }
  .how .aside { text-align: left; }
}
@media (max-width: 520px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .what-list article { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .hero-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}