:root {
  --paper: #fbf5e9;
  --paper-2: #f4ead6;
  --ink: #2a2118;
  --ink-soft: #6b5e4e;
  --line: #e2d4bc;
  --turmeric: #d89a3c;
  --maroon: #9e2b25;
  --curry: #5e7b3a;
  --clay: #a85751;
  --card: #fffdf7;
  --shadow: 0 1px 2px rgba(42, 33, 24, .04), 0 8px 24px rgba(42, 33, 24, .07);
  --shadow-lg: 0 12px 48px rgba(42, 33, 24, .16);
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(216, 154, 60, .10), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(94, 123, 58, .10), transparent 42%);
  font-family: var(--font-hanken), system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(460px, 100%);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.login-mark {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  color: var(--paper);
  background: var(--ink);
}

.login-card h1,
.hero h1,
.modal h2,
.drawer h2 {
  font-family: var(--font-fraunces), Georgia, serif;
}

.login-card h1 {
  margin: 6px 0 12px;
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  line-height: .96;
}

.login-card p {
  color: var(--ink-soft);
}

.primary-btn,
.ghost-btn,
.small-action,
.clear-plate {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}

.primary-btn {
  width: 100%;
  margin-top: 18px;
  padding: 13px 18px;
  color: var(--paper);
  background: var(--ink);
}

.hero {
  padding: 6px 16px 2px;
  text-align: center;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.brand-chip,
.admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 253, 247, .72);
  font-weight: 700;
}

/* The back-to-cookbook chip is a <Link> (anchor): kill the default underline +
   link colour and give it the same ink-text / maroon-hover treatment as the
   other nav pills, so it reads as a button, not a raw hyperlink. Shared across
   the meal planner, shopping list, and tracker headers. */
.brand-chip {
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
}
.brand-chip:hover {
  border-color: var(--maroon);
  color: var(--maroon);
  background: rgba(255, 253, 247, .96);
}
.brand-chip:active { transform: translateY(1px); }
.brand-chip:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 2px;
}

.userbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

.admin-pill {
  color: var(--curry);
}

.user-email {
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 600;
}

.ghost-btn {
  padding: 8px 13px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, transform .1s ease;
}
.ghost-btn:hover { border-color: var(--maroon); color: var(--maroon); }
.ghost-btn:active { transform: translateY(1px); }

.add-recipe-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  padding: 6px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--paper);
  background: var(--ink);
  font-weight: 700;
  font-size: .82rem;
  box-shadow: var(--shadow);
}

.kicker {
  margin: 0 0 2px;
  color: var(--maroon);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 .04em;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 650;
  line-height: .98;
}

.hero h1 span {
  color: var(--turmeric);
}

.ethos {
  max-width: 620px;
  margin: 0 auto 4px;
  color: var(--ink-soft);
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: .86rem;
  font-style: italic;
  line-height: 1.3;
}

.controls {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 4px 0 4px;
  background: linear-gradient(180deg, var(--paper) 78%, rgba(251, 245, 233, 0));
  backdrop-filter: blur(3px);
}

.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 4px;
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.searchbar input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-row,
.quickrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/*
  Desktop (>760px): each filter group is a single non-wrapping line that
  scrolls horizontally if it overflows, instead of wrapping into the tall
  chip wall that pushed results below the fold. `safe center` keeps short
  rows centered but falls back to left-align when content overflows so the
  first chips stay reachable. Edge fade + slim scrollbar hint the scroll.
  Mobile keeps the compact dropdown bar (.filters is hidden <=760px).
*/
@media (min-width: 761px) {
  .filter-row,
  .quickrow {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: safe center;
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
  .filter-row > *,
  .quickrow > * { flex: 0 0 auto; }
  .filter-row::-webkit-scrollbar,
  .quickrow::-webkit-scrollbar { height: 6px; }
  .filter-row::-webkit-scrollbar-thumb,
  .quickrow::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
  .filter-row::-webkit-scrollbar-track,
  .quickrow::-webkit-scrollbar-track { background: transparent; }
}

/*
  Mobile-only filter row. Below 760px the pill row hides and this compact
  3-select row + Hide-fried toggle takes over. Above 760px filters-m
  stays hidden — both renderings live in the markup so no client-side
  window check / hydration mismatch.
*/
.filters-m { display: none; }
.filters-m select {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  padding: 9px 28px 9px 12px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.filters-m select:focus { border-color: var(--turmeric); outline: none; }
.filters-m .toggle-m { flex: 1 1 100%; justify-content: center; }

/*
  WhatsApp share buttons. Two flavours:
    .wa-share        — icon-only round button on the recipe card corner
    .small-action.wa — full button used in the recipe modal action row
  Brand colour is the WhatsApp green (#25D366), inverts on hover.
*/
.wa-share {
  position: absolute;
  top: 12px;
  right: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .9);
  color: #25D366;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.wa-share:hover {
  background: #25D366;
  color: #fff;
  transform: translateY(-1px);
}
.small-action.wa { color: #25D366; border-color: #25D366; }
.small-action.wa:hover { background: #25D366; color: #fff; border-color: #25D366; }

.chip,
.tagchip,
.clear-tag {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 700;
  padding: 6px 13px;
  transition: .16s ease;
}

.chip:hover,
.tagchip:hover {
  border-color: var(--turmeric);
  color: var(--ink);
}

.chip.on,
.tagchip.on {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--line);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 700;
}

.switch {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: var(--line);
}

.switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: .16s ease;
}

.switch.on {
  background: var(--curry);
}

.switch.on i {
  left: 17px;
}

.quickrow {
  margin-top: 11px;
}

.quickrow > span {
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.clear-tag {
  color: var(--maroon);
}

.count {
  margin: 14px 0 18px;
  color: var(--ink-soft);
  text-align: center;
  font-size: .84rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 20px;
  padding-bottom: 70px;
}

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  animation: rise .5s both;
  transition: transform .2s ease, box-shadow .2s ease;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-main {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.card-photo,
.modal-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--paper-2)), color-mix(in srgb, var(--c) 8%, var(--card)));
}

.card-photo {
  height: 160px;
  font-size: 3.6rem;
}

.card-photo img,
.modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vegmark {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border: 2px solid var(--curry);
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: #fff;
}

.vegmark b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--curry);
}

.vlabel {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 6px;
  color: #fff;
  background: rgba(46, 125, 50, .95);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.card-body {
  padding: 15px 16px 17px;
}

.cuisine-tag {
  margin: 0 0 5px;
  color: var(--c);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.card h2 {
  margin: 0 0 10px;
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.12;
}

.minitags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px;
}

.minitags span {
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--ink-soft);
  background: var(--paper-2);
  font-size: .62rem;
  font-weight: 700;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-soft);
  background: var(--paper-2);
  font-size: .7rem;
  font-weight: 700;
}

.cal {
  color: var(--maroon);
  font-size: .78rem;
  font-weight: 800;
}

.heart {
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 3;
  border: 0;
  color: var(--line);
  background: transparent;
}

.heart.on {
  color: var(--maroon);
}

.thali-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  border: 0;
  border-radius: 999px;
  color: var(--paper);
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  font-weight: 800;
}

.thali-fab b {
  min-width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--turmeric);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px;
  background: rgba(42, 33, 24, .5);
  backdrop-filter: blur(4px);
}

.modal {
  position: relative;
  width: min(760px, 100%);
  margin: auto 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}

.add-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: auto 0;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}

.add-panel-head {
  padding-right: 44px;
}

.add-panel h2 {
  margin: 5px 0 14px;
  max-width: 560px;
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1;
}

.mode-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}

.mode-tabs button,
.source-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink-soft);
  background: transparent;
  font-size: .86rem;
  font-weight: 800;
}

.mode-tabs button.on,
.source-toggle.on {
  color: var(--paper);
  background: var(--ink);
}

.ai-box,
.recipe-form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.ai-box label,
.recipe-form label {
  display: grid;
  gap: 6px;
}

.ai-box label span,
.recipe-form label span {
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-box textarea,
.recipe-form textarea,
.recipe-form input,
.recipe-form select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  outline: 0;
  padding: 11px 13px;
  color: var(--ink);
  background: var(--card);
}

.ai-box textarea,
.recipe-form textarea {
  min-height: 124px;
  resize: vertical;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.form-message {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-soft);
  background: var(--card);
  font-weight: 700;
}

.spin {
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.close-btn,
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--card);
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
}

.modal-photo {
  height: 220px;
  font-size: 4rem;
}

.modal-head {
  padding: 24px 32px 12px;
}

.modal-head h2 {
  margin: 4px 0 12px;
  max-width: 90%;
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.small-action {
  padding: 8px 12px;
  color: var(--ink);
  background: var(--card);
}

.small-action.on {
  color: var(--maroon);
}

.small-action.primary {
  color: var(--paper);
  background: var(--ink);
}

.modal-body {
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 30px;
  padding: 8px 32px 30px;
}

.modal h3,
.nutrition h3,
.note-box h3 {
  margin: 20px 0 10px;
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.13rem;
}

.serving-box,
.addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-weight: 800;
}

.stepper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 9px;
}

.stepper button {
  width: 32px;
  height: 32px;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--paper-2);
}

.stepper b {
  min-width: 34px;
  text-align: center;
}

.ingredients,
.steps {
  margin: 0;
  padding-left: 20px;
}

.ingredients li,
.steps li {
  margin: 8px 0;
}

.ingredients b {
  margin-right: 6px;
}

