/* ==========================================================================
   A.Kai Adornments
   Colors and fonts are set once, here, so they're easy to adjust.
   ========================================================================== */

:root {
  --cream:      #FAF4EC;
  --ivory:      #FFFBF6;
  --blush:      #F6E0E3;
  --blush-deep: #EBC3CD;
  --pink:       #E9B7CB;
  --mauve:      #8C4F5B;
  --pink-logo:  #E89ECA;
  --pink-bold:  #E957AE;
  --pink-bold-deep: #E72297;
  --pink-text:  #AF1370; /* same pink family, darkened for readable body-size text on the cream background */
  --gold:       #B48B4C;
  --gold-deep:  #86602B;
  --ink:        #3A2B2E;
  --ink-soft:   #6A565B;
  --line:       rgba(134, 96, 43, .28);

  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-script:  "Pinyon Script", "Snell Roundhand", cursive;
  --font-body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter: 16px;
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--mauve); text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }
:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(3rem, 9vw, 5.6rem); }
h2 { font-size: clamp(2rem, 5vw, 3.1rem); }
h3 { font-size: 1.35rem; }
.tight-w { margin-right: -.07em; }
h1 em, h2 em { font-style: italic; color: var(--mauve); }
p { margin: 0 0 1em; }

.eyebrow {
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin: 0 0 14px;
}
.lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 34ch; }
.fineprint { font-size: .9rem; color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font: 600 .85rem/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--pink-bold); color: #fff; }
.btn-primary:hover { background: var(--pink-bold-deep); color: #fff; }
.btn-ghost { border-color: var(--gold); color: var(--gold-deep); background: transparent; }
.btn-ghost:hover { background: var(--gold); color: #fff; }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter);
  background: rgba(250, 244, 236, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { width: 69px; height: 68px; }
.brand-name { font-family: var(--font-display); font-size: 1.38rem; letter-spacing: .04em; }
.brand-name span { font-style: italic; color: var(--mauve); }

.menu-toggle { background: none; border: 0; width: 44px; height: 44px; cursor: pointer; display: grid; place-items: center; flex: none; }
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 1.5px; background: var(--ink); content: ""; transition: transform .2s; }
.bars { position: relative; }
.bars::before { position: absolute; top: -7px; }
.bars::after { position: absolute; top: 7px; }
.menu-toggle[aria-expanded="true"] .bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; gap: 4px;
  padding: 12px var(--gutter) 20px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.site-nav.is-open { display: flex; }
.site-nav a { padding: 12px 0; text-decoration: none; color: var(--ink); font-size: 1rem; }
.site-nav .nav-strong { font-weight: 700; }

/* The icon row next to "Contact", set off by a rule -- a line above it when
   the nav is a stacked mobile dropdown, to the left of it once the nav runs
   in a single row on desktop. */
.nav-social {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line);
}
.nav-social a { color: var(--ink-soft); display: flex; }
.nav-social a:hover { color: var(--mauve); }
.nav-social svg, .nav-social img { width: 18px; height: 18px; display: block; object-fit: contain; }

@media (min-width: 880px) {
  /* Brand and an equal, empty spacer flank the nav, so the nav sits
     genuinely centered in the header without ever overlapping the brand. */
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; padding: 12px 32px; }
  .menu-toggle { display: none; }
  .site-nav {
    display: flex; flex-direction: row; align-items: center; gap: 30px;
    padding: 0; background: none; border: 0; position: static;
  }
  .site-nav a { padding: 4px 0; font-size: .95rem; }
  .site-nav a:hover { color: var(--mauve); }
  .nav-social {
    margin-top: 0; padding-top: 0; border-top: 0;
    padding-left: 24px; border-left: 1px solid var(--line);
  }
}

