/* BRAMBLE & FURROW main stylesheet. Layout, components, motion. Tokens live in tokens.css. */

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

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

/* anchor landings tuned to clear the sticky header, plus air for section heads */
#menu, #ripe, #sourcing, #gallery, #private, #reviews, #visit, #faq, #reserve, #full-menu {
  scroll-margin-top: 4.75rem;
}
#top { scroll-margin-top: 0; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

::selection { background: var(--aubergine); color: var(--parchment); }

/* the focus ring is thrown like the stoneware: even nowhere, wrong nowhere */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 0.55em 0.85em 0.6em 0.9em / 0.85em 0.55em 0.9em 0.6em;
}

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-5);
  background: var(--moss);
  color: var(--parchment);
  border-radius: var(--r-2);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
}
.skip-link:focus-visible { transform: none; }

/* ---------- text roles ---------- */
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 480;
  font-variation-settings: var(--soft-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.display {
  font-size: var(--t-display);
  font-style: italic;
  font-weight: 420;
  line-height: var(--lh-tight);
}
.h1 { font-size: var(--t-h1); line-height: 1.05; }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); font-weight: 540; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  max-width: var(--measure);
  text-wrap: pretty;
}
.body-copy { max-width: var(--measure); color: var(--muted); text-wrap: pretty; }

/* kicker: the shared eyebrow role. Work Sans caps, leaf tick before. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15C8 8 10 3 15 1 14 8 12 13 8 15Zm0 0C8 9 6 4 1 2c1 6 3 11 7 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15C8 8 10 3 15 1 14 8 12 13 8 15Zm0 0C8 9 6 4 1 2c1 6 3 11 7 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kicker--muted { color: var(--muted); }

.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.label--muted { color: var(--muted); }
.label--accent { color: var(--accent); }

.accent { color: var(--accent); }
.dim { color: var(--muted); }
.italic { font-style: italic; }

/* sample chip: honesty marker on fictional content */
.chip {
  display: inline-block;
  padding: 0.3em 0.75em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
}

/* distance chip on farm rows */
.chip--miles {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
  white-space: nowrap;
}

/* dietary filter chip: a chip that presses. Hidden without JS; paper never filters. */
.chip--diet {
  cursor: pointer;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg);
  background: transparent;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.chip--diet:hover { border-color: var(--accent); color: var(--accent); }
.chip--diet[aria-pressed="true"] {
  background: var(--aubergine);
  border-color: var(--aubergine);
  color: var(--parchment);
}
[data-theme="moss"] .chip--diet[aria-pressed="true"] {
  background: var(--aubergine-bright);
  border-color: var(--aubergine-bright);
  color: var(--white);
}

/* ---------- layout primitives ---------- */
.wrap {
  width: min(100% - 2 * var(--edge), var(--max-w));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--bg);
  color: var(--fg);
}
.section--flush { padding-block: 0; }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: clamp(2.25rem, 6vh, 4rem);
}
.section-head .h2 { flex-basis: 100%; margin-top: var(--s-2); }

/* botanical divider: a sprig line between sections */
.divider {
  display: block;
  width: min(100% - 2 * var(--edge), 26rem);
  margin: 0 auto;
  color: var(--line-strong);
}
.divider svg { width: 100%; height: auto; }
.section > .divider { margin-bottom: var(--s-7); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--parchment) 96%, transparent);
  color: var(--moss);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: var(--soft-text);
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand svg { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; }
.brand .amp { font-style: italic; color: var(--accent); font-weight: 420; }

/* hours + live open dot */
.hours-line {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--t-small);
  color: var(--muted);
  white-space: nowrap;
}
.open-dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: transparent;
  flex-shrink: 0;
}
.hours-line.is-open .open-dot { background: var(--accent); border-color: var(--accent); }
.hours-line.is-open { color: var(--fg); }

.header-right { display: flex; align-items: center; gap: var(--s-5); }
.site-nav { display: flex; gap: var(--s-5); }
.site-nav a {
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity var(--dur-1) ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border-radius: var(--r-2);
  background: var(--aubergine);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.btn:hover { background: var(--moss); }
[data-theme="moss"] .btn { background: var(--aubergine-bright); color: var(--white); }
[data-theme="moss"] .btn:hover { background: var(--parchment); color: var(--moss); }
.btn--ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg); }
[data-theme="moss"] .btn--ghost { background: transparent; color: var(--fg); }
[data-theme="moss"] .btn--ghost:hover { background: transparent; color: var(--fg); }
.btn--small { padding: 0.6em 1.1em; }

