:root{--ground:#FFFFFF;--light:#F0F1EE;--lightHover:#E4E6E2;--line:#E4E6E2;--ink:#0A0A0A;--ink2:#2E3230;--inkSoft:#595D5B;--studioTop:#FFFFFF;--studioBottom:#F0F1EE;--green:#0A7A3E;--greenDeep:#07602F;--greenFlat:#E1F6E9;--onGreen:#FFFFFF;--volt:#16C46B;--voltDeep:#12A95C;--onVolt:#0A0A0A;--night:#0A0A0A;--nightSoft:#A3A7A5;--onNight:#FFFFFF;--inverse:#0A0A0A;--onInverse:#FFFFFF;--coral:#C2410C;--short:#FF7A3D;--onShort:#0A0A0A;--amber:#8A6100;--canvas:#FFFFFF;--paper:#FFFFFF;--sand:#F0F1EE;--hairline:#E4E6E2;--ink3:#595D5B;--greenDark:#07602F;--greenBright:#0A7A3E;--greenTint:#E1F6E9;--tomato:#0A7A3E;--tomatoBright:#0A7A3E;--tomatoTint:#E1F6E9;--golden:#A3A7A5;--basilCard:#0A0A0A;--onBasil:#FFFFFF}
/* Two voices (docs/DESIGN.md §4), self-hosted from public/fonts (OFL, licences beside them).
   "Maxx Cond" is Archivo at width 62: static instances, so no font-stretch is needed. It is
   Latin only; Arabic, Japanese, Korean and Chinese headings fall back to the system face. */
@font-face {
  font-family: "Maxx Cond";
  src: url("/fonts/ArchivoCondensed-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maxx Cond";
  src: url("/fonts/ArchivoCondensed-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin-wght.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Maxx primitives shared by the Astro pages and the pre-rendered blog/recipe pages (which get
   them through /maxx-chrome.css). Colours are the CSS variables paletteCss() emits from
   src/theme.ts; everything below is site-local and prefixed mx- so it cannot collide with the
   class names inside the older static pages. */
:root {
  --mx-cond: "Maxx Cond", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --mx-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "PingFang SC",
    "Apple SD Gothic Neo", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans Arabic", sans-serif;
  --mx-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --mx-r-card: 24px;
  --mx-r-tile: 18px;
  --mx-shadow-card: 0 10px 20px rgb(0 0 0 / 0.08);
  --mx-shadow-panel: 0 14px 28px rgb(0 0 0 / 0.18);
  --mx-gutter: 16px;
  --mx-max: 1312px;
  --mx-read: 680px;
  color-scheme: light;
}
@media (min-width: 600px) {
  :root {
    --mx-gutter: 32px;
  }
}
@media (min-width: 1200px) {
  :root {
    --mx-gutter: 64px;
  }
}

.mx-wrap {
  width: 100%;
  max-width: calc(var(--mx-max) + 2 * var(--mx-gutter));
  margin-inline: auto;
  padding-inline: var(--mx-gutter);
  box-sizing: border-box;
}

/* Condensed caps: headings, numerals, button labels. Never a paragraph. */
.mx-cond {
  font-family: var(--mx-cond);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.86;
}
.mx-mono {
  font-family: var(--mx-mono);
  font-variant-numeric: tabular-nums;
}

/* Every button, chip and pill is fully round. Press darkens the fill; no opacity fades. */
.mx-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font-family: var(--mx-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}
.mx-pill--volt {
  background: var(--volt);
  color: var(--onVolt);
}
.mx-pill--volt:hover {
  background: var(--voltDeep);
}
.mx-pill--ink {
  background: var(--ink);
  color: var(--ground);
}
.mx-pill--ink:hover {
  background: var(--ink2);
}
.mx-pill--quiet {
  background: var(--light);
  color: var(--ink);
}
.mx-pill--quiet:hover {
  background: var(--lightHover);
}
.mx-pill.mx-cond {
  font-family: var(--mx-cond);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  padding-bottom: 1px;
}

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

:is(.mx-bar, .mx-foot, .mx-pill) :focus-visible,
.mx-pill:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Nav bar, wordmark, language menu and the phone menu sheet. Shared with the static pages. */
.mx-bar {
  position: relative;
  z-index: 20;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mx-body);
}
.mx-bar--over {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  color: var(--onNight);
}
.mx-bar__in {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 72px;
}

.mx-wordmark {
  margin-inline-end: auto;
  color: inherit;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.mx-wordmark > span {
  display: inline-block;
  direction: ltr;
}
.mx-xx {
  margin: 0 1px;
  padding: 0 3px;
  background: var(--volt);
  color: var(--onVolt);
}
.mx-bar--over .mx-xx {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--volt);
}

.mx-bar__links,
.mx-bar__cta {
  display: none;
}
.mx-bar__links a {
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.mx-bar__links a:hover {
  text-decoration-line: underline;
}
.mx-bar__cta {
  min-height: 46px;
  padding: 0 22px;
}

/* Language menu */
.mx-lang,
.mx-menu {
  position: relative;
  flex-shrink: 0;
}
.mx-lang summary,
.mx-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--light);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.mx-menu summary {
  padding: 0;
}
.mx-lang summary::-webkit-details-marker,
.mx-menu summary::-webkit-details-marker {
  display: none;
}
.mx-bar--over :is(.mx-lang, .mx-menu) > summary {
  background: rgb(0 0 0 / 0.28);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5);
  color: var(--onNight);
}
.mx-lang[open] > summary svg {
  transform: rotate(180deg);
}
.mx-lang__flag {
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
}
.mx-lang__menu,
.mx-menu__sheet {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 30;
  margin: 0;
  padding: 8px;
  border-radius: var(--mx-r-card);
  background: var(--ground);
  color: var(--ink);
  box-shadow: var(--mx-shadow-panel);
  list-style: none;
}
.mx-lang__menu {
  min-width: 200px;
  max-height: min(26rem, 70vh);
  overflow-y: auto;
}
.mx-lang__menu li {
  margin: 0;
  padding: 0;
}
.mx-lang__menu li::before {
  content: none;
}
.mx-lang__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.mx-lang__menu a:hover {
  background: var(--light);
}
.mx-lang__menu a[aria-current] {
  font-weight: 700;
}

/* Phone menu sheet */
.mx-menu__sheet {
  display: grid;
  width: min(340px, calc(100vw - 2 * var(--mx-gutter)));
  padding: 8px 20px 20px;
}
.mx-menu__sheet a:not(.mx-pill) {
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 34px;
  text-decoration: none;
}
.mx-menu__sheet .mx-pill {
  margin-top: 18px;
}

@media (min-width: 960px) {
  .mx-bar__in {
    gap: 36px;
    height: 92px;
  }
  .mx-wordmark {
    font-size: 34px;
  }
  .mx-bar__links {
    display: flex;
    gap: 36px;
  }
  .mx-bar__cta {
    display: inline-flex;
  }
  .mx-menu {
    display: none;
  }
}

/* White footer. Explicit colours and spacing because the older static pages style bare
   `footer` elements and would otherwise leak into this one. */
.mx-foot {
  margin: 0;
  padding: 0 0 40px;
  border-top: 1px solid var(--line);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mx-body);
  font-size: 15px;
  line-height: 1.5;
  text-align: start;
}
.mx-foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 40px 32px;
}
.mx-foot__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
}
.mx-foot__brand > span {
  color: var(--inkSoft);
  font-size: 15px;
  font-weight: 500;
}
.mx-wordmark--big {
  margin: 0;
  font-size: clamp(44px, 5vw, 72px);
}
.mx-foot__cta {
  min-height: 64px;
  padding: 0 32px;
  font-size: 30px;
}
[dir="rtl"] .mx-foot__cta svg {
  transform: scaleX(-1);
}
.mx-foot__meta {
  display: grid;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.mx-foot__links,
.mx-foot__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.mx-foot__links a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.mx-foot__langs a {
  color: var(--inkSoft);
  font-size: 14px;
  text-decoration: none;
}
.mx-foot a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mx-foot__langs a[aria-current] {
  color: var(--ink);
  font-weight: 700;
}
.mx-foot__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--inkSoft);
}
.mx-foot__contact a {
  color: var(--ink);
  font-weight: 700;
}
.mx-foot__fine {
  max-width: 86ch;
  color: var(--inkSoft);
  font-size: 13px;
  line-height: 1.55;
}
.mx-foot p {
  margin: 0;
}

