/* Fern & Flour, Business tier.
   Same brand as Launch: same logo, same plum and sage, same cream, same twelve
   items at the same prices, same Abel and Source Serif 4. What this tier buys
   is scope and creative development, so the system here is wider than Launch's
   and each kind of page gets its own treatment rather than one card grid
   repeated six times.

   Distinct treatments, as the specification asks:
   menu browsing, editorial storytelling, service explanation, article reading,
   and practical location and contact information. */

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

:root {
  --ink: #121212;
  --ink-soft: #4A433F;
  --ink-faint: #8A817B;
  --plum: #A7496D;
  --plum-deep: #83364F;
  --plum-wash: #F6EAEF;
  --sage: #818B7E;
  --sage-deep: #5D6659;
  --sage-wash: #EDF0EB;
  --cream: #F5EFE6;
  --warm: #EAE6E1;
  --paper: #FFFFFF;
  --rule: color-mix(in srgb, #121212 14%, transparent);
  --rule-strong: color-mix(in srgb, #121212 28%, transparent);

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

  --t--2: 0.78rem;
  --t--1: 0.875rem;
  --t-0: 1.0625rem;
  --t-1: 1.25rem;
  --t-2: clamp(1.4rem, 1.2rem + .9vw, 1.8rem);
  --t-3: clamp(1.8rem, 1.35rem + 2vw, 2.7rem);
  --t-4: clamp(2.3rem, 1.5rem + 3.6vw, 4rem);
  --t-5: clamp(2.8rem, 1.6rem + 5vw, 5.4rem);

  --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;

  --page-max: 1220px;
  --gutter: clamp(20px, 5vw, 60px);
  --measure: 64ch;          /* general reading */
  --measure-article: 34rem; /* article body, tighter on purpose */
  --measure-tight: 44ch;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(18,18,18,.05), 0 14px 34px rgba(18,18,18,.09);

  --ease: cubic-bezier(.2,.8,.2,1);
  --fast: 140ms; --slow: 260ms;

  /* one image ratio set, used everywhere */
  --ratio-wide: 16 / 9;
  --ratio-editorial: 4 / 3;
  --ratio-portrait: 4 / 5;
  --ratio-thumb: 3 / 2;
}

*, *::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, h4 { 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); }
h4 { font-size: var(--t-1); }
p { margin: 0; max-width: var(--measure); }

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
.stack > * + * { margin-top: var(--s-4); }
.lead { font-size: var(--t-1); line-height: 1.55; color: var(--ink-soft); max-width: var(--measure-tight); }
.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), 8vw, var(--s-9)); }
.section--paper { background: var(--paper); }
.section--warm { background: var(--warm); }
.section--sage { background: var(--sage-wash); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--t--1); }

/* ---------- chrome ---------- */
.hdr { position: sticky; top: 0; z-index: 60; 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-4); min-height: 78px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand img { width: 46px; height: 46px; }
.brand b { font-family: var(--display); font-size: 1.4rem; font-weight: 400; letter-spacing: .02em; display: block; }
.brand i { font-style: normal; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: 2px; }
.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s-3); border-radius: var(--r-pill); text-decoration: none; font-family: var(--display); font-size: 1.02rem; letter-spacing: .03em; white-space: nowrap; 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; 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 { 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; }

.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); }
.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); }

.ftr { background: var(--ink); color: var(--cream); padding-block: var(--s-8) var(--s-6); }
.ftr__grid { display: grid; grid-template-columns: 1.5fr 1fr 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; }

/* ---------- 1. hero ---------- */
.hero { padding-block: clamp(var(--s-7), 6vw, var(--s-9)) 0; }
.hero__top { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: end; }
.hero h1 { font-size: var(--t-5); max-width: 12ch; }
.hero__note { border-left: 2px solid var(--plum); padding-left: var(--s-4); }
.hero__strip { margin-top: clamp(var(--s-6), 5vw, var(--s-8)); display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-4); }
.hero__strip img { width: 100%; aspect-ratio: var(--ratio-wide); object-fit: cover; border-radius: var(--r-lg); }
.hero__strip .tall { aspect-ratio: auto; height: 100%; object-fit: cover; }

