/* ════════════════════════════════════════════════════════════
   Francesca & Niccolò, 10 · 10 · 2026, Marbella
   Palette + type sampled from the printed letterpress stationery.
   ════════════════════════════════════════════════════════════ */

:root{
  /* Paper, sampled from the invitation cards */
  --paper:        #EFEAE3;
  --paper-warm:   #EAE4DC;
  --paper-tint:   #E7E0D6;
  --card:         #F5F2EC;
  --emboss-hi:    #FFFFFF;
  --emboss-lo:    rgba(150,127,102,.34);

  /* Ink */
  --ink:          #4B4139;
  --ink-soft:     #6E6157;
  --ink-faint:    #8C7F73;
  --terracotta:   #B4673F;
  --terracotta-d: #99542F;
  --rule:         #D6CCBE;
  --rule-soft:    #E0D8CC;

  /* Type */
  --serif:  "Cormorant Garamond", "Times New Roman", serif;
  --body:   "EB Garamond", Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;

  /* Metrics */
  --rail-w: 64px;
  --gutter: clamp(20px, 5vw, 56px);
  --sec-y:  clamp(72px, 11vw, 148px);
  --header-h: 62px;
}

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

/* overlays below set display:grid, which would otherwise beat [hidden] */
[hidden]{ display:none !important; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.02rem + .18vw,18px);
  line-height:1.72;
  overflow-x:hidden;
  /* Deliberately flat: elements that need to punch a hole in a rule
     (the hero monogram badge, the plate captions) paint --paper / --paper-tint
     over it, and any large-scale gradient would show as a seam behind them. */
}

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--card); color:var(--terracotta);
  padding:12px 20px; font-family:var(--serif); letter-spacing:.14em;
  text-transform:uppercase; font-size:.8rem; text-decoration:none;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
}

/* ─────────── Letterpress primitives ─────────── */

/* Debossed (pressed into the paper) */
.deboss{
  text-shadow:
    0 1px 0 var(--emboss-hi),
    0 -1px 1px var(--emboss-lo);
}
/* Raised (stamped up out of the paper) */
.emboss{
  text-shadow:
    0 -1px 0 var(--emboss-hi),
    0 1px 1px var(--emboss-lo);
}

/* The double-rule frame used on every printed card */
.pressed-frame{
  position:relative;
  background:var(--card);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 0 0 2px var(--emboss-hi),
    inset 0 0 0 8px var(--card),
    inset 0 0 0 9px var(--rule-soft),
    0 1px 0 var(--emboss-hi),
    0 18px 40px -28px rgba(102,82,62,.4);
}

/* ─────────── Page-edge debossed vine ─────────── */
.page-rail{
  position:fixed;
  top:0; bottom:0;
  width:var(--rail-w);
  z-index:1;
  pointer-events:none;
  background-image:url("../img/rail-light.svg"), url("../img/rail-dark.svg");
  background-repeat:repeat-y, repeat-y;
  background-position:1px 1px, 0 0;
  background-size:var(--rail-w) 240px, var(--rail-w) 240px;
  opacity:.85;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}
.page-rail--left{ left:0; }
.page-rail--right{ right:0; transform:scaleX(-1); }

@media (max-width: 1100px){ .page-rail{ display:none; } }

/* ─────────── Header ─────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--header-h);
  background:rgba(239,234,227,0);
  transition:background .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}
.site-header.is-stuck{
  background:rgba(241,236,229,.93);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
          backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 var(--rule-soft), 0 10px 30px -24px rgba(102,82,62,.5);
}
.header-inner{
  height:100%;
  max-width:1180px; margin:0 auto;
  padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.header-mono{ display:block; line-height:0; }
.header-mono img{
  width:38px; height:auto;
  opacity:0; transform:translateY(-4px);
  transition:opacity .45s ease, transform .45s ease;
}
.site-header.is-stuck .header-mono img{ opacity:1; transform:none; }

.nav-desktop{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--serif);
  font-size:.83rem; letter-spacing:.2em; text-transform:uppercase;
}
.nav-desktop a{
  color:var(--ink-soft); text-decoration:none;
  padding:.35em .15em; position:relative;
  transition:color .3s ease;
}
.nav-desktop a::after{
  content:""; position:absolute; left:.15em; right:.15em; bottom:.05em;
  height:1px; background:var(--terracotta);
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.nav-desktop a:hover{ color:var(--terracotta); }
.nav-desktop a:hover::after{ transform:scaleX(1); }
.nav-dot{ color:var(--rule); }

.nav-toggle{
  display:none;
  background:none; border:0; padding:10px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle-bars{ display:block; width:24px; }
.nav-toggle-bars i{
  display:block; height:1px; background:var(--ink-soft);
  margin:5px 0; transition:transform .35s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:block; }
  .header-mono img{ opacity:1; transform:none; width:34px; }
}

/* ─────────── Mobile menu ─────────── */
.nav-mobile{
  position:fixed; inset:0; z-index:55;
  background:var(--paper);
  display:grid; place-items:center;
  opacity:0; transition:opacity .4s ease;
}
.nav-mobile.is-open{ opacity:1; }
.nav-mobile-inner{
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
  text-align:center; padding:2rem;
}
.nav-mobile-mono{ width:64px; margin-bottom:.5rem; }
.nav-mobile a{
  font-family:var(--serif); font-weight:400;
  font-size:1.45rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
}
.nav-mobile a:active{ color:var(--terracotta); }
.nav-mobile-date{
  margin-top:1rem; font-family:var(--serif);
  letter-spacing:.34em; font-size:.85rem; color:var(--terracotta);
}

