:root {
  --purple-deep: #241a3d;
  --purple: #362a5c;
  --purple-light: #4a3a78;
  --gold: #c9a961;
  --gold-soft: #e0c98d;
  --ink: #f4f1ea;
  --muted: #b9b2cd;
  --line: rgba(201, 169, 97, 0.28);
  --serif: 'Cormorant Garamond', 'Didot', 'Hoefler Text', Garamond, 'Times New Roman', serif;
  --sans: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--purple-deep);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* The marble plate sits behind everything, fixed, with the deep purple wash on top. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/assets/purple-marble.png') center / cover no-repeat;
  z-index: -2;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(74, 58, 120, 0.55), rgba(28, 20, 48, 0.92) 70%);
  z-index: -1;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-soft); }

.wrap { width: min(1080px, 92vw); margin: 0 auto; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(28, 20, 48, 0.72);
  border-bottom: 1px solid rgba(201, 169, 97, 0.18);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem 0;
}
.nav img { width: 190px; }
.nav-links {
  display: flex;
  gap: 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.nav-links a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--gold); }
@media (max-width: 860px) { .nav-links { display: none; } .nav img { width: 150px; } }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.hero-logo { width: min(620px, 88vw); margin: 0 auto 2.5rem; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 1.12;
  margin: 0 0 1.2rem;
  letter-spacing: 0.01em;
}
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.kicker {
  font-size: clamp(0.72rem, 1.5vw, 0.86rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
}
.rule {
  width: 120px;
  height: 1px;
  margin: 2.4rem auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- Sections ---------- */
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
section + section { border-top: 1px solid rgba(201, 169, 97, 0.14); }

.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.15;
  margin: 0 0 1.4rem;
}
h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin: 2rem 0 0.6rem;
  color: var(--gold-soft);
}
p { color: var(--muted); margin: 0 0 1.1rem; max-width: 70ch; }
strong { color: var(--ink); font-weight: 600; }

/* ---------- Cards & lists ---------- */
.card {
  background: rgba(36, 26, 61, 0.55);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  backdrop-filter: blur(6px);
}
.grid { display: grid; gap: 1.2rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.cap-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 2.4rem 0;
}
.cap-banner div {
  background: rgba(28, 20, 48, 0.72);
  padding: 1.4rem 1.2rem;
  text-align: center;
}
.cap-banner .n {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold);
}
.cap-banner .l {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.6rem;
}

ul.clean { list-style: none; padding: 0; margin: 0.4rem 0 1.4rem; }
ul.clean li {
  color: var(--muted);
  padding: 0.34rem 0 0.34rem 1.2rem;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
ul.clean li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.55rem;
  top: 0.75rem;
}
.cols-2 { columns: 2; column-gap: 2.4rem; }
.cols-2 li { break-inside: avoid; }
@media (max-width: 620px) { .cols-2 { columns: 1; } }

.terms li { padding-left: 1.4rem; }
.terms li::before { content: '—'; font-size: 0.8rem; top: 0.36rem; }

/* ---------- Tier panels ---------- */
.tier { position: relative; }
.tier .price {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--gold);
  line-height: 1;
}
.tier .price span {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.4rem;
}
.badge {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--purple-deep);
  background: var(--gold);
  padding: 0.28rem 0.7rem;
  margin-bottom: 0.9rem;
}
.badge.ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--line);
}

.giveaway {
  border-left: 2px solid var(--gold);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 1.2rem 0;
}
.giveaway .t {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.3rem;
}
.giveaway p { margin: 0; font-size: 0.94rem; }

/* ---------- Aureus ---------- */
.aureus { text-align: center; }
/* The Aureus artwork ships on its own purple plate — fade the edges so it
   dissolves into the page instead of reading as a pasted rectangle. */
.aureus-logo {
  width: min(620px, 88vw);
  margin: 0 auto 2rem;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 55%, transparent 100%);
}

