/* Organic — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — rounded frame: everything softens, small controls go pill — */
.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }


/* ══════════════════════════════════════════════════════════════════════════
   Bread Bawks — page styles
   ══════════════════════════════════════════════════════════════════════════ */

body { background: #f5ead8; text-wrap: pretty; overflow-x: hidden; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); text-decoration: underline; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--color-accent-700);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--color-accent-700); color: #fff;
  padding: 10px 18px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .15s ease;
}
.skip-link:focus { top: 0; text-decoration: none; color: #fff; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

/* ── Hero ─────────────────────────────────────────────────────────────────
   The nav words and the SHOP NOW button are painted into the artwork, so the
   invisible hotspots must track the image, not the container. Locking the box
   to the image's own 16:9 keeps every percentage aligned at any width. */
.hero { position: relative; aspect-ratio: 1600 / 900; background: #efe6d4; }
.hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero-nav a {
  position: absolute;
  left: var(--l); top: var(--t); width: var(--w); height: var(--h);
  font-size: 0;
  border-radius: 8px;
}
.hero-nav a:hover { background: rgb(140 73 26 / 0.10); }
.hero-nav a:focus-visible { background: rgb(140 73 26 / 0.14); }

/* Under ~780px the painted nav is far too small to read or tap, so a real
   nav takes over and the hotspots step aside. */
.mobile-nav { display: none; }
@media (max-width: 780px) {
  /* Which hero hotspots survive at this size is decided further down. */
  .mobile-nav {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
    background: #efe6d4; padding: 14px clamp(12px, 4vw, 24px);
    border-bottom: 1px solid var(--color-divider);
    position: sticky; top: 0; z-index: 20;
  }
  .mobile-nav a {
    font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-accent-700); padding: 6px 2px;
  }
}

/* ── Sections ─────────────────────────────────────────────────────────────*/
.section { padding: clamp(48px, 6vw, 80px) 0 0; }
.section-title {
  font-family: var(--font-heading); font-size: clamp(30px, 3.4vw, 40px);
  margin: 0; letter-spacing: .02em; color: var(--color-accent-700);
  -webkit-text-stroke: .6px var(--color-accent-700);
}
.lede { font-size: 16px; line-height: 1.6; margin: 12px 0 28px; max-width: 52ch; }

.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.price { font-family: var(--font-heading); font-size: 24px; color: var(--color-accent-700); }

.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.split h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 14px 0 0; }
.split p  { font-size: 16px; line-height: 1.6; max-width: 46ch; margin: 14px 0 0; }
.split figure { margin: 0; }
.split img {
  display: block; width: 100%; object-fit: cover;
  /* height:auto is what lets aspect-ratio win — the width/height attributes
     on the tag otherwise pin the box to the file's own pixel height. */
  height: auto; aspect-ratio: 4 / 3;
  border-radius: 24px;
}

/* ── Booking ──────────────────────────────────────────────────────────────*/
.step {
  font-weight: 600; font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; margin: 28px 0 10px;
}
.step:first-of-type { margin-top: 0; }

