/* mobile-books.css — phone layout fixes for Recto, Folio, Register, Inventory ───────────────────────────────────────────────────────────────────────────── WHY CONTAINER QUERIES, NOT MEDIA QUERIES The .stage element carries `container-type: inline-size; container-name: page`. The page can be narrower than the viewport in the editor preview and in the gallery thumbnails, so viewport media queries would fire at the wrong width. Every rule here is inside an @container block. WHICH CONTAINER TO QUERY .pg-recto and .pg-folio2 each declare `container-type: inline-size` on themselves (unnamed), so @container (max-width: 640px) targets them directly. .pg-register and .pg-inventory have no container-type of their own; their children query the .stage ancestor (container-name: page), so those rules use @container page (max-width: 640px). LOAD ORDER designs.css (line 56 in index.html) loads after all tpl-*.css files. For equal-specificity rules, designs.css wins. This file loads last and wins everything inside a container breakpoint. COLOUR No hex values here. All colour uses --bg / --ink / --accent / --surface or color-mix() of them, so all 32 palettes continue to work. ───────────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════ RECTO (.pg-recto has container-type: inline-size, unnamed) Target: @container (max-width: 640px) ═══════════════════════════════════════════════════════════════════════ */ @container (max-width: 640px) { /* ── Small text: Recto uses many clamp() whose lower bound falls under 11px at 390px container width. At 390px, 1cqw = 3.9px, so: clamp(.6rem, 1.2cqw, .7rem) → .6rem = 9.6px ← eyebrow, dz-h clamp(.58rem, 1.15cqw, .66rem)→ .58rem = 9.3px ← dz-num-l .58rem (hardcoded) → 9.3px ← rc-pl-n clamp(.62rem, 1.1cqw, .7rem) → .62rem = 9.9px ← plate captions clamp(.6rem, 1.2cqw, .7rem) → .6rem = 9.6px ← lead figcaption .62rem (hardcoded) → 9.9px ← rc-idx-n clamp(.6rem, 1.15cqw, .68rem)→ .6rem = 9.6px ← dz-closing All floored to .6875rem ≈ 11px. ────────────────── */ /* Cover eyebrow */ .pg-recto .rc-eyebrow { font-size: .6875rem; } /* Section / band heads (margin notes in the gutter) */ .pg-recto .dz-h { font-size: .6875rem; } /* Plate number badge (.rc-pl-n) */ .pg-recto .rc-pl-n { font-size: .6875rem; } /* Plate figcaptions */ .pg-recto .rc-pl figcaption { font-size: .6875rem; } /* Cover lead image figcaption */ .pg-recto .rc-lead figcaption { font-size: .6875rem; } /* Stat number labels (dz-num-l) */ .pg-recto .dz-num-l { font-size: .6875rem; } /* Contents index entry numbers */ .pg-recto .rc-idx-n { font-size: .6875rem; } /* Colophon / closing line */ .pg-recto .dz-closing { font-size: .6875rem; } /* ── Plate grid: deliberate 3-column layout on phone. The auto-fill formula (minmax(min(148px, 48%), 1fr)) resolves to 2 columns at ~390px, producing plates ~190px wide and a page over 8000px tall with 48 plates. Three columns cuts the plate height to ~128px (3:4 aspect → 170px tall), reduces page height by a third, and preserves the book-mosaic rhythm. The every-9th "big plate" (span 2×2) continues to work cleanly in a 3-track grid. gap: 4px is set explicitly so the breakout margin-inline doesn't leave a gap mismatch with the override. ─────────────────── */ .pg-recto .rc-plate-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } /* Big plate spans 2 of 3 columns (not all 3 — that would be unintentional full-bleed which breaks the mosaic and leaves a permanent 1-cell gap). */ .pg-recto .rc-pl--big { grid-column: span 2; grid-row: span 2; } /* ── Tap targets: .dz-link had padding-bottom: 1px → ~17px total. WCAG 2.5.5 (AAA) and Apple HIG recommend 44px minimum touch target. Stack links vertically so each link can expand to full width. ────── */ .pg-recto .dz-links { flex-direction: column; align-items: flex-start; gap: 0; } .pg-recto .dz-link { min-height: 44px; display: flex; align-items: center; padding-block: .5rem; } } /* end @container (max-width: 640px) — RECTO */ /* ═══════════════════════════════════════════════════════════════════════ FOLIO (.pg-folio2 has container-type: inline-size, unnamed) Target: @container (max-width: 640px) ═══════════════════════════════════════════════════════════════════════ */ @container (max-width: 640px) { /* ── fo-eyebrow: designs.css sets .7rem = 11.2px. Borderline — sub-pixel rounding in some browsers can push it below 11px. Nudge to .72rem. ── */ .pg-folio2 .fo-eyebrow { font-size: .72rem; } /* ── Gallery grid: dz-grid auto-fill resolves naturally to 2 columns (minmax clamp 140px at 390px → 2 tracks). Make this explicit so any future change to the clamp does not accidentally collapse to 1 column of oddly-sized boxes or overflow to 3 very narrow ones. ────────── */ .pg-folio2 .dz-grid { grid-template-columns: repeat(2, 1fr); } /* ── Tap targets: same issue as Recto — links had ~17px height. ──── */ .pg-folio2 .dz-links { flex-direction: column; align-items: flex-start; gap: 0; } .pg-folio2 .dz-link { min-height: 44px; display: flex; align-items: center; padding-block: .5rem; } } /* end @container (max-width: 640px) — FOLIO */ /* ═══════════════════════════════════════════════════════════════════════ REGISTER (.pg-register has no container-type; queries .stage = "page") Target: @container page (max-width: 640px) ═══════════════════════════════════════════════════════════════════════ */ @container page (max-width: 640px) { /* ── Small text: Register uses em-relative sizes against the design's base body size (--rg-t3 ≈ 12.83px at 390px from tpl-register.css). At that base, these resolve below 11px: .66em (dz-h, strip figcaptions) → 12.83 × .66 = 8.5px .70em (rg-statlbl) → 12.83 × .70 = 9.0px .76em (rg-c-nr, rg-c-fol) → 12.83 × .76 = 9.7px .68em (rg-colo) → 12.83 × .68 = 8.7px .78em (dz-link) → 12.83 × .78 = 10.0px Also clamp(.66rem, 1cqw, .76rem) → .66rem = 10.56px at 390px. All floored to .6875rem ≈ 11px. ─────────────────────────────── */ /* Section / band heads */ .pg-register .dz-h, .pg-register .rg-sechead h2, .pg-register .rg-sechead-h { font-size: .6875rem; } /* Strip figcaptions and shared gallery shot captions */ .pg-register .rg-strip-fig figcaption, .pg-register .dz-shot figcaption { font-size: .6875rem; } /* Stat block labels */ .pg-register .rg-statlbl { font-size: .6875rem; } /* Ledger row numbers and folio/index columns */ .pg-register .rg-c-nr, .pg-register .rg-c-fol { font-size: .6875rem; } /* Colophon closing text */ .pg-register .rg-colo { font-size: .6875rem; } /* ── Tap targets ──────────────────────────────────────────────────── */ .pg-register .dz-links { flex-direction: column; align-items: flex-start; gap: 0; } .pg-register .dz-link { font-size: .6875rem; /* also fixes the .78em = 10px computed value */ min-height: 44px; display: flex; align-items: center; padding-block: .5rem; } /* ── Contact-print strip: designs.css auto-fill resolves to 3 columns of ~115px at 390px — acceptable and tight by design. Make it explicit so the column count is deliberate rather than a side-effect of the auto-fill threshold. ──────────────────────────────────────────────── */ .pg-register .rg-strip { grid-template-columns: repeat(3, 1fr); } } /* end @container page (max-width: 640px) — REGISTER */ /* ═══════════════════════════════════════════════════════════════════════ INVENTORY (.pg-inventory has no container-type; queries .stage = "page") Target: @container page (max-width: 640px) ═══════════════════════════════════════════════════════════════════════ */ @container page (max-width: 640px) { /* ── OVERFLOW BUG — .inv-specimen-grid overflows horizontally at 390px. Root cause: designs.css uses grid-template-columns: repeat(auto-fill, minmax(min(clamp(100px, 15cqw, 170px), 100%), 1fr)) The `100%` inside min() resolves against the grid container's inline size. When the browser cannot resolve that percentage during track sizing (a known edge case when the container size is determined by block-layout stretch rather than an explicit width), it falls back to the upper bound of the clamp (170px). Three tracks of 170px = 510px on a 358px content area → horizontal scroll. Fix: explicit repeat(3, 1fr). Three cells at ~116px each is the deliberate phone layout — matches the Register strip rhythm. ─────── */ .pg-inventory .inv-specimen-grid { grid-template-columns: repeat(3, 1fr); /* the tpl-inventory.css border-left + per-cell border-right act as the gap; no additional gap needed and avoids double-border artefacts */ gap: 0; } /* ── Small text from tpl-inventory.css that designs.css does not override: these elements are hardcoded to 7–9px absolute values, which the slot- based inventory inherits because designs.css never touches them. ──── */ /* Masthead eyebrow label (hardcoded 7px in tpl-inventory.css) */ .pg-inventory .inv-mast-label { font-size: .6875rem; /* 11px — smallest acceptable mono label */ } /* Portrait image caption (hardcoded 7px in tpl-inventory.css) */ .pg-inventory .inv-portrait figcaption { font-size: .6875rem; } /* Classification stamp / closing text (hardcoded 7px in tpl-inventory.css) */ .pg-inventory .inv-stamp { font-size: .6875rem; } /* ── Small text from designs.css overrides that are still under 11px: .inv-specimen figcaption uses font: 500 .66em/1.45 in designs.css. .66em of 16px base = 10.56px — under 11px. Worse: .inv-spec-ref inside that figcaption also uses font: 500 .74em, which resolves against the FIGCAPTION's already-small 10.56px: .74 × 10.56px = 7.8px — severely under 11px. Fix: floor the figcaption to 11px first, then reset inv-spec-ref to 11px absolute so the .74em chain does not compound. ──────────── */ .pg-inventory .inv-specimen figcaption { font-size: .6875rem; } .pg-inventory .inv-spec-ref { font-size: .6875rem; /* breaks the .74em chain from designs.css */ } /* Holdings label: designs.css sets font: 500 .68em/1.4. .68 × 16px = 10.88px — just under 11px. ──────────────────────────── */ .pg-inventory .inv-holdings-label { font-size: .6875rem; } /* ── Tap targets for inv-contact-link (tpl-inventory.css: 9px) and dz-link (slot-design contact band). ────────────────────────── */ .pg-inventory .inv-contact-link { font-size: .6875rem; min-height: 44px; display: flex; align-items: center; } .pg-inventory .dz-links { flex-direction: column; align-items: flex-start; gap: 0; } .pg-inventory .dz-link { min-height: 44px; display: flex; align-items: center; padding-block: .5rem; } /* ── Opening meta: designs.css uses `grid-template-columns: auto minmax(0,1fr)` to place the accession number beside the name block. At 390px this is workable (the number at 1.8rem wide ≈ 75px leaves ~300px for the name), but tpl-inventory.css's @container page (max-width: 480px) adds `width: 100%` to .inv-index-num, which in an `auto` grid column creates a circular dependency that some browsers resolve by making the column full-width and squashing the name block. Stack to a single column for phone: accession number above, name below. ─ */ .pg-inventory .inv-opening-meta { grid-template-columns: 1fr; } .pg-inventory .inv-index-num { /* reduce the decorative number on phone — it was already shrunk by designs.css to clamp(1.8rem, 5cqw, 3.6rem) but the tpl responsive rules tried to enlarge it again at ≤480px (clamp(4rem, 22cqw, 7rem)). A small, quiet mark is the right call at 390px — it's an archivist's stamp, not a headline. */ font-size: clamp(1.8rem, 10cqw, 2.8rem); opacity: .22; /* slightly more recessive than the 0.28 default */ margin-bottom: .5rem; } } /* end @container page (max-width: 640px) — INVENTORY */