/* Capriastro poster PRODUCT page + the preview reveal + the enlarge overlay — the 23 Sep sheets
   D15-1 / D15-2 / D15b (1440), T3 / T4 (820), 3a-1 / 3a-2 / 3b / 3g (390).
   Pattern D4 sticky purchase: gallery left, 440 buy column right, 80 between. The preview (D15-2, owner
   2026-09-26) takes the GALLERY slot behind a "Your poster" thumb, and the rail's birth details switch IN
   PLACE to "Your poster"; a phone stacks it in the 3a order with a full-bleed swipe gallery, a scrolling
   thumb row and a sticky buy bar. Token-only; every rule under `.cap-shell`. */

/* ─── the two columns ────────────────────────────────────── */
.cap-shell .cap-product { padding-top: var(--cap-space-lg); display: grid; grid-template-columns: minmax(0, 1fr) var(--cap-rail-purchase); gap: var(--cap-gutter-rail-product); align-items: start; }
.cap-shell .cap-product__main { grid-column: 1; grid-row: 1; }
.cap-shell .cap-product__rail { grid-column: 2; grid-row: 1 / span 2; }
.cap-shell .cap-product__more { grid-column: 1; grid-row: 2; }   /* after the rail in the page (Tab order), under the gallery on screen */
.cap-shell .cap-product__main,
.cap-shell .cap-product__rail { display: flex; flex-direction: column; gap: var(--cap-space-panel-pad); min-width: 0; }
.cap-shell .cap-product__more { display: flex; flex-direction: column; gap: var(--cap-space-panel-pad); }

/* ─── gallery ────────────────────────────────────────────── */
.cap-shell .cap-gal { display: flex; flex-direction: column; gap: var(--cap-space-gap-6); min-width: 0; }
.cap-shell .cap-gal__stage { position: relative; aspect-ratio: 1 / 1; background: var(--cap-color-bg-deep); overflow: hidden; touch-action: pan-y pinch-zoom; }   /* pan-y pinch-zoom: the sideways drag is the gallery’s swipe, a pinch still zooms (a phone otherwise cancels the pointer — behaviour sweep 390, 2026-09-29) */
.cap-shell .cap-gal__main-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cap-shell .cap-gal__main { display: block; width: 100%; height: 100%; object-fit: cover; }
.cap-shell .cap-gal__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: var(--cap-gallery-arrow); height: var(--cap-gallery-arrow); border-radius: var(--cap-radius-pill); border: 0; background: var(--cap-color-arrow-bg); color: var(--cap-color-text); box-shadow: var(--cap-shadow-gallery-arrow); display: flex; align-items: center; justify-content: center; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-gallery-arrow); line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--cap-ease-fast), background var(--cap-ease-fast), color var(--cap-ease-fast); }
.cap-shell .cap-gal__arrow--prev { left: var(--cap-arrow-inset); }
.cap-shell .cap-gal__arrow--next { right: var(--cap-arrow-inset); }
 .cap-shell .cap-gal__arrow:focus-visible { opacity: 1; }
@media (hover: hover) { .cap-shell .cap-gal__stage:hover .cap-gal__arrow { opacity: 1; } }
@media (hover: hover) { .cap-shell .cap-gal__arrow:hover { background: var(--cap-color-text); color: var(--cap-color-bg); } }
.cap-shell .cap-gal__dots { display: none; }
.cap-shell .cap-gal__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--cap-space-gap-6); }   /* D15: six across the gallery's width */
.cap-shell .cap-gal__thumb { width: auto; height: auto; aspect-ratio: 1 / 1; border-radius: var(--cap-radius-thumb); padding: 0; cursor: pointer; }
/* THE DESKTOP THUMB ROW (owner 2026-10-17): from 1280 every photo — the frame-colour variations included — sits in ONE row that
   scrolls sideways, six or so in view. Its control is a thin line UNDER the row in the stone strip's look (page-rune-stone.css,
   "THE STONE STRIP'S SCROLL BAR": dark cream, pill ends, no track), drawn by poster-preview.js so it shows the same in every
   browser — a Mac's own bar only appears while scrolling: it shows the position, drags, and a click on it jumps there. The
   browser's own bar is hidden; the mouse wheel and a trackpad turn the row. No arrows, nothing on the big picture. Below 1280
   the line is hidden and the phone / tablet rows above are untouched. */
.cap-shell .cap-gal__line { display: none; }
@media (min-width: 1280px) {
  .cap-shell .cap-gal__thumbs { display: flex; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .cap-shell .cap-gal__thumbs::-webkit-scrollbar { display: none; }
  .cap-shell .cap-gal__thumb { flex: 0 0 calc((100% - 5 * var(--cap-space-gap-6)) / 6); }
  .cap-shell .cap-gal__thumb--yours[hidden] { display: none; }
  .cap-shell .cap-gal__line { display: block; position: relative; height: var(--cap-space-gap-3); border-radius: var(--cap-radius-pill); cursor: pointer; touch-action: none; }
  .cap-shell .cap-gal__line::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--cap-space-sm)); bottom: calc(-1 * var(--cap-space-sm)); }   /* a taller hit area than the 6 px line */
  .cap-shell .cap-gal__line.is-fits { visibility: hidden; }   /* everything in view: no line, the space kept */
  .cap-shell .cap-gal__line-thumb { position: absolute; top: 0; left: 0; height: 100%; border-radius: var(--cap-radius-pill); background: var(--cap-color-line-deep); cursor: grab; }
  .cap-shell .cap-gal__line.is-dragging .cap-gal__line-thumb { cursor: grabbing; }
}
.cap-shell .cap-gal__thumb img { object-fit: cover; }
/* the preview in the gallery slot (D15-2): the sheet centred on the deep-cream well, the caption under it, the magnifier */
.cap-shell .cap-gal__well { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cap-space-faq-gap); padding: var(--cap-space-md); background: var(--cap-color-bg-deep); }
.cap-shell .cap-gal__well[hidden] { display: none; }
.cap-shell .cap-gal__well .cap-well__sheet { flex: none; width: var(--cap-well-sheet-w); height: var(--cap-well-sheet-h); max-width: 100%; border-radius: 0; box-shadow: var(--cap-shadow-well-sheet); }
.cap-shell .cap-gal__well.is-landscape .cap-well__sheet { width: var(--cap-well-sheet-h); height: var(--cap-well-sheet-w); }
.cap-shell .cap-gal__well .cap-well__sheet img { object-fit: contain; }
.cap-shell .cap-gal__well .cap-well__zoom { top: var(--cap-space-md); right: var(--cap-space-md); bottom: auto; }   /* the magnifier top-right at EVERY width (owner 2026-09-26; the D15-2 sheet's bottom-right is to be corrected) */
.cap-shell .cap-gal__caption { margin: 0; display: flex; align-items: center; gap: var(--cap-space-gap-6); font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-label); line-height: var(--cap-leading-tight); color: var(--cap-color-text); text-align: center; }
.cap-shell .cap-gal__caption-star { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--cap-space-faq-gap); height: var(--cap-space-faq-gap); border-radius: var(--cap-radius-pill); background: var(--cap-color-text); color: var(--cap-color-on-ink); font-style: normal; font-size: var(--cap-type-meta); line-height: 1; }
/* THE PREVIEW THAT CANNOT LOAD (round 34, owner 2026-10-06): a plain sentence in the sheet's place; the sheet, its caption
   and the magnifier go — never a blank sheet. The well carries .is-failed (poster-preview.js). */
/* the fitted sheet (poster-preview.js fitWell, round 34): centred by itself — the margin above it equals the gap + the note
   below it, so the column centres on the sheet; no vertical padding (the script keeps the room under the note) */
