/* Self-hosted Google Fonts, latin subset. Single woff2 per family (variable font, ~25-38 KB each). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Design tokens. Utilities like text-accent, bg-paper, etc. resolve these via Tailwind CDN config. */
:root {
  color-scheme: light;
  --color-bg: #f6f0e4;
  --color-paper: rgba(255, 251, 245, 0.88);
  --color-paper-strong: #fffdf8;
  --color-text: #241816;
  --color-muted: #6d5a4f;
  --color-line: rgba(62, 36, 25, 0.14);
  --color-line-strong: rgba(62, 36, 25, 0.28);
  --color-accent: #b4452f;
  --color-accent-soft: rgba(180, 69, 47, 0.12);
  --color-accent-2: #d7aa49;
  --color-input-bg: #fffdf8;
  --color-input-border: rgba(62, 36, 25, 0.22);
  --color-placeholder: rgba(62, 36, 25, 0.45);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  --shadow-card: 0 24px 60px rgba(78, 48, 30, 0.12);
  --shadow-card-hover: 0 28px 70px rgba(78, 48, 30, 0.16);

  --radius-card: 28px;
  --radius-card-lg: 30px;
  --radius-card-xl: 34px;
}

/* Dark theme — Midnight Brasserie: graphite + brass + sage (five-star hotel cookbook) */
.dark {
  color-scheme: dark;
  --color-bg: #0e1114;
  --color-paper: rgba(24, 28, 32, 0.85);
  --color-paper-strong: #1c2025;
  --color-text: #ece3d1;
  --color-muted: #9a9182;
  --color-line: rgba(236, 227, 209, 0.10);
  --color-line-strong: rgba(236, 227, 209, 0.22);
  --color-accent: #c9a86a;
  --color-accent-soft: rgba(201, 168, 106, 0.16);
  --color-accent-2: #7a9b7a;
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 28px 70px rgba(0, 0, 0, 0.55);
  /* Brighter input surface than the page, with a real border so fields
     stop disappearing into the background. */
  --color-input-bg: #242a31;
  --color-input-border: rgba(236, 227, 209, 0.28);
  --color-placeholder: rgba(236, 227, 209, 0.45);
}

/* Body background (complex gradient varies by theme via CSS variables) */
body {
  background:
    radial-gradient(circle at top left, rgba(215, 170, 73, 0.2), transparent 28%),
    radial-gradient(circle at top right, rgba(180, 69, 47, 0.12), transparent 30%),
    linear-gradient(180deg, color-mix(in oklab, var(--color-bg) 85%, white) 0%, var(--color-bg) 100%);
  min-height: 100vh;
}
.dark body {
  background:
    radial-gradient(circle at top left, rgba(201, 168, 106, 0.08), transparent 32%),
    radial-gradient(circle at top right, rgba(122, 155, 122, 0.06), transparent 34%),
    linear-gradient(180deg, #141922 0%, var(--color-bg) 100%);
}

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

/* Form fields: ALL visible form-element styling is inline Tailwind inside
   `shared/_field` (padding, border, background, focus ring, placeholder color).
   The only rules left here are the two pseudo-element bits Tailwind can't
   directly express: Chrome's autofill box-shadow override, and a minor reset
   so inputs don't inherit dark-OS UA defaults before `shared/_field` applies. */
:where(input, textarea, select) {
  font: inherit;
  color: inherit;
}
/* Autofill — Chrome paints a baked-in blue/yellow background on autofill that
   ignores Tailwind utilities. Inset shadow keeps our surface, the
   -webkit-text-fill-color keeps the text readable in both themes. Narrow to
   form fields so it can't affect anything else. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-paper-strong) inset;
  box-shadow: 0 0 0 1000px var(--color-paper-strong) inset;
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
  transition: background-color 9999s ease-out 0s;
}

  /* Pill-shaped filter select with custom chevron. Used on /recipes filter bar.
     Chevron color follows --color-muted so it stays visible in both themes. */
  .select-pill {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236d5a4f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1.5 6,6.5 11,1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.7rem;
  }
  .dark .select-pill {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239a9182' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1.5 6,6.5 11,1.5'/></svg>");
  }
  label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
  }