.nutrition,
.note-box {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.nutrition + .nutrition,
.note-box {
  margin-top: 12px;
}

.nutrition h3,
.note-box h3 {
  margin-top: 0;
}

.nutrition div {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 7px 0;
}

.nutrition span,
.note-box p {
  color: var(--ink-soft);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.tagchip::before {
  content: "#";
  opacity: .5;
  margin-right: 1px;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 70;
  width: min(390px, 92vw);
  height: 100vh;
  padding: 22px;
  border-left: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  transform: translateX(105%);
  transition: transform .22s ease;
}

.drawer.open {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.drawer h2 {
  margin: 2px 0 0;
  font-size: 2rem;
}

.drawer-list {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.drawer-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.drawer-row button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper-2);
}

.drawer-row small,
.empty {
  color: var(--ink-soft);
}

.addon {
  margin-bottom: 10px;
}

.clear-plate {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  color: var(--ink);
  background: transparent;
}

@media (max-width: 760px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .userbar {
    justify-content: flex-start;
  }

  .modal-body {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
    Mobile filter swap: hide the pill row, show the compact dropdown row.
    Flex container with three selects on one line; Hide-deep-fried toggle
    wraps below.
  */
  .filters { display: none; }
  .filters-m {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  /*
    Quick-find tags: single horizontally scrollable row on mobile so
    they don't take multiple rows of vertical space before the grid.
  */
  .quickrow {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .quickrow > * { flex-shrink: 0; }
  .quickrow > span {
    position: sticky;
    left: 0;
    background: var(--page, #fff);
    padding-right: 4px;
  }

  /*
    WhatsApp icon on the card — bump it slightly closer to the heart
    since the corner gets cramped on small screens.
  */
  .wa-share { right: 50px; width: 32px; height: 32px; }
}

@media (max-width: 520px) {
  .hero {
    text-align: left;
  }

  .filters,
  .quickrow {
    justify-content: flex-start;
  }

  .modal-head,
  .modal-body {
    padding-left: 22px;
    padding-right: 22px;
  }

  .overlay {
    padding: 12px;
  }

  .add-panel {
    max-height: calc(100vh - 24px);
    padding: 22px;
    border-radius: 18px;
  }

  .mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: 16px;
  }

  .mode-tabs button {
    border-radius: 12px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Admin / Users ---------- */

.admin-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 24px 96px;
  display: grid;
  gap: 28px;
  color: var(--ink, #2b1d12);
}

.admin-head {
  display: grid;
  gap: 16px;
}

.admin-head .ghost-btn {
  width: max-content;
}

.admin-head h1 {
  font-family: var(--font-fraunces), serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.admin-sub {
  color: rgba(43, 29, 18, 0.7);
  max-width: 64ch;
  line-height: 1.55;
}

.admin-card {
  background: #fffaf3;
  border: 1px solid rgba(43, 29, 18, 0.08);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 28px -22px rgba(43, 29, 18, 0.4);
}

.admin-card h2 {
  font-family: var(--font-fraunces), serif;
  font-size: 22px;
  margin: 0 0 16px;
}

.admin-form {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr auto;
  gap: 14px;
  align-items: end;
}

.admin-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: rgba(43, 29, 18, 0.7);
}

.admin-form input,
.admin-form select {
  border: 1px solid rgba(43, 29, 18, 0.18);
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--ink, #2b1d12);
  font-family: inherit;
}

.admin-form input:focus,
.admin-form select:focus {
  outline: 2px solid #B5482A;
  outline-offset: 1px;
}

.admin-form .primary-btn {
  height: 42px;
}

.admin-table {
  display: grid;
  gap: 4px;
}

.admin-row {
  display: grid;
  grid-template-columns: 2.2fr 1.5fr 1.4fr 1.3fr 1.3fr 0.9fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(43, 29, 18, 0.06);
  align-items: center;
  font-size: 14px;
}

.admin-row-head {
  background: transparent;
  border: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(43, 29, 18, 0.55);
  padding: 4px 14px 0;
}

.admin-email {
  font-weight: 600;
  word-break: break-word;
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-you {
  font-style: normal;
  background: #f3e7d4;
  color: #5e3a18;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
}

.admin-row select {
  border: 1px solid rgba(43, 29, 18, 0.18);
  background: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}

.admin-row .dim {
  color: rgba(43, 29, 18, 0.55);
}

.admin-row em.dim {
  font-style: normal;
}

.danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(158, 43, 37, 0.35);
  background: #fff;
  color: #9E2B25;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.danger-btn:hover {
  background: #fdebe8;
}

.form-error {
  margin-top: 12px;
  color: #9E2B25;
  font-size: 14px;
}

.form-notice {
  margin-top: 12px;
  color: #5E7B3A;
  font-size: 14px;
}

@media (max-width: 760px) {
  .admin-form {
    grid-template-columns: 1fr;
  }
  .admin-row,
  .admin-row-head {
    grid-template-columns: 1fr;
  }
  .admin-row-head {
    display: none;
  }
  .admin-row > span::before {
    content: attr(data-label);
  }
}


/* ---------- Super-admin delete button (added with cookbook-delete feature) ---------- */
.card-delete {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .92);
  color: #C0392B;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
  transition: transform .15s ease, background .15s ease, color .15s ease;
  z-index: 4;
}
.card-delete:hover {
  background: #C0392B;
  color: #fff;
  transform: translateY(-1px);
}
.small-action.danger {
  color: #C0392B;
  border-color: #C0392B;
}
.small-action.danger:hover {
  background: #C0392B;
  color: #fff;
  border-color: #C0392B;
}

/* ---------- Weekly Meal Planner (Phase 2) ---------- */
.planner-main {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  padding-bottom: 80px;
}

.planner-header {
  padding: 28px 0 18px;
}
.planner-header .kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 8px 0 4px;
}
.planner-header h1 {
  font-size: clamp(36px, 6vw, 72px);
  margin: 0;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  letter-spacing: -0.02em;
}
.planner-header h1 span { color: var(--maroon); }
.planner-header .ethos {
  margin: 10px 0 0;
  max-width: 640px;
  color: rgba(0, 0, 0, .72);
}

.planner-prefs {
  padding: 14px 0 4px;
}
.prefs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 14px;
  padding: 14px 16px;
}
.pref-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pref-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}
.pref-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.seg-btn {
  border: 1px solid var(--line, #eadfd0);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.seg-btn:hover { border-color: var(--maroon); color: var(--maroon); }
.seg-btn.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.prefs-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  border: none;
  background: var(--maroon);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.cta-btn:hover { transform: translateY(-1px); opacity: .94; }

.planner-grid-wrap {
  padding: 18px 0;
}
.planner-grid {
  display: grid;
  gap: 8px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 14px;
  padding: 14px;
  overflow-x: auto;
}
.planner-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: rgba(0, 0, 0, .55);
  padding: 8px 6px;
  border-bottom: 1px solid var(--line, #eadfd0);
}
.planner-corner {
  background: transparent;
}
.planner-slot-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  padding: 4px 6px;
  border-right: 1px solid var(--line, #eadfd0);
}
.planner-cell {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line, #eadfd0);
  border-left: 4px solid var(--c, var(--maroon));
  border-radius: 10px;
  padding: 6px;
  min-height: 90px;
}
.planner-cell-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--ink);
}
.planner-cell-card:hover { color: var(--maroon); }
.cuisine-tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c, var(--maroon));
  font-weight: 700;
}
.planner-recipe-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.planner-recipe-meta {
  font-size: 11px;
  color: rgba(0, 0, 0, .65);
}
.planner-recipe-meta b { color: var(--ink); }
.planner-cell-empty {
  font-size: 12px;
  color: rgba(0, 0, 0, .4);
  padding: 8px 6px;
  font-style: italic;
}
.planner-reshuffle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .85);
  color: var(--maroon);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s ease;
}
.planner-cell:hover .planner-reshuffle { opacity: 1; }
.planner-totals-label {
  font-weight: 700;
  border-top: 1px solid var(--line, #eadfd0);
  padding-top: 12px;
}
.planner-totals {
  border-top: 1px solid var(--line, #eadfd0);
  padding: 10px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: rgba(0, 0, 0, .65);
}
.totline b { color: var(--ink); font-size: 12px; }
.totline.subtle { color: rgba(0, 0, 0, .45); }

.planner-empty {
  padding: 60px 0;
  text-align: center;
  color: rgba(0, 0, 0, .55);
}
.planner-empty h2 { margin: 12px 0 4px; }
.planner-empty p { max-width: 480px; margin: 0 auto; }

.swap-modal {
  position: fixed;
  inset: 24px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  z-index: 60;
  display: flex;
  flex-direction: column;
  max-width: 920px;
  margin: 0 auto;
  overflow: hidden;
}
.swap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, #eadfd0);
}
.swap-head h3 { margin: 0; font-size: 16px; }
.swap-list {
  padding: 14px 18px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}
.swap-card {
  background: var(--paper);
  border: 1px solid var(--line, #eadfd0);
  border-left: 4px solid var(--c, var(--maroon));
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.swap-card:hover { transform: translateY(-1px); border-color: var(--maroon); }
.swap-card h4 { margin: 4px 0 6px; font-size: 14px; line-height: 1.2; }
.swap-card-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.diet-pill {
  background: var(--line, #eadfd0);
  color: var(--ink);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.swap-meta {
  font-size: 11px;
  color: rgba(0, 0, 0, .65);
  display: flex;
  gap: 10px;
  margin: 0;
}
.swap-empty { padding: 24px; color: rgba(0, 0, 0, .55); }

.print-banner { display: none; }
.only-print { display: none; }

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff !important; color: #000 !important; }
  .no-print { display: none !important; }
  .only-print { display: block !important; }
  .planner-grid-wrap { padding: 0; }
  .planner-grid {
    border: 1px solid #ccc;
    box-shadow: none;
    padding: 8px;
    page-break-inside: avoid;
    overflow: visible;
  }
  .planner-cell { min-height: 60px; padding: 4px; }
  .planner-recipe-name { font-size: 11px; }
  .planner-recipe-meta { font-size: 9px; }
  .planner-totals { padding: 6px 4px; font-size: 9px; }
  .totline b { font-size: 10px; }
  .print-banner {
    display: block !important;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #aaa;
  }
  .print-banner h2 { margin: 0 0 4px; font-size: 18px; }
  .print-banner p { margin: 0; font-size: 11px; color: #555; }
}

@media (max-width: 720px) {
  .planner-grid { font-size: 12px; }
  .planner-cell { min-height: 80px; }
  .prefs-grid { grid-template-columns: 1fr; }
}

/* Hero actions row */
.hero-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}
.add-recipe-hero.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line, #eadfd0);
  text-decoration: none;
}
.add-recipe-hero.secondary:hover {
  border-color: var(--maroon);
  color: var(--maroon);
}

/* ---------- Shopping Basket (Phase 3) ---------- */
.shopping-source {
  padding: 8px 0 6px;
}
.shopping-source-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 14px;
}
.shopping-source-card {
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 14px;
  padding: 14px 16px;
}
.shopping-source-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .65);
}
.shopping-source-card p {
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(0, 0, 0, .65);
}

.search-results {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.search-results button {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.search-results button strong { font-size: 14px; }
.search-results button span { font-size: 11px; color: rgba(0, 0, 0, .6); }
.search-results button:hover { border-color: var(--maroon); }

.shopping-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  padding: 20px 0 60px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.wrap.shopping-source-grid,
.shopping-grid {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.shopping-recipes {
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 14px;
  padding: 14px 16px;
  position: sticky;
  top: 16px;
  align-self: flex-start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.shopping-recipes-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.shopping-recipes-head h2 {
  margin: 0 0 2px;
  font-size: 16px;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
}
.muted {
  color: rgba(0, 0, 0, .55);
  font-size: 12px;
}
.muted.small { font-size: 11px; font-weight: 600; }
.shopping-empty {
  padding: 18px 4px;
  font-style: italic;
}
.shopping-chip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.shopping-chip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "body remove" "stepper stepper";
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 10px;
  padding: 8px 12px;
}
.shopping-chip-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.shopping-chip-body strong {
  font-size: 13px;
  line-height: 1.25;
}
.shopping-chip-body span {
  font-size: 10px;
  color: rgba(0, 0, 0, .55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.shopping-chip-remove {
  grid-area: remove;
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, .55);
  cursor: pointer;
  padding: 2px;
  border-radius: 999px;
  align-self: start;
}
.shopping-chip-remove:hover { color: var(--maroon); }
.shopping-chip-stepper {
  grid-area: stepper;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 12px;
  width: max-content;
}
.shopping-chip-stepper button {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.shopping-chip-stepper button:hover { background: var(--line, #eadfd0); }
.shopping-chip-stepper span { padding: 0 2px; }
.shopping-chip-stepper b { font-weight: 700; color: var(--ink); }

.shopping-list-pane {
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 14px;
  padding: 18px 20px 28px;
  min-height: 360px;
}
.shopping-list-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.shopping-list-head h2 {
  margin: 0 0 2px;
  font-size: 22px;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
}
.shopping-list-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ghost-btn.small {
  padding: 5px 10px;
  font-size: 12px;
}
.shopping-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 18px;
  font-size: 11px;
  color: rgba(0, 0, 0, .6);
}
.shopping-progress-track {
  flex: 1;
  height: 6px;
  background: var(--line, #eadfd0);
  border-radius: 999px;
  overflow: hidden;
}
.shopping-progress-fill {
  height: 100%;
  background: var(--maroon);
  transition: width .25s ease;
}

.shopping-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 20px;
  color: rgba(0, 0, 0, .45);
  font-style: italic;
}

.shopping-categories {
  display: grid;
  gap: 18px;
}
.shopping-category h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line, #eadfd0);
}
.shopping-category h3 .muted.small { margin-left: auto; }
.shopping-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
}
.shopping-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
}
.shopping-item-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: rgba(0, 0, 0, .45);
  align-self: center;
}
.shopping-item-toggle:hover { color: var(--maroon); }
.shopping-item.checked .shopping-item-toggle { color: var(--maroon); }
.shopping-item.checked .shopping-item-name,
.shopping-item.checked .shopping-item-qty {
  text-decoration: line-through;
  color: rgba(0, 0, 0, .4);
}
.shopping-item-name { font-weight: 600; }
.shopping-item-qty {
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, .6);
  font-size: 12px;
  white-space: nowrap;
}

.print-footer { display: none; }
.shopping-item-checkbox { display: none; }

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body { background: #fff !important; color: #000 !important; }
  .no-print { display: none !important; }
  .only-print { display: block !important; }
  .shopping-item-checkbox { display: inline-block !important; font-size: 14px; }
  .shopping-grid {
    grid-template-columns: 1fr;
    padding: 0;
    max-width: none;
  }
  .shopping-list-pane {
    border: none;
    padding: 0;
  }
  .shopping-categories { gap: 12px; }
  .shopping-category ul {
    grid-template-columns: 1fr 1fr;
    gap: 2px 24px;
  }
  .shopping-item { font-size: 11px; padding: 2px 0; }
  .shopping-category h3 { font-size: 12px; padding-bottom: 3px; }
  .print-banner {
    display: block !important;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #888;
  }
  .print-banner h2 { margin: 0 0 2px; font-size: 18px; }
  .print-banner p { margin: 0; font-size: 11px; color: #555; }
  .print-footer {
    display: block !important;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #888;
    font-size: 10px;
    color: #555;
    text-align: center;
  }
}

@media (max-width: 920px) {
  .shopping-grid { grid-template-columns: 1fr; }
  .shopping-recipes {
    position: static;
    max-height: none;
  }
  .shopping-source-grid { grid-template-columns: 1fr; }
  .shopping-category ul { grid-template-columns: 1fr; }
}

/* ---------- Daily Macro Tracker (Phase 4) ---------- */
.tracker-main {
  padding-bottom: 120px;
}

.tracker-datebar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 0;
  background: rgba(255, 250, 240, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line, #eadfd0);
}
.tracker-datebar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tracker-date-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line, #eadfd0);
  background: var(--card, #fff);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.tracker-date-pill input[type="date"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.tracker-rings {
  padding: 18px 0 6px;
}
.ring-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ring-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 14px;
  padding: 12px 10px;
}
.ring-card svg {
  width: 88px;
  height: 88px;
}
.ring-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(0, 0, 0, .6);
  font-weight: 700;
}
.ring-meta {
  font-size: 12px;
  color: rgba(0, 0, 0, .65);
  font-variant-numeric: tabular-nums;
}