.cap-shell .cap-gal__well { --cap-well-edge: var(--cap-space-gap-6); }
.cap-shell .cap-gal__well.is-fit { justify-content: center; padding-top: 0; padding-bottom: 0; }
.cap-shell .cap-gal__well.is-fit .cap-well__sheet,
.cap-shell .cap-gal__well.is-fit.is-landscape .cap-well__sheet { width: var(--cap-well-fit-w); height: var(--cap-well-fit-h); margin-top: var(--cap-well-lift); }
.cap-shell .cap-gal__fail { display: none; margin: 0; max-width: var(--cap-mp-well-caption-measure); font-family: var(--cap-font-serif); font-size: var(--cap-type-base); line-height: var(--cap-leading-well-caption); color: var(--cap-color-text); text-align: center; text-wrap: balance; }
.cap-shell .cap-gal__well.is-failed { justify-content: center; }
.cap-shell .cap-gal__well.is-failed .cap-gal__fail { display: block; }
.cap-shell .cap-gal__well.is-failed .cap-well__sheet,
.cap-shell .cap-gal__well.is-failed .cap-gal__caption,
.cap-shell .cap-gal__well.is-failed .cap-well__zoom { display: none; }
.cap-shell .cap-gal__main-btn[hidden] { display: none; }
/* the dots (phone / tablet) stay while the preview shows: it is the FIRST dot (3a-2, 26 Sep) — data-gal-yours on the dot as on the thumb */
/* the "Your poster" thumb: the sheet on the deep cream, no badge (owner 2026-09-29, the updated 3a-2 / 3b; its aria-label names it) */
.cap-shell .cap-gal__thumb--yours { position: relative; background: var(--cap-color-bg-deep); overflow: hidden; }
.cap-shell .cap-gal__thumb--yours[hidden] { display: none; }
.cap-shell .cap-gal__thumb--yours img { object-fit: contain; padding: var(--cap-space-gap-5); }
/* the policy strip: one column in the rail, under a rule (D15-1 under Preview · D15-2 under Add to cart) */
.cap-shell .cap-policy { list-style: none; margin: var(--cap-space-block-2) 0 0; padding: var(--cap-space-section-head-below) 0 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line); display: grid; grid-template-columns: 1fr; gap: var(--cap-space-gap-6); }
.cap-shell .cap-policy__line { display: flex; gap: var(--cap-space-gap-6); align-items: flex-start; font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-policy); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-data); color: var(--cap-color-text); }
.cap-shell .cap-policy__icon { flex: none; color: var(--cap-color-muted); display: block; margin-top: var(--cap-space-gap-1); }
.cap-shell .cap-policy__icon svg { display: block; }

/* ─── the buy column ─────────────────────────────────────── */
.cap-shell .cap-purchase-panel { display: flex; flex-direction: column; gap: var(--cap-space-section-head-below); }
.cap-shell .cap-purchase-panel__head { display: flex; flex-direction: column; gap: var(--cap-space-gap-5); }
.cap-shell nav.cap-crumbs--in { display: none; }   /* nav.: outranks the shared trail row (components.css) */
.cap-shell .cap-purchase-panel__eyebrow { color: var(--cap-color-primary); }
.cap-shell .cap-purchase-panel__h1 { font-size: var(--cap-type-h1-product); line-height: var(--cap-leading-display); letter-spacing: var(--cap-track-display); margin: 0; }
.cap-shell .cap-purchase-panel__lede { margin: 0; font-size: var(--cap-type-lede); line-height: var(--cap-leading-lede); }
.cap-shell .cap-purchase-panel__price { display: flex; align-items: baseline; gap: var(--cap-space-gap-6); }
.cap-shell .cap-purchase-panel__amount { font-size: var(--cap-type-price-hero); letter-spacing: var(--cap-track-tile); line-height: var(--cap-leading-tight); }
.cap-shell .cap-purchase-panel__hook { display: none; }
.cap-shell .cap-picker { display: flex; flex-direction: column; gap: var(--cap-space-gap-5); }
.cap-shell .cap-picker__label { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-label); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-muted); }
/* size rows (D15, 26 Sep): each size its own rounded row; the selected one white on an ink edge, the others on the page's cream */
.cap-shell .cap-sizes { display: flex; flex-direction: column; gap: var(--cap-space-sm); background: transparent; border: 0; border-radius: 0; overflow: visible; }   /* two free-standing rows, never the .cap-options group box (owner 2026-09-26: both rows the same width and edge) */
.cap-shell .cap-sizes__row { padding: calc(var(--cap-space-cell-y) + var(--cap-space-gap-1)) var(--cap-space-cell-x); gap: var(--cap-space-gap-6); line-height: var(--cap-leading-tight); background: var(--cap-color-bg); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: var(--cap-radius-selector); transition: border-color var(--cap-ease-fast); }   /* 52 tall (D15-1, 26 Sep): the tight line, never the body's */
.cap-shell .cap-sizes__row:first-child { border-top-width: var(--cap-border-hairline); border-top-style: solid; border-top-color: var(--cap-color-line-strong); }   /* the colour too: `.cap-option:first-child { border-top: 0 }` resets it to the text colour, which drew an ink top edge on an UNSELECTED first row (found 27 Sep, all widths) */   /* .cap-option:first-child drops its top line for the group box; these rows stand alone, so the first keeps all four (owner 2026-09-26: the rows read offset without it) */
@media (hover: hover) { .cap-shell .cap-sizes__row:hover { background: var(--cap-color-surface); } }   /* round 23 (CD design rules, Size: "unselected cream + hairline, hover to white") — the hairline does not change */
.cap-shell .cap-sizes__row.is-selected { background: var(--cap-color-surface); border-color: var(--cap-color-text); }   /* selected = the dark border only, the same 1 px as the other row (owner 2026-09-26; §9.ay) */
.cap-shell .cap-sizes__name { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-option-name); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); }
.cap-shell .cap-sizes__sub { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-size-sub); letter-spacing: var(--cap-track-caption); text-transform: uppercase; color: var(--cap-color-muted); }
.cap-shell .cap-sizes__price { margin-left: auto; font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-data); letter-spacing: var(--cap-track-price); line-height: var(--cap-leading-one); color: var(--cap-color-text); }   /* its line never taller than the name's, so the row stays 52 when the selected price steps up */
.cap-shell .cap-sizes__row.is-selected .cap-sizes__price { font-size: var(--cap-type-price); }
/* orientation: two radio cells */
.cap-shell .cap-orient { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cap-space-sm); }
.cap-shell .cap-orient__cell { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--cap-space-gap-6); padding: var(--cap-space-cell-y) var(--cap-space-gap-6); background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: var(--cap-radius-selector); cursor: pointer; transition: border-color var(--cap-ease-fast); }
@media (hover: hover) { .cap-shell .cap-orient__cell:hover { border-color: var(--cap-color-line-deep); } }
.cap-shell .cap-orient__cell.is-active { border-color: var(--cap-color-text); }   /* selected = ink colour at the same 1 px (§9.ay, owner 2026-09-26); the glyph inside keeps its 1.5 icon stroke */
.cap-shell .cap-orient__cell input { position: absolute; opacity: 0; pointer-events: none; }
.cap-shell .cap-orient__icon { display: block; flex: none; border: var(--cap-border-selected) solid var(--cap-color-text); box-sizing: border-box; }
.cap-shell .cap-orient__icon--portrait { width: 16px; height: 20px; }
.cap-shell .cap-orient__icon--landscape { width: 20px; height: 16px; }
.cap-shell .cap-orient__label { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-orient-label); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); }
/* frames: five cells, a 4.5px picture-frame chip each */
.cap-shell .cap-frames { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cap-space-sm); }
.cap-shell .cap-frames__cell { padding: var(--cap-space-gap-6) var(--cap-space-xs); gap: var(--cap-space-sm); background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: var(--cap-radius-selector); display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: border-color var(--cap-ease-fast); }
@media (hover: hover) { .cap-shell .cap-frames__cell:hover { border-color: var(--cap-color-line-deep); } }
.cap-shell .cap-frames__cell.is-selected { border-color: var(--cap-color-text); }   /* 1 px ink (§9.ay) */
.cap-shell .cap-frames__chip { display: block; width: var(--cap-frame-chip); height: var(--cap-frame-chip); box-sizing: border-box; background: var(--cap-color-bg); border: var(--cap-border-frame-chip) solid var(--cap-color-frame-black); }
.cap-shell .cap-frames__chip--none { border: var(--cap-border-hairline) dashed var(--cap-color-on-ink-3); }
.cap-shell .cap-frames__chip--white { border-color: var(--cap-color-surface); box-shadow: var(--cap-shadow-frame-white-ring); }
.cap-shell .cap-frames__chip--black { border-color: var(--cap-color-frame-black); }
.cap-shell .cap-frames__chip--oak { border-color: var(--cap-color-frame-oak); }
.cap-shell .cap-frames__chip--walnut { border-color: var(--cap-color-frame-walnut); }
.cap-shell .cap-frames__name { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-frame-name); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); line-height: var(--cap-leading-tight); }   /* the cell = 106 / 84.5 (26 Sep D15-1 / 3a-1): chip 13 in, the name 8 under it, the price 8 under that */
.cap-shell .cap-frames__price { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-frame-price); letter-spacing: var(--cap-track-price); line-height: var(--cap-leading-tight); color: var(--cap-color-text); min-height: 1.2em; }
/* the birth details (D15-1): the label, ONE white box of labelled cells (name · date | time · place), the hint, the button */
.cap-shell .cap-rail-birth { display: flex; flex-direction: column; gap: var(--cap-space-gap-5); }
.cap-shell .cap-rail-birth .cap-poster__form { display: flex; flex-direction: column; gap: var(--cap-space-gap-5); margin: 0; }
/* the birth-details card of labelled cells (.cap-cells, .cap-cell__clear) lives in components.css — shared with the calculator (26 Sep) */
/* the long birth-time hint (D15-1, design-rules "Long field hint"): 14 / 13 · 400 · .02em · 1.5 · caption grey, set in by the
   cells' own inset; the link violet on a 1 px violet underline */
