/* The wedding weekend continues in the same emerald-and-gold illustrated
   stationery language as the opening, instead of switching to generic cards. */
.story-stationery,
.weekend-stationery {
  color:#e7d2ae;
  background:#08291f;
}

.story-stationery {
  min-height:620px;
  padding:120px 38px 116px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(43,91,68,.42),transparent 62%),
    radial-gradient(ellipse at 50% 95%,rgba(8,18,15,.5),transparent 54%),
    #06271f;
  border-top:1px solid rgba(209,166,107,.43);
}
.foil-frame {
  position:absolute;
  inset:17px;
  border:1px solid rgba(197,152,94,.56);
  pointer-events:none;
}
.foil-frame:after {
  content:'';
  position:absolute;
  inset:7px;
  border:1px solid rgba(197,152,94,.19);
}
.story-sprig {
  position:absolute;
  width:clamp(93px,20vw,210px);
  pointer-events:none;
  color:#c29b65;
  opacity:.45;
}
.story-sprig svg {
  display:block;
  width:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
}
.story-sprig-left {left:-35px;bottom:-75px;transform:rotate(-10deg)}
.story-sprig-right {right:-35px;top:-75px;transform:rotate(170deg)}
.story-content {position:relative;z-index:2;width:100%;max-width:640px}
.story-stationery .dark-eyebrow {color:#d2af80;letter-spacing:.29em}
.story-seal {
  font:400 47px/1 var(--serif);
  color:#d9b581;
  letter-spacing:-.09em;
  margin:27px auto 10px;
}
.story-seal span {font:400 14px/1 var(--sans);margin:0 10px;vertical-align:middle;color:#d7a58c}
.story-stationery .story-title {
  margin:23px auto 25px;
  font:400 clamp(45px,9vw,74px)/.97 var(--serif);
  color:#f0dbbb;
  letter-spacing:-.035em;
}
.story-stationery .story-title em {color:#dda995}
.story-stationery .story-description {
  max-width:390px;
  color:#d5c7ab;
  font-size:12px;
  line-height:2.1;
}
.story-journey {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:43px 0 0;
  color:#bca278;
  font:600 8px/1.4 var(--sans);
  letter-spacing:.21em;
}
.story-journey span:nth-child(2) {color:#d4ab79;letter-spacing:0;font-size:13px;white-space:nowrap}

.weekend-stationery {
  padding:96px 22px 117px;
  background:
    radial-gradient(ellipse at 45% 8%,rgba(35,75,57,.44),transparent 36%),
    linear-gradient(#08291f,#071e19 88%);
}
.weekend-stationery .section-heading {margin-bottom:53px}
.weekend-stationery .section-heading .eyebrow {color:#d0ae7f}
.weekend-stationery .section-heading h2 {color:#eed7b6}
.weekend-stationery .section-heading h2 em {color:#d9a391}
.weekend-stationery .section-heading>p:last-child {color:#c8b99f;max-width:330px;margin:0 auto}
.event-card-engraved {
  position:relative;
  margin-bottom:24px;
  background:#0a3025;
  color:#e6d0af;
  border:1px solid rgba(195,145,84,.58);
  overflow:hidden;
  box-shadow:0 19px 40px rgba(2,17,14,.19);
}
.event-card-engraved:after {
  content:'';
  position:absolute;
  pointer-events:none;
  inset:6px;
  border:1px solid rgba(201,159,102,.16);
}
.event-art {
  position:relative;
  min-height:265px;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  border-bottom:1px solid rgba(191,143,84,.36);
  background:
    radial-gradient(ellipse at 50% 52%,rgba(54,102,72,.3),transparent 70%),
    #0a2d25;
}
.event-art-ceremony {background:radial-gradient(ellipse at 50% 54%,rgba(76,105,69,.29),transparent 65%),#102f25}
.event-art-beach {background:radial-gradient(ellipse at 60% 40%,rgba(61,114,92,.28),transparent 70%),#0a2e2b}
.event-engraving {
  display:block;
  width:min(91%,420px);
  overflow:visible;
  fill:none;
  stroke:#cfaa76;
  stroke-width:1.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.93;
  filter:drop-shadow(0 1px 0 rgba(30,13,4,.28));
}
.event-art .event-index {
  position:absolute;
  left:26px;
  top:14px;
  padding:0;
  background:transparent;
  color:#d3aa75;
  font:italic 400 36px/1 var(--serif);
  letter-spacing:0;
  backdrop-filter:none;
}
.event-art-caption {
  position:absolute;
  bottom:21px;
  font-size:9px;
  letter-spacing:.3em;
  color:#ccab7d;
}
.event-card-engraved .event-copy {
  background:#0b2b24;
  min-height:325px;
  padding:33px 29px 39px;
  position:relative;
}
.event-card-engraved .event-day {color:#d1aa7b}
.event-card-engraved .event-tiny-flower {color:#d5a18d}
.event-card-engraved .event-copy h3 {color:#f1dbc0;font-size:clamp(41px,9.6vw,59px);line-height:.99}
.event-card-engraved .event-copy h3 em {color:#d9a18e}
.event-card-engraved .event-location {color:#d0b388}
.event-card-engraved .event-description {color:#cfc1a9;margin:20px 0 15px}
.event-card-engraved .event-detail {color:#bda685}
.event-card-engraved.event-card-wedding {border-color:rgba(225,168,114,.83)}
.event-card-engraved.event-card-wedding .event-copy {background:#12362a}

.closing {
  min-height:760px;
  background:#071e19;
  border-top:1px solid rgba(201,156,96,.5);
}
.closing:before {
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/hero.webp') center bottom/auto 100% no-repeat;
  opacity:.18;
  pointer-events:none;
}
.closing:after {
  content:'';
  position:absolute;
  inset:15px;
  border:1px solid rgba(200,152,92,.45);
  pointer-events:none;
}
.closing-shape {display:none}
.closing > :not(.closing-shape) {position:relative;z-index:1}
.closing .closing-copy {color:#d5c5ab}
.closing .closing-signature strong {color:#e7c498}

/* Bring the cinematic Rio photographs back without losing the fine gold frame. */
.event-photographic {
  min-height:300px;
  isolation:isolate;
  background:#173b31;
}
.event-photographic .event-photo {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.88) contrast(1.04) brightness(.89);
  transition:transform 1.4s cubic-bezier(.22,.65,.3,1),filter 1s;
}
.event-card-engraved:hover .event-photo,
.event-card-engraved:focus-within .event-photo {
  transform:scale(1.035);
  filter:saturate(.98) contrast(1.03) brightness(.94);
}
.event-photographic:before {
  content:'';
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(180deg,rgba(5,23,18,.38),transparent 31%,transparent 59%,rgba(4,26,20,.68));
  pointer-events:none;
}
.event-photographic .event-index {
  z-index:2;
  top:19px;
  left:24px;
  font-size:39px;
  color:#fff2d7;
  text-shadow:0 2px 17px rgba(0,0,0,.48);
}
.event-photographic .event-art-caption {
  z-index:2;
  color:#fff2d7;
  text-shadow:0 1px 12px rgba(0,0,0,.8);
}

.music-phase {
  position:fixed;
  left:max(18px,env(safe-area-inset-left));
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:40;
  background:rgba(4,33,27,.76);
  border:1px solid rgba(216,174,114,.52);
  padding:11px 14px;
  color:#f3dab6;
  font:600 9px/1 var(--sans);
  letter-spacing:.23em;
  backdrop-filter:blur(12px);
  pointer-events:none;
  box-shadow:0 4px 21px rgba(0,0,0,.12);
  transition:opacity .5s,transform .5s;
}
.music-phase[hidden] {display:none}
.topbar{padding-right:max(78px,calc(5vw + 58px))}
.floating-sound-control{
  position:fixed;
  z-index:86;
  top:calc(20px + env(safe-area-inset-top));
  right:max(19px,5vw);
  display:flex;
  align-items:center;
  gap:10px;
}
.floating-sound-control .sound-toggle{
  flex:none;
  width:43px;
  height:43px;
  border:1px solid rgba(233,192,142,.9);
  background:rgba(8,48,40,.92);
  color:#ffebd2;
  box-shadow:0 6px 20px rgba(2,22,19,.27),inset 0 0 0 3px rgba(224,180,123,.10);
  backdrop-filter:blur(12px);
  transition:background .2s,transform .2s;
}
.floating-sound-control .sound-toggle svg{width:17px;height:17px}
.floating-sound-control .sound-toggle:hover{background:#175344;transform:translateY(-1px)}
.floating-sound-control .sound-toggle:focus-visible,.spotify-chapter:focus-visible,.spotify-dock-close:focus-visible{outline:2px solid #f5d4a5;outline-offset:4px}
.music-cue{
  pointer-events:none;
  padding:9px 12px;
  border:1px solid rgba(220,173,119,.64);
  background:rgba(8,48,40,.94);
  color:#f4dcba;
  font-size:8px;
  font-weight:600;
  letter-spacing:.15em;
  white-space:nowrap;
  box-shadow:0 5px 18px rgba(0,0,0,.23);
}
.music-cue[hidden]{display:none}
.spotify-dock {
  position:fixed;
  z-index:80;
  bottom:calc(12px + env(safe-area-inset-bottom));
  right:12px;
  width:min(390px,calc(100vw - 24px));
  padding:12px 14px 11px;
  border:1px solid rgba(223,172,110,.72);
  background:linear-gradient(145deg,rgba(10,45,36,.98),rgba(5,32,28,.985));
  color:#f3e1c6;
  box-shadow:0 18px 80px rgba(0,0,0,.47),0 0 0 4px rgba(6,33,27,.32);
  backdrop-filter:blur(16px);
  text-align:center;
}
.spotify-dock::before{content:'';position:absolute;inset:4px;border:1px solid rgba(195,152,98,.14);pointer-events:none}
.spotify-dock[hidden]{display:none}
.spotify-dock-head{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative}
.spotify-dock-kicker{font-size:8px;letter-spacing:.31em;color:#d7ac7f;font-weight:600}
.spotify-dock-close{height:24px;width:24px;color:#dfbb91;background:transparent;border:0;font-family:var(--serif);font-size:25px;font-weight:400;line-height:1}
.spotify-dock-close:hover{color:#fff}
.spotify-dock-chapters{display:flex;justify-content:center;align-items:center;gap:13px;margin:5px auto 6px}
.spotify-chapter{display:flex;align-items:center;gap:6px;padding:6px 4px 5px;border:0;border-bottom:1px solid transparent;color:#a3aca3;background:transparent;font-size:9px;font-weight:600;letter-spacing:.13em;white-space:nowrap}
.spotify-chapter span:first-child{font:italic 15px var(--serif);letter-spacing:0;color:#b0a88e}
.spotify-chapter.is-selected{color:#f1d8b5;border-bottom-color:#d9ae79}
.spotify-chapter.is-selected span:first-child{color:#dfb18a}
.spotify-chapter-separator{color:#b58e63;font-size:13px}
.spotify-dock-song{margin:6px auto 10px;color:#f1d5ae;font:italic 21px/1.1 var(--serif)}
.spotify-dock-song span{font:400 9px/1.4 var(--sans);color:#aeb9ae;white-space:nowrap}
.spotify-frame{display:block;width:100%;height:152px;max-width:100%;background:#191414;border:0;border-radius:10px}
.spotify-dock-hint{max-width:330px;margin:9px auto 3px;color:#c8c4b2;font-size:10px;line-height:1.5}
.spotify-track-link{display:inline-block;margin:3px auto 0;padding:2px;color:#d8b58e;font-size:8px;font-weight:600;letter-spacing:.16em;border-bottom:1px solid rgba(221,176,123,.5)}
.spotify-track-link:hover{color:#fff;border-bottom-color:#fff}
.original-listening {
  width:100%;
  max-width:530px;
  margin:44px auto 13px;
  padding-top:24px;
  border-top:1px solid rgba(209,159,104,.31);
}
.original-listening .eyebrow {font-size:8px;letter-spacing:.27em;color:#bd9f7c}
.original-song-links {display:flex;align-items:center;justify-content:center;gap:13px;margin-top:13px;flex-wrap:wrap}
.original-song-links a {
  display:inline-flex;
  gap:5px;
  align-items:center;
  padding:5px 0;
  font-size:9px;
  font-weight:600;
  letter-spacing:.14em;
  color:#f3d7b3;
  border-bottom:1px solid rgba(224,185,136,.49);
}
.original-song-links a:hover {color:white;border-bottom-color:white}
.original-song-links a span {font-size:14px}
.original-song-divider {color:#c7a27d;font-size:12px}
.original-soundtrack-note {font-size:10px;line-height:1.6;color:#b4b8a7;max-width:350px;margin:15px auto 0}
.closing {min-height:840px}

@media (min-width:700px) {
  .story-stationery {min-height:660px;padding:132px 55px}
  .weekend-stationery {padding:120px 35px 139px}
  .event-card-engraved {grid-template-columns:.95fr 1.05fr;min-height:395px;margin-bottom:30px}
  .event-art {min-height:395px;border-bottom:0;border-right:1px solid rgba(191,143,84,.35)}
  .event-card-engraved .event-copy {min-height:395px;padding:35px 42px}
  .event-card-wedding .event-art {grid-column:2;grid-row:1;border-right:0;border-left:1px solid rgba(191,143,84,.35)}
  .event-card-wedding .event-copy {grid-column:1;grid-row:1}
  .event-photographic {min-height:395px}
}
@media (max-width:375px) {
  .floating-sound-control{right:14px;top:calc(17px + env(safe-area-inset-top))}
  .floating-sound-control .sound-toggle{width:41px;height:41px}
  .music-cue{padding:8px;font-size:7px}
  .spotify-dock{right:9px;width:calc(100vw - 18px);padding:9px 7px 9px}
  .spotify-dock-song{font-size:19px;margin-bottom:8px}
  .spotify-dock-chapters{gap:9px}
  .story-stationery {padding:102px 31px}
  .story-stationery .story-title {font-size:44px}
  .story-journey {gap:10px;letter-spacing:.1em}
  .event-art {min-height:240px}
  .event-card-engraved .event-copy {min-height:320px}
  .original-song-links {gap:9px}
  .original-song-links a {font-size:8px;letter-spacing:.08em}
}

/* The same floating emerald-and-gold dock now controls the licensed recordings. */
.music-status{font-size:11px;line-height:1.6;color:#e0c49d;margin:12px 0;min-height:18px}
.music-playback-actions{display:flex;flex-direction:column;align-items:center;gap:9px}
.music-playback-actions .button{min-width:190px;min-height:44px;padding:12px 20px;font-size:9px}
.music-playback-actions .spotify-chapter{min-height:44px;font-size:8px;letter-spacing:.12em}
.spotify-dock-close{width:44px;height:44px}
.spotify-chapter{min-height:44px}
.soundtrack-credits{margin:23px auto 0;max-width:450px}
.soundtrack-credits .eyebrow{font-size:7px;letter-spacing:.24em}
.soundtrack-credits-artists{font-size:10px;line-height:1.9;color:#e5c7a2;margin:9px auto 0}
.soundtrack-credits-artists a,.soundtrack-credits-licence a{border-bottom:1px solid rgba(220,181,133,.45)}
.soundtrack-credits-artists span{color:#acbaa8}
.soundtrack-credits-artists .credit-break{padding:0 8px}
.soundtrack-credits-licence{font-size:9px;color:#b4b8a7;line-height:1.7;margin:7px auto 0}
@media(max-width:400px){.credit-break{display:block;height:3px;visibility:hidden}}


/* Fit the names to the portrait artwork, whose width follows the hero height. */
@media (min-width:700px) {
  .hero {container-type:size}
  .hero-content {
    max-width:48svh;
    max-width:48cqh;
    margin-inline:auto;
    padding-inline:16px;
  }
  .hero-title {
    font-size:clamp(36px,6.6svh,78px);
    font-size:clamp(36px,6.6cqh,78px);
  }
  .hero-title span {white-space:nowrap}
}

/* Crops of the original flowers become quiet, staggered garlands in the margins.
   Two nested masks fade both inward and vertically, leaving copy and photos clear. */
.story-stationery,.weekend-stationery {position:relative;isolation:isolate}
.weekend-stationery {overflow:hidden}
.floral-continuation {position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.floral-trail {
  position:absolute;
  display:block;
  width:clamp(125px,17vw,235px);
  height:640px;
  opacity:.72;
  -webkit-mask-image:linear-gradient(to bottom,transparent 40px,#000 105px,#000 70%,transparent);
  mask-image:linear-gradient(to bottom,transparent 40px,#000 105px,#000 70%,transparent);
}
.floral-trail > span {
  display:block;
  width:100%;height:100%;
  background-image:url('assets/hero.webp');
  background-size:640px auto;
  background-repeat:no-repeat;
}
.floral-trail-left {left:-22px;bottom:-165px}
.floral-trail-left > span {
  background-position:left top;
  -webkit-mask-image:linear-gradient(to right,#000 20%,transparent 98%);
  mask-image:linear-gradient(to right,#000 20%,transparent 98%);
}
.floral-trail-right {right:-22px;top:-110px}
.floral-trail-right > span {
  background-position:right top;
  -webkit-mask-image:linear-gradient(to left,#000 20%,transparent 98%);
  mask-image:linear-gradient(to left,#000 20%,transparent 98%);
}
.weekend-stationery .section-heading,.weekend-stationery .event-card {position:relative;z-index:1}
.weekend-stationery .floral-trail-left {top:-45px;bottom:auto}
.weekend-stationery .floral-trail-right {top:43%;transform:translateY(-15%)}
.weekend-stationery .floral-trail-last {top:auto;bottom:-85px}
@media (max-width:699px) {
  .floral-trail {
    width:100px;height:430px;opacity:.46;
    -webkit-mask-image:linear-gradient(to bottom,transparent 26px,#000 75px,#000 70%,transparent);
    mask-image:linear-gradient(to bottom,transparent 26px,#000 75px,#000 70%,transparent);
  }
  .floral-trail > span {background-size:430px auto}
  .floral-trail-left {left:-23px;bottom:-120px}
  .floral-trail-right {right:-23px;top:-90px}
  .weekend-stationery .floral-trail-left {top:-60px}
  .weekend-stationery .floral-trail-right {top:40%}
  .weekend-stationery .floral-trail-last {top:auto;bottom:-95px}
}