/* ============================================================
   LAMPLIGHT THEME — Vulpine Horizons
   Full port of the felixlenhard.com Lamplight system:
   pure-black canvas, Switzer 300 poster type, Instrument Serif
   payoffs, cream lamplight accent, charcoal surfaces, glass
   chips, unified chrome (lockup + Menu pill + overlay), marquee.
   Loaded at body-start so it wins the cascade over Astro styles.
   ============================================================ */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --white:    #ffffff;
  --gray-50:  #f5f5f0;
  --gray-100: #f5f5f0;
  --gray-200: rgba(255, 255, 255, 0.85);
  --gray-300: #999999;
  --gray-400: #999999;
  --gray-500: #999999;
  --gray-600: #999999;
  --gray-700: #333333;
  --gray-800: #333333;
  --gray-900: #202020;
  --black:    #000000;

  --accent:   #f5f5f0;             /* gold -> lamplight cream */
  --cream:    #f5f5f0;

  --font: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --radius: 0px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
}

html { background: #000000; }
body { background: #000000; font-family: var(--font); letter-spacing: -0.018em; }

/* ---------- Typography: light poster voice, serif payoffs ---------- */
h1, h2, h3 { font-weight: 300; letter-spacing: -0.03em; color: #ffffff; }
h4 { font-weight: 400; }

.headline-xl {
  font-weight: 300;
  letter-spacing: -0.045em;
  font-size: clamp(2.75rem, 6.8vw, 6.25rem);
  line-height: 1.02;
}
.headline-lg {
  font-weight: 300;
  letter-spacing: -0.035em;
  font-size: clamp(2.4rem, 4.5vw, 4.4rem);
  line-height: 1.06;
}
.headline-md { font-weight: 300; letter-spacing: -0.03em; }

.headline-xl em, .headline-lg em, .headline-md em,
.statement em, .prose em, h1 em, h2 em,
.accent-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.04em;
}

.statement {
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.eyebrow {
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999999;
}

.text-muted, .text-subtle { color: #999999; }

/* ---------- Buttons: cream lamplight pills ---------- */
.btn {
  border-radius: 9999px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 13px 30px;
  transition: transform 0.28s var(--ease), background 0.28s var(--ease),
              border-color 0.28s var(--ease), color 0.28s var(--ease);
}
.btn--white, .btn--primary {
  background: var(--cream);
  color: #000000;
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px;
}
.btn--white:hover, .btn--primary:hover { background: #ffffff; color: #000; transform: translateY(-2px); }
.btn--outline, .btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
}
.btn--outline:hover, .btn--ghost:hover { border-color: #fff; background: transparent; color: #fff; transform: translateY(-2px); }

/* ---------- Pills: frosted glass chips ---------- */
.pill {
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
  font-size: 11px;
  background: rgba(200, 200, 200, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f5f5f0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pill--available { background: rgba(200, 200, 200, 0.1); border-color: rgba(255, 255, 255, 0.35); color: #ffffff; }

/* ---------- Surfaces: charcoal cards, flat, 10px ---------- */
.bc, .up-card, .author-card, .jc, .lm, .tpl, .card {
  background: #202020;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}
.bc:hover, .up-card:hover, .card:hover { transform: none; box-shadow: none; }
.bc__award { color: #f5f5f0; }
.section--surface { background: #202020; }
.section--rule { border-color: #333333; }

/* ---------- Stats: serif numerals like the index ---------- */
.proof__num {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
  font-size: clamp(3.2rem, 6vw, 5.5rem);
  line-height: 1;
  color: #ffffff;
}
.proof__label {
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999999;
}

/* ---------- Chrome: lockup + Menu pill + overlay ---------- */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(16px, 3vw, 40px);
  transition: background 0.28s var(--ease);
}
.top.is-solid { background: #000000; }
.top__lockup { display: flex; align-items: center; gap: 16px; min-width: 0; }
.top__mark { font-weight: 500; letter-spacing: 2px; color: var(--cream); font-size: 15px; flex: none; }
.top__eyebrow {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999999;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top__eyebrow strong { font-weight: 500; color: #ffffff; }
.top__right { display: flex; align-items: center; gap: 16px; flex: none; }
.menu-btn {
  height: 44px;
  padding: 0 24px;
  border-radius: 9999px;
  border: 0;
  background: var(--cream);
  color: #000000;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: rgba(0,0,0,0.15) 0px 4px 20px 0px;
  transition: transform 0.28s var(--ease);
}
.menu-btn:hover { transform: translateY(-2px); }
.menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000000;
  padding: 120px clamp(16px, 3vw, 40px) 40px;
  overflow-y: auto;
}
.menu.is-open { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  font-size: clamp(32px, 6vh, 58px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: #ffffff;
  opacity: 0.85;
  text-decoration: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.menu__links a:hover { opacity: 1; transform: translateX(8px); }
.menu__links a span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.42em;
  color: #999999;
  margin-right: 20px;
}
.menu__foot { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
@media (max-width: 1023px) { .top__eyebrow { display: none; } }

/* hide any legacy nav remnants */
.nav { display: none; }

/* ---------- Footer wordmark ---------- */
.lp-mark { font-weight: 500; letter-spacing: 2px; color: var(--cream); font-size: 15px; }
.lp-word { font-weight: 500; font-size: 16px; color: #ffffff; }
.footer { border-top: 1px solid #333333; background: #000000; }
.footer a { color: #999999; }
.footer a:hover { color: #ffffff; }

/* ---------- Clients marquee (auto-built from .clients rows) ---------- */
.lp-marquee {
  overflow: hidden;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  padding: 40px 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.lp-marquee__track {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: lp-marquee 45s linear infinite;
}
.lp-marquee__item {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.lp-marquee__item em {
  font-style: normal;
  font-size: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999999;
  margin-left: 12px;
  font-weight: 500;
}
@keyframes lp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lp-marquee__track { animation: none; } }

/* ---------- Layout: VH sections are composed for a centered column.
   Keep their measure; FL voice comes from type, surfaces, and chrome. ---------- */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}
.prose { max-width: 680px; }
.prose p { color: rgba(255, 255, 255, 0.78); }
.prose h1, .prose h2, .prose h3 { font-weight: 300; letter-spacing: -0.03em; }
.prose blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35em;
  line-height: 1.4;
  color: var(--cream);
  border-left: 1px solid #333333;
  padding-left: 1.5rem;
}
.prose a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Media + polish ---------- */
img { filter: saturate(0.95); border-radius: 0; }
.bc__cover img, .bc__cover { border-radius: 6px; }
input[type="text"], input[type="email"], textarea {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #757575;
  background: transparent;
  color: #ffffff;
}
input:focus, textarea:focus { outline: none; border-bottom-color: #f5f5f0; }
::selection { background: var(--cream); color: #000000; }

/* ---------- Audit round 2: kill remaining old-token survivors ---------- */
/* scoped component styles carried heavier weights; poster voice wins */
h1, h2 { font-weight: 300 !important; }
h3 { font-weight: 400 !important; }
/* award stars carried a brighter gold variant */
.bc__award { color: #f5f5f0 !important; }
/* mono meta voice -> Switzer label voice (FL has no mono) */
.text-mono, .nl__fineprint, .break__attr,
.text-mono a, .text-mono span {
  font-family: var(--font) !important;
  letter-spacing: 0.02em;
}
/* methodology step numbers: serif numerals like FL stats */
.principles__num {
  font-family: var(--font-serif) !important;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
}

/* ---------- Editorial pass: author quote in the serif voice ---------- */
.author__quote {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
}