/* ============================================================
   Recipe-site engine — warm magazine design system.
   Per-site theme (site.json "theme"): colours, fonts and radius come from the
   inline :root block in base.html; header / homepage / card variants switch on
   the <body> classes hd-*, home-* and cards-* (see "Theme variants" below). Mobile-perf patterns reused from the webmaster build
   (content-visibility, blur-kill under 700px, reduced-motion, hover:none).
   ============================================================ */

/* Fonts: @font-face rules for the profile's heading/body/label families and the
   colour/radius variables are inlined by base.html (config.THEME_CSS), so a
   site only downloads its own fonts. The values below are fallbacks. */

:root {
  --bg:#FFFCF7;
  --bg-warm:#FBF3E8;
  --surface:#FFFFFF;
  --ink:#2A2320;
  --ink-soft:#5F544C;
  --muted:#948779;
  --line:#EFE6D8;
  --line-strong:#E4D7C4;
  --primary:#FF6B4A;
  --primary-deep:#E8552F;
  --primary-soft:#FFF0EB;
  --cat:#FF6B4A;            /* overridden inline per category */
  --cat-soft:#FFF0EB;
  --shadow-sm:0 4px 14px -6px rgba(74,54,38,.20);
  --shadow:0 18px 44px -22px rgba(74,54,38,.34);
  --shadow-lg:0 30px 70px -30px rgba(74,54,38,.40);
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --container:1200px;
  --wide:1360px;
  --gutter:22px;
  --header-h:70px;
  --r:20px;
  --r-sm:12px;
  --h-weight:600;
  --accent2:#5F544C;
  --header-bg:rgba(255,252,247,.9);
  --header-full:var(--header-h);   /* header height incl. the category bar (hd-centered) */
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; font-synthesis:none; }
@media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,iframe { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol { list-style:none; }
::selection { background:var(--primary); color:#fff; }
:focus-visible { outline:2.5px solid var(--primary); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--h-weight); line-height:1.12; letter-spacing:-.015em; color:var(--ink); }
.container { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container.wide { max-width:var(--wide); }
.section { padding-block:clamp(40px,6vw,72px); }
.skip { position:fixed; top:-60px; left:14px; z-index:200; background:var(--primary-deep); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; transition:top .2s; }
.skip:focus { top:12px; }

/* kicker / eyebrow */
.kicker { font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cat); display:inline-flex; align-items:center; gap:8px; }
.kicker::before { content:''; width:20px; height:2px; border-radius:2px; background:var(--cat); }

/* buttons + chips */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-ui); font-weight:600; font-size:.95rem; padding:12px 22px; border-radius:999px; background:var(--primary-deep); color:#fff; transition:transform .25s var(--ease), box-shadow .25s, background .25s; box-shadow:var(--shadow-sm); }
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow); filter:brightness(.92); }
.btn .arr { transition:transform .25s var(--ease); }
.btn:hover .arr { transform:translateX(4px); }
.btn--ghost { background:var(--surface); color:var(--ink); border:1.5px solid var(--line-strong); box-shadow:none; }
.btn--ghost:hover { background:var(--bg-warm); border-color:var(--cat); color:var(--ink); }
.btn--cat { background:var(--cat); }
.btn--cat:hover { background:var(--cat); filter:brightness(.94); }
.chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:var(--cat-soft); color:var(--cat); }
.link-more { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem; color:var(--cat); }
.link-more .arr { transition:transform .25s var(--ease); }
.link-more:hover .arr { transform:translateX(4px); }
/* keep the → arrow subtle, not oversized */
.arr { font-size:.8em; font-weight:400; line-height:1; }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:100; height:var(--header-h); display:flex; align-items:center;
  background:var(--header-bg); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .3s; will-change:transform; }
