/* ============================================================
   Creator site chrome — /k/<slug> as the creator's own website.
   Loaded AFTER shell.css: reuses the --or-* design tokens.
   Two independent axes, matching the customization model in
   modules/core/services/site_theme.py:
     .site--t1|t2|t3          structure (hero treatment, listing shape)
     .style--light|mid|dark   colour (page, surfaces, ink, borders, buttons)
   Structure: masthead / hero (3 variants) / content / footer, plus the
   owner admin bar and the reader avatar menu.
   ============================================================ */

body.site-body {
  /* Per-kitchen knobs, set inline by layouts/desktop/site.html from
     validated values only (hex accent + font-stack registry constants). */
  --site-accent: var(--or-accent);
  --site-accent-ink: var(--or-accent-ink, #fff);
  --site-serif: var(--or-serif);
  --site-sans: var(--or-sans);
  margin: 0; background: var(--or-bg); color: var(--or-ink);
  font-family: var(--site-sans); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
body.site-body a { color: inherit; text-decoration: none; }
.site-main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 30px 32px 64px; }

/* ---- masthead ---- */
.site-mast {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 20px; padding: 13px 30px;
  background: color-mix(in srgb, var(--or-paper) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--or-line);
}
.site-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; min-width: 0; }
.site-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-brand img, .site-brand .site-mono {
  width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--or-celadon-soft); color: var(--or-ink);
  display: grid; place-items: center; font-family: var(--site-serif); font-size: .95rem; font-weight: 700;
}
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; font-size: .92rem; font-weight: 600; }
.site-nav a { padding: 7px 12px; border-radius: 9px; opacity: .82; transition: opacity .15s, background .15s; white-space: nowrap; }
.site-nav a:hover { opacity: 1; background: var(--or-soft); }
.site-nav a.on { opacity: 1; background: var(--or-soft); }
.site-nav a.ext::after { content: "\2197"; font-size: .72em; margin-left: 4px; opacity: .6; }
/* Creator-authored links: the one part of the masthead allowed to shrink, so
   five of them crowd each other rather than shoving the CTA off the page.
   Labels are capped at 20 characters server-side; this ellipsizes what still
   doesn't fit (full text stays in the link's title). */
