/* Padmanjali — mobile-first, system fonts, no framework.
   Theme: green, cream and gold for the brand (header, hero, labels, buttons,
   footer); white with near-black text for all content. Gold and sage are decorative only
   (borders, ornaments): neither has enough contrast for text. */

:root {
    --color-primary: #245c3a;       /* deep forest green: headings, buttons, navigation */
    --color-primary-dark: #1b4a2d;  /* hover */
    --color-primary-light: #3f7d4a; /* classic green: category labels */
    --color-sage: #78966a;          /* decorative */
    --color-sage-light: #dce7d5;
    --color-sage-tint: #eef3e9;
    --color-cream: #f8f4e8;         /* brand areas: hero, header details */
    --color-ivory: #fffdf7;         /* header */
    --color-surface: #ffffff;       /* page and every reading surface */
    --color-earth: #6b4f35;
    --color-text: #1f1f1f;          /* content text */
    --color-muted: #555555;
    --color-border: #e5e5e5;
    --color-gold: #b08a3e;          /* decorative */
    --color-link: #2f6b3f;
    --color-danger: #a12a1f;

    --radius: 6px;
    --radius-small: 4px;
    --shadow: 0 1px 2px rgba(38, 53, 43, 0.06);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Cambria, serif;

    /* A faint botanical sprig, used sparingly. */
    --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cg fill='none' stroke='%23245c3a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M60 158C58 110 62 60 78 6'/%3E%3Cpath d='M59 120c-18-2-30-12-34-28 17 1 30 11 34 28zM60 96c16-4 27-15 29-31-16 3-27 14-29 31zM62 70c-16-4-25-15-26-30 15 3 24 13 26 30zM67 46c13-5 21-15 21-28-13 4-20 13-21 28z'/%3E%3C/g%3E%3C/svg%3E");
    --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'%3E%3Cg fill='%23b08a3e'%3E%3Crect x='0' y='5.5' width='38' height='1'/%3E%3Crect x='58' y='5.5' width='38' height='1'/%3E%3Cpath d='M48 1l5 5-5 5-5-5z'/%3E%3C/g%3E%3C/svg%3E");
}

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

html { -webkit-text-size-adjust: 100%; }
body, main { overflow-wrap: break-word; }

body {
    margin: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3 { font-family: var(--font-serif); color: var(--color-primary); line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 600; }
h2 { font-size: clamp(1.35rem, 3vw, 1.65rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
.muted { color: var(--color-muted); }
.small { font-size: 0.9rem; }
.lead { font-size: 1.2rem; color: var(--color-muted); }

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

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 8px; background: var(--color-surface); padding: 8px 12px; z-index: 10; }

/* Buttons and inputs */
.button {
    display: inline-block; border: 1px solid var(--color-primary); border-radius: var(--radius); cursor: pointer;
    background: var(--color-primary); color: #fff; font: inherit; font-weight: 600; letter-spacing: 0.01em;
    padding: 0.7rem 1.4rem; text-decoration: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.button:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.button-small { padding: 0.45rem 0.9rem; font-size: 0.9rem; }
/* Secondary */
.button-quiet { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.button-quiet:hover { background: var(--color-sage-tint); color: var(--color-primary-dark); border-color: var(--color-primary-dark); }

input[type="search"], input[type="email"], input[type="password"], input[type="text"] {
    width: 100%; font: inherit; color: inherit; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.65rem 1rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 1px; }
::placeholder { color: #767676; opacity: 1; }

/* Header */
.site-header { background: var(--color-ivory); border-top: 3px solid var(--color-primary); border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 10px; }

.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--color-primary); text-decoration: none; letter-spacing: 0.01em; margin: 0; }
.logo:hover { color: var(--color-primary); }
.logo-mark { width: 13px; height: 13px; border-radius: 50% 0; background: var(--color-primary-light); transform: rotate(45deg); }

.header-search { display: flex; align-items: center; position: relative; width: 44px; }
.header-search input { display: none; }
.header-search button {
    width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-surface); color: var(--color-primary); cursor: pointer; display: grid; place-items: center;
}
.header-search button:hover { background: var(--color-sage-tint); }

/* Phones: all six sections visible as a 3 x 2 grid (no hidden, scrolling items). */
.site-nav ul {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    list-style: none; margin: 0 auto; padding-top: 0; padding-bottom: 8px;
}
.site-nav a {
    display: block; padding: 0.45rem 0.5rem; border-radius: var(--radius-small); white-space: nowrap; text-align: center;
    color: var(--color-primary); text-decoration: none; font-weight: 500;
}
.site-nav a:hover { background: var(--color-sage-tint); color: var(--color-primary-dark); }
/* A thin underline, not a pill. Inset shadow so nothing shifts. */
.site-nav a[aria-current="page"] { color: var(--color-primary-dark); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-primary-light); border-radius: 0; }

/* Breadcrumbs */
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 16px 0 0; font-size: 0.9rem; color: var(--color-muted); }
.breadcrumbs li + li::before { content: "›"; margin: 0 0.5rem; color: var(--color-sage); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }

