/* ============================================================================
   America Éire — Base
   Resets, font loading, and the shared element defaults that every page
   inherits. Consumes tokens.css (link tokens.css FIRST). Page-specific layout
   lives in its own file; this is only the system-wide baseline.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face { font-family:'Stoker'; src:url('/fonts/stoker-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Tenon';  src:url('/fonts/tenon-regular.woff2')  format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Tenon';  src:url('/fonts/tenon-medium.woff2')   format('woff2'); font-weight:500; font-display:swap; }

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
img, svg { display:block; max-width:100%; }

/* --- Body ----------------------------------------------------------------- */
body {
  background: var(--color-bg);
  color: var(--color-text);          /* pine — our "black" */
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings -------------------------------------------------------------
   h1/h2 are the display register: Stoker, the brand serif. h3 deliberately is
   NOT — we have only one weight of Stoker, so a serif h3 can't hold enough
   contrast against body text. Instead h3 is Tenon, medium, at body size: it
   reads like the "bold lead-in" people reach for when faking a heading, which
   is exactly the modest third level this content wants. Nothing styled below
   h3 by design. */
h1, h2 { font-family: var(--font-serif); font-weight:400; color: var(--color-heading); line-height:1.1; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 {
  font-family: var(--font-sans); font-weight:500;
  font-size: var(--step-1);          /* one step up from body — size AND weight carry the contrast, still Tenon not Stoker */
  line-height:1.3; color: var(--color-heading);
}

/* --- Shared inline/element styles ----------------------------------------- */
a { color: var(--color-heading); text-decoration:none; }

/* Kicker / eyebrow — small, tracked, uppercase, gold. The editorial small-text
   register (section kickers, datelines, attributions) — sized to be read, not
   to disappear. For finer annotation (fine print, captions) use --size-label. */
.kicker {
  font-family: var(--font-sans); font-weight:500;
  font-size: var(--size-eyebrow);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-kicker);
}

/* Subdued text — secondary lines, attributions (stone grey). */
.subdued { color: var(--color-subdued); }

/* --- Drop cap -------------------------------------------------------------
   Ported from the story demo, measured to Stoker's metrics. ~2-line cap that
   errs just under two lines (no third-line indent). line-height:0.70 collapses
   Stoker's oversized line-box onto the glyph; --cap-rise seats it. Tune
   --cap-size / --cap-rise (both in tokens.css) live in-browser if it drifts.
   Apply by adding class="lead" to the first paragraph. */
.lead::first-letter {
  font-family: var(--font-serif); font-weight:400;
  font-size: var(--cap-size); line-height:0.70;
  float:left; margin: var(--cap-rise) 0.08em -0.05em 0;
  color: var(--color-accent);
}

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

/* --- Buttons --------------------------------------------------------------
   Site-wide button system. Moved here from home.css (June 29) because buttons
   are now chrome on every page — the site nav's "Add Your Story" CTA appears
   wherever the nav renders (/home, /stories, …), so the styles must load
   everywhere base.css does, not only on pages that pull home.css. */
.btn {
  display: inline-block;
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--space-xs) var(--space-m);
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--solid { background: var(--cream); color: var(--color-heading); border: 1.5px solid var(--cream); }
.btn--solid:hover { background: var(--color-bg-layer); border-color: var(--color-bg-layer); }
.btn--ghost { background: transparent; color: var(--cream); border: 1.5px solid rgb(247 243 233 / 0.55); }
.btn--ghost:hover { border-color: var(--cream); }
/* On cream bands the roles flip back. */
.btn--green { background: var(--color-heading); color: var(--cream); border: 1.5px solid var(--color-heading); }
.btn--green:hover { background: var(--pine); border-color: var(--pine); }
/* Accent (rust/orange) — added June 19, 2026 for the nav "Add Your Story" CTA,
   so Maedhbh can compare a solid vs. outline orange button. NOTE: the brand
   reserves rust/--orange for required markers + errors (see forms.css), so an
   orange *button* is a deliberate departure from the system — kept as a variant
   pending her pick. Reconcile with the brand doc if she keeps it; if not, both
   variants come back out. */
.btn--accent { background: var(--orange); color: var(--cream); border: 1.5px solid var(--orange); }
.btn--accent:hover { background: var(--rust-deep); border-color: var(--rust-deep); }
.btn--accent-ghost { background: transparent; color: var(--orange); border: 1.5px solid var(--orange); }
.btn--accent-ghost:hover { background: var(--orange); color: var(--cream); }
/* A .btn living inside the site nav needs to shed the text-link conventions
   from layout.php's `.site-nav a` rule (June 19, 2026):
   1. Color: `.site-nav a` sets green and out-specifies `.btn--accent` (both
      one class, but the descendant selector wins), so the button text rendered
      green. Re-assert the button's own text color, nav-scoped, to win.
   2. Padding: `.site-nav a` adds `padding-bottom: 2px` for its hover-underline,
      which collided with `.btn`'s padding and pushed the button text low
      (asymmetric top/bottom) — so the label sat below the About/Stories text.
      Reset to symmetric padding and a full border so it optically centers with
      the bare text links. */
.site-nav a.btn--accent,
.site-nav a.btn--accent:hover { color: var(--cream); }
.site-nav a.btn--accent-ghost { color: var(--orange); }
.site-nav a.btn--accent-ghost:hover { color: var(--cream); }
.site-nav a.btn {
  padding: var(--space-2xs) var(--space-m);
  border-bottom-width: 1.5px;
  line-height: 1.1;
}