/* Overrides for the pre-rendered blog and recipe pages, loaded after their own inline styles
   (only through /maxx-chrome.css). Their colours were already remapped to Maxx tokens by
   scripts/restyle-static-pages.mjs; this carries what a colour swap cannot: the two voices,
   the 680px reading column, round pills, and ink/volt buttons. */
html:root {
  --r-card: 24px;
  --r-btn: 999px;
  --shadow: var(--mx-shadow-card);
}
html body {
  background: var(--ground);
  color: var(--ink2);
  font-family: var(--mx-body);
  -webkit-font-smoothing: antialiased;
}

/* Condensed caps for page and section headings; never for paragraphs. */
html body :is(h1, h2):not(.mx-foot *) {
  font-family: var(--mx-cond) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  line-height: 0.9 !important;
  color: var(--ink) !important;
}
html body h1 {
  font-size: clamp(48px, 7.4vw, 96px) !important;
  text-wrap: balance;
}
html body :is(.prose, .article-body, .article, .recipe-body, main) h2 {
  font-size: clamp(30px, 3.6vw, 44px) !important;
}
html body :is(h1, h2) :is(em, i, span:not(.hn)) {
  font-style: normal !important;
  color: inherit !important;
}
:lang(ja) :is(h1, h2),
:lang(ko) :is(h1, h2),
:lang(zh) :is(h1, h2),
:lang(ar) :is(h1, h2) {
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}
:lang(ja) h1,
:lang(ko) h1,
:lang(zh) h1,
:lang(ar) h1 {
  font-size: clamp(34px, 5vw, 64px) !important;
}

