/* =============================================================
   CONTENT PAGES — the blog index and post, our story, contact and
   complaints, refunds, privacy, rate your order. Round 2, 30 Sep 2026.

   Loaded after benaam.css by those seven pages only (fonts.css →
   benaam.css → this file). Sign in has its own small css/signin.css, to
   stay inside its page-weight budget. These rules used to sit in
   benaam.css's standalone section, which every customer page downloads;
   the menu page paid for the blog's styles. Tracking stays there.

   The look: a printed kitchen ledger, not a stack of white cards.
   Bricolage for headings, DM Sans for reading, hairline rules and
   numbered sections instead of boxes, marigold only for the one thing
   that is "you are here" or "do this next". The owner called a rounded
   box with a left accent bar "very generic" (30 Sep) — nothing here uses
   one: the current section is marked by its number turning marigold.
   ============================================================= */

body:is(.p-policy, .p-blog, .p-review) .eyebrow { color: var(--accent-ink); }
.c-display, .doc-head h1, .journal-head h1, .post-title, .p-review h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; color: var(--text);
}

/* ---------------------------------------------------------------
   Long-form pages: head, section navigation, numbered sections
   --------------------------------------------------------------- */
.doc { padding-block: var(--sp-8) var(--sp-12); }
.doc-head { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-8); }
.doc-head .eyebrow { margin: 0; }
.doc-head h1 { font-size: clamp(2.25rem, 7vw, 4.25rem); max-width: 15ch; margin: 0; }
.doc-head .lead { font-size: var(--fs-18); line-height: 1.55; max-width: 48ch; color: var(--text-2); }
.doc-head__aside { display: grid; gap: var(--sp-3); }
.doc-head .policy-version { margin: 0; color: var(--text-3); font-size: var(--fs-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.doc-head .policy-version + .policy-version { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-13); max-width: 52ch; }

.doc-grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.doc-body { counter-reset: sec; min-width: 0; }

/* "On this page": a folded list on phones, a sticky index on desktop. */
.doc-toc { border-bottom: 1px solid var(--line); }
.doc-toc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 48px; cursor: pointer; list-style: none;
  font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
}
.doc-toc > summary::-webkit-details-marker { display: none; }
.doc-toc > summary::after {
  content: ""; width: 8px; height: 8px; margin-right: 4px;
  border: solid var(--text-2); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.doc-toc[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.doc-toc ol { list-style: none; margin: 0 0 var(--sp-4); padding: 0; counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a {
  display: grid; grid-template-columns: 32px 1fr; align-items: baseline;
  min-height: 40px; padding: 9px 0; border-top: 1px solid var(--line);
  color: var(--text-2); font-size: var(--fs-14); line-height: 1.35; text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.doc-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--text-3); font-size: var(--fs-12); font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-toc a:hover { color: var(--text); }
.doc-toc a[aria-current="true"] { color: var(--text); font-weight: 600; }
.doc-toc a[aria-current="true"]::before { color: var(--accent-ink); }

/* Sections: a rule above, the number above the heading. */
.policy-section { padding-block: var(--sp-8); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.doc-body > .policy-section:first-child { border-top: 0; padding-top: var(--sp-2); }
.doc-body > .policy-section { counter-increment: sec; }
.policy-section h2 { font: 700 clamp(1.5rem, 3.2vw, 2rem)/1.15 var(--font-display); letter-spacing: -.025em; margin-bottom: var(--sp-4); max-width: 22ch; }
.doc-body > .policy-section > h2::before {
  content: counter(sec, decimal-leading-zero); display: block; margin-bottom: var(--sp-3);
  font: 600 var(--fs-13)/1 var(--font-ui); letter-spacing: .08em; color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.policy-section h3 { font-size: var(--fs-16); margin: var(--sp-5) 0 var(--sp-2); }
.policy-section p, .policy-section li, .policy-section dd { font-size: 1.0625rem; line-height: 1.7; color: var(--text); }
.policy-section p { max-width: 68ch; }
.policy-section p + p, .policy-section p + ul, .policy-section ul + p, .policy-section dl + p, .policy-section p + dl { margin-top: var(--sp-4); }
/* Links in running text only. A button inside a section (Our story's "See
   what we cook") keeps its own colours: this rule out-ranked .btn--primary
   and put cream text on marigold in the dark theme (1.65:1). */
.policy-section a:not([class*="btn"]) { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.policy-section a:not([class*="btn"]):hover { color: var(--accent-ink); }
/* A phone number is read and dialled as one thing: never "+91" on one line
   and the rest on the next. */
.policy-section a[href^="tel:"] { white-space: nowrap; }
.policy-section code { font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); }
.policy-bullets, .policy-section > ul { margin: 0; padding-left: 1.25em; max-width: 68ch; }
.policy-bullets li + li, .policy-section > ul li + li { margin-top: var(--sp-3); }
.policy-bullets li::marker, .policy-section > ul li::marker { color: var(--accent-ink); }

/* A term and its meaning, ruled like a ledger. */
.policy-list { margin: 0; max-width: 72ch; }
.policy-list dt { padding-top: var(--sp-4); border-top: 1px solid var(--line); font-weight: 700; color: var(--text); }
.policy-list dt:first-child { border-top: 0; padding-top: 0; }
.policy-list dd { margin: var(--sp-1) 0 var(--sp-4); color: var(--text-2); }
.legal-facts { display: grid; margin: 0; max-width: 72ch; }
.legal-facts dt { padding-top: var(--sp-3); font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.legal-facts dd { margin: 2px 0 0; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); color: var(--text); font-weight: 500; }
.legal-facts + p, p + .legal-facts { margin-top: var(--sp-5); }

@media (min-width: 768px) {
  .legal-facts { grid-template-columns: 180px minmax(0, 1fr); }
  .legal-facts dt, .legal-facts dd { padding-block: var(--sp-3); border-bottom: 1px solid var(--line); margin: 0; }
  .policy-list { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--sp-6); }
  .policy-list dt, .policy-list dd { margin: 0; padding-block: var(--sp-4); border-top: 1px solid var(--line); }
  .policy-list dt:first-child, .policy-list dt:first-child + dd { border-top: 0; padding-top: 0; }
}
@media (min-width: 1024px) {
  .doc { padding-top: var(--sp-12); }
  .doc-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-12); align-items: end; padding-bottom: var(--sp-10); }
  .doc-head > .eyebrow { grid-column: 1 / -1; }
  .doc-head > h1 { grid-column: 1; }
  .doc-head__aside { grid-column: 2; padding-bottom: 6px; }
  .doc-grid { grid-template-columns: 232px minmax(0, 1fr); column-gap: var(--sp-16); margin-top: 0; }
  .doc-toc { position: sticky; top: calc(var(--header-h) + var(--sp-8)); align-self: start; border: 0; padding-top: var(--sp-8); max-height: calc(100vh - var(--header-h) - var(--sp-12)); overflow-y: auto; }
  .doc-toc > summary { pointer-events: none; min-height: 0; margin-bottom: var(--sp-3); color: var(--text-3); }
  .doc-toc > summary::after { display: none; }
  .doc-body > .policy-section:first-child { padding-top: var(--sp-8); }
  .policy-section { padding-block: var(--sp-10); }
}

/* ---------------------------------------------------------------
   Our story — chapters, the fresh list, the visit panel
   --------------------------------------------------------------- */
.story-photo { margin: var(--sp-6) 0 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story .policy-section p { max-width: 62ch; }
.story-list { list-style: none; counter-reset: fresh; margin: var(--sp-5) 0; padding: 0; max-width: 62ch; }
.story-list li {
  counter-increment: fresh; display: grid; grid-template-columns: 48px 1fr; align-items: baseline;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
  font: 600 var(--fs-18)/1.4 var(--font-display); letter-spacing: -.01em; color: var(--text);
}
.story-list li::before { content: counter(fresh); font: 800 var(--fs-24)/1 var(--font-display); color: var(--accent-ink); }
/* The visit: the same ruled ledger as the legal pages, not a tinted box —
   the address, hours and phone set large enough to read off a phone. */
.story-visit > p { font: 600 var(--fs-20)/1.35 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.story-visit .legal-facts { margin-top: var(--sp-5); border-top-width: 2px; }
.story-visit .legal-facts dd { font-size: var(--fs-18); }
.story-visit .btn--primary { margin-top: var(--sp-6); }
@media (min-width: 768px) { .story-photo { aspect-ratio: 21 / 9; } }
@media (min-width: 1024px) {
  .story .doc-body > .policy-section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--sp-12); padding-block: var(--sp-12); }
  .story .doc-body > .policy-section > h2 { grid-column: 1; grid-row: 1 / span 20; align-self: start; position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
  .story .doc-body > .policy-section > :not(h2) { grid-column: 2; }
  .story .doc-body > .policy-section:first-child { padding-top: var(--sp-12); }
}

/* ---------------------------------------------------------------
   The journal (blog index)
   --------------------------------------------------------------- */
.journal { padding-block: var(--sp-8) var(--sp-12); }
.journal-head { display: grid; gap: var(--sp-3); padding-bottom: var(--sp-6); }
.journal-head .eyebrow { margin: 0; }
.journal-head h1 { font-size: clamp(2.75rem, 11vw, 6rem); margin: 0; }
.journal-head .blog-hero-subtitle { max-width: 44ch; color: var(--text-2); font-size: var(--fs-18); line-height: 1.5; }

/* Kind, search and tags: one quiet ruled bar. */
.journal-controls { display: grid; gap: var(--sp-3); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
.journal-kinds { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; margin-inline: -4px; }
.journal-kinds::-webkit-scrollbar { display: none; }
.p-blog .filter-tab-btn {
  min-height: 44px; padding: 0 10px; border: 0; border-radius: 0; background: none;
  color: var(--text-2); font-size: var(--fs-16); font-weight: 600;
  box-shadow: inset 0 -2px 0 transparent;
}
.p-blog .filter-tab-btn .ico { width: 16px; height: 16px; color: var(--text-3); }
.p-blog .filter-tab-btn:hover { color: var(--text); background: none; }
.p-blog .filter-tab-btn.active { background: none; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.p-blog .filter-tab-btn.active .ico { color: var(--accent-ink); }
.journal-search { position: relative; }
.journal-search .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; color: var(--text-3); pointer-events: none; }
.journal-search .search-input { padding-left: 44px; }
.tags-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-1); }
.tags-bar-label { margin-right: var(--sp-2); font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.p-blog .tag-chip {
  min-height: 40px; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text-2); font-size: var(--fs-14); font-weight: 500;
}
.p-blog .tag-chip small { margin-left: 3px; color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.p-blog .tag-chip:hover { background: var(--surface-2); color: var(--text); }
.p-blog .tag-chip.active { background: none; color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }

.section-heading { margin: 0 0 var(--sp-4); font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* The lead story: the photograph carries the page. */
.featured-section { padding-top: var(--sp-8); }
.p-blog .featured-card { display: grid; gap: var(--sp-5); color: inherit; text-decoration: none; }
.p-blog .featured-img-wrap { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.p-blog .featured-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.p-blog .featured-card-body { display: grid; gap: var(--sp-3); align-content: center; }
.p-blog .featured-card-title { font: 800 clamp(1.875rem, 4.4vw, 3.25rem)/1.04 var(--font-display); letter-spacing: -.035em; }
.p-blog .featured-card-excerpt { color: var(--text-2); font-size: var(--fs-18); line-height: 1.55; max-width: 46ch; }
.journal-more { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-2); font-weight: 700; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.card-kind { font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.card-meta-row { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); color: var(--text-3); font-size: var(--fs-13); }
@media (hover: hover) {
  .p-blog .featured-card:hover .featured-img, .post-card:hover .post-card-img { transform: scale(1.03); }
  .p-blog .featured-card:hover .featured-card-title, .post-card:hover .post-card-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); }
}

/* Everything else: ruled rows — text first, a small photograph beside it. */
.posts-grid-section { padding-top: var(--sp-10); }
.posts-grid { display: grid; }
.post-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: var(--sp-4); align-items: start;
  padding-block: var(--sp-5); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.post-card-img-wrap { grid-column: 2; grid-row: 1; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); }
.post-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.post-card-body { grid-column: 1; grid-row: 1; display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.post-card-title { font: 700 var(--fs-20)/1.2 var(--font-display); letter-spacing: -.02em; }
.post-card-excerpt { color: var(--text-2); font-size: var(--fs-14); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card--skel { min-height: 136px; }
.post-card--skel .skeleton { grid-column: 1 / -1; border-radius: var(--r-sm); }
.journal-error { display: grid; justify-items: start; gap: var(--sp-3); padding-block: var(--sp-8); color: var(--text-2); }
.p-blog .empty-state { display: grid; justify-items: start; gap: var(--sp-3); padding: var(--sp-10) 0; text-align: left; }
.p-blog .empty-state p { max-width: 44ch; color: var(--text-2); }
.pagination-container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); }
.pagination-btn { min-height: 44px; padding: 0 var(--sp-2); border: 0; background: none; color: var(--text); font-weight: 700; }
.pagination-btn:hover:not([disabled]) { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pagination-btn[disabled] { opacity: .35; cursor: default; }
.page-indicator { color: var(--text-3); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  .journal-controls { grid-template-columns: auto minmax(240px, 360px); align-items: center; column-gap: var(--sp-6); }
  .journal-controls .tags-bar { grid-column: 1 / -1; }
  .post-card { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-6); padding-block: var(--sp-6); }
  .post-card-img-wrap { grid-column: 1; aspect-ratio: 3 / 2; border-radius: var(--r-md); }
  .post-card-body { grid-column: 2; }
  .post-card-title { font-size: var(--fs-24); }
  .post-card-excerpt { font-size: var(--fs-16); max-width: 60ch; }
}
@media (min-width: 1024px) {
  .journal { padding-top: var(--sp-12); }
  .p-blog .featured-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-12); align-items: center; }
  .post-card { grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-10); }
}
/* The title and the line beside it only share a row once the title fits on one. */
@media (min-width: 1280px) {
  .journal-head { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: end; column-gap: var(--sp-12); }
  .journal-head > .eyebrow, .journal-head > h1 { grid-column: 1; }
  .journal-head > .blog-hero-subtitle { grid-column: 2; grid-row: 2; }
}

