/* ==========================================================================
   CHANDILYA & SWAGATA — wedding invitation
   Burgundy velvet × champagne gold × translucent glass
   ========================================================================== */

:root{
  --burgundy:#641C2B;
  --burgundy-deep:#3A0D17;
  --burgundy-dark:#240810;
  --burgundy-soft:#7A293A;

  --gold-deep:#9A6F20;
  --gold:#D8B45A;
  --gold-light:#F1D58A;
  --gold-bright:#FFE9A8;

  --ivory:#F7F1E6;
  --ivory-70:rgba(247,241,230,.72);
  --ivory-45:rgba(247,241,230,.48);
  --ivory-25:rgba(247,241,230,.25);

  --glass-bg:rgba(58,13,23,.42);
  --glass-tint:linear-gradient(135deg,rgba(255,255,255,.13),rgba(216,180,90,.10));
  --glass-border:rgba(241,213,138,.32);
  --glass-border-soft:rgba(241,213,138,.20);
  --glass-blur:blur(24px) saturate(140%);

  --metal:linear-gradient(110deg,#9A6F20 0%,#D8B45A 25%,#FFE9A8 48%,#F1D58A 65%,#A77B24 100%);
  --metal-line:linear-gradient(90deg,rgba(154,111,32,0),rgba(216,180,90,.85) 30%,rgba(255,233,168,.95) 50%,rgba(216,180,90,.85) 70%,rgba(154,111,32,0));

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --serif:'Cormorant Garamond',"Times New Roman",serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --gut:clamp(20px,5vw,80px);
  --px:50%; --py:22%;
  --photo:url('../assets/images/photo-2.jpeg');
  --photo2:url('../assets/images/couple.jpg');
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--burgundy-deep);
  color:var(--ivory);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(216,180,90,.3)}

/* gold weft texture + grain, one fixed layer each ------------------------- */
.weave{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.075;
  background-image:
    repeating-linear-gradient(90deg,rgba(216,180,90,.9) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(0deg,rgba(216,180,90,.6) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(90deg,transparent 0 6px,rgba(241,213,138,.55) 6px 7px,transparent 7px 14px);
  mix-blend-mode:screen;
  pointer-events:none;
}
html,body{max-width:100%}
body{position:relative}
.grain{
  position:fixed;inset:-50%;z-index:4;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  animation:grainshift 6s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

.copy{
  position:fixed;left:0;right:0;bottom:14px;z-index:9;text-align:center;pointer-events:none;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(247,241,230,.24);
}

/* thin gold divider between major sections */
.sec + .sec::before,
.divider{
  content:'';display:block;height:1px;width:min(720px,72%);
  margin:0 auto;background:var(--metal-line);
}
.sec--deep + .sec--dark::before,.sec--dark + .sec--deep::before{opacity:.55}

/* ---------- nav ---------------------------------------------------------- */
.nav{
  position:fixed;z-index:12;left:50%;top:18px;transform:translate3d(-50%,-160%,0);
  display:flex;gap:2px;padding:6px;
  border-radius:999px;
  background:var(--glass-bg);
  background-image:var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,233,168,.16);
  transition:transform .9s var(--ease),opacity .6s var(--ease);
  opacity:0;
}
.nav.show{transform:translate3d(-50%,0,0);opacity:1}
.nav a{
  position:relative;padding:10px 16px;border-radius:999px;
  font-size:11px;letter-spacing:.18em;color:var(--ivory-45);
  transition:color .4s var(--ease),background .4s var(--ease);
}
.nav a:hover{color:var(--gold-light);background:rgba(216,180,90,.08)}
.nav a.active{color:var(--gold-bright);background:rgba(216,180,90,.14)}
.nav a.active::after{
  content:'';position:absolute;left:50%;bottom:4px;width:16px;height:1px;
  transform:translateX(-50%);background:var(--metal);
}
@media(max-width:700px){
  .nav{top:auto;bottom:12px;width:calc(100% - 20px);justify-content:space-between;border-radius:24px}
  .nav a{padding:14px 8px;font-size:10px;letter-spacing:.1em;flex:1;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center}
  .copy{display:none}
}

/* ---------- hero --------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding:100px var(--gut) 92px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 30%,rgba(122,41,58,.55),transparent 62%),
    radial-gradient(90% 80% at 88% 60%,rgba(100,28,43,.55),transparent 60%),
    linear-gradient(160deg,var(--burgundy-deep) 0%,var(--burgundy-dark) 55%,#1d060d 100%);
}
.hero::after{ /* champagne light spill */
  content:'';position:absolute;inset:auto -10% -30% -10%;height:70%;z-index:1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(216,180,90,.14),transparent 70%);
}
.hero__blurwrap{position:absolute;inset:-12% -8% -30% -8%;z-index:0;will-change:transform}
.hero__blur{
  position:absolute;inset:0;
  background-image:var(--photo);
  background-size:cover;background-position:var(--px) var(--py);
  filter:blur(80px) saturate(155%) brightness(.85);
  transform:scale(1.35);
  opacity:0;transition:opacity 1.5s var(--ease);
}
body.ready .hero__blur{opacity:1}

