/*!
 * Maya & Ethan — demonstration wedding website
 * Copyright (c) 2026 Naugatuck Web Studio. All rights reserved.
 *
 * A PORTFOLIO PIECE. The couple, the venue, the hotels, the retailers and
 * every date and detail on this page are invented. It exists to show wedding
 * planners and venues what a couple's wedding site can look like.
 *
 * Enquiries: spellframe.app@gmail.com
 */

/* ==========================================================================
   SELF-HOSTED FONTS — no external requests, no third-party dependency.
   Cormorant Garamond (display) + Jost (UI). Both SIL Open Font License.
   Copied from the Karla's Cleaning build; regenerate with selfhost_fonts.py.
   ========================================================================== */
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;
  src:url(fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;
  src:url(fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/cormorant-garamond-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/jost-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --ivory:#FBF8F3;
  --paper:#FFFFFF;
  --ink:#2B2724;
  --muted:#5A5149;          /* was #6E655C (5.4:1) -> 7.3:1 on ivory */
  --sage:#46563F;
  --sage-mid:#6E8065;
  --sage-soft:#B9C4B2;
  --gold:#AE8B55;           /* ORNAMENT ONLY: rules, icons, borders, focus */
  --gold-ink:#8A6B3C;       /* TEXT gold. #AE8B55 as text was 2.99:1 — it failed
                               even the large-text floor. 4.67:1 ivory / 4.94:1 paper. */
  --gold-soft:#E3D2B4;
  --blush:#E7D6CB;
  /* Terracotta accent, added to break up an ivory/sage/gold palette that was
     reading as flat. Ties to the Portugal photographs. --clay passes AA as
     text (5.06 on ivory); --clay-soft is decorative ONLY — it is 2.78, so it
     may never carry information that is not also written somewhere else. */
  --clay:#9C5940;
  --clay-soft:#C08A76;
  --clay-wash:#F2E3DA;
  --line:#E5DDD2;
  --shadow:0 18px 50px -24px rgba(43,39,36,.28);
  --maxw:1120px;
  --nav-h:66px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;          /* was 300 — too thin, it sank into the ground */
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%}
a{color:inherit}

h1,h2,h3,h4{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-weight:500;          /* was 300 — a high-contrast serif needs weight to hold */
  line-height:1.12;
  margin:0;
  letter-spacing:.005em;
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

.eyebrow{
  font-family:'Jost',sans-serif;
  font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-ink);
  margin:0 0 18px;
}
.eyebrow--light{color:var(--gold-soft)}

.lede{font-size:18.5px;color:var(--muted);max-width:60ch;margin:0 auto}

/* ── ornamental rule ─────────────────────────────────────────────────── */
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:26px auto 0}
.rule::before,.rule::after{content:'';height:1px;width:60px;background:linear-gradient(90deg,transparent,var(--gold-soft))}
.rule::after{background:linear-gradient(270deg,transparent,var(--gold-soft))}
.rule svg{width:15px;height:15px;color:var(--gold);flex:none}

/* ==========================================================================
   SCROLL REVEAL
   Content is visible by DEFAULT. It is only hidden once the inline head
   script has proved scripting is on (html.js), and main.js force-reveals
   everything after 2.5s and whenever IntersectionObserver is unavailable.
   A JS error can therefore never leave the page blank.
   ========================================================================== */
.reveal{}
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto;height:var(--nav-h);z-index:60;
  display:flex;align-items:center;
  background:rgba(251,248,243,0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
}
.nav.is-stuck{
  background:rgba(251,248,243,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}

.nav__mark{
  font-family:'Cormorant Garamond',serif;font-size:21px;letter-spacing:.14em;
  text-decoration:none;color:var(--ink);opacity:0;transition:opacity .4s var(--ease);
  white-space:nowrap;
}
.nav.is-stuck .nav__mark{opacity:1}

.nav__links{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav__links a{
  text-decoration:none;font-size:12.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);padding:6px 0;position:relative;transition:color .3s;
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}

.nav__toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:2px;
  padding:9px 12px;cursor:pointer;color:var(--ink);line-height:0;
}
.nav__toggle svg{width:18px;height:18px}

