/* ============================================================
   Plover & Pine : Golden Hour Editorial
   Fictional demo site (industry showcase portfolio).
   Petrona display + Work Sans utility on warm ecru.
   Burnt saffron accent (hairlines + small fills, one CTA fill),
   olive support, dark closer band.
   ============================================================ */

:root {
  /* palette */
  --ecru: #f3ede2;          /* base canvas */
  --ecru-tint: #ece3d1;     /* whisper band */
  --card: #faf6ec;          /* sheet / card surface */
  --espresso: #2a231c;      /* ink */
  --ink-soft: #5f574a;      /* secondary ink */
  --saffron: #c07a3a;       /* accent: hairlines, small fills, the CTA fill */
  --saffron-deep: #a4632a;  /* accent hover */
  --saffron-text: #8f5420;  /* accent used AS text (contrast-safe) */
  --olive: #6d6f4e;         /* support */
  --olive-text: #575a3c;    /* support used as text */
  --closer: #241e17;        /* dark closer band */
  --bone: #f0e9db;          /* text on dark */
  --bone-muted: #c4b8a4;    /* muted text on dark */
  --hairline: #dcd1bc;      /* divider tone */
  --hairline-dark: rgba(240, 233, 219, 0.16);

  /* type */
  --font-display: "Petrona", Georgia, serif;
  --font-body: "Work Sans", -apple-system, Helvetica, Arial, sans-serif;
  --fs-masthead: clamp(3.4rem, 1.4rem + 7vw, 6.4rem);
  --fs-hero: clamp(2.6rem, 1.2rem + 5.2vw, 4.75rem);
  --fs-h1: clamp(2.2rem, 1.2rem + 3.6vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 1.1rem + 1.8vw, 2.25rem);
  --fs-h3: clamp(1.17rem, 1rem + 0.7vw, 1.4rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-kicker: 0.75rem;

  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* shape + depth */
  --radius: 2px;
  --shadow-1: 0 1px 2px rgba(42, 35, 28, 0.06), 0 4px 12px rgba(42, 35, 28, 0.06);
  --shadow-2: 0 2px 4px rgba(42, 35, 28, 0.08), 0 12px 28px rgba(42, 35, 28, 0.10);

  /* motion */
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 500ms;
}

/* ---------------- reset / base ---------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--espresso);
  background: var(--ecru);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { text-wrap: pretty; }
em { font-style: italic; }

:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--espresso); color: var(--bone);
  padding: var(--s3) var(--s5); text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------------- typography helpers ---------------- */
.kicker {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--saffron-text);
  margin-bottom: var(--s3);
}
.lead {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.measure { max-width: 62ch; }
.small { font-size: var(--fs-small); color: var(--ink-soft); }
.serif-italic { font-family: var(--font-display); font-style: italic; }
.accent-word { font-style: italic; color: var(--saffron-text); }
.num { font-variant-numeric: tabular-nums; }

.text-link {
  font-weight: 600;
  color: var(--saffron-text);
  text-decoration: none;
  border-bottom: 1px solid var(--saffron);
  padding-bottom: 2px;
  transition: color var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.text-link:hover { color: var(--espresso); border-color: var(--espresso); }
.text-link .arrow { display: inline-block; margin-left: 2px; }

/* ---------------- layout primitives ---------------- */
.wrap { max-width: 1220px; margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 880px; }
.section { padding: var(--s10) 0; }
.section--tight { padding: var(--s8) 0; }
.section--tint { background: var(--ecru-tint); }
.section-head { margin-bottom: var(--s8); }
.section-head .lead { margin-top: var(--s4); }
.section-head--center { text-align: center; }
.section-head--center .lead { margin-left: auto; margin-right: auto; }

.rule { border: 0; border-top: 1px solid var(--hairline); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  padding: 14px 28px;
  min-height: 48px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out,
              border-color var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.btn:active { transform: scale(0.97); }
.btn--reserve { background: var(--saffron); color: var(--espresso); border-color: var(--saffron); }
.btn--reserve:hover { background: var(--saffron-deep); border-color: var(--saffron-deep); color: var(--bone); }
.btn--ghost { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.btn--ghost:hover { background: var(--espresso); color: var(--bone); }
.btn--bone { background: var(--bone); color: var(--closer); border-color: var(--bone); }
.btn--bone:hover { background: transparent; color: var(--bone); }
.btn--ghost-light { background: transparent; color: var(--bone); border-color: var(--bone); }
.btn--ghost-light:hover { background: var(--bone); color: var(--closer); }

/* ---------------- utility bar + header ---------------- */
.utility {
  background: var(--closer);
  color: var(--bone-muted);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}
.utility .wrap {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s5); min-height: 36px; padding-top: 6px; padding-bottom: 6px;
}
.utility a { color: var(--bone); text-decoration: none; }
.utility a:hover { color: var(--saffron); }
.utility-tonight { color: var(--bone); }
.utility-tonight::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--saffron);
  margin-right: 8px; vertical-align: 2px;
}
.utility-right { display: flex; gap: var(--s5); align-items: center; }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--ecru);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); min-height: 78px;
}
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1.05; flex-shrink: 0; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.65rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--espresso);
}
.brand-sub {
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive-text); margin-top: 3px;
}

