/* ───────────────────────────────────────────────
   $FABLE5 — coin page
   cinematic luxe · obsidian + molten gold · 35mm grain
   type: Cinzel (monument) · Cormorant Garamond (voice) · Space Mono (signal)
   ─────────────────────────────────────────────── */
:root {
  --void: #05040a;
  --void-2: #0b0810;
  --panel: #110c16;
  --paper: #f4ecda;
  --paper-70: rgba(244, 236, 218, 0.7);
  --paper-45: rgba(244, 236, 218, 0.45);
  --paper-28: rgba(244, 236, 218, 0.28);
  --gold-hi: #f8e0a8;
  --gold: #e3ad57;
  --gold-deep: #9c6a26;
  --ember: #c2541d;
  --hair: rgba(244, 236, 218, 0.1);
  --hair-gold: rgba(227, 173, 87, 0.34);

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 2rem;
  --s4: 3.5rem;
  --s5: 6.5rem;
  --s6: 11rem;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1220px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --t-label: 0.7rem;
  --t-s: 0.95rem;
  --t-m: 1.05rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--t-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--void); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── atmosphere: grain + vignette ───────────── */
.grain,
.vignette {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.grain {
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-3%, 4%); }
  80% { transform: translate(5%, 2%); }
  100% { transform: translate(0, 0); }
}
.vignette {
  z-index: 88;
  box-shadow: inset 0 0 240px 40px rgba(0, 0, 0, 0.75);
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* ── type devices ───────────────────────────── */
.label {
  font-family: 'Space Mono', monospace;
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--paper-45);
}
.gold { color: var(--gold); }

.goldText {
  background: linear-gradient(176deg, var(--gold-hi) 0%, var(--gold) 46%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── reveal (progressive enhancement) ───────── */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.15s var(--ease), transform 1.15s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .grain { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── hero load stagger ──────────────────────── */
.js .hero .lift { opacity: 0; transform: translateY(20px); animation: lift 1.2s var(--ease) forwards; }
.js .hero .lift.d1 { animation-delay: 0.15s; }
.js .hero .lift.d2 { animation-delay: 0.35s; }
.js .hero .lift.d3 { animation-delay: 0.55s; }
.js .hero .lift.d4 { animation-delay: 0.75s; }
.js .hero .lift.d5 { animation-delay: 0.95s; }
.js .hero .heroArt { opacity: 0; transform: translateY(20px) scale(0.985); animation: liftArt 1.6s var(--ease) 0.1s forwards; }
@keyframes lift { to { opacity: 1; transform: none; } }
@keyframes liftArt { to { opacity: 1; transform: none; } }

/* ── top bar ────────────────────────────────── */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 1.05rem var(--pad-x);
  background: linear-gradient(to bottom, rgba(5, 4, 10, 0.85), transparent);
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.topbar.solid {
  background: rgba(5, 4, 10, 0.78);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--hair-gold);
}
.brand {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.22em;
}
.brand .tick { color: var(--gold); }
.topnav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); }
.topnav a.txt {
  font-family: 'Space Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-45);
  transition: color 0.35s var(--ease);
}
.topnav a.txt:hover { color: var(--gold); }
@media (max-width: 720px) { .nav-hide { display: none !important; } }