@media (max-width:860px){
  .nav__toggle{display:block}
  .nav__mark{opacity:1}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;gap:0;
    /* Solid, NOT a translucent panel + backdrop-filter. With the blur in
       place the hero showed straight through the open drawer even though the
       background was 98% opaque and the panel was correctly on top. A nav
       drawer has to be readable over whatever it covers — don't reintroduce
       backdrop-filter here. */
    background:var(--ivory);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px -22px rgba(43,39,36,.45);
    padding:6px 24px 22px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease);
  }
  .nav__links.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav__links a{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}
  .nav__links li:last-child a{border-bottom:0}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  text-align:center;padding:calc(var(--nav-h) + 40px) 24px 64px;
  overflow:hidden;
  background:
    radial-gradient(120% 78% at 50% 0%,#FFFDFA 0%,var(--ivory) 52%,#F3EDE3 100%);
}
.hero__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero__botanical{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--sage-soft);opacity:.3;pointer-events:none;  /* was .5 — it competed with the names */
  transition:opacity 1.2s var(--ease);
}
.hero.has-photo .hero__botanical{opacity:.14}

/* Given a background-image by main.js only when assets/photos/hero.jpg exists,
   so the gradient below still stands on its own. */
.hero__photo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.5s var(--ease);
}
.hero.has-photo .hero__photo{opacity:1}

/* Scrim: VERTICAL, not radial like the splash — and that difference is the
   whole point. This photograph is bright hazy sky on top and dark meadow at
   the bottom, and the hero's type spans all of it (nav at the very top, scroll
   cue at the very bottom). A radial veil strong enough for the meadow flattened
   the sky; a single flat one could not get the small muted type past 4.4
   anywhere. Following the image's own structure fixes it.

   Measured per band at 1440x900, 1200x800 and 375x812 — nav, names, meta line,
   countdown, scroll cue. Lowest result 5.48. Re-measure per band if the photo
   changes; a whole-viewport average hides the one line that fails. */
.hero__bg::after{
  content:'';position:absolute;inset:0;
  /* Re-derived when the hero became the out-of-focus couple. That photograph
     is already soft and bright, so the veil can be much lighter at the top
     than the meadow needed — which is the whole point, the couple has to read
     through it. Measured per band at 1440x900 and 390x844; lowest 5.03. */
  background:linear-gradient(180deg,
    rgba(251,248,243,.14) 0%,
    rgba(251,248,243,.28) 24%,
    rgba(251,248,243,.74) 50%,
    rgba(250,246,239,.90) 80%,
    rgba(249,245,237,.93) 100%);
  opacity:0;transition:opacity 1.5s var(--ease);
}
.hero.has-photo .hero__bg::after{opacity:1}
.hero__inner{position:relative;max-width:760px}

.monogram{
  width:96px;height:96px;margin:0 auto 26px;color:var(--gold);
}
.hero__names{
  font-size:clamp(3.2rem,11vw,6.6rem);
  line-height:.98;letter-spacing:-.01em;margin:0;
}
.hero__names .amp{
  display:block;font-style:italic;color:var(--gold);
  font-size:.42em;line-height:1;margin:.16em 0;
}
.hero__meta{
  margin:30px auto 0;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:10px 20px;
  font-size:13.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.hero__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}
@media (max-width:620px){
  /* stacked, so the separators would just dangle at the end of each line */
  .hero__meta{flex-direction:column;gap:9px}
  .hero__meta .dot{display:none}
}