/* ─────────── Buttons ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  padding:.95em 1.9em;
  background:var(--card);
  border:0; cursor:pointer;
  box-shadow:
    inset 0 0 0 1px var(--rule),
    0 1px 0 var(--emboss-hi),
    0 10px 22px -18px rgba(102,82,62,.55);
  transition:color .3s ease, box-shadow .3s ease, transform .3s ease, background .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{
  color:var(--terracotta);
  transform:translateY(-1px);
  box-shadow:
    inset 0 0 0 1px var(--terracotta),
    0 1px 0 var(--emboss-hi),
    0 14px 26px -18px rgba(102,82,62,.55);
}
.btn:active{ transform:translateY(0); }
.btn--solid{
  background:var(--terracotta); color:#FBF7F1;
  box-shadow:inset 0 0 0 1px var(--terracotta-d), 0 12px 24px -18px rgba(120,70,40,.8);
}
.btn--solid:hover{
  background:var(--terracotta-d); color:#FBF7F1;
  box-shadow:inset 0 0 0 1px var(--terracotta-d), 0 16px 28px -18px rgba(120,70,40,.85);
}
.btn--wide{ width:100%; max-width:340px; padding:1.05em 2em; }
.btn--quiet{
  background:transparent; box-shadow:none;
  padding:.7em 0; color:var(--terracotta);
  border-bottom:1px solid var(--rule);
  border-radius:0;
}
.btn--quiet:hover{ transform:none; box-shadow:none; border-bottom-color:var(--terracotta); }

/* ─────────── Layout ─────────── */
.wrap{
  max-width:1120px; margin:0 auto;
  padding-left:var(--gutter); padding-right:var(--gutter);
}
.wrap--narrow{ max-width:760px; }

@media (min-width:1101px){
  .wrap{ padding-left:max(var(--gutter), calc(var(--rail-w) + 20px));
         padding-right:max(var(--gutter), calc(var(--rail-w) + 20px)); }
}

.section{ padding:var(--sec-y) 0; position:relative; z-index:2; }
.section--tinted{
  background:var(--paper-tint);
  box-shadow:inset 0 1px 0 var(--emboss-hi), inset 0 -1px 0 var(--emboss-hi);
}

.eyebrow{
  margin:0 0 .55rem;
  text-align:center;
  font-family:var(--serif);
  font-size:.76rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--terracotta);
}
.section-title{
  margin:0;
  text-align:center;
  overflow-wrap:break-word;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.15rem,7.6vw,4.3rem);
  line-height:1.08;
  color:var(--terracotta);
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.section-sub{
  margin:1.1rem auto 0;
  max-width:44ch; text-align:center;
  color:var(--ink-soft); font-style:italic;
}

.ornament{
  width:150px; height:26px; margin:1.15rem auto .2rem;
  background-image:url("../img/ornament-light.svg"), url("../img/ornament-dark.svg");
  background-repeat:no-repeat, no-repeat;
  background-position:1px 1px, 0 0;
  opacity:.9;
}

