/* ==========================================================================
   Baglory — visual system
   Bone canvas, paper surfaces, cocoa + ink slabs, hairline rules, 5px radii.
   No gradients, no shadows. Community blue is reserved for status only.
   ========================================================================== */

:root {
  --bone: #f2f1ed;
  --paper: #ffffff;
  --ink: #11100e;
  --cocoa: #3b3429;
  --stone: #646464;
  --ash: #b4aeac;
  --rule: #d9d6cf;
  --rule-dark: #3d3a34;
  --blue: #89b4ca; /* status only: open dot, points progress, available badge, member indicator */
  --pink: #efd3cb; /* seasonal coupon decoration only */
  --error: #9a2a1c;

  --radius: 5px;
  --container: 1320px;
  --gutter: 20px;
  --section: 96px;
  --header-h: 0px;

  --font-display: "Cormorant Garamond", "Goudy Old Style", Garamond, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 76px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; --section: 120px; }
}

/* ---------- Reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.on-dark :focus-visible { outline-color: var(--bone); }

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout primitives ---------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }

main > section,
#member { scroll-margin-top: var(--header-h); }

/* ---------- Type ---------- */

.eyebrow,
.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.display,
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(3rem, 1.9rem + 4.4vw, 5.75rem); line-height: 0.98; }
h2 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); }

h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 1.1; }

.lede,
.section-lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink); max-width: 34em; }

.muted { color: var(--stone); }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px 2px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.15em;
}
.badge--available { background: var(--blue); border-color: var(--blue); }
.badge--muted { border-color: var(--ash); color: var(--stone); background: transparent; }
.badge--inverse { background: transparent; border-color: var(--bone); color: var(--bone); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn--primary { background: var(--ink); color: var(--bone); }
.btn--primary:hover { background: var(--cocoa); border-color: var(--cocoa); }
.btn--secondary { background: transparent; color: var(--ink); }
.btn--secondary:hover { background: var(--paper); }
.btn--block { width: 100%; }
.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

.link-btn {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   1. Utility strip
   ========================================================================== */

.utility {
  background: var(--ink);
  color: var(--bone);
}
.utility-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  min-height: 40px;
  padding-block: 8px;
}
.utility .mono { font-size: 0.75rem; }
.utility-hours--short { display: inline; }
.utility-hours--long { display: none; }
@media (min-width: 768px) {
  .utility-hours--short { display: none; }
  .utility-hours--long { display: inline; }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  border: 1px solid var(--ash);
  background: transparent;
}
.status[data-open="true"] .status-dot { background: var(--blue); border-color: var(--blue); }

/* ==========================================================================
   2. Header
   ========================================================================== */

.site-header {
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
  z-index: 20;
}
@media (min-width: 768px) {
  .site-header { position: sticky; top: 0; }
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand action" "nav nav";
  align-items: center;
  column-gap: 16px;
}
@media (min-width: 768px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav action";
    min-height: 76px;
  }
}

.wordmark {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
}

.primary-nav { grid-area: nav; border-top: 1px solid var(--rule); }
.primary-nav ul {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.primary-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 1rem;
  text-decoration: none;
}
.primary-nav a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .primary-nav { border-top: 0; justify-self: center; }
  .primary-nav ul { gap: 36px; }
}

.header-action {
  grid-area: action;
  min-height: 44px;
  padding: 8px 16px;
}
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 52vw;
}
.member-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-chip-points {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.member-chip .status-dot { background: var(--blue); border-color: var(--blue); }

/* ==========================================================================
   3. Hero
   ========================================================================== */

.hero { padding-block: 48px var(--section); }
.hero-grid {
  display: grid;
  gap: 48px;
}
.hero-copy { display: grid; gap: 28px; align-content: end; }
.hero-copy h1 { max-width: 11em; }
.hero-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--rule);
}
figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  line-height: 1.5;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.facts > div { padding: 14px 12px 0 0; }
.facts > div + div { padding-left: 12px; border-left: 1px solid var(--rule); }
.facts dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }
.facts dd { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; margin-top: 4px; }

@media (min-width: 900px) {
  .hero { padding-top: 72px; }
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 72px;
    align-items: end;
  }
  .hero-copy { gap: 36px; padding-bottom: 8px; }
}

/* ==========================================================================
   4. Menu
   ========================================================================== */

.section-head {
  display: grid;
  gap: 20px;
  margin-bottom: 56px;
}
.section-head .eyebrow { color: var(--stone); }
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 72px;
    align-items: end;
    margin-bottom: 72px;
  }
  .section-head > .eyebrow { grid-column: 1 / -1; }
  .section-head-aside { display: grid; gap: 20px; }
}
.section-head-aside { display: grid; gap: 20px; }

.serve-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}

.menu-feature {
  display: grid;
  gap: 40px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--rule);
}
.menu-feature img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--radius);
}

.menu-index { counter-reset: none; border-top: 1px solid var(--ink); }
.menu-index li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}
.menu-index .num { grid-row: span 3; padding-top: 8px; color: var(--stone); }
.menu-index h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 400; }
.menu-index p { color: var(--ink); max-width: 30em; }
.menu-index .meta { color: var(--stone); }

@media (min-width: 900px) {
  .menu-feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
    align-items: start;
  }
  .menu-index { margin-top: 0; }
}

.menu-trio {
  display: grid;
  gap: 40px;
  padding-top: 72px;
}
.menu-trio img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.menu-trio figcaption { display: grid; gap: 4px; }
.menu-trio figcaption strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.625rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.2;
}
.menu-trio figcaption span { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--stone); }
@media (min-width: 640px) {
  .menu-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1024px) {
  .menu-trio { gap: 40px; }
  .menu-trio figure:nth-child(2) { margin-top: 72px; }
}

