/* =====================================================================
   Simply Food by Mandy · home page and recipes index (home.css)
   Owned by the home builder. Linked only from index.html and recipes.html, after site.css, so every rule here
   leans on the tokens, buttons and components in site.css and team/design-system.md. No raw hex values: a colour is a
   var(--token), and a see-through one is color-mix() over a token. Its own classes are h-* (home) and r-* (recipes
   index), so nothing here can reach a rule that pages.css or recipe.css owns.
   The reel rail (.h-reels*) moved to reels.css, because About and Work with me use it too.
   ===================================================================== */

/* ---------- Hero: her portrait in the arch (replaces the 3.3 MB video loop) ---------- */
/* In the frame she stands small, with a lot of cabinet around her, so the picture is enlarged about her face. The
   origin and the object-position are the same point (the manifest focal), so her face stays put as it scales. */
.h-hero .arch__media img { object-position: 56% 40%; transform: scale(1.32); transform-origin: 56% 40%; }
.h-hero .arch__badge { bottom: 9%; text-decoration: none; }
@media (max-width: 719px) {
  /* a 390 x 844 phone: arch, headline, lede and both buttons inside the first screen; the Instagram line moves on down */
  .h-hero { padding-bottom: clamp(40px, 8vw, 56px); }
  .h-hero .hero__grid { gap: 20px; }
  .h-hero .hero__ig { display: none; }
}

/* ---------- Section headings on the home page: the script word at the size the design system sets for a heading ---------- */
#mood-title .script, #kitchen-title .script { font-size: 1.05em; }

/* ---------- Book band: the book's own identity, a kitchen-green block ---------- */
/* .on-kitchen (site.css) does the green, the marble type and the yellow primary button. "Simply" is the script, white
   as on the cover, laid over the top of "DINNERS" in yellow Jost caps; both are real text. */
.h-book { padding-block: clamp(56px, 9vw, 112px); }
.h-book .book-band { background: none; border-radius: 0; padding: 0 var(--gutter); overflow: visible; gap: clamp(36px, 6vw, 88px); }   /* the .wrap gutter, which .book-band's own padding would replace */
.h-book__title { display: grid; justify-items: start; margin-top: clamp(26px, 4vw, 40px); line-height: .9; }
.h-book__simply { position: relative; z-index: 1; margin: 0 0 -.3em .22em; font-size: clamp(3.2rem, 10vw, 5.6rem); line-height: .9; transform: rotate(-5deg); transform-origin: 0 100%; }
.h-book__dinners { font: 500 clamp(3.1rem, 11.5vw, 6.9rem)/.9 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--yellow); }   /* 10.8:1 on kitchen */
.h-book .h-book__sub { margin-top: 20px; font: 500 clamp(.8125rem, 1.5vw, .9375rem)/1.7 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--on-kitchen); max-width: 34rem; text-wrap: balance; }
.h-book .h-book__lede { margin-top: 18px; max-width: 32rem; font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.6; }
.h-book .price { margin-top: 24px; font: 500 1.25rem/1 var(--display); color: var(--on-kitchen); }
.h-book .buy { margin-top: 18px; }
/* the cover is artwork, so the box takes its exact ratio (it is never cropped), and it is dark green on green: a hairline
   and a deeper shadow keep its edge; the spine is ink, not kitchen, so it does not vanish into the band */
.h-book .book3d { width: min(72vw, 330px); }
.h-book .book3d__obj { aspect-ratio: 1848 / 2400; transform: rotateY(calc(-10deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg)); }   /* a gentler turn than the shop's -18deg */
.h-book .book3d__face { box-shadow: 0 0 0 1px color-mix(in srgb, var(--marble) 30%, transparent), 20px 30px 46px -14px color-mix(in srgb, var(--ink) 90%, transparent); }
.h-book .book3d__spine { background: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marble) 24%, transparent); }
@media (min-width: 900px) {
  .h-book .book-band { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .h-book .book3d { width: min(30vw, 400px); }
}
/* ---------- Meet Mandy: a new portrait, and her own words from My Story ---------- */
.meet__portrait { width: min(70vw, 340px); }
.meet__portrait .arch__media img { object-position: 50% 30%; }   /* a head-to-skirt crop of her full-length portrait (source/mandy-2026-10-05) */
.meet .h-meet__text { max-width: 38rem; }   /* site.css sets the blockquote's type; the herbs field keeps clear of blockquotes */
@media (min-width: 900px) { .meet { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }

/* ---------- From my kitchen: a photo mosaic of her new food shots ---------- */
/* Phone: two columns, the first picture across both, seven in all. Tablet: four columns, two big squares among eight small
   ones. Desktop: six columns by three rows, the same two big squares among ten. Every cell is a square; the big ones
   span two by two. The pictures are fixed to their cells, so they never stretch a row. */
.h-mosaic { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.h-mosaic li { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--marble-deep); }
.h-mosaic picture, .h-mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.h-mosaic li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--rim); pointer-events: none; }
.h-mosaic li:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.h-mosaic li:nth-child(n + 8) { display: none; }
.h-kitchen__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: clamp(24px, 4vw, 40px); }
.h-kitchen { padding-bottom: clamp(40px, 6vw, 72px); }
.h-kitchen__more .btn { white-space: nowrap; }
.h-kitchen__handle { display: none; font-weight: 500; letter-spacing: .02em; }
@media (min-width: 520px) { .h-kitchen__handle { display: inline; } }
@media (min-width: 720px) {
  .h-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .h-mosaic li:nth-child(n + 8):nth-child(-n + 10) { display: block; }
  .h-mosaic li:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
  .h-mosaic li:nth-child(2) { grid-column: 3 / 5; grid-row: 3 / 5; aspect-ratio: auto; }
}
@media (min-width: 1100px) {
  .h-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .h-mosaic li:nth-child(n + 8) { display: block; }
  .h-mosaic li:nth-child(2) { grid-column: 5 / 7; grid-row: 2 / 4; }
}

/* ---------- A slim row of brands (mono logos from her wall; "nothing too fussy") ---------- */
.h-brands { padding-block: 0 clamp(24px, 4vw, 48px); }   /* the Now Cooking section after it brings its own space: a list padding, or the stage's header */
.h-brands__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-top: 18px; border-top: 1px solid var(--rim); }
.h-brands__head a { display: inline-flex; align-items: center; min-height: 44px; font: 500 .9375rem/1 var(--sans); }
.h-brands__row { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; margin-top: 4px; }
/* the logos are on white canvases: multiply makes the white vanish into the marble page */
.h-brands__row img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; mix-blend-mode: multiply; }
@media (min-width: 900px) { .h-brands__row { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px 20px; } }