/* gd/web/containers.css — the container system for getdown.fi door one.
   29.9: the book-page reconstruction block supersedes the legacy geometry
   below for L01–L07 and CL1/CG2; L08 copy fit remains open. Photo readings and declared adaptations
   are recorded in BOOK_PAGE_PASS_2026-09-29.md; they are not ruler measurements.
   Owner: Kaisu Koskelin. Built by Claude, 22.9.2026. Desktop placements proposed for ruling; tablet and phone
   placements are Claude's responsibility (assigned 22.9.2026).

   The book layouts are pages: fixed size, fixed aspect, type scaled with the page. A browser is neither: the
   viewport runs from ~375 px to ~1900 px wide and from portrait to wide landscape, while type moves only ~1.3×
   (the v3 clamps). So no single "web container" carries a book layout, and a stack of standard containers does
   not either. What carries them is one page grid on the full viewport width — the custom container — on which
   every lookbook layout is a placement by column: proportions relative (grid columns, image bands, negative
   space), type absolute-ish (the fluid sizes, the measure in ch). Layouts that are a whole page (01, 06) are
   stages: a full-viewport box the grid sits inside. Three breakpoints collapse the grid 12 → 6 → 4 and each
   placement states its span at each.

   Grid proportions come from the standard's page: text column one third, field two thirds, the field as three
   tiles; margin and rhythm from v3; column gap from the standard's tile gutter; measure from the type rules.

   The design canvases, in px, resolved from the clamps (draw a layout on these; the CSS below is the same grid):
     desktop 1440 × 900   margins 72 · 12 columns of 75 · gaps 36 · text column (4) 408 · field (8) 852 · centre third (5–8) 408 · centre half (4–9) 630
     tablet  1024 × 768   margins 51.2 · 6 columns of 132.3 · gaps 25.6 · text column (2) 290 · field (4) 607 · centre third (3–4) 290 · centre half (2–5) 606
     phone    390 × 844   margins 20 ·  4 columns of 78.5 · gaps 12 · one column of 350; the 03 band, the case stills and the case-grid frames keep two across
   A section's height is its content; a stage (items 01, 06) is one full screen. A page is a stack of sections, each on this grid.
   The pages are drawn on all three canvases in gd/web/layouts/, every prose slot at its budgeted length (measure.json).
*/

