/* ==========================================================================
   Charlie's Bar & Restaurant — Somers Point, NJ
   Palette and typography carried over verbatim from the approved design.
   ========================================================================== */

:root {
  /* Greens — unchanged from the design canvas */
  --green-deep:  #22301f;
  --green:       #2b3d2b;
  --green-mid:   #486048;
  --green-soft:  #8fbf8d;

  /* Paper */
  --cream:       #fbfaf5;
  --sand:        #f4f2ea;

  /* Ink */
  --ink:         #20281f;
  --ink-body:    #4b5147;
  --ink-muted:   #5c6459;
  --ink-faint:   #686f62;   /* 4.98:1 on cream, 4.64:1 on sand — WCAG AA */

  /* Lines */
  --line:        #e2e0d4;
  --line-soft:   #e6e3d5;
  --line-rule:   #ddd9c9;

  /* On dark */
  --on-dark:     #dfe6de;
  --on-dark-dim: #a9bba8;
  --on-dark-mid: #c3d2c1;

  --radius: 3px;
  --pad-x: clamp(20px, 5vw, 56px);
  --maxw: 1240px;

  /* Typography — Georgia stack, exactly as designed */
  --serif: Georgia, "Times New Roman", Times, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  font-family: var(--serif);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: var(--green-mid); text-decoration: none; }
a:hover { color: var(--green); }

/* A link sitting inside a block of text has to be distinguishable without
   colour — green on grey can't reach 3:1, so underline it. */
main p a:not(.btn):not(.more),
.prose a,
.contact-list a,
.footer-contact a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

h1, h2, h3 { font-weight: 400; letter-spacing: -0.015em; }

:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 3px;
}
.on-dark :focus-visible,
.hero :focus-visible,
footer :focus-visible {
  outline-color: var(--cream);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green);
  color: var(--cream);
  padding: 14px 22px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  color: var(--cream);
}

.wrap { max-width: var(--maxw); margin: 0 auto; }

/* --------------------------------------------------------------- utility bar */

.utility {
  background: var(--green);
  color: var(--on-dark);
  font-size: 14px;
  letter-spacing: 0.03em;
  padding: 11px var(--pad-x);
}
.utility-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 34px;
  flex-wrap: wrap;
}
.utility-links,
.utility-facts { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; }
.utility-links a { text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; }
.utility a[aria-current="page"] { color: #fff; border-bottom: 1px solid rgba(255,255,255,.6); }
@media (max-width: 780px) {
  .utility-inner { justify-content: center; text-align: center; }
}
.utility a { color: var(--cream); }
.utility a:hover { color: #fff; text-decoration: underline; }
.utility .sep { opacity: 0.4; }
@media (max-width: 640px) {
  .utility .sep { display: none; }
  .utility { font-size: 13px; }
}

/* ------------------------------------------------------------------- header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  padding: 18px var(--pad-x);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}

.site-header .logo img {
  display: block;
  height: 52px;
  width: auto;
}
@media (max-width: 640px) {
  .site-header .logo img { height: 42px; }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(14px, 1.8vw, 28px);
  font-size: 16px;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}
.nav a {
  color: #3c4a3b;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover,
.nav a[aria-current="true"] {
  color: var(--green);
  border-bottom-color: var(--green-mid);
}

.btn {
  display: inline-block;
  border-radius: var(--radius);
  transition: background .2s ease, transform .18s ease, color .2s ease;
  white-space: nowrap;
}
.btn-solid {
  background: var(--green-mid);
  color: var(--cream);
  padding: 14px clamp(18px, 2vw, 26px);
  font-size: 16px;
}
.btn-solid:hover { background: var(--green); color: var(--cream); }

@media (min-width: 1061px) {
  .site-header .logo { order: 1; }
  .nav { order: 2; }
  .site-header .header-cta { order: 3; }
}

/* Three lines rather than the word "Menu", which on a restaurant site reads as
   a link to the food menus. */
.nav-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  height: 2px;
  background: var(--green);
  transition: transform .22s ease, background-color .12s ease, top .22s ease;
}
.nav-toggle-bars {
  top: 50%;
  left: 50%;
  width: 22px;
  margin-top: -1px;
  transform: translateX(-50%);
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  left: 0;
  width: 100%;
}
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }

