/* Hatchery recipes: compositions of components. Same rule as components: tokens only.
   Panel splits use fr ratios from the allowed set (halves, quarters, eighths). */

/* Page frame for screen media */
.hx-body { margin: 0; min-height: 100vh; }
.hx-page { max-width: var(--hx-layout-page-max); margin-inline: auto; padding-inline: clamp(var(--hx-layout-margin-phone), calc(var(--hx-layout-margin-fluid) * 1%), var(--hx-layout-margin-desktop)); display: flex; flex-direction: column; gap: var(--hx-space-section); padding-block: var(--hx-space-section); }

/* ---------- Masthead: identity on one side, a running label on the other ----------
   Entered in Stage 7 after three real uses: the film title (timecode), the investor page (running head),
   and a venture site and deck (wordmark and navigation). */
.hx-masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--hx-space-gap-tight) var(--hx-space-gap); }
.hx-masthead > :last-child { margin-inline-start: auto; }

/* ---------- Columns: text or figures that sit side by side and stack on a phone ----------
   Entered in Stage 9 after more than three uses (figures, proof page, Fieldline site, grower handout). CSS can't
   read a token inside a media query, so columns stack by their minimum width instead of by breakpoint. */
.hx-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hx-layout-column-text)), 1fr)); gap: var(--hx-space-gap-loose); }
ol.hx-columns, ul.hx-columns { list-style: none; margin: 0; padding: 0; }
.hx-columns[data-min="figure"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hx-layout-column-min)), 1fr)); }

/* ---------- Recipe 1: title moment (the signature) ---------- */
.hx-title-moment { display: flex; flex-direction: column; gap: var(--hx-space-gap-loose); padding: var(--hx-space-inset-panel); }
.hx-title-moment__panels { display: flex; flex-wrap: wrap; gap: 0; }
.hx-title-moment__panels > .hx-panel { min-height: calc(var(--hx-layout-column-min) * 2); justify-content: space-between; }
.hx-title-moment__panels > [data-span="3"] { flex: 3 1 calc(var(--hx-layout-column-min) * 2); }
.hx-title-moment__panels > [data-span="2"] { flex: 2 1 calc(var(--hx-layout-column-min) * 2); }
.hx-title-moment__panels > [data-span="1"] { flex: 1 1 var(--hx-layout-column-min); }
.hx-title-moment__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--hx-space-gap); }
.hx-title-moment[data-medium="film"] { aspect-ratio: var(--hx-layout-film-aspect); padding: var(--hx-space-section) var(--hx-space-section-loose); justify-content: space-between; box-sizing: border-box; }
.hx-title-moment[data-medium="film"] .hx-title-moment__panels { flex: 1; flex-wrap: nowrap; }
.hx-title-moment[data-medium="film"] .hx-title-moment__panels > .hx-panel { min-height: 0; }
/* ---------- Recipe 2: proof block ---------- */
.hx-proof { gap: var(--hx-space-gap-loose); }
.hx-proof__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--hx-space-gap); }

/* ---------- Recipe 3: data table with commentary ---------- */
.hx-commentary { display: flex; flex-direction: column; gap: var(--hx-space-gap-loose); }
.hx-commentary__text { display: flex; flex-direction: column; gap: var(--hx-space-gap); }
.hx-commentary__aside { display: flex; flex-direction: column; gap: var(--hx-space-gap-tight); }
.hx-commentary__cols { display: flex; flex-wrap: wrap; gap: var(--hx-space-gap-loose); }
.hx-commentary__cols > :first-child { flex: 3 1 calc(var(--hx-layout-column-min) * 2); }
.hx-commentary__cols > :last-child { flex: 1 1 var(--hx-layout-column-min); }

/* ---------- Recipe 4: endorsement placements ---------- */
.hx-endorse-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--hx-space-gap); padding-block: var(--hx-space-gap); border-top: var(--hx-border-rule-width) solid var(--hx-ctx-rule); }
.hx-endorse-signoff { display: flex; flex-direction: column; gap: var(--hx-space-gap-tight); padding: var(--hx-space-inset-panel-compact); border: var(--hx-border-rule-width) solid var(--hx-ctx-rule); }
.hx-endorse-signoff .hx-endorsement { padding-top: var(--hx-space-gap-tight); border-top: var(--hx-border-rule-width) solid var(--hx-ctx-rule); }

/* ---------- Recipe 5: stage, the full-screen title moment ----------
   Entered in 1.1.0 for the Hatchery Ventures website, its first use; the owner waived the three-uses rule for it.
   A graphite section the height of the viewport: a top band (identity, with its right side kept for controls), four
   panels in doubling order filling the height between, and an empty bottom band of the same height. Panels stay
   transparent, so the graphite shows until each facet field is built; a built field fills itself in its first tone.
   A panel's surface is only for its text colour (no panel here is media; media is reserved for footage).
   Splits are halves, quarters and eighths of the row. The row holds while a quarter's content box can hold the longest
   word of its sentence ("execution", about 110 px at the statement size): a quarter of 1.125 column minimums, so the row
   holds from 4.5 column minimums (720 px at a 160 px minimum) and a quarter's padding takes the rest. Below that the basis
   term jumps past 100%: the half takes a row of its own, and the quarter and eighths share the next at a half and two
   quarters. No media query, because CSS can't read a token in one. The stage grows taller rather than clip its words.
   Even stacked, the quarter is only half the row: on the smallest phones (320 px, so a 96 px content box) the statement
   steps down to fit the longest word, which is about 4.2 em wide (4.4 leaves a little over). */
.hx-stage { --stage-wrap: calc((var(--hx-layout-column-min) * 4.5 - 100%) * 999); display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.hx-stage__band { display: flex; justify-content: space-between; align-items: center; gap: var(--hx-space-gap); min-height: var(--hx-layout-target-min); padding: var(--hx-layout-band-block) var(--hx-space-inset-panel); }
.hx-stage__panels { flex: 1 0 auto; display: flex; flex-wrap: wrap; }
.hx-stage__panels > .hx-panel { box-sizing: border-box; justify-content: flex-end; background: transparent; }
/* A panel holding words keeps its surface under the built field, unseen, so the words keep their own surface for contrast. */
.hx-stage__panels > .hx-panel:has(> .hx-stage__words):has(> hx-facet-field[data-built]) { background: var(--hx-ctx-bg); }
.hx-stage__panels > [data-split="half"] { flex: 0 0 clamp(calc(100% / 2), var(--stage-wrap), 100%); }
.hx-stage__panels > [data-split="quarter"] { flex: 0 0 clamp(calc(100% / 4), var(--stage-wrap), calc(100% / 2)); }
.hx-stage__panels > [data-split="eighth"] { flex: 0 0 clamp(calc(100% / 8), var(--stage-wrap), calc(100% / 4)); }
.hx-stage__words { display: flex; flex-direction: column; gap: var(--hx-space-gap); }
/* The statement in a quarter is capped by the quarter's own content width (100cqi): full size wherever the longest word fits. */
.hx-stage__panels > [data-split="quarter"] { container-type: inline-size; }
.hx-stage__panels > [data-split="quarter"] .hx-type-statement { --t-size: min(var(--hx-typography-statement-size), calc(100cqi / 4.4)); }

/* Print: a recipe page becomes an A4 page with print type */
@media print {
  @page { size: A4; margin: 0; }
  .hx-page { max-width: none; padding: var(--hx-layout-margin-print-block) var(--hx-layout-margin-print); gap: var(--hx-space-gap-loose); }
}