/* Smuggler's Cove — funnel styles
   Tokens ported from the Claude Design mockup (Smugglers Cove Funnel.dc.html) */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,600;0,6..96,700;1,6..96,400&family=Karla:ital,wght@0,300;0,400;0,500;0,700;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* ===== Palette rebuild — Direction D, "The Programme" =====
     grounds */
  --paper: #FDFCFA;
  --paper-2: #F4F1EB;
  --navy: #0F2A47;
  --navy-2: #0A1E33;
  --ink: #0B0B0C;

  /* metal */
  --brass: #B8912F;
  --brass-lit: #D4AF37;

  /* type */
  --type-on-light: #0B0B0C;
  --type-on-light-soft: #3A3F46;
  --type-on-dark: #FDFCFA;
  --type-on-dark-soft: #B9C4D0;

  /* lines */
  --rule-light: rgba(11, 11, 12, .12);
  --rule-dark: rgba(253, 252, 250, .16);
  --rule-brass: rgba(184, 145, 47, .45);

  /* ---- everything below is derived from the tokens above, so every
     existing component keeps working while actually painting with
     the new five-color system. No raw hex/oklch outside this block. ---- */

  /* ground ramp: subtle depth steps off navy, for card fills on dark bands */
  --g-950: var(--ink);
  --g-900: var(--navy-2);
  --g-850: color-mix(in oklab, var(--navy-2) 70%, var(--navy) 30%);
  --g-800: var(--navy);
  --g-750: color-mix(in oklab, var(--navy) 85%, white 5%);
  --g-700: color-mix(in oklab, var(--navy) 78%, white 8%);
  --g-650: color-mix(in oklab, var(--navy) 74%, white 10%);
  --g-600: color-mix(in oklab, var(--navy) 68%, white 12%);
  --g-500: color-mix(in oklab, var(--navy) 60%, white 16%);

  /* borders, ascending — brass-tinted so hairlines read as metal, not grey */
  --b-1: color-mix(in oklab, var(--navy) 70%, var(--brass) 8%);
  --b-2: color-mix(in oklab, var(--navy) 65%, var(--brass) 10%);
  --b-3: color-mix(in oklab, var(--navy) 60%, var(--brass) 12%);
  --b-4: color-mix(in oklab, var(--navy) 55%, var(--brass) 14%);
  --b-5: color-mix(in oklab, var(--navy) 50%, var(--brass) 16%);
  --b-6: color-mix(in oklab, var(--navy) 45%, var(--brass) 20%);
  --b-7: color-mix(in oklab, var(--navy) 40%, var(--brass) 24%);
  --b-8: color-mix(in oklab, var(--navy) 35%, var(--brass) 28%);
  --b-9: color-mix(in oklab, var(--navy) 30%, var(--brass) 32%);

  /* the flag, read quietly */
  --emerald: #2F7D5C;
  --bone: var(--paper);
  --copper: var(--brass-lit);
  --copper-deep: var(--brass);
  --cream: var(--paper-2);

  /* text on dark */
  --ink-1: var(--type-on-dark);
  --ink-2: color-mix(in oklab, var(--type-on-dark) 92%, var(--navy) 8%);
  --ink-3: var(--type-on-dark-soft);
  --ink-4: color-mix(in oklab, var(--type-on-dark-soft) 85%, var(--ink) 15%);
  --ink-mint: var(--type-on-dark-soft);
  --ink-mint-bright: var(--paper);
  --ink-copper: var(--brass-lit);
  --open-dot: #4CAF7D;

  /* the other two ground tones — near-black and cream, so the site
     isn't one flat blue wash top to bottom */
  --near-black: var(--ink);
  --near-black-2: color-mix(in oklab, var(--ink) 85%, var(--navy) 15%);
  --ink-on-cream-1: var(--type-on-light);
  --ink-on-cream-2: var(--type-on-light-soft);

  --serif: 'Bodoni Moda', serif;
  --sans: 'Karla', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* full-bleed section backgrounds, but content caps at ~1320px on wide screens */
  --edge: max(48px, calc((100% - 1320px) / 2));

  color-scheme: dark;
}
@media (max-width: 900px) {
  :root { --edge: 20px; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy-2);
  color: var(--ink-2);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink-mint); text-decoration: none; }
a:hover { color: var(--type-on-dark); }
::selection { background: var(--bone); color: var(--g-950); }

img { max-width: 100%; display: block; }

.eyebrow {
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0.01em;
  color: var(--ink-mint);
}

.container { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 900px) { .container { padding: 0 20px; } }

.tricolour {
  display: flex; height: 3px;
}
.tricolour span { flex: 1; }
.tricolour span:nth-child(1) { background: var(--emerald); }
.tricolour span:nth-child(2) { background: var(--bone); }
.tricolour span:nth-child(3) { background: var(--copper); }

/* photo slot placeholders — striped until real photography lands */
.photo-slot {
  background: repeating-linear-gradient(135deg, var(--g-600) 0 8px, var(--g-750) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  font: 400 10px/1.7 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--type-on-dark-soft); text-align: center; padding: 14px;
}
.photo-slot.photo { background-size: cover; background-position: center; }
.photo-slot video, .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px; font: 600 13px/1 var(--sans);
  letter-spacing: 0.04em;
  border: none; cursor: pointer; white-space: nowrap;
}
/* Utility: flip a section (and everything inside it) from the dark-ground
   token values to their light/paper equivalents, without touching every
   component rule individually. Only applied to sections the palette table
   marks as paper/paper-2. */
.on-paper {
  --g-950: var(--paper); --g-900: var(--paper); --g-850: var(--paper); --g-800: var(--paper);
  --g-750: color-mix(in oklab, var(--paper) 92%, var(--navy) 8%);
  --g-700: color-mix(in oklab, var(--paper) 88%, var(--navy) 12%);
  --g-650: color-mix(in oklab, var(--paper) 85%, var(--navy) 15%);
  --g-600: color-mix(in oklab, var(--paper) 80%, var(--navy) 20%);
  --g-500: color-mix(in oklab, var(--paper) 74%, var(--navy) 26%);
  --b-1: var(--rule-light); --b-2: var(--rule-light); --b-3: var(--rule-light);
  --b-4: color-mix(in oklab, var(--rule-brass) 60%, var(--rule-light) 40%);
  --b-5: var(--rule-brass); --b-6: var(--rule-brass); --b-7: var(--brass); --b-8: var(--brass); --b-9: var(--brass);
  --ink-1: var(--type-on-light); --ink-2: var(--type-on-light);
  --ink-3: var(--type-on-light-soft); --ink-4: var(--type-on-light-soft);
  --ink-mint: var(--brass); --ink-mint-bright: var(--navy); --ink-copper: var(--navy);
  --cream: var(--paper-2); --bone: var(--paper);
  background: var(--paper); color: var(--type-on-light);
}
.menu-tabs.on-paper, .menu-panel.on-paper { background: var(--paper-2); }
.btn { transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Primary on dark ground (the default context — most of the site) */
.btn-primary { background: var(--brass-lit); color: var(--ink); padding: 13px 22px; }
.btn-primary:hover { background: color-mix(in oklab, var(--brass-lit) 94%, white 6%); color: var(--ink); }
/* Secondary anywhere: a soft tinted chip + brass border — never a bare
   ghost outline, so it reads as a real button on any ground it lands on */
.btn-outline {
  background: color-mix(in oklab, var(--brass-lit) 14%, transparent); color: var(--brass-lit);
  border: 1px solid var(--brass); padding: 12px 20px;
}
.btn-outline:hover { border-color: var(--brass-lit); color: var(--paper); background: color-mix(in oklab, var(--brass-lit) 24%, transparent); }

/* Primary/secondary on a light (paper) ground — reviews, menus page, and other paper sections */
.proof .btn-primary, .menu-panel .btn-primary, .capture .btn-primary {
  background: var(--navy); color: var(--paper); border: 1px solid var(--brass);
}
.proof .btn-primary:hover, .menu-panel .btn-primary:hover, .capture .btn-primary:hover {
  background: var(--navy-2); color: var(--paper);
}
.proof .btn-outline, .menu-panel .btn-outline, .capture .btn-outline {
  color: var(--type-on-light-soft); border-color: var(--brass);
  background: color-mix(in oklab, var(--navy) 8%, transparent);
}
.proof .btn-outline:hover, .menu-panel .btn-outline:hover, .capture .btn-outline:hover {
  color: var(--type-on-light); border-color: var(--brass);
  background: color-mix(in oklab, var(--navy) 14%, transparent);
}

/* Primary/secondary on a solid brass/gold ground — kids band, closing night */
.kids-band .btn-primary, .closing-band .btn-primary {
  background: var(--navy); color: var(--paper); border: 1px solid var(--ink);
}
.kids-band .btn-primary:hover, .closing-band .btn-primary:hover {
  background: var(--navy-2); color: var(--paper);
}

/* ---------- nav ---------- */
.site-nav {
  position: relative; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 18px var(--edge); border-bottom: 1px solid var(--rule-brass);
  background: var(--navy);
}
.site-nav .brand { display: flex; flex-direction: column; gap: 3px; }
.site-nav .brand-name { font-family: var(--serif); font-size: 19px; letter-spacing: 0.02em; color: var(--type-on-dark); }
.site-nav .brand-sub { font: 400 12px/1 var(--sans); letter-spacing: 0.01em; color: var(--brass-lit); font-style: italic; }
.site-nav .links { display: flex; align-items: center; gap: 24px; font-size: 14px; color: var(--type-on-dark-soft); flex-wrap: wrap; }
.site-nav .links a.active { color: var(--type-on-dark); border-bottom: 1px solid var(--brass-lit); padding-bottom: 3px; }
.site-nav .links span.soon { color: color-mix(in oklab, var(--type-on-dark-soft) 60%, transparent); cursor: default; }
.site-nav .cta-group { display: flex; align-items: center; gap: 16px; }
.site-nav .phone { font: 400 12px/1 var(--mono); color: var(--type-on-dark-soft); }
.nav-tricolour { position: absolute; left: 0; right: 0; bottom: -1px; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; padding: 0; background: none; border: none; cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--type-on-dark); transition: transform 0.2s ease, opacity 0.2s ease; }
.site-nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .site-nav { padding: 14px 20px; flex-wrap: nowrap; }
  .nav-toggle { display: flex; }
  .site-nav .cta-group .btn-primary { padding: 10px 14px; font-size: 12px; }
  .site-nav .links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy); border-bottom: 1px solid var(--rule-brass);
    max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
  }
  .site-nav.nav-open .links { max-height: 420px; }
  .site-nav .links a, .site-nav .links span { padding: 14px 20px; width: 100%; border-top: 1px solid var(--rule-dark); }
  .site-nav .links a.active { border-bottom: none; }
  .site-nav .phone { display: none; }
  .site-nav .brand-sub { display: none; }
}

/* ---------- hero (home) ---------- */
.hero {
  position: relative; min-height: 56vh;
  background: repeating-linear-gradient(135deg, var(--g-650) 0 10px, var(--g-750) 10px 20px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: -10% 0; z-index: 0;
  background-size: cover; background-position: center 70%;
}
video.hero-bg { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: color-mix(in oklab, var(--navy-2) 55%, transparent);
}
.season-ribbon {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 13px var(--edge); background: var(--copper); color: var(--paper);
}
.season-ribbon strong { font: 700 14px/1 var(--sans); letter-spacing: 0.01em; }
.season-ribbon .link { margin-left: auto; font: 500 13px/1 var(--sans); border-bottom: 1px solid color-mix(in oklab, var(--paper) 60%, transparent); padding-bottom: 2px; color: inherit; }
.season-ribbon.hidden { display: none; }

.hero-body {
  position: relative; z-index: 2;
  padding: 48px var(--edge) 64px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 48px;
}
.hero-copy { max-width: 780px; display: flex; flex-direction: column; gap: 24px; }
.hero-copy h1 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-1);
}
.hero-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 480px) { .hero-copy h1 { font-size: 22px; line-height: 1.15; } }
.hero-cta-row .note { font-size: 15px; color: var(--ink-3); }

/* Give the homepage marina its own immersive, near-full-screen frame. */
.hero.hero-home {
  min-height: max(680px, 88vh);
  min-height: max(680px, 88svh);
  justify-content: center;
}
.hero-home .hero-body { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 900px) {
  .hero.hero-home { min-height: 90vh; min-height: 90svh; }
  .hero-home .hero-body { padding-top: 64px; padding-bottom: 64px; gap: 36px; }
}

.sunset-card {
  width: 340px; max-width: 100%; padding: 26px 28px;
  border: 1px solid var(--rule-brass); border-radius: 3px;
  background: color-mix(in oklab, var(--navy-2) 90%, transparent);
  backdrop-filter: blur(6px); box-shadow: 0 20px 40px rgba(11,11,12,.35);
  display: flex; flex-direction: column; gap: 16px;
}
.sunset-card .big { font-family: var(--serif); font-size: 58px; line-height: 0.9; color: var(--ink-1); }
.sunset-card .desc { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.sunset-card hr { border: none; height: 1px; background: var(--rule-dark); margin: 0; }
.weekend-row {
  display: flex; justify-content: space-between; align-items: center;
  font: 400 13px/1.6 var(--mono); color: var(--ink-3);
  padding: 9px 12px; margin-bottom: 6px; border-radius: 4px;
  background: linear-gradient(160deg, var(--g-700), var(--g-800));
  border: 1px solid var(--b-4); box-shadow: 0 4px 10px oklch(0 0 0 / 0.25);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.weekend-row:last-child { margin-bottom: 0; }
.weekend-row:hover { border-color: var(--b-7); transform: translateX(2px); }
.weekend-row .sunset { color: var(--ink-copper); font-weight: 600; }

/* ---------- moment quote ---------- */
.moment {
  padding: 72px var(--edge); border-bottom: 1px solid var(--rule-brass);
  display: flex; justify-content: center; background: var(--paper-2);
}
.moment p {
  margin: 0; max-width: 1020px; text-align: center; font-family: var(--serif);
  font-size: clamp(22px, 3vw, 34px); line-height: 1.35; color: var(--type-on-light);
}
.moment-card { max-width: 900px; width: 100%; text-align: center; }
.moment-card .eyebrow { justify-content: center; margin-bottom: 16px; letter-spacing: 0.14em; color: var(--brass); }
.moment-card p {
  margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 3vw, 32px);
  line-height: 1.4; color: var(--type-on-light);
}
.moment-card p em { font-style: italic; color: var(--brass); }

/* ---------- three doors ---------- */
.doors { padding: 64px var(--edge); border-bottom: 1px solid var(--rule-brass); background: var(--paper); }
.doors .eyebrow { color: var(--brass); }
.doors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 28px; }
@media (min-width: 700px) and (max-width: 1023px) {
  .doors-grid { grid-template-columns: repeat(3, 1fr); }
}
.door-card {
  border: 1px solid var(--b-4); border-left: 2px solid var(--brass); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--g-700), var(--g-800)); box-shadow: 0 10px 26px rgba(15,42,71,.16);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.door-card:hover {
  transform: translateY(-5px); border-left-color: var(--brass-lit); border-color: var(--b-7);
  box-shadow: 0 20px 40px rgba(15,42,71,.24);
}
.door-card .photo-slot { height: 210px; }
.door-card .body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.door-card h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--ink-1); }
.door-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-4); }
.door-card .go { font: 600 13px/1 var(--sans); color: var(--ink-mint); border-top: 1px solid var(--b-4); padding-top: 16px; margin-top: auto; }

