/* ==========================================================================
   Kitchenlo design system

   Direction: editorial food magazine, not app UI. The rules that hold it
   together, in case you extend it:

   1. Structure comes from hairline rules and generous space, not drop shadows.
      Shadow is reserved for things genuinely floating above the page.
   2. Corners are nearly square (3px). Pills and heavy rounding read as generic
      template; sharp corners plus a serif read as designed.
   3. Type does the work. Fraunces is used large and tight for display, Inter
      small and letterspaced for labels. The gap between them is the hierarchy.
   4. Colour is restrained on purpose, so food photography supplies it.
   5. Every measurement comes from the scales in section 1. No ad-hoc values.

    1. Tokens      2. Reset      3. Layout      4. Typography   5. Buttons
    6. Header      7. Cards      8. Home        9. Recipe      10. Guides
   11. Forms      12. Tools     13. Footer     14. Utilities   15. Responsive
   16. Cookie consent
   ========================================================================== */

/* -- 1. Tokens ------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* Warm paper and ink, close in hue so the single accent reads clearly. */
  --paper: #fbf7f0;
  --paper-2: #f4ece0;
  --surface: #fffdfa;
  --surface-2: #f7f0e5;
  --ink: #17150f;
  --ink-2: #46413a;
  --muted: #7c7469;

  --rule: rgba(23, 21, 15, 0.13);
  --rule-strong: rgba(23, 21, 15, 0.26);

  --accent: #b0431a;
  --accent-hover: #8f3512;
  --accent-soft: rgba(176, 67, 26, 0.09);
  --accent-ink: #ffffff;
  --gold: #c08a2e;

  --success: #2f6b45;
  --danger: #a32a1e;

  /* Aliases kept so any older rule or inline style still resolves. */
  --bg: var(--paper);
  --bg-alt: var(--paper-2);
  --text: var(--ink);
  --text-soft: var(--ink-2);
  --border: var(--rule);
  --border-strong: var(--rule-strong);
  --accent-2: var(--gold);

  --shadow-sm: 0 1px 2px rgba(23, 21, 15, 0.05);
  --shadow-md: 0 6px 22px rgba(23, 21, 15, 0.1);
  --shadow-lg: 0 24px 60px rgba(23, 21, 15, 0.18);

  /* Nearly square. Circles survive only on avatars and count badges. */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* Spacing scale. Every gap and pad should come from here. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Fluid type scale. */
  --fs-micro: 0.7rem;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
  --fs-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --fs-4xl: clamp(2.6rem, 1.8rem + 3.6vw, 4.6rem);

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;

  --container: 1200px;
  --measure: 68ch;
  --gutter: 1.5rem;
  --header-h: 74px;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --paper: #14120f;
  --paper-2: #1a1815;
  --surface: #1e1b17;
  --surface-2: #272320;
  --ink: #f4efe6;
  --ink-2: #cdc5b8;
  --muted: #9a9184;

  --rule: rgba(244, 239, 230, 0.14);
  --rule-strong: rgba(244, 239, 230, 0.28);

  --accent: #e8834e;
  --accent-hover: #f59a68;
  --accent-soft: rgba(232, 131, 78, 0.14);
  --accent-ink: #17150f;
  --gold: #dfae5c;

  --success: #63b98a;
  --danger: #e8776a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 26px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.65);
}

/* -- 2. Reset ------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

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

/* -- 3. Layout ------------------------------------------------------------ */

.container {
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.container.narrow {
  max-width: 780px;
}

.section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.section-tight {
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
}

/* Alternating background bands are heavy, so most sections are separated by a
   hairline instead and the tinted band is saved for real emphasis. */
.section + .section {
  border-top: 1px solid var(--rule);
}

.alt-bg {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.page-hero {
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* -- 4. Typography -------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-3xl);
  font-weight: 900;
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--fs-2xl);
}

h3 {
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--sp-4);
}

