/* Capriastro poster HUB /posters/ — the 23 Sep sheets D14 (1440) / T2 (820) / 3f (390).
   Centred hero → the style grid (3 cells: two tiles + the teaser; 2-up on a phone with the teaser as
   text) → the Specifications panel (4 cells + Ships to; 2 × 2 on tablet; rows on a phone) → How it
   works (3-up with rules; a list on a phone) → Questions (660 wide). Token-only; every rule under
   `.cap-shell`. */

/* ─── hero ───────────────────────────────────────────────── */
.cap-shell .cap-hub__hero { padding-top: var(--cap-space-hero-open); display: flex; justify-content: center; }
.cap-shell .cap-hub__hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cap-space-hero-step); max-width: var(--cap-measure-hero); }
.cap-shell .cap-hub__h1 { font-size: var(--cap-type-xl); line-height: var(--cap-leading-hero-mid); letter-spacing: var(--cap-track-hero-mid); margin: 0; }
.cap-shell .cap-hub__h1-tail { white-space: nowrap; }   /* the words after the comma never split (owner 2026-10-01) */
.cap-shell .cap-hub__lede { font-size: var(--cap-type-lede-hero); line-height: var(--cap-leading-lede); max-width: 44ch; margin: 0; }
.cap-shell .cap-hub__meta { color: var(--cap-color-muted); }

/* ─── the style grid ─────────────────────────────────────── */
.cap-shell .cap-hub__grid-wrap { padding-top: var(--cap-space-band-close); }
.cap-shell .cap-hub__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cap-space-lg); align-items: stretch; }
.cap-shell .cap-tile { display: flex; flex-direction: column; 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-tile:hover { box-shadow: var(--cap-shadow-hub-card); } }
.cap-shell .cap-tile__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--cap-color-bg-deep); overflow: hidden; }
.cap-shell .cap-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* THE NEW BADGE (owner 2026-09-26, twice): the word centred on the ink. An integer box — height + line-height the same token,
   no vertical padding — so no engine's rounding of a 27.75 px box can drift the caps; the letter-spacing's trailing space is
   dropped from the right pad so the word sits centred across too. Measured (headless Chrome, 2x): caps 20 over / 18 under
   at 1440, 17 / 14 at 390 before this; the owner's browser is to be named if it still reads off. */
.cap-shell .cap-tile__badge { font-size: var(--cap-type-btn); letter-spacing: var(--cap-track-btn); height: var(--cap-badge-corner-h); line-height: var(--cap-badge-corner-h); padding: 0 calc(var(--cap-space-gap-6) - var(--cap-track-btn)) 0 var(--cap-space-gap-6); box-sizing: border-box; border: 0; }
.cap-shell .cap-tile__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-sm); padding: var(--cap-space-lg); }
.cap-shell .cap-tile__eyebrow { color: var(--cap-color-primary); }
.cap-shell .cap-tile__name { font-family: var(--cap-font-display); font-weight: 800; font-size: var(--cap-type-product-tile); line-height: var(--cap-leading-tight-card); letter-spacing: var(--cap-track-tile); color: var(--cap-color-text); }
.cap-shell .cap-tile__from { display: flex; align-items: baseline; gap: var(--cap-space-gap-3); }
.cap-shell .cap-tile__line { display: none; }   /* the phone's italic line (3f); desktop / tablet keep the eyebrow + button */
.cap-shell .cap-tile__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-tile__price { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-tile-price); letter-spacing: var(--cap-track-price); line-height: var(--cap-leading-tight); color: var(--cap-color-text); }
.cap-shell .cap-tile__btn { margin-top: var(--cap-space-sm); border: var(--cap-border-hairline) solid var(--cap-color-text); color: var(--cap-color-text); font-size: var(--cap-type-btn); letter-spacing: var(--cap-track-btn); padding: var(--cap-btn-pad-xs); text-transform: uppercase; }
@media (hover: hover) { .cap-shell .cap-tile:hover .cap-tile__btn { background: var(--cap-color-text); color: var(--cap-color-bg); } }
/* the teaser card: dark-cream ground, contents bottom-aligned with the tiles' text band */
.cap-shell .cap-hub__more { background: var(--cap-color-bg-deep); padding: var(--cap-space-lg); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--cap-space-gap-6); }
.cap-shell .cap-hub__more-eyebrow { color: var(--cap-color-primary); }
.cap-shell .cap-hub__more-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-text); }