/* the menu card gets a little more visual weight, since booking starts there */
.door-card-feature {
  border-color: var(--ink-copper);
  box-shadow: 0 12px 28px oklch(0 0 0 / 0.32), 0 0 0 1px color-mix(in oklab, var(--brass-lit) 25%, transparent);
}
.door-card-feature .photo-slot { height: 210px; }
.door-card-feature:hover { border-color: var(--ink-copper); box-shadow: 0 22px 40px oklch(0 0 0 / 0.4), 0 0 0 1px color-mix(in oklab, var(--brass-lit) 40%, transparent); }
.door-card-feature .go { color: var(--ink-copper); border-top-color: var(--copper); }
.feature-tag {
  align-self: flex-start; font: 700 10px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--brass-lit); padding: 5px 10px; border-radius: 2px;
}
@media (max-width: 900px) {
  .door-card-feature .photo-slot { height: 210px; }
}

.events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-top: 28px; }
.event-card {
  position: relative; border: 1px solid var(--b-4); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column;
  background: var(--g-850); box-shadow: 0 8px 20px oklch(0 0 0 / 0.25);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.event-card:hover { transform: translateY(-5px); border-color: var(--b-7); box-shadow: 0 18px 34px oklch(0.1 0.03 252 / 0.35); }
.event-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  transform: scaleX(0); transition: transform 0.32s ease;
}
.event-card:hover::before { transform: scaleX(1); }
.event-card .photo-slot.photo {
  height: auto; aspect-ratio: 1 / 1;
  background-size: cover; background-position: center;
}
.event-date {
  position: absolute; top: 16px; left: 16px; z-index: 2; text-align: center; line-height: 1;
  background: var(--brass-lit); color: var(--ink);
  border-radius: 3px; padding: 8px 12px; box-shadow: 0 6px 16px rgba(11,11,12,.35);
}
.event-date .month { display: block; font: 700 10px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.event-date .day { display: block; font: 700 22px/1.2 var(--serif); }
.event-card .body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.event-card .when { font: 600 13px/1 var(--mono); color: var(--ink-copper); }
.event-card h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--ink-1); }
.event-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-4); flex: 1; }
.event-card .go { font: 600 13px/1 var(--sans); color: var(--ink-mint); }

/* ---------- proof / reviews ---------- */
.proof { padding: 60px var(--edge); border-bottom: 1px solid var(--rule-brass); background: var(--paper); }
.proof .eyebrow { color: var(--brass); margin-bottom: 8px; }
.google-badge {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 14px 20px; border-radius: 3px; border: 1px solid var(--b-4); border-left: 2px solid var(--brass);
  background: linear-gradient(160deg, var(--g-700), var(--g-800));
  box-shadow: 0 10px 22px rgba(15,42,71,.16);
}
.google-badge .google-g { width: 28px; height: 28px; flex-shrink: 0; }
.google-badge-rating { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 20px; color: var(--ink-1); }
.google-badge-label { font: 500 13px/1 var(--sans); color: var(--ink-4); margin-top: 3px; }
.stars-icons {
  position: relative; display: inline-block; font-size: 16px; line-height: 1; letter-spacing: 2px;
  font-family: Arial, sans-serif;
}
.stars-icons::before { content: '★★★★★'; color: var(--b-6); }
.stars-icons::after {
  content: '★★★★★'; color: var(--brass-lit); position: absolute; left: 0; top: 0;
  width: var(--pct, 0%); overflow: hidden; white-space: nowrap;
}
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.review-card {
  padding: 18px 20px; border: 1px solid var(--rule-light); border-left: 2px solid var(--brass); border-radius: 3px;
  background: var(--paper-2);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.review-card:hover { transform: translateY(-3px); border-left-color: var(--brass-lit); box-shadow: 0 8px 18px rgba(11,11,12,.1); }
.review-card p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--type-on-light); }
.review-card cite, .review-card .label { font: 400 13px/1 var(--sans); color: var(--type-on-light-soft); font-style: normal; }
.reviewer-avatar {
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 2px;
  background: color-mix(in oklab, var(--brass) 10%, var(--paper));
  border: 1px solid var(--rule-brass);
  display: flex; align-items: center; justify-content: center;
}
.reviewer-avatar svg { width: 18px; height: 18px; fill: none; stroke: var(--brass); stroke-width: 1.7; stroke-linecap: round; }

/* ---------- reel strip (portrait video, shown at its natural aspect) ---------- */
.reel-strip {
  padding: 56px max(24px, calc((100% - 1500px) / 2));
  background: var(--paper);
}
.reel-strip .eyebrow { color: var(--brass); }
.reel-grid { display: flex; gap: 22px; flex-wrap: nowrap; justify-content: center; margin-top: 22px; }
.reel-card {
  flex: 1 1 0; width: auto; min-width: 0; max-width: 260px;
  aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden;
  background: var(--paper-2); padding: 8px;
  border: 1px solid var(--rule-light); box-shadow: 0 4px 12px rgba(11,11,12,.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.reel-card video, .reel-card .photo-slot { border-radius: 2px; }
.reel-card:hover { transform: translateY(-5px); border-color: var(--brass); box-shadow: 0 18px 34px rgba(11,11,12,.18); }
@media (max-width: 700px) {
  .reel-grid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; }
  .reel-card { flex: 0 0 200px; width: 200px; max-width: none; scroll-snap-align: start; }
}

/* ---------- tonight ---------- */
.tonight { padding: 56px var(--edge); border-bottom: 1px solid var(--b-1); display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 36px; background: var(--g-900); }
.tonight.on-paper { background: var(--paper); }
.tonight.on-paper h3 { color: var(--type-on-light); }
.tonight.on-paper .season-count { color: var(--navy); border-bottom: 2px solid var(--brass); padding-bottom: 2px; display: inline-block; }
.tonight.on-paper .label { color: var(--type-on-light-soft); }
.tonight.on-paper > .reveal {
  background: var(--paper-2); border: 1px solid var(--rule-light); border-radius: 4px;
  padding: 22px 24px;
}
@media (max-width: 800px) { .tonight { grid-template-columns: 1fr; } }
.tonight h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--cream); }
.open-status { display: flex; align-items: center; gap: 10px; font: 400 13px/1 var(--mono); color: var(--ink-mint); }
.open-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--open-dot); }
.open-status.closed .dot { background: oklch(0.55 0.05 30); }
.tonight .label { font: 500 12px/1 var(--sans); color: var(--type-on-dark-soft); }
.tonight .season-count { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--ink-mint); }

/* ---------- teasers ---------- */
.teasers { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--b-1); padding: 0 var(--edge); }
@media (max-width: 560px) { .teasers { grid-template-columns: 1fr; } }
.teaser { padding: 54px 40px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--b-1); border-bottom: 1px solid var(--b-1); }
.teaser:last-child { border-right: none; }
@media (max-width: 560px) { .teaser { border-right: none; } }
.teaser.with-photo { flex-direction: row; align-items: flex-start; gap: 26px; }
.teaser.with-photo .photo-slot { width: 160px; height: 200px; flex-shrink: 0; }
@media (max-width: 560px) { .teaser.with-photo { flex-direction: column; } .teaser.with-photo .photo-slot { width: 100%; } }
@media (min-width: 561px) and (max-width: 900px) {
  .teaser { padding: 40px 28px; }
  .teaser.with-photo .photo-slot { width: 130px; height: 160px; }
}
.menu-item-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px dotted var(--b-6); padding-bottom: 10px; }
.menu-item-row span:first-child { font-family: var(--serif); font-size: 20px; }
.menu-item-row .price { font: 400 14px/1 var(--mono); color: var(--ink-mint); }
.teaser h4 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.2; color: var(--cream); }
.teaser p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-4); }
.teaser .go { font: 600 13px/1 var(--sans); color: var(--ink-mint); }
.go-emphasis {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--brass); padding-bottom: 4px;
}
.go-emphasis::after { content: '→'; font-size: 15px; transition: transform 0.2s ease; }
.go-emphasis:hover::after { transform: translateX(4px); }
.teasers.on-paper { background: var(--paper-2); }
.teasers.on-paper .photo-slot { color: var(--type-on-light-soft); }
.teasers.on-paper .menu-item-row .price { color: var(--navy); }
.teasers.on-paper .teaser h4 { color: var(--type-on-light); }
.teasers.on-paper .teaser .go { color: var(--navy); }
.teasers.on-paper .teaser .go em { color: var(--type-on-light-soft) !important; }

/* ---------- capture ---------- */
.capture {
  padding: 64px var(--edge); background: var(--paper); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 40px; border-bottom: 1px solid var(--rule-brass);
}
.capture .eyebrow { color: var(--brass); }
.capture-copy { max-width: 620px; display: flex; flex-direction: column; gap: 14px; }
.capture-copy h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; color: var(--type-on-light); }
.capture-copy p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--type-on-light-soft); }
.capture-form { width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.capture-form input {
  padding: 15px 16px; border: 1px solid var(--rule-light); border-radius: 2px;
  background: var(--paper-2); color: var(--type-on-light); font-size: 15px; font-family: var(--sans);
}
.capture-form input::placeholder { color: var(--type-on-light-soft); }
.capture-form button, .capture-form .btn { padding: 16px; }
.capture-status { font-size: 13px; color: var(--navy); min-height: 16px; }

/* ---------- footer ---------- */
.site-footer { padding: 44px var(--edge); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; font-size: 14px; color: var(--ink-4); background: var(--near-black); }
.site-footer .col { display: flex; flex-direction: column; gap: 8px; }
.site-footer .col .head { font-family: var(--serif); font-size: 18px; color: var(--cream); }
.footer-seal { width: 108px; border-radius: 2px; margin-bottom: 4px; }
.site-footer .col .label { font: 600 13px/1 var(--sans); color: var(--ink-4); }

.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 14px 24px; background: var(--g-950); border-top: 1px solid var(--b-4);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transform: translateY(100%); transition: transform 0.25s ease;
}
body { padding-bottom: 76px; }
.sticky-bar.visible { transform: translateY(0); }
.sticky-bar .info { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--ink-4); flex-wrap: wrap; }
.sticky-bar .info strong { font: 700 14px/1 var(--sans); color: var(--ink-mint); }
.sticky-bar .actions { display: flex; gap: 10px; }

@media (max-width: 640px) {
  .sticky-bar { padding: 12px 16px; }
  .sticky-bar .info span:not(:first-child) { display: none; }
}

/* ---------- generic page hero (rooftop / story / what's on / visit) ---------- */
.page-hero {
  position: relative; min-height: 56vh; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--g-650) 0 10px, var(--g-750) 10px 20px);
  display: flex; align-items: flex-end;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: color-mix(in oklab, var(--navy-2) 55%, transparent);
}
.page-hero-body {
  position: relative; z-index: 2; width: 100%;
  padding: 48px var(--edge) 56px; display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between; gap: 40px;
}
.page-hero-copy { max-width: 1000px; display: flex; flex-direction: column; gap: 20px; }
.page-hero-copy h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 72px); line-height: 0.96; letter-spacing: -0.02em; color: var(--ink-1); }
.page-hero-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-3); max-width: 620px; }
@media (max-width: 480px) { .page-hero-copy h1 { font-size: 22px; line-height: 1.15; } }
.season-callout {
  width: 280px; max-width: 100%; padding: 20px; border: 1px solid var(--brass); border-radius: 3px;
  background: color-mix(in oklab, var(--navy) 85%, var(--brass) 15%);
  box-shadow: 0 14px 28px rgba(11,11,12,.3); display: flex; flex-direction: column; gap: 6px;
}
.season-callout .big { font-family: var(--serif); font-size: 50px; line-height: 1; color: var(--ink-1); }
.season-callout .desc { font-size: 14px; line-height: 1.5; color: var(--type-on-dark); }

/* ---------- sunset table (rooftop) ---------- */
.sunset-table-section { padding: 60px var(--edge); border-bottom: 1px solid var(--rule-brass); background: var(--paper); }
.sunset-table-section .eyebrow { color: var(--brass); }
.sunset-table-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.sunset-table-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; color: var(--type-on-light); }
.sunset-table-head .note { font-size: 14px; color: var(--type-on-light-soft); max-width: 320px; text-align: right; }
.sunset-table { display: flex; flex-direction: column; gap: 18px; background: var(--paper-2); border: 1px solid var(--rule-light); border-radius: 8px; padding: 18px; }
.sunset-table > [data-weekend-list] { display: flex; flex-direction: column; gap: 18px; }
.sunset-table-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 200px; align-items: center;
  padding: 18px 24px; gap: 32px; position: relative;
  background: linear-gradient(160deg, var(--g-700), var(--g-800));
  border: 1px solid var(--b-4); border-radius: 4px;
  box-shadow: 0 4px 10px rgba(11,11,12,.2);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sunset-table-row:hover { transform: translateX(2px); border-color: var(--b-7); box-shadow: 0 4px 10px rgba(11,11,12,.2); }