/* The letterspaced micro-label above most headings, with a rule trailing off
   to the right. It is the signature device of the layout. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 84px;
}

.eyebrow a {
  color: inherit;
}

.lede {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
}

.section-heading {
  margin-bottom: var(--sp-7);
  max-width: var(--measure);
}

.section-heading p {
  color: var(--muted);
  max-width: 56ch;
}

.section-heading .btn {
  margin-top: var(--sp-2);
}

.prose {
  color: var(--ink-2);
  line-height: 1.75;
  max-width: var(--measure);
}

.prose > p:first-of-type {
  font-size: var(--fs-lg);
  color: var(--ink);
}

.prose h2 {
  color: var(--ink);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.prose h3 {
  color: var(--ink);
  margin-top: var(--sp-6);
}

.prose ul {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

.prose li {
  padding-left: var(--sp-1);
}

/* Numbered lists get display-serif numerals rather than browser defaults. */
.prose ol {
  counter-reset: prose-item;
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding-left: 0;
  display: grid;
  gap: var(--sp-3);
}

.prose ol > li {
  counter-increment: prose-item;
  position: relative;
  padding-left: var(--sp-7);
}

.prose ol > li::before {
  content: counter(prose-item);
  position: absolute;
  left: 0;
  top: -0.08em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15em;
  color: var(--accent);
}

.callout {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
}

.callout h3 {
  margin-bottom: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.callout p {
  margin: 0;
  color: var(--ink);
}

.disclaimer {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.55;
}

/* -- 5. Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--radius);
  padding: 0.85rem 1.6rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  line-height: 1;
  border: 1px solid transparent;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  text-align: center;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--rule);
}

.btn-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger);
  color: #fff;
}

.btn-sm {
  padding: 0.55rem 1rem;
  font-size: var(--fs-xs);
}

.btn-block {
  width: 100%;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* -- 6. Header ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: -0.035em;
  flex-shrink: 0;
}

.brand:hover {
  text-decoration: none;
  color: var(--accent);
}

.brand-mark {
  color: var(--accent);
  flex-shrink: 0;
}

.site-nav {
  margin-left: auto;
}

.site-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
}

.site-nav a {
  display: block;
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

/* An underline that grows from the left, rather than a filled pill. */
.site-nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 0.3rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.site-nav > ul > li > a:hover::after,
.site-nav > ul > li > a.is-active::after {
  transform: scaleX(1);
}

.site-nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.site-nav a.is-active {
  color: var(--accent);
  font-weight: 600;
}

.has-submenu {
  position: relative;
}

.has-submenu > a {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 215px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu a:hover {
  background: var(--surface-2);
  color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: var(--ink-2);
  background: transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.icon-btn:hover {
  color: var(--accent);
  border-color: var(--rule-strong);
  text-decoration: none;
}

.icon-btn .badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.66rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

#themeToggle .icon-moon,
:root[data-theme='dark'] #themeToggle .icon-sun {
  display: none;
}

:root[data-theme='dark'] #themeToggle .icon-moon {
  display: block;
}

.auth-slot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--rule);
}

.account-menu {
  position: relative;
}

.avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.25rem 0.6rem 0.25rem 0.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}

.avatar-btn:hover {
  border-color: var(--accent);
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--fs-xs);
  font-family: var(--font-display);
}

.account-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2);
  display: grid;
  z-index: 110;
}

.account-dropdown a,
.account-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.account-dropdown a:hover,
.account-dropdown button:hover {
  background: var(--surface-2);
  color: var(--accent);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Search overlay */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(23, 21, 15, 0.5);
  backdrop-filter: blur(3px);
  padding: 9vh var(--sp-4) var(--sp-4);
  overflow-y: auto;
}

.search-panel {
  max-width: 640px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.search-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}

.search-input-row input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--fs-lg);
  font-family: var(--font-display);
  padding: var(--sp-1) 0;
}

.search-input-row input:focus {
  outline: none;
}

.search-results {
  max-height: 56vh;
  overflow-y: auto;
  padding: var(--sp-2);
}

.search-result {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink);
}

