/* =========================================================
   App shell — header, views, bottom tab bar
   ========================================================= */
.app{
  position:relative;
  min-height:100dvh;
  padding-top:calc(80px + env(safe-area-inset-top));
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(235,221,202,.75), transparent 45%),
    radial-gradient(120% 70% at 100% 0%, rgba(235,221,202,.75), transparent 45%),
    radial-gradient(120% 70% at 0% 100%, rgba(235,221,202,.65), transparent 45%),
    radial-gradient(120% 70% at 100% 100%, rgba(235,221,202,.65), transparent 45%),
    radial-gradient(90% 40% at 50% 0%, #fbf5ec, transparent 60%),
    linear-gradient(#f7efe4,#f2e6d5);
}
.app::before,.app::after,
.welcome-reveal::before,.welcome-reveal::after{
  content:"";
  position:absolute;
  width:140px;
  height:180px;
  pointer-events:none;
  background:url('assets/leaf-sprig.png') no-repeat center / contain;
  mix-blend-mode:darken;
  opacity:.45;
  z-index:1;
}
.app::before,.welcome-reveal::before{ top:8px; left:8px; transform:rotate(-12deg); }
.app::after,.welcome-reveal::after{ top:8px; right:8px; transform:scaleX(-1) rotate(-12deg); }

/* bottom corner sprigs */
.app .app-floral-bl,
.app .app-floral-br{
  position:absolute;
  width:130px;
  height:170px;
  bottom:calc(var(--tabbar-h) + 8px);
  pointer-events:none;
  background:url('assets/leaf-sprig.png') no-repeat center / contain;
  mix-blend-mode:darken;
  opacity:.35;
  z-index:0;
}
.app .app-floral-bl{ left:4px; transform:rotate(170deg); }
.app .app-floral-br{ right:4px; transform:scaleX(-1) rotate(170deg); }

@keyframes floralIn{
  from{ opacity:0; transform:translateY(-20px) rotate(-12deg); }
  to{ opacity:.45; transform:translateY(0) rotate(-12deg); }
}
@media(prefers-reduced-motion:reduce){
  .app::before,.app::after,.welcome-reveal::before,.welcome-reveal::after{ animation:none; opacity:.45; }
}

.app-header{
  position:fixed;
  top:0; left:0; right:0;
  margin:0 auto;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:linear-gradient(rgba(247,239,228,.96),rgba(247,239,228,.72));
  backdrop-filter:blur(12px);
}
.app-brand{
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.brand-mark{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.55rem;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  color:#6b5222;
}
.brand-mark i{
  font-style:normal;
  font-size:1.2rem;
  color:var(--gold);
  margin:0 1px;
}
.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-button{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.7);
  color:var(--gold-deep);
  font-size:1rem;
}
.icon-button svg{ width:19px; height:19px; stroke-width:1.7; }
.icon-button--plain{
  border-color:transparent;
  background:transparent;
  color:#6b5222;
}
.icon-button--plain svg{ width:23px; height:23px; stroke-width:1.9; }
.icon-button.has-song{ position:relative; }
.icon-button.has-song::after{
  content:"";
  position:absolute;
  top:3px;
  right:3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6b9e5b;
}
.icon-button.is-on{ background:linear-gradient(#b98c33,#8a6220); color:#fff6e2; border-color:#c79c48; }

.view{ position:relative; padding:8px 18px 26px; }
.view.hidden{ display:none; }
.view:not(.hidden){ animation:viewIn .45s cubic-bezier(.2,.8,.3,1) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}

/* scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.revealed{
  opacity:1;
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* page titles */
.page-title{
  margin:6px 0 0;
  text-align:center;
  font-family:"Parisienne",cursive;
  font-size:clamp(2.4rem,10vw,3rem);
  line-height:1.1;
  color:var(--gold);
  animation:fadeUp .6s .1s ease both;
}
.page-title + .divider,
.page-title + .divider + .page-sub{ animation:fadeUp .55s .2s ease both; }
.page-sub{
  margin:6px auto 0;
  max-width:300px;
  text-align:center;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.05rem;
  line-height:1.5;
  color:#5f4d33;
}
.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:10px auto 0;
  max-width:120px;
}
.divider span{
  flex:1;
  height:1px;
  background:rgba(169,124,44,.35);
}
.divider i{
  font-style:normal;
  font-size:.7rem;
  color:var(--gold);
}

/* =========================================================
   SCREEN 3 — Home
   ========================================================= */
.home-hero{
  position:relative;
  z-index:2;
  margin:10px 0 0;
  padding:4px 10px 6px;
  text-align:center;
  animation:fadeUp .55s .05s ease both;
}
.home-welcome{
  margin:-.18em 0 0;
  font-family:"Parisienne",cursive;
  font-weight:400;
  font-size:clamp(3.2rem,14vw,4.2rem);
  line-height:1.05;
  /* padding extends the paint box — script swashes rise/sink past the
     line box and gradient-clipped text renders nothing outside it */
  padding:.18em .1em .22em;
  background:linear-gradient(180deg,#d3a54c,#a97c2c 55%,#87611c);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.home-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:4px auto 6px;
  max-width:100px;
}
.home-rule span{
  flex:1;
  height:1px;
  background:rgba(169,124,44,.35);
}
.home-rule i{
  font-style:normal;
  font-size:.7rem;
  color:#c2952f;
}
.home-eyebrow{
  margin:0;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.15em;
  color:#8a6b39;
}
.home-flourish{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:10px 0 4px;
}
.home-flourish i{
  font-style:normal;
  font-size:.75rem;
  color:#c2952f;
}
.home-swirl{
  width:46px;
  height:9px;
  background:
    radial-gradient(circle at 12% 50%, rgba(169,124,44,.85) 1.6px, transparent 1.9px),
    radial-gradient(circle at 88% 50%, rgba(169,124,44,.85) 1.6px, transparent 1.9px),
    linear-gradient(rgba(169,124,44,.55),rgba(169,124,44,.55)) center / 100% 1px no-repeat;
}
.home-swirl--l{ border-radius:0 0 40px 0; }
.home-swirl--r{ border-radius:0 0 0 40px; }
.home-names{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.05;
}
.home-name,
.home-amp{
  font-family:"Parisienne",cursive;
  background:linear-gradient(180deg,#d3a54c,#a97c2c 55%,#87611c);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.home-name{
  font-size:clamp(3.2rem,14vw,4.6rem);
  /* S/J caps and the y descender extend far past the line box — pad the
     paint box generously and pull the margins back so spacing is kept */
  padding:.3em .22em .26em;
  margin:-.3em 0 -.26em;
}
/* the last name (Jossy) keeps its descender space so the y tail doesn't
   paint over "OUR FOREVER STARTS HERE" below it */
.home-name:last-child{ margin-bottom:0; }
.home-amp{
  font-size:clamp(2.4rem,10vw,3.6rem);
  line-height:1;
  padding:.16em .08em;
  margin:-.18em 0 -.16em;
}
.home-tag{
  margin:6px 0 0;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.17em;
  color:#8a6b39;
}

/* countdown card */
.bigday{
  margin:18px 0 0;
  padding:22px 18px 18px;
  border-radius:22px;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(211,174,100,.2), transparent 55%),
    linear-gradient(180deg,#705122,#4a3418);
  border:1px solid rgba(199,156,72,.6);
  box-shadow:0 16px 34px rgba(95,64,18,.3), inset 0 1px 0 rgba(255,240,205,.25);
  color:#fdf1d8;
  text-align:center;
  animation:fadeUp .55s .35s ease both;
}
.bigday-label{
  margin:0;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.24em;
  color:#e0c07a;
}
.bigday-date{
  margin:10px 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.8rem,8vw,2.2rem);
  letter-spacing:.05em;
  color:#fff6e3;
}
.bigday-date b{ font-weight:400; color:#e0c07a; margin:0 6px; }
.bigday-heart{
  display:block;
  margin:8px 0 10px;
  font-size:.9rem;
  color:#e0c07a;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  margin:4px 0 0;
}
.countdown div{ position:relative; padding:4px 0; }
.countdown div:not(:last-child){ border-right:1px solid rgba(212,178,110,.35); }
.countdown strong{
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:clamp(2.2rem,10vw,2.8rem);
  line-height:1;
  color:#fff8e9;
}
.countdown span{
  display:block;
  margin-top:2px;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.15em;
  color:#d4b46e;
}

/* couple photo */
.couple-photo{
  position:relative;
  margin:18px 0 0;
  border-radius:24px;
  overflow:hidden;
  aspect-ratio:4/3.4;
  background:linear-gradient(140deg,#e8d7bd,#d9c3a2);
  box-shadow:var(--shadow);
  animation:fadeUp .55s .2s ease both;
}
.couple-photo img{ width:100%; height:100%; object-fit:cover; }
.couple-photo::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:38%;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(74,48,14,.42));
}
.couple-photo .couple-caption{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  text-align:center;
}
.couple-hash{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-size:1.15rem;
  color:#fff6e6;
  text-shadow:0 2px 10px rgba(60,38,10,.7);
}
.couple-heart{
  font-size:.9rem;
  color:#e8bf6c;
  text-shadow:0 2px 8px rgba(60,38,10,.6);
}
.photo-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-content:center;
  gap:6px;
  text-align:center;
  color:#8a6f4a;
  cursor:pointer;
  transition:background .2s ease;
}
.photo-placeholder:active{ background:rgba(255,255,255,.15); }
.photo-placeholder strong{
  font-family:"Parisienne",cursive;
  font-size:2rem;
  color:var(--gold);
}
.photo-placeholder span{ font-size:.66rem; letter-spacing:.12em; }

/* home CTA */
.enter-wide{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  margin:18px 0 0;
  padding:16px;
  border:1.5px solid #c79c48;
  border-radius:999px;
  background:linear-gradient(#fffdf9,#f9f1e4);
  color:#9d7527;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.14em;
  box-shadow:0 10px 24px rgba(112,78,26,.12), inset 0 1px 0 rgba(255,255,255,.8);
  animation:fadeUp .55s .45s ease both;
}
.enter-wide span{ font-size:.9rem; }

/* =========================================================
   SCREEN 4 — Our Story
   ========================================================= */
.segmented{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:16px 0 0;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
}
.segmented button{
  padding:9px 4px;
  border:0;
  border-radius:999px;
  background:transparent;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.04em;
  color:#7a6340;
  white-space:nowrap;
}
.segmented button.active{
  background:linear-gradient(#8a6623,#5f4413);
  color:#fdf2dc;
  box-shadow:0 6px 16px rgba(103,71,21,.28);
}

.timeline{ position:relative; margin:24px 0 0; }
.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:4%;
  bottom:4%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(rgba(169,124,44,0),rgba(169,124,44,.45) 8%,rgba(169,124,44,.45) 92%,rgba(169,124,44,0));
}
.tl-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr 42px 1fr;
  align-items:center;
  margin-bottom:22px;
}
.tl-node{
  width:38px;
  height:38px;
  margin:0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fffbf4;
  border:1.5px solid rgba(169,124,44,.45);
  box-shadow:0 4px 14px rgba(112,78,26,.18);
  font-size:1rem;
}
.tl-card{
  padding:15px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(169,124,44,.2);
  box-shadow:0 10px 24px rgba(112,78,26,.12);
}
.tl-card h4{
  margin:0 0 5px;
  font-size:.86rem;
  font-weight:700;
  color:#4a3a24;
}
.tl-card p{
  margin:0;
  font-size:.78rem;
  line-height:1.5;
  color:#6d5a3d;
}

/* love-this-moment heart — neon golden pulse like the gallery seal */
.tl-card{ position:relative; padding-bottom:40px; }
body.is-admin .tl-card h4{ padding-right:26px; }
.tl-like{
  position:absolute; right:10px; bottom:8px;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px 4px 8px;
  border:1px solid rgba(169,124,44,.35); border-radius:999px;
  background:linear-gradient(#fffdf7,#fdf3df);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, box-shadow .3s ease;
}
.tl-like .tl-heart{
  font-size:13px; line-height:1; color:#cbb68a;
  transition:color .2s, text-shadow .3s;
}
.tl-like .tl-count{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:#8a6d34; min-width:10px; text-align:center;
}
.tl-like:active{ transform:scale(.92); }
.tl-like.liked{
  border-color:#d4a12c;
  box-shadow:0 0 10px rgba(255,196,54,.55), 0 0 22px rgba(255,170,0,.35);
}
.tl-like.liked .tl-heart{
  color:#e8a80c;
  text-shadow:0 0 6px #ffd54a, 0 0 14px #ffab00, 0 0 24px rgba(255,150,0,.8);
  animation:tlHeartPulse 1.6s ease-in-out infinite;
}
.tl-like.liked .tl-count{
  color:#b98718;
  text-shadow:0 0 6px rgba(255,200,60,.7);
}
@keyframes tlHeartPulse{
  0%,100%{ transform:scale(1);   text-shadow:0 0 6px #ffd54a, 0 0 14px #ffab00; }
  50%    { transform:scale(1.2); text-shadow:0 0 10px #ffe27a, 0 0 24px #ffb300, 0 0 34px rgba(255,150,0,.85); }
}
@media (prefers-reduced-motion: reduce){
  .tl-like.liked .tl-heart{ animation:none; }
}

/* admin pencil on story cards — visible only when signed in */
.tl-edit, .tl-edit-sj{
  position:absolute; top:8px; right:8px;
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(169,124,44,.4); background:#fffdf7;
  color:#a97c2c; font-size:12px; line-height:1; cursor:pointer;
}
.tl-date{
  display:grid;
  place-items:center;
  text-align:center;
  width:74px;
  padding:8px 4px;
  border-radius:12px;
  background:#fffbf4;
  border:1px solid rgba(169,124,44,.3);
  box-shadow:0 6px 14px rgba(112,78,26,.12);
  font-family:"Cormorant Garamond",Georgia,serif;
  color:var(--gold-deep);
  line-height:1.05;
}
.tl-date b{
  display:block;
  font-size:1.85rem;
  font-weight:500;
  line-height:.95;
  color:#7a5a2a;
}
.tl-date span{
  display:block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  color:#9b7b46;
}
.tl-date b:first-child{ font-size:.78rem; font-weight:700; letter-spacing:.12em; }
/* photo fills its whole half of the row; the date rides on its corner */
.tl-photo{
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:linear-gradient(140deg,#e8d7bd,#d9c3a2);
  box-shadow:0 10px 24px rgba(112,78,26,.18);
  cursor:zoom-in;
}
.tl-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.tl-photo video{ width:100%; height:100%; object-fit:cover; display:block; background:#1c130a; }
.tl-photo:has(video){ cursor:default; }
.tl-photo:active img{ transform:scale(1.04); }
.tl-pair{ position:relative; display:block; }
.tl-pair .tl-date{
  position:absolute;
  top:-10px; left:-6px;
  z-index:2;
  width:auto; min-width:52px;
  padding:5px 7px;
  pointer-events:none;
}
.tl-pair--rev .tl-date{ left:auto; right:-6px; }
.tl-pair .tl-date b{ font-size:1.35rem; }
.tl-pair .tl-date span{ font-size:.6rem; }

/* divider that opens the couple's own album on the story line */
.tl-section{
  position:relative;
  margin:2px 0 20px;
  text-align:center;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.32em;
  color:#a97c2c;
}
.tl-section::before, .tl-section::after{
  content:"";
  position:absolute;
  top:50%;
  width:22%;
  height:1px;
  background:rgba(169,124,44,.4);
}
.tl-section::before{ left:0; }
.tl-section::after{ right:0; }
/* the timeline's center line runs behind this label — mask it */
.tl-section span{
  position:relative;
  padding:0 14px;
  background:var(--paper);
}

/* closing quote */
.story-quote{
  margin:18px 0 0;
  padding:22px 18px;
  border-radius:18px;
  text-align:center;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(169,124,44,.18);
  box-shadow:0 10px 24px rgba(112,78,26,.1);
}
.story-quote-eyebrow{
  margin:0;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  color:#a27c2c;
}
.story-quote-heart{
  display:block;
  margin:6px 0 2px;
  font-size:1.1rem;
  color:#c2952f;
}
.story-quote h3{
  margin:4px 0 0;
  font-family:"Parisienne",cursive;
  font-weight:400;
  font-size:clamp(1.7rem,7.5vw,2.2rem);
  color:var(--gold);
  line-height:1.1;
}
.quote-flourish{ margin:12px 0 0; }
.quote-flourish .env-swirl,
.quote-flourish .env-swirl--l,
.quote-flourish .env-swirl--r{
  width:46px;
  height:9px;
}

.story-panel{
  margin:18px 0 0;
  padding:20px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(169,124,44,.16);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.02rem;
  line-height:1.75;
  color:#54432c;
}

/* =========================================================
   SCREEN 5 — Event details
   ========================================================= */
.date-card{
  margin:18px 0 0;
  padding:24px 18px 18px;
  border-radius:20px;
  text-align:center;
  background:linear-gradient(#fdf8ef,#f6ead8);
  border:1px solid rgba(169,124,44,.18);
  box-shadow:var(--shadow);
}
.date-card .month{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:.14em;
  color:#5a4626;
}
.date-card .day{
  margin:-4px 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:5.4rem;
  font-weight:500;
  line-height:1;
  color:#6b5222;
}
.date-card .year{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.6rem;
  letter-spacing:.14em;
  color:#5a4626;
}
.date-card .place{
  margin:0;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  color:#7a6340;
}

.schedule{
  margin:16px 0 0;
  padding:8px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(169,124,44,.16);
  box-shadow:0 10px 26px rgba(112,78,26,.1);
}
.sched-row{
  display:grid;
  grid-template-columns:46px 92px 1fr;
  align-items:center;
  gap:12px;
  padding:14px 2px;
  border-bottom:1px solid rgba(169,124,44,.14);
}
.sched-row:last-of-type{ border-bottom:0; }
.sched-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(#fdf6e9,#f1e2c9);
  border:1px solid rgba(169,124,44,.22);
  font-size:1.15rem;
}
.sched-time{
  font-size:.9rem;
  font-weight:700;
  color:#4a3a24;
  border-right:1px solid rgba(169,124,44,.22);
  padding-right:10px;
}
.sched-name{ font-size:.86rem; color:#5f4d33; }
.map-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:calc(100% - 4px);
  margin:12px 2px 14px;
  padding:15px;
  border:1px solid #c79c48;
  border-radius:999px;
  background:linear-gradient(#b98c33,#8a6220);
  color:#fff7e4;
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.12em;
  box-shadow:0 10px 24px rgba(105,71,22,.3);
}

.hash-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:16px 0 0;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(169,124,44,.16);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.15rem;
  color:var(--gold-deep);
}

/* =========================================================
   Bottom tab bar
   ========================================================= */
.tabbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  display:grid;
  /* seven tabs: Home, Our Story, Events, Gallery, Memories, Gifts, Share */
  grid-template-columns:repeat(7,1fr);
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(246,238,226,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(169,124,44,.18);
}
.tab{
  display:grid;
  place-items:center;
  gap:3px;
  border:0;
  background:none;
  color:#8b7355;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.03em;
  transition:color .2s ease;
}
.tab svg{ width:26px; height:26px; stroke-width:1.7; transition:transform .2s ease; }
.tab.active{ color:var(--gold-deep); }
.tab.active svg{ fill:currentColor; transform:translateY(-1px); }
.tab:active svg{ transform:scale(.9); }

@media(min-width:760px){
  .app{
    max-width:520px;
    margin:0 auto;
    box-shadow:0 0 60px rgba(96,63,22,.14);
    min-height:100dvh;
    border-left:1px solid rgba(169,124,44,.1);
    border-right:1px solid rgba(169,124,44,.1);
  }
  .tabbar{ max-width:520px; left:50%; transform:translateX(-50%); }
  .app-header{ max-width:520px; }
}

/* =========================================================
   Desktop app frame — phone-like centered shell on large screens
   ========================================================= */
@media(min-width:900px){
  body{ background:linear-gradient(135deg,#e8d5b8,#d9c3a2); }
  .app{
    max-width:480px;
    margin:24px auto;
    border-radius:32px;
    overflow:hidden;
    border:1px solid rgba(169,124,44,.2);
    box-shadow:0 30px 80px rgba(70,43,17,.22),
               0 0 0 8px rgba(255,255,255,.4);
    min-height:calc(100dvh - 48px);
  }
  .tabbar{
    max-width:480px;
    left:50%;
    transform:translateX(-50%);
    border-radius:0 0 32px 32px;
  }
  .app-header{
    max-width:480px;
    border-radius:32px 32px 0 0;
  }
  /* gate screens also centered on desktop */
  .gate-screen{ padding:48px 24px; }
  .gate-card{ max-width:440px; }
  .invitation-screen{ padding:24px; }
  .invitation{ max-height:calc(100dvh - 48px); border-radius:20px; }
}

/* ---------- floating music player ---------- */
/* ---------- header music player — sits between the seal and the menu ---------- */
.music-dock{
  position:absolute;
  left:50%;
  top:calc(50% + env(safe-area-inset-top) / 2);
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(255,251,244,.85);
  border:1px solid rgba(169,124,44,.3);
  box-shadow:0 6px 16px rgba(112,78,26,.18);
}
.music-dock.hidden{ display:none; }
.music-nav{
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#8a6d34;
}
.music-nav:active{ transform:scale(.9); }
.header-actions{ margin-left:auto; }

/* admin shortcut — the couple's photo cut into a heart, softly glowing */
.admin-heart{
  position:relative;
  width:46px; height:42px;
  padding:0; border:0; background:none; cursor:pointer;
  filter:drop-shadow(0 0 4px rgba(255,190,60,.7)) drop-shadow(0 3px 6px rgba(140,40,50,.35));
  animation:heartBeat 2.4s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.admin-heart img,
.aq-media.heart-preview{
  object-fit:cover;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.3 14.6.4 11.1.4 6.7.4 3.2 3.1.5 6.6.5c2 0 3.9.9 5.4 2.4C13.5 1.4 15.4.5 17.4.5c3.5 0 6.2 2.7 6.2 6.2 0 4.4-3.9 7.9-9.9 13.3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.3 14.6.4 11.1.4 6.7.4 3.2 3.1.5 6.6.5c2 0 3.9.9 5.4 2.4C13.5 1.4 15.4.5 17.4.5c3.5 0 6.2 2.7 6.2 6.2 0 4.4-3.9 7.9-9.9 13.3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.admin-heart img{ width:100%; height:100%; display:block; }
.aq-media.heart-preview{
  display:block; width:100px; height:92px; margin:6px auto;
  border-radius:0 !important;
  filter:drop-shadow(0 0 6px rgba(255,190,60,.6));
}

/* header heart — tap to send love; doubles as the admin doorway */
#homeHeart.liked{
  filter:drop-shadow(0 0 10px rgba(255,70,90,.85))
         drop-shadow(0 0 24px rgba(255,190,60,.65));
}
/* like count pinned to the heart's corner */
.heart-badge{
  position:absolute; right:-7px; bottom:-5px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:9px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#d4af5f,#a8760a);
  color:#fff; font:700 .62rem/1 Montserrat,sans-serif;
  box-shadow:0 1px 4px rgba(120,80,10,.45);
  pointer-events:none;
}
/* little hearts that float up on every tap */
.heart-particle{
  position:absolute; left:50%; top:50%;
  color:#d21f2c; font-size:15px; pointer-events:none;
  text-shadow:0 0 6px rgba(255,60,60,.6);
  animation:heartFly 1.1s ease-out forwards;
}
@keyframes heartFly{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.4); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx,0px)),-90px) rotate(var(--rot,0deg)) scale(1.15); }
}

/* admin access emails */
.admin-email-list{ display:grid; gap:8px; margin:6px 0 10px; }
.admin-email-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px 8px 14px; border-radius:12px;
  background:rgba(255,251,244,.85); border:1px solid rgba(169,124,44,.2);
  font-family:Montserrat,sans-serif; font-size:.8rem; color:#5a4326;
}
.admin-email-add{ display:flex; gap:8px; align-items:center; }
.admin-email-add input{
  flex:1; min-width:0; padding:11px 13px;
  border:1px solid rgba(169,124,44,.26); border-radius:12px;
  background:rgba(255,255,255,.9);
  font-family:Montserrat,sans-serif; font-size:.86rem; color:var(--ink);
}
.admin-email-add input:focus{
  outline:none; border-color:rgba(169,124,44,.6);
  box-shadow:0 0 0 3px rgba(212,171,95,.22);
}
.admin-email-add .aq-approve{ padding:11px 18px; }
.admin-heart:active{ transform:scale(.9); }
@keyframes heartBeat{
  0%,100%{ transform:scale(1); }
  12%{ transform:scale(1.08); }
  24%{ transform:scale(1); }
  36%{ transform:scale(1.05); }
}
@media (prefers-reduced-motion: reduce){ .admin-heart{ animation:none; } }
#musicToggle.is-on{ box-shadow:0 6px 18px rgba(138,98,32,.35); }

/* ---------- seal logo + page-transition loader ---------- */
.brand-mark{
  width:58px;
  height:auto;
  display:block;
  filter:drop-shadow(0 2px 8px rgba(255,196,80,.5)) drop-shadow(0 0 14px rgba(255,180,60,.3));
  animation:brandGlow 3s ease-in-out infinite;
}
@keyframes brandGlow{
  0%,100%{ filter:drop-shadow(0 2px 8px rgba(255,196,80,.5)) drop-shadow(0 0 14px rgba(255,180,60,.3)); }
  50%{ filter:drop-shadow(0 2px 10px rgba(255,210,110,.85)) drop-shadow(0 0 22px rgba(255,185,70,.55)); }
}
.page-loader{
  position:fixed;
  inset:0;
  z-index:250;
  display:grid;
  place-items:center;
  background:rgba(247,239,228,.55);
  backdrop-filter:blur(3px);
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.page-loader.show{ opacity:1; }
.view:not(.hidden){animation:viewAppear .16s ease-out;}
@keyframes viewAppear{from{opacity:.92;}to{opacity:1;}}
.page-loader-seal{
  width:104px;
  filter:drop-shadow(0 10px 22px rgba(112,78,26,.35));
  animation:sealPress .9s ease-in-out infinite;
}
@keyframes sealPress{
  0%,100%{ transform:scale(.9); opacity:.8; }
  45%{ transform:scale(1.02); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .page-loader-seal{ animation:none; }
  .view:not(.hidden){animation:none;}
}

/* ---------- seal as the Gallery tab icon ---------- */
.tab-seal{
  width:74px;
  height:auto;
  display:block;
  margin-top:-30px;
  transition:transform .2s ease;
  /* golden neon pulse — layered amber halos that swell and shimmer,
     with a bright flare mid-cycle */
  animation:sealNeon 2.6s ease-in-out infinite;
}
@keyframes sealNeon{
  0%,100%{
    filter:
      drop-shadow(0 0 4px rgba(255,222,130,.9))
      drop-shadow(0 0 12px rgba(255,190,70,.6))
      drop-shadow(0 0 26px rgba(230,150,30,.35));
  }
  8%{
    filter:
      drop-shadow(0 0 7px rgba(255,240,170,1))
      drop-shadow(0 0 22px rgba(255,200,80,.85))
      drop-shadow(0 0 40px rgba(240,170,50,.55));
  }
  12%{
    filter:
      drop-shadow(0 0 4px rgba(255,222,130,.9))
      drop-shadow(0 0 12px rgba(255,190,70,.6))
      drop-shadow(0 0 26px rgba(230,150,30,.35));
  }
  50%{
    filter:
      drop-shadow(0 0 6px rgba(255,235,160,1))
      drop-shadow(0 0 18px rgba(255,200,80,.8))
      drop-shadow(0 0 36px rgba(235,160,40,.5));
  }
}
.tab.active .tab-seal{
  transform:translateY(-3px) scale(1.12);
}
.tab:active .tab-seal{ transform:scale(.92); }
@media (prefers-reduced-motion: reduce){
  .tab-seal{ animation:none; filter:drop-shadow(0 0 6px rgba(255,200,90,.6)); }
}

/* ---------- admin-only menu items — hidden from guests ---------- */
.admin-only{ display:none !important; }
body.is-admin .admin-only{ display:flex !important; }
/* ---------- Gallery holds the centre slot ----------
   Seven tabs put the seal exactly in the middle of the bar. Keep it there:
   a slightly wider slot stops the pulsing seal from crowding its neighbours. */
.tab--center{ position:relative; }
.tab--center .tab-seal{ width:66px; }
@media (max-width:400px){
  /* seven slots leave ~57px each — tighten the icon so labels never wrap */
  .tab{ font-size:.54rem; letter-spacing:.01em; }
  .tab svg{ width:22px; height:22px; }
  .tab--center .tab-seal{ width:56px; }
}

/* Seven tabs leave narrow slots, and the UA button padding was eating 12px
   of every one — enough to wrap "Our Story" onto two lines while every other
   label stayed on one. Reset it so all labels sit on a single line. */
.tab{ padding:0 1px; white-space:nowrap; }
@media (max-width:430px){
  .tab{ font-size:.55rem; letter-spacing:0; }
  .tab svg{ width:22px; height:22px; }
  .tab--center .tab-seal{ width:54px; }
}