/* ─────────── Hero ─────────── */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:calc(var(--header-h) + 40px) var(--gutter) 60px;
  position:relative; z-index:2;
}
.hero-frame{
  width:100%; max-width:720px;
  padding:clamp(34px,6vw,64px) clamp(22px,5vw,58px);
  text-align:center;
  position:relative;
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 0 0 2px var(--emboss-hi),
    inset 0 0 0 9px transparent,
    inset 0 0 0 10px var(--rule-soft);
}
.hero-mono{
  width:clamp(62px,11vw,86px);
  margin:calc(-1 * clamp(34px,6vw,64px) - 0.5em) auto 1.3rem;
  position:relative;
  padding:0 18px;
  background:var(--paper);
}
.hero-names{
  margin:0;
  display:flex; flex-direction:column; align-items:center;
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.9rem,10.5vw,5.4rem);
  line-height:1.06;
  color:var(--terracotta);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.hero-names .amp{
  font-size:.52em;
  margin:.06em 0;
  color:var(--ink-faint);
}

.hero-rule{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:1.5rem auto 1.4rem; max-width:280px;
}
.hero-rule i{
  flex:1; height:1px; background:var(--rule);
  box-shadow:0 1px 0 var(--emboss-hi);
}
.hero-rule span{
  width:5px; height:5px; transform:rotate(45deg);
  background:var(--terracotta); opacity:.65;
}

.hero-date{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,3vw,1.45rem);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink);
}
.hero-place{
  margin:.5rem 0 0;
  font-family:var(--serif);
  font-size:.85rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-faint);
}

.countdown{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(10px,3.5vw,26px);
  margin:2.2rem 0 2.4rem;
}
.cd-unit{ display:flex; flex-direction:column; align-items:center; min-width:64px; }
.cd-num{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,6.4vw,2.9rem); line-height:1;
  color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.cd-label{
  margin-top:.5rem;
  font-family:var(--serif);
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint);
}
.cd-sep{ color:var(--rule); font-size:1.4rem; line-height:1; padding-top:.35rem; }

.hero-actions{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
@media (max-width:520px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
}

.hero-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:1px; height:46px; background:linear-gradient(var(--rule), transparent);
  overflow:hidden;
}
.hero-scroll span{
  position:absolute; inset:0; background:var(--terracotta);
  animation:trickle 2.6s cubic-bezier(.6,.05,.3,1) infinite;
}
@keyframes trickle{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* ─────────── RSVP ─────────── */
.rsvp-panel{ margin-top:2.6rem; position:relative; }
.rsvp-form{
  padding:clamp(26px,5vw,48px);
  background:var(--card);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 0 0 2px var(--emboss-hi),
    inset 0 0 0 8px var(--card),
    inset 0 0 0 9px var(--rule-soft),
    0 22px 48px -34px rgba(102,82,62,.55);
}
.field{ margin-bottom:1.7rem; border:0; padding:0; }
.field:last-of-type{ margin-bottom:1.2rem; }

.field label, .field legend{
  display:block; padding:0;
  margin-bottom:.55rem;
  font-family:var(--serif);
  font-size:.86rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); line-height:1.5;
}
.field .opt{ text-transform:none; letter-spacing:.04em; font-style:italic; color:var(--ink-faint); }

.field input[type="text"],
.field input[type="date"],
.field textarea,
.field select{
  width:100%;
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--rule);
  padding:.6em .1em;
  border-radius:0;
  -webkit-appearance:none; appearance:none;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.field textarea{ resize:vertical; line-height:1.65; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;
  border-bottom-color:var(--terracotta);
  box-shadow:0 1px 0 0 var(--terracotta);
}
.field input[type="date"]{ min-height:2.6em; }

.select-shell{ position:relative; }
.select-shell::after{
  content:""; position:absolute; right:.3em; top:50%;
  width:7px; height:7px; margin-top:-6px;
  border-right:1px solid var(--ink-faint);
  border-bottom:1px solid var(--ink-faint);
  transform:rotate(45deg); pointer-events:none;
}
.field select{ padding-right:2em; cursor:pointer; }

.field--choice legend{ float:none; }
.choice-row{ display:flex; gap:12px; flex-wrap:wrap; }
.choice{
  position:relative; flex:0 0 auto;
  margin:0;
}
.choice input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.choice span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:98px; padding:.62em 1.5em;
  font-family:var(--serif);
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px var(--rule), 0 1px 0 var(--emboss-hi);
  transition:color .3s ease, box-shadow .3s ease, background .3s ease;
}
.choice input:hover + span{ color:var(--terracotta); }
.choice input:checked + span{
  color:#FBF7F1; background:var(--terracotta);
  box-shadow:inset 0 0 0 1px var(--terracotta-d);
}
.choice input:focus-visible + span{ outline:2px solid var(--terracotta); outline-offset:3px; }

