:root {
  --linen: #FBF8F1;
  --paper: #FFFFFF;
  --corn: #5B76C2;
  --peri: #AEBDE8;
  --butter: #F4DA80;
  --sage: #A3B597;
  --navy: #1B2747;
  --gold: #C49B52;
  --soft: #55607C;
  --display: "Libre Caslon Display", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --pad: clamp(20px, 3.4vw, 56px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--linen); color: var(--navy); font: 400 17px/1.65 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a, button { color: inherit; text-decoration: none; font: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; list-style: none; }
.caps { font: 600 11.5px/1.3 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.it { font-family: var(--serif); font-style: italic; }
.btn { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 30px; border-radius: 999px; background: var(--navy); color: var(--linen); font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; transition: background .35s, transform .35s; }
.btn:hover { background: var(--corn); transform: translateY(-2px); }

/* gingham + gold-beaded plates: the two recurring materials */
.gingham {
  background-color: var(--linen);
  background-image:
    linear-gradient(90deg, rgba(91, 118, 194, .2) 50%, transparent 50%),
    linear-gradient(rgba(91, 118, 194, .2) 50%, transparent 50%);
  background-size: 44px 44px;
}
.plate { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: 0 2px 2px rgba(27,39,71,.06), 0 40px 60px -30px rgba(27,39,71,.45); }
.plate::before { content: ""; position: absolute; inset: 4.2%; border-radius: 50%; border: 6px dotted var(--gold); }
.plate::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(196,155,82,.55); }
.plate__food { position: absolute; inset: 12%; border-radius: 50%; overflow: hidden; }
.plate__food img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Header ---------- */
header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--pad); }
.logo { display: flex; align-items: center; gap: 14px; }
.logo img:first-child { width: 36px; }
.logo img:last-child { width: 210px; }
header nav { display: flex; gap: 34px; }
header nav a { position: relative; }
header nav a::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); translate: -50% 0; opacity: 0; transition: opacity .3s; }
header nav a:hover::after { opacity: 1; }
header .btn { justify-self: end; height: 46px; padding: 0 22px; font-size: 11px; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 70px var(--pad) 70px; }
.hero .caps { color: var(--corn); font: 600 12px/1.3 var(--sans); letter-spacing: .32em; max-width: none; }
.hero h1 { font: 400 clamp(64px, 10.4vw, 176px)/.92 var(--display); letter-spacing: -.02em; margin: 26px 0 30px; }
.hero h1 .it { font-size: .94em; color: var(--corn); letter-spacing: -.03em; }
.hero p { max-width: 640px; margin: 0 auto; font: 400 21px/1.55 var(--serif); color: var(--soft); }

/* ---------- The table ---------- */
.table { position: relative; padding: 120px var(--pad) 130px; }
.table::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; background: var(--paper);
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 9.5px, transparent 10px) bottom left / 20px 14px repeat-x;
          mask: radial-gradient(circle at 50% 100%, #000 9.5px, transparent 10px) bottom left / 20px 14px repeat-x;
}
.table::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: var(--paper); }
.setting { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 70px; max-width: 1360px; margin: 0 auto; }

.menu { justify-self: end; width: 330px; padding: 38px 30px 34px; background: var(--paper); text-align: center; rotate: -2.5deg; box-shadow: 0 30px 50px -30px rgba(27,39,71,.5); outline: 1px solid rgba(27,39,71,.25); outline-offset: -12px; }
.menu > img { width: 34px; margin: 0 auto 12px; }
.menu h2 { font: 600 12px/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; margin-left: .5em; }
.menu .sub { display: block; font: italic 400 14px/1 var(--serif); color: var(--soft); margin: 10px 0 20px; }
.menu li + li { border-top: 1px dashed rgba(27,39,71,.15); }
.menu button { display: grid; width: 100%; padding: 9px 0; text-align: center; transition: color .3s; }
.menu button strong { font: 400 19px/1.25 var(--serif); }
.menu button span { font: italic 400 13px/1.35 var(--serif); color: var(--soft); }
.menu button:hover strong, .menu button.is-active strong { color: var(--corn); font-style: italic; }
.menu button.is-active strong::before, .menu button.is-active strong::after { content: "·"; color: var(--gold); margin: 0 .4em; font-style: normal; }