.search-result:hover,
.search-result:focus {
  background: var(--surface-2);
  text-decoration: none;
}

.search-result img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  flex-shrink: 0;
}

.search-result strong {
  display: block;
  font-size: var(--fs-base);
  font-family: var(--font-display);
  font-weight: 600;
}

.search-result span {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.search-empty {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--muted);
}

/* Breadcrumbs */

.breadcrumbs {
  padding: var(--sp-4) 0 0;
  font-size: var(--fs-micro);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.breadcrumbs li + li::before {
  content: '/';
  margin-right: var(--sp-2);
  color: var(--rule-strong);
}

.breadcrumbs a {
  color: var(--muted);
}

.breadcrumbs a:hover {
  color: var(--accent);
}

/* -- 7. Cards ------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: var(--sp-7) var(--sp-5);
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
}

/* Content cards sit directly on the page rather than floating in a box. The
   image is the object; a rule under the text anchors it. */
.recipe-card,
.guide-card,
.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  transition: transform 0.25s ease;
}

.recipe-card:hover,
.guide-card:hover,
.category-card:hover {
  transform: translateY(-3px);
}

.card-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--rule);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.recipe-card:hover .card-media img,
.guide-card:hover .card-media img,
.category-card:hover .card-media img {
  transform: scale(1.045);
}

/* Generated cover art standing in for a photo that failed to load, or for a
   recipe with no photography yet. It is flat illustration rather than a
   photograph, so the photographic hover zoom is dropped. */
img.is-fallback,
.recipe-card:hover .card-media img.is-fallback,
.guide-card:hover .card-media img.is-fallback,
.category-card:hover .card-media img.is-fallback {
  transform: none;
}

.card-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.7rem;
}

.card-body {
  padding: var(--sp-4) 0 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-body h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xl);
  line-height: 1.15;
}

.card-body h3 a {
  color: var(--ink);
}

.card-body h3 a:hover {
  color: var(--accent);
  text-decoration: none;
}

.card-body p {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
}

.card-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--sp-2);
}

.meta-strong {
  color: var(--accent);
}

.meta-dot {
  opacity: 0.45;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}

.tag {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  background: var(--accent-soft);
  color: var(--accent);
}

.tag-muted {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule);
}

.stars {
  color: var(--gold);
  letter-spacing: 0.05em;
}

.stars .star {
  color: var(--rule-strong);
}

.stars .star.full {
  color: var(--gold);
}

.stars .star.half {
  background: linear-gradient(90deg, var(--gold) 50%, var(--rule-strong) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fav-btn {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.fav-btn:hover,
.fav-btn[aria-pressed='true'] {
  color: var(--accent);
  border-color: var(--accent);
}

.fav-btn[aria-pressed='true'] svg path {
  fill: var(--accent);
}

.highlight-card {
  padding: var(--sp-5);
}

.highlight-card h3 {
  margin-bottom: var(--sp-4);
}

/* -- 8. Home -------------------------------------------------------------- */

.hero {
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero-copy h1 {
  font-size: var(--fs-4xl);
  margin-bottom: var(--sp-5);
}

.hero-search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-5);
  max-width: 540px;
  color: var(--muted);
  transition: border-color 0.16s ease;
}

.hero-search:focus-within {
  border-color: var(--accent);
}

.hero-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: var(--sp-2) 0;
  font-size: var(--fs-base);
}

.hero-search input:focus {
  outline: none;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.badge-link {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  background: transparent;
  transition: border-color 0.16s ease, color 0.16s ease;
}

a.badge-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.hero-card {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  padding: var(--sp-5);
}

.recipe-showcase h2 {
  font-size: var(--fs-xl);
  margin: var(--sp-4) 0 var(--sp-2);
}

.recipe-showcase h2 a {
  color: var(--ink);
}

.recipe-showcase h2 a:hover {
  color: var(--accent);
  text-decoration: none;
}

.recipe-showcase p {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.showcase-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--rule);
}

.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}

