/* ============================================================
   Base — reset, elements, accessibility floors. Mobile-first.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-s); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

a { color: var(--ember-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0 0 var(--space-s); padding-left: 1.25em; }

/* ---- Focus: always visible, never removed ---- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 999;
  transform: translateY(-200%);
  background: var(--ink);
  color: var(--base);
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-m);
  text-decoration: none;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- Screen-reader-only ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Touch targets ----
   44px floor on everything tappable, declared once and inherited by every
   later component. The number is written literally rather than as
   var(--tap-min) on purpose: it is a WCAG 2.2 AA (2.5.8) conformance
   constant, not a theme value that should shrink when someone retunes the
   palette. --tap-min mirrors it for components that need it inside a calc().
   Checkboxes and radios are excluded — they get their tap area from a padded
   label instead of a 44px-tall box. */
.btn,
button,
summary,
select,
textarea,
[role="button"],
input:not([type="checkbox"], [type="radio"], [type="hidden"]) {
  min-height: 44px;
}

/* ---- Typography utilities ---- */
.h1 { font-size: var(--step-5); line-height: var(--lh-tight); }
.h2 { font-size: var(--step-4); }
.h3 { font-size: var(--step-2); }

.kicker {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember-text);
  margin: 0 0 var(--space-2xs);
}

.lede { font-size: var(--step-1); color: var(--muted); max-width: 60ch; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-width: var(--tap-min);
  padding: var(--space-2xs) var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

/*
 * --ember-text, not --ember, as the button fill.
 *
 * White on --ember (#E4622E) is 3.45:1 — below the 4.5:1 AA floor for text
 * under 18.66px, and .btn is 16.15px. White on --ember-text (#C24A18) is
 * 4.90:1 and passes. This is precisely the split the two tokens exist for:
 * --ember for large text and decorative surfaces, --ember-text wherever real
 * text sits on top. Measured, not eyeballed.
 */
.btn--primary { background: var(--ember-text); color: #fff; }
.btn--primary:hover { background: #A33D12; }

.btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn--ghost:hover { background: var(--ink); color: var(--base); }

.btn--on-dark { background: transparent; color: var(--base); border-color: currentColor; }
.btn--on-dark:hover { background: var(--base); color: var(--ink); }

.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ---- The page bootstrap.php's error_page_html() prints ----
   A failure and an expired form, which render with no layout of their own.
   Spacing only: the colours are body's, so no contrast pair is added here. */
.error-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-l) var(--space-m);
}

/* ---- Reduced motion: honour it everywhere ---- */
@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;
    scroll-behavior: auto !important;
  }
}