/* ==========================================================================
   5. The interruption — the page's single bold claim
   ========================================================================== */

.interrupt {
  background: var(--cocoa);
  color: var(--bone);
  padding-block: var(--section);
}
.interrupt h2 {
  font-size: clamp(3.5rem, 1rem + 10.4vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.interrupt h2 span { display: block; }
.interrupt h2 em { font-style: italic; }
.interrupt-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid rgba(242, 241, 237, 0.35);
  color: var(--bone);
}

/* ==========================================================================
   6. Club explainer
   ========================================================================== */

.steps {
  display: grid;
  border-top: 1px solid var(--ink);
}
.step {
  display: grid;
  gap: 14px;
  align-content: start;
  padding-block: 28px 32px;
  border-bottom: 1px solid var(--rule);
}
.step-num { color: var(--stone); }
.step h3 { font-size: 2.5rem; font-weight: 400; }
.step-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 1.1875rem;
}
.step p:not(.step-value) { max-width: 26em; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { padding: 32px 32px 40px 0; border-bottom: 0; }
  .step + .step { padding-left: 32px; border-left: 1px solid var(--rule); }
}

.club-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
}
.club-foot p { color: var(--stone); max-width: 40em; }

/* ==========================================================================
   7. Member area — join / sign in / resume / dashboard
   ========================================================================== */

.member { background: var(--paper); border-block: 1px solid var(--rule); }

.member-head {
  display: grid;
  gap: 16px;
  margin-bottom: 48px;
}
.member-head .eyebrow { color: var(--stone); }
.member-head h2:focus-visible { outline-offset: 6px; }
.member-message { font-size: 1.1875rem; max-width: 36em; min-height: 1.6em; }

.member-auth {
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .member-auth { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
}

.benefits { border-top: 1px solid var(--ink); }
.benefits li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 12px;
  padding-block: 16px;
  border-bottom: 1px solid var(--rule);
}
.benefits .mono { padding-top: 4px; color: var(--stone); }
.benefit-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.proto-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-top: 24px;
  color: var(--stone);
}

.panel {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 20px 28px;
}
@media (min-width: 640px) { .panel { padding: 32px 36px 36px; } }

.panel-title { font-size: 2.25rem; font-weight: 400; }
.panel > * + * { margin-top: 16px; }
.panel-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Tabs */
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
}
.tab {
  min-height: 52px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--stone);
  font-size: 1.0625rem;
  font-weight: 500;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab:hover { color: var(--ink); }

/* Forms */
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 500; font-size: 1rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input:not([type]) {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 1.0625rem;
}
.field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field-hint { color: var(--stone); font-size: 1rem; }
.field-error { color: var(--error); font-size: 1rem; font-weight: 500; }
.field-error:empty { display: none; }

.check {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  column-gap: 4px;
}
.check input {
  width: 22px;
  height: 22px;
  margin: 11px;
  accent-color: var(--ink);
}
.check label { font-weight: 400; padding-top: 9px; cursor: pointer; }
.check .field-error { grid-column: 2; margin-top: 4px; }

.form-status { font-weight: 500; min-height: 1.6em; }
.form-status:empty { min-height: 0; }
.form-status[data-tone="error"] { color: var(--error); }
.form-fine { color: var(--stone); font-size: 1rem; }

.prefix-input { position: relative; }
.prefix-input span {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--stone);
  pointer-events: none;
}
.prefix-input input { padding-left: 30px !important; }

/* Dashboard */
.dash-grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 1024px) {
  .dash-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }
  .dash-wide { grid-column: 1 / -1; }
}

.card {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 20px;
  min-width: 0;
}
@media (min-width: 640px) { .card { padding: 28px 32px 32px; } }

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.card-head h3 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.points-balance {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 4vw, 6rem);
  line-height: 0.9;
}
.points-balance .unit { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); }

.progress {
  margin-top: 24px;
  height: 10px;
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 400ms ease;
}
.progress-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.progress-goal { display: inline-flex; align-items: center; gap: 8px; color: var(--stone); }

.member-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--stone);
}