/* Hairline-separated figures rather than a boxed panel. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.stats-grid > div {
  background: var(--paper);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}

.stats-grid strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-2);
}

.stats-grid span {
  font-size: var(--fs-micro);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
}

.stats-grid.compact {
  border: none;
  background: transparent;
  gap: var(--sp-4);
}

.stats-grid.compact > div {
  border: 1px solid var(--rule);
}

.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

.preview-stack {
  display: grid;
  border-top: 1px solid var(--rule);
}

.preview-card {
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-5) 0;
  background: transparent;
}

.preview-card h3 {
  margin-bottom: var(--sp-2);
}

.preview-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.check-list {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
}

.check-list li {
  position: relative;
  padding-left: var(--sp-6);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 1px;
  background: var(--accent);
}

/* Inverted band, the one place the page goes dark. */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  border: none;
}

:root[data-theme='dark'] .cta-band {
  background: var(--surface-2);
}

.cta-band h2 {
  color: var(--paper);
  margin-bottom: var(--sp-3);
}

:root[data-theme='dark'] .cta-band h2 {
  color: var(--ink);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
  flex-wrap: wrap;
}

.cta-inner p {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  margin: 0;
  max-width: 48ch;
}

:root[data-theme='dark'] .cta-inner p {
  color: var(--ink-2);
}

.cta-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.cta-band .btn-ghost {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 40%, transparent);
}

.cta-band .btn-ghost:hover {
  color: var(--paper);
  border-color: var(--paper);
  background: color-mix(in srgb, var(--paper) 12%, transparent);
}

:root[data-theme='dark'] .cta-band .btn-ghost {
  color: var(--ink);
  border-color: var(--rule-strong);
}

/* -- 9. Recipe page ------------------------------------------------------- */

.recipe-hero {
  padding: clamp(1.5rem, 4vw, 3rem) 0 0;
}

.recipe-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.recipe-hero-copy h1 {
  font-size: var(--fs-4xl);
  margin-bottom: var(--sp-4);
}

.recipe-hero-media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
}

.recipe-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipe-byline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}

.recipe-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.recipe-meta-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.recipe-meta-strip > div {
  background: var(--paper);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
}

.recipe-meta-strip span {
  display: block;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: var(--sp-2);
  font-weight: 600;
}

.recipe-meta-strip strong {
  font-size: var(--fs-lg);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.recipe-body-grid {
  display: grid;
  grid-template-columns: minmax(290px, 370px) 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.recipe-ingredients {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  background: var(--surface-2);
  border: 1px solid var(--rule);
  padding: var(--sp-5);
}

.ingredients-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-1);
}

.ingredients-head h2 {
  margin: 0;
  font-size: var(--fs-xl);
}

/* The figure marks the stepper's number as a count of people rather than an
   abstract quantity. It sits outside the stepper so the control itself, and
   the scaling it drives, are untouched. */
.servings-control {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.servings-icon {
  flex: none;
  color: var(--ink-2);
}

.servings-scaler {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-strong);
}

.servings-scaler button {
  width: 30px;
  height: 30px;
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1;
}

.servings-scaler button:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.servings-scaler span {
  min-width: 32px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  font-family: var(--font-display);
}

.scale-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: var(--sp-5);
}

.ingredient-group + .ingredient-group {
  margin-top: var(--sp-5);
}

.ingredient-group h3 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
  font-weight: 700;
}

.ingredient-list {
  list-style: none;
  display: grid;
}

.ingredient {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-2) 0;
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1.5;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
}

.ingredient input {
  margin-top: 0.3em;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.ingredient input:checked + span {
  text-decoration: line-through;
  color: var(--muted);
}

.recipe-ingredients .btn-block {
  margin-top: var(--sp-5);
}

.equipment-box {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.equipment-box h3 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: var(--sp-3);
  font-weight: 700;
}

.equipment-box ul {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* The video sits in its own section between the intro and the ingredients, on
   the same narrow measure as the intro above it. It takes the same card
   treatment as the ingredients box so it reads as part of the set. */
.recipe-video {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  padding: var(--sp-5);
}

.video-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.video-head h2 {
  margin: 0;
  font-size: var(--fs-xl);
}

.video-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--ink);
}