.tracker-meals {
  padding: 16px 0 4px;
  display: grid;
  gap: 12px;
}
.tracker-meal {
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 14px;
  padding: 14px 16px;
}
.tracker-meal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.tracker-meal-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 16px;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
}
.tracker-meal-head p {
  margin: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.cta-btn.small {
  padding: 8px 12px;
  font-size: 12px;
}
.tracker-entry-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}
.tracker-entry {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 10px;
  padding: 8px 12px;
}
.tracker-entry-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tracker-entry-body strong {
  font-size: 13px;
  line-height: 1.25;
}
.tracker-entry-body span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}
.tracker-entry-macro {
  font-size: 11px;
  color: rgba(0, 0, 0, .65);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tracker-entry-macro b {
  color: var(--ink);
  font-weight: 700;
}
.tracker-entry-remove {
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, .5);
  cursor: pointer;
  padding: 2px;
  border-radius: 999px;
}
.tracker-entry-remove:hover {
  color: var(--maroon);
}

.tracker-summary {
  padding: 12px 0;
}
.tracker-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 14px;
  padding: 14px 16px;
}
.summary-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed var(--line, #eadfd0);
}
.summary-row:last-of-type { border-bottom: none; }
.summary-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(0, 0, 0, .55);
}
.summary-value {
  text-align: right;
}
.summary-remaining {
  font-size: 11px;
  color: #16a34a;
  font-weight: 700;
  justify-self: end;
}
.summary-remaining.over {
  color: #ef4444;
}

.tracker-week {
  padding: 14px 0;
}
.tracker-week-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.tracker-week-head h2 {
  margin: 0;
  font-size: 16px;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
}
.tracker-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
}
.tracker-week-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 12px;
  padding: 8px 6px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.tracker-week-bar:hover {
  transform: translateY(-1px);
  border-color: var(--maroon);
}
.tracker-week-bar.current {
  border-color: var(--maroon);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.18) inset;
}
.tracker-week-bar-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: rgba(0, 0, 0, .6);
}
.tracker-week-bar-meta b {
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tracker-week-bar-track {
  display: block;
  position: relative;
  height: 60px;
  background: rgba(0, 0, 0, .06);
  border-radius: 6px;
  overflow: hidden;
}
.tracker-week-bar-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #4ade80;
  transition: height .25s ease;
}
.tracker-week-bar.over .tracker-week-bar-fill {
  background: #ef4444;
}
.tracker-week-bar-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(0, 0, 0, .7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tracker-week-bar-label small {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, .5);
  text-transform: none;
  font-weight: 600;
}
.tracker-week-bar-label em {
  font-size: 9px;
  font-style: normal;
  color: var(--maroon);
  font-weight: 700;
}

.add-food-modal,
.settings-modal {
  position: fixed;
  inset: 24px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
  z-index: 80;
  display: flex;
  flex-direction: column;
  max-width: 540px;
  margin: 0 auto;
  overflow: hidden;
}
.settings-modal { max-width: 460px; }
.add-food-body,
.settings-body {
  padding: 14px 18px 18px;
  overflow-y: auto;
}
.add-food-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
}
.add-food-list button {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
}
.add-food-list button:hover { border-color: var(--maroon); }
.add-food-list button strong { font-size: 14px; }
.add-food-list button span { font-size: 11px; color: rgba(0, 0, 0, .6); }