.sim-copy { margin-bottom: 20px; }
.sim-copy .badge { margin-left: 4px; }
.sim-row { display: grid; gap: 12px; }
@media (min-width: 520px) {
  .sim-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.sim-status { margin-top: 16px; font-weight: 500; min-height: 1.6em; }

/* Coupons */
.coupon-list {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .coupon-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.coupon {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  min-width: 0;
}
.coupon--seasonal { border-top: 4px solid var(--pink); }
.coupon--locked { background: var(--bone); border-style: dashed; border-color: var(--ash); }
.coupon-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.coupon-kicker { color: var(--stone); }
.coupon h4 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 400; line-height: 1.1; }
.coupon-detail { color: var(--ink); }
.coupon-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--stone); font-size: 1rem; }
.coupon-proto {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.coupon-locked-note { font-weight: 500; }
.coupon .btn { width: 100%; }

/* Activity */
.activity-list { border-top: 1px solid var(--ink); }
.activity-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}
.activity-text { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.activity-points { font-family: var(--font-mono); font-size: 0.875rem; text-align: right; }
.activity-time { grid-column: 1 / -1; color: var(--stone); font-size: 1rem; }
@media (min-width: 768px) {
  .activity-list li { grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: baseline; }
  .activity-time { grid-column: auto; grid-row: 1; }
}
.activity-empty { padding-block: 14px; color: var(--stone); }

/* ==========================================================================
   Coupon dialog
   ========================================================================== */

.coupon-dialog {
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  overflow: auto;
}
.coupon-dialog::backdrop { background: rgba(17, 16, 14, 0.72); }

.dialog-banner {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  background: var(--ink);
  color: var(--bone);
  text-align: center;
}
.dialog-banner strong {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.375rem);
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.dialog-body { display: grid; gap: 14px; padding: 28px 24px 24px; }
.dialog-body h2 { font-size: 2.5rem; }
.dialog-code-wrap {
  padding: 18px;
  border: 1px dashed var(--ink);
  border-radius: var(--radius);
  text-align: center;
}
.dialog-code {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}
.dialog-repeat {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.dialog-note { color: var(--stone); font-size: 1rem; }

/* ==========================================================================
   8. Visit
   ========================================================================== */

.visit-grid { display: grid; gap: 48px; }
.visit-main { display: grid; gap: 28px; align-content: start; }
.visit-main .eyebrow { color: var(--stone); }
.visit-address {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.2;
}
.visit-steps { color: var(--ink); max-width: 32em; }
@media (min-width: 900px) {
  .visit-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; }
}

.hours-card { background: var(--paper); }
.hours-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}
.hours-list dt { font-weight: 500; }
.hours-list dd { font-family: var(--font-mono); font-size: 0.9375rem; }
.hours-status { margin-bottom: 8px; }
.hours-fine { margin-top: 16px; color: var(--stone); font-size: 1rem; }

/* ==========================================================================
   9. Gallery — strict editorial grid
   ========================================================================== */

.gallery { padding-top: 0; }
.gallery .section-head { padding-top: var(--section); border-top: 1px solid var(--rule); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 12px;
}
.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

/* ==========================================================================
   10. Instagram
   ========================================================================== */

.instagram { padding-top: 0; }
.instagram-inner {
  display: grid;
  gap: 24px;
  padding-top: 40px;
  border-top: 1px solid var(--ink);
}
.instagram h2 { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem); max-width: 22em; }
@media (min-width: 900px) {
  .instagram-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; }
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--bone);
  padding-block: 80px 40px;
}
.footer-grid {
  display: grid;
  gap: 36px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-wordmark { font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.footer-grid h2 {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ash);
}
.footer-grid a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom {
  display: grid;
  gap: 20px;
  padding-top: 32px;
}
.disclaimer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  padding: 16px 18px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
}
.footer-legal { color: var(--ash); font-size: 1rem; }
@media (min-width: 900px) {
  .footer-bottom { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* ==========================================================================
   Motion — restrained, opt-in only when the user hasn't asked for less.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .motion .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms ease, transform 700ms ease;
  }
  .motion .reveal.is-visible { opacity: 1; transform: none; }
}

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

/* ==========================================================================
   2026 Sunbeam-inspired refresh
   Warm cream canvas, very heavy black display type, real Baglory products
   layered over the words. Red handwriting is the accent, Space Mono does the
   utility work, powder blue stays small. No gradients, no people.
   ========================================================================== */

.sunbeam-refresh {
  --cream: #f8e9d5;
  --cream-2: #fff5e8;
  --black: #120d0b;
  --espresso: #211714;
  --tomato: #ee4937;
  --baglory-blue: #8ebce6;
  --blush: #cf8da2;
  --yellow: #f6c95f;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --font-display: "Fraunces", Georgia, serif;
  --font-mono: "Space Mono", monospace;
  --font-script: "Caveat", cursive;
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 16px;
}

.sunbeam-refresh h1,
.sunbeam-refresh h2,
.sunbeam-refresh h3,
.sunbeam-refresh p { margin-top: 0; }
.sunbeam-refresh img,
.sunbeam-refresh video:not(.hero-video) { display: block; width: 100%; }
.sunbeam-refresh .mono { font-family: var(--font-mono); }
.sunbeam-refresh .container { width: min(100% - 40px, 1320px); }

/* One display voice: Fraunces at full weight, soft corners, tight but not touching. */
.hero-title,
.special-name,
.special-ingr,
.menu-board h2,
.menu-row h3,
.reel-copy h2,
.community-copy h2,
.club-poster h2,
.visit-copy h2,
.instagram-callout h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  letter-spacing: -.045em;
  line-height: .86;
}

/* Masked line for type that rises into place */
.line {
  display: block;
  overflow: hidden;
  padding: .1em .05em .16em;
  margin: -.1em -.05em -.16em;
}
.line > span { display: inline-block; }

.script-kicker {
  margin-bottom: 14px;
  color: var(--tomato);
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 600;
  line-height: .9;
  transform: rotate(-3deg);
}

/* ---------- Utility strip ---------- */

.sunbeam-refresh .utility {
  position: relative;
  z-index: 30;
  min-height: 36px;
  padding: 7px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--black);
  color: var(--cream-2);
  border: 0;
  font-size: 11px;
  letter-spacing: .08em;
}
.sunbeam-refresh .utility .container { display: contents; }
.sunbeam-refresh .utility p { margin: 0; }
.sunbeam-refresh .status { display: inline-flex; gap: 9px; align-items: center; }
.sunbeam-refresh .status-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--tomato); }
.sunbeam-refresh [data-open="true"] .status-dot { background: var(--baglory-blue); }

/* ---------- Header (sits on the cream hero) ---------- */