.video-frame video,
.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Until a video is added the panel holds its shape rather than collapsing,
   and says so instead of looking broken. */
.video-frame-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  border-style: dashed;
}

.video-empty-mark {
  margin: 0;
  font-size: 2rem;
  line-height: 1;
  color: var(--rule-strong);
}

.video-empty-note {
  margin: 0;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--muted);
}

.video-caption {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.recipe-method > h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--ink);
}

.steps {
  list-style: none;
  display: grid;
  margin-bottom: var(--sp-7);
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--rule);
}

.step:first-child {
  padding-top: 0;
}

/* Large outlined numeral rather than a filled circle. */
.step-number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  min-width: 1.6ch;
  letter-spacing: -0.04em;
}

.step-body h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
}

.step-body p {
  margin: 0;
  color: var(--ink-2);
}

.tips-box,
.storage-box,
.nutrition-box {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.tips-box h3,
.storage-box h3,
.nutrition-box h3 {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lg);
}

.tips-box ul {
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.tips-box.variations {
  background: transparent;
}

.storage-box p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.nutrition-table th,
.nutrition-table td {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
  text-align: left;
}

.nutrition-table th {
  font-weight: 400;
  color: var(--ink-2);
}

.nutrition-table td {
  text-align: right;
  font-weight: 700;
  font-family: var(--font-display);
}

.nutrition-table tr:last-child th,
.nutrition-table tr:last-child td {
  border-bottom: none;
}

.nutrition-box .disclaimer {
  margin: var(--sp-4) 0 0;
}

/* Share

   The same hairline card as the tips and nutrition boxes, so the share row
   reads as part of the recipe rather than a widget bolted onto it. The actions
   are ordinary buttons: sharing does not need a colour of its own. */

.share-box {
  display: grid;
  gap: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  padding: var(--sp-5);
}

.share-intro h2 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-xl);
}

.share-intro p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.share-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* The copy confirmation sits beside the button that produced it, and takes no
   room at all while it is empty, so the card keeps its shape between uses. */
.share-links .form-status {
  margin: 0;
  font-size: var(--fs-xs);
}

/* FAQ */

.faq-section {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}

.faq-section h2 {
  margin-bottom: var(--sp-6);
}

.faq-list {
  display: grid;
  border-top: 1px solid var(--rule-strong);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item summary {
  padding: var(--sp-5) 0;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  align-items: baseline;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 400;
}

.faq-item[open] summary::after {
  content: '\2212';
}

.faq-answer {
  padding: 0 0 var(--sp-5);
  color: var(--ink-2);
  max-width: var(--measure);
}

.faq-answer p {
  margin: 0;
}

/* -- 10. Guides ----------------------------------------------------------- */

.guide-media .container {
  padding: 0;
}

.guide-media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border: 1px solid var(--rule);
}

.guide-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.guide-toc {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-4);
}

.guide-toc h2 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: var(--sp-4);
  font-weight: 700;
}

.guide-toc ol {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  counter-reset: toc;
}

.guide-toc li {
  counter-increment: toc;
}

.guide-toc a {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
  display: flex;
  gap: var(--sp-2);
}

.guide-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fs-micro);
  padding-top: 0.25em;
}

.guide-toc a:hover {
  color: var(--accent);
}

.guide-body {
  font-size: var(--fs-lg);
  line-height: 1.75;
}

/* -- 11. Forms and auth --------------------------------------------------- */

.field {
  margin-bottom: var(--sp-5);
}

.field > label,
.checkbox {
  display: block;
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-2);
  color: var(--ink-2);
}

.field input,
.field select,
.field textarea,
.add-item-row input,
.newsletter-form input {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-base);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field textarea {
  resize: vertical;
  min-height: 128px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--danger);
}

.field-error {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--danger);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.field-error:empty {
  display: none;
}

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  cursor: pointer;
  margin-bottom: var(--sp-4);
  color: var(--ink-2);
}