.site-nav-ext { display: flex; align-items: center; gap: 2px; min-width: 0; }
.site-nav-ext a { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Masthead subscribe CTA: solid accent fill. The retired straw and coral
   tokens both resolve to the accent now, so naming them here made the label
   vanish into the fill. The label ink is a token because a light accent (the
   Dark style's straw) needs dark, not white, text on it. */
.site-cta {
  border: 0; border-radius: 999px; padding: 9px 18px; margin-left: 8px; cursor: pointer;
  background: var(--site-accent); color: var(--site-accent-ink);
  font-family: inherit; font-size: .9rem; font-weight: 800; white-space: nowrap;
}
.site-cta:hover { filter: brightness(.94); }

/* Mobile nav: <details> menu, no JS dependency. */
.site-menu { display: none; margin-left: auto; position: relative; }
.site-menu > summary { list-style: none; cursor: pointer; padding: 7px 10px; border-radius: 9px; font-weight: 700; font-size: .9rem; border: 1px solid var(--or-line); background: var(--or-paper); }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; z-index: 200;
  background: var(--or-paper); border: 1px solid var(--or-line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(20, 32, 26, .16); padding: 6px; font-size: .95rem; font-weight: 600;
}
.site-menu-panel a { display: block; padding: 9px 12px; border-radius: 8px; }
.site-menu-panel a:hover { background: var(--or-soft); }

/* ---- hero (shared type) ---- */
.site-hero h1 {
  font-family: var(--site-serif); font-weight: 640; letter-spacing: -.015em; line-height: 1.08;
  margin: 0 0 12px; text-wrap: balance;
}
.site-hero .site-tagline { font-size: 1.06rem; line-height: 1.55; margin: 0 0 20px; }
.site-hero .site-stats { display: flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; }
.site-hero .site-stats i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; flex: none; }
.site-hero .pk2-actions { justify-content: center; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px; }

/* Variant: card (Porcelain) — rounded banner card on the canvas. */
.site-hero--card { padding: 20px 22px 4px; }
.site-hero--card .site-hero-in {
  border-radius: 20px; overflow: hidden; padding: 72px 34px 58px; text-align: center; color: #fff;
  background:
    linear-gradient(180deg, rgba(12, 20, 17, .30), rgba(12, 20, 17, .62)),
    var(--site-hero-img, linear-gradient(120deg, var(--or-celadon), var(--or-celadon-soft)));
  background-size: cover; background-position: center 32%;
}
.site-hero--card .site-hero-in.no-photo { color: var(--or-ink);
  background: linear-gradient(120deg, var(--or-celadon-soft), var(--or-cream-soft)); }
.site-hero--card h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.site-hero--card .site-tagline { max-width: 560px; margin-left: auto; margin-right: auto; }
.site-hero--card .site-hero-in:not(.no-photo) .site-tagline { color: rgba(255, 255, 255, .9); }
.site-hero--card .site-hero-in:not(.no-photo) .site-stats { color: rgba(255, 255, 255, .8); }
.site-hero--card .site-hero-in.no-photo .site-tagline,
.site-hero--card .site-hero-in.no-photo .site-stats { color: var(--or-muted); }
.site-hero--card .site-stats { justify-content: center; }
.site-hero--card .site-av {
  width: 98px; height: 98px; border-radius: 50%; margin: 0 auto 16px; object-fit: cover;
  background: #fff; color: #22302b; display: grid; place-items: center;
  font-family: var(--site-serif); font-size: 2.1rem; font-weight: 700;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}

/* Variant: inline (Editorial) — full-width photo, warm scrim, serif left. */
.site-hero--inline { color: #fbf7ee; padding: 88px 32px 64px;
  background:
    linear-gradient(180deg, rgba(38, 28, 16, .40), rgba(38, 28, 16, .74)),
    var(--site-hero-img, linear-gradient(150deg, #f3ecdd, #e9dfc8));
  background-size: cover; background-position: center 32%;
}
.site-hero--inline.no-photo { color: var(--or-ink); background: none; border-bottom: 1px solid var(--or-line); }
.site-hero--inline .site-hero-in { max-width: 880px; margin: 0 auto; }
.site-hero--inline h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); font-weight: 600; }
.site-hero--inline:not(.no-photo) .site-tagline { color: rgba(251, 247, 238, .9); }
.site-hero--inline:not(.no-photo) .site-stats { color: rgba(251, 247, 238, .78); }
.site-hero--inline.no-photo .site-tagline, .site-hero--inline.no-photo .site-stats { color: var(--or-muted); }
.site-hero--inline .pk2-actions { justify-content: flex-start; }

/* Variant: publication (Template 2) — a wide cover band, then the profile
   photo, name and tagline centred beneath it, the way a Substack publication
   introduces itself. The identity block rides up over the cover so the two read
   as one masthead; with no cover photo the band collapses to a tinted strip and
   the avatar sits normally (no negative pull into nothing). */
.site-hero--publication { padding: 0 0 8px; text-align: center; }
.site-hero--publication .site-cover {
  height: clamp(150px, 22vw, 280px);
  background:
    linear-gradient(180deg, rgba(12, 20, 17, .06), rgba(12, 20, 17, .22)),
    var(--site-hero-img, linear-gradient(120deg, var(--or-celadon), var(--or-celadon-soft)));
  background-size: cover; background-position: center;
}
.site-hero--publication.no-photo .site-cover { height: 92px; }
.site-hero--publication .site-hero-in {
  max-width: 640px; margin: -58px auto 0; padding: 0 20px;
  position: relative; display: flex; flex-direction: column; align-items: center;
}
.site-hero--publication .site-av {
  width: 118px; height: 118px; border-radius: 50%; margin-bottom: 14px; flex: none;
  background: var(--or-celadon); color: var(--or-celadon-deep);
  border: 4px solid var(--or-bg); box-shadow: 0 6px 20px rgba(20, 32, 26, .12);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--site-serif); font-size: 2.5rem; font-weight: 700;
}
.site-hero--publication .site-av img { width: 100%; height: 100%; object-fit: cover; }
.site-hero--publication h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 10px; }
.site-hero--publication .site-tagline { color: var(--or-muted); max-width: 520px; }
.site-hero--publication .site-stats { justify-content: center; color: var(--or-muted); margin-bottom: 16px; }
.site-hero--publication .pk2-actions { justify-content: center; margin: 0; }