/* ---------- Layout ---------- */
.section { padding: 72px var(--gutter); max-width: var(--max); margin: 0 auto; }
.section-tint { max-width: none; padding-left: 0; padding-right: 0; background: var(--ivory); border-block: 1px solid var(--line); }
.section-tint > * { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.section-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.section-head p:last-child { margin-bottom: 0; color: var(--ink-soft); }
.section-head h2 + p { margin-top: 18px; }
.section-head.left { text-align: left; margin-left: 0; }
/* Same stroke-weight fix as the hero title, colors untouched. */
.section-head h2 {
  font-weight: 600;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18;
}

.chain { display: block; width: 240px; height: 33px; margin: 8px auto 0; }

.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) {
  .section { padding: 104px 32px; }
  .section-tint > * { padding-inline: 32px; }
  .split { grid-template-columns: 1fr 1fr; gap: 80px; }
  .split-reverse > :first-child { order: 2; }
}

.photo-frame { margin: 0; position: relative; }
.photo-frame img { display: block; width: 100%; height: auto; border-radius: 10px; }
.photo-frame-tall { max-width: 420px; margin-inline: auto; }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--max); margin: 0 auto;
  padding: 44px var(--gutter) 24px;
  display: grid; gap: 48px; align-items: center;
  position: relative; isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: -40px -20vw auto auto;
  width: 70vw; max-width: 720px; aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--blush) 0%, rgba(246,224,227,0) 100%);
}
.hero h1 {
  margin-bottom: 22px;
  /* Bodoni's thin/thick contrast gets extreme at display sizes; pinning a
     lower optical size keeps the strokes closer in weight to one another. */
  font-weight: 600;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18;
}
.hero h1 em { color: var(--pink-logo); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }

.hero-photo { margin: 0; justify-self: center; width: 100%; max-width: 360px; }
.hero-photo img { display: block; width: 100%; height: auto; border-radius: 0; background: var(--blush); }

@media (min-width: 880px) {
  .hero { grid-template-columns: 1.05fr 1fr; padding: 72px 32px 40px; gap: 56px; }
}

/* ---------- How it works photo: square, sharp corners ---------- */
.soft-frame { margin: 0; position: relative; }
.soft-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 1 / 1;
  background: var(--blush);
}
.soft-frame-how { max-width: 340px; margin-inline: auto; width: 100%; }

#how-it-works h2 em { color: var(--pink-logo); }
#events h2 em { color: var(--pink-logo); }
#contact h2 em { color: var(--pink-logo); }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; position: relative; }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.steps .num {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--gold-deep);
  background: var(--cream);
}
.steps h3 { font-size: 1.25rem; margin: 4px 0 4px; }
.steps p { margin: 0; color: var(--ink-soft); }
.steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 25px; width: 1px; height: 26px; margin-top: 52px;
  background: repeating-linear-gradient(var(--gold) 0 3px, transparent 3px 7px);
}
.steps li:not(:last-child) { position: relative; }

/* ---------- About ---------- */
/* Sized so the whole section -- photo and all the bio text -- fits on
   screen without scrolling when "About" is selected, on a common ~800px-tall
   desktop window. Shorter windows may still need a little scrolling; there's
   no way to guarantee fit on every window height without either a scrollbar
   or shrinking things enough to hurt readability, so this targets a typical
   laptop viewport rather than the shortest possible one. */
@media (min-width: 880px) {
  #about { padding-top: 20px; padding-bottom: 20px; }
}
/* Phone and small-tablet widths (iOS and Android alike): the photo stacks
   above five paragraphs of text, which is too much content to ever fit one
   phone screen without making the type illegibly small, so this just trims
   the section's own padding and the gap above the text to cut dead space,
   while leaving the type size alone so it stays readable and easy to tap
   around. Intentionally no vh/dvh-based height here: those units resolve
   inconsistently while iOS Safari's and Chrome's address bars show or hide,
   so sizing stays off them entirely rather than fighting that per platform. */
