/* Hallmark · shape: Index-First, the recipes as a field guide · genre: editorial · theme: Hedgerow (deal 3/3, seed family-recipe-collection-tunisian-cb26·236b8910·2026-10-31·r0) · redesign: full
 * hero: Stage, the head beside the newest dish in true colour · nav: edge-aligned, wordmark and one line pill · footer: letter close · imagery: the owner's own kitchen photographs in true colour · signature: home-cooked dishes glowing on leaf green, the recipe list read like a field guide · hedgerow: hedge
 * axes: dark/high-contrast-serif/chromatic-green · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E5 S4 R4 V4 · weakest: P, the photographs are phone shots of mixed light, so they sit square in a thin cream ring and never larger than the column */
/* Hallmark · waive 49b · the wrapping links are dish names in the recipe cards · a dish name is the title and wraps as a title */
/* Hallmark · waive 77 · the home is the hero, the twenty recipes, about and the footer · a recipe collection is its index, and each recipe has its own page */
/* Hallmark · waive 79 · a recipe page opens on a short title and lede beside the dish photo · the ingredients and steps follow straight after the title */
/* Hallmark · waive 71 · the cards without a summary end on their title, so the gap under it is the row gap · some recipes have no summary yet and the owner adds them later */
/* Hallmark · dropped #01, #02, #03, #04, #05, #06, #07, #08, #09, #10, #12, #13, #14, #15, #16, #17, #18, #19, #20, #21, #headerwrap, #mainposts · the side menu that listed every recipe is gone; each card keeps its old id, so old links to #09 or #21 still land on the recipe */
/* Hallmark · dropped assets/js/AnimOnScroll.js, assets/js/bootstrap.min.js, assets/js/classie.js, assets/js/imagesloaded.js, assets/js/main.js, assets/js/masonry.pkgd.min.js, assets/js/modernizr.custom.js, jquery-1.10.2.min.js, googletagmanager · the page is plain HTML now, the pop-up recipes became their own pages, and the analytics tag used a service Google shut down in 2023 */
/* Hallmark · reworded "We Ate For You" to "We cook healthy dishes that people love" · the name sits in the nav, the old welcome line became the headline */
/* Hallmark · dropped best gastronomic cuisine online, crêpes sweet & savory (nutella or tunisian styl, alternate version: french-tunisian lasagna, 2023 · the old subtitle was generic; the two recipe headings moved onto their own recipe pages; the footer year now runs to the current year */
/* Hallmark · dropped la-cuisine-de-mes-racines.com, youtube.com/watch?v=WL3u8p2u_NA, javascript:; · the two outside links sat inside recipe pop-ups and now live on the Fricassé and Fettucini recipe pages; the dead Coming soon links became plain text */
@import url("./tokens.css");
@import url("./base.css");
@import url("./fonts.css");
@import url("./common.css");

:root { color-scheme: dark; }
body { font-size: 17px; }
h1, h2, h3 { font-weight: 400; font-synthesis: none; line-height: 1.08; letter-spacing: var(--tracking-display); }
h1 { font-size: clamp(2.75rem, 4.6vw + 0.5rem, 5rem); max-width: 14ch; }
.lead { margin-top: var(--space-lg); max-width: 36ch; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.45; }

.btn { border-radius: var(--radius-pill); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); }
.btn--primary:active { transform: translateY(1px); }
.btn--line { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.btn--line:hover { background: var(--color-paper-3); }
.btn--line:active { transform: translateY(1px); }

.nav { border-bottom: var(--rule-hair) solid var(--color-rule); }

.hero { padding-block: var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: calc(var(--gap-columns) * 2); align-items: center; min-height: calc(100svh - 77px - var(--space-3xl) * 2); }
.hero__pic { margin: 0; }
.hero__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 8%, transparent); }
.hero__pic figcaption, .rp__pic figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

/* the recipe list as a field guide */
#recipes { border-top: var(--rule-hair) solid var(--color-muted); }
.chip { background: transparent; color: var(--color-ink-2); border: 0; box-shadow: inset 0 0 0 1px var(--color-rule); }
.chip:hover { color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-muted); }
.chip[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: none; }
.chip:active { transform: translateY(1px); }
.cards { border-top: 1.5px solid var(--color-accent); padding-top: var(--space-xl); }
.card__pic { background: var(--color-paper-3); color: var(--color-ink-2); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 8%, transparent); }
.card__noimg { color: var(--color-ink-2); }
.card__title { font-family: var(--font-display); font-size: var(--text-xl); }
.card__title a { transition: color var(--dur-short) var(--ease-out); }
.card:hover .card__title a { color: var(--color-accent-2); }
.tag { color: var(--color-muted); }
.tag + .tag::before { content: ""; }

/* about: the cream band */
.band { background: var(--color-ink); color: var(--color-paper); }
.band h2, .band .about__lead { color: var(--color-paper); }
.band .about__mail { color: var(--color-paper-3); }
.band a:not([class]) { color: var(--color-paper); text-decoration-color: var(--color-accent-deep); }
.band .about__mail, .band p { color: var(--color-paper); }

/* recipe page */
.rp__pic img { box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-ink) 8%, transparent); }
.rp__body li::marker { color: var(--color-accent); }
.rp__body { border-top: 1.5px solid var(--color-accent); padding-top: var(--space-md); }

.foot { border-top-color: var(--color-muted); }