/* Purely Recipes. Tokens copied from styles.css (Lovable); components per docs/DESIGN.md. */
:root {
  --radius: 0.875rem;
  --background: oklch(0.99 0.002 240);
  --foreground: oklch(0.19 0.035 255);
  --card: oklch(1 0 0);
  --primary: oklch(0.19 0.035 255);
  --primary-foreground: oklch(0.98 0.005 233);
  --muted-foreground: oklch(0.48 0.04 250);
  --border: oklch(1 0 0 / 55%);
  --ring: oklch(0.71 0.1 243);
  --glass: oklch(1 0 0 / 80%);
  --glass-strong: oklch(1 0 0 / 62%);
  --glass-border: oklch(0.92 0.005 240);
  --glacier: oklch(0.71 0.1 243);
  --aurora: oklch(0.62 0.13 295);
  --seafoam: oklch(0.77 0.1 175);
  --berry: oklch(0.68 0.15 350);
  --saffron: oklch(0.78 0.14 65);
  --ice: oklch(0.92 0.02 235);
  --shadow-card: 0 20px 50px -24px color-mix(in oklab, var(--foreground) 35%, transparent);
  --shadow-hero: 0 30px 80px -30px color-mix(in oklab, var(--foreground) 40%, transparent);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Manrope', system-ui, sans-serif;
}
.dark {
  --background: oklch(0.155 0.028 255);
  --foreground: oklch(0.95 0.01 235);
  --card: oklch(0.21 0.035 255);
  --primary: oklch(0.95 0.01 235);
  --primary-foreground: oklch(0.19 0.035 255);
  --muted-foreground: oklch(0.72 0.03 245);
  --border: oklch(1 0 0 / 12%);
  --glass: oklch(0.24 0.035 255 / 45%);
  --glass-strong: oklch(0.28 0.04 255 / 65%);
  --glass-border: oklch(1 0 0 / 14%);
  --glacier: oklch(0.76 0.09 243);
  --aurora: oklch(0.7 0.12 295);
  --seafoam: oklch(0.8 0.09 175);
  --berry: oklch(0.73 0.14 350);
  --saffron: oklch(0.81 0.13 70);
  --ice: oklch(0.9 0.03 235);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font: 400 1rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 300; letter-spacing: -0.01em; line-height: 1.15; }
.muted { color: var(--muted-foreground); }


/* surfaces */
.glass { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.glass-strong { background: var(--glass-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* sidebar */
.sidebar { position: fixed; inset: 0 auto 0 0; width: 18rem; z-index: 40; padding: 0 0.75rem; background: var(--glass); border-right: 1px solid var(--glass-border); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: transform .25s ease; }
.brand { display: flex; align-items: center; gap: .75rem; font-family: var(--display); font-size: 1.125rem; text-decoration: none; }
.brand b { font-weight: inherit; color: var(--glacier); }
.sidebar > .brand { height: 4rem; padding: 0 .5rem; border-bottom: 1px solid var(--glass-border); }
.mark { width: 2.25rem; height: 2.25rem; object-fit: contain; flex: none; }
.side-nav { display: grid; gap: .25rem; padding: 1.25rem 0; }
.side-nav a { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: 1rem; text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--muted-foreground); }
.side-nav a:hover { color: var(--foreground); background: var(--glass); }
.side-nav a.active { color: var(--foreground); background: var(--glass-strong); box-shadow: var(--shadow-card); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); display: inline-block; flex: none; }
.scrim { display: none; }

.main { margin-left: 18rem; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .75rem; height: 4rem; padding: 0 1.25rem; background: var(--glass); border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.topbar .brand-sm, .topbar .menu-btn { display: none; }
.icon-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); color: inherit; cursor: pointer; }
main { flex: 1; width: 100%; max-width: 80rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; display: grid; gap: 2.5rem; align-content: start; }

@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); }
  .nav-open .sidebar { transform: none; }
  .nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: color-mix(in oklab, var(--foreground) 30%, transparent); }
  .main { margin-left: 0; }
  .topbar .menu-btn { display: grid; }
  .topbar .brand-sm { display: flex; }
}
@media (min-width: 640px) { main { padding: 2rem 2rem 4rem; } .topbar { padding: 0 2rem; } }