.nav { display: flex; gap: var(--s2); }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s3) var(--s4);
  font-size: 0.9rem; font-weight: 500;
  color: var(--espresso); text-decoration: none;
  border-radius: var(--radius);
}
.nav-link:hover { color: var(--saffron-text); }
.nav-link[aria-current="true"] { color: var(--saffron-text); }
.nav-link[aria-current="true"]::after {
  content: ""; position: absolute; left: var(--s4); right: var(--s4); bottom: 4px;
  border-bottom: 1px solid var(--saffron);
}
.caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-2);
  padding: var(--s3) 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out, visibility var(--t-fast);
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  display: block; padding: 9px var(--s5);
  font-size: 0.9rem; text-decoration: none; color: var(--espresso);
}
.dropdown a:hover { background: var(--ecru-tint); color: var(--saffron-text); }

.header-cta { flex-shrink: 0; }
.header-cta .btn { padding: 11px 22px; min-height: 44px; font-size: 0.85rem; }

.nav-toggle {
  display: none;
  background: none; border: 0; color: var(--espresso);
  padding: var(--s2); min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.mobile-panel {
  display: none;
  background: var(--card);
  border-bottom: 1px solid var(--hairline);
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-base) ease-out;
}
.mobile-panel.open { max-height: 640px; overflow-y: auto; }
.mobile-panel .wrap { display: flex; flex-direction: column; padding-top: var(--s4); padding-bottom: var(--s6); }
.mobile-panel a {
  padding: var(--s3) 0;
  text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}
.mobile-panel a.sub { padding-left: var(--s5); font-weight: 400; font-size: 0.92rem; color: var(--ink-soft); }
.mobile-panel a.btn { border-bottom: 0; margin-top: var(--s5); justify-content: center; }

/* ---------------- home hero: full-bleed golden hour ---------------- */
.hero {
  position: relative;
  min-height: min(94vh, 880px);
  display: flex; align-items: flex-end;
  background: var(--closer);
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 19, 11, 0.82) 0%, rgba(26, 19, 11, 0.42) 38%, rgba(26, 19, 11, 0.06) 72%);
}
.hero .wrap { position: relative; width: 100%; padding-bottom: var(--s9); padding-top: var(--s10); }
.hero-kicker {
  font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bone);
}
.hero-masthead {
  font-size: var(--fs-masthead);
  font-weight: 500;
  color: var(--bone);
  line-height: 1.02;
  margin-top: var(--s3);
  max-width: 12ch;
}
.hero-masthead .amp { font-style: italic; color: var(--saffron); }
.hero-promise {
  margin-top: var(--s4);
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.55rem);
  color: var(--bone);
  max-width: 44ch;
}
.hero-cta-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s5); margin-top: var(--s6);
}
.hero-meta {
  color: var(--bone);
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--s3);
}
.hero-meta::before {
  content: ""; display: inline-block; width: 34px;
  border-top: 1px solid var(--saffron);
}

/* ---------------- interior page hero ---------------- */
.page-hero {
  padding: var(--s9) 0 var(--s8);
  border-bottom: 1px solid var(--hairline);
}
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { margin-top: var(--s4); }
.breadcrumb {
  font-size: var(--fs-small); color: var(--ink-soft);
  margin-bottom: var(--s6);
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--saffron-text); }
.breadcrumb .sep { margin: 0 var(--s2); color: var(--hairline); }

/* ---------------- full-bleed image bands ---------------- */
.image-band { position: relative; }
.image-band img {
  width: 100%;
  height: clamp(340px, 58vh, 600px);
  object-fit: cover;
}
.image-band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s8) 0 var(--s5);
  background: linear-gradient(to top, rgba(26, 19, 11, 0.72), rgba(26, 19, 11, 0));
  color: var(--bone);
  font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------------- the typeset menu sheet ---------------- */