.field-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:520px){ .field-pair{ grid-template-columns:1fr; gap:0; } }

.field-error{
  display:none;
  margin:.5rem 0 0; font-size:.86rem; font-style:italic; color:var(--terracotta-d);
}
.field.has-error .field-error{ display:block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-bottom-color:var(--terracotta-d); }

/* Everything below the first question only matters to someone who is coming.
   Hidden until they say so, and while hidden it is taken out of validation. */
.field--ifgoing{ display:none; }
.rsvp-form.is-attending .field--ifgoing{ display:block; }
.rsvp-form.is-attending .field-pair.field--ifgoing{ display:grid; }
.field--attending .choice span{ min-width:150px; }

.field-notice{
  margin:.85rem 0 0; padding:.9rem 1.1rem;
  font-size:.92rem; font-style:italic; color:var(--ink-soft);
  background:var(--paper-warm);
  box-shadow:inset 0 0 0 1px var(--rule-soft);
}

.form-note{
  margin:1.8rem 0 0; padding-top:1.5rem;
  border-top:1px solid var(--rule-soft);
  font-size:.92rem; font-style:italic; color:var(--ink-faint);
  text-align:center;
}
.form-actions{ margin-top:1.9rem; display:flex; justify-content:center; }
.form-fail{
  margin:1rem 0 0; text-align:center;
  font-style:italic; color:var(--terracotta-d);
}

.rsvp-thanks{
  padding:clamp(46px,9vw,86px) clamp(26px,5vw,48px);
  text-align:center;
  background:var(--card);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 0 0 2px var(--emboss-hi),
    inset 0 0 0 8px var(--card),
    inset 0 0 0 9px var(--rule-soft),
    0 22px 48px -34px rgba(102,82,62,.55);
}
.thanks-mono{ width:72px; margin:0 auto 1.6rem; }
.thanks-msg{
  margin:0; font-family:var(--serif);
  font-size:clamp(1.15rem,3.4vw,1.5rem);
  line-height:1.6; color:var(--ink);
}
#rsvpSink{ display:none; width:0; height:0; border:0; }

/* ─────────── Schedule ─────────── */
.day{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);
  align-items:center;
  margin-top:clamp(40px,6vw,72px);
}
.day--reverse .day-plate{ order:2; }
@media (max-width:860px){
  .day{ grid-template-columns:1fr; gap:32px; }
  .day--reverse .day-plate{ order:0; }
}

.plate-frame{
  position:relative;
}
.plate-frame img{
  width:100%;
  display:block;
}

/* The cream mat that used to sit around each letterpress plate.
   Removed at Richie's request 2026-08-24, kept here because he may want it
   back: add the class `plate-frame--matted` alongside `plate-frame` on the
   three day plates in index.html and it returns exactly as it was. */
.plate-frame--matted{
  padding:clamp(16px,2.6vw,26px);
  background:var(--card);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 0 0 2px var(--emboss-hi),
    0 24px 52px -36px rgba(102,82,62,.6);
}
.plate-frame--matted img{
  box-shadow:0 0 0 1px var(--rule-soft);
}

/* Matted, it straddles the mat's edge the way the printed cards set it. */
.plate-frame--matted .plate-script{
  position:absolute; top:-.68em; left:50%; transform:translateX(-50%);
  display:inline-block;
  margin:0;
  padding:0 .8em;
  background:var(--paper-tint);
}
.plate-script{
  /* Unmatted, the caption sits above the plate: there is no frame edge to
     interrupt, and a background band would punch a hole in the artwork. */
  display:block; text-align:center;
  margin:0 0 .55rem;
  font-family:var(--script);
  font-size:clamp(1.6rem,4vw,2.2rem);
  line-height:1.2;
  color:var(--terracotta);
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

.day-copy{ text-align:left; }
@media (max-width:860px){ .day-copy{ text-align:center; } }

.day-date{
  margin:0 0 .9rem;
  font-family:var(--serif);
  font-size:.78rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--terracotta);
}
.day-title{
  margin:0;
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.1rem,5.4vw,3rem); line-height:1.1;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.day-when{
  margin:.55rem 0 .2rem;
  font-family:var(--serif);
  font-size:1rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);
}
.day-where{
  margin:.3rem 0 0;
  color:var(--ink-soft); line-height:1.7;
}
.map-link{
  display:inline-block; margin-left:.5em;
  font-family:var(--serif);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terracotta); text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
  white-space:nowrap;
}
.map-link:hover{ border-bottom-color:var(--terracotta); }