/* Hero */
.hero {
    position: relative; overflow: hidden; padding: 48px 0 44px; text-align: center;
    background: radial-gradient(ellipse at 50% 0%, var(--color-sage-tint), var(--color-cream) 70%);
    border-bottom: 1px solid var(--color-border);
}
.hero::before, .hero::after {
    content: ""; position: absolute; bottom: -12px; width: 120px; height: 160px; pointer-events: none;
    background: var(--leaf) no-repeat center / contain; opacity: 0.16;
}
.hero::before { left: -24px; }
.hero::after { right: -24px; transform: scaleX(-1); }
.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 16em; margin: 0 auto 0.5em; }
.hero h1::after { content: ""; display: block; width: 96px; height: 12px; margin: 0.45em auto 0; background: var(--ornament) no-repeat center / contain; }
.hero-sub { max-width: 34em; margin: 0 auto 1.5rem; color: var(--color-muted); font-size: 1.15rem; }
.hero-search { display: flex; gap: 8px; max-width: 560px; margin: 0 auto 1rem; }
.hero-search input { flex: 1; min-width: 0; width: auto; }
.hero-search .button { flex: none; }
.page-head .hero-search { margin-left: 0; }

/* Blocks and grids */
.page-head { padding-top: 24px; padding-bottom: 8px; }
.block { padding-top: 24px; padding-bottom: 24px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.block-head > a { font-weight: 500; white-space: nowrap; }
.h-small { font-family: var(--font); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }

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

/* Home sections: a quiet "library shelf" of sage panels. */
.section-card {
    position: relative; overflow: hidden; display: block; padding: 20px 22px; border-radius: var(--radius); text-decoration: none;
    color: var(--color-text); background: var(--color-sage-tint); border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary-light); transition: border-color 0.15s, background-color 0.15s;
}
.section-card::after {
    content: ""; position: absolute; right: -10px; bottom: -18px; width: 64px; height: 86px;
    background: var(--leaf) no-repeat center / contain; opacity: 0.12; pointer-events: none;
}
.section-card:hover { color: var(--color-text); background: var(--color-surface); border-color: var(--color-sage); border-top-color: var(--color-primary); }
.section-card h3 { color: var(--color-primary); font-size: 1.25rem; }
.section-card p { margin: 0; color: var(--color-text); font-size: 0.95rem; max-width: 30em; }
.section-food, .section-ayurveda { border-top-color: var(--color-gold); }

