/* ============================================================
   Megan & Amy — Lake Maggiore, 4 June 2027
   Design system revised per emil-design-eng (motion), impeccable
   (anti-pattern bans), and taste-skill (anti-default discipline).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

:root{
  /* neutrals: true near-white (chroma-flat), not warm cream/sand */
  --bg-a:#FAFAF9;
  --bg-b:#EDF2F1;              /* tinted toward the brand's own blue hue, not generic warmth */
  --ink:#20302B;
  --ink-soft:#43524B;
  --ink-faint:#6E7C76;
  --accent:#2F6B82;
  --accent-dark:#1F4E5F;
  --accent-soft:#5B9AB0;
  --accent-wash:#E4EEF1;
  --terracotta:#B5652F;
  --line:#D7DDDA;
  --white:#FFFFFF;

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;

  --maxw:1180px;
  --radius-img:10px;
  --radius-btn:6px;

  /* motion tokens — per emil-design-eng: strong custom curves, not weak CSS defaults */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 150ms;
  --dur-med: 220ms;
  --dur-slow: 320ms;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--bg-a);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.75;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}

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

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  color:var(--ink);
  margin:0 0 .4em;
  letter-spacing:.01em;
  text-wrap:balance;
}
.eyebrow{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  display:block;
  margin-bottom:.7rem;
}
h2{font-size:clamp(2.2rem, 4.4vw, 3.1rem); letter-spacing:.01em; line-height:1.12; margin-bottom:.32em;}
h3{font-size:1.4rem;}

p{margin:0 0 1.1em; text-wrap:pretty;}
.lede{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--ink-soft);
  max-width:64ch;
}

/* ---------- buttons: press feedback, gated hover, real easing ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.85em 1.9em;
  border:1px solid var(--accent-dark);
  border-radius:var(--radius-btn);
  color:var(--accent-dark);
  background:transparent;
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--accent-dark); color:var(--white);}
  .btn.solid:hover{background:var(--ink);}
  .btn.on-dark:hover{background:var(--white); color:var(--ink);}
}
.btn:active{transform:scale(0.97);}
.btn.solid{background:var(--accent-dark); color:var(--white);}
.btn.on-dark{border-color:rgba(255,255,255,.75); color:var(--white);}
.btn[aria-disabled="true"]{opacity:.55; cursor:default;}
.btn[aria-disabled="true"]:active{transform:none;}

/* ---------- wave divider ---------- */
.ripple{position:relative; width:100%; height:56px; overflow:hidden; line-height:0;}
.ripple svg{width:100%; height:100%; display:block;}
.ripple .wave-fill{fill:var(--bg-b);}
.ripple.to-a .wave-fill{fill:var(--bg-a);}

