/* ============================================================
   A&M UNIVERSE — design system
   Luxury editorial · warm ivory & charcoal · cinematic motion
   ============================================================ */

@font-face{font-family:'Ngetic Modern';src:url('assets/NgeticModern-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;font-synthesis:none}

:root{
  --iv:#f7f3eb; --cr:#f0e9dc; --ww:#faf8f3;
  --ch:#2c241c; --deep:#3d3229; --mu:#6b5e52;
  --te:#a67c5d; --go:#b8a07a; --go2:#c9b896;
  --rd:#e85a4f; --dk:#14110e; --dk2:#1f1a15;

  --serif:'Ngetic Modern',serif;
  --sans:'Inter',sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --easeIO:cubic-bezier(.65,0,.35,1);

  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --nav-h:58px;
  --sh-soft:0 10px 30px rgba(44,36,28,.10),0 2px 8px rgba(44,36,28,.06);
  --sh-pop:0 18px 50px rgba(20,17,14,.45);
}

html,body{height:100%;overscroll-behavior:none}
body{background:var(--dk);font-family:var(--sans);color:var(--ch);font-weight:600;-webkit-font-smoothing:antialiased}
.serif{font-family:var(--serif);font-weight:400}
.hide{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--sans);font-weight:600}

/* ============ PHONE ============ */
#phone{position:relative;width:100vw;height:100vh;height:100dvh;background:var(--iv);
  display:flex;flex-direction:column;overflow:hidden}
.grain{position:absolute;inset:0;z-index:900;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#app{flex:1 1 auto;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
#phone.nav-on #app{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
#app>.cont{flex:1 1 auto;min-height:0}
#footerNav{position:absolute;left:0;right:0;bottom:0;z-index:120;pointer-events:none}
#footerNav .nav{pointer-events:auto}

/* ============ TYPO HELPERS ============ */
.tiny{font-size:.62rem}.mut{color:var(--mu)}
.eyebrow{font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mu)}
.serif-display{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:.01em}

