@font-face {
  font-family: "Bitter";
  src: url("/fonts/bitter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitter";
  src: url("/fonts/bitter-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks so text doesn't jump when the web fonts arrive. */
@font-face { font-family: "Bitter Fallback"; src: local("Georgia"); size-adjust: 104%; ascent-override: 90%; }
@font-face { font-family: "Sans Fallback"; src: local("Arial"); size-adjust: 93%; }

:root {
  --brand: #933a3a;
  --brand-dark: #6f2a2a;
  --ink: #2d2a26;
  --muted: #6b645c;
  --cream: #faf6f0;
  --line: #e8e1d6;
  --leaf: #4f6b3a;
  --serif: "Bitter", "Bitter Fallback", Georgia, serif;
  --sans: "Source Sans 3", "Sans Fallback", "Segoe UI", system-ui, sans-serif;
  --page: 1080px;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 1.0625rem/1.6 var(--sans);
}

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

h1, h2 { font-family: var(--serif); line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); color: var(--brand); margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }

.skip { position: absolute; left: 1rem; top: -3rem; padding: 0.5rem 1rem; background: var(--brand); color: #fff; }
.skip:focus { top: 0; }

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

/* Header: the banner spans the content width; the mascot "says" the tagline below it. */

.site-header {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.25rem 16px 0;
}
.banner img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

.greeting { display: flex; align-items: center; gap: 1.1rem; margin-top: 0.75rem; }
.mascot { width: 84px; height: 84px; flex: none; }
.inner .mascot { width: 60px; height: 60px; }
.tagline {
  position: relative;
  margin: 0;
  padding: 0.5rem 1rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 1rem;
  font: italic 1.05rem/1.35 var(--serif);
  color: var(--brand-dark);
}
.inner .tagline { font-size: 0.95rem; }
.tagline::before,
.tagline::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -9px;
  border: 9px solid transparent;
}
.tagline::before { left: -18px; border-right-color: var(--line); }
.tagline::after { left: -16px; border-right-color: var(--cream); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font: 600 0.8rem var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-nav a { padding: 0.7rem 0; color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--brand); }
.site-nav a[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -2px var(--brand); }

/* Header search: a quiet icon at the end of the menu. Opened, it becomes a compact box at
   the right of the menu row with matches in a card beneath (see /js/search.js); on phones
   the box takes the whole row. */
.site-nav { position: relative; align-items: center; }
.search { margin-left: auto; }
.site-nav .search-open { display: flex; padding: 0.6rem 0.15rem; color: var(--muted); }
.site-nav .search-open:hover,
.site-nav .search-open:focus-visible { color: var(--brand); }
.search-panel {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(23rem, 100%);
  padding: 0.3rem 0.5rem 0.3rem 0.85rem;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgb(45 42 38 / 0.08);
  font: 400 1rem var(--sans);
  letter-spacing: normal;
  text-transform: none;
}
.search-panel:focus-within { border-color: var(--brand); }
.search-panel[hidden] { display: none; }
.search-panel::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--brand);
  mask: url("/images/search.svg") center / contain no-repeat;
}
/* 16px or more, or iPhones zoom the page when the box takes focus. */
.search-input {
  flex: 1;
  min-width: 0;
  padding: 0.15rem 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  outline: none;
  appearance: none;
}
.search-input::placeholder { color: var(--muted); font-style: italic; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-close {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.search-close:hover { background: var(--cream); color: var(--brand); }
.search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgb(45 42 38 / 0.14);
}
.search-results[hidden] { display: none; }
.search-results [role="option"] a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.search-results b { display: block; font: 600 1rem/1.3 var(--serif); }
.search-results small { display: block; margin-top: 0.1rem; color: var(--muted); font-size: 0.8rem; }
.search-results [aria-selected="true"] a,
.search-results [role="option"] a:hover { background: var(--cream); }
.search-results [aria-selected="true"] b,
.search-results [role="option"] a:hover b { color: var(--brand); }
.search-message { padding: 0.6rem 0.7rem; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 640px) {
  .search-panel { left: 0; width: auto; }
}

main { max-width: var(--page); margin: 0 auto; padding: 1.75rem 16px 3rem; }

/* Chips */

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.chips a {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.chips a:hover { border-color: var(--brand); color: var(--brand); }

/* Recipe cards: a photo with the title over it, or a tinted tile with name and alias. */

.recipe-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem;
  padding: 0;
  margin: 0;
}
.recipe-cards a { display: block; text-decoration: none; border-radius: var(--radius); }
.thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
}
.recipe-cards a:hover .thumb { box-shadow: 0 0 0 2px var(--brand); }
.thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile { padding: 0.85rem; background: var(--tile-bg); color: var(--tile-ink); }
.tile small {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  right: 0.85rem;
  font: 600 0.66rem/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.thumb b { font: 700 1.15rem/1.15 var(--serif); overflow-wrap: break-word; text-wrap: balance; }
.tile i { margin-top: 0.25rem; font: italic 0.85rem/1.3 var(--serif); opacity: 0.8; }
.photo-tile b {
  position: relative;
  padding: 2.5rem 0.85rem 0.8rem;
  background: linear-gradient(transparent, rgb(40 20 10 / 0.72));
  color: #fff;
}
.tint-0 { --tile-bg: #f6e3c7; --tile-ink: #6e4310; } /* turmeric */
.tint-1 { --tile-bg: #f3d9d4; --tile-ink: var(--brand-dark); } /* chili */
.tint-2 { --tile-bg: #e1ead6; --tile-ink: #3a5329; } /* curry leaf */
.tint-3 { --tile-bg: #ece2cf; --tile-ink: #574532; } /* coconut */
.tint-4 { --tile-bg: #ebe0d5; --tile-ink: #653b21; } /* cinnamon */

/* Home */

/* Only photographed recipes appear here, so they get big landscape cards. */
/* Home: every course and cuisine as a photo card. */
.category-group + .category-group { margin-top: 2.5rem; }
.category-group h2 { margin-bottom: 1rem; }
.category-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.5rem 1.1rem;
  padding: 0;
  margin: 0;
}
.category-cards a { display: block; color: var(--ink); text-decoration: none; }
.category-cards a > b { display: block; margin-top: 0.6rem; font: 700 1.25rem/1.2 var(--serif); }
.category-cards a > small { color: var(--muted); font-size: 0.85rem; }
.category-cards a:hover > b { color: var(--brand); }
.category-cards a:hover > span { box-shadow: 0 0 0 2px var(--brand); }
.montage,
.menu-tile { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.montage { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--line); }
.montage img { width: 100%; height: 100%; min-width: 0; object-fit: cover; display: block; }
.montage-1 img { grid-column: 1 / 3; }
/* No photo yet: a menu card listing the dishes inside. */
.menu-tile { display: flex; align-items: flex-end; padding: 1.1rem 1.2rem; background: var(--tile-bg); color: var(--tile-ink); }
.menu-tile ul { list-style: none; margin: 0; padding: 0; font: 600 1rem/1.45 var(--serif); }
.menu-tile li { overflow-wrap: break-word; hyphens: manual; }
.menu-tile .more { font: italic 400 0.9rem var(--serif); opacity: 0.8; }
.see-all { text-align: center; margin: 1.75rem 0 0; }
.button {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.button:hover { background: var(--brand-dark); color: #fff; }

/* Listings: All Recipes and category pages */

.listing-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; margin-bottom: 1rem; }
.listing-head h1 { margin: 0; }
.count { margin: 0; color: var(--muted); }
.category-intro { max-width: 42rem; margin: -0.25rem 0 1.5rem; color: var(--muted); }
.listing nav { margin-bottom: 1.5rem; }
/* All Recipes: filter chips and sort buttons are labels for hidden checkboxes/radios;
   the per-category and per-recipe rules are generated into /css/recipes.css. */
.browser { display: flex; flex-direction: column; }
.browser .sort { order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; font-size: 0.9rem; }
.browser .filters { order: 2; display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0 0 1rem; }
.browser .shown { order: 3; margin: 0 0 1rem; color: var(--muted); font-size: 0.9rem; }
.browser .recipe-list { order: 4; }
.sort > span { color: var(--muted); margin-right: 0.25rem; }
.sort-btn,
.filters label {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.sort-btn:hover,
.filters label:hover { border-color: var(--brand); color: var(--brand); }
.filters label { font-size: 0.85rem; }
.filters input:checked + label,
.sort-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.filters input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 2px; }
.browser:has(.sort input:focus-visible) .sort-btn.on { outline: 3px solid var(--brand); outline-offset: 2px; }
/* Each sort button shows the label for the current state of its own group. */
.sort-btn { display: none; }
.browser:has(#sort-az:checked) .show-sort-az,
.browser:has(#sort-za:checked) .show-sort-za,
.browser:has(#sort-new:checked) .show-sort-new,
.browser:has(#sort-old:checked) .show-sort-old,
.browser:has(#sort-new:checked, #sort-old:checked) .idle-sort-az,
.browser:has(#sort-az:checked, #sort-za:checked) .idle-sort-new { display: inline-block; }
/* Recipes are ordered by the positions in recipes.css; dates show only for date order. */
.recipe-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 2rem; counter-reset: shown; }
.recipe-list > li { order: var(--az); counter-increment: shown; }
.browser:has(#sort-za:checked) .recipe-list > li { order: calc(-1 * var(--az)); }
.browser:has(#sort-old:checked) .recipe-list > li { order: var(--date); }
.browser:has(#sort-new:checked) .recipe-list > li { order: calc(-1 * var(--date)); }
.recipe-list time { display: none; color: var(--muted); font-size: 0.8rem; }
.browser:has(#sort-new:checked, #sort-old:checked) .recipe-list time { display: block; }
/* Hidden recipes don't increment the counter, so this always shows what's on screen. */
.shown::before { content: counter(shown); color: var(--ink); font-weight: 600; }
.shown button { margin-left: 0.6rem; padding: 0.1rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--brand); font: inherit; cursor: pointer; }
/* Clear only appears once something differs from the default (Latest, nothing ticked). */
.browser:not(:has(.filters input:checked, #sort-az:checked, #sort-za:checked, #sort-old:checked)) .shown button { visibility: hidden; }
.recipe-list a { display: block; padding: 0.25rem 0; color: var(--ink); text-decoration: none; line-height: 1.35; }
.recipe-list a:hover { color: var(--brand); }
.recipe-list i { color: var(--muted); font-size: 0.9em; }

/* Recipe page */

/* Each recipe opens in the same spice tint as its tile. */
.recipe-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--tile-bg);
}
.recipe-head h1 { flex-basis: 100%; margin: 0; color: var(--tile-ink); }
.recipe-head .subtitle { flex-basis: 100%; margin: -0.6rem 0 0; font: italic 1.15rem/1.3 var(--serif); color: var(--tile-ink); opacity: 0.8; }
.recipe-head .aka,
.recipe-head .byline { flex-basis: 100%; margin: -0.5rem 0 0; font-size: 0.9rem; color: var(--muted); }
.recipe-head .aka { font-style: italic; }
.recipe-head .chips a { background: rgb(255 255 255 / 0.55); border-color: rgb(0 0 0 / 0.08); font-size: 0.8rem; }
.counts { list-style: none; display: flex; gap: 1.5rem; padding: 0; margin: 0; }
.counts li { font: 600 0.72rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.counts b { font: 700 1.15rem var(--serif); letter-spacing: 0; color: var(--ink); margin-right: 0.15rem; }

/* Ingredients sit in a column beside everything else, and stay in view on long methods. */
.recipe-body {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
  gap: 0 2.5rem;
  align-items: start;
}
.recipe-body > * { grid-column: 2; }
.recipe-body > .ingredients { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 1rem; }

.photo { margin: 0 0 1.25rem; }
.photo img { display: block; width: 100%; max-height: 20rem; object-fit: cover; border-radius: var(--radius); }

.intro { max-width: 42rem; overflow-wrap: anywhere; }
.intro p { margin: 0 0 1rem; }

.ingredients {
  padding: 1rem 1.2rem 0.5rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ingredients ul { list-style: none; padding: 0; margin: 0; }
.ingredients li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); line-height: 1.35; }
.ingredients li:last-child { border-bottom: 0; }
.ingredients li.subhead {
  border-bottom: 0;
  padding: 0.8rem 0 0.1rem;
  font: 600 0.75rem var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.method { margin-top: 0.5rem; }
.method ol { counter-reset: step; list-style: none; padding: 0; margin: 0; max-width: 42rem; }
.method li { counter-increment: step; position: relative; padding: 0 0 1rem 2.6rem; }
.method li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font: 600 0.85rem/1.75rem var(--sans);
  text-align: center;
}

.equipment ul { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.serve p { margin: 0 0 1.25rem; max-width: 42rem; }

.tip {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  max-width: 42rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1.1rem 0.3rem;
  border-left: 3px solid var(--leaf);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #f3f6ef;
}
.tip img { flex: none; border-radius: 50%; }
.tip h2 { color: var(--leaf); font-size: 1.05rem; margin: 0 0 0.25rem; }
.tip p { margin: 0 0 0.6rem; }

.related { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 1rem; }
.section-head a { font-weight: 600; }
.related .recipe-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* 404 */

.not-found { text-align: center; }
.not-found > img { width: 160px; height: auto; }
.not-found p { margin: 0 auto; color: var(--muted); }
.not-found .recipe-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem; margin: 2rem auto 0; text-align: left; }

/* Footer */

.site-footer {
  padding: 1.5rem 16px 2.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}
.site-footer p { margin: 0.2rem 0; }
.footer-face { border-radius: 50%; }
.signoff { font: italic 1.15rem var(--serif); color: var(--brand); }
.wordmark { font-family: var(--serif); font-weight: 700; color: var(--brand); }

/* Tablets and phones: everything stacks in reading order. */

@media (max-width: 760px) {
  .greeting { margin-top: 0.5rem; }
  .mascot,
  .inner .mascot { width: 56px; height: 56px; }
  .site-nav { gap: 0 1.1rem; }
  .recipe-body { display: block; }
  /* Same specificity as the desktop sticky rule, or the panel floats over the steps. */
  .recipe-body > .ingredients { position: static; margin-bottom: 1.5rem; }
  .related .recipe-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  main { padding-top: 1.25rem; }
  .recipe-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
  .category-cards a > b { font-size: 1.05rem; }
  .menu-tile { padding: 0.75rem; }
  .menu-tile ul { font-size: 0.85rem; }
  .recipe-head { margin: 0 -16px 1.25rem; padding: 1.25rem 16px; border-radius: 0; }
  .related .recipe-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .site-nav, .greeting, .chips, .related, .site-footer, .skip { display: none; }
  .banner img { width: 220px; }
  body { font-size: 11pt; }
  .recipe-head { padding: 0; background: none; }
  .recipe-body { display: grid; }
  .recipe-body > .ingredients { position: static; }
  .photo img { max-height: 12rem; }
}