/* ---------- nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem, 4vw, 3rem);
  background:transparent;
  color:var(--white);
  transition:background var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), padding var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.site-nav.scrolled{
  background:rgba(250,250,249,.94);
  color:var(--ink);
  padding-top:.75rem; padding-bottom:.75rem;
  box-shadow:0 1px 0 var(--line);
  backdrop-filter:blur(6px);
}
.nav-mark{
  font-family:var(--serif); font-size:1.25rem; font-weight:500; letter-spacing:.14em;
  display:flex; align-items:center; gap:.55em; text-decoration:none; color:inherit;
}
.mark-bar{display:inline-block; width:1px; height:1em; background:currentColor; opacity:.55;}
.nav-links{display:flex; gap:clamp(.85rem,2vw,1.7rem); list-style:none; margin:0; padding:0;}
.nav-links a{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; color:inherit; opacity:.88;
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{opacity:1; border-color:currentColor;} }
.nav-links a.active{opacity:1; border-color:currentColor;}
.nav-cta .btn{padding:.55em 1.3em; font-size:11px;}
.site-nav.scrolled .btn{border-color:var(--accent-dark); color:var(--accent-dark);}
.site-nav.scrolled .btn.solid{background:var(--accent-dark); color:var(--white);}

.nav-toggle{display:none; background:none; border:0; color:inherit; cursor:pointer; padding:4px; position:relative; z-index:210;}
.nav-toggle svg{width:22px; height:22px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle.open .icon-menu{display:none;}
.nav-toggle.open .icon-close{display:block;}

.nav-backdrop{display:none;}

@media (max-width:1080px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    background:var(--bg-a); color:var(--ink);
    flex-direction:column; gap:0; padding:6rem 2rem 2rem;
    transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out);
    box-shadow:-6px 0 24px rgba(0,0,0,.12);
    z-index:200;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{display:block; padding:.9rem 0; border-bottom:1px solid var(--line); opacity:1;}
  .nav-cta{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:150;
    background:rgba(10,14,12,.35); opacity:0; pointer-events:none;
    transition:opacity var(--dur-med) var(--ease-out);
  }
  .nav-backdrop.open{opacity:1; pointer-events:auto;}
}


/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  overflow:hidden; background-color:#182420; color:var(--white);
}
.hero-bg{
  position:absolute; inset:0;
  background-image:url('../assets/images/hero-aerial-boat.jpg');
  background-position:center 42%; background-size:cover; background-repeat:no-repeat;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%;}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,22,19,.3) 0%, rgba(16,22,19,.12) 38%, rgba(12,18,15,.66) 100%);
  z-index:1;
}
.hero-inner{position:relative; z-index:2; width:100%; padding:8rem clamp(1.25rem,4vw,3rem) 4.5rem;}
.hero-names{
  font-family:var(--serif); font-size:clamp(2.8rem, 8vw, 5.6rem); line-height:1.05;
  letter-spacing:.015em; margin:0 0 .3em; color:var(--white) !important;
}
.hero-names em{font-style:italic; color:var(--white); opacity:.85;}
.hero-meta{font-family:var(--sans); font-size:13px; letter-spacing:.16em; text-transform:uppercase; opacity:.92; margin-bottom:1.8rem;}

/* ---------- sections ---------- */
section{position:relative;}
.section-pad{padding:clamp(3rem,5.5vw,4.8rem) 0 clamp(4.5rem,8vw,7.5rem);}
.alt-bg{background:var(--bg-b);}

.section-head{max-width:820px; margin-bottom:clamp(2.2rem,4vw,3.2rem);}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;}
.split.reverse .split-media{order:2;}
.split-media img{border-radius:var(--radius-img);}
@media (max-width:820px){
  .split{grid-template-columns:1fr;}
  .split.reverse .split-media{order:0;}
}

/* callouts */
.info-callout{
  margin:1.6rem 0; padding:1.2rem 1.5rem;
  background:var(--accent-wash);
  border-left:4px solid var(--accent);
  border-radius:var(--radius-img);
  font-size:15px; color:var(--ink-soft);
}
.info-callout strong{color:var(--ink);}
.info-callout p{margin:0;}
.info-callout.with-icon{display:flex; align-items:flex-start; gap:1rem;}
.info-callout.with-icon .icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--accent); color:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.info-callout.with-icon .icon svg{width:19px; height:19px;}
.info-callout.with-icon p{padding-top:.3rem;}

.concierge-card{
  margin-top:2.2rem; padding:1.5rem 1.7rem;
  background:var(--accent); border-radius:var(--radius-img); color:var(--white);
}
.concierge-card h4{font-family:var(--sans); font-weight:500; font-size:.95rem; letter-spacing:.03em; margin-bottom:.3rem; color:var(--white);}
.concierge-card p{font-size:14.5px; color:rgba(255,255,255,.9); margin:0 0 .5em;}
.concierge-card a{color:var(--white); text-decoration:underline; text-underline-offset:3px;}