/* ============ HEADER ============ */
.hdr{display:flex;align-items:center;gap:.6rem;padding:calc(.55rem + env(safe-area-inset-top)) .9rem .55rem;
  background:rgba(247,243,235,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(44,36,28,.07);z-index:10}
.avs{display:flex;filter:drop-shadow(0 2px 4px rgba(44,36,28,.18))}
.av{width:31px;height:31px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#d8cdb8,#b3a487);
  display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:600;color:#fff}
.av+.av{margin-left:-9px;border:2px solid var(--iv)}
.tick{width:14px;height:14px;border-radius:50%;background:#1d9bf0;color:#fff;font-size:9px;
  display:flex;align-items:center;justify-content:center;margin-left:-13px;margin-top:19px;
  box-shadow:0 0 0 2px var(--iv)}
.nm{font-size:.8rem;font-weight:600;letter-spacing:.01em}
.sub{font-size:.56rem;color:var(--mu);letter-spacing:.08em;text-transform:uppercase;margin-top:1px}
.blessbtn{margin-left:auto;display:flex;align-items:center;gap:.4rem;background:var(--ww);
  border:1px solid rgba(44,36,28,.14);border-radius:999px;padding:.42rem .8rem;font-size:.72rem;
  box-shadow:var(--sh-soft);transition:transform .25s var(--ease),background .25s}
.blessbtn:active{transform:scale(.94)}
.blessbtn.flash{background:var(--go);color:#14110e;border-color:var(--go);transform:scale(1.1);
  box-shadow:0 0 0 4px rgba(184,160,122,.35)}

/* ============ TRAY ============ */
.tray{display:flex;flex-wrap:nowrap;align-items:center;gap:.45rem 1.05rem;
  min-height:106px;padding:.55rem .95rem .45rem;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tray::-webkit-scrollbar{display:none}
.ringwrap{animation:ringIn .5s var(--ease) both}
.ring{width:56px;height:56px;border-radius:50%;padding:3px;cursor:pointer;background:linear-gradient(135deg,#ddd3c0,#cbc0aa);
  transition:transform .3s var(--ease)}
.ring:active{transform:scale(.92)}
.ring.live{background:conic-gradient(var(--rd),#ffc4bd,var(--rd));animation:pulse 1.6s infinite}
.ring.gold{background:conic-gradient(from 210deg,var(--go),#efe5cf,var(--go))}
.ring.seen{background:linear-gradient(135deg,#d8cfbd,#c0b49d)}
.ring.seen .rin{opacity:.72}
.ring.plus{border:1.5px dashed #bfb29b;background:transparent;display:flex;align-items:center;justify-content:center;
  color:var(--mu);font-size:1.15rem;font-weight:300}
.rin{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#d3c6ae,#ab9c82);
  border:3px solid var(--iv);display:flex;align-items:center;justify-content:center;
  font-size:.56rem;font-weight:700;color:#fff;letter-spacing:.04em;text-align:center;line-height:1.1}
.rlab{font-size:.52rem;color:var(--mu);text-align:center;margin-top:4px;letter-spacing:.06em;white-space:nowrap}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(232,90,79,.22)}}
@keyframes pulseDot{50%{transform:scale(1.35)}}
@keyframes ringIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* ============ NAV ============ */
.hdr,.tray,.nav{flex:0 0 auto}
.nav{display:flex;background:rgba(247,243,235,.95);backdrop-filter:blur(14px);
  border-top:1px solid rgba(44,36,28,.07);padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;padding:.7rem 0 calc(.68rem + env(safe-area-inset-bottom)/2);font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mu);transition:color .25s;position:relative}
.nav button.on{color:var(--ch);font-weight:600}
.nav button.on::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:26px;height:2px;background:var(--te);border-radius:2px}

/* ============ CONTENT ============ */
.cont{flex:1 1 auto;overflow-y:auto;position:relative;scrollbar-width:none;min-height:0;-webkit-overflow-scrolling:touch;
  padding-bottom:.65rem}
.cont::-webkit-scrollbar{display:none}
.cont.enter > *{animation:fadeUp .38s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ PILLS ============ */
.pills{display:flex;gap:.45rem;overflow-x:auto;padding:.8rem .9rem .4rem;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{padding:.48rem .95rem;border-radius:999px;border:1px solid rgba(44,36,28,.22);
  font-size:.6rem;letter-spacing:.1em;background:rgba(255,255,255,.75);white-space:nowrap;cursor:pointer;
  color:var(--ch);transition:all .3s var(--ease)}
.pill.on{background:var(--ch);color:var(--iv);border-color:var(--ch);box-shadow:0 4px 14px rgba(44,36,28,.25)}
.pill.lock{opacity:.6;background:repeating-linear-gradient(45deg,#efe8da,#efe8da 6px,#e5dbc8 6px,#e5dbc8 12px);
  animation:shimmer 2.4s linear infinite}
@keyframes shimmer{to{background-position:24px 0}}
.pill.dark{background:rgba(255,255,255,.09);color:#f7f3eb;border-color:rgba(255,255,255,.22)}
.pill.dark.on{background:var(--go);color:#14110e;border-color:var(--go)}

/* ============ CARDS / BUTTONS / CHIPS ============ */
.slab{padding:1.05rem .95rem .45rem;font-size:.56rem;letter-spacing:.26em;color:var(--te);text-transform:uppercase}
.card{margin:.65rem .9rem;background:var(--ww);border:1px solid rgba(44,36,28,.07);border-radius:var(--r-md);
  padding:1rem;box-shadow:var(--sh-soft)}
.post-card{padding:0;overflow:hidden;flex:0 0 auto}
.post-media{display:flex;width:100%;aspect-ratio:4/5;border-radius:0;border-left:none;border-right:none;flex:0 0 auto}
.btn{display:block;width:calc(100% - 1.8rem);margin:.9rem .9rem;text-align:center;padding:.88rem;
  border:1px solid rgba(44,36,28,.3);border-radius:999px;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ch);transition:all .3s var(--ease)}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--ch);color:var(--iv);border-color:var(--ch);box-shadow:0 8px 24px rgba(44,36,28,.28)}
.btn.pri:active{background:var(--deep)}
.btn.sm{display:inline-block;width:auto;margin:0;padding:.52rem 1.05rem;font-size:.58rem}
.btn.ghost{background:transparent;color:#f7f3eb;border-color:rgba(255,255,255,.4)}
.btn.danger{color:var(--rd);border-color:var(--rd)}
.chips{display:flex;gap:.4rem}
.chip{flex:1;padding:.52rem;border:1px solid rgba(44,36,28,.18);border-radius:var(--r-sm);
  font-size:.62rem;background:#fff;cursor:pointer;text-align:center;transition:all .3s var(--ease)}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--ch);color:var(--iv);border-color:var(--ch)}

/* ============ THEMED PLACEHOLDERS ============ */
.ph{border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;text-align:center;
  color:rgba(255,255,255,.85);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem;line-height:1.4;overflow:hidden;position:relative}
.ph::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 20% 15%,rgba(255,255,255,.14),transparent 40%),
  radial-gradient(circle at 85% 90%,rgba(0,0,0,.12),transparent 45%)}
.d-prewed{background:linear-gradient(140deg,#8fa08c,#5f7261 60%,#48584b)}
.d-mehendi{background:linear-gradient(140deg,#4c6b4f,#2f4a33 55%,#8a6d2f)}
.d-rasam{background:linear-gradient(140deg,#d9a93f,#b8862e 55%,#8f6420)}
.d-sagai{background:linear-gradient(140deg,#6d5a78,#4a3c57 55%,#a67c5d)}
.d-wedding{background:linear-gradient(140deg,#8e3b3b,#5f2323 55%,#b8a07a)}
.d-official{background:linear-gradient(140deg,#3d3229,#2c241c 60%,#a67c5d)}
.d-neutral{background:linear-gradient(135deg,#e4dbc8,#d3c7b0);color:#8a7c63;border:1px dashed #b9ac93}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 .9rem 1rem}
.grid .ph{aspect-ratio:3/4}
.empty-day{grid-column:1/-1;aspect-ratio:auto!important;padding:1.4rem!important;
  background:rgba(255,255,255,.55)!important;color:var(--mu)!important;border:1.5px dashed #cbbfa8}

/* ============ ENVELOPE SEQUENCE ============ */
.center{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:2.4rem 1.8rem}

/* ============ INVITATION MOMENT ============ */
.invite-screen{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:1rem .95rem 1.25rem;gap:.75rem}
.invite-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#2c241c;box-shadow:var(--sh-soft)}
.host-scene{height:250px;position:relative;background:linear-gradient(145deg,#efe3ce 0%,#b8a07a 46%,#2c241c 100%)}
.host-scene::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.34),transparent 28%),linear-gradient(to top,rgba(20,17,14,.58),transparent 58%)}
.sun{position:absolute;right:34px;top:34px;width:62px;height:62px;border-radius:50%;background:rgba(255,241,205,.7);filter:blur(2px)}
.host-portrait{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:160px;height:204px;
  border-radius:80px 80px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:46px;
  color:#5b4734;font-weight:700;letter-spacing:.08em;background:linear-gradient(160deg,#fff6e8,#c9b896);
  box-shadow:0 18px 42px rgba(20,17,14,.22)}
.host-portrait span{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.55);font-family:var(--serif);font-size:1.15rem}
.spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff7df;animation:spark 2.4s infinite ease-in-out}
.s1{left:45px;top:70px}.s2{right:98px;top:118px;animation-delay:.4s}.s3{left:180px;top:45px;animation-delay:.8s}
@keyframes spark{50%{transform:scale(1.8);opacity:.35}}
.photo-cap{position:absolute;left:0;right:0;bottom:0;padding:.8rem 1rem;color:#f7f3eb;font-family:var(--serif);font-size:1.35rem;background:linear-gradient(to top,rgba(20,17,14,.72),transparent)}
.invite-copy{padding:.1rem .2rem;text-align:left}
.invite-copy p{margin:.45rem 0 0;line-height:1.6}
.invite-video,.voice-card{display:flex;align-items:center;gap:.75rem;background:var(--ww);border:1px solid rgba(44,36,28,.08);border-radius:var(--r-md);padding:.72rem .85rem;box-shadow:var(--sh-soft)}
.film-strip{width:54px;height:38px;border-radius:8px;background:linear-gradient(135deg,#3d3229,#a67c5d);position:relative;overflow:hidden}
.film-strip::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);animation:sweep 2.2s infinite}
.play-dot{width:34px;height:34px;border-radius:50%;background:var(--ch);color:var(--iv);display:flex;align-items:center;justify-content:center;font-size:.7rem}
.invite-video b{display:block;font-size:1rem}.invite-video span{font-size:.58rem;color:var(--te);letter-spacing:.16em;text-transform:uppercase}
.voice-card .btn{margin:0;border-color:var(--go);color:var(--te)}
.bars{display:flex;align-items:end;gap:4px;height:22px}
.bars i{width:4px;border-radius:4px;background:var(--go);animation:bar 1s infinite ease-in-out}
.bars i:nth-child(1){height:9px}.bars i:nth-child(2){height:18px;animation-delay:.12s}.bars i:nth-child(3){height:13px;animation-delay:.24s}.bars i:nth-child(4){height:21px;animation-delay:.36s}
@keyframes bar{50%{transform:scaleY(.45);opacity:.55}}
.invite-cta{align-self:center;width:auto}

/* ============ FORMS ============ */
input[type=text],input[type=tel]{width:100%;padding:.9rem 1.05rem;border:1px solid rgba(44,36,28,.2);
  border-radius:var(--r-sm);font-size:.92rem;background:#fff;margin-bottom:.7rem;outline:none;transition:border-color .3s}
input:focus{border-color:var(--te)}
select{padding:.4rem .5rem;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:#14110e;color:#f7f3eb}

/* ============ PASS / TICKET ============ */
.pass-hero{margin:.65rem .9rem .2rem;padding:1rem;border-radius:var(--r-md);
  background:linear-gradient(135deg,#2c241c,#5b4734 64%,#b8a07a);color:var(--iv);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;box-shadow:var(--sh-soft)}
.pass-kicker{font-size:.52rem;letter-spacing:.24em;text-transform:uppercase;color:var(--go2)}
.pass-title{font-size:1.35rem;line-height:1.05;margin:.12rem 0}
.pass-sub{font-size:.65rem;color:#e9dfca}
.pass-mark{width:58px;height:58px;border-radius:50%;border:1px solid rgba(247,243,235,.45);
  display:flex;align-items:center;justify-content:center;flex:none;color:#f7f3eb;background:rgba(255,255,255,.08)}
.ticket{margin:1rem .9rem;border:1.5px solid var(--ch);border-radius:var(--r-lg);background:var(--ww);
  position:relative;padding:1.05rem 1rem;box-shadow:var(--sh-soft)}
.pass-ticket{margin-top:.65rem;border-color:rgba(44,36,28,.18);padding:.85rem .8rem 1rem;
  background:linear-gradient(180deg,#fffdfa,#f5eee1)}
.ticket::before,.ticket::after{content:'';position:absolute;top:58%;width:20px;height:20px;border-radius:50%;
  background:var(--iv);border:1.5px solid var(--ch)}
.ticket::before{left:-11px;border-left-color:transparent}
.ticket::after{right:-11px;border-right-color:transparent}
.pref-box{display:flex;align-items:flex-end;justify-content:space-between;gap:.55rem;padding:.15rem .1rem .8rem;flex-wrap:wrap}
.seg-chips{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.35rem}
.seg-chip{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(44,36,28,.16);
  background:#fff;border-radius:999px;padding:.38rem .62rem;font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mu);cursor:pointer;white-space:nowrap}
.seg-chip.on{background:var(--ch);border-color:var(--ch);color:var(--iv)}
.seg-chip.stay{align-self:flex-end;padding:.46rem .72rem}
.stay-choice{margin-top:.35rem}
.stay-choice .seg-chip{min-width:48px}
.itinerary-label{padding:.1rem .1rem .35rem}
.guest-step{min-width:96px}
.guest-step>div:last-child{display:flex;align-items:center;gap:.38rem;margin-top:.35rem;background:#fff;
  border:1px solid rgba(44,36,28,.16);border-radius:999px;padding:.24rem .32rem}
.guest-step button{width:24px;height:24px;border-radius:50%;background:var(--ch);color:var(--iv);
  font-size:.78rem;line-height:1}
.guest-step b{min-width:18px;text-align:center;font-size:.7rem;color:var(--ch)}
.pass-event{display:flex;gap:.72rem;border-top:1px dashed #d8cdb9;padding:.85rem 0}
.event-date{width:48px;height:56px;border-radius:12px;background:var(--ch);color:var(--iv);flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(44,36,28,.18)}
.event-date b{font-size:1rem;line-height:1}
.event-date span{font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--go2);margin-top:.18rem}
.event-main{flex:1;min-width:0}
.event-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.55rem}
.event-time{font-size:.57rem;color:var(--mu);margin-top:.15rem}
.event-status{border-radius:999px;background:#eee5d5;color:var(--mu);font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.28rem .46rem;white-space:nowrap}
.event-status.going{background:#dfeadf;color:#315d3b}
.event-status.maybe{background:#efe4c8;color:#7a5a1f}
.event-status.cant{background:#f2d9d6;color:#9d3d35}
.event-actions{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.55rem 0 .5rem}
.event-actions button{border:1px solid rgba(166,124,93,.35);border-radius:999px;background:#fff;
  color:var(--te);padding:.5rem .45rem;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase}
.rsvp-row .chip{font-size:.56rem;padding:.45rem .3rem}
.next-strip{text-align:center;margin:.25rem 0 0;padding:.65rem;border-radius:999px;background:rgba(184,160,122,.14);
  color:var(--mu);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}
.next-strip b{color:var(--te)}
.dayrow{border-top:1px dashed #d8cdb9;padding:.7rem 0}
.dlab{font-size:.66rem;font-weight:600;letter-spacing:.14em}
.dfacts{font-size:.6rem;color:var(--mu);margin:.18rem 0 .5rem;line-height:1.5}
.stamp{margin-top:.9rem;border:1.5px dashed var(--go);border-radius:var(--r-sm);padding:.6rem;text-align:center;
  font-size:.58rem;letter-spacing:.3em;color:var(--te);background:repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(184,160,122,.07) 8px,rgba(184,160,122,.07) 16px)}
.little{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:.7rem}
.lt .k{font-size:.53rem;letter-spacing:.18em;color:var(--te);text-transform:uppercase}
.lt .v{font-size:.72rem;margin-top:.12rem;font-weight:500}

/* ============ ADMIN ============ */
.admin{border:1.5px dashed var(--rd);border-radius:var(--r-md);margin:0 .9rem 1.4rem;padding:1rem;
  background:#fdf6f4}
.admin .slab{padding:.55rem 0 .3rem;color:var(--rd)}
.qrow{display:flex;align-items:center;gap:.5rem;padding:.48rem 0;border-bottom:1px solid #f3e4df;font-size:.7rem}
.qrow button{margin-left:auto;padding:.3rem .6rem;border-radius:7px;border:1px solid var(--rd);
  background:none;color:var(--rd);font-size:.56rem;letter-spacing:.05em;cursor:pointer;transition:all .25s}
.qrow button.g{border-color:#3f7d4e;color:#3f7d4e}
.qrow button:active{transform:scale(.94)}

/* ============ OVERLAYS ============ */
#ovl{position:absolute;inset:0;z-index:300;background:rgba(17,14,11,.97);color:#f7f3eb;
  overflow-y:auto;display:flex;flex-direction:column;animation:ovlIn .3s var(--ease)}
@keyframes ovlIn{from{opacity:0}to{opacity:1}}
.xrow{display:flex;justify-content:space-between;align-items:center;padding:calc(.8rem + env(safe-area-inset-top)) 1.1rem .8rem;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase}
.xrow button{font-size:1.05rem;opacity:.8;transition:opacity .2s}
.xrow button:hover{opacity:1}

/* wall */
.wallrow{display:flex;gap:.75rem;padding:.68rem 1.1rem;border-bottom:1px solid rgba(247,243,235,.07);
  font-size:.78rem;animation:fadeUp .4s var(--ease) both}
.wa2{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:.56rem;font-weight:700;color:#14110e}
.pending{opacity:.62;font-style:italic}
.compose{margin-top:auto;display:flex;gap:.55rem;padding:.9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom));
  background:rgba(20,17,14,.6);backdrop-filter:blur(12px)}
.compose input{flex:1;border:none;border-radius:999px;padding:.75rem 1.05rem;font-size:.8rem;margin:0}
.compose button{border-radius:999px;background:var(--go);color:#14110e;padding:0 1.15rem;font-size:.9rem;transition:transform .25s}
.compose button:active{transform:scale(.9)}

/* story viewer */
.storybars{display:flex;gap:4px;padding:.8rem 1.1rem 0}
.sb{flex:1;height:2.5px;background:rgba(255,255,255,.22);border-radius:3px;overflow:hidden}
.sb i{display:block;height:100%;width:0;background:#fff;transition:width 3s linear}
.sb.done i{width:100%;transition:none}
.segcap{max-width:290px;font-size:1.02rem;font-style:italic;line-height:1.5;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.cam{min-height:100%;display:flex;flex-direction:column;background:#080706}
.camview{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.camview video{width:100%;height:100%;object-fit:cover}
.camfall{position:absolute;inset:1rem;border:1px solid rgba(255,255,255,.18);border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(20,17,14,.86)}
.camctl{display:flex;align-items:center;justify-content:space-around;padding:.9rem 1.1rem calc(1rem + env(safe-area-inset-bottom))}
.camctl button{color:#f7f3eb;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}
.shutter{width:64px;height:64px;border-radius:50%;background:#f7f3eb!important;border:6px solid rgba(255,255,255,.28)!important;
  box-shadow:0 0 0 2px #f7f3eb}

/* live */
.livebadge{display:inline-flex;align-items:center;gap:.5rem;font-size:.6rem;letter-spacing:.22em;color:var(--rd)}
.dotp{width:8px;height:8px;border-radius:50%;background:var(--rd);animation:pulseDot 1.3s infinite}

/* ---- search people grid ---- */
.ppl-grid{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;
  row-gap:1rem;column-gap:.5rem;padding:.6rem .4rem 0}
.ppl-cell{display:flex;flex-direction:column;align-items:center}

/* ---- reactions + comments ---- */
.rxrow{display:flex;gap:.4rem;flex-wrap:wrap}
.rxpill{background:rgba(44,36,28,.06);border-radius:999px;padding:.26rem .58rem;font-size:.7rem;
  cursor:pointer;display:inline-flex;gap:.25rem;align-items:center;
  transition:transform .25s var(--ease),background .25s}
.rxpill:active{transform:scale(1.18)}
.rxpill.mine{background:var(--go);color:#14110e}
.dark .rxpill,.rxrow.dark .rxpill{background:rgba(255,255,255,.14);color:#f7f3eb;font-size:.64rem}
.rxrow.dark .rxpill.mine{background:var(--go);color:#14110e}
.cmt{display:flex;gap:.5rem;padding:.38rem 0;font-size:.74rem;line-height:1.45}
.cmt b{font-weight:600;margin-right:.3rem}
.cmtin{display:flex;gap:.5rem;margin-top:.4rem;align-items:center}
.cmtin input{flex:1;margin:0;border:none;background:rgba(44,36,28,.05);border-radius:999px;
  padding:.5rem .85rem;font-size:.76rem}
.postln{cursor:pointer;color:var(--te);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}
.stream{margin:0 1.1rem;aspect-ratio:16/10;position:relative;border-radius:var(--r-md);overflow:hidden}
.stream .ph{width:100%;height:100%;filter:brightness(.72)}
.stream::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.09) 50%,transparent 70%);
  animation:sweep 2.8s var(--ease) infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.hearts{position:absolute;left:0;right:0;bottom:6px;height:130px;pointer-events:none}
.hart{position:absolute;bottom:0;font-size:1.25rem;animation:rise 1.8s forwards ease-out}
.hart:nth-child(even){animation-name:rise2}
@keyframes rise{40%{opacity:1}to{transform:translateY(-150px) rotate(9deg) scale(1.4);opacity:0}}
@keyframes rise2{40%{opacity:1}to{transform:translateY(-150px) rotate(-9deg) scale(1.4);opacity:0}}
.ticker{padding:.6rem 1.15rem;font-size:.73rem;color:var(--go2);letter-spacing:.04em;min-height:1.6em}

/* sheets */
.sheetin{margin-top:auto;background:var(--iv);color:var(--ch);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));animation:sheetUp .42s var(--ease)}
@keyframes sheetUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}

/* ============ PLAY / REELS ============ */
.reelwrap{position:relative;height:100%;background:var(--dk)}
.pf{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
.pf::-webkit-scrollbar{display:none}
.pi{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.15rem}
.pi .ph{position:absolute;inset:0;border:none;border-radius:0}
.pi .ph::after{background:linear-gradient(to top,rgba(10,8,6,.72),transparent 55%),
  radial-gradient(circle at 20% 15%,rgba(255,255,255,.1),transparent 40%)}
.cap{position:relative;z-index:2}
.cap .who{font-size:.6rem;letter-spacing:.14em;color:var(--go2);text-transform:uppercase;margin-bottom:.25rem}
.cap .what{font-size:.94rem;font-weight:400;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.rail{position:absolute;right:.95rem;bottom:1.5rem;z-index:2;display:flex;flex-direction:column;gap:1.15rem;align-items:center}
.rail button{color:#f7f3eb;font-size:1.3rem;text-align:center;transition:transform .25s var(--ease)}
.rail button:active{transform:scale(1.25)}
.rail small{display:block;font-size:.56rem;margin-top:.2rem;opacity:.85}
.chapter{height:100%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem}
.chapter .clab{font-size:.55rem;letter-spacing:.42em;color:var(--go);text-transform:uppercase;animation:trackOpen 1.2s var(--ease) alternate infinite}
.chapter .ctit{font-family:var(--serif);font-size:2rem;font-style:italic}
@keyframes trackOpen{to{letter-spacing:.6em;opacity:.7}}

/* ============ JOURNEY ============ */
.jw{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:2rem;gap:1rem}
.jw > *{animation:fadeUp .5s var(--ease) both}
.jy{font-size:3.4rem;font-style:italic;font-weight:300;color:var(--iv)}
.jdots{display:flex;gap:.55rem}
.jd{width:7px;height:7px;border-radius:50%;background:#4a4136;transition:all .3s}
.jd.on{background:var(--go);transform:scale(1.25)}

/* ============ TOASTS ============ */
#toasts{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;z-index:950;
  display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{background:rgba(44,36,28,.96);color:var(--iv);padding:.66rem .95rem;border-radius:12px;
  font-size:.72rem;line-height:1.45;box-shadow:var(--sh-pop);animation:tIn .4s var(--ease);pointer-events:auto;cursor:pointer;touch-action:manipulation}
.toast:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.toast.wa{background:linear-gradient(135deg,#0c6b53,#075E54)}
.toast.wa b{display:block;font-size:.54rem;letter-spacing:.22em;margin-bottom:.15rem;opacity:.85}
@keyframes tIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}

.stops{display:flex;gap:.35rem;overflow-x:auto;padding:.35rem 1.05rem calc(.7rem + env(safe-area-inset-bottom));scrollbar-width:none}
.stops::-webkit-scrollbar{display:none}
.stops button{flex:none;background:rgba(255,255,255,.05);border:1px solid #ffffff26;color:#cfc4b4;
  border-radius:999px;padding:.34rem .7rem;font-size:.56rem;cursor:pointer;letter-spacing:.05em;transition:all .3s var(--ease)}
.stops button.cur{background:var(--go);color:#14110e;border-color:var(--go);font-weight:600}

/* ============ DEV PANEL ============ */
#gear{position:absolute;right:24px;top:24px;z-index:700;width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;cursor:pointer;font-size:.9rem;backdrop-filter:blur(6px);
  transition:transform .3s}
#gear:active{transform:rotate(90deg)}
#dbg{position:absolute;right:24px;top:68px;width:270px;z-index:701;background:rgba(31,26,21,.97);
  color:#f7f3eb;border-radius:var(--r-md);padding:1.05rem;font-size:.66rem;
  border:1px solid rgba(255,255,255,.12);animation:sheetUp .35s var(--ease)}

/* ============ STAGE · DEVICE PRESENTATION ============ */
#stage{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  gap:60px;padding:40px}
#phone{width:100%;max-width:414px;height:min(880px,calc(100dvh - 80px));min-height:620px;
  border-radius:46px;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 60px 140px rgba(0,0,0,.65),0 0 0 10px #0a0908,0 0 0 11px rgba(255,255,255,.06)}

@media(max-width:980px){#deskCtl{display:none}}
@media(max-width:520px){
  #stage{padding:0;gap:0}
  #phone{width:100vw;height:100vh;height:100dvh;max-width:none;min-height:100dvh;
    border-radius:0;border:none;box-shadow:none}
  #gear,#dbg{display:none}
}

/* ---- desktop time machine ---- */
#deskCtl{width:min(370px,34vw);background:rgba(28,23,19,.78);backdrop-filter:blur(18px);
  border:1px solid rgba(184,160,122,.28);border-radius:26px;padding:1.7rem 1.6rem;color:#e9dfca;
  box-shadow:0 34px 90px rgba(0,0,0,.5)}
.dc-title{font-size:.64rem;letter-spacing:.32em;color:var(--go);margin-bottom:.45rem}
.dc-sub{font-size:.75rem;color:#a89a88;line-height:1.6;margin-bottom:1.1rem}
#tl2{width:100%;appearance:none;-webkit-appearance:none;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--go),#5a4f42);outline:none;margin:.25rem 0 .75rem}
#tl::-webkit-slider-thumb,#tl2::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e9dcc2,var(--go));border:2px solid #14110e;
  box-shadow:0 0 0 3px rgba(184,160,122,.25),0 3px 10px rgba(0,0,0,.5);cursor:grab}
#tl2::-moz-range-thumb,#tl::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--go);border:2px solid #14110e;cursor:grab}
.dc-date{font-size:.85rem;color:#e9dcc2;font-variant-numeric:tabular-nums;margin-bottom:.85rem}
.dc-stops{flex-wrap:wrap}
.dc-hint{margin-top:1.15rem;font-size:.62rem;color:#7d7060;line-height:1.7;
  border-top:1px solid rgba(255,255,255,.08);padding-top:.95rem}