:root {
  --gd-cols: 12;
  --gd-gutter: clamp(20px, 5vw, 72px);           /* v3 --gut: the page margin */
  --gd-gap: clamp(12px, 2.5vw, 36px);            /* the column gap: the standard's tile gutter, 32 pt on an 842 pt page (3.8%) → 2.5vw, 36 px at 1440 */
  --gd-section: clamp(96px, 16vh, 220px);        /* v3 section rhythm */
  --gd-measure: 60ch;                            /* body measure, the type rules */
  --gd-measure-lede: 20ch;
  --gd-measure-display: 16ch;
  --gd-page-max: 1800px;                         /* beyond this the grid stops growing; the standard's proportion holds */
  --gd-hair: 1px;
  --gd-hair-ink: 0.12;                           /* v3 hairlines, ink at 12–22% */
  --gd-hair-ink-strong: 0.22;
  /* the site's two colours, from the master through build.py → theme.palette.json → the WordPress presets; the
     fallbacks are the declared dead codes and hold only until colours.json carries the two readings (slugs paper, black) */
  --gd-paper: var(--wp--preset--color--paper, #fff);
  --gd-black: var(--wp--preset--color--black, #000);
}

/* BOOK PAGE PASS · 29.9.2026
   Source: gd/website/book-ratios.json @ 75f0636, photo estimates ±10%.
   Horizontal coordinates are rounded to 1/120 page-width modules; vertical
   coordinates snap to the preview's 19px baseline. No saved content is changed.
   Purchased Light is installed. Body 14/19 and narrow-tablet 12/16 remain tunable.
   Phone keeps its existing stack. No measurements are invented for L04/CL1/CG2.
*/
@media (min-width: 601px) {
  .gd-section.gd-l01,
  .gd-section.gd-l06,
  .gd-section.gd-l07 {
    container-type: inline-size;
    --book-w: min(100cqw, 1800px);
    --book-m: calc(var(--book-w) / 120);
    --book-line: 19px;
    padding: 0;
  }
  .gd-section.gd-l01 > .gd-page,
  .gd-section.gd-l06 > .gd-page,
  .gd-section.gd-l07 > .gd-page {
    width: 100%; max-width: 1800px; padding: 0; margin: 0 auto;
    position: relative; display: block;
  }
  /* L01: the small sentence lives on the right of a black spread.
     Navigation follows the spread. Its copy has no measured book coordinates. */
  .gd-section.gd-l01 { --book-h: calc(var(--book-w) / 1.45); }
  .gd-section.gd-l01 .gd-entry {
    display: block; position: relative; height: var(--book-h); min-height: 0;
  }
  .gd-section.gd-l01 .gd-hero-line {
    position: absolute; left: calc(62 * var(--book-m));
    top: round(nearest, calc(var(--book-h) * .10), var(--book-line));
    width: calc(36 * var(--book-m)); display: block;
  }
  .gd-section.gd-l01 .gd-hero-title {
    /* The source specifies cap height, not em size. Licensed Book: 725/1000. */
    font-size: round(nearest, calc(var(--book-h) * .025 / .725), 1px);
    line-height: round(nearest, calc(var(--book-h) * .09), var(--book-line));
    font-weight: 350; letter-spacing: 0; width: 4.5ch; white-space: normal;
  }
  .gd-section.gd-l01 .gd-phone-line { display: block; }
  .gd-section.gd-l01 .gd-enter { margin-top: var(--book-line); text-align: left; }
  .gd-section.gd-l01 .gd-hero-statement {
    position: absolute; left: calc(62 * var(--book-m));
    top: round(nearest, calc(var(--book-h) * .65), var(--book-line));
    width: calc(36 * var(--book-m)); margin: 0 !important;
  }
  .gd-section.gd-l01 .gd-front-lists {
    display: block; padding: calc(4 * var(--book-line)) calc(10 * var(--book-m));
    margin: 0; min-height: calc(12 * var(--book-line));
  }
  .gd-section.gd-l01 .gd-front-list li { margin-bottom: var(--book-line); }

  /* L06: text on a preceding page, then one image nearly filling its own page.
     The image fractions are the photo reading. Text is the owner's 52% reading
     column with 24% margins; its vertical placement is declared preview geometry. */
  .gd-section.gd-l06 { --book-h: calc(var(--book-w) / .75); }
  .gd-section.gd-l06 > .gd-page { height: calc(2 * var(--book-h)); }
  .gd-section.gd-l06 .gd-card-title,
  .gd-section.gd-l06 .gd-text,
  .gd-section.gd-l06 .gd-invite,
  .gd-section.gd-l06 .gd-cta {
    position: absolute; left: calc(29 * var(--book-m));
    width: calc(62 * var(--book-m)); margin: 0 !important;
  }
  .gd-section.gd-l06 .gd-card-title {
    top: round(nearest, calc(var(--book-h) * .24), var(--book-line));
    font: 350 14px/19px "Suisse Intl", sans-serif; letter-spacing: 0;
  }
  .gd-section.gd-l06 .gd-text {
    top: round(nearest, calc(var(--book-h) * .29), var(--book-line));
    columns: 2; column-gap: calc(2 * var(--book-m));
  }
  .gd-section.gd-l06 .gd-invite { top: round(nearest, calc(var(--book-h) * .64), var(--book-line)); }
  .gd-section.gd-l06 .gd-cta { top: round(nearest, calc(var(--book-h) * .70), var(--book-line)); }
  .gd-section.gd-l06 .gd-card-media {
    position: absolute; left: calc(3 * var(--book-m)); width: calc(109 * var(--book-m));
    top: calc(var(--book-h) + round(nearest, calc(var(--book-h) * .025), var(--book-line)));
    height: round(nearest, calc(var(--book-h) * .93), var(--book-line));
    aspect-ratio: auto; outline: none; background: transparent;
  }

  /* L07: two physical prints, small title between them, corner prose. */
  .gd-section.gd-l07 { --book-h: calc(var(--book-w) / .71); }
  .gd-section.gd-l07 > .gd-page { height: var(--book-h); }
  .gd-section.gd-l07 .gd-print-stack { display: contents; }
  .gd-section.gd-l07 .gd-page > .gd-copy-desktop {
    position: absolute; left: calc(7 * var(--book-m)); width: calc(26 * var(--book-m));
    top: round(nearest, calc(var(--book-h) * .03), var(--book-line));
  }
  .gd-section.gd-l07 .gd-print {
    position: absolute; width: calc(59 * var(--book-m));
    padding: calc(59 * var(--book-m) * .045); margin: 0;
    background: var(--gd-paper); outline: none; aspect-ratio: auto;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
  }
  .gd-section.gd-l07 .gd-print img { object-fit: contain; }
  .gd-section.gd-l07 .gd-print-first {
    left: calc(35 * var(--book-m));
    top: round(nearest, calc(var(--book-h) * .165), var(--book-line));
    height: round(nearest, calc(var(--book-h) * .26), var(--book-line));
  }
  .gd-section.gd-l07 .gd-print-second {
    left: calc(32 * var(--book-m));
    top: round(nearest, calc(var(--book-h) * .51), var(--book-line));
    height: round(nearest, calc(var(--book-h) * .30), var(--book-line));
  }
  .gd-section.gd-l07 .gd-h1 {
    position: absolute; left: calc(48 * var(--book-m)); width: calc(29 * var(--book-m));
    top: round(nearest, calc(var(--book-h) * .45), var(--book-line));
    margin: 0; font: 350 18px/19px "Suisse Intl", sans-serif; letter-spacing: 0;
  }
}

/* Remove the oversized presentation-heading treatment from the brand statement.
   It remains an ordinary editable paragraph in the page, including on phones. */
.gd-section.gd-l08 .gd-h2 .gd-lede {
  font: 300 14px/19px "Suisse Intl", sans-serif; letter-spacing: 0;
  overflow-wrap: normal; hyphens: none;
}
/* A narrow tablet still uses the page composition. The declared 12/16 fixture
   keeps its two-column prose clear of the invitation without moving the image. */
@media (min-width: 601px) and (max-width: 767px) {
  .gd-section.gd-l06 { --book-line: 16px; }
  .gd-section.gd-l06 .gd-body { font-size: 12px; line-height: 16px; }
  .gd-section.gd-l06 .gd-card-title { font-size: 12px; line-height: 16px; }
}
body { background: var(--gd-paper); color: var(--gd-black); }

/* ---- the custom container: a 12-column page grid on the full width ------------------------------------ */
.gd-page {
  display: grid;
  grid-template-columns: repeat(var(--gd-cols), minmax(0, 1fr));
  column-gap: var(--gd-gap);
  padding-inline: var(--gd-gutter);
  max-width: var(--gd-page-max);
  margin-inline: auto;
  box-sizing: border-box;
}
.gd-page > * { min-width: 0; }
.gd-page + .gd-page { margin-top: var(--gd-section); }

/* a stage: a layout that is a whole page (items 01, 06) — full viewport height, the grid inside it */
.gd-stage {
  min-height: 100svh;
  display: grid;
  align-content: center;
}
.gd-stage--dark { background: var(--gd-black); color: var(--gd-paper); }

/* text keeps its measure inside any cell */
.gd-page p, .gd-page li, .gd-body { max-width: var(--gd-measure); }
.gd-lede { max-width: var(--gd-measure-lede); }
.gd-display { max-width: var(--gd-measure-display); }

/* hairlines */
.gd-rule { height: var(--gd-hair); background: currentColor; opacity: var(--gd-hair-ink); grid-column: 1 / -1; }
.gd-frame { outline: var(--gd-hair) solid currentColor; outline-offset: calc(-1 * var(--gd-hair)); opacity: 1; }
.gd-frame > img, .gd-frame > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* named spans on the 12-column grid; each layout below is a set of these */
.gd-c1-12 { grid-column: 1 / -1; }
.gd-c1-4  { grid-column: 1 / span 4; }     /* the text column: one third, as in the standard */
.gd-c5-12 { grid-column: 5 / -1; }         /* the field: two thirds */
.gd-c1-6  { grid-column: 1 / span 6; }
.gd-c7-12 { grid-column: 7 / span 6; }
.gd-c5-8  { grid-column: 5 / span 4; }     /* the centre third */
.gd-c9-12 { grid-column: 9 / span 4; }
.gd-c4-9  { grid-column: 4 / span 6; }     /* the centre half */
.gd-c1-3  { grid-column: 1 / span 3; }
.gd-c4-6  { grid-column: 4 / span 3; }
.gd-c7-9  { grid-column: 7 / span 3; }
.gd-c10-12{ grid-column: 10 / span 3; }

/* ---- item 01 — the black spread: one sentence across the width, two lines ---------------------------------- */
.gd-l01 { }
.gd-l01 .gd-display { grid-column: 1 / -1; }
/* the door word ("Jatketaan", the post-it's Enter / SISÄÄN): a link, and it reads as one by the three marks every
   link on the site carries and nothing else does — the machine voice (Suisse Intl Mono, the ruling for the Vimeo
   link), the arrow glyph, the hairline under it at 22% ink that goes to full ink on hover and focus. It sits at
   the end of the sentence's last line, body size, not display size; the target is the whole word plus padding
   (≥ 44 px tall), and it goes to the next section (an anchor), which is also where scrolling goes. */
.gd-door { font-family: var(--gd-font-mono, 'Suisse Intl Mono', monospace); font-size: var(--gd-body, 1rem); font-weight: 400;
           text-decoration: none; color: inherit; display: inline-block; padding-block: .6em; margin-block: -.6em;
           border-bottom: var(--gd-hair) solid; border-color: rgb(from currentColor r g b / var(--gd-hair-ink-strong)); }
.gd-door::after { content: " \2192"; }   /* → */
.gd-door:hover, .gd-door:focus-visible { border-color: currentColor; outline: none; }
.gd-l01 .gd-display { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1em; max-width: none; }
.gd-l01 .gd-door { margin-top: 0; }   /* the FI sentence is 16 characters: at 8.4vw it is one line across the width and the door sits on its baseline at the line's end; on the phone the sentence wraps and the door drops under it, right */
/* "across the width" is the invariant: the EN sentence is two lines at the display size, the FI sentence one line;
   on the phone the sentence wraps at its own size (the 600 px block below) */

/* ---- item 02 — a vertical strip of frames in the centre third, text in the thirds beside ------------------ */
.gd-l02 .gd-strip { grid-column: 5 / span 4; display: grid; row-gap: calc(var(--gd-gap) / 3); }
.gd-l02 .gd-strip .gd-frame { aspect-ratio: 4 / 3; }        /* the book's frames are 4:3; a 16:9 still sits inside one */
.gd-l02 .gd-text-left  { grid-column: 1 / span 4; }
.gd-l02 .gd-text-right { grid-column: 9 / span 4; }

/* ---- item 03 — text above, a full-width band of frames, captions in narrow columns below ------------------ */
.gd-l03 { --gd-band-cols: 4; --gd-caption-cols: 4; }   /* the methods page sets 3 and 3: six frames and six captions of ~70 words, three across — a sixth of the width is 11ch at body size (measured 22.9.2026) */
.gd-l03 .gd-text  { grid-column: 1 / span 8; }
.gd-l03 .gd-band  { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--gd-band-cols), minmax(0, 1fr)); gap: calc(var(--gd-gap) / 3); }
.gd-l03 .gd-band .gd-frame { aspect-ratio: 16 / 9; }
.gd-l03 .gd-captions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--gd-caption-cols), minmax(0, 1fr)); column-gap: var(--gd-gap); }
.gd-l03 .gd-captions > * { max-width: none; }