.add-food-confirm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
.add-food-confirm header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.add-food-confirm header strong {
  font-size: 18px;
  font-family: var(--serif, "Playfair Display", Georgia, serif);
}
.add-food-servings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.custom-servings {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line, #eadfd0);
  border-radius: 999px;
  background: var(--card, #fff);
}
.custom-servings input {
  width: 56px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.add-food-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(0, 0, 0, .7);
}
.add-food-preview b {
  color: var(--ink);
  font-weight: 700;
}

.settings-body {
  display: grid;
  gap: 12px;
}
.number-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.number-field > span {
  font-size: 13px;
  font-weight: 600;
}
.number-field-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line, #eadfd0);
  border-radius: 10px;
  padding: 6px 10px;
  background: var(--paper);
}
.number-field-input input {
  width: 80px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.number-field-input small {
  color: rgba(0, 0, 0, .55);
  font-size: 11px;
}
.settings-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  body { background: #fff !important; color: #000 !important; }
  .no-print { display: none !important; }
  .only-print { display: block !important; }
  .tracker-main { padding-bottom: 0; }
  .tracker-rings { padding: 0; }
  .ring-row { display: none !important; }
  .print-banner {
    display: block !important;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #888;
  }
  .print-banner h2 { margin: 0 0 2px; font-size: 18px; }
  .print-banner p { margin: 0; font-size: 11px; color: #555; }
  .tracker-meal { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
  .tracker-entry { background: none; border: 1px solid #ddd; }
  .print-footer {
    display: block !important;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #888;
    font-size: 10px;
    color: #555;
    text-align: center;
  }
}

@media (max-width: 720px) {
  .ring-row { grid-template-columns: 1fr 1fr; }
  .tracker-week-strip { grid-template-columns: repeat(7, 70px); }
  .add-food-modal,
  .settings-modal {
    inset: 0;
    border-radius: 0;
    max-width: none;
  }
  .tracker-entry { grid-template-columns: 1fr auto; grid-template-areas: "body remove" "macro macro"; }
  .tracker-entry-body { grid-area: body; }
  .tracker-entry-macro { grid-area: macro; }
  .tracker-entry-remove { grid-area: remove; }
}

/* ---------- Multiselect mobile filter groups ---------- */
.filters-m-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(33.333% - 8px);
  min-width: 100px;
  position: relative;
}
.filters-m-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.6);
  padding: 0 4px;
}
.filters-m-clear {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--maroon, #c83b3b);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 4px 8px;
  margin-bottom: 2px;
}


/* ---------- Shop + Track buttons + toast + compact mobile ---------- */
.small-action.shop {
  color: #b45309;
  border-color: #b45309;
}
.small-action.shop:hover {
  background: #b45309;
  color: var(--paper, #fff7ec);
}
.small-action.track {
  color: #15803d;
  border-color: #15803d;
}
.small-action.track:hover {
  background: #15803d;
  color: var(--paper, #fff7ec);
}

.track-wrapper {
  position: relative;
  display: inline-block;
}
.track-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 10px;
  padding: 4px;
  z-index: 50;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
}
.track-picker button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  color: var(--ink, #1d1715);
}
.track-picker button:hover {
  background: var(--paper, #fff7ec);
  color: #15803d;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink, #1d1715);
  color: var(--paper, #fff7ec);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
  z-index: 100;
  animation: toast-in 0.2s ease;
  pointer-events: none;
}
@keyframes toast-in {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

@media (max-width: 640px) {
  .recipe-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
  }
  .recipe-actions .small-action {
    padding: 9px 4px;
    justify-content: center;
    min-width: 0;
  }
  .recipe-actions .btn-label {
    display: none;
  }
  .recipe-actions .track-wrapper {
    display: contents;
  }
  .recipe-actions .small-action.wa,
  .recipe-actions .small-action.danger {
    grid-column: 1 / -1;
    padding: 10px 16px;
  }
  .recipe-actions .small-action.wa .btn-label,
  .recipe-actions .small-action.danger .btn-label {
    display: inline;
  }
  .track-picker {
    left: auto;
    right: 0;
    min-width: 160px;
  }
}


/* ---------- Mobile filter checkbox panels (replaces select[multiple]) ----------
   <select multiple> collapses to a thin bar on iOS Safari and has terrible
   touch UX. This is a custom button+panel: tap label → panel expands with
   checkbox rows; outside tap closes it; selected count shows as a badge.
*/
.filters-m-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--line, #eadfd0);
  border-radius: 12px;
  background: var(--card, #fff);
  color: var(--ink, #1d1715);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  font-family: inherit;
}
.filters-m-group.open .filters-m-trigger {
  border-color: var(--turmeric, #d99227);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.filters-m-trigger-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.filters-m-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--turmeric, #d99227);
  color: var(--paper, #fff7ec);
  font-size: 12px;
  font-weight: 800;
}
.filters-m-caret {
  font-size: 12px;
  color: var(--ink-soft, #6b5b4a);
}
.filters-m-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1.5px solid var(--turmeric, #d99227);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--card, #fff);
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.filters-m-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink, #1d1715);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  min-height: 40px;
  font-family: inherit;
}
.filters-m-option:hover { background: rgba(0, 0, 0, 0.04); }
.filters-m-option.on {
  background: var(--ink, #1d1715);
  color: var(--paper, #fff7ec);
  font-weight: 700;
}
.filters-m-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--line, #eadfd0);
  background: var(--card, #fff);
  color: var(--ink, #1d1715);
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.filters-m-option.on .filters-m-check {
  background: var(--turmeric, #d99227);
  border-color: var(--turmeric, #d99227);
  color: var(--paper, #fff7ec);
}

/* ---------- Meal Planner: mode tabs, macro inputs, day chips, totline status ---------- */
.mode-tabs {
  display: inline-flex;
  background: var(--card, #fff);
  border: 1.5px solid var(--line, #eadfd0);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 6px;
}
.mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft, #6b5b4a);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.mode-tab:hover { color: var(--maroon, #c83b3b); }
.mode-tab.on {
  background: var(--ink, #1d1715);
  color: var(--paper, #fff7ec);
}
.mode-hint {
  margin: 4px 0 16px;
  font-size: 13px;
  color: var(--ink-soft, #6b5b4a);
  font-style: italic;
}

.day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.day-input {
  width: 56px;
  padding: 6px 10px;
  /* Dashed border + transparent bg signals 'custom value' — distinct from the
     solid-bordered preset chips so the value shown here is read as a field,
     not another chip option. */
  border: 1px dashed var(--line, #eadfd0);
  border-radius: 999px;
  text-align: center;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink, #1d1715);
  margin-left: 4px;
}
.day-input:focus { border-color: var(--turmeric, #d99227); outline: none; }

.macro-grid {
  display: grid;
  /* minmax(0, 1fr) is critical: default 1fr behaves like minmax(auto, 1fr),
     and auto honors content min-width. <input> has a browser-default natural
     width of ~178px, so plain 1fr forced each cell to ~178px and overflowed
     the 266px parent column by ~96px. minmax(0, ...) lets cells shrink
     below content size. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.macro-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;  /* allow the flex column to shrink below input natural width */
}
.macro-input-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #6b5b4a);
}
.macro-input input {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--line, #eadfd0);
  border-radius: 8px;
  /* Transparent so the input blends into the parent .prefs-grid card. With
     a white background, the 2x2 input grid was visually escaping the cream
     card and reading as a separate floating panel (reported 2026-05-28). */
  background: transparent;
  color: var(--ink, #1d1715);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}
.macro-input input:focus { border-color: var(--turmeric, #d99227); outline: none; }

/* Macro plan summary bar (above the grid in macro mode) */
.macro-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #eadfd0);
  border-radius: 12px;
}
.macro-summary-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft, #6b5b4a);
  margin-right: 4px;
}
.macro-summary-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--line, #eadfd0);
  background: rgba(0, 0, 0, 0.02);
  min-width: 110px;
}
.macro-summary-stat.status-good { border-left-color: #2c8a4f; background: rgba(44, 138, 79, 0.08); }
.macro-summary-stat.status-warn { border-left-color: #c98a23; background: rgba(201, 138, 35, 0.10); }
.macro-summary-stat.status-bad  { border-left-color: #c83b3b; background: rgba(200, 59, 59, 0.10); }
.macro-summary-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #6b5b4a);
}
.macro-summary-value { font-size: 13px; color: var(--ink, #1d1715); }
.macro-summary-value b { font-weight: 800; }
.macro-summary-diff {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft, #6b5b4a);
}
.status-good .macro-summary-diff { color: #2c8a4f; }
.status-warn .macro-summary-diff { color: #c98a23; }
.status-bad  .macro-summary-diff { color: #c83b3b; }

/* Per-day totline color coding (only applies in macro mode via status class) */
.totline.status-good { color: #2c8a4f; }
.totline.status-warn { color: #c98a23; }
.totline.status-bad  { color: #c83b3b; }
.totline.status-good b,
.totline.status-warn b,
.totline.status-bad  b { color: inherit; }

/* Horizontal scroll affordance when days >= 8 */
.planner-grid.scroll {
  /* Visual hint that the grid scrolls — soft right shadow fades content edge. */
  background:
    var(--card, #fff)
    linear-gradient(90deg, transparent 90%, rgba(0,0,0,0.04) 100%);
}

@media print {
  .macro-summary {
    background: #fff;
    border: 1px solid #aaa;
    margin-bottom: 8px;
  }
  .macro-summary-stat { background: #fff !important; }
  .day-input, .macro-input, .mode-tabs, .mode-hint { display: none !important; }
}

@media (max-width: 720px) {
  .macro-grid { grid-template-columns: 1fr; }
  .mode-tabs { width: 100%; justify-content: stretch; }
  .mode-tab { flex: 1 1 0; justify-content: center; }
}

/* ---------- Site footer (added 2026-05-27) ---------- */
.site-footer {
  margin-top: 56px;
  padding: 28px 0 40px;
  border-top: 1px solid color-mix(in srgb, var(--ink, #2b1d12) 12%, transparent);
  text-align: center;
  font-family: var(--font-hanken), system-ui, sans-serif;
  line-height: 1.5;
}
.site-footer .disclaimer {
  font-size: 13.5px;
  color: color-mix(in srgb, var(--ink, #2b1d12) 75%, transparent);
  max-width: 620px;
  margin: 0 auto 10px;
}
.site-footer .disclaimer a {
  color: var(--accent, #C85028);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer .footer-meta {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--ink, #2b1d12) 55%, transparent);
}
.site-footer .footer-meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink, #2b1d12) 25%, transparent);
}
.site-footer .footer-meta a:hover { color: var(--accent, #C85028); border-bottom-color: var(--accent, #C85028); }
@media print { .site-footer { display: none; } }


/* ---------- Load-more pagination ---------- */
.load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 18px auto 12px;
  padding: 0 16px;
}
.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.load-more-btn:hover {
  background: var(--maroon);
  border-color: var(--maroon);
  transform: translateY(-1px);
}
.load-more-hint {
  margin: 0;
  font-size: .8rem;
  color: var(--ink-soft);
}

/* ============================================================
   /recipes/[slug] — dedicated recipe page styles
   ============================================================ */
.recipe-page {
  --c: var(--maroon);
  background: var(--paper);
  min-height: 100vh;
  padding-bottom: 64px;
}

.recipe-breadcrumbs {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 20px 4px;
  font-size: .82rem;
  color: var(--ink-soft);
}
.recipe-breadcrumbs a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.recipe-breadcrumbs a:hover { color: var(--c); border-bottom-color: var(--c); }
.recipe-breadcrumbs span[aria-current] {
  color: var(--ink);
  font-weight: 600;
}

.recipe-hero {
  display: grid;
  /* Right column gets extra width so the two-column "About" text reads well. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  gap: 32px;
  padding: 12px 20px 26px;
  align-items: start;
}
/* Desktop only: pin the photo while the taller right column scrolls past it.
   Scoped to min-width so mobile (single column) is never sticky. The extra
   `.recipe-page` ancestor raises specificity (0,2,0 > base 0,1,0) so this wins
   over the base `position: relative` regardless of Turbopack CSS chunk order. */
@media (min-width: 821px) {
  .recipe-page .recipe-hero-photo { position: sticky; top: 16px; }
}
.recipe-hero-photo {
  /* Base stays relative (positioning context for the emoji fallback) and
     NON-sticky, so mobile single-column never pins the photo over the title.
     Sticky is opt-in for desktop only (min-width rule below) — cascade-proof
     because the sticky rule simply doesn't match at mobile widths. */
  position: relative;
  align-self: start;
  /* Portrait 3:4 matches the source photo generation ratio and
     naturally fills the tall right column without stretch overflow.
     width:100% + min-width:0 belts-and-braces against any future
     aspect-ratio width expansion in a different breakpoint. */
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--card)) 0%, color-mix(in srgb, var(--c) 4%, var(--card)) 100%);
  box-shadow: var(--shadow);
}
.recipe-hero-photo picture { display: block; height: 100%; }
.recipe-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}
.recipe-hero-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(4rem, 12vw, 7rem);
  opacity: .85;
  z-index: 1;
}
.recipe-hero-text { padding-top: 6px; }
.recipe-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.recipe-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(0,0,0,.04);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.recipe-badges .badge.cuisine {
  color: var(--paper);
  background: var(--c);
  border-color: var(--c);
}
.recipe-badges .badge.diet.vegan {
  color: #1f5527;
  background: #d6efdb;
  border-color: #b9dfc1;
}
.recipe-badges .badge.diet.veg {
  color: #2d5a1f;
  background: #e3eec8;
  border-color: #c5d8a3;
}
.recipe-badges .badge.diet.chicken,
.recipe-badges .badge.diet.egg {
  color: #6b4525;
  background: #fbe7c4;
  border-color: #ecd29b;
}
.recipe-badges .badge.spice {
  color: #7a1f1f;
  background: #fbe0d6;
  border-color: #efbfae;
}

.recipe-page h1 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 650;
  margin: 4px 0 6px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.recipe-method {
  font-family: var(--font-fraunces), Georgia, serif;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 16px;
  font-size: 1rem;
}

.recipe-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--line);
}
.recipe-stats > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.recipe-stats dt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.recipe-stats dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.recipe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recipe-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: transform 100ms ease, background 120ms ease, color 120ms ease;
}
.recipe-action:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
}
.recipe-action.primary {
  background: var(--ink);
  color: var(--paper);
}
.recipe-action.primary:hover { background: var(--c); border-color: var(--c); }
.recipe-action.wa { color: #1f7a3a; border-color: #1f7a3a; }
.recipe-action.wa:hover { background: #1f7a3a; color: var(--paper); }

.recipe-action-group { position: relative; }
.recipe-action-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
}
.recipe-action-menu button {
  text-align: left;
  padding: 8px 12px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}
.recipe-action-menu button:hover { background: color-mix(in srgb, var(--c) 12%, var(--card)); }

/* Hand-written headnote: unique, experience-driven prose that lifts a recipe
   page out of "thin content". Reads like an editor's note above the recipe. */
/* "About this recipe" now lives in the hero's right column, beneath the
   action bar, so it fills the dead space beside the tall portrait photo.
   Long headnotes flow into two columns to stay compact (magazine style)
   and keep a comfortable ~45-char measure instead of one over-wide column. */
.recipe-headnote {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.recipe-headnote h2 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.4rem;
  font-weight: 650;
  margin: 0 0 12px;
  color: var(--ink);
}
.recipe-headnote-cols {
  columns: 17rem 2;
  column-gap: 34px;
}
.recipe-headnote-cols p {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 12px;
  break-inside: avoid;
}
.recipe-headnote-cols p:first-child { margin-top: 0; }

.recipe-body {
  display: grid;
  /* Desktop: Nutrition (narrow, sticky) on the LEFT; Ingredients + Method on
     the RIGHT. DOM order is main-then-nutrition, so mobile (single column)
     stacks Ingredients -> Method -> Nutrition; the grid-column placement below
     puts Nutrition visually on the left for desktop. */
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 40px;
  padding: 12px 20px 26px;
  align-items: start;
}
.recipe-col-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.recipe-body h2 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.5rem;
  font-weight: 650;
  margin: 0 0 12px;
  color: var(--ink);
}
.recipe-serves-hint {
  margin: -6px 0 12px;
  font-size: .84rem;
  color: var(--ink-soft);
}

/* Nutrition column: left side on desktop, sticky so it stays in view while
   reading the ingredients + method on the right. */
.recipe-nutri-block {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 16px;
}
.recipe-nutri-block h2 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.5rem;
  font-weight: 650;
  margin: 0 0 12px;
  color: var(--ink);
}
.recipe-nutri-block .recipe-vegannote {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--leaf, #2e7d32) 8%, var(--card));
  border-radius: 10px;
}
.recipe-col-method { min-width: 0; }

.recipe-ingredients {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recipe-ingredients li {
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 10%, transparent);
}
.recipe-ingredients li:last-child { border-bottom: 0; }
.recipe-ingredients label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 4px;
  cursor: pointer;
  font-size: .96rem;
  transition: opacity 120ms ease;
}
.recipe-ingredients input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--c);
  margin-top: 2px;
}
.recipe-ingredients .ing-qty {
  font-weight: 700;
  color: var(--c);
  white-space: nowrap;
}
.recipe-ingredients .ing-name { color: var(--ink); }
.recipe-ingredients li.checked label { opacity: .45; text-decoration: line-through; }

.recipe-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.recipe-steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  border-left: 4px solid var(--c);
}
.recipe-steps .step-num {
  font-family: var(--font-fraunces), Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--c);
  line-height: 1;
  padding-top: 2px;
}
.recipe-steps .step-text { line-height: 1.55; font-size: .98rem; }

.recipe-nutri-wrap { padding: 0 20px 20px; }
.recipe-nutri-wrap h2 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.3rem;
  margin: 0 0 10px;
}
.recipe-nutri {
  width: min(420px, 100%);
  border-collapse: collapse;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  font-size: .92rem;
}
.recipe-nutri th, .recipe-nutri td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 10%, transparent);
}
.recipe-nutri tr:last-child th, .recipe-nutri tr:last-child td { border-bottom: 0; }
.recipe-nutri th { color: var(--ink-soft); font-weight: 600; }
.recipe-nutri td { font-weight: 700; text-align: right; }
.recipe-vegannote {
  margin: 14px 0 0;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, #1f7a3a 8%, var(--card));
  border: 1px solid color-mix(in srgb, #1f7a3a 25%, transparent);
  color: #1f5527;
  border-radius: 12px;
  font-size: .88rem;
}

.recipe-tags-wrap { padding: 0 20px 20px; }
.recipe-tags-wrap h2 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.recipe-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recipe-tags li a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}
.recipe-tags li a:hover {
  color: var(--paper);
  background: var(--c);
  border-color: var(--c);
}

.recipe-related-wrap { padding: 10px 20px 24px; }
.recipe-related-wrap h2 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.3rem;
  margin: 0 0 12px;
}
.recipe-related {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Wider minimum so each card has room for a big photo + full name.
     On a typical 1100px wrap this lands 3-4 cards per row. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.related-card {
  --c: var(--maroon);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--c);
  box-shadow: 0 8px 22px rgba(60, 35, 10, 0.18);
}
.related-emoji { font-size: 1.6rem; line-height: 1; }
.related-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  min-width: 0;
}
.related-cuisine {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--c);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.related-name {
  font-family: var(--font-fraunces), Georgia, serif;
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 2px 0 4px;
}
.related-cal {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: 2px;
}

.recipe-page-footer {
  margin-top: 20px;
  padding: 18px 20px 30px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-soft);
  font-size: .86rem;
}
.recipe-page-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.recipe-page-footer a:hover { color: var(--c); border-bottom-color: var(--c); }
.recipe-page-footer .disclaimer { margin: 8px 0 0; font-size: .78rem; }

@media (max-width: 820px) {
  /* Slide-over banner: the photo pins full-bleed at the top while the content
     card rides up over it on an opaque, rounded surface (food-app style). The
     card has the page background + a higher z-index, so it cleanly covers the
     photo as it rises — deliberate reveal, never a messy overlap of the title. */
  /* `.recipe-page` ancestor raises specificity so these win over base rules
     regardless of Turbopack CSS chunk load order. */
  .recipe-page .recipe-hero { display: block; padding: 0; position: relative; }
  .recipe-page .recipe-hero-photo {
    position: sticky;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 52vh;
    max-height: 460px;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .recipe-page .recipe-hero-text {
    position: relative;
    z-index: 1;
    background: var(--paper);
    border-radius: 22px 22px 0 0;
    margin-top: -26px;
    padding: 22px 16px 4px;
    box-shadow: 0 -6px 20px rgba(40, 25, 10, 0.10);
  }
  .recipe-headnote-cols { columns: 1; }
  /* Mobile single column; DOM order gives Ingredients -> Method -> Nutrition.
     .recipe-page ancestor keeps these winning over base rules regardless of
     Turbopack CSS chunk load order. */
  .recipe-page .recipe-body { grid-template-columns: 1fr; padding: 8px 16px 20px; gap: 28px; }
  .recipe-page .recipe-col-main { grid-column: auto; grid-row: auto; gap: 28px; }
  .recipe-page .recipe-nutri-block { grid-column: auto; grid-row: auto; position: static; margin-top: 4px; }
  .recipe-nutri-block .nutrition-label { width: 100%; }
  .recipe-breadcrumbs { padding: 12px 16px 4px; font-size: .78rem; }
  .recipe-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  .recipe-stats { grid-template-columns: repeat(2, 1fr); }
  .recipe-action { font-size: .82rem; padding: 8px 12px; }
}

/* Print: collapse to single-page recipe card */
@media print {
  .recipe-breadcrumbs,
  .recipe-actions,
  .recipe-related-wrap,
  .recipe-page-footer,
  .recipe-tags-wrap { display: none !important; }
  .recipe-hero {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .recipe-hero-photo { aspect-ratio: 16/9; max-height: 180px; }
  .recipe-body {
    grid-template-columns: 1.1fr 1.7fr;
    gap: 18px;
    padding: 0;
    page-break-inside: avoid;
  }
  .recipe-steps li {
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid #000 !important;
    padding: 4px 10px;
  }
  .recipe-nutri { background: transparent; }
  .recipe-page { padding: 8mm 12mm; background: #fff; color: #000; min-height: auto; }
  h1, h2 { color: #000 !important; }
  .badge { border: 1px solid #555 !important; background: transparent !important; color: #000 !important; }
}

/* Quick-view secondary button on cards (full page is the primary action) */
.card { position: relative; }
.card-quickview {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  background: rgba(255, 253, 247, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(3px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}
.card:hover .card-quickview,
.card:focus-within .card-quickview {
  opacity: 1;
  transform: translateY(0);
}
.card-quickview:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
@media (max-width: 760px) {
  .card-quickview { opacity: 1; transform: none; font-size: .7rem; padding: 3px 10px; }
}


/* ============================================================
   /our-story — magazine-style narrative
   ============================================================ */
.story-page {
  --c: var(--maroon);
  background: linear-gradient(180deg, #fff9ec 0%, var(--paper) 240px);
  min-height: 100vh;
  padding-bottom: 80px;
  font-family: var(--font-hanken), system-ui, sans-serif;
}
.story-page h1, .story-page h2, .story-page .story-pullquote p {
  font-family: var(--font-fraunces), Georgia, serif;
}

/* --- Hero --- */
.story-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 28px 36px;
}
.story-hero-img-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(80, 30, 0, .12);
  transform: rotate(-1deg);
}
.story-hero-img {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #f1b23a 0%, #c85028 50%, #8b2c1a 100%) !important;
}
.story-hero-img .story-image-inner {
  color: #fff9ec;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.story-hero-img .story-image-emoji { font-size: 4.2rem !important; }

.story-hero-text { padding-right: 8px; }
.story-kicker {
  margin: 0 0 12px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--maroon);
}
.story-page h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--ink);
}
.story-page h1 span {
  color: var(--turmeric);
  font-style: italic;
}
.story-lede {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0;
}

/* --- Decorative divider --- */
.story-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px auto 8px;
  color: color-mix(in srgb, var(--maroon) 60%, transparent);
  font-size: 1.3rem;
  letter-spacing: .4em;
}
.story-divider .leaf {
  font-size: 1.8rem;
  filter: hue-rotate(-30deg) saturate(.9);
}

/* --- Section layout --- */
.story-section {
  max-width: 1180px;
  margin: 28px auto;
  padding: 0 28px;
}
.story-section-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
  position: relative;
}
.story-section-inner.align-left .story-text  { order: 1; }
.story-section-inner.align-left .story-figure { order: 2; }
.story-section-inner.align-right .story-figure { order: 1; }
.story-section-inner.align-right .story-text  { order: 2; }

.story-text { max-width: 560px; }
.story-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--maroon);
  padding: 4px 10px;
  background: rgba(184, 60, 32, .08);
  border-radius: 999px;
}
.story-page h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}
.story-text p {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.65;
  margin: 0 0 14px;
  color: var(--ink);
}
.story-text p em { color: var(--maroon); font-style: italic; }
.story-text p strong { color: var(--ink); }
.story-text a {
  color: var(--maroon);
  border-bottom: 1px dotted var(--maroon);
  text-decoration: none;
}
.story-text a:hover { border-bottom-style: solid; }

/* --- Image placeholders --- */
.story-figure {
  margin: 0;
  position: relative;
}
.story-image {
  position: relative;
  width: 100%;
  border-radius: 18px;
  background: linear-gradient(135deg, #f4e5cc 0%, #ead7b3 100%);
  box-shadow: 0 8px 24px rgba(100, 50, 10, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(184, 60, 32, .1);
}
.story-image-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
.story-image-emoji {
  font-size: 2.6rem;
  opacity: .55;
}
.story-image-label {
  font-family: var(--font-fraunces), Georgia, serif;
  font-style: italic;
  font-size: .9rem;
  color: color-mix(in srgb, var(--ink) 55%, var(--card));
  max-width: 24ch;
  line-height: 1.3;
}
.story-caption {
  margin: 10px 4px 0;
  font-family: var(--font-fraunces), Georgia, serif;
  font-style: italic;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Slight section tints */
.story-section.diaspora      { background: linear-gradient(180deg, transparent 0%, rgba(241,178,58,.07) 50%, transparent 100%); padding-top: 28px; padding-bottom: 28px; max-width: 100%; padding-left: 28px; padding-right: 28px; }
.story-section.diaspora > .story-section-inner { max-width: 1180px; margin: 0 auto; }
.story-section.idea          { background: linear-gradient(180deg, transparent 0%, rgba(46,122,58,.05) 50%, transparent 100%); padding-top: 28px; padding-bottom: 28px; max-width: 100%; padding-left: 28px; padding-right: 28px; }
.story-section.idea > .story-section-inner   { max-width: 1180px; margin: 0 auto; }
.story-section.today         { background: linear-gradient(180deg, transparent 0%, rgba(184,60,32,.07) 50%, transparent 100%); padding-top: 28px; padding-bottom: 28px; max-width: 100%; padding-left: 28px; padding-right: 28px; }
.story-section.today > .story-section-inner  { max-width: 1180px; margin: 0 auto; }
.story-section.table         { padding-top: 28px; padding-bottom: 28px; }

/* --- Pull quotes --- */
.story-pullquote {
  max-width: 880px;
  margin: 48px auto;
  padding: 32px 28px;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--maroon) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--maroon) 22%, transparent);
  position: relative;
}
.story-pullquote::before,
.story-pullquote::after {
  content: "✦";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--maroon);
  font-size: 1rem;
  background: var(--paper);
  padding: 0 12px;
}
.story-pullquote::before { top: -8px; }
.story-pullquote::after { bottom: -8px; }
.story-pullquote p {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.story-pullquote.alt p { color: var(--maroon); }

/* --- Timeline --- */
.story-timeline-wrap {
  max-width: 920px;
  margin: 56px auto 32px;
  padding: 0 28px;
}
.story-timeline-title {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  text-align: center;
  margin: 0 0 28px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.story-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.story-timeline::before {
  content: "";
  position: absolute;
  left: 64px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--maroon) 8%, var(--maroon) 92%, transparent 100%);
  opacity: .35;
}
.story-timeline li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: start;
  padding: 4px 0;
  position: relative;
}
.story-timeline li::before {
  content: "";
  position: absolute;
  left: 58px;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--maroon);
  box-shadow: 0 0 0 4px rgba(184, 60, 32, .08);
}
.story-timeline-year {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: -0.02em;
}
.story-timeline-event {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  padding-top: 6px;
}

/* --- CTA row --- */
.story-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.story-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: transform 120ms ease, background 140ms ease, color 140ms ease;
}
.story-cta:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
}
.story-cta.primary {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff9ec;
}
.story-cta.primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

/* --- Page footer --- */
.story-page-footer {
  margin-top: 56px;
  padding: 24px 28px;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--maroon) 18%, transparent);
  color: var(--ink-soft);
  font-size: .9rem;
}
.story-page-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.story-page-footer a:hover { color: var(--maroon); border-bottom-color: var(--maroon); }

/* --- Responsive --- */
@media (max-width: 880px) {
  .story-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 22px 22px;
  }
  .story-hero-img-wrap { transform: none; max-width: 520px; margin: 0 auto; }
  .story-hero-img { aspect-ratio: 4 / 3; }
  .story-section { margin: 18px auto; padding: 0 22px; }
  .story-section.diaspora,
  .story-section.idea,
  .story-section.today { padding-left: 22px; padding-right: 22px; }
  .story-section-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .story-section-inner.align-left .story-text,
  .story-section-inner.align-right .story-text  { order: 2; }
  .story-section-inner.align-left .story-figure,
  .story-section-inner.align-right .story-figure { order: 1; }
  .story-pullquote { margin: 28px auto; padding: 22px 22px; }
  .story-timeline { gap: 14px; }
  .story-timeline::before { left: 40px; }
  .story-timeline li { grid-template-columns: 84px 1fr; gap: 18px; }
  .story-timeline li::before { left: 34px; }
  .story-timeline-year { font-size: 1.15rem; }
  .story-timeline-event { font-size: .94rem; }
}
@media (max-width: 480px) {
  .story-page h1 { font-size: 2.2rem; }
  .story-lede { font-size: 1rem; }
  .story-cta { font-size: .84rem; padding: 9px 14px; }
}

@media print {
  .story-hero, .story-divider, .story-pullquote::before, .story-pullquote::after,
  .story-cta-row, .story-page-footer { display: none !important; }
  .story-page { background: #fff; padding: 0; }
  .story-section, .story-timeline-wrap { margin: 12px 0; padding: 0; }
  .story-section-inner { grid-template-columns: 1fr; gap: 8px; }
  .story-image { background: #eee !important; }
}

/* Hero image inside the new shared RecipeImage component on the dedicated recipe page */
.recipe-hero-photo-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.recipe-hero-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   FDA-style Nutrition Facts label (modernised)
   ============================================================ */
.nutrition-label {
  --nl-ink: #2c241e;
  --nl-rule: #d1c4b5;
  --nl-bg: #faf6ee;
  max-width: 340px;
  background: var(--nl-bg);
  border: 2.5px solid var(--nl-ink);
  border-radius: 14px;
  padding: 14px 18px 12px;
  font-family: var(--font-hanken), system-ui, sans-serif;
  color: var(--nl-ink);
  box-shadow: 0 4px 14px rgba(60, 35, 10, 0.08);
}
.nutrition-label h3 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 8px solid var(--nl-ink);
  line-height: 1.0;
}

.nl-serving {
  padding: 6px 0 8px;
  border-bottom: 5px solid var(--nl-ink);
}

.nl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 0.94rem;
  line-height: 1.25;
  border-bottom: 1px solid var(--nl-rule);
  gap: 12px;
}
.nl-row:last-child { border-bottom: 0; }
.nl-row strong { font-weight: 800; }

.nl-row-stepper { border-bottom: 0; }
.nl-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--nl-ink);
  border-radius: 999px;
  padding: 2px;
}
.nl-stepper button {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--nl-ink);
  cursor: pointer;
  transition: background 120ms ease;
}
.nl-stepper button:hover { background: rgba(44, 36, 30, 0.08); }
.nl-stepper output {
  min-width: 22px;
  text-align: center;
  font-weight: 800;
  font-size: 0.96rem;
}

.nl-divider {
  height: 1px;
  background: var(--nl-ink);
  margin: 6px 0;
}
.nl-divider.thick {
  height: 5px;
  margin: 6px 0;
}

.nl-calories {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0 6px;
  border-bottom: 5px solid var(--nl-ink);
}
.nl-cal-label {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
}
.nl-cal-value {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--maroon, #8b2c1a);
}

.nl-dv-header {
  text-align: right;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--nl-ink);
  letter-spacing: -0.01em;
}

.nl-row.nl-bold {
  font-weight: 600;
}
.nl-row.nl-bold > span:last-child {
  font-weight: 800;
}
.nl-row.nl-sub {
  padding-left: 18px;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--nl-ink) 88%, transparent);
}
.nl-row.nl-protein {
  border-top: 4px solid var(--nl-ink);
  border-bottom: 5px solid var(--nl-ink);
  margin-top: 2px;
  padding: 6px 0;
  background: rgba(193, 110, 50, 0.05);
}

.nl-footnote {
  padding-top: 8px;
  font-size: 0.76rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--nl-ink) 80%, transparent);
}
.nl-footnote p { margin: 0 0 4px; }
.nl-disclaimer {
  font-style: italic;
  color: #8b2c1a;
}

@media (max-width: 460px) {
  .nutrition-label {
    max-width: 100%;
    padding: 12px 14px 10px;
  }
  .nl-cal-value { font-size: 2.2rem; }
  .nl-row, .nl-dv-header { font-size: 0.88rem; }
  .nl-row.nl-sub { font-size: 0.84rem; }
}

@media print {
  .nutrition-label {
    background: #fff !important;
    border-color: #000 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .nl-stepper { display: none !important; }
  .nl-row-stepper { display: none !important; }
  .nl-disclaimer { color: #555 !important; }
}


/* SEO helper — screen-reader only, retains semantic value */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}


/* Side-by-side layout for nutrition label + about-this-recipe note */
.recipe-nutri-row {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.recipe-nutri-aside h2 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.25rem;
  margin: 0 0 8px;
}
.recipe-nutri-aside .recipe-vegannote { display: flex; }

@media (max-width: 720px) {
  .recipe-nutri-row { grid-template-columns: minmax(0, 1fr); }
}


/* Nutrition label — recipe yield annotation under the stepper */
.nl-yield-note {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--nl-ink) 65%, transparent);
  margin-top: 4px;
  font-style: italic;
}
.nl-stepper-unit {
  margin-left: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--nl-ink) 70%, transparent);
}