.checkbox input {
  width: auto;
  margin-top: 0.25em;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 4.5rem;
}

.password-toggle {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.strength {
  margin-top: var(--sp-2);
}

.strength-bar {
  height: 3px;
  background: var(--rule);
  overflow: hidden;
}

.strength-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--danger);
  transition: width 0.25s ease, background 0.25s ease;
}

.strength-label {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-micro);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.form-status {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  min-height: 1.2em;
  color: var(--ink-2);
}

.form-status.is-error {
  color: var(--danger);
}

.form-status.is-success {
  color: var(--success);
}

.auth-page main {
  min-height: 66vh;
  display: grid;
  align-items: center;
}

.auth-section {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.auth-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--rule-strong);
}

.auth-card h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-2);
}

.auth-sub {
  color: var(--muted);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
}

.auth-alt {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.auth-aside h2 {
  font-size: var(--fs-xl);
}

.notice {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  padding: var(--sp-5);
}

.notice strong {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
}

.notice p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.contact-grid,
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.contact-form {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--rule-strong);
}

.contact-side,
.about-side {
  display: grid;
  gap: var(--sp-5);
}

.info-card {
  padding: var(--sp-5);
}

.info-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
}

.info-list dt {
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  padding-top: 0.3em;
}

.info-list dd {
  margin: 0;
}

/* -- 12. Tools ------------------------------------------------------------ */

.filter-bar {
  border: 1px solid var(--rule-strong);
  padding: var(--sp-5);
  background: var(--surface);
}

.search-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border: 1px solid var(--rule-strong);
  color: var(--muted);
}

.search-row:focus-within {
  border-color: var(--accent);
}

.search-row input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: var(--sp-2) 0;
}

.search-row input:focus {
  outline: none;
}

.filter-drawer {
  margin-top: var(--sp-4);
}

.filter-drawer summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  padding: var(--sp-2) 0;
}

.filter-groups {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: all 0.14s ease;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

:root[data-theme='dark'] .chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.results-row,
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.list-toolbar {
  border-top: none;
}

.results-count {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.sort-label {
  font-size: var(--fs-micro);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.sort-label select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.empty-state {
  text-align: center;
  padding: clamp(3rem, 6vw, 4.5rem) var(--sp-5);
  color: var(--muted);
  border: 1px dashed var(--rule-strong);
}

.empty-state h2 {
  color: var(--ink);
}

.empty-state .button-row {
  justify-content: center;
  margin-top: var(--sp-5);
}

.account-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.account-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: grid;
  border-top: 2px solid var(--ink);
}

.account-nav a {
  padding: var(--sp-3) 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}

.account-nav a:hover,
.account-nav a.is-active {
  color: var(--accent);
  text-decoration: none;
}

.account-panels {
  display: grid;
  gap: var(--sp-5);
}

.account-panels .card {
  padding: var(--sp-6);
}

.planner-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}

.planner-toolbar .form-status {
  margin: 0;
  flex-basis: 100%;
}

.planner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-4);
}

.planner-day {
  border: 1px solid var(--rule);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 210px;
  background: var(--surface);
}

.planner-day h2 {
  font-size: var(--fs-micro);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
  font-weight: 700;
}

.planner-slot {
  flex: 1;
}

.planner-card {
  display: block;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  position: relative;
}

.planner-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.planner-card .planner-title {
  display: block;
  padding: var(--sp-2) var(--sp-3) 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.3;
}

.planner-card .planner-meta {
  display: block;
  padding: var(--sp-1) var(--sp-3) var(--sp-3);
  font-size: var(--fs-micro);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.planner-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  background: var(--paper);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  border: 1px solid var(--rule);
}

.planner-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.planner-select {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  font-size: var(--fs-xs);
}

.planner-summary {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--rule-strong);
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4);
  text-align: center;
}

