:root {
  --ink: #080712;
  --night: #0d0d20;
  --indigo: #17152d;
  --violet: #2b2148;
  --paper: #eee7dc;
  --silver: #c9c5d4;
  --muted: #a7a0b6;
  --gold: #c8a56b;
  --gold-light: #f0d49a;
  --ember: #dc8b52;
  --white: #faf7f1;
  --shadow: rgba(0, 0, 0, .48);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; min-width: 320px; color: var(--paper); background: radial-gradient(circle at 72% 18%, #211b3c 0, #0d0d20 31%, #080712 68%); font-family: var(--sans); line-height: 1.5; overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; color: var(--ink); background: var(--gold-light); }
.skip-link:focus { top: 1rem; }

.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky::after { content: ""; position: absolute; inset: 0; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }
.stars { position: absolute; inset: 0; background-image: radial-gradient(circle, #f0d49a 0 1px, transparent 1.5px); background-size: 103px 91px; opacity: .45; }
.stars-b { transform: translate(31px, 19px) scale(.7); opacity: .25; }
.moon { position: absolute; width: 22rem; height: 22rem; right: -7rem; top: -8rem; border-radius: 50%; border: 1px solid rgba(240, 212, 154, .17); box-shadow: 0 0 90px rgba(105, 88, 164, .18); }

.site-header { width: min(1180px, calc(100% - 48px)); margin: 0 auto; height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(238, 231, 220, .12); letter-spacing: .16em; }
.wordmark { color: var(--paper); text-decoration: none; font-size: .74rem; font-weight: 700; }
.edition { color: var(--muted); font-size: .64rem; }

.gate { width: min(1180px, calc(100% - 48px)); min-height: calc(100vh - 92px); margin: 0 auto; padding: 8vh 0 12vh; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: 5vw; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--gold-light); text-transform: uppercase; letter-spacing: .2em; font-size: .66rem; font-weight: 700; }
.eyebrow span { width: 27px; height: 1px; background: var(--gold); }
h1, h2 { margin: .7rem 0 1.3rem; font-family: var(--serif); font-weight: 400; line-height: .95; letter-spacing: -.04em; }
h1 { font-size: clamp(3.3rem, 6.2vw, 6.5rem); }
h2 { font-size: clamp(3rem, 5vw, 5.2rem); }
h1 em, h2 em { color: var(--gold-light); font-weight: 400; }
.lede { max-width: 35rem; color: var(--silver); font-family: var(--serif); font-size: 1.2rem; line-height: 1.65; }
.capture-form { max-width: 36rem; margin-top: 2.5rem; }
.capture-form label { display: block; margin-bottom: .6rem; color: var(--muted); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.input-row { display: flex; border-bottom: 1px solid var(--gold); }
.input-row input { flex: 1; min-width: 0; padding: 1rem .2rem; border: 0; outline: 0; color: var(--white); background: transparent; font-size: 1rem; }
.input-row input::placeholder { color: #767085; }
.input-row button, .primary-action { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 1.25rem; color: var(--ink); background: var(--gold-light); cursor: pointer; text-decoration: none; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s, background .2s; }
.input-row button:hover, .primary-action:hover { transform: translateY(-2px); background: #ffe3aa; }
.form-note { color: #7e778d; font-size: .7rem; }
.form-status { min-height: 1.5em; color: var(--gold-light); font-size: .8rem; }

.altar { position: relative; width: min(100%, 480px); aspect-ratio: 4 / 5; margin: auto; }
.arch { position: absolute; inset: 2% 10% 22%; border: 1px solid rgba(200, 165, 107, .36); border-bottom: 0; border-radius: 50% 50% 0 0; box-shadow: inset 0 0 80px rgba(70, 55, 116, .16), 0 0 70px rgba(70, 55, 116, .12); }
.arch::before, .arch::after { content: ""; position: absolute; inset: 4%; border: 1px solid rgba(200, 165, 107, .12); border-bottom: 0; border-radius: inherit; }
.arch::after { inset: 9%; }
.arch-moon { position: absolute; width: 42%; aspect-ratio: 1; top: 18%; left: 29%; border-radius: 50%; background: var(--gold-light); box-shadow: -20px 9px 0 1px #17152d, 0 0 45px rgba(240, 212, 154, .2); }
.spark { position: absolute; width: 3px; height: 3px; background: var(--gold-light); box-shadow: 0 0 9px var(--gold-light); transform: rotate(45deg); }
.s1 { left: 18%; top: 38%; }.s2 { right: 17%; top: 27%; }.s3 { right: 29%; top: 59%; }
.candle { position: absolute; bottom: 16%; width: 11%; height: 24%; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #a98a68, #f1d8ae 55%, #8e6e53); box-shadow: 0 -13px 45px rgba(220, 139, 82, .2); }
.candle i { position: absolute; left: 40%; top: -18px; width: 9px; height: 19px; border-radius: 60% 40% 55% 45%; background: #ffcf75; box-shadow: 0 0 18px #dc8b52, 0 0 35px rgba(220, 139, 82, .5); animation: flicker 2.4s infinite ease-in-out; }
.candle-left { left: 22%; height: 18%; }.candle-center { left: 45%; }.candle-right { right: 21%; height: 14%; }
.altar-line { position: absolute; left: 5%; right: 5%; bottom: 15%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 8px 30px rgba(200, 165, 107, .25); }
@keyframes flicker { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(3deg) scale(.92, 1.07); } }

.wall { width: min(1260px, calc(100% - 40px)); margin: 0 auto; padding: 7rem 0 4rem; animation: reveal .7s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(16px); } }
.wall-heading { max-width: 650px; margin: 0 auto 6rem; text-align: center; }
.wall-heading .eyebrow { justify-content: center; }
.wall-heading > p:last-child { color: var(--muted); font-family: var(--serif); font-size: 1.1rem; }
.ritual-wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.4rem 1.5rem; align-items: start; }
.ritual-card { grid-column: span 4; background: #ded4c5; color: #18131b; padding: 10px 10px 1.15rem; box-shadow: 0 18px 45px var(--shadow); transform: rotate(var(--tilt)); transition: transform .25s, box-shadow .25s; }
.ritual-card:nth-child(1) { --tilt: -2.2deg; margin-top: 4rem; }.ritual-card:nth-child(2) { --tilt: 1.4deg; }.ritual-card:nth-child(3) { --tilt: -1deg; margin-top: 6rem; }
.ritual-card:nth-child(4) { --tilt: 2.4deg; grid-column: 2 / span 4; }.ritual-card:nth-child(5) { --tilt: -1.8deg; grid-column: 6 / span 4; margin-top: 4rem; }.ritual-card:nth-child(6) { --tilt: 1.2deg; grid-column: 10 / span 3; }
.ritual-card:nth-child(7) { --tilt: -2.5deg; grid-column: 3 / span 4; }.ritual-card:nth-child(8) { --tilt: 2deg; grid-column: 8 / span 4; margin-top: 3rem; }
.ritual-card:hover, .ritual-card:focus-within { transform: rotate(0) translateY(-8px); box-shadow: 0 26px 60px rgba(0, 0, 0, .62); z-index: 2; }
.card-button { width: 100%; padding: 0; border: 0; text-align: left; color: inherit; background: transparent; cursor: pointer; }
.photo-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--night); }
.photo-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(8, 7, 18, .55)); }
.photo-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.78) contrast(1.06); transition: transform .45s; }
.card-button:hover img { transform: scale(1.035); }
.pin { position: absolute; z-index: 2; width: 10px; height: 10px; left: calc(50% - 5px); top: 8px; border-radius: 50%; background: #c99d72; box-shadow: 1px 3px 5px rgba(0, 0, 0, .55); }
.view-badge { position: absolute; z-index: 2; right: 9px; bottom: 9px; padding: .3rem .5rem; color: var(--white); background: rgba(8, 7, 18, .78); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }
.card-copy { padding: 1rem .45rem 0; }
.category { color: #765a35; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.card-copy h3 { margin: .25rem 0 .45rem; font-family: var(--serif); font-size: 1.75rem; font-weight: 400; line-height: 1.1; }
.card-copy p { min-height: 3.9em; margin: 0; color: #5e5661; font-family: var(--serif); font-size: .84rem; line-height: 1.45; }
.watch { display: flex; justify-content: space-between; margin-top: 1rem; padding-top: .65rem; border-top: 1px solid rgba(24, 19, 27, .17); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.wall-footnote { margin-top: 7rem; color: var(--muted); text-align: center; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }

.ritual-dialog { width: min(580px, calc(100% - 28px)); padding: clamp(1.6rem, 5vw, 3.6rem); border: 1px solid rgba(200, 165, 107, .38); color: var(--paper); background: radial-gradient(circle at 80% 0, #2b2148, #0d0d20 55%); box-shadow: 0 30px 100px #000; }
.ritual-dialog::backdrop { background: rgba(5, 4, 12, .84); backdrop-filter: blur(7px); }
.ritual-dialog[open] { animation: modal-in .25s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal-close { position: absolute; right: 1rem; top: .7rem; border: 0; color: var(--silver); background: transparent; font-size: 2rem; cursor: pointer; }
.modal-kicker { color: var(--gold-light); text-transform: uppercase; letter-spacing: .18em; font-size: .64rem; font-weight: 700; }
.ritual-dialog h2 { margin: .6rem 0 1rem; font-size: clamp(2.3rem, 7vw, 3.8rem); line-height: 1; }
.modal-body { color: var(--silver); font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; }
.modal-actions { display: grid; gap: 1rem; margin-top: 2rem; }
.text-action { border: 0; padding: .8rem; color: var(--silver); background: transparent; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.video-frame { margin: 1.5rem 0; padding: 1rem; border: 1px solid rgba(200, 165, 107, .25); background: #080712; text-align: center; }
.video-frame iframe { display: block; width: 100%; height: min(68vh, 600px); border: 0; background: var(--ink); }
[hidden] { display: none !important; }

.offer-page { padding: clamp(4rem, 9vw, 8rem) 24px 7rem; animation: reveal .7s ease both; }
.offer-container { width: min(760px, 100%); margin: 0 auto; }
.offer-header { padding-bottom: clamp(3rem, 7vw, 5rem); text-align: center; }
.offer-header .eyebrow { justify-content: center; }
.offer-header h1 { max-width: 13ch; margin: 1.2rem auto 1.8rem; font-size: clamp(3.2rem, 8vw, 6.4rem); }
.offer-header .subhead { max-width: 680px; margin: 0 auto; color: var(--silver); font-family: var(--serif); font-size: clamp(1.05rem, 2.3vw, 1.3rem); line-height: 1.7; }
.offer-proof { margin-bottom: clamp(3rem, 7vw, 5rem); padding: 1.25rem; border-top: 1px solid rgba(200, 165, 107, .32); border-bottom: 1px solid rgba(200, 165, 107, .32); text-align: center; }
.proof-stat { margin: 0; color: var(--gold-light); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.offer-copy { color: var(--silver); font-family: var(--serif); font-size: clamp(1.08rem, 2.4vw, 1.25rem); line-height: 1.8; }
.offer-copy p { margin: 0 0 2.4rem; }
.offer-copy strong { color: var(--paper); font-weight: 700; }
.offer-details, .offer-guarantee { margin-top: clamp(4rem, 8vw, 6rem); padding: clamp(1.75rem, 5vw, 3rem); border: 1px solid rgba(200, 165, 107, .28); background: rgba(23, 21, 45, .62); box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.offer-details h2, .offer-guarantee h2 { margin: 0 0 1.6rem; font-size: clamp(2.1rem, 5vw, 3.2rem); }
.offer-details ul { margin: 0; padding: 0; list-style: none; }
.offer-details li { position: relative; padding: .85rem 0 .85rem 1.6rem; border-top: 1px solid rgba(238, 231, 220, .1); color: var(--silver); }
.offer-details li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: .7rem; }
.offer-guarantee { margin-top: 1.5rem; border-color: rgba(238, 231, 220, .14); background: rgba(13, 13, 32, .72); }
.offer-guarantee p { margin: 0; color: var(--silver); font-family: var(--serif); font-size: 1.05rem; line-height: 1.7; }
.offer-price { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: clamp(3rem, 7vw, 5rem); }
.price-tag { color: var(--gold-light); font-family: var(--serif); font-size: 3rem; line-height: 1; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 1rem 1.5rem; color: var(--ink); background: var(--gold-light); text-decoration: none; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s, background .2s; }
.primary-button:hover { transform: translateY(-2px); background: #ffe3aa; }
.primary-button:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.offer-ps { max-width: 620px; margin: 3rem auto 0; color: var(--muted); font-family: var(--serif); font-size: .9rem; line-height: 1.65; text-align: center; }

@media (max-width: 900px) {
  .gate { grid-template-columns: 1fr; padding-top: 5rem; }
  .gate-copy { text-align: center; }.gate-copy .eyebrow { justify-content: center; }.lede, .capture-form { margin-left: auto; margin-right: auto; }
  .altar { width: min(75vw, 430px); }
  .ritual-card, .ritual-card:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .ritual-card:nth-child(odd) { --tilt: -1.5deg; }.ritual-card:nth-child(even) { --tilt: 1.5deg; margin-top: 2.5rem; }
}

@media (max-width: 560px) {
  .site-header { width: calc(100% - 32px); height: 72px; }.edition { display: none; }
  .gate { width: calc(100% - 32px); min-height: calc(100svh - 72px); padding: 4rem 0; }
  h1 { font-size: clamp(2.8rem, 14vw, 4rem); }.lede { font-size: 1.05rem; }
  .input-row { display: grid; border: 0; gap: .8rem; }.input-row input { border-bottom: 1px solid var(--gold); text-align: center; }.input-row button { min-height: 52px; }
  .altar { width: min(90vw, 370px); }
  .wall { width: calc(100% - 38px); padding-top: 5rem; }.wall-heading { margin-bottom: 3.5rem; }
  .ritual-wall { display: flex; flex-direction: column; gap: 2rem; }.ritual-card, .ritual-card:nth-child(n) { width: 95%; margin: 0 auto; transform: rotate(var(--tilt)); }.ritual-card:nth-child(3n) { width: 91%; }
  .card-copy p { min-height: auto; }.wall-footnote { margin-top: 4rem; }
  .offer-page { padding: 3.5rem 18px 5rem; }
  .offer-header { text-align: left; }.offer-header .eyebrow { justify-content: flex-start; }.offer-header h1 { margin-left: 0; }
  .offer-header .subhead { line-height: 1.6; }
  .offer-details, .offer-guarantee { padding: 1.5rem; }
  .offer-price { flex-direction: column; gap: 1.25rem; }.primary-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