.hero__grid{
  position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;gap:clamp(24px,4vw,72px);
}

/* photo: melts toward the typography, no hard edge anywhere */
.photo{position:relative;isolation:isolate;will-change:transform;display:flex;justify-content:flex-start}
.photo::before{
  content:'';position:absolute;inset:-8% -6% -18% -6%;z-index:-1;border-radius:2px;
  background-image:var(--photo);
  background-size:cover;background-position:var(--px) var(--py);
  filter:blur(56px) saturate(165%) brightness(.8);
  opacity:.95;
  transform:scale(1.16);
  -webkit-mask-image:radial-gradient(70% 74% at 46% 40%,#000 30%,transparent 88%);
  mask-image:radial-gradient(70% 74% at 46% 40%,#000 30%,transparent 88%);
}
.photo__frame{
  position:relative;
  height:clamp(300px,58vh,560px);width:min(420px,88%);
  -webkit-mask-image:
     linear-gradient(180deg,transparent 0,#000 12%,#000 58%,transparent 100%),
     linear-gradient(90deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
     linear-gradient(180deg,transparent 0,#000 12%,#000 58%,transparent 100%),
     linear-gradient(90deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  mask-composite:intersect;
}
.photo__glow{
  position:absolute;inset:-16% -12%;pointer-events:none;z-index:-2;
  background:radial-gradient(58% 52% at 46% 34%,rgba(255,233,168,.26),rgba(216,180,90,.10) 52%,transparent 76%);
  filter:blur(26px);
}
.photo__img{
  position:absolute;inset:0;
  background-image:var(--photo);
  background-size:cover;background-position:var(--px) var(--py);
  transform:scale(1.06);
  opacity:0;
  transition:opacity 1.2s var(--ease),transform 2.4s var(--ease);
  will-change:transform,opacity;
}
body.ready .photo__img{opacity:1;transform:scale(1)}
.photo__sheen{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(70% 55% at 30% 18%,rgba(255,233,168,.16),transparent 70%),
    linear-gradient(115deg,rgba(216,180,90,.14),transparent 55%);
  opacity:0;transition:opacity 1.6s var(--ease) .4s;
}
body.ready .photo__sheen{opacity:1}

/* typography */
.hero__type{position:relative;padding-left:clamp(0px,1.5vw,26px)}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);margin:0 0 22px;
}
.eyebrow::after{content:'';height:1px;width:min(120px,26%);background:linear-gradient(90deg,rgba(216,180,90,.85),transparent)}
.name{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(50px,8.2vw,120px);line-height:.94;
  letter-spacing:.01em;margin:0;color:var(--ivory);
}
.name span{display:block;white-space:nowrap}
.name .amp{
  font-size:.34em;line-height:1;
  margin:.28em 0 .28em -.04em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:220% 100%;animation:metal 9s linear infinite;
}
@keyframes metal{0%{background-position:0% 0}100%{background-position:200% 0}}
.rule{
  height:1px;width:min(280px,58%);margin:26px 0 20px;
  background:linear-gradient(90deg,rgba(255,233,168,.9),rgba(216,180,90,.45) 55%,rgba(216,180,90,0));
  box-shadow:0 0 18px rgba(216,180,90,.22);
}
.tagline{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-light);margin:0;
}
.hero__date{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin:14px 0 0}
.hero__date b{font-weight:400;color:var(--ivory-70)}

/* staged reveal */
.reveal{opacity:0;transform:translateY(26px);filter:blur(6px)}
body.ready .reveal{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease);
}
body.ready .reveal[data-d="1"]{transition-delay:.55s}
body.ready .reveal[data-d="2"]{transition-delay:.85s}
body.ready .reveal[data-d="3"]{transition-delay:1.1s}
body.ready .reveal[data-d="4"]{transition-delay:1.32s}
body.ready .reveal[data-d="5"]{transition-delay:1.5s}

.hero__tools{
  position:absolute;right:var(--gut);bottom:34px;z-index:6;
  display:flex;align-items:center;gap:10px;
}
.chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory);background:var(--glass-bg);
  background-image:var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,233,168,.16);
  transition:color .4s var(--ease),background .4s var(--ease),transform .35s var(--ease),border-color .4s var(--ease);
}
.chip:hover{color:var(--gold-bright);background:rgba(58,13,23,.56);transform:translateY(-2px);border-color:rgba(255,233,168,.5)}
.chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;color:var(--gold-light)}
.chip.hidden{display:none}
.chip.is-playing svg{color:var(--gold-bright)}

