/* =====================================================================
   Simply Food by Mandy · inner-page styles (pages.css)
   Owned by the pages builder: Simply Dinners (the book), About, Work with me,
   Contact and the old shop page's redirect stub. Linked on every page straight after
   site.css, so it can lean on the tokens, buttons and components defined
   there. Do not redefine tokens here; see team/design-system.md.
   Prefixes: sd- (Simply Dinners), ab- (About), wm- (Work with me), ct- (Contact).
   ===================================================================== */

/* ---------- The cover lockup: "Simply" in the brush script over DINNERS in tracked caps ---------- */
.lockup__caps { text-transform: uppercase; letter-spacing: .07em; font-weight: 500; }
.sd-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .28em; font-size: clamp(1.75rem, 3vw, 2.1rem); line-height: 1.1; letter-spacing: 0; }
.sd-title .script { font-size: 1.3em; line-height: 1; }
.sd-title--band { margin-top: 10px; font-size: clamp(2.25rem, 4vw, 3.25rem); }

/* ---------- Simply Dinners (simply-dinners.html) ---------- */
/* Phone: cover, buy box, then her text. From 900px the cover and buy box sit beside the text, and the buy box stays in view. */
.sd-hero { padding-block: clamp(16px, 2.5vw, 36px) clamp(48px, 7vw, 96px); }
.sd-grid { display: grid; gap: clamp(28px, 5vw, 64px); }
.sd-aside { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 28px); }   /* flex, not grid: a sticky child needs the whole column as its box */
.sd-cover { display: grid; place-items: center; padding-block: 0 6px; }
.sd-cover .book3d { width: min(68vw, 290px); }
.sd-cover .book3d__obj { aspect-ratio: 1848 / 2400; transform: rotateY(calc(-9deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg)); }   /* the real cover, turned just enough to read as a book */
.sd-buy { display: grid; gap: 8px; justify-items: start; padding: clamp(20px, 3vw, 28px); border-radius: calc(var(--radius) * 1.2); background: var(--marble-deep); box-shadow: inset 0 0 0 1px var(--rim); }
.sd-sub { margin-top: 8px; max-width: 22rem; font: 500 1.0625rem/1.35 var(--display); color: var(--kitchen); }
.sd-by { font-size: 1rem; color: var(--ink-soft); }
.sd-price { margin-top: 12px; font: 500 1.5rem/1 var(--display); color: var(--kitchen); }
.sd-buy__btns { display: grid; gap: 10px; width: 100%; margin-top: 10px; }
.sd-buy__btns .btn { width: 100%; }

