/* ==========================================================================
   base.css
   Reset, body, typography, container, buttons.
   Industrial-signage register. Off-white paper, warm near-black ink.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: clamp(64px, 8vw, 96px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  color-scheme: light;
  overflow-x: clip;
}

body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--font-sans);
  font-weight: 400;
  font-feature-settings: 'ss01', 'cv11';
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
}

/* Lock background scrolling while the mobile menu is open. */
body.nav-open{
  overflow: hidden;
  overscroll-behavior: contain;
}

a {
  color: var(--ink-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  transition: color .18s cubic-bezier(.22,1,.36,1),
              border-color .18s cubic-bezier(.22,1,.36,1);
}
a:hover { color: var(--signal); border-bottom-color: var(--signal); }

img, svg, video, iframe { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--signal); color: var(--paper); }

/* ---------- Skip link ---------- */
.skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip:focus {
  position: fixed; top: 8px; left: 8px;
  width: auto; height: auto; padding: 10px 16px;
  background: var(--ink-deep); color: var(--paper);
  z-index: 100;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.018em;
  text-wrap: balance;
  font-variation-settings: var(--display-vars-tight);
  font-optical-sizing: auto;
}
h3, h4 { font-variation-settings: var(--display-vars-normal); }

/* Display H1 used in editorial moments; the hero sets its own larger scale. */
h1 {
  font-size: clamp(2.6rem, 4.2vw + 1rem, 5.2rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 0.92;
}
h2 {
  font-size: clamp(2rem, 2.2vw + 1rem, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 0.96;
}
h3 {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.2;
  color: var(--ink-deep);
}
h4 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}

p {
  margin: 0 0 1em;
  color: var(--ink);
  line-height: 1.6;
  text-wrap: pretty;
}

strong { color: var(--ink-deep); font-weight: 600; }
em     { font-style: italic; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li     { margin: .25em 0; color: var(--ink); line-height: 1.55; }

hr     { border: 0; border-top: 1px solid var(--rule); margin: 64px 0; }

abbr   { text-decoration: none; font-variant-caps: all-small-caps; letter-spacing: 0.06em; }

/* ==========================================================================
   Container
   ========================================================================== */
.container { max-width: var(--inner); margin: 0 auto; padding: 0 var(--gutter); }
.wide      { max-width: var(--max);   margin: 0 auto; padding: 0 var(--gutter); }

/* ==========================================================================
   Eyebrow / kicker — restrained, used only when section signage needs it
   ========================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-deep);
  margin: 0 0 24px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--ink-deep);
  flex: none;
}

/* ==========================================================================
   Buttons — square, hard-edged, signage chrome
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 22px;
  border-radius: 0;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s cubic-bezier(.22,1,.36,1),
              color .18s cubic-bezier(.22,1,.36,1),
              border-color .18s cubic-bezier(.22,1,.36,1),
              transform .12s cubic-bezier(.22,1,.36,1);
}
.btn:hover  { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn.primary {
  background: var(--ink-deep);
  color: var(--paper);
  border-color: var(--ink-deep);
}
.btn.primary:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--paper);
}

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

.btn.accent {
  background: var(--signal);
  color: var(--paper);
  border-color: var(--signal);
}
.btn.accent:hover { background: var(--signal-deep); border-color: var(--signal-deep); }

.btn.sm { height: 38px; padding: 0 14px; font-size: 0.8rem; }
.btn .arrow { font-family: var(--font-display); font-weight: 400; transition: transform .18s cubic-bezier(.22,1,.36,1); }
.btn:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   Misc small primitives kept for compat
   ========================================================================== */
.cta-undersay {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--ink-faint);
}
.cta-undersay a {
  color: var(--ink-dim);
  border-bottom: 1px solid var(--rule-strong);
}
.cta-undersay a:hover { color: var(--signal); border-bottom-color: var(--signal); }

.crumb {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 28px;
}
.crumb a {
  color: var(--ink-dim);
  border-bottom: 1px solid transparent;
}
.crumb a:hover { color: var(--signal); border-bottom-color: var(--signal); }

code, kbd { font: 0.86em/1.5 var(--font-mono); }
code {
  background: var(--paper-3);
  color: var(--ink-deep);
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 0;
}

/* ==========================================================================
   Numerals — tabular for tables/data, lining default
   ========================================================================== */
.tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes underline-reveal {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes cursor-blink {
  50% { opacity: 0; }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ==========================================================================
   Scroll-reveal primitives — JS toggles .is-revealed via IntersectionObserver
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.reveal.is-revealed{ opacity: 1; transform: translateY(0); }

/* Stagger for grouped children (numerals, labels, headlines) */
.reveal-group > *{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal-group.is-revealed > *:nth-child(1){ transition-delay:  40ms; }
.reveal-group.is-revealed > *:nth-child(2){ transition-delay: 110ms; }
.reveal-group.is-revealed > *:nth-child(3){ transition-delay: 180ms; }
.reveal-group.is-revealed > *:nth-child(4){ transition-delay: 250ms; }
.reveal-group.is-revealed > *{
  opacity: 1; transform: translateY(0);
}

/* The signpost: numerals fade up, the label hairline draws in from left.
   .signpost is already in components.css; this only adds the animated behavior. */
.signpost{ position: relative; }
.signpost .num{
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1),
              transform .6s cubic-bezier(.22,1,.36,1);
}
.signpost .label{
  position: relative;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.22,1,.36,1) .15s;
}
.signpost .label::after{
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ink-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s cubic-bezier(.22,1,.36,1) .12s;
}
.signpost.is-revealed .num   { opacity: 1; transform: translateY(0); }
.signpost.is-revealed .label { opacity: 1; }
.signpost.is-revealed .label::after{ transform: scaleX(1); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal, .reveal-group > *, .signpost .num, .signpost .label{
    opacity: 1 !important; transform: none !important;
  }
  .signpost .label::after{ transform: scaleX(1) !important; }
}