/* ==========================================================================
   FOREIGN GROUNDS — BASE
   Reset, typography roles, layout primitives, focus, motion primitives.
   ========================================================================== */

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

html {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  font-size: var(--text-body);
  /* room so the fixed nav never covers the last line */
  padding-bottom: calc(var(--nav-bottom) + var(--nav-height) + var(--space-6) + env(safe-area-inset-bottom));
}
main { flex: 1 0 auto; padding-bottom: var(--space-section); }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- Page transitions: pages cross-fade instead of blinking ------ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-page);
  animation-timing-function: var(--ease-in-out);
}
.nav { view-transition-name: nav; }            /* the pill stays put while the page changes */

/* ---------- Typography roles ------------------------------------------- */

.statement {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-statement);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-statement);
  line-height: var(--leading-snug);
  max-width: var(--statement-max);
  text-wrap: balance;
}
.lead {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-statement);
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  text-wrap: pretty;
}
.meta {
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.title {
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-title);
}
.prose { max-width: var(--text-max); }
.prose p + p { margin-top: var(--space-4); }

.link {
  text-decoration: underline;
  text-decoration-thickness: var(--rule-width);
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-rule-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
.link:hover { text-decoration-color: var(--color-ink); }

.section-title {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
}

/* ---------- Layout primitives ------------------------------------------ */

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-section-tight); }
.section--wide { padding-block: var(--space-section-wide); }
.center { text-align: center; margin-inline: auto; }

.rule { border: 0; border-top: var(--rule-width) solid var(--color-rule); margin: 0; }

/* ---------- Accessibility ---------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: var(--space-4); left: var(--space-4);
  z-index: calc(var(--z-nav) + 1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink); color: var(--color-paper);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-ink); color: var(--color-paper); }

/* ---------- Motion primitives (same vocabulary as Patina) -------------- */
/* Only active with JS (html.js), so nothing stays hidden without it. */

.js .reveal {
  opacity: 0;
  transform: translateY(var(--translate-enter));
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Images: fade in while settling from a hair larger */
.js .reveal--media { transform: scale(var(--scale-enter)); transform-origin: center; }
.js .reveal--media.is-visible { transform: none; }

/* Statements: fade, sharpen out of a soft blur, settle upwards */
.js .reveal--blur {
  filter: blur(var(--blur-enter));
  transform: translateY(calc(var(--translate-enter) / 2));
  transition:
    opacity var(--duration-hero) var(--ease-out),
    filter var(--duration-hero) var(--ease-out),
    transform var(--duration-hero) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal--blur.is-visible { filter: blur(0); transform: none; }

/* Opening wordmark: only fades, no movement */
.js .reveal--fade { transform: none; transition-duration: var(--duration-hero); }

/* Opening wordmark: letters rise in one by one, the line draws itself in between */
.js .reveal--wordmark { opacity: 1; transform: none; }
.js .reveal--wordmark .ch {
  opacity: 0;
  transform: translateY(0.35em);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  transition-delay: calc(var(--i) * var(--wordmark-stagger));
}
.js .reveal--wordmark .wordmark__line {
  transform: scaleX(0);
  transition: transform calc(var(--duration-slow) * 1.2) var(--ease-in-out);
  transition-delay: calc(var(--i) * var(--wordmark-stagger));
}
.js .reveal--wordmark.is-visible .ch,
.js .reveal--wordmark.is-visible .wordmark__line { opacity: 1; transform: none; }

/* Opening claim: a moment after the wordmark */
.js .reveal--late { transition-delay: var(--hero-claim-delay); }

/* Hairlines draw themselves from left to right */
.js .reveal--line {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform calc(var(--duration-slow) * 1.4) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal--line.is-visible { transform: none; }