/* caba.css - Caba Social components ("The Set Table"). Below base.css
   per CONVENTIONS.md. Implements docs\ART-DIRECTION.md. Palette closed:
   every colour is a kit token or a transparency of one. */

/* Woven linen field */
body { background-image: var(--weave); }

h1, h2 { letter-spacing: -0.01em; }
h1 { line-height: 1.08; letter-spacing: -0.015em; }
h3 { line-height: 1.25; }

body { line-height: 1.7; }

a { text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

/* Caps label: the ONLY uppercase on the site */
.caps-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Letterhead masthead (tier 1, non-sticky) */
.masthead {
  background: var(--surface);
  text-align: center;
  padding: clamp(1.6rem, 4vw, 2.4rem) var(--space-4) clamp(1.2rem, 3vw, 1.8rem);
}
.masthead-brand { display: inline-block; }
.masthead-brand img { width: 200px; height: auto; margin-inline: auto; }
@media (max-width: 480px) {
  .masthead-brand img { width: 180px; } /* kit minimum, never smaller */
}

/* Sticky bar (tier 2) */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.header-row { min-height: 3.5rem; gap: var(--space-3); }
.brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}
.site-nav { margin-left: auto; }
.site-nav a:not(.btn) {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-nav ul { gap: var(--space-4); }
@media (max-width: 1100px) {
  .site-nav ul { gap: var(--space-3); }
  .site-nav a:not(.btn) { letter-spacing: 0.08em; }
}

/* browser-qa (GATE 11 of 12), 2026-08-04: the 761-900px tablet-portrait band
   (768px is a mandated matrix width) cannot fit 7 nav links incl. the two-word
   "Our story" on one line at the existing 1100px gap/letter-spacing step alone;
   it wrapped to 2 lines (measured 44px vs 17px siblings at 768px), an uneven nav
   row. Fix verified live across 761-1100px: zero horizontal overflow anywhere in
   the band. min-width:761px is load-bearing, not decorative: without it this
   block also matches <760px and its gap value would cascade into the hamburger
   overlay nav (which shares the same .site-nav ul selector), shrinking its link
   spacing from the existing 16px down to 8px, an unrelated regression caught and
   reverted during this same gate. Below 760px is untouched; falls back to the
   hamburger nav as before. */
@media (min-width: 761px) and (max-width: 900px) {
  .site-nav ul { gap: 0.5rem; }
  .site-nav a:not(.btn) { white-space: nowrap; }
}
.header-cta {
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .site-nav { margin-left: 0; }
  .site-nav a:not(.btn) { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-weight: 400; }
  .header-cta { padding: 0.5rem 0.85rem; font-size: 0.8125rem; margin-left: auto; }
}

/* Buttons: printed-card, no movement */
.btn {
  padding: 0.8em 1.6em;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn:hover { background: var(--surface); }
.btn-accent { border-color: var(--brand-accent); }
.btn-accent:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); filter: none; }
:focus-visible { outline-width: 2px; }

/* Hero / page openers */
.hero-letterhead {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.hero-letterhead .lede { margin-inline: auto; }
.hero-letterhead .hero-cta { justify-content: center; }
.hero .lede { max-width: 44rem; }
.hero-trust {
  margin: var(--space-4) 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.hero-cta { margin-top: var(--space-4); }

/* Full-bleed banquet strip under the home hero. STATIC: the LCP lives here. */
.hero-strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  max-height: 34rem;
  object-fit: cover;
}
@media (max-width: 720px) {
  .hero-strip img { aspect-ratio: 667 / 500; max-height: none; }
}

/* Editorial mid-page strip, 21:9 desktop */
.strip-frame {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--radius);
}
.strip-frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) {
  .strip-frame { aspect-ratio: 3 / 2; }
}
.strip-group img { object-position: center 35%; }

/* Statement intro */
.statement { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) {
  .statement { grid-template-columns: 5fr 7fr; gap: var(--space-6); }
}
.statement h2 { font-size: var(--step-4); margin-bottom: 0; }
.statement p { max-width: var(--measure); }