.cap-shell .cap-rail-birth__hint { padding: 0 0 0 var(--cap-space-field-cell-x); text-transform: none; font-weight: 400; font-size: var(--cap-type-hint-long); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-lede); color: var(--cap-color-caption); }
.cap-shell .cap-rail-birth__hint a { color: var(--cap-color-primary); border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary); text-transform: none; letter-spacing: inherit; }
.cap-shell .cap-poster__preview-btn { margin-top: var(--cap-space-sm); }
.cap-shell .cap-rail-note { text-align: center; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-note-tiny); letter-spacing: var(--cap-track-feature); text-transform: uppercase; color: var(--cap-color-muted); }

/* ─── the rail switches in place (D15-2): the birth details until a preview exists, then "Your poster" ─── */
.cap-shell .cap-below[data-preview="closed"] .cap-below__rbody,
.cap-shell .cap-below[data-preview="open"] .cap-rail-birth { display: none; }
.cap-shell .cap-below__rbody { display: flex; flex-direction: column; gap: var(--cap-space-gap-5); margin-top: calc(var(--cap-space-panel-pad) * -1 + var(--cap-space-section-head-below)); }
.cap-shell .cap-osum__row { padding: var(--cap-space-cell-y) var(--cap-space-cell-x); }
.cap-shell .cap-osum__cell { display: flex; flex-direction: column; gap: var(--cap-space-xs); min-width: 0; }
.cap-shell .cap-osum__k { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-summary-k); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-muted); }   /* role G (CD 24 Sep): muted at every width */
.cap-shell .cap-osum__lines { display: flex; flex-direction: column; gap: var(--cap-space-xs); line-height: var(--cap-leading-tight); }   /* Cast for, three stacked lines */
.cap-shell .cap-osum__chip { flex: none; width: var(--cap-summary-chip); height: var(--cap-summary-chip); box-sizing: border-box; }
.cap-shell .cap-osum__chip:not(.cap-frames__chip--none) { border-width: calc(var(--cap-summary-chip) / 4); }   /* a framed colour keeps its frame edge at swatch size */
/* THE QUANTITY STEPPER (CD 24 Sep): a pill, no fill; − · count · +; hover turns the signs violet and the pill border darker;
   at 1 the − and at the max the + are aria-disabled (the standard disabled token). On a phone each sign's tap area reaches
   past the pill (the cart stepper's pattern). */
.cap-shell .cap-qstep { display: inline-flex; align-items: center; height: var(--cap-stepper-h); border: var(--cap-border-hairline) solid var(--cap-color-line); border-radius: var(--cap-radius-pill); transition: border-color var(--cap-ease); }
@media (hover: hover) { .cap-shell .cap-qstep:hover { border-color: var(--cap-color-line-emphasis); } }
.cap-shell .cap-qstep__btn { position: relative; width: var(--cap-stepper-btn); height: 100%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-stepper-sign); color: var(--cap-color-text); cursor: pointer; transition: color var(--cap-ease); }
.cap-shell .cap-qstep__btn::after { content: ""; position: absolute; top: calc(-1 * var(--cap-stepper-tap-y)); bottom: calc(-1 * var(--cap-stepper-tap-y)); left: calc(-1 * var(--cap-stepper-tap-x)); right: calc(-1 * var(--cap-stepper-tap-x)); }
.cap-shell .cap-qstep__btn:first-child::after { right: 0; }
.cap-shell .cap-qstep__btn:last-child::after { left: 0; }
@media (hover: hover) { .cap-shell .cap-qstep__btn:hover { color: var(--cap-color-primary); } }
.cap-shell .cap-qstep__btn[aria-disabled="true"] { opacity: var(--cap-opacity-disabled); cursor: not-allowed; color: var(--cap-color-text); }
.cap-shell .cap-qstep__n { min-width: var(--cap-stepper-count); text-align: center; font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-data); letter-spacing: var(--cap-track-faq); color: var(--cap-color-text); }
.cap-shell .cap-osum__v--frame { display: flex; align-items: center; gap: var(--cap-space-sm); }   /* the frame row: the swatch's glyph, then the label (owner 2026-09-24) */

.cap-shell .cap-osum__v { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-summary-v); letter-spacing: var(--cap-track-faq); color: var(--cap-color-text); }
.cap-shell .cap-osum__k, .cap-shell .cap-osum__v, .cap-shell .cap-osum__total { line-height: var(--cap-leading-tight); }   /* the rows' heights (D15-2 / 3a-2, 26 Sep): the tight line at every width, never the body's 1.7 */
.cap-shell .cap-osum__act { flex: none; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-summary-act); letter-spacing: var(--cap-track-caption); text-transform: uppercase; color: var(--cap-color-primary); text-decoration: none; }
@media (hover: hover) { .cap-shell .cap-osum__act:hover { color: var(--cap-color-text); } }
.cap-shell .cap-osum__total-k { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-btn); letter-spacing: var(--cap-track-caption); text-transform: uppercase; color: var(--cap-color-text); }
.cap-shell .cap-osum__total { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-lg); letter-spacing: var(--cap-track-tight); color: var(--cap-color-text); }
.cap-shell .cap-poster__preview-arrow { font-family: var(--cap-font-ui); position: relative; }
/* while the sheet renders (owner 2026-09-26): the label stays; past 300 ms a spinner takes the ARROW's slot (no interim words) */
.cap-shell .cap-poster__preview-btn.is-drawing .cap-poster__preview-arrow { color: transparent; }
.cap-shell .cap-poster__preview-btn.is-drawing .cap-poster__preview-arrow::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--cap-radius-pill); border: var(--cap-border-selected) solid var(--cap-color-spinner-track); border-top-color: var(--cap-color-bg); animation: cap-spin 1s linear infinite; }
.cap-shell .cap-poster__preview-btn.is-loading::before { display: none; }   /* never the shared button spinner before the label */

