:root { --accent: #000000; --on-accent: #f1f0ea; }
@media (prefers-color-scheme: dark) {
  :root { --accent: #f1f0ea; --on-accent: #000000; }
}
/* Farinu design system: poster type, square frames and controls, black bands. Fonts are self-hosted (OFL). */
@font-face { font-family: Anton; src: url("/fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
/* Arial (or Liberation Sans, as wide) scaled to these fonts' widths and line metrics, so text keeps its place as they swap
   in: Astro's font fallback math, with the average widths taken over this site's text in each font (English and Spanish;
   pt, fr and it only checked by e2e/fonts.spec.ts), capitals (the later face) apart, as they differ most. Roboto (Android)
   is up to 8% narrower than Arial over this text, so it gets faces of its own from the same math. `e2e/fonts.spec.ts`
   fails when they drift. */
@font-face { font-family: "Anton fallback"; src: local("Arial"), local("Liberation Sans"); size-adjust: 90.49%; ascent-override: 129.99%; descent-override: 36.37%; line-gap-override: 0%; }
@font-face { font-family: "Anton fallback"; src: local("Arial"), local("Liberation Sans"); unicode-range: U+41-5A, U+C0-DE; size-adjust: 67.73%; ascent-override: 173.67%; descent-override: 48.59%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk fallback"; src: local("Arial"), local("Liberation Sans"); font-weight: 300 700; size-adjust: 109.53%; ascent-override: 89.84%; descent-override: 26.66%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk fallback"; src: local("Arial"), local("Liberation Sans"); font-weight: 300 700; unicode-range: U+41-5A, U+C0-DE; size-adjust: 90.87%; ascent-override: 108.28%; descent-override: 32.13%; line-gap-override: 0%; }
@font-face { font-family: "Anton fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 91.83%; ascent-override: 128.09%; descent-override: 35.84%; line-gap-override: 0%; }
@font-face { font-family: "Anton fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"); unicode-range: U+41-5A, U+C0-DE; size-adjust: 73.7%; ascent-override: 159.6%; descent-override: 44.65%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 300 700; size-adjust: 109.87%; ascent-override: 89.56%; descent-override: 26.58%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 300 700; unicode-range: U+41-5A, U+C0-DE; size-adjust: 98.06%; ascent-override: 100.34%; descent-override: 29.78%; line-gap-override: 0%; }
:root {
  color-scheme: light dark;
  --surface: #f1f0ea;
  --ink: #000;
  --muted: #5e5d57;
  --ember: #a8361a;
  --dough: #f2dcc4;
  --display: Anton, "Anton fallback", "Anton fallback Roboto", sans-serif;
  --sans: "Space Grotesk", "Space Grotesk fallback", "Space Grotesk fallback Roboto", sans-serif;
  --content: 70.75rem;
  font: 100%/1.5 var(--sans);
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #000;
    --ink: #f1f0ea;
    --muted: #a19f96;
    --ember: #ef7a4f;
    --dough: #3b2618;
  }
}
* { box-sizing: border-box; }
/* A flex column, so the footer stays at the bottom of a short page. */
body { display: flex; flex-direction: column; min-block-size: 100dvh; margin: 0; color: var(--ink); background: var(--surface); overflow-wrap: break-word; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
/* Zero-specificity, so a page's own classes (`.hero .lead`) still set their width. */
header, footer, main > :where(:not(.band, .banner, .landing)), .landing > :where(:not(.band, .banner)) { max-width: var(--content); margin-inline: auto; padding-inline: 1rem; }
header { padding-block: 1rem; }
footer { padding-block: 2rem; color: var(--muted); font-size: 0.875rem; }
footer nav + nav { margin-block-start: 0.5rem; }
/* Sized, since their auto margins would shrink them to fit in the body's flex column. */
header, footer { inline-size: 100%; }
main { flex-grow: 1; }
/* Text keeps a readable measure, starting where the column does. */
main > :where(p, dl, ul, ol, article) { padding-inline-end: max(1rem, min(100%, var(--content)) - 44rem); }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
/* At least 24px square, WCAG 2.2's minimum target size, also in the smaller footer text. */
nav a { display: inline-block; min-block-size: 1.5rem; min-inline-size: 1.5rem; color: var(--ink); text-decoration: none; }
nav a:not(.button):hover { text-decoration: underline; }
nav a[aria-current] { text-decoration: underline; font-weight: 700; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font: 400 1.75rem/1 var(--display); text-transform: uppercase; }
.end { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-inline-start: auto; }
a.button, a.outline { display: inline-block; padding: 0.5rem 1rem; border: 2px solid var(--accent); border-radius: 0; background: var(--accent); color: var(--on-accent); font-weight: 700; text-transform: uppercase; text-decoration: none; }
a.outline { border-color: var(--ink); background: transparent; color: var(--ink); }
a.button:hover { border-color: var(--ember); background: var(--ember); color: var(--surface); }
a.outline:hover { background: var(--ink); color: var(--surface); }
.skip { position: absolute; inset-inline-start: -100vw; }
.skip:focus { inset-inline-start: 1rem; inset-block-start: 1rem; padding: 0.25rem 0.5rem; background: var(--surface); }

/* Fluid sizes grow with the root font size too, and their largest is at most 2.5 times their smallest, so zooming in up to
   500% (the browser's limit) always reaches twice the size (WCAG 1.4.4). Line height 1.15, not 1.1: a descender (y) would touch
   an accent (ó) on the line below. */
h1, h2, h3, .slogan { font-family: var(--display); font-weight: 400; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 2.125rem + 1.6vw, 3.5rem); margin-block: 1rem; }
h2 { font-size: 1.75rem; margin-block: 2rem 0.5rem; }
h3 { font-size: 1.5rem; margin-block: 0 0.5rem; }
/* Marketing pages wrap their content in `.landing` and set headings as posters; every other page keeps the plain scale. */
.landing { display: contents; }
/* 1.2, not 1: an accented capital (Ñ, Ó) would touch the line above. */
.landing :is(.hero h1, section > h2, .cards h3, .steps h3), .slogan { line-height: 1.2; text-transform: uppercase; }
.landing .hero h1 { font-size: clamp(3rem, 1.5rem + 6.2vw, 7rem); }
.landing section > h2 { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 4rem); margin-block: 0 2rem; text-align: center; }
.landing section { padding-block: 4rem; }
/* So a section's last margin doesn't add to its padding, leaving it as much room below as above. */
.landing section:not(.hero) > :last-child { margin-block-end: 0; }
.hero, .landing .hero { padding-block: 5rem 4rem; text-align: center; }
.eyebrow { margin: 0; font-size: 1.25rem; line-height: 1.5; text-transform: uppercase; text-wrap: balance; }
.tagline { margin: 0 0 1rem; font: 400 clamp(1.75rem, 1.25rem + 2vw, 3rem)/1.2 var(--display); text-transform: uppercase; text-wrap: balance; }
.lead { font-size: 1.25rem; color: var(--muted); }
.hero .lead { max-width: 40rem; margin-inline: auto; }
.note { color: var(--muted); font-size: 0.875rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
/* A tool page's sign-up and sheet download, lined up with the lead above them. */
.lead + .actions { justify-content: start; }
.banner { margin: 0; padding: 2rem 1rem; background: var(--ink); color: var(--surface); font-size: 1.5rem; font-weight: 500; line-height: 1.1; text-align: center; text-transform: uppercase; text-wrap: balance; }
/* Each phrase wraps as a whole, so a line never starts with its separator; one wider than the column (a long word in large
   text) breaks inside it. */
.banner span { display: inline-block; max-inline-size: 100%; }
.band { background: var(--ink); color: var(--surface); }
.band > * { max-width: var(--content); margin-inline: auto; padding-inline: 1rem; }
.band a.button:not(:hover) { border-color: var(--surface); }
.band a:focus-visible { outline-color: var(--surface); }
.cards, .steps, .audiences { display: grid; gap: 0.75rem; padding: 0; list-style: none; }
.cards li, .steps li { padding: 1.5rem; }
.cards p, .steps p { margin: 0; }
/* One column on phones, three from tablets up, never two, which would leave the third alone. */
.cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 45.5rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.band > .cards { row-gap: 2.25rem; padding-inline: 1rem; }
/* One, two or four across, never three, which would leave the fourth alone. */
.audiences { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(14rem, 40%)), 1fr)); }
@media (min-width: 64rem) { .audiences { grid-template-columns: repeat(4, 1fr); } }
.framed li { border: 3px solid var(--ink); }
/* Unframed, so the room between columns and below the last row is the text's own. */
.band .cards li { border-block-start: 4px solid var(--surface); padding-block: 1.5rem 0; padding-inline: 0 1.25rem; }
.steps { counter-reset: step; }
.steps li { counter-increment: step; background: var(--dough); }
.steps li::before { content: counter(step); display: block; font: 400 4rem/1 var(--display); color: var(--ember); }
.slogan { margin-block: 0; padding-block: 2rem; font-size: clamp(4.5rem, 2rem + 10.3vw, 11.25rem); text-align: center; }
.audiences a { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.5rem; min-block-size: 100%; padding: 1.5rem; border: 2px solid var(--ink); text-decoration: none; }
.audiences a:hover { background: var(--ink); color: var(--surface); }
.audiences strong { font-size: 0.875rem; text-transform: uppercase; }
.audiences span { font: 400 1.5rem/1.2 var(--display); text-transform: uppercase; text-wrap: balance; }
/* Photos are the one rounded shape; every photo is decorative (`alt=""`), its section's text says what it shows. Each `<img>`
   is in a `<picture>`, a block taking its place in the grid or flow. */