.main-plate { width: clamp(380px, 38vw, 580px); }
.main-plate .plate__food img { opacity: 0; scale: 1.08; rotate: -10deg; transition: opacity .8s ease, scale 1.2s cubic-bezier(.16,1,.3,1), rotate 1.2s cubic-bezier(.16,1,.3,1); }
.main-plate .plate__food img.is-on { opacity: 1; scale: 1; rotate: 0deg; }
.bread { position: absolute; width: 170px; right: -90px; top: -40px; }
.bread .plate__food { inset: 15%; }
.bread::before { border-width: 4px; }
.glass { position: absolute; width: 120px; aspect-ratio: 1; border-radius: 50%; left: -40px; bottom: 30px; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(174,189,232,.45) 55%, rgba(91,118,194,.25) 70%, transparent 72%); box-shadow: 0 0 0 2px rgba(255,255,255,.7) inset, 0 20px 30px -18px rgba(27,39,71,.4); }
.plate-wrap { position: relative; }

.place { justify-self: start; display: grid; gap: 34px; justify-items: start; }
.tent { width: 290px; padding: 42px 20px 30px; background: var(--paper); text-align: center; rotate: 4deg; box-shadow: 0 26px 40px -24px rgba(27,39,71,.5); background-image: linear-gradient(180deg, rgba(27,39,71,.07), transparent 22%); }
.tent .caps { font-size: 10.5px; color: var(--soft); }
.tent strong { display: block; font: italic 400 66px/1 var(--serif); margin: 10px 0 12px; color: var(--navy); }
.tent img { width: 26px; margin: 0 auto; }
.place .phone { font: italic 400 18px/1.4 var(--serif); color: var(--soft); }
.place .phone a { color: var(--navy); border-bottom: 1px solid var(--gold); }

/* ---------- Order of service ---------- */
.section { padding: 140px var(--pad); }
.course-card { max-width: 1280px; margin: 0 auto; background: var(--paper); padding: 70px 60px 64px; outline: 1px solid var(--navy); outline-offset: -16px; box-shadow: inset 0 0 0 22px var(--paper), inset 0 0 0 23px rgba(27,39,71,.35); text-align: center; }
.course-card > .caps { color: var(--corn); }
.course-card h2 { font: 400 clamp(46px, 5vw, 80px)/1 var(--display); margin: 18px 0 60px; }
.course-card h2 .it { color: var(--corn); }
.courses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.courses li { padding: 0 30px; display: grid; gap: 12px; align-content: start; }
.courses li + li { border-left: 1px solid rgba(27,39,71,.16); }
.courses .it { color: var(--gold); font-size: 18px; }
.courses h3 { font: 400 30px/1.1 var(--display); }
.courses p { font-size: 15px; color: var(--soft); }

/* ---------- From our tables ---------- */
.tables-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 70px; }
.h2 { font: 400 clamp(52px, 6vw, 104px)/.96 var(--display); letter-spacing: -.02em; }
.h2 .it { color: var(--corn); font-size: .95em; }
.tables-head p { max-width: 380px; font: 400 19px/1.5 var(--serif); color: var(--soft); }
.runner { position: relative; padding: 70px 0; margin-inline: calc(var(--pad) * -1); }
.runner::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 56%; translate: 0 -50%; background: var(--sage); opacity: .35; }
.runner__row { position: relative; display: flex; align-items: center; justify-content: center; gap: 34px; width: max-content; margin-left: 50%; translate: -50% 0; }
.runner figure { display: grid; justify-items: center; gap: 16px; }
.runner figure:nth-child(odd) { translate: 0 -34px; }
.runner figure:nth-child(even) { translate: 0 34px; }
.runner .plate { transition: rotate 1.2s cubic-bezier(.16,1,.3,1), scale .8s cubic-bezier(.16,1,.3,1); }
.runner figure:hover .plate { rotate: 14deg; scale: 1.04; }
.runner figcaption { background: var(--paper); padding: 8px 16px; font: italic 400 15px/1 var(--serif); box-shadow: 0 10px 20px -14px rgba(27,39,71,.5); rotate: -2deg; }

