:root {
  --navy: #1f2a44;
  --green: #2f5d3a;
  --gold: #e3a21a;
  --gold-deep: #8a5a0a;
  --plum: #7a2e5c;
  --cream: #fbf7ef;
  --white: #ffffff;
  --border: #e4dcce;
  --error: #b3261e;
  --success: #2f5d3a;
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--navy);
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 15% 10%, rgb(255 255 255 / 0.9), transparent 55%),
    radial-gradient(ellipse at 85% 60%, rgb(228 220 203 / 0.35), transparent 60%);
  background-attachment: fixed;
}
img { max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; color: var(--plum); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-3); max-width: 42rem; }
a { color: var(--green); text-underline-offset: 0.2em; }
a:hover { color: var(--plum); }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--navy);
  color: var(--cream);
}
.skip-link:focus { top: var(--space-2); }

.wrap { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 var(--space-3); }

/* Header and nav */
.site-header { background: var(--white); border-bottom: 3px solid var(--gold); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.brand { display: inline-flex; align-items: center; padding: var(--space-1) 0; }
.brand img { display: block; height: 72px; width: auto; }
@media (min-width: 768px) { .brand img { height: 96px; } }

.nav-toggle {
  min-height: 44px;
  padding: 0 var(--space-3);
  font: inherit;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 0.5rem;
  cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
.site-nav { width: 100%; }
.js .site-nav[data-collapsed="true"] { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.site-nav a:hover { color: var(--plum); }
.site-nav a[aria-current="page"] { color: var(--green); box-shadow: inset 4px 0 0 var(--gold); }

/* Main */
main { flex: 1; padding: var(--space-5) 0 var(--space-6); }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-4);
  font: inherit;
  font-weight: 600;
  color: var(--navy);
  background: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.button:hover { color: var(--navy); background: var(--white); border-color: var(--navy); }

/* Forms */
label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
input, select, textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 0.5rem;
}
input[type="checkbox"], input[type="radio"] { display: inline-block; width: 1.5rem; min-height: 1.5rem; height: 1.5rem; }
.field { margin-bottom: var(--space-4); }
.error { color: var(--error); font-weight: 600; }
.success { color: var(--success); font-weight: 600; }

/* Waiver page */
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.meta { color: var(--plum); font-weight: 600; }
.hint { font-size: 0.9375rem; margin: var(--space-1) 0 0; }
.label { display: block; font-weight: 600; margin: 0 0 var(--space-1); }
.button-secondary { background: var(--white); border-color: var(--navy); }
.button-secondary:hover { background: var(--cream); }
.waiver-text {
  max-height: 24rem;
  overflow: auto;
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 0.5rem;
}
.waiver-text h2 { font-size: 1.25rem; margin: var(--space-4) 0 var(--space-2); }
.waiver-text h2:first-child { margin-top: 0; }
.waiver-text p, .waiver-text ul { max-width: none; }
.waiver-text ul { margin: 0 0 var(--space-3); padding-left: var(--space-4); }
.waiver-form { margin-top: var(--space-5); max-width: 42rem; }
fieldset { margin: 0 0 var(--space-4); padding: var(--space-3); background: var(--white); border: 2px solid var(--border); border-radius: 0.5rem; min-width: 0; }
legend { padding: 0 var(--space-2); font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; color: var(--plum); }
fieldset .field:last-child { margin-bottom: 0; }
textarea { resize: vertical; }
input[readonly] { background: var(--cream); }
input.initials { max-width: 7rem; text-transform: uppercase; }
input[aria-invalid="true"] { border-color: var(--error); }
.check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.check input { flex: none; margin-top: 0.4rem; }
.check label { flex: 1 1 0; min-width: 0; margin: 0; font-weight: 400; padding: var(--space-2) 0; min-height: 44px; }
.check .field-error { flex-basis: 100%; margin: 0; }
.field-error { margin: var(--space-1) 0 0; font-size: 1rem; }
.error-summary { margin-bottom: var(--space-4); padding: var(--space-3); background: var(--white); border: 3px solid var(--error); border-radius: 0.5rem; }
.error-summary h2 { color: var(--error); font-size: 1.25rem; }
.error-summary ul { margin: 0; padding-left: var(--space-4); }
.error-summary a { color: var(--error); font-weight: 600; }
.send-error { margin-bottom: var(--space-3); padding: var(--space-3); background: var(--white); border: 3px solid var(--error); border-radius: 0.5rem; font-weight: 600; }
.send-error a { color: var(--error); }
.sig-canvas { display: block; width: 100%; max-width: 600px; height: 180px; background: var(--white); border: 2px solid var(--navy); border-radius: 0.5rem; touch-action: none; cursor: crosshair; margin-bottom: var(--space-2); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.success-panel { margin-top: var(--space-5); padding: var(--space-4); background: var(--white); border: 3px solid var(--green); border-radius: 0.5rem; max-width: 42rem; }
.success-panel h2 { color: var(--green); }
.privacy { margin-top: var(--space-5); max-width: 42rem; }
#submit-btn { width: 100%; font-size: 1.125rem; }
#submit-btn[disabled] { opacity: 0.7; cursor: wait; }
@media (min-width: 48em) {
  #submit-btn { width: auto; min-width: 16rem; }
}

/* Footer */
.site-footer { background: var(--green); color: var(--cream); padding: var(--space-5) 0; font-size: 0.9375rem; }
.site-footer p { margin: 0 0 var(--space-2); }
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--white); }
.site-footer :focus-visible { outline-color: var(--cream); }
.footer-name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; }

