/* The catalogue (25 October 2026): the five case files as a book. It arrives with its cover ajar, turns to face the
   reader and opens as they scroll the masthead, then stays beside the files and turns a page for each: the photograph on
   the right develops, the figure on the left is inked. On a phone it opens in the masthead and each file shows its own
   print. CSS 3D, no WebGL: the cover is the photographed cloth with live type, the pages are live text and real photos.
   Driven by assets/catalogue.js; without it the book stands closed. Loaded after home-hybrid.css, on direct.html only. */

.cat-grid { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); column-gap: clamp(24px, 3vw, 48px);
  padding: var(--nav-h) calc(var(--gutter) * .8) 0 calc(var(--gutter) + max(0px, (100vw - var(--max-w)) / 2)); }
.cat-lead { display: contents; }
.cat-hero { grid-column: 1; grid-row: 1; min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; padding: 40px 0 56px; }
.cat-hero h1 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(40px, 4.2vw, 66px); line-height: 1.0; letter-spacing: -.034em; margin: 0; text-wrap: balance; }
.cat-intro { grid-column: 1; grid-row: 2; min-height: 72svh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.cat-intro h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.02; letter-spacing: -.03em; margin: 12px 0 16px; }
.cat-intro p { color: var(--ink-mid); font-size: 17px; line-height: 1.55; max-width: 30em; margin: 0; }
.cf { grid-column: 1; min-height: 88svh; display: flex; flex-direction: column; justify-content: center; padding: 56px 0; border-top: 1px solid var(--divider); }
.cf:nth-of-type(1) { grid-row: 3; } .cf:nth-of-type(2) { grid-row: 4; } .cf:nth-of-type(3) { grid-row: 5; } .cf:nth-of-type(4) { grid-row: 6; } .cf:nth-of-type(5) { grid-row: 7; }
.cf-no { font: 500 11px/1.4 var(--ff-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); }
.cf h3 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.08; letter-spacing: -.022em; margin: 12px 0 18px; text-wrap: balance; }
.cf-fig { display: none; font-family: var(--ff-display); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -.035em; margin: 0 0 14px; }
.cf-line { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--ink); max-width: 30em; }
.cf-line b { display: block; margin-bottom: 4px; font: 500 11px / 1.4 var(--ff-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); }
.cf-line + .cf-ev { margin-top: 6px; }
.cf-ev { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-mid); max-width: 30em; }
.cf-ev strong { color: var(--ink); font-weight: 600; }
.cf-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 12px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--ink); }
.cf-slot:empty { display: none; }

/* ── the stage: sticky beside the copy, from the masthead to the last file ── */
/* the book overhangs the window's edge as it swings open; clip it there so the page never widens (overflow: clip, not hidden, keeps the stage sticky) */
.cat { overflow-x: clip; }
.cat-stage { grid-column: 2; grid-row: 1 / span 7; align-self: start; position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); container-type: size; perspective: 2600px; perspective-origin: 50% 40%; }
.cat-book { position: absolute; inset: 0; --pw: min(45cqw, calc((100cqh - 110px) * .671)); --ph: calc(var(--pw) / .671); --bt: calc(var(--pw) * .085); --ov: calc(var(--pw) * .016); transform-style: preserve-3d; }
.b-shadow { position: absolute; left: 50%; top: calc(50% + var(--ph) / 2 - var(--pw) * .06); width: calc(var(--pw) * 1.5); height: calc(var(--pw) * .16); margin-left: calc(var(--pw) * -.75);
  background: radial-gradient(closest-side, rgba(30, 24, 10, .34), rgba(30, 24, 10, 0)); transform-origin: 50% 50%; pointer-events: none; }

/* ── the book: x = 0 is the spine; the script turns it about its own middle ── */
.book { position: absolute; left: 50%; top: 50%; width: var(--pw); height: var(--ph); margin-top: calc(var(--ph) / -2); transform-style: preserve-3d; transform-origin: 0 50%;
  transform: rotateX(5deg) rotateY(22deg) translateX(calc(var(--pw) / -2)); will-change: transform; }