/* Open: the outer two bars cross, the middle one goes. */
body.nav-open .nav-toggle-bars { background: transparent; }
body.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1060px) {
  .site-header { flex-wrap: wrap; }
  .nav-toggle { display: block; order: 3; }
  .site-header .header-cta { order: 2; }
  .nav {
    order: 4;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    display: none;
    border-top: 1px solid var(--line);
    margin-top: 12px;
    padding-top: 4px;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding: 14px 2px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 18px;
  }
  .nav a:last-child { border-bottom: 0; }
}
@media (max-width: 460px) {
  .site-header .header-cta { display: none; }
}

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--green-deep);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(112deg, rgba(38,54,35,.01) 0 16px, rgba(0,0,0,.16) 16px 32px);
}
.hero-inner {
  position: relative;
  padding: clamp(52px, 7vw, 84px) var(--pad-x) clamp(48px, 6.5vw, 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-lockup {
  display: block;
  width: min(560px, 84%);
  height: auto;
}
.hero p {
  margin: clamp(28px, 4vw, 44px) 0 0;
  max-width: 62ch;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.65;
  color: var(--on-dark);
}
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
  flex-wrap: wrap;
  justify-content: center;
}
.btn-cream {
  background: var(--cream);
  color: var(--green);
  padding: clamp(16px, 2vw, 20px) clamp(26px, 3vw, 38px);
  font-size: clamp(17px, 2vw, 19px);
}
.btn-cream:hover { transform: translateY(-2px); color: var(--green); }
.btn-ghost {
  border: 1px solid rgba(251,250,245,.5);
  color: var(--cream);
  padding: clamp(16px, 2vw, 20px) clamp(24px, 3vw, 34px);
  font-size: clamp(17px, 2vw, 19px);
}
.btn-ghost:hover { background: rgba(251,250,245,.14); color: var(--cream); }

.status {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 32px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #b9c8b7;
}
.status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-soft);
  display: block;
  flex: 0 0 auto;
  animation: glow 2.6s ease-in-out infinite;
}
.status[data-open="false"] .dot {
  background: #c9a15f;
  animation: none;
}

/* ------------------------------------------------------------------- ribbon */