/* pills, chips */
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .9375rem; text-decoration: none; border: 1px solid transparent; }
.pill.primary { background: var(--primary); color: var(--primary-foreground); }
.pill.light { background: #fff; color: oklch(0.19 0.035 255); }
.pill.glass { color: #fff; background: oklch(1 0 0 / 18%); border-color: oklch(1 0 0 / 35%); backdrop-filter: blur(12px); }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip { display: inline-flex; align-items: center; padding: .25rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 600; text-transform: capitalize; background: color-mix(in oklab, var(--c, var(--glacier)) 20%, transparent); color: color-mix(in oklab, var(--c, var(--glacier)) 70%, var(--foreground)); }
.chip.draft { --c: var(--saffron); text-transform: none; margin-left: .5rem; }
.pill.ghost { background: var(--card); color: var(--foreground); border-color: var(--glass-border); cursor: pointer; font: inherit; font-weight: 600; font-size: .9375rem; }
.pill.ghost:hover { border-color: var(--glacier); }
.pill.ghost[aria-pressed="true"] svg { fill: var(--berry); stroke: var(--berry); }
.share { display: contents; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

/* crumbs */
.crumbs { font-size: .8125rem; color: var(--muted-foreground); display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: -1.5rem; }
.crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; }

/* hero */
.hero { position: relative; overflow: hidden; border-radius: 2rem; min-height: 26rem; display: flex; align-items: flex-end; box-shadow: var(--shadow-hero); background: linear-gradient(135deg, var(--glacier), var(--aurora)); color: #fff; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.15 0.03 255 / 80%), oklch(0.15 0.03 255 / 10%) 70%); }
.hero-inner { position: relative; z-index: 1; padding: 2rem; max-width: 40rem; }
.hero h1 { font-size: clamp(2.25rem, 5vw, 4rem); margin: 1rem 0 .75rem; }
.hero h1 em { color: var(--ice); }
.hero p { color: oklch(1 0 0 / 85%); font-size: 1.0625rem; }
.hero .chip { color: #fff; background: oklch(1 0 0 / 18%); text-transform: none; }
@media (min-width: 640px) { .hero { border-radius: 2.5rem; aspect-ratio: 21 / 9; } .hero-inner { padding: 3rem; } }

/* sections, cards */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.section-head h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0; }
.section-head p { margin: 0; }
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card { display: flex; flex-direction: column; border-radius: 1.75rem; overflow: hidden; text-decoration: none; box-shadow: var(--shadow-card); transition: transform .2s ease; }
.card:hover { transform: translateY(-2px); }
.card-img { aspect-ratio: 1; overflow: hidden; display: block; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-img img { transform: scale(1.05); }
.card-img.empty { aspect-ratio: 16 / 7; background: linear-gradient(135deg, color-mix(in oklab, var(--c) 45%, transparent), color-mix(in oklab, var(--c) 10%, transparent)); }
.card-body { display: grid; gap: .5rem; padding: 1.25rem; }
.card-title { font-family: var(--display); font-size: 1.375rem; line-height: 1.2; }
.card-blurb { font-size: .875rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--muted-foreground); font-weight: 600; }

.panel { position: relative; overflow: hidden; border-radius: 2rem; padding: 2rem; box-shadow: var(--shadow-card); }
.panel > * { position: relative; }
.panel h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 .5rem; }

/* article pages */
.page { display: grid; gap: 2rem; max-width: 52rem; }
.page-head { border-radius: 2rem; padding: 2rem; box-shadow: var(--shadow-card); }
.page-head h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin: .75rem 0 .5rem; }
.page-head .lede { font-size: 1.125rem; color: var(--muted-foreground); margin: 0 0 1rem; max-width: 42rem; }
.recipe-meta { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; font-size: .9375rem; }
.recipe-meta li { display: flex; align-items: center; gap: .5rem; } .recipe-meta svg { color: var(--aurora); }
.photo { margin: 0; }
.photo img { border-radius: 2rem; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--shadow-card); }
.credit { font-size: .75rem; color: var(--muted-foreground); margin-top: .5rem; }

.prose { font-size: 1.0625rem; line-height: 1.7; max-width: 42rem; }
.prose h2 { font-size: 2rem; margin: 2.5rem 0 .75rem; }
.prose h3 { font-size: 1.375rem; margin: 1.75rem 0 .5rem; }
.prose a { color: color-mix(in oklab, var(--glacier) 70%, var(--foreground)); text-underline-offset: 2px; }
.prose li { margin: .25rem 0; }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--aurora); font-family: var(--display); font-style: italic; font-size: 1.25rem; }
.prose img { border-radius: 1rem; margin: 1rem 0; }
.prose sup.cite a { text-decoration: none; font-size: .7em; color: var(--muted-foreground); padding: 0 .1em; }
.sec-sources { font-size: .875rem; color: var(--muted-foreground); word-break: break-word; }
.sec-sources h2 { font-size: 1.5rem; }