.site-header.scrolled { box-shadow:0 8px 30px -24px rgba(74,54,38,.5); }
.site-header.hidden { transform:translateY(-102%); }
.site-header .container { display:flex; align-items:center; gap:18px; width:100%; }
.brand { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:var(--h-weight); font-size:1.4rem; letter-spacing:-.02em; color:var(--ink); }
.brand .mark { width:30px; height:30px; border-radius:8px; flex:0 0 auto; transition:transform .4s var(--ease); }
.brand:hover .mark { transform:rotate(-8deg) scale(1.06); }
.brand b { color:var(--primary); font-weight:inherit; }
.main-nav { display:flex; align-items:center; gap:2px; margin-left:8px; flex:1; overflow:hidden; }
.main-nav a { position:relative; padding:8px 12px; font-size:.9rem; font-weight:500; color:var(--ink-soft); white-space:nowrap; border-radius:9px; transition:color .2s, background .2s; }
.main-nav a:hover, .main-nav a.on { color:var(--ink); background:var(--bg-warm); }
.main-nav a.on { color:var(--nav-accent,var(--primary)); }
.header-tools { display:flex; align-items:center; gap:8px; margin-left:auto; }
.icon-btn { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; color:var(--ink-soft); transition:background .2s, color .2s; }
.icon-btn:hover { background:var(--bg-warm); color:var(--ink); }
.icon-btn svg { width:19px; height:19px; }
.burger { display:none; }
.burger.burger--always { display:grid; }
.header-search { position:absolute; inset:0 0 auto 0; height:var(--header-h); background:var(--surface); border-bottom:1px solid var(--line); align-items:center; padding-inline:var(--gutter); gap:12px; transform:translateY(-100%); opacity:0; visibility:hidden; transition:transform .3s var(--ease), opacity .3s, visibility .3s; }
.header-search.open { transform:translateY(0); opacity:1; visibility:visible; }
.header-search form { display:flex; align-items:center; gap:12px; width:100%; max-width:var(--container); margin-inline:auto; }
.header-search input { flex:1; border:0; font-family:var(--font-display); font-size:1.3rem; background:transparent; color:var(--ink); }
.header-search input:focus { outline:none; }

/* ---------- Mobile menu ---------- */
.m-menu { position:fixed; inset:0; z-index:150; background:var(--bg); padding:0 var(--gutter) 30px; overflow-y:auto; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
html.menu-open .m-menu { opacity:1; visibility:visible; }
.m-menu-top { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--line); margin-bottom:12px; }
.m-menu-top .brand { font-family:var(--font-display); font-weight:var(--h-weight); font-size:1.4rem; display:inline-flex; align-items:center; gap:9px; color:var(--ink); }
.m-menu-top .brand .mark { width:28px; height:28px; border-radius:8px; }
.m-menu-top .brand b { color:var(--primary); }
.m-menu-links a { display:flex; align-items:center; gap:12px; padding:15px 4px; font-family:var(--font-display); font-size:1.5rem; font-weight:var(--h-weight); border-bottom:1px solid var(--line); }
.m-menu-links a .dot { width:11px; height:11px; border-radius:50%; background:var(--cat); flex:0 0 auto; }

/* ---------- Cards ---------- */
.p-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; content-visibility:auto; contain-intrinsic-size:auto 360px; }
.p-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-strong); }
.p-card .thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-warm); }
.p-card .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.p-card:hover .thumb img { transform:scale(1.05); }
.p-card .thumb .chip { position:absolute; left:12px; top:12px; background:var(--cat); color:#fff; box-shadow:0 4px 12px -4px rgba(0,0,0,.4); }
.p-card .body { padding:18px 18px 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.p-card h3 { font-size:1.24rem; line-height:1.2; }
.p-card:hover h3 { color:var(--cat); }
.p-card .ex { color:var(--ink-soft); font-size:.94rem; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.p-card .meta { margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.72rem; color:var(--muted); }
.blur-wrap { position:relative; background-size:cover; background-position:center; }
.thumb .blur-wrap, .l-thumb .blur-wrap, .tile-img .blur-wrap, .plan-img .blur-wrap { height:100%; }
.blur-wrap picture { display:block; height:100%; }
.blur-wrap img { opacity:0; transition:opacity .5s var(--ease); }
.blur-wrap img.loaded, html:not(.has-js) .blur-wrap img { opacity:1; }

/* ---------- Home: featured hero ---------- */
.hero { padding-top:clamp(28px,4vw,48px); }
.hero-feat { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3.5vw,52px); align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--r) + 8px); padding:clamp(20px,2.5vw,34px); box-shadow:var(--shadow); }
.hero-feat .media { position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--bg-warm); order:2; }
.hero-feat .media img { width:100%; height:100%; object-fit:cover; }
.hero-feat .body { order:1; }
.hero-feat h2 { font-size:clamp(2rem,4.4vw,3.5rem); margin:14px 0 16px; }
.home-head { margin-bottom:clamp(16px,2vw,24px); }
.home-head h1 { font-size:clamp(1.5rem,3vw,2.2rem); margin:0 0 4px; }
.home-head p { color:var(--ink-soft); font-size:1.05rem; }
.hero-feat .ex { color:var(--ink-soft); font-size:1.1rem; line-height:1.6; margin-bottom:22px; max-width:44ch; }
.hero-feat .badges { margin:-6px 0 22px; }
.hero-feat .meta { display:flex; align-items:center; gap:12px; margin-top:18px; font-family:var(--font-mono); font-size:.78rem; color:var(--muted); }

