/* ==========================================================================
   Crush Map — placeholder site stylesheet
   Plain CSS. No framework, no build step, no npm, no JS.
   Palette + type roles come from BOARD_DESIGN_DIRECTION.md ("03 · Fire-Season Milk").
   ========================================================================== */

/* --- Palette ---------------------------------------------------------------
   Exact hex values from the design direction. The ROLE comments matter more
   than the colors: two of these are decorative-only because they are low
   contrast against the page background. */
:root {
  --milk-sun: #F1DCC3;        /* page background, everything */
  --smoke: #C8B6A6;           /* sky band, hairlines, dividers */
  --hazed-stubble: #C7A483;   /* mountain mass, muted fills */
  --peach-smoke: #D99E7E;     /* accent: large display text + active states ONLY (1.7:1 on milk-sun) */
  --dust-sage: #8D9083;       /* secondary band, quiet UI chrome — decorative only (2.4:1 on milk-sun) */
  --veiled-basalt: #6B605A;   /* body text — 4.58:1 on milk-sun, passes WCAG AA for normal text */
  --wine-maroon: #7B2D3B;     /* rules/dividers and small marks only — 6.9:1 on milk-sun */
  --paper: #FAF6F0;           /* card and block surface */

  /* --- Type roles ---------------------------------------------------------
     The direction names three roles and no faces. These are the closest free
     stand-ins, with system fallbacks so the page still reads offline:
       1. Display  = heavy condensed woodtype/slab, all caps, tight tracking
       2. Section  = transitional serif, sentence case
       3. Label    = monospace, uppercase, letterspaced
     A fourth face is never needed. Do not mix the roles. */
  --font-display: "Oswald", "Haettenschweiler", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-section: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-label: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* One spacing step, reused. Keeps the page calm instead of ad hoc. */
  --gap: 1.5rem;
}

/* --- Reset-ish -------------------------------------------------------------
   Only what we actually need. No global framework habits. */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--milk-sun);
  /* Body copy is always veiled-basalt on milk-sun. Never override this for prose. */
  color: var(--veiled-basalt);
  font-family: var(--font-section);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Mobile-first: the column is narrow, so long lines never happen on a phone. */
}

/* --- Layout ---------------------------------------------------------------
   A single narrow column, centred on wide screens. No grids, no sidebars. */
.wrap {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}

/* --- Masthead ------------------------------------------------------------- */
.masthead { margin-bottom: var(--gap); }

/* Display role: the wordmark. Uppercase, tight tracking, heavy. */
.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 13vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  /* Veiled-basalt, not peach-smoke: peach-smoke is 1.7:1 here and would fail
     contrast at any size. Peach-smoke is used for the sun and active states. */
  color: var(--veiled-basalt);
}

/* On inner pages the wordmark is a link home. It must still look like the
   wordmark, not a text link: no maroon underline, no paper hover block.
   Keyboard focus keeps the global focus-visible outline. */
.wordmark a { color: inherit; border-bottom: 0; }
.wordmark a:hover, .wordmark a:focus { background-color: transparent; border-bottom: 0; }

/* Section role: the one-line promise. Sentence case, slightly larger. */
.promise {
  margin: 0.75rem 0 0;
  font-family: var(--font-section);
  font-size: 1.1875rem;
  line-height: 1.4;
}

