/* Colours of the app: Material 3 tonal spot from the app's seed #9A3412 (lib/app.dart, tasteKeepTheme),
   scaffold #FFFBEB / #120F0D. Cards are surfaceContainerLow with the outline, as in the app. */
:root {
  --page: #fffbeb;
  --surface: #fff1ed;           /* surfaceContainerLow: recipe cards, lists */
  --surface-raised: #fff1ed;
  --surface-accent: #ffdbd1;    /* primaryContainer: step numbers */
  --on-surface-accent: #723522;
  --text: #231917;
  --muted: #53433f;             /* onSurfaceVariant */
  --line: #85736e;              /* outline */
  --line-soft: #d8c2bc;         /* outlineVariant */
  --accent: #8f4c37;            /* primary: Start cooking */
  --accent-hover: #723522;
  --accent-text: #ffffff;
  --focus: #2563eb;
  --shadow: 0 12px 32px rgba(80, 38, 24, 0.10);
  --radius-lg: 20px;            /* cards */
  --radius-md: 20px;
  --radius-button: 16px;        /* filled and outlined buttons, fields */
  --radius-chip: 12px;
  --brand: #9a3412;             /* the app icon, the same in both themes */
  --brand-paper: #fffbeb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #120f0d;
    --surface: #231917;
    --surface-raised: #231917;
    --surface-accent: #723522;
    --on-surface-accent: #ffdbd1;
    --text: #f1dfda;
    --muted: #d8c2bc;
    --line: #a08c87;
    --line-soft: #53433f;
    --accent: #ffb59f;
    --accent-hover: #ffdbd1;
    --accent-text: #561f0e;
    --focus: #93c5fd;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background: var(--page);
  /* Apple's system face: SF Pro on iPhone, iPad and Mac, the platform face elsewhere. No web fonts, no third-party requests. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  z-index: 10;
  inset: 12px auto auto 12px;
  padding: 10px 14px;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: 10px;
  font-weight: 750;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.shell {
  width: min(calc(100% - 24px), 920px);
  margin-inline: auto;
  padding: 24px 0 56px;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 32px;
}

.identity {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.mark {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(100, 43, 26, 0.18);
}

.mark svg { display: block; width: 100%; height: 100%; }
.mark-background { fill: var(--brand); }
.mark-bookmark { fill: var(--brand-paper); }
.mark-spoon { fill: var(--brand); }

.brand { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.022em; }
.brand-note { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.3; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-raised);
}

.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.site-nav a:hover { color: var(--accent); background: var(--surface); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(30px, 8vw, 68px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

h1, h2, h3 {
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h3 { letter-spacing: -0.016em; line-height: 1.2; }

h1 {
  max-width: 12ch;
  margin: 0 0 20px;
  font-size: clamp(2.55rem, 10vw, 5.35rem);
}

h2 { margin: 64px 0 20px; font-size: clamp(1.8rem, 6vw, 2.6rem); }
h3 { margin: 0 0 10px; font-size: 1.12rem; }
p { max-width: 70ch; margin: 0 0 16px; text-wrap: pretty; }

.lead {
  max-width: 57ch;
  color: var(--muted);
  font-size: clamp(1.06rem, 2.5vw, 1.28rem);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  background: transparent;
  font-weight: 600;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.button:hover { transform: translateY(-1px); }
.button.primary { color: var(--accent-text); background: var(--accent); }
.button.primary:hover { color: var(--accent-text); background: var(--accent-hover); }

.trust-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
}

.trust-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
}

.section-intro { color: var(--muted); margin-top: -8px; }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.card {
  padding: 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.card-number {
  display: block;
  margin-bottom: 26px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.card p { margin: 0; color: var(--muted); }

.policy {
  margin-top: 64px;
  padding: clamp(24px, 6vw, 48px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-raised);
}

.policy h2 { margin-top: 0; }
.policy h3 { margin-top: 30px; }
.effective { color: var(--muted); }

.policy-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 26px 0 36px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--line-soft);
}

.policy-summary div { padding: 18px; background: var(--surface); }
.policy-summary strong { display: block; margin-bottom: 3px; color: var(--accent); }
.policy-summary span { color: var(--muted); }

.contact-card {
  margin-top: 28px;
  padding: clamp(24px, 6vw, 44px);
  border-radius: 28px;
  color: var(--accent-text);
  background: var(--accent);
}

.contact-card h2 { margin: 0 0 12px; color: inherit; }
.contact-card p { margin-bottom: 24px; color: inherit; opacity: 0.92; }
.contact-card .button { color: var(--accent); background: var(--accent-text); border-color: var(--accent-text); }
.contact-card .button:hover { color: var(--accent-hover); background: var(--surface-raised); }

footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.9rem;
}

footer p { margin: 0; }

@media (min-width: 560px) {
  .trust-list { grid-template-columns: repeat(3, max-content); gap: 22px; }
  .policy-summary { grid-template-columns: repeat(3, 1fr); }
  footer { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 700px) {
  .shell { width: min(calc(100% - 48px), 920px); padding-top: 34px; padding-bottom: 72px; }
  .site-header { margin-bottom: 44px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .card { padding: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}


/* Press kit and links pages. */

.site-nav a[aria-current="page"] { color: var(--accent); background: var(--surface); }

.hero .icon {
  width: 88px;
  height: 88px;
  margin-bottom: 22px;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(100, 43, 26, 0.2);
}

.screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 3vw, 22px);
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.screens.pad { grid-template-columns: 1fr; margin-top: 18px; }