.sunset-table > .sunset-table-row:first-child {
  background: transparent; border: none; padding: 0 24px 12px; box-shadow: none;
  font: 600 12px/1 var(--sans); letter-spacing: 0.02em; color: var(--type-on-light-soft);
}
.sunset-table > .sunset-table-row:first-child:hover { transform: none; }
.sunset-table-row .date { font-family: var(--serif); font-size: 21px; display: flex; flex-direction: column; gap: 2px; }
.sunset-table-row .date .weekday { font: 600 11px/1 var(--sans); letter-spacing: 0.03em; color: var(--ink-4); }
.sunset-table-row .sunset { font: 600 22px/1 var(--mono); color: var(--ink-copper); }
.sunset-table-row .arrive-by { font: 400 15px/1 var(--mono); color: var(--ink-3); }
.sunset-table-row .status {
  justify-self: start; font: 600 12px/1 var(--sans); padding: 6px 12px; border-radius: 999px;
  background: rgba(47,125,92,.25); color: var(--open-dot); border: 1px solid rgba(47,125,92,.4);
}
.sunset-table-row .status.past {
  background: rgba(11,11,12,.3); color: var(--ink-4); border-color: var(--b-3); text-decoration: line-through;
}
.sunset-table-row a.btn-outline { justify-self: end; padding: 10px 18px; font-size: 11px; }
.sunset-table-row > *:not(:first-child) { padding-left: 32px; border-left: 1px solid var(--b-3); }
@media (max-width: 800px) {
  .sunset-table, .sunset-table > [data-weekend-list] { gap: 14px; }
  .sunset-table { padding: 16px; }
  .sunset-table-row {
    grid-template-columns: 1fr auto; align-items: start;
    grid-template-areas: "date date" "sunset arrive" "status button";
    gap: 14px 14px; padding: 28px 26px;
  }
  .sunset-table-row .date { grid-area: date; }
  .sunset-table-row .sunset { grid-area: sunset; white-space: nowrap; }
  .sunset-table-row .arrive-by { grid-area: arrive; justify-self: end; align-self: center; }
  .sunset-table-row .status { grid-area: status; align-self: center; }
  .sunset-table-row a.btn-outline { grid-area: button; justify-self: end; align-self: center; margin-top: 0; }
  .sunset-table > .sunset-table-row:first-child { display: none; }
  .sunset-table-row > *:not(:first-child) { padding-left: 0; border-left: none; }
}

/* ---------- gallery ---------- */
.gallery-section { padding: 60px var(--edge); border-bottom: 1px solid var(--rule-brass); background: var(--paper); }
.gallery-section .eyebrow { color: var(--brass); }
.gallery-grid { display: grid; grid-template-columns: 1.3fr 1fr 0.85fr; grid-template-rows: 220px 220px; gap: 14px; margin-top: 24px; }
.gallery-grid > *:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.gallery-grid > *:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery-grid > *:nth-child(3) { grid-column: 2; grid-row: 2; }
.gallery-grid > *:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
@media (min-width: 561px) and (max-width: 900px) {
  .gallery-grid { grid-template-rows: 160px 160px; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 220px) repeat(2, 160px); }
  .gallery-grid > *:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .gallery-grid > *:nth-child(2) { grid-column: 1; grid-row: 3; }
  .gallery-grid > *:nth-child(3) { grid-column: 2; grid-row: 3; }
  .gallery-grid > *:nth-child(4) { grid-column: 1 / 3; grid-row: 4; }
}

/* ---------- facts grid ---------- */
.facts-grid { padding: 60px var(--edge); border-bottom: 1px solid var(--rule-brass); background: var(--paper); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 560px) { .facts-grid { grid-template-columns: 1fr; gap: 14px; } }
@media (min-width: 561px) and (max-width: 1023px) {
  .facts-grid { gap: 14px; }
  .fact { padding: 18px; }
  .fact .value { font-size: 21px; }
  .fact p { font-size: 13px; }
}
.fact {
  padding: 22px; border: 1px solid var(--b-4); border-left: 2px solid var(--brass); border-radius: 3px;
  background: linear-gradient(160deg, var(--g-700), var(--g-800));
  box-shadow: 0 10px 24px rgba(15,42,71,.16);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.fact:hover { transform: translateY(-4px); border-left-color: var(--brass-lit); border-color: var(--b-7); box-shadow: 0 18px 34px rgba(15,42,71,.24); }
.fact .label { font: 600 12px/1 var(--sans); color: var(--brass); margin-bottom: 8px; letter-spacing: 0.02em; text-transform: uppercase; }
.fact .value { font-family: var(--serif); font-size: 24px; margin-bottom: 8px; color: var(--cream); }
.fact p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-4); }
@media (max-width: 560px) {
  .fact {
    padding: 20px 22px; background: var(--paper-2); border: 1px solid var(--rule-light);
    border-left: 2px solid var(--brass); box-shadow: none;
  }
  .fact .value { color: var(--type-on-light); }
  .fact p { color: var(--type-on-light-soft); }
}

/* ---------- closing night band ---------- */
.closing-band { padding: 64px var(--edge); background: var(--copper-deep); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.closing-copy { max-width: 680px; display: flex; flex-direction: column; gap: 12px; }
.closing-copy .eyebrow { color: var(--ink); }
.closing-copy h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 38px); color: var(--ink); }
.closing-copy p { margin: 0; font-size: 15px; line-height: 1.6; color: color-mix(in oklab, var(--ink) 82%, transparent); }
.closing-tickets { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.closing-tickets .count { font: 400 12px/1 var(--mono); color: var(--ink); }

/* ---------- menus page ---------- */
.menu-tabs { padding: 0 var(--edge); border-bottom: 1px solid var(--b-3); display: flex; gap: 30px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .menu-tabs { gap: 8px 18px; padding: 12px 20px; }
  .menu-tabs button { padding: 6px 0; font-size: 14px; }
}
.menu-tabs button {
  background: none; border: none; padding: 16px 0; font: 600 15px/1 var(--sans);
  color: var(--ink-3); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.menu-tabs button.active { color: var(--ink-mint); border-bottom-color: var(--bone); }
.menu-panel { padding: 48px var(--edge); display: none; grid-template-columns: 1fr 1fr 360px; gap: 48px; border-bottom: 1px solid var(--b-1); }
.menu-panel.active { display: grid; }
@media (max-width: 560px) { .menu-panel { grid-template-columns: 1fr; } }
@media (min-width: 561px) and (max-width: 1023px) {
  .menu-panel { grid-template-columns: 1fr 1fr 190px; gap: 24px; }
  .menu-panel .menu-side-photo { height: 140px !important; }
  .menu-dish .row span:first-child { font-size: 18px; }
  .menu-dish .price { font-size: 13px; }
  .menu-dish .desc { font-size: 13px; }
}
@media (min-width: 901px) {
  .menu-panel[data-menu-panel="starters"].active { grid-template-columns: 1fr 1fr 1fr; }
}
.menu-panel[data-menu-panel="drinks"].active { display: flex; flex-wrap: wrap; gap: 40px 48px; }
.menu-panel[data-menu-panel="drinks"] .menu-col { flex: 1 1 230px; }
@media (max-width: 900px) {
  /* Long single-column lists on mobile — keep the category name pinned while
     its dishes scroll by, so it never turns into an unlabelled wall of cards. */
  .menu-col .label {
    position: sticky; top: 0; z-index: 5;
    background: var(--g-900); margin: 0 -48px 16px; padding: 14px 48px 8px;
  }
  .menu-col:first-child .label { margin-top: 0; }
}
.menu-col .sub-label {
  font: 600 11px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4);
  margin: 22px 0 10px;
}
.menu-col .sub-label:first-of-type { margin-top: 0; }
.menu-col .label {
  font: 700 13px/1 var(--sans); color: var(--ink-mint); margin-bottom: 20px;
  padding-bottom: 8px; border-bottom: 1px solid var(--b-3);
}
.menu-dish {
  display: grid; grid-template-columns: 60px 1fr; column-gap: 14px; row-gap: 4px;
  margin-bottom: 12px; padding: 12px 16px 12px 12px; border-radius: 3px; border: 1px solid var(--b-4);
  background: linear-gradient(160deg, var(--g-700), var(--g-800));
  box-shadow: 0 6px 14px oklch(0 0 0 / 0.25), inset 0 1px 0 oklch(1 0 0 / 0.03);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.menu-dish:hover { border-color: var(--b-8); transform: translateY(-3px); box-shadow: 0 16px 30px oklch(0 0 0 / 0.35); }
.menu-dish::before {
  content: ''; grid-column: 1; grid-row: 1 / span 2; align-self: start;
  width: 60px; height: 60px; border-radius: 3px; border: 1px solid var(--b-3);
  background: repeating-linear-gradient(135deg, var(--g-600) 0 6px, var(--g-750) 6px 12px);
}
.menu-dish .row { grid-column: 2; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.menu-dish .desc { grid-column: 2; }
.menu-dish .row span:first-child { font-family: var(--serif); font-size: 22px; color: var(--ink-1); }
.menu-dish .price { font: 700 15px/1 var(--mono); color: var(--ink-copper); }
.menu-dish .pick {
  font: 400 9px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; font-style: normal;
  color: var(--copper-deep); background: var(--ink-copper); padding: 3px 7px; border-radius: 2px; margin-left: 8px; vertical-align: middle;
}
.menu-dish .desc { font-size: 14px; color: var(--type-on-dark-soft); }
@media (max-width: 560px) {
  .menu-dish {
    display: block; background: none; border: none; box-shadow: none;
    padding: 14px 0; margin-bottom: 0; border-radius: 0;
    border-bottom: 1px solid var(--rule-light);
  }
  .menu-dish::before { display: none; }
}
.menu-side-photo { height: 260px; margin-bottom: 16px; }
.menu-side-note {
  padding: 20px; border: 1px solid var(--b-5); border-radius: 3px; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(160deg, var(--g-700), var(--g-800));
  box-shadow: 0 8px 18px oklch(0 0 0 / 0.25), inset 0 1px 0 oklch(1 0 0 / 0.03);
}
.kids-band {
  padding: 48px var(--edge); border-bottom: 1px solid var(--b-1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px;
  background: var(--brass-lit);
}
.kids-band .kids-copy h3 { color: var(--ink); }
.kids-band .kids-copy p { color: var(--ink); }
.kids-copy h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 25px; }
.kids-copy p { margin: 0; font-size: 14px; color: var(--ink-4); max-width: 620px; }
.hungry-band {
  padding: 56px var(--edge); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px;
  background: var(--navy);
}
.hungry-band .copy { font-family: var(--serif); font-size: clamp(22px, 2.5vw, 30px); max-width: 620px; color: var(--cream); }
.hh-badge {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--brass); border-radius: 3px;
  background: var(--navy); box-shadow: 0 8px 18px rgba(11,11,12,.25);
  font: 400 14px/1.5 var(--sans); color: var(--type-on-dark-soft);
}
.hh-badge strong { display: block; color: var(--brass-lit); }
.hh-badge.hidden { display: none; }

/* ---------- booking modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: color-mix(in oklab, var(--ink) 70%, transparent);
  display: none; align-items: flex-start; justify-content: center;
  padding: 5vh 20px; z-index: 100; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  width: 780px; max-width: 100%; background: var(--g-850);
  border: 1px solid var(--b-4); border-radius: 3px; overflow: hidden;
}
.modal-head { padding: 26px 32px; border-bottom: 1px solid var(--b-2); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.modal-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; }
.modal-head .sub { font-size: 14px; color: var(--ink-4); }
.modal-close { background: none; border: none; color: var(--ink-4); font: 400 20px/1 var(--mono); cursor: pointer; }
.modal-body { padding: 28px 32px; display: flex; flex-direction: column; gap: 26px; }
.field-label { font: 500 13px/1 var(--sans); color: var(--type-on-dark-soft); margin-bottom: 10px; }
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  padding: 13px 18px; border-radius: 2px; border: 1px solid var(--b-6);
  font-size: 14px; color: var(--ink-3); background: transparent; cursor: pointer; font-family: var(--sans);
}
.pill.selected { background: var(--bone); color: var(--g-950); border-color: var(--bone); font-weight: 700; }
.booking-calendar {
  margin-top: 14px; padding: 20px; border: 1px solid var(--b-5); border-radius: 4px;
  background: linear-gradient(160deg, var(--g-750), var(--g-850));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.03), 0 14px 28px oklch(0 0 0 / 0.25);
}
.cal-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
  font-family: var(--serif); font-size: 19px; color: var(--ink-1);
}
.cal-nav {
  width: 32px; height: 32px; border-radius: 3px; border: 1px solid var(--b-6);
  background: linear-gradient(160deg, var(--g-700), var(--g-800));
  color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cal-nav:hover:not(:disabled) { border-color: var(--ink-copper); color: var(--ink-copper); transform: translateY(-1px); }
.cal-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekdays {
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--b-3);
  font: 600 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-4); text-align: center;
}
.cal-day {
  position: relative; aspect-ratio: 1; border-radius: 3px; border: 1px solid var(--b-2);
  background: linear-gradient(160deg, var(--g-800), var(--g-850));
  color: var(--ink-2); font: 500 14px/1 var(--mono); cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.cal-day:hover:not(:disabled) { border-color: var(--b-7); transform: translateY(-2px); box-shadow: 0 8px 16px oklch(0 0 0 / 0.3); }
.cal-day:disabled { background: none; border-color: transparent; color: var(--b-4); cursor: not-allowed; text-decoration: line-through; }
.cal-day.is-today:not(.selected)::after {
  content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-copper);
}
.cal-day.selected {
  background: var(--brass-lit); color: var(--ink); font-weight: 700;
  border-color: var(--brass-lit); box-shadow: 0 10px 20px rgba(11,11,12,.35);
}
.cal-empty { background: none; border: none; }
.qty-row { display: flex; gap: 8px; flex-wrap: wrap; }
.qty {
  width: 50px; height: 46px; border-radius: 2px; border: 1px solid var(--b-6);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  color: var(--ink-3); background: transparent; cursor: pointer; font-family: var(--sans);
}
.qty.selected { background: var(--bone); color: var(--g-950); border-color: var(--bone); font-weight: 700; }
.qty.wide { width: auto; padding: 0 16px; }
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .area-grid { grid-template-columns: 1fr; } }
.area-card {
  padding: 18px; border: 1px solid var(--b-5); border-radius: 3px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(160deg, var(--g-700), var(--g-800)); box-shadow: 0 6px 14px oklch(0 0 0 / 0.22);
  text-align: left; font-family: var(--sans);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.area-card:hover { border-color: var(--b-7); transform: translateY(-2px); box-shadow: 0 10px 20px oklch(0 0 0 / 0.25); }
.area-card.selected { border-color: var(--bone); background: linear-gradient(160deg, var(--g-700), var(--g-750)); box-shadow: 0 10px 20px oklch(0 0 0 / 0.3); }
.area-card--patio { background: linear-gradient(155deg, var(--g-700), color-mix(in oklab, var(--g-800) 78%, var(--ink-mint))); }
.area-card .top { display: flex; align-items: center; justify-content: space-between; }
.area-card .name { font-family: var(--serif); font-size: 20px; color: var(--ink-1); }
.area-card .tag { font: 500 12px/1 var(--sans); color: var(--ink-mint); }
.area-card .desc { font-size: 14px; color: var(--ink-3); }
.time-row { display: flex; gap: 10px; flex-wrap: wrap; }
.time-slot {
  padding: 13px 17px; border-radius: 2px; border: 1px solid var(--b-5);
  font: 400 14px/1 var(--mono); color: var(--ink-4); background: transparent; cursor: pointer;
}
.time-slot.best::after { content: ' · suggested'; color: var(--ink-copper); }
.time-slot.selected { background: var(--bone); color: var(--g-950); font-weight: 500; }
.time-slot.selected.best::after { color: var(--g-950); }
.time-slot.unavailable { text-decoration: line-through; color: color-mix(in oklab, var(--type-on-dark-soft) 60%, var(--navy) 40%); cursor: not-allowed; }
.modal-footer { padding: 22px 32px 28px; background: var(--g-950); border-top: 1px solid var(--b-3); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.modal-footer .summary { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.modal-footer .summary .fine { display: block; font: 400 12px/1 var(--mono); color: var(--type-on-dark-soft); margin-top: 4px; }
.modal-fallback { font-size: 13px; color: var(--ink-4); margin-top: 4px; }
.modal-fallback a { text-decoration: underline; }

@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { width: 100%; border-radius: 12px 12px 0 0; max-height: 92vh; overflow-y: auto; }
}

/* build-notes / dev banner — visible only with ?debug */
.dev-note { display: none; }

/* ---------- distributed motion system ---------- */

/* paper grain, fixed over everything, near-imperceptible */
.grain-overlay {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.12; mix-blend-mode: overlay;
}
.grain-overlay svg { width: 100%; height: 100%; }

/* brass hairline dividers, draw left-to-right on scroll-into-view.
   The section right before one of these already has its own flat
   border-bottom; left in place it sits flush against the hairline and
   reads as a second, separate line right above the animated one. */
:has(+ .brass-rule) { border-bottom: none; }
.brass-rule {
  height: 1px; margin: 0 var(--edge);
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  transform: scaleX(0); transform-origin: left center;
}
.brass-rule.drawn { transform: scaleX(1); transition: transform 0.7s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: no-preference) {
  .brass-rule.drawn { animation: brass-glow 5s ease-in-out infinite; }
}
/* A brightness pulse on the bar's own single gradient — it IS the
   line, so there is no separate layer that can ever drift out of
   alignment with it, and the loop's start/end values match exactly
   for a seamless repeat with no visible reset. */
@keyframes brass-glow {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(2.4) saturate(1.4); }
}
@media (prefers-reduced-motion: reduce) { .brass-rule { transform: scaleX(1); } }

/* nav condenses on scroll */
.site-nav { transition: padding 0.25s ease, background-color 0.25s ease; }
.site-nav.condensed { padding-top: 11px; padding-bottom: 11px; background: color-mix(in oklab, var(--navy) 96%, transparent); backdrop-filter: blur(8px); }
.site-nav.condensed .brand-name { font-size: 17px; transition: font-size 0.25s ease; }

/* hero: real photo/video, graded by the actual solar elevation right now */
.hero-grade {
  position: absolute; inset: 0; z-index: 1; opacity: 0.5;
  mix-blend-mode: soft-light; pointer-events: none;
  transition: background 1.2s ease;
}
[data-sky-phase="night"] .hero-grade { background: linear-gradient(to top, oklch(0.32 0.08 255 / 0.65), transparent 60%); }
[data-sky-phase="twilight"] .hero-grade { background: linear-gradient(to top, oklch(0.5 0.1 30 / 0.55), oklch(0.35 0.08 270 / 0.25) 70%, transparent); }
[data-sky-phase="golden"] .hero-grade { background: linear-gradient(to top, oklch(0.72 0.14 78 / 0.5), transparent 65%); }
[data-sky-phase="day"] .hero-grade { background: linear-gradient(to top, oklch(0.78 0.05 220 / 0.28), transparent 60%); }

/* door cards: brass hairline + photo warmth on hover */
.door-card { position: relative; }
.door-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  transform: scaleX(0); transition: transform 0.32s ease;
}
.door-card:hover::before { transform: scaleX(1); }
.door-card .photo-slot.photo { transition: filter 0.32s ease; }
.door-card:hover .photo-slot.photo { filter: saturate(1.06) brightness(1.03); }