.sd-text { min-width: 0; max-width: 68ch; }
.sd-h2 { margin-bottom: 18px; font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
.sd-text > .sd-h2:not(:first-child) { margin-top: clamp(40px, 6vw, 72px); }
.sd-prose { display: grid; gap: 1.1em; }
/* "What's inside": five chapter openers (chapter.css), full width under the book's text, split by the faint rule in .chapter-list */
.sd-inside { padding-bottom: clamp(48px, 7vw, 96px); }
.sd-inside .sd-h2 { margin-bottom: clamp(20px, 3vw, 32px); }
.sd-facts { margin: 0; border-top: 1px solid var(--rim); }
.sd-facts > div { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); gap: 4px 16px; padding-block: 14px; border-bottom: 1px solid var(--rim); }
.sd-facts dt { align-self: center; font: 500 .75rem/1.3 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.sd-facts dd { margin: 0; font: 500 1.0625rem/1.3 var(--display); color: var(--kitchen); }

@media (min-width: 600px) and (max-width: 899px) {
  .sd-aside { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 4vw, 40px); }
  .sd-cover .book3d { width: min(100%, 290px); }
}
@media (min-width: 900px) {
  .sd-grid { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .sd-aside { align-self: stretch; }
  .sd-cover .book3d { width: min(100%, 340px, 29svh); min-width: 200px; }   /* shrinks with the window so the buy buttons stay on the first screen */
  .sd-buy { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 900px) and (max-height: 640px) { .sd-buy { position: static; } }   /* a short window has no room to pin it */

/* the five photos from the book, then the closing gift band */
.sd-strip-sec { padding-bottom: clamp(48px, 7vw, 96px); }
.sd-h2--small { margin-bottom: 0; font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.sd-strip-sec .from-book { margin-top: 18px; }
.sd-close-sec { padding-bottom: clamp(56px, 8vw, 112px); }
.sd-gift { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: calc(var(--radius) * 1.6); }
.sd-gift__photo { margin: 0; width: min(100%, 320px); aspect-ratio: 4 / 5; justify-self: center; border-radius: var(--radius); overflow: hidden; background: var(--kitchen); }
.sd-gift__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.sd-gift h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
.sd-gift h2 .script { font-size: 1.05em; }
.sd-gift p { margin-top: 14px; font-size: 1.1875rem; }
.sd-gift__btns { margin-top: 24px; }
@media (min-width: 720px) { .sd-gift { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } .sd-gift__photo { justify-self: start; } }

/* ---------- About (about.html) ---------- */
/* One grid. Column 1 is the reading column, about 66ch. From 1000px the photos hang in a right-hand rail beside the
   paragraphs they follow (--r is a photo's first row, --n how many rows it spans); below that everything is one column. */
.ab { padding-block: clamp(20px, 4vw, 56px) clamp(48px, 7vw, 96px); }
.ab-story { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.3em; justify-content: center; }
.ab-story > * { grid-column: 1; min-width: 0; margin: 0; }
.ab-title .script { font-size: 1.05em; }
.ab-portrait { justify-self: center; width: min(72vw, 300px); margin-block: 8px 14px; }
.ab-portrait .arch__media img { object-position: var(--pos); }
.ab-lede { font: 400 clamp(1.25rem, 2.2vw, 1.5rem)/1.5 var(--display); color: var(--ink); }
.ab-photo { margin-block: 8px 12px; }
.ab-photo__frame { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--marble-deep); box-shadow: inset 0 0 0 1px var(--rim); }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos); }
.ab-pull { margin-block: clamp(8px, 2vw, 24px); padding: clamp(28px, 5vw, 56px); border-radius: calc(var(--radius) * 1.4); }
.ab-pull::before { content: ""; display: block; width: 56px; height: 4px; margin-bottom: 24px; border-radius: 2px; background: var(--yellow); }   /* the cover's yellow, as a rule on green */
.ab-pull p { max-width: 28ch; font: 400 clamp(1.5rem, 3.2vw, 2.4rem)/1.25 var(--display); letter-spacing: -.01em; color: var(--on-kitchen); }
@media (min-width: 720px) {
  .ab-story { grid-template-columns: minmax(0, 66ch); justify-content: start; }
  .ab-photo__frame { aspect-ratio: 3 / 2; }                       /* a landscape crop where the photo sits in the column */
  .ab-photo img { object-position: var(--pos-wide); }
}
@media (min-width: 1000px) {
  .ab-story { grid-template-columns: minmax(0, 66ch) minmax(240px, 340px); column-gap: clamp(40px, 5vw, 80px); justify-content: space-between; }   /* both edges on the wrap, like every other section */
  .ab-story > .ab-photo, .ab-story > .ab-portrait { grid-column: 2; grid-row: var(--r) / span var(--n); align-self: start; justify-self: stretch; position: sticky; top: calc(var(--header-h) + 24px); width: auto; margin: 6px 0 0; }
  .ab-photo__frame { aspect-ratio: 4 / 5; }
  .ab-photo img { object-position: var(--pos); }
}

.ab-week-sec { padding-top: 0; }
.ab-week { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ab-week li { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 22px 12px; border-radius: calc(var(--radius) * 1.2); background: var(--marble-deep); text-align: center; font: 500 1rem/1.25 var(--sans); color: var(--ink); }
.ab-week li:nth-child(3n + 2) { background: var(--oak-tint); }
.ab-week li:nth-child(3n) { background: var(--kitchen-tint); }
.ab-week svg { width: 64px; height: 64px; color: var(--kitchen); }
@media (min-width: 720px) { .ab-week { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ab-week { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* the closing book band: kitchen green like the home page's, with the cover turned a little */
.ab-book { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 72px); border-radius: calc(var(--radius) * 1.6); overflow: hidden; }
.ab-book__sub { margin-top: 12px; font: 500 1.1875rem/1.4 var(--display); color: var(--on-kitchen); }
.ab-book__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ab-book__facts li { padding: .4rem .85rem; border-radius: 999px; background: color-mix(in srgb, var(--marble) 12%, transparent); font: 500 .875rem/1.3 var(--sans); color: var(--on-kitchen); }
.ab-book__price { margin-top: 20px; font: 500 1.25rem/1 var(--display); color: var(--on-kitchen); }
.ab-book__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ab-book .book3d { width: min(68vw, 300px); }
.ab-book .book3d__obj { aspect-ratio: 1848 / 2400; transform: rotateY(calc(-10deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg)); }
.ab-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); }
.ab-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) { .ab-book { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .ab-book .book3d { width: min(100%, 340px); } }

/* ---------- Work with me (work-with-mandy.html) ---------- */
.wm-hero { padding-block: clamp(20px, 4vw, 56px) clamp(32px, 5vw, 56px); }
.wm-hero__grid { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
.wm-hero__copy { display: grid; gap: 18px; justify-items: start; max-width: 40rem; }
.wm-hero h1 .script { font-size: 1.05em; }
.wm-hello { font: 500 clamp(1.5rem, 3vw, 2rem)/1.2 var(--display); color: var(--kitchen); }
.wm-sentence { font-size: 1.1875rem; color: var(--ink); }
.wm-cta { margin-top: 6px; }
.wm-cta--centre { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
.wm-creds { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.wm-creds li { display: grid; gap: 2px; padding: 12px 20px; border-radius: var(--radius); background: var(--marble-deep); box-shadow: inset 0 0 0 1px var(--rim); }
.wm-creds b { font: 500 1.5rem/1.1 var(--display); color: var(--kitchen); }
.wm-creds span { font-size: .9375rem; color: var(--ink-soft); }
.wm-hero__photo { margin: 0; justify-self: center; width: min(72vw, 320px); }
.wm-hero__photo .arch__media img { object-position: var(--pos); }
@media (min-width: 900px) { .wm-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); } .wm-hero__photo { width: min(100%, 380px); } }

.wm-services-sec { padding-bottom: clamp(24px, 4vw, 48px); }
.wm-services { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.wm-services li { padding: .75rem 1.3rem; border-radius: 999px; background: var(--kitchen-tint); font: 500 1.0625rem/1.2 var(--sans); color: var(--ink); }

/* the logo wall: her 23 brands, mono, unlinked. 6 columns on desktop, 4 on tablet, 3 from 360px, 2 below; equal cells,
   and the last row is centred. multiply drops each file's white ground, so they sit on the marble page. */
.wm-brands h2 { margin-bottom: clamp(20px, 3vw, 36px); font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.wm-logos { --gap: 12px; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px var(--gap); }
.wm-logos li { flex: 0 0 calc((100% - var(--gap)) / 2); display: grid; place-items: center; }
/* every file is a 360x240 canvas with at least 48px of white above and below its mark, so a 2.2:1 window shows each mark whole and keeps the cells short */
.wm-logos img { width: min(100%, 190px); height: auto; aspect-ratio: 2.2 / 1; object-fit: cover; mix-blend-mode: multiply; }   /* the files are soft above about 180px */
@media (min-width: 360px) { .wm-logos li { flex-basis: calc((100% - 2 * var(--gap)) / 3); } }
@media (min-width: 720px) { .wm-logos li { flex-basis: calc((100% - 3 * var(--gap)) / 4); } }
@media (min-width: 1000px) { .wm-logos li { flex-basis: calc((100% - 5 * var(--gap)) / 6); } }

/* ---------- Contact (contact.html) ---------- */
.ct__grid { display: grid; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .ct__grid { align-items: center; } }
.ct__intro { display: grid; gap: 18px; align-content: start; }
.ct h1 .script { font-size: 1.05em; }
.ct__side { display: grid; gap: 14px; justify-items: start; margin-top: 12px; }
.ct__socials { display: flex; flex-wrap: wrap; gap: 10px; }
.ct__socials .btn svg { width: 1.2em; height: 1.2em; }
.ct__brand { margin-top: 8px; color: var(--ink-soft); }
@media (min-width: 900px) { .ct__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }

/* ---------- Privacy: one plain column of text ---------- */
.privacy__wrap { max-width: 44rem; }
.privacy h1 { margin-top: 8px; }
.privacy h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-top: clamp(28px, 4vw, 40px); }
.privacy p { margin-top: 10px; max-width: 40rem; }
.privacy a { text-decoration: underline; text-underline-offset: 3px; }
.privacy__updated { margin-top: clamp(32px, 5vw, 48px); color: var(--ink-soft); font-size: .9375rem; }