@media (max-width: 879px) {
  #about { padding-top: 40px; padding-bottom: 40px; }
  #about .split { gap: 28px; }
}
.portrait { margin: 0; }
.portrait-frame {
  max-width: 437px; margin-inline: auto;
  border-radius: 16px;
  /* Same pink border as before, 20% thinner: padding was 14px, now 11px. */
  background: linear-gradient(160deg, var(--blush-deep), var(--blush));
  padding: 11px;
}
.portrait-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 10px; object-fit: cover; object-position: center 20%; }
.about-copy h2 { margin-bottom: 18px; }
.about-copy .eyebrow { font-size: .94rem; }
.about-copy p { color: var(--ink-soft); font-size: 1.2125rem; line-height: 1.48; margin-bottom: .58em; }
.pink-strong { color: var(--pink-bold); font-weight: 700; }
.mauve-strong { color: var(--mauve); font-weight: 700; }

/* ---------- Events ---------- */
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.event, .event-empty {
  background: var(--ivory); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
}
.event { display: grid; grid-template-columns: 68px 1fr; gap: 20px; align-items: center; }
.event-date { text-align: center; border-right: 1px solid var(--line); padding-right: 16px; }
.event-month { display: block; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.event-day { display: block; font-family: var(--font-display); font-size: 2.2rem; line-height: 1.05; color: var(--mauve); }
.event h3 { font-size: 1.2rem; margin-bottom: 2px; }
.event h3 a { color: inherit; }
.event p, .event-empty { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* ---------- Calendar (shared by the events calendar) ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head h3 { font-size: 1.4rem; text-align: center; }
.cal-nav {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold); background: transparent;
  color: var(--gold-deep); font-size: 1.35rem; line-height: 1; cursor: pointer; flex: none;
}
.cal-nav:hover:not(:disabled) { background: var(--gold); color: #fff; }
.cal-nav:disabled { opacity: .3; cursor: default; }

/* Every cell (the dow headers, the blank filler squares, and each day) sits
   in the same 7-column grid, so they always land in the same column as the
   header above them. Each day is a fixed, centered circle rather than a
   square tied to the (now quite wide) column width -- that's what was
   stretching row height and throwing the numbers out of alignment. */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3.8px; }
.cal-dow { text-align: center; font-size: .72rem; letter-spacing: .12em; color: var(--gold-deep); font-weight: 600; padding: 5px 0; }
.cal-day {
  display: flex; align-items: center; justify-content: center;
  justify-self: center;
  width: 30px; height: 30px; margin: 0; padding: 0;
  border: 1px solid transparent; border-radius: 50%;
  background: transparent; font: 500 .85rem var(--font-body); color: var(--ink);
  transition: background .15s, border-color .15s; position: relative;
}
button.cal-day { cursor: pointer; }
button.cal-day:hover:not(:disabled) { background: var(--blush); border-color: var(--blush-deep); }
.cal-day.is-past { color: rgba(58, 43, 46, .28); }

/* ---------- Mini events calendar ---------- */
.mini-cal {
  position: relative;
  margin: 28px auto 16px; width: 100%; max-width: 340px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: 18px; padding: 18px 14px;
}
.mini-cal .cal-head h3 { font-size: 1.1rem; }
.mini-cal .cal-plain { color: var(--ink-soft); }
.mini-cal .cal-plain.is-past { color: rgba(106, 86, 91, .35); }
.mini-cal .cal-plain.is-today { font-weight: 700; color: var(--mauve); }
.mini-cal button.cal-day.has-event {
  color: var(--mauve); font-weight: 600;
  background: var(--blush); border-color: var(--blush-deep);
}
.mini-cal button.cal-day.has-event:hover,
.mini-cal button.cal-day.has-event[aria-expanded="true"] { background: var(--mauve); color: #fff; }
/* One dot per event on that day, in a row under the number. */
.mini-cal button.cal-day.has-event .day-dots {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px;
}
.mini-cal button.cal-day.has-event .day-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--pink-bold); }
.mini-cal button.cal-day.has-event:hover .day-dot,
.mini-cal button.cal-day.has-event[aria-expanded="true"] .day-dot { background: #fff; }

.event-pop {
  position: absolute; z-index: 20; width: min(300px, 86vw);
  background: var(--ink); color: var(--ivory);
  border-radius: 14px; padding: 16px 18px; box-shadow: 0 18px 40px -16px rgba(58, 43, 46, .5);
}
.event-pop:focus { outline: none; }
.pop-item + .pop-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.pop-date { margin: 0 0 4px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blush-deep); }
.event-pop h4 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 400; margin: 0 0 6px; color: #fff; }
.pop-line { margin: 0 0 2px; font-size: .9rem; color: rgba(255,255,255,.85); }
.pop-place { color: var(--blush-deep); }
.pop-map {
  display: inline-block; margin-top: 8px; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
.pop-map:hover { color: var(--blush-deep); }

/* ---------- Pricing ---------- */
.prices { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 560px !important; }
.prices li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; font-size: 1.1rem; }
.price-name { font-family: var(--font-display); font-size: 1.3rem; }
.price-dots { flex: 1; border-bottom: 1px dotted var(--gold); transform: translateY(-5px); }
.price-amt { color: var(--ink-soft); font-size: .98rem; }
#price-note { text-align: center; margin-top: 18px; }

