/*
  Stroll & Savor — Website Style Guide (Field Notes v1.0)
  Derived from brand/stroll-savor-ci-guide.html — that guide is the source
  of truth. If this file and the guide ever disagree, the guide wins.

  Font files referenced below live in brand/fonts/ (extracted from the
  guide's embedded base64). Copy that folder into the website project and
  adjust the url() paths to match, or swap in the equivalent Google Fonts
  @import if self-hosting isn't set up yet:
    IBM Plex Sans   400/600  — fonts.google.com/specimen/IBM+Plex+Sans
    Space Mono      400      — fonts.google.com/specimen/Space+Mono
    Courier Prime   700      — fonts.google.com/specimen/Courier+Prime
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;0,900;1,400;1,600&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Color — Global Modern Editorial (Direction B) ---- */
  --paper: #f6f5f0;        /* crisp newsprint cream ground */
  --paper-2: #ffffff;      /* elevated cards, table headers */
  --paper-dark: #0c1322;   /* midnight aviation navy for dark moments */
  --ink: #0f172a;          /* midnight obsidian ink */
  --ink-soft: #475569;     /* slate grey secondary text */
  --rule: #e2dfd6;         /* refined hairline dividers */

  /* Brass Accent (prestige travel, foil, badges) */
  --brass: #c89446;
  --brass-deep: #966a23;
  --brass-soft: #f5e9d5;

  /* Backward compatibility aliases */
  --rust: #c89446;
  --rust-soft: #f5e9d5;
  --rust-text: #966a23;
  --rust-deep: #7d5514;

  /* Aviation navy accents */
  --navy: #0c1322;
  --navy-surface: #141e34;
  --teal: #1e3a5f;
  --teal-text: #1e3a5f;

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-data: 'Space Mono', ui-monospace, 'Courier New', monospace;

  /* Scale */
  --text-h1: clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem);
  --text-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  --text-subhead: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --text-body: 1rem;
  --text-data-sm: 0.72rem;
  --text-data-lg: 1.15rem;

  /* ---- Texture ---- */
  --dot-grid-size: 20px;
  --dot-grid-color: rgba(15, 23, 42, 0.04);
}

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

html {
  background: var(--paper);
  overflow-x: hidden;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  margin: 0;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px);
  background-size: var(--dot-grid-size) var(--dot-grid-size);
}

img, svg {
  max-width: 100%;
  height: auto;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 1rem;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }

h3, h4, .subhead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-subhead);
  margin: 0 0 0.7rem;
}

p, body, li {
  font-size: var(--text-body);
  line-height: 1.65;
}
p { color: var(--ink-soft); max-width: 68ch; margin: 0 0 1rem; }
p b, p strong { color: var(--ink); font-weight: 600; }

a {
  color: var(--teal-text);
  text-decoration-color: var(--rule);
  text-underline-offset: 0.15em;
}
a:hover { color: var(--teal); }

/* Data / label — miles, taxes, dates, percentages, tags, section numbers.
   Always the text-safe pair below ~18px per the CI guide's AA contrast note. */
.data, .mono {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}
.eyebrow, .tag, .sec-num {
  font-family: var(--font-data);
  font-size: var(--text-data-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---- Color utility classes ---- */
.text-rust { color: var(--rust-text); }   /* small text: tags, eyebrows, labels */
.text-teal { color: var(--teal-text); }   /* small text: secondary data, links */
.fill-rust { color: var(--rust); }        /* large type / graphics only (headline, ampersand) */
.fill-teal { color: var(--teal); }        /* large type / graphics only */

/* Paper-on-ink is the only sanctioned inversion (CI guide §03) —
   reserve for dark UI moments (splash states, video end cards).
   Do not invert to rust or teal backgrounds. */
.invert {
  background: var(--ink);
  color: var(--paper);
}
.invert p { color: var(--paper); opacity: 0.75; }

/* ---- Texture motifs (CI guide §05) ---- */

/* Dashed divider — separates a headline from its data. Never decorative. */
.divider-dashed {
  border: none;
  border-top: 2px dashed var(--rust);
  margin: 1.5rem 0;
}

/* Card / raised surface */
.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
}

/* Route line motif — use as inline SVG, always rust, always tracing an
   actual route/journey, never a generic decorative squiggle:
   <svg viewBox="0 0 90 30">
     <path d="M4 15 C25 15 20 25 45 15 C65 7 70 20 86 15"
           fill="none" stroke="var(--rust)" stroke-width="2.4"
           stroke-linecap="round" stroke-dasharray="0.2 5"/>
   </svg>
*/