/* ---------- Host ---------- */
.host { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 100px; align-items: center; max-width: 1280px; margin: 0 auto; }
.host .plate-wrap { width: min(100%, 520px); justify-self: center; }
.host .plate__food img { object-position: 50% 28%; }
.host .tent { position: absolute; right: -40px; bottom: -10px; width: 250px; padding: 30px 18px 22px; rotate: -5deg; }
.host .tent strong { font-size: 36px; }
.host__body { display: grid; gap: 28px; }
.host__body .caps { color: var(--corn); }
.host__body .quote { font: italic 400 32px/1.3 var(--serif); }
.host__body p { color: var(--soft); font-size: 18px; }
.host__body .sig { font: italic 400 20px/1.4 var(--serif); color: var(--navy); }

/* ---------- CTA + footer ---------- */
.cta { background: var(--butter); text-align: center; padding: 150px var(--pad); }
.cta h2 { font: 400 clamp(60px, 8.6vw, 150px)/.94 var(--display); letter-spacing: -.02em; max-width: 13ch; margin: 0 auto 50px; }
.cta h2 .it { font-size: .93em; }
.cta .actions { display: flex; justify-content: center; align-items: center; gap: 30px; flex-wrap: wrap; }
.cta .phone { font: italic 400 22px/1 var(--serif); border-bottom: 1px solid var(--navy); padding-bottom: 6px; }
.strip { height: 44px; }
footer { background: var(--navy); color: var(--linen); padding: 60px var(--pad) 46px; display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 30px; }
footer img { width: 280px; }
footer nav { display: flex; gap: 30px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  header nav { display: none; }
  .setting { grid-template-columns: 1fr; justify-items: center; gap: 60px; }
  .menu, .place { justify-self: center; }
  .courses { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .courses li:nth-child(3) { border-left: 0; }
  .host { grid-template-columns: 1fr; }
  .tables-head { flex-direction: column; align-items: start; }
}

.awning-wrap { position: relative; z-index: 4; }
.awning-pipe { filter: drop-shadow(0 4px 0 var(--magenta)) drop-shadow(0 14px 18px rgba(74,10,36,.18)); }
.awning {
  height: 104px;
  background:
    linear-gradient(180deg, rgba(74,10,36,.10), transparent 45%),
    repeating-linear-gradient(90deg, var(--pink) 0 64px, #fff 64px 128px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 32px) no-repeat, radial-gradient(circle at 50% 0, #000 31.5px, transparent 32.5px) bottom left / 64px 32px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 32px) no-repeat, radial-gradient(circle at 50% 0, #000 31.5px, transparent 32.5px) bottom left / 64px 32px repeat-x;
}
.sign {
  position: absolute; left: 50%; top: 58px; translate: -50% 0;
  width: 360px; padding: 22px 30px 20px; border-radius: 22px;
  background: var(--cream); border: 3px solid var(--magenta);
  box-shadow: 0 0 0 6px var(--cream), 0 0 0 7.5px var(--magenta), 0 22px 40px -18px rgba(74,10,36,.45);
  display: grid; justify-items: center; gap: 10px;
  transform-origin: 50% -40px; animation: swing 6s ease-in-out infinite;
}
.sign::before, .sign::after { content: ""; position: absolute; top: -46px; width: 2px; height: 46px; background: var(--wine); opacity: .55; }
.sign::before { left: 64px; } .sign::after { right: 64px; }
.sign img.lotus { width: 52px; }
.sign img.word { width: 270px; }
@keyframes swing { 0%,100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }


/* ---------- Notecard ---------- */
.notecard { position: relative; max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; --h: .18; }
.notecard::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 60px; translate: -50% 0; background: linear-gradient(90deg, transparent, rgba(27, 39, 71, .07) 48%, rgba(255,255,255,.6) 52%, transparent); pointer-events: none; }
.notecard > div { padding: 70px 64px; }
.mount { position: relative; rotate: -3deg; background: #fff; padding: 14px; box-shadow: 0 20px 30px -18px rgba(27, 39, 71, .4); }
.mount img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 25%; }
.mount i { position: absolute; width: 38px; height: 38px; background: var(--navy); }
.mount i:nth-child(2) { left: 4px; top: 4px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.mount i:nth-child(3) { right: 4px; top: 4px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.mount i:nth-child(4) { left: 4px; bottom: 4px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.mount i:nth-child(5) { right: 4px; bottom: 4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.mount figcaption { text-align: center; font: 400 40px/1 var(--script); color: var(--corn); padding-top: 14px; }
.note-body { display: grid; gap: 22px; align-content: center; }
.note-body .caps { color: var(--corn); font: 700 11.5px/1.3 var(--sans); font-style: normal; letter-spacing: .3em; }
.note-body h2 { font: 400 60px/1 var(--display); }
.note-body h2 .it { color: var(--corn); }
.note-body p { font: italic 400 18px/1.7 var(--serif); color: #2B3554; }
.note-body .sig { font: 400 64px/1 var(--script); color: var(--corn); margin-top: -4px; }

/* ---------- RSVP ---------- */
.rsvp-sec { position: relative; display: grid; grid-template-columns: 760px 1fr; gap: 0; max-width: 1240px; margin: 0 auto; align-items: center; }
.rsvp { position: relative; z-index: 2; width: 760px; padding: 16px; --g: 16px; rotate: -1.4deg; box-shadow: 0 50px 70px -40px rgba(27, 39, 71, .55); }
.rsvp__inner { background: var(--card); padding: 56px 60px 48px; display: grid; gap: 28px; }
.rsvp__head { text-align: center; display: grid; gap: 6px; }
.rsvp__head .caps { color: var(--corn); }
.rsvp__head h2 { font: 400 76px/1 var(--display); }
.rsvp__head p { font: italic 400 18px/1.4 var(--serif); color: var(--soft); }
.madlib { font: italic 400 25px/2.1 var(--serif); color: var(--navy); text-align: center; }
.madlib .m { font: 400 40px/1 var(--script); color: var(--corn); margin-right: 4px; }
.madlib input { font: italic 400 24px/1 var(--serif); color: var(--corn); border: 0; border-bottom: 1px solid rgba(27, 39, 71, .45); background: transparent; text-align: center; padding: 0 6px 2px; outline: none; }
.madlib input:focus { border-bottom-color: var(--corn); }
.madlib input::placeholder { color: rgba(91, 118, 194, .45); }
.boxes { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 12px 34px; }
.boxes button { display: flex; align-items: center; gap: 12px; font: italic 400 19px/1 var(--serif); }
.boxes .sq { position: relative; width: 22px; height: 22px; border: 1.5px solid var(--navy); flex: none; }
.boxes .sq::after { content: ""; position: absolute; inset: 2px; background: url("../img/table/lotus-corn.png") center / contain no-repeat; opacity: 0; scale: .4; transition: opacity .3s, scale .5s var(--spring); }
.boxes button[aria-pressed="true"] .sq::after { opacity: 1; scale: 1; }
.rsvp__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(27, 39, 71, .14); }
.rsvp__foot p { font: italic 400 17px/1.4 var(--serif); color: var(--soft); }
.stamp-seal { position: absolute; right: 36px; bottom: 30px; z-index: 3; width: 120px; aspect-ratio: 1; display: grid; place-items: center; opacity: 0; scale: 2.2; pointer-events: none; filter: drop-shadow(2px 4px 4px rgba(60, 10, 20, .35)); }
.stamp-seal.is-on { animation: stampIn .7s var(--spring) forwards; }
@keyframes stampIn { 0% { opacity: 0; scale: 2.2; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }
.return-env { position: relative; z-index: 1; width: 560px; height: 350px; margin-left: -80px; rotate: 7deg; background: var(--env); border-radius: 6px; padding: 50px 40px 40px 130px; box-shadow: 0 40px 60px -36px rgba(27, 39, 71, .55); display: grid; align-content: end; gap: 6px; }
.return-env::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(28deg, rgba(27,39,71,.06), transparent 45%), linear-gradient(-28deg, rgba(255,255,255,.2), transparent 45%); }
.return-env p { position: relative; font: italic 400 18px/1.5 var(--serif); color: var(--navy); }
.return-env p:first-of-type { font: 400 30px/1.1 var(--display); font-style: normal; margin-bottom: 4px; }
.return-env a { border-bottom: 1px solid rgba(27,39,71,.3); }
.env-stamp { position: absolute; right: 34px; top: 30px; width: 96px; height: 116px; padding: 9px; background: #fff; -webkit-mask: radial-gradient(circle 5px at 5px 5px, transparent 98%, #000) -5px -5px / 12px 12px, linear-gradient(#000 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat; mask: radial-gradient(circle 5px at 5px 5px, transparent 98%, #000) -5px -5px / 12px 12px, linear-gradient(#000 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat; rotate: 4deg; }
.env-stamp div { width: 100%; height: 100%; background: var(--corn); display: grid; place-items: center; }
.env-stamp img { width: 62%; }

/* The chosen Tablescape direction: linen, cornflower, blush & botanical ink. */
:root { --paper:#FFFDF8; --card:#FFFDF8; --pink:#E8B6BB; --blush:#F5E2E3; --rose:#A85566; --cream:#FBF8F1; --wine:#4E3948; --magenta:#A85566; --env:#C2CEE9; --table:#FBF8F1; --script:"Mrs Saint Delafield",cursive; --spring:cubic-bezier(.34,1.56,.64,1); }
body { background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.045' filter='url(%23n)'/%3E%3C/svg%3E"); }
:focus-visible { outline:2px solid var(--rose); outline-offset:5px; }
.skip-link { position:absolute; z-index:99; left:20px; top:-100px; background:var(--paper); padding:12px; }.skip-link:focus { top:10px; }
header { grid-template-columns:auto 1fr auto; gap:30px; padding-block:20px; } header nav { justify-content:center; gap:26px; font-size:10px; letter-spacing:.18em; }.logo img:last-child { width:190px; }.logo img:first-child { width:27px; }
.awning { height:100px; background:linear-gradient(180deg,rgba(168,85,102,.13),transparent 65%),repeating-linear-gradient(90deg,#E9BBC0 0 56px,#FFFDF8 56px 112px); mask-size:100% calc(100% - 28px),56px 28px; }
.awning-pipe { filter:drop-shadow(0 2px 0 #BE8590) drop-shadow(0 10px 12px rgba(78,57,72,.13)); }
.sign { width:300px; top:45px; padding:18px 25px; border-width:1px; border-radius:50% 50% 12px 12px / 17% 17% 12px 12px; gap:9px; box-shadow:0 0 0 5px var(--cream),0 0 0 6px var(--rose),0 24px 35px -24px rgba(27,39,71,.35); animation:none; }
.sign img.lotus { width:32px; }.sign img.word { width:245px; }.sign .caps { font-size:8px; letter-spacing:.23em; }.sign::before,.sign::after { top:-35px; height:35px; background:var(--gold); }
.hero { position:relative; padding:120px var(--pad) 70px; isolation:isolate; }.hero h1 { font-size:clamp(68px,9.3vw,150px); margin:24px 0; }.hero h1 .it { color:var(--rose); }.hero p:not(.caps) { font-size:19px; max-width:620px; }.hero-link { display:inline-flex; gap:18px; margin-top:30px; color:var(--rose); border-bottom:1px solid #D7A9B0; padding-bottom:9px; letter-spacing:.19em; font-size:10px; }
.garden-art { position:absolute; pointer-events:none; user-select:none; z-index:-1; object-fit:contain; }.garden-art--hero { width:320px; left:-30px; bottom:-70px; opacity:.85; }.hero::after { content:"✧"; position:absolute; right:9%; top:160px; color:var(--gold); font:40px var(--display); }
.table { padding:95px var(--pad) 115px; }.setting { gap:45px; }.menu { width:285px; padding:32px 26px; }.menu button strong { font-size:17px; }.menu button span { font-size:12px; }.main-plate { width:clamp(320px,35vw,530px); }.place .tent { width:225px; }.tent strong { font-size:40px; color:var(--rose); }.tent { background-color:var(--paper); }.place { gap:26px; }.place .btn { height:48px; padding:0 22px; font-size:10px; }.place .phone { font-size:15px; }
.serving { position:absolute; width:260px; left:50%; bottom:-46px; translate:-50% 0; rotate:2deg; padding:17px 22px; background:var(--paper); border:1px solid #C49B5280; outline:1px solid #C49B5270; outline-offset:-6px; box-shadow:0 15px 30px -22px #1B2747; text-align:center; z-index:2; }.serving .caps { color:var(--rose); font-size:8px; letter-spacing:.14em; }.serving strong { display:block; font:400 24px/1.15 var(--display); margin:5px 0; }.serving > span:last-child { font:italic 12px/1.35 var(--serif); color:var(--soft); }
.section { padding:100px var(--pad); }.tables-head { max-width:1250px; margin:0 auto 35px; }.tables-head .it { color:var(--rose); }.runner::before { background:var(--blush); opacity:.75; }.runner { overflow-x:auto; padding-inline:30px; }.runner__row { margin-inline:auto; translate:none; gap:28px; }.runner figure { flex:none; }.runner figcaption { color:var(--rose); }.runner .plate { width:220px !important; }.runner figure:nth-child(even) .plate { width:185px !important; }
.order { padding:110px var(--pad) 60px; overflow:hidden; }.order .head { text-align:center; }.order .head > .caps { color:var(--rose); margin-bottom:22px; }.order .h2 { font-size:clamp(48px,5.5vw,86px); }.order .intro { font:italic 18px/1.6 var(--serif); color:var(--soft); margin-top:22px; }.process-line { position:relative; max-width:1200px; margin:15px auto 0; padding-top:135px; }.process-line > svg { position:absolute; top:0; width:100%; height:160px; }.bunting { display:flex; justify-content:space-evenly; position:absolute; inset:28px 0 auto; }.bunting i { width:32px; height:48px; background:var(--pink); clip-path:polygon(0 0,100% 0,50% 100%); rotate:8deg; }.bunting i:nth-child(3n) { background:var(--sage); }.bunting i:nth-child(2n) { background:var(--peri); }.bunting i:nth-child(n+4):nth-child(-n+12) { translate:0 38px; }.bunting i:nth-child(n+6):nth-child(-n+10) { translate:0 54px; }
.process-tags { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; padding:0 20px; }.process-tags li { position:relative; padding:48px 24px 28px; background:#E4CFAC; text-align:center; clip-path:polygon(20% 0,80% 0,100% 14%,100% 100%,0 100%,0 14%); rotate:-3deg; }.process-tags li:nth-child(2n) { translate:0 35px; rotate:3deg; background:var(--blush); }.process-tags li::before { content:""; position:absolute; top:16px; left:50%; translate:-50% 0; width:12px; height:12px; border-radius:50%; background:var(--linen); box-shadow:0 0 0 4px #F2E6D4; }.process-tags .n { font:italic 24px var(--serif); color:var(--rose); }.process-tags h3 { font:400 28px/1.1 var(--display); margin:8px 0 12px; }.process-tags p { font-size:13px; color:#4D5062; line-height:1.65; }
#host { position:relative; isolation:isolate; margin-top:55px; }.garden-art--note { width:250px; right:-20px; top:15px; transform:scaleX(-1); opacity:.75; }.notecard { background:var(--paper); box-shadow:0 18px 50px -25px #62534635; border:1px solid #D7C7AA; outline:1px solid #D7C7AA80; outline-offset:-10px; }.notecard > div { padding:58px 55px; }.mount figcaption { color:var(--rose); }.mount i { background:#AF9974; }.note-body h2 .it,.note-body .sig,.note-body .caps { color:var(--rose); }.note-body p { font-size:17px; }.note-body .sig { font-size:55px; }
#reserve { padding-top:100px !important; padding-bottom:110px; }.rsvp-sec { grid-template-columns:minmax(0,760px) minmax(0,1fr); }.rsvp { width:100%; background-color:var(--blush); background-image:linear-gradient(90deg,#A8556616 50%,transparent 50%),linear-gradient(#A8556616 50%,transparent 50%); background-size:24px 24px; }.rsvp__inner { padding:45px 40px 35px; gap:23px; }.rsvp__head h2 .it { color:var(--rose); }.rsvp__head .caps { color:var(--rose); }.rsvp__head h2 { font-size:72px; }.madlib input { max-width:100%; color:var(--rose); font-size:21px; }.madlib input::placeholder { color:#A85566AA; }.madlib input[name=guests] { width:65px; }.madlib input[type=date] { width:175px; font-size:17px; }.madlib { font-size:22px; }.occasion-field { border:0; padding:0; margin:0; }.occasion-field legend { text-align:center; font-size:9px; color:var(--soft); margin:0 auto 20px; }.boxes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.boxes button { font-size:17px; text-align:left; }.email-field,.vision-field { font:italic 16px/1.5 var(--serif); color:var(--soft); display:grid; gap:6px; }.email-field input,.vision-field textarea { font:400 15px/1.6 var(--sans); padding:10px; width:100%; border:0; border-bottom:1px solid #C5BBA8; background:#F6F1E855; color:var(--navy); border-radius:0; }.vision-field span { font-size:12px; }.rsvp__foot .btn { padding-inline:22px; font-size:10px; height:48px; }.form-note { font:12px/1.6 var(--sans); text-align:center; color:var(--soft); }.form-status { font:14px/1.5 var(--sans); }.form-status:empty { display:none; }.return-env { width:440px; max-width:none; padding-left:105px; }.return-env p { font-size:14px; }.return-env p:first-of-type { font-size:27px; }.stamp-seal { right:18px; bottom:50px; width:75px; }.seal__wax { background:var(--pink); border-radius:45%; border:3px solid #A8556660; }.seal__ring { position:absolute; inset:10px; border:1px solid var(--rose); border-radius:50%; }
footer { padding-block:45px; } footer img { width:240px; } footer nav { font-size:9px; gap:22px; }
@media(min-width:1500px) { .setting { gap:65px; }.menu { width:320px; }.place .tent { width:260px; } }
@media(max-width:1100px) { header { grid-template-columns:1fr auto; }.setting { grid-template-columns:285px minmax(0,1fr); gap:55px; max-width:900px; }.place { grid-column:1/-1; grid-template-columns:auto auto; align-items:center; gap:25px; }.place .tent { display:none; }.place .phone { margin:0; }.main-plate { width:min(44vw,460px); }.bread { right:-20px; width:120px; }.rsvp-sec { grid-template-columns:minmax(0,1fr); max-width:760px; }.return-env { width:min(540px,85%); margin:-15px auto 0; height:260px; padding:80px 30px 30px; rotate:3deg; }.process-tags { gap:18px; padding:0; }.process-tags li { padding-inline:16px; }.notecard > div { padding:45px 35px; } }
@media(max-width:700px) { :root { --pad:22px; }header { gap:10px; padding:16px; }.logo { gap:8px; }.logo img:last-child { width:146px; }.logo img:first-child { width:20px; }header .btn { height:38px; padding:0 14px; font-size:8px; letter-spacing:.1em; }.awning { height:73px; }.sign { top:31px; width:235px; padding:14px 20px; }.sign img.word { width:190px; }.sign img.lotus { width:25px; }.sign .caps { font-size:7px; }.hero { padding-top:110px; padding-bottom:55px; }.hero h1 { font-size:70px; max-width:7ch; margin:25px auto; }.hero p:not(.caps) { font-size:17px; max-width:300px; }.hero .caps { font-size:9px; letter-spacing:.18em; max-width:240px; margin:auto; }.garden-art--hero { width:190px; left:-60px; bottom:-15px; opacity:.65; }.hero::after { right:8%; top:175px; font-size:22px; }.hero-link { margin-top:25px!important; }.table { padding:60px 22px 55px; }.setting { grid-template-columns:minmax(0,1fr); gap:55px; }.menu { width:min(320px,100%); order:2; }.plate-wrap { order:1; margin-bottom:10px; }.main-plate { width:min(78vw,400px); }.bread { width:95px; right:-15px; top:-12px; }.glass { width:72px; left:-12px; }.serving { width:230px; bottom:-30px; padding:14px 18px; }.place { order:3; grid-column:auto; grid-template-columns:1fr; gap:15px; justify-items:center; }.menu button { padding:11px 0; }.section { padding:65px 22px; }.tables-head { gap:20px; }.h2 { font-size:56px; }.tables-head p { font-size:17px; }.runner { padding-block:65px; }.runner .plate { width:190px!important; }.runner figure:nth-child(even) .plate { width:165px!important; }.order { padding:70px 22px 30px; }.order .h2 { font-size:54px; }.order .intro { font-size:16px; }.process-line { padding-top:100px; }.process-tags { grid-template-columns:1fr 1fr; gap:28px 16px; }.process-tags li { padding:40px 16px 24px; rotate:-2deg; }.process-tags li:nth-child(2n) { translate:0 20px; }.process-tags h3 { font-size:27px; }.process-tags p { font-size:12px; }.bunting i { width:20px; height:28px; }.bunting i:nth-child(3n) { display:none; }#host { margin-top:10px; padding-top:65px!important; }.notecard { grid-template-columns:1fr; }.notecard::after { display:none; }.notecard > div { padding:35px 30px; }.notecard > div:first-child { padding-bottom:15px; }.mount { max-width:320px; margin:auto; }.note-body h2 { font-size:56px; }.note-body p { font-size:16px; }.note-body .sig { font-size:48px; }.garden-art--note { width:160px; right:-55px; top:5px; }#reserve { padding-top:35px!important; padding-bottom:65px; }.rsvp { rotate:0deg; padding:10px; }.rsvp__inner { padding:30px 20px 25px; }.rsvp__head h2 { font-size:62px; }.rsvp__head p { font-size:16px; }.madlib { font-size:20px; }.madlib input { font-size:19px; }.madlib input[name=name],.madlib input[name=location] { width:145px; }.boxes { gap:16px 10px; }.boxes button { font-size:15px; gap:7px; }.boxes .sq { width:19px; height:19px; }.rsvp__foot { flex-direction:column; gap:20px; }.rsvp__foot .btn { width:100%; justify-content:center; }.return-env { width:90%; padding:95px 25px 30px; height:290px; }.return-env p { overflow-wrap:anywhere; }.env-stamp { width:60px; height:75px; right:20px; top:20px; }footer { padding:35px 22px; justify-content:center; text-align:center; }footer nav { justify-content:center; } }
main { overflow:clip; }
.main-plate .plate__food img { transition:opacity .35s ease,scale .6s ease,rotate .6s ease; }
.hero-link.caps { color:var(--rose); font-size:10px; letter-spacing:.19em; }
.email-draft-link { color:var(--rose); text-decoration:underline; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important; transition:none!important; }.stamp-seal.is-on { opacity:1; scale:1; } }