/* ============================================================
   Shared servings adjuster — sits above the ingredients list and
   drives the nutrition label totals via React context.
   ============================================================ */
.recipe-servings-adjuster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--c, var(--maroon)) 7%, var(--card));
  border: 1px solid color-mix(in srgb, var(--c, var(--maroon)) 22%, transparent);
  border-radius: 14px;
}
.rsa-label {
  font-family: var(--font-fraunces), Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.rsa-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px;
}
.rsa-stepper button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.rsa-stepper button:hover { background: var(--ink); color: var(--paper); }
.rsa-stepper output {
  min-width: 28px;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  font-family: var(--font-fraunces), Georgia, serif;
}
.rsa-note {
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.rsa-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.rsa-reset:hover {
  border-color: var(--c, var(--maroon));
  color: var(--c, var(--maroon));
}

/* Nutrition label inline reset link */
.nl-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--nl-ink) 60%, transparent);
  font-size: 0.76rem;
  font-style: italic;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.nl-reset:hover { color: var(--maroon); }

/* Calorie total summary under the headline calorie number */
.nl-total-line {
  text-align: center;
  margin: -4px 0 6px;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--nl-ink) 65%, transparent);
}
.nl-total-line strong {
  color: var(--maroon);
  font-weight: 800;
}

@media (max-width: 460px) {
  .recipe-servings-adjuster {
    padding: 9px 12px;
    gap: 8px;
  }
  .rsa-stepper output { font-size: 1rem; }
  .rsa-note { font-size: 0.78rem; }
}