/* sunset card: thin day-phase meter */
.day-meter { display: flex; gap: 4px; }
.day-meter span { flex: 1; height: 3px; border-radius: 2px; background: var(--rule-dark); transition: background 0.9s ease; }
[data-sky-phase="day"] .day-meter span[data-seg="day"],
[data-sky-phase="golden"] .day-meter span[data-seg="golden"],
[data-sky-phase="twilight"] .day-meter span[data-seg="twilight"],
[data-sky-phase="night"] .day-meter span[data-seg="night"] { background: var(--ink-copper); }

/* arrive-by time: a gold underline that draws once, on load */
.sunset-card [data-bind="arriveBy"] { position: relative; }
.sunset-card [data-bind="arriveBy"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--copper); transform: scaleX(0); transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .sunset-card [data-bind="arriveBy"]::after { animation: draw-underline 0.7s cubic-bezier(.2,.7,.3,1) 1.3s forwards; }
}
@media (prefers-reduced-motion: reduce) { .sunset-card [data-bind="arriveBy"]::after { transform: scaleX(1); } }
@keyframes draw-underline { to { transform: scaleX(1); } }

/* ---------- private events ---------- */
.events-hero { min-height: 510px; position: relative; display: grid; place-items: end start; overflow: hidden; border-bottom: 1px solid var(--b-3); }
.events-hero-photo { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in oklab, var(--ink) 94%, transparent) 0%, color-mix(in oklab, var(--ink) 55%, transparent) 50%, color-mix(in oklab, var(--ink) 30%, transparent)), url('../img/patio-string-lights.jpg') center / cover; }
.events-hero-copy { position: relative; padding: 72px var(--edge); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.events-hero-copy h1 { max-width: 900px; }
.events-hero h1, .builder-heading h2, .events-intro p, .event-submit-band h3, .event-trust h2 { margin: 0; font: 400 clamp(40px, 6vw, 78px)/.96 var(--serif); letter-spacing: -.025em; color: var(--ink-1); }
.events-hero-copy p { max-width: 590px; margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-3); }
.events-intro { padding: 104px max(var(--edge), calc((100% - 920px) / 2)); text-align: center; display: flex; flex-direction: column; gap: 22px; background: var(--paper-2); border-bottom: 1px solid var(--rule-brass); }
.events-intro p { font-size: clamp(29px, 3.4vw, 48px); line-height: 1.08; color: var(--type-on-light); }
.events-intro .eyebrow { justify-content: center; color: var(--brass); }
.event-builder { padding: 72px var(--edge) 86px; background: color-mix(in oklab, var(--navy-2) 70%, transparent); border-top: 1px solid var(--b-3); }
.builder-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin: 0 auto 44px; max-width: 1320px; }
.builder-heading h2 { font-size: clamp(35px, 4vw, 56px); margin-top: 12px; }
.builder-heading p { margin: 0; max-width: 390px; font-size: 14px; color: var(--ink-4); line-height: 1.6; }
.builder-layout { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(280px, .84fr); gap: 32px; align-items: start; }
.event-form { padding: 30px; border: 1px solid var(--b-4); background: color-mix(in oklab, var(--navy) 72%, transparent); display: flex; flex-direction: column; gap: 28px; }
.event-form fieldset { border: 0; padding: 0; margin: 0; }
.event-form legend { margin-bottom: 13px; font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
.event-form legend span { font-weight: 400; color: var(--ink-4); }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice-grid label, .package-pick, .upgrade-list label { cursor: pointer; }
.choice-grid input, .package-pick input, .upgrade-list input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid label span { display: block; padding: 12px 10px; border: 1px solid var(--b-4); color: var(--ink-3); font-size: 13px; text-align: center; transition: .18s ease; }
.choice-grid input:checked + span { background: var(--copper-deep); border-color: var(--copper); color: var(--bone); }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-pair.single-field { grid-template-columns: 1fr; }
.event-form > label, .form-pair label { display: flex; flex-direction: column; gap: 8px; color: var(--ink-3); font-size: 12px; }
.optional-tag { color: var(--ink-4); font-style: italic; text-transform: none; letter-spacing: 0; }
.event-form input[type="text"], .event-form input[type="number"], .event-form input[type="date"], .event-form input[type="time"], .event-form select, .event-contact input { width: 100%; min-height: 45px; padding: 11px 12px; border: 1px solid var(--b-4); border-radius: 0; background: var(--g-900); color: var(--ink-1); font: 400 14px var(--sans); outline: none; }
.event-form input:focus, .event-form select:focus, .event-contact input:focus { border-color: var(--copper); }
.package-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.package-pick > span { height: 100%; min-height: 132px; display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--b-4); background: color-mix(in oklab, var(--navy-2) 50%, transparent); transition: .18s ease; }
.package-pick strong { font: 400 21px/1 var(--serif); color: var(--ink-1); }.package-pick em { color: var(--ink-copper); font: 500 12px var(--mono); font-style: normal; }.package-pick small { color: var(--ink-4); font-size: 12px; line-height: 1.45; }
.event-pricing-note { margin: 13px 0 0; color: var(--ink-4); font-size: 12px; line-height: 1.45; }.event-pricing-note strong { color: var(--ink-copper); font-weight: 500; }
.package-pick input:checked + span { border-color: var(--copper); background: color-mix(in oklab, var(--brass) 32%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass-lit) 22%, transparent); }
.course-intro { margin: -2px 0 15px; color: var(--ink-4); font-size: 13px; line-height: 1.5; }.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.course-group { padding: 15px; border: 1px solid var(--b-4); background: oklch(0.18 0.05 252 / .34); }.course-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 11px; color: var(--ink-2); font: 400 19px/1 var(--serif); }.course-label span { align-self: end; color: var(--ink-4); font: 400 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }.course-options { display: grid; gap: 7px; }.course-options label { cursor: pointer; }.course-options input { position: absolute; opacity: 0; pointer-events: none; }.course-options label span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px; border: 1px solid var(--b-3); color: var(--ink-3); transition: .18s ease; }.course-options b { font-size: 12px; font-weight: 500; }.course-options small { color: var(--ink-4); font: 400 10px var(--mono); white-space: nowrap; }.course-options input:checked + span { border-color: var(--emerald); background: oklch(0.34 .075 150 / .48); color: var(--ink-mint); }.course-options input:checked + span::before { content: '✓'; margin-right: 6px; color: var(--ink-mint); }
.upgrade-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.upgrade-list label span { display: flex; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid var(--b-4); color: var(--ink-3); font-size: 13px; }.upgrade-list label b { color: var(--ink-copper); font: 400 11px var(--mono); white-space: nowrap; }.upgrade-list input:checked + span { border-color: var(--emerald); background: oklch(0.35 .08 150 / .36); }.upgrade-list input:checked + span::before { content: '✓'; color: var(--ink-mint); }
.invitation-panel { position: sticky; top: 22px; max-height: calc(100vh - 44px); overflow-y: auto; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--b-4); background: var(--g-950); scrollbar-width: thin; scrollbar-color: var(--b-4) transparent; }.invitation-label { display: flex; justify-content: space-between; margin-bottom: 14px; color: var(--ink-4); font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.invitation-label span:last-child { color: var(--ink-copper); }
.invitation-panel > * { flex-shrink: 0; min-width: 0; }
.invitation-panel > .event-plan-card { margin: 18px 0 0; padding: 24px; border: 1px solid var(--rule-brass); background: var(--navy); }
.invitation-customize { margin: -4px 0 24px; border: 1px solid var(--b-4); background: color-mix(in oklab, var(--navy-2) 54%, transparent); }
.invitation-customize-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 0; background: transparent; color: var(--ink-2); text-align: left; cursor: pointer; }
.invitation-customize-toggle strong, .invitation-customize-toggle small { display: block; }.invitation-customize-toggle strong { font: 500 12px var(--sans); }.invitation-customize-toggle small { margin-top: 3px; color: var(--ink-4); font: 400 10px var(--mono); }.invitation-customize-toggle > span:last-child { color: var(--ink-copper); font: 300 23px/1 var(--sans); }
.invitation-customize-panel { padding: 4px 16px 16px; }.invitation-customize-panel[hidden] { display: none; }
.invitation-color-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 12px; }.invitation-color-fields label { font-size: 10px; }.event-form .invitation-color-fields input[type="color"] { width: 100%; height: 42px; padding: 4px; border: 1px solid var(--b-4); background: var(--g-900); cursor: pointer; }
.event-form input[type="file"] { width: 100%; min-height: 45px; padding: 9px; border: 1px solid var(--b-4); background: var(--g-900); color: var(--ink-3); font-size: 11px; }.event-form input[type="file"]::file-selector-button { margin-right: 9px; border: 0; padding: 5px 8px; background: var(--brass); color: var(--navy); font: 600 9px var(--mono); text-transform: uppercase; }
.invitation-image-options { display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px; margin-top:12px; }.invitation-image-options[hidden] { display: none; }.invitation-image-options > label { min-width:0; }.invitation-image-remove { min-height: 45px; padding: 8px 12px; border: 1px solid var(--b-4); background: transparent; color: var(--ink-3); font: 500 10px var(--mono); text-transform: uppercase; cursor: pointer; }.invitation-customize-note { margin: 10px 0 0; color: var(--ink-4); font-size: 11px; line-height: 1.45; }
.invitation-photo-controls { grid-column:1 / -1; display:grid; grid-template-columns:112px 1fr; gap:10px 14px; padding:14px; border:1px solid var(--b-4); background:color-mix(in oklab,var(--navy) 70%,transparent); }
.invitation-photo-control-label { grid-column:1 / -1; color:var(--ink-3); font:500 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.invitation-photo-presets { display:grid; grid-template-columns:repeat(3,32px); gap:4px; }
.invitation-photo-presets button { width:32px; height:30px; border:1px solid var(--b-4); background:transparent; color:var(--ink-2); cursor:pointer; font-size:15px; }
.invitation-photo-presets button:hover,.invitation-photo-presets button:focus-visible,.invitation-photo-modes button[aria-pressed="true"] { border-color:var(--ink-copper); color:var(--ink-copper); }
.invitation-photo-zoom { align-self:center; font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.invitation-photo-zoom input { display:block; width:100%; margin-top:9px; accent-color:var(--ink-copper); }
.invitation-photo-modes { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.invitation-photo-modes button,.invitation-photo-reset { min-height:36px; border:1px solid var(--b-4); background:transparent; color:var(--ink-3); font:500 9px var(--mono); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
/* The two ways back: one undoes what you moved, the other drops the whole
   panel. They belong together, on their own line, with room to tap. */
.invitation-resets { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--rule-dark); }
.invitation-artwork-restore,.invitation-auto-reset { min-height:34px; padding:0; border:0; border-bottom:1px solid currentColor; background:transparent; color:var(--ink-copper); font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.invitation-artwork-restore:hover,.invitation-auto-reset:hover { color:var(--brass-lit); }
.invitation-artwork-restore:focus-visible,.invitation-auto-reset:focus-visible { outline:2px solid var(--brass-lit); outline-offset:3px; }
/* Only worth saying once the artwork panel is open, and only briefly. */
.invitation-artwork-hint { margin:10px 0 0; font:400 11px/1.6 var(--sans); color:var(--type-on-dark-soft); }
.invitation-photo-reset { grid-column:1 / -1; justify-self:start; min-height:auto; padding:0 0 2px; border:0; border-bottom:1px solid currentColor; color:var(--ink-copper); }
.invitation-photo-help { grid-column:1 / -1; margin:0; color:var(--ink-4); font-size:11px; line-height:1.4; }
.invitation-artwork-controls { display:grid; gap:12px; margin-top:12px; padding:14px; border:1px solid var(--b-4); background:color-mix(in oklab,var(--navy) 70%,transparent); }
.invitation-artwork-controls[hidden] { display:none; }
.invitation-artwork-controls fieldset { min-width:0; margin:0; padding:0; border:0; }
.invitation-artwork-controls legend { margin-bottom:7px; color:var(--ink-3); font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.invitation-artwork-options { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.invitation-artwork-options--detail { grid-template-columns:repeat(2,1fr); }
.invitation-artwork-options label { position:relative; }
.invitation-artwork-options input { position:absolute; opacity:0; pointer-events:none; }
.invitation-artwork-options span { display:flex; min-height:36px; align-items:center; justify-content:center; padding:7px; border:1px solid var(--b-4); color:var(--ink-3); font:500 9px var(--mono); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.invitation-artwork-options input:checked + span { border-color:var(--ink-copper); color:var(--ink-copper); background:color-mix(in oklab,var(--brass) 10%,transparent); }
.invitation-artwork-options input:focus-visible + span { outline:2px solid var(--ink-copper); outline-offset:2px; }
.invitation-artwork-create { min-height:40px; padding:9px 14px; border:1px solid var(--ink-copper); background:var(--ink-copper); color:var(--navy); font:600 10px var(--mono); letter-spacing:.07em; text-transform:uppercase; cursor:pointer; }
.invitation-artwork-create:disabled { cursor:wait; opacity:.64; }
.invitation-artwork-status { margin:0; color:var(--ink-4); font-size:11px; line-height:1.45; }

.invitation-panel .event-plan-card > .invitation-label { font-size: 13px; letter-spacing: .14em; }
.ie-headline, .ie-main, .ie-message, .ie-space { max-width: 100%; overflow-wrap: anywhere; }
.live-invitation[data-photo-layout="flow"] :is(.ie-layout,.ie-col-text,.ie-grid-row,.ie-grid-meta-group) { display:contents; }
.live-invitation[data-photo-layout="flow"] :is(.ie-opener,.ie-headline,.ie-date,.ie-time,.ie-space,.ie-message,.ie-footer) { position:absolute; box-sizing:border-box; margin:0; padding:0; max-width:none; min-width:0; transform:none; transition:none; z-index:2; overflow-wrap:anywhere; }
.live-invitation[data-photo-layout="flow"] .ie-footer-group { white-space:normal; }
.live-invitation[data-photo-layout="flow"] .ie-footer[data-align="center"] .ie-footer-line { justify-content:center; }
.live-invitation[data-photo-layout="flow"] .ie-footer[data-align="left"] .ie-footer-line { justify-content:flex-start; }
.live-invitation[data-photo-layout="flow"] .ie-footer[data-align="right"] .ie-footer-line { justify-content:flex-end; }
.live-invitation[data-photo-layout="flow"] .ie-footer { margin-top:0; }
.event-plan-item-main { min-width: 0; overflow-wrap: anywhere; }
.event-plan-item-detail:empty { display: none; }
.live-invitation {
  --invite-ink: #173a39; --invite-paper: #eee4d1; --invite-glow: #d8a665; --invite-accent: #936d32; --creative-progress: 0;
  /* the one real content-safe-area reference every layout/border/motif must
     use - previously each layout guessed its own margin independently
     (or, worse, an absolutely-positioned child ignored it entirely since
     the containing block for position:absolute is the padding box, which
     already includes the padding - inset:0 on a child bypasses padding,
     it does not respect it). */
  --safe-block: clamp(40px, 8%, 68px); --safe-inline: clamp(26px, 8%, 56px);
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; width: 100%; aspect-ratio: 4 / 5;
  min-height: 500px;
  color: var(--invite-ink); background: var(--invite-paper); transition: color 1s ease, background-color 1s ease;
}
.invitation-photo { position:absolute; z-index:0; left:var(--photo-x,50%); top:var(--photo-y,24%); width:var(--photo-w,68%); height:var(--photo-h,43%); opacity:0; transform:translate(-50%,-50%); overflow:hidden; touch-action:none; cursor:grab; filter:saturate(.88) contrast(.94); transition:left .55s cubic-bezier(.2,.75,.2,1),top .55s cubic-bezier(.2,.75,.2,1),width .55s ease,height .55s ease,opacity 1.1s ease,filter .8s ease; }
.invitation-photo-media { position:absolute; inset:-2%; background-size:cover; background-repeat:no-repeat; background-position:var(--photo-focal-x,50%) var(--photo-focal-y,50%); transform:scale(var(--photo-zoom,1)); transform-origin:var(--photo-focal-x,50%) var(--photo-focal-y,50%); transition:transform .28s ease,background-position .28s ease; }
.live-invitation[data-has-photo="true"] .invitation-photo { opacity:.46; }
/* ---- FULL BACKGROUND ----
   The photograph stops being an element in the composition and becomes the
   paper itself. Two things make that work rather than merely fill the card:

   A scrim. Type over a photograph is the one place the standing rule has to
   bend, because a background is behind the words by definition. So it is not
   left bare: a wash of the invitation's own paper colour sits between the
   photograph and the stage, heaviest across the middle where the copy lives
   and lightest at the top and bottom where the picture can still be seen.
   The words keep their contrast, the palette keeps its identity, and the
   photograph still reads as a photograph.

   And a calmer picture. Saturation and contrast come down so it behaves as a
   ground instead of competing with the type for attention.

   The middle stops are 90-93% deliberately: at that opacity the result is at
   most a tenth of the way from the paper colour toward whatever the
   photograph happens to be, including black, so the contrast the reader gets
   holds for any picture rather than only for the calm ones. */
.live-invitation[data-photo-treatment="background"] .invitation-photo { left:0; top:0; width:100%; height:100%; transform:none; opacity:1; border-radius:0; filter:saturate(.72) contrast(.9) brightness(1.03); }
.live-invitation[data-photo-treatment="background"] .invitation-photo-media { inset:0; }
.live-invitation[data-has-photo="true"][data-photo-treatment="background"]::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--invite-paper) 46%, transparent) 0%,
    color-mix(in srgb, var(--invite-paper) 90%, transparent) 24%,
    color-mix(in srgb, var(--invite-paper) 93%, transparent) 50%,
    color-mix(in srgb, var(--invite-paper) 90%, transparent) 74%,
    color-mix(in srgb, var(--invite-paper) 50%, transparent) 100%);
}
/* The frame and the marks sit above the scrim, where they always were. */
.live-invitation[data-photo-treatment="background"] .ie-stage { z-index:1; }
.live-invitation[data-has-photo="true"][data-photo-treatment="full"] .invitation-photo { opacity:.78; filter:saturate(.94) contrast(.95); }
.live-invitation[data-has-photo="true"][data-photo-treatment="window"] .invitation-photo { opacity:.68; filter:saturate(.9) contrast(.96); }
.live-invitation[data-family="birthday"] .invitation-photo { filter:saturate(.94) sepia(.04) contrast(.95); }
.live-invitation[data-family="wedding"] .invitation-photo { filter:saturate(.82) contrast(.91) brightness(1.02); }
.live-invitation[data-family="shower"] .invitation-photo { filter:saturate(.78) contrast(.88) brightness(1.045); }
.live-invitation[data-family="business"] .invitation-photo { filter:saturate(.88) contrast(.97); }
.live-invitation[data-family="engagement"] .invitation-photo { filter:saturate(.84) contrast(.91) sepia(.025); }
.live-invitation[data-has-photo="true"] .invitation-photo:focus-visible,.live-invitation.is-photo-dragging .invitation-photo { outline:1px dashed color-mix(in srgb,var(--invite-ink) 52%,transparent); outline-offset:3px; }
.live-invitation.is-photo-dragging .invitation-photo { cursor:grabbing; transition:none; }
.invitation-material { position: absolute; z-index: -2; inset: 0; pointer-events: none; opacity: .22; background-image: repeating-linear-gradient(102deg, rgb(45 33 20 / .035) 0 1px, transparent 1px 4px), radial-gradient(circle at 30% 20%, rgb(255 255 255 / .5), transparent 42%); }
.invitation-dormant-mark { position: absolute; inset: var(--safe-block) var(--safe-inline); z-index: 1; display: grid; justify-items: center; gap: 7px; align-content: center; color: #65706d; font: 400 13px var(--serif); letter-spacing: .18em; text-transform: uppercase; }
.invitation-dormant-mark small { font: 500 8px var(--mono); letter-spacing: .16em; opacity: .65; }
.invitation-dormant-rule { width: 34px; height: 1px; margin-bottom: 8px; background: currentColor; opacity: .45; }
.invitation-dormant-mark[hidden] { display: none; }
/* --yield-duration/--yield-ease drive how quickly this family's borders,
   artwork and title respond to the photo moving near them - the event-
   specific "body language" the composition awakens with: birthday is
   quick and energetic, business is precise/linear, wedding and
   engagement are slower and more graceful. */
.live-invitation[data-family="birthday"] { --invite-paper:#f2dfc8; --invite-ink:#4a3027; --invite-glow:#df8f62; --invite-accent:#a04b3b; --yield-duration: .24s; --yield-ease: cubic-bezier(.34,.6,.4,1); }
.live-invitation[data-family="engagement"] { --invite-paper:#eee2dc; --invite-ink:#4a3037; --invite-glow:#d7a3a0; --invite-accent:#8c5c69; --yield-duration: .46s; --yield-ease: cubic-bezier(.3,.7,.3,1); }
.live-invitation[data-family="wedding"] { --invite-paper:#e8e3da; --invite-ink:#26363d; --invite-glow:#c8b486; --invite-accent:#6f7d79; --yield-duration: .5s; --yield-ease: cubic-bezier(.25,.75,.3,1); }
.live-invitation[data-family="shower"] { --invite-paper:#e8ebdc; --invite-ink:#354d43; --invite-glow:#c7d1a8; --invite-accent:#789181; --yield-duration: .42s; --yield-ease: ease-out; }
.live-invitation[data-family="business"] { --invite-paper:#dce5e5; --invite-ink:#193b48; --invite-glow:#9dbec2; --invite-accent:#466e77; --yield-duration: .2s; --yield-ease: linear; }
.live-invitation[data-family="custom"] { --invite-paper:#e7dfd0; --invite-ink:#273d3b; --invite-glow:#c9aa78; --invite-accent:#627b72; --yield-duration: .34s; --yield-ease: ease; }
/* space/time are abstract design pressure, not a literal icon: rooftop
   opens up whitespace, dining tightens it; evening/night deepen the ink. */
.live-invitation[data-venue="rooftop"] .ie-stage { --venue-space: 1.14; }
.live-invitation[data-venue="dining"] .ie-stage { --venue-space: .88; }
.live-invitation[data-atmosphere="evening"], .live-invitation[data-atmosphere="night"] { filter: saturate(.92) brightness(.97); }

.ie-stage { position: absolute; inset: var(--safe-block) var(--safe-inline); z-index: 1; pointer-events:none; }
.ie-stage[hidden] { display: none; }
.ie-border-host { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Beside the border, in the same box, so the two share one coordinate
   system - which is what the fixed motifs were drawn against. */
.ie-motif-host { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ie-border-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ---- typography: one shared type ramp (same design language across every
   recipe) whose treatment is switched by the active recipe, never its
   presence/absence. ---- */
/* transform transitions here are what let applyTypographyYield's small
   photo-clearance nudge (invitation-recipes.js) morph smoothly instead of
   jumping - same --yield-duration/--yield-ease per-family pacing the
   border and photo mask already use, so all three feel like one system. */
.ie-opener { margin: 0; font: 500 11px var(--mono); letter-spacing: .19em; text-transform: uppercase; opacity: .78; transition: transform var(--yield-duration, .38s) var(--yield-ease, cubic-bezier(.22,.61,.36,1)); }
.ie-headline { margin: 17px 0 0; transition: transform var(--yield-duration, .38s) var(--yield-ease, cubic-bezier(.22,.61,.36,1)); }
.ie-kicker { display: block; margin-bottom: 10px; font: 500 10px var(--mono); letter-spacing: .15em; text-transform: uppercase; opacity: .76; }
.ie-main { display: block; font: 400 clamp(30px, 4vw, 47px)/1.05 var(--serif); letter-spacing: -.015em; text-transform: uppercase; }
.ie-date, .ie-time, .ie-space { margin: 6px 0 0; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .075em; }
.ie-space { margin-top: 15px; font-size: 13px; letter-spacing: .12em; }
.ie-message { max-width: 300px; margin: 22px 0 0; font: italic 17px/1.4 var(--serif); transition: transform var(--yield-duration, .38s) var(--yield-ease, cubic-bezier(.22,.61,.36,1)); }
.ie-footer { margin-top: 28px; opacity: .72; font: 500 9px/1.75 var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: transform var(--yield-duration, .38s) var(--yield-ease, cubic-bezier(.22,.61,.36,1)); }
.ie-footer-line { display:flex; align-items:baseline; gap:7px; min-width:0; }
.ie-footer-group { white-space:nowrap; }
.ie-footer-separator { flex:0 0 auto; opacity:.72; }
[hidden].ie-opener, [hidden].ie-headline, [hidden].ie-date, [hidden].ie-time, [hidden].ie-space, [hidden].ie-message { display: none; }

/* ==== LAYOUT: centeredCeremonial (wedding, engagement) ==== */
/* One measure for the whole design: every layout occupies the frame's
   content box, published as --frame-* by InvitationRecipes.getContentBox().
   Each layout used to guess its own inset, which is how a single card could
   put its headline inside the drawn frame and its footer outside it. In
   photo-flow mode .ie-layout becomes display:contents and the composition
   engine positions each line against the same box directly. */
.ie-stage > .ie-layout { position:absolute; left:var(--frame-x,0); top:var(--frame-y,0); width:var(--frame-w,100%); height:var(--frame-h,100%); box-sizing:border-box; }
.ie-layout--ceremonial { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 73%; margin-inline: auto; }
.ie-layout--ceremonial .ie-thread { width: var(--thread-length, 0%); height: 1px; margin: 24px 0; background: var(--invite-accent); transition: width 1.2s cubic-bezier(.2,.75,.2,1); }
.ie-layout--ceremonial .ie-thread[hidden] { display: none; }
.ie-ceremonial-field { position: absolute; top:0; bottom:0; left:-31%; width:162%; pointer-events: none; }
.ie-typography--centerpiece .ie-main { letter-spacing: .015em; }

/* ==== LAYOUT: asymmetricEditorial (birthday) ==== */
.ie-layout--editorial { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr auto; align-items: center; gap: 18px; }
.ie-layout--editorial .ie-col-text { grid-row: 1; grid-column: 1; }
.ie-layout--editorial .ie-col-motif { grid-row: 1; grid-column: 2; }
.ie-layout--editorial > .ie-footer { grid-row: 2; grid-column: 1 / -1; align-self: end; }
.ie-layout--editorial .ie-col-text { text-align: left; }
.ie-layout--editorial .ie-col-motif { position: relative; height: 100%; min-height: 0; }
.ie-typography--oversized .ie-main { font-size: clamp(24px, 4vw, 34px); line-height: 1.02; }
@media (max-width: 640px) { .ie-layout--editorial { grid-template-columns: 1fr; } .ie-layout--editorial .ie-col-motif { display: none; } }

/* ==== LAYOUT: gridStructured (business) ====
   One stable content axis: every row shares this layout's own
   padding-inline start. Nothing here is positioned by flex-wrap reflow
   or by a value that depends on a neighboring string's width - that was
   the actual cause of the space line jumping horizontally between
   Preferred Space options (the old .ie-grid-row--meta was a wrapping
   flex row, so where "space" landed depended on how wide "date" and
   "time" happened to be). Vertical rhythm is now a deliberate editorial
   scale (see individual margin-top values below) instead of one uniform
   gap applied after every row. */
.ie-layout--grid { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: left; padding-inline: 0; }
.ie-layout--grid .ie-grid-row,
.ie-layout--grid .ie-grid-meta-group,
.ie-layout--grid > .ie-message,
.ie-layout--grid > .ie-footer { width:64%; }
.ie-grid-row--label { min-height: 14px; }
.ie-layout--grid .ie-opener { margin: 0; }
/* eyebrow -> title: moderate */
.ie-layout--grid .ie-headline { margin-top: 16px; }
/* the accent rule finishes the title - it no longer separates the
   eyebrow from it. */
.ie-grid-rule { height: 1px; background: var(--invite-accent); opacity: .55; width: 0; margin-top: 10px; transition: width 1s ease; }
.ie-grid-rule:not([hidden]) { width: 44%; }
.ie-grid-rule[hidden] { visibility: hidden; }
/* date/time/space read as one group: tight, distinct internal spacing,
   never a wrapping row. */
.ie-grid-meta-group { margin-top: 18px; display: flex; flex-direction: column; }
.ie-grid-meta-group .ie-date { margin: 0; }
.ie-grid-meta-group .ie-time { margin-top: 4px; }
.ie-grid-meta-group .ie-space { margin-top: 7px; font-size: 13px; letter-spacing: .1em; }
/* space -> guest line / guest line -> footer: moderate */
.ie-layout--grid .ie-message { margin-top: 20px; }
.ie-layout--grid .ie-footer { margin-top: 18px; }
/* Level 1: company/event name reads as the strongest element on the card. */
.ie-typography--minimal .ie-main { font-size: clamp(28px, 4vw, 44px); font-weight: 500; letter-spacing: .005em; }
.ie-grid-marks { position: absolute; inset: 0; pointer-events: none; }

/* ==== LAYOUT: organicFlow (baby shower, custom) ==== */
.ie-layout--organic { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 78%; margin-inline: auto; }
.ie-organic-field { position: absolute; top:0; bottom:0; left:-22%; width:144%; pointer-events: none; }
.ie-typography--integrated .ie-main { font-weight: 400; }

/* ==== BORDER: partialCorners (birthday) ==== */
.ie-corner { fill: none; stroke: var(--invite-accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1s cubic-bezier(.2,.75,.2,1), opacity .5s ease; }
.ie-corner.is-drawn { stroke-dashoffset: 0; opacity: .8; }

/* ==== BORDER: doubleFineFrame (wedding) ==== */
.ie-frame { fill: none; stroke: var(--invite-accent); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.75,.2,1), opacity .7s ease; }
.ie-frame--outer { stroke-width: 1; }
.ie-frame--inner { stroke-width: .6; }
.ie-frame.is-drawn { stroke-dashoffset: 0; opacity: .55; }

/* ==== BORDER: offsetFrame (engagement) ==== */
.ie-offset-frame { fill: none; stroke: var(--invite-accent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.2,.75,.2,1), opacity .6s ease, stroke-width .8s ease; }
.ie-offset-frame.is-drawn { stroke-dashoffset: 0; opacity: .5; }
.ie-offset-frame.is-resolved { stroke-width: 1.4; opacity: .68; }

/* ==== BORDER: architecturalGrid (business) ==== */
.ie-grid-line { stroke: var(--invite-accent); stroke-width: .8; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1s ease, opacity .5s ease; }
.ie-grid-line.is-drawn { stroke-dashoffset: 0; opacity: .4; }

/* ==== BORDER: openTopBottom (custom) ==== */
.ie-open-rule { stroke: var(--invite-accent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.1s ease, opacity .5s ease; }
.ie-open-rule.is-drawn { stroke-dashoffset: 0; opacity: .55; }

/* ==== MOTIF: burst (birthday) - energetic ray marks in the editorial column ==== */
.ie-burst-mark { position: absolute; width: 46px; height: 4px; background: color-mix(in srgb, var(--invite-ink) 55%, var(--invite-accent)); border-radius: 2px; opacity: 0; animation: ieMarkIn .6s ease both; }
.ie-burst-mark::after { content: ''; position: absolute; top: 0; left: 58px; width: 20px; height: 4px; background: color-mix(in srgb, var(--invite-ink) 30%, var(--invite-glow)); border-radius: 2px; }

/* ==== MOTIF: interlockingArcs (engagement) ==== */
.ie-arc-mark { position: absolute; width: 64px; height: 64px; border: 1.4px solid var(--invite-accent); border-radius: 50%; opacity: 0; animation: ieMarkIn .7s ease both; }
.ie-arc-mark--1 { top: 10%; right: 8%; }
.ie-arc-mark--2 { top: 16%; right: 2%; border-color: var(--invite-glow); }

/* ==== MOTIF: organicBlobs (baby shower) ==== */
.ie-blob-mark { position: absolute; background: color-mix(in srgb, var(--invite-glow) 30%, transparent); opacity: 0; animation: ieMarkIn .8s ease both; }

/* ==== MOTIF: gridMarks (business) ==== */
/* lives in the right margin, mirroring the vertical grid-line's left
   margin placement - the decorative column, never the text column
   (which is left-aligned and starts at the layout's own padding-inline).
   The collision validator still hides it as a last resort if an unusually
   wide line of text ever reaches this far. */
.ie-grid-tick { position: absolute; right: 5%; top: 10%; width: 1px; height: 18px; background: var(--invite-accent); opacity: 0; animation: ieMarkIn .5s ease both; }

/* ==== MOTIF: neutralGeometry (custom) ==== */
.ie-neutral-mark { position: absolute; opacity: 0; animation: ieMarkIn .6s ease both; }
.ie-neutral-mark--circle { width: 16px; height: 16px; border: 1px solid var(--invite-accent); border-radius: 50%; }
.ie-neutral-mark--line { width: 26px; height: 1px; background: var(--invite-accent); }

/* Event motif libraries. These procedural drawings share the restaurant's
   ink/paper craft, but each occasion owns a recognizable visual language. */
.ie-motif-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; translate:var(--photo-balance-x,0) var(--photo-balance-y,0); transition:translate .55s cubic-bezier(.2,.75,.2,1); }
/* Artwork is placeable by hand, the same way the photograph is. The stage
   stays transparent to the pointer - only the marks themselves are grabbable,
   via an invisible rect over each one, because line art is mostly empty space
   and hit-testing the strokes would make it almost impossible to pick up. */
.ie-generated-element,.ie-motif-piece { pointer-events:auto; cursor:grab; touch-action:none; }
.ie-generated-element.ie-collision-hidden { pointer-events:none; }
.ie-artwork-hit { fill:transparent; stroke:none; pointer-events:all; }
/* The affordance is the mark lifting, not a panel appearing behind it: the
   grab target is the size of the motif's whole bounding box, so tinting it
   drops a translucent slab across the card. Brighten the ink instead. */
.ie-generated-element:hover .ie-generated-path,.ie-motif-piece:hover .ie-motif-shape { opacity:1; stroke-width:2.4; }
.ie-generated-element.is-dragging,.ie-motif-piece.is-dragging { cursor:grabbing; transition:none !important; }
.ie-generated-element.is-dragging .ie-generated-path,.ie-motif-piece.is-dragging .ie-motif-shape { opacity:1; stroke-width:2.8; }
.ie-motif-piece.is-removed { display:none; }
/* A selected piece shows the box you are actually grabbing, and its controls
   sit just above it. The buttons live in the stage but the stage is
   transparent to the pointer, so they re-enable it for themselves. */
.ie-generated-element.is-selected .ie-artwork-hit,.ie-motif-piece.is-selected .ie-artwork-hit { fill:none; stroke:var(--invite-accent); stroke-width:1; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; opacity:.75; }
/* `hidden` alone is not enough once an element has its own display value:
   the UA rule [hidden]{display:none} loses to any class that sets display,
   which is how these controls ended up on screen with nothing selected. */
.ie-artwork-tools[hidden] { display:none !important; }
.ie-artwork-tools { position:absolute; z-index:6; display:flex; gap:6px; transform:translateX(-50%); padding:5px; border-radius:999px; background:color-mix(in srgb,var(--invite-paper) 92%,var(--invite-ink)); box-shadow:0 4px 14px rgb(0 0 0 / .22),0 0 0 1px color-mix(in srgb,var(--invite-ink) 14%,transparent); pointer-events:auto; animation:ieToolsIn .14s ease-out both; }
.ie-artwork-tools.is-below { animation-name:ieToolsInBelow; }
@keyframes ieToolsIn { from { opacity:0; transform:translateX(-50%) translateY(4px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes ieToolsInBelow { from { opacity:0; transform:translateX(-50%) translateY(-4px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.ie-artwork-tools button { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer; color:var(--invite-paper); background:var(--invite-ink); padding:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background .15s ease,transform .12s ease; }
.ie-artwork-tools button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.ie-artwork-tools button:hover { background:var(--invite-accent); transform:scale(1.08); }
.ie-artwork-tools button:active { transform:scale(.94); }
.ie-artwork-tools [data-art-tool="delete"]:hover { background:#a8322b; }
.ie-artwork-tools button:focus-visible { outline:2px solid var(--invite-accent); outline-offset:3px; }
@media (pointer: coarse) { .ie-artwork-tools button { width:40px; height:40px; } .ie-artwork-tools button svg { width:20px; height:20px; } }
@media (prefers-reduced-motion: reduce) { .ie-artwork-tools { animation:none; } .ie-artwork-tools button { transition:none; } }
.live-invitation.is-artwork-dragging .ie-artwork-tools { display:none; }
.live-invitation.is-artwork-dragging { cursor:grabbing; }
.live-invitation.is-artwork-dragging .invitation-photo { pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .ie-generated-element[data-artwork-id] { transition:opacity .2s ease; } }
.ie-custom-artwork { z-index:1; overflow:visible; translate:var(--artwork-avoid-x,0) var(--artwork-avoid-y,0); transform:none !important; transition:translate .42s cubic-bezier(.2,.75,.2,1); }
.ie-generated-path { fill:none; stroke:var(--invite-accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.92; }
.ie-generated-element.ie-tone-1 .ie-generated-path { stroke:var(--invite-glow); stroke-width:1.8; opacity:.8; }
.ie-generated-element.ie-tone-2 .ie-generated-path { stroke:var(--invite-ink); stroke-width:1.6; opacity:.55; }
.ie-generated-element[data-artwork-id] { transition:opacity .35s ease,transform .55s cubic-bezier(.2,.75,.2,1); }
.ie-composition-debug { position:absolute; inset:0; z-index:20; pointer-events:none; }
.ie-composition-debug span { position:absolute; box-sizing:border-box; }
.ie-composition-debug .debug-photo { border:2px solid #168cff; }
.ie-composition-debug .debug-text { border:1px solid #ff3a45; background:rgb(255 58 69 / .08); }
.ie-composition-debug .debug-awareness { border:1px dashed #ffe331; }
.ie-composition-debug .debug-collision { border:2px solid #ff33db; }
.ie-composition-debug .debug-border { border:1px solid #38d96a; }
.ie-composition-debug .debug-decoration { border:1px solid #ff8a24; }
.ie-composition-debug .debug-negative { background:rgb(58 220 105 / .06); }
.ie-composition-debug pre { position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px); margin:0; padding:5px; background:rgb(0 0 0 / .76); color:#fff; font:8px/1.4 monospace; white-space:pre-wrap; }
.ie-motif-shape { fill:none; stroke:var(--invite-accent); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.72; stroke-dasharray:1; stroke-dashoffset:0; }
.ie-ribbon { stroke-width:3; opacity:.78; }
.ie-burst-ray { stroke-width:2; }
.ie-confetti-dot { fill:var(--invite-glow); stroke:none; }
.ie-confetti-line { stroke:var(--invite-ink); stroke-width:2; }
.ie-milestone-halo { stroke:var(--invite-glow); stroke-width:5; opacity:.2; }
.ie-stem, .ie-leaf, .ie-ceremony-arch { stroke-width:1; opacity:.62; }
.ie-waterline { stroke:var(--invite-glow); opacity:.52; }
.ie-cloud { fill:color-mix(in srgb,var(--invite-glow) 20%,transparent); stroke-width:1; }
.ie-crescent { fill:color-mix(in srgb,var(--invite-glow) 25%,transparent); stroke-width:1; }
.ie-star { fill:var(--invite-accent); stroke:none; opacity:.55; }
.ie-gentle-arc { stroke-width:4; opacity:.14; }
.ie-architecture-line { stroke-width:.75; opacity:.22; }
.ie-modular-block { stroke-width:1.2; opacity:.55; }
.ie-modular-block--fill { fill:color-mix(in srgb,var(--invite-accent) 12%,transparent); }
.ie-structured-corner { stroke-width:2; opacity:.56; }
.ie-joining-path { stroke-width:1.65; }
.ie-joining-path--a { stroke:var(--invite-accent); }
.ie-joining-path--b { stroke:var(--invite-glow); }
.ie-union-circle { opacity:.36; }.ie-union-circle--b { stroke:var(--invite-glow); }
.ie-paired-leaf { fill:color-mix(in srgb,var(--invite-accent) 15%,transparent); }
.ie-custom-rule,.ie-custom-tick { opacity:.46; }.ie-custom-orbit { stroke-dasharray:3 5; }.ie-custom-tick { stroke-width:2; }

/* Composition personalities: not a single skeleton with new colors. */
.ie-recipe--birthday .ie-col-text { align-self:end; padding-bottom:4%; }
.ie-recipe--birthday .ie-main { text-transform:none; font-style:italic; }
.ie-recipe--birthday .ie-footer { width:100%; max-width:none; text-align:left; }
.ie-recipe--birthday .ie-footer-line { justify-content:flex-start; }
.ie-recipe--wedding .ie-main { text-transform:none; font-size:clamp(30px,4.6vw,50px); }
.ie-recipe--wedding .ie-opener { letter-spacing:.26em; }
.ie-recipe--shower.ie-stage { inset-block:clamp(32px,7%,58px); }
.ie-recipe--shower .ie-main { text-transform:none; line-height:1.12; }
.ie-recipe--business .ie-main { font-family:var(--mono); text-transform:uppercase; font-size:clamp(24px,3.6vw,39px); line-height:1.04; }
.ie-recipe--business .ie-footer { border-top:1px solid color-mix(in srgb,var(--invite-accent) 40%,transparent); padding-top:10px; }
.ie-recipe--business .ie-footer { width:78%; max-width:none; text-align:left; }
.ie-recipe--business .ie-footer-line { justify-content:flex-start; }
.ie-recipe--engagement .ie-main { text-transform:none; font-style:italic; }
.ie-recipe--custom .ie-main { text-transform:none; }

/* Venue grammar blends with event grammar: air/horizon on the rooftop,
   water rhythm at the marina, tighter warmth in the dining room. */
.live-invitation[data-venue="rooftop"] .ie-motif-svg { transform:scale(.96,.88); transform-origin:center; }
.live-invitation[data-venue="marina"] .ie-waterline,
.live-invitation[data-venue="waterfront"] .ie-waterline { opacity:.82; }
.live-invitation[data-venue="dining"] .ie-motif-svg { transform:scale(.9); transform-origin:center; }
.live-invitation[data-atmosphere="golden"] .ie-motif-shape { filter:drop-shadow(0 0 2px color-mix(in srgb,var(--invite-glow) 42%,transparent)); }
.live-invitation[data-atmosphere="night"] .invitation-material { opacity:.32; }

@media (prefers-reduced-motion:no-preference) {
  .ie-motif-shape { animation:ieDraw var(--event-tempo,1s) cubic-bezier(.2,.75,.2,1) both; }
  .ie-recipe--birthday .ie-ribbon { animation-name:ieRibbonDraw; }
  .ie-recipe--birthday .ie-confetti-dot,.ie-recipe--birthday .ie-confetti-line { animation-name:ieCelebrateIn; animation-duration:.55s; }
  .ie-recipe--wedding .ie-motif-shape { animation-duration:calc(var(--event-tempo,1.25s) * 1.25); }
  .ie-recipe--shower .ie-cloud,.ie-recipe--shower .ie-crescent,.ie-recipe--shower .ie-star { animation-name:ieFloatBloom; }
  .ie-recipe--business .ie-motif-shape { animation-name:ieConstruct; animation-timing-function:steps(8,end); }
  .ie-recipe--engagement .ie-joining-path--a { animation-name:ieJoinLeft; }
  .ie-recipe--engagement .ie-joining-path--b { animation-name:ieJoinRight; }
  .ie-recipe--custom .ie-motif-shape { animation-name:ieExplore; }
}
@keyframes ieDraw { from { stroke-dashoffset:1; opacity:0; } to { stroke-dashoffset:0; } }
@keyframes ieRibbonDraw { from { stroke-dashoffset:1; opacity:0; } to { stroke-dashoffset:0; opacity:.78; } }
@keyframes ieCelebrateIn { from { opacity:0; transform:scale(.2) rotate(-18deg); } to { opacity:.72; transform:none; } }
@keyframes ieFloatBloom { from { opacity:0; transform:translateY(10px) scale(.9); } to { opacity:.62; transform:none; } }
@keyframes ieConstruct { from { opacity:0; stroke-dashoffset:1; } to { opacity:.42; stroke-dashoffset:0; } }
@keyframes ieJoinLeft { from { opacity:0; transform:translateX(-16px); stroke-dashoffset:1; } to { opacity:.72; transform:none; stroke-dashoffset:0; } }
@keyframes ieJoinRight { from { opacity:0; transform:translateX(16px); stroke-dashoffset:1; } to { opacity:.72; transform:none; stroke-dashoffset:0; } }
@keyframes ieExplore { from { opacity:0; transform:rotate(-2deg) scale(.96); } to { opacity:.5; transform:none; } }

/* Local-only development overlay enabled with
   ?invitationDebug=exclusions on localhost. Never appears in production. */
.ie-exclusion-debug { position:absolute; inset:0; z-index:20; pointer-events:none; }
.ie-exclusion-debug span { position:absolute; box-sizing:border-box; border:1px solid rgb(190 30 75 / .68); background:rgb(225 45 90 / .12); }
.ie-exclusion-debug span.ie-exclusion-debug-photo { border-color: rgb(40 130 210 / .75); border-radius: 14px; background: rgb(40 130 210 / .12); }
.ie-exclusion-debug-velocity { position: absolute; height: 2px; background: rgb(30 190 110 / .85); transform-origin: 0 50%; pointer-events: none; }
.ie-exclusion-debug-velocity::after { content: ''; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: rgb(30 190 110 / .85); }
/* the actual mask holes morph instead of snapping - same rect elements
   get their geometry attributes updated in place (see ensureExclusionMask
   in invitation-recipes.js), so a plain CSS transition on those SVG
   geometry properties is enough to make borders/artwork open smoothly as
   the photo moves, with no hand-rolled animation loop. The photo's own
   hole additionally picks up this family's --yield-duration/--yield-ease
   so its opening reads as slower/faster in character with the occasion. */
.ie-exclusion-hole { transition: x .3s cubic-bezier(.22,.61,.36,1), y .3s cubic-bezier(.22,.61,.36,1), width .3s cubic-bezier(.22,.61,.36,1), height .3s cubic-bezier(.22,.61,.36,1); }
.ie-exclusion-hole--photo { transition-duration: var(--yield-duration, .38s); transition-timing-function: var(--yield-ease, cubic-bezier(.22,.61,.36,1)); }
/* the photo's own per-text-group dissolve holes (invitation-recipes.js
   ensurePhotoMask/applyPhotoExclusions) - these never had a matching
   transition rule before, so even though the rects were already being
   updated in place, fill-opacity/geometry still snapped instead of
   morphing. This is what makes "very subtle dissolve before collision,
   strengthening with overlap" actually read as continuous. */
.ie-photo-mask-hole { transition: fill-opacity var(--yield-duration, .4s) var(--yield-ease, ease), x var(--yield-duration, .4s) var(--yield-ease, ease), y var(--yield-duration, .4s) var(--yield-ease, ease), width var(--yield-duration, .4s) var(--yield-ease, ease), height var(--yield-duration, .4s) var(--yield-ease, ease); }

@media (max-width:640px) {
  .ie-recipe--birthday .ie-footer { width:100%; }
  .ie-recipe--business .ie-footer { width:100%; }
  .ie-footer { letter-spacing:.07em; }
  .ie-footer-line { flex-wrap:wrap; row-gap:0; column-gap:5px; }
  .ie-footer-name { margin-bottom:2px; }
}

/* ---- botanicalThread motif lives inline as .ie-thread inside the
   ceremonial layout (see above), not a separate absolute layer. ---- */

@keyframes invitationWake { 0% { opacity: .35; filter: blur(5px); } 55% { filter: blur(0); } 100% { opacity: 1; } }
@keyframes invitationArrive { from { opacity: 0; transform: translateY(9px); filter: blur(4px); letter-spacing: .08em; } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes invitationUpdate { 0% { opacity: .45; transform: translateY(3px); filter: blur(2px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes invitationSettle { 0%,100% { box-shadow: inset 0 0 0 0 transparent; } 45% { box-shadow: inset 0 0 65px color-mix(in srgb, var(--invite-glow) 20%, transparent); } }
@keyframes ieMarkIn { from { opacity: 0; transform: scale(.6); } to { opacity: .85; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .live-invitation.is-awake .ie-stage { animation: invitationWake .9s ease both; }
  .is-arriving { animation: invitationArrive .72s cubic-bezier(.2,.75,.2,1) both; }
  .is-updating { animation: invitationUpdate .32s ease both; }
  .live-invitation.is-completing { animation: invitationSettle 1.25s ease both; }
  .live-invitation.is-active .ie-corner.is-drawn, .live-invitation.is-active .ie-frame.is-drawn, .live-invitation.is-active .ie-offset-frame.is-drawn, .live-invitation.is-active .ie-grid-line.is-drawn, .live-invitation.is-active .ie-open-rule.is-drawn { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--invite-glow) 55%, transparent)); transition: filter .9s ease; }
}
@media (prefers-reduced-motion: reduce) { .live-invitation, .live-invitation * { animation: none !important; transition-duration: .01ms !important; } }

/* ---- composition validator: a text block that still overflows the safe
   area after the safe-area fix (an unusually long name, say) steps down in
   size; a decoration that still ends up overlapping real text after the
   proportional-safe-margin fix gets hidden for this render rather than
   left to visually collide. Both are runtime safety nets, not the primary
   fix - see InvitationRecipes.validateAndReconcile(). ---- */
.ie-main.ie-shrink-1 { font-size: .82em; }
.ie-main.ie-shrink-2 { font-size: .68em; }
.ie-collision-hidden { opacity: 0 !important; }
/* tightens vertical rhythm when the whole stack of text (a long name plus
   a long guest message, say) is taller than the safe area - applied to
   the layout wrapper, so it works the same way across every layout. */
.ie-compact-1.ie-layout .ie-headline { margin-top: 10px; }
.ie-compact-1.ie-layout .ie-main { font-size: .82em; line-height: .98; }
.ie-compact-1.ie-layout .ie-date,
.ie-compact-1.ie-layout .ie-time,
.ie-compact-1.ie-layout .ie-space { margin-top: 3px; }
.ie-compact-1.ie-layout .ie-message { margin-top: 12px; font-size: .88em; }
.ie-compact-1.ie-layout .ie-footer { margin-top: 14px; }
.ie-compact-1.ie-layout .ie-thread { margin: 12px 0; }
.ie-compact-2.ie-layout .ie-headline { margin-top: 6px; }
.ie-compact-2.ie-layout .ie-main { font-size: .68em; line-height: .96; }
.ie-compact-2.ie-layout .ie-opener { opacity: .6; }
.ie-compact-2.ie-layout .ie-date,
.ie-compact-2.ie-layout .ie-time,
.ie-compact-2.ie-layout .ie-space { margin-top: 1px; }
.ie-compact-2.ie-layout .ie-message { margin-top: 8px; font-size: .78em; }
.ie-compact-2.ie-layout .ie-footer { margin-top: 8px; }
.ie-compact-2.ie-layout .ie-thread { margin: 8px 0; }
.invite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }.invite-actions .btn { padding: 13px 10px; font-size: 12px; }.invite-actions--single { grid-template-columns: 1fr; }.invite-actions--single .btn { padding: 15px 10px; font-size: 13px; }.invite-note { min-height: 18px; margin: 12px 0 0; color: var(--ink-4); font-size: 12px; line-height: 1.4; }
.invitation-creation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.invitation-creation-actions button { padding: 11px 8px; border: 1px solid var(--b-4); background: transparent; color: var(--ink-3); font: 500 12px var(--sans); letter-spacing: .01em; cursor: pointer; transition: .18s ease; }
.invitation-creation-actions button:hover { border-color: var(--copper); color: var(--ink-mint); }
.invitation-creation-actions button[data-invite-save], .invitation-creation-actions button[data-invite-regenerate] { display: none; }
.live-invitation[data-creative-state="finished"] + .invitation-creation-actions button[data-invite-save], .live-invitation[data-creative-state="finished"] + .invitation-creation-actions button[data-invite-regenerate] { display: block; }
.invitation-creation-actions select[data-invite-saved] { grid-column: 1 / -1; min-height: 42px; padding: 9px 10px; border: 1px solid var(--b-4); background: var(--g-900); color: var(--ink-1); font: 400 13px var(--sans); }
.invitation-creation-actions span[data-invite-save-status] { grid-column: 1 / -1; min-height: 16px; color: var(--ink-mint); font-size: 12px; line-height: 1.4; }
.event-plan-card { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule-brass); }
.event-plan-line { margin-bottom: 4px; }
.event-plan-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.event-plan-name { font: 400 16px var(--serif); color: var(--ink-1); }
.event-plan-amount { font: 500 15px var(--mono); color: var(--ink-copper); white-space: nowrap; }
.event-plan-detail { margin-top: 3px; color: var(--ink-4); font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.event-plan-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--b-3); }
.event-plan-group-label { margin-bottom: 8px; color: var(--ink-4); font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.event-plan-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; }
.event-plan-item + .event-plan-item { border-top: 1px dotted var(--b-3); }
.event-plan-item-main { display: flex; flex-direction: column; gap: 2px; }
.event-plan-item-name { font: 400 13px var(--sans); color: var(--ink-2); }
.event-plan-item-detail { font: 400 10px var(--mono); color: var(--ink-4); text-transform: uppercase; letter-spacing: .03em; }
.event-plan-item-amount { font: 500 13px var(--mono); color: var(--ink-mint); white-space: nowrap; }
.event-plan-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-brass); font: 400 18px var(--serif); color: var(--ink-1); }
.event-plan-total span:last-child { font: 500 22px var(--serif); color: var(--ink-copper); }
.event-plan-pricing-breakdown { display:grid; gap:7px; margin-top:18px; padding-top:14px; border-top:1px solid var(--b-4); font:400 12px/1.5 var(--sans); color:var(--ink-3); }
.event-plan-pricing-breakdown>div { display:flex; justify-content:space-between; gap:16px; }
.event-plan-pricing-breakdown small { margin-left:5px; color:var(--ink-4); font:400 10px/1 var(--mono); }
.event-plan-pricing-breakdown>div>span:last-child { color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* Included choices are part of the package, so they are highlighted without
   the checkmark used for paid additions. */
.course-options input[data-menu-price="0"]:checked + span { border-color:var(--brass); background:color-mix(in oklab,var(--brass) 12%,transparent); color:var(--ink-2); }
.course-options input[data-menu-price="0"]:checked + span::before { content:none; }
.event-plan-disclaimer { margin: 14px 0 0; color: var(--ink-4); font-size: 11px; line-height: 1.5; }
@keyframes eventPlanReveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.event-plan-item.is-entering { animation: eventPlanReveal .35s ease both; }
@media (prefers-reduced-motion: reduce) { .event-plan-item.is-entering { animation: none; } }
.mobile-event-plan { display: none; }
.event-field-error { margin: 8px 0 0; color: #ffd0af; font: 12px/1.5 var(--sans); }
.event-field-error[hidden] { display: none; }
.event-builder input[aria-invalid="true"] { border-color: #e9a675; outline: 1px solid #e9a675; outline-offset: 2px; }
.event-builder input[type="radio"][aria-invalid="true"] + span { border-color: #e9a675; }
.event-builder input[type="radio"]:focus-visible + span { outline: 2px solid var(--brass-lit); outline-offset: 3px; }
[data-send-event-plan]:disabled { opacity: .7; cursor: wait; }
.event-submit-band.event-final-contact[hidden] { display: none; }
.event-submit-band.event-final-contact { display: grid; grid-template-columns: 1fr 1fr; align-items: start; scroll-margin-top: 28px; }
.event-contact-form { display: grid; gap: 18px; min-width: 0; }
.event-contact-form label { display: grid; gap: 8px; color: var(--ink-3); font-size: 12px; }
.event-contact-form label > span { color: var(--ink-4); }
.event-contact-form input, .event-contact-form textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--b-4); background: var(--g-900); color: var(--ink-1); font: 14px var(--sans); border-radius: 0; }
.event-contact-form textarea { resize: vertical; }
.event-contact-form input:focus-visible, .event-contact-form textarea:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 2px; }
.event-contact-form .invite-note { margin: 0; }
@media (max-width: 900px) { .event-submit-band.event-final-contact { grid-template-columns: 1fr; padding-bottom: 100px; }.event-contact-form { width: 100%; } }
.event-submit-band { max-width: 1320px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 36px; margin: 32px auto 0; border: 1px solid oklch(.7 .13 78 / .5); background: linear-gradient(100deg, oklch(.31 .08 74 / .45), oklch(.2 .06 252 / .45)); }.event-submit-band h3 { margin-top: 8px; font-size: 35px; }.event-submit-band p { margin: 11px 0 0; max-width: 620px; color: var(--ink-3); }.event-contact { min-width: 350px; display: grid; grid-template-columns: 1fr auto; gap: 9px; }.event-contact span { grid-column: 1 / -1; min-height: 17px; color: var(--ink-mint); font-size: 12px; }
.event-trust { padding: 90px max(var(--edge), calc((100% - 1320px) / 2)); background: var(--paper-2); }.event-trust .eyebrow { color: var(--brass); }.event-trust h2 { margin-top: 10px; font-size: 48px; color: var(--type-on-light); }.event-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 34px; }.event-trust-grid p { margin: 0; padding-top: 15px; border-top: 1px solid var(--rule-light); color: var(--type-on-light-soft); line-height: 1.6; }.event-trust-grid strong { display: block; margin-bottom: 6px; color: var(--type-on-light); }
@media (max-width: 900px) { .events-hero { min-height: 455px; }.events-hero-copy { padding: 58px 20px; }.events-intro { padding: 74px 20px; }.event-builder { padding: 55px 20px 64px; }.event-trust { padding: 65px 20px; }.event-contact { min-width: 0; width: 100%; }.package-pick > span { min-height: 0; } }
@media (max-width: 640px) { .event-trust-grid { grid-template-columns: 1fr; gap: 20px; } }
@media (min-width: 641px) and (max-width: 900px) { .event-trust-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (max-width: 700px) {
  .builder-heading, .event-submit-band { flex-direction: column; align-items: flex-start; }
  .builder-layout { grid-template-columns: 1fr; }
  .invitation-panel { position: relative; top: auto; max-height: none; overflow: visible; }
  .invitation-panel > .event-plan-card { display: block; }
  .package-picks { grid-template-columns: 1fr; }
}
@media (min-width: 561px) and (max-width: 700px) { .package-picks { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (min-width: 701px) and (max-width: 1023px) {
  .package-picks { gap: 8px; }
  .package-pick strong { font-size: 18px; }
  .package-pick small { font-size: 11px; }
}
@media (max-width: 700px) {
  body.has-mobile-event-plan { padding-bottom: 76px; }
  .mobile-event-plan.is-visible { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: block; border-top: 1px solid var(--rule-brass); background: color-mix(in oklab, var(--g-950) 97%, transparent); box-shadow: 0 -14px 38px rgb(0 0 0 / .28); }
  .mobile-event-plan-toggle { width: 100%; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 20px; border: 0; background: transparent; color: var(--ink-1); text-align: left; cursor: pointer; }
  .mobile-event-plan-toggle > span:first-child { display: grid; gap: 4px; }
  .mobile-event-plan-toggle small { color: var(--ink-copper); font: 600 10px var(--mono); letter-spacing: .11em; text-transform: uppercase; }
  .mobile-event-plan-toggle strong { font: 400 14px var(--sans); }
  .mobile-event-plan-toggle > span:last-child { color: var(--ink-mint); font: 600 11px var(--mono); white-space: nowrap; }
  .mobile-event-plan-details { max-height: calc(100dvh - 148px); overflow-y: auto; padding: 0 20px 22px; border-top: 1px solid var(--b-3); }
  .mobile-event-plan-details .event-plan-card { margin-top: 0; padding-top: 18px; border-top: 0; }
}
@media (max-width: 560px) { .choice-grid, .course-grid { grid-template-columns: 1fr; }.form-pair, .upgrade-list, .invite-actions, .event-contact { grid-template-columns: 1fr; }.event-form { padding: 20px; }.event-submit-band { padding: 25px; }.event-contact .btn, .event-contact span { grid-column: auto; }.live-invitation { min-height: 430px; }.events-hero h1 { font-size: 45px; } }
@media (max-width: 360px) { .mobile-event-plan-toggle { padding-inline: 14px; gap: 10px; }.mobile-event-plan-toggle strong { font-size: 12px; }.mobile-event-plan-toggle > span:last-child { font-size: 10px; } }
@media (min-width: 701px) and (max-width: 1023px) {
  .builder-layout { grid-template-columns: 1fr; }
  .invitation-panel { position: relative; top: auto; max-height: none; overflow: visible; width: 100%; max-width: 680px; justify-self: center; }
}
@media (max-width: 560px) {
  .invitation-panel { padding: 12px; }
  .live-invitation { padding: 38px 22px; }
  .invitation-panel > .event-plan-card { padding: 18px 14px; }
  .ie-main { font-size: clamp(25px, 7vw, 38px); }
  .invitation-color-fields { gap: 6px; }
  .invitation-image-options { align-items:stretch; grid-template-columns:1fr; }
  .invitation-image-options > * { grid-column:1; }
}
@media (max-width: 480px) { .events-hero h1 { font-size: 22px; line-height: 1.15; } }

/* ---------- visit page ---------- */
.visit-section {
  padding: 64px var(--edge); display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: start; border-bottom: 1px solid var(--rule-brass); background: var(--paper);
}
@media (max-width: 640px) { .visit-section { grid-template-columns: 1fr; } }
.visit-info .eyebrow { color: var(--brass); }
.visit-info h2 { margin: 6px 0 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 44px); color: var(--type-on-light); }
.visit-block { padding: 18px 0; border-top: 1px solid var(--rule-light); }
.visit-block:first-of-type { border-top: none; padding-top: 0; }
.visit-block .label {
  font: 600 13px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 8px;
}
.visit-block p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--type-on-light-soft); }
.visit-block a { color: var(--navy); }
.visit-block .go { display: inline-block; margin-top: 10px; font: 600 13px/1 var(--sans); color: var(--navy); }
.visit-info .btn { margin-top: 26px; }
.visit-map {
  height: 440px; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule-light);
  box-shadow: 0 14px 28px rgba(11,11,12,.15);
}
.visit-map iframe { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { .visit-map { height: 320px; } }

/* ---------- mobile section rhythm — match private-events' padding scale ---------- */
@media (max-width: 900px) {
  .moment { padding-top: 56px; padding-bottom: 56px; }
  .doors { padding-top: 50px; padding-bottom: 50px; }
  .proof { padding-top: 46px; padding-bottom: 46px; }
  .tonight { padding-top: 44px; padding-bottom: 44px; }
  .capture { padding-top: 50px; padding-bottom: 50px; }
  .hungry-band { padding-top: 44px; padding-bottom: 44px; }
  .kids-band { padding-top: 40px; padding-bottom: 40px; }
  .menu-panel { padding-top: 40px; padding-bottom: 40px; }
  .sunset-table-section { padding-top: 46px; padding-bottom: 46px; }
  .gallery-section { padding-top: 46px; padding-bottom: 46px; }
  .facts-grid { padding-top: 46px; padding-bottom: 46px; }
  .closing-band { padding-top: 50px; padding-bottom: 50px; }
  .visit-section { padding-top: 50px; padding-bottom: 50px; }
  .page-hero-body { padding-top: 40px; padding-bottom: 46px; }
  .site-footer { padding-top: 38px; padding-bottom: 38px; }
  .reel-strip { padding-top: 44px; padding-bottom: 44px; }
  .teaser { padding-top: 40px; padding-bottom: 40px; }
}

/* Interior banners: shared height and text origin; excludes home and menus. */
.page-hero, .events-hero {
  min-height: max(560px, 61.6vh);
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.page-hero-body, .events-hero-copy {
  padding: 144px var(--edge) 40px;
  width: 100%;
}
.page-hero-body { align-items: flex-start; }
.page-hero-copy, .events-hero-copy { gap: 20px; }
.page-hero-copy { flex: 1; min-width: 0; }
.page-hero-copy .eyebrow, .events-hero-copy .eyebrow { line-height: 18px; }
.page-hero-copy h1, .events-hero-copy h1 {
  font-size: clamp(34px, 5vw, 72px);
  line-height: .96;
  letter-spacing: -.02em;
  min-height: 1.92em;
  max-width: 1000px;
}
.page-hero-copy p, .events-hero-copy p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 620px;
}
.page-hero .season-callout { flex-shrink: 0; align-self: flex-end; }
@media (max-width: 900px) {
  .page-hero, .events-hero { min-height: max(720px, 61.6vh); }
  .page-hero-body, .events-hero-copy { padding: 104px var(--edge) 40px; }
  .page-hero-body { flex-direction: column; }
  .page-hero .season-callout { align-self: flex-start; }
}
@media (max-width: 480px) {
  .page-hero-copy h1, .events-hero-copy h1 { font-size: 22px; line-height: 1.15; min-height: 2.3em; }
}

/* The Visit headline occupies one line, so it should not reserve a second line. */
.visit-hero .page-hero-copy h1 { min-height: 0; }

/* ---- printing the invitation: isolate the card at real invitation-card
   size, force the browser to keep the design's colors, and let the guest
   use "Save as PDF" in the print dialog for a print-ready file. ---- */
@page { size: 5in 7in; margin: 0; }
@media print {
  html, body { background: #fff; }
  body * { visibility: hidden; }
  .live-invitation, .live-invitation * { visibility: visible; }
  .live-invitation {
    position: fixed; inset: 0; margin: 0; width: 5in; height: 7in; aspect-ratio: auto;
    padding: .6in .5in; min-height: 0; box-shadow: none; border-radius: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact;
  }
  .live-invitation * { animation: none !important; transition: none !important; }
  .invitation-dormant-mark { display: none; }
}

/* ---- The note that appears once an event plan has been sent ----
   A real <dialog>, so focus, Escape and the backdrop come from the browser
   rather than from a hand-rolled overlay. Dressed in the house colours: navy
   ground, brass rule, the name in small caps above the message. */
.event-sent { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 2px; background: var(--navy); color: var(--type-on-dark); box-shadow: 0 30px 70px rgb(0 0 0 / .45); }
.event-sent::backdrop { background: rgb(10 30 51 / .62); backdrop-filter: blur(2px); }
.event-sent-inner { padding: 36px 34px 30px; text-align: center; border-top: 3px solid var(--brass); }
.event-sent-mark { margin: 0; font: 500 10px/1.6 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--brass-lit); }
.event-sent h2 { margin: 14px 0 0; font: 400 27px/1.2 var(--serif); color: var(--type-on-dark); }
.event-sent-inner p { margin: 14px 0 0; font: 400 14px/1.72 var(--sans); color: var(--type-on-dark-soft); }
.event-sent-sign { margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--rule-dark); font-size: 13px !important; }
.event-sent-sign span { color: var(--type-on-dark); }
.event-sent-close { margin-top: 26px; min-height: 44px; padding: 0 26px; border: 1px solid var(--brass); border-radius: 2px; background: var(--brass); color: var(--navy); font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.event-sent-close:hover { background: var(--brass-lit); border-color: var(--brass-lit); }
.event-sent-close:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .event-sent[open] { animation: eventSentIn .22s cubic-bezier(.2,.75,.2,1) both; }
  @keyframes eventSentIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
}