:root{
  --ink:#fff9f6;
  --muted:rgba(255,249,246,.70);
  --rose:#d59a9a;
  --wine:#5a2534;
  --deep:#120b10;
  --glass:rgba(24,12,18,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;background:var(--deep)}
body{margin:0;color:var(--ink);font-family:"Cormorant Garamond",serif;background:var(--deep);overflow-x:hidden}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.topbar{position:fixed;top:0;left:0;right:0;height:76px;padding:0 clamp(18px,4vw,54px);display:flex;align-items:center;justify-content:space-between;z-index:50;background:linear-gradient(to bottom,rgba(8,5,7,.72),transparent)}
.brand{display:flex;align-items:center;gap:11px;font-size:15px;letter-spacing:.09em;text-transform:uppercase}
.brand-mark{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;font-size:20px;font-style:italic}
.top-actions{display:flex;gap:9px}
.icon-button{width:42px;height:42px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(0,0,0,.18);color:white;cursor:pointer;backdrop-filter:blur(12px);transition:.25s}
.icon-button:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#e9bdb4,#fff2df);z-index:70;width:0}
.story-page{height:100svh;min-height:620px;position:relative;overflow:hidden;scroll-snap-align:start;isolation:isolate}
.photo-layer{position:absolute;inset:-2%;background-size:cover;background-position:center;transform:scale(1.045);transition:transform 5s cubic-bezier(.2,.7,.2,1);z-index:-3}
.story-page.is-active .photo-layer{transform:scale(1)}
.photo-layer.contain{background-size:contain;background-repeat:no-repeat;background-color:#f5eee8}
.shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(8,5,7,.74) 0%,rgba(8,5,7,.28) 46%,rgba(8,5,7,.18) 70%,rgba(8,5,7,.38) 100%)}
.align-right .shade{background:linear-gradient(270deg,rgba(8,5,7,.76) 0%,rgba(8,5,7,.28) 48%,rgba(8,5,7,.14) 70%,rgba(8,5,7,.34) 100%)}
.align-center .shade{background:linear-gradient(to top,rgba(8,5,7,.78),rgba(8,5,7,.04) 65%,rgba(8,5,7,.20))}
.shade.light{background:rgba(255,247,241,.06)}
.page-copy{position:absolute;left:clamp(24px,7vw,120px);bottom:clamp(72px,10vh,118px);width:min(620px,82vw);padding:28px 30px;border-left:1px solid rgba(255,255,255,.43);background:linear-gradient(90deg,rgba(18,10,14,.28),transparent);text-shadow:0 2px 30px rgba(0,0,0,.7)}
.align-right .page-copy{left:auto;right:clamp(24px,7vw,120px);text-align:right;border-left:0;border-right:1px solid rgba(255,255,255,.43);background:linear-gradient(270deg,rgba(18,10,14,.28),transparent)}
.align-center .page-copy{left:50%;transform:translateX(-50%);text-align:center;border:0;background:radial-gradient(circle,rgba(18,10,14,.32),transparent 70%)}
.page-number{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:12px}
.gujarati{font-family:"Noto Serif Gujarati",serif;font-size:clamp(23px,3.2vw,46px);line-height:1.55;margin:0;font-weight:500;text-wrap:balance}
.signature{margin-top:17px;font-size:15px;letter-spacing:.12em;font-style:italic;color:rgba(255,255,255,.72)}
.next-page{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);border:0;background:transparent;color:white;font-size:38px;line-height:1;opacity:.7;cursor:pointer;animation:float 1.8s ease-in-out infinite}
@keyframes float{50%{transform:translate(-50%,7px)}}
.welcome{position:fixed;inset:0;z-index:100;background:
radial-gradient(circle at 75% 18%,rgba(173,98,115,.36),transparent 33%),
radial-gradient(circle at 15% 85%,rgba(155,102,90,.28),transparent 38%),
#110a0f;
display:grid;place-items:center;padding:22px;transition:.9s ease}
.welcome.hidden{opacity:0;visibility:hidden;transform:scale(1.03)}
.welcome-card{width:min(720px,94vw);text-align:center;padding:48px 28px 42px;border:1px solid rgba(255,255,255,.18);border-radius:28px;background:rgba(255,255,255,.045);backdrop-filter:blur(18px);box-shadow:0 40px 100px rgba(0,0,0,.35)}
.tiny-heart{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#ebb3ae;margin-bottom:12px}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.welcome h1{font-size:clamp(48px,8vw,92px);font-weight:500;line-height:.88;margin:20px 0 26px}
.welcome-guj{font-family:"Noto Serif Gujarati",serif;font-size:clamp(17px,2.2vw,24px);line-height:1.7;color:rgba(255,255,255,.82);margin:0 auto 26px}
.enter-button{border:1px solid rgba(255,255,255,.32);background:#f7ece7;color:#27131b;border-radius:999px;padding:15px 24px;cursor:pointer;font-weight:600;letter-spacing:.03em;transition:.25s}
.enter-button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.enter-button span{margin-left:15px}
.welcome small{display:block;margin-top:16px;color:rgba(255,255,255,.52);font-size:12px}
.drawer{position:fixed;inset:0 0 0 auto;width:min(430px,92vw);z-index:90;background:rgba(18,10,14,.94);backdrop-filter:blur(28px);transform:translateX(102%);transition:.45s cubic-bezier(.2,.8,.2,1);border-left:1px solid rgba(255,255,255,.12)}
.drawer.open{transform:translateX(0)}
.drawer-close{position:absolute;right:24px;top:20px;background:none;border:0;color:white;font-size:34px;cursor:pointer}
.drawer-inner{padding:86px 34px 40px}
.drawer h2{font-size:42px;font-weight:500;margin:12px 0 24px}
.page-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.page-grid a{aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:50%;font-size:13px;color:rgba(255,255,255,.76);transition:.2s}
.page-grid a:hover{background:rgba(255,255,255,.12);color:white}
.playlist{margin-top:36px;border-top:1px solid rgba(255,255,255,.12);padding-top:24px}
.playlist p{margin:10px 0;color:rgba(255,255,255,.76);font-size:16px}
.now-playing{position:fixed;right:22px;bottom:22px;z-index:45;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(15,8,12,.40);backdrop-filter:blur(14px);max-width:min(420px,80vw);transition:.3s}
.now-playing small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.5)}
.now-playing span#trackLabel{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#ddb0aa;box-shadow:0 0 0 0 rgba(221,176,170,.5);animation:pulse 1.8s infinite}
.paused .pulse-dot{animation:none;opacity:.4}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(221,176,170,0)}100%{box-shadow:0 0 0 0 rgba(221,176,170,0)}}
.finale{background:#efe4dc}
.final-note{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);z-index:3;text-align:center;color:#43242c;background:rgba(255,250,247,.88);border:1px solid rgba(80,40,50,.12);border-radius:24px;padding:20px 28px;backdrop-filter:blur(12px);width:min(650px,88vw);box-shadow:0 20px 60px rgba(57,29,39,.16)}
.final-note h2{font-family:"Noto Serif Gujarati",serif;font-size:28px;margin:0 0 8px}
.final-note p,.final-note small{font-family:"Noto Serif Gujarati",serif}
.final-note p{font-size:18px;line-height:1.7;margin:0}
.final-note strong{display:block;font-size:42px;font-weight:500;margin:6px 0}
.final-note small{font-size:13px;opacity:.75}
@media (max-width:700px){
  .topbar{height:64px;padding:0 16px}
  .brand span:last-child{display:none}
  .page-copy{left:18px;right:18px!important;bottom:82px;width:auto;padding:20px 18px;background:linear-gradient(to top,rgba(14,8,11,.55),rgba(14,8,11,.1));border-left:1px solid rgba(255,255,255,.35)!important;border-right:0!important;text-align:left!important;transform:none!important}
  .gujarati{font-size:clamp(20px,6vw,30px)}
  .now-playing{right:12px;bottom:14px;max-width:70vw}
  .next-page{bottom:14px;left:24px;transform:none;font-size:32px}
  @keyframes float{50%{transform:translateY(6px)}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}