.duo-shot { margin: 18px 0 0; }
.duo-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }

.screens img {
  display: block;
  width: 100%;
  height: auto;
}

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.feature .card h3 { margin-top: 0; }
.feature .card p + p { margin-top: 12px; }

.feature-figure {
  max-width: 260px;
  margin: 8px auto 0;
}

.feature-figure img { display: block; width: 100%; height: auto; }

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--line-soft);
}

.facts div { padding: 16px 18px; background: var(--surface); }
.facts dt { margin: 0 0 2px; color: var(--accent); font-weight: 600; }
.facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
/* A 44 px tap height without moving the text. */
.facts dd a { display: inline-block; padding-block: 12px; margin-block: -12px; }

.plain-list { margin: 0; padding-left: 1.2em; }
.plain-list li + li { margin-top: 6px; }

.download-note { color: var(--muted); font-size: 0.94rem; }

.press-contact { margin: 20px 0 0; color: var(--muted); overflow-wrap: anywhere; }

.store-badge {
  display: inline-block;
  padding: 10px;
  margin: -10px;
  border-radius: 14px;
  line-height: 0;
}

.store-badge img { width: auto; height: 54px; }
.store-badge:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.release-note { max-width: 46ch; margin: 0; color: var(--muted); font-weight: 650; }

/* The home heading breaks after the comma: "Your recipes, / in one private book." */
@media (min-width: 1000px) {
  .home-title { max-width: 15ch; }
  .home-title .tail { white-space: nowrap; }
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 28px;
}

/* The links page: one column of large targets. */

.links-shell {
  width: min(calc(100% - 32px), 520px);
  margin-inline: auto;
  padding: 40px 0 56px;
  text-align: center;
}

.links-shell .icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(100, 43, 26, 0.2);
}

.links-shell h1 {
  max-width: none;
  margin: 18px 0 10px;
  font-size: clamp(1.7rem, 7vw, 2.2rem);
}

.links-shell .lead { margin-inline: auto; font-size: 1.04rem; }

.link-list {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.link-list .button { width: 100%; min-height: 54px; font-size: 1.02rem; }

.link-list .store-badge { margin: 0 auto 6px; }

.social-title {
  margin: 36px 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.social-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-list .button { width: 100%; }

.links-footer { margin-top: 34px; color: var(--muted); font-size: 0.9rem; }

@media (min-width: 560px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .social-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
  .screens.pad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* Cook and its screenshot fill the right column beside the other four cards. */
  .feature-tall { display: flex; flex-direction: column; grid-row: span 4; }
  .feature-tall .feature-figure { margin: auto; padding-top: 12px; }
}

/* Product pages: the home page and the ad landing pages (/go/…).
   Open layout, the App Store badge first, real iPhone screens in Apple's bezel. No scripts, no redirect. */

.top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  padding: clamp(8px, 3vw, 24px) 0 clamp(24px, 6vw, 56px);
}

.top h1 { max-width: 13ch; margin: 0 0 18px; font-size: clamp(2.5rem, 9.5vw, 4.2rem); }
.top .lead { margin-bottom: 26px; }

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.cta .store-badge img { height: 58px; }

.cta-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.4;
}