/* live equaliser on the music chip */
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.eq i{width:2px;height:3px;background:var(--metal);border-radius:1px;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.18s}
.eq i:nth-child(3){animation-delay:.36s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}
.chip:not(.is-playing) .eq i{animation-play-state:paused;height:3px;opacity:.5}

/* ---------- shared section frame ---------------------------------------- */
.sec{position:relative;padding:clamp(72px,13vh,170px) var(--gut);z-index:2;overflow-x:clip}
.sec--dark{background:var(--burgundy-dark)}
.sec--deep{background:var(--burgundy-deep)}
.label{
  display:flex;align-items:center;gap:14px;margin:0 0 28px;
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
}
.label::after{content:'';height:1px;flex:1;max-width:190px;background:linear-gradient(90deg,rgba(255,233,168,.7),rgba(216,180,90,0))}
.wrap{max-width:1200px;margin:0 auto}

/* ---------- introduction ------------------------------------------------ */
.intro{max-width:940px}
.intro__lead{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,6.2vw,84px);line-height:1.05;margin:0 0 40px;color:var(--ivory);
}
.intro__lead em{font-style:italic;color:var(--gold-light)}
.intro p{font-size:clamp(15.5px,1.45vw,19px);line-height:1.85;color:var(--ivory-70);margin:0 0 24px;max-width:70ch}
.intro p strong{color:var(--ivory);font-weight:500}
.rise{opacity:0;transform:translateY(30px)}
.rise.in{opacity:1;transform:none;transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}

/* editorial photo — wide mask reveal, no card */
.editorial{
  position:relative;margin:clamp(48px,9vh,110px) auto 0;
  max-width:1040px;
}
.editorial__frame{
  position:relative;height:clamp(320px,64vh,620px);overflow:hidden;
  clip-path:inset(12% 7% 12% 7% round 6px);
  transition:clip-path 1.5s var(--ease);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%);
}
.editorial.in .editorial__frame{clip-path:inset(0 0 0 0 round 6px)}
.editorial__img{
  position:absolute;inset:0;background-image:var(--photo2);
  background-size:cover;background-position:50% 34%;
  transform:scale(1.08);transition:transform 2.4s var(--ease);
}
.editorial.in .editorial__img{transform:scale(1)}
.editorial__veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(58,13,23,.55) 0%,rgba(58,13,23,.08) 30%,rgba(36,8,16,.72) 88%,rgba(36,8,16,.95) 100%),
    radial-gradient(80% 60% at 20% 90%,rgba(216,180,90,.16),transparent 70%);
}
.editorial__cap{
  position:absolute;left:clamp(18px,4vw,52px);bottom:clamp(18px,4vw,46px);right:clamp(18px,4vw,52px);
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(20px,2.9vw,38px);line-height:1.25;color:var(--ivory);
}
.editorial__cap::before{
  content:'';display:block;width:min(180px,34%);height:1px;margin-bottom:16px;background:var(--metal-line);
}