.day-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.day {
  text-align: left; cursor: pointer; padding: 14px 16px; font: inherit;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-300); background: var(--color-bg);
  color: var(--color-text);
}
.day[aria-pressed="true"] { border: 2px solid var(--color-accent); background: var(--color-accent-100); padding: 13px 15px; }
.day[disabled] { cursor: not-allowed; background: var(--color-neutral-100); color: var(--color-neutral-500); }
.day .d-label { display: block; font-family: var(--font-heading); font-size: 15px; }
.day .d-meta  { display: block; font-size: 12px; margin-top: 6px; }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  padding: 12px 22px; border-radius: 999px; font: inherit; cursor: pointer;
  border: 1px solid var(--color-neutral-300); background: var(--color-bg);
  color: var(--color-text);
}
.pill.chip { padding: 10px 18px; }
.pill[aria-pressed="true"] { border: 2px solid var(--color-accent); background: var(--color-accent-100); padding: 11px 21px; }
.pill.chip[aria-pressed="true"] { padding: 9px 17px; }
.pill[disabled] { cursor: not-allowed; background: var(--color-neutral-100); color: var(--color-neutral-500); }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 560px; }
.field-error { color: #9b2c1f; font-size: 13px; margin: 6px 0 0; }
.input[aria-invalid="true"] { border-color: #9b2c1f; }

.form-status { margin: 16px 0 0; font-size: 15px; }
.form-status[data-kind="error"] { color: #9b2c1f; }

.sun-mark { position: absolute; right: -60px; top: 20px; opacity: .35; pointer-events: none; }
@media (max-width: 900px) { .sun-mark { display: none; } }

/* ── Footer ───────────────────────────────────────────────────────────────
   The wave is anchored to the footer's top edge so it follows the content
   instead of sitting at a fixed page offset. */
.site-footer { position: relative; background: #22434c; color: #f5ead8; margin-top: 120px; }
.footer-wave {
  position: absolute; left: 0; bottom: 100%; width: 100%; height: 120px;
  display: block; pointer-events: none;
}
.footer-inner {
  position: relative; max-width: 1160px; margin: 0 auto;
  padding: clamp(32px, 4vw, 52px) clamp(20px, 5vw, 64px);
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: baseline; justify-content: space-between;
}
.footer-brand { font-family: var(--font-heading); font-size: 26px; margin: 0; }
.footer-kicker { font-size: 14px; letter-spacing: .16em; text-transform: uppercase; margin: 8px 0 0; color: #dccfae; }
.footer-note { font-size: 13px; margin: 0; max-width: 44ch; color: #dccfae; }
.site-footer a { color: #f0e2c4; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.daily { font-family: var(--font-heading); font-size: 20px; margin: 8px 0 0; }
.quote { font-family: var(--font-heading); font-size: 18px; margin: 20px 0 0; }
.card-kicker + .quote { margin-top: 10px; }

/* Component classes set `display`, which beats the UA rule for [hidden].
   Without this, anything toggled via el.hidden stays on screen. */
[hidden] { display: none !important; }

/* .card is a flex column, so a button in it would otherwise stretch edge to edge. */
#book-another { align-self: flex-start; }

.lead-note { font-size: 14px; color: var(--color-neutral-700); margin: -4px 0 12px; }

/* ── Touch sizing ─────────────────────────────────────────────────────────
   iOS Safari zooms the page when a focused input is under 16px, which throws
   the layout off mid-order; 16px keeps it still. 44px is the minimum
   comfortable tap target. */
@media (max-width: 780px) {
  .input { font-size: 16px; min-height: 44px; padding: 10px 12px; }
  .pill, .btn { min-height: 44px; }
  .btn { font-size: 15px; padding-inline: 20px; }
  .day { min-height: 44px; padding: 12px 14px; }
  .day[aria-pressed="true"] { padding: 11px 13px; }
  .mobile-nav a { min-height: 40px; display: flex; align-items: center; }

  /* Anchor targets must clear the sticky nav. */
  #top, #menu, #farm, #book, #contact { scroll-margin-top: 70px; }

  .fields { grid-template-columns: 1fr; }
  .day-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ── Mobile nav + hero tap target ─────────────────────────────────────────*/
@media (max-width: 780px) {
  .mobile-nav { gap: 0 12px; padding: 8px 12px; }
  .mobile-nav a { font-size: 12px; letter-spacing: .06em; padding: 6px 4px; }
  .mobile-nav .nav-cta {
    background: var(--color-accent-700); color: #f9f4ed;
    border-radius: 999px; padding: 6px 14px;
  }

  /* The painted nav words are a few pixels tall at this size — the real nav
     above covers them. Only SHOP NOW stays live, grown to a tappable height
     around the middle of the painted button. */
  .hero-nav a { display: none; }
  .hero-nav a[href="#book"] {
    display: block;
    top: calc(var(--t) + var(--h) / 2);
    height: 44px;
    margin-top: -22px;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Contact form ─────────────────────────────────────────────────────────*/
.contact-form { max-width: 620px; }
select.input { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23645c50' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
textarea.input { min-height: 120px; }
@media (max-width: 780px) { select.input, textarea.input { font-size: 16px; } }

/* The system pills every .input, which is right for single-line controls but
   curves the first line of a textarea out of view. */
textarea.input { border-radius: var(--radius-md); padding: 12px 14px; }

/* Pill-shaped inputs curve away at both ends, so text needs to clear the
   curve or the first and last characters sit in (or under) it. */
.input { padding-inline: 20px; }
select.input { padding-right: 38px; }
textarea.input { padding-inline: 16px; }
@media (max-width: 780px) {
  .input { padding: 10px 20px; }
  select.input { padding-right: 38px; }
  textarea.input { padding: 12px 16px; }
}

/* The system pills every .input. That is right for short, fixed-width
   controls, but a name or an address overflows — and against a pill the
   overflow vanishes into the curve and reads as a bug. Text fields get a
   rounded rectangle so anything too long clips against a near-straight edge
   the way people expect. Buttons, chips and tags stay pills. */
.input { border-radius: var(--radius-md); }

/* ── Location picker ──────────────────────────────────────────────────────*/
.map-block { margin-top: 18px; max-width: 620px; }
.map-label { font-size: 14px; margin: 0 0 8px; color: var(--color-neutral-700); }
.map {
  height: 320px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-neutral-300); background: var(--color-neutral-200);
}
.map:focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 3px; }
.map-hint { font-size: 13px; margin: 8px 0 0; color: var(--color-neutral-700); }
.map-hint[data-kind="ok"]    { color: var(--color-accent-2-700); font-weight: 600; }
.map-hint[data-kind="error"] { color: #9b2c1f; font-weight: 600; }
.leaflet-container { font: inherit; }
/* The pin sits under the fingertip on touch, so keep the hint clear of it. */
@media (max-width: 780px) { .map { height: 260px; } }

/* Step 3 spacing: the blurb needs air under the chips, and the map needs
   air before the next step. */
#fulfil-note { margin: 14px 0 0; max-width: 46ch; }
.map-block { margin-top: 14px; margin-bottom: 26px; }
/* Leaflet's credit line runs off a narrow map otherwise. */
.leaflet-control-attribution { font-size: 10px; max-width: 100%; }