/* ---------- Join button ---------- */
.join-row { margin-top: 2.8rem; }
.btn-join {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--purple-deep);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  border: none;
  padding: 1rem 2.4rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 26px rgba(201, 169, 97, 0.18);
}
.btn-join:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(201, 169, 97, 0.3); }
.btn-join::after { content: '→'; font-size: 1rem; letter-spacing: 0; }
.btn-join.ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  box-shadow: none;
}
.join-note {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Footer ---------- */
footer {
  text-align: center;
  padding: 4rem 0 3rem;
  border-top: 1px solid rgba(201, 169, 97, 0.18);
}
footer img { width: 220px; margin: 0 auto 1.6rem; opacity: 0.8; }
footer p { margin: 0 auto 0.4rem; color: var(--muted); font-size: 0.84rem; }
.fine { font-size: 0.78rem; color: rgba(185, 178, 205, 0.75); }


/* ============================================================
   MOTION — thesis: light and orbit.

   The Ophelia mark is an eclipse ringed by drifting arcs. Every
   animation below either draws light (bloom, gleam, aperture) or
   orbits (the hero rings). Nothing else moves — there is no
   fade-up-per-section reveal, on purpose.

   Entrance choreography is opt-in via the .js-motion class set on
   <html>, so with JS off or Reduce Motion on, the page renders in
   its finished state and nothing is ever hidden.
   ============================================================ */

/* Animatable mask radius for the Aureus aperture. */
@property --aperture {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 72%;
}

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --scroll-progress: 0;
}

/* ---------- Keyboard focus (was missing entirely) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.plan:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Hero stage: bloom + orbit ---------- */
.hero .wrap { position: relative; z-index: 0; }
.hero-logo, .hero-rise { position: relative; z-index: 1; }

.hero-bloom,
.hero-orbit {
  position: absolute;
  left: 50%;
  pointer-events: none;
  z-index: 0;
}

/* The eclipse light. Fires once, then it is gone. */
.hero-bloom {
  top: clamp(60px, 14vw, 190px);
  width: min(680px, 90vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.4), rgba(201, 169, 97, 0.07) 42%, transparent 70%);
  opacity: 0;
}

/* Arc system drawn from the mark's own geometry, at page scale. */
.hero-orbit {
  top: 50%;
  width: min(920px, 96vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: visible;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 94%);
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 94%);
}
.hero-orbit g {
  transform-box: fill-box;
  transform-origin: center;
}
.hero-orbit circle {
  fill: none;
  stroke: var(--gold);
  vector-effect: non-scaling-stroke;
}
.orbit-1 circle { stroke-width: 1.2; stroke-opacity: 0.34; stroke-dasharray: 118 62; }
.orbit-2 circle { stroke-width: 1;   stroke-opacity: 0.22; stroke-dasharray: 54 96; }
.orbit-3 circle { stroke-width: 1.5; stroke-opacity: 0.34; stroke-dasharray: 8 44; }

/* ---------- Scroll position, read off the nav's own edge ---------- */
.nav { transition: background 0.4s ease, border-color 0.4s ease; }
.nav::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  transform: scaleX(var(--scroll-progress));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(201, 169, 97, 0.35), var(--gold));
}
/* The bar condenses by scaling the mark, not by animating width or padding —
   the nav's own box never changes, so nothing below it reflows on scroll. */
.nav img { transition: scale 0.35s var(--ease-out); transform-origin: left center; }
.nav.is-scrolled { background: rgba(22, 15, 38, 0.88); border-bottom-color: rgba(201, 169, 97, 0.3); }
.nav.is-scrolled img { scale: 0.8; }

.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.28s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- Scarcity counters ---------- */
.cap-banner .n { font-variant-numeric: tabular-nums; }

/* ---------- Aureus: the aperture opens on an unreleased collection ---------- */
.aureus-logo {
  -webkit-mask-image: radial-gradient(ellipse var(--aperture) calc(var(--aperture) * 0.94) at 50% 48%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--aperture) calc(var(--aperture) * 0.94) at 50% 48%, #000 55%, transparent 100%);
}

/* ---------- Join button: light passes across it ---------- */
.btn-join { position: relative; overflow: hidden; }
.btn-join::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-160%) skewX(-18deg);
  transition: transform 0.7s var(--ease-out);
}
.btn-join:hover::before,
.btn-join:focus-visible::before { transform: translateX(340%) skewX(-18deg); }
.btn-join.ghost::before { background: linear-gradient(100deg, transparent, rgba(201, 169, 97, 0.28), transparent); }