.book > *, .leaf > * { position: absolute; }
.b-back { inset: 0; transform: translateZ(calc(var(--bt) / -2)) rotateY(180deg); background: #151515 url(img/home/catalogue-cover.webp) center / 100% 100%; }
.b-spine { top: 0; left: calc(var(--bt) / -2); width: var(--bt); height: var(--ph); transform: rotateY(-90deg); overflow: hidden;
  background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(255, 255, 255, .08) 46%, rgba(0, 0, 0, .55)), #151515 url(img/home/catalogue-cover.webp) 44% 0 / auto 100%; }
.b-spine span { position: absolute; left: 50%; top: 7%; writing-mode: vertical-rl; transform: translateX(-50%); white-space: nowrap; font: 700 calc(var(--bt) * .34) / 1 var(--ff-display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.b-fore, .b-top { background-color: #F4EEDF; }
.b-fore { top: var(--ov); left: calc(var(--pw) - var(--ov) - (var(--bt) - 4px) / 2); width: calc(var(--bt) - 4px); height: calc(var(--ph) - 2 * var(--ov)); transform: rotateY(90deg);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .1), transparent 20%, transparent 80%, rgba(0, 0, 0, .12)), repeating-linear-gradient(90deg, rgba(120, 100, 60, .2) 0 1px, transparent 1px 3px); }
.b-top { left: 0; top: calc(var(--ov) - (var(--bt) - 4px) / 2); width: calc(var(--pw) - var(--ov)); height: calc(var(--bt) - 4px); transform: rotateX(90deg);
  background-image: linear-gradient(rgba(0, 0, 0, .08), transparent 25%, transparent 75%, rgba(0, 0, 0, .1)), repeating-linear-gradient(180deg, rgba(120, 100, 60, .18) 0 1px, transparent 1px 3px); }

/* ── leaves: the cover, then the pages; each turns about the spine, front face on the right, back face on the left ── */
.leaf { left: 0; top: var(--ov); width: calc(var(--pw) - var(--ov)); height: calc(var(--ph) - 2 * var(--ov)); transform-style: preserve-3d; transform-origin: 0 50%;
  transform: translateZ(calc(var(--bt) / 2 - 2px - (var(--i) - 1) * 1px)); will-change: transform; }
.leaf.cover { top: 0; width: var(--pw); height: var(--ph); transform: translateZ(calc(var(--bt) / 2)); }
.face { inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* each face its own flat plane in the book's 3D: without a transform of its own, Safari lifts a face's layered children
   (the print, the captions, the cover's foil) out of the depth order and paints them over whatever is in front */
.face.f { transform: translateZ(0); }
.face.b { transform: rotateY(180deg); }
.face::before { content: ''; position: absolute; inset: 0; z-index: 4; background: linear-gradient(90deg, rgba(24, 18, 6, .5), rgba(24, 18, 6, .12)); opacity: calc(var(--sh, 0) * .55); pointer-events: none; }
.face.b::before { background: linear-gradient(270deg, rgba(24, 18, 6, .5), rgba(24, 18, 6, .12)); }
/* a page while it turns (catalogue.js bend()): N strips, each nested in the one before and starting at its right edge, each
   showing its slice of a copy of the two faces; 1px of overlap hides the seams */
.bend { left: 0; top: var(--ov); width: calc(var(--pw) - var(--ov)); height: calc(var(--ph) - 2 * var(--ov)); transform-style: preserve-3d; transform-origin: 0 50%; pointer-events: none; }
.bs { position: absolute; top: 0; left: 0; width: calc(100% / var(--n)); height: 100%; transform-style: preserve-3d; transform-origin: 0 50%; will-change: transform; }
.bs .bs { left: 100%; width: 100%; }
.bsl { position: absolute; top: 0; bottom: 0; left: 0; right: -1px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); }
.bsl.b { left: -1px; right: 0; transform: rotateY(180deg); }
.bsl > .face { position: absolute; inset: 0 auto; width: calc(var(--n) * (100% - 1px)); left: calc(var(--o) * (1px - 100%)); transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.bsl > i { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* a page's margins are a share of its containing block's width: for a copy that is one strip, not the page, so they are
   given back as the page's own (the strip is 1px wider than a tenth of the page) */
.bsl > .face.pg { padding: calc(var(--n) * (10% - .1px)) calc(var(--n) * (10% - .1px)) calc(var(--n) * (7% - .07px)); }
.leaf .board { top: 0; left: calc(var(--pw) - 1.5px); width: 3px; height: var(--ph); transform: rotateY(90deg); background: #101010; }

/* the cover: photographed cloth, the title in yellow foil, the name pressed into the band; the type is centred on the board
   right of the hinge (8.5%), and the letter-spaced lines are padded on the left by their own trailing space */
.cv-front { background: #151515 url(img/home/catalogue-cover.webp) center / 100% 100%; }
.cv-title, .cv-name, .cv-no { position: absolute; z-index: 1; }
.cv-title { left: 8.5%; right: 0; top: 10%; text-align: center; font: 800 calc(var(--pw) * .112) / .9 var(--ff-display); letter-spacing: -.01em; text-transform: uppercase;
  background: linear-gradient(104deg, #b77c04 0%, #f6c443 34%, #dc9b0d 52%, #ffd769 70%, #c08606 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .7)) drop-shadow(0 1px 0 rgba(255, 255, 255, .07)); }
.cv-no { left: 8.5%; right: 0; top: calc(10% + var(--pw) * .235); text-align: center; padding-left: .3em; font: 600 calc(var(--pw) * .032) / 1 var(--ff-body); letter-spacing: .3em; text-transform: uppercase; color: rgba(0, 0, 0, .5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .55); }
.cv-name { left: 8.5%; right: 0; top: 72%; height: 12.6%; display: flex; align-items: center; justify-content: center; padding-left: .26em; font: 800 calc(var(--pw) * .056) / 1 var(--ff-display); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(104, 58, 0, .52); text-shadow: 0 1px 0 rgba(255, 232, 160, .5), 0 -1px 0 rgba(70, 36, 0, .35); }
.cv-sheen { inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(104deg, transparent 38%, rgba(255, 246, 220, .1) 50%, transparent 62%) calc(var(--sheen, .5) * 100%) 0 / 300% 100% no-repeat; }
/* the inside of the board: the cloth turned in at the edges, then a yellow endpaper printed with a fine grid of the site's square mark */
.endpaper { box-shadow: inset 0 0 0 var(--ov) #161616, inset 0 0 0 calc(var(--ov) + 1px) rgba(0, 0, 0, .35); background-color: #F2B01E;
  background-image: linear-gradient(270deg, rgba(90, 50, 0, .28), rgba(90, 50, 0, 0) 14%), radial-gradient(rgba(120, 72, 0, .3) 0 1.1px, transparent 1.5px) 0 0 / calc(var(--pw) * .055) calc(var(--pw) * .055), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* pages: warm paper, a gutter shadow at the spine, a folio at the foot */
.pg { box-sizing: border-box; container-type: size; padding: 10% 10% 7%; background-color: #FAF6EC; color: var(--ink); display: flex; flex-direction: column; }
.pg::after { content: ''; position: absolute; top: 0; bottom: 0; width: 16%; z-index: 3; pointer-events: none; }
.face.f.pg::after { left: 0; background: linear-gradient(90deg, rgba(80, 60, 20, .22), rgba(80, 60, 20, 0)); }
.face.b.pg::after { right: 0; background: linear-gradient(270deg, rgba(80, 60, 20, .2), rgba(80, 60, 20, 0)); }
.pg > * { position: relative; z-index: 1; }
.pg p { margin: 0; }
.folio { margin-top: auto; padding-top: 3.5cqw; font: 500 max(12px, 2.8cqw) / 1 var(--ff-body); color: var(--ink-mid); }   /* the page's last line, so nothing can sit on it */
.pg-role + .folio, .tp-by + .folio, .pg-quote + .folio { margin-top: 0; }
.face.f .folio { align-self: flex-end; } .face.b .folio { align-self: flex-start; }
.pg-k { font: 600 max(12px, 3.1cqw) / 1.3 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mid); }

/* the title page */
.tp-t { font: 800 11.5cqw / .98 var(--ff-display); letter-spacing: -.03em; margin: 5cqw 0 8cqw !important; }
.tp-ix { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.tp-ix li { display: grid; grid-template-columns: 9cqw minmax(0, 1fr) auto; align-items: baseline; gap: 2cqw; padding: 2.6cqw 0; border-bottom: 1px solid #DDD5C2; font: 500 max(12px, 3.5cqw) / 1.25 var(--ff-body); }
.tp-ix li span { color: var(--ink-mid); font-weight: 600; }
.tp-ix li b { font: 700 max(12px, 4.2cqw) / 1 var(--ff-display); letter-spacing: -.02em; }
.tp-by { margin-top: auto !important; font: 700 max(12px, 3.6cqw) / 1 var(--ff-display); letter-spacing: .16em; text-transform: uppercase; }
@container (max-width: 200px) { .tp-ix { display: none; } .tp-t { font-size: 15cqw; } }   /* the query and cq units read the content box */

/* a file's left page: who, the need, the figure, what it measures */
.pg-client { font: 700 max(12px, 4.6cqw) / 1.2 var(--ff-display); margin-top: 3cqw !important; }
.pg-need { font: 700 7.4cqw / 1.08 var(--ff-display); letter-spacing: -.02em; margin-top: 7cqw !important; text-wrap: balance; }
.pg-fig { font: 800 18cqw / 1 var(--ff-display); letter-spacing: -.045em; margin-top: auto !important; white-space: nowrap; }
.pg-lab { font: 500 max(12px, 3.6cqw) / 1.35 var(--ff-body); color: var(--ink-mid); margin-top: 2cqw !important; }
.pg-role { font: 500 max(12px, 3.1cqw) / 1.35 var(--ff-body); margin-top: 6cqw !important; padding-top: 3cqw; border-top: 1px solid #DDD5C2; }
@container (max-width: 200px) { .pg-need, .pg-role, .pg-lab { display: none; } }

/* a file's right page: the print, mounted, and its caption */
.pg-print { background: #fff; padding: 2.4cqw 2.4cqw 0; box-shadow: 0 1px 2px rgba(40, 30, 10, .18), 0 6px 18px rgba(40, 30, 10, .08); margin-top: 6cqw; }
.pg-print .dev { aspect-ratio: 1 / 1; }
.pg-print .dev.wide { aspect-ratio: 2.2 / 1; }
.pg-cap { display: flex; justify-content: space-between; gap: 3cqw; padding: 2.6cqw .4cqw 2.8cqw; font: 500 max(12px, 2.9cqw) / 1.35 var(--ff-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mid); }
.pg-cap b { color: var(--ink); font-weight: 600; }
.pg-quote { margin-top: auto !important; font: 700 7cqw / 1.12 var(--ff-display); letter-spacing: -.02em; }
.pg-quote small { display: block; margin-top: 2.6cqw; font: 500 max(12px, 3cqw) / 1.35 var(--ff-body); letter-spacing: 0; color: var(--ink-mid); }

/* ── the bench (26 October 2026): the masthead is the museum's workshop (Gallery 6). A film rises from eye level to look
   straight down on the catalogue lying on a worktable and ends on a still whose book lies exactly where the page's closed
   book is; the page's book then fades in over it (.bench-landed) and opens as the masthead scrolls. The bench moves with the
   book as it opens, as if the camera eased back and across to centre the spread, and shows a clean plate (the still without
   its book) once the page's book has left the filmed one. While on the bench, the cover shows the photographed cover from
   that still (--bench-cv-*, set by the script from the still's measurements). Wide screens: the bench fills the screen behind
   the masthead, and fades into the floor it stands on, which runs on to the end of the files. Phones and tablets: the script moves it into the book's band, with a set of
   pictures cropped round the book, and it stays. The media queries are the script's modes; the script places the pictures.
   Without the script (.js is set in the head) the bench never shows; if the script never lands it, the book shows at 12s. ── */
.cat-bench { display: none; }
.bench-pics { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.cat-bench img, .cat-bench video { position: absolute; max-width: none; display: block; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%); mask-image: linear-gradient(90deg, transparent, #000 3%); }
.cat-bench.placed { background: #C0B1A5; }   /* the floor at the still's left edge, measured */
.bench-film { transition: opacity .45s ease; }
.bench-landed .bench-film { opacity: 0; }
.bench-lifted .bench-end { visibility: hidden; }   /* once the page's book has moved, the bench shows its clean plate */
.bench-near .b-back { box-shadow: 0 0 calc(var(--pw) * .05) rgba(36, 24, 8, .38), 0 1px 2px rgba(36, 24, 8, .3); }
.bench-on .cv-front { background: #151515 var(--bench-cv-img) var(--bench-cv-pos) / var(--bench-cv-size) no-repeat; }
.bench-on .cv-title, .bench-on .cv-no, .bench-on .cv-name, .bench-on .cv-sheen { display: none; }
.js .bench-landed .cat-book { opacity: 1; transition: opacity .45s ease; }
@keyframes bench-failsafe { to { opacity: 1; } }
@media (min-width: 901px) and (min-aspect-ratio: 1001/1000) and (min-height: 501px) {
  .js .cat { isolation: isolate; }
  .js .cat-bench { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background: #E9E4DA url(img/home/catalogue-bench-start-2.webp) 30% 50% / cover no-repeat; }
  .js .cat-bench.placed { background: #C0B1A5; }
  .bench-wash { position: absolute; inset: 0; background: var(--bench-wash); }
  /* the floor the table stands on carries on behind the five entries once the table has faded, under the same wash, then
     gives way to the paper at the foot of the section, where "Eight more briefs" begins (Iain, 26 October 2026: the fade
     to plain white read as sterile and clinical). Both are fixed to the screen, so the floor holds still under the book. */
  .js .cat { --bench-wash: linear-gradient(90deg, rgba(251, 250, 247, .74), rgba(251, 250, 247, .6) 32%, rgba(251, 250, 247, 0) 50%); }
  .js .cat.bench-on { position: relative; background: var(--bench-wash) fixed, #C0B1A5 url(img/home/catalogue-floor-1.webp) 50% 50% / cover fixed; }
  .js .cat.bench-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28svh; z-index: -1; pointer-events: none; background: linear-gradient(rgba(251, 250, 247, 0), var(--bg, #FBFAF7)); }
  .js .cat-book { opacity: 0; animation: bench-failsafe 0s 12s forwards; }
}
@media (max-aspect-ratio: 999/1000), (max-width: 900px) and (min-height: 501px) {
  .js .cat-stage > .cat-bench { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .js .cat-stage { background: #C0B1A5; }
  .js .cat-book { opacity: 0; animation: bench-failsafe 0s 12s forwards; }
}

/* ── phones and tablets: the book opens above the headline, pinned only while the headline passes under it ── */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .cat-grid { grid-template-columns: minmax(0, 1fr); padding: var(--nav-h) var(--gutter) 0; }
  .cat-lead { display: flex; flex-direction: column; }
  .cat-hero, .cat-intro, .cf, .cat-stage { grid-column: 1; grid-row: auto !important; }
  /* clipped across, not down (the fade under the band hangs below it): on a short phone the book's box is scaled up to the
     filmed book's size, past the screen's edge, and the browser widened the whole page to fit it (375x553: 425px wide,
     the page zoomed out 12%). The book itself stays inside; clip, unlike hidden, leaves its 3D intact */
  .cat-stage { order: -1; align-self: stretch; z-index: 2; height: calc(min(50vw - var(--gutter) - 6px, 32svh * .671) / .671 + 44px); margin: 0 calc(-1 * var(--gutter)); overflow-x: clip; background: var(--bg); }
  .cat-stage::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(var(--bg), rgba(251, 250, 247, 0)); pointer-events: none; }
  .cat-book { --pw: min(calc(50cqw - var(--gutter) - 6px), calc((100cqh - 44px) * .671)); }
  .cat-hero { min-height: 0; padding: 22px 0 40px; }
  .cat-hero h1 { font-size: clamp(32px, 8.6vw, 46px); }
  .cat-intro { min-height: 0; padding: 40px 0 8px; border-top: 1px solid var(--divider); }
  .cf { min-height: 0; padding: 36px 0; }
  .cf-fig { display: block; }
  .cf-slot { margin-top: 22px; background: var(--surface); padding: 8px 8px 0; border: 1px solid var(--divider); }
  .cf-slot .dev { aspect-ratio: 3 / 2; }
  .cf-slot .dev.wide { aspect-ratio: 2.2 / 1; }
  .cf-slot::after { content: attr(data-cap); display: block; padding: 9px 2px 11px; font: 500 11px/1.4 var(--ff-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }
}
@media (max-width: 900px) and (orientation: portrait) and (max-height: 700px) { .hx-lede { display: none; } .cat-hero h1 { margin-bottom: 18px; } }
/* a phone held sideways: two columns again, the book beside the copy */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .cat-grid { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); padding: var(--nav-h) 0 0 var(--gutter); }
  .cat-lead { display: contents; }
  .cat-hero { grid-row: 1 !important; min-height: calc(100svh - var(--nav-h)); padding: 12px 0; }
  .cat-hero h1 { font-size: 28px; margin-bottom: 14px; } .hx-lede, .hx-foot { display: none; }
  .cat-intro { grid-row: 2 !important; min-height: 80svh; border-top: 0; }
  .cf:nth-of-type(1) { grid-row: 3 !important; } .cf:nth-of-type(2) { grid-row: 4 !important; } .cf:nth-of-type(3) { grid-row: 5 !important; } .cf:nth-of-type(4) { grid-row: 6 !important; } .cf:nth-of-type(5) { grid-row: 7 !important; }
  .cf { min-height: 100svh; padding: 24px 0; } .cf-fig { display: none; }
  .cat-stage { grid-column: 2; grid-row: 1 / span 7 !important; order: 0; height: calc(100svh - var(--nav-h)); margin: 0; background: none; }
  .cat-stage::after { display: none; }
  .cat-book { --pw: min(44cqw, calc((100cqh - 40px) * .671)); }
}