.sec-ingredients, .sec-method { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(24px); border-radius: 1.75rem; padding: 1.5rem 1.75rem; margin: 2rem 0; box-shadow: var(--shadow-card); }
.sec-ingredients h2, .sec-method h2 { margin-top: 0; }
.sec-ingredients ul { list-style: none; padding: 0; }
.sec-ingredients li { position: relative; padding-left: 1.75rem; }
.sec-ingredients li::before { content: ''; position: absolute; left: 0; top: .45em; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--seafoam); }
.sec-method ol { list-style: none; padding: 0; counter-reset: step; }
.sec-method li { position: relative; padding-left: 2.75rem; margin: 1rem 0; counter-increment: step; }
.sec-method li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .875rem; background: color-mix(in oklab, var(--saffron) 30%, transparent); color: color-mix(in oklab, var(--saffron) 60%, var(--foreground)); }

.story { border-radius: 2rem; padding: 1.75rem 2rem; box-shadow: var(--shadow-card); }
.story h2 { display: flex; align-items: center; gap: .625rem; font-style: italic; font-size: 1.5rem; margin: 0 0 .5rem; }
.toc { border-radius: 1.75rem; padding: 1.25rem 1.75rem; }
.toc h2 { font-size: 1.25rem; margin: 0 0 .5rem; }
.toc ol { margin: 0; padding-left: 1.25rem; columns: 2 14rem; }
.toc a { text-decoration: none; } .toc a:hover { text-decoration: underline; }

/* newsletter band (footer) */
.news-band { display: grid; gap: 1rem 2rem; grid-template-columns: 1fr; align-items: center; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--glass-border); }
.news-band h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .25rem; }
.news-band p { margin: 0; }
.news-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.news-row input { flex: 1 1 14rem; font: inherit; color: var(--foreground); background: var(--card); border: 1px solid var(--glass-border); border-radius: 999px; padding: .625rem 1.25rem; }
.news-row button { cursor: pointer; font: inherit; font-weight: 600; }
.news-band .ts:empty, .news-band .form-status:empty { display: none; }
@media (min-width: 900px) { .news-band { grid-template-columns: 1fr 1fr; } .news-band .ts, .news-band .form-status { grid-column: 2; } }

/* footer */
.footer { margin: 0 1.25rem 1.25rem; border-radius: 2rem; padding: 2rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: 2fr repeat(3, 1fr); }
.foot-grid nav { display: grid; gap: .5rem; align-content: start; font-size: .9375rem; }
.foot-grid h3 { font-family: var(--body); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .25rem; color: var(--muted-foreground); }
.foot-grid a { text-decoration: none; } .foot-grid a:hover { text-decoration: underline; }
.foot-base { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--glass-border); font-size: .8125rem; color: var(--muted-foreground); }
.foot-base a { margin-left: 1rem; text-decoration: none; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* contact form */
.contact { display: grid; gap: 1rem; max-width: 42rem; margin-top: 2rem; }
.contact label { display: grid; gap: .375rem; font-weight: 600; font-size: .9375rem; }
.contact input, .contact textarea { font: inherit; font-weight: 400; color: var(--foreground); background: color-mix(in oklab, var(--background) 70%, transparent); border: 1px solid var(--border); border-radius: 1rem; padding: .75rem 1rem; }
.contact textarea { resize: vertical; }
.contact input:focus-visible, .contact textarea:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; }
.contact .hp { position: absolute; left: -9999px; }
.contact button { justify-self: start; cursor: pointer; }
.contact button:disabled { opacity: .6; }
.form-status { margin: 0; min-height: 1.5em; }

html, body { overflow-x: hidden; }
.main { min-width: 0; }
main { grid-template-columns: minmax(0, 1fr); }
main > * { min-width: 0; max-width: 100%; }

/* Recipe card: printable, after the essay sections. */
.special { margin: 1.25rem 0 0; padding: 1rem 1.25rem; border-left: 3px solid var(--aurora); background: color-mix(in oklch, var(--card) 70%, transparent); border-radius: 0 1rem 1rem 0; }
.special b { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--aurora); }
.special p { margin: .35rem 0 0; }
.recipe-card { margin: 2.5rem 0; scroll-margin-top: 5rem; }
.recipe-card .card-head { border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1rem; }
.recipe-card .card-head h2 { margin: 0; }
.recipe-card .dates { margin: .75rem 0; font-size: .875rem; }
@media print {
  body *:not(:has(.recipe-card)):not(.recipe-card):not(.recipe-card *) { display: none !important; }
  body, main, article { margin: 0 !important; padding: 0 !important; background: #fff; }
  .recipe-card .glass, .recipe-card section { box-shadow: none; }
  [data-print] { display: none; }
}