.header-cta { white-space: nowrap; }

.menu-btn {
  display: none;
  font-size: var(--t-small);
  font-weight: 600;
  padding: var(--s-2) var(--s-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-2);
}

/* mobile menu overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--moss);
  color: var(--parchment);
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-8) var(--edge) var(--s-6);
}
.menu-overlay.is-open { display: flex; overflow-y: auto; overscroll-behavior: contain; }
.menu-overlay nav { display: flex; flex-direction: column; gap: var(--s-3); }
.menu-overlay nav a {
  font-family: var(--font-display);
  font-weight: 460;
  font-variation-settings: var(--soft-display);
  font-size: clamp(1.9rem, 8vw, 3.5rem);
  line-height: 1.15;
  text-decoration: none;
}
.menu-overlay nav a:hover { font-style: italic; color: var(--aubergine-soft); }
.menu-overlay .hours-line { color: var(--muted); }
.menu-close {
  position: absolute;
  top: var(--s-5);
  right: var(--edge);
  font-size: var(--t-small);
  font-weight: 600;
  padding: var(--s-2) var(--s-4);
  border: 1.5px solid var(--line);
  border-radius: var(--r-2);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  min-height: calc(100svh - 4rem);
  background: var(--bg);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-6);
  padding: var(--s-9) clamp(1.25rem, 5vw, 5rem) var(--s-10) var(--edge);
}
.hero-copy .display { max-width: 12ch; }
.hero-copy .display .accent { color: var(--accent); }
.hero-sub { display: grid; gap: var(--s-4); max-width: 30rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero-media { position: relative; overflow: hidden; }
.hero-media img,
.hero-media .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* photography placeholder treatment (used if a slot has no image yet) */
.ph {
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--s-2);
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(160, 86, 135, 0.16), transparent 60%),
    radial-gradient(100% 80% at 85% 90%, rgba(51, 64, 42, 0.28), transparent 55%),
    linear-gradient(160deg, var(--parchment-3), var(--parchment-2));
  color: var(--muted);
}

/* reservation card floating at the seam */
.res-card {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 6vh, 3.5rem);
  transform: translateX(-50%);
  width: min(92%, 46rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--s-4);
  align-items: end;
}
.res-card .field { min-width: 0; }
.res-card .btn { height: 3.1rem; }
/* scripts never arrived: the card stops offering boxes that walk nowhere,
   and hands over the two paths that always reach the book */
.res-card-nojs { display: none; }
html:not(.js) .res-card { grid-template-columns: 1fr; gap: var(--s-3); }
html:not(.js) .res-card .field,
html:not(.js) .res-card-go { display: none; }
html:not(.js) .res-card-nojs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
html:not(.js) .res-card-nojs p {
  flex: 1 1 100%;
  margin: 0;
  max-width: 44rem;
  font-size: var(--t-small);
  color: var(--muted);
}
/* the card says out loud what it remembered from last visit */
.res-memory {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-small);
  font-style: italic;
  color: var(--muted);
}

/* ---------- menu (AutoTabs) ---------- */
.menu-intro { max-width: var(--measure); }
.menu-tabs { margin-top: var(--s-6); }
.menu-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  border-bottom: 1px solid var(--line);
}
.menu-tab {
  position: relative;
  padding: var(--s-3) 0 var(--s-4);
  font-family: var(--font-display);
  font-variation-settings: var(--soft-text);
  font-size: var(--t-h3);
  font-weight: 480;
  color: var(--muted);
  transition: color var(--dur-1) ease;
}
.menu-tab:hover { color: var(--fg); }
.menu-tab[aria-selected="true"] { color: var(--fg); font-style: italic; }
/* rotation progress: a growing accent underline on the active tab */
.menu-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 0;
  background: var(--accent);
}
.menu-tab[aria-selected="true"]::after { width: 100%; }
.js .menu-tabs.is-rotating .menu-tab[aria-selected="true"]::after {
  animation: tabfill var(--rotate-ms, 6000ms) linear forwards;
}
@keyframes tabfill { from { width: 0; } to { width: 100%; } }

.menu-panel { padding-top: var(--s-6); }
.js .menu-panel[hidden] { display: none; }
.menu-panel > .label { display: block; margin-bottom: var(--s-5); }