.summary-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.summary-stats span {
  font-size: var(--fs-micro);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.add-item-row {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.add-item-row input {
  flex: 1;
}

.list-group {
  margin-bottom: var(--sp-6);
}

.list-group h2 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule-strong);
  font-weight: 700;
}

.list-items {
  list-style: none;
  display: grid;
}

.list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}

.list-item input {
  accent-color: var(--accent);
  flex-shrink: 0;
}

.list-item span {
  flex: 1;
  font-size: var(--fs-sm);
}

.list-item.is-checked span {
  text-decoration: line-through;
  color: var(--muted);
}

.list-item button {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 var(--sp-2);
}

.list-item button:hover {
  color: var(--danger);
}

/* Collections */

.chip-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.collection-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--paper);
  transition: background 0.16s ease;
}

.collection-tile:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

.collection-count {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.04em;
}

.collection-name {
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-sm);
}

/* -- 13. Footer ----------------------------------------------------------- */

.site-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--rule-strong);
  padding: clamp(3rem, 6vw, 5rem) 0 var(--sp-5);
  margin-top: var(--sp-8);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.7fr repeat(5, 1fr);
  gap: var(--sp-6) var(--sp-5);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--rule);
}

.footer-brand p {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: var(--sp-4) 0 var(--sp-5);
  max-width: 34ch;
  line-height: 1.6;
}

.footer-col h3 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
  font-weight: 700;
}

.footer-col ul {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}

.footer-col a {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.footer-col a:hover {
  color: var(--accent);
}

.social-row {
  display: flex;
  gap: var(--sp-2);
}

.social-link {
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule-strong);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  font-weight: 700;
  font-size: var(--fs-xs);
  font-family: var(--font-display);
}

.social-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
}

.footer-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
  flex-wrap: wrap;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--rule);
}

.footer-newsletter h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xl);
}

.footer-newsletter p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 46ch;
}

.newsletter-form {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-width: min(100%, 400px);
}

.newsletter-form input {
  flex: 1;
  min-width: 210px;
}

.newsletter-form .form-status {
  flex-basis: 100%;
  margin: 0;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.footer-bottom p {
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: var(--sp-5);
}

.footer-legal a {
  color: var(--muted);
}

.footer-legal a:hover {
  color: var(--accent);
}

.back-to-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 90;
  width: 42px;
  height: 42px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.back-to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* -- 14. Utilities -------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

.error-hero {
  text-align: center;
}

.error-hero .button-row {
  justify-content: center;
}

.error-hero .eyebrow {
  justify-content: center;
}

.error-hero .eyebrow::after {
  display: none;
}

.error-hero .lede {
  margin-inline: auto;
}

/* -- 15. Responsive ------------------------------------------------------- */

@media (max-width: 1180px) {
  .footer-top {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1000px) {
  .guide-grid {
    grid-template-columns: 190px 1fr;
  }
}

@media (max-width: 960px) {
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-strong);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav > ul > li {
    border-bottom: 1px solid var(--rule);
  }

  .site-nav a {
    padding: var(--sp-4) 0;
    font-size: var(--fs-md);
  }

  .site-nav > ul > li > a::after {
    display: none;
  }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 1px solid var(--rule-strong);
    margin: 0 0 var(--sp-3) var(--sp-3);
    padding: 0 0 0 var(--sp-4);
  }

  .submenu a {
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
  }

  .has-submenu > a .chev {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .recipe-body-grid,
  .guide-grid,
  .account-grid,
  .auth-grid,
  .hero-grid,
  .split-section,
  .recipe-hero-grid,
  .contact-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .recipe-ingredients,
  .guide-toc,
  .account-nav {
    position: static;
  }

  .account-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    border-top: none;
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: var(--sp-3);
  }

  .account-nav a {
    border-bottom: none;
    padding: 0;
  }

  .hero-card,
  .recipe-hero-media {
    order: -1;
  }

  .hero-copy h1,
  .recipe-hero-copy h1 {
    font-size: var(--fs-3xl);
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 1.1rem;
  }

  .account-name {
    display: none;
  }

  .avatar-btn {
    padding: 0.25rem;
    border: none;
  }

  .auth-slot {
    border-left: none;
    padding-left: 0;
  }

  /* One auth action is enough on a phone. */
  .auth-slot .btn-ghost {
    display: none;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6) var(--sp-4);
  }

  .footer-newsletter,
  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
  }

  .newsletter-form {
    width: 100%;
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .recipe-meta-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .step {
    gap: var(--sp-4);
  }

  .step-number {
    font-size: 1.8rem;
  }

  .recipe-actions .btn,
  .share-links .btn,
  .empty-state .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .recipe-meta-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-search {
    flex-wrap: wrap;
    padding: var(--sp-3);
  }

  .hero-search input {
    flex-basis: 100%;
  }

  .hero-search .btn {
    width: 100%;
  }

  .search-overlay {
    padding: 4vh var(--sp-3) var(--sp-3);
  }

  .button-row .btn {
    width: 100%;
  }

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

/* -- Print ---------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .breadcrumbs,
  .back-to-top,
  .recipe-actions,
  .fav-btn,
  .search-overlay,
  .cta-band,
  .faq-section,
  .share-section,
  .servings-control,
  .recipe-ingredients .btn,
  .recipe-video,
  .alt-bg {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .recipe-body-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .recipe-hero-media {
    max-width: 52%;
  }

  .card,
  .tips-box,
  .storage-box,
  .nutrition-box,
  .recipe-ingredients {
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .step {
    break-inside: avoid;
  }

  /* The outlined numeral is invisible in print, so fill it. */
  .step-number {
    color: #000;
    -webkit-text-stroke: 0;
  }

  a::after {
    content: '';
  }
}