/* ---------- Contact ---------- */
.contact-form, .contact-done { max-width: 560px; margin-inline: auto; }
.contact-form label { display: block; text-align: left; font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); margin-bottom: 16px; }
.contact-form .optional { font-weight: 400; color: var(--ink-soft); }
.contact-form .row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.contact-form input, .contact-form textarea {
  display: block; width: 100%; margin-top: 6px;
  font: 400 1rem var(--font-body); color: var(--ink);
  background: var(--ivory); border: 1px solid rgba(134, 96, 43, .4); border-radius: 10px; padding: 13px 14px;
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--mauve); outline-offset: 1px; border-color: var(--mauve); }
.contact-form.was-checked input:invalid, .contact-form.was-checked textarea:invalid { border-color: #B23A48; background: #FFF3F3; }
.form-error { color: #9B2C3A; font-weight: 600; font-size: .95rem; margin: 4px 0 16px; }
.contact-form .btn { width: 100%; margin-top: 8px; }
@media (max-width: 520px) { .contact-form .row.two { grid-template-columns: 1fr; } }

.contact-done { text-align: center; }
.contact-done h3 { font-size: 2rem; margin-bottom: 14px; }
.contact-done .btn { margin-top: 12px; }
.contact-done:focus { outline: none; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 40px var(--gutter) 48px; background: var(--ivory); border-top: 1px solid var(--line); }
.footer-mark { margin: 24px auto 26px; }
.social { list-style: none; padding: 0; margin: 0 0 26px; display: flex; justify-content: center; align-items: center; gap: 18px; }
.social a { display: flex; transition: transform .2s; }
.social a:hover { transform: translateY(-2px); }
.social img { width: 34px; height: 34px; display: block; object-fit: contain; }
.footer-nav { display: flex; justify-content: center; gap: 24px; margin-bottom: 20px; }
.footer-nav a { color: var(--ink-soft); font-size: .92rem; }
.copy { font-size: .82rem; color: var(--ink-soft); margin: 0; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- FAQ ---------- */
#faq .section-head { max-width: none; }
#faq h2 { font-size: clamp(1.65rem, 7vw, 3.1rem); white-space: nowrap; }
#faq h2 em { color: var(--pink-logo); }
.faq-list { max-width: 760px; margin-inline: auto; }
.faq-item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item h3 { font-family: var(--font-body); font-size: 1.4976rem; font-weight: 700; line-height: 1.25; margin-bottom: 18px; color: var(--mauve); }
.faq-item p { margin: 0; font-size: 1.326rem; line-height: 1.55; color: var(--ink-soft); }
.faq-item p a { color: #0645AD; text-decoration: underline; }
.faq-item p a:hover { color: #0B0080; }

/* Mobile only: drop the How It Works photo so the heading and steps come first. */
@media (max-width: 879px) {
  .soft-frame-how { display: none; }
}

/* ---------- Booking pop-up ---------- */
body.book-open { overflow: hidden; }
.book-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; padding: 16px;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(62, 56, 58, .58);
}
.book-overlay[hidden] { display: none; }
.book-modal {
  position: relative; margin: auto; width: 100%; max-width: 754px;
  background: var(--ivory); border-radius: 16px; padding: 44px 30px 30px;
  box-shadow: 0 24px 70px rgba(30, 20, 22, .35);
}
.book-modal:focus { outline: none; }
.book-form, .book-done { max-width: 520px; margin-inline: auto; }
.book-close {
  position: absolute; top: 8px; right: 10px; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: transparent; color: var(--gold-deep); font-size: 2rem; line-height: 1; cursor: pointer;
}
.book-close:hover { background: var(--blush); }

.book-blurb { margin: 0 0 26px; padding: 0 28px 0 1.2em; list-style: disc; color: #B3261E; font-weight: 500; font-size: .98rem; line-height: 1.5; }
.book-blurb li + li { margin-top: 6px; }

.book-form label { display: block; text-align: left; font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); margin-bottom: 16px; }
.book-form .book-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.book-form input:not([type="radio"]):not([type="hidden"]), .book-form textarea, .book-form select {
  display: block; width: 100%; margin-top: 6px;
  font: 400 1rem var(--font-body); color: var(--ink);
  background: #fff; border: 1px solid rgba(134, 96, 43, .4); border-radius: 10px; padding: 13px 14px;
}
.book-form textarea { min-height: 150px; resize: vertical; }
.book-form input:focus, .book-form textarea:focus, .book-form select:focus { outline: 2px solid var(--mauve); outline-offset: 1px; border-color: var(--mauve); }

.book-q { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.book-q legend { padding: 0; margin-bottom: 8px; font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.book-form .choices { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.book-form label.choice { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; font-weight: 500; letter-spacing: 0; cursor: pointer; }
.book-form input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--pink-bold); }
.book-form .book-other { margin-top: 10px; }

.book-form .book-guests { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.book-form .book-guests label { margin: 0; }
.book-form .book-guests select { width: auto; min-width: 84px; margin: 0; }

.book-cal { margin: 4px auto 6px; }
.book-cal button.cal-day.is-avail { color: var(--ink); }
.book-cal button.cal-day.is-selected, .book-cal button.cal-day.is-selected:hover { background: var(--mauve); border-color: var(--mauve); color: #fff; }
.book-cal .cal-day.is-today { font-weight: 700; }
.book-picked { margin: 8px 0 0; text-align: center; font-size: .92rem; color: var(--mauve); font-weight: 600; }

.book-submit { width: 100%; margin-top: 6px; }
.book-error { margin: 12px 0 0; text-align: center; color: #B3261E; font-weight: 600; font-size: .95rem; }

.book-done:focus { outline: none; }
.book-done p {
  margin: 0; padding: 38px 8px 22px; text-align: center;
  font-family: var(--font-display); font-size: 1.65rem; line-height: 1.35; color: var(--ink);
}

@media (max-width: 520px) {
  .book-modal { padding: 44px 18px 22px; }
  .book-form .book-row { grid-template-columns: 1fr; }
}

.event-pop h4 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Privacy notice + small form notes ---------- */
#privacy h2 em { color: var(--pink-logo); }
.legal { max-width: 760px; margin-inline: auto; }
.legal h3 { font-size: 1.3rem; margin: 30px 0 8px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 1.02rem; }
.legal ul { margin: 0 0 1em; padding-left: 1.3em; }
.legal li { margin-bottom: .4em; }
.form-note { margin: 4px 0 12px; font-size: .85rem; line-height: 1.45; color: var(--ink-soft); text-align: center; }

/* ---------- Events calendar, now in the hero ---------- */
.hero-events { justify-self: center; width: 100%; max-width: 440px; }
.hero-events .section-head { margin-bottom: 6px; }
.hero-events .mini-cal { margin-top: 20px; }

/* ---------- Photo between About and Contact ---------- */
.photo-band { padding-top: 48px; padding-bottom: 64px; }
.photo-band .photo-frame { width: 100%; max-width: 640px; margin-inline: auto; }