.day-sub-rule{
  height:1px; width:70px; margin:1.6rem 0;
  background:var(--rule); box-shadow:0 1px 0 var(--emboss-hi);
}
@media (max-width:860px){ .day-sub-rule{ margin-left:auto; margin-right:auto; } }

.dress-tag{
  margin:1.7rem 0 .6rem;
  font-family:var(--serif);
  font-size:.76rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--terracotta);
}
.dress-tag::before{
  content:""; display:block; width:34px; height:1px;
  background:var(--rule); margin:0 0 1rem;
  box-shadow:0 1px 0 var(--emboss-hi);
}
@media (max-width:860px){ .dress-tag::before{ margin-left:auto; margin-right:auto; } }

.dress-note{
  margin:0 0 1.5rem;
  color:var(--ink-soft); font-size:.98rem; line-height:1.72;
}
.dress-note em{
  /* now a heading on its own line above each list, not an inline label */
  display:inline-block; margin-bottom:.3rem;
  font-style:normal; font-family:var(--serif);
  letter-spacing:.14em; text-transform:uppercase;
  font-size:.84rem; color:var(--ink);
}

.day-divider{
  height:26px; margin:clamp(48px,7vw,84px) auto 0; width:150px;
  background-image:url("../img/ornament-light.svg"), url("../img/ornament-dark.svg");
  background-repeat:no-repeat, no-repeat;
  background-position:1px 1px, 0 0;
  opacity:.85;
}

/* ─────────── Hotels ─────────── */
.rate-note{
  margin:.9rem auto 0; max-width:52ch; text-align:center;
  font-size:.94rem; color:var(--ink-soft);
}
.rate-note em{ font-style:italic; color:var(--ink); }

.hotel-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,28px);
  margin-top:clamp(34px,5vw,54px);
}
@media (max-width:760px){ .hotel-grid{ grid-template-columns:1fr; } }

.hotel-card{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(26px,3.6vw,38px) clamp(22px,3vw,32px);
  background:var(--card);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 0 0 2px var(--emboss-hi),
    inset 0 0 0 7px var(--card),
    inset 0 0 0 8px var(--rule-soft),
    0 18px 40px -32px rgba(102,82,62,.55);
}
.hotel-name{
  margin:0 0 .5rem;
  font-family:var(--serif); font-weight:500;
  font-size:.94rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink);
}
.hotel-distance{
  margin:0 0 1rem; padding-bottom:1rem;
  border-bottom:1px solid var(--rule-soft);
  box-shadow:0 1px 0 var(--emboss-hi);
  width:100%;
  font-size:.9rem; font-style:italic; color:var(--terracotta);
}
.hotel-how{
  margin:0 0 1.4rem;
  font-size:.96rem; line-height:1.7; color:var(--ink-soft);
}
.hotel-how a{ color:var(--terracotta); text-decoration:none; border-bottom:1px solid var(--rule); word-break:break-word; }
.hotel-how a:hover{ border-bottom-color:var(--terracotta); }
.hotel-how em{ font-style:italic; color:var(--ink); }
.code{
  font-family:var(--serif); font-weight:600;
  letter-spacing:.22em; color:var(--terracotta);
  background:rgba(180,103,63,.09);
  box-shadow:inset 0 0 0 1px rgba(180,103,63,.25);
  padding:.12em .5em;
  white-space:nowrap;
}
.hotel-card .btn--quiet{ margin-top:auto; }

/* ─────────── Transportation ─────────── */
.transport-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,30px);
  margin-top:2.8rem;
}
@media (max-width:700px){ .transport-grid{ grid-template-columns:1fr; } }

