:root {
  --ink: #070807;
  --coal: #0d100f;
  --panel: #121513;
  --line: rgba(220, 180, 102, 0.2);
  --gold: #d6aa5b;
  --gold-light: #f1d08e;
  --bone: #f4efe5;
  --muted: #a8a69f;
  --ocean: #183343;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: Arial, Helvetica, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 76px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 clamp(24px, 5vw, 78px); border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(4,5,5,.96), rgba(4,5,5,.72)); backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; letter-spacing: .14em; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 40px; color: #19140c; font: 700 22px Georgia, serif; background: linear-gradient(145deg,#f0d38f,#a8782c); clip-path: polygon(50% 0,100% 24%,89% 82%,50% 100%,11% 82%,0 24%); }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1; }
.brand b { font: 700 15px Georgia, serif; color: var(--gold-light); }
.brand i { margin-top: 5px; color: #d5d1c8; font: 600 8px Arial, sans-serif; font-style: normal; letter-spacing: .32em; }
.nav { display: flex; gap: 42px; color: #c8c5bc; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.nav a { position: relative; padding: 29px 0; }
.nav a::after { content:""; position: absolute; left:0; right:100%; bottom:20px; height:1px; background:var(--gold); transition:.25s; }
.nav a:hover::after { right:0; }
.header-actions { display:flex; align-items:center; gap:18px; }
.text-button, .menu-button, .all-link { color:#d1cec6; background:none; border:0; cursor:pointer; }
.text-button { font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.menu-button { display:none; font-size:22px; }

.gold-button, .outline-gold, .ghost-button {
  min-height: 48px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 26px;
  border:1px solid transparent; border-radius:2px; cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:11px; transition:transform .2s, filter .2s, background .2s;
}
.gold-button { color:#17130d; background:linear-gradient(115deg,#ba8737,#efd28f 52%,#bd8938); box-shadow:0 10px 34px rgba(193,139,57,.2); }
.gold-button:hover, .outline-gold:hover, .ghost-button:hover { transform:translateY(-2px); filter:brightness(1.08); }
.gold-button.small { min-height:38px; padding:0 19px; font-size:10px; }
.gold-button.full { width:100%; }
.outline-gold { width:100%; color:var(--gold-light); border-color:rgba(214,170,91,.5); background:transparent; }
.ghost-button { color:#e8e3d8; border-color:rgba(255,255,255,.22); background:rgba(8,10,9,.4); }

.hero { position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:center; padding:120px clamp(24px,7vw,112px) 70px; }
.hero-art { position:absolute; inset:0; background:#0b0c0c url('assets/hero.png') center/cover no-repeat; transform:scale(1.015); }
.hero-vignette { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,5,5,.97) 0%,rgba(4,5,5,.79) 28%,rgba(4,5,5,.15) 60%,rgba(4,5,5,.5) 100%), linear-gradient(0deg,rgba(4,5,5,.9),transparent 36%,rgba(4,5,5,.24)); }
.hero-content { position:relative; z-index:2; width:min(570px,100%); padding-top:40px; }
.eyebrow { display:flex; align-items:center; gap:11px; color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.eyebrow > span { display:inline-block; width:32px; height:1px; background:var(--gold); }
.hero h1 { margin:20px 0 0; color:#f4efe4; font:400 clamp(62px,7.4vw,112px)/.78 Georgia, 'Times New Roman', serif; letter-spacing:-.055em; text-shadow:0 4px 28px #000; }
.hero h1 em { color:var(--gold-light); font-weight:600; font-style:normal; }
.hero-kicker { margin:23px 0 0 5px; color:#c5bca8; font:600 12px Georgia,serif; letter-spacing:.68em; }
.hero-copy { max-width:510px; margin:28px 0 18px; color:#c6c2b9; font:15px/1.8 Georgia,serif; }
.meta-row { display:flex; flex-wrap:wrap; gap:0; color:#b5b0a5; font-size:11px; letter-spacing:.08em; }
.meta-row span:not(:last-child)::after { content:'·'; margin:0 11px; color:#675b46; }
.meta-row .age { border:1px solid rgba(255,255,255,.25); padding:1px 5px; }
.meta-row .age::after { display:none; }
.hero-actions { display:flex; gap:12px; margin-top:31px; }
.play-mini { font-size:9px; }
.free-note { margin:14px 0 0 2px; color:#898780; font-size:10px; letter-spacing:.05em; }
.hero-scroll { position:absolute; z-index:2; right:clamp(24px,4vw,65px); bottom:44px; writing-mode:vertical-rl; color:#77746d; font-size:8px; letter-spacing:.35em; }
.hero-scroll span { margin-top:10px; color:var(--gold); font-size:17px; }

.story-section, .plans-section { padding:100px clamp(24px,6vw,96px); background:radial-gradient(circle at 50% 0,rgba(137,88,28,.09),transparent 37%),#090b0a; }
.section-heading { display:flex; align-items:end; justify-content:space-between; max-width:1450px; margin:0 auto 42px; }
.section-heading h2, .how-intro h2, .plans-section h2, .closing-banner h2 { margin:11px 0 0; font:400 clamp(34px,4vw,58px)/1.1 Georgia,serif; letter-spacing:-.025em; }
.all-link { color:var(--gold-light); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:10px 0; }
.all-link span { margin-left:12px; font-size:18px; }
.story-grid { display:grid; grid-template-columns:repeat(6,minmax(180px,1fr)); gap:16px; max-width:1450px; margin:auto; overflow-x:auto; padding:0 0 16px; scrollbar-color:#735726 transparent; }
.story-card { position:relative; min-height:390px; overflow:hidden; padding:0; color:white; text-align:left; border:1px solid rgba(255,255,255,.09); background:#171b19; cursor:pointer; }
.story-image { position:absolute; inset:0; background:url('assets/hero.png') center/cover no-repeat; transform:scale(1.08); transition:transform .5s,filter .4s; filter:saturate(.78) brightness(.72); }
.story-image.position-15 { background-position:15% center; }
.story-image.position-28 { background-position:28% center; }
.story-image.position-41 { background-position:41% center; }
.story-image.position-54 { background-position:54% center; }
.story-image.position-67 { background-position:67% center; }
.story-image.position-80 { background-position:80% center; }
.story-card.wine .story-image { filter:sepia(.1) hue-rotate(320deg) saturate(.9) brightness(.65); }
.story-card.ocean .story-image { filter:hue-rotate(145deg) saturate(.8) brightness(.65); }
.story-card.storm .story-image { filter:grayscale(.42) contrast(1.1) brightness(.63); }
.story-card.sand .story-image { filter:sepia(.6) saturate(.7) brightness(.69); }
.story-card.iron .story-image { filter:grayscale(.9) brightness(.55); }
.story-card:hover .story-image { transform:scale(1.14); filter:brightness(.9); }
.story-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,5,5,.98),rgba(4,5,5,.06) 72%),linear-gradient(90deg,rgba(0,0,0,.25),transparent); }
.story-badge { position:absolute; top:16px; left:15px; padding:6px 8px; background:rgba(7,8,7,.77); border-left:2px solid var(--gold); color:#e5c880; font-size:7px; font-weight:700; letter-spacing:.15em; }
.story-info { position:absolute; left:17px; right:16px; bottom:20px; display:flex; flex-direction:column; }
.story-info small { color:#bd9b5b; font-size:8px; font-weight:700; letter-spacing:.17em; }
.story-info strong { margin-top:8px; font:600 22px/1.02 Georgia,serif; }
.story-info em { margin-top:5px; color:#b5b0a5; font:10px Arial,sans-serif; font-style:normal; letter-spacing:.12em; text-transform:uppercase; }
.round-play { position:absolute; right:15px; bottom:20px; display:grid; place-items:center; width:35px; height:35px; border:1px solid rgba(235,210,157,.5); border-radius:50%; color:var(--gold-light); font-size:9px; opacity:0; transform:translateY(5px); transition:.25s; }
.story-card:hover .round-play { opacity:1; transform:none; }

.how-section { display:grid; grid-template-columns:.9fr 1.5fr; gap:8vw; padding:112px clamp(24px,8vw,130px); background:linear-gradient(120deg,#11130f,#090b0a 58%,#11191c); border-block:1px solid rgba(214,170,91,.1); }
.how-intro > p:last-child { max-width:430px; margin-top:22px; color:#98968f; font:14px/1.8 Georgia,serif; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(214,170,91,.18); }
.steps article { position:relative; min-height:285px; padding:34px 28px; background:#0d100e; }
.steps article > b { position:absolute; top:25px; right:25px; color:rgba(214,170,91,.26); font:40px Georgia,serif; }
.step-icon { display:grid; place-items:center; width:50px; height:50px; border:1px solid rgba(214,170,91,.28); color:var(--gold); font:26px Georgia,serif; }
.steps h3 { margin:65px 0 10px; font:600 19px Georgia,serif; }
.steps p { margin:0; color:#929089; font-size:12px; line-height:1.7; }

.plans-section { text-align:center; }
.centered { justify-content:center; }
.plans-section > h2 { margin-bottom:45px; }
.public-plans { display:grid; grid-template-columns:repeat(2,minmax(0,420px)); justify-content:center; gap:18px; }
.public-plans article { position:relative; padding:40px 38px; text-align:left; border:1px solid rgba(214,170,91,.22); background:linear-gradient(150deg,#131613,#0d0f0e); }
.public-plans .featured-plan { border-color:rgba(232,194,119,.7); box-shadow:0 20px 70px rgba(145,96,28,.14); }
.popular { position:absolute; inset:0 0 auto; padding:7px; text-align:center; color:#1a140b; background:var(--gold); font-size:8px; font-weight:800; letter-spacing:.2em; }
.public-plans small { color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.18em; }
.featured-plan > small { display:block; margin-top:8px; }
.public-plans h3 { margin:12px 0 20px; font:500 26px Georgia,serif; }
.price { color:#f3dfad; font:600 46px Georgia,serif; }
.price i { color:#8f8c84; font:11px Arial,sans-serif; font-style:normal; }
.public-plans p { margin:6px 0 24px; color:#8d8b85; font-size:11px; }
.public-plans ul { list-style:none; margin:0 0 28px; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.08); }
.public-plans li { margin:12px 0; color:#c1beb6; font-size:12px; }
.public-plans li::before { content:'✓'; margin-right:10px; color:var(--gold); }

.closing-banner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:76px clamp(24px,8vw,130px); overflow:hidden; background:linear-gradient(90deg,rgba(7,8,7,.96),rgba(7,8,7,.55)),url('assets/hero.png') center 40%/cover no-repeat; border-block:1px solid var(--line); }
.closing-banner::after { content:''; position:absolute; inset:auto 10% -120px auto; width:420px; height:240px; border:1px solid rgba(214,170,91,.1); transform:rotate(-12deg); }
.closing-banner > * { position:relative; z-index:1; }
.closing-banner h2 { max-width:760px; }
footer { display:grid; grid-template-columns:1fr 1.3fr 1fr; align-items:center; gap:30px; padding:48px clamp(24px,6vw,96px) 30px; color:#7f7d77; background:#060706; }
.footer-brand { opacity:.8; }
footer p { font:11px/1.7 Georgia,serif; text-align:center; }
footer > div { display:flex; justify-content:flex-end; gap:20px; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
footer small { grid-column:1/-1; padding-top:25px; border-top:1px solid rgba(255,255,255,.06); text-align:center; font-size:8px; letter-spacing:.1em; }

.modal-layer { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:32px; background:rgba(2,3,3,.94); backdrop-filter:blur(14px); }
.modal-close { position:fixed; top:21px; right:30px; z-index:2; width:42px; height:42px; color:#ddd7cb; background:rgba(15,16,15,.8); border:1px solid rgba(255,255,255,.18); border-radius:50%; font-size:30px; font-weight:200; cursor:pointer; }
.series-modal { display:grid; grid-template-columns:minmax(440px,1.3fr) minmax(370px,.75fr); width:min(1230px,100%); max-height:calc(100vh - 64px); overflow:hidden; border:1px solid rgba(214,170,91,.26); background:#0a0c0b; box-shadow:0 30px 120px #000; }
.viewer { position:relative; min-height:650px; overflow:hidden; background:#050606; }
.viewer-image { position:absolute; inset:0; background:url('assets/hero.png') center/cover no-repeat; filter:brightness(.65); }
.viewer-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,3,3,.92),transparent 48%,rgba(2,3,3,.35)),linear-gradient(90deg,rgba(2,3,3,.3),transparent); }
.viewer-title { position:absolute; top:35px; left:38px; }
.viewer-title small { color:var(--gold); font-size:8px; font-weight:700; letter-spacing:.2em; }
.viewer-title h2 { margin:8px 0; font:400 34px Georgia,serif; }
.big-play { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:84px; height:84px; padding-left:5px; border:1px solid var(--gold-light); border-radius:50%; color:#1c160c; background:rgba(221,180,96,.91); font-size:24px; cursor:pointer; box-shadow:0 0 0 12px rgba(214,170,91,.1); }
.big-play.active { padding-left:0; background:rgba(10,12,11,.8); color:var(--gold-light); }
.playing-note { position:absolute; top:calc(50% + 68px); left:50%; transform:translateX(-50%); white-space:nowrap; color:#d8c89f; font-size:9px; letter-spacing:.16em; }
.fake-controls { position:absolute; left:30px; right:30px; bottom:25px; display:flex; align-items:center; gap:14px; }
.fake-controls button { color:#e8e3d8; background:none; border:0; cursor:pointer; }
.fake-controls > div { flex:1; height:2px; background:rgba(255,255,255,.24); }
.fake-controls > div span { display:block; height:100%; background:var(--gold); transition:width 1s; }
.fake-controls time { color:#b6b2a9; font-size:9px; }
.episode-panel { overflow:auto; padding:40px 34px; background:radial-gradient(circle at 30% 0,rgba(160,109,35,.12),transparent 37%),#0d100e; }
.episode-panel > h2 { margin:12px 0; font:500 38px Georgia,serif; }
.synopsis { color:#98968f; font:12px/1.7 Georgia,serif; }
.episode-list { margin-top:26px; border-top:1px solid rgba(255,255,255,.08); }
.episode { width:100%; display:grid; grid-template-columns:38px 1fr 34px; align-items:center; gap:9px; padding:13px 4px; color:#c6c2b9; text-align:left; border:0; border-bottom:1px solid rgba(255,255,255,.07); background:transparent; cursor:pointer; }
.episode.active { color:#f0d594; background:linear-gradient(90deg,rgba(214,170,91,.1),transparent); }
.episode-number { color:#716f69; font:14px Georgia,serif; }
.episode-name { display:flex; flex-direction:column; gap:5px; }
.episode-name b { font:500 13px Georgia,serif; }
.episode-name small { color:#6f6e69; font-size:8px; letter-spacing:.12em; }
.episode-action { display:grid; place-items:center; width:29px; height:29px; border:1px solid rgba(214,170,91,.35); border-radius:50%; color:var(--gold); font-size:8px; }
.episode-action.locked { border-color:rgba(255,255,255,.12); color:#77746d; }

.paywall-backdrop { position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:18px; overflow:auto; background:rgba(0,0,0,.77); backdrop-filter:blur(10px); }
.paywall { position:relative; width:min(570px,100%); margin:auto; padding:30px 31px 28px; border:1px solid rgba(221,183,105,.45); background:radial-gradient(circle at 50% 0,rgba(157,106,36,.25),transparent 35%),linear-gradient(145deg,#171a17,#0c0e0d 75%); box-shadow:0 35px 130px #000,0 0 70px rgba(144,93,24,.18); }
.paywall-close { position:absolute; top:12px; right:15px; color:#c9c4b8; border:0; background:none; font-size:27px; cursor:pointer; }
.paywall-brand { display:flex; align-items:center; justify-content:center; gap:9px; color:var(--gold-light); font:13px Georgia,serif; letter-spacing:.08em; }
.paywall-brand .brand-mark { width:27px; height:31px; font-size:16px; }
.paywall-brand i { color:#a6b4ba; font-style:normal; }
.rating { margin:19px 0 0; color:#e6bd62; text-align:center; font-size:13px; letter-spacing:.05em; }
.rating span { display:block; margin-top:5px; color:#9c9a94; font-size:9px; letter-spacing:.02em; }
.paywall h2 { margin:17px 0 8px; text-align:center; font:500 32px Georgia,serif; }
.paywall-copy { margin:0 auto 22px; max-width:420px; color:#a5a29b; text-align:center; font:11px/1.6 Georgia,serif; }
.pay-options { display:flex; flex-direction:column; gap:9px; }
.pay-option { position:relative; display:grid; grid-template-columns:23px 1fr auto; align-items:center; gap:10px; width:100%; min-height:72px; padding:12px 15px; color:#d6d2c9; text-align:left; border:1px solid rgba(255,255,255,.12); background:rgba(8,9,8,.5); cursor:pointer; }
.pay-option.selected { border-color:var(--gold); background:linear-gradient(90deg,rgba(214,170,91,.16),rgba(214,170,91,.03)); box-shadow:inset 0 0 24px rgba(214,170,91,.05); }
.radio { width:17px; height:17px; border:1px solid #77746c; border-radius:50%; }
.selected .radio { border:5px solid var(--gold); }
.pay-option > span:nth-child(2), .pay-option > span:nth-child(3) { display:flex; flex-direction:column; gap:5px; }
.pay-option b { font-size:10px; letter-spacing:.1em; }
.pay-option small { color:#85827b; font-size:9px; }
.pay-option > strong { color:#f0d28d; font:600 23px Georgia,serif; white-space:nowrap; }
.pay-option > strong i { display:block; color:#8b8982; text-align:right; font:8px Arial,sans-serif; font-style:normal; }
.tag { position:absolute!important; top:-1px; right:13px; padding:4px 7px; color:#21180b; background:var(--gold); font-size:6px; font-weight:800; letter-spacing:.15em; }
.pay-button { margin-top:17px; }
.secure-line { text-align:center; color:#7f7d77; font-size:8px; letter-spacing:.08em; }
.demo-notice { margin:10px 0 0; padding:10px; color:#e6cb92; text-align:center; background:rgba(214,170,91,.1); border:1px solid rgba(214,170,91,.25); font-size:9px; line-height:1.5; }
.includes { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin-top:18px; padding-top:17px; color:#9a978f; border-top:1px solid rgba(255,255,255,.08); font-size:9px; }
.includes b { grid-column:1/-1; color:#d3cfc5; font:500 13px Georgia,serif; }

@media (max-width: 1100px) {
  .story-grid { grid-template-columns:repeat(6,220px); }
  .series-modal { grid-template-columns:1fr 390px; }
  .viewer { min-height:590px; }
  .how-section { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  .topbar { height:64px; padding:0 18px; }
  .brand b { font-size:13px; }
  .nav { position:absolute; top:64px; left:0; right:0; display:none; flex-direction:column; gap:0; padding:15px 24px 25px; background:rgba(6,7,6,.98); border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .nav a { padding:13px 0; }
  .header-actions .text-button { display:none; }
  .menu-button { display:block; }
  .hero { align-items:end; min-height:850px; padding:100px 23px 70px; }
  .hero-art { background-position:60% center; }
  .hero-vignette { background:linear-gradient(0deg,rgba(4,5,5,.98) 3%,rgba(4,5,5,.6) 66%,rgba(4,5,5,.26)),linear-gradient(90deg,rgba(4,5,5,.58),transparent); }
  .hero h1 { font-size:65px; }
  .hero-copy { font-size:14px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-scroll { display:none; }
  .story-section, .plans-section { padding:72px 20px; }
  .section-heading { align-items:start; flex-direction:column; gap:15px; }
  .story-grid { margin-right:-20px; grid-template-columns:repeat(6,210px); }
  .story-card { min-height:355px; }
  .how-section { padding:80px 20px; }
  .steps { grid-template-columns:1fr; }
  .steps article { min-height:210px; }
  .steps h3 { margin-top:40px; }
  .public-plans { grid-template-columns:1fr; }
  .closing-banner { align-items:flex-start; flex-direction:column; padding:65px 22px; }
  footer { grid-template-columns:1fr; text-align:center; }
  footer p { text-align:center; }
  footer > div { justify-content:center; flex-wrap:wrap; }
  .footer-brand { justify-self:center; }
  .modal-layer { padding:0; align-items:stretch; }
  .modal-close { top:12px; right:12px; }
  .series-modal { display:block; max-height:100vh; width:100%; overflow:auto; border:0; }
  .viewer { min-height:54vh; }
  .viewer-title { left:22px; top:23px; }
  .viewer-title h2 { max-width:280px; font-size:27px; }
  .episode-panel { padding:31px 20px 60px; }
  .paywall-backdrop { padding:0; align-items:end; }
  .paywall { width:100%; padding:27px 16px 22px; border-width:1px 0 0; }
  .pay-option { grid-template-columns:20px 1fr auto; padding:11px 10px; }
  .pay-option > strong { font-size:19px; }
}