/* ---- items 04 and 05 — the description layout: prose in two columns, a rule, a numbered glossary ----------- */
.gd-l05 .gd-prose { grid-column: 1 / -1; columns: 2; column-gap: var(--gd-gap); }
.gd-l05 .gd-prose > * { max-width: none; break-inside: avoid; }
.gd-l05 .gd-glossary { grid-column: 1 / -1; columns: 2; column-gap: var(--gd-gap); list-style: none; padding: 0; margin: 0; counter-reset: gd-gl; }
.gd-l05 .gd-glossary > li { counter-increment: gd-gl; display: grid; grid-template-columns: 2.5em 1fr; break-inside: avoid; max-width: none; }
.gd-l05 .gd-glossary > li::before { content: counter(gd-gl, decimal-leading-zero); }   /* hanging numbers, as in the textbook */
.gd-l04 .gd-lede  { grid-column: 1 / span 6; }               /* item 04 as read: "actually a dense grid → not text" */
.gd-l04 .gd-cells { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--gd-gap) / 3); grid-auto-flow: dense; }
.gd-l04 .gd-cell  { min-height: 44px; aspect-ratio: 1 / .55; display: grid; align-content: space-between; padding: .5em; outline: var(--gd-hair) solid currentColor; outline-offset: calc(-1 * var(--gd-hair)); }
.gd-l04 .gd-cell--img { grid-row: span 2; aspect-ratio: auto; }   /* an image holder among the cells, two rows tall */
.gd-l04 .gd-cell > .gd-door { justify-self: start; }              /* every cell is a link: the three marks, nothing else */