.phone {
  position: relative;
  isolation: isolate;
  width: min(72%, 300px);
  margin: 0 auto;
}

.phone img,
.shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 34px rgba(80, 38, 24, 0.22));
}

.section-head { max-width: 40rem; margin: 0 auto 28px; text-align: center; }
.section-head h2 { margin: 0 0 10px; }
.section-head p { margin: 0 auto; color: var(--muted); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.pro {
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Home: one feature per row, screen and text side by side from 760 px, alternating. */
.features { display: grid; gap: clamp(48px, 9vw, 96px); margin-top: clamp(40px, 8vw, 72px); }

.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.feature-row h2 { margin: 0 0 14px; font-size: clamp(1.75rem, 5.5vw, 2.5rem); }
.feature-row p { color: var(--muted); font-size: 1.06rem; }
.feature-row p:last-child { margin-bottom: 0; }
.feature-row .shot { order: 2; width: min(58%, 250px); margin: 0 auto; }

/* Landing pages: steps and a grid of small screens. */
.steps,
.screens-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li,
.screens-grid li {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.steps .shot,
.screens-grid .shot { width: 100%; }
.steps .shot img,
.screens-grid .shot img { filter: drop-shadow(0 10px 16px rgba(80, 38, 24, 0.18)); }

.steps h3,
.screens-grid h3 { margin: 0 0 6px; font-size: 1.12rem; }
.steps p,
.screens-grid p { margin: 0; color: var(--muted); font-size: 0.98rem; }

.step-number {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border-radius: 50%;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}

.aside-note { margin: 22px auto 0; color: var(--muted); text-align: center; }

.privacy-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: clamp(56px, 10vw, 104px);
}

.privacy-band .card strong { display: block; margin-bottom: 6px; color: var(--accent); font-size: 1.05rem; }

.band {
  margin-top: clamp(56px, 10vw, 96px);
  padding: clamp(28px, 7vw, 56px);
  border-radius: var(--radius-lg);
  color: var(--accent-text);
  background: var(--accent);
  text-align: center;
}

.band h2 { margin: 0 0 12px; color: inherit; }
.band p { margin: 0 auto 26px; color: inherit; opacity: 0.92; }
.band .store-badge img { height: 58px; }

.founder {
  max-width: 40rem;
  margin: clamp(56px, 10vw, 96px) auto 0;
  text-align: center;
}

.founder img {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 14px;
}

.founder blockquote { margin: 0; }
.founder blockquote p { margin: 0 auto 12px; font-size: clamp(1.1rem, 2.6vw, 1.3rem); line-height: 1.55; }
.founder figcaption { color: var(--muted); font-weight: 600; }

.go-header { margin-bottom: 8px; }
.go-icon { width: 44px; height: 44px; border-radius: 10px; }
.go-section { margin-top: clamp(48px, 9vw, 88px); }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
/* A 44 px tap height without moving the text. */
.site-footer a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

@media (min-width: 560px) {
  .privacy-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screens-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screens-grid li { grid-template-columns: 1fr; text-align: center; }
  .screens-grid .shot { width: min(70%, 200px); margin: 0 auto; }
}

@media (min-width: 760px) {
  .shell.wide { width: min(calc(100% - 48px), 1080px); }
  .top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 48px; }
  .top h1 { max-width: none; }
  .phone { width: min(100%, 320px); }
  .feature-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; }
  .feature-row .shot { order: 0; width: min(100%, 280px); }
  .feature-row:nth-child(even) .shot { order: 2; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { grid-template-columns: 1fr; align-content: start; }
  .steps .shot { width: min(78%, 200px); margin: 0 auto 6px; }
}

@media (min-width: 1000px) {
  .screens-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Recipe list cards: the app's recipe card (photo left, title, time, servings, tags). */
.recipe-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .recipe-list { grid-template-columns: 1fr 1fr; } }
.recipe-card {
  display: grid; grid-template-columns: minmax(112px, 30%) 1fr; min-height: 136px;
  overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.recipe-card:hover { color: var(--text); box-shadow: var(--shadow); transform: translateY(-2px); }
.recipe-card:active { transform: scale(.99); }
.recipe-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recipe-card-body { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 18px; min-width: 0; }
.recipe-card-title { font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.recipe-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 0.9375rem; }
.recipe-card-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.recipe-card .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.recipe-card-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--accent); font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) { .recipe-card { transition: none; } .recipe-card:hover, .recipe-card:active { transform: none; } }