/* ---------- events cinematic timeline ----------------------------------- */
.events{background:var(--burgundy-deep);padding:0}
.events__inner{
  position:relative;overflow:hidden;
  padding:clamp(80px,14vh,160px) var(--gut);
}
.events__head{position:relative;z-index:3;max-width:1200px;margin:0 auto clamp(28px,5vh,56px)}
.events__track{
  position:relative;z-index:3;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(24px,5vw,80px);align-items:start;
}
.atmo{
  position:absolute;inset:0;z-index:0;
  background-image:var(--photo);
  background-size:cover;background-position:50% 30%;
  filter:blur(110px) saturate(160%) brightness(.6) hue-rotate(var(--hue,0deg));
  transform:scale(1.4);
  opacity:0;transition:opacity 1.1s var(--ease);
}
.events.live .atmo{opacity:.3}
.events__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--burgundy-deep) 0%,rgba(36,8,16,.5) 26%,rgba(36,8,16,.62) 74%,var(--burgundy-deep) 100%);
}
.tl{position:relative;z-index:3;list-style:none;margin:0;padding:0}
.tl__item{position:relative;cursor:pointer;opacity:.42;transition:opacity .7s var(--ease)}
.tl__item::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,rgba(255,233,168,0),rgba(255,233,168,.5),rgba(255,233,168,0));
  transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease);
}
.tl__hit{
  display:flex;align-items:baseline;gap:16px;
  padding:14px 14px 14px 26px;border-radius:14px;
  transition:background .6s var(--ease),transform .6s var(--ease);
}
.tl__num{
  font-family:var(--serif);font-size:clamp(20px,2.1vw,30px);line-height:1;
  color:var(--ivory-25);transition:color .6s var(--ease);min-width:44px;
}
.tl__name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2.5vw,36px);line-height:1.12;
  color:var(--ivory-45);transition:color .6s var(--ease),letter-spacing .6s var(--ease);
  letter-spacing:.005em;
}
.tl__dot{
  position:absolute;left:-3.5px;top:50%;width:8px;height:8px;border-radius:50%;
  transform:translateY(-50%) scale(.6);background:rgba(247,241,230,.28);
  transition:background .6s var(--ease),transform .7s var(--ease),box-shadow .7s var(--ease);
}
.tl__item:hover .tl__name{color:var(--ivory-70)}
.tl__item.is-active{opacity:1}
.tl__item.is-active::before{transform:scaleY(1)}
.tl__item.is-active .tl__hit{background:linear-gradient(90deg,rgba(216,180,90,.10),rgba(58,13,23,.2) 70%,transparent);transform:translateX(6px)}
.tl__item.is-active .tl__num{color:var(--gold-bright)}
.tl__item.is-active .tl__name{color:var(--ivory);letter-spacing:.012em}
.tl__item.is-active .tl__dot{
  background:var(--metal);transform:translateY(-50%) scale(1);
  box-shadow:0 0 20px rgba(216,180,90,.25),0 0 40px rgba(216,180,90,.16);
}