.ribbon {
  background: var(--green-mid);
  color: var(--sand);
  padding: 30px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  flex-wrap: wrap;
  text-align: center;
}
.ribbon .cheers { font-size: clamp(27px, 4vw, 34px); font-style: italic; }
.ribbon .rule { width: 1px; height: 30px; background: rgba(244,242,234,.4); }
.ribbon .line { font-size: clamp(17px, 2vw, 19px); color: #e4ecdf; }
@media (max-width: 640px) { .ribbon .rule { display: none; } }

/* ------------------------------------------------------------------ section */

.section {
  padding: clamp(56px, 8vw, 88px) var(--pad-x);
}
.section--tight { padding-top: clamp(36px, 5vw, 52px); padding-bottom: 0; }
.section--sand {
  background: var(--sand);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.section-head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 {
  margin: 16px 0 0;
  font-size: clamp(30px, 4.6vw, 46px);
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------- heritage / history */

.heritage-top {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.heritage-h {
  margin: 18px 0 0;
  font-size: clamp(34px, 5.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.heritage-h span { display: block; }
.heritage-h span:last-child { color: var(--green-mid); font-style: italic; }
.heritage-copy p {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.7;
  color: var(--ink-body);
}
.heritage-copy .more { display: inline-block; margin-top: 22px; }

/* A cream mat and a hairline frame — it reads as a photograph on a wall. */
.heritage-photo {
  margin: 0;
  padding: 12px 12px 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.heritage-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.heritage-photo figcaption {
  padding: 12px 2px 14px;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
@media (max-width: 860px) {
  .heritage-top { grid-template-columns: 1fr; }
  .heritage-photo { order: -1; }
}

/* ---------------------------------------------------------------- timeline */

.timeline {
  list-style: none;
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line-rule);
}
.section--tight .timeline { margin-top: 0; }
/* The marker sits on the rule above each year, so the row reads as one span. */
.timeline li { position: relative; padding-top: 30px; }
.timeline li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-mid);
}
.timeline .yr {
  display: block;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1;
  color: var(--green-mid);
}
.timeline .ev {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted);
}
@media (max-width: 780px) {
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline li:nth-child(3),
  .timeline li:nth-child(4) { margin-top: 26px; border-top: 1px solid var(--line-rule); }
}

/* ------------------------------------------------------------------ reviews */

.reviews-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin: clamp(44px, 6vw, 64px) 0 26px;
  flex-wrap: wrap;
}
.reviews-head h2 { margin: 0; font-size: clamp(28px, 4vw, 38px); }
.reviews-head .meta { font-size: 16px; color: var(--ink-faint); }

/* ----------------------------------------------------------- reviews carousel
   A scroll-snap track: swipes natively on touch, scrolls with the keyboard,
   and the arrows just page it along. No layout thrash, no JS positioning. */

.carousel { position: relative; }

/* Flex, not grid: a percentage flex-basis resolves against the container's
   inner width, where grid-auto-columns percentages inside a scroll container
   do not — they came out 281px against a 1128px track and made the browser
   snap-scroll on load. */
.carousel-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * {
  flex: 0 0 calc((100% - 44px) / 3);
  scroll-snap-align: start;
}
.carousel-track:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 6px; }

@media (max-width: 1000px) { .carousel-track > * { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 700px)  { .carousel-track > * { flex-basis: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-rule);
  border-radius: 50%;
  background: var(--cream);
  color: var(--green);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
  z-index: 2;
}
.carousel-btn:hover { background: var(--green-mid); border-color: var(--green-mid); color: var(--cream); }
.carousel-btn[disabled] { opacity: .3; cursor: default; }
.carousel-btn[disabled]:hover { background: var(--cream); border-color: var(--line-rule); color: var(--green); }
.carousel-prev { left: -23px; }
.carousel-next { right: -23px; }

/* Sit the arrows outside the cards wherever the page gutter can hold them;
   below that there is no room, so they overlay instead. */
@media (max-width: 560px) {
  .carousel-prev { left: 2px; }
  .carousel-next { right: 2px; }
  .carousel-btn { width: 40px; height: 40px; font-size: 26px; background: rgba(251,250,245,.92); }
}

.carousel-status {
  margin: 20px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-faint);
}

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

.review {
  background: var(--sand);
  border: 1px solid var(--line-soft);
  padding: 34px;
  display: flex;
  flex-direction: column;
  margin: 0;   /* figure defaults to 16px 40px, which broke the snap spacing */
  transition: border-color .2s ease, transform .2s ease;
}
.review:hover { border-color: var(--green-mid); transform: translateY(-3px); }
.review .stars { color: var(--green-mid); letter-spacing: 0.28em; font-size: 14px; }
.review blockquote {
  margin: 18px 0 0;
  font-size: 18.5px;
  line-height: 1.6;
  color: #333c31;
}
.review cite {
  margin-top: auto;
  padding-top: 22px;
  font-size: 14px;
  color: var(--ink-faint);
  font-style: normal;
}

/* -------------------------------------------------------------------- pairs */

.pairs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.pairs > div {
  padding: 40px 48px 40px 0;
  border-top: 1px solid var(--line-rule);
}
.pairs > div:nth-child(even) {
  padding: 40px 0 40px 48px;
  border-left: 1px solid var(--line-rule);
}
.pairs > div:nth-child(3),
.pairs > div:nth-child(4) { border-bottom: 1px solid var(--line-rule); }
.pairs .numeral { font-size: 14px; letter-spacing: 0.24em; color: var(--green-mid); }
.pairs h3 { margin: 16px 0 12px; font-size: clamp(24px, 3vw, 30px); }
.pairs p { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--ink-body); }
.pairs .more {
  display: inline-block;
  margin-top: 16px;
  font-size: 16px;
  border-bottom: 1px solid currentColor;
}
@media (max-width: 820px) {
  .pairs { grid-template-columns: 1fr; }
  .pairs > div,
  .pairs > div:nth-child(even) {
    padding: 32px 0;
    border-left: 0;
    border-bottom: 0;
  }
  .pairs > div:last-child { border-bottom: 1px solid var(--line-rule); }
}

/* ------------------------------------------------------------------ gallery */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
}
.gallery .tile {
  height: clamp(240px, 34vw, 420px);
  background: repeating-linear-gradient(118deg, #eae7db 0 13px, #e2dfd1 13px 26px);
  display: flex;
  align-items: flex-end;
  padding: 22px;
}
.gallery .tile span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #8e8f80;
}
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- hours */

.hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 72px);
}
@media (max-width: 820px) { .hours-grid { grid-template-columns: 1fr; } }

.hours-grid .label {
  font-size: 14px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 24px;
}
.hours-grid dl { margin: 0; }
.hours-grid .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: clamp(16px, 2vw, 18px);
}
.hours-grid .row:last-child { border-bottom: 0; }
.hours-grid dd { margin: 0; color: var(--ink-body); text-align: right; }
.hours-grid .row[data-today="true"] { color: var(--green); font-weight: 700; }
.hours-grid .row[data-today="true"] dd { color: var(--green); }

/* ------------------------------------------------------------------- visit  */

.visit {
  background: var(--green);
  color: #e7eee6;
  padding: clamp(56px, 8vw, 88px) var(--pad-x);
  text-align: center;
}
.visit .cheers-big {
  font-size: clamp(48px, 9vw, 80px);
  font-style: italic;
  line-height: 1;
  color: var(--cream);
}
.visit p {
  margin: 26px auto 0;
  max-width: 52ch;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.65;
  color: var(--on-dark-mid);
}
.visit .btn-cream {
  margin-top: 40px;
  padding: clamp(18px, 2.4vw, 22px) clamp(32px, 4vw, 46px);
  font-size: clamp(19px, 2.4vw, 22px);
}
.visit .addr {
  margin-top: 34px;
  font-size: 16px;
  color: var(--on-dark-dim);
  line-height: 1.8;
}
.visit .addr a { color: var(--cream); border-bottom: 1px solid rgba(251,250,245,.4); }
.visit .map-links {
  margin-top: 26px;
  display: flex;
  gap: 12px 28px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 16px;
}
.visit .map-links a { color: var(--on-dark-mid); border-bottom: 1px solid rgba(195,210,193,.35); }
.visit .map-links a:hover { color: var(--cream); }

/* ------------------------------------------------------------------- footer */

.site-footer {
  background: var(--green-deep);
  color: var(--on-dark-dim);
  padding: clamp(32px, 4.5vw, 44px) var(--pad-x);
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px 40px;
  flex-wrap: wrap;
}
.footer-top img { display: block; height: 92px; width: auto; opacity: .9; }
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px 44px;
  font-size: 16px;
}
.footer-nav a { color: #cddccb; }
.footer-nav a:hover { color: var(--cream); }
.footer-bottom {
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  justify-content: space-between;
  gap: 12px 26px;
  font-size: 14px;
  flex-wrap: wrap;
}
.footer-bottom a { color: var(--on-dark-dim); }
.footer-bottom a:hover { color: var(--cream); }
.social { display: flex; gap: 24px; flex-wrap: wrap; }

/* ------------------------------------------------------------------- motion */

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

[data-reveal] { will-change: opacity, transform; }
.is-revealing { opacity: 0; }
.is-revealed { animation: rise .66s cubic-bezier(.22,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .is-revealing { opacity: 1; }
}

/* ------------------------------------------------------------- good to know */

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--line-rule);
  border: 1px solid var(--line-rule);
}
.facts > div { background: var(--cream); padding: 34px; }
.facts h3 { margin: 0 0 10px; font-size: clamp(20px, 2.4vw, 24px); color: var(--green); }
.facts p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-body); }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }

.reviews-head .meta strong { color: var(--green-mid); font-size: 19px; }

/* =============================================================== page shells */

.hero-title { margin: 0; width: 100%; }

