/* Fern & Flour, Launch tier.
   A new build, so this is its own design system rather than the template the
   Refresh worked inside. The brand is unchanged: same logo, same plum and sage,
   same cream, same content and prices. What changes is that the composition and
   the type are designed for this business.

   Two families. Abel stays because it is the brand's display face. The
   monospace the old site set its paragraphs in is gone, because body copy in a
   coding face at 13px is the readability problem the Refresh had to report and
   could not fix inside its scope. */

@font-face {
  font-family: 'Abel';
  src: url('../../shared/fonts/abel-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../../shared/fonts/source-serif-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../../shared/fonts/source-serif-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* brand colour, unchanged */
  --ink: #121212;
  --ink-soft: #4A433F;
  --plum: #A7496D;
  --plum-deep: #83364F;
  --sage: #818B7E;
  --sage-deep: #5D6659;
  --cream: #F5EFE6;
  --warm: #EAE6E1;
  --paper: #FFFFFF;
  --rule: color-mix(in srgb, #121212 14%, transparent);

  /* type */
  --display: 'Abel', 'Arial Narrow', sans-serif;
  --body: 'Source Serif 4', Georgia, serif;

  --t--1: 0.875rem;                          /* 14px, labels */
  --t-0: 1.0625rem;                          /* 17px, body */
  --t-1: 1.25rem;                            /* 20px, lead */
  --t-2: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  --t-3: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --t-4: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);

  /* one spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* widths */
  --page-max: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 62ch;
  --measure-tight: 42ch;

  /* borders, radii, shadow */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(18,18,18,.05), 0 12px 32px rgba(18,18,18,.09);

  /* motion, restrained and useful */
  --ease: cubic-bezier(.2,.8,.2,1);
  --fast: 140ms;
  --slow: 260ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-0);
  line-height: 1.65;
  font-synthesis: none;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: var(--r-sm); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: .005em; }
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-2); }
p { margin: 0; max-width: var(--measure); }

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--s-4); }
.lead { font-size: var(--t-1); line-height: 1.55; color: var(--ink-soft); }
.eyebrow {
  font-family: var(--display); font-size: var(--t--1); letter-spacing: .18em;
  text-transform: uppercase; color: var(--plum-deep);
}
.section { padding-block: clamp(var(--s-8), 9vw, var(--s-10)); }
.section--warm { background: var(--warm); }
.section--paper { background: var(--paper); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand img { width: 46px; height: 46px; }
.brand b { font-family: var(--display); font-size: 1.4rem; font-weight: 400; letter-spacing: .02em; }
.brand span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.nav { display: flex; align-items: center; gap: var(--s-2); }
.nav a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s-4);
  border-radius: var(--r-pill); text-decoration: none; font-family: var(--display);
  font-size: 1.05rem; letter-spacing: .04em; transition: background var(--fast) var(--ease);
}
.nav a:hover { background: var(--warm); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--cream); }
.burger { display: none; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-pill); background: transparent; font-family: var(--display); font-size: 1rem; cursor: pointer; }
.sheet { display: none; border-top: 1px solid var(--rule); background: var(--cream); }
.sheet a { display: block; min-height: 52px; display: flex; align-items: center; padding: 0 var(--gutter); border-bottom: 1px solid var(--rule); text-decoration: none; font-family: var(--display); font-size: 1.15rem; }

/* ---------- buttons ---------- */
.btn {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0 var(--s-6); border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: var(--display); font-size: 1.1rem; letter-spacing: .03em; text-decoration: none;
  cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn--primary { background: var(--plum); color: var(--paper); }
.btn--primary:hover { background: var(--plum-deep); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { background: var(--warm); border-color: transparent; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- hero: an asymmetric composition, not text over a photo ---------- */
.hero { padding-block: clamp(var(--s-7), 6vw, var(--s-9)); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: center; }
.hero h1 { max-width: 13ch; }
.hero__lead { margin-top: var(--s-5); max-width: 38ch; }
.hero__acts { margin-top: var(--s-6); }
.hero__status {
  margin-top: var(--s-6); display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--paper);
  border: 1px solid var(--rule); font-size: var(--t--1);
}
.hero__status i { width: 9px; height: 9px; border-radius: 50%; background: var(--sage); flex: none; }
.hero__art { position: relative; }
.hero__art::before {
  content: ''; position: absolute; inset: auto -18px -18px auto;
  width: 62%; height: 68%; background: var(--plum); border-radius: var(--r-lg); z-index: 0;
}
.hero__art img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* ---------- featured items ---------- */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-7); }
.card { background: var(--paper); border-radius: var(--r-md); padding: var(--s-5); border: 1px solid var(--rule); }
.card h3 { font-size: var(--t-2); }
.card p { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--t-0); }
.price { font-family: var(--display); font-size: 1.15rem; color: var(--plum-deep); letter-spacing: .03em; }