/* Template 2 reads as a publication: one column of posts, not a grid. 820px is
   the compromise between a comfortable reading measure (Substack sits near 700)
   and the search / sort / view bar above the list, which was designed for the
   1040px shell and looks cramped much below this. */
body.site--t2 .site-main { max-width: 820px; }

/* ---- t2 listing: one column of recipes, thumbnail on the right ---- */
.site-rows { display: flex; flex-direction: column; }
.site-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 26px;
  align-items: start; padding: 24px 0; border-bottom: 1px solid var(--or-line);
  color: inherit;
}
.site-row:hover .site-row-title { color: var(--site-accent); }
.site-row-meta {
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--or-muted); margin-bottom: 7px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.site-row-title {
  font-family: var(--site-serif); font-size: 1.3rem; line-height: 1.25;
  margin: 0 0 7px; color: var(--or-ink); transition: color .14s;
}
.site-row-excerpt {
  margin: 0; font-size: .95rem; line-height: 1.55; color: var(--or-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.site-row-art {
  width: 148px; height: 104px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--or-soft); display: grid; place-items: center;
}
.site-row-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-row-art svg { width: 42px; height: 42px; opacity: .5; }

/* ---- footer ---- */
.site-foot {
  border-top: 1px solid var(--or-line); padding: 32px 32px 40px; text-align: center;
  font-size: .85rem; color: var(--or-muted);
}
.site-foot .site-foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; font-weight: 600; }
.site-foot .site-foot-links a:hover { color: var(--or-ink); }
.site-foot .site-made { margin-top: 8px; opacity: .85; }
.site-foot .site-made a { font-weight: 700; border-bottom: 1px solid currentColor; }

/* ---- the Home pill: one floating door back to the viewer's OurRecipes,
       shown to every logged-in visitor (deliberately not app chrome) ---- */
