/* ============ FREIGHTDISP PRO - SELF-HOSTED ============ */
@font-face{font-family:'FreightDisp Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url('../font/FreightDispProBook-Regular.woff2') format('woff2'),
      url('../font/FreightDispProBook-Regular.woff') format('woff')}
@font-face{font-family:'FreightDisp Pro';font-style:italic;font-weight:400;font-display:swap;
  src:url('../font/FreightDispProBook-Italic.woff2') format('woff2'),
      url('../font/FreightDispProBook-Italic.woff') format('woff')}
@font-face{font-family:'FreightDisp Pro';font-style:normal;font-weight:500;font-display:swap;
  src:url('../font/FreightDispProMedium-Regular.woff2') format('woff2'),
      url('../font/FreightDispProMedium-Regular.woff') format('woff')}
@font-face{font-family:'FreightDisp Pro';font-style:italic;font-weight:500;font-display:swap;
  src:url('../font/FreightDispProMedium-Italic.woff2') format('woff2'),
      url('../font/FreightDispProMedium-Italic.woff') format('woff')}
@font-face{font-family:'FreightDisp Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('../font/FreightDispProSemibold-Regular.woff2') format('woff2'),
      url('../font/FreightDispProSemibold-Regular.woff') format('woff')}
@font-face{font-family:'FreightDisp Pro';font-style:normal;font-weight:700;font-display:swap;
  src:url('../font/FreightDispProBold-Regular.woff2') format('woff2'),
      url('../font/FreightDispProBold-Regular.woff') format('woff')}

/* ============ LORA - SELF-HOSTED ============
   The reading font. FreightDisp is a display serif, drawn for 100px
   headlines: high contrast, tight spacing, small details that vanish at
   reading size. That is why the body copy was hard work at 18px.

   Lora is its text counterpart - a serif drawn for body copy on screen,
   with lower contrast, more open counters and a warm calligraphic flick
   to the terminals. It carries every paragraph, label, list and menu;
   FreightDisp is kept for display type only - the names, the section
   headings, the card titles, the pull quote. The page stays a serif
   setting throughout, which is the point: this is a wedding, not a
   dashboard.

   One variable file covers weights 400-700, so this costs a single 37KB
   request. Same self-hosted rule as the rest of the site: no Google
   Fonts link, nothing fetched from a third party, works with no internet.
   Open Font Licence. */
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../font/Lora-Variable.woff2') format('woff2')}

/* ---- and the same treatment for Lora ----
   Georgia leads here rather than Constantia: measured against Lora it is
   the closer match (1.7% out on width, against Constantia's 5.6%) and it
   is the one serif present on Windows and macOS alike, so a single
   measured family covers nearly every guest. Nothing unmeasurable is
   guessed at.

   Georgia Bold is far wider against its roman than Lora's semibold is
   against Lora's, so <strong> gets its own face and its own number -
   without the split, bold text in the notes and info boxes would jump
   when Lora arrived.

   These numbers come from laying real sentences out in the DOM, not from
   canvas measureText. Canvas ignores the kerning and shaping the layout
   engine actually applies, and its figures were 3-4% out - enough to move
   a line break. Re-measure the same way if the typeface ever changes. */
@font-face{font-family:'EF Text';src:local('Georgia');font-weight:400 550;font-style:normal;
  size-adjust:105.48%;ascent-override:95.8%;descent-override:25.6%;line-gap-override:0%}
@font-face{font-family:'EF Text';src:local('Georgia Bold');font-weight:551 900;font-style:normal;
  size-adjust:92.45%;ascent-override:109.2%;descent-override:29.2%;line-gap-override:0%}

/* ============ METRIC-MATCHED FALLBACKS ============
   FreightDisp is a large download and font-display:swap means the page
   paints in a system serif first and re-flows when the real font lands.
   Measured against FreightDisp, untouched Constantia sets the same
   paragraph 8% taller and the same headline 14% wider - that reflow is
   the jump you see on a cold load.

   So each system serif gets a face of its own here, scaled by size-adjust
   until its advance widths match FreightDisp's, with the ascent and
   descent overridden to Freight's own (0.98em / 0.27em) so line boxes come
   out the same height too. The overrides are divided by size-adjust
   because the browser applies them before it scales.

   Constantia is the Windows serif and the closer match to Freight, so it
   leads; Georgia backs it up and is present on Windows and macOS alike.
   Only fonts that could be measured on this machine are listed - a
   guessed size-adjust would reintroduce the very shift this removes.
   Text now holds its position when the real font arrives; all that
   changes is the shape of the letters.

   The italics carry their own size-adjust: Freight's italic is a good
   deal narrower against its roman than either system italic is against
   theirs, so reusing the upright number left the ampersands re-wrapping.

   Values measured in-browser, not guessed. If the typeface is ever
   changed, re-measure - a stale size-adjust is worse than none. */
@font-face{font-family:'EF Fallback Win';src:local('Constantia');font-weight:100 650;font-style:normal;
  size-adjust:91.74%;ascent-override:106.8%;descent-override:29.4%;line-gap-override:0%}
@font-face{font-family:'EF Fallback Win';src:local('Constantia Italic'),local('Constantia');font-weight:100 650;font-style:italic;
  size-adjust:89.12%;ascent-override:110.0%;descent-override:29.7%;line-gap-override:0%}
@font-face{font-family:'EF Fallback Any';src:local('Georgia');font-weight:100 650;font-style:normal;
  size-adjust:88.71%;ascent-override:110.5%;descent-override:30.4%;line-gap-override:0%}
@font-face{font-family:'EF Fallback Any';src:local('Georgia Italic'),local('Georgia');font-weight:100 650;font-style:italic;
  size-adjust:82.67%;ascent-override:118.5%;descent-override:32.1%;line-gap-override:0%}
/* <strong> asks for 700, and Freight has a true bold. Left in the 100-650
   range above, the browser would fake the bold off the regular and set it
   12% too narrow, so the real system bolds get faces and numbers of their own. */
@font-face{font-family:'EF Fallback Win';src:local('Constantia Bold');font-weight:651 1000;font-style:normal;
  size-adjust:91.39%;ascent-override:105.0%;descent-override:33.9%;line-gap-override:0%}
@font-face{font-family:'EF Fallback Any';src:local('Georgia Bold');font-weight:651 1000;font-style:normal;
  size-adjust:81.50%;ascent-override:117.8%;descent-override:38.0%;line-gap-override:0%}

/* ============ GLOBAL ============ */
:root{
  /* --f is the display serif, --fb the reading sans. Anything that is not
     explicitly given --f below is body text and gets --fb. */
  --f:'FreightDisp Pro','FreightDisplay Pro','Freight Display Pro','EF Fallback Win','EF Fallback Any',Constantia,'Palatino Linotype',Palatino,'Iowan Old Style',Georgia,serif;
  --fb:'Lora','EF Text',Georgia,Constantia,'Palatino Linotype',Palatino,serif;
  --ink:#2B2820;--ink-2:#3E392C;--ink-3:#494233;--mute:#5C5443;
  --gold:#A5813F;--gold-d:#8A6825;--gold-l:#C9B583;
  --paper:#F5F2EB;--paper-2:#F0EDE1;--paper-3:#F1EADA;--white:#FFFDF8;
  --line:#E3DCCE;--line-2:#EAE3D5;--line-3:#E3D7BC;
}
*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body{background:var(--paper);color:var(--ink);font-family:var(--fb);font-weight:400;font-size:18px;line-height:1.7;padding-top:var(--bar-h);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 20px;z-index:200}
.skip:focus{left:12px;top:12px}

/* FreightDisp Pro defaults to old-style figures, which are right for
   running text but sit low against capitals - switch to lining figures
   in the uppercase settings, and in anything you'd actually dial. */
.ef-lang button,.ef-footlang button,.ef-drawer-lang button,
.m-hero .kick,.m-hero .date,.m-hero .venue,.m-kicker,.m-glance .what,
.m-ev .tag,.m-card .k,
.m-ibox .ph,table.m-emg td:last-child{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}

/* ============ LANGUAGE ============ */
body[data-lang="en"] .fr{display:none !important}
body[data-lang="fr"] .en{display:none !important}

/* ============ THE HOUSE UNDERLINE ============
   One wipe, one timing, everywhere a menu item underlines itself: the rule
   grows from the left on a single shared curve. Lifted from the Frosted
   Pixel house style so the two sites move the same way.

   It is painted as a background gradient rather than a border or
   text-decoration, because only a background's width is animatable.
   background-origin:content-box is what keeps the rule the width of the
   words rather than the width of the padded hit area, so the top menu's
   9px/13px padding stays clickable without the rule running out under it.
   --ul-drop then pushes the rule off the content box into that padding,
   landing it the same distance below the text in the bar and the footer.

   --ul-c lets a context recolour the rule without restating the mechanics;
   over the dark hero and in the dark footer it goes to the lighter gold. */
:root{--ul-dur:.3s;--ul-ease:cubic-bezier(.2,.7,.25,1);--ul-h:1.5px;--ul-drop:5px;--ul-c:var(--gold)}
.ef-foot nav a{
  background-image:linear-gradient(var(--ul-c),var(--ul-c));
  background-repeat:no-repeat;background-origin:content-box;
  background-position:0 calc(100% + var(--ul-drop));
  background-size:0 var(--ul-h);
  transition:color var(--ul-dur) var(--ul-ease),background-color var(--ul-dur) var(--ul-ease),background-size var(--ul-dur) var(--ul-ease)}
/* the current page keeps the rule drawn; hover draws it on anything else,
   so one mark means "you are here" and "you are about to go here" */
.ef-foot nav a.on{background-size:100% var(--ul-h)}@media(hover:hover){.ef-foot nav a:hover{background-size:100% var(--ul-h)}}
@media(prefers-reduced-motion:reduce){
  .ef-foot nav a{transition:none}
}

/* ---- display type keeps the serif ----
   Everything else inherits the sans from body. Kept as a single list so
   it is obvious at a glance which side of the line any element is on;
   add a selector here to move it back to FreightDisp. */
.ef-brand .nm,
.m-hero h1,
h2,
.m-glance .day,
.m-ev h3,
.m-opt h3,
.m-card h3,
.m-ibox h3,
.ef-foot .names{font-family:var(--f)}

/* ============ FIXED HEADER BAR ============
   A full-width bar that lifts into a floating glass pill once you scroll
   past 80px (JS only toggles .is-scrolled). Three zones on a true centre
   line: the monogram and names, the page menu, and the actions.

   The menu is a quiet capsule with a single sliding thumb that rests on
   the page you are on and glides to whichever link you point at - one
   moving mark in place of six separate underlines. A hairline along the
   bottom edge fills with gold as you read down the page. */
