/* =========================================================
   Wedding invitation — Lê Duy & Ngọc Linh
   Figma: Web cưới / Full Page Container (6:1693)
   Design width 440px → 1rem = 16px at 440px, scales fluidly.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}

html{
  /* 16 / 440 * 100vw, capped at 16px so the layout locks at design width */
  font-size:clamp(9px,3.63636vw,16px);
  -webkit-text-size-adjust:100%;
}

:root{
  --ink:#000;
  --ink-soft:rgba(0,0,0,.6);
  --green-deep:#2c3227;
  --green-olive:#6e7c60;
  --green-album:#444730;
  --paper:#e9e5e2;
  --paper-card:#faf8f7;
  --red:#9d0003;
  --hero-ink:#352c24;
  --stamp:#4d3c29;

  --f-script:'Pinyon Script',cursive;
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --f-sans:'Quicksand',ui-sans-serif,system-ui,sans-serif;
  --f-display:'Cormorant Garamond',Didot,'Times New Roman',serif; /* stand-in for Mallong */
  --f-hand:'Birthstone Bounce',cursive;
  --f-nauti:'The Nautigal',cursive;
  --f-stamp:'Bellefair',serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.95s;
}

body{
  margin:0;
  background:#dcd7d2;
  color:var(--ink);
  font-family:var(--f-sans);
  overflow-x:hidden;
}

.page{
  width:100%;
  max-width:27.5rem;      /* 440px */
  margin-inline:auto;
  background:#fff;
  overflow:hidden;
  position:relative;
  box-shadow:0 0 4rem rgba(0,0,0,.18);
}

img{display:block;max-width:100%}

/* ---------------------------------------------------------
   MOTION SYSTEM — reveal on scroll
   --------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    filter var(--dur) var(--ease),
    clip-path var(--dur) var(--ease);
  transition-delay:var(--d,0s);
  will-change:opacity,transform;
}
[data-reveal="up"]      {transform:translate3d(0,2.25rem,0)}
[data-reveal="down"]    {transform:translate3d(0,-1.5rem,0)}
[data-reveal="left"]    {transform:translate3d(-2.75rem,0,0)}
[data-reveal="right"]   {transform:translate3d(2.75rem,0,0)}
[data-reveal="zoom"]    {transform:scale(1.1)}
[data-reveal="pop"]     {transform:scale(.4)}
[data-reveal="soft"]    {transform:translate3d(0,1.25rem,0) scale(.96);filter:blur(.5rem)}
/* Only the wipe variants clip, and only on the edge being wiped. The other
   three sides sit far outside the box because script faces (Pinyon Script,
   The Nautigal) paint well past their advance width and line box — clipping
   at inset(0) sliced the tail off "Lê Duy" and the last l of "Hotel". */
[data-reveal="mask"]    {clip-path:inset(-50% -50% 105% -50%);transform:translate3d(0,.9rem,0)}
[data-reveal="mask-down"]{clip-path:inset(105% -50% -50% -50%)}
[data-reveal="rule"]    {transform:scaleX(0)}
[data-reveal="line"]    {transform:scaleY(0)}
[data-reveal="polaroid"]{transform:translate3d(0,3rem,0) rotate(-4deg) scale(.92)}
[data-reveal="tile"]    {transform:translate3d(0,1.5rem,0) scale(.92);--dur:.8s}

.reveal-in[data-reveal]{
  opacity:1;
  transform:none;
  filter:none;
  will-change:auto;
}
.reveal-in[data-reveal="mask"],
.reveal-in[data-reveal="mask-down"]{clip-path:inset(-50% -50% -50% -50%)}
[data-reveal="mask"],[data-reveal="mask-down"]{--dur:1.15s}
[data-reveal="polaroid"]{--dur:1.15s}
.reveal-in[data-reveal="rule"],.reveal-in[data-reveal="line"]{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  [data-marquee]{animation:none!important}
  .hero__cue{display:none}
  .lb,.lb__stage,.lb__img{transition:none!important}
}

/* ---------------------------------------------------------
   BACKGROUND MUSIC TOGGLE
   Aligned to the 440px card, not the viewport, so it stays on
   the invitation on wide screens instead of drifting away.
   --------------------------------------------------------- */