/* Body copy: Geist 18px/1.6 in the 680px column. */
html body :is(.prose, .article-body) {
  max-width: var(--mx-read) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}
html body :is(.prose, .article-body) p {
  line-height: 1.6;
}
/* Drop caps go: the condensed face as a two-line initial reads as decoration. */
html body :is(.prose p.lede, .article-body p:first-of-type, .body p.lede)::first-letter {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  color: inherit !important;
  text-transform: none !important;
  letter-spacing: inherit !important;
}
html body :is(.article-wrap > .hero, .article-head) {
  max-width: var(--mx-read);
}

/* Photos: real food, full width of the article, rounded like the app's tiles. */
.mx-photo {
  max-width: 1140px;
  margin: 32px auto 0;
  overflow: hidden;
  border-radius: var(--mx-r-card);
  background: var(--light);
}
.mx-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.card > .mx-card-photo {
  display: block;
  width: calc(100% + 60px);
  max-width: none;
  height: auto;
  margin: -34px -30px 22px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
@media (max-width: 720px) {
  .card > .mx-card-photo {
    width: calc(100% + 48px);
    margin: -28px -24px 20px;
  }
}

/* Buttons: every action is a round ink or volt pill, labels in condensed caps. */
html body :is(.btn-pill, .btn-primary, .cta a, .cta-section a):not(.mx-pill) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px !important;
  background: var(--volt) !important;
  color: var(--onVolt) !important;
  box-shadow: none !important;
  transform: none !important;
  font-family: var(--mx-cond) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-transform: uppercase;
  text-decoration: none;
  justify-content: center;
  max-width: 100%;
  padding-block: 12px !important;
  white-space: normal !important;
  text-align: center;
}
html body :is(.btn-pill, .btn-primary, .cta a):not(.mx-pill):hover {
  background: var(--voltDeep) !important;
}
html body :is(.cta-section, .cta-card, .cta-band) {
  border-radius: var(--mx-r-card) !important;
  background: var(--night) !important;
  box-shadow: var(--mx-shadow-panel) !important;
}
html body :is(.cta-section, .cta-card, .cta-band) :is(h2, h3) {
  color: var(--onNight) !important;
}
html body .cta-section .cta-eyebrow {
  color: var(--volt) !important;
}

/* Quiet surfaces: callouts and data cards on the light fill, no borders. */
html body :is(.callout, .data-card, .takeaway) {
  border: 0 !important;
  border-radius: var(--mx-r-card) !important;
  background: var(--light) !important;
  box-shadow: none !important;
}
html body blockquote {
  border-inline-start-color: var(--ink) !important;
}
html body .prose a,
html body .article-body a {
  color: var(--ink) !important;
  font-weight: 600;
}

/* The skip link parked at left:-9999px scrolls sideways in right-to-left pages; clip it instead. */
html body .skip:not(:focus) {
  left: 0 !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Keep reading" at the end of the pre-rendered posts and recipes (scripts/lib/static-related.mjs):
   three links in the page's own locale, in the 680px reading column. Static pages only. */
html body .mx-related {
  max-width: calc(var(--mx-read) + 2 * var(--mx-gutter));
  margin: 72px auto 0;
  padding: 0 var(--mx-gutter) 56px;
  color: var(--ink);
  font-family: var(--mx-body);
}
html body .mx-related h2 {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-size: clamp(40px, 4.4vw, 56px) !important;
  /* The condensed face has a narrow space; at this size two words would read as one. */
  word-spacing: 0.08em;
}
html body .mx-related ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
html body .mx-related li {
  margin: 0;
  padding: 0;
}
html body .mx-related li::before {
  content: none;
}
html body .mx-related a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
html body .mx-related small {
  grid-column: 1;
  color: var(--inkSoft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html body .mx-related span {
  grid-column: 1;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-underline-offset: 4px;
}
html body .mx-related svg {
  grid-column: 2;
  grid-row: 1 / span 2;
}
html body .mx-related a:hover span {
  text-decoration: underline;
}
[dir="rtl"] .mx-related svg {
  transform: scaleX(-1);
}
:lang(ar) .mx-related small {
  letter-spacing: 0;
}