/* ---------- 2. menu browsing ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.filters button {
  min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong); background: transparent; color: var(--ink);
  font-family: var(--display); font-size: 1.05rem; letter-spacing: .03em; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.filters button:hover { background: var(--warm); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: transparent; }
.filter-count { margin-top: var(--s-4); font-size: var(--t--1); color: var(--ink-soft); }

.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-8); margin-top: var(--s-5); }
.m-item { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.m-item[hidden] { display: none; }
.m-item h3 { font-size: var(--t-2); }
.m-item p { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--t-0); max-width: 42ch; }
.m-item .price { font-family: var(--display); font-size: 1.15rem; color: var(--plum-deep); white-space: nowrap; text-align: right; }
.m-empty { display: none; padding: var(--s-8) 0; text-align: center; color: var(--ink-soft); }
.m-empty[data-show="true"] { display: block; }

/* ---------- 3. editorial storytelling ---------- */
.ed { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: center; }
.ed--flip .ed__media { order: -1; }
.ed__media img { width: 100%; aspect-ratio: var(--ratio-editorial); object-fit: cover; border-radius: var(--r-lg); }
.pull { border-top: 2px solid var(--plum); border-bottom: 2px solid var(--plum); padding: var(--s-5) 0; margin: var(--s-6) 0; font-family: var(--display); font-size: var(--t-2); line-height: 1.25; max-width: 24ch; }
.dropcap::first-letter { float: left; font-family: var(--display); font-size: 3.4em; line-height: .84; padding-right: .08em; color: var(--plum-deep); }

/* ---------- 4. service explanation ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-7); }
.step { counter-increment: step; padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--display); font-size: var(--t--1); letter-spacing: .14em; color: var(--plum-deep); display: block; margin-bottom: var(--s-3); }
.step h3 { font-size: var(--t-1); }
.step p { margin-top: var(--s-2); font-size: var(--t--1); color: var(--ink-soft); }

.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-7); }
.pack { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.pack h3 { font-size: var(--t-2); }
.pack .price { font-family: var(--display); font-size: 1.3rem; color: var(--plum-deep); }
.pack ul { margin: 0; padding-left: 1.1em; font-size: var(--t--1); color: var(--ink-soft); }
.pack li + li { margin-top: var(--s-1); }

/* ---------- 5. article reading ---------- */
.art-hero { padding-block: clamp(var(--s-7), 6vw, var(--s-8)) var(--s-6); }
.art-meta { font-family: var(--display); font-size: var(--t--1); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.art-figure img { width: 100%; aspect-ratio: var(--ratio-wide); object-fit: cover; border-radius: var(--r-lg); }
.art-figure figcaption { margin-top: var(--s-3); font-size: var(--t--1); color: var(--ink-faint); }
.art-body { max-width: var(--measure-article); margin-inline: auto; }
.art-body > * + * { margin-top: var(--s-5); }
.art-body p { max-width: none; }
.art-body h2 { font-size: var(--t-2); margin-top: var(--s-7); }
.art-next { border-top: 1px solid var(--rule); margin-top: var(--s-8); padding-top: var(--s-6); }

.j-list { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.j-card { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-6); align-items: center; padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule); text-decoration: none; }
.j-card img { width: 100%; aspect-ratio: var(--ratio-thumb); object-fit: cover; border-radius: var(--r-md); }
.j-card h3 { font-size: var(--t-2); margin-top: var(--s-2); }
.j-card p { margin-top: var(--s-2); color: var(--ink-soft); }
.j-card .more { margin-top: var(--s-3); display: inline-block; color: var(--plum-deep); text-decoration: underline; text-underline-offset: 4px; }
.j-card:hover h3 { color: var(--plum-deep); }

