:root {
  --paper: #f8f7f1;
  --ink: #242a24;
  --muted: #4e554b;
  --green: #243e35;
  --pink: #eddbd5;
  --gold: #796038;
  --line: #d8d4c7;
  /* Two serifs, not a serif/sans pair. They are kept distinct by role, not by class:
     --display is the Didone voice (headings, the date, every italic on the page, the M&T
     separators); --text is the old-style book voice (running copy, labels, links, captions
     that are not flourishes). Never set --display below ~20px or --text above ~24px — the
     two faces only read as a system while their size bands stay apart. */
  --display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  /* Bodoni Moda's opsz axis: low = sturdy hairlines (text cut), high = thin (display cut).
     `font-optical-sizing: auto` pushes display sizes to opsz 96, the thinnest cut, and the
     hairlines then vanish against photography. Pin the big serif to a text-cut value instead.
     Raise this for more drama on a quiet background, lower it for more body over a photo. */
  --display-opsz: 26;
  /* Height of the sticky site header; anchors land below it via scroll-padding. */
  --header-h: 90px;
  --text: 'EB Garamond', 'Garamond', 'Iowan Old Style', Georgia, serif;
  /* EB Garamond sets small for its em; sans-role sizes are one notch up from the
     Familjen Grotesk values they replaced. The Google build ships no smcp/onum, so
     small caps and old-style figures are not available — do not write rules for them. */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.125rem/1.7 var(--text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
p, h1, h2, h3, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
img { display: block; max-width: 100%; }
::selection { background: var(--pink); color: var(--green); }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 12px 20px; background: var(--paper); color: var(--green); z-index: 50; }
.skip-link:focus { top: 16px; }
/* Site chrome shared by every page (stamped from layout/ by `npm run layout`). The header
   pins to the top of the viewport; a translucent paper ground with a blur keeps it legible
   over the green and pink sections without reading as a solid bar. */
.site-header { position: sticky; top: 0; z-index: 20; height: var(--header-h); background: #f8f7f1e6; -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 15px 6%; border-bottom: 1px solid var(--line); }
.monogram { display: inline-flex; align-items: baseline; font: 400 2.1rem/1 var(--display); letter-spacing: .02em; }
.monogram span { font-size: 1.35rem; font-style: italic; color: var(--gold); margin: 0 3px; }
nav { display: flex; align-items: center; gap: 36px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.0625rem; letter-spacing: .02em; }
nav a:hover, .text-link:hover { color: var(--gold); }
.nav-boxed { border: 1px solid var(--green); padding: 10px 20px; gap: 24px; }
nav a[aria-current="page"] { color: var(--gold); }
.eyebrow { font-size: .9375rem; font-weight: 500; letter-spacing: 2px; line-height: 1.8; }
.hero { position: relative; isolation: isolate; min-height: 710px; height: min(800px, 83svh); color: #fffdf5; background: var(--green); display: grid; place-items: center; padding: 80px 6% 110px; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; z-index: -3; }
/* Directional, not a wash. The old stack put a 52% radial over the exact centre of the
   frame — which is where the house at the end of the walkway sits — on top of a linear
   that never dropped below 44%, so the photograph read as a flat mid-green field. This
   gradient is anchored to where the type actually is: light over the canopy (dark foliage
   is already a bed for the h1, and its text-shadow halo carries the hairlines), deepening
   through the lawn-and-house band behind the small type, firm over the brick underfoot.
   Peak is ~.80 at the very bottom edge against ~.78 across the whole middle before. */
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 44%, #12241b52 62%, #12241b4d 76%, transparent 92%), linear-gradient(180deg, #11241c4a 0%, #11241c3b 26%, #132a1f73 52%, #12241b96 76%, #101d18c4 100%); z-index: -2; }
.hero-border { position: absolute; inset: 23px; border: 1px solid #e0d7b770; pointer-events: none; z-index: -1; }
.hero-copy { text-align: center; width: 100%; }
/* A small oval holding M&T on one line. Longhand font properties only: the `font:`
   shorthand would reset the inherited `opsz`. */
.crest { width: clamp(132px, 13vw, 168px); aspect-ratio: 1 / 1.26; border: 1px solid #e7dab4b0; outline: 1px solid #e7dab460; outline-offset: 7px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-style: italic; font-size: clamp(2.6rem, 4.2vw, 3.4rem); line-height: 1; letter-spacing: 0; margin: 0 auto 30px; }
.crest span { font-size: .68em; color: #eadbb2; }
.hero h1 { font-weight: 400; font-family: var(--display); font-size: clamp(3rem, 5.6vw, 4.9rem); line-height: 1.1; letter-spacing: .005em; margin: 0 0 26px; }
.hero h1 em { font-weight: 400; font-size: 1.05em; color: #eadac2; }
.hero h1:focus { outline: none; }
.hero-date { text-shadow: 0 1px 3px #0d1c16d9, 0 0 16px #0d1c16c4; }
/* Bodoni's hairlines drop out over the sunlit photo; a soft halo holds their edge
   without thickening the strokes or darkening the image behind them. */
.hero h1, .crest { text-shadow: 0 2px 20px #10231994, 0 0 5px #10231970; }
.hero-date { display: inline-flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 24px; padding: 15px 10px; border-top: 1px solid #ece4cf70; border-bottom: 1px solid #ece4cf70; min-height: 50px; font-size: 1.4rem; letter-spacing: 1.7px; }
/* The crest's double oval turned on its side, closing the lockup it opens. `display: flex`
   (not inline-flex) keeps it off the inline-flex date's line box. On hover the inner ring
   swells past the outer one while a cream fill blooms from the centre. */
.hero-rsvp { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: fit-content; min-width: 184px; min-height: 68px; margin: 38px auto 0; padding: 0 40px; border: 1px solid #e7dab4b0; border-radius: 50%; background: #10231938; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #fffdf5; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: .02em; text-shadow: 0 2px 20px #10231994, 0 0 5px #10231970; transition: color .45s ease, text-shadow .45s ease; }
.hero-rsvp::before { content: ''; position: absolute; inset: 6px; border: 1px solid #e7dab460; border-radius: 50%; transition: inset .5s cubic-bezier(.2, .7, .2, 1), border-color .5s; }
.hero-rsvp::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at center, #fffaf0 0%, #f1e6cf 100%); opacity: 0; transform: scale(.35, .2); transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .4s ease; }
.hero-rsvp:hover, .hero-rsvp:focus-visible { color: var(--green); text-shadow: none; }
.hero-rsvp:hover::before, .hero-rsvp:focus-visible::before { inset: -8px; border-color: #e7dab4d0; }
.hero-rsvp:hover::after, .hero-rsvp:focus-visible::after { opacity: 1; transform: none; }
.hero-rsvp:focus-visible { outline-offset: 14px; }
.section { padding: 104px max(6%, calc((100% - 1160px) / 2)); }
h2 { font: 400 clamp(2.6rem, 4.1vw, 4rem)/1.05 var(--display); letter-spacing: -.005em; }
h2 em { font-weight: 400; }
/* The one asymmetric spread on the upper half of the page (DESIGN-REVIEW item 5). The
   copy is flush left against the page's left margin; the photograph is a slab that runs
   past the right margin and is cropped by the viewport edge. `.welcome` therefore kills
   `.section`'s right padding — restoring it, or re-centring `.welcome-copy`, puts the
   whole page back on one centred axis, which is the thing this section exists to break.
   The photo is deliberately unframed and untilted: the polaroid it replaced was the
   template gesture the review called out. */
.welcome { display: grid; grid-template-columns: 1fr 1.05fr; gap: 8%; align-items: center; background: var(--pink); padding-right: 0; }
.welcome-photo { margin: 0; }
.welcome-photo img { width: 100%; height: 480px; object-fit: cover; object-position: 52% center; }
.welcome-copy { text-align: left; }
.welcome h2 { font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1.25; text-wrap: balance; margin: 0 0 26px; }
/* One oversized word carries the line; the rest of the heading sets at body-adjacent
   scale. This is the welcome section's heading device — do not give it an italic
   second line, which is now reserved for the hero lockup and the save-date. */
.lede-word { display: block; font-size: 2.15em; line-height: .95; letter-spacing: -.005em; }
.welcome-copy > p { font-size: 1.125rem; line-height: 1.8; max-width: 30rem; }
.invitation-date { margin: 28px 0; padding: 23px 0; border-top: 1px solid #bdb0a0; border-bottom: 1px solid #bdb0a0; max-width: 540px; }
.invitation-date span { display: block; font: italic clamp(1.3rem, 1.7vw, 1.6rem)/1.3 var(--display); }
.invitation-date strong { display: block; font: 400 1.0625rem/1.5 var(--text); letter-spacing: .07em; color: var(--muted); margin-top: 11px; }
.welcome-copy .welcome-venues { font-size: 1rem; }
.text-link { display: inline-flex; align-items: center; min-height: 48px; border-bottom: 1px solid currentColor; font-size: 1.0625rem; margin-top: 21px; }
.section-heading { text-align: center; margin-bottom: 60px; }
.section-heading h2 { margin: 0 0 17px; }
.section-heading > p:last-child { color: var(--muted); }
.venue-grid { display: grid; gap: 66px; }
.venue { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; gap: 8%; }
.venue-image { aspect-ratio: 1.5; overflow: hidden; background: var(--green); }
.venue-photo img { width: 100%; height: 100%; object-fit: cover; }
.venue-reception .venue-photo img { transform: scale(1.24); transform-origin: 50% 85%; }
/* The copy column is as tall as the photograph: eyebrow and name sit level with the
   photo's top edge, place / time / map link drop to the foot, the link's rule level with
   the photo's bottom edge. The open middle is the point. */
.venue-copy { display: flex; flex-direction: column; align-items: flex-start; }
.venue-copy .eyebrow { margin-top: -.45em; }
.venue-copy .venue-place { margin-top: auto; padding-top: 32px; }
.venue-copy .eyebrow { color: var(--gold); }
h3 { font: 400 clamp(2.35rem, 3.9vw, 3.55rem)/1.02 var(--display); letter-spacing: -.005em; margin: 20px 0 25px; }
/* The venue name is the h3 now — the biggest type in the section is the thing a
   guest actually needs. Place and time sit under it as plain data. */
.venue-place { font-size: 1.0625rem; letter-spacing: .02em; color: var(--muted); }
.venue-time { font-size: 1.1875rem; margin-top: 4px; }
.venue-reception { grid-template-columns: 1fr 1.15fr; }
.venue-reception .venue-photo { grid-column: 2; grid-row: 1; }
.venue-reception .venue-copy { grid-column: 1; grid-row: 1; padding-left: 10%; }
/* The second axis break, and the one the page closes on. `.save-date` does not carry
   `.section` — its horizontal padding lives on `.date-spread` so the countdown below can
   run edge to edge. The date is the structure here, not a caption under a heading: three
   stacked numerals at display scale form a column and everything else is set beside it.
   Do not restack the copy under the numerals; that is the centred arrangement this
   replaced. */
.save-date { background: var(--green); color: var(--paper); padding: 104px 0 0; }
.date-spread { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8%; align-items: center; padding-inline: max(6%, calc((100% - 1160px) / 2)); }
/* Outlined, not filled. Hairline-on-ground is already this page's vocabulary (the hero
   border, the crest, every rule under a date), so an outlined Didone numeral reads as
   part of the system rather than as an effect. The fill is a half-step off the green so
   the column still reads if `-webkit-text-stroke` is unavailable. */
.date-stack { display: block; font: 400 clamp(5rem, 12.5vw, 11.5rem)/.84 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #2d4a3e; -webkit-text-stroke: 1.5px #cfb887b0; }
.date-stack span { display: block; }
.date-copy h2 { margin: 0 0 28px; }
.date-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: .9375rem; letter-spacing: 2px; color: #d8d1bf; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 15px 40px; font-size: 1.0625rem; transition: background .2s, transform .2s; }
.button-dark { background: var(--pink); color: var(--green); }
.button:hover { transform: translateY(-2px); background: #fff3e9; }
.save-date .button { margin-top: 32px; }
/* The countdown is the only changing thing on the page and the only thing that rewards a
   returning guest, so it gets the full width of the section rather than 22px of italic
   under a button. It shares the spread's left edge on purpose — the numerals, the
   heading and this band all hang off one axis. `:empty` keeps the rule and the padding
   from showing as a bare green strip when JavaScript is off. */
.countdown { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 24px; margin-top: 96px; border-top: 1px solid #bcaa806b; padding-block: 44px 56px; padding-inline: max(6%, calc((100% - 1160px) / 2)); }
.countdown:empty { display: none; }
.count-number { font: 400 clamp(4rem, 10.5vw, 9rem)/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.count-words { font: italic 400 clamp(1.35rem, 2.4vw, 2.1rem)/1.35 var(--display); color: #e3d3b6; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 35px 6%; }
.site-footer > p { text-align: center; font: italic 1.25rem/1.5 var(--display); }
.site-footer button { background: none; border: 0; min-height: 44px; padding: 10px 0; font: 1.0625rem var(--text); border-bottom: 1px solid currentColor; }
/* Stand-in body for pages that are not built yet (RSVP, registry): the page name at display
   scale on the venue green, inside the same inset hairline the hero uses. */
.placeholder { position: relative; min-height: calc(100svh - var(--header-h) - 120px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 96px 7%; text-align: center; background: var(--green); color: var(--paper); }
.placeholder::before { content: ''; position: absolute; inset: 23px; border: 1px solid #c7b99160; pointer-events: none; }
.placeholder h1 { font: italic 400 clamp(4rem, 12vw, 9rem)/1 var(--display); letter-spacing: -.005em; margin: 0 0 18px; }
.placeholder h1:focus { outline: none; }
.placeholder p { font-size: 1.25rem; color: #e3d3b6; }
.placeholder .text-link { margin-top: 28px; }
.placeholder .zola-registry-iframe { position: relative; z-index: 1; align-self: stretch; max-width: 72rem; margin: 32px auto 0; background: var(--paper); }
.placeholder .text-link:hover { color: #cfb887; }
.invitation{position:fixed;inset:0;z-index:30;background:#efe2df;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:30px 5%;overflow:auto;transition:opacity .65s,visibility .65s}.invitation[hidden]{display:none}.invite-top{width:100%;display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px}.invite-content{text-align:center;padding:30px 0}.invite-content>.eyebrow{font-size:12px;color:#75614c}.invite-content h1{font:400 clamp(47px,5vw,70px)/.97 var(--display);letter-spacing:-1.7px;margin:18px 0 38px}.invite-content h1 em{font-weight:400}.envelope{position:relative;display:block;width:420px;height:257px;margin:0 auto;border:0;background:transparent;perspective:1200px;filter:drop-shadow(0 15px 16px #77614b27);transition:transform .35s}.envelope:hover{transform:translateY(-5px) rotate(-1deg)}.envelope-back{position:absolute;inset:0;background:#e0ccbe;border-radius:3px}.envelope-front{position:absolute;inset:0;background:#f9f3e8;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);z-index:3}.envelope-front:after{content:'';position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.8%,#d7cabe 50%,transparent 50.4%),linear-gradient(-32deg,transparent 49.8%,#d7cabe 50%,transparent 50.4%);opacity:.5}.envelope-flap{position:absolute;inset:0;background:#f1e8da;clip-path:polygon(0 0,100% 0,50% 57%);z-index:4;transform-origin:top;transition:transform .65s;backface-visibility:hidden}.seal{display:flex;justify-content:center;align-items:center;position:absolute;top:43%;left:calc(50% - 30px);height:60px;width:60px;border-radius:50%;background:linear-gradient(130deg,#b59859,#d3ba80 45%,#a88746);border:3px double #987635;color:#604a27;z-index:5;font:24px var(--display);box-shadow:0 3px 6px #654c4330;transition:opacity .2s,transform .4s}.seal span{font-style:italic;font-size:16px}.envelope-letter{position:absolute;inset:12px 17px 15px;background:var(--paper);z-index:2;display:flex;justify-content:center;flex-direction:column;font:italic 16px var(--display);transition:transform .8s .35s;box-shadow:0 0 3px #0001}.envelope-letter strong{display:block;font:400 36px var(--display);margin-top:20px}.open-label{font-size:12px;letter-spacing:2px;margin-top:30px}.open-label span{margin-left:15px;font-size:17px}.invite-bottom{font-size:12px;letter-spacing:2.5px}.invitation.opening .envelope-flap{transform:rotateX(180deg)}.invitation.opening .seal{opacity:0;transform:translateY(20px)}.invitation.opening .envelope-letter{transform:translateY(-90px)}.invitation.leaving{opacity:0;visibility:hidden}.invitation-open{overflow:hidden}
/* The opening invitation borrows the green and gold of the venue stationery. */
.invitation { background: var(--green); color: var(--paper); }
.invitation::before { content: ''; position: fixed; inset: 16px; border: 1px solid #c7b99160; pointer-events: none; }
.invite-content h1 { font-size: clamp(3rem, 4.7vw, 4.5rem); letter-spacing: -.005em; }
.invite-top, .invite-bottom { color: #e0d9c6; }
.envelope { color: var(--green); }
.envelope-front { background: #eddbd5; }
.envelope-flap { background: #f0e1db; }
.envelope-back { background: #bcbfaf; }
.envelope-letter { color: var(--green); }
.envelope:focus:not(:focus-visible) { outline: none; }
.open-label { font-size: 1.0625rem; letter-spacing: .02em; color: #e3d1b1; }
.invite-top, .invite-bottom { font-size: .9375rem; }
/* Must stay below every `font:` shorthand above — the shorthand resets
   font-variation-settings, so an earlier declaration here is silently wiped. */
.hero h1, h2, h3, .crest, .hero-rsvp, .date-stack, .count-number, .invite-content h1, .lede-word, .placeholder h1 { font-variation-settings: 'opsz' var(--display-opsz); }
@media (max-width: 1000px) {
  .hero { min-height: 660px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .welcome { gap: 6%; }
  .welcome-photo img { height: 430px; }
  .save-date { padding-top: 80px; }
  .countdown { margin-top: 76px; }
  .venue { gap: 6%; }
  .venue-reception .venue-copy { padding-left: 0; }
  .site-footer { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  :root { --header-h: 72px; }
  .site-header { padding: 12px 6%; gap: 15px; }
  .monogram { font-size: 1.9rem; }
  nav { gap: 15px; }
  nav a { font-size: 1rem; letter-spacing: .02em; white-space: nowrap; }
  nav a:nth-child(2) { display: inline-flex; }
  .nav-boxed { border: 0; border-bottom: 1px solid var(--green); padding: 0; gap: 0; }
  .nav-boxed span { display: none; }
  .hero { height: auto; min-height: 630px; padding: 38px 8% 75px; }
  .hero-border { inset: 13px; }
  .hero-photo { object-position: 51% center; }
  .hero::before { background: linear-gradient(180deg, transparent 40%, #12241b5c 60%, #12241b52 78%, transparent 94%), linear-gradient(180deg, #13271e52 0%, #13271e42 28%, #15291f82 55%, #12221ba8 80%, #101d18d6 100%); }
  .crest { width: min(38vw, 140px); font-size: 2.9rem; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(2.2rem, 9.6vw, 3.4rem); margin-bottom: 19px; }
  .hero-date { font-size: 1.25rem; padding: 9px 20px; letter-spacing: 1.3px; }
  .hero-rsvp { min-width: 156px; min-height: 58px; margin-top: 28px; font-size: 1.5rem; }
  .section { padding: 66px 7%; }
  h2 { font-size: clamp(2.5rem, 7.5vw, 3.55rem); }
  .welcome { grid-template-columns: 1fr; gap: 38px; padding-inline: 0; }
  .welcome-copy { padding-inline: 7%; }
  .welcome h2 { max-width: 15ch; }
  .welcome-photo { margin-left: 7%; }
  .welcome-photo img { height: auto; aspect-ratio: 1.05; }
  .invitation-date { margin: 25px auto; }
  .invitation-date span { font-size: 1.75rem; }
  .welcome-copy .welcome-venues { font-size: 1rem; }
  .section-heading { margin-bottom: 37px; }
  .venue, .venue-reception { grid-template-columns: 1fr; gap: 6px; }
  .venue-reception .venue-photo, .venue-reception .venue-copy { grid-column: auto; grid-row: auto; }
  .venue-image { aspect-ratio: 1.5; }
  .venue-copy { padding: 22px 0 0; }
  .venue-copy .eyebrow { margin-top: 0; }
  .venue-copy .venue-place { padding-top: 0; }
  h3 { font-size: 2.6rem; margin: 14px 0 18px; }
  .venue-grid { gap: 43px; }
  .save-date { padding-top: 66px; }
  .date-spread { grid-template-columns: 1fr; gap: 26px; padding-inline: 7%; }
  .date-stack { font-size: clamp(4.6rem, 25vw, 7.5rem); -webkit-text-stroke-width: 1px; }
  .date-meta { gap: 4px 18px; font-size: .9375rem; letter-spacing: 1.5px; }
  .countdown { margin-top: 56px; gap: 0 18px; padding-block: 34px 44px; padding-inline: 7%; }
  .count-number { font-size: clamp(3.6rem, 19vw, 6rem); }
  .site-footer { flex-direction: column; gap: 17px; }
  .site-footer > p { letter-spacing: 1px; }
  .placeholder { padding-block: 72px; }
  .placeholder::before { inset: 13px; }
  .invitation { padding: 32px 8%; }
  .invite-top { font-size: .9375rem; letter-spacing: .7px; gap: 12px; }
  .invite-content { width: 100%; padding: 45px 0; }
  .invite-content h1 { font-size: 3rem; margin-bottom: 45px; }
  .envelope { width: min(100%, 360px); height: auto; aspect-ratio: 1.635; }
  .envelope-letter { font-size: .875rem; }
  .envelope-letter strong { font-size: 1.8rem; }
  .seal { width: 54px; height: 54px; left: calc(50% - 27px); }
  .open-label { font-size: .9375rem; letter-spacing: 1px; }
  .invite-bottom { font-size: .9375rem; letter-spacing: 1.5px; }
  .invitation.opening .envelope-letter { transform: translateY(-70px); }
}
@media (max-width: 380px) {
  .site-header { padding-inline: 4%; gap: 10px; }
  .site-header .monogram { font-size: 1.65rem; }
  .site-header .monogram span { font-size: 1rem; margin-inline: 1px; }
  nav { gap: 12px; }
  nav a { font-size: 1rem; }
  .nav-boxed span { display: none; }
  .hero { padding-inline: 7%; }
  .hero h1 { font-size: 2.05rem; }
  .crest { width: 38vw; font-size: 2.5rem; }
  .invitation-date span { font-size: 1.5rem; }
  .date-stack { font-size: 4.6rem; }
  .invite-top { flex-direction: column; align-items: center; gap: 3px; }
  .invite-content h1 { font-size: 2.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .invitation.opening .envelope-letter { transform: none; }
}