/* detail glass panel — stacked so the panel height never jumps */
.detail{
  position:relative;z-index:3;
  padding:clamp(26px,3vw,44px);border-radius:24px;
  background:var(--glass-bg);
  background-image:var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,233,168,.18);
  overflow:hidden;
}
.detail::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(216,180,90,.05) 45%,transparent 70%);
}
.detail__stack{position:relative;display:grid}
.detail__card{
  grid-area:1/1;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.detail__card.on{opacity:1;transform:none;pointer-events:auto}
.detail__kicker{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.detail__kicker b{font-weight:400;color:var(--gold-bright)}
.detail__title{
  font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.4vw,48px);
  line-height:1.06;margin:0 0 6px;color:var(--ivory);
}
.detail__sub{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);
  margin:10px 0 20px;
}
.detail__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px 30px;margin-bottom:22px}
.meta__k{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.meta__v{font-size:15.5px;line-height:1.5;color:var(--ivory);font-weight:300;display:block}
.meta__v.gold{color:var(--gold-light)}
.dress{display:flex;flex-direction:column;gap:6px}
.dress div{font-size:14.5px;color:var(--ivory-70);font-weight:300}
.dress b{color:var(--ivory);font-weight:400}
.phone{display:block;font-size:15.5px;color:var(--gold-light);padding:6px 0;min-height:44px;line-height:32px}

/* location glass row (the whole row is the link) */
.loc{
  position:relative;display:flex;align-items:center;gap:16px;
  margin-top:8px;padding:16px 18px;border-radius:18px;min-height:64px;
  background:rgba(58,13,23,.36);
  background-image:var(--glass-tint);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,233,168,.14);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.loc:hover,.loc:active{
  background:rgba(58,13,23,.52);border-color:rgba(255,233,168,.55);
  transform:translateY(-2px);
  box-shadow:0 24px 44px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,233,168,.22),0 0 26px -12px rgba(216,180,90,.5);
}
.loc__pin{flex:none;width:28px;height:28px;color:var(--gold)}
.loc__pin svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2}
.loc__txt{flex:1;min-width:0;display:block}
.loc__v{display:block;font-size:15.5px;color:var(--ivory);font-weight:300;line-height:1.4}
.loc__a{display:block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);margin-top:6px}
.loc__arrow{
  flex:none;width:20px;height:20px;color:var(--gold);
  transition:transform .5s var(--ease),color .5s var(--ease);
}
.loc:hover .loc__arrow{transform:translate(4px,-4px);color:var(--gold-bright)}
.loc__arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}

/* ---------- final ------------------------------------------------------- */
.final{
  background:linear-gradient(180deg,var(--burgundy-deep) 0%,var(--burgundy-dark) 60%,#180409 100%);
  text-align:center;padding-bottom:130px;
}
.final::after{
  content:'';position:absolute;inset:auto 0 0 0;height:60%;pointer-events:none;
  background:radial-gradient(55% 90% at 50% 100%,rgba(216,180,90,.13),transparent 72%);
}
.final__line{
  font-family:var(--serif);font-weight:300;font-size:clamp(25px,3.5vw,44px);
  line-height:1.32;margin:0 auto;max-width:22ch;color:var(--ivory);
}
.final__see{font-size:11px;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);margin:40px 0 0}
.final__names{
  font-family:var(--serif);font-weight:300;font-size:clamp(48px,8.4vw,124px);
  line-height:1;margin:clamp(52px,9vh,104px) 0 0;color:var(--ivory);
}
.final__names span{display:block;white-space:nowrap}
.final__names .amp{
  font-size:.3em;margin:.3em 0;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;background-size:220% 100%;animation:metal 9s linear infinite;
}
.final__forever{
  font-size:12px;letter-spacing:.4em;text-transform:uppercase;
  margin:36px 0 0;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;background-size:220% 100%;animation:metal 12s linear infinite;
}
.final__love{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,32px);color:var(--gold-light);margin:24px 0 0}