.transport-card{
  padding:clamp(26px,4vw,40px) clamp(22px,3.4vw,34px);
  text-align:center;
  background:var(--card);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 0 0 2px var(--emboss-hi),
    inset 0 0 0 7px var(--card),
    inset 0 0 0 8px var(--rule-soft),
    0 18px 40px -32px rgba(102,82,62,.55);
}
.transport-day{
  display:block; margin-bottom:1rem;
  font-family:var(--script);
  font-size:clamp(1.7rem,4.4vw,2.2rem);
  color:var(--terracotta);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.transport-card p{ margin:0; color:var(--ink-soft); }

.note-line{
  margin:1.6rem auto 0; max-width:52ch; text-align:center;
  font-size:.94rem; font-style:italic; color:var(--ink-faint);
}
.note-line:first-of-type{ margin-top:2.4rem; }

.placeholder{
  font-style:normal;
  color:var(--terracotta-d);
  background:rgba(180,103,63,.1);
  box-shadow:inset 0 0 0 1px rgba(180,103,63,.28);
  padding:.1em .45em;
  white-space:nowrap;
}
.placeholder--block{
  display:table; margin:1.2rem auto 0;
  font-size:.82rem; letter-spacing:.1em;
}

/* ─────────── Registry ─────────── */
.registry-wrap{ text-align:center; }
.registry-oval{
  /* Pre-composited onto --paper-tint so it needs no blend mode (blend would
     break anyway, since .reveal puts a transform on it).
     inset() trims the outermost pixels, where JPEG chroma bleed would
     otherwise leave a faint seam against the flat section colour.
     If you move this section onto a different background, re-flatten the
     image to match; it is currently flattened onto --paper. */
  width:min(360px,74vw); margin:.4rem auto 0;
  clip-path:inset(1.2%);
}
.registry-sub{ margin-top:.4rem; }
.registry-code{
  margin:1.1rem auto 0; max-width:44ch;
  font-size:.9rem; font-style:italic; color:var(--ink-faint);
}

.registry-links{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:1.9rem;
}
@media (max-width:520px){
  .registry-links{ flex-direction:column; align-items:stretch; }
  .registry-links .btn{ width:100%; }
}

/* ─────────── FAQ ─────────── */
.faq-list{ margin-top:2.6rem; }
.faq-item{
  border-bottom:1px solid var(--rule-soft);
  box-shadow:0 1px 0 var(--emboss-hi);
}
.faq-item:first-child{
  border-top:1px solid var(--rule-soft);
}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:1.35rem .2rem;
  cursor:pointer; list-style:none;
  font-family:var(--serif);
  font-size:clamp(1.02rem,2.6vw,1.16rem);
  letter-spacing:.05em;
  color:var(--ink);
  transition:color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--terracotta); }
.faq-item summary i{
  position:relative; flex:0 0 auto; width:13px; height:13px;
}
.faq-item summary i::before,
.faq-item summary i::after{
  content:""; position:absolute; background:var(--terracotta);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.faq-item summary i::before{ left:0; right:0; top:6px; height:1px; }
.faq-item summary i::after{ top:0; bottom:0; left:6px; width:1px; }
.faq-item[open] summary i::after{ transform:rotate(90deg); opacity:0; }
.faq-answer{ padding:0 .2rem 1.55rem; }
.faq-answer p{ margin:0; color:var(--ink-soft); max-width:62ch; }

/* ─────────── Invitation ─────────── */
.invitation-wrap{ text-align:center; }

.suite{
  --suite-card:clamp(132px,20vw,196px);
  margin-top:clamp(26px,4vw,40px);
  max-width:820px; margin-inline:auto;
}

.suite-stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(6px,1.6vw,18px);
}

/* A scroll-snap rail rather than a transformed track: it centres the active
   card without measuring anything, and gives native swiping for free. */
.suite-track{
  display:flex;
  gap:clamp(12px,2vw,22px);
  flex:1 1 auto; min-width:0;
  margin:0; padding:6px 0 14px;
  list-style:none;
  overflow-x:auto;
  /* proximity, not mandatory: mandatory snapping fights a programmatic
     scroll and can drag the rail back mid-animation */
  scroll-snap-type:x proximity;
  /* smoothness is decided per call in JS; leaving it here would make even a
     direct scrollLeft assignment animate, which is surprising */
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-padding-inline:50%;
  padding-inline:calc(50% - var(--suite-card) / 2);
}
.suite-track::-webkit-scrollbar{ display:none; }