.daypart {
  position: sticky; top: 78px; z-index: 60;
  background: var(--ecru);
  border-bottom: 1px solid var(--hairline);
}
.daypart .wrap {
  display: flex; gap: var(--s2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.daypart a {
  padding: var(--s4) var(--s4);
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--t-fast) ease-out;
}
.daypart a:hover { color: var(--espresso); }
.daypart a[aria-current="true"] { color: var(--saffron-text); border-bottom-color: var(--saffron); }

.menu-sheet {
  max-width: 760px; margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: clamp(32px, 3rem + 3vw, 88px) clamp(24px, 2rem + 3vw, 80px);
  box-shadow: var(--shadow-1);
}
.menu-masthead { text-align: center; padding-bottom: var(--s6); }
.menu-masthead .menu-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 500;
}
.menu-masthead .menu-note {
  margin-top: var(--s3);
  font-family: var(--font-display); font-style: italic;
  color: var(--ink-soft); font-size: 1.05rem;
}
.menu-course { margin-top: var(--s8); }
.menu-course:first-of-type { margin-top: var(--s6); }
.course-title {
  display: flex; align-items: center; gap: var(--s4);
  font-family: var(--font-body);
  font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive-text);
  margin-bottom: var(--s6);
}
.course-title::before, .course-title::after {
  content: ""; flex: 1;
  border-top: 1px solid var(--hairline);
}
.menu-item { margin-bottom: var(--s5); }
.menu-item:last-child { margin-bottom: 0; }
.menu-line { display: flex; align-items: baseline; gap: var(--s3); }
.menu-line .name {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 500;
}
.menu-line .leader {
  flex: 1; min-width: 32px;
  border-bottom: 1px dotted #b5a687;
  transform: translateY(-5px);
}
.menu-line .price {
  font-family: var(--font-display);
  font-size: 1.1rem; font-variant-numeric: tabular-nums;
}
.menu-item .desc {
  margin-top: 4px;
  font-size: 0.92rem; color: var(--ink-soft);
  max-width: 54ch;
}
.menu-foot {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 0.85rem; color: var(--ink-soft);
  font-style: italic; font-family: var(--font-display);
}
.wine-bin { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.wine-bin .origin { font-size: 0.85rem; color: var(--ink-soft); }

/* menu excerpt on home */
.menu-excerpt-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s9); align-items: start; }
.menu-excerpt-grid .menu-sheet { margin: 0; }

/* ---------------- cards ---------------- */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s6);
}
.hover-lift { transition: transform var(--t-base) ease-out, box-shadow var(--t-base) ease-out; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.icon-chip { color: var(--saffron-text); margin-bottom: var(--s4); }
.card h3 { margin-bottom: var(--s3); }
.card p { color: var(--ink-soft); font-size: 0.95rem; }
.card .text-link { display: inline-block; margin-top: var(--s4); }

/* ---------------- private room spec cards ---------------- */
.room-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.room-card .room-media { position: relative; }
.room-card .room-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.room-card .room-body { padding: var(--s6); display: flex; flex-direction: column; flex: 1; }
.room-card h3 { font-size: var(--fs-h2); }
.room-card .room-lede { color: var(--ink-soft); margin-top: var(--s3); }
.spec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: var(--s5) 0;
}
.spec-cell { padding: var(--s4) var(--s3); text-align: center; }
.spec-cell + .spec-cell { border-left: 1px solid var(--hairline); }
.spec-label {
  display: block;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--olive-text);
}
.spec-value {
  display: block; margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.35rem; font-variant-numeric: tabular-nums;
}
.spec-note { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; }

/* ---------------- gallery ---------------- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--s5);
}
.gallery-item { position: relative; margin-bottom: var(--s4); }
.gallery-item img {
  width: 100%; height: 470px;
  object-fit: cover;
  outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px;
}
.gallery-item figcaption {
  margin-top: var(--s3);
  font-size: var(--fs-small); color: var(--ink-soft);
}
.gallery-item figcaption .time {
  font-weight: 600; color: var(--saffron-text);
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem;
  display: block; margin-bottom: 2px;
}
.g-7 { grid-column: span 7; }
.g-5 { grid-column: span 5; }
.g-4 { grid-column: span 4; }
.g-6 { grid-column: span 6; }

/* ---------------- pull quote / press ---------------- */
.pull-quote {
  text-align: center;
  max-width: 800px; margin: 0 auto;
}
.pull-quote blockquote p {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem);
  line-height: 1.3;
  text-wrap: balance;
}
.pull-quote blockquote p::before { content: "\201C"; }
.pull-quote blockquote p::after { content: "\201D"; }
.pull-quote cite {
  display: block; margin-top: var(--s5);
  font-style: normal;
  font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive-text);
}
.press-item { padding: var(--s7) 0; border-bottom: 1px solid var(--hairline); }
.press-item:last-child { border-bottom: 0; }
.press-item blockquote p {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  line-height: 1.35; max-width: 30em;
}
.press-item cite {
  display: block; margin-top: var(--s4); font-style: normal;
  font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive-text);
}