/* ─── the left column, under the gallery ─────────────────── */
.cap-shell .cap-about { display: flex; flex-direction: column; gap: var(--cap-space-gap-7); }
.cap-shell .cap-about__body { max-width: 640px; }
.cap-shell .cap-about p { font-family: var(--cap-font-serif); font-size: var(--cap-type-faq-answer); line-height: var(--cap-leading-body); color: var(--cap-color-text-body); margin: 0 0 var(--cap-space-gap-6); }
.cap-shell .cap-about p:last-child { margin-bottom: 0; }
.cap-shell .cap-about h2, .cap-shell .cap-about h3 { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-section); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); margin: 0 0 var(--cap-space-md); }
.cap-shell .cap-about ul { list-style: none; margin: var(--cap-space-md) 0 0; padding: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-about li { font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-data); letter-spacing: var(--cap-track-data); color: var(--cap-color-text-body); padding: var(--cap-space-sm) 0; border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-below__specs, .cap-shell .cap-below__also { display: flex; flex-direction: column; gap: var(--cap-space-gap-7); }
.cap-shell .cap-specs { border-top: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-specs__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 var(--cap-space-md); padding: var(--cap-space-head-y) 0; border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); align-items: baseline; }
.cap-shell .cap-specs__row:last-child { border-bottom: 0; }   /* no divider under the last row (owner 2026-09-24) */
.cap-shell .cap-specs__k { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-spec-label); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-muted); }   /* role G (CD 24 Sep) */
.cap-shell .cap-specs__v { font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-card-value); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-data); color: var(--cap-color-text-body); }
.cap-shell .cap-faq__head--quiet { border-top: var(--cap-border-hairline) solid var(--cap-color-line-emphasis); padding-top: var(--cap-gutter); margin: 0 0 var(--cap-space-gap-7); color: var(--cap-color-heading-quiet); }
.cap-shell .cap-below__faq .cap-faq-q { color: var(--cap-color-text); }
/* also available in */
.cap-shell .cap-also { display: flex; align-items: center; gap: var(--cap-space-section-head-below); height: var(--cap-also-thumb); padding: 0 var(--cap-space-section-head-below) 0 0; background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); text-decoration: none; color: inherit; transition: box-shadow var(--cap-ease), border-color var(--cap-ease); }
@media (hover: hover) { .cap-shell .cap-also:hover { box-shadow: var(--cap-shadow-hub-card); } }
.cap-shell .cap-also__thumb { width: var(--cap-also-thumb); height: var(--cap-also-thumb); flex: none; background: var(--cap-color-bg-deep); overflow: hidden; }
.cap-shell .cap-also__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cap-shell .cap-also__text { display: flex; flex-direction: column; gap: var(--cap-space-gap-3); flex: 1; min-width: 0; }
.cap-shell .cap-also__name { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-also-name); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); }
.cap-shell .cap-also__sub { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-small); color: var(--cap-color-muted); }
.cap-shell .cap-also__from { display: flex; align-items: baseline; gap: var(--cap-space-gap-3); flex: none; }
.cap-shell .cap-also__from-word { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-tile-from); letter-spacing: var(--cap-track-caption); text-transform: uppercase; color: var(--cap-color-muted); }
.cap-shell .cap-also__price { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-also-price); letter-spacing: var(--cap-track-price); color: var(--cap-color-text); }
/* the dark compare card */
.cap-shell .cap-compare { background: var(--cap-color-text); color: var(--cap-color-on-ink); padding: var(--cap-space-lg); display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-md); }
/* "Compare the styles →" hovers to the design system's on-dark cream (.cap-btn--primary.cap-btn--on-ink), not the violet button's
   ink, which vanished into this ink card. Mouse screens from 700 only; phones untouched (owner 2026-10-20; NO_PRESS in build-press.py). */
@media (hover: hover) and (min-width: 700px) { .cap-shell .cap-compare .cap-btn--primary:hover { background: var(--cap-color-bg); border-color: var(--cap-color-bg); color: var(--cap-color-text); } }
.cap-shell .cap-compare__line { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-lg); line-height: var(--cap-leading-tight-card); letter-spacing: var(--cap-track-tight); color: var(--cap-color-on-ink); }
.cap-shell .cap-product-end { height: var(--cap-space-hub-foot); }

/* ─── the buy bar (phone only) + the overlay's foot ─────── */
.cap-shell .cap-buybar { display: none; }
.cap-shell .cap-overlay__foot { position: absolute; left: 0; right: 0; bottom: var(--cap-space-lg); display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-gap-5); pointer-events: none; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-overlay-caption); letter-spacing: var(--cap-track-feature); text-transform: uppercase; color: var(--cap-color-on-ink-muted); }
.cap-shell .cap-overlay__hint { display: none; }
.cap-shell .cap-overlay__label:empty { display: none; }
/* 3g (owner 2026-09-29): the enlarged view is OPAQUE — nothing of the page shows through, so the caption lines read. The
   dialog itself takes focus when it is opened by a tap (no ring on the ✕); only a keyboard opening focuses the ✕ (poster-preview.js). */
.cap-shell .cap-poster__overlay { background: var(--cap-color-scrim-solid); }
.cap-shell .cap-poster__overlay:focus { outline: none; }

/* Quantity (owner 2026-09-22, 1–5; the server caps it too). */

/* ─── tablet 768–1023 (T3 / T4): one column, desktop type, the phone's order ───── */
/* THE D15 LADDER (owner review 2026-09-23, sweep 3 — every value from the scale):
   left column   gallery (the preview inside it) → 64 → About → 64 → Specifications → 64 → Questions
   rail          the panel (pickers → the birth details, or "Your poster" in their place) → 24 · rule · 24 → Also → 20 → compare */
