/* ───────── design tokens ───────── */
:root{
  --ivory:        #f6f1e8;
  --ivory-2:      #efe8db;
  --ivory-deep:   #e9e0cf;
  --ink:          #2b2a26;
  --ink-soft:     #3a3832;
  --muted:        #7b766b;
  --rule:         #c9bfa8;

  /* accents (swapped via [data-accent]) */
  --accent:       #6b7f93;   /* dusty blue */
  --accent-soft:  #aebccb;
  --accent-deep:  #4e6378;

  /* fonts (swapped via [data-fontpair]) */
  --f-serif:      "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --f-display:    "Cormorant Garamond", Georgia, serif;
  --f-script:     "Parisienne", "Pinyon Script", cursive;
  --f-sans:       "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw: 1240px;
}

/* accent palettes */
[data-accent="dusty-blue"]  { --accent:#6b7f93; --accent-soft:#aebccb; --accent-deep:#4e6378; }
[data-accent="soft-gold"]   { --accent:#b39256; --accent-soft:#d8c492; --accent-deep:#8a6d38; }
[data-accent="sage"]        { --accent:#7e8b6c; --accent-soft:#b3bda3; --accent-deep:#5f6a50; }
[data-accent="terracotta"]  { --accent:#b4693e; --accent-soft:#d89c7a; --accent-deep:#8c4a26; }
[data-accent="blush"]       { --accent:#b88a8a; --accent-soft:#d8b5b0; --accent-deep:#8c5f5f; }
[data-accent="ink"]         { --accent:#2b2a26; --accent-soft:#7b766b; --accent-deep:#000; }

/* font pairings */
[data-fontpair="cormorant-parisienne"] {
  --f-serif:"Cormorant Garamond", Georgia, serif;
  --f-display:"Cormorant Garamond", Georgia, serif;
  --f-script:"Parisienne", cursive;
}
[data-fontpair="playfair-tangerine"] {
  --f-serif:"EB Garamond", Georgia, serif;
  --f-display:"Playfair Display", Georgia, serif;
  --f-script:"Tangerine", cursive;
}
[data-fontpair="italiana-italianno"] {
  --f-serif:"EB Garamond", Georgia, serif;
  --f-display:"Italiana", Georgia, serif;
  --f-script:"Italianno", cursive;
}
[data-fontpair="cinzel-pinyon"] {
  --f-serif:"EB Garamond", Georgia, serif;
  --f-display:"Cinzel", Georgia, serif;
  --f-script:"Pinyon Script", cursive;
}

*{ box-sizing:border-box }
html, body { margin:0; padding:0; background:var(--ivory); color:var(--ink); }
body{
  font-family: var(--f-serif);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

/* ───────── top nav ───────── */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(246,241,232,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(201,191,168,.5);
}
.topbar-inner{
  max-width: var(--maxw);
  margin:0 auto;
  padding: 18px 36px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.topbar .monogram{
  font-family: var(--f-display);
  font-weight:500;
  font-size:24px;
  letter-spacing:.14em;
  text-align:center;
  color:var(--ink);
}
.topbar .monogram .amp{
  font-family: var(--f-script);
  font-weight:400;
  font-size:30px;
  color:var(--accent);
  letter-spacing:0;
  vertical-align:-2px;
  margin:0 6px;
}
.topbar .date{
  font-family: var(--f-serif);
  font-style:italic;
  font-size:13px;
  letter-spacing:.18em;
  color:var(--muted);
  text-transform: uppercase;
}
.topbar .date.left  { justify-self:start; }
.topbar .date.right { justify-self:end; }

.tabs{
  max-width: var(--maxw);
  margin:0 auto;
  padding: 0 36px 14px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 30px;
}
.tabs a{
  font-family: var(--f-sans);
  font-weight:400;
  font-size:11.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.tabs a:hover{ color:var(--accent-deep); }
.tabs a.active{
  color:var(--accent-deep);
  border-bottom-color: var(--accent);
}

/* hamburger (mobile only) */
.menu-btn{
  display:none;
  appearance:none;
  background:transparent;
  border:none;
  width:36px; height:36px;
  cursor:pointer;
  padding:0;
  position:relative;
  justify-self:end;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn span{
  position:absolute;
  left:7px; right:7px;
  height:1.5px;
  background: var(--ink);
  border-radius:2px;
  transition: transform .25s ease, top .25s ease, opacity .15s ease;
}
.menu-btn span:nth-child(1){ top:12px; }
.menu-btn span:nth-child(2){ top:18px; }
.menu-btn span:nth-child(3){ top:24px; }
.topbar.menu-open .menu-btn span:nth-child(1){ top:18px; transform:rotate(45deg); }
.topbar.menu-open .menu-btn span:nth-child(2){ opacity:0; }
.topbar.menu-open .menu-btn span:nth-child(3){ top:18px; transform:rotate(-45deg); }

/* ───────── hero ───────── */
.hero{
  position:relative;
  height: calc(100vh - 98px);
  min-height: 620px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 40%, #faf5e8 0%, #f3ecdb 55%, #e6dcc3 100%);
}
.hero .vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(120,105,75,.10) 80%, rgba(90,75,50,.16) 100%);
  pointer-events:none;
}
.hero .content{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  color:#fbf5e9;
  padding: 0 24px;
}
.hero .eyebrow{
  font-family: var(--f-sans);
  font-size:12px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color: rgba(251,245,233,.85);
  margin-bottom: 28px;
}
.hero .eyebrow .dot{
  display:inline-block; width:4px; height:4px; border-radius:50%;
  background:currentColor; margin:0 14px; vertical-align:3px;
}
.hero .content{
  color: #2b2a26;
  text-shadow: 0 1px 0 rgba(246,241,232,.6);
}
.hero .eyebrow{ color: rgba(43,42,38,.7) !important; }
.hero .names{
  font-family: var(--f-script);
  font-weight:400;
  font-size: clamp(64px, 9.5vw, 150px);
  line-height:.95;
  letter-spacing:.01em;
  margin: 0;
  color: #2b2a26;
  text-shadow: 0 2px 18px rgba(246,241,232,.75), 0 0 30px rgba(246,241,232,.5);
  max-width: 92vw;
}
.hero .names .amp{
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size:.55em;
  vertical-align:.12em;
  margin: 0 .12em;
  opacity:.95;
}
.hero .sub{
  margin-top: 28px;
  display:flex; align-items:center; justify-content:center; gap:22px;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:400;
}
.hero .sub{ color: #2b2a26; }
.hero .sub .rule{
  flex: 0 0 48px;
  height:1px;
  background: rgba(43,42,38,.5);
}
.hero .scroll{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  font-family: var(--f-sans);
  font-size:10.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color: rgba(43,42,38,.7);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero .scroll::after{
  content:""; width:1px; height:34px; background: rgba(43,42,38,.5);
}

/* Hero layout variants */
[data-hero="split"] .hero{
  display:grid; grid-template-columns: 1fr 1fr;
  height: calc(100vh - 98px); min-height:620px;
}
[data-hero="split"] .hero .photo,
[data-hero="split"] .hero .photo::after,
[data-hero="split"] .hero .vignette{ grid-column:1; position:absolute; }
[data-hero="split"] .hero .photo-wrap{
  position:relative; overflow:hidden; grid-column:1; grid-row:1;
}
[data-hero="split"] .hero .content{
  position:relative; inset:auto; grid-column:2; grid-row:1;
  background: var(--ivory);
  color: var(--ink);
  padding: 0 8%;
}
[data-hero="split"] .hero .content .eyebrow{ color:var(--muted); }
[data-hero="split"] .hero .content .names{ text-shadow:none; color:var(--ink); }
[data-hero="split"] .hero .content .sub{ color:var(--ink); }
[data-hero="split"] .hero .content .sub .rule{ background:var(--rule); }

[data-hero="framed"] .hero{
  padding: 36px;
  background: var(--ivory);
  height: calc(100vh - 98px);
}
[data-hero="framed"] .hero .photo{
  inset: 36px; border: 1px solid rgba(255,255,255,.5);
  outline: 1px solid var(--rule); outline-offset: -8px;
}

/* ───────── sections ───────── */
section{
  padding: 120px 36px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.section-label{
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-align:center;
  margin-bottom: 18px;
}
.section-title{
  font-family: var(--f-display);
  font-weight:400;
  font-size: clamp(40px, 5vw, 72px);
  line-height:1.05;
  text-align:center;
  margin: 0 0 12px;
  letter-spacing:.005em;
}
.section-title .script{
  font-family: var(--f-script);
  font-weight:400;
  color:var(--accent-deep);
}
.section-sub{
  text-align:center;
  font-style: italic;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 56px;
  font-size: 18px;
}
.ornament{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin: 18px auto 48px;
  color: var(--accent);
}
.ornament .rule{ width:80px; height:1px; background:currentColor; opacity:.6; }
.ornament .diamond{
  width:6px; height:6px; background:currentColor; transform: rotate(45deg);
  opacity:.8;
}

/* welcome / intro */
.welcome{ text-align:center; }
.welcome p{
  font-size: 20px;
  line-height:1.7;
  max-width: 680px;
  margin: 0 auto 18px;
  color: var(--ink-soft);
}
.welcome .sig{
  font-family: var(--f-script);
  color: var(--accent-deep);
  font-size: 36px;
  margin-top: 12px;
}

/* schedule */
.schedule-list{
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.sched-row{
  display:grid;
  grid-template-columns: 180px 1fr 180px;
  gap: 24px;
  align-items: baseline;
  padding: 28px 8px;
  border-bottom: 1px solid var(--rule);
}
.sched-row .day{
  font-family: var(--f-sans);
  font-size: 11.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color: var(--accent-deep);
}
.sched-row .what{
  font-family: var(--f-display);
  font-size: 26px;
  line-height:1.15;
}
.sched-row .what em{
  font-family: var(--f-script);
  font-style:normal;
  font-weight:400;
  color: var(--accent-deep);
  font-size: 1.2em;
  margin-right: 4px;
}
.sched-row .what .meta{
  display:block;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  margin-top: 6px;
}
.sched-row .time{
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  text-align: right;
}

/* travel & venue cards */
.cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
}
.card{
  background: var(--ivory-2);
  border: 1px solid var(--rule);
  padding: 0;
  overflow:hidden;
}
.card .ph{
  position:relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, #d8cdb4 0 2px, #e0d6be 2px 14px);
  border-bottom: 1px solid var(--rule);
}
.card .ph .tag{
  position:absolute; left:14px; bottom:14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--ink-soft);
  background: rgba(246,241,232,.85);
  padding: 5px 9px;
  border: 1px solid var(--rule);
}
.card .body{ padding: 32px 32px 36px; }
.card h3{
  font-family: var(--f-display);
  font-weight:400;
  font-size: 30px;
  line-height:1.15;
  margin: 0 0 6px;
}
.card h3 em{
  font-family: var(--f-script);
  font-style:normal;
  color:var(--accent-deep);
  font-weight:400;
  font-size: 1.15em;
}
.card .kicker{
  font-family: var(--f-sans);
  font-size: 10.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: var(--accent-deep);
  margin-bottom: 12px;
}
.card p{
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
  margin: 10px 0 16px;
}
.card .link{
  display:inline-block;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
}
.card .link:hover{ color: var(--ink); }

/* venue full width */
.venue-split{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items:center;
  max-width: 1180px;
  margin: 0 auto;
}
.venue-split .ph{
  position:relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, #d8cdb4 0 2px, #e0d6be 2px 14px);
  border:1px solid var(--rule);
}
.venue-split .ph img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
}
.venue-split .ph .tag{
  position:absolute; left:14px; bottom:14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background: rgba(246,241,232,.85);
  padding:5px 9px;
  border:1px solid var(--rule);
}
.venue-split h3{
  font-family: var(--f-display);
  font-weight:400;
  font-size: clamp(36px, 4vw, 54px);
  line-height:1.05;
  margin: 0 0 8px;
}
.venue-split h3 em{
  font-family: var(--f-script);
  font-style:normal;
  color: var(--accent-deep);
  font-weight:400;
}
.venue-split .place{
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: var(--accent-deep);
  margin-bottom: 22px;
}
.venue-split p{
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.venue-split .meta{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 36px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.venue-split .meta div span{
  display:block;
  font-family: var(--f-sans);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.venue-split .meta div b{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
}

/* things to do grid */
.todo-group{
  margin-top: 96px;
}
.todo-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
}
.todo{
  border:1px solid var(--rule);
  background: var(--ivory-2);
}
.todo .ph{
  position:relative; aspect-ratio: 3/2;
  background: repeating-linear-gradient(135deg, #d8cdb4 0 2px, #e0d6be 2px 14px);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.todo .ph img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.todo .card-link{
  display:inline-block;
  margin-top: 14px;
  font-family: var(--f-sans);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.todo .card-link:hover{
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.todo .ph .tag{
  position:absolute; left:12px; bottom:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing:.16em; text-transform:uppercase;
  background: rgba(246,241,232,.85);
  padding: 4px 8px; border:1px solid var(--rule);
  color:var(--ink-soft);
}
.todo .body{ padding: 20px 22px 24px; }
.todo .kicker{
  font-family: var(--f-sans);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: 6px;
}
.todo h4{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 6px;
}
.todo p{ margin:0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

/* dress code */
.dress{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  max-width: 1100px;
  margin: 0 auto;
  align-items:center;
}
.dress .swatches{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 14px;
}
.dress .swatch{
  aspect-ratio: 3/4;
  border:1px solid var(--rule);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 14px;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(43,42,38,.6);
}
.dress .s1{ background:#efe8db; }
.dress .s2{ background:#d8cdb4; }
.dress .s3{ background:#b3a98f; color:#2b2a26; }
.dress .s4{ background:#6b7f93; color:#fbf5e9; }
.dress .s5{ background:#40495a; color:#fbf5e9; }
.dress .s6{ background:#2b2a26; color:#efe8db; }
.dress h3{
  font-family: var(--f-display);
  font-weight:400;
  font-size: clamp(36px, 4vw, 52px);
  line-height:1.05;
  margin: 0 0 8px;
}
.dress h3 em{
  font-family: var(--f-script);
  font-style:normal;
  color: var(--accent-deep);
  font-weight:400;
}
.dress p{
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.75;
}
.dress .keys{
  margin-top: 20px;
  display:grid; grid-template-columns: repeat(2,1fr);
  gap: 14px 36px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.dress .keys div span{
  display:block;
  font-family: var(--f-sans);
  font-size: 10.5px; letter-spacing:.3em; text-transform:uppercase;
  color: var(--muted); margin-bottom:4px;
}
.dress .keys div b{
  font-family: var(--f-display);
  font-weight:400; font-size:18px; color: var(--ink);
}

/* photos gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 14px;
  max-width: 1240px;
  margin: 0 auto;
}
.gallery .g{
  position:relative;
  background: repeating-linear-gradient(135deg, #d8cdb4 0 2px, #e0d6be 2px 14px);
  border: 1px solid var(--rule);
  overflow:hidden;
}
.gallery .g .tag{
  position:absolute; left:10px; bottom:10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
  background: rgba(246,241,232,.85);
  padding: 3px 7px; border:1px solid var(--rule);
}
.g1{ grid-column: 1/6; grid-row: 1/4; }
.g2{ grid-column: 6/9; grid-row: 1/3; }
.g3{ grid-column: 9/13; grid-row: 1/3; }
.g4{ grid-column: 6/10; grid-row: 3/5; }
.g5{ grid-column: 10/13; grid-row: 3/5; }
.g6{ grid-column: 1/5; grid-row: 4/6; }
.g7{ grid-column: 5/9; grid-row: 5/7; }
.g8{ grid-column: 9/13; grid-row: 5/7; }
.g9{ grid-column: 1/5; grid-row: 6/8; }

/* FAQ */
.faq{
  max-width: 820px; margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.faq details{
  border-bottom: 1px solid var(--rule);
  padding: 22px 6px;
}
.faq summary{
  list-style: none;
  cursor: pointer;
  display:flex; justify-content: space-between; align-items:center;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content: "+";
  font-family: var(--f-display);
  font-size: 28px;
  color: var(--accent-deep);
  margin-left: 16px;
  transition: transform .2s ease;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{
  margin: 14px 0 4px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* travel info (login-ish) */
.info-gate{
  max-width: 560px; margin: 0 auto;
  text-align:center;
  border: 1px solid var(--rule);
  background: var(--ivory-2);
  padding: 56px 44px;
}
.info-gate p{ color: var(--ink-soft); font-size: 17px; line-height:1.7; }
.info-gate .field{
  display:grid; gap: 8px; margin: 28px 0 10px; text-align:left;
}
.info-gate label{
  font-family: var(--f-sans);
  font-size: 10.5px; letter-spacing:.3em; text-transform:uppercase;
  color: var(--accent-deep);
}
.info-gate input{
  font-family: var(--f-serif);
  font-size: 18px;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  padding: 10px 2px;
  outline: none;
  color: var(--ink);
}
.info-gate input:focus{ border-bottom-color: var(--accent); }
.info-gate .btn{
  display:inline-block;
  margin-top: 22px;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  padding: 14px 34px;
  background: var(--accent);
  color: #fbf5e9;
  border:none;
  cursor:pointer;
  transition: background .2s ease;
}
.info-gate .btn:hover{ background: var(--accent-deep); }

/* countdown / marquee strip */
.strip{
  background: var(--ink);
  color: var(--ivory);
  overflow:hidden;
  border-top: 1px solid rgba(201,191,168,.2);
  border-bottom: 1px solid rgba(201,191,168,.2);
  padding: 22px 0;
}
.strip .track{
  display:flex;
  gap: 56px;
  white-space: nowrap;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: .14em;
  animation: slide 38s linear infinite;
}
.strip .track span .dot{
  display:inline-block; width:5px; height:5px; background:var(--accent-soft);
  border-radius:50%; margin: 0 24px; vertical-align:4px;
}
.strip .track .scr{
  font-family: var(--f-script);
  font-style: normal;
  color: var(--accent-soft);
  font-size: 30px;
}
@keyframes slide{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* footer */
footer{
  background: var(--ivory-deep);
  border-top: 1px solid var(--rule);
  padding: 80px 36px 56px;
  text-align:center;
}
footer .mono{
  font-family: var(--f-script);
  font-size: 72px;
  color: var(--accent-deep);
  line-height:1;
}
footer .meta{
  margin-top: 18px;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color: var(--muted);
}
footer .meta .dot{
  display:inline-block; width:4px; height:4px; background:var(--accent);
  border-radius:50%; margin: 0 14px; vertical-align:3px;
}

/* ───────── Direction B (Villa Romantic) overrides ───────── */
[data-direction="B"]{
  --ivory: #f3ecdd;
  --ivory-2: #ebe3d0;
  --ivory-deep: #e1d6bd;
}
[data-direction="B"] .hero .names{
  font-size: clamp(96px, 16vw, 260px);
  line-height:.9;
}
[data-direction="B"] .hero .content{
  align-items:flex-start;
  text-align:left;
  padding-left: 8%;
  padding-right: 40%;
}
[data-direction="B"] .section-title{
  text-align:left;
}
[data-direction="B"] .section-label,
[data-direction="B"] .section-sub{
  text-align:left;
}
[data-direction="B"] .ornament{ justify-content:flex-start; margin-left:0; }
[data-direction="B"] .welcome{ text-align:left; max-width: 820px; margin-left: 0; }
[data-direction="B"] .welcome p{ margin-left:0; }
[data-direction="B"] .sched-row{
  grid-template-columns: 60px 1fr 160px;
}
[data-direction="B"] .sched-row .day{
  font-family: var(--f-script);
  font-size: 42px;
  letter-spacing:0;
  text-transform:none;
  color: var(--accent-deep);
  line-height:1;
}

/* responsive */
@media (max-width: 1100px){
  .topbar-inner{ padding: 16px 24px; gap: 12px; }
  .topbar .date{ font-size: 11px; letter-spacing:.16em; }
  .topbar .monogram{ font-size: 20px; }
  .tabs{ gap: 22px; }
}
@media (max-width: 900px){
  .topbar-inner{
    grid-template-columns: 36px 1fr 36px;
    padding: 12px 16px;
    gap: 10px;
  }
  .topbar .date{ display:none; }
  .topbar .monogram{
    grid-column: 2;
    font-size: 18px;
    letter-spacing: .12em;
  }
  .topbar .monogram .amp{ font-size: 22px; }
  .menu-btn{ display:block; grid-column: 3; }

  .tabs{
    display: none;
    padding: 0;
    border-top: 1px solid rgba(201,191,168,.4);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .topbar.menu-open .tabs{
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .topbar.menu-open .tabs a{
    padding: 16px 22px;
    font-size: 12px;
    letter-spacing: .26em;
    border-bottom: 1px solid rgba(201,191,168,.25);
    text-align: left;
  }
  .topbar.menu-open .tabs a.active{
    border-bottom-color: var(--accent);
    color: var(--accent-deep);
    background: rgba(246,241,232,.6);
  }

  section{ padding: 72px 20px; }
  .cards{ grid-template-columns: 1fr; }
  .venue-split{ grid-template-columns: 1fr; gap: 32px; }
  .todo-grid{ grid-template-columns: 1fr; }
  .todo-group{ margin-top: 56px; }
  .dress{ grid-template-columns: 1fr; gap: 32px; }
  .gallery{ grid-template-columns: repeat(6, 1fr); grid-auto-rows: 80px; }
  .g1{ grid-column: 1/7; grid-row: 1/3; }
  .g2{ grid-column: 1/4; grid-row: 3/4; }
  .g3{ grid-column: 4/7; grid-row: 3/4; }
  .g4{ grid-column: 1/4; grid-row: 4/5; }
  .g5{ grid-column: 4/7; grid-row: 4/5; }
  .g6{ grid-column: 1/7; grid-row: 5/7; }
  .g7, .g8, .g9{ display:none; }
  .sched-row{ grid-template-columns: 1fr; gap: 6px; }
  .sched-row .time{ text-align:left; }
  [data-hero="split"] .hero{ grid-template-columns: 1fr; }
  [data-hero="split"] .hero .content{ padding: 40px 24px; }

  .faq summary{ font-size: 18px; }
  footer{ padding: 60px 22px 44px; }
  footer .mono{ font-size: 56px; }
  footer .meta{ font-size: 10px; letter-spacing: .22em; }
  footer .meta .dot{ margin: 0 8px; }
}
@media (max-width: 520px){
  section{ padding: 54px 16px; }
  .welcome p{ font-size: 17px; line-height: 1.65; }
  .section-title{ font-size: clamp(30px, 9vw, 44px); }
  .section-sub{ font-size: 16px; }
  .faq summary{ font-size: 16px; }
  .faq details{ padding: 18px 4px; }
  .info-gate{ padding: 40px 22px; }
  .sched-row .what{ font-size: 22px; }
  footer{ padding: 48px 20px 36px; }
  footer .mono{ font-size: 48px; }
}