/* ---------- Category rows ---------- */
.cat-row { padding-block:clamp(30px,4vw,52px); border-top:1px solid var(--line); }
.row-head, .cat-row .row-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.cat-row .row-head h2, .sec-h { font-size:clamp(1.5rem,3vw,2.1rem); }
.row-head .desc { color:var(--muted); font-size:.94rem; margin-top:4px; max-width:52ch; }
.grid { display:grid; gap:20px; grid-template-columns:repeat(4,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--auto { grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }

/* ---------- Page hero (category / blog / about) ---------- */
.page-hero { padding:clamp(34px,5vw,60px) 0 clamp(24px,3vw,34px); background:linear-gradient(180deg,var(--cat-soft),transparent); border-bottom:1px solid var(--line); }
.page-hero h1 { font-size:clamp(2.1rem,5vw,3.6rem); margin:12px 0 10px; }
.page-hero .lead { color:var(--ink-soft); font-size:1.12rem; max-width:60ch; }
.page-hero .cat-intro { color:var(--ink-soft); max-width:68ch; margin-top:12px; }
.page-hero .cat-intro p + p { margin-top:8px; }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.74rem; color:var(--muted); }
.breadcrumb a:hover { color:var(--cat); }
.breadcrumb .sep { opacity:.5; }

/* ---------- Article ---------- */
.article-wrap { display:grid; grid-template-columns:minmax(0,720px) 300px; gap:clamp(30px,4vw,56px); justify-content:center; padding-block:clamp(30px,4vw,52px); }
.article { max-width:720px; }
.article-hero { position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; margin-bottom:26px; background:var(--bg-warm); box-shadow:var(--shadow); }
.article-hero img { width:100%; height:100%; object-fit:cover; }
.article h1 { font-size:clamp(2rem,4.6vw,3.2rem); margin:14px 0 16px; }
.article .a-lead { font-size:1.2rem; color:var(--ink-soft); line-height:1.55; font-family:var(--font-display); font-weight:500; margin-bottom:20px; }
.a-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-bottom:20px; margin-bottom:26px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:.78rem; color:var(--muted); }
.a-meta .author { color:var(--ink); font-weight:600; }
.a-meta .avatar { width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:.82rem; }
.a-body { font-size:1.09rem; line-height:1.75; color:var(--ink); }
.a-body > * + * { margin-top:1.15em; }
.a-body h2 { font-size:1.7rem; margin-top:1.7em; line-height:1.2; }
.a-body h2::before { content:''; display:block; width:38px; height:3px; border-radius:3px; background:var(--cat); margin-bottom:14px; }
.a-body h3 { font-size:1.32rem; margin-top:1.5em; }
.a-body p { color:var(--ink-soft); }
.a-body a { color:var(--primary-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; }
.a-body a:hover { color:var(--primary); }
.a-body strong { color:var(--ink); font-weight:600; }
.a-body ul, .a-body ol { padding-left:1.3em; color:var(--ink-soft); }
.a-body ul { list-style:disc; }
.a-body ol { list-style:decimal; }
.a-body ul li, .a-body ol li { margin-top:.5em; padding-left:.3em; }
.a-body ul li::marker { color:var(--cat); }
.a-body ol li::marker { color:var(--cat); font-family:var(--font-mono); font-weight:600; }
.a-body img { width:100%; height:auto; border-radius:var(--r-sm); margin-block:1.4em; box-shadow:var(--shadow-sm); }
.a-body figure { margin-block:1.6em; }
.a-body figcaption { font-family:var(--font-mono); font-size:.78rem; color:var(--muted); text-align:center; margin-top:8px; }
.a-body blockquote { border-left:4px solid var(--cat); background:var(--cat-soft); padding:16px 22px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-family:var(--font-display); font-style:italic; font-size:1.18rem; color:var(--ink); }
.a-body table { width:100%; border-collapse:collapse; font-size:.96rem; margin-block:1.4em; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.a-body th { background:var(--cat-soft); color:var(--ink); font-weight:600; text-align:left; }
.a-body th, .a-body td { padding:11px 14px; border-bottom:1px solid var(--line); }
.a-body tr:last-child td { border-bottom:0; }
.a-body hr { border:0; border-top:1px solid var(--line-strong); }

/* in-article stock video */
.post-video { margin-block:1.8em; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); background:#000; }
.post-video video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#000; }

/* share + disclaimer + author box */
.share { display:flex; align-items:center; gap:10px; margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.76rem; color:var(--muted); }
.share a { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--bg-warm); color:var(--ink-soft); transition:background .2s, color .2s, transform .2s; }
.share a:hover { background:var(--cat); color:#fff; transform:translateY(-2px); }
.share a svg { width:17px; height:17px; }
.disclaimer { margin-top:26px; padding:16px 18px; background:var(--bg-warm); border:1px solid var(--line); border-radius:var(--r-sm); font-size:.88rem; color:var(--muted); display:flex; gap:11px; }
.disclaimer svg { width:20px; height:20px; flex:0 0 auto; color:var(--cat); margin-top:1px; }

/* sidebar */
.a-side { display:flex; flex-direction:column; gap:26px; align-self:start; position:sticky; top:calc(var(--header-full) + 20px); }
.side-box h4 { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.side-list a { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center; }
.side-list a:last-child { border-bottom:0; }
.side-list .st { width:60px; height:46px; border-radius:9px; object-fit:cover; flex:0 0 auto; background:var(--bg-warm); }
.side-list b { font-family:var(--font-display); font-size:.98rem; font-weight:var(--h-weight); line-height:1.2; }
.side-list a:hover b { color:var(--cat); }

/* ---------- Related ---------- */
.related { border-top:1px solid var(--line); padding-block:clamp(34px,4vw,56px); background:var(--bg-warm); }
.related h2 { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:22px; }

/* ---------- Pagination ---------- */
.pager { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:44px; }
.pager a, .pager span { min-width:42px; height:42px; padding:0 12px; display:grid; place-items:center; border-radius:11px; font-weight:600; font-size:.92rem; border:1.5px solid var(--line-strong); color:var(--ink-soft); }
.pager a:hover { border-color:var(--cat); color:var(--cat); }
.pager .cur { background:var(--primary-deep); border-color:var(--primary-deep); color:#fff; }
.pager .dis { opacity:.4; pointer-events:none; }

/* ---------- Ad slots ---------- */
.ad-slot { margin-block:clamp(24px,3vw,40px); min-height:100px; display:flex; align-items:center; justify-content:center; }
.ad-slot ins { display:block; }

/* ---------- Empty / search ---------- */
.empty { text-align:center; padding:clamp(40px,7vw,90px) 0; color:var(--muted); }
.empty svg { width:56px; height:56px; color:var(--line-strong); margin-bottom:16px; }
.empty h1, .empty h2 { font-size:1.6rem; color:var(--ink); margin-bottom:8px; }

/* ---------- Footer ---------- */
.site-footer { background:var(--ink); color:#EFE6D8; padding-block:clamp(40px,5vw,64px) 26px; margin-top:clamp(40px,5vw,72px); }
.site-footer a { color:#EFE6D8; }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand .brand { color:#fff; margin-bottom:14px; }
.footer-brand p { color:#C3B6A6; font-size:.94rem; line-height:1.6; max-width:38ch; }
.footer-pin { display:inline-flex; align-items:center; gap:9px; margin-top:16px; padding:10px 18px; border-radius:999px; background:#E60023; color:#fff; font-weight:600; font-size:.9rem; }
.footer-pin svg { width:20px; height:20px; }
.footer-col h4 { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#9A8E7C; margin-bottom:15px; }
.footer-col a { display:block; padding:6px 0; color:#D8CCBB; font-size:.94rem; transition:color .2s, padding-left .2s; }
.footer-col a:hover { color:#fff; padding-left:4px; }
.footer-bot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:22px; font-family:var(--font-mono); font-size:.72rem; color:#9A8E7C; }
.footer-bot .disc { max-width:60ch; }
.footer-bot a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.footer-bot a:hover { color:#fff; }

/* ---------- To-top ---------- */
.to-top { position:fixed; right:20px; bottom:20px; z-index:90; width:46px; height:46px; border-radius:14px; background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow); display:grid; place-items:center; color:var(--ink); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s, visibility .3s, transform .3s; }
.to-top.show { opacity:1; visibility:visible; transform:none; }
.to-top:hover { color:var(--primary); }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .grid { grid-template-columns:repeat(3,1fr); }
  .article-wrap { grid-template-columns:minmax(0,1fr); }
  .a-side { position:static; flex-direction:row; flex-wrap:wrap; }
  .a-side .side-box { flex:1; min-width:240px; }
}
@media (max-width:820px){
  .main-nav { display:none; }
  .burger { display:grid; }
  .hero-feat { grid-template-columns:1fr; }
  .hero-feat .media { order:1; aspect-ratio:16/10; }
  .hero-feat .body { order:2; }
  .grid, .grid--3 { grid-template-columns:repeat(2,1fr); gap:16px; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:520px){
  :root { --gutter:16px; }
  .grid, .grid--3 { grid-template-columns:1fr; }
  .p-card { contain-intrinsic-size:auto 340px; }
  .cat-row .row-head { flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ============================================================
   Theme variants. <body class="hd-* home-* cards-*"> from site.json "theme".
   ============================================================ */

/* ---------- Cook-time badges (cards, list cards, featured recipe) ---------- */
.badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--bg-warm); border:1px solid var(--line-strong); font-size:.78rem; font-weight:600; color:var(--ink-soft); line-height:1.3; }
.badge b { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; }
.badge--low b { color:var(--accent2); }
.badge--high b { color:var(--primary-deep); }
.badge svg { color:var(--cat); }
.rc-times .rc-slow { background:var(--accent2-soft, var(--cat-soft)); }

/* ---------- Header: centred logo, category bar underneath ---------- */
.hd-centered { --header-full:calc(var(--header-h) + 46px); }
.hd-centered .site-header { height:auto; display:block; }
.site-header .hd-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--header-h); }
.hd-centered .hd-top .brand { justify-self:center; font-size:1.6rem; }
.hd-side { display:flex; align-items:center; gap:8px; }
.hd-side--end { justify-content:flex-end; margin-left:0; }
.cat-bar { border-top:1px solid var(--line); }
.site-header .cat-bar .container { display:flex; justify-content:center; align-items:center; gap:6px; height:46px; overflow-x:auto; scrollbar-width:none; }
.cat-bar .container::-webkit-scrollbar { display:none; }
.cat-bar a { padding:6px 10px; font-family:var(--font-mono); font-size:.76rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.cat-bar a:hover, .cat-bar a.on { color:var(--nav-accent,var(--primary-deep)); border-bottom-color:currentColor; }

/* ---------- Homepage: featured recipe + weekly plan + 3-column grids ---------- */
.intro { padding:clamp(30px,5vw,64px) 0 clamp(8px,2vw,18px); text-align:center; }
.intro h1 { font-size:clamp(1.9rem,4.4vw,3.1rem); max-width:24ch; margin:10px auto 14px; }
.intro .lead { color:var(--ink-soft); font-size:1.08rem; max-width:64ch; margin-inline:auto; }
.intro .kicker { color:var(--primary-deep); }
.intro .kicker::before { display:none; }
.plan { padding-block:clamp(30px,4vw,52px) 0; }
.plan .row-head { margin-bottom:18px; }
.plan-strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
.plan-strip a { display:flex; flex-direction:column; gap:8px; height:100%; padding:10px 10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); transition:border-color .2s, transform .25s var(--ease); }
.plan-strip a:hover { border-color:var(--cat); transform:translateY(-3px); }
.plan-day { font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-deep); }
.plan-img { display:block; aspect-ratio:1; border-radius:max(2px, calc(var(--r-sm) - 4px)); overflow:hidden; background:var(--bg-warm); }
.plan-img img { width:100%; height:100%; object-fit:cover; }
.plan-t { font-family:var(--font-display); font-weight:var(--h-weight); font-size:1rem; line-height:1.22; color:var(--ink); }
.plan-m { margin-top:auto; font-size:.78rem; color:var(--muted); }

/* ---------- Homepage: category tiles + 2-column list ---------- */
.tiles-sec, .list-sec { padding-block:clamp(22px,3vw,40px); }
.tiles-sec .sec-h { margin-bottom:18px; }
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tile a { position:relative; display:block; aspect-ratio:3/2; border-radius:var(--r); overflow:hidden; background:var(--cat); border:1px solid var(--line-strong); }
.tile-img { position:absolute; inset:0; }
.tile-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.tile a:hover .tile-img img { transform:scale(1.04); }
.tile-txt { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:2px; padding:34px 16px 14px; background:linear-gradient(180deg,transparent,rgba(24,14,8,.82)); color:#fff; }
.tile-txt b { font-family:var(--font-display); font-weight:var(--h-weight); font-size:1.25rem; line-height:1.15; }
.tile-txt small { font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; opacity:.92; }
.l-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.l-card { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:12px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); content-visibility:auto; contain-intrinsic-size:auto 176px; transition:border-color .2s; }
.l-card:hover { border-color:var(--cat); }
.l-thumb { display:block; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; background:var(--bg-warm); }
.l-thumb img { width:100%; height:100%; object-fit:cover; }
.l-body { display:flex; flex-direction:column; gap:6px; min-width:0; padding:2px 4px 2px 0; }
.l-cat { font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--cat); }
.l-card h3 { font-size:1.2rem; line-height:1.2; }
.l-card h3 a:hover { color:var(--cat); }
.l-card .ex { color:var(--ink-soft); font-size:.92rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Cards: "paper" (square photo, thin border, warm paper) ---------- */
.cards-paper { --shadow-sm:0 2px 10px -6px rgba(60,40,20,.25); --shadow:0 12px 30px -20px rgba(60,40,20,.35); }
.cards-paper .p-card { border:1px solid var(--line-strong); box-shadow:none; padding:10px 10px 0; }
.cards-paper .p-card:hover { transform:none; border-color:var(--cat); box-shadow:var(--shadow-sm); }
.cards-paper .p-card .thumb { aspect-ratio:1; border-radius:max(2px, calc(var(--r) - 2px)); }
.cards-paper .p-card .body { padding:14px 6px 16px; }
.cards-paper .chip, .cards-paper .p-card .thumb .chip { border-radius:2px; }
.cards-paper .btn, .cards-paper .pager a, .cards-paper .pager span { border-radius:var(--r-sm); }
.cards-paper .recipe-card { border-width:1px; outline:1px solid var(--line-strong); outline-offset:5px; }
.cards-paper .page-hero { background:var(--bg-warm); }

/* ---------- Cards: "rounded" (image-led, soft) ---------- */
.cards-rounded .p-card { border-color:transparent; }
.cards-rounded .p-card .thumb { margin:8px 8px 0; border-radius:max(4px, calc(var(--r) - 6px)); }

@media (max-width:1000px){
  .plan-strip { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:thin; }
  .plan-strip li { scroll-snap-align:start; }
}
@media (max-width:820px){
  .site-header .cat-bar .container { justify-content:flex-start; }
  .l-grid { grid-template-columns:1fr; }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  .hd-centered .hd-top .brand { font-size:1.22rem; }
  .hd-centered .hd-top .brand .mark { width:26px; height:26px; }
  .l-card { grid-template-columns:104px minmax(0,1fr); gap:12px; padding:10px; }
  .l-card .ex { display:none; }
  .tile-txt b { font-size:1.05rem; }
}

/* ---------- Article details: intro, sections, tips, FAQ, photo credit ---------- */
.article-hero .photo-credit { position:absolute; right:10px; bottom:10px; max-width:calc(100% - 20px); padding:3px 9px; border-radius:4px; background:rgba(20,14,10,.62); color:#fff; font-size:.72rem; line-height:1.4; text-align:right; }
.article-hero .photo-credit a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.a-intro { margin-bottom:1.2em; }
.a-intro p:first-child { font-size:1.14rem; }
.a-details section + section, .a-details { margin-top:.4em; }
.a-body .d-tips ul, .a-body .d-subs ul { list-style:none; padding-left:0; }
.a-body .d-tips li, .a-body .d-subs li { position:relative; padding:12px 14px 12px 42px; margin-top:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); }
.a-body .d-tips li::before, .a-body .d-subs li::before { position:absolute; left:14px; top:11px; font-weight:700; color:var(--cat); }
.a-body .d-tips li::before { content:"\2713"; }
.a-body .d-subs li::before { content:"\21C4"; }
.faq { margin-top:2em; }
.faq-item { padding:14px 0; border-bottom:1px solid var(--line); }
.faq-item h3 { font-size:1.18rem; margin:0 0 6px; }
.faq-item p { margin:0; color:var(--ink-soft); }
.a-body .credits-list { list-style:none; padding:0; margin:0; }
.a-body .credits-list li { display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.a-body .credits-list img { width:72px; height:72px; object-fit:cover; border-radius:var(--r-sm); background:var(--bg-warm); }
.a-body .credits-list b { display:block; font-family:var(--font-display); font-weight:var(--h-weight); }
.a-body .credits-list span { font-size:.92rem; color:var(--ink-soft); }

/* ---------- Mobile perf: kill expensive paint work (learned on webmaster) ---------- */
@media (max-width:700px){
  .site-header { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--bg); }
  .to-top { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .site-header, .p-card .thumb img { will-change:auto; }
}
@media (hover:none){
  .p-card:hover { transform:none; }
  .p-card:hover .thumb img { transform:none; }
  .btn:hover { transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .site-header.hidden { transform:none; }
}
html.has-js [data-reveal]{ opacity:0; transform:translateY(20px); }
html.has-js [data-reveal].in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion:reduce){ html.has-js [data-reveal]{ opacity:1; transform:none; } }

/* Author E-E-A-T box */
.author-box{display:flex;gap:16px;align-items:flex-start;margin:34px 0 8px;padding:20px 22px;border:1px solid var(--line,#eadfd3);border-radius:16px;background:var(--card,#fff)}
.author-box__avatar{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif,Georgia,serif);font-size:20px;font-weight:600;letter-spacing:.02em;color:#fff;background:var(--primary,#FF6B4A)}
img.author-box__avatar,.a-meta img.avatar{object-fit:cover;background:var(--primary-soft,#FFF0EB)}
a.author-box__name{color:inherit;text-decoration:none}
a.author-box__name:hover,.a-meta .author a:hover{text-decoration:underline}
.a-meta .author a{color:inherit;font-weight:600;text-decoration:none}
.author-head{display:flex;gap:14px;align-items:center;margin:0 0 18px}
.author-head .author-box__avatar{width:64px;height:64px;font-size:24px}
.author-box__body{min-width:0}
.author-box__name{display:block;font-weight:700;font-size:1.05rem;line-height:1.2}
.author-box__role{display:block;font-size:.85rem;color:var(--muted,#8a7f73);margin-top:2px}
.author-box__bio{margin:.5rem 0 0;font-size:.95rem;line-height:1.6;color:var(--ink,#2B2622)}
@media(max-width:520px){.author-box{flex-direction:column;gap:12px}}

/* ---------- Post actions + Pinterest ---------- */
.a-actions { display:flex; flex-wrap:wrap; gap:10px; margin:-6px 0 24px; }
.a-actions .btn { padding:10px 18px; font-size:.9rem; }
.btn--jump { background:var(--cat); }
.btn--jump:hover { background:var(--cat); filter:brightness(.94); }
.btn--jump svg { width:18px; height:18px; }
.btn--pin { background:#E60023; color:#fff; }
.btn--pin:hover { background:#AD081B; }
.pin-ico { width:18px; height:18px; flex:0 0 auto; }
.pin-figure { margin:2em auto; max-width:420px; text-align:center; }
.pin-figure img { width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:var(--r-sm); box-shadow:var(--shadow); }
.pin-figure figcaption { margin-top:12px; }

/* ---------- Recipe card ---------- */
.recipe-card { margin-block:clamp(28px,4vw,44px); padding:clamp(20px,3vw,32px); background:var(--surface); border:2px solid var(--cat); border-radius:var(--r); box-shadow:var(--shadow-sm); scroll-margin-top:calc(var(--header-full) + 16px); }
.rc-head { display:flex; gap:20px; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--line); }
.rc-img { width:132px; height:132px; flex:0 0 auto; border-radius:var(--r-sm); object-fit:cover; box-shadow:var(--shadow-sm); }
.rc-title { min-width:0; flex:1; }
.rc-title h2 { font-size:clamp(1.5rem,3vw,2rem); line-height:1.15; margin:8px 0 8px; }
.rc-sum { color:var(--ink-soft); line-height:1.6; margin:0 0 14px; }
.rc-actions { display:flex; flex-wrap:wrap; gap:10px; }
.rc-actions .btn { padding:10px 18px; font-size:.9rem; }
.rc-print { background:var(--ink); }
.rc-print:hover { background:var(--ink); filter:brightness(1.25); }
.rc-print svg { width:18px; height:18px; }
.rc-times { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin:20px 0 6px; }
.rc-times div { background:var(--cat-soft); border-radius:var(--r-sm); padding:12px 14px; }
.rc-times dt { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.rc-times dd { margin:4px 0 0; font-weight:700; color:var(--ink); }
.rc-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(20px,3vw,36px); margin-top:20px; }
.recipe-card h3 { font-size:1.25rem; margin:0 0 12px; }
.recipe-card h4 { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cat); margin:16px 0 6px; }
.rc-ingredients ul { list-style:none; padding:0; margin:0; }
.rc-ingredients li { border-bottom:1px dashed var(--line); }
.rc-ingredients label { display:flex; gap:10px; align-items:flex-start; padding:8px 0; cursor:pointer; line-height:1.45; }
.rc-ingredients input { width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--cat); }
.rc-ingredients input:checked + span { text-decoration:line-through; color:var(--muted); }
.rc-steps ol { list-style:none; counter-reset:step; padding:0; margin:0; }
.rc-steps li { counter-increment:step; position:relative; padding:0 0 16px 44px; line-height:1.65; }
.rc-steps li::before { content:counter(step); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:var(--cat); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.85rem; }
.rc-block { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.rc-equip { margin:0; padding-left:1.2em; line-height:1.7; }
.rc-notes p { line-height:1.65; margin:0 0 .8em; }
.rc-nutrition { display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.rc-nutrition div { border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:8px 14px; }
.rc-nutrition dt { font-size:.78rem; color:var(--muted); }
.rc-nutrition dd { margin:2px 0 0; font-weight:700; }
.rc-fine { font-size:.8rem; color:var(--muted); margin:10px 0 0; }
.rc-meta { display:flex; flex-wrap:wrap; gap:16px; margin:18px 0 0; font-size:.9rem; color:var(--ink-soft); }
.rc-print-src { display:none; }
@media (max-width:700px){
  .rc-cols { grid-template-columns:1fr; }
  .rc-head { flex-direction:column; }
  .rc-img { width:100%; height:auto; aspect-ratio:16/10; }
}

/* ---------- Print: a page with a recipe card prints only the card ---------- */
@media print {
  body:has(.recipe-card) *:not(:has(.recipe-card)):not(.recipe-card):not(.recipe-card *) { display:none !important; }
  body:has(.recipe-card) .recipe-card { border:0; box-shadow:none; margin:0; padding:0; }
  .rc-actions, .rc-img, .rc-ingredients input { display:none !important; }
  .rc-print-src { display:block; margin-top:18px; font-size:.8rem; color:#555; }
  .recipe-card, .rc-times div { background:#fff !important; }
  .rc-steps li::before { background:#fff; color:#000; border:1px solid #000; }
  .site-header, .site-footer, .to-top, .ad-slot { display:none !important; }
  body { background:#fff; color:#000; }
}