/* App look (27.10): the site follows the app's screens. Headings sit on the page as the app's titles do
   ("What shall we cook?"), no raised white panel; cards are outlined surfaces; buttons and fields have the
   app's 16 px corners, chips 12 px. */
.hero { padding: 8px 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
h1 { font-size: clamp(2.2rem, 8.5vw, 3.6rem); max-width: 16ch; }
h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
.top h1 { font-size: clamp(2.2rem, 8.5vw, 3.6rem); }
.site-nav { padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-button); background: transparent; }
.site-nav a { min-height: 44px; border-radius: var(--radius-chip); font-weight: 600; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); background: var(--surface); }
.button { min-height: 52px; border-radius: var(--radius-button); border-width: 1px; border-color: var(--line); color: var(--accent); }
.button.primary { border-color: var(--accent); }
.button:hover { transform: none; background: var(--surface); }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.card, .steps li, .screens-grid li { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.policy, .facts, .policy-summary { border-color: var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.band, .contact-card { border-radius: var(--radius-lg); }
.mark { border-radius: 12px; box-shadow: none; }

/* Recipe page: the app's recipe screen. Photo with the title over it, chips for time, servings and meal,
   ingredients as an outlined list with amounts on the right, steps with numbers in tinted circles. */
.recipe-hero { position: relative; margin: 8px 0 16px; overflow: hidden; border-radius: var(--radius-lg); background: #2a1f1b; }
.recipe-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.recipe-hero::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.62)); }
.recipe-hero h1 { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px; margin: 0; max-width: none; color: #fff; font-size: clamp(1.8rem, 7vw, 2.8rem); text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.recipe-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.recipe-chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-chip); color: var(--text); font-size: 0.9375rem; }
.recipe-chips .ico { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ingredient-group { margin: 22px 0 10px; font-size: 1.02rem; color: var(--muted, inherit); }
h2 + .ingredient-group { margin-top: 0; }
.ingredients + .ingredient-group { margin-top: 22px; }
.ingredients { margin: 0; padding: 0 16px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ingredients li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 0; }
.ingredients li + li { border-top: 1px solid var(--line-soft); }
.ingredients .amt { flex: none; font-size: 0.875rem; font-weight: 600; color: var(--text); text-align: right; }
.method { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.method li { position: relative; min-height: 32px; padding-left: 48px; counter-increment: step; }
.method li + li { margin-top: 18px; }
.method li::before { content: counter(step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--on-surface-accent); background: var(--surface-accent); font-size: 0.9375rem; font-weight: 600; }
.recipe-card { border-width: 1px; }

/* "Save in TasteKeep" on the terracotta band: the band's colours swapped, as the contact card does. */
.band .save-row { margin: 0 0 18px; }
.band .button { min-width: 220px; color: var(--accent); background: var(--accent-text); border-color: var(--accent-text); font-weight: 700; }
.band .button:hover { color: var(--accent-hover); background: var(--page); border-color: var(--page); }
.band ~ .download-note { margin-top: 16px; }

/* The same four tabs on every page (Recipes, Support, Privacy, Press). On a phone the bar takes the full width
   under the name and shares it equally, so all four fit at 320 px. */
.site-nav a[aria-current] { color: var(--accent); background: var(--surface); }
@media (max-width: 559px) {
  .site-nav { flex: 1 1 100%; }
  .site-nav a { flex: 1 1 0; justify-content: center; padding: 8px 6px; font-size: 1rem; }
}