.suite-slide{
  flex:0 0 auto;
  scroll-snap-align:center;
  width:var(--suite-card);
  height:clamp(168px,25vh,248px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:.52;
  transform:scale(.9);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.suite-slide.is-current{ opacity:1; transform:scale(1); }
.suite-slide.is-current img{ cursor:zoom-in; }
.suite-slide img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  box-shadow:0 16px 34px -24px rgba(102,82,62,.75);
}
/* The first and last card still need to reach the centre of the rail.
   Done with padding rather than pseudo-element flex items: Safari resolves
   a percentage width on a flex pseudo-element inside a scroll container
   against the scroll width, which collapsed the whole rail on iPad. */

.suite-nav{
  flex:0 0 auto;
  width:clamp(34px,4.4vw,42px); height:clamp(34px,4.4vw,42px);
  display:grid; place-items:center;
  background:var(--card);
  border:0; border-radius:50%;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--rule), 0 1px 0 var(--emboss-hi);
  transition:box-shadow .3s ease, transform .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.suite-nav:hover{ box-shadow:inset 0 0 0 1px var(--terracotta), 0 1px 0 var(--emboss-hi); }
.suite-nav:active{ transform:scale(.94); }
.suite-nav span{
  width:8px; height:8px;
  border-right:1px solid var(--ink-soft);
  border-bottom:1px solid var(--ink-soft);
}
.suite-nav--prev span{ transform:rotate(135deg); margin-left:3px; }
.suite-nav--next span{ transform:rotate(-45deg); margin-right:3px; }
.suite-nav:hover span{ border-color:var(--terracotta); }

.suite-caption{
  margin:.7rem 0 0;
  font-family:var(--serif);
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint);
}

.suite-dots{
  display:flex; justify-content:center; gap:9px;
  margin-top:.9rem;
}
.suite-dot{
  width:6px; height:6px; padding:0;
  background:transparent; border:0; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--ink-faint);
  cursor:pointer;
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.suite-dot:hover{ box-shadow:inset 0 0 0 1px var(--terracotta); }
.suite-dot.is-current{
  background:var(--terracotta);
  box-shadow:inset 0 0 0 1px var(--terracotta);
  transform:scale(1.15);
}

@media (max-width:620px){
  .suite-nav{ display:none; }   /* swipe is the natural gesture here */
}