/* ============================================================
   UI batch — header compression, card quick-view overlay,
   sign-in icon, macro disclaimers
   ============================================================ */

/* Tiny favicon-only home link in the top bar (replaces "DFK" brand chip) */
.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.brand-icon img {
  width: 26px;
  height: 26px;
  display: block;
}
.brand-icon:hover {
  border-color: var(--line);
  background: var(--card);
}

/* Sign-in becomes a small icon button only */
.icon-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.icon-signin:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Compress the topbar to a single thin line */
.topbar {
  margin-bottom: 4px !important;
  min-height: 0;
}

/* Quick view as a small icon overlay on the card image (top-right area).
   Diet badge (.vegmark / .vlabel) keeps its position; quickview sits just
   below it. The old text-button .card-quickview rule is now unused. */
.card-quickview-icon {
  position: absolute;
  top: 50px;
  right: 12px;
  z-index: 5;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 247, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(3px);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease, color 140ms ease;
}
.card:hover .card-quickview-icon,
.card:focus-within .card-quickview-icon {
  opacity: 1;
  transform: translateY(0);
}
.card-quickview-icon:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
@media (max-width: 760px) {
  /* On touch devices we can't rely on hover. Show a faint, always-visible
     icon so the gesture is discoverable. */
  .card-quickview-icon { opacity: 0.92; transform: none; }
}

/* Macro disclaimer (Tracker + Meal Planner footer note) */
.macro-disclaimer {
  margin: 16px auto 8px;
  max-width: 720px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--maroon) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--maroon) 18%, transparent);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-style: italic;
  text-align: center;
}

/* ============================================================
   Card icon stack + footer admin link (cleanup batch)
   ============================================================ */

/* New stacked icons at the top-right of each card photo:
   1. Eye icon (Quick view)  — top: 10px
   2. Diet badge (VEGAN/VEG/CHICKEN/EGG) — below the eye

   Both have a semi-transparent dark backdrop for readability on any
   photo, with a faint backdrop-filter blur for polish.
*/
.card-quickview-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 24, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}
.card:hover .card-quickview-icon,
.card:focus-within .card-quickview-icon {
  opacity: 1;
  transform: translateY(0);
}
.card-quickview-icon:hover {
  background: rgba(0, 0, 0, 0.78);
  border-color: rgba(255, 255, 255, 0.32);
}
@media (max-width: 760px) {
  .card-quickview-icon { opacity: 0.92; transform: none; }
}

/* Diet badge sits directly under the Quick view icon. Always present.
   Colour-keyed by diet for quick scanning. */
.diet-badge {
  position: absolute;
  top: 46px;
  right: 10px;
  z-index: 5;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(30, 24, 16, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  line-height: 1.4;
  min-width: 48px;
}
.diet-badge.vegan {
  background: rgba(31, 122, 58, 0.85);
  border-color: rgba(180, 222, 195, 0.5);
}
.diet-badge.veg {
  background: rgba(78, 124, 50, 0.85);
  border-color: rgba(207, 230, 170, 0.5);
}
.diet-badge.chicken {
  background: rgba(160, 70, 32, 0.86);
  border-color: rgba(248, 198, 165, 0.45);
}
.diet-badge.egg {
  background: rgba(192, 130, 38, 0.85);
  border-color: rgba(255, 220, 160, 0.5);
}

/* Hide the old vegmark dot anywhere it still renders (defensive — markup
   was replaced, but stale builds could keep the class). */
.vegmark { display: none !important; }

/* ----- Footer admin link (replaces topbar sign-in) ----- */
.footer-admin {
  margin-top: 12px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-admin-email {
  font-style: italic;
}
.footer-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  font: inherit;
  cursor: pointer;
}
.footer-admin-link:hover {
  color: var(--maroon);
  border-bottom-color: var(--maroon);
}

/* The hero used to sit below the (now removed) topbar. With the topbar
   gone, the kicker should breathe a touch more at the top. */
.hero {
  padding-top: 18px !important;
}
@media (max-width: 520px) {
  .hero { padding-top: 14px !important; }
}

/* ============================================================
   Related-recipes thumbnails
   ============================================================ */

/* The .related-card layout was originally:
     [emoji] [meta]
   We swap the emoji for a 64x64 RecipeImage. The container reserves
   the box so layout doesn't shift while the photo loads. */
/* Full-width photo on top of the card, 4:3 aspect.
   On a 280-wide card that gives a 280x210 photo - 3x the prominence
   of the old 120x120 thumb. The brand-red accent now lives on the
   bottom edge of the photo so the card still feels grounded. */
.related-card .related-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c) 22%, var(--card)) 0%,
    color-mix(in srgb, var(--c) 4%, var(--card)) 100%);
  border-bottom: 4px solid var(--c);
}
.related-card .related-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 320ms ease;
}
.related-card:hover .related-thumb img {
  transform: scale(1.06);
}
/* Emoji fallback rendered by RecipeImage when the source chain exhausts. */
.related-card .related-thumb .recipe-image-emoji {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 4rem;
  line-height: 1;
}

@media (max-width: 640px) {
  .recipe-related {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  .related-card .related-thumb .recipe-image-emoji { font-size: 3rem; }
  .related-meta { padding: 12px 14px 14px; }
  .related-name { font-size: 1.05rem; }
  .related-cuisine { font-size: 0.66rem; }
  .related-cal { font-size: 0.78rem; }
}

/* ============================================================
   Star Rating — interactive row + small read-only badge
   ============================================================ */
.star-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 12px;
}
.star-rating-label {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
}
.star-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.star-rating .star {
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
  color: color-mix(in srgb, var(--ink) 25%, transparent); /* hollow */
  line-height: 0;
  transition: transform 120ms ease, color 120ms ease;
}
.star-rating .star.on {
  color: #d4a017; /* gold filled */
}
.star-rating .star:hover,
.star-rating .star:focus-visible {
  transform: scale(1.18);
  outline: 0;
}
.star-rating .star:focus-visible {
  /* Keyboard users get a halo without the visual chrome */
  filter: drop-shadow(0 0 4px rgba(212, 160, 23, 0.55));
}
.star-rating-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--ink);
}
.star-rating-value strong {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #b1830a;
}
.star-rating-clear {
  background: transparent;
  border: 0;
  padding: 2px 4px;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.star-rating-clear:hover { color: var(--maroon); }

/* Size variants — the interactive form on the recipe page is "lg", any
   other use defaults to "md". The read-only card badge uses "sm". */
.star-rating.size-sm .star { padding: 1px; }
.star-rating.size-lg { gap: 12px; }
.star-rating.size-lg .star-rating-label { font-size: 1rem; }
.star-rating.size-lg .star { padding: 3px; }

/* Read-only card badge — only renders when the user has rated.
   Sits between .minitags and .meta in .card-body. */
.star-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 2px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(212, 160, 23, 0.14);
  color: #8a6300;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(212, 160, 23, 0.32);
  width: max-content;
}
.star-rating-badge.size-sm { font-size: 0.66rem; padding: 2px 8px; }
.star-rating-badge.size-md { font-size: 0.74rem; padding: 3px 10px; }

@media print {
  .star-rating { display: none !important; }
  .star-rating-badge { display: none !important; }
}