/* -- 16. Cookie consent --------------------------------------------------- */

/* A bar rather than a blocking overlay: the site stays readable while the
   choice is pending. Shadow is warranted here because it genuinely floats. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  background: var(--surface);
  border-top: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5) 0;
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 4vw, var(--sp-7));
}

.cookie-copy {
  max-width: 62ch;
}

.cookie-copy h2 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
}

.cookie-copy p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-left: auto;
  flex-shrink: 0;
}

/* The footer link that reopens the dialog. Matches the links beside it rather
   than looking like a button dropped into the legal row. */
.footer-legal-btn {
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-legal-btn:hover {
  color: var(--accent);
}

/* -- preferences dialog -- */

.cookie-dialog {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(23, 21, 15, 0.5);
  backdrop-filter: blur(3px);
  padding: 8vh var(--sp-4) var(--sp-4);
  overflow-y: auto;
}

.cookie-panel {
  max-width: 560px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-lg);
}

.cookie-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}

.cookie-panel-head h2 {
  font-size: var(--fs-xl);
  margin: 0;
}

.cookie-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}

.cookie-close:hover {
  color: var(--accent);
  border-color: var(--rule-strong);
}

.cookie-panel-body {
  padding: var(--sp-2) var(--sp-5) var(--sp-5);
}

.cookie-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
}

.cookie-option input {
  margin-top: 0.25em;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.cookie-option label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
}

.cookie-option input:disabled + div label {
  cursor: default;
}

.cookie-option p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: var(--sp-1) 0 0;
  line-height: 1.5;
}

.cookie-locked {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--muted);
}

.cookie-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: var(--sp-4) 0 0;
  line-height: 1.6;
}

.cookie-panel-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-top: 1px solid var(--rule);
}

@media (max-width: 860px) {
  /* Stack, and let the buttons fill the row so they stay easy to hit. */
  .cookie-banner-inner {
    display: grid;
    gap: var(--sp-4);
  }

  .cookie-actions {
    margin-left: 0;
  }

  .cookie-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .cookie-banner {
    padding: var(--sp-4) 0;
    max-height: 80vh;
    overflow-y: auto;
  }

  .cookie-actions .btn {
    flex-basis: 100%;
  }
}

@media print {
  .cookie-banner,
  .cookie-dialog {
    display: none !important;
  }
}