@media (min-width: 1280px) {
  /* D15-1 rhythm (26 Sep, measured at 2x): the section 36 under the crumbs; eyebrow → title → lede → price; each picker's label
     4 above its choices; the lede on a 420 measure */
  .cap-shell .cap-product { padding-top: calc(var(--cap-space-lg) + var(--cap-space-xs)); }
  .cap-shell .cap-purchase-panel__h1, .cap-shell .cap-purchase-panel__lede { margin-top: var(--cap-space-xs); }
  .cap-shell .cap-purchase-panel__lede { max-width: calc(100% - var(--cap-space-section-head-below)); }
  .cap-shell .cap-purchase-panel__price { margin-top: var(--cap-space-block-label); }
  /* 26 Sep, measured: a picker label's caps sit 13.5 above its choices (6 + the label's half-leading); the birth box the same under its label */
  .cap-shell .cap-picker, .cap-shell .cap-rail-birth { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-rail-birth .cap-poster__form { gap: var(--cap-space-gap-4); }          /* the box → the hint 14.5 */
  .cap-shell .cap-poster__preview-btn { margin-top: var(--cap-space-block-2); }            /* the hint → the button 25.5 */
  /* "Your poster" (D15-2): the label 6 above the box; rows 122 · 73 · 73 · 65 · 58; the button 20 under it, the note 10 under that, the rule 16 under the note */
  .cap-shell .cap-below__rbody { gap: var(--cap-space-section-head-below); }
  .cap-shell .cap-below__rbody > .cap-picker__label { margin-bottom: calc(var(--cap-space-gap-3) - var(--cap-space-section-head-below)); }
  .cap-shell .cap-below__rbody > .cap-rail-note { margin-top: calc(var(--cap-space-gap-5) - var(--cap-space-section-head-below)); }
  .cap-shell .cap-below__rbody > .cap-policy { margin-top: calc(-1 * var(--cap-space-xs)); }
  .cap-shell .cap-osum__cell { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-osum__k, .cap-shell .cap-osum__v { line-height: var(--cap-leading-tight); }
  .cap-shell .cap-osum__total { line-height: var(--cap-leading-tight); }
  /* the rail follows the page inside its own two-column section only (owner 2026-09-25) — sticky cannot leave
     .cap-product, so it scrolls away before the strip and the footer; a rail taller than the screen holds once its
     bottom is in view (--cap-rail-top, set by CapriUI) so none of it is ever out of reach */
  .cap-shell .cap-product__rail { position: sticky; top: var(--cap-rail-top, var(--cap-gutter)); }
  .cap-shell .cap-product__main, .cap-shell .cap-product__more { gap: var(--cap-space-xl); }
  .cap-shell .cap-product { row-gap: var(--cap-space-xl); }   /* the gallery → About gap, as when About sat inside the main column */
  .cap-shell .cap-below__rbody { gap: var(--cap-space-section-head-below); }
  .cap-shell .cap-below__also { margin-top: calc(var(--cap-space-block-5) - var(--cap-space-panel-pad)); padding-top: var(--cap-space-gap-4); gap: var(--cap-space-md); }   /* 26 Sep: no rule over "Also available in"; its caps 44 under the strip's last line, the card 20 under them */
  .cap-shell .cap-below__compare { margin-top: calc(var(--cap-space-section-head-below) - var(--cap-space-panel-pad)); }
}

@media (max-width: 1279px) {
  .cap-shell .cap-poster-page .cap-inset { padding-left: var(--cap-page-x-mid); padding-right: var(--cap-page-x-mid); }
  .cap-shell .cap-product { display: flex; flex-direction: column; align-items: stretch; gap: var(--cap-space-lg); padding-top: var(--cap-space-band-close); }   /* every block runs the column (the grid's `start` left the summary + compare at their content width — the 1280 rule, owner 2026-09-30) */
  .cap-shell .cap-product__main, .cap-shell .cap-product__rail, .cap-shell .cap-product__more { display: contents; }
  .cap-shell .cap-gal            { order: 1; align-self: stretch; }   /* the column's width, never its thumb row's (the row scrolls) */
  .cap-shell .cap-purchase-panel { order: 2; }
  .cap-shell .cap-below__rbody   { order: 3; }
  .cap-shell .cap-below__about   { order: 6; }
  .cap-shell .cap-below__specs   { order: 7; }
  .cap-shell .cap-below__also    { order: 8; }
  .cap-shell .cap-below__faq     { order: 9; }
  .cap-shell .cap-below__compare { order: 10; }
  /* the gallery swipes, the thumb row scrolls full-bleed to the right edge. NO DOTS below 1280 (owner 2026-10-02): swiping the
     main picture changes it and the small pictures underneath are the tappable index — the dot rules below stay for a
     later return but the row is not shown */
  .cap-shell .cap-gal__arrow { display: none; }
  .cap-shell .cap-gal__dots.cap-gal__dots { display: none; }
  .cap-shell .cap-gal__dots { display: flex; gap: var(--cap-space-gap-4); padding: var(--cap-space-sm) var(--cap-space-gap-6); border-radius: var(--cap-radius-pill); background: var(--cap-color-dot-capsule); position: absolute; left: 50%; bottom: var(--cap-space-md); transform: translateX(-50%); }
  .cap-shell .cap-gal__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--cap-radius-pill); background: var(--cap-color-dot-off); cursor: pointer; transition: width var(--cap-ease), background var(--cap-ease); }
  .cap-shell .cap-gal__dot.is-on { width: 18px; background: var(--cap-color-surface); }
  /* the dots' INVISIBLE tap area (Lighthouse 2026-09-26): nothing drawn — half the gap each side (they meet, never overlap), 44 tall */
  .cap-shell .cap-gal__dot { position: relative; }
  .cap-shell .cap-gal__dot::after { content: ""; position: absolute; left: calc(var(--cap-space-gap-4) / -2); right: calc(var(--cap-space-gap-4) / -2); top: calc((100% - var(--cap-tap-min)) / 2); bottom: calc((100% - var(--cap-tap-min)) / 2); }
  .cap-shell .cap-gal__thumbs { display: flex; gap: var(--cap-space-gap-6); overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--cap-page-x-mid) * -1); padding-right: var(--cap-thumb-peek); }
  .cap-shell .cap-gal__thumbs::-webkit-scrollbar { display: none; }
  .cap-shell .cap-gal__thumb { width: 96px; height: 96px; flex: none; border-radius: var(--cap-radius-thumb); }
  .cap-shell .cap-purchase-panel { gap: var(--cap-space-section-head-below); }
  .cap-shell .cap-purchase-panel__head { gap: var(--cap-space-gap-7); }
  .cap-shell nav.cap-crumbs--in { display: flex; padding: 0; margin: 0 0 var(--cap-space-breadcrumb-clear); max-width: none; text-align: left; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-caption); text-transform: uppercase; color: var(--cap-color-muted); }
  .cap-shell .cap-crumbs--in a { color: inherit; text-decoration: none; }
  .cap-shell .cap-crumbs--in .cap-crumbs__sep { padding: 0 var(--cap-space-xs); }
  .cap-shell .cap-purchase-panel__h1 { order: -1; }
  .cap-shell .cap-crumbs--in { order: -2; }
  .cap-shell .cap-purchase-panel__lede { max-width: 52ch; }
  .cap-shell .cap-purchase-panel__hook { display: block; margin: 0; font-family: var(--cap-font-serif); font-size: var(--cap-type-faq-answer); line-height: var(--cap-leading-body); color: var(--cap-color-text-body); }
  .cap-shell .cap-about__body p:first-child { display: none; }   /* the hook already sits under the price */
  .cap-shell .cap-below__rbody { margin-top: 0; }
}

/* ─── tablet 700–1279 (T9-1 · T9-2 at 1024; 820 per T9-1-820 · T9-2-820) ───────────────────────────────────────────
   The sheets keep the rail in its own order: the gallery, the panel (eyebrow → title → lede → price; Size | Orientation side
   by side; Frame; the birth details), "Your poster", Also available in, the compare card — then About this print (the
   hook back as its first paragraph), Specifications, Questions. No crumb in the page: "← All posters" sits in the row under
   the header (chrome.css). */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-product { padding-top: var(--cap-gutter); gap: var(--cap-space-band-close); }
  .cap-shell .cap-crumbs--in, .cap-shell nav.cap-crumbs--in { display: none; }
  .cap-shell .cap-gal__well { --cap-well-sheet-w: var(--cap-well-sheet-w-mid); --cap-well-sheet-h: var(--cap-well-sheet-h-mid); }   /* T9-2: 495 × 660 */
  .cap-shell .cap-below__rbody { margin-top: calc(var(--cap-gutter) - var(--cap-space-band-close)); }   /* "Your poster" 24 under the frame cells (T9-2) */
  /* "Your poster" as D15-2 (the tablet sheets use its type): the label 6 above the box, tight rows, the note 10 under the button */
  .cap-shell .cap-below__rbody { gap: var(--cap-space-section-head-below); }
  .cap-shell .cap-below__rbody > .cap-picker__label { line-height: normal; margin-bottom: calc(var(--cap-space-gap-5) - var(--cap-space-section-head-below)); }
  .cap-shell .cap-below__rbody > .cap-rail-note { margin-top: calc(var(--cap-space-gap-5) - var(--cap-space-section-head-below)); }
  .cap-shell .cap-osum__cell { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-osum__k, .cap-shell .cap-osum__v, .cap-shell .cap-osum__total { line-height: var(--cap-leading-tight); }
  .cap-shell .cap-below__rbody > .cap-policy { margin-top: calc(-1 * var(--cap-space-gap-1)); }   /* T9-2: the strip 2 closer to the note */
  .cap-shell .cap-purchase-panel__h1 { order: 0; }
  .cap-shell .cap-purchase-panel__hook { display: none; }
  .cap-shell .cap-about__body p:first-child { display: block; }
  .cap-shell .cap-purchase-panel__lede { max-width: none; font-size: var(--cap-type-lede-band); line-height: var(--cap-leading-lede); }   /* T9: 19 on 1.5 */
  .cap-shell .cap-purchase-panel__price { margin-top: var(--cap-space-gap-5); }   /* T9-1: 10 more under the lede */
  .cap-shell .cap-below__also    { order: 4; margin-top: calc(var(--cap-gutter) + var(--cap-space-xs) - var(--cap-space-band-close)); }   /* 28 under the policy strip (T9-1) */
  .cap-shell .cap-below__compare { order: 5; }
  /* "Also available in" as T9-1 / T9-2 (owner 2026-10-01): the band 156 tall, the picture a square filling its full inside height */
  .cap-shell .cap-also { box-sizing: border-box; height: var(--cap-also-band-mid); }
  .cap-shell .cap-also__thumb { width: calc(var(--cap-also-band-mid) - 2 * var(--cap-border-hairline)); height: calc(var(--cap-also-band-mid) - 2 * var(--cap-border-hairline)); }
  /* Size | Orientation side by side; the orientation rows stacked like the size rows */
  .cap-shell .cap-purchase-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--cap-space-md); }
  .cap-shell .cap-purchase-panel > * { grid-column: 1 / -1; }
  .cap-shell .cap-purchase-panel > .cap-picker:has(.cap-sizes) { grid-column: 1; }
  .cap-shell .cap-purchase-panel > .cap-picker:has(.cap-orient) { grid-column: 2; }
  .cap-shell .cap-orient { display: flex; flex-direction: column; gap: var(--cap-space-sm); }
  .cap-shell .cap-purchase-panel .cap-picker__label { line-height: normal; }
  .cap-shell .cap-purchase-panel > .cap-picker, .cap-shell .cap-purchase-panel > .cap-rail-birth { margin-top: var(--cap-space-xs); }   /* T9-1: 24 between the panel's blocks */
  .cap-shell .cap-orient__cell { justify-content: flex-start; min-height: calc(var(--cap-space-field-h) + var(--cap-space-xs)); padding-left: var(--cap-space-field-x); padding-right: var(--cap-space-field-x); }   /* the size rows' 52 */
}