/* ----- Aggregate line above the interactive stars ----- */
.star-rating-aggregate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(212, 160, 23, 0.12);
  border: 1px solid rgba(212, 160, 23, 0.32);
  color: #6b4900;
  font-size: 0.84rem;
  width: max-content;
}
.star-rating-aggregate strong {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 1rem;
  font-weight: 800;
  color: #b1830a;
}
.star-rating-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.star-rating-badge .srb-count {
  font-weight: 600;
  margin-left: 2px;
}


/* Meal planner — engaging subtext between H1 and the controls */
.planner-lead {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: clamp(1.02rem, 1.55vw, 1.22rem);
  font-weight: 500;
  line-height: 1.45;
  margin: 6px auto 10px;
  max-width: 60ch;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.planner-lead::first-line {
  /* First sentence pops in italic maroon for emphasis */
  font-style: italic;
  color: var(--maroon);
}
@media (max-width: 520px) {
  .planner-lead { font-size: 1rem; margin: 4px auto 8px; }
}

/* ============================================================
   PRINT — unified styling for all 4 printable surfaces
   ============================================================ */

/* Helpers — toggle visibility per medium */
.print-only-header,
.print-only-footer,
.print-watermark { display: none; }

/* Page-level defaults */
@page {
  size: A4 portrait;
  margin: 18mm 14mm 22mm;
}
@page :first {
  margin-top: 14mm;
}

/* Meal Planner only — landscape for the weekly grid */
.planner-print-root, .planner-app-root {
  /* This class is applied to the planner main; @page rules below scope
     to the document, but only the planner page applies this @page block. */
}

@media print {
  /* ---------- Reset shared chrome ---------- */
  nav,
  .no-print,
  button:not(.keep-print),
  .star-rating, .star-rating-badge,
  .filters, .quickrow, .filters-m, .controls,
  .topbar, .userbar, .brand-icon, .icon-signin,
  .thali-fab, .plate-fab,
  .footer-admin,
  .card-quickview-icon, .wa-share, .heart,
  .recipe-actions, .recipe-related-wrap,
  .planner-prefs, .planner-controls,
  .shopping-controls, .shopping-source,
  .tracker-datebar,
  .add-recipe-hero, .hero-actions,
  footer:not(.print-only-footer),
  .toast { display: none !important; }

  /* ---------- Body baseline ---------- */
  html, body {
    background: #fff !important;
    color: #111 !important;
    font-family: var(--font-hanken), system-ui, sans-serif;
    font-size: 11pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Force everything to dark ink */
  *, *::before, *::after { color: #111 !important; }

  /* Stop horizontal scrolling artefacts in printed output */
  * { overflow: visible !important; text-overflow: clip !important; }

  /* ---------- Watermark ---------- */
  .print-watermark {
    display: block !important;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-32deg);
    font-family: var(--font-fraunces), Georgia, serif;
    font-size: 92pt;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(120, 50, 20, 0.06) !important;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
  }

  /* ---------- Header bar (first page) ---------- */
  .print-only-header {
    display: block !important;
    border-top: 1.5px solid #1a1208;
    border-bottom: 1px solid #aaa;
    padding: 6px 0 8px;
    margin: 0 0 14px;
  }
  .ph-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .ph-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-fraunces), Georgia, serif;
    font-size: 13pt;
    font-weight: 700;
  }
  .ph-glyph { font-size: 14pt; }
  .ph-logo { width: 18pt; height: 18pt; object-fit: contain; vertical-align: middle; }
  .ph-date {
    font-size: 9pt;
    color: #555 !important;
    font-style: italic;
  }
  .ph-subrow .ph-domain {
    font-size: 8.5pt;
    color: #555 !important;
    letter-spacing: 0.04em;
  }
  .ph-title {
    font-family: var(--font-fraunces), Georgia, serif;
    font-size: 22pt !important;
    font-weight: 700;
    margin: 12px 0 2px;
    line-height: 1.1;
    color: #111 !important;
  }
  .ph-subtitle {
    font-family: var(--font-fraunces), Georgia, serif;
    font-style: italic;
    font-size: 10pt;
    color: #555 !important;
    margin: 0 0 12px;
  }

  /* ---------- Footer (fixed on every page where supported) ---------- */
  .print-only-footer {
    display: block !important;
    position: fixed;
    bottom: 6mm;
    left: 14mm;
    right: 14mm;
    border-top: 0.5px solid #999;
    padding-top: 4px;
    text-align: center;
    font-size: 8pt;
    color: #555 !important;
  }
  .pf-disclaimer {
    margin: 0 0 2px;
    font-style: italic;
  }
  .pf-meta {
    margin: 0;
    letter-spacing: 0.06em;
  }
  /* Reserve bottom space so content doesn't slip behind the fixed footer */
  body {
    padding-bottom: 22mm !important;
  }

  /* ---------- Table cleanup ---------- */
  table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
  }
  th, td {
    padding: 6px 8px;
    border: 1px solid #ccc !important;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
    background: #fff !important;
  }
  th {
    font-weight: 700;
    background: #f4efe6 !important;
    border-bottom: 1.5px solid #888 !important;
  }
  tbody tr:nth-child(even) td { background: #faf8f4 !important; }
  tr { page-break-inside: avoid; }

  /* ---------- Page-break helpers ---------- */
  h1, h2, h3 { page-break-after: avoid; }
  .recipe-card, .nutrition-label, .recipe-steps li, .meal-day,
  .shopping-category, .tracker-meal-card {
    page-break-inside: avoid;
  }

  /* ===========================================================
     1) Recipe detail print — single-card layout
     =========================================================== */
  .recipe-hero {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    page-break-inside: avoid;
  }
  .recipe-hero-photo {
    border-radius: 6px !important;
    box-shadow: none !important;
    max-width: 300px !important;
    aspect-ratio: 4 / 3 !important;
  }
  .recipe-hero-photo .recipe-hero-fallback,
  .recipe-hero-photo-inner img {
    border-radius: 6px !important;
  }
  .recipe-hero-text { padding: 0 !important; }
  .recipe-page h1 { display: none !important; } /* PrintHeader owns the title */
  .recipe-method { font-style: italic; margin: 0 0 8px !important; }
  .recipe-stats {
    grid-template-columns: repeat(4, 1fr) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    font-size: 9.5pt !important;
  }
  .recipe-stats dt { color: #555 !important; }
  .recipe-stats dd { font-size: 11pt !important; }
  .recipe-breadcrumbs,
  .recipe-page-footer { display: none !important; }
  /* Ingredients in 2 columns to save vertical space */
  .recipe-body {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr !important;
    gap: 18px !important;
    padding: 0 !important;
  }
  .recipe-ingredients {
    column-count: 1;
    font-size: 10.5pt !important;
  }
  .recipe-ingredients li label { padding: 3px 0 !important; cursor: default; }
  .recipe-ingredients input[type="checkbox"] { display: inline-block; }
  .recipe-steps li {
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid #8b2c1a !important;
    padding: 4px 10px !important;
    font-size: 10.5pt !important;
    grid-template-columns: 22px 1fr !important;
    gap: 8px !important;
    margin-bottom: 4px;
  }
  .recipe-steps .step-num { font-size: 13pt !important; }
  /* Compact inline nutrition for print (replaces FDA-style label) */
  .nutrition-label {
    background: transparent !important;
    border: 1px solid #888 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    max-width: 100% !important;
  }
  .nutrition-label h3 { font-size: 12pt !important; border-bottom-width: 2px !important; padding-bottom: 2px !important; margin-bottom: 4px !important; }
  .nl-calories { padding: 3px 0 !important; }
  .nl-cal-label { font-size: 11pt !important; }
  .nl-cal-value { font-size: 18pt !important; color: #111 !important; }
  .nl-row { font-size: 9.5pt !important; padding: 2px 0 !important; }
  .nl-row.nl-sub { padding-left: 12px !important; }
  .nl-row.nl-protein { background: transparent !important; }
  .nl-footnote { font-size: 7.5pt !important; padding-top: 4px !important; }
  .nl-stepper, .nl-reset, .nl-yield-note, .nl-row-stepper { display: none !important; }

  /* ===========================================================
     2) Meal Planner print — landscape grid
     =========================================================== */
  body.meal-planner-print, .planner-print-mode {
    /* hook for landscape override */
  }
  /* Landscape for the meal-planner page is selected by browser print dialog */

  .planner-week { font-size: 9pt; }
  .planner-day {
    page-break-inside: avoid;
  }
  .planner-day-header { font-size: 10pt; font-weight: 700; background: #f4efe6 !important; padding: 4px 6px; }
  .planner-slot { padding: 4px 6px !important; border-top: 0.5px dotted #aaa !important; }
  .planner-slot-name { font-weight: 600; font-size: 9pt; }
  .planner-slot-cal { font-size: 8pt; color: #555 !important; }
  .planner-totals { font-weight: 700; background: #f4efe6 !important; border-top: 1.5px solid #888 !important; }

  /* ===========================================================
     3) Shopping list print — 2-column, checkboxes per category
     =========================================================== */
  .shopping-list {
    column-count: 2;
    column-gap: 18px;
    column-rule: 0.5px solid #ccc;
    font-size: 10pt;
  }
  .shopping-category {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 10px;
  }
  .shopping-category h3 {
    font-family: var(--font-fraunces), Georgia, serif;
    font-size: 11pt;
    font-weight: 700;
    border-bottom: 1px solid #888;
    padding-bottom: 2px;
    margin: 4px 0 6px;
  }
  .shopping-item {
    display: flex;
    gap: 6px;
    padding: 2px 0;
    border-bottom: 0.5px dotted #ccc;
  }
  .shopping-item::before {
    content: "☐";
    font-size: 12pt;
    line-height: 1;
  }

  /* ===========================================================
     4) Tracker print — daily log
     =========================================================== */
  .tracker-rings { display: none !important; }
  .tracker-macro-summary {
    border: 1px solid #888 !important;
    padding: 8px 10px !important;
    border-radius: 4px !important;
    margin: 0 0 12px !important;
    font-size: 10pt !important;
    background: transparent !important;
  }
  .tracker-meal-card {
    border: 0.5px solid #ccc !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px 8px !important;
    margin-bottom: 4px !important;
    page-break-inside: avoid;
  }
  .macro-disclaimer { display: none !important; } /* covered by PrintFooter */

  /* Star ratings + brand decorations off for print */
  .star-rating, .star-rating-badge, .vlabel, .vegmark { display: none !important; }
}

/* Per-page landscape — applied via class on the MealPlanner outer wrapper */
@media print {
  body.is-meal-plan { /* placeholder if we wire a body class via metadata */ }
}


/* WhatsApp share button — small green pill on Meal Planner + Shopping List */
.wa-share-btn {
  background: #1f7a3a !important;
  color: #fff !important;
  border-color: #1f7a3a !important;
}
.wa-share-btn:hover:not(:disabled) {
  background: #185f2c !important;
  border-color: #185f2c !important;
}
.wa-share-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media print {
  .wa-share-btn { display: none !important; }
}



/* ============================================================
   Read Aloud — two-line audio player
   ============================================================ */
.ra-player {
  margin: 12px 0 6px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--c, var(--maroon)) 5%, var(--card));
  border: 1px solid color-mix(in srgb, var(--c, var(--maroon)) 22%, transparent);
  border-radius: 14px;
  font-size: 0.86rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Line 1 — buttons + voice + time */
.ra-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ra-btn {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--c, var(--maroon)) 18%, transparent);
  color: var(--c, var(--maroon));
  cursor: pointer;
  transition: background 110ms ease, color 110ms ease, transform 110ms ease;
}
.ra-btn:hover:not(:disabled) {
  background: var(--c, var(--maroon));
  color: var(--paper);
  transform: scale(1.06);
}
.ra-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Play button is the visual anchor — bigger + solid brand fill */
.ra-btn.ra-play {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  background: var(--c, var(--maroon));
  color: var(--paper);
}
.ra-btn.ra-play:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c, var(--maroon)) 80%, #000);
}

/* Voice picker — flex-shrinks so long labels never push the time off */
.ra-lang-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 180px;
  overflow: hidden;
}
.ra-lang {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 14px 0 2px;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 8px) calc(50% - 2px), calc(100% - 4px) calc(50% - 2px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.ra-lang option { font-weight: 400; }

.ra-time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Line 2 — full-width progress bar */
.ra-bar {
  width: 100%;
  height: 5px;
  margin-top: 10px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 3px;
  overflow: hidden;
}
.ra-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--c, var(--maroon));
  border-radius: 3px;
  transition: width 220ms linear;
}