/* ---------- mobile: scroll-first vertical journey ------------------------ */
@media(max-width:900px){
  .grain{display:none}
  .weave{opacity:.06}

  .hero{padding:92px var(--gut) 118px;min-height:auto}
  .hero__grid{grid-template-columns:1fr;gap:0}
  .photo{order:1;display:flex;justify-content:center}
  .photo__frame{
    width:100%;height:clamp(330px,58svh,540px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 54%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 54%,transparent 100%);
  }
  .photo::before{inset:-2% -3% -16% -3%;opacity:.9}
  .hero__type{order:2;padding:0;margin-top:clamp(-64px,-8vh,-30px);text-align:center}
  .eyebrow{justify-content:center;font-size:9.5px;letter-spacing:.34em;margin-bottom:15px}
  .eyebrow::after{display:none}
  .name{font-size:clamp(46px,14.4vw,86px);line-height:1.0}
  .name .amp{margin:.2em 0;text-align:center}
  .rule{margin:22px auto 18px}
  .tagline{font-size:10px;letter-spacing:.28em}
  .hero__date{font-size:9.5px;letter-spacing:.26em}
  .hero__tools{position:static;justify-content:center;margin-top:30px;gap:10px}
  .chip{padding:13px 18px;min-height:46px;font-size:10px}

  .sec{padding:clamp(58px,9vh,90px) var(--gut)}
  .sec + .sec::before{width:76%}
  .label{margin-bottom:22px}
  .intro__lead{font-size:clamp(32px,9.4vw,52px);margin-bottom:30px}
  .intro p{font-size:15.5px;line-height:1.8;margin-bottom:20px}

  .editorial{margin-top:44px}
  .editorial__frame{height:clamp(240px,42svh,380px);clip-path:inset(16% 9% 16% 9% round 5px)}
  .editorial.in .editorial__frame{clip-path:inset(0 0 0 0 round 5px)}
  .editorial__cap{font-size:clamp(19px,5vw,26px)}
  .editorial__cap::before{width:56px;margin-bottom:12px}

  /* events: one vertical cinematic path — each event owns its details */
  .events__inner{
    padding:clamp(64px,10vh,100px) var(--gut) clamp(70px,11vh,110px);
    width:100%;max-width:100%;overflow-x:clip;
  }
  .events__track{display:block;grid-template-columns:minmax(0,1fr);gap:0;max-width:100%}
  .tl{display:block;position:relative;padding-left:2px;margin:0;max-width:100%}
  .tl__item{display:block;position:relative;border-top:1px solid rgba(241,213,138,.14);padding-bottom:2px}
  .tl__item:last-child{border-bottom:1px solid rgba(241,213,138,.14)}
  .tl__item::before{left:0;top:0;bottom:0;width:1px}
  .tl__hit{display:block;padding:22px 4px 12px 22px}
  .tl__num{display:block;font-size:13px;letter-spacing:.2em;min-width:0;color:var(--gold);margin-bottom:6px}
  .tl__name{display:block;font-size:clamp(23px,7vw,32px);white-space:normal}
  .tl__dot{left:-3.5px;top:26px}
  .tl__item.is-active{opacity:1}
  .tl__item.is-active .tl__hit{transform:none;background:none;border-radius:0}
  .tl__item.is-active::before{
    background:linear-gradient(180deg,rgba(255,233,168,.85),rgba(216,180,90,.15));
    box-shadow:0 0 20px rgba(216,180,90,.25);
  }
  .tl__item.is-active .tl__num,.tl__item.is-active .tl__name{color:var(--gold-bright)}

  /* the shared panel is desktop-only — its cards mount inside each event row */
  .detail{
    position:absolute!important;left:-9999px;top:0;width:1px;height:1px;
    padding:0;margin:0;overflow:hidden;pointer-events:none;opacity:0;
  }
  .detail::before{display:none}
  .detail__stack{position:static;height:auto;max-height:none;overflow:visible}
  .detail__card{
    position:static;display:none;opacity:1;transform:none;filter:none;pointer-events:auto;
    padding:2px 4px 22px 22px;
  }
  .detail__card.on{display:block}
  .detail__kicker{margin-bottom:10px}
  .detail__title{font-size:clamp(24px,6.6vw,30px);margin-bottom:4px}
  .detail__sub{margin:8px 0 16px}
  .detail__meta{grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:18px}
  .meta__v{font-size:15px}
  .dress div{font-size:14.5px}

  /* floating glass music control */
  .music{right:16px;bottom:16px;width:50px;height:50px}
  .music svg{width:20px;height:20px}
  .copy{left:auto;right:78px;bottom:20px;max-width:58%;text-align:right;font-size:9px;letter-spacing:.2em}

  .loc{margin-top:14px;padding:15px 16px}
  .final{padding-bottom:112px}
  .final__line{font-size:clamp(24px,7.2vw,34px)}
  .final__names{font-size:clamp(44px,13.6vw,84px)}
  .final__see{letter-spacing:.34em}
  .final__forever{letter-spacing:.3em}
}
@media(max-width:420px){
  .name{font-size:clamp(44px,15vw,74px)}
  .final__names{font-size:clamp(42px,14.4vw,78px)}
  .detail__meta{grid-template-columns:1fr}
  .hero__tools{flex-direction:column;align-items:stretch}
  .chip{justify-content:center}
  .music{right:13px;bottom:13px;width:48px;height:48px}
  .copy{right:70px;bottom:17px;font-size:8.5px;letter-spacing:.16em;max-width:52%}

}