/* ---- item 06 — one visual element under a short text; the element takes the page ------------------------- */
.gd-l06 .gd-text  { grid-column: 1 / span 8; columns: 2; column-gap: var(--gd-gap); }   /* the text band above the element: two columns of the text width, so 250 Finnish words are 25 lines, not 50 */
.gd-l06 .gd-text > * { max-width: none; break-inside: avoid; }
.gd-l06 .gd-frame { grid-column: 1 / -1; aspect-ratio: 3 / 2; }

/* ---- item 07 — two prints stacked, the heading between, the body in the corner --------------------------- */
.gd-l07 .gd-body   { grid-column: 1 / span 3; }
.gd-l07 .gd-print  { grid-column: 4 / span 6; aspect-ratio: 3 / 2; }
.gd-l07 .gd-h1     { grid-column: 4 / span 6; }
.gd-l07 .gd-print  { box-shadow: 0 1px 2px rgba(0,0,0,.06); }   /* "a whisper of shadow": one value, not a style */

/* ---- item 08 — the gallery wall as a band: heading above, lower ranks and body below --------------------- */
.gd-l08 .gd-h1   { grid-column: 1 / -1; }
.gd-l08 .gd-band { grid-column: 1 / -1; aspect-ratio: 3 / 2; margin-right: calc(-1 * var(--gd-gutter)); }   /* the reference band is 3:2 and runs off the right edge */
.gd-l08 .gd-band { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.gd-l08 .gd-h2   { grid-column: 1 / span 3; }
.gd-l08 .gd-body { grid-column: 4 / span 5; }   /* lower ranks and body side by side under the band, as the post-its sit */

/* ---- the values page (the standard's colour page): text in the third, three tiles in the field ------------ */
.gd-values .gd-text  { grid-column: 1 / span 4; }
.gd-values .gd-tiles { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gd-gap); row-gap: var(--gd-section); }
.gd-values .gd-tile  { aspect-ratio: 3 / 4; }   /* the standard's tile, 109 × 145 pt */
.gd-values .gd-rows  { display: grid; grid-template-columns: auto 1fr; column-gap: 1em; }
.gd-values .gd-rows > dd { text-align: right; margin: 0; }