/* ---------- 6. practical information ---------- */
.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-underline-offset: 4px; }
.mapish { margin-top: var(--s-7); aspect-ratio: var(--ratio-wide); border-radius: var(--r-lg); background: repeating-linear-gradient(45deg, var(--warm) 0 14px, var(--cream) 14px 28px); display: grid; place-items: center; border: 1px solid var(--rule); }
.mapish span { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: var(--t--1); color: var(--ink-soft); background: var(--paper); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s-5); max-width: 40rem; }
.grp { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.grp legend { font-family: var(--display); font-size: var(--t-1); padding: 0 0 var(--s-3); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.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 var(--rule-strong); 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: 130px; 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 { display: none; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-md); border: 1px solid; }
.status[data-show="true"] { display: flex; }
.status--ok { background: var(--sage-wash); 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.2rem; 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: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; opacity: .5; border-top-color: var(--plum); } }

/* ---------- the connected workflow, shown as records ---------- */
.flowsim { margin-top: var(--s-7); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.flowsim__head { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; background: var(--warm); }
.flowsim__head p { font-size: var(--t--1); color: var(--ink-soft); max-width: 52ch; }
.flowsim__head strong { font-family: var(--display); font-weight: 400; font-size: 1.1rem; display: block; color: var(--ink); }
.rec { display: grid; grid-template-columns: 150px 1fr auto; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); align-items: center; font-size: var(--t--1); }
.rec:last-child { border-bottom: 0; }
.rec[data-state="pending"] { opacity: .42; }
.rec__when { font-family: var(--display); letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; font-size: var(--t--2); }
.rec__what strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.05rem; }
.rec__what span { color: var(--ink-soft); }
.chip { font-family: var(--display); font-size: var(--t--2); letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.chip--done { background: var(--sage-wash); color: var(--sage-deep); }
.chip--wait { background: var(--warm); color: var(--ink-soft); }
.chip--now { background: var(--plum); color: var(--paper); }

.demo-note { margin-top: var(--s-5); padding: var(--s-4); border: 1px dashed var(--rule-strong); border-radius: var(--r-sm); font-size: var(--t--1); color: var(--ink-soft); max-width: 40rem; }
.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; }

/* the AI capability has a reserved place and is plainly not built */
.soon { margin-top: var(--s-7); border: 1px dashed var(--rule-strong); border-radius: var(--r-lg); padding: var(--s-6); }
.soon__tag { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--display); font-size: var(--t--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.soon__tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--plum); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .sheet[data-open="true"] { display: block; }
  .hero__top, .hero__strip, .ed, .menu-grid, .packs, .facts, .ftr__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .ed--flip .ed__media { order: 0; }
  .hero__strip .tall { aspect-ratio: var(--ratio-wide); height: auto; }
  .j-card { grid-template-columns: 1fr; gap: var(--s-4); }
  .rec { grid-template-columns: 1fr; gap: var(--s-2); }
  .rec__when { order: -1; }
}
@media (max-width: 620px) {
  .steps, .two { grid-template-columns: 1fr; }
  .m-item { grid-template-columns: 1fr; }
  .m-item .price { text-align: left; }
}

/* availability, which is what makes the menu's empty state reachable */
.avail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); max-width: none; }
.avail label { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; padding-right: var(--s-2); font-family: var(--display); font-size: 1.05rem; letter-spacing: .03em; cursor: pointer; }
.avail input { width: 20px; height: 20px; accent-color: var(--plum); cursor: pointer; }
.sold { font-family: var(--display); font-size: var(--t--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 6px 12px; }
.m-item[data-sold="true"] h3 { color: var(--ink-soft); }
.rec[data-new="true"] { background: var(--plum-wash); }

/* menu categories: real sections with real headings, rather than a flat list */
.m-cat + .m-cat { margin-top: clamp(var(--s-7), 5vw, var(--s-9)); }
.m-cat[hidden] { display: none; }
.m-cat__head { font-size: var(--t-2); padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); }
.m-cat .menu-grid { margin-top: 0; }