.music{
  position:fixed;top:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:27.5rem;
  display:flex;justify-content:flex-end;
  padding:24px;
  z-index:40;
  pointer-events:none;              /* only the button is clickable */
}
.music__btn{
  pointer-events:auto;position:relative;
  width:32px;height:32px;padding:0;
  border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* invisible 44px hit area — the disc stays exactly 32px */
.music__btn::before{
  content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.music__btn:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:50%}

.music__disc{display:block;width:32px;height:32px;position:relative}
.music__icon{
  position:absolute;inset:0;width:32px;height:32px;
  transition:opacity .3s var(--ease);
}
.music__icon--on {opacity:0}
.music__icon--off{opacity:1}

.music__btn.is-playing .music__icon--on {opacity:1}
.music__btn.is-playing .music__icon--off{opacity:0}
/* slow vinyl spin; stopping drops it straight back to 0deg */
.music__btn.is-playing .music__disc{animation:disc 8s linear infinite}
@keyframes disc{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .music__btn.is-playing .music__disc{animation:none}
}

/* ---------------------------------------------------------
   LIGHTBOX
   --------------------------------------------------------- */
.is-zoomable{cursor:zoom-in}
.is-zoomable:focus-visible{outline:2px solid #fff;outline-offset:3px}
body.lb-open{overflow:hidden}

.lb{
  position:fixed;inset:0;z-index:999;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .32s var(--ease);
}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.93);cursor:zoom-out}

.lb__stage{
  position:relative;margin:0;
  display:flex;align-items:center;justify-content:center;
  max-width:92vw;max-height:82vh;
  transform:scale(.94) translateY(1rem);
  transition:transform .38s var(--ease);
  pointer-events:none;   /* clicks fall through to the backdrop … */
}
.lb.is-open .lb__stage{transform:none}
.lb__img{
  max-width:92vw;max-height:82vh;width:auto;height:auto;
  object-fit:contain;border-radius:2px;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
  opacity:0;transition:opacity .3s var(--ease);
  pointer-events:auto;   /* … except on the photo itself */
  cursor:default;
}
.lb__img.is-ready{opacity:1}

.lb__spinner{
  position:absolute;width:28px;height:28px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.25);border-top-color:rgba(255,255,255,.85);
  animation:lbspin .8s linear infinite;opacity:0;transition:opacity .2s linear;
}
.lb.is-loading .lb__spinner{opacity:1}
@keyframes lbspin{to{transform:rotate(360deg)}}

.lb__btn{
  position:absolute;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:50%;color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s var(--ease),transform .25s var(--ease),opacity .25s var(--ease);
}
.lb__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lb__btn:hover{background:rgba(255,255,255,.2)}
.lb__btn:active{transform:scale(.92)}
.lb__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb__btn--close{top:20px;right:20px}
.lb__btn--prev{left:20px;top:50%;margin-top:-23px}
.lb__btn--next{right:20px;top:50%;margin-top:-23px}
.lb--single .lb__btn--prev,.lb--single .lb__btn--next{display:none}

.lb__counter{
  position:absolute;bottom:24px;left:0;right:0;margin:0;z-index:2;
  text-align:center;color:rgba(255,255,255,.75);
  font-family:var(--f-sans);font-weight:400;font-size:12px;letter-spacing:3px;
}
.lb--single .lb__counter{display:none}

@media (max-width:520px){
  .lb__btn--prev{left:10px}
  .lb__btn--next{right:10px}
  .lb__btn--close{top:10px;right:10px}
  .lb__stage,.lb__img{max-width:94vw;max-height:78vh}
}

/* =========================================================
   HERO  (6:1203)
   ========================================================= */
.hero{
  position:relative;
  width:100%;
  height:max(57.9375rem,100svh);   /* 927px */
  overflow:hidden;
  isolation:isolate;
}
/* inset:0 — the art fills the hero box exactly and scrolls with the page.
   No overscan, because nothing moves it around any more. */
.hero__media{position:absolute;inset:0}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.12) 100%);
}