.site-adminbar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 900;
  background: #101b17; color: #dfe8e0; border: 1px solid #2b3c33; border-radius: 999px;
  padding: 5px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  font-size: .84rem; font-weight: 800;
}
.site-home-pill {
  display: flex; align-items: center; gap: 8px; padding: 7px 16px 7px 8px;
  border-radius: 999px; letter-spacing: .02em; white-space: nowrap;
}
.site-home-pill:hover { background: #1d2c25; }
.site-home-mark {
  width: 20px; height: 20px; border-radius: 6px; background: var(--or-celadon);
  color: #12271f; display: grid; place-items: center;
  font-family: var(--site-serif); font-size: .72rem; font-weight: 700; flex: none;
}
/* Leave room above the fixed pill so the footer is never covered. */
body.site-body.has-adminbar { padding-bottom: 64px; }

/* ============================================================
   STYLES — colour only. Every rule below swaps tokens; none of them
   moves, sizes or re-orders anything, so any style works on any
   template. Structure lives under .site--t1|t2|t3 further down.
   ============================================================ */

/* Light: the default token set from shell.css, stated for the record so a
   creator switching back to Light gets a clean slate rather than whatever the
   previous style left behind. */
body.style--light {
  --or-bg: #ffffff; --or-paper: #ffffff; --or-surface: #ffffff;
  --or-ink: #20302a; --or-muted: #6e7f71; --or-line: #e7e5e1; --or-soft: #f0efec;
  --site-accent: var(--or-accent); --site-accent-ink: #fff;
}

/* Mid: warm paper, softer ink, a terracotta accent. */
body.style--mid {
  --or-bg: #faf7f0; --or-paper: #fffdf8; --or-ink: #2b3630; --or-muted: #7a8078;
  --or-line: #e8e2d4; --or-soft: #f3ecdd; --or-cream-line: #e8e2d4;
  --site-accent: #b5502a;
}
body.site--t3 .site-brand { font-family: var(--site-serif); font-size: 1.1rem; font-weight: 700; }
body.site--t3 .site-mast { border-bottom: 2px solid var(--or-ink); }

/* Dark: dark site, straw accent.

   Three layers, each a measured step apart, because the previous palette put
   cards on the same value as the page and left the ink between the two:
     page #0c1411  <  card #1a2924  <  raised/hover #24332c
   Every pair below was checked for WCAG AA (4.5:1 for text, and a visible
   1.2:1+ step between layers):
     ink #f1f5ef on card 13.7:1 · muted #a3b3a8 on card 6.9:1
     straw #f6e199 as text on card 11.7:1 · ink-on-straw 12.8:1
     card vs page 1.23:1 · hairline #33443c vs card 1.47:1
   Straw is a light accent, so anything filled with it needs dark, not white,
   label ink: that is --or-accent-ink / --site-accent-ink, defaulted to #fff for
   the light templates. A creator who picks their own accent gets white ink
   back (set inline by layouts/desktop/site.html) since custom accents are
   mid-dark hexes. */
body.style--dark {
  --or-bg: #0c1411; --or-paper: #1a2924; --or-surface: #1a2924; --or-ink: #f1f5ef;
  --or-muted: #a3b3a8; --or-line: #33443c; --or-soft: #24332c;
  --or-shade: #1a2924; --or-shade-line: #33443c;
  --or-cream: #24332c; --or-cream-soft: #16231e; --or-cream-line: #33443c;
  --or-celadon: #33443c; --or-celadon-soft: #24332c; --or-celadon-deep: #cfe0d6;
  /* Straw replaces the green as the interactive color on dark, matching the
     template's design (nav CTA, active pills, primary buttons). */
  --or-accent: #f6e199; --or-accent-dark: #fbeeb8; --or-accent-ink: #14211c;
  --or-coral: #f6e199; --or-coral-soft: #2a2416; --or-coral-line: #55471f;
  --site-accent: #f6e199; --site-accent-ink: #14211c;
}
body.style--dark .site-mast { background: color-mix(in srgb, #0a110e 88%, transparent); }
body.style--dark img.site-shade { filter: brightness(.92); }

/* ---- dark: surfaces owned by other stylesheets ----
   The vault (recipe index) and the recipe detail page carry their own token
   sets — --vault-* scoped to .vault-shell, --color-* from app.css. Both are
   hardcoded light, which is why cards went dark (themed --or-paper) while
   their titles stayed dark (unthemed --vault-ink). Remapping the tokens fixes
   every component that already reads them, so this stays a color change. */
body.style--dark .vault-shell {
  --vault-ink: #f1f5ef; --vault-ink-soft: #d9e2da; --vault-ink-mute: #a3b3a8;
  --vault-cream: #1a2924;        /* cards, list, search field, active tab */
  --vault-paper: #141f1b;        /* recessed: inactive tabs, segmented track */
  --vault-hair: rgba(241, 245, 239, .13);
  --vault-hair-strong: rgba(241, 245, 239, .24);
  --vault-accent: #f6e199; --vault-accent-dark: #fbeeb8; --vault-accent-tint: #33443c;
  --vault-accent-ink: #14211c;
  --vault-pro: #e9a3ae;          /* maroon is invisible on dark; use its tint */
}
body.style--dark {
  /* app.css tokens (recipe detail page: .card, .form-*, .recipe-*). */
  --color-bg: #1a2924; --color-bg-secondary: #0c1411;
  --color-text: #f1f5ef; --color-text-muted: #a3b3a8;
  --color-border: #33443c; --color-shadow: rgba(0, 0, 0, .45);
  --color-primary: #f6e199; --color-primary-hover: #fbeeb8; --color-primary-light: #33443c;
  --color-accent: #f6e199; --color-accent-hover: #fbeeb8; --color-accent-light: #24332c;
  --color-wheat: #24332c; --color-cream: #24332c;
  /* Bootstrap's own components (badges, selects, muted text, hairlines). */
  --bs-body-bg: #0c1411; --bs-body-color: #f1f5ef;
  --bs-emphasis-color: #f1f5ef; --bs-secondary-color: #a3b3a8;
  --bs-border-color: #33443c; --bs-card-bg: #1a2924;
  --bs-tertiary-bg: #24332c;
}
/* Bootstrap paints buttons and form controls from its own vars, and app.css
   re-skins .btn-primary from --color-primary, so both land on straw. Only the
   label ink needs stating. */
body.style--dark .btn-primary,
body.style--dark .btn-primary:hover,
body.style--dark .btn-primary:active,
body.style--dark .btn-outline-primary:hover,
body.style--dark .btn-outline-primary:active { color: var(--or-accent-ink); }
/* Form-error red is a dark red by default: unreadable on the dark canvas. */
body.style--dark .cm-form-error,
body.style--dark .invalid-feedback { color: #f2a7a7; }
/* Hero Subscribe: the light-theme skin is a faint accent wash, which on dark
   turns into a muddy low-contrast brown. Midnight wants the solid straw pill
   the template was designed around. */
body.style--dark .pk2-follow {
  background: var(--or-accent); border-color: var(--or-accent); color: var(--or-accent-ink);
}
body.style--dark .pk2-follow:hover {
  background: var(--or-accent-dark); border-color: var(--or-accent-dark);
}
body.style--dark .pk2-follow.following {
  background: transparent; border-color: var(--or-line); color: var(--or-ink);
}
body.style--dark .form-control,
body.style--dark .form-select {
  background-color: #1a2924; color: var(--or-ink); border-color: var(--or-line);
}
body.style--dark .form-control::placeholder { color: var(--or-muted); }
/* Bootstrap's select chevron is a dark SVG data URI; swap in a light stroke. */
body.style--dark .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3b3a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .site-cols { grid-template-columns: 1fr; gap: 22px; }
  .site-col-main { order: 2; }
  .site-rail { order: 1; position: static; }
  .site-cols .vault-grid, .site-cols .mag-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-menu { display: block; }
  .site-mast { padding: 11px 16px; gap: 12px; }
  .site-main { padding: 22px 16px 52px; }
  .site-hero--card { padding: 12px 12px 2px; }
  .site-hero--card .site-hero-in { padding: 54px 22px 44px; }
  .site-hero--inline { padding: 64px 20px 48px; }
  .site-hero--publication .site-hero-in { margin-top: -48px; }
  .site-hero--publication .site-av { width: 96px; height: 96px; font-size: 2rem; }
  .site-row { grid-template-columns: minmax(0, 1fr) 92px; gap: 14px; padding: 18px 0; }
  .site-row-art { width: 92px; height: 72px; }
  .site-row-title { font-size: 1.12rem; }
  .site-foot { padding: 26px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  body.site-body * { transition: none !important; animation: none !important; }
}

/* ---- vertical rhythm of the filter stack ----
   The search bar / facet dropdowns / category tabs come from vault.css, whose
   spacing was tuned for the app's vault: a 14 / 18 / 24px ramp with a negative
   pull between the first two. On a creator site that reads as three rows crammed
   between the hero and the recipes. One scale instead: an even 16px inside the
   stack, then a clear 30px before the content it filters. Scoped to the site so
   the owner-facing vault keeps its own tighter spacing. */
body.site-body .vault-bar { margin-bottom: 16px; }
body.site-body .vault-facets { margin: 0 auto 16px; }
body.site-body .vault-tabs { margin-bottom: 30px; }

/* ---- Template 1: the filter rail ----
   andrewzimmern.com/recipes puts its Recipe Finder in a right column beside the
   grid, so the filters are visible the whole time you are scanning rather than
   scrolled away above the first row. The rail sticks; the recipe column keeps the
   page's normal max-width, so the grid drops from four cards across to three. */
/* Template 1 is the widest layout: a generous recipe column plus the rail, the
   pair still centred by .site-main's auto margins. */
body.site--t1 .site-main { max-width: 1280px; }
.site-cols { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 40px; align-items: start; }
.site-col-main { min-width: 0; }
.site-rail {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px;
  padding: 20px; border: 1px solid var(--or-line); border-radius: 14px;
  background: var(--or-paper);
}
/* The search + sort/view bar drops its own card treatment inside the rail: the
   rail is already the card, and vault.css makes .vault-bar sticky for the
   full-width layouts. */
.site-rail .vault-bar {
  position: static; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-rail .vault-bar-inner { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.site-rail .vault-search { width: 100%; min-width: 0; }
.site-rail .vault-search input { min-width: 0; }
/* The shortcut hint is for a page-wide search field, not a 312px rail. */
.site-rail .vault-search kbd { display: none; }
/* Sort and view each take a full row, halves inside, so they read as controls
   rather than as leftovers wrapped onto two lines. */
.site-rail .vault-actions { display: flex; flex-direction: column; gap: 8px; }
.site-rail .vault-actions .seg { display: flex; width: 100%; }
.site-rail .vault-actions .seg > a { flex: 1; text-align: center; }
.site-rail-clear {
  align-self: start; margin-top: 2px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--or-line); background: var(--or-soft);
  font-size: .84rem; font-weight: 600; color: var(--or-ink);
}
.site-rail-clear:hover { border-color: var(--site-accent); color: var(--site-accent); }
/* The filters are a second group in the same card, so a hairline does the
   separating rather than a bigger gap. */
.site-rail-group {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 18px; border-top: 1px solid var(--or-line);
}
.site-rail h2 {
  font-family: var(--site-serif); font-size: 1.12rem; font-weight: 640;
  margin: 0; color: var(--or-ink);
}
.site-rail-field { display: flex; flex-direction: column; gap: 6px; }
.site-rail-field label { font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--or-muted); }
/* Full-width boxes in the rail, not the inline pill shape. */
.site-rail .vault-facet { width: 100%; height: 40px; border-radius: 10px; font-size: .9rem; }
/* Three across in the narrower column (four is the full-width default). */
/* Three across in the recipe column (four is the full-width default). */
.site-cols .vault-grid, .site-cols .mag-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Magazine landing (the recipes tab's no-query state) ─────────────────
   Substack-home shape: hero → Most Popular → CTA bands → category sections.
   Styled with the shared --or- and --site- tokens only, so every style
   restyles it with no per-style rules. Never write a token glob with a star
   directly before a slash inside a comment: that sequence closes the comment,
   and it silently swallowed the .mag rule below (its flex gap never applied,
   which is why the sections looked squished). Small
   cards reuse .vault-card (vault.css is loaded by both kitchen templates);
   only the layout containers live here. */
.mag { display: flex; flex-direction: column; gap: 36px; }

.mag-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
  border: 1px solid var(--or-line); border-radius: 16px; overflow: hidden;
  background: var(--or-paper, #fff); text-decoration: none; color: inherit;
  transition: border-color .14s; }
.mag-hero:hover { border-color: var(--site-accent); }
.mag-hero-art { min-height: 260px; background: var(--or-soft); display: grid;
  place-items: center; overflow: hidden; }
.mag-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-hero-body { padding: 28px 30px; display: flex; flex-direction: column;
  justify-content: center; gap: 10px; }
.mag-kicker { display: flex; align-items: center; gap: 8px; font-size: .72rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--site-accent); }
.mag-hero-title { font-family: var(--site-serif); font-size: 1.7rem;
  line-height: 1.2; margin: 0; color: var(--or-ink); }
.mag-hero-meta { font-size: .85rem; color: var(--or-muted); }

.mag-section-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; }
.mag-section-head h3 { font-family: var(--site-serif); font-size: 1.2rem; margin: 0;
  color: var(--or-ink); }
.mag-view-all { font-size: .85rem; font-weight: 600; color: var(--site-accent);
  text-decoration: none; white-space: nowrap; }
.mag-view-all:hover { text-decoration: underline; }
/* Strips cap at four across; .vault-grid provides the card sizing. */
.mag-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.mag-cta { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 22px 26px; border-radius: 14px;
  background: var(--or-soft); border: 1px solid var(--or-line); }
.mag-cta h3 { font-family: var(--site-serif); font-size: 1.1rem; margin: 0 0 3px;
  color: var(--or-ink); }
.mag-cta p { margin: 0; font-size: .9rem; color: var(--or-muted); }
.mag-cta .site-cta { flex: none; }

@media (max-width: 900px) {
  .mag-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mag { gap: 28px; }
  .mag-hero { grid-template-columns: 1fr; }
  .mag-hero-art { min-height: 180px; }
  .mag-hero-body { padding: 18px 18px 22px; }
  .mag-hero-title { font-size: 1.35rem; }
  .mag-strip { grid-template-columns: 1fr; }
  .mag-cta { padding: 18px; }
}