.btn-join:disabled {
  cursor: wait;
  filter: saturate(0.5);
  opacity: 0.7;
  transform: none;
  box-shadow: none;
}
.btn-join:disabled::before { display: none; }
.btn-join:disabled::after { content: none; }

/* ---------- Availability meters fill to their real value ----------
   scaleX rather than width: the bar never triggers layout. */
.meter i {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease-out);
}

/* ============================================================
   Entrance choreography — only with JS and only if motion is welcome.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .hero-logo,
  .js-motion .hero-rise > * { opacity: 0; }

  .js-motion .hero-logo {
    animation: mark-resolve 1s var(--ease-out) 0.15s forwards;
  }
  .js-motion .hero-bloom {
    animation: eclipse-bloom 2.1s var(--ease-out) forwards;
  }
  .js-motion .hero-rise > * {
    animation: rise 0.75s var(--ease-out) forwards;
    animation-delay: calc(0.62s + var(--i, 0) * 0.09s);
  }
  .js-motion .hero-orbit {
    opacity: 0;
    animation: orbit-in 1.6s var(--ease-out) 0.1s forwards;
  }
  .js-motion .orbit-1 { animation: spin 150s linear infinite; }
  .js-motion .orbit-2 { animation: spin 210s linear infinite reverse; }
  .js-motion .orbit-3 { animation: spin 96s linear infinite; }
  /* The only loop on the page — it stops the moment the hero leaves. */
  .js-motion .hero-orbit.is-paused g { animation-play-state: paused; }

  .js-motion .aureus-logo { --aperture: 26%; }
  .js-motion .aureus-logo.is-open {
    transition: --aperture 1.4s var(--ease-out);
    --aperture: 72%;
  }

  .js-motion .result.show { animation: rise 0.55s var(--ease-out) forwards; }

  /* The payoff catches the same light the hero opened with. The clip-to-text
     fill only exists while the light is passing — the class is removed on
     animationend so the heading settles back to plain gold, which is what
     forced-colors and any failed paint will fall back to. */
  .js-motion .tier-name.is-gleaming {
    background: linear-gradient(100deg, var(--gold) 38%, #fff5da 50%, var(--gold) 62%) 0 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gleam 1.5s var(--ease-out) 0.25s both;
  }
}

@media (forced-colors: active) {
  .tier-name.is-gleaming {
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}

@keyframes mark-resolve {
  from { opacity: 0; transform: scale(0.965); filter: blur(11px); }
  to   { opacity: 1; transform: scale(1);     filter: blur(0); }
}
@keyframes eclipse-bloom {
  0%   { opacity: 0;    transform: scale(0.45); }
  38%  { opacity: 0.85; }
  100% { opacity: 0;    transform: scale(1.5); }
}
@keyframes orbit-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes gleam {
  from { background-position: 300% 0; }
  to   { background-position: -160% 0; }
}

/* ============================================================
   Mobile: no motion at all.

   Entrance choreography, the orbit loop, the counters and the Aureus
   aperture are already gated by .js-motion, which is only set above
   860px. This strips what remains — the hover/scroll transitions and
   the gleams — so touch devices get an entirely static page.
   ============================================================ */
@media (max-width: 860px) {
  .nav, .nav img, .nav .wrap, .nav-links a::after,
  .btn-join, .btn-join::before, .meter i,
  .plan, .plan .price, .plan h3, .plan .badge, .card {
    transition: none !important;
    animation: none !important;
  }
  .nav::after { display: none; }          /* scroll-position line */
  .btn-join::before { content: none; }    /* light sweep */
  .btn-join:hover { transform: none; box-shadow: 0 6px 26px rgba(201, 169, 97, 0.18); }
  .plan:hover { transform: none; }
  .hero-bloom { display: none; }
  .meter i { transform: scaleX(1); transform-origin: left center; }
  .tier-name.is-gleaming {
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}