.hero__greeting{
  position:absolute;top:5.474rem;left:50%;transform:translateX(-50%);
  width:24.187rem;                 /* 386.99px */
  display:flex;flex-direction:column;align-items:center;
  text-align:center;color:var(--hero-ink);
  text-shadow:0 2px 4px rgba(0,0,0,.2);
}
.hero__welcome{
  margin:0;font-family:var(--f-sans);font-weight:500;font-size:1.5rem;
  text-transform:uppercase;line-height:1.25;white-space:nowrap;
}
.hero__date{margin:0;font-family:var(--f-sans);font-weight:400;font-size:1.25rem;line-height:1.25}

.hero__names{
  position:absolute;top:12.474rem;left:0;right:0;
  display:flex;justify-content:center;align-items:flex-start;gap:2.5625rem;
  text-shadow:0 2px 4px rgba(0,0,0,.2);
}
.hero__person{display:flex;flex-direction:column;align-items:center;gap:1rem}
.hero__person--groom{width:9rem}    /* 144px */
.hero__person--bride{width:12.125rem} /* 194px */
.hero__role{font-family:var(--f-serif);font-weight:400;font-size:1.4084rem;line-height:1.2}
.hero__name{font-family:var(--f-script);font-size:3rem;line-height:1.69rem;padding-block:.35em .1em;white-space:nowrap}

.countdown{position:absolute;bottom:8.776rem;left:0;right:0;display:flex;justify-content:center}
.countdown__box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.5rem;border-radius:.5rem;
  background:rgba(0,0,0,.1);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  color:#fff;text-align:center;white-space:nowrap;
}
.countdown__label{margin:0;font-family:var(--f-serif);font-weight:400;font-size:.875rem;line-height:1.25}
.countdown__clock{display:flex;align-items:center;gap:.5rem;font-family:var(--f-sans);font-weight:400;font-size:2.25rem;line-height:2.8125rem}
.countdown__unit{display:inline-block;min-width:2.6875rem;text-align:center;font-variant-numeric:tabular-nums}
.countdown__unit.is-tick{animation:tick .45s var(--ease)}
@keyframes tick{
  0%{transform:translateY(.28em) scale(.9);opacity:.35;filter:blur(2px)}
  100%{transform:none;scale:1;opacity:1;filter:none}
}
.countdown__sep{width:.4375rem;text-align:center;opacity:.85}

.hero__cue{
  position:absolute;bottom:1.75rem;left:50%;transform:translateX(-50%);
  width:1px;height:2.5rem;background:rgba(255,255,255,.35);overflow:hidden;
}
.hero__cue span{display:block;width:100%;height:45%;background:#fff;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-120%)}60%,100%{transform:translateY(240%)}}

/* =========================================================
   LOCATION BAR  (6:1218)
   ========================================================= */
.locbar{
  display:flex;align-items:center;
  height:1.9375rem;padding:.25rem 1rem 0;
  background:#fff;
}
.locbar span{
  flex:1 0 0;min-width:0;text-align:center;
  font-family:var(--f-display);font-weight:300;font-size:1rem;letter-spacing:.02em;
}

/* =========================================================
   THANK YOU QUOTE  (6:1222)
   ========================================================= */
.quote{position:relative;width:100%;height:27.5rem;overflow:hidden;display:flex;align-items:flex-end}
.quote__media{position:absolute;inset:0}
/* Figma crops this one low: image scaled to 150.31% height, offset -39.57%,
   which lands at object-position 79% on a cover fit. */
.quote__img{width:100%;height:100%;object-fit:cover;object-position:center 79%}
.quote__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 22.8%,rgba(0,0,0,.6) 79.2%);
}
.quote__text{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:0 1.5rem 1.5rem;text-align:center;color:#fff;
}
.quote__headline{margin:0;font-family:var(--f-display);font-weight:300;font-size:1.25rem;letter-spacing:.0625rem;line-height:1.3}
.quote__body{margin:0;font-family:var(--f-serif);font-weight:500;font-size:.875rem;line-height:1.45}

/* =========================================================
   OUR STORY  (6:1525)
   ========================================================= */
.story{
  background:#fff;
  padding:4rem 0 2.5rem;
  display:flex;flex-direction:column;align-items:center;gap:6rem;
}
.story__head{display:flex;flex-direction:column;align-items:flex-end;width:18.275rem}
.story__title{width:18.275rem;height:2rem}
.story__sub{font-family:var(--f-sans);font-weight:400;font-size:1rem;letter-spacing:.0625rem;line-height:1.25;margin-top:.1rem}