@media (min-width: 700px) and (max-width: 1023px) { .cap-shell .cap-gal__well { --cap-well-sheet-w: var(--cap-well-sheet-w-narrow); --cap-well-sheet-h: var(--cap-well-sheet-h-narrow); } }   /* T9-2-820: 407 × 542 */

/* ─── phone < 700 (3a-1 / 3a-2 / 3b / 3g) ─────────────────── */
@media (max-width: 699px) {
  .cap-shell .cap-poster-page .cap-inset { padding-left: var(--cap-page-x); padding-right: var(--cap-page-x); }
  .cap-shell .cap-product { padding-top: 0; gap: var(--cap-space-section-head-below); }
  .cap-shell .cap-gal { margin-left: calc(var(--cap-page-x) * -1); margin-right: calc(var(--cap-page-x) * -1); gap: var(--cap-space-sm); }
  .cap-shell .cap-gal__dots { bottom: var(--cap-space-gap-6); gap: var(--cap-space-gap-3); padding: var(--cap-space-gap-4) var(--cap-space-gap-5); }
  .cap-shell .cap-gal__dot { width: 6px; height: 6px; }
  .cap-shell .cap-gal__dot.is-on { width: 16px; }
  .cap-shell .cap-gal__dot::after { left: calc(var(--cap-space-gap-3) / -2); right: calc(var(--cap-space-gap-3) / -2); }
  .cap-shell .cap-gal__thumbs { margin: 0; padding-left: var(--cap-page-x); padding-right: var(--cap-thumb-peek); gap: var(--cap-space-sm); }
  .cap-shell .cap-gal__thumb { width: 72px; height: 72px; }
  .cap-shell .cap-purchase-panel__h1 { font-size: var(--cap-type-h1-product); line-height: var(--cap-leading-hero); letter-spacing: var(--cap-track-hero); }
  .cap-shell .cap-purchase-panel__lede { font-size: var(--cap-type-base); line-height: var(--cap-leading-body); }
  .cap-shell .cap-purchase-panel__amount { font-size: var(--cap-type-price-hero); }
  /* 3a-1 (26 Sep), measured: a picker's label caps 14.5 over its choices, 29.5 under the block before (the tight line + 24 between blocks) */
  .cap-shell .cap-purchase-panel { gap: var(--cap-space-block-5); }
  .cap-shell .cap-picker__label { font-weight: 500; font-size: var(--cap-type-section); color: var(--cap-color-text); line-height: var(--cap-leading-tight); }
  .cap-shell .cap-sizes { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-sizes__row { padding: var(--cap-space-gap-5) var(--cap-space-md); }
  .cap-shell .cap-sizes__name { letter-spacing: var(--cap-track-name); }
  .cap-shell .cap-sizes__sub { letter-spacing: var(--cap-track-feature); }
  .cap-shell .cap-sizes__price, .cap-shell .cap-sizes__row.is-selected .cap-sizes__price { font-size: var(--cap-type-sm); }
  .cap-shell .cap-orient { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-orient__cell { padding: var(--cap-space-gap-6) var(--cap-space-gap-5); gap: var(--cap-space-gap-5); }
  .cap-shell .cap-orient__icon--portrait { width: 14px; height: 18px; }
  .cap-shell .cap-orient__icon--landscape { width: 18px; height: 14px; }
  .cap-shell .cap-frames { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-frames__cell { padding: var(--cap-space-gap-5) var(--cap-space-xs) var(--cap-space-gap-4); gap: var(--cap-space-gap-3); }
  .cap-shell .cap-frames__name { letter-spacing: var(--cap-track-name); }
  /* the birth box (3a-1): the hint 13.5 under the box, the button 22.5 under the hint (the cells follow CD's field-label rules, 26 Sep) */
  .cap-shell .cap-rail-birth .cap-poster__form { gap: var(--cap-space-gap-4); }
  .cap-shell .cap-poster__preview-btn { margin-top: var(--cap-space-gap-5); background: var(--cap-color-text); color: var(--cap-color-on-ink); justify-content: center; padding: var(--cap-btn-pad-large-block); }   /* Large at every width (CD's sweep) */
  @media (hover: hover) { .cap-shell .cap-poster__preview-btn:hover { background: var(--cap-color-primary); } }
  .cap-shell .cap-poster__preview-arrow { display: none; }
  .cap-shell .cap-poster__preview-btn.is-drawing .cap-poster__preview-arrow { display: inline-block; width: 14px; height: 14px; margin-left: var(--cap-space-gap-5); }   /* the phone's button has no arrow: the slot appears only for the spinner */
  .cap-shell .cap-below__rbody { margin-top: var(--cap-space-xs); }        /* 3a-2: "Your poster" 29.5 under the frame cells, like the birth label it replaces */
  .cap-shell .cap-poster__add-btn { margin-top: var(--cap-space-gap-3); }   /* 3a-2: the box → Add to cart 16 */
  /* the strip on a phone (3a-1 / 3a-2): its rule 15.5 under the note, 16 over the first line, and a SECOND rule 12 under the last line, before About */
  .cap-shell .cap-policy, .cap-shell .cap-below__rbody > .cap-policy { margin-top: var(--cap-space-gap-1); padding: var(--cap-space-md) 0 var(--cap-space-gap-6); border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); }
  .cap-shell .cap-well__zoom { width: 36px; height: 36px; }
  .cap-shell .cap-osum__row { padding: var(--cap-space-gap-5) var(--cap-space-md); }
  .cap-shell .cap-osum__cell { gap: var(--cap-space-gap-1); }
  .cap-shell .cap-osum__lines { gap: var(--cap-space-gap-1); }
  .cap-shell .cap-osum__k { font-weight: 500; letter-spacing: var(--cap-track-feature); }
  .cap-shell .cap-osum__total-k { letter-spacing: var(--cap-track-feature); }
  .cap-shell .cap-osum__total { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-price); }
  .cap-shell .cap-about__head { display: block; }
  .cap-shell .cap-specs__row { grid-template-columns: 96px minmax(0, 1fr); gap: 0 var(--cap-space-gap-6); padding: var(--cap-space-gap-5) 0; }
  .cap-shell .cap-also { height: var(--cap-also-thumb); gap: var(--cap-space-gap-7); padding-right: var(--cap-space-gap-7); }
  .cap-shell .cap-also__name { letter-spacing: var(--cap-track-faq); }
  .cap-shell .cap-also__sub { font-size: var(--cap-type-sm); }
  .cap-shell .cap-also__from-word { letter-spacing: var(--cap-track-feature); }
  .cap-shell .cap-compare { padding: var(--cap-space-section-head-below); align-items: center; text-align: center; }
  .cap-shell .cap-compare__line { font-size: var(--cap-type-h3-card); letter-spacing: 0; }
  .cap-shell .cap-product-end { height: var(--cap-space-xl); }
  .cap-shell .cap-poster-page { padding-bottom: var(--cap-space-band-close); }   /* room for the bar */
  /* the preview in the phone gallery (3a-2, 26 Sep): the sheet 8 under the top, the caption centred on two lines 8 under the
     sheet (no star), the magnifier top-right, the dots capsule at the foot with the preview as its first dot */
  .cap-shell .cap-gal__well { justify-content: flex-start; gap: var(--cap-space-gap-4); padding: var(--cap-space-gap-4) var(--cap-page-x) 0; }
  .cap-shell .cap-gal__caption { display: block; font-size: var(--cap-type-base); line-height: var(--cap-leading-well-caption); text-align: center; }
  .cap-shell .cap-gal__caption-star { display: none; }
  /* the sticky buy bar */
  .cap-shell .cap-buybar { display: flex; align-items: center; gap: var(--cap-space-gap-6); position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; padding: var(--cap-space-sm) var(--cap-page-x) calc(var(--cap-space-sm) + env(safe-area-inset-bottom)); background: var(--cap-color-bg); border-top: var(--cap-border-hairline) solid var(--cap-color-line); box-shadow: var(--cap-shadow-buybar); }   /* round 32 (owner 2026-10-06): 8 above and below the 40 button, plus the phone's own safe area only — at 12 / 16 the bar sat tall and merged with Safari's bottom bar */   /* solid page cream (owner 2026-10-01): the 96 % cream let the page show through */
  .cap-shell .cap-buybar[hidden] { display: none; }
  .cap-shell .cap-buybar__copy { display: flex; flex-direction: column; gap: var(--cap-space-gap-1); flex: 1; min-width: 0; }
  .cap-shell .cap-buybar__title { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-buybar-title); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); }
  .cap-shell .cap-buybar__sub { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-buybar-sub); letter-spacing: var(--cap-track-feature); text-transform: uppercase; color: var(--cap-color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cap-shell .cap-buybar__btn { flex: none; }
  /* the overlay's caption lines (3g) */
  .cap-shell .cap-overlay__hint { display: block; }
  .cap-shell .cap-overlay__close { width: 36px; height: 36px; font-size: var(--cap-type-data); }   /* the phone magnifier's 36 */
}