/* ─── specifications ─────────────────────────────────────── */
.cap-shell .cap-hub__specs-wrap { padding-top: var(--cap-space-xl); }
.cap-shell .cap-hub__specs { background: var(--cap-color-bg-deep); padding: var(--cap-space-block-5) var(--cap-space-panel-pad) var(--cap-space-sm); }   /* D14: 24 top */
.cap-shell .cap-hub__specs-head { display: block; border-bottom: var(--cap-border-hairline) solid var(--cap-color-line-emphasis); padding-bottom: var(--cap-space-md); }
.cap-shell .cap-hub__specs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--cap-space-lg); }
.cap-shell .cap-hub__spec { display: flex; flex-direction: column; gap: var(--cap-space-gap-3); padding: var(--cap-space-section-head-below) 0; position: relative; }
.cap-shell .cap-hub__spec + .cap-hub__spec { padding-left: var(--cap-space-lg); }
.cap-shell .cap-hub__spec + .cap-hub__spec::before { content: ""; position: absolute; left: 0; top: var(--cap-space-section-head-below); bottom: var(--cap-space-section-head-below); width: 1px; background: var(--cap-color-line-emphasis); }
.cap-shell .cap-hub__spec:nth-child(4n + 1)::before { display: none; }
.cap-shell .cap-hub__spec:nth-child(4n + 1) { padding-left: 0; }
.cap-shell .cap-hub__spec-k { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-hub-spec-label); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-muted); }   /* role G (CD 24 Sep) */
.cap-shell .cap-hub__spec-v { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-hub-spec-value); letter-spacing: var(--cap-track-faq); line-height: var(--cap-leading-data); color: var(--cap-color-text); }
.cap-shell .cap-hub__spec-v--muted { color: var(--cap-color-caption); }   /* D14 · T2 · 3f: the note line in the caption grey (owner 2026-10-01) */


/* ─── questions ──────────────────────────────────────────── */
.cap-shell .cap-hub__faq-wrap { padding-top: var(--cap-space-xl); }
.cap-shell .cap-hub__faq { max-width: var(--cap-measure); }
.cap-shell .cap-hub__faq-head { display: block; border-top: var(--cap-border-emphasis) solid var(--cap-color-line-emphasis); padding-top: var(--cap-gutter); margin: 0 0 var(--cap-space-gap-7);   /* D14: the Questions rule is 2 px */ color: var(--cap-color-heading-quiet); }
.cap-shell .cap-hub__faq .cap-faq-q { color: var(--cap-color-text); }
.cap-shell .cap-hub__faq .cap-faq__a a { border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary); text-decoration: none; }   /* the colour is the site-wide violet (components.css, owner 2026-09-29) */
.cap-shell .cap-hub__end { height: var(--cap-space-page-end); }   /* D14: 80 */