.story__row{
  display:flex;align-items:flex-end;justify-content:center;gap:1.5rem;
  width:100%;padding:0 1.5rem;
}
.story__row:first-of-type,.story__memories .story__row{height:9.9375rem}
.story__memories .story__row{height:12.375rem}
.story__photo{margin:0;width:10.0625rem;height:14.5625rem;flex:0 0 auto;overflow:hidden}
.story__photo img{width:100%;height:100%;object-fit:cover}
.story__copy{
  margin:0;width:10rem;flex:0 0 auto;align-self:center;
  font-family:var(--f-serif);font-weight:400;font-size:.875rem;line-height:1.42;
}

.story__memories{display:flex;flex-direction:column;gap:1.5rem;width:100%}

/* memory strip — infinite marquee */
.strip{width:100%;overflow:hidden;padding-left:1.5rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)}
.strip__track{display:flex;width:max-content;gap:.5rem}
.strip__group{display:flex;gap:.5rem}
.strip img{width:7.75rem;height:7.75rem;object-fit:cover;background:#d9d9d9;flex:0 0 auto}

/* =========================================================
   PROPOSAL  (6:1441)
   ========================================================= */
.proposal{
  background:#fff;padding:1.5rem 1.5rem 4rem;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.proposal__title{
  margin:0;width:100%;text-align:center;
  font-family:var(--f-hand);font-weight:400;font-size:2rem;line-height:1.35;color:var(--red);
}
.proposal__copy{margin:0;width:100%;text-align:center;font-family:var(--f-serif);font-weight:400;font-size:.875rem;line-height:1.42}

.polaroid{
  position:relative;margin:0;
  width:21.014rem;height:25.661rem;      /* 336.223 × 410.58 */
  overflow:hidden;
  box-shadow:.1616rem .1616rem .1616rem rgba(0,0,0,.2);
}
.polaroid__paper{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.polaroid__photo{
  position:absolute;
  left:5.19%;width:89.62%;
  /* top matches Figma's mask, i.e. the photo window printed on frame-avatar,
     so no edge of the underlying frame shows. Height runs to 95.74%, leaving
     a 4.26% ≈ 17.5px bottom border that matches the 5.19% sides — Figma's own
     mask stopped at 74.49% and left a thick empty margin under the photo. */
  top:8.19%;height:87.55%;
  object-fit:cover;object-position:center 42%;
}
/* same geometry as .polaroid__paper, so the tape lands exactly where it was
   printed — it just paints above the photo now instead of below it */
.polaroid__tape{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  pointer-events:none;
}
.polaroid__date{
  position:absolute;left:50%;transform:translateX(-50%);
  top:1.2525rem;width:5.4032rem;height:.7307rem;
}

/* =========================================================
   MONTAGE  (6:1523)
   ========================================================= */
.montage{
  position:relative;
  background:var(--paper);
  padding:2.5rem 0;
  display:flex;flex-direction:column;align-items:center;gap:2.5rem;
  overflow:hidden;
}
.montage__texture{
  position:absolute;inset:0;opacity:.3;pointer-events:none;
  background:url("assets/paper-texture.png") center/cover no-repeat;
}
.montage>*:not(.montage__texture){position:relative}

.montage__date{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:21.22rem}
.montage__date-big{margin:0;width:100%;text-align:center;font-family:var(--f-script);font-size:1.75rem;line-height:1.5;padding-block:.1em}
.montage__date-sub{width:21.22rem;height:1.119rem}

/* --- calendar --- */
.cal{background:#fff;border-radius:.625rem;padding:.5rem 1rem 1rem;overflow:hidden}
.cal__inner{width:20.625rem;border-radius:.5rem;overflow:hidden}
.cal__head{
  padding:.625rem 0;text-align:center;
  border-bottom:1px solid rgba(216,216,216,.27);
  font-family:var(--f-nauti);font-size:1.5rem;line-height:2.25rem;letter-spacing:.0375rem;
}
.cal__week{display:flex;border-bottom:1px solid #000}
.cal__week span{
  flex:1 0 0;min-width:0;text-align:center;opacity:.6;padding:.375rem 0;
  font-family:var(--f-sans);font-weight:400;font-size:.6875rem;line-height:1.03125rem;
}
.cal__grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:2.125rem;row-gap:.125rem;
  padding:.5rem .25rem;height:12.125rem;
}
.cal__day{
  display:flex;align-items:center;justify-content:center;position:relative;
  font-family:var(--f-sans);font-weight:400;font-size:.8125rem;line-height:1.21875rem;
  opacity:0;transform:translateY(.5rem) scale(.85);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:var(--d,0s);
}
.cal__grid.is-in .cal__day{opacity:1;transform:none}
/* isolation tạo tầng xếp lớp riêng cho ô, giữ trái tim z-index:-1 nằm trong ô.
   Thiếu dòng này thì lúc hiệu ứng kết thúc (transform về none) ô mất tầng xếp
   lớp, trái tim rơi ra sau nền trắng của thẻ lịch và số 26 trắng biến mất. */
.cal__day--wed{color:#fff;font-weight:700;isolation:isolate}
.cal__day--wed .cal__heart{
  position:absolute;left:50%;top:50%;width:2.806rem;height:2.622rem;
  transform:translate(-50%,-52%);z-index:-1;
}
.cal__grid.is-in .cal__day--wed .cal__heart{animation:beat 2.6s var(--ease) 1.1s infinite}
@keyframes beat{0%,88%,100%{transform:translate(-50%,-52%) scale(1)}92%{transform:translate(-50%,-52%) scale(1.12)}96%{transform:translate(-50%,-52%) scale(1.04)}}

/* --- true ending --- */
.ending{position:relative;width:27.5rem;height:46.6875rem}
.ending__frame{
  position:absolute;left:2.6031rem;top:.875rem;width:15.71rem;height:15.71rem;
  background:url("assets/frame-deco.svg") center/100% 100% no-repeat;
}
.ending__main{
  position:absolute;margin:0;left:4.4769rem;top:2.6219rem;
  width:21.4456rem;height:30.3156rem;overflow:hidden;
}
.ending__main img{width:100%;height:100%;object-fit:cover}
.ending__vtext{position:absolute;left:1.8269rem;top:2.5944rem;width:1.4949rem;height:18.5289rem}
.ending__title{
  position:absolute;right:1.6069rem;top:.0406rem;margin:0;
  font-family:var(--f-stamp);font-weight:400;font-size:2rem;line-height:2rem;
  letter-spacing:.1875rem;text-transform:uppercase;color:var(--stamp);white-space:nowrap;
}
.ending__second{
  position:absolute;margin:0;left:-.0444rem;right:7.1069rem;top:28.584rem;
  padding:.5rem;background:var(--paper);opacity:.98;
}
.ending__second img{width:100%;aspect-ratio:333.3/249.975;object-fit:cover}
.ending__stamp{
  position:absolute;left:21.0494rem;top:40.6606rem;
  transform:translate(-50%,-50%) rotate(90deg);transform-origin:center;
  font-family:var(--f-stamp);font-size:1.375rem;letter-spacing:.18rem;
  color:var(--stamp);white-space:nowrap;
}
.ending__quote{position:absolute;left:1.4525rem;top:44.657rem;width:18.5rem;height:2rem}

/* =========================================================
   VENUE  (11:4562)
   ========================================================= */
.venue{background:#fff;padding:2.5rem 1.5rem 0;display:flex;flex-direction:column}
.venue__card{display:flex;flex-direction:column;align-items:center;text-align:center}
.venue__name{margin:0;font-family:var(--f-script);font-weight:400;font-size:2.5rem;line-height:3.25rem;color:var(--green-deep)}
.venue__hall{
  margin:0;font-family:var(--f-serif);font-weight:600;font-size:.75rem;
  letter-spacing:.0625rem;text-transform:uppercase;
}
.venue__rule{height:1.875rem;display:flex;align-items:center;justify-content:center}
.venue__rule i{display:block;width:3rem;height:1px;background:rgba(0,0,0,.15)}
.venue__eyebrow{
  margin:0;font-family:var(--f-serif);font-weight:400;font-size:.75rem;
  letter-spacing:.125rem;text-transform:uppercase;
}
.venue__time{
  margin:.75rem 0 0;font-family:var(--f-display);font-weight:300;font-size:2.5rem;line-height:2.5rem;
  color:var(--green-deep);letter-spacing:.01em;
}
.venue__addr{margin:.75rem 0 0;font-family:var(--f-sans);font-weight:400;font-size:1rem;line-height:1.5rem}
.venue__cta{
  margin-top:1.5rem;padding:.75rem 1.5rem;
  border:1px solid #000;background:#fff;color:#000;text-decoration:none;
  font-family:var(--f-serif);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.venue__cta:hover{background:#000;color:#fff}

/* section heading pair */
.sec-head{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center}
.sec-head__en{margin:0;font-family:var(--f-display);font-weight:300;font-size:1.75rem;line-height:1.15}
.sec-head__vi{margin:0;font-family:var(--f-sans);font-weight:400;font-size:1rem;line-height:1.5rem}
.sec-head--light .sec-head__en,.sec-head--light .sec-head__vi{color:#fff}

.dress{margin-top:2.5rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.dress__swatches{display:flex;align-items:center;gap:1.25rem}
.dress__swatches i{
  display:block;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--c);border:1px solid rgba(0,0,0,.1);
}

/* --- timeline --- */
.tl{
  position:relative;margin-top:2.5rem;
  border:1px solid rgba(124,109,96,.3);border-radius:.5rem;
  background:var(--paper-card);
  padding:1.5rem 1rem;display:flex;flex-direction:column;gap:1.5rem;
  overflow:hidden;
}
.tl__texture{
  position:absolute;inset:0;opacity:.3;pointer-events:none;
  background:url("assets/paper-texture.png") center/cover no-repeat;
}
.tl>*:not(.tl__texture){position:relative}
.tl__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.5rem;position:relative}
.tl__line{
  position:absolute;right:3.2975rem;top:.818rem;bottom:.8rem;width:1px;
  background:var(--green-olive);transform-origin:top center;
}
.tl__list li{display:flex;align-items:center;gap:2rem;padding-right:3rem}
.tl__time{
  position:relative;width:7.25rem;flex:0 0 auto;text-align:right;
  font-family:var(--f-display);font-weight:300;font-size:1rem;line-height:1.1;letter-spacing:.04rem;
}
.tl__time img{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateX(-1rem);
  width:2.25rem;height:2.25rem;object-fit:contain;
}
.tl__label{flex:1 1 auto;font-family:var(--f-serif);font-weight:400;font-size:1rem;line-height:1.1;letter-spacing:.04rem}
.tl__dot{
  flex:0 0 auto;width:.6875rem;height:.6875rem;border-radius:50%;
  background:var(--green-olive);
}

.venue__map{margin-top:2.5rem;margin-bottom:2.5rem;height:23.75rem;overflow:hidden;background:#e8e8e8}
.venue__map iframe{width:100%;height:100%;border:0;display:block}

/* =========================================================
   ALBUM  (13:5056)
   ========================================================= */
.album{
  background:var(--green-album);
  padding:4rem 0;
  display:flex;flex-direction:column;align-items:center;gap:2rem;
  overflow:hidden;
}
.album__rows{display:flex;flex-direction:column;gap:1rem;width:100%}
.album__row{width:100%;overflow:hidden}
.album__track{display:flex;width:max-content;gap:1rem}
.album__group{display:flex;gap:1rem}
.album img{width:7.75rem;height:10.3125rem;object-fit:cover;flex:0 0 auto}

/* =========================================================
   OUTRO  (13:5178)
   ========================================================= */
.outro{
  background:#fff;padding:5rem 1.5rem;min-height:25rem;   /* 400px */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  text-align:center;
}
.outro__names{margin:0;width:100%;font-family:var(--f-script);font-weight:400;font-size:2.75rem;line-height:1.35;padding-block:.12em}
.outro__meta{
  margin:0;width:100%;font-family:var(--f-sans);font-weight:400;font-size:.75rem;
  letter-spacing:.3rem;text-transform:uppercase;color:var(--ink-soft);
}