.sunbeam-refresh .site-header {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  border: 0;
  color: var(--black);
}
.sunbeam-refresh .header-inner {
  width: 100%;
  max-width: none;
  min-height: 104px;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
  align-items: center;
}
.header-note { grid-column: 1; font-size: 11px; letter-spacing: .1em; line-height: 1.5; }
.sunbeam-refresh .wordmark {
  grid-area: auto;
  grid-column: 2;
  flex-direction: column;
  color: var(--black);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-size: clamp(2.4rem, 3.6vw, 3.8rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.06em;
}
.sunbeam-refresh .wordmark::after {
  content: "COFFEE + BAGELS";
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .24em;
  text-align: center;
}
.sunbeam-refresh .header-action {
  grid-area: auto;
  grid-column: 3;
  justify-self: end;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: .06em;
}

/* Fixed bottom bar — solid, compact, no gradient */
.sunbeam-refresh .primary-nav {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 100;
  transform: translateX(-50%);
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: var(--black);
  box-shadow: 0 10px 30px rgba(18, 13, 11, .22);
}
.sunbeam-refresh .primary-nav ul { display: flex; gap: 2px; }
.sunbeam-refresh .primary-nav a {
  position: relative;
  min-height: 44px;
  padding: 11px 16px;
  color: var(--cream-2);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.sunbeam-refresh .primary-nav a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 9px;
  height: 2px;
  background: var(--baglory-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.sunbeam-refresh .primary-nav a:hover::after,
.sunbeam-refresh .primary-nav a:focus-visible::after { transform: scaleX(1); }
.sunbeam-refresh .primary-nav :focus-visible { outline-color: var(--cream-2); }

/* ==========================================================================
   Hero — "Bagels. Coffee. Good days." over the full-bleed hero video.
   One flat espresso scrim for contrast; no gradients, cards or shadows.
   ========================================================================== */

.hero-sunbeam {
  --hero-size: clamp(3.3rem, 15vw, 11.5rem);
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 36px);
  padding: 108px 4vw 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* Shown while the video loads, and as the still for reduced motion. */
  background: var(--espresso) url("../public/assets/product-bagel-closeup.jpg") center / cover no-repeat;
  color: var(--cream-2);
  text-align: center;
}
.hero-video,
.hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-video {
  z-index: -2;
  object-fit: cover;
  /* Crop in from the lower-left so the clip's generated corner caption stays out of frame. */
  object-position: 70% 30%;
  transform: scale(1.12);
  transform-origin: 85% 15%;
}
.hero-scrim {
  z-index: -1;
  background: rgba(33, 23, 20, .58);
}
.hero-kicker { position: relative; margin-bottom: 10px; }
.hero-title {
  position: relative;
  margin: 0;
  color: var(--cream-2);
  font-size: var(--hero-size);
}
.hero-counter {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin-top: clamp(28px, 6vh, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  align-items: center;
  padding-top: 16px;
  border-top: 2px solid var(--cream-2);
}
.hero-note,
.hero-hours { margin: 0; font-size: 11px; letter-spacing: .1em; line-height: 1.6; }
.hero-note { text-align: left; }
.hero-hours { text-align: right; }
.cta-block {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 20px;
  background: var(--cream-2);
  color: var(--black);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms var(--ease-out);
}
.cta-block:hover { background: var(--tomato); color: var(--cream-2); }
.cta-block:active { transform: translateY(1px); }
.hero-sunbeam :focus-visible { outline-color: var(--cream-2); }

/* The header floats over the hero video, so it takes the light palette too. */
.sunbeam-refresh .site-header,
.sunbeam-refresh .site-header .wordmark { color: var(--cream-2); }
.sunbeam-refresh .site-header .header-action { background: var(--cream-2); border-color: var(--cream-2); color: var(--black); }
.sunbeam-refresh .site-header .header-action:hover { background: var(--tomato); border-color: var(--tomato); color: var(--cream-2); }
.sunbeam-refresh .site-header .wordmark:focus-visible,
.sunbeam-refresh .site-header .header-action:focus-visible { outline-color: var(--cream-2); }

@media (min-width: 901px) {
  .hero-sunbeam {
    --hero-size: min(10.2vw, 16vh, 11.5rem);
    padding-top: 124px;
  }
  .hero-title .line:nth-child(-n+2) { display: inline-block; }
  .hero-counter { grid-template-columns: 1fr auto 1fr; }
  .cta-block { grid-column: 2; }
}
@media (max-width: 900px) {
  .hero-video { object-position: 62% 40%; }
}
/* Short landscape screens: tighten the stack so the counter stays on screen. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-sunbeam { --hero-size: min(9vw, 14vh, 11.5rem); padding-top: 104px; padding-bottom: 72px; }
  .hero-kicker { margin-bottom: 4px; }
  .hero-title .line:nth-child(-n+2) { display: inline-block; }
  .hero-counter { margin-top: 16px; padding-top: 12px; grid-template-columns: 1fr auto 1fr; }
  .cta-block { grid-column: 2; }
}

/* Reduced motion: no autoplay or loop. The video is hidden (app.js also pauses it)
   and the section shows the product-only still behind the same scrim. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-title .line > span { animation: line-rise 900ms var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 90ms); }
  .hero-kicker,
  .hero-counter { animation: fade-in 700ms ease 700ms both; }
}
@keyframes line-rise { from { transform: translateY(120%); } }
@keyframes fade-in { from { opacity: 0; } }

/* ==========================================================================
   October specials — two scenes, product over ingredients
   ========================================================================== */

.specials {
  --name-size: clamp(3rem, 13.5vw, 6rem);
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 4vw clamp(72px, 8vw, 120px);
  background: var(--cream);
}
.specials-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  max-width: 1320px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--black);
}
.specials-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}
.specials-label::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--baglory-blue);
}
.specials-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.specials-tabs { display: flex; gap: 6px; }
.specials-tab,
.specials-pause {
  position: relative;
  min-height: 48px;
  padding: 12px 16px 14px;
  border: 1px solid var(--black);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: background-color 180ms ease, color 180ms ease;
}
.specials-tab:hover { background: var(--cream-2); }
.specials-tab[aria-selected="true"] { background: var(--black); color: var(--cream-2); }
.specials-tab-num { margin-right: 6px; color: var(--tomato); }
.specials-pause { min-width: 72px; background: var(--cream-2); }
.tab-progress {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 4px;
  background: var(--tomato);
  transform: scaleX(0);
  transform-origin: left;
}
.is-autoplay .specials-tab[aria-selected="true"] .tab-progress { animation: tab-progress 4s linear forwards; }
.is-paused .tab-progress { animation-play-state: paused !important; }
@keyframes tab-progress { to { transform: scaleX(1); } }

