/* Brass, painted ivory and folded paper. Motion is driven by a damped spring. */
.awning-wrap { perspective:1100px; }
.awning { background-image:linear-gradient(180deg,#80516026,transparent 45%,#FFFFFF18 80%),repeating-linear-gradient(90deg,#E9BBC0 0 56px,#FFFDF8 56px 112px); }
.sign-rig {
  position:absolute; top:7px; left:50%; width:344px; padding-top:51px;
  translate:-50% 0; transform-origin:50% 0; z-index:5;
  transform:rotateZ(var(--swing-angle,0deg)) rotateY(var(--swing-depth,0deg));
  user-select:none; touch-action:pan-y;
}
.sign-rig img { pointer-events:none; -webkit-user-drag:none; }
.sign-chain {
  position:absolute; width:5px; height:69px; top:-5px;
  background:repeating-linear-gradient(180deg,transparent 0 2px,#F7E5B7 2px 5px,#8E7040 5px 7px,transparent 7px 9px);
  border-inline:1px solid #96744190; border-radius:4px;
  box-shadow:1px 1px 1px #4E394830; pointer-events:none;
}
.sign-chain--left { left:66px; }.sign-chain--right { right:66px; }
.sign-rig .sign {
  position:relative; left:auto; top:auto; width:100%; translate:none;
  padding:7px; gap:0; border:1px solid #9F7C47; border-radius:48% 48% 13px 13px / 16% 16% 13px 13px;
  background:linear-gradient(135deg,#FFFDF8,#E6DCCA);
  box-shadow:0 2px 0 #DBC5A0,0 4px 0 #A28863,0 6px 2px #785F4426,3px 18px 27px -12px #443D423A;
  transform:none; animation:none; cursor:grab;
}
.sign-rig .sign:active { cursor:grabbing; }
.sign-rig .sign::before,.sign-rig .sign::after { display:none; }
.sign-face {
  position:relative; width:100%; display:grid; justify-items:center; gap:8px;
  padding:24px 24px 19px; border:1px solid #BE899080;
  border-radius:48% 48% 8px 8px / 15% 15% 8px 8px;
  background:radial-gradient(ellipse at var(--shine-x,35%) 0%,#FFFFFFDB,transparent 72%),linear-gradient(105deg,#F9F3E7,#FFFDF6 55%,#F2EADD);
  box-shadow:inset 0 0 0 3px #FFFDF8,inset 0 0 0 4px #C9AF7859,inset 0 4px 9px #FFFFFF;
}
.sign-pin { position:absolute; top:13px; z-index:2; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 32% 25%,#FFF5D2,#C0A064 45%,#80623B); box-shadow:0 1px 2px #4E394847; }
.sign-pin::after { content:""; position:absolute; left:2px; top:3px; width:4px; height:1px; background:#715538; rotate:-30deg; }
.sign-pin--left { left:63px; }.sign-pin--right { right:63px; }
.sign-flourish { position:absolute; top:14px; display:flex; align-items:center; gap:10px; color:#B49661; font:10px/1 var(--serif); }
.sign-flourish span { display:block; width:52px; height:1px; background:linear-gradient(90deg,transparent,#B4966180,transparent); }
.sign-rig .lotus { width:31px; margin-top:3px; filter:drop-shadow(0 1px 0 #FFFFFF); }
.sign-rig .word { width:270px; filter:drop-shadow(0 1px 0 #FFFFFF); }
.sign-rig .sign-location { font-size:7px; color:#776851; letter-spacing:.35em; margin-top:1px; }
.sign-motto { font:italic 14px/1.2 var(--serif); color:var(--rose); margin-top:4px; }
.hero { padding-top:150px; }

/* Each tag has its own pivot, cord, reinforced eyelet and paper face. */
.process-line { padding-top:0; margin-top:40px; }
.process-line > .process-twine--second { display:none; }
.process-tags { min-height:470px; padding:0 20px; gap:32px; }
.process-tags li,.process-tags li:nth-child(2n) { position:relative; background:none; padding:0; clip-path:none; rotate:none; translate:none; text-align:center; }
.process-tags li::before { display:none; }
.tag-hanger {
  position:relative; margin-top:var(--knot-y,95px); padding-top:var(--cord-length,76px);
  transform-origin:50% 0;
  transform:rotateZ(calc(var(--rest-angle,-2deg) + var(--swing-angle,0deg))) rotateY(var(--swing-depth,0deg));
  cursor:grab; outline-offset:9px; user-select:none; touch-action:pan-y;
}
.tag-hanger:active { cursor:grabbing; }
.process-tags li:nth-child(2n) .tag-hanger { --rest-angle:2deg; --cord-length:104px; }
.tag-string {
  position:absolute; top:0; left:50%; translate:-50% 0; width:2px; height:calc(var(--cord-length,76px) + 20px);
  background:repeating-linear-gradient(0deg,#9A835E 0 2px,#DDD0AF 2px 4px);
  box-shadow:1px 0 1px #806B4226; z-index:2; pointer-events:none;
}
.tag-paper {
  position:relative; isolation:isolate; min-height:260px; padding:53px 25px 25px;
  filter:drop-shadow(3px 6px 3px #59443122);
}
.tag-paper::before {
  content:""; position:absolute; inset:0; z-index:-1;
  clip-path:polygon(19% 0,81% 0,100% 13%,100% 100%,0 100%,0 13%);
  background:radial-gradient(ellipse at var(--shine-x,25%) 0%,#FFFFFF75,transparent 65%),repeating-linear-gradient(0deg,#9D775008 0 1px,transparent 1px 3px),linear-gradient(110deg,#E1CCAA,#ECDDC1 45%,#DAC39E);
  box-shadow:inset 0 -2px 0 #AD90664D;
}
.process-tags li:nth-child(2n) .tag-paper::before { background:radial-gradient(ellipse at var(--shine-x,25%) 0%,#FFFFFF80,transparent 65%),repeating-linear-gradient(0deg,#AC596609 0 1px,transparent 1px 3px),linear-gradient(110deg,#ECD4D5,#FAE9E8 45%,#E6CACD); }
.tag-eyelet { position:absolute; top:15px; left:50%; translate:-50% 0; width:15px; height:15px; border:4px solid #EFE5CD; border-radius:50%; background:var(--linen); box-shadow:0 0 0 1px #A48C6380,inset 0 1px 3px #88745050,0 1px 1px #FFFFFF; z-index:1; }
.tag-paper .n { font-size:27px; }
.tag-paper h3 { margin-block:8px 13px; }
.tag-paper p { color:#484957; line-height:1.65; }
.tag-flower { width:22px; margin:19px auto 0; opacity:.65; }

/* Larger originals, room to browse, and a full photograph on opening a plate. */
.gallery-controls { max-width:1250px; margin:20px auto 0; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.gallery-controls p { font:italic 16px/1.5 var(--serif); color:var(--rose); }
.gallery-controls > div { display:flex; gap:10px; }
.gallery-arrow { display:grid; place-items:center; width:46px; height:46px; border:1px solid #B29B7270; border-radius:50%; color:var(--navy); background:#FFFDF880; transition:background .2s,translate .2s; font-size:22px; }
.gallery-arrow:hover { background:var(--blush); translate:0 -2px; }.gallery-arrow:disabled { opacity:.3; cursor:default; translate:none; }
.runner { padding:65px max(var(--pad),30px) 90px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#B7949A #EDE6DA; }
.runner__row { gap:40px; }
.runner figure { scroll-snap-align:center; }
.runner figure:nth-child(odd) { translate:0 -14px; }.runner figure:nth-child(even) { translate:0 18px; }
.runner figure .gallery-plate { display:block; padding:0; width:clamp(340px,29vw,430px)!important; cursor:zoom-in; background:radial-gradient(circle at 35% 25%,#FFFFFF,#F8F5ED 70%,#E9E2D7); box-shadow:0 2px 1px #FFFFFF,0 5px 10px #776A5720,0 28px 45px -24px #443D4245; }
.runner figure:nth-child(even) .gallery-plate { width:clamp(330px,27vw,400px)!important; }
.runner .gallery-plate::before { border-width:5px; border-color:#C1A366; }.runner .gallery-plate::after { inset:8%; box-shadow:inset 0 0 0 1px #B7945570; }
.runner .plate__food { inset:10%; box-shadow:0 0 0 1px #A98C4740; }
.runner figure:hover .plate { rotate:3deg; scale:1.025; }.runner figcaption { padding:12px 20px; font-size:18px; }
.photo-dialog { width:min(1100px,calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 48px); padding:24px; border:1px solid #BCA271; border-radius:4px; background:var(--paper); color:var(--navy); box-shadow:0 30px 100px #17213970; }
.photo-dialog::backdrop { background:#18213ACE; backdrop-filter:blur(6px); }
.photo-dialog__toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.photo-dialog__toolbar .caps { font-size:10px; color:var(--rose); letter-spacing:.2em; }
.photo-dialog__toolbar button { display:flex; align-items:center; gap:14px; font-size:12px; padding:5px; }
.photo-dialog__toolbar button span { font:26px/1 var(--serif); }
.photo-dialog .photo-stage { width:100%; height:min(68dvh,760px); object-fit:contain; background:#F2EEE5; }
.photo-dialog figcaption { font:italic 24px/1.3 var(--serif); text-align:center; color:var(--rose); margin-top:18px; }
.photo-dialog__nav { display:flex; justify-content:center; align-items:center; gap:25px; margin-top:14px; }
.photo-dialog__nav button { font-size:25px; width:44px; height:36px; }.photo-dialog__nav .caps { font-size:9px; letter-spacing:.2em; }
body:has(.photo-dialog[open]) { overflow:hidden; }
@media(max-width:1100px) {
  .process-tags { gap:20px; padding:0; min-height:490px; }
  .tag-paper { padding-inline:19px; min-height:280px; }
  .tag-paper h3 { font-size:29px; }
}
@media(max-width:700px) {
  .sign-rig { width:270px; top:4px; padding-top:39px; }
  .sign-rig .sign { padding:5px; }
  .sign-chain { height:56px; width:4px; }.sign-chain--left { left:49px; }.sign-chain--right { right:49px; }
  .sign-pin--left { left:47px; }.sign-pin--right { right:47px; }.sign-pin { top:12px; width:7px; height:7px; }
  .sign-face { padding:22px 17px 16px; gap:7px; }
  .sign-rig .word { width:222px; }.sign-rig .lotus { width:26px; }.sign-rig .sign-location { font-size:6px; }.sign-motto { font-size:12px; }
  .hero { padding-top:140px; }
  .hero h1 { font-size:67px; }
  .process-line { margin-top:30px; }
  .process-line > svg { height:100px; }
  .process-line > .process-twine--second { display:block; top:var(--second-row-y,420px); }
  .bunting { top:18px; }.bunting i:nth-child(n+4):nth-child(-n+12) { translate:0 22px; }.bunting i:nth-child(n+6):nth-child(-n+10) { translate:0 34px; }
  .process-tags { gap:0 18px; min-height:0; }
  .process-tags li:nth-child(2n) { translate:none; }
  .process-tags li:nth-child(n+3) { margin-top:12px; }
  .tag-hanger { --cord-length:46px; --rest-angle:-1.5deg; }
  .process-tags li:nth-child(2n) .tag-hanger { --cord-length:65px; --rest-angle:1.5deg; }
  .tag-paper { min-height:275px; padding:44px 16px 23px; }
  .tag-paper h3 { font-size:26px; }.tag-paper p { font-size:12px; }.tag-flower { width:18px; margin-top:15px; }
  .gallery-controls { margin-top:20px; }.gallery-controls p { font-size:14px; }.gallery-arrow { width:38px; height:38px; font-size:19px; }
  .runner { padding:45px 22px 65px; }.runner__row { gap:25px; }
  .runner figure .gallery-plate,.runner figure:nth-child(even) .gallery-plate { width:min(79vw,340px)!important; }
  .runner figcaption { font-size:17px; }
  .photo-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:16px; }
  .photo-dialog .photo-stage { height:63dvh; }.photo-dialog figcaption { font-size:21px; }
}
@media(prefers-reduced-motion:reduce) {
  .sign-rig,.tag-hanger { transform:none; }
  .runner figure:hover .plate { rotate:none; scale:1; }
}

/* Browser-note refinements: softer garden details and a clearer invitation. */
.note-body .sig { text-align:right; justify-self:end; width:100%; }
.hero::after { display:none; }
.garden-art--hero { width:400px; left:-12px; bottom:-32px; opacity:.85; }
.butterfly { display:block; position:absolute; pointer-events:none; user-select:none; filter:drop-shadow(1px 3px 2px #615D4920); }
.butterfly svg { display:block; width:100%; overflow:visible; }
.butterfly-wing { transform-origin:60px 65px; animation:butterfly-wingbeat 1.8s ease-in-out infinite; }
.butterfly--hero-one { width:75px; right:7%; top:34%; rotate:-24deg; animation:butterfly-flight-one 23s ease-in-out infinite; }
.butterfly--hero-two { width:48px; left:11%; top:67%; rotate:18deg; animation:butterfly-flight-two 29s ease-in-out infinite; }
.butterfly--hero-two .butterfly-wing { animation-duration:2.2s; animation-delay:-.8s; }
#tables { position:relative; }
.butterfly--gallery { width:105px; right:14%; top:100px; rotate:20deg; }
.butterfly--gallery .butterfly-wing { animation-duration:3.3s; }
@keyframes butterfly-wingbeat { 0%,100% { transform:rotateY(8deg); }45% { transform:rotateY(65deg); }60% { transform:rotateY(20deg); } }
@keyframes butterfly-flight-one { 0%,100% { translate:0 0; rotate:-24deg; }25% { translate:-35px -28px; rotate:-5deg; }50% { translate:12px 35px; rotate:15deg; }75% { translate:25px -12px; rotate:-15deg; } }
@keyframes butterfly-flight-two { 0%,100% { translate:0 0; rotate:18deg; }35% { translate:18px -35px; rotate:-14deg; }70% { translate:-14px 20px; rotate:12deg; } }
.table-lace { position:absolute; left:0; right:0; height:32px; bottom:-14px; z-index:2; pointer-events:none; background:var(--paper); mask:linear-gradient(#000 0 0) top / 100% 18px no-repeat,radial-gradient(circle at 50% 0,#000 9.5px,transparent 10px) bottom left / 20px 14px repeat-x; }
.glass { width:145px; left:-55px; bottom:24px; background:none; box-shadow:none; filter:drop-shadow(5px 16px 7px #4D557D24); }
.glass svg { width:100%; height:100%; }
.petit-four { position:absolute; inset:11%; display:grid; place-items:center; }.petit-four svg { width:100%; height:100%; }
.bread { background:radial-gradient(circle at 30% 25%,#FFFFFF,#F5F0E5 85%); }.bread::after { box-shadow:inset 0 0 0 1px #C5A35D75; }
.process-line { max-width:none; width:calc(100% + var(--pad) * 2); margin-inline:calc(var(--pad) * -1); }
.process-tags { max-width:1240px; margin-inline:auto; padding-inline:40px; }
.rsvp { rotate:0deg; }
.rsvp__inner { padding:44px; gap:24px; box-shadow:inset 0 0 0 1px #C8AD8060; }
.rsvp__head p { max-width:440px; margin:auto; line-height:1.5; }
.invitation-salutation { font:400 43px/1.05 var(--script); color:var(--rose); text-align:center; margin:8px 0 -18px; }
.invitation-opening { font:italic 19px/1.5 var(--serif); text-align:center; color:var(--navy); margin-bottom:3px; }
.invitation-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px 26px; }
.invitation-field { display:grid; align-content:start; gap:8px; font:500 12px/1.5 var(--sans); color:var(--navy); }
.invitation-field--wide { grid-column:1/-1; }
.invitation-field input { width:100%; min-width:0; min-height:50px; background:#F5EFE680; border:1px solid #CFC4B080; border-bottom:1px solid #AC997B; border-radius:2px; padding:11px 12px; font:400 17px/1.5 var(--sans); color:var(--navy); box-shadow:inset 0 1px 2px #9C7E5208; }
.invitation-field input::placeholder,.vision-field textarea::placeholder { color:#6E7180; opacity:1; }
.invitation-field input:focus,.vision-field textarea:focus { outline:2px solid #A8556665; outline-offset:2px; background:#FFFDF8; }
.invitation-field input:disabled { opacity:.55; background:#EDE7DC; }
.field-help { font:400 12px/1.5 var(--sans); color:var(--soft); }
.flexible-date { display:flex; align-items:center; gap:9px; min-height:40px; margin-top:5px; font:400 12px/1.5 var(--sans); color:var(--soft); cursor:pointer; }
.flexible-date input { width:17px; height:17px; accent-color:var(--rose); }
.occasion-field legend { text-align:left; margin:0 0 4px; font:400 22px/1.4 var(--display); color:var(--navy); }
.occasion-field > .field-help { margin-bottom:15px; }
.boxes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.occasion-choice { position:relative; display:flex; align-items:center; gap:10px; min-height:50px; padding:10px 12px; border:1px solid #CFC4B080; background:#FBF8F180; cursor:pointer; font:400 17px/1.4 var(--serif); }
.occasion-choice > input { position:absolute; opacity:0; width:1px; height:1px; }
.occasion-choice .sq { width:20px; height:20px; border:1px solid #998777; }
.occasion-choice .sq::after { background-image:url('../img/table/lotus-rose.png'); }
.occasion-choice:has(input:checked) { background:#F5E2E37A; border-color:#B7828B; }.occasion-choice input:checked + .sq::after { opacity:1; scale:1; }
.occasion-choice:hover { border-color:var(--rose); }.occasion-choice:has(input:focus-visible) { outline:2px solid var(--rose); outline-offset:3px; }
.vision-field { font:500 12px/1.5 var(--sans); gap:8px; color:var(--navy); }.vision-field > span { display:inline; color:var(--soft); }
.vision-field textarea { background:#F5EFE680; border:1px solid #CFC4B080; border-bottom:1px solid #AC997B; font:400 16px/1.6 var(--sans); min-height:110px; resize:vertical; padding:12px; }
.rsvp__foot { padding-top:20px; }.rsvp__foot p { font:400 12px/1.6 var(--sans); }.rsvp__foot .link { display:block; font-size:15px!important; }
.rsvp__foot .btn { min-height:52px; padding-inline:24px; letter-spacing:.13em; font-size:10px; }
.form-note { font-size:12px; line-height:1.6; max-width:350px; margin:auto; }
.prepared-note[hidden] { display:none!important; }
.prepared-note { display:grid; gap:15px; padding:25px 0 0; margin-top:5px; border-top:1px solid #BE899080; }
.prepared-note h3 { font:400 37px/1.1 var(--display); color:var(--rose); }
.prepared-note > p,.prepared-note > label { font:400 13px/1.6 var(--sans); color:var(--soft); }
.prepared-note textarea { width:100%; background:#F5EFE6; border:1px solid #CFC4B0; padding:14px; font:400 14px/1.65 var(--sans); color:var(--navy); resize:vertical; }
.prepared-note__actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }.prepared-note__actions .btn { font-size:10px; height:48px; letter-spacing:.1em; }.prepared-note__actions > button { font-size:12px; color:var(--rose); text-decoration:underline; text-underline-offset:4px; padding-block:10px; }
.rsvp .stamp-seal { right:22px; bottom:105px; width:62px; }
@media(min-width:1101px) {
 .glass { width:155px; left:-65px; bottom:20px; }
 .tables-head { position:relative; }
 .butterfly--gallery { top:calc(100% + 8px); right:18%; }
}
@media(max-width:700px) {
 .garden-art--hero { width:290px; left:-55px; bottom:-15px; opacity:.65; }
 .butterfly--hero-one { width:43px; right:16px; top:165px; animation-duration:28s; }.butterfly--hero-two,.butterfly--gallery { display:none; }
 .process-tags { padding-inline:22px; gap:0 18px; }
 .glass { width:95px; left:-17px; bottom:20px; }
 .rsvp__inner { padding:30px 20px; gap:23px; }.rsvp__head h2 { font-size:61px; }
 .invitation-fields { grid-template-columns:minmax(0,1fr); gap:19px; }.invitation-field--wide { grid-column:auto; }
 .invitation-field input { font-size:16px; min-height:50px; }.invitation-field { font-size:12px; }
 .invitation-salutation { font-size:39px; }.invitation-opening { font-size:17px; }
 .occasion-choice { font-size:15px; padding:10px 8px; gap:7px; min-height:53px; }.occasion-choice .sq { width:18px; height:18px; }
 .rsvp__foot { align-items:stretch; }.rsvp__foot p { text-align:center; }.rsvp__foot .link { display:inline; margin-left:5px; }
 .rsvp .stamp-seal { display:none; }.prepared-note__actions .btn { width:100%; justify-content:center; }
 .note-body .sig { font-size:45px; }
}
.invitation-field,.vision-field { font-size:14px; }
.field-help,.flexible-date,.form-note { font-size:13px; }
.rsvp__foot .btn,.prepared-note__actions .btn { font-size:11px; }
@media(prefers-reduced-motion:reduce) { .butterfly,.butterfly-wing { animation:none; } }

/* A small city engraving, like the studio's mark on an invitation. */
.nyc-cameo { position:absolute; right:30px; bottom:30px; width:166px; rotate:-6deg; color:#A18F6E; opacity:.82; pointer-events:none; }
.nyc-cameo > svg { width:100%; display:block; }
.nyc-cameo > div { text-align:center; margin-top:1px; }
.hero .nyc-cameo .caps { font-size:8px; color:#9E755F; letter-spacing:.25em; margin:0; }
.hero .nyc-cameo .nyc-caption { font:italic 13px/1.5 var(--serif); color:#89735F; margin-top:5px; }
.butterfly { filter:drop-shadow(1px 2px 1px #6A594815); }
.butterfly--hero-one { width:87px; right:7.5%; top:32%; }
.butterfly--hero-two { width:57px; left:10%; top:65%; }
.butterfly-wing { animation-duration:2.4s; transform-origin:60px 66px; }
.butterfly--hero-two .butterfly-wing { animation-duration:2.8s; }
@keyframes butterfly-wingbeat { 0%,100% { transform:rotateY(12deg); }35% { transform:rotateY(48deg); }55% { transform:rotateY(10deg); }75% { transform:rotateY(32deg); } }

/* FAQ: a folded sheet of the practical details, beside the host's note. */
.faq-section { padding-block:75px 90px; }
.faq-layout { max-width:1160px; margin:auto; display:grid; grid-template-columns:310px minmax(0,1fr); gap:70px; align-items:start; }
.faq-intro { padding-top:30px; }
.faq-intro > .caps { color:var(--rose); margin-bottom:22px; font-size:10px; letter-spacing:.25em; }
.faq-intro .h2 { font-size:clamp(58px,5vw,78px); line-height:1; }.faq-intro .it { color:var(--rose); }
.faq-intro > p:not(.caps) { font:italic 18px/1.7 var(--serif); color:var(--soft); margin-top:26px; }
.faq-contact { display:inline-flex; align-items:center; gap:14px; margin-top:27px; padding-bottom:7px; border-bottom:1px solid #D0B4AF; font:400 12px/1.5 var(--sans); color:var(--rose); }
.faq-paper { position:relative; background:var(--paper); padding:12px 30px; border:1px solid #D8C6A4; outline:1px solid #D8C6A45C; outline-offset:-7px; box-shadow:0 17px 37px -25px #63564430; }
.faq-paper::before { content:""; position:absolute; top:0; right:0; width:35px; height:35px; background:linear-gradient(225deg,var(--linen) 48%,#DAD0BC 49%,#F1EBDC 54%,#FFFDF8 72%); pointer-events:none; }
.faq-paper details + details { border-top:1px solid #D6CABA80; }
.faq-paper summary { list-style:none; display:grid; grid-template-columns:25px minmax(0,1fr) 20px; gap:15px; align-items:start; padding:23px 0; cursor:pointer; font:400 21px/1.4 var(--serif); }
.faq-paper summary::-webkit-details-marker { display:none; }
.faq-paper summary:hover,.faq-paper details[open] summary { color:var(--rose); }
.faq-number { font:500 9px/1.5 var(--sans); color:#9F7F64; padding-top:7px; letter-spacing:.1em; }
.faq-toggle { position:relative; width:18px; height:18px; margin-top:5px; }
.faq-toggle::before,.faq-toggle::after { content:""; position:absolute; width:13px; height:1px; background:var(--rose); top:8px; left:2px; }
.faq-toggle::after { rotate:90deg; transition:rotate .2s; }.faq-paper details[open] .faq-toggle::after { rotate:0deg; }
.faq-paper details > p { padding:0 35px 23px 40px; font:400 15px/1.75 var(--sans); color:var(--soft); }
.form-status { line-height:1.7; }
.form-status[role=alert] { padding:14px; background:#F5E2E385; border-left:2px solid var(--rose); }
.prepared-note__actions > .btn { font-size:11px; min-height:48px; letter-spacing:.1em; }
.rsvp[data-sent] .invitation-fields,.rsvp[data-sent] .occasion-field,.rsvp[data-sent] .vision-field,.rsvp[data-sent] .rsvp__foot,.rsvp[data-sent] .form-note,.rsvp[data-sent] .invitation-salutation,.rsvp[data-sent] .invitation-opening,.rsvp[data-sent] .prepared-note__actions,.rsvp[data-sent] .prepared-note > label,.rsvp[data-sent] .prepared-note > textarea { display:none; }
.thankyou-page { display:grid; place-items:center; min-height:100dvh; padding:30px; }
.thankyou-card { max-width:670px; padding:60px 50px; background:var(--paper); border:1px solid #D8C6A4; outline:1px solid #D8C6A470; outline-offset:-12px; text-align:center; box-shadow:0 35px 60px -40px #5A504F45; }
.thankyou-card > img { margin:0 auto 30px; }.thankyou-card .caps { color:var(--rose); font-size:9px; letter-spacing:.2em; }
.thankyou-card h1 { font:400 clamp(60px,8vw,90px)/1 var(--display); margin-block:30px; }.thankyou-card h1 .it { color:var(--rose); }
.thankyou-card > p:not(.caps) { font:400 19px/1.6 var(--serif); color:var(--soft); }.thankyou-card .btn { margin-top:30px; }
@media(min-width:1400px) { .nyc-cameo { right:5%; width:176px; } }
@media(max-width:1100px) { .faq-layout { grid-template-columns:250px minmax(0,1fr); gap:40px; }.faq-paper { padding-inline:24px; } }
@media(max-width:700px) {
 .nyc-cameo { position:static; display:flex; align-items:center; gap:9px; width:234px; margin:23px auto -9px; rotate:-3deg; opacity:.8; }
 .nyc-cameo > svg { width:86px; flex:none; }.nyc-cameo > div { text-align:left; }
 .hero .nyc-cameo .caps { font-size:7px; }.hero .nyc-cameo .nyc-caption { font-size:12px; white-space:nowrap; }
 .butterfly--hero-one { width:45px; right:16px; top:165px; }
 .faq-section { padding-block:55px 60px; }.faq-layout { grid-template-columns:1fr; gap:30px; }.faq-intro { padding-top:0; }
 .faq-intro .h2 { font-size:59px; }.faq-intro > p:not(.caps) { margin-top:20px; font-size:17px; }.faq-intro > p:not(.caps) br { display:none; }
 .faq-contact { margin-top:18px; }.faq-paper { padding-inline:20px; }.faq-paper summary { grid-template-columns:18px minmax(0,1fr) 15px; gap:10px; font-size:18px; padding-block:21px; }.faq-paper details > p { padding:0 5px 23px 28px; font-size:14px; }
 .thankyou-card { padding:50px 25px; }.thankyou-card .btn { font-size:10px; padding-inline:20px; }
}

/* The garden's stationery collection: calligraphic type, postage and porcelain. */
:root { --display:"brioso-pro-display",Georgia,serif; }
.hero h1,.h2,.note-body h2,.rsvp__head h2,.thankyou-card h1,.prepared-note h3 { font-family:var(--display); font-feature-settings:"kern" 1,"liga" 1; font-weight:400; }
.hero h1 .it,.h2 .it,.note-body h2 .it,.rsvp__head h2 .it,.thankyou-card h1 .it { font-family:var(--display); }
.hero h1 { font-size:clamp(74px,9.4vw,142px); line-height:1.04; letter-spacing:-.035em; }
.hero h1 .it { font-size:1.02em; letter-spacing:-.025em; }
.h2 { line-height:1.08; letter-spacing:-.025em; }
.tag-paper h3,.serving strong,.tent strong,.menu button strong { font-family:var(--display); }
.tag-paper h3 { line-height:1.15; }.menu button strong { font-size:23px; line-height:1.22; }
.note-body h2,.rsvp__head h2 { line-height:1.1; letter-spacing:-.03em; }

/* A quiet ivory fascia with a rose medallion and an engraved date button. */
.site-header { position:relative; z-index:6; background:#FBF8F1; padding-block:22px 25px; gap:28px; border-bottom:1px solid #B9956B80; box-shadow:inset 0 -5px #F1E9DC,inset 0 -6px #CDB99880; }
.site-header::before { content:""; position:absolute; left:var(--pad); right:var(--pad); bottom:10px; height:1px; background:linear-gradient(90deg,transparent,#B9956B55 12%,#B9956B55 88%,transparent); }
.site-header .logo { gap:12px; }
.brand-flower { width:43px; height:43px; display:grid; place-items:center; border:1px solid #C5AA7680; outline:1px solid #DAC9AB70; outline-offset:-4px; border-radius:50%; background:#FFFDF5; }
.site-header .brand-flower img { width:28px; }
.brand-lockup { display:grid; justify-items:start; gap:7px; }
.site-header .brand-lockup img { width:212px; }
.brand-caption { font:400 8px/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#8F7664; }
.site-header nav { display:flex; gap:24px; font-size:9px; letter-spacing:.14em; }
.site-header nav a { padding-block:12px; white-space:nowrap; }
.site-header nav a::after { bottom:4px; height:1px; width:100%; border-radius:0; background:var(--rose); transform:scaleX(.3); transition:opacity .2s,transform .2s; }
.site-header nav a:hover::after,.site-header nav a:focus-visible::after { opacity:1; transform:scaleX(1); }
.site-header .btn { border-radius:3px; height:46px; padding-inline:23px; letter-spacing:.13em; font-size:10px; background:var(--navy); outline:1px solid #D9C5A780; outline-offset:-5px; box-shadow:0 3px 5px #1B27470D; }
.site-header .btn:hover { background:#A44E64; }
.sign-chain { top:0; right:auto; z-index:4; transform-origin:50% 0; width:5px; }
.sign-chain--left { left:calc(50% - 105px); }.sign-chain--right { left:calc(50% + 105px); }
.sign-chain::before { content:""; position:absolute; width:7px; height:5px; left:50%; top:-1px; translate:-50% 0; border-radius:2px; background:linear-gradient(#E8D4A1,#A3804C); box-shadow:0 1px 1px #5A442940; }

/* Upright postage, warm uncoated paper, a small city engraving. */
.nyc-cameo { width:174px; right:28px; bottom:24px; rotate:0deg; opacity:1; padding:15px 13px 14px; color:#AA7D77; background:#F9F0E4; border:1px solid #E8D6BE; outline:1px solid #BC928260; outline-offset:-8px; filter:drop-shadow(0 3px 2px #8D785414); }
.nyc-cameo::before { content:""; position:absolute; inset:-5px; z-index:-1; background:radial-gradient(circle,#F9F0E4 3px,transparent 3.5px) top left/10px 10px repeat; mask:linear-gradient(#000 0 0) top/100% 10px no-repeat,linear-gradient(#000 0 0) bottom/100% 10px no-repeat,linear-gradient(#000 0 0) left/10px 100% no-repeat,linear-gradient(#000 0 0) right/10px 100% no-repeat; }
.stamp-edition { display:block; text-align:center; font:500 6.5px/1.3 var(--sans); text-transform:uppercase; letter-spacing:.14em; padding-block:2px 4px; }
.nyc-cameo > svg { width:100%; margin-block:-4px 2px; }
.hero .nyc-cameo .caps { font-size:9px; letter-spacing:.2em; color:#956264; }
.hero .nyc-cameo .nyc-caption { font:italic 12px/1.4 var(--display); color:#986B66; margin-top:4px; white-space:normal; }
.stamp-footer { display:block; font:400 6px/1.3 var(--sans); letter-spacing:.16em; margin-top:9px; color:#AB8175; }

/* The table runner belongs to the full row, including the last place setting. */
.runner::before { display:none; }
.runner__row { isolation:isolate; }
.runner__row::before { content:""; position:absolute; z-index:-1; left:calc(-1 * max(var(--pad),30px)); right:calc(-1 * max(var(--pad),30px)); top:18%; bottom:22%; background:linear-gradient(180deg,#E9CBCD,#EBD1D2 48%,#DFC0C5); border-block:1px solid #C998A34A; box-shadow:inset 0 5px #F3DFDF50,inset 0 -5px #D4ABB450; }
.runner__row::after { content:""; position:absolute; z-index:-1; left:calc(-1 * max(var(--pad),30px)); right:calc(-1 * max(var(--pad),30px)); top:calc(18% + 10px); bottom:calc(22% + 10px); border-block:1px dashed #B47F8938; pointer-events:none; }
.tables-head { position:relative; }
.butterfly--gallery { width:93px; top:calc(100% + 8px); right:16%; rotate:18deg; }
.butterfly--gallery-two { width:148px; right:36%; top:calc(100% - 28px); rotate:-24deg; }
.butterfly--gallery-two .butterfly-wing { animation-duration:3.8s; animation-delay:-1.3s; }

/* Fine gilt, shallow scallops and four hand-painted botanical sprigs. */
.plate,.runner figure .gallery-plate { background:transparent; border-radius:50%; box-shadow:0 3px 2px #8A724B15,0 12px 17px -10px #574E4735,0 30px 45px -25px #574E474A; }
.plate::before,.runner .gallery-plate::before { inset:0; border:0; border-radius:0; background:url('../img/porcelain-rim.svg') center/100% 100% no-repeat; }
.plate::after,.runner .gallery-plate::after { inset:9.5%; box-shadow:inset 0 0 0 1px #B9975650,0 0 0 1px #FFFDFBB0,0 2px 7px #9F825512; }
.main-plate .plate__food,.runner .plate__food { inset:10.5%; box-shadow:0 0 0 1px #A98C4740; }
.runner figcaption { font:italic 21px/1.15 var(--display); padding:12px 22px; border:1px solid #D7C4AE80; background:#FFFBF2; box-shadow:0 6px 8px -5px #8E79613A; }

@media(min-width:1400px) { .nyc-cameo { right:4.5%; width:180px; } }
@media(max-width:1180px) {
 .site-header { grid-template-columns:1fr auto; row-gap:13px; padding-top:18px; padding-bottom:19px; }
 .site-header nav { grid-column:1/-1; grid-row:2; justify-content:center; gap:34px; }
 .site-header .btn { grid-column:2; grid-row:1; }
 .site-header nav a { padding-block:7px; }.site-header nav a::after { bottom:0; }
 .site-header::before { bottom:9px; }
 .hero h1 { font-size:clamp(74px,9.4vw,111px); }
 .nyc-cameo { width:146px; right:25px; bottom:24px; }
 .butterfly--gallery { right:15%; top:50px; }
 .butterfly--gallery-two { right:30%; top:145px; }
}
@media(max-width:700px) {
 .site-header { padding:14px 16px 18px; gap:12px 8px; }
 .brand-flower { width:30px; height:30px; outline-offset:-3px; }.site-header .brand-flower img { width:20px; }
 .site-header .logo { gap:8px; }.site-header .brand-lockup img { width:145px; }.brand-lockup { gap:5px; }.brand-caption { font-size:5.4px; letter-spacing:.065em; }
 .site-header .btn { height:39px; padding-inline:13px; font-size:8px; letter-spacing:.08em; }
 .site-header nav { width:100%; gap:0; justify-content:space-between; font-size:7px; letter-spacing:.08em; }
 .site-header nav a { padding-block:8px; }
 .hero h1 { font-size:clamp(65px,17vw,83px); max-width:8ch; line-height:1.02; margin:22px auto; }
 .hero p:not(.caps) { font-size:16px; }
 .sign-chain { width:4px; }
 .nyc-cameo { position:relative; display:grid; grid-template-columns:82px minmax(0,1fr); gap:3px 10px; width:260px; right:auto; bottom:auto; rotate:0deg; padding:15px; margin:30px auto 0; }
 .stamp-edition { grid-column:1/-1; margin-bottom:4px; font-size:6.5px; }
 .nyc-cameo > svg { width:82px; margin:0; }.nyc-cameo > div { align-self:center; text-align:left; }
 .hero .nyc-cameo .caps { font-size:8px; }.hero .nyc-cameo .nyc-caption { font-size:12px; max-width:none; margin:5px 0 0; }.stamp-footer { font-size:5.8px; margin-top:5px; }
 .butterfly--gallery,.butterfly--gallery-two { display:none; }
 .menu button strong { font-size:24px; }.tag-paper h3 { font-size:27px; }
 .runner__row::before,.runner__row::after { left:-22px; right:-22px; }
 .runner figcaption { font-size:20px; }
 .note-body h2 { font-size:57px; }.rsvp__head h2 { font-size:64px; }
}

/* One upright heading throughout. Color lives in the garden details. */
.hero h1,.h2,.note-body h2,.rsvp__head h2,.prepared-note h3,.thankyou-card h1 { font-style:normal; color:var(--navy); letter-spacing:-.025em; }
h1 .it,h2 .it,h3 .it { font:inherit; color:inherit!important; letter-spacing:inherit; }
.hero h1 { font-size:clamp(70px,9vw,134px); }
.butterfly--gallery-three { width:46px; right:5%; top:calc(100% + 12px); rotate:31deg; }
.butterfly--gallery-four { width:67px; right:54%; top:calc(100% + 28px); rotate:-8deg; }
.butterfly--gallery-five { width:43px; right:29%; top:-21px; rotate:12deg; }
.butterfly--gallery-three .butterfly-wing { animation-duration:2.9s; animation-delay:-.6s; }
.butterfly--gallery-four .butterfly-wing { animation-duration:4.1s; animation-delay:-2s; }
.butterfly--gallery-five .butterfly-wing { animation-duration:3.6s; animation-delay:-.9s; }
@media(max-width:1180px) {
 .butterfly--gallery-three { top:185px; right:5%; }
 .butterfly--gallery-four { top:205px; right:51%; }
 .butterfly--gallery-five { top:10px; right:31%; }
 .site-header nav { font-size:10px; }
}
@media(max-width:700px) {
 .butterfly--gallery-three,.butterfly--gallery-four,.butterfly--gallery-five { display:none; }
 .hero h1 { font-size:clamp(64px,17vw,80px); max-width:8.2ch; }
 .site-header nav { font-size:9px; letter-spacing:.025em; }
 .site-header nav a { min-height:38px; display:flex; align-items:center; }
}
/* Leave the copy and the gallery controls clear of decorative wings. */
@media(min-width:1181px) {
 .butterfly--gallery-three { right:-4%; top:calc(100% + 38px); }
 .butterfly--gallery-five { right:40%; top:-15px; }
}
@media(max-width:360px) {
 .site-header .brand-lockup img { width:128px; }.brand-caption { font-size:4.8px; }
 .site-header .btn { padding-inline:11px; font-size:7px; }
 .site-header nav { font-size:8px; }
}
@media(max-width:700px) {
 .butterfly--hero-one { width:32px; top:150px; right:16px; animation:butterfly-mobile 14s ease-in-out infinite; }
}
@keyframes butterfly-mobile { 0%,100% { translate:0 0; rotate:-14deg; }50% { translate:0 -8px; rotate:10deg; } }
@media(prefers-reduced-motion:reduce) { .butterfly,.butterfly-wing { animation:none; } }

/* A clearer first impression, with an airy two-line introduction. */
.hero h1 { font-size:clamp(65px,7.3vw,111px); max-width:1080px; margin:24px auto 27px; line-height:1.04; }
.hero .hero-description { max-width:820px; font-size:18px; line-height:1.6; }
.hero-description > span { display:block; }
.garden-art--hero { bottom:13px; left:-6px; }
.nyc-cameo > .nyc-skyline { width:100%; height:95px; object-fit:contain; margin:3px auto 7px; mix-blend-mode:multiply; }
.hero .nyc-cameo .nyc-caption { font-size:12px; }

/* Give each place setting a little breathing room. */
.glass { width:165px; height:192px; aspect-ratio:auto; left:auto; right:-74px; top:-47px; bottom:auto; filter:drop-shadow(5px 12px 7px #4D557D22); }
.glass > img { width:100%; height:100%; object-fit:contain; }
.bread { width:150px; right:auto; left:-58px; top:auto; bottom:24px; }
.serving { left:calc(50% + 38px); bottom:-72px; rotate:0deg; }
.place { translate:0 115px; }
.table { padding-bottom:140px; }

/* A readable letter, with the handwriting reserved for the sign-off. */
.note-body { gap:24px; }
.note-body > p:not(.caps):not(.sig) { font:400 18px/1.85 var(--sans); color:#35415A; max-width:43ch; }
.note-body > .caps { font-size:11px; line-height:1.6; }
.note-body h2 { font-size:64px; }
.note-body .sig { margin-top:8px; }

/* Rebalance the invitation and its return envelope toward the right. */
@media(min-width:1101px) {
 .rsvp-sec { max-width:1180px; margin-left:auto; margin-right:0; grid-template-columns:minmax(0,740px) minmax(0,1fr); }
}

/* The porcelain and pink stitched runner sit on a softly painted lawn. */
#tables { position:relative; isolation:isolate; background:#EEF0DF; }
#tables::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(180deg,#FBF8F1 0%,#FBF8F1B0 20%,#EFF0DE70 52%,#FBF8F1 100%),url('../img/garden-grass-texture.webp') center/680px 680px repeat; opacity:.85; }
#tables::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(90deg,#FBF8F13D,transparent 35%,#FBF8F12B); }
@media(max-width:1100px) {
 .glass { width:140px; height:164px; right:-22px; top:-34px; left:auto; bottom:auto; }
 .bread { width:120px; left:-35px; bottom:25px; right:auto; top:auto; }
 .place { translate:none; padding-top:35px; }
 .serving { left:calc(50% + 22px); }
 .rsvp-sec { margin-inline:auto; }
 .hero .hero-description { max-width:720px; font-size:17px; }
}
@media(max-width:700px) {
 .hero h1 { font-size:clamp(46px,12vw,67px); max-width:9.5ch; margin:22px auto 25px; line-height:1.08; }
 .hero-title-break { display:none; }
 .hero .hero-description { max-width:315px; font-size:16px; line-height:1.65; }
 .hero-description > span + span { margin-top:10px; }
 .garden-art--hero { left:-55px; bottom:16px; }
 .nyc-cameo > .nyc-skyline { width:82px; height:64px; margin:0; }
 .glass { width:113px; height:132px; right:-15px; top:-26px; left:auto; bottom:auto; }
 .bread { width:98px; left:-16px; bottom:22px; right:auto; top:auto; }
 .serving { left:calc(50% + 12px); bottom:-59px; width:230px; }
 .plate-wrap { margin-bottom:32px; }
 .table { padding-bottom:75px; }.place { padding-top:0; }
 .note-body h2 { font-size:54px; }.note-body > p:not(.caps):not(.sig) { font-size:16px; line-height:1.8; }
 .note-body { gap:20px; }.note-body > .caps { font-size:9px; }
 #tables::before { background-size:auto,480px 480px; }
}

/* Bloom Bar's Gloock headings; keep the existing menu and paper-label lettering. */
:root { --display:"Gloock",Georgia,serif; --table-display:"brioso-pro-display",Georgia,serif; }
.tag-paper h3,.serving strong,.tent strong,.menu button strong,.runner figcaption,.hero .nyc-cameo .nyc-caption { font-family:var(--table-display); }
.hero h1 { font-size:clamp(58px,6.8vw,96px); line-height:1.08; letter-spacing:-.035em; }
.hero h1,.h2,.note-body h2,.rsvp__head h2,.prepared-note h3,.thankyou-card h1 { font-style:normal; font-weight:400; }
.glass { height:auto; aspect-ratio:1; width:155px; top:-42px; right:-65px; }
.glass svg { width:100%; height:100%; }
@media(max-width:1100px) { .glass { width:140px; top:-34px; right:-22px; } }
@media(max-width:700px) {
 .hero h1 { font-size:clamp(39px,10.6vw,58px); max-width:10.5ch; letter-spacing:-.035em; line-height:1.12; }
 .glass { width:104px; top:-23px; right:-15px; }
 .note-body h2 { font-size:46px; }.rsvp__head h2 { font-size:52px; }
}
.glass { aspect-ratio:180/185; }
@media(max-width:700px) {
 .hero h1 { max-width:560px; width:100%; font-size:clamp(34px,10.2vw,58px); text-wrap:balance; }
}
@media(min-width:1101px) and (max-width:1200px) {
 .rsvp-sec { grid-template-columns:minmax(0,1fr); max-width:760px; margin-inline:auto; }
 .return-env { width:min(540px,85%); margin:-15px auto 0; height:260px; padding:80px 30px 30px; rotate:3deg; }
}

/* A composed place setting. Keep the menu's original grid slot and tilt. */
#menu .plate-wrap { width:clamp(320px,35vw,530px); align-self:stretch; margin-bottom:0; }
#menu .main-plate { position:absolute; width:calc(100% - 32px); left:58px; top:46%; translate:0 -50%; box-shadow:0 3px 2px #8A724B14,0 14px 22px -12px #574E4738,0 35px 48px -30px #574E4745; }
#menu .glass { width:132px; height:auto; aspect-ratio:180/185; left:calc(100% + 10px); right:auto; top:30px; bottom:auto; rotate:7deg; filter:drop-shadow(4px 8px 5px #4D557D1B); }
#menu .bread { width:126px; left:-4px; right:auto; top:calc(50% + 74px); bottom:auto; rotate:-12deg; }
#menu .serving { top:auto; bottom:2px; left:calc(50% + 42px); translate:-50% 0; rotate:0deg; width:280px; height:128px; padding:15px 20px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:#FFFDF6; border-color:#C8AD7D8C; outline-color:#D3BE9766; box-shadow:0 2px 1px #DDD1BB60,0 10px 18px -13px #6454455C; }
#menu .serving strong { margin:0; font-size:25px; line-height:1.12; }
#menu .serving > span:last-child { font-size:12px; line-height:1.4; }
#menu .place { align-self:end; translate:none; padding:0 0 28px 26px; gap:20px; justify-items:center; text-align:center; }
#menu .place .tent { width:210px; position:relative; padding:30px 18px 24px; background:linear-gradient(180deg,#F3ECDF 0,#FFFDF7 13%,#FFFDF7); border:1px solid #D7C9AF80; outline:1px solid #D7C9AF60; outline-offset:-7px; box-shadow:0 2px 0 #E9DFCE,2px 12px 20px -15px #62554F70; }
#menu .tent::before { content:""; position:absolute; top:8px; left:10px; right:10px; height:1px; background:#D5C7AD70; }
#menu .tent strong { font-size:38px; margin:12px 0 15px; }
#menu .place .phone { font-size:14px; line-height:1.5; }
@media(max-width:1100px) and (min-width:701px) {
 #menu .plate-wrap { width:min(44vw,460px); }
 #menu .main-plate { left:24px; width:calc(100% - 24px); }
 #menu .glass { width:120px; left:auto; right:-10px; top:25px; }
 #menu .bread { width:116px; left:-10px; }
 #menu .serving { left:calc(50% + 12px); width:270px; }
 #menu .place { align-self:center; justify-self:center; padding:0; gap:25px; }
}
@media(max-width:700px) {
 #menu .plate-wrap { width:100%; max-width:360px; height:calc(min(78vw,400px) + 170px); justify-self:center; align-self:auto; }
 #menu .main-plate { width:min(78vw,400px); left:50%; top:50px; translate:-50% 0; }
 #menu .glass { width:100px; left:auto; right:0; top:0; rotate:7deg; }
 #menu .bread { width:90px; left:0; top:calc(min(78vw,400px) - 44px); }
 #menu .serving { left:50%; bottom:0; width:min(250px,calc(100% - 30px)); height:128px; padding:14px 17px; }
 #menu .serving strong { font-size:24px; }
 #menu .place { align-self:auto; padding:0; gap:15px; }
}

/* Small scale adjustments and a standing, folded serving card. */
@media(min-width:1101px) {
 #menu .main-plate { left:48px; width:calc(100% - 12px); }
 #menu .glass { left:calc(100% - 42px); top:63px; }
}
#menu .serving { bottom:-18px; transform:perspective(800px) rotateX(9deg); transform-origin:50% 100%; background:linear-gradient(180deg,#FFFDF6,#FBF6EB 85%,#F3EADB); box-shadow:0 2px 1px #D9CBB1,0 17px 19px -15px #4D433F85; overflow:visible; }
#menu .serving::before { content:""; position:absolute; z-index:-1; top:-1px; bottom:-1px; left:calc(100% - 2px); width:27px; background:linear-gradient(110deg,#C9BBA0,#EEE3CD 70%); clip-path:polygon(0 0,100% 100%,0 100%); }
#menu .serving::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(180deg,#E1D0AC,#FFFEF9 65%,#BBA58055); border-radius:1px; }
@media(max-width:700px) { #menu .serving { bottom:0; } }
@media(max-width:700px) {
 #menu .plate-wrap { height:calc(min(78vw,400px) + 184px); }
}
#menu .serving strong { max-width:100%; text-wrap:balance; }

/* Two small garden visitors, kept clear of the photograph and paper. */
#menu .butterfly--setting-left { left:6px; top:19%; width:58px; z-index:3; rotate:-18deg; animation:setting-butterfly-drift 13s ease-in-out infinite; }
#menu .place { position:relative; }
#menu .butterfly--setting-card { right:18px; top:-88px; width:62px; z-index:3; rotate:17deg; animation:setting-butterfly-drift 17s ease-in-out -4s infinite; }
#menu .butterfly--setting-left .butterfly-wing { animation-duration:3s; animation-delay:-.5s; }
#menu .butterfly--setting-card .butterfly-wing { animation-duration:3.7s; animation-delay:-1.5s; }
@keyframes setting-butterfly-drift { 0%,100% { translate:0 0; }50% { translate:4px -7px; } }
@media(max-width:1100px) { #menu .butterfly--setting-card { display:none; } }
@media(max-width:700px) { #menu .butterfly--setting-left { top:12px; left:8px; width:40px; } }
@media(prefers-reduced-motion:reduce) { #menu .butterfly,#menu .butterfly-wing { animation:none; } }

/* Pistachio linen grounds the porcelain without adding another table object. */
#menu .main-plate { isolation:isolate; }
#menu .placemat {
 position:absolute; inset:-22px; z-index:-1; border-radius:50%; pointer-events:none;
 background-color:#A3B18A;
 background-image:radial-gradient(ellipse at 35% 22%,#E3E8C660,transparent 62%),repeating-linear-gradient(0deg,#F4EDCE35 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#62784D25 0 1px,transparent 1px 5px);
 border:1px solid #7E906A;
 box-shadow:0 2px 0 #7B8C6255,0 6px 10px -4px #52604440;
}
#menu .placemat::before { content:""; position:absolute; inset:5px; border:1.5px dashed #EEE8C6C0; border-radius:50%; }
#menu .placemat::after { content:""; position:absolute; inset:10px; border:1px solid #73875870; border-radius:50%; box-shadow:0 0 0 1px #DCE0BB80; }
#menu .main-plate::before { filter:drop-shadow(0 2px 2px #4A593F40); }
@media(max-width:1100px) { #menu .placemat { inset:-18px; } }
@media(max-width:700px) {
 #menu .placemat { inset:-14px; background-size:auto,100% 4px,5px 100%; }
 #menu .placemat::before { inset:4px; border-width:1px; }
 #menu .placemat::after { inset:8px; }
}

/* A floral picnic basket welcomes guests; the botanical border frames Katia's letter. */
.hero-basket { position:absolute; width:310px; height:auto; left:22px; bottom:18px; pointer-events:none; user-select:none; filter:drop-shadow(0 5px 3px #75604616); }
#host .garden-art--note { width:300px; left:-20px; right:auto; top:0; transform:none; opacity:.9; z-index:1; }
@media(min-width:1500px) { .hero-basket { width:350px; left:3%; } }
@media(max-width:1180px) { .hero-basket { width:215px; left:10px; bottom:20px; } #host .garden-art--note { width:230px; left:-32px; top:5px; } }
@media(max-width:700px) {
 .hero-basket { position:relative; display:block; width:240px; max-width:85%; left:auto; bottom:auto; margin:25px auto 0; }
 .hero .nyc-cameo { margin-top:18px; }
 #host .garden-art--note { width:180px; left:-28px; top:48px; }
}

/* A summer sky, with two translucent cloud banks drifting at different speeds. */
.hero { background:linear-gradient(180deg,#C8E5F4 0%,#DAEDF7 42%,#EAF3F6 78%,#FBF8F1 100%); }
.hero-sky { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.hero-sky::before,.hero-sky::after { content:""; position:absolute; left:0; width:calc(100% + 1600px); height:70%; background:url('../img/summer-clouds.webp') left center/1200px 400px repeat-x; opacity:.68; animation:summer-cloud-drift 160s linear -50s infinite; }
.hero-sky::before { top:-8%; }
.hero-sky::after { top:34%; background-size:1600px 533px; opacity:.48; animation-name:summer-cloud-drift-far; animation-duration:240s; animation-delay:-100s; }
@keyframes summer-cloud-drift { from { transform:translateX(-1200px); }to { transform:translateX(0); } }
@keyframes summer-cloud-drift-far { from { transform:translateX(-1600px); }to { transform:translateX(0); } }

/* Twenty percent more basket, and a second little visitor at its rim. */
.hero-picnic { position:absolute; width:372px; left:22px; bottom:18px; pointer-events:none; }
.hero-picnic .hero-basket { position:static; display:block; width:100%; max-width:none; margin:0; }
.hero-picnic .butterfly--hero-three { width:44px; right:-4px; top:31%; rotate:-21deg; animation:basket-butterfly-drift 19s ease-in-out -5s infinite; }
.butterfly--hero-three .butterfly-wing { animation-duration:3.2s; animation-delay:-1.2s; }
@keyframes basket-butterfly-drift { 0%,100% { translate:0 0; rotate:-21deg; }50% { translate:-9px -12px; rotate:5deg; } }

/* Both botanical margins belong to the host's stationery. */
#host .garden-art--note-right { width:250px; right:-20px; top:15px; transform:scaleX(-1); opacity:.75; }

/* Roses rest in the open corner, above the glass and place card. */
.table-bouquet { position:absolute; width:245px; height:auto; right:30px; top:24px; pointer-events:none; user-select:none; filter:drop-shadow(2px 5px 3px #5A65462A); }

/* Keep the small butterfly in the gap to the left of the gallery description. */
@media(min-width:701px) {
 .butterfly--gallery { top:calc(100% + 18px); }
 .butterfly--gallery-five { left:54%; right:auto; top:-5px; }
}
@media(min-width:1500px) { .hero-picnic { width:420px; left:3%; } .table-bouquet { width:270px; right:4%; } }
@media(max-width:1180px) { .hero-picnic { width:258px; left:10px; bottom:20px; } .table-bouquet { width:200px; right:18px; top:22px; } }
@media(max-width:1000px) and (min-width:701px) { .butterfly--gallery-five { left:34%; top:calc(100% + 120px); } }
@media(max-width:700px) {
 .hero-picnic { position:relative; width:288px; max-width:95%; left:auto; bottom:auto; margin:25px auto 0; }
 .hero-picnic .butterfly--hero-three { width:35px; right:2px; top:23%; }
 .hero-sky::before { top:0; height:48%; opacity:.6; }
 .hero-sky::after { top:45%; height:45%; opacity:.4; }
 #host .garden-art--note-right { width:160px; right:-55px; top:5px; }
 .table-bouquet { width:110px; right:-8px; top:24px; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-sky::before,.hero-sky::after,.hero-picnic .butterfly--hero-three,.hero-picnic .butterfly-wing { animation:none; }
}

/* Three small illustrated roses turn inward toward the place setting. */
.table-bouquet { width:250px; top:20px; right:30px; filter:drop-shadow(1px 3px 2px #57604720); }

/* The same softly painted lawn as the gallery, fading into the summer sky. */
.hero-meadow { position:absolute; z-index:-1; inset:auto 0 0; height:120px; pointer-events:none; background:linear-gradient(0deg,#D9E0BE4D,transparent),url('../img/garden-grass-texture.webp') center bottom/680px 680px repeat; mask-image:linear-gradient(180deg,transparent,#000 68%); opacity:.74; }
.hero-picnic { width:420px; left:12px; bottom:14px; }
.hero-picnic .butterfly--hero-three { right:22px; top:60%; }
@media(min-width:1500px) { .hero-picnic { width:470px; left:2%; } .table-bouquet { width:275px; right:4%; } }
@media(max-width:1180px) { .hero-picnic { width:300px; left:4px; bottom:16px; } .table-bouquet { width:205px; right:18px; } }
@media(max-width:700px) {
 .hero-picnic { width:320px; max-width:100%; left:auto; bottom:auto; }
 .hero-picnic::before { content:""; position:absolute; z-index:-1; inset:auto -22px -8px; height:65px; background:url('../img/garden-grass-texture.webp') center bottom/600px 600px repeat; mask-image:linear-gradient(transparent,#000 70%,transparent); opacity:.65; }
 .hero-picnic .butterfly--hero-three { width:35px; right:2px; top:23%; }
 .hero-meadow { height:85px; opacity:.6; }
 .table-bouquet { width:120px; right:-1px; top:10px; }
}

/* Upright blooms, with long stems resting down and right on the cloth. */
.table-bouquet { width:265px; right:24px; top:13px; }
@media(min-width:1500px) { .table-bouquet { width:285px; right:4%; } }
@media(max-width:1180px) { .table-bouquet { width:210px; right:15px; top:16px; } }
@media(max-width:700px) { .table-bouquet { width:125px; right:-5px; top:8px; } }

/* A fine botanical rose illustration, with room for its upright flowers. */
.table-bouquet { width:310px; top:20px; right:24px; }
@media(min-width:1500px) { .table-bouquet { width:335px; right:3.5%; } }
@media(max-width:1180px) { .table-bouquet { width:245px; right:14px; top:20px; } }
@media(max-width:700px) { .table-bouquet { width:130px; right:-3px; top:10px; } }

/* The roses share the smooth color fills and fine outlines of the table illustrations. */
.table-bouquet { width:300px; top:21px; right:24px; }
#menu .butterfly--setting-card { left:24px; right:auto; }
@media(min-width:1500px) { .table-bouquet { width:320px; right:3.5%; } }
@media(max-width:1180px) { .table-bouquet { width:225px; right:14px; top:20px; } }
@media(max-width:700px) { .table-bouquet { width:115px; right:-5px; top:10px; } }

/* Pearl-tinted twilight ink catches the light without changing the letterforms. */
.hero h1 {
 color:#56658C;
 background-image:linear-gradient(112deg,#485D87 8%,#64769E 29%,#8B7398 46%,#667FA1 62%,#52658D 82%);
 background-size:180% 100%; background-position:0% 50%;
 -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
 filter:drop-shadow(0 1px 0 #FFFCF4A0) drop-shadow(0 5px 16px #FFFFFF85);
 animation:twilight-ink 36s ease-in-out infinite alternate;
}
@keyframes twilight-ink { from { background-position:0% 50%; }to { background-position:100% 50%; } }
.table-bouquet { transform:scaleX(-1); }
@media(prefers-reduced-motion:reduce) { .hero h1 { animation:none; background-position:45% 50%; } }
@media(forced-colors:active) { .hero h1 { background:none; -webkit-text-fill-color:CanvasText; color:CanvasText; filter:none; animation:none; } }
@media print { .hero h1 { background:none; -webkit-text-fill-color:#56658C; filter:none; animation:none; } }

/* Keep the golden visitor visible above the taller basket flowers. */
@media(min-width:701px) { .butterfly--hero-two { left:3.5%; top:auto; bottom:245px; z-index:2; } }

/* Summer oak shade moves over the cloth while the stationery stays clear. */
#menu { isolation:isolate; }
.table-daylight { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.table-daylight::before { content:""; position:absolute; inset:-12%; background:url('../img/oak-leaf-shadows.svg') center/cover no-repeat; mix-blend-mode:multiply; opacity:.24; filter:blur(1.5px); transform-origin:15% 10%; animation:oak-shade-breath 34s ease-in-out infinite alternate; }
.table-daylight::after { content:""; position:absolute; inset:-15%; background:radial-gradient(ellipse at 64% 30%,#FFF9DF60,transparent 48%),linear-gradient(115deg,transparent 15%,#FFFCED33 49%,transparent 73%); opacity:.55; animation:table-sunlight 43s ease-in-out -9s infinite alternate; }
@keyframes oak-shade-breath { 0% { transform:translate(-1.4%,-1%) rotate(-2deg) scale(1.02); opacity:.19; }55% { opacity:.31; }100% { transform:translate(1.5%,1.4%) rotate(1.5deg) scale(1.06); opacity:.24; } }
@keyframes table-sunlight { from { transform:translate(-2%,1%); opacity:.38; }to { transform:translate(3%,-1%); opacity:.75; } }
#menu .picnic-napkin { position:absolute; width:112px; height:auto; left:8px; top:-30px; rotate:-12deg; pointer-events:none; filter:drop-shadow(3px 7px 4px #6A604B25); }

/* The glass rests down and right of the roses. */
@media(min-width:1101px) { #menu .glass { left:calc(100% - 17px); top:118px; } }
@media(max-width:1100px) and (min-width:701px) { #menu .glass { left:auto; right:-85px; top:145px; } #menu .picnic-napkin { width:102px; left:-3px; top:-18px; } }
@media(max-width:700px) {
 #menu .glass { left:auto; right:-15px; top:65px; }
 #menu .picnic-napkin { width:83px; left:8px; top:-14px; }
 .table-daylight::before { background-size:auto 100%; opacity:.2; }
}
@media(prefers-reduced-motion:reduce) { .table-daylight::before,.table-daylight::after { animation:none; } }

/* Crisp oak silhouettes and open pools of sun, with a soft cast edge. */
.table-daylight::before { background-image:url('../img/oak-leaf-shadows.svg'); background-size:cover; filter:blur(2px); animation-name:oak-light-and-shade; }
.table-daylight::after { background:radial-gradient(ellipse at 67% 27%,#FFFFF2D0,transparent 43%),radial-gradient(ellipse at 26% 75%,#FFF9D2A0,transparent 37%),linear-gradient(115deg,transparent 16%,#FFFEED66 48%,transparent 70%); }
@keyframes oak-light-and-shade { 0% { transform:translate(-1.4%,-1%) rotate(-2deg) scale(1.02); opacity:.35; }55% { opacity:.52; }100% { transform:translate(1.5%,1.4%) rotate(1.5deg) scale(1.06); opacity:.43; } }
#menu .picnic-napkin { width:145px; left:3px; top:-29px; rotate:-13deg; filter:drop-shadow(3px 7px 4px #6A604B22); }
@media(max-width:1100px) and (min-width:701px) { #menu .picnic-napkin { width:135px; left:-8px; top:-16px; } }
@media(max-width:700px) { #menu .picnic-napkin { width:108px; left:-1px; top:-12px; } .table-daylight::before { opacity:.38; background-size:auto 100%; } }
@media(prefers-reduced-motion:reduce) { .table-daylight::before { animation:none; opacity:.4; } }

/* Each bough and leaf moves within the SVG; the canopy no longer slides as one panel. */
.table-daylight::before { inset:-7%; animation:none; transform:none; opacity:.44; filter:blur(2.2px); }
.table-daylight::after { animation-duration:31s; }

/* Contact and cast shadows share the afternoon light's direction. */
#menu .main-plate { filter:drop-shadow(1px 3px 2px #37433730) drop-shadow(4px 11px 7px #35453F28); }
#menu .table-bouquet { filter:drop-shadow(1px 2px 1px #3C493A22) drop-shadow(4px 8px 4px #3C493A35); }
#menu .bread { filter:drop-shadow(2px 6px 3px #47513C30); }
#menu .glass { filter:drop-shadow(4px 8px 3px #3849582B); }
#menu .picnic-napkin { filter:drop-shadow(1px 2px 1px #63554120) drop-shadow(3px 7px 4px #4B503633); }
@media(max-width:700px) { .table-daylight::before { opacity:.39; filter:blur(1.6px); } }

/* One canopy casts over every object as well as the blanket. */
.table-daylight { z-index:8; mix-blend-mode:multiply; }
.table-daylight::before { opacity:.4; filter:blur(2.5px); }
.table-daylight::after { opacity:.35; }
@media(max-width:700px) { .table-daylight::before { opacity:.35; filter:blur(1.8px); } }

/* A fuller crown: clustered foliage, tapered forks and a gentle cast penumbra. */
.table-daylight::before { filter:blur(2.8px); opacity:.38; }
@media(max-width:700px) { .table-daylight::before { filter:blur(2px); opacity:.34; } }

/* A lighter canopy now enters from the bottom-right corner. */
.table-daylight::before { transform:rotate(180deg); transform-origin:50% 50%; opacity:.29; background-position:center; }
.table-daylight::after { rotate:180deg; }
#menu .setting-forks,#menu .setting-knife-spoon { position:absolute; height:auto; pointer-events:none; filter:drop-shadow(2px 5px 2px #33454D30); }
#menu .setting-forks { width:72px; left:-61px; top:185px; }
#menu .setting-knife-spoon { width:126px; left:calc(100% + 92px); top:275px; }
#menu .place .butterfly--setting-card { left:160px; right:auto; top:-145px; }
@media(max-width:1100px) and (min-width:701px) {
 #menu .setting-forks { left:-66px; top:185px; }
 #menu .setting-knife-spoon { left:calc(100% - 7px); top:300px; }
}
@media(max-width:700px) {
 .table-daylight::before { opacity:.26; }
 #menu .setting-forks { width:35px; left:-18px; top:100px; }
 #menu .setting-knife-spoon { width:50px; left:calc(100% - 32px); top:195px; }
}
@media(prefers-reduced-motion:reduce) { .table-daylight::before { opacity:.29; } }

/* Align the cutlery heels with the plate and give the tart its own space below. */
#menu .setting-forks { left:-39px; top:306px; }
#menu .bread { top:calc(50% + 180px); }
@media(max-width:1100px) and (min-width:701px) {
 #menu .setting-forks { left:-50px; top:330px; }
 #menu .bread { left:-33px; top:calc(50% + 245px); }
}
@media(max-width:700px) {
 #menu .setting-forks { left:-18px; top:100px; }
 #menu .bread { left:0; top:calc(min(78vw,400px) - 44px); }
}

/* Subtle shade rises from the left, with its foliage reaching toward the center. */
.table-daylight::before { transform:scaleY(-1); background-position:45% top; background-size:150% auto; opacity:.13872; }
.table-daylight::after { rotate:0deg; }
@media(max-width:700px) { .table-daylight::before { opacity:.1224; } }
@media(prefers-reduced-motion:reduce) { .table-daylight::before { opacity:.13872; } }

/* Preserve visible motion, and stop spending frames on offscreen or background artwork. */
.motion-idle,.motion-idle *,.motion-idle::before,.motion-idle::after,.motion-idle *::before,.motion-idle *::after,
.page-hidden *,.page-hidden *::before,.page-hidden *::after { animation-play-state:paused!important; }
.motion-idle .table-daylight::before,.page-hidden .table-daylight::before { background-image:none; }
#tables.motion-idle::before { background-image:none; }

@media(max-width:700px) { #menu .butterfly--setting-left { left:100px; top:8px; } }

/* Three individual porcelain bowls keep the picnic food at a believable scale. */
@media(max-width:1100px) and (min-width:701px) {
}
@media(max-width:700px) {
 #menu .butterfly--setting-left { left:-7px; top:32px; }
}
@media(max-width:700px) and (prefers-reduced-motion:reduce) { .table-daylight::before { opacity:.1224; } }

/* An open invitation balances the heading, with the process hanging below it. */
#process .process-opening { max-width:1100px; margin:0 auto 30px; display:grid; grid-template-columns:.95fr 1.05fr; gap:70px; align-items:center; }
#process .process-heading { text-align:left; }
#process .process-heading .h2 { font-size:clamp(43px,5vw,72px); line-height:1.09; max-width:none; text-wrap:balance; }
#process .process-heading .intro { font-size:17px; line-height:1.65; margin-top:22px; }
.process-invitation { position:relative; padding:26px 14px 22px; border-top:1px solid #C8B38B; border-bottom:1px solid #C8B38B; text-align:center; }
.process-invitation::before,.process-invitation::after { content:""; position:absolute; left:5px; right:5px; height:1px; background:#D9CBB68C; }
.process-invitation::before { top:5px; }.process-invitation::after { bottom:5px; }
.process-bloom { position:absolute; width:30px; height:auto; left:50%; top:0; translate:-50% -50%; padding:0 5px; box-sizing:content-box; background:var(--linen); }
.process-salutation { font:400 48px/1.15 var(--script); color:var(--rose); margin:0 0 12px; }
.process-description { font:400 17px/1.75 var(--serif); color:#35415A; max-width:43ch; margin:0 auto; text-wrap:pretty; }
.process-services { display:flex; flex-direction:column; gap:3px; margin:20px auto 0; font:400 17px/1.4 var(--table-display); color:#8C6468; }
@media(min-width:1101px) { #menu .serving { left:calc(50% + 60px); } }
@media(max-width:1100px) and (min-width:701px) {
 #process .process-opening { gap:35px; }
 .process-description { font-size:16px; }
 .process-services { font-size:16px; }
 #menu .serving { left:calc(50% + 27px); }
}
@media(max-width:700px) {
 #process .process-opening { grid-template-columns:1fr; gap:38px; margin-bottom:12px; }
 #process .process-heading { text-align:center; }
 #process .process-heading .h2 { margin:0 auto; font-size:52px; max-width:none; }
 #process .process-heading .intro { font-size:16px; margin-top:18px; }
 .process-invitation { max-width:440px; margin:auto; padding:26px 11px 24px; }
 .process-salutation { font-size:44px; }
 .process-description { font-size:16px; line-height:1.75; }
 .process-services { font-size:15px; gap:5px; }
 #menu .serving { left:calc(50% + 8px); }
}

/* A slimmer ivory fascia, with a compact second row only where it is needed. */
.site-header {
 grid-template-columns:auto minmax(0,1fr) auto;
 gap:24px;
 padding:12px clamp(20px,3.4vw,52px) 14px;
 background:linear-gradient(180deg,#FFFDF7,#FBF8F1);
 border-bottom:1px solid #BEA77F80;
 box-shadow:inset 0 -3px #F0E8D9,inset 0 -4px #D8C8AA66;
}
.site-header::before { display:none; }
.site-header .logo { min-width:0; gap:10px; grid-column:1; grid-row:1; }
.site-header .brand-flower { flex-shrink:0; width:36px; height:36px; outline-offset:-4px; border-color:#C5AA7666; }
.site-header .brand-flower img { width:23px; }
.site-header .brand-lockup { gap:5px; }
.site-header .brand-lockup img { width:196px; }
.site-header .brand-caption { font-size:6.7px; line-height:1.2; letter-spacing:.085em; }
.site-header nav { grid-column:2; grid-row:1; width:auto; min-width:0; justify-content:center; gap:22px; font-size:10.5px; font-weight:500; line-height:1.2; letter-spacing:.09em; }
.site-header nav a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0; }
.site-header nav a::after { bottom:7px; width:18px; background:#AD6575; }
.site-header nav a:hover,.site-header nav a:focus-visible { color:#9B4D62; }
.site-header nav a:focus-visible,.site-header .logo:focus-visible { outline:1px solid #AD6575; outline-offset:5px; }
.site-header .btn { grid-column:3; grid-row:1; height:42px; padding:0 19px; font-size:10px; letter-spacing:.1em; border-radius:2px; outline-offset:-4px; box-shadow:0 2px 3px #1B27470A; white-space:nowrap; }
@media(max-width:1100px) and (min-width:901px) {
 .site-header { padding-inline:24px; gap:16px; }
 .site-header .brand-lockup img { width:170px; }
 .site-header .brand-caption { font-size:5.9px; }
 .site-header nav { gap:16px; font-size:10px; letter-spacing:.06em; }
 .site-header .btn { padding-inline:15px; font-size:9px; }
}
@media(max-width:900px) {
 .site-header { grid-template-columns:minmax(0,1fr) auto; padding:8px 24px 4px; gap:0 16px; }
 .site-header .btn { grid-column:2; grid-row:1; height:38px; }
 .site-header nav { grid-column:1/-1; grid-row:2; justify-content:center; gap:30px; border-top:1px solid #CDB99740; margin-top:2px; }
 .site-header nav a { min-height:38px; }
 .site-header nav a::after { bottom:3px; }
}
@media(max-width:600px) {
 .site-header { padding:8px 14px 4px; gap:0 10px; }
 .site-header .brand-flower { width:28px; height:28px; outline-offset:-3px; }
 .site-header .brand-flower img { width:18px; }
 .site-header .logo { gap:7px; }
 .site-header .brand-lockup img { width:146px; }
 .site-header .brand-caption { display:none; }
 .site-header .btn { height:38px; padding-inline:13px; font-size:8.5px; letter-spacing:.075em; }
 .site-header nav { justify-content:space-between; gap:8px; font-size:9.25px; letter-spacing:.025em; }
 .site-header nav a { min-height:38px; }
}
@media(max-width:360px) {
 .site-header { padding-inline:12px; gap:0 8px; }
 .site-header .brand-flower { width:25px; height:25px; }
 .site-header .brand-flower img { width:16px; }
 .site-header .brand-lockup img { width:124px; }
 .site-header .btn { padding-inline:10px; font-size:7.5px; }
 .site-header nav { font-size:8.5px; letter-spacing:.02em; gap:6px; }
}

/* Let the real hero sky continue behind the scalloped awning cutouts. */
.hero { margin-top:-28px; padding-top:178px; }
.awning {
 -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 28px) no-repeat,radial-gradient(circle at 50% 0,#000 27.5px,transparent 28px) bottom left/56px 28px repeat-x;
 mask:linear-gradient(#000 0 0) top/100% calc(100% - 28px) no-repeat,radial-gradient(circle at 50% 0,#000 27.5px,transparent 28px) bottom left/56px 28px repeat-x;
}
@media(max-width:700px) { .hero { padding-top:168px; } }

/* Useful policies, set quietly beneath the garden's social links. */
footer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:25px 35px; }
footer > nav:not(.footer-legal) { align-items:center; justify-content:flex-end; }
footer .footer-legal { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 26px; padding-top:18px; border-top:1px solid #E8DDC130; font-size:10px; letter-spacing:.07em; }
.footer-legal > span { margin-right:auto; color:#E8DDC1B0; font-size:9px; }
.footer-legal a { white-space:nowrap; min-height:36px; display:inline-flex; align-items:center; }
footer a:hover,footer a:focus-visible { text-decoration:underline; text-underline-offset:5px; }
.form-privacy { max-width:350px; margin:0 auto; text-align:center; font:400 11px/1.65 var(--sans); color:var(--soft); }
.form-privacy a { text-decoration:underline; text-underline-offset:3px; }
.thankyou-policies { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin:24px auto; padding:0 20px; font:400 12px/1.6 var(--sans); }
.thankyou-policies a { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:700px) {
 footer { grid-template-columns:1fr; gap:22px; }
 footer > img { margin-inline:auto; }
 footer > nav:not(.footer-legal),footer .footer-legal { justify-content:center; }
 footer .footer-legal { font-size:10px; gap:6px 20px; }
 .footer-legal > span { flex-basis:100%; margin:0 0 5px; }
}

/* Keep phrases together and give tablet artwork its own space below the copy. */
.hero-title-main,.hero-title-finish { display:block; }
.hero-title-finish { white-space:nowrap; }
@media(min-width:701px) and (max-width:1000px) {
 .hero { display:grid; grid-template-columns:1fr 1fr; column-gap:28px; align-items:center; }
 .hero > .caps,.hero > h1,.hero > .hero-description,.hero > .hero-link { grid-column:1/-1; }
 .hero h1 { font-size:clamp(54px,7.3vw,73px); width:100%; }
 .hero .hero-description { width:100%; max-width:650px; text-wrap:pretty; }
 .hero .hero-link { justify-self:center; }
 .hero-picnic { position:relative; grid-column:1; width:min(300px,100%); max-width:100%; left:auto; bottom:auto; justify-self:end; margin-top:30px; }
 .hero .nyc-cameo { position:relative; grid-column:2; width:158px; right:auto; bottom:auto; justify-self:start; margin:30px 0 0; }
 .butterfly--hero-one { width:50px; top:48px; right:28px; }
 .butterfly--hero-two { left:7%; bottom:215px; }
 .hero-picnic .butterfly--hero-three { width:38px; }
}
@media(max-width:700px) {
 .hero h1 { font-size:clamp(36px,11.4vw,49px); max-width:100%; text-wrap:balance; }
 .hero-title-main { text-wrap:balance; }
 .hero .hero-description { text-wrap:pretty; }
 .hero .hero-link { font-size:9px; letter-spacing:.13em; gap:12px; max-width:100%; white-space:nowrap; }
 .hero .hero-link > span { flex-shrink:0; }
 .note-body h2 { font-size:clamp(36px,11vw,54px); text-wrap:balance; }
 .note-body > p:not(.caps):not(.sig) { text-wrap:pretty; }
 .note-body .sig { font-size:clamp(35px,10.6vw,45px); white-space:nowrap; }
 #process .process-heading .h2 { font-size:clamp(42px,12.5vw,52px); }
 .process-description,.process-services > span { text-wrap:pretty; }
 .tables-head .h2 { font-size:clamp(44px,14vw,56px); text-wrap:balance; }
 .tables-head > p { text-wrap:pretty; }
 .gallery-controls { gap:14px; }
 .gallery-controls > p { text-wrap:balance; }
 .gallery-arrow { width:44px; height:44px; }
 .faq-intro .h2 { font-size:clamp(42px,12vw,58px); text-wrap:balance; }
 .faq-paper summary > span:nth-child(2),.faq-paper details > p { text-wrap:pretty; }
 .rsvp__head h2 { font-size:clamp(40px,13vw,61px); white-space:nowrap; }
 .rsvp__head > .caps { font-size:9px; letter-spacing:.16em; }
 .rsvp__head > p,.invitation-opening,.prepared-note h3,.form-note,.form-privacy { text-wrap:balance; }
 .occasion-choice .sq { flex-shrink:0; }
 .return-env a[href^="mailto:"] { font-size:clamp(11px,3.2vw,14px); white-space:nowrap; }
 .return-env p:first-of-type { font-size:clamp(20px,6vw,27px); text-wrap:balance; }
 .rsvp__foot .btn { padding-inline:12px; font-size:10px; letter-spacing:.09em; white-space:nowrap; }
 .photo-dialog__toolbar { gap:10px; }
 .photo-dialog__toolbar > .caps { font-size:8px; letter-spacing:.1em; }
 .photo-dialog figcaption { font-size:20px; text-wrap:balance; }
 .photo-dialog .photo-stage { height:min(56dvh,650px); }
}
@media(max-width:430px) {
 .boxes { grid-template-columns:minmax(0,1fr); gap:8px; }
 .occasion-choice { font-size:16px; padding:11px 12px; min-height:49px; }
 .tag-paper { padding:44px 12px 23px; }
 .tag-paper h3 { font-size:clamp(21px,6.2vw,27px); line-height:1.15; text-wrap:balance; }
 .tag-paper p { font-size:12px; line-height:1.6; text-wrap:pretty; }
}
@media(max-width:360px) {
 .process-services { font-size:14px; }
 .faq-paper { padding-inline:14px; }
 .faq-paper summary { gap:8px; font-size:17px; }
 .rsvp__inner { padding-inline:17px; }
 .rsvp__head > .caps { font-size:8px; letter-spacing:.12em; }
 .rsvp__head > p { font-size:15px; }
 .invitation-salutation { font-size:35px; }
 .invitation-opening { font-size:16px; }
 .occasion-field legend { font-size:20px; }
 .thankyou-card h1 { font-size:49px; }
 .thankyou-card { padding-inline:22px; }
}
@media(max-height:500px) and (orientation:landscape) {
 .photo-dialog { max-height:calc(100dvh - 16px); padding:10px 16px; }
 .photo-dialog__toolbar { margin-bottom:6px; }
 .photo-dialog .photo-stage { height:45dvh; }
 .photo-dialog figcaption { margin-top:7px; font-size:17px; }
 .photo-dialog__nav { margin-top:4px; }
}

.process-rest { display:block; }
@media(max-width:430px) { #process .process-heading .intro > span { display:block; } }

/* Small groups fade on entry; hiding is enabled only while the controller is healthy. */
@media(prefers-reduced-motion:no-preference) {
 .entrances-starting [data-arrival],.entrances-ready [data-arrival].arrival-pending { opacity:0; }
 .embedded-preview.entrances-starting #menu[data-arrival],.embedded-preview.entrances-starting #menu [data-arrival] { opacity:1; }
 .entrances-starting [data-arrival]:focus-within,.entrances-ready [data-arrival].arrival-pending:focus-within { opacity:1; }
}
@media(prefers-reduced-motion:reduce),print {
 [data-arrival].arrival-pending { opacity:1!important; }
}

/* A little wax seal accompanies the prepared letter on every screen size. */
.prepared-note { scroll-margin-top:26px; perspective:700px; }
.prepared-note__heading { display:grid; grid-template-columns:minmax(0,1fr) 66px; align-items:center; gap:18px; padding-top:5px; }
.prepared-note__heading h3 { text-wrap:balance; outline:none; }
.prepared-note__heading h3:focus-visible { text-decoration:underline; text-decoration-color:#BD87935C; text-underline-offset:8px; }
.rsvp .prepared-note .note-seal { position:relative; display:grid; width:66px; height:66px; right:auto; bottom:auto; opacity:0; scale:1; rotate:-5deg; filter:drop-shadow(1px 3px 2px #713F5138); }
.rsvp .prepared-note .note-seal.is-on { opacity:1; animation:none; }
.note-seal > svg { width:100%; height:100%; }
.note-seal > img { position:absolute; width:40%; left:30%; top:32%; }
.seal-petal { position:absolute; opacity:0; top:45%; left:45%; width:7px; height:11px; border-radius:80% 25% 75% 25%; background:#C88699; border:.5px solid #A45E75; pointer-events:none; }
.seal-petal:nth-of-type(2n) { background:#D6B675; border-color:#BB985B; width:5px; height:8px; }
@media(max-width:700px) {
 .prepared-note__heading { grid-template-columns:minmax(0,1fr) 52px; gap:14px; }
 .prepared-note__heading h3 { font-size:clamp(27px,8vw,35px); line-height:1.15; }
 .rsvp .prepared-note .note-seal { width:52px; height:52px; }
}

/* Browsing belongs underneath the plates, with generous, unmistakable arrows. */
.gallery-intro { max-width:1250px; margin:20px auto 0; font:italic 16px/1.5 var(--serif); color:var(--rose); }
#tables .runner { padding-bottom:40px; }
#tables .gallery-controls { flex-direction:column; gap:16px; margin:0 auto 26px; text-align:center; }
#tables .gallery-controls > p { font:400 22px/1.35 var(--table-display); color:var(--navy); }
.gallery-controls > p > span { display:block; font:400 11px/1.6 var(--sans); color:var(--soft); margin-top:5px; }
#tables .gallery-controls > div { gap:18px; }
#tables .gallery-arrow { width:64px; height:64px; border-color:#B6996CA8; background:#FFFCF2D9; box-shadow:0 3px 7px #5F65400D; }
.gallery-arrow svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.gallery-arrow:focus-visible { outline:2px solid #A65D73; outline-offset:4px; }

/* Warm ivory leaf foil, with a narrow reflection that travels across the letter. */
#host .notecard { border-color:#B79D6C; outline-color:#D6C092A3; background:linear-gradient(115deg,#FFFEF8,#F7F2E8 47%,#FFFDF5); }
.note-body { position:relative; isolation:isolate; }
.note-foil { position:absolute; inset:14px; z-index:-1; overflow:hidden; pointer-events:none; border:1px solid transparent; border-image:linear-gradient(125deg,#A88950,#F1DEAE 22%,#C4A565 43%,#F6E6C2 64%,#AB8A55) 1; background:url('../img/foil-flecks.svg') center/160px 160px repeat,linear-gradient(125deg,#EADAB31A,transparent 40%,#F3E6BD30); }
.note-foil::after { content:""; position:absolute; inset:-40% auto -40% -45%; width:36%; background:linear-gradient(90deg,transparent,#E6D3A633,#FFF8DC9C,#CEAF7533,transparent); transform:translateX(-100%) skewX(-16deg); animation:letter-foil-light 18s ease-in-out -4s infinite; }
@keyframes letter-foil-light { 0%,8% { transform:translateX(-100%) skewX(-16deg); opacity:0; }18% { opacity:.35; }54% { transform:translateX(520%) skewX(-16deg); opacity:.22; }62%,100% { transform:translateX(520%) skewX(-16deg); opacity:0; } }
.note-body > .caps { color:#8C6D41; }
.note-body .sig { color:#9E6069; background:linear-gradient(110deg,#9D5E6A,#B38B55 28%,#86526A 52%,#BB9562 74%,#A36372); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:letter-foil-ink 24s ease-in-out infinite alternate; }
@keyframes letter-foil-ink { from { background-position:0% 50%; }to { background-position:100% 50%; } }
.faq-bird { display:block; width:186px; height:auto; margin:22px 0 25px; object-fit:contain; }
.faq-intro > .faq-bird + p:not(.caps) { margin-top:0; }

/* Clear at first, then a slow return of the oak canopy. */
#menu.daylight-timed .table-daylight { opacity:0; transition:opacity 8s cubic-bezier(.3,0,.25,1); }
#menu.daylight-timed.has-daylight .table-daylight { opacity:1; }

/* Pressed wax, a gilt rim and a much roomier letter preview. */
.prepared-note__heading { grid-template-columns:minmax(0,1fr) 82px; gap:22px; }
.rsvp .prepared-note .note-seal { width:82px; height:82px; filter:drop-shadow(0 1px 0 #F1D5CD) drop-shadow(2px 5px 3px #6B394735); }
.note-seal > img { width:42%; left:29%; top:36%; filter:drop-shadow(0 1px 0 #8E4663); opacity:.9; }
.prepared-note textarea { height:clamp(520px,65dvh,700px); min-height:520px; font-size:14.5px; line-height:1.7; padding:18px; background:linear-gradient(135deg,#FCF8EF,#F4EDE0); border-color:#C8B695; box-shadow:inset 0 1px 4px #8F7C5810; }
@media(max-width:700px) {
 #tables .gallery-arrow { width:60px; height:60px; }
 #tables .runner { padding-bottom:34px; }
 #tables .gallery-controls { margin-bottom:12px; }
 .gallery-intro { margin-top:20px; font-size:14px; }
 .faq-bird { width:126px; margin:18px 0 23px; }
 .note-foil { inset:9px; background-size:120px 120px,auto; }
 .prepared-note__heading { grid-template-columns:minmax(0,1fr) 62px; gap:14px; }
 .rsvp .prepared-note .note-seal { width:62px; height:62px; }
 .prepared-note textarea { font-size:16px; line-height:1.65; padding:14px; }
}
@media(prefers-reduced-motion:reduce) {
 #menu.daylight-timed .table-daylight { opacity:1; transition:none; }
 .note-foil::after { display:none; }
 .note-body .sig { animation:none; background:none; -webkit-text-fill-color:currentColor; }
}
@media print { .note-foil { display:none; }.note-body .sig { background:none; -webkit-text-fill-color:currentColor; } }

/* A distant picnic retreat, with the basket in the foreground. */
.hero-retreat { position:absolute; width:282px; height:auto; right:24px; bottom:22px; z-index:-1; opacity:.78; pointer-events:none; user-select:none; filter:saturate(.82) drop-shadow(0 4px 5px #676F5520); }
@media(min-width:1500px) { .hero-retreat { width:320px; right:4%; bottom:24px; } }
@media(min-width:1001px) and (max-width:1180px) { .hero-retreat { width:230px; right:15px; bottom:20px; } }
@media(min-width:701px) and (max-width:1000px) {
 .hero-retreat { position:relative; grid-column:2; width:min(260px,100%); justify-self:start; right:auto; bottom:auto; margin-top:30px; }
}
@media(max-width:700px) {
 .hero-retreat { position:relative; display:block; width:225px; max-width:80%; right:auto; bottom:auto; margin:-12px 0 0 auto; }
 .hero-picnic { margin-right:auto; margin-left:0; width:280px; }
}

/* Linen shades follow the photograph. The weave and stitching stay constant. */
#menu .placemat { --mat-color:#C7A6AC; --mat-edge:#9F7882; background-color:var(--mat-color); border-color:var(--mat-edge); transition:background-color .8s ease,border-color .8s ease; }
#menu .placemat::after { border-color:var(--mat-edge); transition:border-color .8s ease; }

/* The folded place card stands above the charger, with room for its rear fold. */
#menu .serving { top:-42px; bottom:auto; left:calc(50% + 45px); }
#menu .butterfly--setting-left { top:18%; left:-8px; }
@media(min-width:701px) and (max-width:1100px) {
 #menu .serving { top:-32px; left:calc(50% + 15px); width:250px; }
}
@media(max-width:700px) {
 #menu .plate-wrap { height:calc(min(78vw,400px) + 225px); }
 #menu .main-plate { top:174px; }
 #menu .serving { top:0; left:calc(50% - 8px); bottom:auto; width:min(240px,calc(100% - 38px)); }
 #menu .bread { top:calc(min(78vw,400px) + 135px); }
 #menu .glass { top:112px; }
 #menu .setting-forks,#menu .setting-knife-spoon { top:220px; }
 #menu .butterfly--setting-left { top:130px; left:4px; }
}

/* The cardinal's own branch perches just above the invitation to read. */
.faq-bird { width:220px; margin:14px 0 9px; }
.faq-intro > .faq-bird + .h2 { margin-top:0; }
@media(max-width:700px) { .faq-bird { width:154px; margin:14px 0 8px; } }
@media(prefers-reduced-motion:reduce) { #menu .placemat,#menu .placemat::after { transition:none; } }
@media(min-width:701px) {
 #menu .main-plate { top:54%; }
 #menu .serving { top:-50px; }
}
@media(min-width:1500px) { #menu .serving { top:-64px; } }

/* The parasol belongs to the picnic, close enough to frame the headline. */
@media(min-width:1001px) {
 .hero-retreat { width:clamp(460px,43vw,680px); right:-4%; bottom:5px; opacity:.84; }
}
@media(min-width:701px) and (max-width:1000px) {
 .hero { padding-bottom:65px; }
 .hero-retreat { position:absolute; grid-column:auto; width:440px; max-width:61%; right:-5%; bottom:4px; margin:0; opacity:.82; }
 .hero-picnic { grid-column:1/-1; justify-self:start; margin-top:45px; margin-bottom:5px; }
}
@media(max-width:700px) {
 .hero-retreat { width:310px; max-width:100%; margin:-30px -14px 0 auto; opacity:.88; }
 .hero-picnic { z-index:1; width:265px; margin-top:25px; }
}

/* The colorful materials gently return to full color with the same passing light. */
@property --sun-saturation { syntax:'<number>'; inherits:true; initial-value:1; }
@property --gingham-ink { syntax:'<color>'; inherits:false; initial-value:rgba(91,118,194,.2); }
#menu { --sun-saturation:1; --gingham-ink:rgba(91,118,194,.2); background-image:linear-gradient(90deg,var(--gingham-ink) 50%,transparent 50%),linear-gradient(var(--gingham-ink) 50%,transparent 50%); }
#menu.daylight-timed { --sun-saturation:.58; --gingham-ink:rgba(128,134,154,.2); transition:--sun-saturation 8s cubic-bezier(.3,0,.25,1),--gingham-ink 8s cubic-bezier(.3,0,.25,1); }
#menu.daylight-timed.has-daylight { --sun-saturation:1; --gingham-ink:rgba(91,118,194,.2); }
#menu .plate__food,#menu .placemat,#menu .petit-four { filter:saturate(var(--sun-saturation)); }
#menu .table-bouquet { filter:saturate(var(--sun-saturation)) drop-shadow(1px 2px 1px #3C493A22) drop-shadow(4px 8px 4px #3C493A35); }
@media(prefers-reduced-motion:reduce) { #menu.daylight-timed { --sun-saturation:1; --gingham-ink:rgba(91,118,194,.2); transition:none; } }
@media(min-width:701px) { .hero-retreat { mask-image:none; } }
@media(max-width:700px) {
 .hero-picnic { width:235px; left:-10px; margin-top:110px; }
 .hero-retreat { position:absolute; width:300px; max-width:90%; right:-20px; bottom:35px; margin:0; opacity:.86; }
}
/* The first state is immediate; only the arrival of sunlight animates. */
#menu.daylight-timed,#menu.daylight-timed .table-daylight { transition:none; }
#menu.daylight-timed.has-daylight { transition:--sun-saturation 8s cubic-bezier(.3,0,.25,1),--gingham-ink 8s cubic-bezier(.3,0,.25,1); }
#menu.daylight-timed.has-daylight .table-daylight { transition:opacity 8s cubic-bezier(.3,0,.25,1); }
@media(prefers-reduced-motion:reduce) { #menu.daylight-timed.has-daylight,#menu.daylight-timed.has-daylight .table-daylight { transition:none; } }

/* An open parasol leaves the headline under its canopy, with no side veil. */
@media(min-width:1001px) {
 .hero-retreat { width:auto; height:calc(100% - 35px); max-width:none; right:-4%; bottom:5px; opacity:.92; }
}
@media(min-width:701px) and (max-width:1000px) {
 .hero-retreat { width:440px; max-width:61%; height:auto; bottom:4px; opacity:.92; }
}
@media(max-width:700px) {
 .hero-picnic { margin-top:125px; }
 .hero-retreat { width:280px; height:auto; max-width:90%; bottom:25px; opacity:.92; }
}

/* Let the moving shade dissolve before it reaches the cloth's borders. */
#menu .table-daylight { mask-image:linear-gradient(to bottom,transparent,#000 110px,#000 calc(100% - 130px),transparent); }
@media(max-width:700px) { #menu .table-daylight { mask-image:linear-gradient(to bottom,transparent,#000 90px,#000 calc(100% - 110px),transparent); } }

/* A slightly smaller, straight parasol, with clear air beneath the canopy. */
@media(min-width:1001px) { .hero-retreat { height:calc(100% - 75px); right:-145px; } }
@media(min-width:701px) and (max-width:1000px) { .hero-retreat { width:405px; right:-90px; } }
@media(max-width:700px) { .hero-retreat { width:255px; right:-30px; } }
.hero h1:focus { outline:none; }

/* A tiny garden journey, tucked into the lower right corner. */
.page-journey { position:fixed; z-index:30; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); display:flex; align-items:end; gap:9px; padding:8px 9px 9px 12px; border:1px solid #C8B995A6; border-radius:16px; background:#FFFCF2EE; box-shadow:0 3px 13px #59614618,inset 0 1px 0 #FFFFFF; }
.page-journey[hidden] { display:none; }
.journey-meter { position:relative; width:78px; height:33px; flex:none; }
.journey-caterpillar { position:absolute; width:36px; height:26px; left:0; bottom:5px; transform:translateX(var(--journey-position,0px)); pointer-events:none; }
.journey-caterpillar svg { width:100%; height:100%; overflow:visible; }
.journey-track { position:absolute; height:3px; left:0; right:0; bottom:0; overflow:hidden; background:#D9DECA; border-radius:3px; }
.journey-track > span { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#A4B37B,#7A976F); transform:scaleX(var(--journey-progress,0)); transform-origin:left; }
.journey-top { display:grid; place-items:center; width:36px; height:36px; flex:none; padding:8px; border-radius:50%; border:1px solid #C4AC82; background:#F6EFDF; color:#364F46; cursor:pointer; transition:background .2s,translate .2s; }
.journey-top svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.journey-top:hover { background:#EAF0DB; translate:0 -2px; }
.journey-top:focus-visible { outline:2px solid #AE6B7E; outline-offset:3px; }
.is-walking .caterpillar-body { transform-origin:24px 24px; animation:caterpillar-inch .48s ease-in-out infinite; }
.is-walking .caterpillar-feet { transform-origin:24px 23px; animation:caterpillar-steps .24s ease-in-out infinite alternate; }
.is-walking .caterpillar-head { transform-origin:38px 20px; animation:caterpillar-nod .48s ease-in-out infinite; }
@keyframes caterpillar-inch { 0%,100% { transform:scale(1) translateY(0); }50% { transform:scale(.88,1.1) translateY(-1.5px); } }
@keyframes caterpillar-steps { from { transform:skewX(-9deg); }to { transform:skewX(9deg); } }
@keyframes caterpillar-nod { 0%,100% { transform:rotate(0); }50% { transform:rotate(-7deg); } }
body:has(.photo-dialog[open]) .page-journey { visibility:hidden; }
@media(max-width:700px) { .page-journey { right:12px; bottom:max(12px,env(safe-area-inset-bottom)); padding:6px 7px 7px 10px; gap:7px; } }
@media(prefers-reduced-motion:reduce) { .page-journey * { animation:none!important; }.journey-top { transition:none; }.journey-top:hover { translate:none; } }
@media print { .page-journey { display:none; } }
/* Lift the umbrella slightly; only the foot of its pole dissolves into the lawn. */
.hero-retreat { translate:0 -8px; mask-image:linear-gradient(to bottom,#000 calc(100% - 42px),transparent); }

/* An engraved garden folio introduces the hanging process cards. */
#process .process-opening { position:relative; isolation:isolate; max-width:1170px; grid-template-columns:.95fr 1.05fr; gap:0; padding:14px; margin-bottom:45px; background:linear-gradient(110deg,#F8F1E3,#FFFDF6 46%,#FDF9F0); border:1px solid #C3AD87; outline:1px solid #DECCAB; outline-offset:5px; box-shadow:0 7px 19px -14px #68583B55; }
#process .process-opening::before { content:""; position:absolute; z-index:-1; inset:7px; border:1px solid #CBB58A80; pointer-events:none; }
#process .process-opening::after { content:""; position:absolute; width:84px; height:151px; left:18px; bottom:14px; background:url('../img/process-sprig.svg') center/contain no-repeat; opacity:.8; pointer-events:none; }
#process .process-heading { padding:42px 42px 48px; text-align:left; align-self:center; }
#process .process-heading > .caps { font-size:10px; letter-spacing:.22em; margin-bottom:22px; color:#9F5C6D; }
#process .process-heading .h2 { font-size:clamp(43px,4.5vw,64px); line-height:1.1; margin:0; text-wrap:balance; }
.process-floral-rule { display:flex; align-items:center; gap:12px; width:180px; margin:25px 0 20px; }
.process-floral-rule > span { height:1px; flex:1; background:linear-gradient(90deg,#BDA16D,#DFCCAA); }
.process-floral-rule > img { width:25px; height:auto; opacity:.8; }
#process .process-heading .intro { font:400 17px/1.7 var(--table-display); margin:0; max-width:30ch; color:#3D4B54; }
#process .process-personal { font:italic 14px/1.6 var(--table-display); color:#966A6E; margin:20px 0 0; padding-left:24px; max-width:28ch; }
#process .process-invitation { align-self:stretch; padding:39px 38px 34px; margin:0; max-width:none; border:0; border-left:1px solid #C6AD8570; text-align:left; background:linear-gradient(90deg,#B3956520,transparent 15px),linear-gradient(120deg,#FFFDF7,#F7F1E5); }
#process .process-invitation::before { top:18px; bottom:18px; left:9px; right:auto; height:auto; width:1px; background:#DAC8A84D; }
#process .process-invitation::after { width:54px; height:54px; left:auto; right:9px; bottom:9px; top:auto; background:url('../img/process-sprig.svg') center/contain no-repeat; transform:rotate(40deg); opacity:.4; }
#process .process-note-label { font:500 8px/1.5 var(--sans); letter-spacing:.18em; color:#9F5C6D; margin:0 0 9px; }
#process .process-salutation { font:400 40px/1.15 var(--table-display); color:var(--navy); margin:0 0 17px; }
#process .process-description { font:400 16px/1.65 var(--table-display); color:#42505A; max-width:43ch; margin:0; text-wrap:pretty; }
#process .process-description + .process-description { margin-top:13px; }
#process .process-services { display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; padding:19px 0 0; margin:23px 0 0; border-top:1px solid #D4C2A1; list-style:none; font:400 16px/1.3 var(--table-display); color:#445446; }
.process-services li { position:relative; padding-left:13px; }
.process-services li::before { content:""; position:absolute; width:5px; height:8px; left:0; top:5px; border:1px solid #83966D; border-radius:80% 0 80% 0; transform:rotate(35deg); background:#C7D0AE; }
@media(min-width:701px) and (max-width:1000px) {
 #process .process-heading { padding:30px 26px 40px; }
 #process .process-invitation { padding:30px 24px; }
 #process .process-services { grid-template-columns:1fr; gap:8px; }
 #process .process-opening::after { width:60px; height:110px; left:9px; bottom:9px; opacity:.55; }
}
@media(max-width:700px) {
 .hero-retreat { display:none; }
 .hero-picnic { width:320px; max-width:100%; margin:30px auto 0; left:auto; }
 #menu .glass { z-index:4; }
 #process .process-opening { grid-template-columns:1fr; padding:10px; margin-bottom:24px; }
 #process .process-heading { padding:30px 20px 32px; text-align:center; }
 #process .process-heading .h2 { font-size:clamp(37px,10.2vw,52px); margin:0 auto; }
 .process-floral-rule { margin:20px auto 17px; width:150px; }
 #process .process-heading .intro { margin:auto; font-size:17px; }
 #process .process-personal { margin:15px auto 0; padding:0; max-width:24ch; }
 #process .process-opening::after { width:45px; height:82px; left:3px; top:125px; bottom:auto; opacity:.42; }
 #process .process-invitation { padding:25px 21px 26px; border-left:0; border-top:1px solid #C6AD8570; background:linear-gradient(180deg,#B395651A,transparent 12px),#FFFCF4; }
 #process .process-invitation::before { display:none; }
 #process .process-salutation { font-size:34px; }
 #process .process-description { font-size:17px; line-height:1.6; }
 #process .process-services { font-size:16px; gap:12px 15px; margin-top:20px; }
}
@media(max-width:360px) { #process .process-services { grid-template-columns:1fr; gap:9px; } }
#menu .glass { z-index:4; }
.journey-caterpillar { width:44px; height:29px; bottom:4px; filter:drop-shadow(0 1px 0 #77875A33); }
.is-walking .caterpillar-body { transform-origin:34px 32px; }
.is-walking .caterpillar-head { transform-origin:60px 24px; }

/* Center the folio's opening page and give the body copy an easier reading size. */
#process .process-heading { text-align:center; }
#process .process-heading .h2 { margin-inline:auto; }
#process .process-heading .intro { font:400 17px/1.75 var(--serif); margin:0 auto; max-width:34ch; }
.process-floral-rule { margin-inline:auto; }
#process .process-personal { margin:20px auto 0; padding:0; max-width:30ch; }
#process .process-description { font:400 17px/1.75 var(--serif); max-width:none; }
#process .process-services { font-size:19px; }
#process .process-opening::after { width:64px; height:116px; left:18px; bottom:15px; }

/* Cream lettering stays legible on the ink-blue send button. */
.prepared-note__actions > [data-send-inquiry] { color:#FFFDF5; background:#1B2747; font:600 11px/1.4 var(--sans); letter-spacing:.09em; text-decoration:none; padding:14px 23px; min-height:50px; height:auto; }
.prepared-note__actions > [data-send-inquiry]:hover { color:#FFFDF5; background:#384B69; }
.prepared-note__actions > [data-send-inquiry]:focus-visible { outline:2px solid #AE6B7E; outline-offset:4px; }
.prepared-note__actions > [data-send-inquiry]:disabled { color:#FFFDF5; background:#48546C; opacity:1; cursor:wait; }
@media(max-width:700px) {
 .table-daylight::before { background-image:url('../img/oak-leaf-shadows-mobile.svg'); background-size:auto 110%; background-position:30% center; transform:none; }
 .faq-bird { margin-inline:auto; }
 .faq-intro { text-align:center; }
 .faq-contact { margin-inline:auto; justify-content:center; }
 #process .process-heading .intro { font-size:16px; }
 #process .process-description { font-size:16px; line-height:1.75; }
 #process .process-services { font-size:18px; }
 #process .process-opening::after { width:45px; height:82px; left:3px; top:130px; bottom:auto; }
 .prepared-note__actions > [data-send-inquiry] { font-size:12px; letter-spacing:.075em; }
 .motion-idle .table-daylight::before,.page-hidden .table-daylight::before { background-image:none; }
}

/* A quieter opening page and a clearly typeset invitation opposite it. */
#process .process-opening::after,#process .process-invitation::after { display:none; }
.process-divider { display:block; width:76px; height:1px; margin:28px auto 25px; background:linear-gradient(90deg,transparent,#B59A69 15%,#B59A69 85%,transparent); }
#process .process-heading { padding-block:42px; }
#process .process-invitation { padding:40px 42px 32px; text-align:center; }
#process .process-note-label { margin-bottom:12px; font-size:8px; letter-spacing:.18em; }
#process .process-salutation { font-size:43px; margin-bottom:17px; }
#process .process-lede { font:400 24px/1.38 var(--table-display); color:#4B5D51; margin:0 auto 18px; max-width:32ch; text-wrap:balance; }
#process .process-description { font:400 15px/1.75 var(--serif); max-width:35ch; margin:0 auto; color:#4C545D; text-wrap:pretty; }
.process-service-index { margin-top:27px; border-top:1px solid #C8B38B; padding-top:17px; }
#process .process-service-index > .caps { font:500 8px/1.5 var(--sans); color:#9A7376; letter-spacing:.16em; margin:0 0 10px; }
#process .process-services { margin:0; padding:0; border:0; gap:0 24px; font-size:19px; text-align:left; }
#process .process-services li { padding:9px 0 10px 13px; border-bottom:1px solid #D8C8A859; }
#process .process-services li::before { top:15px; }
@media(min-width:701px) and (max-width:1000px) { #process .process-invitation { padding:31px 24px 26px; }#process .process-services { grid-template-columns:1fr 1fr; gap:0 15px; font-size:17px; }#process .process-lede { font-size:23px; } }
@media(max-width:700px) {
 #process .process-heading { padding:31px 20px; }
 #process .process-invitation { padding:28px 22px 27px; }
 #process .process-salutation { font-size:35px; }
 #process .process-lede { font-size:23px; max-width:25ch; }
 #process .process-lede br { display:none; }
 #process .process-description { font-size:15px; line-height:1.75; }
 #process .process-services { font-size:18px; gap:0 17px; }
 .process-service-index { margin-top:22px; }
 .process-divider { margin-block:22px 19px; }
}
@media(max-width:360px) { #process .process-invitation { padding-inline:17px; }#process .process-services { grid-template-columns:1fr; } }

/* Two etched leaves and a fine stem make each service marker unmistakably botanical. */
#process .process-services li { padding-left:22px; }
#process .process-services li::before { width:14px; height:19px; top:11px; left:0; border:0; border-radius:0; transform:none; background:url('../img/service-leaf.svg') center/contain no-repeat; }
@media(max-width:700px) {
 .hero > .butterfly--hero-one,.hero > .butterfly--hero-two { display:none; }
 .hero-picnic .butterfly--hero-one { display:block; width:43px; left:4%; top:11%; right:auto; bottom:auto; rotate:-17deg; animation:basket-blue-hover 13s ease-in-out -3s infinite; }
 .hero-picnic .butterfly--hero-two { display:block; width:32px; right:14%; top:-9px; left:auto; bottom:auto; rotate:19deg; animation:basket-gold-hover 17s ease-in-out -6s infinite; }
 .hero-picnic .butterfly--hero-three { width:37px; right:-1%; top:51%; rotate:-21deg; animation:basket-butterfly-drift 19s ease-in-out -5s infinite; }
}
@keyframes basket-blue-hover { 0%,100% { translate:0 0; rotate:-17deg; }50% { translate:8px -11px; rotate:-2deg; } }
@keyframes basket-gold-hover { 0%,100% { translate:0 0; rotate:19deg; }50% { translate:-9px 7px; rotate:4deg; } }
@media(prefers-reduced-motion:reduce) { .hero-picnic .butterfly--hero-one,.hero-picnic .butterfly--hero-two,.hero-picnic .butterfly--hero-three { animation:none; } }
/* Keep the moving bird and its final pose on the same little stage. */
.faq-bird { width:260px; max-width:100%; aspect-ratio:1; object-fit:contain; }
@media(max-width:700px) { .faq-bird { width:196px; margin-inline:auto; } }

/* Restore the original illustrated cardinal. */
.faq-bird { width:220px; }
@media(max-width:700px) { .faq-bird { width:154px; } }

/* A quiet direction marker belongs to the process page, above the hanging steps. */
.process-next { display:flex; align-items:center; justify-content:center; width:44px; height:48px; margin:22px auto 0; color:#9C7D49; border-radius:24px; transition:color .2s,translate .2s; }
.process-next svg { width:22px; height:36px; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.process-next .process-arrow-cap { stroke:#C8B48C; stroke-width:.7; }
.process-next:hover { color:#A55E73; translate:0 3px; }
.process-next:focus-visible { outline:1px solid #A55E73; outline-offset:3px; }
#process-steps { scroll-margin-top:20px; }
@media(min-width:701px) { #process .process-heading { padding-bottom:23px; } }
@media(max-width:700px) { .process-next { display:none; } }
@media(prefers-reduced-motion:reduce) { .process-next { transition:none; }.process-next:hover { translate:none; } }
@media(min-width:701px) {
 #process .process-heading { position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding-bottom:78px; }
 .process-next { position:absolute; bottom:16px; left:50%; translate:-50% 0; margin:0; }
 .process-next:hover { translate:-50% 3px; }
}

/* Intentional mobile line breaks and a clear path from the introduction to the steps. */
@media(max-width:700px) {
 .hero > .caps .hero-location-dot { display:none; }
 .hero-city { display:block; white-space:nowrap; margin-top:4px; }
 .hero-arrive { display:block; }
 #tables .tables-head { text-align:center; justify-items:center; }
 #tables .tables-head .h2 { width:100%; max-width:none; margin-inline:auto; text-align:center; text-wrap:balance; }
 #tables .tables-head > p { text-align:center; margin-inline:auto; max-width:33ch; text-wrap:pretty; }
 #tables .gallery-intro { text-align:center; margin-inline:auto; }
 #process .process-invitation { order:1; border-top:0; border-bottom:1px solid #C6AD8570; background:linear-gradient(0deg,#B395651A,transparent 12px),#FFFCF4; }
 #process .process-heading { order:2; }
 .process-tags li:nth-child(3) .tag-paper::before { background:radial-gradient(ellipse at var(--shine-x,25%) 0%,#FFFFFF80,transparent 65%),repeating-linear-gradient(0deg,#AC596609 0 1px,transparent 1px 3px),linear-gradient(110deg,#ECD4D5,#FAE9E8 45%,#E6CACD); }
 .process-tags li:nth-child(4) .tag-paper::before { background:radial-gradient(ellipse at var(--shine-x,25%) 0%,#FFFFFF75,transparent 65%),repeating-linear-gradient(0deg,#9D775008 0 1px,transparent 1px 3px),linear-gradient(110deg,#E1CCAA,#ECDDC1 45%,#DAC39E); }
}

/* Compact, centered phone typography with the city prominent at first glance. */
.hero-title-mobile { display:none; }
@media(max-width:700px) {
 .hero-title-desktop { display:none; }
 .hero-title-mobile { display:inline; }
 .hero h1 { font-size:clamp(28px,9.1vw,45px); line-height:1.14; letter-spacing:-.035em; }
 .hero-title-main,.hero-title-finish { white-space:nowrap; }
 .hero > .caps { max-width:100%; }
 .hero-city { font-size:12px; letter-spacing:.22em; margin-top:7px; font-weight:600; }
 #tables { padding-bottom:28px; }
 #tables .gallery-controls { margin-bottom:0; }
 .faq-intro > p:not(.caps) br { display:block; }
 #process .process-service-index { text-align:center; }
 #process .process-services { grid-template-columns:1fr 1fr; text-align:center; gap:0 12px; }
 #process .process-services li { padding:11px 2px; text-wrap:balance; font-size:clamp(15px,4.2vw,18px); line-height:1.35; }
 #process .process-services li::before { position:static; display:inline-block; width:12px; height:17px; margin-right:6px; vertical-align:-3px; }
}

@media(max-width:700px) {
 #process .process-services li { display:flex; align-items:center; justify-content:center; gap:6px; }
 #process .process-services li::before { flex:0 0 12px; margin:0; }
 #process .process-services li > span { min-width:0; text-wrap:balance; }
}

/* A quieter gallery introduction and equally legible location lines. */
@media(max-width:700px) {
 .hero > .caps { font-size:12px; letter-spacing:.22em; font-weight:600; }
 .hero-city { font-size:inherit; letter-spacing:inherit; font-weight:inherit; }
 .hero .hero-link { font-size:clamp(10px,2.7vw,12px); letter-spacing:.1em; min-height:44px; align-items:center; padding:8px 0; font-weight:600; }
 #tables .tables-head .h2 { font-size:clamp(28px,9vw,44px); white-space:nowrap; line-height:1.15; }
 #tables .tables-head > p { font-size:17px; line-height:1.55; max-width:32ch; }
 .gallery-location,.gallery-detail { display:block; margin-inline:auto; text-wrap:balance; }
 .gallery-location { max-width:30ch; }
 .gallery-detail { margin-top:9px; }
}

/* Native dialog transitions retain the modal and backdrop through a gentle exit. */
.photo-dialog { opacity:0; transform:translateY(12px) scale(.985); transition:opacity .32s ease,transform .38s cubic-bezier(.2,.65,.25,1),overlay .38s allow-discrete,display .38s allow-discrete; }
.photo-dialog[open] { opacity:1; transform:translateY(0) scale(1); }
.photo-dialog::backdrop { opacity:0; transition:opacity .38s ease,overlay .38s allow-discrete,display .38s allow-discrete; }
.photo-dialog[open]::backdrop { opacity:1; }
@starting-style {
 .photo-dialog[open] { opacity:0; transform:translateY(12px) scale(.985); }
 .photo-dialog[open]::backdrop { opacity:0; }
}
@media(prefers-reduced-motion:reduce) { .photo-dialog,.photo-dialog::backdrop { transition:none; transform:none; } }

/* A portrait-sized letter and a deliberately spaced tablet place setting. */
@media(min-width:701px) and (max-width:1000px) {
 #host .notecard { grid-template-columns:minmax(0,1fr); max-width:720px; }
 #host .notecard::after { display:none; }
 #host .notecard > div:first-child { padding:38px 38px 22px; }
 #host .mount { width:300px; max-width:100%; margin:auto; }
 #host .note-body { padding:30px 48px 38px; gap:22px; border-top:1px solid #D5C3A26B; }
 #host .note-body h2 { font-size:48px; white-space:nowrap; }
 #host .note-body > p:not(.caps):not(.sig) { max-width:none; font-size:17px; line-height:1.8; }
 #host .note-body .sig { font-size:49px; }
 #host .note-foil { inset:12px; }
}
@media(min-width:701px) and (max-width:1100px) {
 #menu { padding-top:75px; padding-bottom:65px; }
 #menu .setting { grid-template-columns:clamp(265px,34.75vw,285px) minmax(0,1fr); gap:24px; }
 #menu .menu { width:100%; padding:32px 26px; }
 #menu .plate-wrap { --tablet-plate:min(40vw,400px); width:100%; height:750px; min-width:0; align-self:center; }
 #menu .main-plate { width:var(--tablet-plate); max-width:none; left:50%; top:290px; translate:-50% 0; }
 #menu .serving { width:238px; height:128px; top:112px; left:54%; bottom:auto; }
 #menu .glass { width:105px; left:auto; right:0; top:210px; bottom:auto; z-index:4; }
 #menu .bread { width:106px; left:calc(50% - var(--tablet-plate)/2 - 26px); top:calc(290px + var(--tablet-plate) - 16px); bottom:auto; }
 #menu .setting-forks { width:52px; left:calc(50% - var(--tablet-plate)/2 - 48px); top:355px; }
 #menu .setting-knife-spoon { width:74px; left:calc(50% + var(--tablet-plate)/2 + 4px); top:355px; }
 #menu .table-bouquet { width:175px; right:30px; top:18px; }
 #menu .butterfly--setting-left { width:46px; top:220px; left:4px; }
 #menu .place { grid-column:1/-1; margin-top:0; gap:25px; }
 #tables { padding-bottom:30px; }
 #tables .gallery-controls { margin-bottom:0; }
 #host { margin-top:22px; }
 #host .notecard > div:first-child { align-self:center; }
}
@media(min-width:701px) { .process-next { bottom:28px; } }

/* The tablet hero ends with one centered basket, without a separate parasol stage. */
@media(min-width:701px) and (max-width:1100px) {
 .hero { display:block; padding-bottom:32px; }
 .hero-retreat { display:none; }
 .hero-picnic { position:relative; width:340px; max-width:80%; left:auto; right:auto; bottom:auto; margin:34px auto 0; }
 .butterfly--hero-two { left:calc(50% - 195px); bottom:170px; }
}

/* A taller diagonal projection keeps the oak crown natural on portrait tablets. */
@media(min-width:701px) and (max-width:1100px) {
 .table-daylight::before { background-image:url('../img/oak-leaf-shadows-tablet.svg'); background-size:110% auto; background-position:center 48%; transform:none; }
 .motion-idle .table-daylight::before,.page-hidden .table-daylight::before { background-image:none; }
}

/* An unobtrusive, persistent way to stop the garden's decorative movement. */
.motion-toggle { position:fixed; left:max(14px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:31; display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 11px; border:1px solid #BAA57D; border-radius:20px; background:#FFFDF5F5; color:#344C43; box-shadow:0 3px 12px #59614618; font:500 11px/1.3 var(--sans); }
.motion-toggle[hidden] { display:none; }
.motion-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.motion-play { display:none; }
.motion-toggle[data-paused="true"] .motion-play { display:block; }
.motion-toggle[data-paused="true"] .motion-pause { display:none; }
.motion-toggle:focus-visible { outline:2px solid #773E55; outline-offset:4px; }
.motion-paused,.motion-paused *,.motion-paused *::before,.motion-paused *::after { scroll-behavior:auto!important; animation-play-state:paused!important; transition-duration:0s!important; }
.motion-paused .arrival-pending,.motion-paused .image-pending { opacity:1!important; }
.motion-paused #menu.daylight-timed { --sun-saturation:1; --gingham-ink:rgba(91,118,194,.2); }
.motion-paused #menu.daylight-timed .table-daylight { opacity:1; }
.motion-paused .table-daylight::before { background-image:url('../img/oak-leaf-shadows.svg#still'); }
@media(min-width:701px) and (max-width:1100px) { .motion-paused .table-daylight::before { background-image:url('../img/oak-leaf-shadows-tablet.svg#still'); } }
@media(max-width:700px) { .motion-paused .table-daylight::before { background-image:url('../img/oak-leaf-shadows-mobile.svg#still'); }.motion-toggle { left:10px; bottom:14px; } }
.motion-paused .motion-idle .table-daylight::before,.motion-paused.page-hidden .table-daylight::before { background-image:none; }
#top:focus { outline:none; }
@media print { .motion-toggle { display:none; } }

/* Clearer small print while preserving the rose, gilt and sky palette. */
:root { --rose:#984C60; }
.brand-caption { color:#76614E; }
.hero > .caps { color:#455F9B; }
.hero .hero-link { color:#93465B; }
#process .process-service-index > .caps { color:#846063; font-size:9px; }
.faq-number { color:#795E49; font-size:10px; }
.note-body .sig { background-image:linear-gradient(110deg,#9D5E6A,#94703E 28%,#86526A 52%,#947443 74%,#A36372); }
@media(prefers-reduced-motion:reduce) { .note-body .sig { background:none; } }
@media(forced-colors:active) { .note-body .sig { background:none; -webkit-text-fill-color:CanvasText; color:CanvasText; }.hero h1 { -webkit-text-fill-color:CanvasText; } }

/* Matching leaf columns stay aligned even when a service takes two lines. */
@media(max-width:700px) {
 #process .process-services li { display:grid; grid-template-columns:12px minmax(0,1fr); column-gap:8px; justify-content:normal; align-items:center; padding-inline:4px; }
 #process .process-services li > span { text-align:left; }
}

/* At every width the garden companion slips into its arrow as the footer arrives. */
.journey-contact { display:none; }
.journey-meter { width:78px; max-width:78px; overflow:hidden; transition:max-width .5s cubic-bezier(.2,.65,.25,1),opacity .35s,visibility 0s; }
.journey-caterpillar { transition:translate .45s ease,opacity .25s ease; }
.page-journey.is-ending { align-items:center; gap:0; padding:7px; border-radius:25px; background:#FFFCF2EE; }
.is-ending .journey-meter { max-width:0; opacity:0; visibility:hidden; transition:max-width .5s cubic-bezier(.2,.65,.25,1),opacity .35s,visibility 0s .5s; }
.is-ending .journey-caterpillar { translate:45px 0; opacity:0; }
.is-ending .journey-contact { max-width:0; padding-inline:0; border:0; opacity:0; visibility:hidden; pointer-events:none; transition:max-width .4s,padding .4s,opacity .2s,visibility 0s .4s; }
footer { padding-bottom:88px; }
@media(max-width:700px) {
 .page-journey { align-items:center; gap:7px; padding:7px; border-radius:25px; }
 .journey-contact { display:flex; align-items:center; justify-content:center; min-height:36px; max-width:70px; padding:0 8px; overflow:hidden; white-space:nowrap; font:500 11px/1.2 var(--sans); color:#344C43; border-right:1px solid #C8B99580; transition:max-width .4s,padding .4s,opacity .2s,visibility 0s; }
 .motion-toggle { width:40px; padding:8px; }
 .motion-toggle > span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
}
@media(prefers-reduced-motion:reduce) { .journey-meter,.journey-caterpillar,.journey-contact { transition:none!important; } }

.journey-flutter { position:fixed; z-index:40; width:27px; height:25px; pointer-events:none; }
.journey-flutter svg { width:100%; height:100%; overflow:visible; }
.journey-spark-wing { transform-box:fill-box; transform-origin:100% 50%; animation:journey-wing-beat .23s ease-in-out infinite alternate; }
.journey-spark-wing:nth-child(2) { transform-origin:0 50%; }
@keyframes journey-wing-beat { from { transform:scaleX(1); }to { transform:scaleX(.45); } }
@media(prefers-reduced-motion:reduce) { .journey-flutter { display:none; } }

.page-journey { transition:opacity .25s ease,translate .25s ease; }
.page-journey.is-returning { opacity:0; translate:0 12px; pointer-events:none; }
.page-journey.is-finishing .journey-caterpillar { transition:transform .5s linear,translate .45s ease,opacity .25s ease; }
.page-journey.is-finishing .journey-track > span { transition:transform .5s linear; }
@media(prefers-reduced-motion:reduce) { .page-journey { transition:none; } }

.menu button.is-active { color:#455F9B; }
html { scroll-padding-bottom:88px; }

.motion-paused .photo-dialog::backdrop { transition:none!important; }

/* Mobile services read as a menu while the scenes quietly change above it. */
.menu-display { display:none; }
@media(max-width:700px) {
 #menu.is-mobile-menu [data-menu] button { display:none; }
 .is-mobile-menu .menu-display { display:grid; position:relative; isolation:isolate; padding:11px 0; text-align:center; color:var(--navy); }
 .is-mobile-menu .menu-display::before { content:""; position:absolute; z-index:-1; inset:4px -8px; background:linear-gradient(90deg,transparent,#AEC0E523,transparent); opacity:0; transition:opacity 1s ease; }
 .is-mobile-menu .menu-display.is-active::before { opacity:1; }
 .is-mobile-menu .menu-display strong { font:400 24px/1.22 var(--table-display); transition:color 1s ease; }
 .is-mobile-menu .menu-display > span { font:italic 400 12px/1.35 var(--serif); color:var(--soft); }
 .is-mobile-menu .menu-display.is-active strong { color:#455F9B; }
 #menu .main-plate .plate__food img,#menu .main-plate .plate__food img.is-on { scale:1; rotate:0deg; transition:opacity 1.2s ease; }
}

/* Decoded photographs overlap in one stable frame instead of replacing src in view. */
.photo-stage { position:relative; overflow:hidden; }
.photo-stage > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.photo-dialog[open].is-closing { opacity:0; transform:translateY(8px) scale(.99); }
.photo-dialog[open].is-closing::backdrop { opacity:0; }
.photo-dialog:not([open]),.photo-dialog:not([open])::backdrop { transition:none; }
.gallery-pointer-return #table-gallery:focus-visible,
.gallery-pointer-return #table-gallery .gallery-plate:focus-visible { outline:none; }