/* Give the Welcome message a little more quiet space above and below. */
.welcome-section{
  padding-top:clamp(220px,18.5vw,290px)!important;
  padding-bottom:clamp(305px,23vw,385px)!important;
}
@media(max-width:720px){
  .welcome-section{
    min-height:92svh!important;
    padding:clamp(210px,26svh,280px) 22px clamp(250px,30svh,330px)!important;
  }
}

/* November weather reads as two ranges on one restrained temperature scale. */
.weather-ranges{
  --weather-label-width:64px;
  --weather-value-width:92px;
  --weather-gap:clamp(12px,1.8vw,22px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:min(100%,620px);
  gap:14px;
  margin:clamp(20px,2.4vw,30px) auto 0;
}
.weather-range{
  --range-start:0%;
  --range-width:14%;
  --range-color-start:var(--mocha);
  --range-color-end:var(--mocha-deep);
  display:grid;
  grid-column:1;
  grid-template-columns:var(--weather-label-width) minmax(0,1fr) var(--weather-value-width);
  align-items:center;
  gap:var(--weather-gap);
  padding:4px 0;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.weather-range--day{
  --range-start:73%;
  --range-color-start:#bc8767;
  --range-color-end:#8e5c42;
}
.weather-range--night{
  --range-start:9%;
  --range-color-start:#858873;
  --range-color-end:#555b47;
}
.weather-range-label{
  color:rgba(73,54,44,.76);
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:650;
  letter-spacing:.2em;
  text-align:left;
  text-transform:uppercase;
  transition:color .45s ease,letter-spacing .55s cubic-bezier(.22,1,.36,1);
}
.weather-range strong{
  color:var(--mocha-deep);
  font-family:var(--serif);
  font-size:clamp(1.25rem,2vw,1.55rem);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1;
  text-align:right;
  white-space:nowrap;
  transition:color .45s ease,transform .55s cubic-bezier(.22,1,.36,1);
}
.weather-range-track{position:relative;display:block;height:20px}
.weather-range-track::before{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  left:0;
  height:1px;
  background:linear-gradient(90deg,rgba(73,54,44,.09),rgba(73,54,44,.26) 50%,rgba(73,54,44,.09));
  transform:translateY(-50%);
  transition:background .45s ease;
}
.weather-range-track::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:1px;
  height:5px;
  border-radius:999px;
  background:rgba(73,54,44,.22);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.weather-range-track i{
  position:absolute;
  top:50%;
  left:var(--range-start);
  z-index:1;
  display:block;
  width:var(--range-width);
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--range-color-start),var(--range-color-end));
  box-shadow:0 3px 10px color-mix(in srgb,var(--range-color-end) 18%,transparent);
  transform:translateY(-50%);
  transform-origin:center;
  transition:height .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease,filter .55s ease;
}
.weather-range-track i::before,
.weather-range-track i::after{
  content:"";
  position:absolute;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent);
  transform:translateY(-50%);
  transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease;
}
.weather-range-track i::before{left:0;color:var(--range-color-start)}
.weather-range-track i::after{right:0;color:var(--range-color-end)}
.weather-range-scale{
  display:flex;
  grid-column:1;
  justify-content:space-between;
  margin:-7px calc(var(--weather-value-width) + var(--weather-gap)) 0 calc(var(--weather-label-width) + var(--weather-gap));
  color:rgba(73,54,44,.43);
  font-family:var(--sans);
  font-size:.48rem;
  font-weight:500;
  letter-spacing:.1em;
}
.details-weather-copy{margin-top:clamp(24px,3vw,36px)}
@media(hover:hover) and (pointer:fine){
  .weather-range:hover{transform:translateX(3px)}
  .weather-range:hover .weather-range-label{
    color:var(--mocha-deep);
    letter-spacing:.23em;
  }
  .weather-range:hover strong{
    color:var(--range-color-end);
    transform:translateX(2px);
  }
  .weather-range:hover .weather-range-track::before{
    background:linear-gradient(90deg,rgba(73,54,44,.12),rgba(73,54,44,.34) 50%,rgba(73,54,44,.12));
  }
  .weather-range:hover .weather-range-track i{
    height:8px;
    filter:saturate(1.04);
    box-shadow:0 5px 16px color-mix(in srgb,var(--range-color-end) 28%,transparent);
  }
  .weather-range:hover .weather-range-track i::before,
  .weather-range:hover .weather-range-track i::after{
    transform:translateY(-50%) scale(1.28);
    box-shadow:0 0 0 5px color-mix(in srgb,currentColor 11%,transparent);
  }
}
@media(max-width:720px){
  .weather-ranges{
    --weather-label-width:48px;
    --weather-value-width:76px;
    --weather-gap:10px;
    width:calc(100% - 52px);
    gap:12px;
    margin-top:20px;
  }
  .weather-range-label{font-size:.54rem;letter-spacing:.16em}
  .weather-range strong{font-size:1.08rem}
  .weather-range{padding:3px 0}
  .weather-range-track{height:18px}
  .weather-range-track i{height:6px}
  .weather-range-track i::before,
  .weather-range-track i::after{width:5px;height:5px}
  .weather-range-scale{font-size:.45rem}
  .details-weather-copy{width:calc(100% - 52px);margin-inline:auto}
}

/* Regular editorial copy shares one readable size and serif treatment. */
:root{--regular-copy-size:clamp(1.06rem,1.3vw,1.18rem)}
.detail-panel p:not(.detail-label),
.details-weather-copy,
.chapter-copy,
.chapter-copy p,
.week-day p,
.practical-body p,
.faq .accordion-panel p,
.check-in-copy>p:not(.eyebrow){
  font-family:var(--serif);
  font-size:var(--regular-copy-size);
  line-height:1.55;
  letter-spacing:0;
  text-transform:none;
}
.detail-panel .detail-meta{
  font-family:var(--serif);
  font-size:var(--regular-copy-size);
  line-height:1.5;
  letter-spacing:0;
  text-transform:none;
}
@media(max-width:720px){
  :root{--regular-copy-size:1.06rem}
  .city-photos .city-photo:first-child figcaption{padding-right:14px}
  .city-photos .city-photo:last-child figcaption{padding-left:14px}
}

/* Closing photo: paper ground, breathing room under Check-In, a real drop shadow. */
.closing{background:var(--paper)!important}
@media(min-width:721px){
  .closing{overflow:visible;padding:clamp(56px,6vw,88px) 0 0!important}
  .closing-photo{
    width:calc(100% - 2 * clamp(20px,2.4vw,36px));
    height:clamp(500px,46vw,680px);
    border-radius:clamp(30px,3.6vw,48px);
    min-height:0;
    max-height:none;
    margin-inline:auto;
    overflow:hidden;
    background:transparent;
    box-shadow:0 36px 84px rgba(48,29,19,.34),0 14px 32px rgba(48,29,19,.18);
    transition:transform .85s var(--ease-refined),box-shadow .85s ease;
  }
  .closing-photo::before{display:none}
  .closing-photo img{
    width:100%;
    height:100%!important;
    object-fit:cover;
    object-position:center 42%!important;
    transition:transform 1.6s var(--ease-refined),filter .7s ease;
  }
  .closing-copy{transition:transform .9s var(--ease-refined)}
  .closing-photo:hover .closing-copy,.closing-photo:focus-within .closing-copy{transform:translateY(-6px)}
  .closing-photo::after{background:linear-gradient(90deg,rgba(35,21,14,.5),rgba(35,21,14,.12) 48%,rgba(35,21,14,.02)),linear-gradient(180deg,rgba(35,21,14,.02) 50%,rgba(35,21,14,.38))}
  .closing-copy{right:auto;left:clamp(32px,4.5vw,68px);bottom:calc(44px + clamp(30px,4vw,52px));max-width:520px;text-align:left}
  .closing-copy .eyebrow{margin-inline:0}
  .closing-copy .rule{margin-inline:0}
  .closing-photo:hover,.closing-photo:focus-within{
    transform:translateY(-3px);
    box-shadow:0 42px 92px rgba(48,29,19,.36),0 16px 36px rgba(48,29,19,.18);
  }
  .closing-photo:hover img,.closing-photo:focus-within img{
    transform:scale(1.035);
    filter:saturate(1.03)!important;
  }
}
@media(max-width:720px){
  .closing{padding-top:26px!important}
  .closing-photo{box-shadow:0 22px 50px rgba(48,29,19,.28)}
}

/* Footer hover: a fading gradient overlay and a small lift, nothing that snaps. */
.footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transform:none;
  transition:transform .6s var(--ease-refined),box-shadow .6s ease;
}
.footer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,#3f2d24,var(--mocha-deep));
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.footer-logo,.footer-signoff{transition:transform .7s var(--ease-refined),opacity .45s ease}
@media(hover:hover) and (pointer:fine){
  .footer:hover{
    transform:translateY(-3px) scale(1.004);
    box-shadow:0 26px 60px rgba(47,29,18,.26),inset 0 1px rgba(255,249,239,.12);
  }
  .footer:hover::before{opacity:1}
  .footer:hover .footer-logo{transform:translateY(-2px) scale(1.035)}
  .footer:hover .footer-signoff{transform:translateY(-1px)}
}