/* ─── tablet 700–1279 (T2): desktop type on a 2-up grid, 56 gutters (the 1280 rule: 1024 follows the tablet sheet) ── */
@media (max-width: 1279px) {
  .cap-shell .cap-hub .cap-inset { padding-left: var(--cap-page-x-mid); padding-right: var(--cap-page-x-mid); }
  .cap-shell .cap-hub__hero { padding-top: var(--cap-space-band-close); }
  .cap-shell .cap-hub__meta { display: none; }
  .cap-shell .cap-hub__grid-wrap { padding-top: var(--cap-space-lg); }
  .cap-shell .cap-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cap-space-lg); }
  /* the teaser leaves the grid on tablet too: plain text under the tiles (T2) */
  .cap-shell .cap-hub__more { grid-column: 1 / -1; background: transparent; padding: var(--cap-space-md) 0 0; justify-content: flex-start; gap: var(--cap-space-gap-5); }
  .cap-shell .cap-hub__specs-wrap { padding-top: var(--cap-space-primary-air); }
  .cap-shell .cap-hub__specs { padding-left: var(--cap-space-lg); padding-right: var(--cap-space-lg); }
  .cap-shell .cap-hub__specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-shell .cap-hub__spec:nth-child(2n + 1)::before { display: none; }
  .cap-shell .cap-hub__spec:nth-child(2n + 1) { padding-left: 0; }
}
@media (min-width: 700px) and (max-width: 1279px) {   /* T2: the heading on two lines ("Your chart, drawn to / hang."), the hero's 20 steps, 20 between the tiles, 40 above them */
  .cap-shell .cap-hub__h1 { max-width: none; }   /* one line where it fits (owner 2026-10-01; T2's 18ch left "hang" alone) — else it breaks after the comma */
  .cap-shell .cap-hub__hero-inner { max-width: none; }   /* the headline keeps its 18ch; the lede takes the width below */
  .cap-shell .cap-hub__lede { max-width: var(--cap-hub-lede-mid); line-height: var(--cap-leading-lede-hero); }   /* T2: 22 on 1.45 (round 29 — it was 1.5, 1 px a line more) */   /* three lines at 820 and 1024 (owner 2026-10-01; words unchanged): 656 is the narrowest that sets them in three at 22 px — 672 leaves room for another browser's measure */
  .cap-shell .cap-hub__hero-inner { gap: var(--cap-space-field-x); }
  .cap-shell .cap-hub__grid-wrap { padding-top: var(--cap-space-panel-pad); }
  .cap-shell .cap-hub__grid { gap: var(--cap-space-field-x); }
  .cap-shell .cap-hub__more { padding-top: var(--cap-space-xs); gap: var(--cap-space-gap-6); }   /* 24 under the tiles (20 row gap + 4), 12 eyebrow → line */
  .cap-shell .cap-hub__specs-wrap { padding-top: var(--cap-space-band-close); }
  .cap-shell .cap-hub__spec-k { color: var(--cap-color-text); }
  .cap-shell .cap-hub__faq { max-width: none; }   /* the 1280 rule: the full column (T2) */
}

/* ─── phone < 700 (3f) ───────────────────────────────────── */
@media (max-width: 699px) {
  .cap-shell .cap-hub .cap-inset { padding-left: var(--cap-page-x); padding-right: var(--cap-page-x); }
  .cap-shell .cap-hub__hero { padding-top: var(--cap-space-hero-open); }
  .cap-shell .cap-hub__hero-inner { gap: var(--cap-space-gap-7); }
  .cap-shell .cap-hub__h1 { font-size: var(--cap-type-xl); line-height: var(--cap-leading-hero); letter-spacing: var(--cap-track-hero); }
  .cap-shell .cap-hub__lede { font-size: var(--cap-type-base); line-height: var(--cap-leading-body); max-width: none; }
  .cap-shell .cap-hub__grid-wrap { padding-top: var(--cap-space-section-head-below); }
  .cap-shell .cap-hub__grid { gap: var(--cap-space-gap-6); }
  .cap-shell .cap-tile__badge { font-size: var(--cap-type-badge); padding: 0 calc(var(--cap-space-gap-5) - var(--cap-track-btn)) 0 var(--cap-space-gap-5); }
  .cap-shell .cap-tile__body { padding: var(--cap-space-gap-6) var(--cap-space-tile-text) var(--cap-space-gap-7); gap: var(--cap-space-gap-3); }
  .cap-shell .cap-tile__eyebrow { display: none; }
  .cap-shell .cap-tile__from { gap: var(--cap-space-gap-2); margin-top: calc(var(--cap-space-gap-1) * -1); }
  .cap-shell .cap-tile__btn { display: none; }
  .cap-shell .cap-hub__more { grid-column: 1 / -1; background: transparent; padding: var(--cap-space-gap-6) 0 0; justify-content: flex-start; gap: var(--cap-space-gap-5); }
  .cap-shell .cap-hub__more-line { font-size: var(--cap-type-h3-card); line-height: var(--cap-leading-tight-card); letter-spacing: 0; }
  .cap-shell .cap-hub__specs-wrap { padding-top: var(--cap-space-lg); }
  .cap-shell .cap-hub__specs { padding: var(--cap-space-md) var(--cap-space-panel-pad) var(--cap-space-gap-6); }
  .cap-shell .cap-hub__specs-head { padding-bottom: var(--cap-space-gap-6); }
  .cap-shell .cap-hub__specs-grid { display: block; }
  .cap-shell .cap-hub__spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: var(--cap-space-gap-1) var(--cap-space-gap-6); padding: var(--cap-space-head-y) 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line-emphasis); }
  .cap-shell .cap-hub__spec:first-child { border-top: 0; }
  .cap-shell .cap-hub__spec + .cap-hub__spec { padding-left: 0; }
  .cap-shell .cap-hub__spec::before { display: none !important; }
  .cap-shell .cap-hub__spec-k { grid-row: 1 / span 2; align-self: start; }
  .cap-shell .cap-hub__spec-v { grid-column: 2; font-weight: 400; letter-spacing: var(--cap-track-data); }
  .cap-shell .cap-hub__faq-wrap { padding-top: var(--cap-space-primary-air); }
}