/* ---- case layout 1 — a 4×3 grid of stills, headline in the top whitespace, captions in three columns ------ */
.gd-case1 .gd-h1    { grid-column: 1 / -1; }
.gd-case1 .gd-grid  { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--gd-gap) / 3); margin-left: calc(-1 * var(--gd-gutter)); }   /* the stills run off the left edge, as the reference */
.gd-case1 .gd-grid .gd-frame { aspect-ratio: 16 / 9; }
.gd-case1 .gd-link  { grid-column: 1 / -1; }   /* the vimeo link, Mono, under the grid */
.gd-case1 .gd-captions { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gd-gap); }   /* the captions start under the second still */

/* ---- case grid 2 — text in the third, dark frames in two columns in the field ----------------------------- */
.gd-case2 .gd-text   { grid-column: 1 / span 4; }
.gd-case2 .gd-frames { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gd-gap) / 3); }
.gd-case2 .gd-frames .gd-frame { aspect-ratio: 4 / 3; }

/* ---- breakpoints: the grid collapses 12 → 6 → 4; every placement restates its span ------------------------
   Tablet keeps the standard's proportion on six columns: text column 1–2 (a third), field 3–6 (two thirds), centre
   third 3–4, centre half 2–5. The phone stacks, with three exceptions that keep a grid because the reference is a
   grid: the 03 band (2 across), the case stills (2 across), the case-grid frames (2 across). */