code, pre { color: var(--color-text); }

.card {
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(14px);
  }
  .card-strong {
    background: var(--color-paper-strong);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }

  .eyebrow {
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    font-weight: 700;
  }

  /* Filter "+N more" disclosure summary, hidden once the <details> is open so the tags replace it in-flow. */
.chip-more {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  color: var(--color-muted);
  cursor: pointer;
  list-style: none;
  transition: border-color 180ms, color 180ms;
}
.chip-more::-webkit-details-marker { display: none; }
.chip-more:hover { border-color: var(--color-accent); color: var(--color-text); }
details[open] > .chip-more { display: none; }

/* Collapsible section built via shared/_disclosure. Native <details>, smooth
   height animation in modern browsers, instant on older ones. */
html { interpolate-size: allow-keywords; }
summary::-webkit-details-marker { display: none; }
details:has(> .disclosure-body)::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 220ms ease, content-visibility 220ms allow-discrete;
}
details[open]:has(> .disclosure-body)::details-content {
  block-size: auto;
}

/* Search-match highlighter used on index cards. Gold accent, rounded, inherits text color. */
  mark.q-match, .q-match {
    background: linear-gradient(180deg, transparent 55%, var(--color-accent-soft) 55%, var(--color-accent-soft) 92%, transparent 92%);
    color: inherit;
    font-weight: 600;
    padding: 0 0.1em;
    border-radius: 2px;
  }

  .site-header {
    background: color-mix(in oklab, var(--color-bg) 85%, transparent);
  }

  .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 9999px;
    color: var(--color-muted);
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background-color 180ms, color 180ms;
    white-space: nowrap;
  }
  .nav-link:hover { background: var(--color-accent-soft); color: var(--color-text); }
  .nav-link.is-active { background: var(--color-text); color: var(--color-paper-strong); }

  /* Buttons: styling is inline Tailwind inside `shared/_button`. No .button-primary /
     .button-secondary / .button-accent CSS classes. Search the codebase for
     `bg-text text-paper-strong` to find every primary-button variant. */

  /* Markdown output wrapper — bug reports, Bugsy comments, anywhere render_markdown runs.
     Deliberately narrow scope (descendant selectors) so no surrounding layout bleeds in. */
  .md-body { color: var(--color-text); line-height: 1.6; font-size: 0.9rem; }
  .md-body > * + * { margin-top: 0.75em; }
  .md-body h1, .md-body h2, .md-body h3, .md-body h4 {
    font-family: var(--font-display);
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.25;
    margin-top: 1.2em;
  }
  .md-body h1 { font-size: 1.6rem; }
  .md-body h2 { font-size: 1.3rem; }
  .md-body h3 { font-size: 1.1rem; letter-spacing: 0.01em; }
  .md-body h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); }
  .md-body p { margin: 0; }
  .md-body strong { color: var(--color-text); font-weight: 700; }
  .md-body em { font-style: italic; }
  .md-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
  .md-body a:hover { opacity: 0.8; }
  .md-body ul, .md-body ol { padding-left: 1.4em; }
  .md-body ul { list-style: disc; }
  .md-body ol { list-style: decimal; }
  .md-body li + li { margin-top: 0.25em; }
  .md-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: var(--color-paper-strong);
    border: 1px solid var(--color-line);
    border-radius: 6px;
    padding: 1px 6px;
  }
  .md-body pre {
    background: var(--color-paper-strong);
    border: 1px solid var(--color-line);
    border-radius: 10px;
    padding: 12px 14px;
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.5;
  }
  .md-body pre code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: inherit;
  }
  .md-body blockquote {
    border-left: 3px solid var(--color-accent-soft);
    padding-left: 12px;
    color: var(--color-muted);
    font-style: italic;
  }
  .md-body hr {
    border: none;
    border-top: 1px solid var(--color-line);
    margin: 1.2em 0;
  }
  .md-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85em;
  }
  .md-body th, .md-body td {
    border: 1px solid var(--color-line);
    padding: 6px 10px;
    text-align: left;
  }
  .md-body th { background: var(--color-paper-strong); font-weight: 600; }

  /* Toast — bottom-center, auto-dismiss, slide up. Handles html_safe flash so
     links in the toast body render inline. Uses semantic tokens so it adapts
     to light + dark. */
  .toast-stack {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 80;
    transform: translateX(-50%);
    pointer-events: none;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 10px;
  }
  .toast {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--color-paper-strong);
    color: var(--color-text);
    border: 1px solid var(--color-line-strong);
    box-shadow: var(--shadow-card);
    font-size: 0.9rem;
    max-width: min(520px, calc(100vw - 32px));
    animation: toast-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .toast--success { border-color: color-mix(in oklab, var(--color-accent-2) 60%, var(--color-line-strong)); }
  .toast--success .icon { color: var(--color-accent-2); }
  .toast--warning .icon { color: var(--color-accent-2); }
  .toast--error { border-color: color-mix(in oklab, var(--color-accent) 60%, var(--color-line-strong)); }
  .toast--error .icon { color: var(--color-accent); }
  .toast__body { flex: 1; line-height: 1.4; }
  .toast__body a { color: var(--color-accent); text-decoration: underline; }
  .toast__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    color: var(--color-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    flex-shrink: 0;
  }
  .toast__close:hover { color: var(--color-text); background: var(--color-accent-soft); }
  .toast-stack--leaving .toast { animation: toast-out 220ms cubic-bezier(0.4, 0, 0.4, 1) forwards; }
  @keyframes toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(12px); }
  }