.card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); transition: border-color 0.15s;
}
.card:hover { border-color: var(--color-sage); }
.card-link { display: block; color: inherit; text-decoration: none; height: 100%; border-bottom: 2px solid transparent; transition: border-color 0.15s; }
.card-link:hover { border-bottom-color: var(--color-primary-light); }
.card-link:hover .card-title { color: var(--color-primary-light); }
.card-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--color-sage-light); }
.card-placeholder {
    display: grid; place-items: center; font-family: var(--font-serif); font-size: 2.6rem; font-weight: 600;
    color: var(--color-primary); background: var(--leaf) no-repeat 88% 120% / 70px auto, var(--color-sage-light);
}
.card-body { padding: 14px 16px 18px; }
.card-label { margin: 0 0 4px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary-light); }
.card-title { margin: 0 0 6px; color: var(--color-primary); transition: color 0.15s; }
.card-text { margin: 0; color: var(--color-muted); font-size: 0.95rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { padding: 0.3rem 0.85rem; border-radius: var(--radius-small); background: var(--color-sage-light); color: var(--color-primary); font-size: 0.95rem; }

.empty { padding: 24px; border: 1px dashed var(--color-border); border-radius: var(--radius); color: var(--color-muted); background: var(--color-surface); }

/* Prose pages */
.prose { padding-bottom: 32px; }
.prose h2 { margin-top: 1.8em; }
.prose p, .prose ul { max-width: 68ch; }
.prose li { margin-bottom: 0.4em; }

/* Food pages */
.chips-links li { padding: 0; background: none; }
.chips-links a {
    display: inline-flex; align-items: center; gap: 8px; padding: 0.4rem 0.9rem; border-radius: var(--radius-small);
    background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary); text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}
.chips-links a:hover { background: var(--color-sage-tint); border-color: var(--color-primary-light); color: var(--color-primary-dark); }
.chip-count { font-size: 0.8rem; color: var(--color-muted); }

.food-head { display: grid; gap: 20px; padding-top: 20px; padding-bottom: 8px; }
.food-head .card-label a, .article-head .card-label a { color: inherit; text-decoration: none; }
.food-head .card-label a:hover, .article-head .card-label a:hover { text-decoration: underline; }
.food-head .card-label, .article-head .card-label { color: var(--color-primary); }
.food-head .lead { margin: 0 0 12px; }
.food-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); background: var(--color-sage-light); border: 1px solid var(--color-border); }
.byline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--color-muted); }

.food-body > * { max-width: 760px; }
.food-body section { padding-top: 16px; }
.food-body h2 { margin-top: 0.8em; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border); }
.prose-text p, .prose-text ul, .prose-text ol { margin: 0 0 1em; }
.prose-text li { margin-bottom: 0.35em; }
.prose-text li::marker { color: var(--color-primary-light); }
.prose-text blockquote {
    margin: 1.4em 0; padding: 0.4em 0 0.4em 1.1em; border-left: 3px solid var(--color-sage);
    font-family: var(--font-serif); font-size: 1.1em; font-style: italic; color: var(--color-text);
}
.prose-text blockquote p:last-child { margin-bottom: 0; }

.table-wrap { position: relative; width: 100%; overflow-x: auto; }
.nutrition-table { max-width: 480px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.nutrition-table caption { text-align: left; padding: 0 0 8px; color: var(--color-muted); font-size: 0.95rem; }
.nutrition-table thead th { background: var(--color-sage-tint); color: var(--color-primary); }
.nutrition-table th[scope="row"] { font-weight: 500; }
.table.nutrition-table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table.nutrition-table thead th:last-child { text-align: right; }

.faq h3 { margin: 1.2em 0 0.3em; }
.faq p { margin: 0; }
.sources { padding-left: 1.4em; }
.sources li { margin-bottom: 0.4em; }
.note { margin: 32px 0 0; padding: 14px 16px; border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-gold); color: var(--color-text); }
.preview-banner { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--radius); background: #fbf3df; border: 1px solid var(--color-gold); }

/* Pagination */

.pagination { display: flex; gap: 8px; list-style: none; padding: 0; margin: 24px 0 0; }
.pagination a, .pagination span { display: block; padding: 0.45rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); text-decoration: none; }
.pagination a:hover { border-color: var(--color-primary); background: var(--color-sage-tint); }
.pagination .disabled span { color: var(--color-muted); }

/* Footer */
.site-footer { margin-top: 56px; background: var(--color-primary); color: var(--color-cream); border-top: 3px solid var(--color-gold); padding: 40px 0 16px; font-size: 0.95rem; }
.footer-inner { display: grid; gap: 24px; grid-template-columns: 1fr; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--color-cream); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--color-cream); }
.site-footer .muted { color: var(--color-sage-light); }
.logo-footer { font-size: 1.35rem; color: var(--color-cream); }
.logo-footer .logo-mark { background: var(--color-gold); }
.footer-note { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(248, 244, 232, 0.25); color: var(--color-sage-light); font-size: 0.85rem; }
.footer-note a { color: var(--color-cream); text-decoration: underline; }