.specials-stage {
  display: grid;
  max-width: 1320px;
  margin: 0 auto;
}
.special {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kicker" "name" "product" "left" "right" "tag" "note";
  justify-items: center;
  text-align: center;
  outline-offset: 8px;
}
.specials.is-ready .special { grid-area: 1 / 1; visibility: hidden; }
.specials.is-ready .special.is-active,
.specials.is-ready .special.is-leaving { visibility: visible; }
.specials.is-ready .special.is-leaving { pointer-events: none; }
.specials:not(.is-ready) .special + .special { margin-top: 80px; }

.special-kicker {
  grid-area: kicker;
  margin-bottom: 6px;
  color: var(--tomato);
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 2.8vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  transform: rotate(-2deg);
}
.special-name {
  grid-area: name;
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--name-size);
}
.special-product {
  --tilt: -3deg;
  grid-area: product;
  position: relative;
  z-index: 2;
  width: min(40vw, 170px);
  margin: calc(var(--name-size) * -.16) 0 0;
}
.special:nth-child(2) .special-product { --tilt: 3deg; }
.special-product img {
  aspect-ratio: 11 / 25;
  object-fit: cover;
  border-radius: 26px 26px 16px 16px / 20px 20px 12px 12px;
  outline: 6px solid var(--cream);
}
.special-ingr {
  margin: 18px 0 0;
  font-size: clamp(2.4rem, 11vw, 4rem);
  line-height: .9;
}
.special-ingr--left { grid-area: left; }
.special-ingr--right { grid-area: right; margin-top: 0; }
.special-tag,
.special-note { margin: 0; font-size: 11px; letter-spacing: .1em; }
.special-tag {
  grid-area: tag;
  margin-top: 24px;
  padding: 7px 10px 6px;
  background: var(--tomato);
  color: var(--cream-2);
  font-weight: 700;
}
.special-note { grid-area: note; margin-top: 10px; }

@media (min-width: 901px) {
  .specials { --name-size: min(9vw, 10.5rem); }
  .special {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "kicker kicker kicker"
      "name   name   name"
      "left   product right"
      "tag    product note";
    column-gap: clamp(20px, 2.6vw, 44px);
    justify-items: stretch;
  }
  .special-kicker { justify-self: center; }
  .special-name { white-space: nowrap; }
  .special-product {
    width: clamp(160px, min(14vw, 25vh), 215px);
    margin-top: calc(var(--name-size) * -.2);
  }
  .special-ingr { align-self: center; margin: 0; font-size: clamp(2.4rem, 4.6vw, 5.4rem); }
  .special-ingr--left { text-align: right; }
  .special-ingr--right { text-align: left; }
  .special-tag { justify-self: end; align-self: end; margin: 0; }
  .special-note { justify-self: start; align-self: end; margin: 0; }
}

/* Scene choreography: words rise out / in, the can swings through. */
.specials.is-ready .special .line > span { transform: translateY(120%); }
.specials.is-ready .special.is-active .line > span {
  transform: none;
  transition: transform 760ms var(--ease-out) calc(90ms + var(--i) * 70ms);
}
.specials.is-ready .special.is-leaving .line > span {
  transform: translateY(-120%);
  transition: transform 420ms var(--ease-in) calc(var(--i) * 30ms);
}
.specials.is-ready .special .special-kicker,
.specials.is-ready .special .special-tag,
.specials.is-ready .special .special-note { opacity: 0; transition: opacity 200ms ease; }
.specials.is-ready .special.is-active .special-kicker,
.specials.is-ready .special.is-active .special-tag,
.specials.is-ready .special.is-active .special-note { opacity: 1; transition: opacity 500ms ease 300ms; }
.specials.is-ready .special .special-product {
  opacity: 0;
  transform: translateY(18%) rotate(calc(var(--tilt) * -3)) scale(.92);
}
.specials.is-ready .special.is-active .special-product {
  opacity: 1;
  transform: rotate(var(--tilt));
  transition: transform 900ms var(--ease-out) 160ms, opacity 260ms ease 160ms;
}
.specials.is-ready .special.is-leaving .special-product {
  opacity: 0;
  transform: translateY(-12%) rotate(calc(var(--tilt) * 4)) scale(.95);
  transition: transform 420ms var(--ease-in), opacity 300ms ease 120ms;
}
.specials:not(.is-ready) .special-product { transform: rotate(var(--tilt)); }

/* ==========================================================================
   Menu board — every product photo lives inside its own row rectangle.
   The row clips (overflow: hidden) and the photo is an in-flow grid item:
   never absolutely positioned, rotated or floating. On fine-pointer hover and
   keyboard focus the photo widens modestly inside a reserved column while the
   image eases from a closer crop (scale 1.12) to a wider reveal (scale 1).
   ========================================================================== */