/* Dialog modal — showModal() puts dialog in the browser's top layer.
   Keep styling minimal: overflow visible so tooltips escape, native ::backdrop hidden
   since dialog_controller.js renders its own for the blur effect. */
dialog[data-controller="dialog"],
dialog[data-dialog-target="modal"] { overflow: visible; }
dialog::backdrop { background: transparent; }


/* Tooltip — anchored to body via tooltip_controller.js. Inverted color so it
   reads against either theme without a separate dark variant. */
.amr-tooltip {
  position: absolute;
  z-index: 2147483647;
  background: var(--color-text);
  color: var(--color-paper-strong);
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  max-width: min(320px, calc(100vw - 16px));
  word-wrap: break-word;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  pointer-events: none;
}
.amr-tooltip.is-shown { opacity: 1; transform: translateY(0); }

/* Hero marquee — two vertical columns, opposite directions, seamless loop
   via DOM duplication + -50% translate. Reduced-motion pauses. */
@keyframes amr-marquee-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes amr-marquee-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .amr-marquee-col { animation: none !important; }
}

/* Recipe card hover — image zooms, card itself stays put */
.recipe-card { transition: border-color 220ms, box-shadow 220ms; }
.recipe-card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-card-hover); }
.recipe-card .recipe-card-media { overflow: hidden; }
.recipe-card .recipe-card-media > * { transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.recipe-card:hover .recipe-card-media > * { transform: scale(1.06); }

/* Theme toggle — show exactly one icon for the active state */
.theme-icon-light, .theme-icon-dark, .theme-icon-system { display: none; }
html:not(.dark):not([data-theme="system"]) .theme-icon-light { display: inline-block; }
html.dark:not([data-theme="system"]) .theme-icon-dark { display: inline-block; }
html[data-theme="system"] .theme-icon-system { display: inline-block; }

/* Print styles — recipe show. Modeled after NYT Cooking / Serious Eats:
   tight header, two-column ingredients+method, tips below, flows naturally. */
.print-only { display: none; }
@media print {
  /* Generous left/right margin so a hole-punch on either edge doesn't clip text */
  @page { size: letter; margin: 14mm 20mm 16mm 20mm; }

  /* Force light palette — user's dark-mode choice shouldn't waste ink */
  :root, html, body, .dark, html.dark body {
    background: #fff !important;
    color: #111 !important;
  }
  body { font: 10.5pt/1.45 "Manrope", "Segoe UI", sans-serif !important; }

  /* Hide everything that isn't recipe content */
  .print-hide,
  header.site-header,
  footer,
  .amr-tooltip,
  .rough-annotation,
  svg.rough-annotation,
  [data-controller~="tooltip"] .amr-tooltip,
  article > section:first-of-type,            /* drop the hero (image + copy) entirely */
  article > div > aside,                       /* drop the snapshot sidebar */
  main .mt-4.mb-2,                             /* back link */
  .print-hero-img { display: none !important; }
  .print-only { display: block !important; }

  /* Full-bleed content column */
  main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Kill all card chrome */
  .card, .card-strong,
  article, article > *, article section, article aside {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Links are plain black text on paper */
  a { color: #111 !important; text-decoration: none !important; }

  /* Headings: serif, tight */
  h1, h2, h3 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    color: #111 !important;
    letter-spacing: 0 !important;
    break-after: avoid; page-break-after: avoid;
  }
  .eyebrow {
    font-size: 7.5pt !important; letter-spacing: 0.16em !important;
    color: #666 !important; font-weight: 700 !important;
  }

  /* --- Top header band: brand wordmark + title + URL (left) | meta + QR (right) --- */
  .print-header {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    border-bottom: 2px solid #b4452f !important;
    break-after: avoid; page-break-after: avoid;
  }
  .print-header .print-wordmark {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 9.5pt !important; font-weight: 700 !important;
    color: #b4452f !important; letter-spacing: 0.02em;
    margin: 0 0 4px 0 !important;
  }
  .print-header h1 {
    margin: 0 0 6px 0 !important;
    font-size: 26pt !important; line-height: 1.05 !important; font-weight: 600 !important;
    color: #241816 !important;
  }
  .print-header .print-url {
    font-size: 8.5pt !important; color: #6d5a4f !important; word-break: break-all;
    margin: 0 !important; font-family: "Manrope", sans-serif !important;
  }
  .print-header .print-qr { text-align: center; }
  .print-header .print-qr svg { width: 72px !important; height: 72px !important; display: block; }
  .print-header .print-qr-caption {
    font-size: 7pt !important; color: #888 !important; margin-top: 3px !important;
    letter-spacing: 0.1em; text-transform: uppercase;
  }

  /* Compact meta row (Prep / Cook / Serves / Devices) below title */
  .print-meta {
    display: flex !important; flex-wrap: wrap; gap: 14px 20px;
    font-size: 9.5pt !important; color: #333 !important; margin-top: 6px !important;
  }
  .print-meta span strong {
    display: block; font-size: 7pt; letter-spacing: 0.14em;
    text-transform: uppercase; color: #888; font-weight: 700; margin-bottom: 1px;
  }

  /* --- Body: two-column (ingredients narrow | method wide), tips full-width --- */
  article > div {
    display: grid !important;
    grid-template-columns: 34% 1fr !important;
    gap: 22px !important;
    align-items: start;
  }

  /* Small recipe photo at top of ingredients column on paper */
  .print-thumb {
    display: block !important;
    width: 100% !important;
    max-height: 130px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    margin: 0 0 10px 0 !important;
    image-rendering: -webkit-optimize-contrast;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    break-inside: avoid;
  }

  /* Quantity highlight on paper — plain bold, same color as body text,
     same look in ingredients AND method steps (one treatment, one rule). */
  mark.step-qty, .step-qty {
    color: inherit !important;
    background: transparent !important;
    padding: 0 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
  }

  /* Ingredients column — elegant bordered card, small terracotta markers */
  article > div > section:nth-of-type(1) { font-size: 10pt !important; }
  article > div > section:nth-of-type(1) ul { list-style: none !important; padding: 0 !important; margin: 6px 0 0 0 !important; }
  article > div > section:nth-of-type(1) ul li {
    padding: 4px 0 4px 12px !important; border-bottom: 1px solid #eee !important;
    display: block !important; line-height: 1.45 !important; break-inside: avoid;
    position: relative;
  }
  article > div > section:nth-of-type(1) ul li::before {
    content: ""; position: absolute; left: 0; top: 11px;
    width: 4px; height: 4px; background: #b4452f; border-radius: 50%;
  }
  article > div > section:nth-of-type(1) ul li span:first-child { display: none !important; }
  article > div > section:nth-of-type(1) ul li span:last-child { display: inline !important; }

  /* Method column — numbered serif in brand terracotta */
  article > div > section:nth-of-type(2) { font-size: 10pt !important; }
  article > div > section:nth-of-type(2) ol { padding: 0 !important; margin: 6px 0 0 0 !important; list-style: none !important; }
  article > div > section:nth-of-type(2) ol li {
    padding: 6px 0 !important; border-bottom: 1px solid #eee !important;
    display: flex !important; gap: 10px !important; break-inside: avoid;
    line-height: 1.55 !important;
  }
  article > div > section:nth-of-type(2) ol li > span:first-child {
    flex: 0 0 auto !important; width: 26px !important; height: auto !important;
    background: transparent !important; color: #b4452f !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 15pt !important; font-weight: 700 !important; text-align: right; padding-top: 0;
    line-height: 1.2 !important; font-variant-numeric: oldstyle-nums;
  }
  article > div > section:nth-of-type(2) ol li > span:last-child { flex: 1 1 auto; }

  /* Section headers within columns — brand serif with terracotta underline */
  article > div > section h2 {
    font-size: 16pt !important; margin: 0 0 2px 0 !important; font-weight: 600 !important;
    border-bottom: 1.5px solid #b4452f !important; padding-bottom: 3px !important;
  }
  article > div > section .eyebrow { color: #b4452f !important; }

  /* Tips section: full-width below the 2-col */
  article > section:last-of-type {
    grid-column: 1 / -1;
    margin-top: 16px !important; padding-top: 10px !important;
    border-top: 1px solid #bbb !important;
    font-size: 10pt !important;
  }
  article > section:last-of-type h2 { font-size: 14pt !important; margin: 0 0 4px 0 !important; }
  article > section:last-of-type ul { list-style: disc; padding-left: 18px !important; margin: 6px 0 0 0 !important; }
  article > section:last-of-type ul li { padding: 2px 0 !important; border: none !important; display: list-item !important; }
  article > section:last-of-type ul li span:first-child { display: none !important; }

  /* Bolds & inline pills inside method steps stay readable */
  .text-muted { color: #222 !important; }
  .text-accent, .text-accent-2 { color: #111 !important; }

  /* Footer microtext at bottom of recipe */
  .print-footer {
    display: flex !important; flex-direction: column; align-items: center; gap: 2px;
    margin-top: 20px; padding-top: 8px;
    border-top: 1px solid #ddd;
    font-size: 8pt; color: #6d5a4f; text-align: center;
  }
  .print-footer .print-footer-link {
    font-family: "Manrope", sans-serif !important;
    font-size: 9pt !important; color: #b4452f !important;
    font-weight: 600; word-break: break-all;
  }
  .print-footer .print-footer-sep { display: none !important; }
  .print-footer .print-footer-tag { color: #888; font-style: italic; }
}

/* Google Translate: hide every shred of its UI. We render our own picker via
   shared/_language_toggle and only borrow GT's translation engine. The early
   loader in the layout <head> plus translate_controller.js handle cookie + reload. */
html.translated-ltr,
html.translated-rtl {
  overflow-x: clip;
}
.goog-te-banner-frame,
.skiptranslate:not(body),
.goog-te-spinner-pos,
.goog-te-footer,
#google_translate_element,
#google_translate_element_hidden,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
[class*="goog-te-gadget"],
[class*="VIpgJd-ZVi9od-aZ2wEe"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* GT injects inline `body { top: 40px }` for its banner; we kill the banner. */
body { top: 0 !important; }