/* Stendhalia Production Stylesheet - Locked to Grafica 1 (01 Nocturne Loupe) */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/cinzel.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cormorant.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cormorant.woff2') format('woff2'); }
@font-face { font-family: 'CormorantItalic'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/cormorantitalic.woff2') format('woff2'); }
@font-face { font-family: 'InstrumentSans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrumentsans.woff2') format('woff2'); }
@font-face { font-family: 'InstrumentSans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/instrumentsans.woff2') format('woff2'); }
@font-face { font-family: 'JetBrainsMono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrainsmono.woff2') format('woff2'); }

:root {
  --bg: #080C1C;
  --surface: #0F1630;
  --surface-elev: #151E40;
  --ink: #F6EEDE;
  --ink-muted: #B9B2A4;
  --accent: #F0B429;
  --btn-bg: #F0B429;
  --btn-ink: #080C1C;
  --border: rgba(246, 238, 222, 0.16);
  --border-accent: rgba(240, 180, 41, 0.45);
  --font-display: 'Cinzel', 'Cormorant', Georgia, serif;
  --font-serif: 'Cormorant', 'CormorantItalic', Georgia, serif;
  --font-serif-it: 'CormorantItalic', Georgia, serif;
  --font-sans: 'InstrumentSans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrainsMono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; height: auto; }
a { color: inherit; }

.container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 24px; }

.sticky-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 12, 28, 0.90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar {
  max-width: 1360px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  border-bottom: 1px solid var(--border);
}

.nav-bar {
  max-width: 1360px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}

.nav-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.nav-links a { text-decoration: none; color: var(--ink-muted); padding: 8px 4px; font-weight: 500; }
.nav-links a:hover { color: var(--accent); }

.pacing-track { height: 2px; width: 100%; background: var(--border); overflow: hidden; }
.pacing-fill { height: 100%; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0.08); }

.geo-banner {
  background: var(--surface-elev); border-bottom: 1px solid var(--border-accent);
  padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 13px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 22px; font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  border-radius: 4px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.btn-primary:hover { transform: translateY(-1px); opacity: 0.94; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { min-height: 44px; padding: 8px 16px; font-size: 13px; }

.pill-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px;
  border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--ink-muted);
  font-family: var(--font-mono); font-size: 12px; cursor: pointer; text-decoration: none;
}
.pill-btn.active { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); font-weight: 700; }

.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.micro-label { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); letter-spacing: 0.04em; }

.hero-section { padding: 48px 0 64px; border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }

.hero-h1 { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 56px); line-height: 1.07; margin: 14px 0 0; font-weight: 700; }
.serif-lead { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.44; color: var(--ink-muted); margin: 16px 0 0; }
.serif-italic { font-family: var(--font-serif-it); font-style: italic; color: var(--accent); }

.proof-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border);
}
.proof-val { font-family: var(--font-mono); font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

.loupe-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px;
}
.loupe-stage {
  position: relative; width: 100%; aspect-ratio: 4/5; max-height: 540px; overflow: hidden;
  border-radius: 4px; background: #04060E; cursor: crosshair; direction: ltr;
}
.loupe-stage img.base-art { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.loupe-lens {
  position: absolute; top: 0; left: 0; width: 176px; height: 176px; border-radius: 50%;
  border: 2px solid #F0B429; overflow: hidden; pointer-events: none; will-change: transform;
  transform: translate3d(180px, 240px, 0);
}
.loupe-lens img.xray-art {
  position: absolute; top: 0; left: 0; max-width: none; object-fit: cover; will-change: transform;
  transform: translate3d(-180px, -240px, 0);
}
.loupe-pin {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: rgba(8, 12, 28, 0.90); border: 2px solid #F0B429; color: #F6EEDE;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.loupe-pin.active { background: #F0B429; color: #080C1C; }

.band { padding: 64px 0; border-bottom: 1px solid var(--border); }
.section-h2 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); line-height: 1.12; margin: 8px 0 0; }
.section-h3 { font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); line-height: 1.24; margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 22px; }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 18px; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
}
.card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #050814; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-scrim {
  position: absolute; inset: auto 0 0 0; height: 42%; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 12, 28, 0.88), transparent);
}
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.price-tag { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: 20px; font-variant-numeric: tabular-nums; }

.field-input {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px;
}

.cart-drawer {
  position: fixed; top: 0; right: 0; width: 420px; max-width: 100vw; height: 100vh;
  background: var(--surface); border-left: 1px solid var(--border); z-index: 100;
  padding: 24px; display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform 0.24s ease; box-shadow: -20px 0 48px rgba(0, 0, 0, 0.65);
}
.cart-drawer.open { transform: translateX(0); }

.mobile-dock {
  display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 8px 12px; justify-content: space-around; align-items: center;
}
.mobile-dock a {
  text-decoration: none; color: var(--ink); font-family: var(--font-mono); font-size: 11px;
  min-height: 44px; display: flex; align-items: center; padding: 0 8px;
}

@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mobile-dock { display: none; }
}