.menu-board {
  padding: clamp(80px, 9vw, 140px) 4vw clamp(110px, 12vw, 180px);
  background: var(--cream);
}
.menu-board-head {
  max-width: 1240px;
  margin: 0 auto clamp(28px, 4vw, 52px);
}
.menu-board-head .script-kicker { margin-bottom: 26px; }
.menu-board h2 { margin: 0; font-size: clamp(3.2rem, 8vw, 8rem); }
.menu-rows { max-width: 1240px; margin: 0 auto; border-top: 3px solid var(--black); }
.menu-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  overflow: hidden;
  padding: 22px 6px 26px;
  border-bottom: 1px solid var(--black);
  transition: background-color 200ms ease;
}
.menu-row:focus-visible { outline: 3px solid var(--black); outline-offset: -3px; border-radius: 0; }
.menu-num { padding-top: .8em; font-size: 11px; letter-spacing: .08em; }
.menu-row h3 { margin: 0; font-size: clamp(2.3rem, 4.8vw, 5rem); }
.menu-desc { margin: 18px 0 0; font-size: 16px; line-height: 1.5; }
.menu-tag {
  grid-column: 2;
  justify-self: start;
  margin-top: 14px;
  padding: 7px 10px 6px;
  border: 1px solid var(--black);
  font-size: 11px;
  letter-spacing: .08em;
  white-space: nowrap;
}
/* In-row media: a stable rectangular crop, clipped by its own box and by the row.
   position: relative only anchors the caption badge inside the photo. */