/* countdown */
.countdown{
  margin:42px auto 0;display:flex;justify-content:center;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;max-width:520px;
}
.cd__unit{flex:1;position:relative;padding:0 6px}
.cd__unit + .cd__unit::before{
  content:'';position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line);
}
.cd__num{
  display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2rem,6vw,2.9rem);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.cd__label{
  display:block;margin-top:9px;font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.countdown__done{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.7rem;color:var(--gold);
}

.scrollcue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;
}
.scrollcue span{display:block;width:1px;height:38px;background:linear-gradient(var(--gold-soft),transparent)}
@media (max-height:680px){ .scrollcue{display:none} }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding:clamp(72px,11vw,124px) 0}
.section--paper{background:var(--paper)}
.section--sage{background:var(--sage);color:#F2EFE8}
.section--sage .lede{color:#D6DCCF}
.section--sage h2{color:#fff}
.section__head{text-align:center;margin-bottom:clamp(44px,6vw,68px)}
.section__head h2{font-size:clamp(2.2rem,5.4vw,3.4rem)}
.section__head .rule{margin-top:20px}

/* ── story: an illustrated, alternating timeline ───────────────────────
   Was a thin line with small icons and a stack of text, which read as a list
   rather than a story. Each beat now carries its own photograph, the sides
   alternate, and the year sits behind in a soft terracotta.
   The big year is DECORATIVE (--clay-soft is only 2.78:1) — the same date is
   always written next to it in --clay, which passes. */
.story{position:relative;max-width:1000px;margin-inline:auto}
.story::before{
  content:'';position:absolute;left:50%;top:10px;bottom:10px;width:1px;margin-left:-.5px;
  background:linear-gradient(var(--clay-wash),var(--gold-soft),var(--clay-wash));
}
.beat{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  padding-top:14px;
  gap:clamp(26px,5vw,58px);align-items:center;
  margin-bottom:clamp(38px,6vw,66px);
}
.beat:last-child{margin-bottom:0}
.beat::after{                                  /* the dot on the spine */
  content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--ivory);border:1.5px solid var(--clay-soft);
}
.beat:nth-child(even) .beat__img{order:2}
.beat:nth-child(even) .beat__body{order:1;text-align:right}
.beat:nth-child(even) .beat__year{right:-6px;left:auto}

.beat__img{margin:0;overflow:hidden;border-radius:3px;box-shadow:var(--shadow)}
.beat__img img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.beat:hover .beat__img img{transform:scale(1.035)}

.beat__body{position:relative;padding:8px 0}
.beat__year{
  /* NOT z-index:-1 — .section--paper paints its own background, so a negative
     z-index hid this behind it entirely. Keep it in the same stacking context
     and lift the copy above it instead. */
  position:absolute;top:-46px;left:-4px;
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(3.6rem,7vw,5.4rem);
  line-height:1;color:var(--clay-wash);user-select:none;pointer-events:none;
}
.beat__when,.beat__body h3,.beat__body p{position:relative}
.beat__when{
  display:block;font-size:12px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--clay);margin-bottom:8px;
}
.beat__body h3{font-size:clamp(1.7rem,3.2vw,2.1rem);margin-bottom:10px}
.beat__body p{margin:0;color:var(--muted)}

@media (max-width:760px){
  .story::before{left:22px}
  .beat{grid-template-columns:1fr;gap:16px;margin-bottom:34px;padding-left:52px}
  .beat::after{left:22px;top:26px}
  .beat:nth-child(even) .beat__img{order:0}
  .beat:nth-child(even) .beat__body{order:0;text-align:left}
  .beat:nth-child(even) .beat__year{left:-6px;right:auto}
  .beat__img img{aspect-ratio:4/3}
  /* Decorative only, and there is no room for it beside a stacked photo —
     it ended up tucked behind the image. The date it echoes is still there. */
  .beat__year{display:none}
}

/* ── schedule ────────────────────────────────────────────────────────── */
.sched{max-width:760px;margin-inline:auto;display:grid;gap:0}
.sched__row{
  display:grid;grid-template-columns:104px 44px 1fr;align-items:start;gap:20px;
  padding:26px 0;border-bottom:1px solid rgba(255,255,255,.16);
}
.sched__row:last-child{border-bottom:0}
.sched__time{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.45rem;color:#fff;
  padding-top:4px;font-variant-numeric:tabular-nums;
}
.sched__icon{color:var(--gold-soft);padding-top:6px}
.sched__icon svg{width:26px;height:26px}
.sched__body h3{font-size:1.45rem;color:#fff;margin-bottom:5px}
.sched__body p{margin:0;color:#D6DCCF;font-size:16px}
@media (max-width:560px){
  .sched__row{grid-template-columns:82px 1fr;gap:14px}
  .sched__icon{display:none}
}

/* ── cards (travel) ──────────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:34px 30px;box-shadow:var(--shadow);
}
.card__icon{width:34px;height:34px;color:var(--gold);margin-bottom:18px}
.card h3{font-size:1.6rem;margin-bottom:6px}
.card .card__sub{font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 15px}
.card p{margin:0 0 14px;color:var(--muted);font-size:16px}
.card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.card dt{color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding-top:3px}
.card dd{margin:0;color:var(--ink)}
.code{
  font-family:'Jost',sans-serif;letter-spacing:.14em;background:var(--ivory);
  border:1px solid var(--line);border-radius:2px;padding:2px 9px;font-size:14px;
}

/* ── gallery ─────────────────────────────────────────────────────────── */
.gallery{
  display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:170px;
}
.shot{
  position:relative;overflow:hidden;border-radius:3px;border:0;padding:0;
  cursor:pointer;display:block;width:100%;height:100%;
  background:var(--blush);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.shot:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.shot svg{width:100%;height:100%;display:block}
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 14px 11px;
  background:linear-gradient(transparent,rgba(43,39,36,.55));
  color:#fff;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;opacity:0;transition:opacity .4s var(--ease);
}
.shot:hover .shot__cap,.shot:focus-visible .shot__cap{opacity:1}
.shot--wide{grid-column:span 2}
.shot--tall{grid-row:span 2}
@media (max-width:860px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .shot--wide{grid-column:span 2}
  .shot--tall{grid-row:span 1}
}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:90;display:none;
  place-items:center;padding:24px;
  background:rgba(30,27,24,.9);backdrop-filter:blur(4px);
}
.lb.is-open{display:grid}
.lb__frame{max-width:860px;width:100%;background:var(--paper);border-radius:3px;padding:18px}
.lb__frame svg{width:100%;height:auto;aspect-ratio:3/2;display:block}
.lb__cap{
  margin:14px 2px 2px;font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;gap:12px;
}
.lb__btn{
  /* Full-height strips down each edge. The right-hand one sits UNDER the close
     button, which lives inside its 78px — both are position:absolute, so
     without these z-indexes the later element in the DOM (next) won the click
     and the X advanced the photo instead of closing. */
  position:absolute;top:0;bottom:0;width:78px;background:none;border:0;cursor:pointer;
  color:#fff;display:grid;place-items:center;opacity:.7;transition:opacity .3s;z-index:1;
}
.lb__btn:hover{opacity:1}
.lb__btn svg{width:26px;height:26px}
.lb__prev{left:0}.lb__next{right:0}
.lb__close{
  /* z-index above .lb__btn — see the note there. This must stay above the nav
     strips no matter what order the markup ends up in. */
  position:absolute;top:18px;right:18px;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center;
  z-index:2;
}
.lb__close svg{width:17px;height:17px}
@media (max-width:640px){ .lb__btn{width:50px} }

/* ── registry ────────────────────────────────────────────────────────── */
.reg-note{
  max-width:660px;margin:0 auto clamp(40px,5vw,56px);text-align:center;
  color:var(--muted);
}
.registry{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:20px}
.reg{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:34px 22px;text-decoration:none;color:inherit;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.reg:hover{transform:translateY(-4px);border-color:var(--gold-soft);box-shadow:var(--shadow)}
.reg__icon{width:38px;height:38px;color:var(--gold)}
.reg__name{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.4rem;letter-spacing:.04em;
}
.reg__desc{font-size:14.5px;color:var(--muted);margin:0}
.reg__go{
  font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);
  display:inline-flex;align-items:center;gap:7px;margin-top:2px;
}
.reg__go svg{width:12px;height:12px}

/* ── RSVP ────────────────────────────────────────────────────────────── */
.rsvp{max-width:680px;margin-inline:auto}
.form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.field input,.field select,.field textarea{
  font-family:'Jost',sans-serif;font-size:16px;font-weight:300;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:13px 14px;width:100%;transition:border-color .3s,box-shadow .3s;
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(174,139,85,.13);
}
.field--split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:540px){ .field--split{grid-template-columns:1fr} }

.choice{display:flex;gap:12px;flex-wrap:wrap}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice label{
  flex:1;min-width:132px;text-align:center;cursor:pointer;
  border:1px solid var(--line);border-radius:2px;background:var(--paper);
  padding:14px 12px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);transition:all .3s var(--ease);
}
.choice input:checked + label{
  border-color:var(--gold);background:#FFFBF4;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--gold);
}
.choice input:focus-visible + label{box-shadow:0 0 0 3px rgba(174,139,85,.2)}

