/* ===================================================================
   BASE — reset, typography, focus, reduced-motion contract
   =================================================================== */

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

html {
  scroll-behavior: smooth;
  /* the spine is the scrollbar; keep the native one quiet */
  scrollbar-color: var(--moss) transparent;
  /* html is the scroll container, so the full-bleed section scrims
     (inset: 0 -50vw) must be clipped here, not only on body. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  position: relative;
}

img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* --- Type roles ---------------------------------------------------- */

.eyebrow, .place-label, .plate__label, .topbar__mark span {
  font-family: var(--font-guide);
  font-size: var(--t-guide);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bark-silver);
}

.section-title, .hero__title, .heart__title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* SOFT swells the terminals, WONK cants the alternates.
     This is the whole brief expressed as two variable axes. */
  font-variation-settings: "SOFT" 62, "WONK" 1, "opsz" 128;
  color: var(--paper);
}

.section-title { font-size: var(--t-h2); }

.prose { max-width: var(--measure); color: var(--paper-dim); }
.prose p + p { margin-top: 1.1em; }
.prose--lead { font-size: var(--t-lead); line-height: 1.5; color: var(--paper); }

/* --- Focus: firefly ring, never removed ---------------------------- */

:focus-visible {
  outline: 2px solid var(--firefly);
  outline-offset: 4px;
  border-radius: 3px;
}

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 999;
  padding: .85rem 1.4rem;
  background: var(--firefly); color: var(--hollow);
  font-family: var(--font-guide); font-size: var(--t-guide);
  letter-spacing: .2em; text-transform: uppercase;
  border-radius: 0 0 6px 6px;
  transition: transform 220ms var(--ease-settle);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Reveals -------------------------------------------------------
   Content arrives; it does not slide in from off-screen. Small
   translate only, so nothing ever reads as a carousel.
   ------------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-settle),
    transform var(--dur-reveal) var(--ease-settle);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal].is-found {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Tabbing must never land on something still hidden behind foliage. */
[data-reveal]:focus-within { opacity: 1; transform: none; }

/* ===================================================================
   REDUCED MOTION — reduced, not removed.
   The forest is still there. It is simply holding still.
   Test with ?rm=1
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

html.rm [data-reveal] { opacity: 1; transform: none; transition: none; }
html.rm *, html.rm *::before, html.rm *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}