/* ---------------- events ---------------- */
.event-row {
  display: grid; grid-template-columns: 150px 1fr auto;
  gap: var(--s6); align-items: center;
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--hairline);
}
.event-date {
  font-family: var(--font-display); text-align: center;
  border: 1px solid var(--saffron);
  padding: var(--s4) var(--s3);
}
.event-date .month {
  display: block; font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--saffron-text);
}
.event-date .day { display: block; font-size: 2.1rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.event-body h3 { margin-bottom: var(--s2); }
.event-body p { color: var(--ink-soft); font-size: 0.95rem; max-width: 60ch; }
.event-meta { margin-top: var(--s2); font-size: var(--fs-small); color: var(--olive-text); font-weight: 500; }

/* ---------------- journal ---------------- */
.journal-row {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: var(--s7); align-items: center;
  padding: var(--s7) 0; border-bottom: 1px solid var(--hairline);
}
.journal-row img { aspect-ratio: 16 / 11; object-fit: cover; width: 100%; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; }
.journal-row .date {
  font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive-text);
}
.journal-row h3 { font-size: var(--fs-h2); margin: var(--s3) 0; }
.journal-row h3 a { text-decoration: none; }
.journal-row h3 a:hover { color: var(--saffron-text); }
.prose { max-width: 68ch; }
.prose p { margin-bottom: var(--s5); }
.prose h2 { margin: var(--s7) 0 var(--s4); font-size: var(--fs-h3); }
.prose .opener::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em; float: left;
  line-height: 0.85; padding-right: 10px; padding-top: 4px;
  color: var(--saffron-text);
}

/* ---------------- FAQ ---------------- */
.faq-list { max-width: 800px; }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
  padding: var(--s5) 0;
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 500;
  cursor: pointer; list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .fold {
  flex-shrink: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--saffron-text);
  transition: transform var(--t-base) ease-out;
}
.faq-list details[open] summary .fold { transform: rotate(45deg); }
.faq-list .faq-body { padding: 0 0 var(--s5); color: var(--ink-soft); max-width: 62ch; }

/* ---------------- forms ---------------- */
.form-panel {
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: clamp(28px, 2rem + 2vw, 56px);
  position: relative;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full, .form-grid .full { grid-column: 1 / -1; }
.field label {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--olive-text);
}
.field input, .field select, .field textarea {
  font: inherit; color: var(--espresso);
  background: var(--ecru);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px 14px; min-height: 48px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--saffron); outline-offset: 1px; border-color: var(--saffron);
}
.form-consent { margin-top: var(--s3); font-size: 0.8rem; color: var(--ink-soft); }
.form-success { display: none; text-align: center; padding: var(--s6) 0; }
.form-success .success-icon {
  width: 56px; height: 56px; margin: 0 auto var(--s4);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--saffron); border-radius: 50%;
  color: var(--saffron-text);
}
.form-panel.submitted form { display: none; }
.form-panel.submitted .form-success { display: block; }
.powered-by {
  margin-top: var(--s4); text-align: center;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------- "tonight at the pass" strip ---------------- */
.pass-strip {
  background: var(--closer);
  color: var(--bone);
  border-top: 1px solid var(--saffron);
}
.pass-strip .wrap {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: var(--s7); align-items: center;
  padding-top: var(--s7); padding-bottom: var(--s7);
}
.pass-strip .kicker { color: var(--saffron); margin-bottom: var(--s2); }
.pass-note {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  color: var(--bone);
  max-width: 44ch;
}
.pass-hours { text-align: right; }
.pass-hours .hours-line { display: block; font-size: 0.9rem; color: var(--bone-muted); }
.pass-hours .hours-line strong { color: var(--bone); font-weight: 600; }

/* ---------------- dark sections (cascade-trap safe) ---------------- */
.section--dark { background: var(--closer); color: var(--bone); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--bone); }
.section--dark p { color: var(--bone-muted); }
.section--dark .kicker { color: var(--saffron); }
.section--dark .rule { border-color: var(--hairline-dark); }
/* override: light cards inside dark bands keep dark ink */
.section--dark .card h3, .section--dark .form-panel h3 { color: var(--espresso); }
.section--dark .card p, .section--dark .form-panel p { color: var(--ink-soft); }
.section--dark .text-link { color: var(--saffron); border-color: var(--saffron); }
.section--dark .text-link:hover { color: var(--bone); border-color: var(--bone); }