/* schedule + accordion detail */
.schedule{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem;}
@media (max-width:820px){.schedule{grid-template-columns:1fr;}}
.schedule-item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-img);
  overflow:hidden; display:flex; flex-direction:column;
}
.schedule-thumb{width:100%; height:190px; object-fit:cover; display:block;}
.schedule-body{padding:1.6rem 1.6rem 1.6rem; display:flex; flex-direction:column; flex:1;}
.schedule-item:not(:has(.schedule-thumb)) .schedule-body{padding-top:1.8rem;}
.schedule-day{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white); background:var(--accent); display:inline-block;
  padding:.35em .85em; border-radius:20px; margin-bottom:1.1rem; align-self:flex-start;
}
.schedule-item h3{margin-bottom:.15rem; font-size:1.5rem;}
.schedule-item .when{color:var(--ink-faint); font-size:12.5px; margin-bottom:.9rem; display:block; font-family:var(--sans); letter-spacing:.01em;}
.schedule-item p{font-size:14.5px;}
.schedule-more{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:.6em; padding:.8rem 0 .3rem;
  margin-top:auto;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dark);
}
.schedule-more .plus{flex:none; width:16px; height:16px; position:relative;}
.schedule-more .plus::before,.schedule-more .plus::after{content:""; position:absolute; background:var(--accent-dark); top:50%; left:50%; transform:translate(-50%,-50%);}
.schedule-more .plus::before{width:12px; height:1.4px;}
.schedule-more .plus::after{width:1.4px; height:12px; transition:transform var(--dur-med) var(--ease-in-out);}
.schedule-item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}
.schedule-detail{max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-in-out);}
.schedule-detail-inner{padding-top:.5rem;}
.schedule-detail dl{margin:0;}
.schedule-detail dt{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:.9rem;}
.schedule-detail dt:first-child{margin-top:0;}
.schedule-detail dd{margin:.2rem 0 0; font-size:14.5px; color:var(--ink-soft);}

.note-line{font-size:16.5px; color:var(--ink-soft); margin-top:1.6rem; font-style:italic; font-family:var(--serif);}

/* ---------- story: text + rotating carousel ---------- */
.story-layout{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start;}
@media (max-width:900px){.story-layout{grid-template-columns:1fr;}}
.story-visual{display:flex; flex-direction:column; gap:1.4rem;}

.story-carousel{position:relative; border-radius:var(--radius-img); overflow:hidden; aspect-ratio:4/5; background:#1c2420;}
.story-carousel-track{display:flex; height:100%; transition:transform 650ms var(--ease-in-out);}
.story-carousel-track img{flex:0 0 100%; width:100%; height:100%; object-fit:cover;}
.story-carousel-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.1rem 1.2rem; color:var(--white); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(0deg, rgba(0,0,0,.5), transparent);
}
.story-carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.32); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.story-carousel-arrow svg{width:16px; height:16px;}
.story-carousel-arrow.prev{left:.7rem;}
.story-carousel-arrow.next{right:.7rem;}
.story-carousel:hover .story-carousel-arrow{opacity:1;}
@media (hover:none){ .story-carousel-arrow{opacity:1; background:rgba(0,0,0,.4);} }
@media (hover:hover) and (pointer:fine){ .story-carousel-arrow:hover{background:rgba(0,0,0,.55);} }
.story-carousel-arrow:active{transform:translateY(-50%) scale(0.92);}

