/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--text-body);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-weight: 400;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
svg { flex: 0 0 auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--blue-pale, #d4e0e6); color: var(--text, #1f2a36); }

/* ---------- Focus ring (keyboard only) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 12px 16px;
  background: var(--bg-dark);
  color: var(--text-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-weight: 500;
  z-index: var(--z-max);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* ---------- Typography — per brief ---------- */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
p { text-wrap: pretty; }
/* No italics. em inherits everything — present for semantic emphasis only. */
h1 em, h2 em, em {
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
}
h1 { font-size: clamp(var(--fs-40), 6vw, var(--fs-88)); }
h2 { font-size: clamp(var(--fs-32), 4.5vw, var(--fs-72)); }

h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  letter-spacing: -0.005em;
}
h4 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-18); color: var(--text-heading); }
h5 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-14); color: var(--text-heading); letter-spacing: 0.02em; }
h6 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); color: var(--text-heading); }

p {
  font-family: var(--font-sans);
  color: var(--text-body);
  line-height: var(--lh-base);
  font-weight: 400;
}
strong { color: var(--text-heading); font-weight: 500; }

a, button {
  font-family: var(--font-sans);
  font-weight: 400;
}

/* ---------- Label-ruled (eyebrow with gold dash prefix) ---------- */
.label-ruled {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}
.label-ruled::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
  flex: 0 0 auto;
}
.label-ruled.on-dark { color: var(--gold-light); }
.label-ruled.on-dark::before { background: var(--gold-light); }

/* Back-compat: old .eyebrow renders as label-ruled */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
  margin-bottom: var(--s-16);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
  flex: 0 0 auto;
}
.eyebrow.no-dash::before { display: none; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section    { padding: var(--s-120) 0; }
.section-sm { padding: var(--s-80) 0; }
.center     { text-align: center; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.lede {
  font-size: var(--fs-18);
  line-height: 1.55;
  max-width: 62ch;
  color: var(--text-body);
}

/* ---------- Grain overlay — no mix-blend (too expensive to composite) ---------- */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
  opacity: 0.18;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
}

/* ---------- Photo + glass overlay system (per brief) ---------- */
.img-glass-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-hero);
  isolation: isolate;
}
.img-glass-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aspect-ratio helpers for standalone photos */
.photo { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-hero); isolation: isolate; }
.photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-ratio-4x3  { aspect-ratio: 4 / 3; }
.photo-ratio-3x4  { aspect-ratio: 3 / 4; }
.photo-ratio-16x9 { aspect-ratio: 16 / 9; }
.photo-ratio-1x1  { aspect-ratio: 1 / 1; }
.photo-ratio-4x5  { aspect-ratio: 4 / 5; }

/* Full-width bottom glass panel (hero stats, large cards) */
.glass-overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--s-20) var(--s-24);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  background: var(--glass-bg);
  border-top: 0.5px solid var(--glass-border);
  color: var(--text-light);
  z-index: 3;
  font-family: var(--font-sans);
}
.glass-overlay-bottom .label {
  display: inline-block;
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: var(--s-8);
}
.glass-overlay-bottom h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-32);
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.15;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.glass-overlay-bottom p {
  font-size: var(--fs-14);
  color: rgba(245, 240, 232, 0.82);
  margin-bottom: var(--s-8);
}
.glass-overlay-bottom a {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--gold-light);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  display: inline-block;
}

/* Compact top-left pill (small labels on thumbnails) */
.glass-overlay-top {
  position: absolute;
  top: var(--s-16);
  left: var(--s-16);
  z-index: 3;
  padding: var(--s-8) var(--s-12);
  max-width: calc(100% - var(--s-32));
  width: max-content;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.3;
}

/* Back-compat for old glass-overlay (compact top-left by default) */
.glass-overlay {
  position: absolute;
  top: var(--s-12);
  left: var(--s-12);
  max-width: calc(100% - var(--s-24));
  width: max-content;
  padding: var(--s-8) var(--s-12);
  border-radius: var(--radius-sm);
  z-index: 3;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.3;
}
.glass-overlay .go-kicker {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-16);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-light);
}

/* ---------- Placeholder image ---------- */
.placeholder-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, var(--color-slate-300) 0%, var(--bg-hero) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-heading);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-16);
  overflow: hidden;
}
.placeholder-img::before {
  content: attr(data-label);
  opacity: 0.6;
  position: relative;
  z-index: 2;
  max-width: 80%;
}

/* ---------- Reveal helpers (CSS fallback; GSAP takes over when loaded) ---------- */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  will-change: opacity, transform;
}
.reveal        { transform: translateY(35px); }
.reveal-left   { transform: translateX(-50px); }
.reveal-right  { transform: translateX(50px); }

/* ---------- Generic smooth fade-up (applied by IntersectionObserver) ---------- */
.fade-up {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
}
.fade-up.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ---------- Word-split animation primitives ---------- */
/* Applied by JS to split headings into animatable words */
.word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.1em;      /* descenders stay visible */
  vertical-align: bottom;
}
.word-inner {
  display: inline-block;
  transform: translateY(105%);
  will-change: transform;
}
.words-ready .word-inner { transform: translateY(0); }
/* When GSAP handles it, these transitions stay consistent for fallback */
.no-gsap .word-inner { transform: translateY(0); }

/* If GSAP doesn't load (offline/CDN fail), this class is added by JS fallback */
.no-gsap .reveal,
.no-gsap .reveal-left,
.no-gsap .reveal-right {
  opacity: 1;
  transform: none;
}

/* ---------- 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, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}