.page-head {
  background: var(--green-deep);
  color: var(--on-dark);
  padding: clamp(36px, 5vw, 60px) var(--pad-x) clamp(32px, 4.5vw, 52px);
  position: relative;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(112deg, rgba(38,54,35,.01) 0 16px, rgba(0,0,0,.16) 16px 32px);
}
.page-head .wrap { position: relative; }
.page-head .eyebrow { color: #9db69b; }
.page-head h1 {
  margin: 12px 0 0;
  font-size: clamp(34px, 5.2vw, 54px);
  color: var(--cream);
  letter-spacing: -0.025em;
}
.page-head .lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.65;
  color: var(--on-dark);
}
.page-head .head-note {
  margin: 16px 0 0;
  font-size: 15px;
  color: #9db69b;
  letter-spacing: .02em;
}
.page-head .btn { margin-top: 32px; }
.page-head .callout-actions { margin-top: 32px; justify-content: flex-start; }

/* ------------------------------------------------------------- jump nav bar */

.jump {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  position: sticky;
  /* sits directly under the sticky header; --header-h is measured in main.js */
  top: var(--header-h, 0px);
  z-index: 10;
}
.jump .wrap {
  display: flex;
  gap: 4px clamp(18px, 3vw, 36px);
  padding: 14px var(--pad-x);
  overflow-x: auto;
  scrollbar-width: thin;
}
.jump a {
  white-space: nowrap;
  font-size: 16px;
  color: var(--green);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.jump a:hover { border-bottom-color: var(--green-mid); }

/* ------------------------------------------------------------------- prose */

.prose { max-width: 74ch; }
.prose p { font-size: clamp(17px, 2vw, 19px); line-height: 1.75; color: var(--ink-body); margin: 0 0 1.3em; }
.prose .portrait { margin: 0 0 40px; }
.prose figcaption {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.prose-aside {
  margin: 34px 0 1.6em;
  padding: 22px 26px;
  background: var(--sand);
  border-left: 3px solid var(--green-mid);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prose-aside p {
  margin: 0;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.65;
  color: var(--ink);
}
.prose-cheers {
  font-size: clamp(28px, 4vw, 38px) !important;
  font-style: italic;
  color: var(--green-mid);
  margin-top: 40px !important;
}

/* ------------------------------------------------------------------- tiles */

.tile {
  background: repeating-linear-gradient(118deg, #eae7db 0 13px, #e2dfd1 13px 26px);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  margin: 0;
}
.tile span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #8e8f80;
}
.tile--portrait { height: clamp(260px, 40vw, 380px); }
.tile--tall { height: clamp(240px, 30vw, 340px); }
.tile--square { aspect-ratio: 1; height: auto; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grid-3 .tile { height: clamp(200px, 24vw, 280px); }
@media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr; } }

.lightbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
/* Two up on a phone — one 350px photo per row made the page 16,000px long. */
@media (max-width: 620px) {
  .lightbox-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

.centered-note {
  margin: 32px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-faint);
}

/* -------------------------------------------------------------- menu tables */

.menu-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--green-mid);
}
.menu-head h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); }
.menu-when { font-size: 16px; color: var(--ink-faint); letter-spacing: .04em; }

.table-scroll { overflow-x: auto; }
.menu-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}
.menu-table caption {
  caption-side: top;
  text-align: left;
  font-size: 15px;
  color: var(--ink-faint);
  padding-bottom: 16px;
}
.menu-table th[scope="col"] {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-mid);
  font-weight: 400;
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--line-rule);
}
.menu-table th[scope="row"] {
  font-weight: 400;
  font-size: 19px;
  color: var(--green);
  padding: 22px 24px 22px 0;
  vertical-align: top;
  white-space: nowrap;
}
.menu-table td {
  padding: 22px 16px 22px 0;
  vertical-align: top;
  border-top: 1px solid var(--line-soft);
}
.menu-table th[scope="row"] { border-top: 1px solid var(--line-soft); }
.menu-table .dish { display: block; font-size: 18px; color: var(--ink); }
.menu-table .note { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-muted); line-height: 1.5; }
.menu-table .price { white-space: nowrap; color: var(--green-mid); font-size: 18px; }

/* ------------------------------------------------------------------ courses */

.courses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
@media (max-width: 820px) { .courses { grid-template-columns: 1fr; } }