/* PHONE (390) — CD 3f, measured 27 Sep 2026 against mobile-key-screens.dc.html (27 Sep markup), every value from the
   sheet; the ones it has no name for are in design-system.json → mobile_pass (provisional). */
@media (max-width: 699px) {
  .cap-shell .cap-hub__hero .cap-eyebrow { font-size: var(--cap-type-spec-label); }
  .cap-shell .cap-hub__lede { font-weight: 400; line-height: var(--cap-leading-article); }
  .cap-shell .cap-tile__badge { height: var(--cap-mp-badge-corner-h-hub); line-height: var(--cap-mp-badge-corner-h-hub); color: var(--cap-color-on-ink); }
  .cap-shell .cap-tile__name { font-family: var(--cap-font-display-sm); line-height: var(--cap-leading-tight); }
  .cap-shell .cap-tile__from-word { color: var(--cap-color-caption); line-height: normal; }
  /* the product box (3f, CD 29 Sep): name · the italic "Framed or Unframed" line · FROM $39 at 16 (the "See options" link retired) */
  .cap-shell .cap-tile__line { display: block; font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-subchapter); line-height: normal; color: var(--cap-color-caption); }
  .cap-shell .cap-tile__from { margin-top: 0; padding-top: var(--cap-space-gap-1); }
  .cap-shell .cap-tile__price { font-size: var(--cap-type-base); line-height: normal; }
  .cap-shell .cap-hub__more-eyebrow { font-size: var(--cap-type-spec-label); line-height: normal; }
  .cap-shell .cap-hub__more-line { line-height: var(--cap-leading-serif-title); }
  /* specifications: a 100 key column in ink, the rows ruled under (not over) on the deeper line, second lines in caption */
  .cap-shell .cap-hub__spec { grid-template-columns: var(--cap-mp-hub-spec-key-w) 1fr; column-gap: var(--cap-space-gap-6); row-gap: var(--cap-space-gap-1); align-items: baseline;
    padding: var(--cap-space-field-cell-y) 0; border-top: 0; border-bottom: var(--cap-border-hairline) solid var(--cap-color-line-deep); }
  .cap-shell .cap-hub__spec:last-child { border-bottom: 0; }
  .cap-shell .cap-hub__spec-k { color: var(--cap-color-text); line-height: normal; align-self: baseline; }
  .cap-shell .cap-hub__spec-v--muted { color: var(--cap-color-caption); }
  /* questions: 30 above and below, 16px questions on 1.3, 15 / 1.65 answers */
  .cap-shell .cap-hub__faq-head { padding-bottom: var(--cap-space-gap-5); margin-bottom: 0; line-height: normal; }
  .cap-shell .cap-hub__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-hub__faq .cap-faq__a { font-size: var(--cap-type-lede); line-height: var(--cap-mp-leading-sub); }
  .cap-shell .cap-hub__end { height: var(--cap-space-primary-air); }
}

/* 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-hub__end { height: var(--cap-space-footer-gap); }