.dish-list { display: grid; gap: var(--s-5); max-width: 46rem; }
.dish { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4); align-items: baseline; }
.dish-name {
  font-family: var(--font-display);
  font-variation-settings: var(--soft-text);
  font-size: 1.2rem;
  font-weight: 540;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.dish-name::after {
  content: "";
  flex: 1;
  min-width: 2rem;
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-0.25em);
}
.dish-price {
  font-family: var(--font-display);
  font-variation-settings: var(--soft-text);
  font-size: 1.15rem;
  font-weight: 560;
  color: var(--accent);
}
.dish-note { grid-column: 1; color: var(--muted); font-size: var(--t-small); max-width: 40ch; }
.dish-diet { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; margin-left: 0.5em; }

/* tonight's date stamp: rests as "Tonight", JS writes the real date, and it prints */
.menu-date {
  font-family: var(--font-display);
  font-variation-settings: var(--soft-text);
  font-style: italic;
  font-weight: 460;
  font-size: var(--t-h3);
  color: var(--accent);
}
.section-head .menu-date { flex-basis: 100%; margin-top: calc(-1 * var(--s-2)); }
/* on the full-menu banner the stamp hangs indented, off the h1's axis */
.banner .menu-date {
  display: block;
  margin: var(--s-2) 0 var(--s-3) clamp(2rem, 16vw, 13rem);
}

/* the filter bar itself */
.diet-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-6);
}
html:not(.js) .diet-filter { display: none; }
.diet-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.diet-status { flex-basis: 100%; margin: 0; font-size: var(--t-small); color: var(--muted); }
.diet-status:empty { display: none; }
.dish.is-filtered { display: none; }
.diet-empty {
  color: var(--muted);
  font-style: italic;
  font-size: var(--t-small);
  max-width: 44ch;
  padding-top: var(--s-2);
}

.menu-foot {
  margin-top: var(--s-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
}

/* ---------- sourcing: farm rows ---------- */
.farm-rows { border-top: 1px solid var(--line); }
.farm-row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) 2fr auto;
  gap: var(--gutter);
  align-items: baseline;
  padding-block: clamp(1.3rem, 2.8vh, 2rem);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-2) ease;
}
.farm-row:hover { background: var(--bg-2); }
.farm-row h3 { font-size: var(--t-h3); }
.farm-row .farm-goods { color: var(--muted); max-width: 48ch; }

/* ---------- ripe this week: month band ---------- */
.ripe-band { background: var(--bg-2); }
.ripe-band .h2 { margin-top: var(--s-3); }
/* the list leans right on purpose: one deliberate offset in the page's rhythm */
.ripe-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin: var(--s-6) 0 0 clamp(0rem, 9vw, 8rem);
  max-width: 52rem;
}
.ripe-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  font-family: var(--font-display);
  font-variation-settings: var(--soft-text);
  font-size: var(--t-h3);
  font-weight: 470;
}
.ripe-list li::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  flex-shrink: 0;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15C8 8 10 3 15 1 14 8 12 13 8 15Zm0 0C8 9 6 4 1 2c1 6 3 11 7 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15C8 8 10 3 15 1 14 8 12 13 8 15Zm0 0C8 9 6 4 1 2c1 6 3 11 7 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ripe-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) 0 0 clamp(0rem, 9vw, 8rem);
  font-size: var(--t-small);
}