/* PHONE (390) — CD 3a-1 / 3a-2 / 3b / 3g, re-measured 27 Sep 2026 against mobile-key-screens.dc.html (27 Sep markup; the 26 Sep
   rules above stand where they still agree). Values the sheet has no name for are in design-system.json → mobile_pass. */
@media (max-width: 699px) {
  .cap-shell .cap-gal__dots { padding: calc(var(--cap-space-gap-3) + var(--cap-border-hairline)) var(--cap-space-gap-5); }
  /* the head: one caption-grey crumb line, the title 20 under it; eyebrow 12; lede 400 on 1.75; the price 18 under the lede */
  .cap-shell nav.cap-crumbs--in { font-size: var(--cap-type-eyebrow-card); line-height: normal; color: var(--cap-color-caption); margin: var(--cap-space-gap-2) 0 var(--cap-space-gap-3); }   /* 24 under the thumbs */
  .cap-shell .cap-crumbs--in :is(a, span) { color: var(--cap-color-caption); }
  .cap-shell .cap-purchase-panel__eyebrow { font-size: var(--cap-type-spec-label); line-height: normal; }
  .cap-shell .cap-purchase-panel__lede { font-weight: 400; line-height: var(--cap-leading-article); }
  .cap-shell .cap-purchase-panel__price { margin-top: var(--cap-space-gap-2); }
  .cap-shell .cap-purchase-panel__price .cap-caption { font-size: var(--cap-type-eyebrow-card); line-height: normal; color: var(--cap-color-caption); }
  .cap-shell .cap-purchase-panel__hook { font-size: var(--cap-type-read); line-height: var(--cap-leading-lede); margin-top: var(--cap-space-gap-3); }   /* 20 under the price */
  /* the pickers: muted labels on the normal line; every choice on a 16 corner; the unselected size's dot white on the emphasis line */
  .cap-shell .cap-picker__label { color: var(--cap-color-muted); line-height: normal; }
  .cap-shell .cap-sizes__row, .cap-shell .cap-orient__cell, .cap-shell .cap-frames__cell { border-radius: var(--cap-radius-md); }
  .cap-shell .cap-sizes__sub { color: var(--cap-color-caption); margin-left: calc(var(--cap-space-gap-2) - var(--cap-space-gap-6)); }
  .cap-shell .cap-sizes__price, .cap-shell .cap-sizes__row.is-selected .cap-sizes__price { font-size: var(--cap-type-label); }
  .cap-shell .cap-sizes__row:not(.is-selected) .cap-option__dot { background: var(--cap-color-surface); border-color: var(--cap-color-line-emphasis); }
  .cap-shell .cap-orient__cell:not(.is-active) { background: var(--cap-color-bg); }
  .cap-shell .cap-frames__chip--black { border-color: var(--cap-mp-color-frame-black-edge); }
  .cap-shell .cap-frames__chip--oak { border-color: var(--cap-mp-color-frame-oak-dark); border-top-color: var(--cap-mp-color-frame-oak-light); border-left-color: var(--cap-mp-color-frame-oak-light); }
  .cap-shell .cap-frames__chip--walnut { border-color: var(--cap-mp-color-frame-walnut-dark); border-top-color: var(--cap-mp-color-frame-walnut-light); border-left-color: var(--cap-mp-color-frame-walnut-light); }
  /* the birth box: 17px values on a 20 line (each cell 64); the button 16 under the hint, the note 10 under it in caption grey */
  .cap-shell .cap-rail-birth .cap-cells { --cap-cell-value: var(--cap-type-input); --cap-cell-value-h: var(--cap-leading-input); }
  .cap-shell .cap-rail-birth .cap-cells .cap-field > .cap-input { line-height: var(--cap-leading-input); letter-spacing: var(--cap-track-ui); }
  .cap-shell .cap-poster__preview-btn { margin-top: var(--cap-space-gap-4); }
  .cap-shell .cap-rail-note { line-height: normal; color: var(--cap-color-caption); margin-top: var(--cap-space-gap-1); }
  /* the strip: its top rule on the stronger line 14 under the note, 16 icons, 10 between; the rule under it 14 below the text */
  .cap-shell .cap-policy, .cap-shell .cap-below__rbody > .cap-policy { margin-top: var(--cap-space-gap-2); padding: var(--cap-space-gap-7) 0; border-top-color: var(--cap-color-line-strong); gap: var(--cap-space-gap-5); }
  .cap-shell .cap-policy__line { gap: var(--cap-space-gap-5); line-height: var(--cap-leading-lede); }
  .cap-shell .cap-policy__icon svg { width: var(--cap-mp-icon-policy); height: var(--cap-mp-icon-policy); }
  /* under the fold: About 16 / 1.75; 30 between sections, 12 under each head; specs on a 110 key column, 9 in */
  .cap-shell .cap-about { gap: var(--cap-space-gap-6); }
  .cap-shell .cap-about p { font-size: var(--cap-type-read); line-height: var(--cap-leading-article); }
  .cap-shell .cap-below__specs, .cap-shell .cap-below__faq, .cap-shell .cap-below__also { margin-top: calc(var(--cap-space-primary-air) - var(--cap-space-section-head-below)); }
  .cap-shell .cap-below__specs { gap: var(--cap-space-gap-6); }
  .cap-shell .cap-specs__row { grid-template-columns: var(--cap-mp-spec-key-w-product) minmax(0, 1fr); padding: calc(var(--cap-space-gap-5) - var(--cap-border-hairline)) 0; }
  .cap-shell .cap-specs__k { line-height: normal; }
  /* the phone's order — round 32 (owner 2026-10-06): QUESTIONS IS THE LAST SECTION BEFORE THE FOOTER on every page with an FAQ,
     so "Also available in" and "Compare the styles" come first (3a-1 had put Questions before them) */
  .cap-shell .cap-below__also { order: 8; }
  .cap-shell .cap-below__compare { order: 9; }
  .cap-shell .cap-below__faq { order: 10; }
  .cap-shell .cap-below__faq .cap-faq__head--quiet { border-top-width: var(--cap-border-emphasis); padding-bottom: var(--cap-space-gap-5); margin-bottom: 0; line-height: normal; }
  .cap-shell .cap-below__faq .cap-faq-q { font-size: var(--cap-type-nav); letter-spacing: var(--cap-track-faq); line-height: var(--cap-mp-leading-faq-q); }
  .cap-shell .cap-below__faq .cap-faq__a { font-size: var(--cap-type-lede); line-height: var(--cap-mp-leading-sub); padding-top: var(--cap-space-gap-6); }
  .cap-shell .cap-below__also { align-self: stretch; }   /* the section's `align-items: start` had shrink-wrapped the card to 270 */
  .cap-shell .cap-also__name { line-height: normal; }
  .cap-shell .cap-also__sub { font-size: var(--cap-type-label); line-height: normal; color: var(--cap-color-caption); }
  .cap-shell .cap-also__from-word { font-size: var(--cap-type-eyebrow-card); color: var(--cap-color-caption); }
  .cap-shell .cap-also__from { gap: var(--cap-space-gap-2); }
  .cap-shell .cap-also__price { line-height: normal; }
  .cap-shell .cap-below__compare { margin-top: calc(var(--cap-space-block-5) - var(--cap-space-section-head-below)); }
  .cap-shell .cap-compare__line { line-height: var(--cap-leading-serif-title); }
  .cap-shell .cap-below__compare .cap-btn { font-size: var(--cap-mp-type-btn-band); letter-spacing: var(--cap-track-btn); line-height: var(--cap-leading-btn-small); padding: var(--cap-btn-pad-small); }
  .cap-shell .cap-buybar__sub { color: var(--cap-color-caption); }
  /* the preview (3a-2): the sheet 204 × 272 centred in the well above a 44 foot, the caption 12 under it — 13 / 18 on a
     balanced 260 measure; the "Your poster" thumb a small white sheet, centred (no badge since 2026-09-29) */
  .cap-shell .cap-gal__well { --cap-well-sheet-w: var(--cap-mp-well-sheet-w); --cap-well-sheet-h: var(--cap-mp-well-sheet-h); justify-content: center; gap: var(--cap-space-gap-6); padding: 0 var(--cap-page-x) var(--cap-mp-well-pad-bottom); }
  .cap-shell .cap-gal__well .cap-well__sheet { box-shadow: var(--cap-mp-shadow-well-sheet); }
  .cap-shell .cap-gal__caption { font-size: var(--cap-type-label); line-height: var(--cap-leading-well-caption); max-width: var(--cap-mp-well-caption-measure); text-wrap: balance;
    padding: var(--cap-space-gap-2) 0 var(--cap-space-gap-1); }   /* the sheet's caption sits in its 16px parent's taller line boxes */
  .cap-shell .cap-gal__thumb--yours:not([hidden]) { display: flex; align-items: center; justify-content: center; }
  .cap-shell .cap-gal__thumb--yours img { width: var(--cap-mp-yours-sheet-w); height: var(--cap-mp-yours-sheet-h); padding: 0; object-fit: cover; background: var(--cap-color-surface); box-shadow: var(--cap-mp-shadow-yours-sheet); }
  .cap-shell .cap-gal__thumb--yours.is-landscape img { width: var(--cap-mp-yours-sheet-h); height: var(--cap-mp-yours-sheet-w); }   /* round 36: a landscape sheet's thumb lies on its side like the sheet (it was cropped into the portrait box) */
  /* "Your poster": the actions centred on their rows, the stepper on the stronger line, the total 13 under a 12 label; Add to cart
     13 on 16 / 24; its note 10 under it */
  .cap-shell .cap-osum__act { align-self: center; line-height: normal; }
  .cap-shell .cap-qstep { border-color: var(--cap-color-line-strong); }
  .cap-shell .cap-osum__total-k { font-size: var(--cap-type-spec-label); line-height: normal; }
  .cap-shell .cap-osum__total { font-size: var(--cap-type-label); }
  .cap-shell .cap-poster__add-btn { font-size: var(--cap-mp-type-btn-band); line-height: var(--cap-leading-ui); padding: var(--cap-space-block-3) var(--cap-space-block-5); color: var(--cap-color-on-ink); }
  .cap-shell .cap-below__rbody > .cap-rail-note { margin-top: 0; }
  /* the enlarged view (3g): the sheet full-bleed, its two caption lines 16 apart; the sheet centred between the ✕ and the
     caption (round 34 — the grid is set for every width below) */
  .cap-shell .cap-poster__overlay-img { box-shadow: var(--cap-shadow-overlay-sheet); }
  .cap-shell .cap-poster__overlay .cap-overlay__foot { gap: var(--cap-space-gap-8); line-height: normal; }
}