@media (min-width: 48em) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 1.875rem; }
  .nav-toggle { display: none; }
  .js .site-nav[data-collapsed="true"] { display: block; }
  .site-nav { width: auto; }
  .site-nav ul { flex-direction: row; gap: var(--space-1); }
  .site-nav a { border-bottom: 0; padding: 0 var(--space-2); }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--gold); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .site-footer, .skip-link, .no-print, .waiver-form, #live, .success-panel, button { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; display: block; }
  main { padding: 0; }
  .waiver-text { max-height: none; overflow: visible; border: 0; padding: 0; }
  .waiver-text h2 { break-after: avoid; color: #000; }
  a { color: #000; }
}

/* Home page */
.section { margin-top: var(--space-5); }
.hero-grid { display: grid; gap: var(--space-4); align-items: center; }
.lead { font-size: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.photo-slot { margin: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: 1rem; overflow: hidden; border: 1px solid var(--border); }
.photo-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-fill {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 25% 30%, rgb(227 162 26 / 0.55), transparent 45%),
    radial-gradient(circle at 80% 75%, rgb(122 46 92 / 0.25), transparent 50%),
    radial-gradient(circle at 70% 20%, rgb(47 93 58 / 0.2), transparent 40%),
    linear-gradient(135deg, var(--white), var(--cream) 60%, var(--border));
}
.month-card { padding: var(--space-4); background: var(--white); border: 2px solid var(--gold); border-radius: 1rem; max-width: 42rem; }
.month-card h2 { margin-bottom: var(--space-2); }
.dates, .badges, .why, .before-book ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.dates li { font-weight: 600; }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badges li { padding: var(--space-1) var(--space-3); font-size: 0.9375rem; font-weight: 600; color: var(--navy); background: var(--cream); border: 1px solid var(--navy); border-radius: 999px; }
.why { display: grid; gap: var(--space-3); }
.why li { padding: var(--space-3); background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--green); border-radius: 0.5rem; }
.why h3, .why p { margin-bottom: var(--space-1); }
.before-book { padding: var(--space-4); background: var(--white); border-left: 6px solid var(--gold); border-radius: 0.5rem; }
.before-book li { margin-bottom: var(--space-2); }
@media (min-width: 48em) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .why { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .why { grid-template-columns: repeat(4, 1fr); }
}

/* Content pages: classes, about, FAQ, contact */
.proposed { display: inline-block; padding: 0 var(--space-2); font-size: 0.875rem; font-weight: 600; color: var(--navy); background: #fdf0cf; border: 1px solid var(--gold-deep); border-radius: 999px; line-height: 1.5; }
.placeholder { display: inline; padding: 0 var(--space-1); color: var(--navy); background: #fdf0cf; border: 1px dashed var(--gold-deep); border-radius: 0.25rem; font-weight: 600; }
p.placeholder { display: block; max-width: 42rem; padding: var(--space-2) var(--space-3); }
.glance { margin: 0; max-width: 42rem; background: var(--white); border: 1px solid var(--border); border-radius: 0.5rem; }
.glance > div { padding: var(--space-3); border-bottom: 1px solid var(--border); }
.glance > div:last-child { border-bottom: 0; }
.glance dt { color: var(--plum); font-weight: 600; }
.glance dd { margin: 0; }
.plain-list { margin: 0 0 var(--space-3); padding-left: var(--space-4); max-width: 42rem; }
.plain-list li { margin-bottom: var(--space-2); }
.jump ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); background: var(--white); border: 1px solid var(--navy); border-radius: 999px; color: var(--navy); font-weight: 600; text-decoration: none; }
.jump a:hover { background: var(--cream); color: var(--plum); }
.faq-section { scroll-margin-top: var(--space-3); }
.faq-item { margin-bottom: var(--space-4); padding-left: var(--space-3); border-left: 4px solid var(--gold); }
.faq-item h3 { margin-bottom: var(--space-1); }
.faq-item p { margin-bottom: var(--space-2); }
.contact-card { max-width: 42rem; margin-bottom: var(--space-4); padding: var(--space-4); background: var(--white); border-left: 6px solid var(--gold); border-radius: 0.5rem; }
.contact-card h2 { margin-bottom: var(--space-2); }
.contact-card p { overflow-wrap: anywhere; }
@media (min-width: 48em) {
  .glance > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-3); }
}

.bio { margin: 0; max-width: 42rem; }
.bio blockquote { margin: 0; padding-left: var(--space-3, 1rem); border-left: 4px solid var(--gold); }
.bio figcaption { margin-top: var(--space-2, 0.5rem); font-weight: 600; color: var(--plum); }