/* ---------- gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.gallery-item { display: grid; gap: var(--s-3); }
.gallery-item:nth-child(1) { grid-column: 1 / span 7; }
.gallery-item:nth-child(2) { grid-column: 8 / span 5; margin-top: var(--s-8); }
.gallery-item:nth-child(3) { grid-column: 3 / span 6; margin-top: calc(-1 * var(--s-6)); }
.gallery-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--parchment-2);
}
.gallery-media img { width: 100%; height: auto; transition: transform var(--dur-4) var(--ease-out); }
.gallery-item:hover .gallery-media img { transform: scale(1.03); }
.gallery-media .ph { position: relative; aspect-ratio: 4 / 3; }
.gallery-item figcaption { color: var(--muted); font-size: var(--t-small); display: flex; gap: var(--s-3); align-items: baseline; }

/* ---------- private dining ---------- */
.private-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.private-media { border-radius: var(--r-2); overflow: hidden; }
.private-media img { width: 100%; height: auto; }
.private-media .ph { aspect-ratio: 4 / 3; }
.private-facts { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.private-facts li { display: flex; gap: var(--s-3); align-items: baseline; }
.private-facts .label { color: var(--accent); min-width: 7.5rem; }

/* ---------- reviews ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.review-card {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
[data-theme="moss"] .review-card { background: var(--moss-2); }
.review-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--soft-text);
  font-style: italic;
  font-weight: 440;
  font-size: 1.2rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.review-card cite { font-style: normal; display: grid; gap: 2px; }
.review-card cite .who { font-weight: 600; font-size: var(--t-small); }

/* ---------- visit block ---------- */
.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table caption { text-align: left; padding-bottom: var(--s-3); }
.hours-table th, .hours-table td {
  text-align: left;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.hours-table th { font-weight: 600; font-size: var(--t-small); }
.hours-table td { color: var(--muted); }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--accent); font-weight: 600; }
.visit-details { display: grid; gap: var(--s-5); }
.visit-details .detail { display: grid; gap: var(--s-1); }
.visit-details a { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- furrow rows (FAQ) ----------
   Questions planted in rows: each one keeps its own furrow line down the left,
   a numbered stake, and the answer turned over underneath it. */
.furrow-field { display: grid; gap: var(--s-2); margin-top: var(--s-6); max-width: 62rem; }
.furrow {
  border-left: 2px solid var(--line);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.furrow.is-turned { border-left-color: var(--accent); background: var(--bg-2); }
.furrow :is(h2, h3, h4) { margin: 0; }
.furrow-ask {
  width: 100%;
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) 1.5rem;
  align-items: baseline;
  gap: var(--s-3);
  padding: clamp(1rem, 2.2vh, 1.45rem) var(--s-4) clamp(1rem, 2.2vh, 1.45rem) var(--s-4);
  text-align: left;
}
.furrow-ask:hover .furrow-q { color: var(--accent); font-style: italic; }
.furrow-no {
  font-family: var(--font-display);
  font-variation-settings: var(--soft-text);
  font-style: italic;
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  transition: color var(--dur-1) ease;
}
.furrow.is-turned .furrow-no { color: var(--accent); }
.furrow-q {
  font-family: var(--font-display);
  font-variation-settings: var(--soft-text);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 500;
  line-height: var(--lh-heading);
  text-wrap: pretty;
  transition: color var(--dur-1) ease;
}
.furrow-mark {
  width: 1.15rem;
  height: 1.15rem;
  align-self: center;
  justify-self: end;
  background: var(--accent);
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15C8 8 10 3 15 1 14 8 12 13 8 15Zm0 0C8 9 6 4 1 2c1 6 3 11 7 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15C8 8 10 3 15 1 14 8 12 13 8 15Zm0 0C8 9 6 4 1 2c1 6 3 11 7 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-90deg) scale(0.86);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.furrow-ask[aria-expanded="true"] .furrow-mark { transform: none; opacity: 1; }
.furrow-answer { overflow: hidden; }
.furrow-answer[hidden] { display: none; }
/* no JS, no toggle: every answer stands open and the sprig stops promising one */
html:not(.js) .furrow-answer[hidden] { display: block; }
html:not(.js) .furrow-mark { display: none; }
html:not(.js) .furrow-ask { cursor: default; }
html:not(.js) .furrow { border-left-color: var(--line-strong); }
.furrow-answer-body {
  padding: 0 var(--s-5) var(--s-5) calc(3.1rem + var(--s-3) + var(--s-4));
  color: var(--muted);
  max-width: 46rem;
}

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.field-hint { font-size: var(--t-small); color: var(--muted); margin: 0; }
.field input,
.field textarea,
.field select {
  font: inherit;
  color: var(--fg);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  padding: var(--s-3);
  transition: border-color var(--dur-1) ease;
  width: 100%;
}
[data-theme="moss"] .field input,
[data-theme="moss"] .field textarea,
[data-theme="moss"] .field select { background: var(--moss-2); color: var(--fg); }
[data-theme="moss"] .field select option { color: var(--moss); background: var(--parchment); }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.field textarea { resize: vertical; min-height: 6rem; }
.field select {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235d6353' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
}
.field.is-invalid input, .field.is-invalid select { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.field-error {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}
.form-errors {
  border: 1.5px solid var(--accent);
  border-radius: var(--r-2);
  padding: var(--s-4) var(--s-5);
}
.form-errors p { margin: 0 0 var(--s-2); font-weight: 600; color: var(--accent); }
.form-errors ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: var(--s-1); }
.form-errors li { display: flex; align-items: baseline; gap: 0.55em; }
/* even the error list keeps the sprig */
.form-errors li::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  flex-shrink: 0;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15C8 8 10 3 15 1 14 8 12 13 8 15Zm0 0C8 9 6 4 1 2c1 6 3 11 7 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15C8 8 10 3 15 1 14 8 12 13 8 15Zm0 0C8 9 6 4 1 2c1 6 3 11 7 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-errors a { color: var(--accent); }
.form-status:empty { display: none; }
.form-status { color: var(--fg); max-width: var(--measure); }
.form[aria-busy="true"] .btn { opacity: 0.6; pointer-events: none; }
/* display:grid would out-rank the UA rule for [hidden], so say it again here:
   the copy-out panel only exists once there is a request inside it */
.form-fallback[hidden] { display: none; }
.form-fallback {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
}
.form-fallback textarea {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--fg);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: var(--s-3);
  width: 100%;
  resize: vertical;
}
[data-theme="moss"] .form-fallback textarea { background: var(--moss-2); }
.form-fallback-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
/* the sure path when scripts never arrive: shown only to html:not(.js) */
.nojs-note { display: none; }
html:not(.js) .nojs-note {
  display: block;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  padding: var(--s-4) var(--s-5);
  color: var(--fg);
  max-width: var(--measure);
  /* the address is longer than a narrow phone: let it break rather than
     push the whole reserve block off the side of the screen */
  overflow-wrap: anywhere;
}
html:not(.js) .nojs-note a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
/* no scripts, no draft: the sentence would be false, so it goes */
html:not(.js) .draft-note { display: none; }
.draft-note {
  font-size: var(--t-small);
  color: var(--muted);
  max-width: var(--measure);
  margin: 0;
}
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- reserve band ---------- */
.reserve-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: var(--s-7);
}
.reserve-aside { display: grid; gap: var(--s-5); justify-items: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-4); }