/* ---------- floating glass music control -------------------------------- */
.music{
  position:fixed;z-index:40;right:26px;bottom:26px;
  width:54px;height:54px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass-bg);background-image:var(--glass-tint);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);
  box-shadow:0 18px 38px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,233,168,.2);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.music:hover{transform:translateY(-2px) scale(1.03);border-color:rgba(255,233,168,.5)}
.music svg{width:21px;height:21px;fill:none;stroke:var(--gold-light);stroke-width:1.5}
.music.is-playing svg{stroke:var(--gold-bright)}
.music.is-playing::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(216,180,90,.35);animation:halo 3.4s var(--ease) infinite;
}
@keyframes halo{0%{transform:scale(.92);opacity:.7}70%{transform:scale(1.14);opacity:0}100%{opacity:0}}
.music[hidden]{display:none}

/* ---------- footer (discreet credit) ----------------------------------- */
.foot{
  position:relative;z-index:2;text-align:center;
  padding:clamp(26px,4vh,44px) var(--gut) clamp(58px,7vh,76px);
  background:var(--burgundy-dark);
}
.foot::before{content:'';display:block;height:1px;width:min(360px,46%);margin:0 auto clamp(18px,2.4vh,28px);background:var(--metal-line);opacity:.75}
.foot__by{
  font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ivory-45);margin:0 0 3px;
}
.foot__name{
  font-family:var(--serif);font-weight:300;font-size:clamp(13px,1.15vw,16px);
  letter-spacing:.02em;color:var(--gold-light);margin:0 0 14px;
}
.foot__links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px}
.foot__btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-70);
  background:rgba(58,13,23,.34);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(241,213,138,.18);
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.foot__btn svg{width:11px;height:11px;fill:none;stroke:var(--gold);stroke-width:1.5}
.foot__btn:hover{color:var(--gold-bright);border-color:rgba(255,233,168,.45);background:rgba(58,13,23,.5)}
.foot__note{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,241,230,.2);margin:14px 0 0}

/* ---------- reduced motion --------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .grain{animation:none}
  .name .amp,.final__names .amp,.final__forever{animation:none;background-position:50% 0}
  .eq i{animation:none;height:8px}
  .hero__blur,.hero__blurwrap{transform:none!important}
  .photo__img,.editorial__img{transition:opacity .3s linear;transform:none!important}
  .reveal,.rise{transform:none!important;filter:none!important;transition:opacity .3s linear}
  .editorial__frame{clip-path:inset(0 0 0 0 round 6px)!important;transition:none}
  .tl__item,.tl__item *{transition:color .2s linear,background .2s linear,opacity .2s linear!important}
  .detail,.detail__card{transition:opacity .2s linear!important;transform:none!important}
  .loc{transition:none!important}
}