/* Admin */
.admin-header { background: var(--color-ivory); border-top: 3px solid var(--color-primary); border-bottom: 1px solid var(--color-border); }
.admin-badge { font-family: var(--font); font-size: 0.75rem; font-weight: 600; background: var(--color-sage-light); color: var(--color-primary); padding: 2px 8px; border-radius: var(--radius-small); letter-spacing: 0; }
.admin-user { display: flex; align-items: center; gap: 12px; }
.admin-user form { margin: 0; }
.admin-main { padding-top: 24px; padding-bottom: 48px; }
.login-box { max-width: 380px; margin: 40px auto; padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: var(--radius); box-shadow: var(--shadow); }
.form .field { margin-bottom: 16px; }
.form label { display: block; font-weight: 600; margin-bottom: 4px; }
.form .checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 16px; }
.field-error { color: var(--color-danger); margin: 4px 0 0; font-size: 0.9rem; }
.flash { padding: 12px 16px; background: var(--color-sage-light); border-radius: var(--radius); }
.stat { padding: 16px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.stat h2 { font-size: 1.1rem; }
.stat p { margin: 0; }
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.table th, .table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--color-border); }
.table thead th { color: var(--color-primary); }

.admin-nav ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 auto; padding-bottom: 8px; }
.admin-nav a { display: block; padding: 0.35rem 0.8rem; border-radius: var(--radius-small); color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.admin-nav a:hover, .admin-nav a[aria-current="page"] { background: var(--color-sage-tint); color: var(--color-primary-dark); }
.admin-nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-primary-light); }
.flash-warning { background: #fbf3df; }
.flash-error { background: #fbe7e4; color: #6d1b13; }
.flash-error ul { margin: 4px 0 0; padding-left: 1.2em; }
.flash p { margin: 0; }
.badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-small); background: var(--color-border); color: var(--color-text); white-space: nowrap; }
.badge-live { background: var(--color-sage-light); color: var(--color-primary); }
.badge-draft { background: #ece9e0; color: var(--color-text); }
.badge-warn { background: #fbf3df; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.filters > div { flex: 1 1 160px; }
.actions { white-space: nowrap; }
.actions a + a { margin-left: 10px; }
.action-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 20px; }
.action-bar form { margin: 0; }
.admin-form { max-width: 820px; }
.admin-form fieldset { margin: 0 0 20px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); min-width: 0; }
.admin-form legend { padding: 0 6px; font-family: var(--font-serif); font-weight: 600; color: var(--color-primary); }
.form .label { font-weight: 600; margin: 8px 0 4px; }
.hint { margin: 4px 0 0; color: var(--color-muted); font-size: 0.875rem; }
.field-grid { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
.row-pair { display: grid; gap: 8px; grid-template-columns: 1fr; margin-bottom: 8px; }
.repeat { margin-bottom: 14px; }
.repeat textarea { margin-top: 6px; }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--color-border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--color-cream); color: var(--color-muted); font-size: 0.95rem; }
.input-prefix input { border-radius: 0 var(--radius) var(--radius) 0; min-width: 0; }
.checkbox-list { max-height: 260px; overflow-y: auto; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.checkbox-list .checkbox { margin-bottom: 6px; }
.admin-thumb { width: 320px; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); margin-bottom: 8px; }
.danger-zone { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.button-danger { background: var(--color-danger); border-color: var(--color-danger); }
.button-danger:hover { background: #7d1f16; border-color: #7d1f16; }
select, textarea, input[type="number"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="file"] {
    width: 100%; font: inherit; color: inherit; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.55rem 0.8rem;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }
input[type="file"] { padding: 0.45rem; }
textarea { resize: vertical; line-height: 1.5; }
.filters input[type="search"] { padding: 0.55rem 0.8rem; }

/* Larger screens */
@media (min-width: 640px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    .site-nav ul { display: flex; flex-wrap: wrap; }
    .footer-inner { grid-template-columns: 2fr 1fr 1fr; }
    .header-search { width: 260px; }
    .header-search input { display: block; padding-right: 44px; }
    .header-search button { position: absolute; right: 2px; border: 0; height: 36px; width: 36px; background: transparent; }
    .field-grid { grid-template-columns: repeat(2, 1fr); }
    .row-pair { grid-template-columns: 1fr 1fr; }
    .hero::before, .hero::after { width: 170px; height: 226px; opacity: 0.18; }
}

@media (min-width: 960px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
    .hero { padding: 76px 0 60px; }
    .hero::before { left: 4%; }
    .hero::after { right: 4%; }
    .site-nav ul { padding-bottom: 0; gap: 8px; }
    .site-nav a { padding: 0.55rem 0.8rem 0.65rem; }
    .food-head { grid-template-columns: 1fr 520px; align-items: center; padding-top: 28px; }
    .field-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Recipe pages: a quiet cookbook layout. */
.recipe-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 8px 0 8px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.recipe-facts div { background: var(--color-surface); padding: 10px 14px; }
.recipe-facts dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.recipe-facts dd { margin: 0; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; color: var(--color-primary); }
.ingredients { list-style: none; padding: 4px 16px; margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.ingredients li { padding: 10px 2px; border-bottom: 1px dotted var(--color-border); }
.ingredients li:last-child { border-bottom: 0; }
.ingredients .qty { display: inline-block; min-width: 6.5em; font-weight: 600; color: var(--color-primary); font-variant-numeric: tabular-nums; margin-right: 8px; }
.steps { padding-left: 0; list-style: none; counter-reset: step; margin: 0; }
.steps li { counter-increment: step; position: relative; padding: 2px 0 18px 48px; }
.steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; background: var(--color-surface); border: 1px solid var(--color-primary-light);
    color: var(--color-primary); font-family: var(--font-serif); font-weight: 600;
}
.search-group + .search-group { margin-top: 32px; }
.search-group h2 .small { font-family: var(--font); font-weight: 400; color: var(--color-muted); }
.ingredient-row { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--color-border); }
.ingredient-row .wide { grid-column: 1 / -1; }

@media (min-width: 640px) {
    .recipe-facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .ingredient-row { grid-template-columns: 90px 100px 1fr 1fr; padding-bottom: 0; border-bottom: 0; }
    .ingredient-row .wide { grid-column: auto; }
}
.checkbox-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; }

/* Article pages: a magazine reading column, white with near-black text. */
.article { max-width: 760px; margin-left: auto; margin-right: auto; }
.article-head { padding-top: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.article-head h1 { font-size: clamp(2rem, 5.2vw, 2.75rem); }
.article-head .lead { margin: 0 0 14px; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.5; }
.reviewed { margin: 8px 0 0; color: var(--color-primary); font-weight: 600; }
.article-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); margin: 24px 0 8px; background: var(--color-sage-light); border: 1px solid var(--color-border); }
.article-body { font-size: 1.1rem; line-height: 1.75; padding-top: 12px; }
.article-body p, .article-body ul, .article-body ol { margin-bottom: 1.15em; }
.article-body h2 { margin: 1.7em 0 0.5em; }
.article-body h3 { margin: 1.4em 0 0.4em; color: var(--color-primary-light); }
.article-body ol, .article-body ul { padding-left: 1.4em; }
.article-section { padding-top: 12px; }
.content-editor { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.95rem; line-height: 1.55; }


/* Admin maintenance */
.badge-fail { background: #fbe7e4; color: #6d1b13; }
.maintenance-facts th { width: 30%; font-weight: 600; }
.maintenance-box { margin: 12px 0; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.maintenance-box h3 { margin-top: 0; }
.maintenance-box p { margin: 0 0 8px; }
.maintenance-warning { border-color: #e2b4ae; background: #fff8f7; }
.maintenance-output { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.8rem; max-height: 240px; overflow: auto; }
.maintenance-box .checkbox { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; }
.maintenance-box .checkbox input { margin-top: 0.3em; }
.maintenance-log td:last-child { min-width: 14rem; }

/* Admin editorial note (above content forms) */
.editorial-note { margin: 12px 0 20px; padding: 12px 16px; border-radius: var(--radius); background: var(--color-sage-tint); border-left: 3px solid var(--color-gold); font-size: 0.95rem; }