.course h3 {
  margin: 0 0 20px;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-mid);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-rule);
}
.dishes { margin: 0; }
.dish-row { margin-bottom: 22px; }
.dish-row:last-child { margin-bottom: 0; }
.dish-row dt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(18px, 2.2vw, 20px);
  color: var(--ink);
}
.dish-row dt .dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--line-rule);
  transform: translateY(-4px);
  min-width: 16px;
}
.dish-row dt b { font-weight: 400; color: var(--green-mid); white-space: nowrap; }
.dish-row dd {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 56ch;
}

/* ------------------------------------------------------------------ listing */

.listing h2 {
  margin: 0 0 24px;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-mid);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-rule);
}
.cols {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: clamp(28px, 4vw, 52px);
}
.listing--wide .cols { columns: 2; }
.cols li {
  break-inside: avoid;
  margin-bottom: 14px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-body);
}
.cols li b { font-weight: 400; color: var(--ink); }
.cols li span { display: block; font-size: 15px; color: var(--ink-muted); }
.cols li em { font-style: normal; color: var(--ink-faint); font-size: 15px; }
@media (max-width: 900px) { .cols, .listing--wide .cols { columns: 2; } }
@media (max-width: 600px) { .cols, .listing--wide .cols { columns: 1; } }

/* ------------------------------------------------------------------ buffets */

.buffets { display: grid; gap: 24px; }
.buffet {
  background: var(--cream);
  border: 1px solid var(--line-rule);
  padding: clamp(24px, 3vw, 36px);
}
.buffet h3 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.8vw, 27px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.buffet h3 b { font-weight: 400; color: var(--green-mid); }
.buffet h3 b span { font-size: 15px; color: var(--ink-faint); }
.buffet-min { margin: 0 0 18px; font-size: 15px; color: var(--ink-faint); }
.buffet-choice { margin: 0 0 12px; font-size: 16.5px; line-height: 1.65; color: var(--ink-body); }
.buffet-choice strong { display: block; font-weight: 400; color: var(--green); }

.fineprint {
  margin: 28px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------------- callout */

.callout {
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--sand);
  border: 1px solid var(--line-rule);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}
.section--sand .callout { background: var(--cream); }
.callout h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 32px); }
.callout p { margin: 0 auto; max-width: 60ch; font-size: 17.5px; line-height: 1.7; color: var(--ink-body); }
.callout-actions {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-outline {
  border: 1px solid var(--green-mid);
  color: var(--green-mid);
  padding: 14px clamp(18px, 2vw, 26px);
  font-size: 16px;
}
.btn-outline:hover { background: var(--green-mid); color: var(--cream); }

/* --------------------------------------------------------------------- map */

.map-wrap { background: var(--sand); }
.map-wrap iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 46vw, 520px);
  border: 0;
}

/* ------------------------------------------------------------------- forms */

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }

.form-aside h2 { margin: 0 0 18px; font-size: clamp(22px, 2.6vw, 27px); }
.form-aside p { font-size: 17px; line-height: 1.7; color: var(--ink-body); margin: 0 0 1em; }
.aside-note {
  margin-top: 24px !important;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 15.5px !important;
  color: var(--ink-faint) !important;
}
.contact-list { margin: 0 0 24px; }
.contact-list dt {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-top: 20px;
}
.contact-list dt:first-child { margin-top: 0; }
.contact-list dd { margin: 6px 0 0; font-size: 18px; line-height: 1.6; }
.steps { margin: 0; padding-left: 1.2em; }
.steps li { font-size: 17px; line-height: 1.7; color: var(--ink-body); margin-bottom: 12px; }

.form { margin: 0; }
/* A legend renders inside the fieldset border, which leaves the rule running
   through the label. Draw the rule as a pseudo-element instead. */
.form fieldset {
  border: 0;
  position: relative;
  margin: 0 0 8px;
  padding: 30px 0 0;
}
.form fieldset:first-of-type { padding-top: 0; }
.form legend {
  display: block;
  width: 100%;
  padding: 0;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 18px;
}
.field { margin: 0 0 20px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 15.5px;
  color: var(--ink-muted);
}
.field label span { color: var(--green-mid); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-rule);
  border-radius: var(--radius);
  padding: 13px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.section--sand .field input,