/* Cards */
.card {
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

/* Inset sand keyline (thank-you-card frame) */
.keyline-card { position: relative; }
.keyline-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
}
.keyline-card { padding: calc(14px + clamp(1.4rem, 3vw, 2.2rem)); }

/* Photo tiles */
.tile-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 480px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color 200ms ease;
}
.tile:hover, .tile:focus-within { border-color: var(--ink); }
.tile-media { aspect-ratio: 1; overflow: hidden; }
.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.tile:hover .tile-media img,
.tile:focus-within .tile-media img { transform: scale(1.03); }
.tile-caption { padding: var(--space-3) var(--space-4) var(--space-4); }
.tile-caption h3, .tile-text h3 { margin-bottom: var(--space-1); font-size: var(--step-3); }
.tile-caption p { color: var(--ink-soft); font-size: var(--step--1); }

/* Honest text tiles (watermarked-source dishes) */
.tile-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5) var(--space-4);
}
.tile-text::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
}
@media (min-width: 480px) { .tile-text { aspect-ratio: 1; } }
.tile-text p { color: var(--ink-soft); font-size: var(--step--1); max-width: 16rem; margin-inline: auto; }

/* Menu groups */
.menu-group { padding-block: var(--space-6); }
.menu-group + .menu-group { border-top: 1px solid var(--line); }
.menu-group h2 { margin-bottom: var(--space-5); }

/* Chocolate menu-card panels (bounded, never full-bleed) */
.menu-card {
  position: relative;
  background: var(--ink-panel);
  color: var(--ink-panel-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: calc(14px + clamp(1.6rem, 3.5vw, 2.6rem));
}
.menu-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
}
.menu-card h2, .menu-card h3 { color: var(--line); }
.menu-card h2, .menu-card h3 { font-size: var(--step-3); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(232, 216, 181, 0.4); }
.menu-card-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--line);
}
.menu-card .btn {
  border-color: var(--line);
  color: var(--ink-panel-text);
}
.menu-card .btn:hover { background: rgba(232, 216, 181, 0.14); }
.menu-card a:not(.btn) { color: var(--ink-panel-text); }

.menu-card-grid { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .menu-card-grid { grid-template-columns: 1fr 1fr; } }

/* Tier + price rows */
.tier-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.tier-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
}
.tier-row + .tier-row { border-top: 1px solid rgba(232, 216, 181, 0.3); }
.tier-name { font-family: var(--font-display); font-size: 1.125rem; color: var(--line); }
.tier-serves { color: var(--ink-panel-text); font-size: var(--step--1); margin-right: auto; }
.price { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; white-space: nowrap; }
.menu-card .price { color: var(--line); }
.pkg-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.pkg-meta .tier-serves { margin-right: 0; }

/* Add-ons */
.addon-list { list-style: none; margin: 0; padding: 0; }
.addon-list .price { color: var(--ink); }

/* How-it-works steps */
.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

/* Terms strip */
.terms-strip {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  max-width: 54rem;
}
.terms-strip p { font-size: var(--step--1); color: var(--ink-soft); }

/* Prose */
.prose { max-width: var(--measure); }
.prose p { margin-bottom: var(--space-4); }
.pull-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--line);
  padding-left: var(--space-4);
  margin-block: var(--space-5);
}
blockquote {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--line);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.5;
}
blockquote p { margin: 0; }

/* Sand dot bullets (from the speckled stoneware) */
.dot-list { list-style: none; margin: 0; padding: 0; }
.dot-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: var(--space-3);
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
}

/* "Beauty in everything." set-piece */
.set-piece {
  padding-block: calc(var(--section-pad) * 1.5);
  text-align: center;
}
.set-piece h2 {
  font-size: var(--step-5);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 2.5rem;
}
/* Seals are decorative: CSS backgrounds on an aria-hidden span (v10), not <img alt="">. Same box as the old img (display:block from base.css img rule). */
.set-piece-seal { display: block; width: 48px; height: 48px; margin-inline: auto; background: url("../img/motif-heart-palm-chocolate.svg") center / contain no-repeat; }