/* audio players — modern, rounded card with animated equalizer */
.story-text p{font-family:var(--serif); font-size:1.15rem; line-height:1.7; color:var(--ink-soft);}
.audio-intro{
  font-family:var(--serif); font-size:1.75rem; font-weight:600; color:var(--ink);
  margin-top:1.6rem; margin-bottom:0;
}
.audio-row{display:flex; flex-direction:column; gap:.9rem; margin-top:1.4rem;}
.audio-card{
  position:relative; display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.3rem; border-radius:var(--radius-img);
  border-left:4px solid var(--accent);
  background:var(--accent-wash);
  box-shadow:0 1px 3px rgba(20,40,45,.06);
  transition:box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .audio-card:hover{box-shadow:0 6px 16px rgba(20,40,45,.1); transform:translateY(-1px);}
}
.audio-card.megan-card{background:#EFEAE3; border-left-color:var(--terracotta);}
.audio-play{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--accent-dark); color:var(--white);
  display:flex; align-items:center; justify-content:center; border:0; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out);
  box-shadow:0 2px 6px rgba(20,40,45,.18);
}
.audio-play:active{transform:scale(0.92);}
.audio-card.megan-card .audio-play{background:var(--terracotta);}
.audio-play svg{width:15px; height:15px;}
.audio-meta{flex:1;}
.audio-title{font-family:var(--sans); font-size:1rem; font-weight:500; color:var(--ink); letter-spacing:.01em;}
.audio-bars{display:flex; align-items:flex-end; gap:3px; height:18px; margin-top:.45rem;}
.audio-bars i{
  display:block; width:3px; background:var(--accent-soft); border-radius:2px; opacity:.5;
  transition:background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  animation:eq-idle 1.8s var(--ease-in-out) infinite;
}
.audio-card.megan-card .audio-bars i{background:var(--terracotta);}
.audio-card.playing .audio-bars i{background:var(--accent-dark); opacity:1; animation:eq 0.9s var(--ease-in-out) infinite;}
.audio-card.megan-card.playing .audio-bars i{background:var(--terracotta);}
.audio-bars i:nth-child(1){height:30%; animation-delay:0s;}
.audio-bars i:nth-child(2){height:65%; animation-delay:.12s;}
.audio-bars i:nth-child(3){height:90%; animation-delay:.28s;}
.audio-bars i:nth-child(4){height:45%; animation-delay:.06s;}
.audio-bars i:nth-child(5){height:75%; animation-delay:.34s;}
.audio-bars i:nth-child(6){height:35%; animation-delay:.2s;}
.audio-bars i:nth-child(7){height:60%; animation-delay:.4s;}
@keyframes eq-idle{0%,100%{transform:scaleY(.55);}50%{transform:scaleY(.85);}}
@keyframes eq{0%,100%{transform:scaleY(.45);}50%{transform:scaleY(1);}}

/* photo trio below story */
.story-trio{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem;}
@media (max-width:700px){.story-trio{grid-template-columns:1fr;}}
.story-trio figure{margin:0;}
.story-trio img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-img);}
.story-trio figcaption{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:.6rem; text-align:center;}

/* travel */
.info-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 3rem;}
@media (max-width:700px){.info-grid{grid-template-columns:1fr;}}
.info-block h4{font-family:var(--sans); font-weight:500; font-size:.95rem; letter-spacing:.03em; margin-bottom:.3rem;}
.info-block .sub{color:var(--ink-faint); font-size:13px;}

/* hotel cards — three equal options */
.hotel-list{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.2rem;}
@media (max-width:900px){.hotel-list{grid-template-columns:1fr;}}
.hotel-card{border:1px solid var(--line); border-radius:var(--radius-img); overflow:hidden; background:var(--white); display:flex; flex-direction:column;}
.hotel-photo{height:170px; background-size:cover; background-position:center;}
.hotel-photo.placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(135deg,var(--bg-b),var(--bg-a)); color:var(--ink-faint);
}
.hotel-photo.placeholder svg{width:26px; height:26px; opacity:.5;}
.hotel-photo.placeholder span{font-size:10px; letter-spacing:.1em; text-transform:uppercase;}
.hotel-body{padding:1.3rem 1.4rem 1.5rem; flex:1; display:flex; flex-direction:column;}
.hotel-body h4{font-family:var(--serif); font-size:1.3rem; margin-bottom:.4rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;}
.hotel-tag{font-family:var(--sans); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:var(--white); padding:.22em .65em; border-radius:20px;}
.hotel-meta{font-size:14px; color:var(--ink-soft); margin-bottom:.8rem;}
.hotel-site-link{font-size:13px; margin-bottom:1rem; display:inline-block; text-decoration:underline; text-underline-offset:3px; color:var(--accent-dark);}
.hotel-body .btn{margin-top:auto; align-self:flex-start;}
.hotel-code{font-size:12.5px; color:var(--ink-faint); margin-top:.7rem; margin-bottom:0;}
.hotel-code strong{color:var(--ink-soft);}

