/* Krayv recipes ↔ Krayv shop: one brand (Anas, 26 Oct 2026: "make the logos and design match obviously").
   The shop (shop.krayv.com) sets the look: logo A in gold, ink #14171a, yellow #ffc72c as a fill with ink text,
   Big Shoulders caps for headlines, Hanken Grotesk for text, a dark slate hero. Loaded last, so removing this
   file (and the logo swap in build.mjs) brings back the old red look. */
@font-face { font-family: "Big Shoulders"; src: url(/assets/fonts/store/big-shoulders-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(/assets/fonts/store/hanken-grotesk-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --brand-tomato: #ffc72c; --red: #ffc72c;
  --brand-action: #14171a; --deep-red: #14171a;
  --brand-leaf: #14171a; --brand-leaf-light: #fff4d1; --yellow: #fff4d1;
  --brand-surface: #f4f3f0; --paper: #f4f3f0;
  --brand-ink: #14171a; --ink: #14171a;
  --line: #d8d7d1; --muted: #5b6168;
  --font-ui: "Hanken Grotesk", "DM Sans", Arial, sans-serif;
  --font-display: "Big Shoulders", "Arial Narrow", Arial, sans-serif;
  --sb-accent: #14171a; --sb-ink: #14171a; --sb-line: #d8d7d1; --sb-card: #fff;
}
body { background: var(--paper); }

/* Shop bar: the shop's yellow top strip, full width, linking to the shop. */
.shop-bar { display: block; margin: 0 calc(50% - 50vw); padding: 9px 16px; background: #ffc72c; color: #14171a;
  text-align: center; font: 600 12px/1.4 var(--font-ui); text-decoration: none; letter-spacing: .02em; }
.shop-bar:hover { text-decoration: underline; }

/* Logo A in gold, sized like the shop's header logo. */
.wordmark img { width: auto !important; height: 56px; aspect-ratio: auto; }
.footer .wordmark img, .locale-footer .wordmark img { height: 40px; }
@media (max-width: 760px) { .wordmark img { height: 46px; } }

/* Headlines: the shop's condensed caps. Recipe and menu names people type stay as written. */
h1, .section-heading h2, .guide-hero h1, .guide-body h2, .editorial-end h2, .error-page h1, .locale-hero h1 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .98; }
.recipe-card h3, .empty h3, .kitchen-note h3, .pantry-intro h3, .pantry-match h3, dialog h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
.hero-sticker b, .cook-mode .step-counter { font-family: var(--font-display); font-weight: 800; }

/* Buttons: yellow with ink text for the main action, ink for the dark one (as in the shop). */
.button.red { background: #ffc72c; color: #14171a; box-shadow: 0 4px 0 #f2a900; }
.button.red:hover { background: #f2a900; }
.button.dark:hover { background: #2a2f35; }
.button.shop { background: #ffc72c; color: #14171a; border-color: #ffc72c; }
.button.shop:hover { background: #f2a900; border-color: #f2a900; }
.editorial-end .button { background: #ffc72c; }

/* Hero: the shop's dark slate panel with white text, a yellow label and a yellow button. */
.hero { background: #14171a; }
.hero .eyebrow, .hero-copy > .eyebrow { display: inline-block; background: #ffc72c; color: #14171a; padding: 3px 9px; border-radius: 4px; }
.hero h1, .hero-copy > p:not(.eyebrow) { color: #fff; }
.hero h1 em { color: #ffc72c; }
.hero-copy .button.dark { background: #ffc72c; color: #14171a; border-color: #ffc72c; }
.hero-copy .button.dark:hover { background: #f2a900; }
.hero-sticker { background: #ffc72c; }
.locale-hero { background: #14171a; color: #fff; }
.locale-hero h1, .locale-hero p { color: #fff; }
.locale-hero .eyebrow { display: inline-block; background: #ffc72c; color: #14171a; padding: 3px 9px; border-radius: 4px; }
.locale-hero .button.dark { background: #ffc72c; color: #14171a; }

/* Small marks that were red text on light backgrounds: gold or ink so they stay readable. */
.wordmark .dot, .strap .flower, .empty-symbol { color: #f2a900; }
.tabs button.active:after { background: #f2a900; }
.day-heading i { color: #14171a; }
.usage-actions button:focus-visible { outline-color: #f2a900; }
.document-logo span { color: #14171a; }