/* Sign-off line (their thank-you-card register) */
.sign-off {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
}

/* Team portraits (4:5, nameless) */
.team-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; max-width: 44rem; }
@media (min-width: 600px) { .team-grid { grid-template-columns: 1fr 1fr; } }
.portrait-tile .tile-media { aspect-ratio: 4 / 5; }
.portrait-tile .tile-media img { object-position: center 30%; }
figure.tile { margin: 0; }
figcaption {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Hours */
.hours-table tr.today { background: var(--line); }
.hours-table tr.today th, .hours-table tr.today td { font-weight: 600; }
.hours-table .today-flag { color: var(--ink); }
.hours-line { font-family: var(--font-display); font-size: var(--step-3); }
.trust-grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .trust-grid { grid-template-columns: 3fr 2fr; gap: var(--space-6); } }

/* Forms (the invitation) */
.form-wrap { max-width: 40rem; margin-inline: auto; }
.form-card { display: block; max-width: none; }
.form-card fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }
.form-card fieldset + fieldset { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.form-card legend {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.25;
  padding: 0;
  margin-bottom: var(--space-4);
}
.form-field { margin-bottom: var(--space-4); }
.form-field:last-child { margin-bottom: 0; }
.form-card label,
.contact-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.form-card input,
.form-card select,
.form-card textarea,
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form-card ::placeholder, .contact-form ::placeholder { color: var(--ink-soft); opacity: 1; }
.form-card input:focus-visible,
.form-card select:focus-visible,
.form-card textarea:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 0;
}
.form-help {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: var(--space-1);
}
.form-card .btn-accent { width: 100%; }
@media (min-width: 480px) { .form-card .btn-accent { width: auto; } }

/* Optional extras: checked state is the ONLY home of --accent-soft */
.extras { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.extras legend { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-2); }
.extras-list { display: grid; gap: var(--space-2); }
.extra-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.65rem 0.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.extra-option input {
  width: auto;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brand-accent);
}
.extra-option span {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.extra-option:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--brand-accent);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}

/* Label: undo inherited caps */
.form-card .extra-option { margin-bottom: 0; display: flex; }

.form-aside { max-width: 40rem; margin: var(--space-6) auto 0; }
.form-aside h2 { font-size: var(--step-3); }
.form-aside .rule { border: 0; border-top: 1px solid var(--line); margin-block: var(--space-5); }

/* FAQ disclosures */
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-of-type { border-top: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.25;
}
/* Question text is an h3 for heading semantics; it inherits the summary's display face. */
.faq-list summary h3 { margin: 0; font: inherit; color: inherit; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--ink);
  transition: transform 200ms ease;
}
.faq-list details[open] summary::after { transform: rotate(180deg); }
.faq-a { padding: 0 0 var(--space-4); max-width: var(--measure); }
.faq-group { margin-bottom: var(--space-6); }
.faq-group:last-child { margin-bottom: 0; }

/* Gallery */
.gallery-item {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: border-color 200ms ease;
}
.gallery-item:hover, .gallery-item:focus-visible { border-color: var(--ink); }
.lightbox { background: rgba(74, 48, 40, 0.92); }
.lightbox-close { color: var(--paper); }

/* Footer */
.site-footer a { text-underline-offset: 0.15em; }
.footer-logo img { width: 200px; height: auto; }
.footer-id p { margin-bottom: var(--space-2); }
.footer-logo { margin-bottom: var(--space-4); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-trust { color: var(--ink-panel-text); }
.footer-sign { text-align: center; padding-block: var(--space-4) var(--space-5); }
.footer-seal { display: block; width: 40px; height: 40px; margin: 0 auto var(--space-3); background: url("../img/motif-heart-palm-sand.svg") center / contain no-repeat; }
.footer-microline {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--line);
  margin: 0;
}
.footer-legal { border-top: 1px solid rgba(232, 216, 181, 0.25); }