/* ---------------------------------------------------------------
   A post
   --------------------------------------------------------------- */
.post-page { padding-block: var(--sp-6) var(--sp-12); }
.breadcrumb-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-bottom: var(--sp-6); color: var(--text-3); font-size: var(--fs-13); }
.breadcrumb-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-2); text-decoration: none; }
.breadcrumb-nav a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb-nav .current { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.breadcrumb-nav .sep { color: var(--text-3); }
/* On a phone the title is right below; the crumb would only repeat it. */
@media (max-width: 767px) { .breadcrumb-nav .current, .breadcrumb-nav .sep:nth-last-child(2) { display: none; } }
.post-header { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.post-kind:empty, .post-standfirst:empty { display: none; }
.post-title { font-size: clamp(2.25rem, 7vw, 4.5rem); max-width: 17ch; margin: 0; }
.post-title[aria-busy="true"] { color: var(--text-3); }
.post-standfirst { max-width: 52ch; color: var(--text-2); font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; }
.post-cover-wrap { margin: 0 0 var(--sp-6); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.post-cover-img { width: 100%; height: 100%; object-fit: cover; }

.post-layout { display: grid; gap: var(--sp-6); }
.post-aside { min-width: 0; }
.post-meta-details { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-4); padding-block: var(--sp-3); border-block: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-14); }
.post-meta-details .ico { width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; color: var(--text-3); }
.post-meta-author strong { color: var(--text); }
.post-tags-list { display: flex; flex-wrap: wrap; gap: 2px var(--sp-1); margin-top: var(--sp-2); }
.post-tag-badge { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; margin-left: -8px; margin-right: 8px; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-14); text-decoration: none; }
.post-tag-badge:hover { background: var(--surface-2); color: var(--text); }