@media (max-width: 1024px) {
  :root { --gd-cols: 6; }
  .gd-c1-4  { grid-column: 1 / span 2; }
  .gd-c5-12 { grid-column: 3 / -1; }
  .gd-c1-6  { grid-column: 1 / span 3; }
  .gd-c7-12 { grid-column: 4 / span 3; }
  .gd-c5-8  { grid-column: 3 / span 2; }
  .gd-c9-12 { grid-column: 5 / span 2; }
  .gd-c4-9  { grid-column: 2 / span 4; }
  .gd-c1-3, .gd-c4-6   { grid-column: 1 / span 3; }
  .gd-c7-9, .gd-c10-12 { grid-column: 4 / span 3; }
  .gd-l02 .gd-strip      { grid-column: 3 / span 2; }
  .gd-l02 .gd-text-left  { grid-column: 1 / span 2; }
  .gd-l02 .gd-text-right { grid-column: 5 / span 2; }
  .gd-l03 .gd-text { grid-column: 1 / -1; }
  .gd-l03 { --gd-band-cols: 3; --gd-caption-cols: 3; }
  .gd-l04 .gd-lede  { grid-column: 1 / span 4; }
  .gd-l04 .gd-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gd-l06 .gd-text { grid-column: 1 / -1; }
  .gd-l07 .gd-body  { grid-column: 1 / span 2; }
  .gd-l07 .gd-print, .gd-l07 .gd-h1 { grid-column: 3 / span 3; }
  .gd-l08 .gd-h2   { grid-column: 1 / span 2; }
  .gd-l08 .gd-body { grid-column: 3 / -1; }
  .gd-values .gd-text  { grid-column: 1 / span 2; }
  .gd-values .gd-tiles { grid-column: 3 / -1; }
  .gd-case1 .gd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-case1 .gd-captions { grid-column: 2 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-case2 .gd-text   { grid-column: 1 / span 2; }
  .gd-case2 .gd-frames { grid-column: 3 / -1; }
}
@media (max-width: 600px) {
  :root { --gd-cols: 4; }
  .gd-c1-4, .gd-c5-12, .gd-c1-6, .gd-c7-12, .gd-c5-8, .gd-c9-12, .gd-c4-9,
  .gd-c1-3, .gd-c4-6, .gd-c7-9, .gd-c10-12 { grid-column: 1 / -1; }
  .gd-l01 .gd-display { font-size: clamp(40px, 11vw, 48px); max-width: none; }   /* the sentence stays the loud object: two lines across the width */
  .gd-l02 .gd-strip, .gd-l02 .gd-text-left, .gd-l02 .gd-text-right { grid-column: 1 / -1; }
  .gd-l02 .gd-strip { order: 2; }   /* text above, the strip below; each frame a full-width destination */
  .gd-l03 { --gd-band-cols: 2; --gd-caption-cols: 1; }
  .gd-l04 .gd-lede  { grid-column: 1 / -1; }
  .gd-l04 .gd-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-l05 .gd-prose, .gd-l05 .gd-glossary { columns: 1; }
  .gd-l06 .gd-text { grid-column: 1 / -1; columns: 1; }
  .gd-l06 .gd-frame { aspect-ratio: auto; height: 70svh; }   /* the element takes the screen: an image crops, a video keeps 16:9 inside it */
  .gd-l07 .gd-body, .gd-l07 .gd-print, .gd-l07 .gd-h1 { grid-column: 1 / -1; }
  .gd-l08 .gd-band { margin-inline: calc(-1 * var(--gd-gutter)); }   /* full bleed */
  .gd-l08 .gd-h2, .gd-l08 .gd-body { grid-column: 1 / -1; }
  .gd-values .gd-text, .gd-values .gd-tiles { grid-column: 1 / -1; }
  .gd-values .gd-tiles { grid-template-columns: 1fr; row-gap: var(--gd-gutter); }
  .gd-case1 .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: calc(-1 * var(--gd-gutter)); }
  .gd-case1 .gd-captions { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .gd-case2 .gd-text, .gd-case2 .gd-frames { grid-column: 1 / -1; }
  .gd-case2 .gd-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* BOOK PAGE PASS 2 · sources: gd/website/book-ratios.json @ 0210605.
   Desktop is a page, not a screen. Most coordinates use 120 width modules;
   photographed frame gaps retain their finer fractional modules.
   Tablet/phone retain a reading flow; the page composition begins at 1025px.
   Fixed unused grid slots remain empty, rather than stretching fewer images.
   Owner's two pairings reduce L02 to seven entries; all nine case links remain.
*/
.gd-section:is(.gd-l02,.gd-l03,.gd-l04,.gd-l05,.gd-case1,.gd-case2) :is(.gd-heading,.gd-minor-heading,.gd-gloss-title) {
  font: 350 14px/19px "Suisse Intl", sans-serif; letter-spacing: 0;
}
.gd-section:is(.gd-l02,.gd-l03,.gd-l04,.gd-l05,.gd-case1,.gd-case2) .gd-prose-slot strong {
  font-weight: inherit;
}
.gd-section.gd-l02 .gd-strip .gd-frame { aspect-ratio: 1.85; }
.gd-section.gd-l02 .gd-case-tile .gd-tile-name { top: calc(100cqw / 1.85 / 2); }
.gd-section.gd-l02 .gd-pair-name { pointer-events: auto; border-bottom: none; }
.gd-section.gd-l02 .gd-pair-name::after { content: none; }
.gd-section.gd-l02 .gd-pair-name a { display: inline; height: auto; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.gd-section.gd-l02 .gd-pair-name a::after { content: ' →'; }
.gd-section.gd-l03 .gd-method-caption .gd-caption,
.gd-section.gd-case1 .gd-captions .gd-prose-slot {
  font: 300 12px/16px "Suisse Intl", sans-serif; letter-spacing: 0;
}
.gd-case-artifacts { font: 400 11px/17px "Suisse Intl Mono", monospace; margin-top: 19px; overflow-wrap: anywhere; }
.gd-case-artifacts a { font: inherit; }
@media (min-width: 1025px) {
  .gd-section:is(.gd-l02,.gd-l03,.gd-l04,.gd-l05,.gd-case1,.gd-case2) {
    container-type: inline-size; padding: 0;
    --book-w: min(100cqw, 1800px);
    --book-m: calc(var(--book-w) / 120);
    --book-line: 19px;
  }
  .gd-section:is(.gd-l02,.gd-l03,.gd-l04,.gd-l05,.gd-case1,.gd-case2) > .gd-page {
    width: 100%; max-width: 1800px; height: var(--book-h);
    position: relative; display: block; padding: 0; margin: 0 auto;
  }
  .gd-section:is(.gd-l02,.gd-l03) { --book-h: calc(var(--book-w) / .75); }
  .gd-section.gd-l04 { --book-h: calc(var(--book-w) / .70); }
  .gd-section.gd-l05 { --book-h: calc(var(--book-w) / .72); }
  .gd-section:is(.gd-case1,.gd-case2) { --book-h: calc(var(--book-w) / .80); }

  /* L02: seven measured title frames; two pairs preserve all nine destinations.
     The existing case summaries become small credits inside their black frame.
     This is the owner's white-on-black credit direction; case images stay editable. */
  .gd-section.gd-l02 > .gd-page { height: var(--book-h); }
  .gd-section.gd-l02 > .gd-page:has(.gd-case-tile:nth-child(8)) { height: calc(2 * var(--book-h)); }
  .gd-section.gd-l02 .gd-text-left {
    position: absolute; left: calc(10 * var(--book-m)); width: calc(29 * var(--book-m));
    top: round(nearest, calc(var(--book-h) * .07), var(--book-line));
  }
  .gd-section.gd-l02 .gd-text-right {
    position: absolute; left: calc(82 * var(--book-m)); width: calc(29 * var(--book-m));
    top: round(nearest, calc(var(--book-h) * .03), var(--book-line)); padding: 0;
  }
  .gd-section.gd-l02 .gd-strip {
    position: absolute; left: calc(41 * var(--book-m)); width: calc(38 * var(--book-m));
    top: calc(var(--book-h) * .02); display: grid;
    row-gap: calc(var(--book-h) * .005);
  }
  .gd-section.gd-l02 .gd-case-tile { aspect-ratio: 1.85; }
  .gd-section.gd-l02 .gd-case-tile:nth-child(8) {
    margin-top: calc(var(--book-h) - 7 * (38 * var(--book-m) / 1.85) - 7 * var(--book-h) * .005);
  }
  .gd-section.gd-l02 .gd-case-tile .gd-frame {
    background: var(--gd-black); outline: none; width: 100%; height: 100%;
  }
  .gd-section.gd-l02 .gd-case-tile .gd-frame img { opacity: 0; }
  .gd-section.gd-l02 .gd-case-tile .gd-tile-name {
    top: 32%; background: none; padding: 0; font-size: 12px; line-height: 16px;
  }
  .gd-section.gd-l02 .gd-case-tile .gd-caption {
    position: absolute; top: 48%; left: 10%; width: 80%; padding: 0;
    color: var(--gd-ink-on-black); font: 300 11px/15px "Suisse Intl", sans-serif;
    text-align: center; pointer-events: none;
  }
  .gd-section.gd-l02 .gd-work-copy + .gd-work-copy { margin-top: 38px; }
  .gd-section.gd-l02 .gd-work-copy :is(.gd-heading,.gd-minor-heading) { margin-bottom: 19px !important; }

  /* L03: two text columns, a 4 x 2 band, then six caption columns.
     Six existing method frames occupy six of the eight measured slots. */
  .gd-section.gd-l03 :is(.gd-intro-a,.gd-intro-b) {
    position: absolute; top: round(nearest, calc(var(--book-h) * .04), var(--book-line));
    width: calc(30 * var(--book-m)); padding: 0;
  }
  .gd-section.gd-l03 .gd-intro-a { left: calc(4 * var(--book-m)); }
  .gd-section.gd-l03 .gd-intro-b { left: calc(36 * var(--book-m)); }
  .gd-section.gd-l03 :is(.gd-heading,.gd-minor-heading) { margin-bottom: 19px !important; }
  .gd-section.gd-l03 .gd-methods-forms {
    position: absolute; left: calc(36 * var(--book-m)); width: calc(30 * var(--book-m));
    top: round(nearest, calc(var(--book-h) * .24), var(--book-line)); margin: 0; max-width: none;
  }
  .gd-section.gd-l03 .gd-band {
    position: absolute; left: 0; top: calc(var(--book-h) * .39); width: 100%; margin: 0;
    grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: 0;
    row-gap: calc(var(--book-h) * .005);
  }
  .gd-section.gd-l03 .gd-band .gd-frame { aspect-ratio: 1.78; outline: none; }
  .gd-section.gd-l03 .gd-method-tile .gd-frame { background: var(--gd-black); }
  .gd-section.gd-l03 .gd-method-tile img { opacity: 0; }
  .gd-section.gd-l03 .gd-method-tile .gd-tile-name {
    top: 50%; bottom: auto; left: 50%; transform: translate(-50%,-50%);
    width: max-content; max-width: 90%; background: none; padding: 0;
    text-align: center; font-size: 12px; line-height: 16px;
  }
  .gd-section.gd-l03 .gd-captions {
    position: absolute; left: calc(2 * var(--book-m)); top: calc(var(--book-h) * .75);
    width: calc(116 * var(--book-m)); margin: 0;
    grid-template-columns: repeat(6,minmax(0,1fr)); gap: calc(var(--book-m));
  }
  .gd-section.gd-l03 .gd-caption-heading { font-size: 11px; line-height: 15px; }
  .gd-section.gd-l03 .gd-method-caption .gd-caption { font-size: 11px; line-height: 15px; }

  /* L05: the empty prose position stays empty after the owner's deletions. */
  .gd-section.gd-l05 .gd-centered {
    position: absolute; left: calc(31 * var(--book-m)); width: calc(48 * var(--book-m));
    top: round(nearest, calc(var(--book-h) * .03), var(--book-line)); margin: 0 !important;
  }
  .gd-section.gd-l05 .wp-block-separator.gd-rule {
    position: absolute; left: calc(2 * var(--book-m)); width: calc(94 * var(--book-m));
    top: calc(var(--book-h) * .345); margin: 0 !important;
  }
  .gd-section.gd-l05 .gd-glossary {
    position: absolute; left: calc(2 * var(--book-m)); width: calc(96 * var(--book-m));
    top: calc(var(--book-h) * .36); columns: 2; column-gap: calc(3 * var(--book-m));
  }
  .gd-section.gd-l05 .gd-gloss-entry { grid-template-columns: calc(3 * var(--book-m)) 1fr; padding-bottom: 19px; }
  .gd-section.gd-l05 .gd-gloss-title { margin-bottom: 0 !important; }

  /* L04: owner's dense cell-grid adaptation, not the photographed prose page.
     The cell field is a declared placement inside the reference's 4% margins. */
  .gd-section.gd-l04 .gd-centered {
    position: absolute; left: calc(70 * var(--book-m)); width: calc(34 * var(--book-m));
    top: calc(var(--book-h) * .06); margin: 0 !important;
  }
  .gd-section.gd-l04 .gd-lede {
    position: absolute; left: calc(5 * var(--book-m)); width: calc(55 * var(--book-m));
    top: calc(var(--book-h) * .13); font: 300 14px/19px "Suisse Intl",sans-serif;
  }
  .gd-section.gd-l04 .gd-cells {
    position: absolute; left: calc(5 * var(--book-m)); width: calc(110 * var(--book-m));
    top: calc(var(--book-h) * .25); margin: 0;
    grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--book-m);
    grid-auto-rows: calc((110 * var(--book-m) - 5 * var(--book-m)) / 6 * .55);
  }
  .gd-section.gd-l04 .gd-cell { aspect-ratio: auto; min-height: 0; font-size: 11px; line-height: 15px; }

  /* CL1: headline occupies the owner's annotated top whitespace. */
  .gd-section.gd-case1 .gd-h1 {
    position: absolute; left: calc(2 * var(--book-m)); width: calc(116 * var(--book-m));
    top: calc(var(--book-h) * .08); margin: 0; font-size: 18px; line-height: 24px;
  }
  .gd-section.gd-case1 .gd-grid {
    position: absolute; left: calc(2 * var(--book-m)); top: calc(var(--book-h) * .25);
    width: calc(116 * var(--book-m)); margin: 0;
    grid-template-columns: repeat(4,minmax(0,1fr)); gap: calc(1.44 * var(--book-m));
  }
  .gd-section.gd-case1 .gd-grid .gd-frame { aspect-ratio: 1.76; outline: none; }
  .gd-section.gd-case1 .gd-page > .gd-link {
    position: absolute; left: calc(2 * var(--book-m)); top: calc(var(--book-h) * .62); margin: 0;
  }
  .gd-section.gd-case1 .gd-captions {
    position: absolute; left: calc(32 * var(--book-m)); top: calc(var(--book-h) * .73);
    width: calc(79 * var(--book-m)); columns: 4; column-gap: calc(2 * var(--book-m));
  }
  .gd-section.gd-case1 .gd-captions :is(.gd-prose-slot,.gd-caption) { font-size: 11px; line-height: 15px; }
  .gd-section.gd-case1 .gd-captions :is(.gd-case-back,.gd-case-credits) { margin-top: 15px; font-size: 11px; line-height: 15px; }

  /* CG2: fixed two-column image field; the unfilled rows retain their void. */
  .gd-section.gd-case2 .gd-text {
    position: absolute; left: calc(16 * var(--book-m)); top: calc(var(--book-h) * .03);
    width: calc(36 * var(--book-m));
  }
  .gd-section.gd-case2 .gd-frames {
    position: absolute; left: calc(61 * var(--book-m)); top: calc(var(--book-h) * .013);
    width: calc(58 * var(--book-m));
    grid-template-columns: repeat(2,minmax(0,1fr)); gap: calc(1.2 * var(--book-m));
  }
  .gd-section.gd-case2 .gd-frames .gd-frame { aspect-ratio: 1.35; outline: none; }
  .gd-section.gd-case2 .gd-heading { margin-bottom: 19px; }
  .gd-section.gd-case2 .gd-case-credits { margin-top: 19px; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .gd-section.gd-l03 :is(.gd-intro-a,.gd-intro-b,.gd-methods-forms) .gd-body,
  .gd-section.gd-l03 .gd-methods-forms { font-size: 12px; line-height: 16px; }
}