/* Call-bar (no phone on this build) */
.call-bar-call { border-top: 1px solid var(--line); }
.call-bar-book { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }

/* browser-qa (GATE 11 of 12), 2026-08-04: base.css reserves 3.2rem of body
   padding-bottom sitewide at <=720px so the mobile call-bar never covers the
   footer legal line, but 404.html and thank-you.html never render a call-bar
   (0 instances, grep-verified) - the reservation still applied to them anyway,
   leaving a dead 51px band of empty linen beneath their chocolate footer on
   every phone width, confirmed in render. Scoped reset: only pages without a
   call-bar lose the reservation; the 11 pages that show one keep it untouched. */
@media (max-width: 720px) {
  body:not(:has(.call-bar)) { padding-bottom: 0; }
}

/* Framed photo */
.photo-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.photo-frame img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }

/* Motion (ART-DIRECTION s8): one 600ms ease-out 12px fade-up. Hidden
   states only under html.js (no-JS renders complete); reduced-motion
   block neutralises the lot. */
html.js [data-reveal] { transform: translateY(12px); transition: opacity .6s ease-out, transform .6s ease-out; }

/* Stagger: 80ms steps, max 4, rest land with the 4th */
html.js [data-reveal]:not(.revealed) .stagger > * { opacity: 0; transform: translateY(12px); }
html.js .revealed .stagger > * { transition: opacity .6s ease-out var(--d, 0s), transform .6s ease-out var(--d, 0s), border-color .2s ease; }
html.js .stagger > :nth-child(2) { --d: 80ms; }
html.js .stagger > :nth-child(3) { --d: 160ms; }
html.js .stagger > :nth-child(n+4) { --d: 240ms; }

/* Hero settle: lede 120ms, CTA 240ms; lockup/h1/strip never move */
html.js .settle-1, html.js .settle-2 { animation: settle .6s ease-out .12s both; }
html.js .settle-2 { animation-delay: .24s; }
@keyframes settle { from { opacity: 0; transform: translateY(12px); } }

/* Gallery image scale, keyboard included */
.gallery-item img { transition: transform .4s ease; }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.03); }

/* Lightbox open fade; call-bar 250ms slide */
.lightbox.open { animation: lb-fade .2s ease; }
@keyframes lb-fade { from { opacity: 0; } }
.call-bar { visibility: hidden; transition: transform .25s ease, visibility .25s; }
.call-bar.show { visibility: visible; transition: transform .25s ease, visibility 0s; }

/* Reduced motion: instant, complete, fully visible */
@media (prefers-reduced-motion: reduce) {
  html.js .settle-1, html.js .settle-2, .lightbox.open { animation: none; }
  html.js [data-reveal]:not(.revealed) .stagger > * { opacity: 1 !important; transform: none !important; }
  html.js .revealed .stagger > * { transition: none !important; }
  .tile:hover .tile-media img, .tile:focus-within .tile-media img,
  .gallery-item:hover img, .gallery-item:focus-visible img { transform: none; }
}

/* A11y (a11y-gate 2026-08-03): sand focus ring on chocolate surfaces.
   Global olive ring measures 2.33:1 on the chocolate panels and 2.49:1 on
   the lightbox overlay (needs 3:1, WCAG 1.4.11). Sand is the kit keyline
   colour on chocolate already: 8.55:1 there, 3.67:1 on the olive bar half. */
.site-footer :focus-visible,
.menu-card :focus-visible,
.call-bar :focus-visible,
.lightbox :focus-visible { outline-color: var(--line); }

/* Utilities */
.align-center { align-items: center; }
.center { text-align: center; }
.center .hero-cta { justify-content: center; }
.measure { max-width: var(--measure); }
.mx-auto { margin-inline: auto; }
.small-print { font-size: var(--step--1); color: var(--ink-soft); }