/* ---------- footer ---------- */
.site-footer { background: var(--bg); color: var(--fg); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--gutter);
  padding-block: var(--s-8) var(--s-7);
  border-top: 1px solid var(--line);
}
.footer-grid > div { min-width: 0; }
.footer-grid h3 { margin-bottom: var(--s-4); }
.footer-grid ul { display: grid; gap: var(--s-2); }
.footer-grid a, .footer-grid .dim { overflow-wrap: anywhere; }
.footer-grid a { text-decoration: none; color: var(--muted); transition: color var(--dur-1) ease; }
.footer-grid a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.footer-brand { display: grid; gap: var(--s-4); justify-items: start; align-content: start; }
.footer-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--muted);
}
.footer-legal a { color: inherit; }

/* ---------- interior banner ---------- */
.banner {
  padding-block: calc(var(--s-8) + var(--s-6)) var(--s-7);
  border-bottom: 1px solid var(--line);
}
.banner .crumbs { display: flex; gap: var(--s-2); font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s-4); }
.banner .crumbs a { color: inherit; text-underline-offset: 3px; }
.banner .h1 { margin-bottom: var(--s-3); }

/* ---------- reveal motion ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity var(--dur-3) ease, transform var(--dur-3) var(--ease-out);
}
.js .reveal.is-inview { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-delay="2"] { transition-delay: 180ms; }
.js .reveal[data-delay="3"] { transition-delay: 270ms; }

/* ---------- styleguide page ---------- */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--gutter); }
.sg-swatch { border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.sg-swatch-color { height: 6.5rem; }
.sg-swatch dl { padding: var(--s-4); display: grid; gap: var(--s-1); margin: 0; }
.sg-swatch dt { font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sg-swatch dd { margin: 0; font-size: var(--t-small); }
.sg-block { padding-block: var(--s-7); border-top: 1px solid var(--line); }
.sg-row { display: grid; grid-template-columns: 14rem 1fr; gap: var(--gutter); align-items: baseline; padding-block: var(--s-4); }
.sg-note { color: var(--muted); max-width: var(--measure); margin-top: var(--s-3); }
.sg-demo { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* ---------- error page ---------- */
.error-hero {
  min-height: calc(100svh - 8rem);
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--s-5);
  justify-items: center;
}
.error-hero .display { font-size: clamp(5rem, 24vw, 15rem); font-style: italic; }
.error-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 63.9rem) {
  .site-nav { display: none; }
  .menu-btn { display: inline-flex; }
  html:not(.js) .site-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: flex-end; }
  html:not(.js) .menu-btn { display: none; }
  .site-header .hours-line { display: none; }
  .header-cta { display: none; }
  html:not(.js) .header-cta { display: none; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: var(--s-8) var(--edge) var(--s-6); }
  .hero-media { min-height: 24rem; order: 2; }
  .res-card {
    position: static;
    transform: none;
    width: auto;
    margin: 0 var(--edge) var(--s-7);
    order: 3;
    grid-template-columns: 1fr 1fr;
  }
  .res-card .btn { grid-column: 1 / -1; }

  .review-grid { grid-template-columns: 1fr; }
  .visit-grid, .private-grid, .reserve-grid { grid-template-columns: 1fr; }
  .farm-row { grid-template-columns: 1fr auto; }
  .farm-row .farm-goods { grid-column: 1 / -1; }
  .gallery-grid .gallery-item,
  .gallery-item:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .gallery-grid { row-gap: var(--s-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--s-6); }
  .sg-row { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .ripe-list, .ripe-note { margin-left: 0; }
  .banner .menu-date { margin-left: 0; }
}

@media (max-width: 40rem) {
  .furrow-ask { grid-template-columns: 2.1rem minmax(0, 1fr) 1.15rem; gap: var(--s-2); padding-inline: var(--s-3); }
  .furrow-answer-body { padding-left: calc(2.1rem + var(--s-2) + var(--s-3)); padding-right: var(--s-3); }
  .res-card { grid-template-columns: 1fr; padding: var(--s-4); }
  .menu-tablist { gap: var(--s-1) var(--s-4); }
  .dish { grid-template-columns: 1fr; }
  .dish-name::after { display: none; }
  .dish-price { order: 3; }
}

/* ---------- print: the living menu becomes the physical menu ---------- */
@media print {
  :root {
    --bg: #fff;
    --bg-2: #fff;
    --fg: #1a2013;
    --muted: #444c3a;
    --accent: #5c2b48;
  }
  body { background: #fff; color: #1a2013; font-size: 11pt; }
  .site-header, .site-footer, .menu-overlay, .skip-link,
  .no-print, .btn, .menu-foot, .divider, .banner .crumbs, .chip { display: none !important; }
  .section { padding-block: 1.5rem; background: #fff; }
  .banner { padding: 0 0 1rem; border-bottom: 2px solid #1a2013; }
  .print-only { display: block !important; }
  .menu-panel, .js .menu-panel[hidden] { display: block !important; padding-top: 1rem; }
  .menu-tablist { display: none; }
  .menu-panel > .label { display: none; }
  .menu-panel::before {
    content: attr(data-course);
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16pt;
    margin: 0.75rem 0 0.5rem;
  }
  .dish-list { gap: 0.6rem; max-width: none; }
  .dish { break-inside: avoid; }
  /* paper never filters: every dish prints, the filter chrome does not */
  .dish.is-filtered { display: grid !important; }
  .diet-filter, .diet-status, .diet-empty, .res-memory { display: none !important; }
  .menu-date { color: #5c2b48; font-size: 13pt; margin-left: 0; }
  .dish-name::after { border-bottom-color: #999; }
  .gallery-grid, .reveal { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; color: inherit; }
}
.print-only { display: none; }

/* ---------- cross-page transitions (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---------- preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .gallery-media img, .furrow, .furrow-mark, .site-nav a, .menu-tab, .chip--diet { transition: none; }
  .gallery-item:hover .gallery-media img { transform: none; }
  .js .menu-tabs.is-rotating .menu-tab[aria-selected="true"]::after { animation: none; width: 100%; }
}

@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .open-dot { border-color: CanvasText; }
  .hours-line.is-open .open-dot { background: CanvasText; }
  .chip--diet[aria-pressed="true"] { background: SelectedItem; color: SelectedItemText; forced-color-adjust: none; }
  .ripe-list li::before, .form-errors li::before, .furrow-mark { background: CanvasText; }
  .furrow.is-turned { border-left-color: Highlight; }
}