/**
 * Bike the Katy: "The Brochure" tokens and type.
 *
 * Warm paper, asymmetric editorial grid, hairline rules, serif display.
 * Mid-century national-park brochure: institutional, calm, trustworthy.
 *
 * Markup carries no colour decisions. Everything visual resolves through the
 * custom properties below, which is what makes a future reskin cheap.
 *
 * The contrast values were arrived at by fixing real failures. Read the notes
 * before lightening anything.
 */

:root {
  /* ── ground ─────────────────────────────────────────────────────── */
  --paper: #F2EEE3;
  --paper-raised: #FBF8F0;
  --canvas: #E7E3D8;
  --photo-bg: #DCD6C6;

  /* ── ink ────────────────────────────────────────────────────────── */
  --ink: #191A15;
  --ink-body: #3E4239;
  --ink-2: #5E6157;
  /* 5.1:1 on --paper. Micro labels sit here. Do not lighten. */
  --label-ink: #62665B;
  --rule: #CFC8B6;
  --rule-2: #E0DACA;
  /* Disabled glyphs only (the empty W/R/C chips). Never prose. */
  --disabled: #A6A093;

  /* ── accent ─────────────────────────────────────────────────────── */
  /* A brighter #C4442A fails at label sizes on cream. This is the floor. */
  --accent: #A93A22;
  --accent-hover: #8F2F1C;
  --accent-soft: #E8B9A6;
  --river: #276A80;
  --river-tint: #AFCEDA;

  /* ── dark bands: the 360 band, the footer, the mobile menu sheet ── */
  --dark: #191A15;
  --dark-head: #F4F0E6;
  --dark-fg: #EDE9DC;
  --dark-body: #A8AC9C;
  --dark-dim: #8B9081;
  --dark-accent: #E08A6E;
  --dark-rule: rgba(237, 233, 220, .16);
  --dark-rule-2: rgba(237, 233, 220, .28);
  --well: #0E100B;

  /* ── green corridor band ────────────────────────────────────────── */
  --band: #3B6B4A;
  --band-head: #FBF8F0;
  --band-fg: #EFEEE0;
  --band-body: #DCE7DA;
  --band-eyebrow: #D6E4D4;
  --band-bar: #E08A6E;

  /* ── map ────────────────────────────────────────────────────────── */
  --map-trail-ghost: #C6BEA9;
  --map-land: #FBF8F0;

  /* ── grade roles ────────────────────────────────────────────────────
     Five distinct jobs per grade, and they do not substitute for each other.
     `ink` is text on paper, `color` is a fill (dot, bar, swatch), `cell` is a
     selected-cell background. On-paper status green is #3B6B4A; #4E8A5C is the
     swatch colour only. */
  --good-ink: #3B6B4A;  --good-color: #4E8A5C;  --good-cell: #EFF3EA;
  --soft-ink: #8E6614;  --soft-color: #C99A2E;  --soft-cell: #F6F0DF;
  --muddy-ink: #A93E24; --muddy-color: #A93A22; --muddy-cell: #F7E9E3;
  --flood-ink: #276A80; --flood-color: #276A80; --flood-cell: #E4EEF2;

  /* ── type families ──────────────────────────────────────────────────
     Newsreader carries display, headings, numerics and serif body.
     Jost carries UI, labels, nav, buttons and dense table text. Nothing else. */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ui: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── measure and rhythm ─────────────────────────────────────────────
     The design is drawn on a 1240 artboard. Content caps there and centres;
     backgrounds still bleed, because a band stopping mid-screen looks worse
     than one that runs. --maxw is the one-line dial if this ever wants 1400. */
  --maxw: 1240px;
  --gutter: 44px;
  --sec-pad-t: 40px;
  --sec-pad-b: 44px;
  --header-h: 56px;
}

/* ── Desktop type scale (design width 1240) ─────────────────────────── */

.t-h1        { font: 200 72px/.93 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.t-h1 em     { font-style: italic; font-weight: 300; }
.t-page-h1   { font: 200 56px/1 var(--serif); letter-spacing: -.02em; }
.t-h2        { font: 200 42px/1.06 var(--serif); letter-spacing: -.015em; }
.t-h2-sub    { font: 200 32px/1.06 var(--serif); }
.t-h2-sec    { font: 200 38px/1.04 var(--serif); letter-spacing: -.015em; }
.t-h3        { font: 300 20px/1.15 var(--serif); }
.t-h3-lead   { font: 300 27px/1.1 var(--serif); }

.t-lede      { font: 400 17px/1.6 var(--serif); }
.t-copy      { font: 400 15.5px/1.62 var(--serif); }
.t-copy-sm   { font: 400 14.5px/1.6 var(--serif); }

.t-num       { font: 200 62px/1 var(--serif); }
.t-num-page  { font: 200 52px/1 var(--serif); }
.t-num-md    { font: 400 24px/1 var(--serif); }
.t-num-sm    { font: 400 20px/1 var(--serif); }

/* Eyebrow, micro label, table header, note: the small-caps sizes. Below these
   the letterspacing stops doing its job. */
.eyebrow     { font: 500 10.5px/1 var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.label       { font: 500 9.5px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--label-ink); margin: 0; }
.label--tight{ font-size: 9px; letter-spacing: .18em; }
.note        { font: 400 11.5px/1.5 var(--ui); color: var(--label-ink); margin: 0; }
.ui          { font: 400 13px/1.5 var(--ui); }

/* Between 1024 and 1239 the layout stays as drawn but goes fluid. */
@media (min-width: 768px) and (max-width: 1239px) {
  :root { --gutter: 32px; }
  .t-h1 { font-size: 60px; }
  .t-page-h1 { font-size: 48px; }
  .t-h2 { font-size: 36px; }
}

/* ── Mobile type scale (design width 390) ───────────────────────────────
   Floors: no prose below 12.5px desktop or 12px mobile, body copy never below
   13px on mobile, form inputs never below 16px or iOS zooms the page. */
@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --sec-pad-t: 26px;
    --sec-pad-b: 28px;
    --header-h: 52px;
  }

  .t-h1       { font-size: 42px; line-height: .98; }
  .t-page-h1  { font-size: 38px; line-height: 1; }
  .t-h2       { font-size: 29px; line-height: 1.08; }
  .t-h2-sub   { font-size: 26px; line-height: 1.08; }
  .t-h2-sec   { font-size: 27px; line-height: 1.06; }
  .t-h3       { font-size: 19px; }
  .t-h3-lead  { font-size: 22px; line-height: 1.12; }

  .t-lede     { font-size: 15.5px; line-height: 1.55; }
  .t-copy     { font-size: 15px; line-height: 1.6; }
  .t-copy-sm  { font-size: 14.5px; line-height: 1.6; }

  .t-num      { font-size: 34px; }
  .t-num-page { font-size: 32px; }
  .t-num-md   { font-size: 24px; }

  .eyebrow    { font-size: 10px; letter-spacing: .22em; margin-bottom: 12px; }
  .label      { font-size: 9px; letter-spacing: .18em; }
  .ui         { font-size: 13px; }
}