/* ─────────── Footer ─────────── */
.site-footer{
  padding:clamp(64px,9vw,110px) var(--gutter) clamp(52px,7vw,86px);
  background:var(--paper-warm);
  box-shadow:inset 0 1px 0 var(--emboss-hi);
  position:relative; z-index:2;
}
.footer-frame{ text-align:center; }
.footer-mono{ width:clamp(56px,9vw,74px); margin:0 auto 1.3rem; }
.footer-script{
  margin:0;
  font-family:var(--script);
  font-size:clamp(1.8rem,5.4vw,2.6rem);
  color:var(--terracotta);
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.footer-rule{ margin:1.3rem auto 1.2rem; max-width:200px; }
.footer-date{
  margin:0;
  font-family:var(--serif);
  font-size:.82rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ─────────── Envelope intro ─────────── */
/* Geometry is measured off the real printed envelope:
   flap triangle 965 x 562, body 965 x 640, total 965 x 1202. */
.envelope-intro{
  position:fixed; inset:0; z-index:120;
  background:var(--paper);
  display:grid; place-items:center;
  padding:24px;
  transition:opacity .9s ease, visibility .9s ease;
}
.envelope-intro.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }

.envelope-stage{
  width:min(430px,78vw,44vh);
  display:flex; flex-direction:column; align-items:center;
}

.envelope{
  position:relative;
  width:100%; aspect-ratio:965/1202;
  perspective:1700px;
  cursor:pointer;
  transform:translateY(-23.4%);
  transition:transform 1.25s cubic-bezier(.5,0,.25,1);
}
.envelope-intro.is-open .envelope{ transform:translateY(0); }

/* Interior of the envelope, seen through the front notch. The liner paper
   carries on down inside, so the artwork continues below the flap instead of
   the notch showing blank card. Darkened, because it is in shadow. */
.env-shadow{
  position:absolute; left:0; right:0; top:46.8%; bottom:0;
  z-index:1;
  /* The lower half carries on below the fold. This box runs from 46.8% to
     the bottom, so the half occupies its top 88% to stay the same scale as
     the flap above. Lightly shaded, being inside the envelope. */
  background:
    linear-gradient(180deg, rgba(120,96,70,.20) 0%, rgba(150,124,96,.10) 50%, rgba(190,166,134,.04) 100%),
    url("../img/bottom-half.jpg") no-repeat center top / 116.6% 88%,
    linear-gradient(180deg,#D9CEBD 0%,#E6DCCD 42%,#EDE5DA 100%);
  box-shadow:0 30px 60px -34px rgba(102,82,62,.85);
}

/* liner artwork, occupies exactly the triangle the open flap reveals */
/* The liner is one square drawing supplied as two halves. The envelope is
   965 wide by 1202 tall in its own units, and the flap ends at 46.8%, so the
   square has to be 1125 units tall for the halves to meet exactly on the
   fold. That is 116.6% of the envelope's width, which crops a little off
   each side rather than squashing the church, and both halves are scaled by
   the same amount so the join stays invisible. */
.env-liner{
  position:absolute; left:0; right:0; top:0; height:46.8%;
  z-index:2;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  background:url("../img/top-half.jpg") no-repeat center top / 116.6% 100%;
  opacity:0;
  transition:opacity .5s ease .45s;
}
.envelope-intro.is-open .env-liner{ opacity:1; }

/* front panel of the envelope */
.env-body{
  position:absolute; left:0; right:0; top:46.8%; bottom:0;
  z-index:4;
  background:linear-gradient(163deg,#F1E9DE 0%,#E7DBCB 52%,#DED0BE 100%);
  clip-path:polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
}

/* the flap, hinged along the top edge of the body */
.env-flap{
  position:absolute; left:0; right:0; top:46.8%; height:46.8%;
  z-index:6;
  background:linear-gradient(180deg,#F4EDE4 0%,#EAE0D1 62%,#E2D5C4 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform 1.3s cubic-bezier(.55,-.08,.28,1.04), z-index 0s linear .62s;
  filter:drop-shadow(0 6px 12px rgba(102,82,62,.26));
}
.envelope-intro.is-open .env-flap{ transform:rotateX(-177deg); z-index:0; }

.env-seal{
  position:absolute; left:50%; top:73%; z-index:8;
  width:clamp(48px,12vw,62px);
  transform:translate(-50%,-50%);
  transition:opacity .4s ease, transform .5s ease;
}
.env-seal img{ width:100%; filter:drop-shadow(0 1px 1px rgba(255,255,255,.85)); }
.envelope-intro.is-open .env-seal{ opacity:0; transform:translate(-50%,-50%) scale(.62); }

.env-open{
  /* 23.4% of the envelope's height == 29.1% of the stage's width */
  margin-top:calc(clamp(20px,3.5vh,38px) - 29.1%);
  transition:margin-top 1.25s cubic-bezier(.5,0,.25,1), opacity .35s ease;
  background:none; border:0; cursor:pointer; padding:.6em 0;
  -webkit-tap-highlight-color:transparent;
}
.env-open-label{
  font-family:var(--serif);
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-faint);
  border-bottom:1px solid var(--rule);
  padding-bottom:.5em;
  animation:breathe 3s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.envelope-intro.is-open .env-open{ opacity:0; pointer-events:none; margin-top:clamp(20px,3.5vh,38px); }

.env-skip{
  position:fixed; top:16px; right:18px;
  background:none; border:0; cursor:pointer;
  font-family:var(--serif);
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint);
  padding:10px;
}
.env-skip:hover{ color:var(--terracotta); }

body.intro-locked{ overflow:hidden; }

/* ─────────── Lightbox ─────────── */
.lightbox{
  position:fixed; inset:0; z-index:130;
  background:rgba(58,48,40,.9);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:grid; place-items:center;
  padding:clamp(16px,4vw,48px);
  opacity:0; transition:opacity .35s ease;
}
.lightbox.is-open{ opacity:1; }
.lightbox-figure{
  margin:0;
  width:min(560px,92vw);
  display:block; text-align:center;
}
/* Safari will collapse an image that derives its width from max-height inside
   a flex column, which is why these did not appear on iPhone or iPad. Giving
   the image a definite width and letting object-fit do the letterboxing keeps
   every engine agreeing on its size. */
.lightbox-figure img{
  display:block;
  width:auto; height:auto;
  max-width:100%;
  max-height:72dvh;
  margin:0 auto 14px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
@supports not (height: 1dvh){
  .lightbox-figure img{ max-height:72vh; }
}
.lightbox-figure figcaption{
  font-family:var(--serif);
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:#EFE7DC; text-align:center;
}
.lightbox-close{
  position:fixed; top:14px; right:18px;
  width:46px; height:46px;
  background:none; border:0; cursor:pointer;
  color:#EFE7DC; font-size:2rem; line-height:1;
}

/* ─────────── Scroll reveal ─────────── */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ─────────── Print ─────────── */
@media print{
  .page-rail,.site-header,.nav-mobile,.envelope-intro,.hero-scroll,
  .lightbox,.rsvp-form,.btn{ display:none !important; }
  body{ background:#fff; color:#000; }
  .faq-item[open] .faq-answer, .faq-answer{ display:block !important; }
}

.cd-today{
  margin:0; font-family:var(--script);
  font-size:clamp(1.8rem,5vw,2.6rem);
  color:var(--terracotta);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}