/* things to do */
.subsection{margin-bottom:clamp(2.6rem,5vw,3.6rem);}
.subsection:last-child{margin-bottom:0;}
.subsection-head{margin-bottom:1.4rem; border-bottom:1px solid var(--line); padding-bottom:.9rem;}
.subsection-head h3{margin:0; font-size:1.7rem;}
.card-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem;}
@media (max-width:900px){.card-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.card-grid{grid-template-columns:repeat(2,1fr);}}
.todo-card img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-img); margin-bottom:.7rem;}
.todo-card .photo-placeholder{
  width:100%; aspect-ratio:4/5; border-radius:var(--radius-img); margin-bottom:.7rem;
  background:linear-gradient(135deg,var(--bg-b),var(--bg-a));
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint);
}
.todo-card .photo-placeholder svg{width:24px; height:24px; opacity:.5;}
.todo-card h4{font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.3rem;}
.todo-card p{font-size:14px; color:var(--ink-soft); margin:0 0 .5em;}

/* packing / tips */
.tip-columns{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3rem);}
@media (max-width:820px){.tip-columns{grid-template-columns:1fr;}}
.tip-col h3{font-size:1.15rem; margin-bottom:1.1rem;}
.tip-list{list-style:none; margin:0; padding:0;}
.tip-list li{padding:.85rem 0 .85rem 1.1rem; border-bottom:1px solid var(--line); font-size:15px; line-height:1.55; color:var(--ink-soft); position:relative;}
.tip-list li::before{content:""; position:absolute; left:0; top:1.15rem; width:5px; height:5px; border-radius:50%; background:var(--accent-soft);}
.tip-list li:last-child{border-bottom:none;}
.tip-list li strong{color:var(--ink);}

/* FAQ accordion */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:1.3rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--serif); font-size:1.2rem; color:var(--ink);
}
.faq-q .plus{flex:none; width:20px; height:20px; position:relative;}
.faq-q .plus::before,.faq-q .plus::after{content:""; position:absolute; background:var(--accent-dark); top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-q .plus::before{width:14px; height:1.5px;}
.faq-q .plus::after{width:1.5px; height:14px; transition:transform var(--dur-med) var(--ease-in-out);}
.faq-item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-in-out);}
.faq-a p{padding-bottom:1.3rem; margin:0; color:var(--ink-soft); font-size:15.5px; max-width:60ch;}

/* rsvp / registry panes */
.pane{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-img); overflow:hidden; background:var(--white);}
@media (max-width:820px){.pane{grid-template-columns:1fr;}}
.pane-copy{padding:clamp(2.2rem,5vw,3.6rem);}
.pane-media{min-height:260px; background-size:cover; background-position:center;}
.pane-copy .btn{margin-top:1rem; margin-right:.7rem;}
.pane-note{margin-top:1rem; font-size:13.5px; color:var(--ink-soft);}

.page-header{padding:9.5rem 0 3rem; background:var(--bg-b);}
.page-header p.lede{margin-top:.6rem;}

/* footer */
footer{background:var(--accent-dark); color:#C7D2CC; padding:3.2rem 0 2rem;}
.footer-inner{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:2rem;}
.footer-mark{font-family:var(--serif); font-size:1.9rem; font-weight:500; letter-spacing:.14em; color:var(--white); display:flex; align-items:center; gap:.5em;}
.footer-mark .mark-bar{background:var(--white); opacity:.4; height:.9em;}
.footer-note{font-size:13.5px; color:#8FA098; max-width:36ch;}
.footer-links{display:flex; gap:1.6rem; list-style:none; margin:0; padding:0;}
.footer-links a{font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:#C7D2CC; opacity:.85;}
@media (hover:hover) and (pointer:fine){.footer-links a:hover{opacity:1;}}
.footer-bottom{margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12); font-size:11.5px; color:#8FA098; letter-spacing:.05em;}

/* reveal on scroll — staggered per emil's timing rules (30-80ms between items) */
.reveal{opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);}
.reveal.in{opacity:1; transform:translateY(0);}

.band{height:clamp(260px,42vw,480px); background-size:cover; background-position:center; position:relative; border-radius:var(--radius-img);}
.band-caption{position:absolute; left:clamp(1.25rem,4vw,3rem); bottom:1.4rem; color:var(--white); font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.4);}