/* =========================================================
   Garner Legacy — Shared Base Styles
   Single source for tokens, reset, utilities, grain, typography
   helpers, reveal animations, reduced-motion, and [hidden] fallback.
   Imported BEFORE each page's own styles.css.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* Base surfaces */
  --gl-black:     #0A0B0D;
  --gl-surface:   #121418;
  --gl-surface-2: #1B1E23;
  --gl-line:      #2A2D34;

  /* Text */
  --gl-ink:      #F5F2EA;
  --gl-ink-dim:  #A8A69C;
  --gl-ink-mute: #8E8C83;  /* 4.70:1 on --gl-black — WCAG AA (was #6B6A62 at 3.62:1) */

  /* Accent (brand red) */
  --gl-red:      #CB0A17;
  --gl-red-hi:   #E41625;
  --gl-red-lo:   #7A0610;

  /* Type families */
  --ff-display:  "Unbounded", "Arial Black", sans-serif;
  --ff-body:     "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-serif:    "Fraunces", "Times New Roman", serif;

  /* Type scale (1rem = 17px base) */
  --fs-hero:     clamp(3.5rem, 8vw, 7.5rem);
  --fs-display:  clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2:       clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:       1.375rem;
  --fs-lede:     clamp(1.125rem, 1.6vw, 1.35rem);
  --fs-body:     1.0625rem;
  --fs-small:    0.875rem;
  --fs-eyebrow:  0.75rem;
  --fs-numeral:  clamp(4rem, 10vw, 10rem);

  /* Layout */
  --wrap:        1280px;
  --gutter:      clamp(1rem, 4vw, 2.25rem);
  --section-y:   clamp(5rem, 10vw, 9rem);

  /* Motion */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);

  font-size: 17px;
  color-scheme: dark;
}

/* Mobile gutter override (shared) */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--gl-black);
  color: var(--gl-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
figure, blockquote, p { margin: 0; }

/* ---------- UTILITIES ---------- */
[hidden] { display: none !important; }

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

:focus-visible {
  outline: 2px solid var(--gl-red);
  outline-offset: 2px;
  border-radius: 2px;
}

.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: absolute; left: 12px; top: -60px;
  background: var(--gl-red); color: var(--gl-ink);
  padding: 10px 16px;
  font: 700 var(--fs-small)/1 var(--ff-body);
  letter-spacing: 0.04em;
  z-index: 9999;
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: 12px; }

/* Sticky-nav offset so skip-link + anchor clicks don't land behind nav */
:target,
#main,
[id]:not(body):not(html) {
  scroll-margin-top: 90px;
}

/* Touch-target safety net — any interactive icon-sized element must hit 44×44 WCAG */
.foot__social,
.footer__social,
.foot-social {
  min-width: 44px;
  min-height: 44px;
}

/* Cap mobile section padding so About + Web Services don't bloat past 10k scroll */
@media (max-width: 640px) {
  .chapter,
  .section,
  .pillars,
  .stats,
  .services,
  .folio,
  .quote,
  .alpha,
  .pullquote,
  .timeline {
    padding-top: clamp(2.5rem, 7vw, 4.5rem) !important;
    padding-bottom: clamp(2.5rem, 7vw, 4.5rem) !important;
  }
}

/* ---------- GRAIN OVERLAY ---------- */
.gl-grain { position: relative; }
.gl-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 2;
}

/* ---------- TYPOGRAPHY HELPERS ---------- */
.fr-italic {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.01em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 var(--fs-eyebrow)/1 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gl-ink-dim);
  margin: 0 0 1.25rem;
}
.eyebrow__rule,
.hairline {
  width: 40px;
  height: 1px;
  background: var(--gl-red);
  display: inline-block;
}
.eyebrow__dot { color: var(--gl-red-hi); }
.eyebrow--center { justify-content: center; }
.eyebrow--red { color: var(--gl-red-hi); }

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

.sr {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.sr.is-in { opacity: 1; transform: translateY(0); }

.will-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.will-reveal.is-in { opacity: 1; transform: translateY(0); }

/* No-JS fallback: never hide content if JS isn't running.
   An inline <script>html.classList.add('js')</script> in every <head>
   ensures the opacity:0 states only apply when JS is guaranteed. */
html:not(.js) .reveal,
html:not(.js) .sr,
html:not(.js) .will-reveal,
html:not(.js) .pullquote__text {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  letter-spacing: 0 !important;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .sr,
  .will-reveal,
  .pullquote__text {
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: 0 !important;
  }
}