/* ============================================================================
   SIDE — Base layer · V2
   Reset · type · dark glass · buttons · image & motion primitives
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; font-feature-settings: "ss01","liga","kern"; }

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--font-grotesk);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--gold); color: var(--char); }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--abyss); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-deep), #3a3a3a); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ============================================================================
   TYPOGRAPHY
   ========================================================================== */
.display { font-family: var(--font-display); font-weight: 300; line-height: 0.98; letter-spacing: -0.01em; color: var(--text-hi); }
.display em { font-style: italic; color: var(--gold-bright); }

.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); font-family: var(--font-grotesk); font-weight: 400; line-height: 1.18; letter-spacing: 0.005em; }
.mega { font-family: var(--font-display); font-size: var(--fs-mega); font-weight: 300; line-height: 0.84; letter-spacing: -0.03em; }

.overline {
  font-family: var(--font-grotesk); font-size: var(--fs-overline); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 0.9em;
}
.overline::before { content: ""; width: clamp(22px, 3vw, 56px); height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.overline--center { justify-content: center; }
.overline--center::after { content: ""; width: clamp(22px, 3vw, 56px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }

.lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; color: var(--text-soft); max-width: var(--measure); }
.body-soft { color: var(--text-soft); max-width: var(--measure); }
.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mid); }
.gold-text { color: var(--gold); }
.silver-grad { background: linear-gradient(180deg, var(--ivory), var(--stone-soft)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; z-index: var(--z-content); }
.pad { padding-block: var(--section-pad); }
.stack { display: flex; flex-direction: column; }
.rule { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); border: 0; }

/* ============================================================================
   IMAGE / PARALLAX / KEN-BURNS PRIMITIVES
   ========================================================================== */
.media { position: relative; overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* a fixed-feel parallax frame: the image is taller than its frame and shifts on scroll */
.parallax { position: relative; overflow: hidden; }
.parallax__img { position: absolute; inset: -24% 0; width: 100%; height: 148%; object-fit: cover; will-change: transform; }

/* slow cinematic zoom */
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.12); } }
.kenburns { animation: kenburns 18s var(--ease-soft) infinite alternate; }

/* image reveal clip */
.img-reveal { clip-path: inset(0 0 0 0); }

/* gradient scrims for legibility over photos */
.scrim-b { background: linear-gradient(0deg, var(--char) 2%, rgba(7,8,9,0.55) 30%, rgba(7,8,9,0.12) 60%, transparent 85%); }
.scrim-bt { background: linear-gradient(180deg, rgba(7,8,9,0.7), transparent 30%, transparent 55%, rgba(7,8,9,0.85)); }
.scrim-l { background: linear-gradient(90deg, rgba(7,8,9,0.82) 0%, rgba(7,8,9,0.45) 35%, transparent 70%); }
.scrim-r { background: linear-gradient(270deg, rgba(7,8,9,0.82) 0%, rgba(7,8,9,0.4) 35%, transparent 70%); }

/* ============================================================================
   GLASS
   ========================================================================== */
.glass {
  position: relative; background: var(--glass-bg);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  box-shadow: var(--shadow-soft), inset 0 1px 0 0 var(--glass-hi);
}
.glass--strong { background: var(--glass-bg-strong); backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(140%); }

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --pad-y: 1.05em; --pad-x: 2.1em;
  position: relative; display: inline-flex; align-items: center; gap: 0.8em;
  padding: var(--pad-y) var(--pad-x); font-family: var(--font-grotesk);
  font-size: var(--fs-caption); font-weight: 500; letter-spacing: var(--tracking-mid);
  text-transform: uppercase; border-radius: var(--r-pill); overflow: hidden; isolation: isolate;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.btn__arrow { transition: transform var(--t-med) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn--gold { color: var(--char); background: linear-gradient(120deg, var(--gold-bright), var(--gold)); box-shadow: 0 14px 40px -14px var(--gold-glow); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -14px var(--gold-glow); }
.btn--ghost { color: var(--text-hi); border: 1px solid var(--glass-border-lit); background: rgba(255,255,255,0.04); backdrop-filter: blur(var(--glass-blur-soft)); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ============================================================================
   MOTION PRIMITIVES (driven by motion.js)
   ========================================================================== */
[data-reveal] { will-change: transform, opacity; }
.line-mask { overflow: hidden; display: block; }
.line-inner { display: block; will-change: transform; }
.split-word { display: inline-block; overflow: hidden; vertical-align: top; }
.split-char { display: inline-block; will-change: transform; }

/* ============================================================================
   ACCESSIBILITY
   ========================================================================== */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .kenburns { animation: none !important; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }