/* =====================================================================
   Simply Food by Mandy · the chapter opener (chapter.css)
   The recurring layout from the book's mood board (2 Oct 2026): a full-bleed kitchen-green band, one food
   photo bleeding off a side, a white brush-script word over yellow geometric caps, and a short serif body.
   Linked only on pages that use it (page()'s css param). Uses the tokens in site.css and adds none.
   Markup (lib/chapter.js writes it):
     <section class="chapter on-kitchen chapter--photo-right [chapter--compact]">
       <div class="chapter__photo" aria-hidden="true" style="--pos:50% 50%"><picture>…</picture></div>
       <div class="chapter__text">
         <h1 class="chapter__title"><span class="script">Family</span> <span class="chapter__caps">Favourites</span></h1>
         <p class="chapter__body">…</p>
       </div>
     </section>
   The title is a heading of any level (h1 on a page of its own, h3 in a list of chapters).
   ===================================================================== */

.chapter { --ch-cap: clamp(2.25rem, 11vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr); background: var(--kitchen); color: var(--on-kitchen); }

/* the photo: 4:3 on top on a phone; from 900px it fills its half and bleeds to the viewport edge */
.chapter__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin: 0; background: var(--kitchen); }
.chapter__photo picture, .chapter__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

.chapter__text { align-self: center; min-width: 0; padding: clamp(32px, 9vw, 48px) var(--gutter) clamp(40px, 10vw, 56px); }
.chapter__eyebrow { margin-bottom: 14px; }
.chapter__eyebrow a { text-decoration: none; }
.chapter__eyebrow a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* the title: white script at the right-hand end, tipped a little, tucked into the top of the yellow caps */
.chapter .chapter__title { display: inline-grid; justify-items: start; max-width: 100%; font-size: var(--ch-cap); line-height: 1; letter-spacing: 0; text-wrap: wrap; color: var(--on-kitchen); }
.chapter__title .script { position: relative; z-index: 1; justify-self: end; margin: 0 .04em -.12em 0; font-size: .72em; line-height: 1; transform: rotate(-4deg); transform-origin: 100% 100%; }
.chapter__caps { font: 500 1em/1.04 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }   /* 10.8:1 on kitchen */

/* the body: marble serif on a narrow measure (12.1:1 on kitchen). Beats .on-kitchen p, which is the quieter grey. */
.chapter .chapter__body { max-width: 34ch; margin-top: clamp(18px, 4vw, 26px); font: 400 1rem/1.75 var(--serif, Georgia, serif); letter-spacing: .005em; color: var(--on-kitchen); }
.chapter .chapter__body + .chapter__body { margin-top: 1em; }

/* a list of chapters: one band after another, split by a faint marble hairline */
.chapter-list { list-style: none; margin: 0; padding: 0; }
.chapter-list > li + li { border-top: 1px solid rgb(248 247 244 / .16); }

/* compact: for repeated rows. Wider photo crop on a phone, smaller title, tighter padding, a slightly wider measure */
.chapter--compact { --ch-cap: clamp(1.875rem, 9vw, 2.5rem); }
.chapter--compact .chapter__photo { aspect-ratio: 16 / 10; }
.chapter--compact .chapter__text { padding-block: clamp(28px, 8vw, 40px) clamp(32px, 9vw, 48px); }
.chapter--compact .chapter__body { max-width: 42ch; margin-top: 16px; font-size: .9375rem; line-height: 1.7; }

@media (min-width: 900px) {
  /* four tracks: a gutter, the two halves of the page's .wrap, a gutter. The text half sits on the .wrap edge; the photo
     half runs through its gutter to the viewport edge. The two middle tracks are each half the .wrap's content width. */
  .chapter {
    --ch-cap: clamp(2.25rem, 4.2vw, 4rem);
    --ch-half: calc(640px - var(--gutter));
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--ch-half)) minmax(0, var(--ch-half)) minmax(var(--gutter), 1fr);
    min-height: clamp(380px, 32vw, 520px);
  }
  .chapter__photo { aspect-ratio: auto; grid-row: 1; }
  .chapter__text { grid-row: 1; padding-block: clamp(48px, 6vw, 88px); }
  .chapter--photo-right .chapter__text { grid-column: 2; padding-inline: 0 clamp(24px, 3.5vw, 56px); }
  .chapter--photo-right .chapter__photo { grid-column: 3 / 5; }
  .chapter--photo-left .chapter__photo { grid-column: 1 / 3; }
  .chapter--photo-left .chapter__text { grid-column: 3; padding-inline: clamp(24px, 3.5vw, 56px) 0; }

  .chapter--text { min-height: 0; }
  .chapter--text .chapter__text { grid-column: 2 / 4; }   /* no photo: the words take the whole wrap */

  .chapter--compact { --ch-cap: clamp(1.875rem, 3.2vw, 2.75rem); min-height: clamp(300px, 28vw, 400px); }
  .chapter--compact .chapter__photo { aspect-ratio: auto; }
  .chapter--compact .chapter__text { padding-block: clamp(32px, 4vw, 56px); }
}