/* Honest subtitle — centred, small */
.ra-subtitle {
  margin-top: 6px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.ra-note {
  margin: 6px 0 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--maroon);
  text-align: center;
}

/* Mobile */
@media (max-width: 520px) {
  .ra-player { padding: 8px 10px; }
  .ra-btn { width: 28px; height: 28px; flex-basis: 28px; }
  .ra-btn.ra-play { width: 34px; height: 34px; flex-basis: 34px; }
  .ra-lang { font-size: 0.72rem; }
  .ra-lang-wrap { max-width: 130px; padding: 3px 6px; }
  .ra-time { font-size: 0.7rem; }
  .ra-subtitle { font-size: 0.66rem; }
}

/* Step currently being read — saffron tint + bold left rule */
.recipe-steps li.is-reading {
  background: linear-gradient(0deg, rgba(241, 178, 58, 0.16), rgba(241, 178, 58, 0.16)),
              var(--card) !important;
  border-left-width: 6px !important;
  border-left-color: #d4a017 !important;
  box-shadow: 0 1px 6px rgba(184, 60, 32, 0.12);
  transition: background 150ms ease, border-left 150ms ease, box-shadow 150ms ease;
}
.recipe-steps li.is-reading .step-num { color: #b1830a !important; }

@media print {
  .ra-player { display: none !important; }
  .recipe-steps li.is-reading {
    background: #fff !important;
    border-left: 2px solid #8b2c1a !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   Cuisine / Diet / Info landing pages — SEO content surfaces
   ============================================================ */

.cuisine-page,
.diet-page,
.cuisines-index-page,
.info-page {
  font-family: var(--font-fraunces), Georgia, serif;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  padding-bottom: 60px;
}

.cuisine-page .wrap,
.diet-page .wrap,
.cuisines-index-page .wrap,
.info-page .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.cuisine-hero,
.info-hero,
.cuisines-index-hero {
  padding-top: 30px;
  padding-bottom: 18px;
  text-align: left;
}

.cuisine-kicker {
  font-family: var(--font-hanken), Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c, var(--maroon));
  margin: 0 0 8px;
}

.cuisine-page h1,
.diet-page h1,
.cuisines-index-page h1,
.info-page h1 {
  font-size: clamp(2.2rem, 4vw + 1rem, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 0 14px;
  color: var(--maroon);
}

.cuisine-count {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  font-family: var(--font-hanken), Helvetica, sans-serif;
  color: var(--ink-soft);
  letter-spacing: 0;
  margin-top: 6px;
}

.cuisine-tagline {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0;
  line-height: 1.5;
}

.cuisine-intro {
  margin-top: 28px;
  font-size: 1.04rem;
  line-height: 1.7;
  max-width: 760px;
}
.cuisine-intro p { margin: 0 0 16px; }

.cuisine-signatures {
  margin-top: 32px;
}
.cuisine-signatures h2 {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c, var(--maroon));
  margin: 0 0 10px;
}
.cuisine-signature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cuisine-signature-list li {
  background: color-mix(in srgb, var(--c, var(--maroon)) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--c, var(--maroon)) 22%, transparent);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-family: var(--font-hanken), Helvetica, sans-serif;
  color: var(--ink);
}

.cuisine-grid-wrap { margin-top: 40px; }
.cuisine-grid-wrap h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--maroon);
}

.cuisine-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.cuisine-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.cuisine-card:hover {
  transform: translateY(-2px);
  border-color: var(--c, var(--maroon));
  box-shadow: 0 4px 14px rgba(184, 60, 32, 0.12);
}
.cuisine-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--c, var(--maroon)) 8%, var(--paper));
}
.cuisine-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 320ms ease;
}
.cuisine-card:hover .cuisine-thumb img {
  transform: scale(1.04);
}
/* Emoji fallback rendered by RecipeImage when the source chain misses. */
.cuisine-thumb .recipe-image-emoji {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 3.4rem;
  line-height: 1;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c, var(--maroon)) 22%, var(--paper)) 0%,
    color-mix(in srgb, var(--c, var(--maroon)) 6%, var(--paper)) 100%);
}
.cuisine-meta {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 14px;
  gap: 4px;
}
.cuisine-card-cuisine {
  font-family: var(--font-hanken), Helvetica, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c, var(--maroon));
}
.cuisine-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.cuisine-card-stats {
  font-family: var(--font-hanken), Helvetica, sans-serif;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.cuisine-page-footer {
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-hanken), Helvetica, sans-serif;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.cuisine-page-footer a { color: var(--c, var(--maroon)); text-decoration: none; }
.cuisine-page-footer a:hover { text-decoration: underline; }
.cuisine-other-cuisines { margin-top: 14px; font-size: 0.82rem; line-height: 1.8; }

/* Cuisines / Diets index grids */
.cuisines-index-grid {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.cuisines-index-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.cuisines-index-card:hover {
  transform: translateY(-2px);
  border-color: var(--maroon);
  box-shadow: 0 4px 14px rgba(184, 60, 32, 0.1);
}
.cuisines-index-count {
  font-family: var(--font-hanken), Helvetica, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--maroon);
}
.cuisines-index-name {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.cuisines-index-tagline {
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* Info pages (about, contact, privacy, terms) */
.info-body {
  margin-top: 28px;
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 760px;
}
.info-body h2 {
  margin: 32px 0 12px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: -0.4px;
}
.info-body p { margin: 0 0 14px; }
.info-body ul {
  margin: 0 0 18px;
  padding: 0 0 0 22px;
}
.info-body li { margin-bottom: 8px; }
.info-body a {
  color: var(--maroon);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.info-dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 22px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--maroon) 5%, var(--card));
  border: 1px solid color-mix(in srgb, var(--maroon) 22%, transparent);
  border-radius: 14px;
}
.info-dl > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: baseline;
}
.info-dl dt {
  font-family: var(--font-hanken), Helvetica, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 0;
}
.info-dl dd { margin: 0; font-size: 1rem; }

@media (max-width: 600px) {
  .info-dl > div { grid-template-columns: 1fr; gap: 4px; }
}

@media print {
  .cuisine-page,
  .diet-page,
  .cuisines-index-page,
  .info-page {
    display: block;
  }
  .cuisine-page-footer { display: none; }
}

/* Tier 0 brand attribution strip — site-wide. Sits below every page's
   existing content as the final element; restrained styling so it doesn't
   compete with the page's own footer. */
.site-brand-strip {
  margin: 48px 0 0;
  padding: 18px 16px 22px;
  background: rgba(0,0,0,0.025);
  border-top: 1px solid rgba(0,0,0,0.05);
  text-align: center;
  font-family: var(--font-hanken), system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: #666;
}
.site-brand-strip p { margin: 0; }
.site-brand-strip a {
  color: #4a4a4a;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,0.2);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.site-brand-strip a:hover {
  color: #C85028;
  border-bottom-color: #C85028;
}
.site-brand-strip .sbs-group {
  font-weight: 600;
  color: #2b2b2b;
}
@media print {
  .site-brand-strip { display: none; }
}


/* Our Story illustrations — fill the container, cover crop. */
.story-image-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
   Site-wide footer nav (3 columns + cuisines/diets row).
   Mounted by SiteFooter in RootLayout; sits below any per-page footer.
   ============================================================ */
.site-footer-nav {
  background: color-mix(in srgb, var(--maroon) 6%, var(--paper));
  border-top: 1px solid color-mix(in srgb, var(--maroon) 18%, transparent);
  padding: 36px 20px 28px;
  font-family: var(--font-hanken), Helvetica, sans-serif;
}
.sfn-wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.5fr;
  gap: 32px;
}
.sfn-col h2.sfn-h {
  font-family: var(--font-fraunces), Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--maroon) 18%, transparent);
}
.sfn-col h2.sfn-h-sub { margin-top: 18px; }
.sfn-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sfn-col ul.sfn-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  font-size: 0.86rem;
  line-height: 1.7;
}
.sfn-col ul.sfn-inline li { display: inline; }
.sfn-col ul.sfn-inline li span { color: var(--ink-soft); margin: 0 4px; }
.sfn-col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 110ms ease;
}
.sfn-col a:hover { color: var(--maroon); text-decoration: underline; }

@media (max-width: 820px) {
  .sfn-wrap { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .sfn-col-wide { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .sfn-wrap { grid-template-columns: 1fr; gap: 22px; }
  .sfn-col h2.sfn-h { font-size: 0.85rem; }
}

@media print {
  .site-footer-nav { display: none !important; }
}


/* ============================================================
   Site-wide sticky header — runs on every route via RootLayout.
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 245, 233, 0.92);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border-bottom: 1px solid color-mix(in srgb, var(--maroon) 18%, transparent);
  transition: transform 260ms ease;
  will-change: transform;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--paper); }
}

/* Slid out of view while scrolling down the page (toggled in Header.tsx).
   Moves the header up past the top edge to free body space; sticky `top: 0`
   keeps it pinned, so revealing it on scroll-up brings it right back. */
.site-header.is-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

.site-header-wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 20px;
}

.site-header-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--maroon);
  font-family: var(--font-fraunces), Georgia, serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.2px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: opacity 110ms ease;
}
.site-header-logo:hover { opacity: 0.85; }
.site-header-logo img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
}

.site-header-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--font-hanken), Helvetica, sans-serif;
  font-size: 0.92rem;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.site-header-nav a {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 5px 0;
  transition: color 110ms ease;
  white-space: nowrap;
}
.site-header-nav a:hover { color: var(--maroon); }
.site-header-nav a.active {
  color: var(--maroon);
  font-weight: 600;
}
.site-header-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--maroon);
  border-radius: 2px;
}

.site-header-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
}
.site-header-toggle:hover {
  background: color-mix(in srgb, var(--maroon) 8%, transparent);
  color: var(--maroon);
}
.site-header-toggle:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 2px;
}

.site-header-mobile {
  display: none;
  flex-direction: column;
  background: var(--paper);
  border-top: 1px solid color-mix(in srgb, var(--maroon) 15%, transparent);
  padding: 6px 20px 12px;
}
.site-header-mobile a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-hanken), Helvetica, sans-serif;
  font-size: 1rem;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.site-header-mobile a:last-child { border-bottom: 0; }
.site-header-mobile a.active {
  color: var(--maroon);
  font-weight: 600;
}

@media (max-width: 760px) {
  .site-header-nav { display: none; }
  .site-header-toggle { display: inline-grid; place-items: center; }
  .site-header-mobile { display: flex; }
  .site-header-wrap { padding: 7px 14px; }
  .site-header-logo { font-size: 0.95rem; }
  .site-header-logo img { width: 26px; height: 26px; }
}

@media print {
  .site-header { display: none !important; }
}


/* Our Story — text-only section (no figure column). Used by the
   "wider circle" tribute and any future elders-only passages. */
.story-section-inner.align-text-only {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}
.story-section-inner.align-text-only .story-text {
  max-width: 760px;
  text-align: left;
}
.story-section.circle {
  background: color-mix(in srgb, var(--maroon) 4%, var(--paper));
  padding: 28px 28px 22px;
  border-top: 1px solid color-mix(in srgb, var(--maroon) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--maroon) 15%, transparent);
}
.story-attribution {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed color-mix(in srgb, var(--maroon) 30%, transparent);
  font-family: var(--font-fraunces), Georgia, serif;
  font-style: italic;
  font-size: 0.96rem;
  color: var(--maroon);
  line-height: 1.6;
}

@media (max-width: 720px) {
  .story-section-inner.align-text-only { grid-template-columns: minmax(0, 1fr); }
  .story-section.circle { padding: 22px 16px 18px; }
  .story-attribution { font-size: 0.9rem; }
}


/* Brand logo in the editor sign-in mark — overrides the dark lock badge. */
.login-mark.login-mark-logo {
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
}
.login-mark.login-mark-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}