.section--sand .field select,
.section--sand .field textarea { background: #fff; }
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(72,96,72,.14);
}
.field input[type="file"] { padding: 11px 12px; font-size: 15px; }
.field .hint { display: block; margin-top: 7px; font-size: 14px; color: var(--ink-faint); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.field-row--three { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 620px) {
  .field-row, .field-row--three { grid-template-columns: 1fr; }
}

.radios { padding: 0 0 20px !important; margin: 0 !important; }
.radios legend { border-bottom: 0; padding-bottom: 0; }
.radios legend {
  text-transform: none;
  letter-spacing: 0;
  font-size: 15.5px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.radios label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 24px;
  font-size: 17px;
}

.form-actions {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.form button { font-family: var(--serif); border: 0; cursor: pointer; }
.form button[disabled] { opacity: .6; cursor: default; }
.form-status { font-size: 16px; line-height: 1.5; }
.form-status[data-state="ok"] { color: var(--green-mid); }
.form-status[data-state="error"] { color: #9c3d2e; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ footer */

.footer-cols {
  display: grid;
  grid-template-columns: auto auto;
  gap: 32px clamp(40px, 6vw, 80px);
}
@media (max-width: 700px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-contact p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; }
.footer-contact a { color: #cddccb; }
.footer-contact a:hover { color: var(--cream); }
.footer-cash { color: var(--on-dark-dim); font-size: 15px !important; }

.form-sent {
  margin: 0;
  padding: 28px;
  background: var(--sand);
  border: 1px solid var(--green-mid);
  border-radius: var(--radius);
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--green);
}

/* Anchored sections must clear the sticky header (and the jump bar where the
   page has one) when linked to directly. */
[id] { scroll-margin-top: calc(var(--header-h, 90px) + 24px); }
.jump ~ * [id],
.jump ~ [id] { scroll-margin-top: calc(var(--header-h, 90px) + 78px); }

/* One group that should still use the full width — the drink specials list. */
.courses--wide { grid-template-columns: 1fr; }
.courses--wide .dishes { columns: 2; column-gap: clamp(28px, 4vw, 52px); }
.courses--wide .dish-row { break-inside: avoid; }
@media (max-width: 700px) { .courses--wide .dishes { columns: 1; } }

/* --------------------------------------------------------------- full menu */

.food-nav {
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 22px 0;
  border-top: 1px solid var(--line-rule);
  border-bottom: 1px solid var(--line-rule);
}
.food-nav .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 2.4vw, 30px);
}
.food-nav a {
  font-size: 15.5px;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
}
.food-nav a:hover { color: var(--green); border-bottom-color: var(--green-mid); }

.food {
  columns: 2;
  column-gap: clamp(36px, 5vw, 72px);
}
@media (max-width: 900px) { .food { columns: 1; } }

.food-section {
  break-inside: avoid-column;
  margin: 0 0 clamp(34px, 4vw, 48px);
}
.food-section h3 {
  margin: 0 0 20px;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-mid);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-rule);
}
.food .dish-row { margin-bottom: 18px; }
.food-note {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
}
.food-note strong {
  display: block;
  font-weight: 400;
  color: var(--green-mid);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.variants { margin: 8px 0 0; }
.variants span {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
  color: var(--ink-muted);
  padding: 3px 0;
}
.variants i { font-style: normal; }
.variants span::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--line-rule);
  transform: translateY(-4px);
  min-width: 12px;
}
.variants b { order: 2; font-weight: 400; color: var(--green-mid); white-space: nowrap; }

.food-disclaimers {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 24px;
  border-top: 1px solid var(--line-rule);
}
.food-disclaimers .fineprint { margin: 0 0 10px; }

/* ------------------------------------------------------------ real imagery */

.hero--photo { background: var(--green-deep); }
.hero--photo::before {
  /* Lightened from .82/.88 so the building reads. Measured: the hero paragraph
     sits at 4.86:1 against the darkest pixel behind it, clear of the 4.5:1 AA
     floor. Don't lighten further without re-measuring. */
  background:
    linear-gradient(rgba(34,48,31,.70), rgba(34,48,31,.78)),
    repeating-linear-gradient(112deg, rgba(38,54,35,.01) 0 16px, rgba(0,0,0,.14) 16px 32px),
    url("/assets/photos/site/exterior.jpg") center/cover no-repeat;
}