.btn{
  font-family:'Jost',sans-serif;font-size:12.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  background:var(--sage);color:#fff;border:1px solid var(--sage);
  border-radius:2px;padding:17px 34px;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{background:#38452F;transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.rsvp__done{
  display:none;text-align:center;background:var(--paper);
  border:1px solid var(--gold-soft);border-radius:3px;padding:44px 30px;
}
.rsvp__done.is-on{display:block}
.rsvp__done svg{width:46px;height:46px;color:var(--gold);margin-bottom:16px}
.rsvp__done h3{font-size:1.9rem;margin-bottom:10px}
.rsvp__done p{color:var(--muted);margin:0 auto;max-width:44ch}
.rsvp__demo{
  margin-top:22px;font-size:12.5px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:16px;
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{max-width:760px;margin-inline:auto;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 2px;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.38rem;
  color:var(--ink);
}
.faq__q:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.faq__q svg{width:15px;height:15px;color:var(--gold);flex:none;transition:transform .35s var(--ease)}
.faq__item.is-open .faq__q svg{transform:rotate(45deg)}
.faq__a{
  overflow:hidden;max-height:0;transition:max-height .4s var(--ease);
}
.faq__a > div{padding:0 2px 24px;color:var(--muted);font-size:16px}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{
  background:#25231F;color:#C4BDB2;text-align:center;
  padding:clamp(56px,8vw,82px) 0 34px;
}
.foot__mono{width:64px;height:64px;color:var(--gold);margin:0 auto 20px}
.foot__names{font-family:'Cormorant Garamond',serif;font-size:2.1rem;color:#F2EFE8}
.foot__date{
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-top:12px;color:#A8A096;
}
.foot__hr{height:1px;background:#3A3730;margin:36px auto;max-width:280px}
.foot__demo{
  font-size:14px;line-height:1.72;max-width:60ch;margin:0 auto;color:#B4ACA1;
}
.foot__demo strong{color:#D8D2C7;font-weight:400}
.foot__by{margin-top:22px;font-size:13px;letter-spacing:.1em;color:#A8A096}
.foot__by a{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid rgba(227,210,180,.3)}
.foot__by a:hover{color:#fff}

/* ── demo toast ──────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
  z-index:95;max-width:min(440px,calc(100vw - 32px));
  background:#25231F;color:#EFEAE1;border:1px solid #3A3730;border-radius:3px;
  padding:15px 20px;font-size:14px;line-height:1.55;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--gold-soft);font-weight:400}

/* ── a11y ────────────────────────────────────────────────────────────── */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--sage);color:#fff;padding:12px 20px;font-size:13px;
}
.skip:focus{left:12px;top:12px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* fieldset legend, styled to match .field label */
.legend{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:0;margin:0 0 8px;
}

/* ==========================================================================
   SOUND TOGGLE
   Ships hidden. main.js only reveals it once it has confirmed the audio file
   is actually there, so the demo never shows a control that does nothing.
   ========================================================================== */
.nav__right{display:flex;align-items:center;gap:10px}
.nav__sound{
  background:none;border:1px solid var(--line);border-radius:50%;
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  color:var(--muted);padding:0;line-height:0;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.nav__sound:hover{color:var(--ink);border-color:var(--gold-soft)}
.nav__sound:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nav__sound svg{width:17px;height:17px}
.nav__sound .ico-on{display:none}
.nav__sound .ico-off{display:block}
.nav__sound[aria-pressed="true"]{color:var(--gold-ink);border-color:var(--gold-soft);background:#FFFBF4}
.nav__sound[aria-pressed="true"] .ico-on{display:block}
.nav__sound[aria-pressed="true"] .ico-off{display:none}
.nav__sound[hidden]{display:none!important}

/* a single soft ring when the chime fires, so the sound has a visual partner */
@keyframes chime-ring{
  0%{box-shadow:0 0 0 0 rgba(174,139,85,.45)}
  100%{box-shadow:0 0 0 14px rgba(174,139,85,0)}
}
.nav__sound.is-ringing{animation:chime-ring .9s var(--ease)}
@media (prefers-reduced-motion:reduce){ .nav__sound.is-ringing{animation:none} }

/* ==========================================================================
   GALLERY — photograph layer over the illustration
   The SVG is the shipped artwork. If a real photograph exists at the tile's
   data-photo path, main.js layers it on top and the illustration becomes the
   fallback. Dropping files into assets/photos/ is therefore zero-config.
   ========================================================================== */
.shot__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;transition:opacity .7s var(--ease);
}
.shot.has-photo .shot__img{opacity:1}
.shot.has-photo .shot__svg{visibility:hidden}
.lb__frame img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
/* An author `display:block` beats the UA stylesheet's [hidden]{display:none},
   so `el.hidden = true` alone did NOT hide the illustration — the lightbox
   drew the SVG and the photograph stacked on top of each other. Any author
   rule that sets display on an element you later toggle with .hidden needs
   this companion. */
.lb__frame svg[hidden],
.lb__frame img[hidden]{display:none!important}

/* ==========================================================================
   WELCOME SPLASH
   Same shape as the RB-12 intro: full-screen overlay, typed title, then the
   rest fades in. Shown once per SESSION, so a guest who comes back to check
   the dress code is not made to sit through it again.
   ========================================================================== */
.welcome{
  position:fixed;inset:0;z-index:120;
  /* flex + margin:auto on the child, NOT place-items:center. Centred grid/flex
     content that is taller than the viewport overflows in BOTH directions and
     the top becomes unreachable — on a phone that ate the title. margin:auto
     centres while still letting the box scroll to its real top. */
  display:flex;align-items:flex-start;justify-content:center;
  padding:28px 24px;
  /* Solid colour UNDER the gradient on purpose. A translucent-looking overlay
     is exactly what went wrong with the nav drawer; a full-screen overlay must
     be opaque no matter how the gradient composites. */
  background-color:var(--ivory);
  background-image:radial-gradient(120% 80% at 50% 0%,#FFFDFA 0%,#FBF8F3 50%,#F1EADE 100%);
  opacity:0;transition:opacity .42s var(--ease);
  overflow-y:auto;
}
.welcome.in{opacity:1}
.welcome[hidden]{display:none!important}

.wc-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wc-botanical{position:absolute;inset:0;width:100%;height:100%;color:var(--sage-soft);opacity:.34;
  transition:opacity 1.2s var(--ease)}

/* The venue photograph. Only ever given a background-image by main.js, and
   only when the file is actually there. */
.wc-photo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.4s var(--ease);
}
.welcome.has-photo .wc-photo{opacity:1;animation:wc-drift 26s ease-out forwards}
@keyframes wc-drift{from{transform:scale(1.06)}to{transform:scale(1.14)}}

/* Scrim, painted OVER the photograph (::after on the same parent wins paint
   order). RADIAL, not a flat wash: heavy where the type sits, light at the
   edges so the venue is actually visible.

   The numbers are measured, not taste. Sampling the darkest 1% of 01-mill.jpg
   behind the text band, a flat .90 scrim put the gold eyebrow at 3.86:1 —
   under AA. At .93 over that same pixel it clears, and the corners can drop to
   ~.58 because no text goes there. Re-measure if the venue photo is replaced
   with a darker one. */
.wc-bg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(118% 88% at 50% 44%,
    rgba(251,248,243,.860) 0%,
    rgba(251,248,243,.820) 40%,
    rgba(249,245,238,.700) 70%,
    rgba(245,240,231,.540) 100%);
  opacity:0;transition:opacity 1.4s var(--ease);
}
.welcome.has-photo .wc-bg::after{opacity:1}
/* with a photograph behind it the line art becomes clutter */
.welcome.has-photo .wc-botanical{opacity:.12}

@media (prefers-reduced-motion:reduce){
  .welcome.has-photo .wc-photo{animation:none;transform:none}
  .wc-photo{transition:none}
}

.wc-inner{position:relative;text-align:center;max-width:820px;width:100%;padding-block:20px;margin:auto}
.wc-mono{width:78px;height:78px;color:var(--gold);margin:0 auto 20px;display:block}

/* Splash gold, darker than the site's --gold-ink because it sits over a
   photograph. Re-derived when the background changed from the mill to the
   walking couple: against THAT image the old #816438 measured 3.86 desktop /
   3.56 phone, and no veil light enough to keep the couple visible could fix
   it — the colour was the problem, not the veil.

   #715831 clears 4.5 on both (4.77 / 4.56) at the veil above, and still reads
   as gold on plain ivory (6.3:1). The phone case is the tighter one: `cover`
   crops a landscape photo to a narrow column there, so it zooms in hard and
   the background behind the type is different from desktop. Measure both. */
.welcome{--gold-splash:#816438}

/* Over the walking-couple photograph the veil has to stay LIGHT or the couple
   disappears — they are a backlit, low-contrast subject and an ivory wash
   erases them. Measured at both 1440x900 and 390x844 (the phone is the tighter
   case: `cover` crops a landscape photo to a narrow column and zooms hard):

     veil .93/.905/.80/.66   couple barely visible
     veil .86/.82/.70/.54    couple reads clearly   <- what ships

   At that lighter veil the type has to carry the contrast instead, so the
   splash darkens its gold AND its muted here. Boosting the photo's own
   contrast was tried and makes it worse — darker figures mean a darker
   worst-case background behind the text. */
.welcome.has-photo{
  --gold-splash:#614C2A;   /* 4.88 desktop / 4.76 phone */
  --muted:#554D45;         /* 4.96 desktop / 4.84 phone */
  /* The site's --clay (#9C5940) measures only 3.21 over this photograph, so
     the splash gets its own darker one. Same hue, same family, passes. */
  --clay:#73422F;          /* 4.93 desktop / 4.81 phone */
}
.wc-eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-splash);margin:0 0 14px;
}
.wc-title{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(2.6rem,8vw,4.6rem);line-height:1.04;margin:0;color:var(--ink);
  min-height:1.1em;
}
.wc-caret{
  display:inline-block;width:2px;height:.82em;margin-left:.06em;
  background:var(--gold);vertical-align:-.06em;animation:wc-blink 1s steps(1,end) infinite;
}
@keyframes wc-blink{50%{opacity:0}}

.wc-rest{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wc-rest.show{opacity:1;transform:none}

.wc-who{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.5rem;
  color:var(--clay);margin:16px 0 0;
}
.wc-body{color:var(--muted);max-width:52ch;margin:14px auto 0;font-size:16.5px}

.wc-nav{
  list-style:none;margin:32px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;text-align:left;
}
.wc-nav li{display:flex;gap:14px;align-items:flex-start}
.wc-badge{
  flex:none;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--gold-soft);background:rgba(255,255,255,.7);
  display:grid;place-items:center;color:var(--gold-splash);
}
.wc-ico{width:19px;height:19px}
.wc-copy b{display:block;font-weight:500;font-size:15px;color:var(--ink);letter-spacing:.01em}
.wc-copy span{display:block;font-size:14.5px;line-height:1.6;color:var(--muted);margin-top:2px}

.wc-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:34px}
.wc-go{
  font-family:'Jost',sans-serif;font-size:12.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  background:var(--sage);color:#fff;border:1px solid var(--sage);
  border-radius:2px;padding:16px 38px;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.wc-go:hover{background:#38452F;transform:translateY(-1px)}
.wc-go:focus-visible,.wc-sound:focus-visible,.wc-skip button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wc-sound{
  font-family:'Jost',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:2px;padding:15px 20px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  transition:color .3s,border-color .3s;
}
.wc-sound:hover{color:var(--gold-ink);border-color:var(--gold-soft)}
.wc-sound svg{width:15px;height:15px}
.wc-sound[hidden]{display:none!important}

.wc-skip{margin:18px 0 0}
.wc-skip button{
  background:none;border:0;cursor:pointer;color:var(--muted);
  font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:lowercase;
  border-bottom:1px solid var(--line);padding:2px 1px;
}
.wc-skip button:hover{color:var(--ink);border-bottom-color:var(--gold)}

@media (max-width:700px){
  .wc-nav{grid-template-columns:1fr;gap:15px}
  .wc-mono{width:62px;height:62px;margin-bottom:14px}
  .wc-who{font-size:1.3rem}
  .wc-actions{flex-direction:column;align-items:stretch}
  .wc-go,.wc-sound{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .welcome{transition:none}
  .wc-rest{transition:none}
  .wc-caret{animation:none;opacity:0}
}

/* ==========================================================================
   MULTI-PAGE EDITIONS (3-page and 7-page)
   Generated by tools/build-editions.py from this same source. These rules are
   inert on the one-page edition, which has no .pagehead and no body.subpage.
   ========================================================================== */

/* A sub-page has no hero for the nav to float over, so the nav has to be solid
   from the first pixel — otherwise the monogram sits at opacity 0 on a page
   that is never scrolled. */
.subpage .nav{
  background:rgba(251,248,243,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.subpage .nav__mark{opacity:1}

.pagehead{
  text-align:center;
  padding:calc(var(--nav-h) + clamp(46px,7vw,78px)) 24px clamp(30px,4vw,44px);
  background:radial-gradient(120% 80% at 50% 0%,#FFFDFA 0%,var(--ivory) 60%,#F4EEE5 100%);
  border-bottom:1px solid var(--line);
}
.pagehead__mono{width:62px;height:62px;color:var(--gold);margin:0 auto 16px;display:block}
.pagehead h1{font-size:clamp(2.3rem,5.6vw,3.5rem);margin:0}
.pagehead .eyebrow{margin-bottom:12px}
.pagehead .rule{margin-top:18px}

/* the first section under a page header does not need its own big top padding */
.pagehead + .section{padding-top:clamp(46px,6vw,70px)}

/* current page in the nav */
.nav__links a.is-active{color:var(--ink)}
.nav__links a.is-active::after{transform:scaleX(1)}

/* ==========================================================================
   TIER 2 / TIER 3 COMPONENTS
   Used only by the 3-page and 7-page editions (tools/sections-plus.html).
   Inert on the one-page edition, which has none of this markup.
   ========================================================================== */

/* --- albums: the gallery grouped, instead of one long roll --------------- */
.album{margin-bottom:clamp(34px,5vw,54px)}
.album:last-child{margin-bottom:0}
.album__head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.album__head h3{font-size:1.65rem;margin:0}
.album__head span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Album and per-event grids override the masonry the one-pager uses: with two
   or three photos a fixed 4-column masonry leaves holes. */
.gallery--album,.gallery--ev{
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  grid-auto-rows:auto;
}
.gallery--album .shot,.gallery--ev .shot{aspect-ratio:3/2;grid-column:auto;grid-row:auto}

/* --- the wedding party -------------------------------------------------- */
.party{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:22px}
.who{
  background:var(--ivory);border:1px solid var(--line);border-radius:3px;
  padding:26px 24px;
}
.who__role{
  display:block;font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px;
}
.who h3{font-size:1.5rem;margin:0 0 8px}
.who p{margin:0;color:var(--muted);font-size:15.5px}

/* --- the weekend, one block per event ----------------------------------- */
.ev{
  display:grid;grid-template-columns:150px 1fr;gap:28px;
  padding:34px 0;border-bottom:1px solid rgba(255,255,255,.16);
}
.ev:last-child{border-bottom:0;padding-bottom:0}
.ev__when{text-align:right;padding-top:5px}
.ev__day{display:block;font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:#fff;line-height:1.1}
.ev__date{display:block;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin-top:4px}
.ev__time{display:block;font-size:13px;letter-spacing:.1em;color:#D6DCCF;margin-top:10px;font-variant-numeric:tabular-nums}
.ev__body h3{font-size:1.7rem;color:#fff;margin:0 0 4px}
.ev__where{font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 12px}
.ev__body > p{color:#D6DCCF;margin:0 0 18px;font-size:16px}
.ev .gallery{margin-top:4px}
.ev .shot__cap{font-size:11px}

@media (max-width:640px){
  .ev{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .ev__when{text-align:left;display:flex;align-items:baseline;gap:12px;padding-top:0}
  .ev__day{font-size:1.4rem}
  .ev__date,.ev__time{margin-top:0}
}

/* ==========================================================================
   PHOTO BANDS + PARTY MEDALLIONS            added 2026-09-20 for the 7-page
   edition. Additive only — new class names, nothing above is touched, so the
   1-page and 3-page editions that share this stylesheet are unaffected.
   ========================================================================== */
.figband{
  margin:0 0 clamp(28px,4vw,46px);
  border-radius:14px;overflow:hidden;position:relative;
  background:linear-gradient(140deg,var(--sage-soft),var(--gold-soft));
  box-shadow:var(--shadow);
}
.figband img{
  display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:3/1;
}
.figband--tall img{aspect-ratio:3/2}
.figband__cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:42px 22px 16px;
  font-family:'Jost',system-ui,sans-serif;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(30,27,24,.72),rgba(30,27,24,0));
  /* white on that scrim measures ≥ 7:1 over the darkest photo band */
}
@media (max-width:640px){
  .figband img{aspect-ratio:2/1}
  .figband__cap{font-size:.68rem;padding:34px 16px 13px}
}

/* the party has no portraits — generating six consistent faces is the one
   thing the photo set deliberately avoids — so each person gets an initial
   medallion cut from the same monogram as the page header. */
.who__mark{
  display:block;width:52px;height:52px;margin:0 0 14px;color:var(--gold);
}
.who__mark circle{opacity:.55}
.who__mark text{
  font-family:'Cormorant Garamond',Georgia,serif;
  fill:var(--gold-ink);
}

/* Portrait upgrade for the wedding party. Same footprint as the medallion it
   replaces, so the cards do not reflow when the photographs arrive. */
.who__photo{
  display:block;width:52px;height:52px;margin:0 0 14px;
  border-radius:50%;object-fit:cover;
  border:1px solid var(--gold);
  background:var(--gold-soft);
}
@media (min-width:720px){
  .who__mark,.who__photo{width:64px;height:64px}
}

/* ==========================================================================
   PAGEMARK — the couple's names, faint, running bottom-to-top up the left
   gutter at the FULL HEIGHT of the viewport. Decorative only: aria-hidden,
   pointer-events:none, unselectable.

   Two constraints fight each other here. To span the height the type has to be
   large; but in vertical-rl a rotated Latin line is as WIDE as its own
   line-height, so a large size also makes the strip fatter — and it must stay
   inside the gutter beside the 1120px content column. Hence a size clamped by
   BOTH vh (to reach top to bottom) and vw (to stay out of the text).
   ========================================================================== */
.pagemark{
  position:fixed;
  left:0;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:clamp(6px,1vw,20px);
  z-index:1;                      /* over the page wash, under the nav + splash */
  writing-mode:vertical-rl;
  transform:rotate(180deg);       /* reading bottom → top */
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  /* reach for the full height, but never wider than the actual gutter:
     (100vw - 1120px)/2 is the space beside the content column. */
  font-size:min(11.5vh, calc((100vw - 1120px)/2 - 26px));
  letter-spacing:.14em;
  line-height:1;
  white-space:nowrap;
  /* gold reads on BOTH the ivory sections and the sage ones; a sage mark would
     vanish the moment the page scrolled onto a sage band */
  color:var(--gold);
  opacity:.26;
  pointer-events:none;
  user-select:none;
}
/* No gutter, no wordmark. Below this the content reaches the edge and the mark
   would be sitting on top of it, which is exactly what it must never do. */
@media (max-width:1280px){ .pagemark{display:none} }
@media print{ .pagemark{display:none} }

/* the one outbound sales link on a demo site — quiet, and last */
.foot__cta{margin:14px 0 0;font-size:13.5px;color:#9A9287}
.foot__cta a{
  color:var(--gold-soft);text-decoration:none;
  border-bottom:1px solid rgba(227,210,180,.35);padding-bottom:1px;
}
.foot__cta a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}

/* Directions button on the travel card. Sits under the parking details; the
   icon is the same car glyph as the card, so it reads as part of it. */
.btn--dir{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:18px;text-decoration:none;
}
.btn--dir svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}