/* ── gold button ────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Space Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  border-radius: 2px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), filter 0.4s var(--ease);
}
.btn-gold {
  color: #2a1c08;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 1px 0 rgba(255, 244, 214, 0.55) inset, 0 0 0 1px rgba(227, 173, 87, 0.4), 0 14px 40px -16px rgba(227, 173, 87, 0.7);
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255, 244, 214, 0.6) inset, 0 0 0 1px rgba(227, 173, 87, 0.5), 0 22px 56px -16px rgba(227, 173, 87, 0.85); }
.btn-ghost { color: var(--paper); border: 1px solid var(--hair-gold); background: rgba(244, 236, 218, 0.02); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.pill { border-radius: 999px; }

/* ── hero ───────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--s5) + 1.5rem) var(--pad-x) var(--s6);
  isolation: isolate;
  overflow: hidden;
}
.heroBg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: heroDrift 30s ease-in-out infinite alternate;
}
@keyframes heroDrift { to { transform: scale(1.16) translateX(-1.5%); } }

/* the 3D god, composited in front of the cosmos */
.heroChar {
  position: absolute;
  z-index: 1;
  right: clamp(-7rem, -3vw, -1.5rem);
  bottom: -9%;
  height: min(106%, 104svh);
  width: auto;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  filter: drop-shadow(0 40px 90px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgba(227, 173, 87, 0.18));
  -webkit-mask-image: radial-gradient(56% 70% at 52% 44%, #000 50%, rgba(0, 0, 0, 0.45) 72%, transparent 88%);
  mask-image: radial-gradient(56% 70% at 52% 44%, #000 50%, rgba(0, 0, 0, 0.45) 72%, transparent 88%);
  animation: charFloat 9s ease-in-out infinite alternate;
}
@keyframes charFloat { to { transform: translateY(-14px); } }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(98deg, var(--void) 18%, rgba(5, 4, 10, 0.72) 46%, rgba(5, 4, 10, 0.1) 76%, transparent 100%),
    linear-gradient(0deg, var(--void) 3%, transparent 32%),
    radial-gradient(56% 60% at 80% 34%, rgba(227, 173, 87, 0.16), transparent 70%);
}
.heroText { position: relative; z-index: 2; max-width: 42rem; }
.heroKicker { margin: 0 0 var(--s3); display: inline-flex; align-items: center; gap: var(--s2); }
.heroKicker::after { content: ''; width: 4.5rem; height: 1px; background: linear-gradient(90deg, var(--hair-gold), transparent); }

.heroName {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(3.6rem, 9.5vw, 9rem);
  line-height: 0.9;
  letter-spacing: 0.012em;
  text-shadow: 0 0 80px rgba(227, 173, 87, 0.35);
}
.heroSub {
  margin: var(--s3) 0 0;
  max-width: 18ch;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.18;
  color: var(--paper);
}
.heroSub em { font-style: italic; font-weight: 600; }
.heroQuote {
  margin: var(--s2) 0 0;
  max-width: 36ch;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  color: var(--paper-70);
}
.heroMeta {
  margin: var(--s3) 0 0;
  font-family: 'Space Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-45);
}
.heroMeta b { color: var(--gold); font-weight: 400; }

/* contract chip */
.ca { margin-top: var(--s4); display: flex; flex-direction: column; gap: 0.7rem; }
.caRow {
  display: flex;
  align-items: stretch;
  max-width: 32rem;
  border: 1px solid var(--hair-gold);
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(244, 236, 218, 0.05), rgba(5, 4, 10, 0.4));
}
.caVal {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--paper-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.copyBtn {
  flex: none;
  border: none;
  border-left: 1px solid var(--hair-gold);
  background: transparent;
  color: var(--gold);
  font-family: 'Space Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.9rem 1.2rem;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.copyBtn:hover, .copyBtn.copied { background: var(--gold); color: #2a1c08; }

.cta { margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.scrollCue {
  position: absolute;
  bottom: var(--s3);
  left: var(--pad-x);
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--paper-28);
  z-index: 2;
}

@media (max-width: 920px) {
  .hero {
    align-items: flex-start;
    min-height: 100svh;
    padding-top: 49vh;
    padding-bottom: var(--s5);
  }
  .heroBg { background-position: center; }
  .heroChar {
    height: 36vh;
    right: 50%;
    transform: translateX(50%);
    top: 10%;
    bottom: auto;
    opacity: 0.96;
    -webkit-mask-image: radial-gradient(60% 58% at 50% 40%, #000 40%, transparent 78%);
    mask-image: radial-gradient(60% 58% at 50% 40%, #000 40%, transparent 78%);
  }
  @keyframes charFloat { to { transform: translateX(50%) translateY(-9px); } }
  .hero::before {
    background:
      linear-gradient(0deg, var(--void) 6%, rgba(5, 4, 10, 0.74) 32%, rgba(5, 4, 10, 0.4) 52%, transparent 76%);
  }
  .heroText { width: 100%; }
  .heroName { font-size: clamp(3rem, 15vw, 4.6rem); }
  .heroSub { max-width: 24ch; font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .heroQuote { max-width: 42ch; }
  .heroMeta { font-size: 0.64rem; }
  .scrollCue { display: none; }
}

/* ── ticker marquee ─────────────────────────── */
.marquee {
  position: relative;
  z-index: 4;
  border-top: 1px solid var(--hair-gold);
  border-bottom: 1px solid var(--hair-gold);
  background: rgba(5, 4, 10, 0.7);
  overflow: hidden;
  padding: 0.9rem 0;
}
.marqueeTrack {
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
.marquee:hover .marqueeTrack { animation-play-state: paused; }
.marqueeTrack span {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper-45);
}
.marqueeTrack .dot { color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marqueeTrack, .heroBg, .heroChar { animation: none; } }

/* ── cinematic bands ────────────────────────── */
.band {
  position: relative;
  min-height: 82vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s5) var(--pad-x);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(5, 4, 10, 0.3), rgba(5, 4, 10, 0.82)),
    linear-gradient(to bottom, rgba(5, 4, 10, 0.7), rgba(5, 4, 10, 0.5), var(--void));
}
.bandInner { position: relative; z-index: 2; max-width: 24ch; }
.bandLine {
  margin: var(--s2) 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
  line-height: 1.22;
}
.bandLine b { font-weight: 600; font-style: italic; }
@media (max-width: 720px) { .band { background-attachment: scroll; min-height: 70vh; } }

/* ── section frame ──────────────────────────── */
.section { max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--pad-x); }
.secHead { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.secIdx { font-family: 'Space Mono', monospace; font-size: 0.78rem; color: var(--gold); }
.secRule { flex: 1; max-width: 9rem; height: 1px; background: linear-gradient(90deg, var(--hair-gold), transparent); }

/* ── gallery ────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.85rem; }
.shot {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--panel);
}
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--hair);
  border-radius: 4px;
  transition: border-color 0.5s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.shot:hover::after { border-color: var(--hair-gold); }
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.03);
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.shot:hover img { transform: scale(1.045); filter: saturate(1.12) contrast(1.06); }
.shot.p { grid-column: span 2; aspect-ratio: 2 / 3; }
.shot.w { grid-column: span 3; aspect-ratio: 16 / 9; }
.shot.w4 { grid-column: span 4; aspect-ratio: 16 / 9; }
.shot img { object-position: center; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot.p { grid-column: span 1; }
  .shot.w, .shot.w4 { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* ── contract ───────────────────────────────── */
.contract { border-top: 1px solid var(--hair); text-align: center; }
.contractCard {
  position: relative;
  max-width: 46rem;
  margin: var(--s3) auto 0;
  padding: var(--s3) var(--s3) var(--s4);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(244, 236, 218, 0.045), rgba(5, 4, 10, 0.3));
  border: 1px solid var(--hair-gold);
}
.contractCa {
  margin: var(--s2) 0 0;
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.7rem, 2.5vw, 1rem);
  color: var(--gold);
  word-break: break-all;
  line-height: 1.9;
}
.contractFacts { margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); }
.fact dt { font-family: 'Space Mono', monospace; font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-28); }
.fact dd { margin: 0.4rem 0 0; font-family: 'Cinzel', serif; font-size: 1.4rem; color: var(--paper); }
.contract .cta { justify-content: center; margin-top: var(--s4); }

/* ── footer ─────────────────────────────────── */
.footer { border-top: 1px solid var(--hair); padding: var(--s5) var(--pad-x) var(--s4); text-align: center; }
.footBrand { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing: 0.12em; }
.footLinks { margin: var(--s3) 0; display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; }
.footLinks a { font-family: 'Space Mono', monospace; font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-45); transition: color 0.35s var(--ease); }
.footLinks a:hover { color: var(--gold); }
.disclaimer { margin: var(--s3) auto 0; max-width: 56ch; font-family: 'Space Mono', monospace; font-size: 0.66rem; line-height: 1.9; letter-spacing: 0.04em; color: var(--paper-28); }