.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery { align-items: stretch; }
.gallery > img { height: clamp(240px, 34vw, 420px); }

.prose .portrait img { display: block; width: 100%; height: auto; }

.grid-3--photos img {
  display: block;
  width: 100%;
  height: clamp(200px, 24vw, 280px);
  object-fit: cover;
}

.art-wide { display: block; width: 100%; height: auto; }

.shop-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.shop-hero img { display: block; width: 100%; height: auto; }
.shop-hero h2 { margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 36px); }
.shop-hero p { margin: 0 0 1em; font-size: 17.5px; line-height: 1.7; color: var(--ink-body); }
@media (max-width: 760px) { .shop-hero { grid-template-columns: 1fr; } }

.btn-outline--light { border-color: rgba(251,250,245,.5); color: var(--cream); }
.btn-outline--light:hover { background: rgba(251,250,245,.14); color: var(--cream); }

/* --------------------------------------------------------------- gallery */

.gallery-group { margin-bottom: clamp(44px, 6vw, 72px); }
.gallery-group:last-child { margin-bottom: 0; }
.gallery-group h2 {
  margin: 0 0 24px;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-mid);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-rule);
}

.shot {
  display: block;
  padding: 0;
  border: 0;
  background: var(--sand);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
}
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s cubic-bezier(.22,.7,.2,1), opacity .2s ease;
}
.shot:hover img { transform: scale(1.045); opacity: .92; }

/* --------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(24,34,22,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }
.lightbox figure {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox figcaption {
  color: var(--on-dark);
  font-size: 17px;
  text-align: center;
  max-width: 60ch;
  line-height: 1.6;
}
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--cream);
  font-family: var(--serif);
  cursor: pointer;
  line-height: 1;
  opacity: .75;
  transition: opacity .2s ease;
}
.lightbox button:hover { opacity: 1; }
.lightbox-close { top: 18px; right: 24px; font-size: 44px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); font-size: 64px; padding: 0 20px; }
.lightbox-prev { left: 4px; }
.lightbox-next { right: 4px; }
@media (max-width: 640px) {
  .lightbox-prev, .lightbox-next { font-size: 48px; padding: 0 10px; }
}


.section-h2 {
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  font-size: clamp(28px, 4vw, 40px);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--green-mid);
}

/* The scrollable menu table is keyboard focusable, so it needs a focus ring. */
.table-scroll:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 4px;
}

.form-privacy {
  margin: 4px 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-faint);
}

.prose h2 {
  margin: 2em 0 .6em;
  font-size: clamp(23px, 2.8vw, 28px);
  color: var(--green);
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 {
  margin: 1.6em 0 .4em;
  font-size: clamp(19px, 2.2vw, 21px);
  color: var(--green-mid);
}

/* ==================================================== page heads with a photo
   Same treatment as the home hero so the pages read as one site, but a heavier
   wash: the page head's smallest text is the eyebrow and the note under the
   lede, and both sit higher in the frame than anything on the hero. Measured
   across all seven at 390px and 1280px — .80/.86 passes with the worst at
   5.4:1, .76/.82 fails on seven of the fourteen. Re-measure before changing
   the wash or swapping in a different photograph. */

.page-head--photo::before {
  background:
    linear-gradient(rgba(34,48,31,.80), rgba(34,48,31,.86)),
    repeating-linear-gradient(112deg, rgba(38,54,35,.01) 0 16px, rgba(0,0,0,.14) 16px 32px),
    var(--head-photo) center 55% / cover no-repeat;
}

/* #9db69b clears AA on flat green but not over a photograph. */
.page-head--photo .eyebrow,
.page-head--photo .head-note { color: var(--on-dark-mid); }

/* An outline button on a dark head was dark-green text on dark green — about
   1.2:1, and invisible. It predates the photographs; axe could not see it
   because it cannot compute contrast over a background image. */
.page-head .btn-outline {
  border-color: rgba(251,250,245,.55);
  color: var(--cream);
  /* A fully transparent button over a photograph inherits whatever is behind
     it, so give the label its own ground. */
  background: rgba(34, 48, 31, .55);
}
.page-head .btn-outline:hover { background: var(--cream); color: var(--green); }