picture { display: block; }
.photo img, .cards img, .split img, .audiences img { display: block; inline-size: 100%; object-fit: cover; border-radius: 1rem; background: var(--dough); }
.photo img { block-size: clamp(16rem, 40vw, 35rem); }
.hero + .photo { margin-block-end: 4rem; }
.cards img { block-size: 15rem; margin-block-end: 1.5rem; }
/* The chalkboard's text (pain1's) is centered at 53% of its width, so it stays whole in a tablet's narrow card. */
.cards li:first-child img { object-position: 55% 50%; }
.audiences img { block-size: 11.25rem; object-position: 65% 50%; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0.75rem; }
.split img { block-size: 100%; min-block-size: 20rem; }
/* Stacked, at most a phone's screen tall, or square on a wider one, framed low to keep the cup, the butter and the eggs whole. */
@media (max-width: 42.74rem) { .split img { max-block-size: max(30rem, 100vw - 2rem); object-position: 50% 90%; } }
.split .steps { grid-template-columns: minmax(0, 1fr); margin: 0; }
/* Beside the photo, the steps share its height, so each one's text sits in the middle of its card. */
.split .steps li { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.more { text-align: center; }
.faq { max-width: 45rem; margin-inline: auto; }
/* A targeted landing page's worked example (`.example`, below) and its related pages, centered under their headings. */
.worked > :not(h2) { max-inline-size: 36rem; margin-inline: auto; }
.landing .related { padding: 0; list-style: none; text-align: center; }
.landing .related li + li { margin-block-start: 0.75rem; }
.cta { text-align: center; }
.cta p { margin-block: 0 1rem; }

/* Docs, API, changelog and legal pages. */
.date { margin-block: 0; color: var(--muted); }
/* Inside the column's gutter, since its background fills its padding. */
pre { max-width: calc(min(100%, var(--content)) - 2rem); direction: ltr; overflow-x: auto; padding: 1rem; border-radius: 0.5rem; background: var(--dough); }
code { font-family: ui-monospace, monospace; font-size: 0.9em; }
dt { font-weight: 700; margin-block-start: 1rem; }
dd { margin: 0; margin-inline-start: 1rem; color: var(--muted); }

/* Catalog pages (src/components/CatalogPage.astro): plain pages with breadcrumbs, tables, a worked example, and a closing band. */
.crumbs { margin-block-start: 1rem; font-size: 0.875rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/" / ""; margin-inline-end: 0.5rem; color: var(--muted); }
.crumbs a { text-decoration: underline; }
.badge { display: inline-block; margin: 0; margin-inline-start: 0.5rem; padding: 0 0.5rem; border: 2px solid var(--ember); color: var(--ember); font-size: 0.875rem; font-weight: 700; line-height: 1.5; text-transform: uppercase; vertical-align: middle; }
.children .badge { margin-inline-start: 0; margin-block-end: 0.5rem; }
/* Scrolls sideways inside the column when wider than it, so the page never does. */
.table { overflow-x: auto; }
.table table { min-inline-size: 100%; border-collapse: collapse; }
.table caption { padding-block-end: 0.5rem; font-weight: 700; text-align: start; }
.table :is(th, td) { padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--muted); text-align: start; vertical-align: top; }
.table thead th { border-block-end: 3px solid var(--ink); }
.example dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 0 1.5rem; max-inline-size: 36rem; margin: 0; padding: 1rem 1.5rem; border: 3px solid var(--ink); }
.example :is(dt, dd) { margin: 0; padding-block: 0.5rem; border-block-end: 1px solid var(--muted); color: var(--ink); font-weight: 400; }
.example dd { text-align: end; }
.example .result { border-block-end: 0; font-size: 1.25rem; font-weight: 700; }
.children { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 0.75rem; padding-block: 0; padding-inline: 1rem; list-style: none; }
.children li { padding: 1.25rem; border: 3px solid var(--ink); }
.children p { margin: 0; }
main > .cta { margin-block-start: 4rem; padding-block: 3rem; }
.cta h2 { margin-block-start: 0; }