/* ============================================================================
   Treasure Hunt Builder — the design system.

   It is a treasure hunt, so the page is a chart: aged paper, a dashed trail that
   actually runs down the page, numbered stops along it, and an X at the end. The
   sections ARE the stops. That is the one thing someone should remember.

   The palette is inherited, not invented. Navy, trail orange and cream are the
   colours families already walked a reservoir looking at on the 2026 maps, and
   those maps earned that palette against a hard brief — legible in sunlight, one
   thumb, one bar of signal. The builder and the thing it builds read as one hand.

   Restraint where it counts: one saturated colour on the whole page, and it is
   always the trail. Everything else is ink on old paper.
   ========================================================================== */

:root {
  /* Aged chart */
  --paper:      #F4EAD5;
  --paper-warm: #EADDC0;
  --paper-deep: #E2D2AF;
  --ink:        #1B2B3D;
  --ink-soft:   #46596E;
  --ink-faint:  #8B8168;

  /* The trail. The only saturated thing on the page. */
  --trail:      #E8641C;
  --trail-deep: #B4470D;

  /* Chart furniture */
  --contour:    #C3AC84;
  --water:      #37707F;
  --rule:       #C9B38A;

  --display: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --caps:    'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --body:    'Archivo', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --measure: 60ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --spine: 2.75rem; /* where the dashed trail runs */
}

/* After dark — the same chart by lamplight. Not an inversion: the trail still burns. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #12202E; --paper-warm: #192B3C; --paper-deep: #203449;
    --ink: #F2E7D0; --ink-soft: #B6C4D2; --ink-faint: #7E8DA0;
    --trail: #FF7A33; --trail-deep: #E8641C;
    --contour: #2C425A; --water: #4793A6; --rule: #2C425A;
  }
}
:root[data-theme='dark'] {
  --paper: #12202E; --paper-warm: #192B3C; --paper-deep: #203449;
  --ink: #F2E7D0; --ink-soft: #B6C4D2; --ink-faint: #7E8DA0;
  --trail: #FF7A33; --trail-deep: #E8641C;
  --contour: #2C425A; --water: #4793A6; --rule: #2C425A;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Old paper: a warm stain toward the corners, then grain over everything. Two
   cheap layers that do more for "this is a chart" than any amount of border art. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 0%,   transparent 38%, rgba(140, 106, 52, 0.15) 100%),
    radial-gradient(110% 80% at 92% 100%, transparent 42%, rgba(120,  86, 40, 0.13) 100%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9; pointer-events: none;
  opacity: 0.34; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body::after { mix-blend-mode: screen; opacity: 0.1; }
  :root:not([data-theme='light']) body::before { opacity: 0.5; }
}

/* ── the terrain behind everything ──────────────────────────────────────── */
.terrain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6; }
.terrain svg { width: 100%; height: 100%; display: block; }
.terrain .ring  { fill: none; stroke: var(--contour); stroke-width: 1.1; }
.terrain .ring.major { stroke-width: 2.2; }
.terrain .lake  { fill: var(--water); opacity: 0.14; stroke: var(--water); stroke-width: 1.5; }