/* ---------- editorial split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: center; }
.split--flip .split__media { order: -1; }
.split__media img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-lg); }

/* ---------- menu ---------- */
.menu-group + .menu-group { margin-top: var(--s-8); }
.menu-group h2 { padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); }
.menu-item { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.menu-item h3 { font-size: var(--t-2); }
.menu-item p { margin-top: var(--s-2); color: var(--ink-soft); max-width: 54ch; }
.menu-item .price { white-space: nowrap; text-align: right; }

/* ---------- visit ---------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-7); }
.fact { padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.fact dt { font-family: var(--display); font-size: var(--t--1); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.fact dd { margin: var(--s-3) 0 0; font-size: var(--t-1); line-height: 1.5; }
.fact a { min-height: 44px; display: inline-flex; align-items: center; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- form ---------- */
.form { display: grid; gap: var(--s-5); max-width: 34rem; }
.field label { display: block; font-family: var(--display); font-size: 1.05rem; letter-spacing: .04em; margin-bottom: var(--s-2); }
.field .hint { font-size: var(--t--1); color: var(--ink-soft); margin-bottom: var(--s-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--t-0);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plum) 28%, transparent); }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: #B3261E; }
.err { display: none; margin-top: var(--s-2); color: #8C1D18; font-size: var(--t--1); }
.field[data-invalid="true"] .err { display: block; }

/* status: one visual language for the three outcomes */
.status { display: none; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); border: 1px solid; font-size: var(--t-0); }
.status[data-show="true"] { display: flex; }
.status--ok { background: #EDF4EE; border-color: #A8C4AC; color: #1E3D24; }
.status--bad { background: #FBECEA; border-color: #E0B4AE; color: #6E1B14; }
.status--busy { background: var(--warm); border-color: var(--rule); color: var(--ink-soft); }
.status strong { font-family: var(--display); font-weight: 400; font-size: 1.15rem; display: block; }
.status p { margin-top: var(--s-1); font-size: var(--t--1); max-width: none; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--plum); border-top-color: transparent; animation: spin .7s linear infinite; flex: none; margin-top: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; border-top-color: var(--plum); opacity: .5; } }

.demo-note { margin-top: var(--s-4); padding: var(--s-4); border: 1px dashed color-mix(in srgb, var(--ink) 34%, transparent); border-radius: var(--r-sm); font-size: var(--t--1); color: var(--ink-soft); }
.demo-note b { font-family: var(--display); font-weight: 400; letter-spacing: .04em; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--plum-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: var(--cream); padding-block: var(--s-8) var(--s-6); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); }
.ftr h3 { font-size: var(--t--1); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 62%, transparent); }
.ftr a { color: inherit; min-height: 40px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.ftr__note { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent); font-size: var(--t--1); color: color-mix(in srgb, var(--cream) 70%, transparent); }
.ftr__note p { max-width: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .sheet[data-open="true"] { display: block; }
  .hero__grid, .split, .feat, .facts, .ftr__grid { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  /* mobile gets its own crop, not the desktop one squashed */
  .hero__art img { aspect-ratio: 3 / 2; }
  .split__media img { aspect-ratio: 3 / 2; }
  .hero__art::before { inset: auto -10px -10px auto; width: 55%; height: 55%; }
  .feat { gap: var(--s-4); }
  .menu-item { grid-template-columns: 1fr; }
  .menu-item .price { text-align: left; }
}