/* ---------------- olive band (story moments) ---------------- */
.section--olive { background: var(--olive); color: var(--bone); }
.section--olive h2, .section--olive h3 { color: var(--bone); }
.section--olive p { color: rgba(240, 233, 219, 0.85); }
.section--olive .kicker { color: var(--ecru); }

/* ---------------- hours table ---------------- */
.hours-table { width: 100%; border-collapse: collapse; max-width: 460px; }
.hours-table th, .hours-table td {
  text-align: left; padding: var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.95rem;
}
.hours-table th { font-weight: 600; }
.hours-table td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hours-table tr.today th, .hours-table tr.today td { color: var(--saffron-text); font-weight: 600; }

/* contact info list */
.info-list li {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) 0;
  color: var(--ink-soft);
}
.info-list li svg { flex-shrink: 0; color: var(--saffron-text); margin-top: 2px; width: 20px; height: 20px; }
.info-list a { color: var(--espresso); }

/* ---------------- footer ---------------- */
.site-footer {
  background: var(--closer);
  color: var(--bone-muted);
  padding: var(--s9) 0 var(--s7);
  font-size: 0.92rem;
}
.footer-grid {
  display: grid; grid-template-columns: 4fr 2fr 2fr 3fr;
  gap: var(--s7);
  padding-bottom: var(--s7);
  border-bottom: 1px solid var(--hairline-dark);
}
.site-footer .brand-name { color: var(--bone); }
.site-footer .brand-sub { color: var(--saffron); }
.footer-blurb { margin-top: var(--s4); max-width: 40ch; }
.site-footer h4 {
  font-family: var(--font-body);
  font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone); margin-bottom: var(--s4);
}
.site-footer ul li { margin-bottom: var(--s2); }
.site-footer a { color: var(--bone-muted); text-decoration: none; }
.site-footer a:hover { color: var(--saffron); }
.footer-contact li { display: flex; gap: var(--s3); margin-bottom: var(--s3); align-items: flex-start; }
.footer-contact svg { flex-shrink: 0; color: var(--saffron); width: 18px; height: 18px; margin-top: 3px; }
.footer-legal { padding-top: var(--s6); font-size: 0.8rem; line-height: 1.6; color: #9a8f7d; }
.footer-legal p { margin-bottom: var(--s3); max-width: 110ch; }

/* ---------------- sticky mobile reserve bar ---------------- */
.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--closer);
  border-top: 1px solid var(--saffron);
}
.mobile-bar a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 56px;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.mobile-bar .bar-call { color: var(--bone); }
.mobile-bar .bar-reserve { background: var(--saffron); color: var(--espresso); }

/* ---------------- reveals ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) ease-out, transform var(--t-slow) ease-out;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------------- responsive ---------------- */
@media (max-width: 1020px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-panel { display: block; }
}

@media (max-width: 860px) {
  .section { padding: var(--s8) 0; }
  .section--tight { padding: var(--s7) 0; }
  .wrap { padding: 0 22px; }

  .utility .wrap { justify-content: center; }
  .utility-note { display: none; }
  .site-header .wrap { min-height: 64px; }
  .daypart { top: 64px; }

  .hero { min-height: min(82vh, 640px); }
  .hero .wrap { padding-bottom: var(--s8); }

  .grid-2, .menu-excerpt-grid, .journal-row { grid-template-columns: 1fr; gap: var(--s6); }
  .card-row, .grid-3 { grid-template-columns: 1fr; gap: var(--s4); }

  .gallery-grid { grid-template-columns: 1fr; }
  .g-7, .g-5, .g-4, .g-6 { grid-column: auto; }
  .gallery-item img { height: auto; aspect-ratio: 16 / 11; }

  .event-row { grid-template-columns: 92px 1fr; }
  .event-row .event-cta { grid-column: 2; }
  .event-date .day { font-size: 1.6rem; }

  .form-grid { grid-template-columns: 1fr; }

  .pass-strip .wrap { grid-template-columns: 1fr; gap: var(--s5); text-align: left; }
  .pass-hours { text-align: left; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .mobile-bar { display: flex; }
  body { padding-bottom: 56px; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .spec-cell + .spec-cell { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* ---------------- reduced motion (mandatory) ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hover-lift, .btn, .dropdown, .mobile-panel, .faq-list summary .fold {
    transition: none;
  }
  .hover-lift:hover { transform: none; }
  .btn:active { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}