/* Label role: metadata lines. Uppercase monospace, letterspaced. */
.label {
  margin: 0.875rem 0 0;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* --- Strata motif ----------------------------------------------------------
   One flat strata illustration, used as landscape/header art only on this
   placeholder. On the real map it becomes the cluster navigation; here it is
   decoration, so it is aria-hidden and collapses to a slim band on phones. */
.strata {
  display: block;
  width: 100%;
  /* height:auto + the viewBox keeps the bands proportional: a slim strip on a
     phone (~50px) and a wider one on a laptop (~92px). No cropping, no stretching. */
  height: auto;
  margin: 1.25rem 0 var(--gap);
  border-top: 1px solid var(--smoke);
  border-bottom: 1px solid var(--smoke);
}
.band-sky { fill: var(--smoke); }
.band-mountain { fill: var(--hazed-stubble); }
.band-sage { fill: var(--dust-sage); }
.band-hill { fill: var(--veiled-basalt); }
.sun { fill: var(--peach-smoke); }

/* --- Headings -------------------------------------------------------------
   Section role throughout the page body. Sentence case, never all caps. */
h2 {
  margin: 2rem 0 0.5rem;
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--veiled-basalt);
}

p { margin: 0 0 0.875rem; }

/* --- Links -----------------------------------------------------------------
   Text stays veiled-basalt (readable); wine-maroon carries the weight as an
   underline rule, which is the only job the palette gives maroon. */
a {
  color: var(--veiled-basalt);
  text-decoration: none;
  border-bottom: 1px solid var(--wine-maroon);
}
a:hover, a:focus {
  /* Active state. The background is paper (5.7:1 with veiled-basalt text) rather
     than peach-smoke (2.7:1 — would make the link text unreadable). Peach-smoke
     marks the state on the underline instead, which is what the palette allows. */
  background-color: var(--paper);
  border-bottom-color: var(--peach-smoke);
  border-bottom-width: 2px;
}
a:focus-visible {
  outline: 2px solid var(--wine-maroon);
  outline-offset: 2px;
}

/* --- Page nav -------------------------------------------------------------- */
.page-nav {
  margin: 0 0 var(--gap);
  padding: 0.75rem 0;
  border-top: 1px solid var(--smoke);
  border-bottom: 1px solid var(--smoke);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Nav links start with no visible underline, so hover/focus adds one. */
.page-nav a { border-bottom: 1px solid transparent; }
.page-nav a:hover, .page-nav a:focus { background-color: var(--paper); border-bottom-color: var(--peach-smoke); }
.page-nav .sep { padding: 0 0.5rem; color: var(--dust-sage); }

/* --- Cards / blocks --------------------------------------------------------
   Paper surface with a smoke hairline. Flat, poster-like: no shadows. */
.card {
  margin: 1rem 0;
  padding: 1rem 1.125rem;
  background-color: var(--paper);
  border: 1px solid var(--smoke);
}
.card h2:first-child, .card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* Maroon rule for the drawing rules block, matching "rules" usage. */
.card--rules { border-top: 2px solid var(--wine-maroon); }

/* A quieter aside. Dust-sage is a border here, never text. */
.note {
  padding-left: 0.875rem;
  border-left: 3px solid var(--dust-sage);
  font-size: 0.9375rem;
}

/* The verbatim disclaimer and other small print. */
.small { font-size: 0.875rem; line-height: 1.55; }

/* --- Call-to-action button --------------------------------------------------
   A link styled as a button (it opens a mailto:, so it must stay an <a>).
   Paper surface + maroon rule, label type. Text stays veiled-basalt on paper
   (5.7:1). Min height 44px so it's an easy thumb target on a phone. */
.cta {
  display: inline-block;
  min-height: 44px;
  padding: 0.75rem 1.125rem;
  background-color: var(--paper);
  border: 2px solid var(--wine-maroon);
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* Active state: peach-smoke moves to the border (the one job it's allowed). */
.cta:hover, .cta:focus {
  background-color: var(--paper);
  border-color: var(--peach-smoke);
  border-bottom-width: 2px;
}

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wine-maroon);
}
.site-footer p { margin: 0 0 0.75rem; }
.site-footer p:last-child { margin-bottom: 0; }

/* --- Slightly wider screens ------------------------------------------------
   Nothing changes structurally; the type just breathes a little. */
@media (min-width: 34rem) {
  .wrap { padding: 2.5rem 1.5rem 3.5rem; }
  body { font-size: 1.125rem; }
}