.menu-peek {
  --peek-pos: 50% 50%;
  grid-column: 2;
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 18px 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--espresso);
}
.menu-peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--peek-pos);
  transform-origin: var(--peek-pos);
}
/* Per-photo crop focus: the drink or bagel stays centred in a tight frame. */
.menu-row:nth-child(1) .menu-peek { --peek-pos: 32% 55%; }
.menu-row:nth-child(2) .menu-peek { --peek-pos: 55% 52%; }
.menu-row:nth-child(3) .menu-peek { --peek-pos: 40% 40%; }
.menu-row:nth-child(4) .menu-peek { --peek-pos: 62% 64%; }
.menu-peek-mark {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 9px 5px 7px;
  background: var(--cream-2);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.menu-peek-mark svg { width: 15px; height: 19px; color: var(--tomato); }
.menu-source { max-width: 1240px; margin: 18px auto 0; font-size: 10px; letter-spacing: .08em; line-height: 1.6; }

/* Desktop: number / text / contained media / tag. The media column is reserved at
   its expanded width, so the photo grows into its own space: text and tag never
   reflow or collide, and the row height (set by the text) stays stable. */
@media (min-width: 901px) {
  .menu-row {
    grid-template-columns: 64px minmax(0, 1fr) clamp(180px, 17vw, 236px) auto;
    column-gap: 24px;
    align-items: center;
    min-height: 168px;
    padding: 0 16px;
  }
  .menu-num { align-self: start; padding-top: calc(26px + 1.4em); }
  .menu-row-text { padding: 26px 0 28px; }
  .menu-peek {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: stretch;
    max-width: none;
    min-height: 120px;
    margin: 12px 0;
    aspect-ratio: auto;
    /* Size containment: the portrait image's intrinsic height must not feed the row's
       height, or widening the photo would grow the row. The box takes its height from
       the stretched row track; the image only fills it. */
    contain: size;
  }
  .menu-peek-mark { left: 8px; bottom: 8px; }
  .menu-tag { grid-column: 4; grid-row: 1; justify-self: end; margin: 0; }
  .menu-source { text-align: right; }
}

/* Fine pointers: a compact crop at rest. Hover and keyboard focus widen it inside
   the reserved column (72% → 100%) and zoom the image out to show more product. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .menu-row:hover,
  .menu-row:focus-visible { background: var(--cream-2); }
  .menu-row h3 { transition: transform 420ms var(--ease-out); }
  .menu-row:hover h3,
  .menu-row:focus-visible h3 { transform: translateX(10px); }
  .menu-peek { width: 72%; transition: width 560ms var(--ease-out); }
  .menu-row:hover .menu-peek,
  .menu-row:focus-visible .menu-peek { width: 100%; }
  .menu-peek img { transform: scale(1.12); transition: transform 900ms var(--ease-out); }
  .menu-row:hover .menu-peek img,
  .menu-row:focus-visible .menu-peek img { transform: scale(1); }
}

/* Reduced motion: nothing animates. The photo rests at its full in-row width with
   the wider crop, so hover and focus change only the row background. */
@media (prefers-reduced-motion: reduce) {
  .menu-row h3,
  .menu-peek,
  .menu-peek img { transition: none; }
  .menu-row:hover h3,
  .menu-row:focus-visible h3 { transform: none; }
  .menu-peek,
  .menu-row:hover .menu-peek,
  .menu-row:focus-visible .menu-peek { width: 100%; }
  .menu-peek img,
  .menu-row:hover .menu-peek img,
  .menu-row:focus-visible .menu-peek img { transform: none; }
}

/* ==========================================================================
   Supporting sections
   ========================================================================== */

.feature-reel { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 820px; background: var(--blush); }
.reel-copy { padding: clamp(80px, 10vw, 150px) 6vw; display: flex; flex-direction: column; justify-content: center; }
.reel-copy .script-kicker { color: var(--cream-2); }
.reel-copy h2,
.community-copy h2,
.club-poster h2,
.visit-copy h2,
.instagram-callout h2 { margin: 0; font-size: clamp(4rem, 7vw, 7rem); }
.reel-copy > p:not(.script-kicker) { max-width: 38em; margin: 38px 0 28px; font-size: 16px; line-height: 1.7; }
.text-link { display: inline-block; align-self: flex-start; padding-bottom: 7px; border-bottom: 2px solid currentColor; font-weight: 700; text-decoration: none; }
.reel-media { position: relative; min-height: 720px; overflow: hidden; }
.reel-media video { height: 100%; object-fit: cover; }
.reel-media > p { position: absolute; right: 24px; bottom: 18px; margin: 0; padding: 8px 10px; background: var(--cream-2); font-size: 10px; }

.community-strip { position: relative; min-height: 830px; overflow: hidden; padding: 110px 6vw; background: var(--espresso); color: var(--cream-2); }
.community-copy { position: relative; z-index: 4; }
.community-copy h2 { max-width: 8ch; }
.tilt { position: absolute; margin: 0; overflow: hidden; }
.tilt img { height: 100%; object-fit: cover; }
.tilt--one { width: min(31vw, 420px); height: 520px; right: 17vw; top: 90px; transform: rotate(5deg); border-radius: 999px 999px 0 0; }
.tilt--two { width: min(22vw, 300px); height: 430px; right: 4vw; bottom: 50px; transform: rotate(-6deg); border-radius: 30px 30px 18px 18px / 24px 24px 14px 14px; outline: 6px solid var(--espresso); }
.community-note { position: absolute; left: 6vw; bottom: 70px; margin: 0; font-size: 12px; letter-spacing: .1em; }

.club-poster { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; padding: clamp(100px, 12vw, 180px) 6vw; background: var(--tomato); color: var(--cream-2); }
.club-poster > div > .mono { margin-bottom: 36px; font-size: 11px; letter-spacing: .1em; }
.club-offer { align-self: end; }
.club-offer > p { max-width: 35em; line-height: 1.7; }
.club-offer ul { margin: 38px 0; padding: 0; list-style: none; border-top: 1px solid currentColor; }
.club-offer li { display: flex; justify-content: space-between; gap: 30px; padding: 18px 0; border-bottom: 1px solid currentColor; }
.club-offer strong { font-family: var(--font-display); font-size: 1.8rem; }
.club-offer span { font-size: 14px; text-align: right; }
.club-offer small { display: block; margin-top: 18px; max-width: 44em; font-size: 9px; line-height: 1.5; letter-spacing: .04em; }

.sunbeam-refresh .btn {
  min-height: 48px;
  padding: 13px 20px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.sunbeam-refresh .btn--ink,
.sunbeam-refresh .btn--primary { background: var(--black); border: 1px solid var(--black); color: var(--cream-2); }
.sunbeam-refresh .btn--ink:hover,
.sunbeam-refresh .btn--primary:hover { background: var(--espresso); border-color: var(--espresso); }
.sunbeam-refresh .btn--outline,
.sunbeam-refresh .btn--secondary { background: transparent; border: 1px solid var(--black); color: var(--black); }
.sunbeam-refresh .btn--block { width: 100%; }

.sunbeam-refresh .member { padding: clamp(90px, 10vw, 150px) 0; background: var(--cream-2); }
.sunbeam-refresh .member .container { width: min(100% - 40px, 1240px); }
.sunbeam-refresh .member-head { max-width: 840px; margin-bottom: 64px; }
.sunbeam-refresh .member-head .eyebrow { font-family: var(--font-mono); }
.sunbeam-refresh .member-head h2 { margin: 12px 0 18px; font-family: var(--font-display); font-weight: 900; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(4rem, 8vw, 8rem); line-height: .86; letter-spacing: -.045em; }
.sunbeam-refresh .member-message { max-width: 48em; line-height: 1.6; }
.sunbeam-refresh .member-auth { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: 8vw; }
.sunbeam-refresh .benefits { list-style: none; padding: 0; }
.sunbeam-refresh .benefits li { padding: 20px 0; border-bottom: 1px solid var(--black); }
.sunbeam-refresh .panel,
.sunbeam-refresh .card { background: var(--cream); border: 1px solid var(--black); border-radius: 6px; box-shadow: none; }
.sunbeam-refresh .panel { padding: clamp(25px, 4vw, 48px); }
.sunbeam-refresh .tabs { border-color: var(--black); }
.sunbeam-refresh .tab { font-family: var(--font-mono); }
.sunbeam-refresh .tab[aria-selected="true"] { background: var(--baglory-blue); color: var(--black); }
.sunbeam-refresh .field { margin-bottom: 18px; }
.sunbeam-refresh .field label { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.sunbeam-refresh .field input { border: 1px solid var(--black); border-radius: 4px; background: var(--cream-2); font-family: var(--font-mono); }
.sunbeam-refresh .check label { font-weight: 400; line-height: 1.5; }
.sunbeam-refresh .dash-grid { gap: 20px; }
.sunbeam-refresh .card { padding: 28px; }
.sunbeam-refresh .card h3,
.sunbeam-refresh .panel-title { font-family: var(--font-display); font-size: 2rem; }
.sunbeam-refresh .points-balance { font-family: var(--font-display); font-size: clamp(4rem, 7vw, 7rem); }
.sunbeam-refresh .progress { background: var(--cream-2); border: 1px solid var(--black); }
.sunbeam-refresh .progress-fill { background: var(--tomato); }

.visit-poster { display: grid; grid-template-columns: 1fr 1fr; min-height: 850px; background: var(--yellow); }
.visit-photo { min-height: 650px; overflow: hidden; }
.visit-photo img { height: 100%; object-fit: cover; object-position: 62% 50%; }
.visit-copy { padding: clamp(80px, 9vw, 140px) 7vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.visit-copy address { margin: 44px 0 20px; font-family: var(--font-display); font-size: 1.8rem; font-style: normal; line-height: 1.2; }
.visit-copy .hours-list { width: 100%; margin: 10px 0 26px; border-top: 1px solid var(--black); }
.visit-copy .hours-list > div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--black); }
.visit-copy dt { font-weight: 700; }
.visit-copy dd { margin: 0; text-align: right; line-height: 1.6; }
.visit-copy .status { margin-bottom: 24px; font-size: 10px; letter-spacing: .08em; }

.instagram-callout { padding: clamp(100px, 15vw, 220px) 6vw; background: var(--cream); text-align: center; }
.instagram-callout > p { font-size: 10px; letter-spacing: .12em; }
.instagram-callout h2 { margin-top: 35px; font-size: clamp(5rem, 12vw, 13rem); }
.instagram-callout a { color: var(--tomato); text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }

.sunbeam-refresh .site-footer { padding: 90px 0 110px; background: var(--black); color: var(--cream-2); }
.sunbeam-refresh .footer-wordmark { font-family: var(--font-display); font-size: clamp(4rem, 8vw, 8rem); font-weight: 900; letter-spacing: -.06em; }
.sunbeam-refresh .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; border-color: rgba(255,255,255,.25); }
.sunbeam-refresh .footer-grid h2 { color: var(--baglory-blue); }
.sunbeam-refresh .footer-bottom { font-size: 11px; }
.sunbeam-refresh .coupon-dialog { border: 2px solid var(--black); border-radius: 6px; background: var(--cream-2); }
.sunbeam-refresh .dialog-banner { background: var(--tomato); color: var(--cream-2); }

.sunbeam-refresh .text-link { min-height: 44px; display: inline-flex; align-items: center; }
.sunbeam-refresh .header-action:has(.member-chip) { max-width: min(42vw, 150px); padding-inline: 9px; }
.sunbeam-refresh .header-action .member-chip { min-width: 0; max-width: 100%; }
.sunbeam-refresh .header-action .member-chip-name { min-width: 0; max-width: 72px; }

/* ---------- Tablet / mobile ---------- */

@media (max-width: 900px) {
  .sunbeam-refresh .header-inner { min-height: 88px; grid-template-columns: 1fr auto; }
  .header-note { display: none; }
  .sunbeam-refresh .wordmark { grid-column: 1; justify-self: start; align-items: flex-start; font-size: 2.5rem; }
  .sunbeam-refresh .wordmark::after { text-align: left; }
  .sunbeam-refresh .header-action { grid-column: 2; }
  .sunbeam-refresh .primary-nav { width: calc(100% - 24px); }
  .sunbeam-refresh .primary-nav ul { justify-content: space-between; }
  .sunbeam-refresh .primary-nav a { padding-inline: 8px; font-size: 11px; }
  .sunbeam-refresh .primary-nav a::after { left: 8px; right: 8px; }
  .specials-head { align-items: flex-start; flex-direction: column; }
  .specials-controls { width: 100%; }
  .specials-tabs { flex: 1 1 auto; }
  .specials-tab { flex: 1 1 0; text-align: left; }
  .feature-reel,
  .club-poster,
  .visit-poster { grid-template-columns: 1fr; }
  .reel-media { min-height: 620px; }
  .club-poster { gap: 70px; }
  .visit-photo { min-height: 560px; }
  .tilt--two { right: 32px; }
  .sunbeam-refresh .member-auth { grid-template-columns: 1fr; }
  .sunbeam-refresh .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .sunbeam-refresh .utility { justify-content: center; text-align: center; }
  .sunbeam-refresh .utility .status { display: none; }
  .sunbeam-refresh .utility-hours--long { display: inline; }
  .sunbeam-refresh .utility-hours--short { display: none; }
  .sunbeam-refresh .header-action { padding-inline: 12px; font-size: 11px; }
  .specials-controls { display: grid; grid-template-columns: 1fr auto; }
  .specials-tab { padding-inline: 10px; font-size: 11px; }
  .feature-reel { min-height: 0; }
  .reel-copy { padding: 85px 22px; }
  .reel-copy h2,
  .community-copy h2,
  .club-poster h2,
  .visit-copy h2 { font-size: 4.1rem; }
  .reel-media { min-height: 540px; }
  .community-strip { min-height: 780px; padding: 80px 22px; }
  .tilt--one { width: 56vw; height: 360px; right: 26vw; top: 290px; }
  .tilt--two { width: 38vw; height: 280px; right: 22px; bottom: 90px; }
  .community-note { left: 22px; bottom: 30px; font-size: 9px; }
  .club-poster { padding: 85px 22px; }
  .club-offer li { align-items: baseline; }
  .sunbeam-refresh .member { padding: 85px 0; }
  .sunbeam-refresh .member-head { width: 100%; min-width: 0; }
  .sunbeam-refresh .member-head h2 { max-width: 100%; font-size: 4.2rem; overflow-wrap: anywhere; }
  .sunbeam-refresh .card-head { align-items: flex-start; }
  .sunbeam-refresh .sim-row { grid-template-columns: 1fr; }
  .visit-photo { min-height: 440px; }
  .visit-copy { padding: 85px 22px; }
  .instagram-callout { padding-inline: 22px; }
  .instagram-callout h2 { font-size: 4.7rem; }
  .sunbeam-refresh .footer-grid { grid-template-columns: 1fr; }
}