/* THE ZOOM SCREEN (owner, round 34): three rows — the ✕'s corner, the poster, the caption — so the poster sits centred
   between the ✕ and the caption, the same space above it as below it, at every width; it shrinks to fit, never under the ✕
   or the caption. The stage still closes on a tap outside the image. */
.cap-shell .cap-poster__overlay { --cap-poster-ov-top: calc(var(--cap-space-md) + var(--cap-tap-min)); }
.cap-shell .cap-poster__overlay-stage { display: grid; grid-template-rows: var(--cap-poster-ov-top) minmax(0, 1fr) auto; row-gap: var(--cap-space-md); justify-items: center; align-items: center; padding: 0 var(--cap-space-md) var(--cap-space-lg); }
.cap-shell .cap-poster__overlay-img { grid-row: 2; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cap-shell .cap-poster__overlay .cap-overlay__foot { grid-row: 3; position: static; }
@media (max-width: 699px) {   /* the phone: the sheet full-bleed, the ✕ 36 */
  .cap-shell .cap-poster__overlay { --cap-poster-ov-top: calc(var(--cap-space-md) + 36px); }
  .cap-shell .cap-poster__overlay-stage { padding: 0 0 var(--cap-space-lg); }
}

/* THE FOOTER GAP (owner 2026-10-02): from the last thing on the page to the footer, 64 from 700 up and 40 on a phone — the
   token's pair (--cap-space-footer-gap). Appended last so it wins over the page's earlier end spacing. */
.cap-shell .cap-product-end { height: var(--cap-space-footer-gap); }
@media (max-width: 699px) {
  .cap-shell .cap-poster-page { padding-bottom: 0; }   /* the buy bar is fixed: it covers the footer's foot, not the gap above it */
}

/* round 29 (owner 2026-10-05): the 38 px style name on T9-1 / T9-2 tracks -0.022em */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-purchase-panel__h1 { letter-spacing: var(--cap-track-display-mid); }
}