/* ============================================================================
   ATLAS WILD EXPERIENCES — base layer
   ----------------------------------------------------------------------------
   Reset + the element defaults that carry the brand. Load order is fixed:

     1. system/fonts.css       @font-face
     2. system/variables.css   the token contract
     3. system/base.css        this file
     4. your page CSS          components, using var(--*) only

   Rule that keeps the system real: no raw colour literal appears below this
   line. Every colour is a token.

   THE TWO-VOICE RULE
   The kit names three type roles and hands you two files. So the site runs on
   two voices and the split is serif-versus-sans, not serif-versus-mono:

     PLAYFAIR NARRATES   headings, pull-quotes, the numbers in a display
                         figure. Anything being said.
     AFACAD RECORDS      running text, and every fact set as data — dates,
                         parks, seat counts, prices, captions. Anything being
                         logged. Uppercase, letterspaced to match the tagline
                         in the lockup, with tabular figures on.

   The wordmark is never live text. See fonts.css.
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Display type ─────────────────────────────────────────────────────────
   Playfair is high-contrast: its hairlines thin out badly under about 25px,
   so it is never used for body, labels or captions. Weight stays at 400–500
   for display sizes — Playfair's bold is a much heavier colour on the page
   than the lockup's own letterforms and looks like a different brand. */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(40px, 7vw, var(--text-4xl)); }
h2 { font-size: clamp(28px, 4vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); line-height: 1.14; }

/* Small headings drop out of the display voice entirely — at this size
   Playfair is unreadable, so they become labels in the data voice. */
h4, h5, h6 {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--awe-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

p {
  margin: 0 0 var(--space-5);
  max-width: var(--awe-measure);
}
p:last-child { margin-bottom: 0; }

/* ── Links ───────────────────────────────────────────────────────────────
   Underlined by a border rather than text-decoration so the rule sits clear
   of the descenders.

   On light grounds the accent is rust and carries the link itself. On forest
   and night the text stays at full contrast and the ORANGE does the signalling
   from the underline — orange is a fill in this brand, never a text colour on
   anything but black. See the note at the top of variables.css. */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent), transparent 58%);
  transition: border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
a:hover { border-bottom-color: var(--accent); }

[data-surface="forest"] :where(p, li, dd) a {
  color: var(--fg);
  border-bottom-color: var(--awe-orange);
  border-bottom-width: 2px;
}
[data-surface="forest"] :where(p, li, dd) a:hover { color: var(--accent); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Data voice ──────────────────────────────────────────────────────────
   Anything factual. `tnum` aligns figures down a column and `zero` slashes
   the zero, so a seat count of 0 cannot be misread as O — both features are
   in Afacad Flux, which is why this brand needs no monospace. */
.data, code, kbd, samp, time, .price, .seats {
  font-family: var(--font-data);
  font-feature-settings: var(--awe-figures);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  letter-spacing: var(--awe-tracking-data);
}

.eyebrow {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--awe-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-5);
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  font-weight: 400;
  color: var(--fg-2);
  max-width: 60ch;
}

/* ── The tagline ─────────────────────────────────────────────────────────
   BE CURIOUS ✦ BE CONNECTED ✦ BE IN AWE, set the way the lockup draws it.

   Neither webfont contains U+2726, so the separator is a CSS shape rather
   than a character — ingest_kit.py checks this on every run and says so. It
   is marked aria-hidden in the markup; the tagline reads correctly without
   it. */
.tagline {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--awe-tracking-tagline);
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
.tagline i {
  display: block;
  width: 0.7em;
  height: 0.7em;
  flex: none;
  background: var(--accent);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%,
                     50% 100%, 40% 60%, 0% 50%, 40% 40%);
}

/* ── Media ───────────────────────────────────────────────────────────────
   The photograph is the loudest thing on the page. Nothing is cropped round,
   nothing gets a shadow. */
img, video { max-width: 100%; display: block; height: auto; }
figure { margin: 0; }

figcaption {
  font-family: var(--font-data);
  font-feature-settings: var(--awe-figures);
  font-size: var(--text-xs);
  letter-spacing: var(--awe-tracking-data);
  text-transform: uppercase;
  color: var(--muted);
  border-top: var(--awe-rule);
  margin-top: var(--awe-caption-gap);
  padding-top: var(--awe-caption-gap);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: baseline;
}
figcaption b { color: var(--fg-2); font-weight: 600; }
figcaption .sep { color: var(--border); }

/* ── The pattern ─────────────────────────────────────────────────────────
   Page 3 of the cheat sheet: the insignia marks tiled at low contrast. It is
   a brand material, so it is available as a class rather than being redrawn
   per use. Applied to a ground, never behind body text.

   The tile is built from the insignia SVGs at build time — see
   copy_assets() in build.py, which writes assets/pattern.svg. */
.patterned {
  background-image: url("/assets/pattern.svg");
  background-size: var(--awe-pattern-size);
  background-repeat: repeat;
}

/* ── Layout primitives ───────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter-phone);
}

.section { padding-block: var(--section-y-phone); }

hr, .rule {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 0;
}

@media (min-width: 700px) {
  .container { padding-inline: var(--container-gutter-tablet); }
  .section { padding-block: var(--section-y-tablet); }
}

@media (min-width: 1000px) {
  .container { padding-inline: var(--container-gutter-desktop); }
  .section { padding-block: var(--section-y-desktop); }
}