:root{--bar-h:68px}
.ef-bar{position:fixed;top:0;left:50%;width:100%;transform:translateX(-50%);z-index:150;padding:0 28px;overflow:hidden;
  background:rgba(247,244,236,.9);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border-bottom:0;
  transition:top .4s var(--ul-ease),width .4s var(--ul-ease),padding .4s var(--ul-ease),background .35s ease,border-radius .4s var(--ul-ease),box-shadow .4s ease,border-color .35s ease}
.ef-bar-in{max-width:1240px;margin:0 auto;height:var(--bar-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.ef-bar.is-scrolled{top:12px;width:min(1180px,calc(100% - 28px));padding:0 20px;background:rgba(247,244,236,.84);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border-bottom-color:transparent;border-radius:22px;
  box-shadow:0 1px 0 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(43,40,32,.07),0 14px 38px -14px rgba(60,48,25,.28),0 3px 10px -4px rgba(60,48,25,.10)}
.ef-bar.is-scrolled .ef-bar-in{height:60px}
.ef-progress{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:linear-gradient(90deg,var(--gold-l),var(--gold));transform-origin:0 50%;transform:scaleX(0);pointer-events:none;opacity:.9}

/* Home, at the top of the page: the bar sits over the hero photo -
   transparent, light foreground. */
body.on-home{padding-top:0}
body.on-home .ef-bar:not(.is-scrolled){background:linear-gradient(180deg,rgba(24,20,12,.34),rgba(24,20,12,0));-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
body.on-home .ef-bar:not(.is-scrolled) .nm{color:#fff;text-shadow:0 1px 12px rgba(20,16,8,.4)}
body.on-home .ef-bar:not(.is-scrolled) .nm em{color:#EBD9AB}
body.on-home .ef-bar:not(.is-scrolled) .ef-mono{color:#fff;border-color:rgba(235,217,171,.7);background:rgba(255,255,255,.06)}
body.on-home .ef-bar:not(.is-scrolled) .ef-mono i{color:#EBD9AB}
body.on-home .ef-bar:not(.is-scrolled) .ef-nav{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.on-home .ef-bar:not(.is-scrolled) .ef-nav a{color:rgba(255,255,255,.88)}
body.on-home .ef-bar:not(.is-scrolled) .ef-nav a.on{color:#fff}@media(hover:hover){body.on-home .ef-bar:not(.is-scrolled) .ef-nav a:hover{color:#fff}}
body.on-home .ef-bar:not(.is-scrolled) .ef-nav-thumb{background:rgba(255,255,255,.2);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
body.on-home .ef-bar:not(.is-scrolled) .ef-lang{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
body.on-home .ef-bar:not(.is-scrolled) .ef-lang::before{background:rgba(255,255,255,.22);box-shadow:none}
body.on-home .ef-bar:not(.is-scrolled) .ef-lang button{color:rgba(255,255,255,.75)}
body.on-home .ef-bar:not(.is-scrolled) .ef-lang button[aria-pressed="true"]{color:#fff}
body.on-home .ef-bar:not(.is-scrolled) .ef-burger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
body.on-home .ef-bar:not(.is-scrolled) .ef-burger span{background:#fff}
body.on-home .ef-bar:not(.is-scrolled) .ef-cta{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);color:#fff;box-shadow:none}
@media(hover:hover){body.on-home .ef-bar:not(.is-scrolled) .ef-cta:hover{background:rgba(255,255,255,.28);border-color:#fff}}

/* brand: a ring monogram, then the names */
.ef-brand{justify-self:start;display:flex;align-items:center;gap:12px;flex:none}
.ef-mono{width:36px;height:36px;border-radius:50%;border:1px solid rgba(165,129,63,.55);display:inline-flex;align-items:center;justify-content:center;gap:1px;
  font-family:var(--f);font-size:12.5px;font-weight:500;line-height:1;color:var(--ink);background:rgba(255,253,248,.6);
  transition:border-color .3s,background .3s,transform .5s var(--ul-ease)}
.ef-mono i{font-style:italic;color:var(--gold);font-size:.92em;margin:0 .5px}
@media(hover:hover){.ef-brand:hover .ef-mono{border-color:var(--gold);transform:rotate(-6deg)}}
.ef-brand .nm{font-size:20px;font-weight:600;white-space:nowrap;color:var(--ink);line-height:1}
.ef-brand .nm em{font-style:italic;font-weight:500;color:var(--gold);padding:0 2px}

/* menu capsule */
.ef-nav{position:relative;display:flex;align-items:center;gap:1px;padding:4px;border-radius:100px;
  background:rgba(43,40,32,.035);border:1px solid var(--line);transition:background .3s,border-color .3s}
.ef-nav a{position:relative;z-index:1;font-size:14.5px;font-weight:500;letter-spacing:.005em;color:var(--ink-3);padding:7px 14px;border-radius:100px;white-space:nowrap;transition:color .25s}
.ef-nav a.on{color:var(--ink)}@media(hover:hover){.ef-nav a:hover{color:var(--ink)}}
.ef-nav a.on{font-weight:600}
.ef-nav-thumb{position:absolute;z-index:0;left:0;top:4px;bottom:4px;width:0;border-radius:100px;background:var(--white);
  box-shadow:0 0 0 1px rgba(43,40,32,.07),0 1px 2px rgba(60,48,25,.10),0 4px 10px -4px rgba(60,48,25,.14);
  transition:transform .42s var(--ul-ease),width .42s var(--ul-ease),opacity .25s,background .3s;pointer-events:none}

.ef-right{justify-self:end;display:flex;align-items:center;gap:12px;flex:none}

/* ---- RSVP button ----
   The one thing on the bar we want people to act on, so it is a filled
   button rather than a seventh link - and it stays on the bar at every
   width, including the phone, where the rest of the menu folds into the
   drawer. The arrow nudges forward on hover. */
.ef-cta{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;letter-spacing:.06em;
  padding:10px 17px 10px 20px;border-radius:100px;background:var(--gold);color:#FDFBF6;border:1px solid var(--gold-d);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 6px 14px -6px rgba(138,104,37,.55);
  white-space:nowrap;transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .25s var(--ul-ease)}
.ef-cta .ar{width:13px;height:9px;flex:none;transition:transform .3s var(--ul-ease)}
@media(hover:hover){.ef-cta:hover{background:var(--gold-d);color:#fff;transform:translateY(-1px)}}
@media(hover:hover){.ef-cta:hover .ar{transform:translateX(3px)}}
.ef-cta.on{background:transparent;color:var(--gold-d);border-color:var(--gold);box-shadow:none}

/* EN | FR as a small segmented switch with a sliding thumb */
.ef-lang{position:relative;display:flex;align-items:center;padding:3px;border-radius:100px;border:1px solid var(--line-3);background:rgba(43,40,32,.03);transition:background .3s,border-color .3s}
.ef-lang::before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:100px;background:var(--white);
  box-shadow:0 0 0 1px rgba(43,40,32,.07),0 1px 2px rgba(60,48,25,.12);transition:transform .35s var(--ul-ease),background .3s}
body[data-lang="fr"] .ef-lang::before{transform:translateX(100%)}
.ef-lang button{position:relative;z-index:1;min-width:38px;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--mute);padding:6px 10px;border-radius:100px;transition:color .25s}
@media(hover:hover){.ef-lang button:hover{color:var(--ink)}}
.ef-lang button[aria-pressed="true"]{color:var(--ink)}
.ef-lang .sep{display:none}
.ef-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;border:1px solid var(--line-3);border-radius:50%;background:var(--white);flex:none;transition:background .2s}
.ef-burger span{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .28s ease,opacity .2s}
body.drawer-open .ef-burger span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
body.drawer-open .ef-burger span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}

/* ============ MOBILE DRAWER ============ */
.ef-backdrop{position:fixed;inset:0;background:rgba(30,26,18,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:180}
body.drawer-open .ef-backdrop{opacity:1;pointer-events:auto}
.ef-drawer{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--paper);z-index:190;transform:translateX(100%);transition:transform .38s var(--ul-ease);display:flex;flex-direction:column;padding:22px 24px 28px;box-shadow:-16px 0 44px -12px rgba(30,26,18,.3);overflow-y:auto;border-radius:22px 0 0 22px}
body.drawer-open .ef-drawer{transform:none}
.ef-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 6px 18px}
.ef-drawer-mark svg{display:block;width:40px;height:12px;fill:var(--gold);opacity:.8}
.ef-drawer-x{width:38px;height:38px;border:1px solid var(--line-3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-3);background:var(--white);transition:transform .3s var(--ul-ease)}
@media(hover:hover){.ef-drawer-x:hover{transform:rotate(90deg)}}
.ef-drawer-x svg{width:14px;height:14px}
.ef-drawer-nav{display:flex;flex-direction:column;gap:2px;padding:6px 0 20px;flex:1;border-top:1px solid var(--line)}
.ef-drawer-nav a{text-align:left;font-family:var(--f);font-size:25px;font-weight:500;line-height:1.2;padding:14px 12px;border-radius:12px;color:var(--ink);display:flex;align-items:baseline;gap:16px;transition:background .25s,color .25s}
@media(hover:hover){.ef-drawer-nav a:hover{background:rgba(43,40,32,.045)}}
.ef-drawer-nav a .no{font-family:var(--fb);font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--gold);flex:none;font-variant-numeric:lining-nums;min-width:20px}
.ef-drawer-nav a.on{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px var(--line-2),0 6px 16px -10px rgba(90,75,45,.4)}
.ef-drawer-foot .lbl{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 6px 12px}
.ef-drawer-lang{display:flex;gap:6px;padding:4px;border:1px solid var(--line-3);border-radius:100px;background:rgba(43,40,32,.03)}
.ef-drawer-lang button{flex:1;font-size:15.5px;font-weight:500;padding:11px;border-radius:100px;color:var(--ink-3);transition:background .25s,color .25s,box-shadow .25s}
.ef-drawer-lang button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px rgba(43,40,32,.07),0 1px 3px rgba(60,48,25,.14)}

/* ============ HERO ============ */
.m-hero{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1000px;overflow:hidden}
.m-hero img{width:100%;height:100%;object-fit:cover;object-position:42% 22%}
.m-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,26,18,.42) 0%,rgba(30,26,18,.2) 36%,rgba(30,26,18,.3) 62%,rgba(30,26,18,.66) 100%)}
.m-hero .txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#FDFBF6;padding:0 34px;text-shadow:0 1px 14px rgba(20,16,8,.45)}
.m-hero .kick{font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin-bottom:22px;color:#F5EED9}
.m-hero h1{font-weight:500;font-size:clamp(50px,8.4vw,104px);line-height:1.02;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.m-hero h1 .amp{font-style:italic;font-weight:400;color:#EBD9AB;font-size:.78em;padding:0 8px}
.m-hero .rule{display:flex;align-items:center;gap:12px;margin:28px 0;color:#EBD9AB}
.m-hero .rule::before,.m-hero .rule::after{content:'';width:56px;height:1px;background:#EBD9AB}
.m-hero .rule svg{width:40px;height:12px;fill:currentColor;flex:none}
.m-hero .date{font-size:20px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.m-hero .venue{font-size:17px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-top:14px;color:#EEE6CE;line-height:1.6}

/* Interior pages open with a gold thread dropping from the bar */
.m-open{padding-top:44px}

/* ============ LAYOUT ============ */
/* Alternating bands so each page reads as distinct zones rather than
   one uninterrupted sheet of cream. */
.band-a{background:var(--paper)}
.band-b{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-c{background:var(--paper-3);border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-3)}
.m-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.m-section{padding:78px 0}
.m-kicker{font-size:15.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-d);text-align:center;margin-bottom:14px}
h2{font-weight:600;font-size:clamp(33px,4.2vw,48px);text-align:center;line-height:1.1}
.m-lede{max-width:700px;margin:28px auto 0;text-align:center;font-size:20px;line-height:1.78;color:var(--ink-2)}
.m-lede + .m-lede{margin-top:16px}
.m-flower{height:170px;width:220px;margin:36px auto 0}
.bq-div{background-image:var(--bouquet);background-repeat:no-repeat;background-position:center bottom;background-size:contain}

/* ============ HOME ============ */
.m-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.m-strip .fr8{position:relative;padding:10px;background:#fff;border:1px solid var(--line-2);box-shadow:0 8px 24px rgba(90,75,45,.08)}
.m-strip img{height:310px;width:100%;object-fit:cover}
.m-strip .cap{text-align:center;font-size:17px;font-weight:500;letter-spacing:.03em;color:var(--ink-3);padding:14px 4px 4px}
.m-glance{display:grid;grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto;gap:0;margin-top:56px;border:1px solid var(--line);background:var(--white);box-shadow:0 10px 30px rgba(90,75,45,.07)}
.m-glance>div{padding:38px 26px;text-align:center;border-right:1px solid var(--line);position:relative}
.m-glance>div:last-child{border-right:none}
.m-glance .day{font-size:28px;font-weight:600;color:var(--gold);line-height:1.2}
.m-glance .what{font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin-top:12px;color:var(--ink)}
.m-glance .when{font-size:17.5px;font-weight:400;color:var(--ink-3);margin-top:10px;line-height:1.6}

/* ============ ITINERARY ============ */
/* Alternating timeline. A grey track runs down the centre; a gold fill
   follows the reader down the page, and each event lifts into full
   contrast as its marker passes. Dimming is only applied once JS adds
   .live, so without JS every event stays fully legible. */
.m-time{position:relative;max-width:1000px;margin:0 auto;padding:10px 0 4px}
.m-time .track{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line-3);transform:translateX(-50%)}
.m-time .fill{position:absolute;left:50%;top:0;width:2px;height:0;background:var(--gold);transform:translateX(-50%);transition:height .12s linear}
.m-evs{position:relative}
.m-ev{position:relative;width:calc(50% - 48px);padding-bottom:62px}
.m-ev:nth-child(odd){text-align:right}
.m-ev:nth-child(even){margin-left:calc(50% + 48px)}
.m-ev:last-child{padding-bottom:0}
.m-ev .dot{position:absolute;top:7px;width:13px;height:13px;border-radius:50%;background:var(--paper-2);border:2px solid var(--line-3);transition:background .45s ease,border-color .45s ease,transform .45s ease}
.m-ev:nth-child(odd) .dot{right:-54.5px}
.m-ev:nth-child(even) .dot{left:-54.5px}
.m-time.live .m-ev{opacity:.38;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.m-time.live .m-ev.on{opacity:1;transform:none}
.m-time.live .m-ev.on .dot{background:var(--gold);border-color:var(--gold);transform:scale(1.12)}
.m-ev .t{font-size:15.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-d);line-height:1.5}
.m-ev h3{font-weight:600;font-size:30px;margin-top:7px;line-height:1.15}
.m-ev p{font-size:18px;font-weight:400;line-height:1.72;color:var(--ink-3);margin-top:10px}
.m-ev .tag{display:inline-block;font-size:13.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-d);border:1px solid #D9C9A4;padding:5px 12px;border-radius:100px;margin-top:10px;background:#FDFBF6}
.m-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:820px;margin:0 auto}
.m-duo .fr8{padding:10px;background:#fff;border:1px solid var(--line-2);box-shadow:0 8px 24px rgba(90,75,45,.08)}
.m-duo img{height:280px;width:100%;object-fit:cover}

/* ============ TRAVEL ============ */
.m-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:0}
.m-opt{background:#fff;border:1px solid var(--line-2);box-shadow:0 10px 28px rgba(90,75,45,.07)}
.m-opt img{height:190px;width:100%;object-fit:cover}
.m-opt .bd{padding:26px}
.m-opt .num{font-size:13.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-d)}
.m-opt h3{font-weight:600;font-size:26px;margin-top:4px}
.m-opt p{font-size:18px;font-weight:400;line-height:1.72;color:var(--ink-3);margin-top:10px}
.m-opt ol{margin:12px 0 0 18px;font-size:18px;font-weight:400;line-height:1.78;color:var(--ink-3)}
.m-opt ol li{padding:3px 0}
.m-note{max-width:700px;margin:0 auto;background:var(--white);border:1px solid var(--line-3);border-left:3px solid var(--gold);padding:28px 32px;font-size:18px;font-weight:400;line-height:1.72;color:var(--ink-2);box-shadow:0 8px 24px rgba(90,75,45,.06)}
.m-note strong{font-weight:600}

/* ============ STAY / EXPLORE ============ */
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:0}
.m-card{background:#fff;border:1px solid var(--line-2);box-shadow:0 10px 28px rgba(90,75,45,.07)}
.m-card img{height:220px;width:100%;object-fit:cover}
.m-card .bd{padding:24px 26px 28px}
.m-card .k{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-d)}
.m-card h3{font-weight:600;font-size:25px;margin-top:6px}
.m-card p{font-size:18px;font-weight:400;line-height:1.72;color:var(--ink-3);margin-top:9px}
.m-card ul{list-style:none;margin-top:10px}
.m-card ul li{font-size:18px;font-weight:400;color:var(--ink-3);padding:7px 0;border-bottom:1px dotted var(--line)}
.m-card ul li:last-child{border-bottom:none}

/* ============ INFO ============ */
.m-info{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:0}
.m-ibox{background:#fff;border:1px solid var(--line-2);padding:32px 34px;box-shadow:0 10px 28px rgba(90,75,45,.07)}
.m-ibox h3{font-weight:600;font-size:25px;padding-bottom:12px;border-bottom:1px solid var(--line-2);margin-bottom:14px}
.m-ibox p,.m-ibox li{font-size:18px;font-weight:400;line-height:1.78;color:var(--ink-2)}
.m-ibox strong{font-weight:600}
.m-ibox ul{list-style:none}
.m-ibox ul li{padding:8px 0;border-bottom:1px dotted var(--line)}
.m-ibox ul li:last-child{border:none}
.m-ibox .ph{color:var(--gold-d);white-space:nowrap}
table.m-emg{width:100%;border-collapse:collapse;font-size:18px;font-weight:400}
table.m-emg td{padding:10px 4px;border-bottom:1px dotted var(--line);color:var(--ink-2)}
table.m-emg td:last-child{text-align:right;font-size:24px;font-weight:500;color:var(--gold-d)}

/* ============ RSVP ============
   Text on the left, the reply form on the right. See rsvp.html for the
   steps to make the form live. */
.m-todo-pill,.m-form .todo{font-size:13.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-d);
  border:1px dashed #D9C9A4;padding:5px 12px;border-radius:100px;display:inline-block;background:#FDFBF6;margin-bottom:18px}

@media(max-width:1100px){
  .ef-nav{display:none}
  .ef-burger{display:flex}
  .ef-bar-in{grid-template-columns:1fr auto}
  .ef-bar{padding:0 18px}
}
@media(max-width:860px){
  :root{--bar-h:62px}
  .m-strip,.m-glance,.m-opts,.m-cards,.m-info,.m-duo{grid-template-columns:1fr}
  .m-glance>div{border-right:none;border-bottom:1px solid var(--line)}
  .m-glance>div:last-child{border-bottom:none}
  .m-time{max-width:520px}
  .m-time .track,.m-time .fill{left:7px;transform:none}
  .m-ev,.m-ev:nth-child(even){width:auto;margin-left:40px;text-align:left;padding-bottom:46px}
  .m-ev:nth-child(odd){text-align:left}
  .m-ev:nth-child(odd) .dot,.m-ev:nth-child(even) .dot{left:-39.5px;right:auto}
  .m-ev h3{font-size:26px}
  .m-section{padding:62px 0}
  .m-open{padding-top:28px}
  .m-hero{min-height:520px}
  .m-strip img{height:260px}
}
@media(max-width:480px){
  .ef-brand .nm{font-size:17px}
  .ef-lang{display:none} /* language lives in the drawer on small phones */
  /* the RSVP button stays - it just gets out of the brand's way */
  .ef-cta{font-size:12.5px;padding:9px 14px}
}

/* ============ FLORAL ARTWORK (from the E&F save-the-date) ============ */
:root{
--bouquet:url('../images/bouquet.webp');
}


/* ============ SMOOTH SCROLL ============ */
html{scroll-behavior:smooth}
/* No cross-document view transition (removed 2026-10-26). Chrome snapshots the
   old page for the cross-fade, and that snapshot sometimes caught the hero or
   cover photo mid-redraw, so the previous page visibly flashed again just after
   a click. Without it the browser holds the old page until the new one has
   painted, then swaps in one step - and the navbar is identical on every page,
   so it still looks fixed in place. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ============ REVEAL ON SCROLL (JS adds .rv, then .in) ============ */
.rv{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}

/* ============ HOVER LIFTS ============ */
@media(hover:hover){
.m-opt,.m-card,.m-ibox,.m-strip .fr8,.m-duo .fr8{transition:transform .35s ease,box-shadow .35s ease}
.m-opt:hover,.m-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(90,75,45,.15)}
.m-strip .fr8:hover,.m-duo .fr8:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(90,75,45,.13)}
.m-ibox:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(90,75,45,.11)}
.imgc{overflow:hidden}
.imgc img{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.m-card:hover .imgc img,.m-opt:hover .imgc img,.fr8:hover .imgc img{transform:scale(1.045)}
}

/* ============ HERO SETTLE ============ */
@media(prefers-reduced-motion:no-preference){
.m-hero img{transform:scale(1.06);animation:heroSettle 2.6s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes heroSettle{to{transform:scale(1)}}
}

/* ============ SITE FOOTER ============ */
.ef-foot{background:#241F16;color:#EFE9DA;padding:78px 24px 42px;text-align:center}
/* one ornament for the whole site: the same thin rule and diamond that
   sits under the names in the hero. It replaces the laurel wreath that
   used to head the hero, the drawer and every footer. */
.ef-foot > svg{display:block;width:44px;height:13px;fill:#C9B583;margin:0 auto 22px;opacity:.9}
.ef-foot .names{font-size:35px;font-weight:600;color:#F6F0E1}
.ef-foot .names em{font-style:italic;font-weight:500;color:#D3B676;padding:0 3px}
.ef-foot .when{margin-top:14px;font-size:15.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#CDC3A9;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;line-height:1.7}
.ef-foot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;margin-top:38px}
.ef-foot nav a{font-size:14.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#CDC3A9;padding:6px 2px;--ul-c:#C9B583}
@media(hover:hover){.ef-foot nav a:hover{color:#fff}}
.ef-foot nav a.on{color:#EBD9AB}
.ef-foot .langrow{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:30px}
.ef-foot .langrow button{font-size:16.5px;font-weight:400;color:#CDC3A9;padding:4px 2px;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
@media(hover:hover){.ef-foot .langrow button:hover{color:#fff}}
.ef-foot .langrow button[aria-pressed="true"]{color:#F6F0E1;border-bottom-color:#A5813F}
.ef-foot .langrow .dot{color:#8A7B5C}
.ef-foot .fine{margin-top:42px;padding-top:24px;border-top:1px solid rgba(201,181,131,.22);font-size:14px;font-weight:400;color:#A79C82;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
/* photo credit required by the hero image licence - quiet, but present */
.ef-foot .credit{margin-top:10px;font-size:12px;font-weight:400;color:#8A7F67;line-height:1.6}
.ef-foot .credit a{color:#A79C82;text-decoration:underline;text-underline-offset:2px}
@media(hover:hover){.ef-foot .credit a:hover{color:#CDC3A9}}

/* ============ MAISON ============
   The chosen design, folded in from the three-way preview.
   Cream and gold, editorial: a wide jump from heading to body,
   a drop cap opening each page, rules either side of every
   section label, and photographs held in a mount rather than
   sat flat on the paper. */
.m-card,.m-opt,.m-ibox,.m-strip .fr8,.m-duo .fr8,.m-glance,.m-note,.m-rsvp{
  transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s cubic-bezier(.2,.7,.25,1),border-color .4s ease}
.imgc{overflow:hidden;position:relative}
/* a hairline inside the picture, the way a mount sits inside a frame */
.m-strip .imgc::after,.m-duo .imgc::after,.m-card .imgc::after,.m-opt .imgc::after{
  content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,253,248,.22);pointer-events:none}
/* the kicker gets rules either side, so every section opens on a mark */
.m-kicker{display:flex;align-items:center;justify-content:center;gap:16px}
.m-kicker::before,.m-kicker::after{content:"";height:1px;width:36px;background:currentColor;opacity:.45}

:root{--paper:#F7F4EC;--paper-2:#F1EDE1;--paper-3:#EFE9D9;--white:#FFFDF9;
  --line:#E4DCCB;--line-2:#EDE6D6;--line-3:#DCCFB2}
.m-section{padding:96px 0}
h2{font-size:clamp(34px,4.4vw,52px);line-height:1.06;letter-spacing:-.012em}
.m-kicker{font-size:13px;color:var(--gold-d)}
.m-strip .fr8,.m-duo .fr8{padding:14px;background:var(--white);
  border:1px solid var(--line-3);box-shadow:0 16px 40px -18px rgba(90,75,45,.34)}
.m-card,.m-opt,.m-ibox{
  border:1px solid var(--line-2);box-shadow:0 18px 44px -24px rgba(90,75,45,.4)}
@media(hover:hover){.m-card:hover,.m-opt:hover,.m-ibox:hover{
  box-shadow:0 26px 60px -26px rgba(90,75,45,.5);border-color:var(--line-3)}}
.m-note{border-left-width:2px;background:var(--white);
  box-shadow:0 16px 40px -22px rgba(90,75,45,.35)}
.m-hero h1{font-size:clamp(54px,9vw,116px)}
.ef-foot{background:#241F16}

@media(max-width:860px){
  .m-section{padding:64px 0}
  }

/* ============ REFINEMENT ============
   The finishing layer: the small decisions that make a page feel looked
   after rather than assembled. Hairline borders, one soft radius, layered
   shadows that read as light rather than outline, callouts that carry a
   mark, and type that wraps with some care. Everything stays cream, gold
   and serif - warmth first. */
::selection{background:rgba(165,129,63,.26);color:var(--ink)}
h2,.m-hero h1{text-wrap:balance}
.m-lede,.m-ev p,.m-card p,.m-opt p,.m-ibox p,.m-note{text-wrap:pretty}
html{-webkit-text-size-adjust:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* hero: the picture sits in a <picture> now, and the veil is a little
   deeper through the middle so the names hold against ivy and shutters */
.m-hero picture{display:block;width:100%;height:100%}
/* a blurred 32px preview (set inline on .m-hero) holds the space until the
   photo arrives, so the hero never flashes empty; same crops as the photo */
.m-hero{background:var(--lq-d) 50% 38%/cover no-repeat}
@media(max-width:760px){.m-hero{background:var(--lq-m) 36% 50%/cover no-repeat}}
.m-hero img{object-position:50% 38%}
.m-hero .veil{background:
  radial-gradient(ellipse 62% 52% at 50% 50%,rgba(24,20,12,.34),rgba(24,20,12,0) 72%),
  linear-gradient(180deg,rgba(24,20,12,.5) 0%,rgba(24,20,12,.18) 34%,rgba(24,20,12,.26) 62%,rgba(24,20,12,.7) 100%)}
@media(max-width:760px){.m-hero img{object-position:36% 50%}}

/* one soft radius, used everywhere */
.m-card,.m-opt,.m-ibox,.m-glance,.m-rsvp{border-radius:12px;overflow:hidden}
.m-strip .fr8,.m-duo .fr8{border-radius:12px}
.imgc{border-radius:6px}
.m-card .imgc,.m-opt .imgc{border-radius:0}
.m-ev .tag{border-radius:100px}
.m-glance>div:first-child{border-radius:12px 0 0 12px}

/* callouts carry a mark, the way a margin note would */
.m-note{display:grid;grid-template-columns:36px 1fr;gap:18px;align-items:start;max-width:720px;
  padding:24px 28px 24px 24px;border:1px solid var(--line-3);border-left:1px solid var(--line-3);border-radius:12px;
  background:linear-gradient(0deg,rgba(201,181,131,.11),rgba(201,181,131,.11)),var(--white);
  box-shadow:0 14px 34px -22px rgba(90,75,45,.35)}
.m-note::before{content:'';width:36px;height:36px;border-radius:50%;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l4.2 6.5L8 14.5 3.8 8z' fill='%23A5813F'/%3E%3C/svg%3E") center/15px no-repeat;
  box-shadow:0 0 0 1px var(--line-3),0 2px 6px -2px rgba(90,75,45,.25)}
.m-note strong{font-weight:600}

/* home: three photographs, set like a spread rather than a row of stamps */
.m-strip{grid-template-columns:1.5fr 1fr 1fr;gap:18px;align-items:start}
.m-strip .fr8{padding:10px}
.m-strip img{height:400px}
.m-strip .fr8:nth-child(1) img{object-position:50% 50%}
.m-strip .fr8:nth-child(2){margin-top:36px}
.m-strip .fr8:nth-child(2) img{object-position:50% 62%}
.m-strip .fr8:nth-child(3) img{object-position:50% 50%}
.m-strip .cap{font-size:15.5px;letter-spacing:.01em;color:var(--mute);padding:14px 4px 4px}
@media(max-width:860px){
  .m-strip{grid-template-columns:1fr}
  .m-strip .fr8:nth-child(2){margin-top:0}
  .m-strip img{height:300px}
}

/* footer: a hairline of gold across the top, and the language switch
   matched to the one in the bar */
.ef-foot{position:relative}
.ef-foot::before{content:'';position:absolute;top:0;left:50%;width:min(520px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(201,181,131,.75),transparent)}
.ef-foot .langrow{gap:4px;padding:4px;border:1px solid rgba(201,181,131,.28);border-radius:100px;width:max-content;margin:30px auto 0}
.ef-foot .langrow .dot{display:none}
.ef-foot .langrow button{padding:6px 16px;border:0;border-radius:100px;font-size:15px}
.ef-foot .langrow button[aria-pressed="true"]{background:rgba(255,255,255,.1);color:#F6F0E1;border-bottom-color:transparent}

/* ============ HERO LEGIBILITY ============
   The photograph is busy - lattice, ivy, white shutters - so the type
   needs more than a light veil. Three things work together: an even
   darkening over the whole picture, a soft pool of shadow centred behind
   the names, and a tight shadow on every line of text so each letter keeps
   its own edge. Secondary lines go up a weight and a size. */
.m-hero .veil{background:
  radial-gradient(ellipse 70% 58% at 50% 50%,rgba(18,14,8,.56),rgba(18,14,8,.3) 55%,rgba(18,14,8,0) 82%),
  linear-gradient(180deg,rgba(18,14,8,.55) 0%,rgba(18,14,8,.34) 40%,rgba(18,14,8,.4) 66%,rgba(18,14,8,.78) 100%)}
.m-hero .txt{text-shadow:0 1px 2px rgba(10,7,3,.55),0 2px 22px rgba(10,7,3,.6)}
.m-hero h1{text-shadow:0 2px 3px rgba(10,7,3,.45),0 4px 40px rgba(10,7,3,.7)}
.m-hero .kick{font-size:16px;font-weight:600;color:#FBF4E0}
.m-hero .date{font-size:21px;font-weight:600;color:#fff}
.m-hero .venue{font-size:17.5px;font-weight:600;color:#FBF4E0}
.m-hero h1 .amp{color:#F3E2B3}

/* ============ CHARACTER ============
   Page covers, a fuller itinerary timeline, a little paper in the
   background and hover states that answer the cursor. Same cream, gold
   and serif as before - this layer only adds things to look at. */

/* --- a photograph under every page title, with a place-name tag --- */
.m-cover{position:relative;max-width:1000px;margin:56px auto 0;height:clamp(210px,32vw,360px);border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px var(--line-3),0 28px 56px -30px rgba(70,55,28,.55)}
.m-cover .imgc{position:absolute;inset:0;border-radius:0}
.m-cover img{width:100%;height:100%;object-fit:cover;display:block}
.m-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,20,12,0) 55%,rgba(24,20,12,.38) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,253,248,.2)}
.m-cover figcaption{position:absolute;left:18px;bottom:18px;z-index:1;display:flex;align-items:center;gap:9px;
  padding:8px 16px 8px 13px;border-radius:100px;background:rgba(255,253,248,.92);color:var(--ink);
  font-size:15px;font-weight:500;line-height:1.2;box-shadow:0 6px 18px -8px rgba(20,16,8,.5)}
.m-cover figcaption::before{content:"";width:9px;height:9px;flex:none;background:var(--gold);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
@media(prefers-reduced-motion:no-preference){
  .m-cover img{transform:scale(1.06);animation:coverSettle 1.8s cubic-bezier(.22,.61,.36,1) .1s forwards}
  @keyframes coverSettle{to{transform:scale(1)}}
}
@media(max-width:860px){
  .m-cover{margin-top:40px;border-radius:12px}
  .m-cover figcaption{left:12px;bottom:12px;font-size:14px;padding:7px 13px 7px 11px}
}

/* --- itinerary: each moment gets a picture, a badge and a big time --- */
/* --evh is the picture height; the dot below is placed from it, so change it in one place */
.m-time{--evh:300px}
@media(max-width:860px){.m-time{--evh:230px}}
.m-ev .evimg{position:relative;margin-bottom:22px}
.m-ev .evimg .imgc{height:var(--evh);border-radius:12px;box-shadow:0 0 0 1px var(--line-3),0 18px 36px -22px rgba(70,55,28,.5)}
.m-ev .evimg img{width:100%;height:100%;object-fit:cover;display:block}
.m-ev .ico{position:absolute;bottom:-22px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--white);color:var(--gold-d);box-shadow:0 0 0 1px var(--line-3),0 8px 18px -8px rgba(70,55,28,.45)}
.m-ev .ico svg{width:23px;height:23px}
.m-ev:nth-child(odd) .ico{right:18px}
.m-ev:nth-child(even) .ico{left:18px}
.m-ev .evimg + .t{margin-top:34px}
.m-ev .tm{font-family:var(--f);font-weight:500;font-size:clamp(46px,5.6vw,64px);line-height:1;color:var(--gold);margin-top:10px;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.m-ev .tm small{font-size:.34em;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-left:.45em;color:var(--gold-d)}
.m-ev .tm + div h3{margin-top:16px}
/* the dot sits level with the day label, below the picture */
.m-ev .dot{top:calc(var(--evh) + 63px)}
.m-time.live .m-ev .evimg .imgc img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.m-time.live .m-ev:not(.on) .evimg .imgc img{transform:scale(1.07)}
@media(max-width:860px){
  .m-ev:nth-child(odd) .ico,.m-ev:nth-child(even) .ico{left:18px;right:auto}
  .m-ev .tm{font-size:48px}
}

/* --- a hint of paper in the background --- */
.band-a,.band-b,.band-c{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .33  0 0 0 0 .18  0 0 0 .5 -.14'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}

/* --- headings: the rules beside each label draw outward as it appears --- */
.m-kicker::before,.m-kicker::after{transition:width .9s cubic-bezier(.2,.7,.25,1) .15s}
.m-kicker.rv:not(.in)::before,.m-kicker.rv:not(.in)::after{width:0}

/* --- cards answer the cursor: a gold hairline draws across the foot --- */
.m-card,.m-opt,.m-ibox{position:relative}
.m-card::after,.m-opt::after,.m-ibox::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--gold-l),var(--gold));transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.2,.7,.25,1)}
@media(hover:hover){
  .m-card:hover,.m-opt:hover,.m-ibox:hover{border-color:rgba(165,129,63,.5)}
  .m-card:hover::after,.m-opt:hover::after,.m-ibox:hover::after{transform:scaleX(1)}
}

/* ============ MAP LINKS ============
   One quiet pill for a place, and a dotted underline for places named in
   running text. Both open Google Maps in a new tab. */
.m-map{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border-radius:100px;
  background:var(--white);border:1px solid var(--line-3);color:var(--gold-d);
  font-size:15px;font-weight:500;line-height:1.3;text-align:left;
  box-shadow:0 6px 16px -10px rgba(70,55,28,.4);
  transition:border-color .25s,background .25s,color .25s,transform .25s,box-shadow .25s}
.m-map svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.m-map:hover{border-color:var(--gold);color:var(--ink);transform:translateY(-1px);box-shadow:0 10px 20px -12px rgba(70,55,28,.55)}}
.m-map:focus-visible{border-radius:100px}
.m-note .m-map{display:flex;width:max-content;max-width:100%;margin-top:16px}
.m-mapline{margin-top:20px}
.m-ev:nth-child(odd) .m-mapline{text-align:right}
.m-section > .m-mapline:last-child{text-align:center;margin-top:34px}
@media(max-width:860px){.m-ev:nth-child(odd) .m-mapline{text-align:left}}
.m-loc{color:var(--gold-d);text-decoration:underline dotted;text-decoration-color:rgba(138,104,37,.6);text-underline-offset:4px;text-decoration-thickness:1.5px;
  transition:color .2s,text-decoration-color .2s}
@media(hover:hover){.m-loc:hover{color:var(--ink);text-decoration-style:solid;text-decoration-color:var(--gold)}}
/* cards: the pill sits at the foot, level across a row */
.m-card{display:flex;flex-direction:column}
.m-card .bd{flex:1;display:flex;flex-direction:column}
.m-card .bd > ul,.m-card .bd > p{width:100%}
.m-mapwrap{margin-top:auto;padding-top:22px}

/* ============ HERO: A SOFT BAND OF SHADE BEHIND THE TYPE ============
   A full-width band, deepest across the lines of text and feathered away
   above and below, then faded out toward the left and right edges of the
   screen. Because it spans the whole picture there is no circle or box to
   notice - the photograph simply sits a little darker where it is read.
   The band is as tall as the text block plus generous margin, so every line
   (kicker, names, date, venue) is covered rather than just the centre. */
.m-hero .veil{background:
  linear-gradient(180deg,rgba(18,14,8,.46) 0%,rgba(18,14,8,.26) 36%,rgba(18,14,8,.3) 66%,rgba(18,14,8,.72) 100%)}
.m-hero .txt{isolation:isolate}
.m-hero .txt::before{content:"";position:absolute;left:0;right:0;top:50%;z-index:-1;pointer-events:none;
  height:min(100%,860px);transform:translateY(-50%);
  background:linear-gradient(180deg,
    rgba(14,10,4,0) 0%,rgba(14,10,4,.05) 8%,rgba(14,10,4,.16) 16%,rgba(14,10,4,.34) 24%,rgba(14,10,4,.5) 31%,
    rgba(14,10,4,.58) 38%,rgba(14,10,4,.6) 50%,rgba(14,10,4,.58) 62%,
    rgba(14,10,4,.5) 69%,rgba(14,10,4,.34) 76%,rgba(14,10,4,.16) 84%,rgba(14,10,4,.05) 92%,rgba(14,10,4,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 8%,#000 24%,#000 76%,rgba(0,0,0,.35) 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 8%,#000 24%,#000 76%,rgba(0,0,0,.35) 92%,transparent 100%);
  filter:blur(10px)}
@media(max-width:860px){
  /* on a phone the type runs nearly edge to edge, so the band does too */
  .m-hero .txt::before{-webkit-mask-image:none;mask-image:none;height:min(100%,780px)}
}

/* anchors land just below the bar, not under it */
html{scroll-padding-top:var(--bar-h,76px)}


/* ============ SPACING UNDER A SECTION HEADING ============
   A heading that goes straight into a grid of boxes needs air between. */
.m-section > h2 + :is(.m-info,.m-cards,.m-opts,.m-strip){margin-top:52px}
@media(max-width:860px){.m-section > h2 + :is(.m-info,.m-cards,.m-opts,.m-strip){margin-top:38px}}

/* ============ RSVP SPLIT LAYOUT ============ */
.m-split{padding-bottom:110px}
.m-split-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:76px;align-items:start}
.m-split-text .m-kicker{justify-content:flex-start}
.m-split-text .m-kicker::before{display:none}
.m-split-text h2{text-align:left}
.m-split-text .m-lede{text-align:left;margin:22px 0 0;max-width:none}
.m-facts{margin:34px 0 0;padding:0}
.m-facts > div{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--line-3);font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.m-facts > div:last-child{border-bottom:1px solid var(--line-3)}
.m-facts dt{font-size:13.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-d);padding-top:4px}
.m-facts dd{margin:0}
.m-facts .ph{color:var(--gold-d);white-space:nowrap}
.m-split-text .m-cover{margin:36px 0 0;height:250px;max-width:none}

.m-form{background:var(--white);border:1px solid var(--line-3);border-radius:14px;padding:40px 40px 36px;text-align:left;
  box-shadow:0 24px 54px -32px rgba(70,55,28,.5)}
.m-form h3{font-family:var(--f);font-weight:600;font-size:28px;line-height:1.15}
.m-form .fld{margin:22px 0 0;border:0;padding:0;min-width:0}
.m-form .fld-s input{width:120px}
.m-form label,.m-form legend{display:block;padding:0;font-size:15.5px;font-weight:500;color:var(--ink-2);margin-bottom:9px}
.m-form input[type=text],.m-form input[type=email],.m-form input[type=number],.m-form textarea{
  width:100%;font:inherit;font-size:17px;line-height:1.5;color:var(--ink);padding:13px 15px;border:1px solid var(--line-3);border-radius:10px;
  background:#FBF8F0;transition:border-color .2s,box-shadow .2s,background .2s;resize:vertical}
.m-form textarea{display:block}
@media(hover:hover){.m-form input:hover,.m-form textarea:hover{border-color:#CDBB93}}
.m-form input:focus,.m-form textarea:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(165,129,63,.2)}
.m-form [aria-invalid="true"]{border-color:#B0604C !important;box-shadow:0 0 0 3px rgba(176,96,76,.14)}
.m-form .chips{display:flex;flex-wrap:wrap;gap:10px}
.m-form .chip{display:block;margin:0;position:relative}
.m-form .chip input{position:absolute;opacity:0;pointer-events:none}
.m-form .chip > span{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--line-3);border-radius:100px;
  font-size:16px;font-weight:400;line-height:1.3;color:var(--ink-2);background:#FBF8F0;cursor:pointer;
  transition:background .22s,border-color .22s,color .22s,transform .22s}
@media(hover:hover){.m-form .chip:hover > span{border-color:var(--gold)}}
.m-form .chip input:checked + span{background:var(--gold);border-color:var(--gold-d);color:#FDFBF6;transform:translateY(-1px)}
.m-form .chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}
.m-form [data-invalid] .chip > span{border-color:#B0604C}

.m-send{margin-top:30px;position:relative;display:inline-flex;align-items:center;gap:12px;font:inherit;font-size:15px;font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;line-height:1;padding:17px 32px;border-radius:100px;cursor:pointer;
  background:var(--gold);color:#FDFBF6;border:1px solid var(--gold-d);box-shadow:0 14px 26px -16px rgba(138,104,37,.8);
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s}
@media(hover:hover){.m-send:hover{background:var(--gold-d);transform:translateY(-2px);box-shadow:0 18px 30px -16px rgba(138,104,37,.85)}}
.m-send:active{transform:translateY(0) scale(.97)}
.m-send .ar{width:15px;height:11px;transition:transform .3s var(--ul-ease)}
@media(hover:hover){.m-send:hover .ar{transform:translateX(4px)}}
.m-send .lbl,.m-send .sent{display:inline-flex;align-items:center;gap:8px}
.m-send .sent{display:none}
.m-send .check{width:17px;height:17px}
.m-send .check path{stroke-dasharray:20;stroke-dashoffset:20}
.m-send.is-done{background:#6F8F4E;border-color:#5B7A3E;box-shadow:0 14px 26px -16px rgba(91,122,62,.8);pointer-events:none}
.m-send.is-done .lbl,.m-send.is-done .ar{display:none}
.m-send.is-done .sent{display:inline-flex}
.m-send.is-done .check path{animation:checkDraw .5s .12s ease forwards}
.m-send.pop{animation:sendPop .6s cubic-bezier(.2,.9,.3,1.35)}
@keyframes checkDraw{to{stroke-dashoffset:0}}
@keyframes sendPop{0%{transform:scale(1)}35%{transform:scale(.9)}70%{transform:scale(1.07)}100%{transform:scale(1)}}
.m-form.shake{animation:formShake .45s}
@keyframes formShake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.m-form-status{margin-top:18px;min-height:1.7em;font-size:16px;line-height:1.6;color:var(--ink-3)}
.m-form-status .st{display:none}
.m-form-status[data-state="err"] .st-err,.m-form-status[data-state="preview"] .st-preview,
.m-form-status[data-state="ok"] .st-ok,.m-form-status[data-state="fail"] .st-fail{display:inline}
.m-form-status[data-state="err"],.m-form-status[data-state="fail"]{color:#9A4F3D}
.m-form-status[data-state="preview"]{color:var(--gold-d)}
.m-form-status[data-state="ok"]{color:#5B7A3E}
.ef-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:400}
@media(max-width:900px){
  .m-split-grid{grid-template-columns:1fr;gap:48px}
  .m-split-text .m-cover{height:210px}
  .m-form{padding:30px 22px 28px}
  .m-facts > div{grid-template-columns:80px 1fr;gap:14px}
}


/* ============ LANGUAGE SWITCH: FLAGS ============
   Flat, hairline-edged flags in place of EN / FR. The bar's own version is in
   nav.css; this is the footer and the phone drawer, which carry the word too.
   The buttons keep their aria-labels, so screen readers still hear the language. */
:root{--flag-en:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 480%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cpath fill=%22%23243B7A%22 d=%22M0 0h640v480H0z%22/%3E%3Cpath fill=%22%23FFFFFF%22 d=%22m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z%22/%3E%3Cpath fill=%22%23C8374A%22 d=%22m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z%22/%3E%3Cpath fill=%22%23FFFFFF%22 d=%22M241 0v480h160V0zM0 160v160h640V160z%22/%3E%3Cpath fill=%22%23C8374A%22 d=%22M0 193v96h640v-96zM273 0v480h96V0z%22/%3E%3C/svg%3E");--flag-fr:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 30 20%22 preserveAspectRatio=%22none%22%3E%3Crect width=%2210%22 height=%2220%22 fill=%22%232A4A92%22/%3E%3Crect x=%2210%22 width=%2210%22 height=%2220%22 fill=%22%23FFFFFF%22/%3E%3Crect x=%2220%22 width=%2210%22 height=%2220%22 fill=%22%23D23B4B%22/%3E%3C/svg%3E")}

.ef-foot .langrow button,.ef-drawer-lang button{display:inline-flex;align-items:center;gap:9px}
.ef-foot .langrow button::before,.ef-drawer-lang button::before{content:"";display:block;flex:none;width:24px;height:16px;border-radius:3px;
  background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(20,16,8,.16);transition:opacity .25s}
.ef-foot .langrow button::before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.ef-foot .langrow button[data-lang="en"]::before,.ef-drawer-lang button[data-lang="en"]::before{background-image:var(--flag-en)}
.ef-foot .langrow button[data-lang="fr"]::before,.ef-drawer-lang button[data-lang="fr"]::before{background-image:var(--flag-fr)}
.ef-foot .langrow button:not([aria-pressed="true"])::before,.ef-drawer-lang button:not([aria-pressed="true"])::before{opacity:.6}


/* ============ RSVP FORM - COMPACT ============
   Name and email share a row, the two choices sit as short chip rows, guests
   and dietary needs share a row, and the button sits beside its message. */
.m-form{padding:30px 32px 26px}
.m-form .todo{margin-bottom:6px}
.m-form .f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.m-form .f-row-s{grid-template-columns:116px 1fr}
.m-form .fld{margin-top:16px}
.m-form .fld-s input{width:100%}
.m-form label,.m-form legend{font-size:14.5px;margin-bottom:7px}
.m-form input[type=text],.m-form input[type=email],.m-form input[type=number],.m-form textarea{padding:11px 14px;font-size:16.5px}
.m-form textarea{min-height:0}
.m-form .chips{gap:8px}
.m-form .chip > span{padding:8px 15px;font-size:15.5px}
.m-form .f-foot{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;margin-top:22px}
.m-form .m-send{margin-top:0;padding:15px 28px}
.m-form .m-form-status{flex:1 1 200px;margin:0;min-height:0;font-size:15px;line-height:1.45}
@media(max-width:560px){
  .m-form{padding:26px 20px 22px}
  .m-form .f-row,.m-form .f-row-s{grid-template-columns:1fr}
  .m-form .f-row-s .fld-s{max-width:130px}
}


/* ============ WELCOME PAGE: COUNTDOWN, VENUE, INDEX ============ */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.m-count-sec{padding:68px 0 64px}
.m-count{text-align:center}
.m-count-cap{font-family:var(--f);font-size:clamp(28px,3.6vw,38px);font-weight:500;line-height:1.2;color:var(--gold)}
.m-count-grid{display:flex;justify-content:center;margin-top:24px}
.m-count-grid > div{padding:0 clamp(16px,4.2vw,52px);border-left:1px solid var(--line-3);min-width:0}
.m-count-grid > div:first-child{border-left:0}
.m-count b{display:block;font-family:var(--f);font-weight:500;font-size:clamp(42px,7.2vw,78px);line-height:1;color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.m-count .l{display:block;margin-top:12px;font-size:13.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.m-count-day{margin-top:26px;font-size:17px;color:var(--ink-3);font-variant-numeric:lining-nums}

.m-venue{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:76px;align-items:center}
.m-venue-img .imgc{aspect-ratio:4/5;border-radius:999px 999px 16px 16px;box-shadow:0 0 0 1px var(--line-3),0 34px 60px -34px rgba(70,55,28,.6)}
.m-venue-img img{width:100%;height:100%;object-fit:cover;display:block}
.m-venue-text .m-kicker{justify-content:flex-start}
.m-venue-text .m-kicker::before{display:none}
.m-venue-text h2{text-align:left}
.m-venue-text .m-lede{text-align:left;margin:22px 0 0;max-width:none}
.m-venue-text .m-facts{margin-top:28px}
.m-venue-text .m-mapline{margin-top:26px;text-align:left}

.m-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;margin-top:52px}
.m-tile{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"tt ar" "sb sb";
  align-items:center;padding:24px 2px 30px;border-top:1px solid var(--line-3);color:var(--ink)}
.m-tile::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--gold-l),var(--gold));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.2,.7,.25,1)}
.m-tile .no{grid-area:no;font-size:13.5px;font-weight:500;color:var(--gold-d);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.m-tile .tt{grid-area:tt;font-family:var(--f);font-weight:600;font-size:28px;line-height:1.2;margin-top:6px}
.m-tile .sb{grid-area:sb;margin-top:6px;font-size:16.5px;line-height:1.5;color:var(--ink-3)}
.m-tile .ar{grid-area:ar;width:18px;height:13px;color:var(--gold-d);transition:transform .35s cubic-bezier(.2,.7,.25,1)}
@media(hover:hover){
  .m-tile:hover::after{transform:scaleX(1)}
  .m-tile:hover .ar{transform:translateX(6px)}
}
.m-tile:focus-visible{outline-offset:-2px}
@media(max-width:860px){
  .m-venue{grid-template-columns:1fr;gap:44px}
  .m-venue-img{max-width:420px;margin:0 auto;width:100%}
  .m-tiles{grid-template-columns:1fr 1fr;gap:0 28px;margin-top:38px}
  .m-tile .tt{font-size:24px}
}
@media(max-width:520px){
  .m-tiles{grid-template-columns:1fr}
  .m-count-grid > div{padding:0 12px}
}


/* ============ BLOCKS ============
   Welcome page: "menu card" - a double rule frame broken by a gold ornament.
   Every other page: "stacked sheets" - two loose sheets showing behind each block.
   Stacked sheets sit on negative z-index inside an isolated section, so the blocks
   themselves never take a transform (it would pull the sheets in front of the paper). */
:root{--orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cg fill='%23A5813F'%3E%3Cpath d='M20 .8l3.4 5.2L20 11.2 16.6 6z'/%3E%3Ccircle cx='8.4' cy='6' r='1.5'/%3E%3Ccircle cx='31.6' cy='6' r='1.5'/%3E%3C/g%3E%3C/svg%3E")}

/* --- Welcome: menu card --- */
body.on-home .m-glance{--mc-o:rgba(165,129,63,.6);--mc-i:rgba(165,129,63,.32);position:relative;overflow:visible;padding:7px;box-shadow:none;border-radius:2px;
  background:linear-gradient(90deg,var(--mc-o) calc(50% - 30px),transparent 0 calc(50% + 30px),var(--mc-o) 0) 0 0/100% 1px no-repeat border-box;
  border:1px solid var(--mc-o);border-top-color:transparent}
body.on-home .m-glance::after{content:"";position:absolute;inset:6px;border:1px solid var(--mc-i);border-top-color:transparent;border-radius:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--mc-i) calc(50% - 30px),transparent 0 calc(50% + 30px),var(--mc-i) 0) 0 0/100% 1px no-repeat border-box}
body.on-home .m-glance::before{content:"";position:absolute;z-index:2;top:-5.5px;left:50%;width:40px;height:12px;margin-left:-20px;background:var(--orn) center/40px 12px no-repeat}
body.on-home .m-glance > div{border-color:rgba(165,129,63,.32);border-radius:0;padding:44px 26px 38px}
body.on-home .m-glance > div:first-child{border-radius:0}
@media(max-width:860px){body.on-home .m-glance > div{padding:38px 22px 32px}}

/* --- other pages: stacked sheets --- */
body:not(.on-home) .m-section{isolation:isolate}
body:not(.on-home) :is(.m-info,.m-cards,.m-opts){gap:44px 36px}
body:not(.on-home) :is(.m-ibox,.m-card,.m-opt,.m-note){position:relative;overflow:visible;background:var(--white);border:0;border-radius:4px;transform:none;
  box-shadow:0 0 0 1px rgba(165,129,63,.2),0 2px 3px rgba(70,55,28,.08)}
body:not(.on-home) :is(.m-ibox,.m-card,.m-opt,.m-note)::before,
body:not(.on-home) :is(.m-ibox,.m-card,.m-opt,.m-note)::after{content:"";display:block;position:absolute;inset:0;z-index:-1;width:auto;height:auto;margin:0;padding:0;
  border-radius:4px;background:#FAF5EA;pointer-events:none;box-shadow:0 0 0 1px rgba(165,129,63,.2),0 2px 5px rgba(70,55,28,.08);
  transition:transform .5s cubic-bezier(.2,.7,.25,1)}
body:not(.on-home) :is(.m-ibox,.m-card,.m-opt,.m-note)::before{transform:rotate(-2deg) translate(-3px,6px)}
body:not(.on-home) :is(.m-ibox,.m-card,.m-opt,.m-note)::after{transform:rotate(1.5deg) translate(4px,8px);background:#F3ECDB}
@media(hover:hover){
  body:not(.on-home) :is(.m-ibox,.m-card,.m-opt,.m-note):hover{transform:none;border-color:transparent;box-shadow:0 0 0 1px rgba(165,129,63,.32),0 6px 14px -8px rgba(70,55,28,.3)}
  body:not(.on-home) :is(.m-ibox,.m-card,.m-opt,.m-note):hover::before{transform:rotate(-3.2deg) translate(-5px,8px)}
  body:not(.on-home) :is(.m-ibox,.m-card,.m-opt,.m-note):hover::after{transform:rotate(2.6deg) translate(6px,10px)}
}
/* headings: a short gold rule instead of a full-width line */
body:not(.on-home) .m-ibox{padding:34px 32px}
body:not(.on-home) .m-ibox h3{border-bottom:0;padding-bottom:0;margin-bottom:0}
body:not(.on-home) .m-ibox h3::after{content:"";display:block;width:36px;height:2px;margin-top:14px;background:var(--gold)}
body:not(.on-home) .m-ibox h3 + :is(p,ul,table){margin-top:14px}
/* photo cards: a mount with album corners */
body:not(.on-home) :is(.m-card,.m-opt){padding:16px 16px 30px}
body:not(.on-home) :is(.m-card,.m-opt) .imgc{border-radius:0}
body:not(.on-home) :is(.m-card,.m-opt) img{height:206px}
body:not(.on-home) :is(.m-card,.m-opt) .imgc::after{box-shadow:none;
  background:linear-gradient(135deg,#F1E9D7 50%,transparent 50%) 0 0/24px 24px no-repeat,linear-gradient(225deg,#F1E9D7 50%,transparent 50%) 100% 0/24px 24px no-repeat,
    linear-gradient(45deg,#F1E9D7 50%,transparent 50%) 0 100%/24px 24px no-repeat,linear-gradient(315deg,#F1E9D7 50%,transparent 50%) 100% 100%/24px 24px no-repeat}
body:not(.on-home) :is(.m-card,.m-opt) .bd{padding:22px 14px 0}
/* notes: no icon badge, just the sheets */
body:not(.on-home) .m-note{display:block;max-width:720px;margin-left:auto;margin-right:auto;padding:30px 32px;border:0}
body:not(.on-home) .m-note .m-map{display:flex;width:max-content;max-width:100%;margin-top:16px}
@media(max-width:560px){body:not(.on-home) .m-ibox,body:not(.on-home) .m-note{padding:28px 22px}}


/* ============ RSVP: ADDING MORE NAMES ============
   One row per extra guest. A row opens by letting its grid track grow from 0fr
   to 1fr (so the form below glides down instead of jumping) while the field
   itself fades and settles in; closing plays the same thing backwards. */
.m-form .f-row-s > .fld{grid-column:1/-1}
.m-form .f-row-s{grid-template-columns:1fr}
.m-form .party{grid-column:1/-1;min-width:0}
.party-list{display:block}
.gx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1)}
.gx.is-open{grid-template-rows:1fr}
.gx-in{min-height:0;overflow:hidden;margin:0 -5px;padding:0 5px}
.gx-row{padding:16px 0 4px;opacity:0;transform:translateY(-6px);
  transition:opacity .24s ease-out,transform .34s cubic-bezier(.2,.8,.2,1)}
.gx.is-open .gx-row{opacity:1;transform:none}
.gx:not(.is-open) .gx-row{transition-duration:.16s}
/* while a row opens or closes the buttons slide out from under the pointer; keep them
   from flashing their hover state on the way */
.m-form.is-moving .m-add,.m-form.is-moving .m-add .pl,.m-form.is-moving .gx-x{transition:none}
@media(hover:hover){.m-form.is-moving .m-add:hover{background:transparent}}
@media(hover:hover){.m-form.is-moving .m-add:hover .pl{background:#FBF8F0;color:var(--gold-d);transform:none}}
@media(hover:hover){.m-form.is-moving .gx-x:hover{color:var(--mute);border-color:var(--line-3);background:transparent}}
@media(hover:hover){.m-form.is-moving .gx-x:hover svg{transform:none}}
.m-form .gx .fld{margin:0}
.gx-field{display:flex;align-items:center;gap:8px}
.gx-field input{flex:1 1 auto;min-width:0}
.gx-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;cursor:pointer;
  color:var(--mute);background:transparent;border:1px solid var(--line-3);border-radius:10px;
  transition:color .2s,border-color .2s,background .2s,transform .2s}
.gx-x svg{width:12px;height:12px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.gx-x:hover{color:#9A4F3D;border-color:#D9A99B;background:rgba(176,96,76,.07)}}
@media(hover:hover){.gx-x:hover svg{transform:rotate(90deg)}}
.gx-x:active{transform:scale(.92)}
.gx-x:focus-visible,.m-add:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.party-bar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:12px}
.m-add{display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;margin-left:-5px;font:inherit;font-size:15px;font-weight:500;
  line-height:1.3;color:var(--gold-d);background:transparent;border:0;border-radius:100px;cursor:pointer;
  transition:background .22s,color .22s,opacity .22s}
.m-add .pl{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--gold);background:#FBF8F0;transition:background .25s,color .25s,transform .35s cubic-bezier(.2,.8,.2,1.4)}
.m-add .pl svg{width:11px;height:11px}
@media(hover:hover){.m-add:hover{background:rgba(165,129,63,.09)}}
@media(hover:hover){.m-add:hover .pl{background:var(--gold);color:#FDFBF6;transform:rotate(90deg)}}
.m-add:active .pl{transform:rotate(90deg) scale(.88)}
.m-add:disabled{opacity:.45;cursor:default;pointer-events:none}
.party-count{display:inline-flex;align-items:baseline;gap:5px;font-size:14.5px;color:var(--mute);font-variant-numeric:lining-nums;
  opacity:0;pointer-events:none;transition:opacity .25s}
.party-count b{font-weight:600;color:var(--ink-2)}
.party-count.on{opacity:1;transform:none}
.party-count b{display:inline-block}
.party-count.bump b{animation:cntBump .3s ease-out}
@keyframes cntBump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .gx,.gx-row,.party-count,.m-add .pl,.gx-x svg{transition:none}
  .party-count.bump b{animation:none}
}

/* The info column stays beside the form as extra names make it taller */
@media(min-width:901px){
  .m-split-grid > .m-split-text{align-self:start;position:sticky;top:calc(var(--bar-h,76px) + 28px)}
}

/* ============ RSVP PAGE: THE REPLY CARD ============
   A white card with a hairline drawn deep inside its edge and a small diamond at
   each corner of it. Small-caps labels over fields you write on the line, the
   choices as one segmented bar, and a deep ink button - a hotel reply card.
   The info column on the left stays beside it as the card grows. */
html:root .m-split-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:68px;align-items:stretch}
html:root .m-split-text{display:flex;flex-direction:column}
html:root .m-split-text h2{font-size:clamp(62px,7vw,92px);font-weight:500;line-height:1;letter-spacing:-.015em}
html:root .m-rsvp{position:relative;overflow:visible;align-self:start}
html:root .m-facts > div{grid-template-columns:108px 1fr;gap:14px}
html:root .m-form .fld{margin-top:20px}
html:root .m-form label:not(.chip),html:root .m-form legend{font-size:15.5px;font-weight:500;line-height:1.4;color:var(--ink-2);margin-bottom:8px}
html:root .m-form :is(input[type=text],input[type=email],input[type=number],textarea){font-size:17px;line-height:1.45}
html:root .m-form textarea{min-height:76px}
html:root .m-form .chip{margin:0}
html:root .m-form .chip > span{min-height:46px;transform:none;font-size:16px;font-weight:400;text-transform:none;letter-spacing:0}
html:root .m-form .chip input:checked + span{transform:none}
html:root .m-form .chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
html:root .m-form [data-invalid] legend{color:#9A4F3D}
html:root .m-form .f-foot{flex-direction:column;align-items:stretch;gap:0;margin-top:32px}
html:root .m-form .m-send{justify-content:center;width:100%;min-height:58px;padding:0 28px}
html:root .m-form .m-form-status{flex:none;margin-top:14px;text-align:center;font-size:15.5px;line-height:1.5;text-wrap:balance}
html:root .m-form .m-form-status[data-state=""]{margin-top:0}
html:root .m-form .todo{display:table;margin:14px auto 4px;padding:0;border:0;border-radius:0;background:none;font-size:13px;color:var(--mute)}
@media(max-width:900px){
  html:root .m-split-grid{grid-template-columns:1fr;gap:56px}
  html:root .m-facts > div{grid-template-columns:84px 1fr}
}
@media(max-width:560px){
  html:root .m-form .f-foot{margin-top:28px}
  /* on a phone every choice gets a full-width row: tidy edges, big targets */
  html:root .m-form .chips{display:grid;grid-template-columns:1fr;gap:8px}
  html:root .m-form .chip > span{display:flex;width:100%}
}

html:root .m-split-text h2{font-weight:400}
html:root .m-facts > div{grid-template-columns:1fr;gap:3px;padding:16px 0 17px}
html:root .m-facts dt{padding-top:0}

html:root .m-form{background:var(--white);border:1px solid var(--line-2);border-radius:0;padding:48px 58px 50px;
  outline:1px solid rgba(165,129,63,.45);outline-offset:-19px;
  box-shadow:0 1px 2px rgba(70,55,28,.06),0 34px 70px -46px rgba(70,55,28,.6)}
html:root .m-form::after{content:"";position:absolute;inset:13px;pointer-events:none;
  --d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%23A5813F'/%3E%3C/svg%3E");
  background:var(--d) 0 0/9px 9px no-repeat,var(--d) 100% 0/9px 9px no-repeat,var(--d) 0 100%/9px 9px no-repeat,var(--d) 100% 100%/9px 9px no-repeat}
html:root .m-form .todo{margin:0 auto 4px}
html:root .m-form .gx .fld{margin:0}
html:root .m-form .fld{margin-top:26px}
html:root .m-form .f-row{gap:0 28px}
html:root .m-form label:not(.chip),html:root .m-form legend{font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-d);margin-bottom:4px}
html:root .m-form legend{margin-bottom:12px}
html:root .m-form :is(input[type=text],input[type=email],input[type=number],textarea){
  background:transparent;border:0;border-bottom:1px solid #D3C49F;border-radius:0;padding:8px 0 9px;font-size:18px;box-shadow:none}
html:root .m-form textarea{min-height:68px}
@media(hover:hover){html:root .m-form :is(input,textarea):hover{border-bottom-color:var(--gold-l)}}
html:root .m-form :is(input,textarea):focus{background:transparent;border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
html:root .m-form :is(input,textarea)[aria-invalid="true"]{box-shadow:0 1px 0 #B0604C}
html:root .m-form .chips{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;
  border:1px solid var(--line-3);border-radius:1px;background:#FCFAF4;transition:border-color .22s,box-shadow .22s}
html:root .m-form .chip > span{display:flex;justify-content:center;text-align:center;height:100%;min-height:50px;padding:6px 12px;
  border:0;border-radius:0;background:transparent;color:var(--ink-2)}
html:root .m-form .chip + .chip > span{border-left:1px solid var(--line-3)}
@media(hover:hover){html:root .m-form .chip:hover > span{background:rgba(201,181,131,.16)}}
html:root .m-form .chip input:checked + span{background:var(--ink);color:#FBF6E9}
html:root .m-form .chip input:focus-visible + span{outline-offset:-5px;outline-color:var(--gold-l)}
html:root .m-form [data-invalid] .chips{border-color:#B0604C;box-shadow:0 0 0 1px rgba(176,96,76,.35)}
html:root .m-form .m-send{border-radius:0;background:var(--ink);border:1px solid var(--ink);color:#FBF6E9;
  box-shadow:0 18px 30px -20px rgba(43,40,32,.9)}
html:root .m-form .m-send .ar{color:var(--gold-l)}
@media(hover:hover){html:root .m-form .m-send:hover{background:var(--gold-d);border-color:var(--gold-d);transform:translateY(-1px)}}
@media(hover:hover){html:root .m-form .m-send:hover .ar{color:#FBF6E9}}
@media(max-width:560px){
  html:root .m-form{padding:40px 30px 36px;outline-offset:-13px}
  html:root .m-form::after{inset:7.5px}
  html:root .m-form .chip > span{padding:6px 8px}
  /* the two long answers stack as one bar, ruled between */
  html:root .m-form > fieldset:first-of-type .chips{grid-auto-flow:row;grid-template-columns:1fr}
  html:root .m-form > fieldset:first-of-type .chip + .chip > span{border-left:0;border-top:1px solid var(--line-3)}
}

/* very narrow phones: every choice bar stacks, so no label is squeezed against its neighbour */
@media(max-width:400px){
  html:root .m-form fieldset .chips{grid-auto-flow:row;grid-template-columns:1fr}
  html:root .m-form fieldset .chip + .chip > span{border-left:0;border-top:1px solid var(--line-3)}
}

@media(max-width:360px){
  .m-count-grid > div{padding:0 8px}
  .m-count .l{font-size:12.5px;letter-spacing:0}
}


/* ============ RSVP: EMAIL TYPO HINT ============
   Opens under the email field the same way an extra guest row does: the track
   grows from 0fr so the form below glides down. */
.mh{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1)}
.mh.on{grid-template-rows:1fr}
.mh-in{min-height:0;overflow:hidden}
.mh-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-top:10px;opacity:0;transform:translateY(-4px);
  transition:opacity .22s ease-out,transform .3s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.mh.on .mh-row{opacity:1;transform:none;visibility:visible}
.mh:not(.on) .mh-row{transition:opacity .15s,transform .15s,visibility 0s .15s}
.mh-q{font-size:15px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.mh-q b{font-weight:600;color:var(--gold-d)}
.mh-yes,.mh-no{font:inherit;font-size:14.5px;line-height:1.3;padding:5px 13px;border-radius:100px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.mh-yes{font-weight:600;color:#FDFBF6;background:var(--gold);border:1px solid var(--gold-d)}
@media(hover:hover){.mh-yes:hover{background:var(--gold-d)}}
.mh-no{color:var(--mute);background:transparent;border:1px solid var(--line-3)}
@media(hover:hover){.mh-no:hover{color:var(--ink);border-color:var(--ink-3)}}
.mh-yes:focus-visible,.mh-no:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.mh,.mh-row{transition:none}}


/* ============ RSVP: EVENTS ============
   All three events start ticked. Declining folds the group away the same way
   an extra guest row opens: the track shrinks to 0fr so the form below glides up. */
.evs{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.8,.2,1)}
.evs.is-open{grid-template-rows:1fr}
.evs-in{min-height:0;overflow:hidden;margin:0 -6px;padding:0 6px;opacity:0;visibility:hidden;transition:opacity .18s ease-out,visibility 0s .32s}
.evs.is-open .evs-in{opacity:1;visibility:visible;transition:opacity .26s ease-out .06s,visibility 0s}
.m-form .ev-note{margin:10px 0 0;font-size:14.5px;line-height:1.45;color:var(--mute)}
/* one row per day: the day on the left, a short Yes | No bar on the right */
.m-form .day-row{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:8px 20px;align-items:center}
.m-form .day-row + .day-row{margin-top:12px}
.m-form .day-lb{line-height:1.35}
.m-form .day-lb b{display:block;font-weight:500;font-size:17px;color:var(--ink)}
.m-form .day-lb small{display:block;margin-top:2px;font-size:14.5px;color:var(--mute)}
html:root .m-form .days .chip > span{min-height:44px}
@media(max-width:560px){.m-form .day-row{grid-template-columns:1fr}}
/* Yes | No is short enough to stay side by side even where other choice bars stack */
@media(max-width:400px){
  html:root .m-form .days .chips{grid-auto-flow:column;grid-template-columns:none}
  html:root .m-form .days .chip + .chip > span{border-top:0;border-left:1px solid var(--line-3)}
}
@media(prefers-reduced-motion:reduce){.evs,.evs-in{transition:none}}


/* ============ FOOTER LANGUAGE SWITCH: a sliding thumb ============
   Two equal halves; one soft pill glides between them (with a touch of
   overshoot) while the chosen flag settles to full size and the other shrinks back. */
.ef-foot .langrow{position:relative;display:grid;grid-template-columns:1fr 1fr}
.ef-foot .langrow::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 12px) / 2);border-radius:100px;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .5s cubic-bezier(.34,1.4,.5,1)}
body[data-lang="fr"] .ef-foot .langrow::before{transform:translateX(calc(100% + 4px))}
.ef-foot .langrow button{position:relative;z-index:1;justify-content:center;transition:color .3s}
.ef-foot .langrow button[aria-pressed="true"]{background:transparent}
.ef-foot .langrow button::before{transform:scale(.86);transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.ef-foot .langrow button[aria-pressed="true"]::before{transform:none}


/* ============ COUNTDOWN: FRAMED CARD ============
   Chosen 2026-10-26 from four designs. The band drops its own colour and
   carries on the Welcome paper, so the homepage has one fewer brown; the
   numbers sit on a white card with the same inset gold rule as the RSVP form. */
#countdown-band{background-color:var(--paper);border-color:transparent}
#countdown-band .m-count-sec{padding-top:24px}
#countdown-band .m-count{position:relative;max-width:820px;margin:0 auto;padding:50px 24px 46px;background:var(--white);
  border:1px solid var(--line-2);outline:1px solid rgba(165,129,63,.45);outline-offset:-12px;
  box-shadow:0 1px 2px rgba(70,55,28,.05),0 24px 50px -38px rgba(70,55,28,.42)}
@media(max-width:560px){#countdown-band .m-count{padding:40px 12px 36px;outline-offset:-8px}}