.sheet { position: relative; z-index: 1; max-width: 74rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ── the trail: a real dashed path running down the page ────────────────── */
/* The spine is the hunt. Sections hang off it as numbered stops, and it ends at
   an X — so scrolling the page is walking the trail. */
.trail-spine { position: relative; padding-left: calc(var(--spine) + 1.5rem); }
.trail-spine::before {
  content: ''; position: absolute; left: calc(var(--spine) / 2); top: 0.9rem; bottom: 0;
  width: 0; border-left: 3px dashed var(--trail); opacity: 0.45;
}
@media (max-width: 45rem) { :root { --spine: 2rem; } .trail-spine { padding-left: calc(var(--spine) + 0.9rem); } }

/* A stop on the trail. The badge is the same shape as the pins on the real maps. */
.stop { position: relative; padding-top: clamp(3rem, 7vw, 5.5rem); }
.stop:first-child { padding-top: 0; }
.stop > .marker {
  position: absolute; left: calc(var(--spine) / -1 - 1.5rem); top: clamp(3rem, 7vw, 5.5rem);
  width: var(--spine); height: var(--spine);
  display: grid; place-items: center;
  border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  background: var(--trail); color: var(--paper);
  font-family: var(--mono); font-weight: 600; font-size: 0.95rem;
  box-shadow: 0 7px 20px -8px rgba(232, 100, 28, 0.9);
}
.stop:first-child > .marker { top: 0; }
.stop > .marker > span { transform: rotate(45deg); }
@media (max-width: 45rem) { .stop > .marker { left: calc(var(--spine) / -1 - 0.9rem); } }

/* X marks the spot. The end of the trail, and the end of the page. */
.x-marks {
  position: absolute; left: calc(var(--spine) / -1 - 1.5rem); top: 0;
  width: var(--spine); height: var(--spine);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 2.6rem; line-height: 1;
  color: var(--trail); font-weight: 400;
}
@media (max-width: 45rem) { .x-marks { left: calc(var(--spine) / -1 - 0.9rem); } }

/* ── type ───────────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--caps); font-size: 0.9rem; letter-spacing: 0.16em;
  color: var(--trail-deep); margin: 0 0 1rem;
}
h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3rem, 1.5rem + 6.4vw, 7rem);
  line-height: 0.92; letter-spacing: -0.01em; margin: 0 0 1.5rem; text-wrap: balance;
}
h1 em { font-style: italic; color: var(--trail-deep); }
h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.25rem);
  line-height: 1.04; margin: 0 0 1.25rem; text-wrap: balance;
}
h3 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; line-height: 1.15; margin: 0; }
p { max-width: var(--measure); margin: 0 0 1.15rem; color: var(--ink-soft); }
p.lead { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); line-height: 1.48; color: var(--ink); max-width: 44ch; font-family: var(--display); }
strong { color: var(--ink); font-weight: 600; }

/* ── hero ───────────────────────────────────────────────────────────────── */
/* The bottom padding is doing real work: without it the first stop's pin lands
   against the call-to-action buttons and the trail appears to start mid-sentence. */
.hero { padding: clamp(3.5rem, 11vh, 8rem) 0 clamp(3rem, 9vh, 6rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: start; }

/* Marginalia — a chart carries its bearings in the margin. */
.margin-note { font-family: var(--mono); font-size: 0.6875rem; line-height: 2;
  letter-spacing: 0.06em; color: var(--ink-faint); text-align: right; white-space: nowrap; }
.margin-note b { display: block; color: var(--ink-soft); font-weight: 500; }
.compass { display: block; margin: 0 0 1rem auto; width: 3.5rem; height: 3.5rem; opacity: 0.6; }
.compass path, .compass circle { stroke: var(--ink-faint); fill: none; stroke-width: 1.2; }
.compass .n { fill: var(--trail); stroke: none; }
@media (max-width: 62rem) { .margin-note, .compass { display: none; } }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.btn {
  font-family: var(--body); font-weight: 600; font-size: 0.9375rem;
  padding: 0.9rem 1.6rem; border-radius: 2px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 -2px var(--trail); background: var(--trail-deep); border-color: var(--trail-deep); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: transparent; color: var(--trail-deep); }
.btn:focus-visible { outline: 3px solid var(--trail); outline-offset: 3px; }

/* ── the legend: what stops a pack, set like a chart key ────────────────── */
.legend { list-style: none; padding: 0; margin: 1.75rem 0 0; max-width: 52rem; }
.legend li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 1rem;
  padding: 0.95rem 0; border-bottom: 1px dashed var(--rule); align-items: baseline; }
.legend li:first-child { border-top: 1px dashed var(--rule); }
.legend .key { font-family: var(--mono); font-size: 0.8rem; color: var(--trail-deep); }
.legend p { margin: 0; max-width: none; }
.legend b { color: var(--ink); font-weight: 600; }

/* ── inset boxes: the four outputs ─────────────────────────────────────── */
.insets { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin-top: 2rem; }
.inset { background: var(--paper-warm); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.inset .who { font-family: var(--caps); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--ink-faint); }
.inset p { font-size: 0.9375rem; margin: 0; max-width: none; }

/* ── status ────────────────────────────────────────────────────────────── */
.status { display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--paper-deep); border-left: 4px solid var(--trail);
  padding: 1.4rem 1.6rem; margin-top: 2rem; max-width: 44rem; }
.status p { margin: 0; font-size: 0.9375rem; }
.status .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--trail);
  flex: none; margin-top: 0.6rem; animation: ping 2.8s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(232,100,28,0.55); } 70%, 100% { box-shadow: 0 0 0 0.85rem rgba(232,100,28,0); } }

footer { padding: 3.5rem 0 4rem; font-family: var(--mono); font-size: 0.75rem;
  color: var(--ink-faint); letter-spacing: 0.04em; }
footer a { color: var(--trail-deep); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ── one orchestrated arrival ──────────────────────────────────────────── */
/* The land is surveyed, then the trail is walked: contours draw, then each stop's
   pin drops in turn. One sequence on load beats micro-interactions everywhere. */
.terrain .ring, .terrain .lake {
  stroke-dasharray: 3000; stroke-dashoffset: 3000;
  animation: draw 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.stop > .marker { opacity: 0; transform: rotate(-45deg) scale(0.4); animation: drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes drop { to { opacity: 1; transform: rotate(-45deg) scale(1); } }

.rise { opacity: 0; transform: translateY(0.9rem); animation: rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }
  .terrain .ring, .terrain .lake { stroke-dashoffset: 0; }
  .rise, .stop > .marker { opacity: 1; transform: none; }
  .stop > .marker { transform: rotate(-45deg); }
}