/* ==========================================================================
   Base layer — reset, fonts, typography, accessibility primitives
   ========================================================================== */

/* ---- Self-hosted fonts (WOFF2, 261KB total, swap so text is never invisible) -- */
@font-face { font-family: Oswald; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/oswald-600.woff2") format("woff2"); }
@font-face { font-family: Oswald; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/oswald-700.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/manrope-500.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/manrope-700.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../fonts/manrope-800.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/dm-mono-500.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 600; font-style: italic; font-display: swap;
  src: url("../fonts/playfair-display-600-italic.woff2") format("woff2"); }

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

/* While the page is gliding back to the top, scroll-snap must not grab it,
   and each animated step must land instantly — otherwise the page's own
   smooth-scrolling tries to animate every frame of our animation. */
html.is-gliding {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font: 400 var(--step-body)/1.6 var(--font-body);
  overflow-x: hidden;               /* belt-and-braces; nothing should overflow */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, canvas, svg { display: block; max-width: 100%; }
/* <picture> is only a wrapper for choosing a source. Taking it out of the
   layout means percentage sizes on the <img> resolve against the real parent,
   not against an inline box that has collapsed to nothing. */
picture { display: contents; }
img { height: auto; }   /* per-image tint is set inline by the build */

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; }
button, a, label, summary { touch-action: manipulation; }  /* kill 300ms tap delay */

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--ink); }

/* ---- Typography primitives ---- */
.display   { font: 700 var(--step-h2)/0.88 var(--font-display); letter-spacing: -0.01em;
             text-transform: uppercase; }
.accent    { font: italic 600 1em/1 var(--font-accent); color: var(--gold); text-transform: none; }
.label     { font: 500 var(--step-label)/1.4 var(--font-mono);
             letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.lead      { font-size: var(--step-lead); line-height: 1.45; color: var(--cream); }
.measure   { max-width: 62ch; }

/* ---- Layout primitives ---- */
.wrap    { width: 100%; max-width: var(--max-w); margin-inline: auto;
           padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Visible, high-contrast focus ring on every interactive element.
   :focus-visible means mouse users don't see it, keyboard users always do. */
:focus-visible {
  outline: 3px solid var(--bright-gold);
  outline-offset: 3px;
  border-radius: var(--radius);
}
/* Never remove focus styling without replacing it. */

/* Screen-reader-only text that still gets announced. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link — first tab stop on the page. */
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  padding: 14px 20px;
  background: var(--gold); color: var(--ink);
  font: 700 14px/1 var(--font-body);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Minimum 44x44px touch targets (WCAG 2.5.5) for icon-only controls. */
.tap { min-width: 44px; min-height: 44px; display: grid; place-items: center; cursor: pointer; }

/* ---- Reduced motion: strip animation, keep everything readable ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}