:root{
  /* ============================================================
     GLOBAL EDITABLE DESIGN TOKENS
     These can later be generated from the backend/theme table.
     ============================================================ */
  --color-gold:#d8b36a;
  --color-gold-light:#f3d99a;
  --color-ink:#332433;
  --color-paper:#f4eadb;
  --color-plum:#5d315e;
  --color-white:#fffaf2;
  --font-display:'Cormorant Garamond',serif;
  --font-script:'Great Vibes',cursive;
  --font-ui:'Montserrat',sans-serif;
  --hero-height:100svh;
  --section-min-height:720px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#1b111b;color:var(--color-ink);font-family:var(--font-display);overflow-x:hidden}
button,a{font:inherit}

.section{position:relative;isolation:isolate;overflow:hidden;min-height:var(--section-min-height)}
.bg-layer,.hero-vignette,.paper-glow,.final-overlay,.footer-bg,.floating-lights,.sparkles{position:absolute;inset:0;pointer-events:none}

/* ============================================================
   HERO — editable background / effects / typography / button
   ============================================================ */
.hero{min-height:var(--hero-height);display:grid;place-items:center;text-align:center;color:var(--color-white)}
.hero .bg-layer{
  z-index:-3;
  background-image:url('assets/hero-bg.png');
  background-size:cover;
  background-position:center 38%;
  transform:scale(1.02);
}
.hero-vignette{z-index:-2;background:radial-gradient(circle at 65% 45%,transparent 15%,rgba(27,12,25,.18) 52%,rgba(20,8,20,.58) 100%)}
.floating-lights{z-index:-1;opacity:.55;background-image:radial-gradient(circle at 15% 20%,rgba(255,222,157,.7) 0 2px,transparent 3px),radial-gradient(circle at 80% 16%,rgba(255,230,171,.8) 0 2px,transparent 3px),radial-gradient(circle at 68% 72%,rgba(255,227,162,.6) 0 1px,transparent 3px);background-size:170px 190px,210px 240px,120px 170px;animation:floatLights 10s linear infinite}
.hero-content{width:min(760px,90vw);padding:7vh 20px 10vh;text-shadow:0 5px 30px rgba(0,0,0,.4)}
.crown{font-size:34px;color:var(--color-gold-light);line-height:1;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.eyebrow{font:500 11px/1.6 var(--font-ui);letter-spacing:.42em;text-transform:uppercase;color:rgba(255,248,230,.92)}
.hero h1{font:600 clamp(60px,9vw,122px)/.78 var(--font-display);letter-spacing:.02em;margin:22px 0 24px;color:#f8dfad}
.hero h1 span{font-size:.72em;letter-spacing:.03em}
.gold-rule{height:1px;width:min(300px,55vw);margin:22px auto;background:linear-gradient(90deg,transparent,var(--color-gold),transparent);position:relative}
.gold-rule:after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 8px;background:transparent;color:var(--color-gold-light);font-size:14px}
.gold-rule.small{width:180px;margin:18px auto}
.date{font:500 clamp(20px,3vw,34px)/1 var(--font-display);letter-spacing:.3em;color:#fff5db;margin:18px 0 34px}
.play-button{width:108px !important;height:108px !important;min-width:108px !important;min-height:108px !important;border-radius:50% !important;border:2px solid var(--color-gold-light);background:radial-gradient(circle,#7d4b79,#351a37 70%);color:#ffe7ae;font-size:34px;display:grid;place-items:center;margin:0 auto;box-shadow:0 0 0 8px rgba(216,179,106,.12),0 16px 40px rgba(0,0,0,.35);cursor:pointer;transition:transform .3s,box-shadow .3s;box-sizing:border-box !important;flex-shrink:0 !important;aspect-ratio:1/1 !important;outline:none}
.play-button:hover{transform:scale(1.06);box-shadow:0 0 0 12px rgba(216,179,106,.12),0 18px 48px rgba(0,0,0,.4)}
.play-label{font:400 10px/1.7 var(--font-ui);letter-spacing:.36em;margin-top:20px;color:#fff5e4;text-align:center}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font:400 9px var(--font-ui);letter-spacing:.3em;opacity:.65}

/* ============================================================
   PAPER SECTIONS
   ============================================================ */
.paper{background:var(--color-paper);display:grid;place-items:center;text-align:center}
.paper .bg-layer{z-index:-2;background-image:url('assets/paper-bg.png');background-size:cover;background-position:center;opacity:.95}
.paper-glow{z-index:-1;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.7),transparent 50%)}
.intro{min-height:520px}
.content-narrow{max-width:900px;padding:90px 28px}
.script-title{font:400 clamp(48px,7vw,84px)/.75 var(--font-script);color:#4e3349;margin-bottom:12px}
.paper h2{font:500 clamp(38px,5vw,68px)/.9 var(--font-display);letter-spacing:.08em;margin:0;color:#4b3543}
.paper p{font:400 clamp(18px,2.2vw,24px)/1.5 var(--font-display);margin:8px 0;color:#55434a}
.lantern{position:absolute;left:8%;top:17%;font-size:58px;color:#e4b85f;filter:drop-shadow(0 0 22px rgba(240,190,90,.7));animation:sway 4s ease-in-out infinite}

/* ============================================================
   VIDEO MODAL — video URL editable
   ============================================================ */
.video-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(12,5,13,.82);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.35s}
.video-modal.open{opacity:1;visibility:visible}
.video-modal-inner{width:min(1100px,92vw);position:relative}
.modal-close{position:absolute;right:-10px;top:-52px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.35);color:white;font-size:28px;cursor:pointer}
.video-frame{aspect-ratio:16/9;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.video-frame iframe{width:100%;height:100%;border:0}

/* ============================================================
   POSTCARD SECTION
   ============================================================ */
.postcard-section{min-height:720px;padding:90px 6vw}
.sparkles{z-index:-1;opacity:.45;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 2px);background-size:95px 95px;animation:drift 18s linear infinite}
.postcard-grid{width:min(1200px,100%);display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;text-align:left}
.postcard-copy{padding-left:4vw}
.eyebrow.dark{color:#75586a}
.postcard-copy h2{font-size:clamp(56px,7vw,94px);line-height:.82;letter-spacing:0;margin:20px 0 26px}
.postcard-copy p{font-size:20px}
.download-button{display:inline-flex;align-items:center;gap:12px;margin-top:12px;padding:17px 26px;border-radius:999px;background:linear-gradient(135deg,#633762,#472044);color:#fff5e9;text-decoration:none;font:600 11px var(--font-ui);letter-spacing:.17em;box-shadow:0 12px 28px rgba(71,32,68,.24);transition:transform .25s,box-shadow .25s}
.download-button:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(71,32,68,.3)}
.download-button span:first-child{font-size:21px}
.postcard-art{position:relative;width:min(470px,85vw);justify-self:center;aspect-ratio:.72;transform:rotate(2deg)}
.postcard-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:9px solid #fffaf2;box-shadow:0 22px 50px rgba(60,32,45,.25);z-index:3}
.postcard-back{position:absolute;inset:3% -7% 0 7%;background:#fffaf2;border:7px solid #fffaf2;box-shadow:0 18px 35px rgba(60,32,45,.18)}
.back-one{transform:rotate(8deg);z-index:1}.back-two{transform:rotate(14deg) translate(8px,-3px);z-index:0}
.side-quote{position:absolute;right:5%;bottom:13%;font:400 31px/1.05 var(--font-script);color:#79596c;transform:rotate(-8deg);opacity:.8}

/* ============================================================
   FINAL DATE
   ============================================================ */
.final-date{min-height:1100px;color:#fff8eb;display:flex;flex-direction:column;justify-content:flex-start;text-align:center}
.final-date .bg-layer{z-index:-3;background-image:url('assets/hero-bg.png');background-size:cover;background-position:center bottom;filter:saturate(.95) brightness(.82)}
.final-overlay{z-index:-2;background:linear-gradient(to bottom,rgba(40,17,41,.05),rgba(40,17,41,.4) 60%,rgba(22,9,23,.75))}
.final-content{min-height:650px;display:grid;place-content:center;padding:90px 20px 60px;text-shadow:0 4px 22px rgba(0,0,0,.45)}
.final-content h2{font:500 clamp(44px,6vw,78px)/.95 var(--font-display);letter-spacing:.06em;margin:18px 0}
.final-number{font:600 clamp(58px,9vw,118px)/1 var(--font-display);color:#f4d690;letter-spacing:.02em}
.producer{position:relative;min-height:450px;display:grid;place-items:center;color:#47343e}
.footer-bg{z-index:-1;background-image:url('assets/paper-bg.png');background-size:cover;background-position:center;opacity:.98}
.producer-content{padding:65px 20px;text-align:center}
.footer-label{font:500 10px var(--font-ui);letter-spacing:.45em;margin-bottom:24px}
.logo-placeholder{display:grid;justify-items:center;gap:8px}
.logo-placeholder img{max-height:90px;max-width:280px;width:auto;height:auto;object-fit:contain;margin:0 auto 8px;display:block}
.logo-placeholder small{font:500 10px var(--font-ui);letter-spacing:.28em}
.socials{display:flex;justify-content:center;gap:18px;margin:30px 0}
.socials a{width:34px;height:34px;border:1px solid #b78a4d;border-radius:50%;display:grid;place-items:center;color:#9b6e30;text-decoration:none;font:600 15px var(--font-ui)}
.footer-slogan{font:500 9px var(--font-ui);letter-spacing:.35em}

/* ============================================================
   DEBUG / EDITABLE MARKERS
   Add ?debug=1 to URL, or press D.
   ============================================================ */
.debug-legend{position:fixed;top:10px;right:10px;z-index:200;padding:8px 10px;background:#111;color:#fff;font:600 10px var(--font-ui);letter-spacing:.08em;display:none}
.debug .debug-legend{display:block}
.debug [data-editable-id]{outline:1px dashed rgba(255,80,80,.8);outline-offset:4px}
.debug [data-editable-id]::after{content:attr(data-editable-id);position:absolute;z-index:201;top:0;left:0;background:#111;color:#fff;padding:3px 5px;font:600 8px monospace;letter-spacing:0;pointer-events:none;white-space:nowrap}
.debug .section[data-editable-id]{outline:2px solid rgba(0,180,255,.8)}

@keyframes floatLights{from{transform:translateY(0)}50%{transform:translateY(-18px)}to{transform:translateY(0)}}
@keyframes sway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(12px)}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(95px,95px)}}

@media(max-width:800px){
  :root{--section-min-height:620px}
  .hero h1{font-size:clamp(55px,15vw,90px)}
  .postcard-grid{grid-template-columns:1fr;gap:35px;text-align:center}
  .postcard-copy{padding:0}
  .postcard-copy h2{font-size:clamp(52px,15vw,80px)}
  .postcard-art{width:min(380px,80vw)}
  .side-quote{display:none}
  .lantern{left:4%;top:8%;font-size:40px}
  .final-date{min-height:950px}
  .final-content{min-height:550px}
}