/* Keep one crisp SV mark visible at all times. Section tone—not hover—chooses it. */
.site-header .brand{
  isolation:isolate;
  visibility:visible!important;
  opacity:1!important;
}
.site-header .brand-logo{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain;
  filter:none!important;
  mix-blend-mode:normal!important;
  pointer-events:none;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0) scale(.975)!important;
  transition:opacity .3s ease,transform .42s cubic-bezier(.16,1,.3,1)!important;
}
.site-header:not(.header-on-dark) .brand-logo--dark{
  z-index:2;
  opacity:1!important;
  transform:translateZ(0) scale(1)!important;
}
.site-header:not(.header-on-dark) .brand-logo--light{
  z-index:1;
  opacity:0!important;
}
.site-header.header-on-dark .brand-logo--dark{
  z-index:1;
  opacity:0!important;
}
.site-header.header-on-dark .brand-logo--light{
  z-index:2;
  opacity:1!important;
  transform:translateZ(0) scale(1)!important;
}
@media(max-width:720px){
  .menu-open .site-header .brand-logo--dark{
    z-index:1;
    opacity:0!important;
    transform:translateZ(0) scale(.975)!important;
  }
  .menu-open .site-header .brand-logo--light{
    z-index:2;
    opacity:1!important;
    transform:translateZ(0) scale(1)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .site-header .brand-logo{transition:none!important}
}

/* Keep the Celebration heading comfortably inside narrow phone viewports. */
@media(max-width:720px){
  .celebration-heading .section-title{
    max-width:100%;
    font-size:clamp(2.7rem,13vw,4rem);
  }
}

/* Mobile invitation is a true viewport layer: no page peeking, scrolling, hover
   labels, or wax-seal motion. The artwork itself remains fully clickable. */
.suite-hotspot,
.suite-hotspot:hover,
.suite-hotspot:focus,
.suite-hotspot:focus-visible,
.suite-hotspot:active{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
.suite-hotspot::before,.suite-hotspot::after{display:none!important}

@media(max-width:720px){
  .language-gate{
    inset:0!important;
    box-sizing:border-box;
    width:100%!important;
    height:100dvh!important;
    padding-right:max(20px,env(safe-area-inset-right))!important;
    padding-left:max(20px,env(safe-area-inset-left))!important;
  }
  .language-gate-panel{
    position:relative;
    right:auto;
    left:auto;
    width:min(100%,340px)!important;
    margin-inline:auto;
    transform:translate3d(0,0,0);
  }
  .invitation-intro .intro-close{
    display:none!important;
  }
  html:has(body.invitation-active){
    width:100%;
    height:100%;
    overflow:hidden!important;
    overscroll-behavior:none;
  }
  body.invitation-active{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    touch-action:none;
  }
  .invitation-intro{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100vh!important;
    height:100svh!important;
    height:100dvh!important;
    min-width:100%!important;
    min-height:100vh!important;
    min-height:100svh!important;
    min-height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    touch-action:manipulation;
  }
  .invitation-intro .intro-cover,
  .invitation-intro.is-open .envelope-stage,
  .invitation-intro .suite-composite{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  .invitation-intro .intro-cover{
    z-index:4;
    background:url("opening-envelope-exact-logo-mobile-v7.webp") center center/cover no-repeat;
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    backface-visibility:hidden;
    will-change:opacity,transform;
    transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1.15s cubic-bezier(.22,.61,.36,1)!important;
  }
  .invitation-intro.is-opening .intro-cover,
  .invitation-intro.is-open .intro-cover{
    opacity:0!important;
    transform:translate3d(0,-2px,0) scale(1.006)!important;
    pointer-events:none!important;
  }
  .invitation-intro::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:6;
    background:url("opening-envelope-exact-logo-mobile-v7.webp") center center/cover no-repeat;
    opacity:0;
    pointer-events:none;
  }
  .invitation-intro.is-opening::before{
    animation:mobile-envelope-away 1s cubic-bezier(.4,0,.2,1) both;
  }
  .invitation-intro .suite-composite{
    clip-path:none!important;
    opacity:0!important;
    transform:translate3d(0,5px,0) scale(.994)!important;
    backface-visibility:hidden;
    will-change:opacity,transform;
    transition:opacity .82s ease .1s,transform 1.05s cubic-bezier(.22,.61,.36,1) .06s!important;
  }
  .invitation-intro.is-open .suite-composite{
    opacity:1!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }
  .invitation-intro.is-opening.is-open .envelope-stage{
    animation:mobile-letter-arrive 1.06s cubic-bezier(.22,.61,.36,1) .04s both!important;
  }
  .invitation-intro::after{
    z-index:7;
    background:rgba(248,239,226,.34);
  }
  .invitation-intro.is-opening::after{
    animation:mobile-invitation-veil .9s cubic-bezier(.4,0,.2,1) both!important;
  }
  .invitation-intro.is-open.is-leaving .suite-composite{
    clip-path:none!important;
    filter:none!important;
    transition:opacity .52s ease .46s!important;
  }
  .invitation-intro.is-leaving .envelope-stage{
    animation:mobile-letter-away 1.16s cubic-bezier(.4,0,.2,1) both!important;
  }
  .invitation-intro.is-leaving::after{
    animation:mobile-site-veil 1.3s cubic-bezier(.4,0,.2,1) both!important;
  }
  .invitation-intro.is-leaving~.site-header,
  .invitation-intro.is-leaving~main.site{
    animation:mobile-site-arrive 1.3s cubic-bezier(.22,.61,.36,1) both;
  }
  .invitation-intro .suite-composite .suite-art,
  .invitation-intro .suite-composite picture,
  .invitation-intro .suite-composite img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
  }
  .invitation-intro .suite-composite img{
    object-fit:cover!important;
    object-position:center center!important;
  }
  .suite-action{display:none!important}
  .invitation-intro .intro-cover>.closed-wax-seal,
  .invitation-intro .intro-cover>.closed-wax-seal:hover,
  .intro-cover:focus-visible .closed-wax-seal,
  .invitation-intro.is-opening .closed-wax-seal{
    filter:drop-shadow(0 3px 4px rgba(61,35,21,.08))!important;
    transform:translate3d(-50%,-50%,0) scale(1)!important;
    transition:none!important;
  }
}

@keyframes mobile-invitation-veil{
  0%,100%{opacity:0}
  42%{opacity:.3}
}

@keyframes mobile-envelope-away{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  38%{opacity:.78}
  100%{opacity:0;transform:translate3d(0,-2px,0) scale(1.006)}
}
@keyframes mobile-letter-arrive{
  0%,12%{opacity:0;transform:translate3d(0,7px,0) scale(.993)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes mobile-letter-away{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  34%{opacity:1;transform:translate3d(0,-3px,0) scale(1.002)}
  100%{opacity:0;transform:translate3d(0,-9px,0) scale(1.008)}
}
@keyframes mobile-site-veil{
  0%,28%{opacity:0;background:rgba(248,239,226,0)}
  58%{opacity:.26;background:rgba(248,239,226,.46)}
  100%{opacity:0;background:rgba(248,239,226,0)}
}
@keyframes mobile-site-arrive{
  0%,34%{opacity:.45;transform:translate3d(0,8px,0) scale(.996)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@media(max-width:720px) and (prefers-reduced-motion:reduce){
  .invitation-intro .intro-cover,
  .invitation-intro .suite-composite,
  .invitation-intro.is-opening.is-open .envelope-stage,
  .invitation-intro.is-open.is-leaving .suite-composite,
  .invitation-intro.is-leaving .envelope-stage,
  .invitation-intro.is-leaving~.site-header,
  .invitation-intro.is-leaving~main.site{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
  .invitation-intro.is-opening::after,
  .invitation-intro.is-opening::before,
  .invitation-intro.is-leaving::after{animation:none!important}
}

/* One editorial type scale for every section title and title-adjacent subtitle. */
:root{
  --section-title-serif:clamp(3.25rem,5.5vw,5.5rem);
  --section-title-script:clamp(4.0625rem,6.875vw,6.875rem);
  --chapter-title-serif:clamp(1.9rem,3vw,2.7rem);
  --section-subtitle-size:.66rem;
  --section-subtitle-tracking:.25em;
}

.save-date-title,
.details-heading .section-title,
.celebration-heading .section-title,
.special-col .section-title,
.faq-head .section-title,
.check-in-copy .section-title,
.closing-copy .section-title,
.countdown .section-title{
  max-width:100%;
  font-family:var(--serif);
  font-size:var(--section-title-serif)!important;
  font-weight:400;
  letter-spacing:-.035em;
  line-height:.92;
}

.save-date-title,
.details-heading .section-title,
.celebration-heading .section-title,
.check-in-copy .section-title,
.countdown .section-title{
  flex-wrap:wrap;
  row-gap:0;
}

.save-date-title span,
.details-heading .section-title span,
.celebration-heading .section-title span,
.special-col .section-title span,
.check-in-copy .section-title span,
.countdown .section-title span{
  font-size:1em!important;
}

.save-date-title em,
.details-heading .section-title em,
.celebration-heading .section-title em,
.special-col .section-title em,
.faq-head .section-title em,
.check-in-copy .section-title em,
.countdown .section-title em{
  font-family:var(--script);
  font-size:1.25em!important;
  font-style:normal;
  font-weight:400;
  letter-spacing:-.06em;
  line-height:.78;
  text-transform:none;
}

.welcome-title,
.travel-heading .section-title em{
  font-family:var(--script);
  font-size:var(--section-title-script)!important;
  font-weight:400;
  letter-spacing:-.06em;
  line-height:.78;
}

.chapter-title{
  max-width:100%;
  font-family:var(--serif);
  font-size:var(--chapter-title-serif)!important;
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.08;
}
.chapter-title em{
  font-family:var(--script);
  font-size:1.25em!important;
  font-style:normal;
  font-weight:400;
  letter-spacing:-.06em;
  line-height:.82;
  text-transform:none;
}

.eyebrow,
.special-col .eyebrow,
.special-col--gifts .eyebrow,
.check-in-copy .eyebrow,
.travel-heading .section-title span{
  font-family:var(--sans)!important;
  font-size:var(--section-subtitle-size)!important;
  font-weight:650!important;
  letter-spacing:var(--section-subtitle-tracking)!important;
  line-height:1.35;
  text-transform:uppercase!important;
}

.special-col .section-title{
  white-space:normal!important;
}
html:lang(es) .special-col .section-title{
  font-size:var(--section-title-serif)!important;
}

@media(max-width:720px){
  :root{
    --section-title-serif:clamp(2.65rem,12vw,3.65rem);
    --section-title-script:clamp(3.3125rem,15vw,4.5625rem);
    --chapter-title-serif:clamp(1.7rem,7.5vw,2.2rem);
    --section-subtitle-size:.6rem;
    --section-subtitle-tracking:.22em;
  }
  .check-in-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .check-in-copy,
  .check-in-card,
  .check-in-card .field,
  .check-in-card input,
  .check-in-card textarea{
    min-width:0;
  }
}

/* One shared cactus-section title, followed by two quieter subtitles. */
.special-inner{
  row-gap:clamp(40px,5vw,72px);
}
.special-heading{
  position:relative;
  z-index:1;
  grid-column:1 / -1;
  text-align:center;
}
.special-heading-title{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.18em;
  margin:0;
  color:var(--off-white);
  font-family:var(--serif);
  font-size:var(--section-title-serif)!important;
  font-weight:400;
  letter-spacing:-.035em;
  line-height:.92;
  text-transform:uppercase;
}
.special-heading-title em{
  color:var(--off-white);
  font-family:var(--script);
  font-size:1.25em!important;
  font-style:normal;
  font-weight:400;
  letter-spacing:-.06em;
  line-height:.78;
  text-transform:none;
}
.special-subtitle{
  max-width:420px;
  margin:0 auto;
  color:var(--off-white);
  font-family:var(--serif);
  font-size:clamp(1.75rem,2.4vw,2.4rem);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.05;
  text-align:center;
}
@media(max-width:720px){
  .special-inner{row-gap:36px}
  .special-heading-title{flex-wrap:wrap;gap:.1em;font-size:clamp(2.65rem,12vw,3.65rem)!important}
  .special-subtitle{font-size:clamp(1.7rem,7.5vw,2.1rem)}
  .special-col--gifts{margin-top:4px}
}

/* Keep Weather comfortably inside the same mobile reading column as the
   Venue and Formal Attire copy rather than stretching toward the paper edge. */
@media(max-width:720px){
  .details-weather{
    width:calc(100% - 72px)!important;
    max-width:360px;
    margin-right:auto!important;
    margin-left:auto!important;
  }
  .details-weather::before{width:100%}
  .weather-ranges,
  .details-weather-copy{
    width:100%!important;
    margin-right:auto;
    margin-left:auto;
  }
}

/* Check-In uses quiet editorial controls: restrained selects, warm calendar
   affordances, and a simple lift in place of the stock travelling shimmer. */
.check-in-card .field select{
  width:100%;
  min-width:0;
  padding:.4rem 2rem .4rem 0;
  border:0;
  border-bottom:1px solid rgba(73,54,44,.3);
  border-radius:0;
  color:var(--mocha-deep);
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2349362c' stroke-width='1.4'%3E%3Cpath d='m5 7 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .15rem center;
  background-size:16px;
  font-family:var(--serif);
  font-size:1rem;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .3s ease,color .3s ease;
}
.check-in-card .field select:hover,
.check-in-card .field select:focus{
  border-bottom-color:var(--mocha);
  outline:0;
}
.check-in-card .field select:invalid{color:rgba(73,54,44,.52)}
.check-in-card .conditional-field[hidden]{display:none!important}
.check-in-card .conditional-field:not([hidden]){
  animation:conditional-field-in .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes conditional-field-in{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}
.check-in-card input[type="date"]{
  color-scheme:light;
  accent-color:var(--mocha);
}
.check-in-card input[type="date"]::-webkit-calendar-picker-indicator{
  width:17px;
  height:17px;
  margin:0;
  padding:5px;
  border-radius:50%;
  background-color:rgba(73,54,44,.07);
  opacity:.72;
  cursor:pointer;
  transition:opacity .3s ease,background-color .3s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.check-in-card input[type="date"]::-webkit-calendar-picker-indicator:hover{
  background-color:rgba(73,54,44,.13);
  opacity:1;
  transform:scale(1.06);
}
.date-field{position:relative}
.date-input-shell{position:relative;width:100%;min-width:0}
.date-input-shell>input{width:100%;padding-right:2.3rem!important}
.date-input-shell>input[readonly]{cursor:pointer}
.date-picker-trigger{
  position:absolute;
  right:0;
  bottom:4px;
  display:grid;
  width:30px;
  height:30px;
  padding:6px;
  border:0;
  border-radius:50%;
  color:var(--mocha);
  background:rgba(73,54,44,.07);
  cursor:pointer;
  place-items:center;
  transition:color .3s ease,background-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.date-picker-trigger svg{width:16px;height:16px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.25}
.date-picker-trigger:hover,
.date-picker-trigger[aria-expanded="true"]{
  color:var(--mocha-deep);
  background:rgba(73,54,44,.13);
  transform:scale(1.05);
}
.date-picker-trigger:focus-visible{outline:2px solid var(--mocha);outline-offset:3px}
.date-picker-trigger[hidden]{display:none!important}
.date-picker-panel{
  position:absolute;
  z-index:30;
  top:calc(100% + 10px);
  left:0;
  width:min(300px,calc(100vw - 52px));
  padding:16px;
  border:1px solid rgba(73,54,44,.18);
  border-radius:20px;
  color:var(--mocha-deep);
  background:linear-gradient(155deg,#fffaf2,#eee2d3);
  box-shadow:0 20px 46px rgba(42,26,18,.24),inset 0 1px rgba(255,255,255,.72);
  animation:date-picker-in .35s cubic-bezier(.16,1,.3,1) both;
}
.date-field--align-right .date-picker-panel{right:0;left:auto}
.date-picker-panel[hidden]{display:none!important}
@keyframes date-picker-in{
  from{opacity:0;transform:translateY(-6px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.date-picker-header{
  display:grid;
  grid-template-columns:30px 1fr 30px;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.date-picker-header strong{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:500;
  line-height:1;
  text-align:center;
  text-transform:capitalize;
}
.date-picker-nav{
  display:grid;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid rgba(73,54,44,.14);
  border-radius:50%;
  color:var(--mocha);
  background:rgba(255,255,255,.28);
  cursor:pointer;
  place-items:center;
  transition:background-color .3s ease,border-color .3s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.date-picker-nav:hover:not(:disabled){border-color:rgba(73,54,44,.32);background:rgba(255,255,255,.72);transform:translateY(-1px)}
.date-picker-nav:disabled{opacity:.25;cursor:default}
.date-picker-nav:focus-visible{outline:2px solid var(--mocha);outline-offset:2px}
.date-picker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.date-picker-weekday{
  display:grid;
  min-height:24px;
  color:rgba(73,54,44,.52);
  font-family:var(--sans);
  font-size:.48rem;
  font-weight:650;
  letter-spacing:.08em;
  place-items:center;
}
.date-picker-blank{display:block;min-height:32px}
.date-picker-day{
  display:grid;
  min-height:32px;
  padding:0;
  border:0;
  border-radius:50%;
  color:var(--mocha-deep);
  background:transparent;
  font-family:var(--serif);
  font-size:.9rem;
  cursor:pointer;
  place-items:center;
  transition:color .25s ease,background-color .3s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.date-picker-day:hover:not(:disabled){color:var(--cream);background:var(--mocha);transform:translateY(-1px)}
.date-picker-day.is-selected{color:var(--cream);background:var(--mocha-deep);box-shadow:0 5px 12px rgba(52,38,31,.2)}
.date-picker-day:disabled{color:rgba(73,54,44,.2);cursor:default}
.date-picker-day:focus-visible{outline:2px solid var(--mocha);outline-offset:1px}
@media(max-width:720px){
  .date-picker-panel,.date-picker-trigger{display:none!important}
  .date-input-shell>input{padding-right:0!important}
}

/* The calendar can extend beyond the lower date fields instead of being clipped. */
@media(min-width:721px){
  .site:has(.date-picker-panel:not([hidden])),
  .check-in:has(.date-picker-panel:not([hidden])){overflow:visible!important}
  .check-in:has(.date-picker-panel:not([hidden])){z-index:4}
}
.check-in-card .button::after{display:none!important}
.check-in-card .button{
  box-shadow:0 9px 22px rgba(52,38,31,.16)!important;
  transition:color .35s ease,background-color .45s ease,box-shadow .45s ease,transform .55s cubic-bezier(.16,1,.3,1)!important;
}
@media(hover:hover) and (pointer:fine){
  .check-in-card .button:hover{
    border-color:#3f2d24!important;
    background:#3f2d24!important;
    box-shadow:0 14px 28px rgba(52,38,31,.23)!important;
    transform:translateY(-2px)!important;
  }
}
.check-in-card .button:active{transform:translateY(0) scale(.992)!important}
.check-in-card .button:focus-visible{outline:2px solid var(--cream);outline-offset:4px}

@media(max-width:720px){
  .check-in{
    padding-right:24px!important;
    padding-left:24px!important;
  }
  .check-in-grid{
    width:100%;
    max-width:480px;
    margin-inline:auto;
  }
  .check-in-copy{padding-inline:6px}
  .check-in-card{padding-right:18px!important;padding-left:18px!important}
}
@media(max-width:360px){
  .check-in-card .form-grid{grid-template-columns:minmax(0,1fr)!important}
  .check-in-card .field{grid-column:1!important}
}

/* Reframe the desktop image without disturbing the angled copy overlay. */
@media(min-width:721px){
  .closing-photo img{object-position:center 48%!important}
}

/* A transform-only wax-seal lift avoids GPU shadow flicker at the hero edge. */
.hero-seal{
  filter:none!important;
  animation:none!important;
  transform:translate3d(-50%,50%,0) scale(1);
  transition:transform .65s cubic-bezier(.16,1,.3,1)!important;
  will-change:transform;
}
@media(hover:hover) and (pointer:fine){
  .hero-seal:hover{
    filter:none!important;
    animation:none!important;
    transform:translate3d(-50%,47%,0) scale(1.025)!important;
  }
}
@media(max-width:720px){
  .hero-seal,.hero-seal:hover{
    filter:none!important;
    animation:none!important;
    transform:translate3d(-50%,50%,0) scale(1)!important;
  }
}

/* The active menu label follows the section tone just like the SV mark. */
@media(min-width:721px){
  .site-header:not(.header-on-dark) .nav-link.active,
  .site-header:not(.header-on-dark):hover .nav-link.active,
  .site-header:not(.header-on-dark):focus-within .nav-link.active{
    color:var(--mocha-deep)!important;
  }
  .site-header.header-on-dark .nav-link.active,
  .site-header.header-on-dark:hover .nav-link.active,
  .site-header.header-on-dark:focus-within .nav-link.active{
    color:var(--off-white)!important;
  }
}

/* Check-In thank-you: a small paper-and-clay Catrina gives the confirmation a warm, celebratory beat. */
.check-in-form-content[hidden],.check-in-thanks[hidden]{display:none!important}
.check-in-card.is-confirmed{display:grid;min-height:500px;place-items:center}
.check-in-thanks{width:100%;max-width:390px;margin:auto;padding-top:142px;text-align:center;opacity:0;transform:translate3d(-26px,8px,0)}
.check-in-thanks.is-visible{animation:check-in-thanks-in .9s var(--ease-refined) both}
@keyframes check-in-thanks-in{to{opacity:1;transform:none}}
.check-in-thanks .eyebrow{margin:0 0 .45rem;color:var(--mocha);font-size:.58rem}
.check-in-thanks h3{margin:0;color:var(--mocha-deep);font-family:var(--script);font-size:clamp(3.1rem,5vw,4.3rem);font-weight:400;letter-spacing:-.055em;line-height:.82}
.check-in-thanks>p:not(.eyebrow){max-width:330px;margin:1.2rem auto 0;color:#5d493a;font-family:var(--serif);font-size:var(--regular-copy-size);line-height:1.48}
.check-in-thanks .check-in-thanks-email{margin-top:.75rem;color:rgba(73,54,44,.66);font-size:.92em;font-style:italic}
.catrina-stopmotion{position:relative;width:min(184px,54vw);aspect-ratio:2/3;margin:0 auto .8rem;overflow:hidden;border-radius:47% 47% 42% 42%/24% 24% 12% 12%;background:radial-gradient(ellipse at 50% 72%,rgba(133,77,46,.6),rgba(49,34,25,.99) 69%)}
.catrina-stopmotion::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 72%,rgba(47,31,21,.2))}
.catrina-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:catrina-step 3s linear infinite;will-change:opacity,transform}
.catrina-frame--one{animation-delay:0s}.catrina-frame--two{animation-delay:-2s}.catrina-frame--three{animation-delay:-1s}
@keyframes catrina-step{0%{opacity:1;transform:scale(1.016)}26.333%{opacity:1;transform:scale(1.008)}33.333%{opacity:0;transform:scale(1.002)}93%{opacity:0;transform:scale(1.024)}100%{opacity:1;transform:scale(1.016)}}

/* Desktop editorial copy and navigation receive the same small readability lift. */
@media(min-width:721px){
  :root{--regular-copy-size:clamp(1.18rem,1.46vw,1.35rem)}
  .special-col>p,.save-date-inner>p:not(.save-date-day){font-family:var(--serif);font-size:var(--regular-copy-size);line-height:1.55}
  .site-header{min-height:68px}
  .site-header .nav-link,.site-header .invitation-replay{padding:.78rem clamp(.58rem,1vw,.84rem);font-size:clamp(.66rem,.85vw,.76rem)!important;letter-spacing:.135em}
  .site-header .language-toggle{min-height:40px;padding-inline:clamp(10px,1vw,14px);font-size:clamp(.58rem,.72vw,.68rem);letter-spacing:.13em}
}
@media(min-width:721px) and (max-width:1419px){
  .site-header .nav-link,.site-header .invitation-replay{padding-inline:clamp(.4rem,calc(.4rem + (100vw - 1180px)*.027),.84rem);font-size:clamp(.6rem,calc(.6rem + (100vw - 1180px)*.00985),.76rem)!important;letter-spacing:.115em}
  .site-header .language-toggle{min-height:36px;padding-inline:clamp(7px,calc(7px + (100vw - 1180px)*.027),14px);font-size:clamp(.53rem,calc(.53rem + (100vw - 1180px)*.00923),.68rem);letter-spacing:.11em}
}

@media(max-width:720px){
  .check-in-card.is-confirmed{min-height:430px}
  .check-in-thanks{max-width:310px}
  .catrina-stopmotion{width:min(162px,50vw);margin-bottom:.7rem}
  .check-in-thanks h3{font-size:clamp(2.8rem,14vw,3.55rem)}
}
@media(prefers-reduced-motion:reduce){
  .check-in-thanks.is-visible{animation:none;opacity:1;transform:none}
  .catrina-frame,.catrina-dance-frame{animation:none;opacity:0;transform:none}
  .catrina-frame--one,.catrina-dance-frame--one{opacity:1}
}

/* Shared stop-motion frames power the password and check-in hand-offs. */
.catrina-dance-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:catrina-dance-step 2.4s linear infinite;will-change:opacity,transform}
.catrina-dance-frame--one{animation-delay:0s}.catrina-dance-frame--two{animation-delay:-1.8s}.catrina-dance-frame--three{animation-delay:-1.2s}.catrina-dance-frame--four{animation-delay:-.6s}
@keyframes catrina-dance-step{0%{opacity:1;transform:scale(1.016)}18%{opacity:1;transform:scale(1.008)}25%{opacity:0;transform:scale(1.002)}93%{opacity:0;transform:scale(1.024)}100%{opacity:1;transform:scale(1.016)}}

/* Desktop canvas: a full-size 13-inch laptop is 70% paper / 15% beige on
   either side. The 13-inch paper width holds as a window narrows, consuming
   those beige gutters down to 6% each. Beyond that, it scales at 88vw. A
   large display caps at the 70%-wide canvas of a 15-inch MacBook Pro. */
@media(min-width:721px){
  :root{
    --desktop-canvas-13:896px;
    --desktop-canvas-max:2016px;
    --desktop-canvas-width:min(var(--desktop-canvas-max),max(70vw,min(var(--desktop-canvas-13),88vw)));
  }
  .site{
    width:var(--desktop-canvas-width);
    max-width:none;
  }
  .site-header{
    width:calc(var(--desktop-canvas-width) - 64px);
    max-width:none;
  }

  /* Keep the temperature scale visibly continuous on desktop. */
  .details-weather .weather-range-track{
    min-width:58px;
    height:24px;
  }
  .details-weather .weather-range-track::before{
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(73,54,44,.22),rgba(73,54,44,.48) 50%,rgba(73,54,44,.22));
    opacity:1;
  }
  .details-weather .weather-range-track::after{
    height:7px;
    background:rgba(73,54,44,.36);
  }
  .details-weather .weather-range-track i{height:7px}
}

/* The chosen Catrina loop is deliberately unhurried in the review panel and opening ritual. */
.catrina-dance-frame{animation-duration:3.2s}
.catrina-dance-frame--one{animation-delay:0s}
.catrina-dance-frame--two{animation-delay:-2.4s}
.catrina-dance-frame--three{animation-delay:-1.6s}
.catrina-dance-frame--four{animation-delay:-.8s}

/* After language selection, a short, quiet Catrina interlude hands off to the sealed invitation. */
.catrina-passage[hidden]{display:none!important}
.catrina-passage{
  position:fixed;
  inset:0;
  z-index:1100;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:auto;
  background:rgba(246,238,227,.43);
  opacity:0;
  -webkit-backdrop-filter:blur(18px) saturate(92%);
  backdrop-filter:blur(18px) saturate(92%);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1);
}
.catrina-passage.is-visible{opacity:1}
.catrina-passage-figure{
  position:relative;
  width:min(238px,52vw);
  aspect-ratio:2/3;
  opacity:0;
  transform:translateY(16px) scale(.965);
  transition:opacity .75s ease .14s,transform 1s cubic-bezier(.16,1,.3,1) .1s;
}
.catrina-passage.is-visible .catrina-passage-figure{opacity:1;transform:none}
.catrina-passage .catrina-dance-frame{object-fit:contain}
.invitation-intro.is-awaiting-passage .intro-cover{
  opacity:0!important;
  pointer-events:none!important;
  transform:translate3d(0,-4px,0) scale(1.004)!important;
  transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1)!important;
}

/* Check-In is a local-only preview for now: the little Catrina makes a slow,
   padded pass along the thank-you card's top edge. */
.check-in-card{position:relative}
.check-in-passage[hidden]{display:none!important}
.check-in-passage{--catrina-track-inset:clamp(28px,6vw,46px);position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.check-in-card.is-confirming .check-in-form-content{opacity:.11;pointer-events:none;transform:scale(.992);transition:opacity .45s ease,transform .65s cubic-bezier(.16,1,.3,1)}
.catrina-walk{position:absolute;top:18%;left:var(--catrina-track-inset);width:112px;aspect-ratio:2/3;opacity:0;transform:translateY(-50%);will-change:left,transform,opacity}
.check-in-passage.is-walking .catrina-walk{animation:check-in-catrina-cross 4.2s cubic-bezier(.22,.61,.36,1) both}
.catrina-walk .catrina-dance-frame{animation-duration:2s}
.catrina-walk .catrina-dance-frame--one{animation-delay:0s}
.catrina-walk .catrina-dance-frame--two{animation-delay:-1.08s}
.catrina-walk .catrina-dance-frame--three{animation-delay:-.72s}
.catrina-walk .catrina-dance-frame--four{animation-delay:-.36s}
@keyframes check-in-catrina-cross{
  0%{left:var(--catrina-track-inset);opacity:0;transform:translateY(-47%) rotate(-2deg)}
  8%{opacity:1}
  24%{transform:translateY(-53%) rotate(1deg)}
  50%{transform:translateY(-47%) rotate(-1deg)}
  76%{transform:translateY(-53%) rotate(1deg)}
  92%{opacity:1}
  100%{left:calc(100% - var(--catrina-track-inset) - 112px);opacity:0;transform:translateY(-48%) rotate(2deg)}
}
.check-in-thanks .check-in-thanks-email{max-width:290px;margin-inline:auto}

/* Keep the closing frame on the opened invitation throughout the exit; never fall back to the sealed cover. */
.invitation-intro.is-leaving .intro-cover,
.invitation-intro.is-leaving .closed-wax-seal,
.invitation-intro.is-leaving .open-invitation-cue{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  animation:none!important;
}
@media(max-width:720px){
  .catrina-passage-figure{width:min(206px,56vw)}
  .check-in-passage{--catrina-track-inset:24px}
  .catrina-walk{width:94px}
  .check-in-thanks{padding-top:126px}
  @keyframes check-in-catrina-cross{
    0%{left:var(--catrina-track-inset);opacity:0;transform:translateY(-47%) rotate(-2deg)}
    8%{opacity:1}
    24%{transform:translateY(-53%) rotate(1deg)}
    50%{transform:translateY(-47%) rotate(-1deg)}
    76%{transform:translateY(-53%) rotate(1deg)}
    92%{opacity:1}
    100%{left:calc(100% - var(--catrina-track-inset) - 94px);opacity:0;transform:translateY(-48%) rotate(2deg)}
  }
}
@media(prefers-reduced-motion:reduce){
  .catrina-passage,.catrina-passage-figure,.check-in-card.is-confirming .check-in-form-content{transition:none!important}
  .check-in-passage.is-walking .catrina-walk{animation:none!important}
}

/* The Catrina crosses only during the hand-off, then settles small and still
   above the centred thank-you message. */
.check-in-card.is-confirmed{display:grid;min-height:500px;place-items:center}
.check-in-thanks{position:relative;z-index:2;display:flex;min-height:270px;align-items:center;flex-direction:column;justify-content:center;width:100%;max-width:390px;margin:auto;padding:76px 0 0;text-align:center}
.check-in-thanks>p:not(.eyebrow){margin-right:auto;margin-left:auto}
.check-in-passage{z-index:3}
.catrina-walk{top:calc(50% - 122px);left:calc(-64px - var(--catrina-track-inset));width:56px;transform:translateY(-50%)}
.check-in-passage.is-walking .catrina-walk{animation:check-in-catrina-arrive 1.9s cubic-bezier(.22,.61,.36,1) both}
@keyframes check-in-catrina-arrive{
  0%{left:calc(-64px - var(--catrina-track-inset));opacity:0;transform:translateY(-48%) rotate(-2deg)}
  12%{opacity:1}
  38%{transform:translateY(-53%) rotate(1deg)}
  69%{transform:translateY(-48%) rotate(-1deg)}
  100%{left:calc(50% - 28px);opacity:1;transform:translateY(-50%) rotate(0)}
}
.check-in-passage.is-arrived .catrina-walk{left:calc(50% - 28px);opacity:1;transform:translateY(-50%);animation:none}
.check-in-passage.is-arrived .catrina-dance-frame{animation:none!important;opacity:0!important;transform:none!important}
.check-in-passage.is-arrived .catrina-dance-frame--one{opacity:1!important}

@media(max-width:720px){
  .check-in-card.is-confirmed{min-height:430px}
  .check-in-thanks{min-height:232px;max-width:300px;padding-top:64px}
  .catrina-walk{top:calc(50% - 104px);width:48px}
  .check-in-passage.is-arrived .catrina-walk{left:calc(50% - 24px)}
  @keyframes check-in-catrina-arrive{
    0%{left:calc(-56px - var(--catrina-track-inset));opacity:0;transform:translateY(-48%) rotate(-2deg)}
    12%{opacity:1}
    38%{transform:translateY(-53%) rotate(1deg)}
    69%{transform:translateY(-48%) rotate(-1deg)}
    100%{left:calc(50% - 24px);opacity:1;transform:translateY(-50%) rotate(0)}
  }
}

/* The confirmation settles as one centred composition: a small, still Catrina
   above the copy. Its four illustrations get equal time only during the hand-off. */
.check-in-card.is-confirmed{min-height:410px}
.check-in-thanks{min-height:0;max-width:330px;padding:0}
.check-in-thanks h3:focus{outline:0}
.check-in-passage{--catrina-track-left:calc(50% - 165px);--catrina-track-right:calc(50% + 125px)}
.catrina-walk{top:calc(50% - 155px);left:var(--catrina-track-left);width:40px}
.check-in-passage.is-walking .catrina-walk{animation:check-in-catrina-cross-copy 2.6s linear both}
@keyframes check-in-catrina-cross-copy{
  0%{left:var(--catrina-track-left);opacity:0;transform:translateY(-50%) rotate(-1deg)}
  8%{opacity:1}
  92%{opacity:1;transform:translateY(-50%) rotate(1deg)}
  100%{left:var(--catrina-track-right);opacity:0;transform:translateY(-50%) rotate(0)}
}
.check-in-passage.is-walking .catrina-dance-frame{animation-name:check-in-catrina-frame;animation-duration:2.6s;animation-timing-function:linear}
.check-in-passage.is-walking .catrina-dance-frame--one{animation-delay:0s}
.check-in-passage.is-walking .catrina-dance-frame--two{animation-delay:-.65s}
.check-in-passage.is-walking .catrina-dance-frame--three{animation-delay:-1.3s}
.check-in-passage.is-walking .catrina-dance-frame--four{animation-delay:-1.95s}
@keyframes check-in-catrina-frame{0%,24.99%{opacity:1;transform:scale(1.01)}25%,100%{opacity:0;transform:scale(1)}}
.check-in-passage.is-arrived .catrina-walk{top:calc(50% - 155px);left:calc(50% - 20px);opacity:0;transform:translateY(-50%);animation:check-in-catrina-settle .34s ease-out .08s both}
@keyframes check-in-catrina-settle{to{opacity:1}}
.check-in-passage.is-arrived .catrina-dance-frame{animation:none!important;opacity:0!important;transform:none!important}
.check-in-passage.is-arrived .catrina-dance-frame--one{opacity:1!important}

@media(max-width:720px){
  .check-in-card.is-confirmed{min-height:370px}
  .check-in-thanks{max-width:280px}
  .check-in-passage{--catrina-track-left:calc(50% - 140px);--catrina-track-right:calc(50% + 106px)}
  .catrina-walk,.check-in-passage.is-arrived .catrina-walk{top:calc(50% - 132px);width:34px}
  .check-in-passage.is-arrived .catrina-walk{left:calc(50% - 17px)}
}

/* A slightly roomier confirmation, plus a modest desktop-only readability lift. */
.check-in-card.is-confirmed{min-height:440px}
@media(min-width:721px){
  :root{--regular-copy-size:clamp(1.24rem,1.52vw,1.42rem)}
  .welcome-copy,.save-date-inner>p:not(.save-date-day),.detail-panel p,.details-weather-copy,
  .week-day p,.chapter-copy,.chapter-copy p,.practical-body p,.faq .accordion-panel p,
  .neighbourhoods li span,.special-col>p,.check-in-copy p{font-size:clamp(1.18rem,1.4vw,1.3rem);line-height:1.55}
  .site-header .nav-link,.site-header .invitation-replay{font-size:clamp(.71rem,.9vw,.82rem)!important}
  .site-header .language-toggle{font-size:clamp(.62rem,.78vw,.72rem)}
}
@media(max-width:720px){.check-in-card.is-confirmed{min-height:390px}}

/* Password access borrows the exact same 2.6-second, four-frame Catrina
   cadence as Check-In, then hands the stage to the language choice. */
.catrina-passage.is-password-handoff{z-index:1250;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.catrina-passage.is-password-handoff .catrina-passage-figure{--catrina-track-left:calc(50% - 170px);--catrina-track-right:calc(50% + 110px);position:absolute;top:50%;left:var(--catrina-track-left);width:60px;opacity:0;transform:translateY(-50%)}
.catrina-passage.is-password-handoff.is-visible .catrina-passage-figure{animation:password-catrina-cross 2.6s linear both}
.catrina-passage.is-password-handoff .catrina-dance-frame{animation-name:check-in-catrina-frame;animation-duration:2.6s;animation-timing-function:linear}
.catrina-passage.is-password-handoff .catrina-dance-frame--one{animation-delay:0s}
.catrina-passage.is-password-handoff .catrina-dance-frame--two{animation-delay:-.65s}
.catrina-passage.is-password-handoff .catrina-dance-frame--three{animation-delay:-1.3s}
.catrina-passage.is-password-handoff .catrina-dance-frame--four{animation-delay:-1.95s}
@keyframes password-catrina-cross{0%{left:var(--catrina-track-left);opacity:0;transform:translateY(-50%) rotate(-1deg)}8%{opacity:1}92%{opacity:1;transform:translateY(-50%) rotate(1deg)}100%{left:var(--catrina-track-right);opacity:0;transform:translateY(-50%) rotate(0)}}

/* The weather reads as a complete detail card: eyebrow, title, then range. */
.details-weather-title{margin:0 0 clamp(22px,2.7vw,34px);color:var(--mocha-deep);font-family:var(--serif);font-size:clamp(2rem,3.4vw,3.7rem);font-weight:400;letter-spacing:-.03em;line-height:.94}

/* The neighbourhood recommendations are an unobtrusive, consistent four-photo
   strip inside the relevant disclosure only. */
.neighbourhood-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.1vw,14px);margin:clamp(18px,2.3vw,28px) 0}
.neighbourhood-gallery figure{min-width:0;margin:0}
.neighbourhood-gallery img{display:block;width:100%;aspect-ratio:3 / 4;object-fit:cover;border-radius:14px;filter:saturate(.88) contrast(.98) sepia(.05);box-shadow:0 10px 22px rgba(52,38,31,.12)}
.neighbourhood-gallery figcaption{margin-top:.55rem;color:var(--mocha-deep);font-family:var(--serif);font-size:clamp(.92rem,1.1vw,1.06rem);line-height:1.1}

@media(max-width:720px){
  .detail-panel .detail-label{margin-bottom:1.3rem}
  .details-weather .detail-label{margin-bottom:.9rem}
  .details-weather-title{font-size:clamp(2.2rem,11vw,3.2rem);margin-bottom:1.45rem}
  .neighbourhood-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}
  .catrina-passage.is-password-handoff .catrina-passage-figure{--catrina-track-left:calc(50% - 146px);--catrina-track-right:calc(50% + 100px);width:51px}
}

/* One identical frosted surface spans password, Catrina, and language choice. */
.password-gate{background:transparent!important}
.password-gate::before,.language-gate::before{
  background:linear-gradient(160deg,rgba(40,30,24,.34),rgba(24,17,13,.42))!important;
  -webkit-backdrop-filter:blur(11px) saturate(108%)!important;
  backdrop-filter:blur(11px) saturate(108%)!important;
}
.password-gate.is-clearing::before{opacity:1!important;--lens-r:0px!important}
.language-gate.is-password-pending{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.language-gate.is-arriving{opacity:1!important;visibility:visible!important;transition:none!important}

/* The access action is simply a generous arrow—quiet and self-explanatory. */
.password-gate-form{
  width:min(100%,350px)!important;
}
.password-gate-control{
  grid-template-columns:minmax(0,1fr) 68px!important;
}
.password-gate-control button{
  width:64px!important;
  min-width:64px!important;
  min-height:46px!important;
  justify-content:center!important;
  padding-inline:0!important;
  border-radius:999px!important;
  color:#4b3022!important;
  background:#fff8ee!important;
}
.password-gate-control button span[aria-hidden="true"]{
  font-size:1.28rem!important;
  line-height:1;
  transform:translateX(1px);
}
@media(max-width:720px){
  .password-gate-form{width:min(100%,312px)!important}
  .password-gate-control{grid-template-columns:minmax(0,1fr) 60px!important}
  .password-gate-control button{width:60px!important;min-width:60px!important;min-height:50px!important;border-radius:999px!important}
  .password-gate-control button span[aria-hidden="true"]{font-size:1.22rem!important;color:#4b3022!important}
}

/* Desktop travel disclosures have room to read: two text columns and a very
   shallow photo strip, never four cramped portrait cards. */
@media(min-width:721px){
  .travel-chapter--city .practical-body,
  .travel-chapter--tepoztlan .practical-body{display:block;padding:22px 0 34px}
  .travel-chapter--city .practical-body>p,
  .travel-chapter--tepoztlan .practical-body>p{max-width:760px;margin:0}
  .travel-chapter--city .neighbourhoods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(36px,5vw,72px);margin:0}
  .travel-chapter--city .neighbourhoods li{gap:.35rem}
  .travel-chapter--city .neighbourhoods li strong{font-size:clamp(1.06rem,1.25vw,1.2rem);line-height:1.1}
  .neighbourhood-gallery{gap:clamp(8px,1.1vw,14px);margin:24px 0 28px}
  .neighbourhood-gallery img{height:clamp(76px,7vw,104px);aspect-ratio:auto;border-radius:11px;object-position:center 48%}
  .neighbourhood-gallery figcaption{margin-top:.42rem;font-size:clamp(.88rem,1vw,1rem)}
}

/* One larger editorial reading size for all desktop body copy. Labels,
   captions, navigation and titles remain on their own scales. */
@media(min-width:721px){
  :root{--desktop-editorial-copy:clamp(1.3rem,1.55vw,1.44rem)}
  .welcome-copy,
  .save-date-inner>p:last-child,
  .detail-panel p:not(.detail-label),
  .details-weather-copy,
  .week-day p,
  .chapter-copy,.chapter-copy p,
  .practical-body p,
  .neighbourhoods li span,
  .special-col>p,
  .faq .accordion-panel p,
  .check-in-copy>p:not(.eyebrow),
  .check-in-thanks>p:not(.eyebrow){font-size:var(--desktop-editorial-copy)!important;line-height:1.55}
  .welcome-inner .welcome-copy{line-height:1.55!important}
}

/* Check-In becomes a full-width desktop composition: the introduction leads,
   then a generous form spans the section beneath it. */
@media(min-width:981px){
  .check-in{padding-block:clamp(132px,11vw,180px)!important}
  .check-in-grid{grid-template-columns:1fr!important;gap:clamp(38px,5vw,64px);width:min(100%,1120px);margin-inline:auto}
  .check-in-copy{max-width:680px;margin-inline:auto;text-align:center}
  .check-in-copy .eyebrow,.check-in-copy .rule,.check-in-copy>p{margin-inline:auto}
  .check-in-copy>p{max-width:640px}
  .check-in-card{width:100%;max-width:none;min-height:0;padding:clamp(42px,5vw,64px) clamp(42px,6vw,78px);border-radius:38px}
  .check-in-card .form-grid{gap:22px clamp(34px,4vw,58px)}
  .check-in-card .field{gap:6px}
  .check-in-card .field label{font-size:.6rem;letter-spacing:.18em}
  .check-in-card .field input,
  .check-in-card .field select,
  .check-in-card .field textarea{min-height:42px;padding:.58rem 0;font-size:1.22rem;line-height:1.35}
  .check-in-card .button{min-height:56px;margin-top:28px;padding-inline:1.75rem;font-size:.7rem}
}

/* Production audit: keyboard focus must be visible on every form control.
   The date/text inputs previously only shifted a 1px border on focus and the
   selects had no indicator at all. */
.check-in-card .field input:focus-visible,
.check-in-card .field textarea:focus-visible,
.check-in-card .field select:focus-visible,
.check-in-card .date-picker-trigger:focus-visible{
  outline:2px solid var(--mocha);
  outline-offset:3px;
  border-radius:3px;
}

/* The finished English desktop artwork includes its own printed monogram. */
@media(min-width:721px){
  html[lang="en"] .suite-monogram-card{display:none}
  .invitation-intro.is-open .suite-composite{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    clip-path:none!important;
  }
  .invitation-intro.is-open .suite-composite img{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* A submitted check-in closes on the same invitation envelope instead of a
   generic panel. The single confirmation line stays deliberately quiet while
   the small Catrina completes the hand-off above it. */
.check-in-card.is-confirmed{
  display:grid!important;
  place-items:center;
  min-height:0!important;
  padding:0!important;
  aspect-ratio:1672 / 941;
  overflow:hidden;
  border:0!important;
  border-radius:26px!important;
  background:url("invitation-envelope-closed-desktop-v1.webp") center / cover no-repeat!important;
  box-shadow:0 24px 58px rgba(30,17,11,.3)!important;
}
.check-in-card.is-confirmed::before{display:none!important}
.check-in-card.is-confirmed .check-in-thanks{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:auto;
  max-width:none;
  min-height:0;
  margin:0;
  padding:0;
  text-align:center;
}
.check-in-card.is-confirmed .check-in-thanks .eyebrow,
.check-in-card.is-confirmed .check-in-thanks h3,
.check-in-card.is-confirmed .check-in-thanks>p:not(.check-in-thanks-email){display:none!important}
.check-in-card.is-confirmed .check-in-thanks .check-in-thanks-email{
  position:absolute;
  top:31%;
  left:50%;
  width:min(78%,460px);
  margin:0;
  color:#482d21;
  font-family:var(--serif);
  font-size:clamp(.96rem,1.45vw,1.25rem)!important;
  font-style:normal;
  line-height:1.3;
  text-shadow:0 1px rgba(255,250,241,.45);
  transform:translateX(-50%);
}
.check-in-card.is-confirmed .check-in-passage{z-index:3}
.check-in-card.is-confirmed .catrina-walk,
.check-in-card.is-confirmed .check-in-passage.is-arrived .catrina-walk{top:20%;}

@media(max-width:720px){
  .check-in-card.is-confirmed{
    aspect-ratio:941 / 1672;
    border-radius:22px!important;
    background-image:url("invitation-envelope-closed-mobile-v1.webp")!important;
  }
  .check-in-card.is-confirmed .check-in-thanks .check-in-thanks-email{
    top:27%;
    width:min(76%,270px);
    font-size:clamp(.96rem,4.2vw,1.1rem)!important;
  }
  .check-in-card.is-confirmed .catrina-walk,
  .check-in-card.is-confirmed .check-in-passage.is-arrived .catrina-walk{top:18%;}
}

/* Match the accommodation menus to the calendar's small paper controls. The
   native option list remains accessible, while its closed state is fully in-theme. */
.check-in-card .field:has(select){
  position:relative;
  gap:1px;
  padding:6px 42px 6px 12px;
  border:1px solid rgba(73,54,44,.2);
  border-radius:14px;
  background:linear-gradient(155deg,rgba(255,252,247,.78),rgba(238,226,211,.52));
  box-shadow:inset 0 1px rgba(255,255,255,.65);
  transition:border-color .3s ease,background-color .35s ease,box-shadow .35s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.check-in-card .field:has(select)::after{
  content:"";
  position:absolute;
  right:10px;
  bottom:9px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(73,54,44,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2349362c' stroke-width='1.4'%3E%3Cpath d='m5 7 5 5 5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
  pointer-events:none;
  transition:background-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.check-in-card .field:has(select):hover,
.check-in-card .field:has(select):focus-within{
  border-color:rgba(73,54,44,.42);
  background:#fffaf2;
  box-shadow:0 8px 18px rgba(73,54,44,.08),inset 0 1px rgba(255,255,255,.78);
}
.check-in-card .field:has(select):focus-within::after{
  background-color:rgba(73,54,44,.15);
  transform:rotate(180deg);
}
.check-in-card .field:has(select) select{
  position:relative;
  z-index:1;
  min-height:30px;
  padding:.18rem 0!important;
  border:0!important;
  color:var(--mocha-deep);
  background:none!important;
  font-size:1.03rem;
}
.check-in-card .field:has(select) select:focus{box-shadow:none}
.check-in-card .field:has(select) select:invalid{color:rgba(73,54,44,.52)}
@media(max-width:720px){
  .check-in-card .field:has(select){padding:6px 40px 6px 11px}
  .check-in-card .field:has(select) select{font-size:1rem}
}

/* The check-in form begins over its eventual envelope rather than replacing
   itself after submit. A warm frosted layer recedes once the form has faded. */
.check-in-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#ecdfcf!important;
}
.check-in-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  display:block!important;
  background:url("invitation-envelope-closed-desktop-v1.webp") center / cover no-repeat;
  opacity:.74;
  transform:scale(1.018);
  transition:opacity .9s ease,transform 1.15s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.check-in-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(150deg,rgba(253,248,241,.9),rgba(235,221,204,.88));
  -webkit-backdrop-filter:blur(12px) saturate(.84);
  backdrop-filter:blur(12px) saturate(.84);
  opacity:1;
  transition:opacity .85s ease,-webkit-backdrop-filter .85s ease,backdrop-filter .85s ease;
  pointer-events:none;
}
.check-in-card .check-in-form-content{
  position:relative;
  z-index:2;
  transition:opacity .42s ease,transform .58s cubic-bezier(.22,.61,.36,1);
}
.check-in-card.is-confirming .check-in-form-content{
  opacity:0!important;
  transform:translate3d(0,-5px,0) scale(.992)!important;
}
.check-in-card.is-confirmed{
  display:grid!important;
  min-height:0!important;
  height:var(--check-in-confirmed-height,440px)!important;
  padding:0!important;
  aspect-ratio:auto!important;
  place-items:center;
  background:#ecdfcf!important;
  border:0!important;
}
.check-in-card.is-confirmed::before{
  display:block!important;
  opacity:1;
  transform:scale(1);
}
.check-in-card.is-confirmed::after{
  opacity:0;
  -webkit-backdrop-filter:blur(0) saturate(1);
  backdrop-filter:blur(0) saturate(1);
}
.check-in-card.is-confirmed .check-in-thanks{z-index:4!important}
.check-in-card.is-confirmed .check-in-passage{z-index:5}
.check-in-card.is-confirmed .check-in-thanks .check-in-thanks-email{
  top:50%;
  width:min(80%,500px);
  color:#482d21;
  font-size:clamp(1.4rem,2.15vw,1.85rem)!important;
  font-style:normal;
  font-weight:400;
  line-height:1.1;
  text-shadow:0 1px rgba(255,250,241,.5);
  transform:translate(-50%,-50%);
}
@media(max-width:720px){
  .check-in-card::before{background-image:url("invitation-envelope-closed-mobile-v1.webp")}
  .check-in-card::after{background:linear-gradient(160deg,rgba(253,248,241,.9),rgba(235,221,204,.9))}
  .check-in-card.is-confirmed .check-in-thanks .check-in-thanks-email{
    top:50%;
    width:min(82%,300px);
    font-size:clamp(1.38rem,6vw,1.72rem)!important;
    line-height:1.12;
  }
}

/* Full-art invitation flow: the supplied envelope and invitation images are
   the interface. They occupy the viewport exactly; the closed envelope has
   one quiet whole-image hover, and either screen can be activated anywhere. */
.invitation-intro{
  position:fixed!important;
  inset:0!important;
  z-index:1000!important;
  width:100%!important;
  min-width:100%!important;
  height:100vh!important;
  height:100svh!important;
  height:100dvh!important;
  min-height:100vh!important;
  min-height:100svh!important;
  min-height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  background:#efe5d8!important;
  touch-action:manipulation;
}
.invitation-intro .intro-atmosphere{display:none!important}
.invitation-intro .intro-cover,
.invitation-intro .envelope-stage{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  min-width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  filter:none!important;
}
.invitation-intro .intro-cover{
  z-index:4!important;
  cursor:pointer;
  background:url("invitation-envelope-closed-desktop-v1.webp") center / cover no-repeat!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:scale(1)!important;
  transition:opacity .58s ease,transform .82s cubic-bezier(.16,1,.3,1)!important;
  will-change:opacity,transform;
}
.invitation-intro .open-invitation-cue{
  z-index:8!important;
  pointer-events:none!important;
}
@media(hover:hover) and (pointer:fine){
  .invitation-intro:not(.is-open) .intro-cover:hover,
  .invitation-intro:not(.is-open) .intro-cover:focus-visible{
    filter:none!important;
    transform:scale(1.012)!important;
  }
}
.invitation-intro.is-opening .intro-cover,
.invitation-intro.is-open .intro-cover{
  opacity:0!important;
  transform:scale(1.014)!important;
  pointer-events:none!important;
}
.invitation-intro .envelope-stage{
  z-index:3!important;
  cursor:pointer;
  opacity:0!important;
  pointer-events:none!important;
  transform:translate3d(0,8px,0) scale(.994)!important;
  transition:opacity .58s ease,transform .88s cubic-bezier(.16,1,.3,1)!important;
  will-change:opacity,transform;
}
.invitation-intro .suite-composite,
.invitation-intro .suite-art,
.invitation-intro .suite-art img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  min-width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  filter:none!important;
}
.invitation-intro .suite-composite{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  pointer-events:none!important;
}
.invitation-intro .suite-art{opacity:0!important;transition:opacity .3s ease!important}
html[lang="en"] .invitation-intro .suite-art--en,
html[lang="es"] .invitation-intro .suite-art--es{opacity:1!important}
.invitation-intro .suite-art img{object-fit:cover!important;object-position:center!important}
.invitation-intro.is-open .envelope-stage{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0) scale(1)!important;
  animation:none!important;
}
.invitation-intro.is-opening.is-open .envelope-stage{animation:none!important}
.invitation-intro.is-closing .envelope-stage,
.invitation-intro.is-leaving .envelope-stage{
  opacity:0!important;
  pointer-events:none!important;
  transform:translate3d(0,-5px,0) scale(1.008)!important;
  animation:none!important;
}
.invitation-intro.is-closing.is-returning .intro-cover{
  opacity:1!important;
  transform:scale(1)!important;
  transition:opacity .42s ease .2s,transform .66s cubic-bezier(.16,1,.3,1) .16s!important;
}
.invitation-intro .enter-site-cue{
  position:absolute;
  bottom:clamp(20px,4vh,42px);
  left:50%;
  z-index:5;
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 18px;
  border:1px solid rgba(255,249,239,.55);
  border-radius:999px;
  color:rgba(255,249,239,.94);
  background:rgba(48,32,23,.26);
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 10px 28px rgba(29,18,13,.18);
  -webkit-backdrop-filter:blur(8px) saturate(106%);
  backdrop-filter:blur(8px) saturate(106%);
  font-family:var(--sans);
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  transform:translateX(-50%);
  pointer-events:none;
}
.invitation-intro .intro-cover>.closed-wax-seal,
.invitation-intro .closed-wax-seal{display:none!important}
@media(max-width:720px){
  .invitation-intro .intro-cover{background-image:url("invitation-envelope-closed-mobile-v1.webp")!important}
  .invitation-intro .enter-site-cue{bottom:max(20px,env(safe-area-inset-bottom));min-height:39px;padding:0 15px;font-size:.5rem;letter-spacing:.14em}
}
@media(prefers-reduced-motion:reduce){
  .invitation-intro .intro-cover,
  .invitation-intro .envelope-stage,
  .invitation-intro.is-closing.is-returning .intro-cover{transition:none!important}
}

/* The retired envelope artwork must never show through while the new full-art
   screens crossfade. The current English and Spanish artwork is framed with
   matching inset margins, so each source is shown at its natural scale. */
.invitation-intro:not(.is-open),
.invitation-intro.is-open{
  background:#efe5d8!important;
  background-image:none!important;
}
.invitation-intro::before,
.invitation-intro.is-opening::before{
  display:none!important;
  background:none!important;
  animation:none!important;
}

/* A quiet, image-first handoff between each invitation screen. No legacy wash
   or delayed hold: the artwork settles in, then gives way to the site cleanly. */
.invitation-intro .intro-cover{
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.16,1,.3,1)!important;
}
.invitation-intro.is-opening .intro-cover,
.invitation-intro.is-open .intro-cover{
  transform:scale(1.005)!important;
}
.invitation-intro .envelope-stage{
  transform:translate3d(0,5px,0) scale(.997)!important;
  transition:opacity .54s cubic-bezier(.22,.61,.36,1) .04s,transform .76s cubic-bezier(.16,1,.3,1) .04s!important;
}
.invitation-intro.is-open .envelope-stage{
  transform:translate3d(0,0,0) scale(1)!important;
}
.invitation-intro.is-opening::after,
.invitation-intro.is-leaving::after{
  opacity:0!important;
  animation:none!important;
}
.invitation-intro.is-leaving{
  visibility:visible!important;
  opacity:0!important;
  transition:opacity .58s cubic-bezier(.22,.61,.36,1),visibility 0s linear .62s!important;
}
.invitation-intro.is-leaving .envelope-stage{
  opacity:0!important;
  transform:translate3d(0,-3px,0) scale(1.004)!important;
  transition:opacity .44s ease,transform .58s cubic-bezier(.22,.61,.36,1)!important;
}
.invitation-intro.is-leaving~.site-header,
.invitation-intro.is-leaving~main.site{
  animation:none!important;
}

/* Resolve each invitation state to one layer only. In particular, closing the
   letter should be a direct crossfade back to the closed envelope—not the
   retired paper wash, clipped artwork, or a delayed replay state. */
.invitation-intro.is-closing::after{
  opacity:0!important;
  animation:none!important;
}
.invitation-intro.is-closing .suite-composite{
  opacity:1!important;
  clip-path:none!important;
  filter:none!important;
  transform:none!important;
  transition:none!important;
}
.invitation-intro.is-closing .envelope-stage{
  opacity:0!important;
  transform:translate3d(0,3px,0) scale(.997)!important;
  transition:opacity .38s cubic-bezier(.22,.61,.36,1),transform .56s cubic-bezier(.22,.61,.36,1)!important;
}
.invitation-intro.is-closing .intro-cover{
  opacity:1!important;
  pointer-events:none!important;
  transform:scale(1)!important;
  transition:opacity .42s cubic-bezier(.22,.61,.36,1) .06s,transform .62s cubic-bezier(.16,1,.3,1) .04s!important;
}
.invitation-intro.is-closing .intro-close,
.invitation-intro.is-closing .intro-language-toggle,
.invitation-intro.is-closing .enter-site-cue{
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .16s ease!important;
}

.invitation-intro .enter-site-cue{
  border-color:rgba(74,45,31,.25)!important;
  color:#4a2d1f!important;
  background:rgba(250,244,235,.58)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.58),0 10px 28px rgba(67,42,28,.12)!important;
}
@media(max-width:720px){
  .nav-links>.invitation-replay{display:inline-flex;width:100%;min-width:0}
}

/* Final mobile calibration: preserve the Details layout while making its
   secondary headings quieter, and give the timeline the same breathing room
   as the surrounding sections. */
@media(max-width:720px){
  .wedding-details .detail-panel h3,
  .wedding-details .detail-panel h3 a{
    max-width:12ch;
    margin-inline:auto;
    font-size:clamp(1.85rem,8.8vw,2.5rem)!important;
    letter-spacing:-.03em;
    line-height:1;
  }
  .celebration-shell{
    padding-right:clamp(28px,7.5vw,36px)!important;
    padding-left:clamp(28px,7.5vw,36px)!important;
  }

  /* These are the large section headings only. Welcome is intentionally not
     included: it remains the generous opening moment. */
  .celebration-heading .section-title,
  .special-heading-title,
  .check-in-copy .section-title,
  .closing-copy .section-title,
  .countdown .section-title{
    font-size:clamp(2.4rem,10.8vw,3.25rem)!important;
  }
  .celebration-heading .section-title em,
  .special-heading-title em,
  .check-in-copy .section-title em,
  .countdown .section-title em{font-size:1.25em!important}
  .travel-heading .section-title em{font-size:clamp(3rem,14vw,4.25rem)!important}
  .faq-head .section-title{font-size:clamp(1.52rem,7vw,2rem)!important}

  /* The confirmation line should remain a quiet, readable caption on phone. */
  .check-in-card.is-confirmed .check-in-thanks .check-in-thanks-email{
    width:min(76%,270px);
    font-size:clamp(.9rem,4vw,1.05rem)!important;
    line-height:1.28;
  }
  .check-in-card.is-confirmed .check-in-passage{z-index:6!important}
  .check-in-card.is-confirmed .catrina-walk,
  .check-in-card.is-confirmed .check-in-passage.is-arrived .catrina-walk{
    top:20%!important;
    width:48px!important;
    filter:drop-shadow(0 3px 4px rgba(61,39,27,.18));
  }
}

/* The city disclosure is a thumbnail strip, not a row of portrait cards. */
.neighbourhood-gallery img{
  height:68px!important;
  aspect-ratio:auto!important;
  object-position:center 48%;
}
@media(max-width:720px){
  .neighbourhood-gallery{gap:10px!important;margin:18px 0!important}
  .neighbourhood-gallery img{height:clamp(60px,16vw,72px)!important;border-radius:10px!important}
  .neighbourhood-gallery figcaption{margin-top:.35rem!important;font-size:.82rem!important}
}

/* The base mobile rule hides a button's first span, which also caught the
   password arrow once its text was simplified. Keep that single arrow visible. */
@media(max-width:720px){
  .password-gate-control button span[aria-hidden="true"]{
    display:inline-block!important;
    color:#4b3022!important;
    font-size:1.32rem!important;
    font-weight:500;
    line-height:1!important;
    transform:translateX(1px)!important;
  }
}
/* The hero photo and its tint must share one edge. A legacy hover treatment
   inset only the photo layer, producing a second curved edge and flickering
   lower corners. Keep the portrait calm and let the seal be the interaction. */
.hero--image-only::before,
.hero--image-only::after{
  border-radius:inherit!important;
  clip-path:none!important;
}
.hero--image-only::before{
  transition:transform .7s cubic-bezier(.16,1,.3,1)!important;
  filter:none!important;
  will-change:auto!important;
}
@media(hover:hover) and (pointer:fine){
  .hero--image-only:hover::before{
    clip-path:none!important;
    filter:none!important;
    transform:scale(calc(1.012 + var(--hero-shift,0)*.000025))!important;
  }
}

/* Authoritative Travel disclosure layout. Both chapter pairs use one shared
   two-column heading row and one full-width answer row on desktop and mobile. */
.travel-chapter--city .practical--city,
.travel-chapter--tepoztlan .practical--tepoz{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-areas:"first second" "answer answer"!important;
  width:100%;
  margin-top:clamp(22px,3vw,34px)!important;
  padding:0!important;
  column-gap:clamp(20px,3vw,44px)!important;
  row-gap:0!important;
  border:0!important;
}
/* Closed disclosure rows should hand off to the next section without a large
   empty shelf. Open panels still create their own height in the answer row. */
.travel-chapter--city + .travel-chapter--tepoztlan{
  margin-top:clamp(14px,1.65vw,21px);
}
.travel-section{
  padding-bottom:clamp(20px,1.925vw,26px)!important;
}
.travel-chapter--city .practical-item,
.travel-chapter--tepoztlan .practical-item{
  display:contents!important;
  min-width:0;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.travel-chapter--city .practical-item h4,
.travel-chapter--tepoztlan .practical-item h4{
  display:block!important;
  grid-row:1!important;
  min-width:0;
  margin:0;
  border:0!important;
  border-bottom:1px solid rgba(73,54,44,.19)!important;
  background:transparent!important;
}
.travel-chapter--city .practical-item:nth-child(1) h4,
.travel-chapter--tepoztlan .practical-item:nth-child(1) h4{grid-area:first!important}
.travel-chapter--city .practical-item:nth-child(2) h4,
.travel-chapter--tepoztlan .practical-item:nth-child(2) h4{grid-area:second!important}
.travel-chapter--city .practical-item .accordion-panel,
.travel-chapter--tepoztlan .practical-item .accordion-panel{
  grid-area:answer!important;
  grid-column:1 / -1!important;
  grid-row:2!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
.travel-chapter--city .practical-item .accordion-trigger,
.travel-chapter--tepoztlan .practical-item .accordion-trigger{
  min-height:0!important;
  justify-content:space-between!important;
  padding:12px 0!important;
  text-align:left!important;
  background:transparent!important;
}
.travel-chapter--city .practical-item.open h4,
.travel-chapter--tepoztlan .practical-item.open h4{border-bottom-color:var(--mocha)!important}
.travel-chapter--city .practical-body,
.travel-chapter--tepoztlan .practical-body{
  width:100%!important;
  max-width:none!important;
  padding:clamp(16px,2vw,24px) 0 clamp(20px,2.8vw,32px)!important;
}
.travel-chapter--city .practical-body>p,
.travel-chapter--tepoztlan .practical-body>p{
  width:100%!important;
  max-width:none!important;
}

/* Each neighbourhood owns its own image and copy: no detached thumbnail
   strip, no repeated Roma Norte label. */
.travel-chapter--city .neighbourhoods{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(22px,3.5vw,48px) clamp(26px,4vw,64px)!important;
  margin:0!important;
  padding:0!important;
  list-style:none;
}
.travel-chapter--city .neighbourhoods li{
  display:grid!important;
  grid-template-rows:auto 1fr;
  gap:10px!important;
  min-width:0;
}
.travel-chapter--city .neighbourhoods li::before{content:none!important}
.travel-chapter--city .neighbourhoods li>img{
  display:block;
  width:100%;
  height:clamp(104px,10vw,146px)!important;
  border-radius:12px;
  object-fit:cover;
  object-position:center 48%;
  filter:saturate(.88) contrast(.98) sepia(.05);
  box-shadow:0 10px 22px rgba(52,38,31,.12);
}
.travel-chapter--city .neighbourhoods li>div{display:grid;gap:.35rem;min-width:0}
.travel-chapter--city .neighbourhoods li strong{font-size:clamp(1.03rem,1.2vw,1.18rem)!important;line-height:1.1}

@media(max-width:720px){
  .travel-chapter--city .practical--city,
  .travel-chapter--tepoztlan .practical--tepoz{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:18px!important;
    margin-top:26px!important;
  }
  .travel-chapter--city .practical-item .accordion-trigger,
  .travel-chapter--tepoztlan .practical-item .accordion-trigger{padding:11px 0!important}
  .travel-chapter--city .practical-item .accordion-trigger>span:first-child,
  .travel-chapter--tepoztlan .practical-item .accordion-trigger>span:first-child{
    font-size:clamp(.78rem,3.5vw,.95rem)!important;
    line-height:1.1;
  }
  .travel-chapter--city .practical-item .accordion-plus::after,
  .travel-chapter--tepoztlan .practical-item .accordion-plus::after{font-size:.72rem!important}
  .travel-chapter--city .practical-body,
  .travel-chapter--tepoztlan .practical-body{padding:18px 0 26px!important}
  .travel-chapter--city .neighbourhoods{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .travel-chapter--city .neighbourhoods li{
    grid-template-columns:clamp(108px,31vw,132px) minmax(0,1fr);
    grid-template-rows:minmax(106px,auto);
    align-items:stretch;
    gap:14px!important;
  }
  .travel-chapter--city .neighbourhoods li>img{
    height:100%!important;
    min-height:106px;
    border-radius:11px;
  }
  .travel-chapter--city .neighbourhoods li>div{align-content:center}
  .travel-chapter--city .neighbourhoods li strong{font-size:1rem!important}
  .travel-chapter--city .neighbourhoods li span{font-size:.93rem!important;line-height:1.38!important}
}

/* Let the Tepozteco fill the frame—not the lower street. The taller crop keeps
   the complete ridge in view on both the paired desktop composition and phone. */
.tepoz-photos .city-photo:last-child img{
  aspect-ratio:4 / 5!important;
  height:auto!important;
  object-fit:cover!important;
  object-position:center 10%!important;
}

/* On a phone the cactus glass is one continuous surface from edge to edge;
   there is no exposed strip of artwork above the frost. */
@media(max-width:720px){
  .special-inner::before{
    inset:0!important;
    border-radius:inherit!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .special-inner::after{inset:14px!important}
}

/* Keep the original Piedra Viva context, then add the sold-out note as a
   separate, considerate line rather than making the whole section feel abrupt. */
.travel-chapter--tepoztlan .accommodation-availability{
  max-width:54ch;
  margin-top:.8rem!important;
  color:rgba(73,54,44,.76)!important;
  font-style:italic;
}

/* A paper select mirrors the hand-built calendar: the native select remains in
   the form for validation and submission, while the visible list is themed. */
.check-in-card .field:has(.native-select-proxy){
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.check-in-card .field:has(.native-select-proxy)::after{display:none!important}
.check-in-card .field select.native-select-proxy{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
  clip-path:inset(50%)!important;
}
.paper-select-control{position:relative;width:100%;min-width:0}
.paper-select-trigger{
  display:flex;
  width:100%;
  min-height:36px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:.25rem 0 .45rem;
  border:0;
  border-bottom:1px solid rgba(73,54,44,.3);
  border-radius:0;
  color:var(--mocha-deep);
  background:transparent;
  font-family:var(--serif);
  font-size:1.03rem;
  line-height:1.25;
  text-align:left;
  cursor:pointer;
  transition:border-color .28s ease,color .28s ease;
}
.paper-select-trigger:hover,.paper-select-trigger:focus-visible,.paper-select-control.is-open .paper-select-trigger{
  border-bottom-color:var(--mocha);
  outline:0;
}
.paper-select-trigger.is-placeholder{color:rgba(73,54,44,.52)}
.paper-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paper-select-arrow{display:block;color:var(--mocha);font-family:var(--sans);font-size:.88rem;line-height:1;opacity:.8;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s ease}
.paper-select-control.is-open .paper-select-arrow{opacity:1;transform:rotate(180deg)}
.paper-select-menu{
  position:absolute;
  z-index:40;
  top:calc(100% + 10px);
  left:0;
  display:grid;
  width:min(100%,330px);
  padding:7px;
  border:1px solid rgba(73,54,44,.18);
  border-radius:18px;
  background:linear-gradient(155deg,#fffaf2,#eee2d3);
  box-shadow:0 20px 46px rgba(42,26,18,.24),inset 0 1px rgba(255,255,255,.72);
  animation:date-picker-in .35s cubic-bezier(.16,1,.3,1) both;
}
.paper-select-menu[hidden]{display:none!important}
.paper-select-option{
  width:100%;
  min-height:37px;
  padding:8px 10px;
  border:0;
  border-radius:11px;
  color:var(--mocha-deep);
  background:transparent;
  font-family:var(--serif);
  font-size:.97rem;
  line-height:1.2;
  text-align:left;
  cursor:pointer;
  transition:color .22s ease,background-color .28s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.paper-select-option:hover:not(:disabled),.paper-select-option:focus-visible{outline:0;color:var(--cream);background:var(--mocha);transform:translateX(2px)}
.paper-select-option[aria-selected="true"]{color:var(--cream);background:var(--mocha-deep);box-shadow:0 5px 12px rgba(52,38,31,.16)}
.paper-select-option:disabled{display:none}
.check-in-card:has(.paper-select-menu:not([hidden])){overflow:visible!important}
@media(max-width:720px){
  .paper-select-trigger{min-height:35px;font-size:1rem}
  .paper-select-menu{width:100%;max-width:calc(100vw - 52px)}
}

/* The envelope is already present behind the form. Ease the frosted layer back
   by one small step so the artwork is perceptible without distracting from entry. */
.check-in-card:not(.is-confirmed)::before{opacity:.79!important}
.check-in-card:not(.is-confirmed)::after{
  background:linear-gradient(150deg,rgba(253,248,241,.87),rgba(235,221,204,.85))!important;
  -webkit-backdrop-filter:blur(10px) saturate(.88)!important;
  backdrop-filter:blur(10px) saturate(.88)!important;
}

/* The hand-off remains visible above the message, then settles. The message
   itself lands comfortably above the wax seal rather than on top of it. */
.check-in-card .catrina-walk,
.check-in-card.is-confirmed .catrina-walk,
.check-in-card.is-confirmed .check-in-passage.is-arrived .catrina-walk{
  top:17%!important;
  width:46px!important;
}
.check-in-passage.is-walking .catrina-walk{animation:check-in-catrina-cross-copy 3.4s linear both!important}
.check-in-passage.is-walking .catrina-dance-frame{animation-duration:3.4s!important}
.check-in-passage.is-walking .catrina-dance-frame--one{animation-delay:0s!important}
.check-in-passage.is-walking .catrina-dance-frame--two{animation-delay:-.85s!important}
.check-in-passage.is-walking .catrina-dance-frame--three{animation-delay:-1.7s!important}
.check-in-passage.is-walking .catrina-dance-frame--four{animation-delay:-2.55s!important}
.check-in-card.is-confirmed .check-in-thanks .check-in-thanks-email{
  top:31%!important;
  width:min(72%,430px)!important;
  line-height:1.2!important;
}
@media(max-width:720px){
  .check-in-card .catrina-walk,
  .check-in-card.is-confirmed .catrina-walk,
  .check-in-card.is-confirmed .check-in-passage.is-arrived .catrina-walk{
    top:21%!important;
    width:42px!important;
  }
  .check-in-card.is-confirmed .check-in-thanks .check-in-thanks-email{
    top:42%!important;
    width:min(72%,258px)!important;
    font-size:clamp(.95rem,4.2vw,1.08rem)!important;
    line-height:1.24!important;
  }
}

/* Mobile details calibration: keep the weather title aligned with the
   Formal attire and Hotel Piedra Viva headings, and give the temperature
   rails a little more breathing room at either side. */
@media(max-width:720px){
  .details-weather-title{
    font-size:clamp(1.85rem,8.8vw,2.5rem)!important;
    line-height:1!important;
  }
  .details-weather .weather-ranges{
    width:calc(100% - 52px)!important;
    margin-inline:auto!important;
  }
}

/* Desktop-only optical correction: the longer event names on the right make
   the centered timeline read slightly too far right, so nudge the timeline
   as a whole left without changing its mobile layout. */
@media(min-width:721px){
  .celebration-list--live{
    transform:translateX(-clamp(10px,1.6vw,22px));
  }
}

/* Keep the Mexico City Día de Muertos image a rounded rectangle on phones,
   matching its desktop treatment; the companion image retains its arch. */
@media(max-width:720px){
  .travel-chapter--city .city-photo--wide img{
    border-radius:24px!important;
  }
}

/* Travel disclosures use a light frosted chip instead of repeated divider
   rules. The arrow remains the affordance and rotates when the panel opens. */
.travel-chapter--city .practical-item h4,
.travel-chapter--tepoztlan .practical-item h4{
  border:0!important;
}
.travel-chapter--city .practical-item h4::after,
.travel-chapter--tepoztlan .practical-item h4::after{
  display:none!important;
}
.travel-chapter--city .practical-item .accordion-trigger,
.travel-chapter--tepoztlan .practical-item .accordion-trigger{
  width:max-content!important;
  min-height:0!important;
  margin:0!important;
  padding:.62rem 1rem!important;
  border:1px solid rgba(255,249,239,.58)!important;
  border-radius:999px!important;
  background:rgba(255,249,239,.42)!important;
  box-shadow:0 8px 20px rgba(52,38,31,.08),inset 0 1px rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(10px) saturate(108%);
  backdrop-filter:blur(10px) saturate(108%);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.16,1,.3,1)!important;
}
.travel-chapter--city .practical-item .accordion-trigger:hover,
.travel-chapter--city .practical-item .accordion-trigger:focus-visible,
.travel-chapter--tepoztlan .practical-item .accordion-trigger:hover,
.travel-chapter--tepoztlan .practical-item .accordion-trigger:focus-visible,
.travel-chapter--city .practical-item.open .accordion-trigger,
.travel-chapter--tepoztlan .practical-item.open .accordion-trigger{
  border-color:rgba(73,54,44,.26)!important;
  background:rgba(255,249,239,.68)!important;
  box-shadow:0 12px 24px rgba(52,38,31,.12),inset 0 1px rgba(255,255,255,.62);
  transform:translateY(-2px);
}

/* Four consistent wide thumbnails on desktop, stacked one-per-row on mobile. */
@media(min-width:721px){
  .travel-chapter--city .neighbourhoods{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:clamp(16px,2.2vw,30px)!important;
  }
  .travel-chapter--city .neighbourhoods li>img{
    height:auto!important;
    aspect-ratio:3 / 2!important;
    object-fit:cover;
  }
}
@media(max-width:720px){
  .travel-chapter--city .practical-item,
  .travel-chapter--tepoztlan .practical-item{
    background:transparent!important;
  }
  .travel-chapter--city .neighbourhoods{
    grid-template-columns:1fr!important;
  }
  .travel-chapter--city .neighbourhoods li{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
  }
  .travel-chapter--city .neighbourhoods li>img{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:3 / 2!important;
    object-fit:cover;
  }
  .travel-chapter--city .neighbourhoods li>div{align-content:start}
}

/* Desktop-only optical correction for Special Request: keep the intentional
   off-centre balance, but bring the divider back into the central gap so it
   does not sit against the left column. */
@media(min-width:721px){
  .special-inner .special-col--gifts{
    margin-left:clamp(-32px,-2.5vw,-16px)!important;
  }
}

/* On phones, pull the disclosure chips closer to the image pair and reduce
   the gap before the next chapter divider. */
@media(max-width:720px){
  .travel-chapter--city .practical--city,
  .travel-chapter--tepoztlan .practical--tepoz{
    margin-top:14px!important;
  }
  .travel-chapter--city + .travel-chapter--tepoztlan{
    margin-top:15px!important;
    padding-top:28px!important;
  }
  .travel-section{
    padding-bottom:32px!important;
  }
}

/* Special Request is a true equal split on desktop. Both columns receive the
   same usable width and inset, with the divider locked to the centre. */
@media(min-width:721px){
  .special-inner{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:0!important;
  }
  .special-inner .special-col{
    box-sizing:border-box;
    width:100%;
    padding-right:clamp(26px,3.4vw,52px)!important;
    padding-left:clamp(26px,3.4vw,52px)!important;
  }
  .special-inner .special-col--gifts{
    margin-left:0!important;
    border-left:1px solid rgba(255,249,239,.18);
  }
}

/* On phones, the Formal Attire handoff uses the same compact, balanced
   divider rhythm as Hotel Piedra Viva → Dress Code. */
@media(max-width:720px){
  .details-weather{
    margin-top:0!important;
    padding-top:0!important;
  }
  .details-weather::before{
    margin-bottom:52px!important;
  }
}

/* Final section handoff: preserve the cactus card's soft shadow, remove the
   FAQ's stray leading rule, and keep the two sections visually connected. */
.special{padding-bottom:clamp(20px,2.2vw,30px)!important}
.faq{padding-top:clamp(42px,4.8vw,68px)!important}
.faq>.accordion{border-top:0!important}

/* The form artwork and frost share the card's rounded clipping path. Keeping
   the custom menu inside that path prevents square corner flashes on open. */
.check-in-card{
  overflow:hidden!important;
  border-radius:38px!important;
  background-clip:padding-box;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
}
.check-in-card::before,
.check-in-card::after{border-radius:inherit!important}
.paper-select-control.is-open{z-index:50}
.check-in-card:has(.paper-select-menu:not([hidden])){overflow:hidden!important}

/* These two closing beats were overpowering the phone layout. Desktop keeps
   the established title scale. */
@media(max-width:720px){
  .special{padding-bottom:18px!important}
  .faq{padding-top:36px!important}
  .check-in-card{border-radius:24px!important}
  .closing-copy .section-title{
    font-size:clamp(1.9rem,8.6vw,2.55rem)!important;
    line-height:.98!important;
  }
  .countdown .section-title{
    font-size:clamp(2rem,9.2vw,2.75rem)!important;
  }
  .countdown .section-title em{font-size:1.18em!important}
}

/* Compact EN / ES by default; on pointer hover, the letters quietly exchange
   places with the red maple leaf and green cactus. */
.nav-language{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:5px;
  margin-left:5px;
  padding:4px 7px;
  border:1px solid currentColor;
  border-radius:999px;
  color:inherit;
  background:rgba(255,255,255,.045);
  opacity:.82;
  transition:background .35s ease,border-color .35s ease,opacity .3s ease;
}
.nav-language-option{
  display:flex;
  min-width:28px;
  min-height:32px;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0;
  border:0;
  border-radius:999px;
  color:inherit;
  background:transparent;
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:.58;
  transition:color .32s ease,background .32s ease,opacity .32s ease,transform .42s var(--ease-refined);
}
.nav-language-option.is-current{opacity:1}
.nav-language-icon{
  width:0;
  height:22px;
  flex:0 0 0;
  overflow:hidden;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transform:scale(.78);
  transition:width .42s var(--ease-refined),flex-basis .42s var(--ease-refined),color .35s ease,opacity .24s ease,transform .48s var(--ease-refined);
}
.nav-language-icon--leaf{stroke-width:1.28}
.nav-language-icon--cactus{stroke-width:1.45}
.nav-language-label{
  max-width:28px;
  overflow:hidden;
  opacity:1;
  white-space:nowrap;
  transform:none;
  transition:max-width .42s var(--ease-refined),opacity .22s ease,transform .42s var(--ease-refined);
}
.nav-language-divider{width:auto;height:auto;background:none;opacity:.38;font-family:var(--sans);font-size:.62rem;line-height:1}

@media(min-width:721px){
  .nav-language:hover,.nav-language:focus-within{
    border-color:rgba(247,239,228,.24);
    background:rgba(247,239,228,.075);
    opacity:1;
  }
  .nav-language:hover .nav-language-label,
  .nav-language:focus-within .nav-language-label{max-width:0;opacity:0;transform:scale(.8)}
  .nav-language:hover .nav-language-icon,
  .nav-language:focus-within .nav-language-icon{width:22px;flex-basis:22px;opacity:1}
  .nav-language:hover .nav-language-option--en .nav-language-icon,
  .nav-language:focus-within .nav-language-option--en .nav-language-icon{color:#a8473f;transform:rotate(-3deg) scale(1.04)}
  .nav-language:hover .nav-language-option--es .nav-language-icon,
  .nav-language:focus-within .nav-language-option--es .nav-language-icon{color:#667956;transform:rotate(2deg) scale(1.04)}
  .nav-language-option:hover,.nav-language-option:focus-visible{background:rgba(255,255,255,.08);transform:translateY(-1px)}
}

@media(max-width:720px){
  .nav-links .nav-language{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    width:100%;
    margin:8px 0 0;
    padding:6px;
    border-color:rgba(255,249,239,.12);
    color:var(--off-white);
    background:rgba(255,249,239,.04);
    opacity:0;
    transform:translateX(-10px);
    transition:opacity .3s ease,transform .5s var(--ease-refined),background .3s ease;
  }
  .menu-open .nav-links .nav-language{opacity:1;transform:none}
  .nav-language-option{min-height:46px;padding:0 8px;font-size:.64rem;opacity:.76}
  .nav-language-option.is-current{background:rgba(255,249,239,.075);opacity:1}
  .nav-language-label{max-width:28px;opacity:1;transform:none}
  .nav-language-divider{align-self:center;justify-self:center}
}

@media(prefers-reduced-motion:reduce){
  .nav-language,.nav-language-option,.nav-language-icon,.nav-language-label,.nav-links>:not(.nav-language){transition:none!important}
}

/* Final desktop readability pass: keep the script word at its established
   scale, quiet only the roman FAQ line, and make every form control legible. */
@media(min-width:721px){
  .faq-head .section-title>span{
    display:inline-block;
    font-size:.88em!important;
    line-height:1;
  }
  .check-in-card .field label{
    font-size:.68rem!important;
    letter-spacing:.18em!important;
  }
  .check-in-card .field input,
  .check-in-card .field textarea,
  .check-in-card .paper-select-trigger{
    font-size:1.32rem!important;
    line-height:1.35!important;
  }
  .check-in-card .paper-select-option{font-size:1.08rem!important}
  .check-in-card .button{font-size:.76rem!important}
  .check-in-card .form-status{font-size:1rem!important}
}

/* Preserve the cactus card's soft cast shadow without carrying its inset
   outline into the light FAQ canvas below. */
.special,.faq{background:var(--paper)!important}
.special-inner::after{border-bottom:0!important}

/* One definitive phone animation. Earlier desktop experiments cannot override
   this track, and reduced-motion phones still receive a visible static figure. */
@media(max-width:720px) and (prefers-reduced-motion:no-preference){
  .check-in-passage.is-walking .catrina-walk{
    display:block!important;
    visibility:visible!important;
    animation:check-in-catrina-mobile-pass 3.4s linear both!important;
  }
  @keyframes check-in-catrina-mobile-pass{
    0%{left:18px;opacity:0;transform:translateY(-50%) rotate(-1deg)}
    9%{opacity:1}
    91%{opacity:1;transform:translateY(-50%) rotate(1deg)}
    100%{left:calc(100% - 60px);opacity:0;transform:translateY(-50%) rotate(0)}
  }
}
@media(max-width:720px) and (prefers-reduced-motion:reduce){
  .check-in-passage.is-walking .catrina-walk,
  .check-in-passage.is-arrived .catrina-walk{
    left:50%!important;
    opacity:1!important;
    transform:translate(-50%,-50%)!important;
  }
}

/* Final interaction calibration: the hero image and its tint share one fixed
   clipping edge, while the photograph gets only a restrained desktop lift. */
.hero--image-only{
  overflow:hidden!important;
  background:transparent!important;
}
.hero--image-only::before,
.hero--image-only::after{
  inset:0!important;
  border-radius:inherit!important;
  clip-path:none!important;
  backface-visibility:hidden;
}
.hero--image-only::before{
  transform-origin:center!important;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1)!important;
  will-change:transform!important;
}
@media(hover:hover) and (pointer:fine){
  .hero--image-only:hover::before{
    transform:scale(calc(1.018 + var(--hero-shift,0)*.000025))!important;
  }
}

/* Desktop optical balance: the time column is intentionally narrower so the
   longer event names begin just left of the mathematical centre. */
@media(min-width:721px){
  .celebration-list--live{transform:none!important}
  .timeline-events .celebration-event{
    grid-template-columns:minmax(90px,.84fr) minmax(0,1.16fr)!important;
  }
}

/* The lower date fields open upward. Calendar and select surfaces may extend
   beyond the card, while its artwork layers keep their rounded silhouette. */
@media(min-width:721px){
  .date-field--open-up .date-picker-panel{
    top:auto!important;
    bottom:calc(100% + 10px)!important;
  }
  .check-in-card:has(.date-picker-panel:not([hidden])){
    overflow:visible!important;
    -webkit-mask-image:none!important;
  }
  .check-in-card:has(.date-picker-panel:not([hidden]))::before,
  .check-in-card:has(.date-picker-panel:not([hidden]))::after{
    clip-path:inset(0 round 38px)!important;
  }
}
.paper-select-control--open-up .paper-select-menu{
  top:auto!important;
  bottom:calc(100% + 10px)!important;
}

/* Invitation artwork is lifted a touch on desktop for equal top/bottom text
   breathing room. The closed-envelope cue sits near the safe lower edge. */
@media(min-width:721px){
  .invitation-intro .suite-art img{object-position:center 53%!important}
}
@media(max-width:720px){
  .invitation-intro:not(.is-open) .intro-cover>.open-invitation-cue{
    top:auto!important;
    bottom:max(20px,calc(env(safe-area-inset-bottom) + 10px))!important;
  }
}

/* On the phone confirmation, the Catrina keeps a gentle four-frame dance
   after arriving. The receipt line sits closer beneath her. */
@media(max-width:720px) and (prefers-reduced-motion:no-preference){
  .check-in-passage.is-arrived .catrina-dance-frame{
    visibility:hidden;
    opacity:1!important;
    animation:check-in-catrina-mobile-dance 2.8s steps(1,end) infinite!important;
  }
  .check-in-passage.is-arrived .catrina-dance-frame--one{animation-delay:0s!important}
  .check-in-passage.is-arrived .catrina-dance-frame--two{animation-delay:-.7s!important}
  .check-in-passage.is-arrived .catrina-dance-frame--three{animation-delay:-1.4s!important}
  .check-in-passage.is-arrived .catrina-dance-frame--four{animation-delay:-2.1s!important}
  @keyframes check-in-catrina-mobile-dance{
    0%,24.99%{visibility:visible;transform:translateY(0) rotate(-.8deg) scale(1.015)}
    25%,100%{visibility:hidden;transform:translateY(0) rotate(.8deg) scale(1)}
  }
}
@media(max-width:720px){
  .check-in-card.is-confirmed .check-in-thanks .check-in-thanks-email{
    top:37%!important;
  }
}

/* Check-in choices use one calm, centred interaction surface at every width. */
body.check-in-modal-open{overflow:hidden!important}
.check-in-modal[hidden]{display:none!important}
.check-in-modal{
  position:fixed;
  inset:0;
  z-index:1600;
  display:grid;
  place-items:center;
  padding:clamp(18px,4vw,42px);
  opacity:0;
  transition:opacity .22s ease;
}
.check-in-modal.is-open{opacity:1}
.check-in-modal-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  border:0;
  background:rgba(47,31,23,.42);
  -webkit-backdrop-filter:blur(12px) saturate(.9);
  backdrop-filter:blur(12px) saturate(.9);
}
.check-in-modal-dialog{
  position:relative;
  z-index:1;
  width:min(92vw,440px);
  max-height:calc(100dvh - 36px);
  overflow:auto;
  padding:clamp(24px,4vw,34px);
  border:1px solid rgba(255,255,255,.58);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(250,242,230,.94),rgba(239,226,208,.9));
  box-shadow:0 28px 80px rgba(42,25,17,.25),inset 0 1px rgba(255,255,255,.72);
  color:#4b3429;
  opacity:0;
  transform:translateY(12px) scale(.975);
  transition:opacity .28s ease,transform .38s cubic-bezier(.16,1,.3,1);
}
.check-in-modal.is-open .check-in-modal-dialog{opacity:1;transform:none}
.check-in-modal-close{
  position:absolute;
  top:14px;
  right:16px;
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border:0;
  border-radius:7px;
  background:transparent;
  color:inherit;
  font:400 1.25rem/1 var(--sans);
  cursor:pointer;
  transition:color .28s ease,background-color .3s ease,transform .4s var(--ease-refined);
}
.check-in-modal-close:is(:hover,:focus-visible){color:#a8473f;background:rgba(168,71,63,.08);outline:0;transform:rotate(4deg) scale(1.08)}
.check-in-modal-title{
  margin:0 42px 20px;
  color:#4b3429;
  font-family:var(--serif);
  font-size:1.48rem;
  font-weight:700;
  line-height:1.2;
  text-align:center;
}
.check-in-modal-body{width:100%}
.check-in-modal .date-picker-panel,
.check-in-modal .paper-select-menu{
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  animation:none!important;
  transform:none!important;
  opacity:1!important;
}
.check-in-modal .date-picker-panel[hidden],
.check-in-modal .paper-select-menu[hidden]{display:none!important}
.check-in-modal .paper-select-menu{display:grid!important;gap:8px!important}
.check-in-modal .paper-select-option{
  width:100%;
  min-height:48px;
  padding:11px 16px!important;
  border:1px solid rgba(75,52,41,.13)!important;
  border-radius:9px!important;
  background:rgba(255,250,241,.42)!important;
  color:#4b3429!important;
  font-family:var(--serif)!important;
  font-size:1.08rem!important;
  font-weight:600!important;
  text-align:left;
  transition:border-color .3s ease,background-color .3s ease,color .3s ease,transform .35s var(--ease-refined)!important;
}
.check-in-modal .paper-select-option:is(:hover,:focus-visible){
  border-color:rgba(75,52,41,.38)!important;
  color:var(--mocha-deep)!important;
  background:rgba(75,52,41,.07)!important;
  outline:0;
  transform:translateX(2px);
}
.check-in-modal .paper-select-option[aria-selected="true"]{
  border-color:var(--mocha)!important;
  color:var(--off-white)!important;
  background:var(--mocha)!important;
}
.check-in-modal .date-picker-header{margin-bottom:12px}
.check-in-modal .date-picker-header strong{font-size:1.3rem!important;font-weight:700!important}
.check-in-modal .date-picker-weekday{color:rgba(75,52,41,.72)!important;font-size:.66rem!important;font-weight:700!important}
.check-in-modal .date-picker-day{
  min-height:40px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  color:#4b3429!important;
  font-size:1.04rem!important;
  font-weight:650!important;
  transition:color .25s ease,background-color .3s ease,border-color .3s ease,transform .35s var(--ease-refined)!important;
}
.check-in-modal .date-picker-day:is(:hover,:focus-visible):not(:disabled){border-color:rgba(75,52,41,.38)!important;color:var(--mocha-deep)!important;background:rgba(75,52,41,.09)!important;outline:0;transform:translateY(-1px)}
.check-in-modal .date-picker-day.is-selected{border-color:var(--mocha-deep)!important;color:var(--off-white)!important;background:var(--mocha-deep)!important;box-shadow:0 6px 14px rgba(52,38,31,.2)!important}
.check-in-modal .date-picker-day:disabled{color:rgba(75,52,41,.34)!important;font-weight:500!important}
.check-in-modal .date-picker-nav{
  width:38px!important;
  height:38px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#4b3429!important;
  transition:color .28s ease,background-color .3s ease,border-color .3s ease,transform .4s var(--ease-refined)!important;
}
.check-in-modal .date-picker-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.check-in-modal .date-picker-nav:is(:hover,:focus-visible):not(:disabled){border-color:rgba(75,52,41,.3)!important;color:var(--mocha-deep)!important;background:rgba(75,52,41,.08)!important;outline:0;transform:translateX(0) scale(1.06)}
.check-in-modal .date-picker-nav:disabled{color:rgba(75,52,41,.28)!important;opacity:1!important}
.date-picker-trigger{display:grid!important}
.check-in-card .field.is-invalid input,
.check-in-card .field.is-invalid .paper-select-trigger{
  border-bottom-color:#9d4b42!important;
  box-shadow:inset 0 -1px #9d4b42!important;
}
.check-in-card .field.is-invalid label{color:#8c4039!important}
.check-in-card .form-status.is-error{
  min-height:1.4em;
  margin-top:12px;
  color:#8c4039!important;
  font-family:var(--serif);
  text-align:center;
}

/* The desktop control stays quiet until invited open; mobile always spells
   both choices out and marks the active language with its coloured symbol. */
.nav-language{
  background:rgba(255,255,255,.025)!important;
  border-color:color-mix(in srgb,currentColor 22%,transparent)!important;
}
.nav-language-divider{
  display:block!important;
  width:1px!important;
  height:18px!important;
  background:currentColor!important;
  opacity:.22!important;
}
.nav-language-label--long{display:none}
@media(min-width:721px){
  .nav-language{
    width:78px;
    padding-inline:4px!important;
    border-color:transparent!important;
    background:transparent!important;
    transition:width .48s var(--ease-refined),opacity .3s ease!important;
  }
  .nav-language-option{min-width:0!important;gap:6px!important}
  .nav-language:hover .nav-language-label--short,
  .nav-language:focus-within .nav-language-label--short{display:none!important}
  .nav-language:hover .nav-language-label--long,
  .nav-language:focus-within .nav-language-label--long{display:inline-block!important;max-width:92px!important;overflow:visible!important;opacity:1!important;transform:none!important}
  .nav-language:hover .nav-language-icon,
  .nav-language:focus-within .nav-language-icon{width:19px!important;flex-basis:19px!important}
  .nav-language:hover,.nav-language:focus-within{width:214px!important;border-color:transparent!important;background:transparent!important}
  .nav-language:hover .nav-language-option,
  .nav-language:focus-within .nav-language-option{flex:1 1 0!important}
  .nav-language:hover .nav-language-option--en .nav-language-icon,
  .nav-language:focus-within .nav-language-option--en .nav-language-icon{color:currentColor!important;transform:scale(.94)!important}
  .nav-language:hover .nav-language-option--es .nav-language-icon,
  .nav-language:focus-within .nav-language-option--es .nav-language-icon{color:currentColor!important;transform:scale(.94)!important}
  .nav-language:hover .nav-language-option--en:is(:hover,:focus-visible,.is-current) .nav-language-icon,
  .nav-language:focus-within .nav-language-option--en:is(:hover,:focus-visible,.is-current) .nav-language-icon{color:#a8473f!important;transform:rotate(-3deg) scale(1.04)!important}
  .nav-language:hover .nav-language-option--es:is(:hover,:focus-visible,.is-current) .nav-language-icon,
  .nav-language:focus-within .nav-language-option--es:is(:hover,:focus-visible,.is-current) .nav-language-icon{color:#667956!important;transform:rotate(2deg) scale(1.04)!important}
}
@media(max-width:720px){
  .nav-links .invitation-replay,
  .nav-links .nav-link{
    font-size:.72rem!important;
    letter-spacing:.2em!important;
    font-weight:600!important;
  }
  .nav-links .nav-language{
    position:relative;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:hidden;
    padding:4px!important;
    background:rgba(255,255,255,.035)!important;
  }
  .nav-links .nav-language::before{
    content:"";
    position:absolute;
    z-index:0;
    top:4px;
    bottom:4px;
    left:4px;
    width:calc(50% - 4px);
    border:1px solid rgba(255,249,239,.08);
    border-radius:999px;
    background:rgba(255,249,239,.075);
    box-shadow:inset 0 1px rgba(255,255,255,.06);
    transition:transform .52s var(--ease-refined);
  }
  html[lang="es"] .nav-links .nav-language::before{transform:translateX(100%)}
  .nav-language-option{position:relative;z-index:1;gap:6px!important;padding:0 6px!important;background:transparent!important;font-size:.68rem!important}
  .nav-language-label--short{display:none!important}
  .nav-language-label--long{display:inline-block!important;max-width:none!important;opacity:1!important;transform:none!important}
  .nav-language-icon{width:20px!important;flex-basis:20px!important;opacity:.48!important}
  .nav-language-option--en.is-current .nav-language-icon{color:#a8473f!important;opacity:1!important}
  .nav-language-option--es.is-current .nav-language-icon{color:#667956!important;opacity:1!important}
  .nav-language-divider{display:none!important}
}

/* The photo gets its own clipped layer, while the wax seal remains a sibling
   that can bridge the photo and Welcome without exposing a second photo edge. */
.hero--image-only{overflow:visible!important;z-index:3!important;background:transparent!important}
.hero--image-only::before,
.hero--image-only::after{content:none!important}
.hero-visual{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  background:#7a685c;
  isolation:isolate;
}
.hero-visual::before,
.hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.hero-visual::before{
  z-index:-2;
  background:url("sean-valeria-coast.webp") center 58%/cover no-repeat;
  transform:scale(calc(1.012 + var(--hero-shift,0)*.000025));
  transform-origin:center;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1),filter 1.15s ease;
  will-change:transform;
}
.hero-visual::after{
  z-index:-1;
  background:linear-gradient(180deg,rgba(20,14,10,.18),transparent 40%,rgba(27,18,12,.12));
}
.hero--image-only .hero-seal{z-index:8!important}
.welcome-section{position:relative;z-index:2}
@media(hover:hover) and (pointer:fine){
  .hero--image-only:hover .hero-visual::before{
    transform:scale(calc(1.03 + var(--hero-shift,0)*.000025));
    filter:brightness(1.025) saturate(1.02);
  }
}
@media(max-width:720px){
  .hero-visual::before{background-position:58% center}
  .hero-visual::after{background:linear-gradient(180deg,rgba(18,13,9,.34),transparent 36%,rgba(21,15,10,.1))}
}

/* Tighter mobile Catrina passage and a deliberately closer receipt line. */
@media(max-width:720px){
  .check-in-card.is-confirmed .check-in-thanks .check-in-thanks-email{top:31.5%!important}
  .check-in-modal-dialog{width:min(90vw,410px);padding:24px 18px;border-radius:24px}
  .check-in-modal-title{margin-bottom:16px;font-size:1.25rem}
  .check-in-modal .date-picker-header strong{font-size:1.1rem!important}
  .check-in-modal .date-picker-weekday{font-size:.58rem!important}
  .check-in-modal .date-picker-day{min-height:36px!important;font-size:.94rem!important}
}
@media(max-width:720px) and (prefers-reduced-motion:no-preference){
  .check-in-passage.is-walking .catrina-walk{
    animation:check-in-catrina-mobile-pass-tight 3.4s linear both!important;
  }
  @keyframes check-in-catrina-mobile-pass-tight{
    0%{left:27px;opacity:0;transform:translateY(-50%) rotate(-1deg)}
    9%{opacity:1}
    91%{opacity:1;transform:translateY(-50%) rotate(1deg)}
    100%{left:calc(100% - 69px);opacity:0;transform:translateY(-50%) rotate(0)}
  }
}

@media(prefers-reduced-motion:reduce){
  .check-in-modal,.check-in-modal-dialog{transition:none!important}
}

/* Venue and Travel map actions share one authoritative button treatment. */
.chapter-map-button,
.detail-map-button{
  min-height:46px!important;
  margin-top:clamp(18px,2.2vw,28px)!important;
  padding:.8rem 1.35rem!important;
  border:1px solid var(--mocha)!important;
  border-radius:999px!important;
  color:var(--off-white)!important;
  background:var(--mocha)!important;
  box-shadow:0 12px 26px rgba(52,38,31,.18)!important;
  font-size:.62rem!important;
  letter-spacing:.16em!important;
  text-decoration:none!important;
  transition:transform .55s var(--ease-refined),background-color .4s ease,border-color .4s ease,box-shadow .5s ease!important;
}
.chapter-map-button::after,
.detail-map-button::after{display:none!important}
.chapter-map-button span,
.detail-map-button span{
  font-size:.8rem!important;
  line-height:1;
  transition:transform .45s var(--ease-refined);
}
.chapter-map-button:is(:hover,:focus-visible),
.detail-map-button:is(:hover,:focus-visible){
  border-color:var(--mocha-deep)!important;
  background:var(--mocha-deep)!important;
  box-shadow:0 16px 32px rgba(52,38,31,.24)!important;
  transform:translateY(-3px)!important;
}
.chapter-map-button:is(:hover,:focus-visible) span,
.detail-map-button:is(:hover,:focus-visible) span{transform:translate(3px,-2px)}
@media(max-width:720px){
  .chapter-map-button,.detail-map-button{min-height:44px!important;margin-top:16px!important}
}

/* Mobile: drop the header pill slightly so it clears the hero's top curve on first load. */
@media(max-width:720px){
  .site-header:not(.scrolled){top:24px}
}

/* The settled catrina is tappable: replaying her dance. The passage layer
   itself stays pointer-transparent so it never blocks the thank-you card. */
.check-in-passage.is-arrived .catrina-walk{pointer-events:auto;cursor:pointer}

/* While settled, a soft double pulse hints that she's tappable. */
@keyframes catrina-idle-pulse{
  0%{transform:translateY(-50%) scale(1)}
  5%{transform:translateY(-50%) scale(1.045)}
  10%{transform:translateY(-50%) scale(1)}
  15%{transform:translateY(-50%) scale(1.032)}
  21%,100%{transform:translateY(-50%) scale(1)}
}
.check-in-passage.is-arrived .catrina-walk{animation:catrina-idle-pulse 4.6s ease-in-out 1.4s infinite}

/* The FAQ panel's own background matches the page ground exactly, but as an
   opaque layer it was painting over the gifts card's soft shadow at the section
   seam, cutting it into a hard line. Transparent lets the shadow fade out. */
.faq{background:transparent!important}