/* The recipe at a glance: numbers set large between two rules. */
.recipe-banner-card { margin-bottom: var(--sp-8); border-bottom: 1px solid var(--line); }
.recipe-banner-title { padding-top: var(--sp-3); font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.recipe-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recipe-metrics-grid > div { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-3) var(--sp-4) 0; }
.recipe-metrics-grid > div + div { border-left: 1px solid var(--line); padding-left: var(--sp-4); }
.recipe-metrics-grid > div:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
.recipe-metrics-grid > div:nth-child(4) { border-top: 1px solid var(--line); }
.metric-label { order: 2; color: var(--text-3); font-size: var(--fs-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.metric-value { font: 800 var(--fs-24)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--text); }
@media (min-width: 768px) {
  .recipe-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .recipe-metrics-grid > div:nth-child(n) { border-top: 0; }
  .recipe-metrics-grid > div:nth-child(3) { border-left: 1px solid var(--line); padding-left: var(--sp-4); }
}

.post-body { max-width: 680px; font-size: 1.125rem; line-height: 1.75; color: var(--text); overflow-wrap: break-word; }
.post-body > * + * { margin-top: 1.15em; }
.post-body > p:first-child::first-letter {
  float: left; margin: .06em .1em 0 0; font: 800 3.6em/.8 var(--font-display); color: var(--accent-ink);
}
.post-body h2 { font: 700 clamp(1.5rem, 3vw, 1.875rem)/1.2 var(--font-display); letter-spacing: -.025em; margin-top: 1.8em; }
.post-body h3 { font: 700 var(--fs-20)/1.25 var(--font-display); margin-top: 1.5em; }
.post-body a { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-body img { border-radius: var(--r-md); margin-block: 1.6em; height: auto; }
.post-body blockquote { margin: 1.8em 0; padding: 0; border: 0; font: 700 clamp(1.375rem, 3vw, 1.75rem)/1.3 var(--font-display); letter-spacing: -.02em; color: var(--text); }
/* A short marigold rule above a quote, not quotation marks: the posts
   usually carry their own. */
.post-body blockquote::before { content: ""; display: block; width: 40px; height: 3px; margin-bottom: var(--sp-4); background: var(--accent); }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: .4em; }
.post-body li::marker { color: var(--accent-ink); }
.post-body hr { margin-block: 2em; }
.post--missing .post-layout { display: block; }
.post--missing .post-header { padding-top: var(--sp-10); }
.post-missing { display: grid; justify-items: start; gap: var(--sp-4); }
.post-missing .lead { font-size: var(--fs-18); color: var(--text-2); }

@media (min-width: 768px) { .post-cover-wrap { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) {
  .post-page { padding-top: var(--sp-8); }
  .post-header { margin-bottom: var(--sp-8); }
  .post-cover-wrap { aspect-ratio: 21 / 9; margin-bottom: var(--sp-10); }
  .post-layout { grid-template-columns: 220px minmax(0, 680px); column-gap: var(--sp-16); }
  .post-aside { position: sticky; top: calc(var(--header-h) + var(--sp-6)); align-self: start; }
  .post-meta-details { display: grid; gap: var(--sp-2); padding: var(--sp-4) 0; border-bottom: 0; }
  .post-meta-details .dot { display: none; }
  .post-tags-list { display: grid; gap: 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
  .post-tag-badge { margin: 0 0 0 -8px; }
}

/* Dishes named in the post: menu lines, priced as the menu prices them. */
.linked-products-section, .related-posts-section { margin-top: var(--sp-12); padding-top: var(--sp-8); }
.linked-products-header { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.linked-products-title, .related-posts-title { font: 800 clamp(1.625rem, 3.6vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -.03em; max-width: 18ch; }
.linked-products-subtitle { color: var(--text-2); font-size: var(--fs-14); max-width: 40ch; }
.linked-products-grid { display: grid; }
.linked-product-card {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-2); align-items: center;
  padding-block: var(--sp-4); border-bottom: 1px solid var(--line);
}
.linked-product-card:first-child { padding-top: 0; }
.linked-product-card .product-card-image-wrap { grid-row: 1 / span 2; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.linked-product-card .product-card-img { width: 100%; height: 100%; object-fit: cover; }
.dish-line { display: grid; gap: 2px; min-width: 0; }
.dish-line__caption { font-size: var(--fs-12); font-weight: 600; color: var(--accent-ink); }
.dish-line__top { display: flex; align-items: baseline; gap: var(--sp-2); }
.dish-line__name { font-weight: 700; font-size: var(--fs-16); line-height: 1.3; min-width: 0; }
/* The name is the only keyboard route to the dish (the photo link is
   tabindex=-1), so it gets a 40px-tall hit area without moving the line. */
.dish-line__name a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--text); text-decoration: none; }
.dish-line__name a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dish-line__leader { flex: 1 1 16px; min-width: 16px; border-bottom: 0; transform: translateY(-5px); }
.dish-line__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish-line__size { color: var(--text-3); font-size: var(--fs-13); }
.dish-line__act { grid-column: 2; display: flex; align-items: center; justify-content: flex-start; }
.btn-add-to-cart {
  min-height: 40px; min-width: 88px; padding: 0 18px; border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--accent-ink); font-weight: 700; font-size: var(--fs-14); box-shadow: var(--e-1);
  transition: background var(--t-fast) var(--ease), transform 100ms var(--ease);
}
.btn-add-to-cart:hover { background: var(--accent-soft); }
.btn-add-to-cart:active { transform: scale(.97); }
.btn-add-to-cart.btn-added { background: var(--veg-soft); color: var(--veg); border-color: transparent; box-shadow: none; }
.dish-line__off { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-3); font-size: var(--fs-13); font-weight: 600; }
.is-off .product-card-img { filter: grayscale(1); opacity: .6; }
.is-off .dish-line__name a, .is-off .dish-line__price { color: var(--text-2); }
@media (min-width: 768px) {
  .linked-product-card { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .linked-product-card .product-card-image-wrap { grid-row: auto; }
  .dish-line__act { grid-column: 3; justify-content: flex-end; min-width: 150px; }
}
@media (min-width: 1024px) {
  .linked-products-section { display: grid; grid-template-columns: 220px minmax(0, 680px); column-gap: var(--sp-16); }
  .linked-products-header { align-self: start; }
  .linked-products-title { font-size: var(--fs-24); }
}

/* "Added — View cart" toast (benaam.css): its marigold link sits on the
   inverted --text background, which in the dark theme is cream — under 3:1.
   On the post page the link takes the toast's own colour, marked by a
   marigold underline instead. */
.p-blog .blog-cart-toast__link { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Keep reading. */
.related-posts-grid { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
.related-post-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); align-items: start; padding-block: var(--sp-3); color: inherit; text-decoration: none; }
.related-post-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.related-post-body { display: grid; gap: var(--sp-1); }
.related-post-card-title { font: 700 var(--fs-18)/1.25 var(--font-display); letter-spacing: -.015em; }
.related-post-meta { color: var(--text-3); font-size: var(--fs-13); }
.related-post-card:hover .related-post-card-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 768px) {
  .related-posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .related-post-card { grid-template-columns: 1fr; }
  .related-post-img { aspect-ratio: 3 / 2; border-radius: var(--r-md); }
}
/* On the same two columns as the dishes above, and the posts share the
   width they have: two related posts no longer leave a third of it empty. */
@media (min-width: 1024px) {
  .related-posts-section { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--sp-16); }
  .related-posts-title { font-size: var(--fs-24); align-self: start; }
  .related-posts-grid { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .related-post-card { max-width: 520px; }
}

/* ---------------------------------------------------------------
   Rate your order
   --------------------------------------------------------------- */
.p-review .container { width: 100%; max-width: var(--shell); margin: 0 auto; padding: var(--sp-8) var(--gutter) var(--sp-12); }
.p-review .card { padding: 0; border: 0; background: none; box-shadow: none; }
.p-review h1 { font-size: clamp(2rem, 6vw, 3.25rem); margin-bottom: var(--sp-3); max-width: 14ch; }
.p-review .nowrap { white-space: nowrap; }
.p-review .subtitle { color: var(--text-2); font-size: var(--fs-16); line-height: 1.55; margin-bottom: var(--sp-6); max-width: 40ch; }
.p-review #error-banner { margin-bottom: var(--sp-5); }
.review-centre, .success-box { display: grid; justify-items: start; text-align: left; max-width: 560px; }
.success-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-5); border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.success-icon .ico { width: 26px; height: 26px; }
.p-review .btn-group { justify-content: flex-start; }
.lookup-box { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); max-width: 480px; }
.lookup-box input { min-height: 52px; }
.lookup-box button { min-height: 52px; padding: 0 var(--sp-6); border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.lookup-box button:hover { background: var(--accent-hover); }
#order-lookup-section { max-width: 560px; }

/* The form: numbered steps between rules. */
#review-form { counter-reset: step; }
.review-steps { }
.rating-group, .items-section, .comment-group { padding-block: var(--sp-6); border-bottom: 1px solid var(--line); }
.review-steps > :is(.rating-group, .items-section, .comment-group):not(.hidden) { counter-increment: step; }
.review-steps > * > .rating-label::before, .review-steps > .comment-group .comment-header .rating-label::before {
  content: counter(step, decimal-leading-zero); margin-right: var(--sp-3);
  font: 600 var(--fs-13)/1 var(--font-ui); letter-spacing: .08em; color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.rating-label { display: block; font: 700 var(--fs-20)/1.25 var(--font-display); letter-spacing: -.015em; margin-bottom: var(--sp-1); color: var(--text); }
.rating-label .opt, .required-star { font: 500 var(--fs-14) var(--font-ui); color: var(--text-3); letter-spacing: 0; }
.rating-desc { color: var(--text-2); font-size: var(--fs-14); margin-bottom: var(--sp-4); }
.stars { display: flex; gap: 2px; margin-left: -6px; }
/* An open star is drawn as an outline, a chosen one filled: the state shows
   in the shape, not only the hue. Both inks are 3:1 or more against the page
   in both themes (1.4.11) — plain --accent was 1.8:1 on the light page. */
.star-btn {
  width: 52px; height: 52px; border: 0; border-radius: var(--r-md); background: none;
  color: transparent; -webkit-text-stroke: 1.5px var(--text-3); font-size: 36px; line-height: 1;
  transition: color var(--t-fast) var(--ease), transform 100ms var(--ease);
}
.star-btn:hover { background: var(--surface-2); }
.star-btn.active, .star-btn.hover-active { color: var(--accent-ink); -webkit-text-stroke-color: var(--accent-ink); }
@media (forced-colors: active) {
  .star-btn { color: CanvasText; -webkit-text-stroke: 0; }
  .star-btn.active { color: Highlight; }
}
.star-btn:active { transform: scale(.9); }
.star-text { display: block; margin-top: var(--sp-2); color: var(--accent-ink); font-weight: 700; font-size: var(--fs-14); min-height: 1.4em; }
.item-rating-row { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.item-name { font-weight: 600; font-size: var(--fs-16); }
.item-stars { margin-left: -6px; }
.item-stars .star-btn { width: 44px; height: 44px; font-size: 26px; }
.comment-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.char-counter { color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.p-review .btn-submit { width: 100%; min-height: 56px; margin-top: var(--sp-6); }
.review-recap { display: grid; gap: 6px; width: 100%; text-align: left; margin-top: var(--sp-2); padding: var(--sp-4) 0; border-block: 1px solid var(--line); border-radius: 0; background: none; }
.review-recap-stars { color: var(--text); font-weight: 600; }
.review-recap-note { color: var(--text-2); font-style: italic; }
.bonus-banner { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--accent-soft); font-weight: 600; }
#delivery-rating-section { margin-top: var(--sp-10); padding-top: var(--sp-6); border-bottom: 0; }
#delivery-rating-section textarea { margin-top: var(--sp-3); }
#delivery-rating-section .btn-submit { margin-top: var(--sp-4); }
#delivery-rated-note { margin-top: var(--sp-6); max-width: 560px; }
/* What was on the order: only beside the form on a desktop — on a phone the
   "Each dish" step right below already lists them. */
.review-order { display: none; }
.review-order__label { margin: var(--sp-8) 0 0; padding-bottom: var(--sp-2); font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.review-order ul { list-style: none; margin: 0; padding: 0; }
.review-order li { padding-block: var(--sp-3); border-bottom: 1px solid var(--line); font: 600 var(--fs-18)/1.3 var(--font-display); letter-spacing: -.01em; color: var(--text); }
@media (min-width: 1024px) { .review-order { display: block; } }
.card:has(#review-form:not(.hidden)) #delivery-rated-note { max-width: none; }
@media (min-width: 768px) {
  .item-rating-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); }
  .p-review .btn-submit { width: auto; min-width: 240px; }
}
@media (min-width: 1024px) {
  .p-review .container { padding-top: var(--sp-12); }
  #review-form { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-16); align-items: start; }
  #review-form > .review-intro { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
  #review-form > .review-steps { grid-column: 2; grid-row: 1; }
  #review-form > .btn-submit { grid-column: 2; grid-row: 2; justify-self: start; }
  /* The answers (already rated, can't be rated, thank you) on the same two
     columns as the form: what happened and where to go next on the left,
     what you said on the right — not one narrow column with half the page
     empty. With nothing to recap, the message simply stands on the left. */
  .p-review :is(.review-centre:not(#loading-state), .success-box) {
    max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--sp-16); align-items: start;
  }
  .p-review :is(.review-centre, .success-box) > * { grid-column: 1; }
  .p-review :is(.review-centre, .success-box) > :is(.review-recap, #bonus-points-container) { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  /* Delivery: beside the form, under its column; on the answers, under the
     message and its buttons, in the left column. */
  .card:has(#review-form:not(.hidden)) :is(#delivery-rating-section, #delivery-rated-note) { margin-left: calc((100% - var(--sp-16)) * 5 / 12 + var(--sp-16)); }
  .card:not(:has(#review-form:not(.hidden))) :is(#delivery-rating-section, #delivery-rated-note) { max-width: calc((100% - var(--sp-16)) * 5 / 12); }
  /* Just sent: "thank you" on the left, the delivery question — the one
     thing left to answer — beside it on the right. */
  .card:has(#success-section:not(.hidden)) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-16); align-items: start; }
  .card:has(#success-section:not(.hidden)) > * { grid-column: 1 / -1; }
  .card:has(#success-section:not(.hidden)) > #success-section { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
  .card:has(#success-section:not(.hidden)) #success-section > * { grid-column: 1; grid-row: auto; }
  .card:has(#success-section:not(.hidden)) > :is(#delivery-rating-section, #delivery-rated-note) { grid-column: 2; grid-row: 1; margin: 0; max-width: none; }
}