/*
 * relay-deck.css — the Relay deck system · archetypes, figures, present mode, print
 * v1 · 2026-09-10
 *
 * LAW. guidelines/GUIDE.presentations.md owns every value here (type scale §2, the three
 * surfaces and the drenched budget §3, grid §4, archetypes §5, motifs §6, font delivery §7).
 * guidelines/GUIDE.motion-register.md owns the beats (present-mode only, on demand,
 * transform/opacity, complete resting frame under reduced motion, one per slide).
 *
 * MATERIAL. Colour comes from brand/generated/relay-tokens-v36.css — link it before this
 * file. Light slides re-theme with the site; drenched slides are self-contained and keep
 * their colours in both themes, per the guide.
 *
 * THE STAGE. One 16:9 container; every size inside it is a fraction of its width (cqw), so a
 * single stylesheet renders the living page, the projected screen and the 10 × 5.625 in PDF
 * with identical proportions. 1cqw = 1% of the stage width = 12.8px at the 1280 × 720 canvas.
 * Guide sizes converted: kicker 10pt → 1.05cqw · headline 48pt → 5cqw · body 14.5pt → 1.5cqw ·
 * quote 15.5pt → 1.7cqw · foot 9pt → .95cqw · safe margin 48px → 3.75cqw.
 *
 * ANATOMY. .rly-deck > .rly-slide > (.rly-prov caption, page chrome) + .rly-stage > .rly-stage__in
 * (kicker · headline · body · figure · quote/foot) + .rly-notes (speaker note, hidden on the
 * face, read by present mode and by scripts/build_deck.py). Provenance never reaches a face.
 *
 * ARCHETYPES (T##). T01 cover · T02 statement (+ optional figure) · T03 statement + callout ·
 * T04 flow · T05 category · T06 proof · T07 stat · T08 round · T09 ladder · T10 bars ·
 * T11 timeline · T12 layers · T13 landscape · T14 roster · T15 close · T16 gate divider.
 * The library: decks/templates/ · the master: decks/master/ · the cut: scripts/build_deck.py
 */

/* TYPE:START — GENERATED from brand/relay-typography.json by scripts/build_typography.py — do not edit; edit the JSON and rebuild.
 * contract v1.19.0-relay.1 · 2026-09-30 · html scale 0.75 · 1 pt = 0.1042 cqw on this stage */
.rly-stage {
  --rly-type-kicker: 1.04cqw;
  --rly-type-headline: 5cqw;
  --rly-type-headline-cover: 5.42cqw;
  --rly-type-headline-gate: 4.17cqw;
  --rly-type-body: 1.51cqw;
  --rly-type-body-cover: 1.67cqw;
  --rly-type-quote: 1.61cqw;
  --rly-type-quote-display: 2.71cqw;
  --rly-type-callout: 1.3cqw;
  --rly-type-list: 1.3cqw;
  --rly-type-contact: 1.46cqw;
  --rly-type-caption: 0.94cqw;
  --rly-type-foot: 0.94cqw;
  --rly-type-wordmark: 1.67cqw;
  --rly-type-label: 1.04cqw;
  --rly-type-label-small: 0.89cqw;
  --rly-type-chip: 2.08cqw;
  --rly-type-stat: 6.25cqw;
  --rly-type-big: 5cqw;
  --rly-type-round: 4.58cqw;
  --rly-type-pill: 1.15cqw;
  --rly-type-fig-title: 1.46cqw;
  --rly-type-fig-body: 1.3cqw;
  --rly-type-fig-small: 1.15cqw;
  --rly-type-fam-display: var(--rly-font-display);
  --rly-type-fam-ui: var(--rly-font);
  --rly-type-fam-mono: var(--rly-font-mono);
  --rly-style-kicker: normal; --rly-weight-kicker: 600;
  --rly-style-headline: italic; --rly-weight-headline: 400;
  --rly-style-headline-cover: italic; --rly-weight-headline-cover: 400;
  --rly-style-headline-gate: italic; --rly-weight-headline-gate: 400;
  --rly-style-body: normal; --rly-weight-body: 300;
  --rly-style-body-cover: normal; --rly-weight-body-cover: 300;
  --rly-style-quote: italic; --rly-weight-quote: 400;
  --rly-style-quote-display: italic; --rly-weight-quote-display: 500;
  --rly-style-callout: normal; --rly-weight-callout: 300;
  --rly-style-list: normal; --rly-weight-list: 300;
  --rly-style-contact: normal; --rly-weight-contact: 300;
  --rly-style-caption: normal; --rly-weight-caption: 400;
  --rly-style-foot: normal; --rly-weight-foot: 400;
  --rly-style-wordmark: normal; --rly-weight-wordmark: 600;
  --rly-style-label: normal; --rly-weight-label: 400;
  --rly-style-label-small: normal; --rly-weight-label-small: 400;
  --rly-style-chip: normal; --rly-weight-chip: 600;
  --rly-style-stat: normal; --rly-weight-stat: 600;
  --rly-style-big: normal; --rly-weight-big: 600;
  --rly-style-round: normal; --rly-weight-round: 600;
  --rly-style-pill: normal; --rly-weight-pill: 500;
  --rly-style-fig-title: normal; --rly-weight-fig-title: 600;
  --rly-style-fig-body: normal; --rly-weight-fig-body: 300;
  --rly-style-fig-small: normal; --rly-weight-fig-small: 300;
}
:root {
  --rly-type-fam-display: var(--rly-font-display);
  --rly-type-fam-ui: var(--rly-font);
  --rly-type-fam-mono: var(--rly-font-mono);
  --rly-style-kicker: normal; --rly-weight-kicker: 600;
  --rly-style-headline: italic; --rly-weight-headline: 400;
  --rly-style-headline-cover: italic; --rly-weight-headline-cover: 400;
  --rly-style-headline-gate: italic; --rly-weight-headline-gate: 400;
  --rly-style-body: normal; --rly-weight-body: 300;
  --rly-style-body-cover: normal; --rly-weight-body-cover: 300;
  --rly-style-quote: italic; --rly-weight-quote: 400;
  --rly-style-quote-display: italic; --rly-weight-quote-display: 500;
  --rly-style-callout: normal; --rly-weight-callout: 300;
  --rly-style-list: normal; --rly-weight-list: 300;
  --rly-style-contact: normal; --rly-weight-contact: 300;
  --rly-style-caption: normal; --rly-weight-caption: 400;
  --rly-style-foot: normal; --rly-weight-foot: 400;
  --rly-style-wordmark: normal; --rly-weight-wordmark: 600;
  --rly-style-label: normal; --rly-weight-label: 400;
  --rly-style-label-small: normal; --rly-weight-label-small: 400;
  --rly-style-chip: normal; --rly-weight-chip: 600;
  --rly-style-stat: normal; --rly-weight-stat: 600;
  --rly-style-big: normal; --rly-weight-big: 600;
  --rly-style-round: normal; --rly-weight-round: 600;
  --rly-style-pill: normal; --rly-weight-pill: 500;
  --rly-style-fig-title: normal; --rly-weight-fig-title: 600;
  --rly-style-fig-body: normal; --rly-weight-fig-body: 300;
  --rly-style-fig-small: normal; --rly-weight-fig-small: 300;
}
/* TYPE:END */


/* ── deck + slide wrapper (page chrome) ─────────────────────────────────────── */
.rly-deck { display: flex; flex-direction: column; gap: 26px; }
.rly-slide { margin: 0; }
.rly-prov { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--rly-font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--rly-text-muted); margin: 0 0 6px; }
.rly-prov b { font-weight: 600; color: var(--rly-text-2); letter-spacing: .08em; }
.rly-prov .why { font-family: var(--rly-font); letter-spacing: 0; font-size: 12.5px; color: var(--rly-text-muted); }
.rly-notes { display: none; }

/* ── the stage ──────────────────────────────────────────────────────────────── */
.rly-stage { container-type: inline-size; aspect-ratio: 16 / 9; width: 100%; position: relative; overflow: hidden; background: var(--rly-bg); border: .5px solid var(--rly-border); border-radius: 8px; color: var(--rly-text-2); font-family: var(--rly-font); font-weight: var(--rly-weight-body, 300); }
.rly-stage__in { position: absolute; inset: 0; padding: 3.75cqw; display: flex; flex-direction: column; font-size: 1.5cqw; line-height: 1.6; }
/* A <p> carries the UA's 1em margins, and a figure's <p> at 6.67cqw carried 6.67cqw of them: the stat row and the
 * metric row fell off the bottom of the first real ES cut (1.13.0). Every framework class sets the margin it wants. */
.rly-stage__in p { margin: 0; }
.rly-stage svg { display: block; }
.rly-stage b, .rly-stage strong { font-weight: 500; color: var(--rly-text); }

/* type roles */
.rly-kicker { font-family: var(--rly-font-mono); font-weight: var(--rly-weight-kicker, 600); font-size: var(--rly-type-kicker); letter-spacing: .2em; text-transform: uppercase; color: var(--rly-accent-text); margin: 0 0 1cqw; }
.rly-kicker__b { color: var(--rly-accent-ui); font-weight: inherit; }
.rly-stage--drenched .rly-kicker__b { color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-headline { font-family: var(--rly-font-display); font-style: var(--rly-style-headline, italic); font-weight: var(--rly-weight-headline, 400); font-size: var(--rly-type-headline); line-height: 1.08; color: var(--rly-text); margin: 0 0 1.6cqw; max-width: var(--rly-measure-headline, 78cqw); text-wrap: balance; }
.rly-headline--cover { font-size: var(--rly-type-headline-cover); margin-top: 7cqw; }
.rly-headline--pivot { max-width: var(--rly-measure-pivot, 88cqw); }
.rly-body { font-size: var(--rly-type-body); line-height: 1.6; color: var(--rly-text-2); max-width: 66cqw; margin: 0 0 1cqw; }
.rly-body--wide { max-width: 78cqw; }
.rly-framing { font-size: var(--rly-type-body-cover); max-width: 60cqw; }
.rly-quote { font-family: var(--rly-font-display); font-style: var(--rly-style-quote, italic); font-weight: var(--rly-weight-quote, 400); font-size: var(--rly-type-quote); line-height: 1.4; color: var(--rly-text); border-top: 1px solid var(--rly-border); margin-top: auto; padding-top: 1.3cqw; max-width: 66cqw; }
.rly-foot { font-family: var(--rly-font-mono); font-size: var(--rly-type-foot); letter-spacing: .06em; color: var(--rly-text-muted); margin-top: auto; }
.rly-callout { background: var(--rly-surface); border: .5px solid var(--rly-border); border-radius: .6cqw; padding: 1.1cqw 1.4cqw; font-size: var(--rly-type-callout); line-height: 1.5; color: var(--rly-text-2); }
.rly-callout b { font-weight: 600; }
.rly-mast { display: flex; align-items: center; gap: 1cqw; }
.rly-mast svg { width: 2.4cqw; height: 2.4cqw; color: var(--rly-accent-ui); }
.rly-wordmark { font-weight: var(--rly-weight-wordmark, 600); font-size: var(--rly-type-wordmark); letter-spacing: -.02em; color: var(--rly-text); }
.rly-contact { font-size: var(--rly-type-contact); margin-top: 1.4cqw; line-height: 1.6; }
.rly-contact a { color: var(--rly-accent-text); text-decoration: none; }
/* invite (T15): a QR the cut generates from the invite-url variable; the aside is cut out when the variable is unset */
.rly-invite { position: absolute; right: 3.75cqw; top: 21cqw; width: 18cqw; display: flex; flex-direction: column; align-items: center; gap: .7cqw; text-align: center; }
.rly-qr__img { width: 16cqw; height: 16cqw; display: block; background: var(--rly-bg); padding: .8cqw; border-radius: .9cqw; }
.rly-qr__l { font-family: var(--rly-font-mono); font-weight: var(--rly-weight-label, 600); font-size: var(--rly-type-caption); letter-spacing: .06em; color: var(--rly-accent-text); }
.rly-qr__t { font-size: var(--rly-type-fig-small); line-height: 1.4; }
.rly-stage--drenched .rly-qr__l { color: var(--rly-drench-accent, currentColor); }
.rly-two { display: flex; gap: 3.2cqw; align-items: flex-start; }
.rly-two > * { flex: 1 1 0; min-width: 0; }
.rly-two > .rly-two__side { flex: 0 0 34cqw; }
.rly-fig { margin: 1.2cqw 0 .6cqw; }
.rly-cap { font-family: var(--rly-font-mono); font-size: var(--rly-type-caption); letter-spacing: .05em; color: var(--rly-text-muted); margin-top: 1cqw; }

/* ── figures ────────────────────────────────────────────────────────────────── */
/* sessions (T02 · M02): the wall */
.rly-sessions { display: flex; align-items: center; gap: 1.3cqw; flex-wrap: wrap; }
.rly-session { background: var(--rly-surface); border: .5px solid var(--rly-border); border-radius: .6cqw; padding: .8cqw 1.3cqw; text-align: center; }
.rly-session__l { font-family: var(--rly-font-mono); font-weight: var(--rly-weight-label, 600); font-size: .95cqw; letter-spacing: .12em; color: var(--rly-text); }
.rly-session__s { font-size: 1.05cqw; color: var(--rly-text-muted); }
.rly-x { width: 1.2cqw; height: 1.2cqw; color: var(--rly-text-muted); flex: 0 0 auto; }

/* flow (T04 · M06/M11): Send → Route → Receive, and the Code chip */
.rly-flow { display: flex; gap: 1.6cqw; align-items: flex-start; }
.rly-step { flex: 1 1 0; min-width: 0; }
.rly-arrow { width: 2.2cqw; height: 2.2cqw; flex: 0 0 auto; color: var(--rly-border-hi); margin-top: .4cqw; }
.rly-step__n { display: inline-flex; align-items: center; justify-content: center; width: 2.7cqw; height: 2.7cqw; border-radius: 9999px; border: 1px solid var(--rly-accent-ui); font-family: var(--rly-font-mono); font-weight: var(--rly-weight-kicker, 600); font-size: 1.05cqw; color: var(--rly-accent-text); margin-bottom: .6cqw; }
.rly-step__name { font-weight: 600; font-size: var(--rly-type-fig-title); color: var(--rly-text); margin-bottom: .3cqw; }
.rly-step__desc { font-size: var(--rly-type-fig-body); line-height: 1.5; color: var(--rly-text-2); }
.rly-chip-row { display: flex; align-items: center; gap: 1.3cqw; margin-top: 1.4cqw; flex-wrap: wrap; }
.rly-code-chip { display: inline-block; font-family: var(--rly-font-mono); font-weight: var(--rly-weight-chip, 600); letter-spacing: .16em; text-transform: uppercase; font-size: var(--rly-type-chip); color: var(--rly-accent-text); background: var(--rly-accent-tint); border-radius: .5cqw; padding: .5cqw 1.3cqw; }
.rly-chip-note { font-family: var(--rly-font-mono); font-size: var(--rly-type-caption); letter-spacing: .04em; color: var(--rly-text-muted); }

/* categories (T05 · M07/M14) */
.rly-cats { display: flex; flex-direction: column; gap: .6cqw; }
.rly-cat { background: var(--rly-surface); border: .5px solid var(--rly-border); border-radius: .6cqw; padding: .8cqw 1.2cqw; font-size: var(--rly-type-fig-body, 1.22cqw); line-height: 1.45; color: var(--rly-text-2); }
.rly-stage--drenched .rly-cat, .rly-stage--drenched .rly-callout { background: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 6%, transparent); border-color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 14%, transparent); color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 80%, transparent); }
.rly-stage--drenched .rly-cat b, .rly-stage--drenched .rly-callout b { color: var(--rly-drench-text, #f3f3f3); }
.rly-cat b { font-weight: 600; }

/* proof rows (T06 · M08): evidence, never a hero number */
.rly-proof { list-style: none; margin: .4cqw 0 0; padding: 0; max-width: 70cqw; }
.rly-proof li { padding: .75cqw 0; border-top: 1px solid var(--rly-border); font-size: var(--rly-type-fig-body); line-height: 1.5; color: var(--rly-text-2); }
.rly-proof li b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* stat (T07 · M21, and any slide that has EARNED the figure): mono, tabular; amber only when drenched */
.rly-stat { font-family: var(--rly-font-mono); font-weight: var(--rly-weight-stat, 600); font-size: var(--rly-type-stat); letter-spacing: .01em; line-height: 1.05; color: var(--rly-accent-text); font-variant-numeric: tabular-nums; }
.rly-stat__l { font-size: var(--rly-type-fig-title); margin-top: .3cqw; max-width: 60cqw; }
.rly-facts { display: flex; gap: 1.6cqw; margin-top: 1.8cqw; flex-wrap: wrap; }
.rly-fact { flex: 1 1 18cqw; border-top: 1px solid var(--rly-border); padding-top: .8cqw; font-size: 1.15cqw; line-height: 1.5; }
.rly-fact b { display: block; font-weight: 600; font-size: 1.3cqw; }
.rly-big { font-family: var(--rly-font-mono); font-weight: var(--rly-weight-big, 600); font-size: var(--rly-type-big); line-height: 1; letter-spacing: .02em; color: var(--rly-accent-text); font-variant-numeric: tabular-nums; }
.rly-big__l { font-family: var(--rly-font-mono); font-size: var(--rly-type-label); letter-spacing: .12em; text-transform: uppercase; color: var(--rly-text-muted); margin-top: .5cqw; }

/* round (T08 · M09/M23): the figure slot is filled by the build from Canonical Facts; empty = toggle off */
.rly-round { font-family: var(--rly-font-mono); font-weight: var(--rly-weight-round, 600); font-size: var(--rly-type-round); letter-spacing: .01em; line-height: 1.15; color: var(--rly-accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rly-round .cur { font-size: .42em; letter-spacing: .12em; margin-left: .5em; opacity: .8; }
.rly-round:empty, .rly-round-sub:empty { display: none; }
.rly-round-sub { font-size: var(--rly-type-fig-title); margin-top: .3cqw; }
.rly-pills { display: flex; flex-wrap: wrap; gap: .6cqw; margin: 1cqw 0 1.4cqw; }
.rly-pill { display: inline-block; border: 1px solid var(--rly-border-hi); border-radius: 9999px; padding: .4cqw 1.2cqw; font-weight: 500; font-size: var(--rly-type-pill); color: var(--rly-text); }

/* ladder (T09 · M20/M44): rungs rise left to right; markers are dashed lines with a mono label */
.rly-ladder { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 1.2cqw; margin-top: 1.2cqw; }
.rly-ladder__bars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 1.2cqw; height: 14cqw; align-items: end; position: relative; }
.rly-rung { height: var(--h, 40%); background: var(--rly-surface); border: .5px solid var(--rly-border-hi); border-bottom: 0; border-radius: .4cqw .4cqw 0 0; }
.rly-rung.is-lead { background: var(--rly-accent-tint); border-color: var(--rly-accent-ui); }
.rly-ladder__mark { position: absolute; left: 0; right: 0; bottom: var(--y, 50%); border-top: 1px dashed var(--rly-border-hi); pointer-events: none; }
.rly-ladder__mark span { position: absolute; right: 0; top: -1.5cqw; font-family: var(--rly-font-mono); font-size: .85cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--rly-text-muted); background: var(--rly-bg); padding-left: .5cqw; }
.rly-ladder__lbl { border-top: 1px solid var(--rly-border); padding-top: .6cqw; font-size: 1.1cqw; line-height: 1.45; color: var(--rly-text-2); }
.rly-ladder__lbl i { font-style: normal; font-family: var(--rly-font-mono); font-size: .9cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--rly-accent-text); display: block; margin-bottom: .2cqw; }
.rly-ladder__lbl b { display: block; font-weight: 600; }

/* bars (T10 · M40/M41): neutral fills, one lead bar carries the accent */
.rly-bars { display: flex; flex-direction: column; gap: .55cqw; max-width: 74cqw; margin-top: .6cqw; }
.rly-bar { display: grid; grid-template-columns: 24cqw 1fr 9cqw; align-items: center; gap: 1cqw; font-size: 1.15cqw; }
.rly-bar__lbl { color: var(--rly-text); }
.rly-bar__track { height: 1.1cqw; background: var(--rly-surface); border: .5px solid var(--rly-border); border-radius: .3cqw; overflow: hidden; }
.rly-bar__fill { display: block; height: 100%; width: var(--w, 50%); background: var(--rly-border-hi); }
.rly-bar.is-lead .rly-bar__fill { background: var(--rly-accent-ui); }
.rly-bar__val { font-family: var(--rly-font-mono); font-size: 1cqw; text-align: right; color: var(--rly-text-2); font-variant-numeric: tabular-nums; }

/* timeline (T11 · M42/M43/M26): a hairline, nodes on it, the current node filled */
.rly-timeline { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 2cqw; margin-top: 1.4cqw; padding-top: 1.8cqw; }
.rly-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: .55cqw; border-top: 1px solid var(--rly-border-hi); }
.rly-tl { position: relative; font-size: 1.15cqw; line-height: 1.5; }
.rly-tl::before { content: ""; position: absolute; left: 0; top: -1.85cqw; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--rly-bg); border: 1px solid var(--rly-accent-ui); }
.rly-tl.is-now::before { background: var(--rly-accent-ui); }
.rly-tl__k { font-family: var(--rly-font-mono); font-size: .9cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--rly-accent-text); display: block; margin-bottom: .3cqw; }
.rly-tl__t { font-weight: 600; color: var(--rly-text); display: block; margin-bottom: .2cqw; }

/* layers (T12 · M10/M28): bands over a foundation */
.rly-layers { display: flex; flex-direction: column; gap: .5cqw; max-width: 62cqw; margin-top: .6cqw; }
.rly-layer { display: grid; grid-template-columns: 17cqw 1fr; gap: 1.2cqw; background: var(--rly-surface); border: .5px solid var(--rly-border); border-radius: .5cqw; padding: .8cqw 1.2cqw; font-size: 1.15cqw; line-height: 1.45; }
.rly-layer b { font-weight: 600; }
.rly-layer.is-foundation { background: var(--rly-accent-tint); border-color: var(--rly-accent-ui); }

/* landscape (T13 · M14/M13): the categories above, Relay as the band between */
.rly-landscape { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: .8cqw; max-width: 78cqw; margin-top: .6cqw; }
.rly-landscape__between { grid-column: 1 / -1; background: var(--rly-accent-tint); border: .5px solid var(--rly-accent-ui); border-radius: .5cqw; padding: .9cqw 1.2cqw; font-size: 1.2cqw; color: var(--rly-text); }

/* roster (T14 · M34/M36) */
.rly-roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1cqw 2.4cqw; max-width: 74cqw; margin-top: .6cqw; }
.rly-person { border-top: 1px solid var(--rly-border); padding-top: .8cqw; font-size: 1.15cqw; line-height: 1.5; }
.rly-person i { font-style: normal; font-family: var(--rly-font-mono); font-size: .9cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--rly-accent-text); display: block; margin-bottom: .3cqw; }
.rly-person b { display: block; font-weight: 600; font-size: 1.35cqw; }

/* generic figure kinds any statement may carry */
.rly-kv { width: 100%; border-collapse: collapse; font-size: var(--rly-type-fig-body); max-width: 66cqw; }
.rly-kv td { padding: .75cqw 0; border-top: 1px solid var(--rly-border); vertical-align: top; line-height: 1.45; }
.rly-kv td:first-child { font-family: var(--rly-font-mono); font-size: var(--rly-type-label); letter-spacing: .1em; text-transform: uppercase; color: var(--rly-text-muted); width: 22cqw; padding-top: 1.05cqw; }
.rly-kv td:last-child { color: var(--rly-text); }
.rly-tiles { display: grid; grid-template-columns: repeat(var(--rly-tiles-n, 3), 1fr); gap: .9cqw; margin-top: .6cqw; }   /* --rly-tiles-n: 2 for the quad */
.rly-tile { background: var(--rly-surface); border: .5px solid var(--rly-border); border-radius: .6cqw; padding: .9cqw 1.2cqw; font-size: var(--rly-type-fig-small, 1.18cqw); line-height: 1.45; color: var(--rly-text-2); }
.rly-tile .n { font-family: var(--rly-font-mono); font-weight: var(--rly-weight-label, 600); font-size: .95cqw; letter-spacing: .12em; color: var(--rly-accent-text); display: block; margin-bottom: .3cqw; }
.rly-tile b { font-weight: 600; }
.rly-rows { display: flex; flex-direction: column; gap: .8cqw; max-width: 70cqw; margin-top: .6cqw; }
.rly-row { background: var(--rly-surface); border: .5px solid var(--rly-border); border-radius: .6cqw; padding: 1cqw 1.4cqw; font-size: var(--rly-type-fig-body); line-height: 1.5; }
.rly-row b { font-weight: 600; }
.rly-pillars { display: flex; gap: 2cqw; margin-top: 1.2cqw; }
.rly-pillar { flex: 1 1 0; min-width: 0; border-top: 1px solid var(--rly-border); padding-top: 1cqw; }
.rly-pillar b { display: block; font-weight: 600; font-size: 1.45cqw; margin-bottom: .4cqw; }
.rly-pillar p { margin: 0; font-size: 1.18cqw; line-height: 1.5; }
.rly-list { margin: 0; padding-left: 1.4cqw; font-size: var(--rly-type-list); line-height: 1.5; color: var(--rly-text-2); max-width: 56cqw; }
.rly-list li { margin: 0 0 .55cqw; }
.rly-list li::marker { color: var(--rly-accent-ui); }

/* ── surfaces: drenched, gate, accent ─────────────────────────────────────────────── */
/* Which surface an UNMARKED stage gets is the brand's call — brand.config.json slides.default_surface, applied by
 * build_deck.py to cuts, models and gallery specimens alike. On a light-first brand drenched is the bookends plus at
 * most one earned interior moment; on a dark-first brand (ES, 2026-09-20) every slide is drenched and the earned
 * moments invert: .rly-stage--light (the base rules, no modifier needed in CSS) and .rly-stage--accent. */
/* DRENCHED PALETTE — brand material, not archetype: a child brand sets --rly-drench-bg / -text / -accent /
 * -figure in its token stylesheet; the fallbacks here are Relay's (deep teal, teal-bright, amber). Lifted out of
 * the literals 2026-09-11 (Avanto's first adoption found them baked in). */
.rly-stage--drenched { background: var(--rly-drench-bg, linear-gradient(165deg, #0c1413, #0d2b27 55%, #0d3530)); border-color: color-mix(in srgb, var(--rly-drench-accent, #5eead4) 18%, transparent); color: color-mix(in srgb, var(--rly-drench-text, #f4f6f5) 82%, transparent); }
.rly-stage--drenched .rly-kicker, .rly-stage--drenched .rly-tl__k, .rly-stage--drenched .rly-person i, .rly-stage--drenched .rly-ladder__lbl i { color: var(--rly-drench-accent, #5eead4); }
.rly-stage--drenched .rly-headline, .rly-stage--drenched .rly-wordmark, .rly-stage--drenched b, .rly-stage--drenched strong, .rly-stage--drenched .rly-tl__t, .rly-stage--drenched .rly-person b { color: var(--rly-drench-text, #f4f6f5); }
.rly-stage--drenched .rly-mast svg { color: var(--rly-drench-accent, #5eead4); }
.rly-stage--drenched .rly-body, .rly-stage--drenched .rly-framing, .rly-stage--drenched .rly-contact, .rly-stage--drenched .rly-tl, .rly-stage--drenched .rly-fact, .rly-stage--drenched .rly-round-sub { color: color-mix(in srgb, var(--rly-drench-text, #f4f6f5) 82%, transparent); }
.rly-stage--drenched .rly-quote { color: color-mix(in srgb, var(--rly-drench-text, #f4f6f5) 92%, transparent); border-top-color: color-mix(in srgb, var(--rly-drench-accent, #5eead4) 25%, transparent); }
.rly-stage--drenched .rly-foot, .rly-stage--drenched .rly-cap, .rly-stage--drenched .rly-chip-note { color: color-mix(in srgb, var(--rly-drench-text, #f4f6f5) 60%, transparent); }
.rly-stage--drenched .rly-contact a { color: var(--rly-drench-accent, #5eead4); }
.rly-stage--drenched .rly-pill { border-color: color-mix(in srgb, var(--rly-drench-accent, #5eead4) 35%, transparent); color: var(--rly-drench-accent, #5eead4); }
.rly-stage--drenched .rly-fact, .rly-stage--drenched .rly-proof li, .rly-stage--drenched .rly-person, .rly-stage--drenched .rly-pillar { border-top-color: color-mix(in srgb, var(--rly-drench-accent, #5eead4) 25%, transparent); }
/* amber is the single sharp accent on drenched: the figure that matters, one element per slide */
.rly-stage--drenched .rly-stat, .rly-stage--drenched .rly-round, .rly-stage--drenched .rly-big { color: var(--rly-drench-figure, #f3b04e); }
.rly-stage--drenched .rly-round .cur { color: color-mix(in srgb, var(--rly-drench-figure, #f3b04e) 80%, transparent); }
.rly-stage--drenched .rly-rung.is-lead { background: color-mix(in srgb, var(--rly-drench-figure, #f3b04e) 16%, transparent); border-color: var(--rly-drench-figure, #f3b04e); }
.rly-stage--drenched .rly-rung { background: color-mix(in srgb, var(--rly-drench-text, #f4f6f5) 6%, transparent); border-color: color-mix(in srgb, var(--rly-drench-accent, #5eead4) 35%, transparent); }
.rly-stage--drenched .rly-ladder__mark { border-top-color: color-mix(in srgb, var(--rly-drench-accent, #5eead4) 35%, transparent); }
.rly-stage--drenched .rly-ladder__mark span { background: transparent; color: color-mix(in srgb, var(--rly-drench-text, #f4f6f5) 60%, transparent); }
.rly-stage--drenched .rly-ladder__lbl { border-top-color: color-mix(in srgb, var(--rly-drench-accent, #5eead4) 25%, transparent); color: color-mix(in srgb, var(--rly-drench-text, #f4f6f5) 82%, transparent); }
.rly-stage--drenched .rly-step__n { border-color: var(--rly-drench-accent, #5eead4); color: var(--rly-drench-accent, #5eead4); }
.rly-stage--drenched .rly-step__name { color: var(--rly-drench-text, #f4f6f5); }
.rly-stage--drenched .rly-step__desc { color: color-mix(in srgb, var(--rly-drench-text, #f4f6f5) 82%, transparent); }
.rly-stage--drenched .rly-arrow { color: color-mix(in srgb, var(--rly-drench-accent, #5eead4) 35%, transparent); }

.rly-stage--gate { background: var(--rly-panel); }
.rly-stage--gate .rly-stage__in { justify-content: center; }

/* PLACEMENT — where the stack sits in the room it has. contract/variants.json -> placements (1.16.0).
 * Every stage but the gate above was top-anchored, so a sparse face pooled its content against the top
 * edge and left a third of the slide empty under it. Erik, 2026-09-27: "the messaging and content should
 * stand nicely in the middle of a persons focal point and its feeling a little off to the top left".
 *
 * WHY THIS IS NOT `justify-content: center`. .rly-foot carries margin-top:auto, and flexbox gives free
 * space to auto margins BEFORE it considers justify-content — so the one-liner does nothing at all on a
 * face with a foot and works on a face without one, which is the worst of the two. The mechanism is a
 * SECOND auto margin: two of them split the slack evenly around the stack, and the foot stays pinned.
 * The cover is excluded in both renderers — its lockup is anchored and its headline block starts at
 * 1.9in, which is a composition and not slack. */
.rly-stage--center .rly-stage__in:not(:has(.rly-wordmark))::before,
.rly-stage--optical .rly-stage__in:not(:has(.rly-wordmark))::before { content: ''; display: block; margin-bottom: auto; }
.rly-stage--center .rly-stage__in:not(:has(.rly-wordmark)):not(:has(> .rly-foot))::after,
.rly-stage--optical .rly-stage__in:not(:has(.rly-wordmark)):not(:has(> .rly-foot))::after { content: ''; display: block; margin-top: auto; }
/* optical — centred, then raised. Extra BOTTOM padding shortens the box, so the centred stack rises by
 * half of what is added: 2cqw added = 1cqw up = 0.10in on the 10in stage, the rise the contract declares. */
.rly-stage--optical .rly-stage__in:not(:has(.rly-wordmark)) { padding-bottom: calc(3.75cqw + 2cqw); }
.rly-stage--gate .rly-headline { font-size: var(--rly-type-headline-gate); }

/* ── present mode ───────────────────────────────────────────────────────────── */
.rly-deck.is-presenting { position: fixed; inset: 0; z-index: 40; background: #0a0a0a; display: flex; align-items: center; justify-content: center; margin: 0; gap: 0; padding: 0; }
.rly-deck.is-presenting .rly-slide { display: none; }
.rly-deck.is-presenting .rly-slide.is-active { display: block; width: min(100vw, calc(100vh * 16 / 9)); }
.rly-deck.is-presenting .rly-prov { display: none; }
.rly-deck.is-presenting .rly-stage { border: 0; border-radius: 0; }
.rly-hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; display: none; align-items: center; gap: 16px; padding: 10px 18px; font-family: var(--rly-font-mono); font-size: 11px; letter-spacing: .06em; color: rgba(244,246,245,.6); background: rgba(10,10,10,.85); }
.rly-hud b { color: #f4f6f5; font-weight: 500; }
.rly-hud .pos { margin-left: auto; font-variant-numeric: tabular-nums; }
.rly-hud .sp { flex: 1; }
.rly-notes-panel { position: fixed; left: 0; right: 0; bottom: 38px; z-index: 41; display: none; padding: 14px 18px 16px; background: rgba(10,10,10,.92); color: rgba(244,246,245,.85); font-family: var(--rly-font); font-size: 14px; line-height: 1.55; border-top: .5px solid rgba(94,234,212,.25); }
.rly-notes-panel .stamp { font-family: var(--rly-font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--rly-drench-accent, #5eead4); margin-bottom: 6px; }
.rly-notes-panel p { margin: 0; max-width: 90ch; }
body.rly-presenting { overflow: hidden; }
body.rly-presenting .rly-hud { display: flex; }
body.rly-presenting.rly-show-notes .rly-notes-panel { display: block; }

/* beats — present mode only, on demand, transform + opacity only, one per slide.
   At rest (scroll mode, print, reduced motion) every element is already in its finished frame. */
@media (prefers-reduced-motion: no-preference) {
  .rly-deck.is-presenting .rly-slide.is-active .b-rays line { animation: rly-ray-in .5s cubic-bezier(.16,1,.3,1) both; transform-origin: 16px 16px; }
  .rly-deck.is-presenting .rly-slide.is-active .b-rays line:nth-child(2) { animation-delay: .06s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-rays line:nth-child(3) { animation-delay: .12s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-rays line:nth-child(4) { animation-delay: .18s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-rays line:nth-child(n+5) { animation-delay: .26s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-up { animation: rly-rise .6s cubic-bezier(.16,1,.3,1) both; }
  .rly-deck.is-presenting .rly-slide.is-active .b-up.d1 { animation-delay: .25s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-up.d2 { animation-delay: .5s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-seq > * { animation: rly-rise .5s cubic-bezier(.16,1,.3,1) both; }
  .rly-deck.is-presenting .rly-slide.is-active .b-seq > *:nth-child(2) { animation-delay: .18s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-seq > *:nth-child(3) { animation-delay: .36s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-seq > *:nth-child(4) { animation-delay: .54s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-seq > *:nth-child(5) { animation-delay: .72s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-seq > *:nth-child(6) { animation-delay: .9s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-window { animation: rly-window .7s cubic-bezier(.16,1,.3,1) both; animation-delay: .3s; }
  .rly-deck.is-presenting .rly-slide.is-active .b-settle { animation: rly-settle .8s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes rly-rise { from { opacity: 0; transform: translateY(1.2cqw); } to { opacity: 1; transform: none; } }
@keyframes rly-ray-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes rly-window { from { opacity: 0; transform: translateX(2.5cqw); } to { opacity: 1; transform: none; } }
@keyframes rly-settle { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ── print: one slide per 16:9 page, fonts embedded by the renderer ─────────── */
@page { size: 10in 5.625in; margin: 0; }
@media print {
  body { background: #ffffff !important; }
  .rly-deck { display: block; }
  .rly-slide { width: 10in; height: 5.625in; margin: 0; page-break-after: always; break-after: page; }
  .rly-slide:last-child { page-break-after: auto; break-after: auto; }
  .rly-prov, .rly-notes, .rly-hud, .rly-notes-panel, .rly-print-hide { display: none !important; }
  .rly-stage { border: 0; border-radius: 0; height: 100%; aspect-ratio: auto; }
}

/* ── the signature devices ─────────────────────────────────────────────────────────────
 * Placement is mechanism and the same for every brand; the asset and the palette are the
 * brand's. Two of these did not exist until 1.6.0, which is why a cut could carry the right
 * colour and still not read as the brand: the accent never appeared AS an accent, and the
 * mark never appeared at all. Source: a brand's own deck guide, "six signature devices". */

/* THE ACCENT UNDERLINE — one per slide. It is the accent; nothing else on the face competes.
 * Two forms: a standalone rule under a datum, or an inset underline on the key phrase. */
.rly-ul { box-decoration-break: clone; -webkit-box-decoration-break: clone;
          box-shadow: inset 0 -.34em 0 var(--rly-accent-ui); }
.rly-rule { width: 9cqw; height: .42cqw; background: var(--rly-accent-ui); border: 0; margin: 1.6cqw 0 0; }
.rly-stage--drenched .rly-ul { box-shadow: inset 0 -.34em 0 var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-stage--drenched .rly-rule { background: var(--rly-drench-accent, var(--rly-accent-ui)); }

/* THE MARK AS WATERMARK — dividers only, bottom-right, bleeding off two edges, 5%.
 * THE FRAMEWORK SUPPLIES NO GLYPH. 1.3.0 removed drawn logo geometry from the mechanism
 * because it shipped one brand's mark to every other brand recoloured; the same rule holds
 * here. A brand sets --rly-mark-url; unset draws nothing, which is honest. */
.rly-wm { position: absolute; right: -7cqw; bottom: -7cqw; width: 34cqw; height: 34cqw;
          opacity: .05; pointer-events: none; background: var(--rly-mark-url, none) center/contain no-repeat; }
.rly-wm:empty:not([style*="--rly-mark"]) { }

/* ── the section vocabulary ────────────────────────────────────────────────────────────
 * contract/sections.json. Units named once and rendered by every surface the brand owns —
 * a slide and a website section are the same rhetorical unit, so the deck renders the same
 * four the site does. Read off the live site, not invented. */

/* RESOLUTION BAND — a section does not just end, it resolves. The strongest unit the site
 * has, and a deck section previously just stopped. Dark on a light face: arrival, not another slide. */
.rly-res { background: var(--rly-drench-bg, #1a1a1a); color: var(--rly-drench-text, #f3f3f3);
           padding: 2.2cqw 2.6cqw; margin-top: auto; border-radius: var(--rly-radius, .5cqw); }
.rly-res__label { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, .95cqw);
                  letter-spacing: .16em; text-transform: uppercase; color: var(--rly-drench-body, #d8d6d2); }
.rly-res__h { font-family: var(--rly-font-display); font-weight: var(--rly-weight-headline, 800);
              font-size: var(--rly-type-quote); line-height: 1.12; margin: .8cqw 0 0; max-width: 78cqw; }
.rly-res__b { font-size: var(--rly-type-body); line-height: 1.5; color: var(--rly-drench-body, #d8d6d2);
              margin: .7cqw 0 0; max-width: 72cqw; }
.rly-res__link { display: inline-block; margin-top: .9cqw; font-weight: 600; font-size: var(--rly-type-body);
                 color: var(--rly-drench-accent, var(--rly-accent-ui)); }

/* ICON TILE — the dark square that holds the mark, above a card's name. The one inversion
 * allowed inside a light card. NO GLYPH IS SUPPLIED: unset --rly-mark-url draws an empty tile,
 * never a substitute. 1.3.0's rule, because the framework once shipped a foreign mark to a client. */
.rly-tile-icon { display: block; width: 4.4cqw; height: 4.4cqw; border-radius: .9cqw; background: var(--rly-drench-bg, #1a1a1a)
                 var(--rly-mark-url, none) center/52% no-repeat; flex: 0 0 auto; }

/* ACCENT-BAR QUOTE — the argument, not a citation. The bar IS the slide's one accent. */
/* A BORDER, not a flex or grid child. Flex laid the attribution out beside the sentence; grid with
 * `grid-row: 1/-1` resolved against an explicit grid that does not exist, so the bar collapsed and the
 * attribution wrapped inside a 0.42cqw column. Plain block flow with a left border does exactly what
 * the site does, spans whatever height the content takes, and has nothing to get wrong. */
.rly-abq { border-left: .42cqw solid var(--rly-accent-ui); padding-left: 1.4cqw;
           margin: 1.4cqw 0 0; max-width: 78cqw; }
.rly-stage--drenched .rly-abq { border-left-color: var(--rly-drench-accent, var(--rly-accent-ui)); }
/* style and weight come from the CONTRACT, never a literal here — a brand whose display family
 * ships 300-500 italic-only cannot render a hard-coded upright 700, and the type gate says so. */
.rly-abq__t { font-family: var(--rly-font-display); font-style: var(--rly-style-quote, italic);
              font-weight: var(--rly-weight-quote, 400); font-size: var(--rly-type-quote);
              line-height: 1.25; color: var(--rly-text); margin: 0; }
.rly-stage--drenched .rly-abq__t { color: var(--rly-drench-text); }
.rly-abq__a { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, .95cqw);
              letter-spacing: .08em; color: var(--rly-text-muted); margin: .7cqw 0 0; }

/* PRESENCE CHIPS — coverage at a glance. FILL AND WEIGHT CARRY THE MEANING, NEVER HUE:
 * filled accent is present, outline with muted text is absent. No red/green pair — the brand
 * contract bans red outright and scopes green to internal tooling. */
.rly-stage--drenched .rly-abq { border-left-color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-stage--drenched .rly-abq__t { color: var(--rly-drench-text, #f3f3f3); }
.rly-stage--drenched .rly-abq__a { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 60%, transparent); }
.rly-stage--drenched .rly-tile { background: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 6%, transparent);
                                 border-color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 14%, transparent);
                                 color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 80%, transparent); }
.rly-stage--drenched .rly-tile b { color: var(--rly-drench-text, #f3f3f3); }
.rly-stage--drenched .rly-tile-icon { background: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 12%, transparent); }
.rly-chips { display: flex; flex-wrap: wrap; gap: .55cqw; }
.rly-chip { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, .95cqw);
            letter-spacing: .09em; text-transform: uppercase; padding: .34cqw .8cqw;
            border-radius: .3cqw; border: 1px solid var(--rly-border-hi); color: var(--rly-text-muted); }
.rly-stage--drenched .rly-chip { border-color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 30%, transparent);
                                 color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 70%, transparent); }
.rly-stage--drenched .rly-chip.is-on { color: var(--rly-on-accent, var(--rly-text)); }   /* text on the accent is always ink */
.rly-chip.is-on { background: var(--rly-accent-fill, var(--rly-accent-ui));
                  border-color: var(--rly-accent-fill, var(--rly-accent-ui));
                  color: var(--rly-on-accent, var(--rly-text)); font-weight: 600; }

/* ── media ─────────────────────────────────────────────────────────────────────────────
 * contract/variants.json media_arrangements. ONE kind, eight arrangements — a variant, not
 * eight archetypes. The framework had no image-bearing layout at all before 1.8.0.
 *
 * THE BRIEFED FRAME is the whole reason these are adoptable before the photography exists:
 * a frame with no source renders ART DIRECTION at the true ratio carrying the shot note —
 * never a grey box, which announces absence and makes a finished slide look broken — and
 * becomes the photograph the moment a source is set, so nothing is rebuilt. */

/* flex:1 so the block claims the height left under the headline, and the frames sit in the
 * optical centre of it. Without it a 4-up grid of 1:1 frames clung to the top of the slide with
 * a third of the face empty underneath — correct geometry, wrong composition. */
.rly-media { display: grid; gap: 2cqw; align-items: center; align-content: center;
             margin: 1.2cqw 0 0; flex: 1 1 auto; min-height: 0; }
.rly-media--bleed { flex: none; }
.rly-media--split      { grid-template-columns: 38% 1fr; }
.rly-media--split.is-reversed { grid-template-columns: 1fr 38%; direction: rtl; }
.rly-media--split.is-reversed > * { direction: ltr; }
.rly-media--grid       { grid-template-columns: repeat(var(--rly-media-n, 4), 1fr); gap: 1.3cqw; }
.rly-media--portraits  { grid-template-columns: repeat(var(--rly-media-n, 4), 1fr); gap: 1.4cqw; }
.rly-media--before_after { grid-template-columns: 1fr 1fr; gap: 1.9cqw; }
.rly-media--band, .rly-media--screen { grid-template-columns: 1fr; }
.rly-media--quote      { grid-template-columns: 34% 1fr; }
.rly-media--bleed      { position: absolute; inset: -3.75cqw; margin: 0; }   /* past the stage padding — a bleed bleeds */
/* HEIGHT-DRIVEN FRAMES (1.12.0). The media block claims the height left under the headline; each frame takes
 * that height and its width from its ratio, capped at its column. Width-driven frames either overflowed the
 * stage (a 16:9 screen at full width is 52cqw tall) or, once the block was constrained, shrank to their
 * caption. The bleed is the exception: it fills the stage. */
.rly-media:not(.rly-media--bleed) { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.rly-media:not(.rly-media--bleed) > .rly-frame { height: 100%; width: auto; max-width: 100%; justify-self: center; }
.rly-media--split > .rly-frame { justify-self: end; }
.rly-media:not(.rly-media--bleed) > :not(.rly-frame) { align-self: center; }
.rly-media--bleed > .rly-frame { position: absolute; inset: 0; aspect-ratio: auto; height: auto; width: auto;
                                 place-items: center end; padding-right: 8cqw; }   /* the brief sits where the type is not */
/* the type panel paints ABOVE the bleed: a positioned block otherwise covers every later sibling */
.rly-stage__in:has(> .rly-media--bleed) > :not(.rly-media--bleed) { position: relative; z-index: 1; }

.rly-frame { margin: 0; position: relative; overflow: hidden; display: grid; place-items: center;   /* margin: a <figure>'s UA margin (1em 40px) shrank every frame to a sliver (1.12.0) */
             background: radial-gradient(120% 100% at 30% 0%, color-mix(in srgb, var(--rly-accent-ui) 6%, transparent), transparent 60%),
                         linear-gradient(160deg, #1E1E1E, #141414); }
.rly-frame::before { content: ""; position: absolute; inset: 0; opacity: .5;
                     background-image: radial-gradient(#3A3A3A 1px, transparent 1px); background-size: 1.35cqw 1.35cqw; }
.rly-frame::after  { content: ""; position: absolute; top: 1.1cqw; left: 1.1cqw; width: 1.9cqw; height: 1.9cqw;
                     border: .2cqw solid var(--rly-accent-ui); border-right: 0; border-bottom: 0; opacity: .85; }
.rly-frame--4x5 { aspect-ratio: 4/5; } .rly-frame--1x1 { aspect-ratio: 1/1; }
.rly-frame--16x9 { aspect-ratio: 16/9; } .rly-frame--21x9 { aspect-ratio: 21/9; }
.rly-frame--16x10 { aspect-ratio: 16/10; }
.rly-frame--lead { outline: .2cqw solid var(--rly-accent-ui); outline-offset: -.2cqw; }
.rly-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rly-frame__brief { position: relative; text-align: center; padding: 0 2cqw; }
.rly-frame__kind { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, .95cqw);
                   letter-spacing: .16em; text-transform: uppercase; color: var(--rly-accent-ui); margin: 0 0 .6cqw; }
.rly-frame__shot { font-size: var(--rly-type-fig-small, 1.1cqw); line-height: 1.45; color: #B9B6B2; margin: 0; max-width: 34ch; }
.rly-frame__cap  { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, .95cqw);
                   letter-spacing: .06em; color: var(--rly-text-muted); margin: .7cqw 0 0; }

/* the bleed's type panel — the brief is written so this third of the frame stays quiet */
.rly-media__scrim { position: absolute; inset: 0;
   background: linear-gradient(90deg, color-mix(in srgb, var(--rly-drench-bg, #0a0a0a) 93%, transparent) 0%,
               color-mix(in srgb, var(--rly-drench-bg, #0a0a0a) 78%, transparent) 26%, transparent 52%); }

/* ── T17 two-column · T18 case-study ───────────────────────────────────────────────────
 * Recovered rather than re-derived. Both were designed and built on 2026-08-25 in a brand's
 * own deck inventory; that commit was dropped when its repo restarted on an orphan history,
 * and the guide read "to build" for three weeks afterwards. The region counts and the accent
 * rules below are that specimen's, ported onto the framework's tokens. */

/* T17 — claim beside evidence. The accent is the CLAIM column's rule; accenting both makes
 * neither read as the point. */
.rly-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; margin-top: 1cqw; }
.rly-col { display: flex; flex-direction: column; gap: 1.2cqw; padding-top: 1.4cqw;
           border-top: .28cqw solid var(--rly-border-hi); }
.rly-col.is-claim { border-top-color: var(--rly-accent-ui); }
.rly-stage--drenched .rly-col.is-claim { border-top-color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-col__t { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, 1.25cqw);
              letter-spacing: .1em; text-transform: uppercase; color: var(--rly-text-muted); }
.rly-col__b { font-size: var(--rly-type-fig-body, 1.74cqw); line-height: 1.45; color: var(--rly-text-2); }   /* two dense columns: the figure body size, not the slide's */
/* on the drenched ground — the block above named `.rly-slide--drenched`, a class that does not exist, so T17's column
 * bodies and T18's figures were ink on ink on every dark slide until the first real ES cut (1.13.0) */
.rly-stage--drenched .rly-col { border-top-color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 18%, transparent); }
.rly-stage--drenched .rly-col__t { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 55%, transparent); }
.rly-stage--drenched .rly-col__b { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 82%, transparent); }
.rly-stage--drenched .rly-metric__c { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 55%, transparent); }

/* T18 — one named engagement plus 2–4 figures. The accent is the metric rules as ONE device
 * across the row, not one per metric. Gate- and facts-sensitive. */
.rly-metrics { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2.4cqw; margin-top: 1.4cqw; }
.rly-metric { border-top: .28cqw solid var(--rly-accent-ui); padding-top: 1cqw; }
.rly-stage--drenched .rly-metric { border-top-color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-metric__f { font-family: var(--rly-font-display); font-size: var(--rly-type-big);
                 font-weight: var(--rly-weight-headline, 800); line-height: 1; color: var(--rly-text); }
.rly-stage--drenched .rly-metric__f { color: var(--rly-drench-text); }
.rly-metric__c { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, 1.25cqw);
                 letter-spacing: .1em; text-transform: uppercase; color: var(--rly-text-muted); margin-top: .6cqw; }

/* ── T19 quote · T20 agenda ─────────────────────────────────────────────────────────────
 * The two slide types a brand's own slide library carried that the framework did not (read
 * off collateral/slides/deck.css in execution-space-creative, 2026-09-20: .s-quote and .s-agenda).
 * T19 — one quotation given the slide. "Attribution is required, not optional." The words are
 * display weight 700 at the quote-display role; the attribution is mono, uppercase, in the accent.
 * T20 — a real sequence, so it is numbered: leading-zero numerals in the accent, one title and
 * one line per item, hairline rules between. "Under ten slides, an agenda is padding." */
.rly-bigquote { margin: auto 0; max-width: 62cqw; }
.rly-bigquote__t { font-family: var(--rly-font-display); font-weight: var(--rly-weight-quote-display, 700); font-style: var(--rly-style-quote-display, normal);
                   font-size: var(--rly-type-quote-display, 3.6cqw); letter-spacing: -.01em; line-height: 1.2; color: var(--rly-text); margin: 0; text-wrap: balance; }
.rly-bigquote__a { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, 1.2cqw); letter-spacing: .12em; text-transform: uppercase;
                   color: var(--rly-accent-text); margin: 1.6cqw 0 0; }
.rly-stage--drenched .rly-bigquote__t { color: var(--rly-drench-text, #f3f3f3); }
.rly-stage--drenched .rly-bigquote__a { color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-stage--accent .rly-bigquote__t, .rly-stage--accent .rly-bigquote__a { color: var(--rly-on-accent, var(--rly-text)); }
.rly-agenda { list-style: none; margin: 1.2cqw 0 0; padding: 0; max-width: 62cqw; }
.rly-agenda__i { display: grid; grid-template-columns: 3.6cqw 1fr; gap: 0 1cqw; align-items: baseline; padding: .7cqw 0; border-top: 1px solid var(--rly-border); }
.rly-agenda__n { font-family: var(--rly-font-mono); font-weight: var(--rly-weight-label, 500); font-size: var(--rly-type-label, 1.2cqw); letter-spacing: .08em;
                 color: var(--rly-accent-text); font-variant-numeric: tabular-nums; }
.rly-agenda__t { font-size: var(--rly-type-fig-body, 1.74cqw); font-weight: 600; color: var(--rly-text); line-height: 1.3; }
.rly-agenda__d { grid-column: 2; font-size: var(--rly-type-fig-small, 1.53cqw); line-height: 1.4; color: var(--rly-text-2); margin-top: .15cqw; }
.rly-stage--drenched .rly-agenda__i { border-top-color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 14%, transparent); }
.rly-stage--drenched .rly-agenda__n { color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-stage--drenched .rly-agenda__t { color: var(--rly-drench-text, #f3f3f3); }
.rly-stage--drenched .rly-agenda__d { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 72%, transparent); }

/* ── T21–T28 · eight more concepts (1.13.0) ─────────────────────────────────────────────
 * Erik, 2026-09-21: "I want more slides concepts in the gallery and built to the masters and
 * generator." Read off the brand's own guide (design/DECK-GUIDE.md §4: divider, stat-row,
 * comparison, proof-grid, discovery-questions, next-steps, engagement-model) and its site kit
 * (.checks). Every one renders in both renderers or it is a rule-9 defect. */

/* T21 — section divider: the pivot. One oversized line at 88 % measure, the mark as a watermark. */
.rly-headline--pivot { font-size: var(--rly-type-headline-cover, var(--rly-type-headline)); margin-top: auto; margin-bottom: auto; }

/* T22 — stat row: three or six figures, EACH WITH ITS SOURCE ON THE FACE. The brand library:
 * "Never put an unsourced number on a slide" / "every figure carries its source on the slide
 * itself — not in the notes, not in the appendix". The figure is a data-fact slot: never typed. */
.rly-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw 3cqw; margin-top: 1.6cqw; }
.rly-statc { border-top: .28cqw solid var(--rly-accent-ui); padding-top: 1cqw; min-width: 0; }
.rly-statc__f { font-family: var(--rly-font-display); font-weight: var(--rly-weight-headline-cover, 900); font-size: var(--rly-type-big, 6.67cqw);
                letter-spacing: -.03em; line-height: 1; color: var(--rly-text); font-variant-numeric: tabular-nums; min-height: 1em; }
.rly-statc__f:empty::before { content: "—"; color: var(--rly-text-muted); }
.rly-statc__c { font-size: var(--rly-type-fig-body, 1.74cqw); line-height: 1.4; color: var(--rly-text-2); margin-top: .5cqw; max-width: 26ch; }
.rly-statc__s { font-family: var(--rly-font-mono); font-size: var(--rly-type-label-small, 1.18cqw); letter-spacing: .08em; text-transform: uppercase;
                color: var(--rly-text-muted); margin-top: .7cqw; }
.rly-stage--drenched .rly-statc { border-top-color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-stage--drenched .rly-statc__f { color: var(--rly-drench-text, #f3f3f3); }
.rly-stage--drenched .rly-statc__c { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 72%, transparent); }
.rly-stage--drenched .rly-statc__s { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 45%, transparent); }

/* T23 — comparison: two sides, parallel lines, the lead side carries the accent. Not T17 (prose
 * columns): this is a contrast of like against like — before/with, them/us, option A/B. */
.rly-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin-top: 1.4cqw; }
.rly-cmp__side { background: var(--rly-surface); border: .5px solid var(--rly-border); border-radius: .6cqw; padding: 1.3cqw 1.6cqw 1.4cqw; min-width: 0; }
.rly-cmp__side.is-lead { border-top: .34cqw solid var(--rly-accent-ui); }
.rly-cmp__l { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, 1.39cqw); letter-spacing: .1em; text-transform: uppercase; color: var(--rly-text-muted); margin-bottom: .9cqw; }
.rly-cmp__side.is-lead .rly-cmp__l { color: var(--rly-accent-text); }
.rly-cmp__i { list-style: none; margin: 0; padding: 0; }
.rly-cmp__i li { font-size: var(--rly-type-fig-body, 1.74cqw); line-height: 1.45; color: var(--rly-text-2); padding: .55cqw 0; border-top: 1px solid var(--rly-border); }
.rly-cmp__i li:first-child { border-top: 0; padding-top: 0; }
.rly-stage--drenched .rly-cmp__side { background: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 6%, transparent); border-color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 14%, transparent); }
.rly-stage--drenched .rly-cmp__side.is-lead { border-top-color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-stage--drenched .rly-cmp__side.is-lead .rly-cmp__l { color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-stage--drenched .rly-cmp__i li { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 80%, transparent); border-top-color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 14%, transparent); }

/* T24 — proof grid: several engagements at once (T18 is one, in depth). Three or four cards, the
 * top rules ONE device across the row. Names and metrics are gate- and facts-sensitive. */
.rly-cases { display: grid; grid-template-columns: repeat(var(--rly-cases-n, 3), 1fr); gap: 1.6cqw; margin-top: 1.4cqw; }
.rly-case { border-top: .28cqw solid var(--rly-accent-ui); padding-top: 1cqw; min-width: 0; }
.rly-case__cat { font-family: var(--rly-font-mono); font-size: var(--rly-type-label-small, 1.18cqw); letter-spacing: .1em; text-transform: uppercase; color: var(--rly-text-muted); }
.rly-case__n { font-size: var(--rly-type-fig-title, 1.94cqw); font-weight: 600; color: var(--rly-text); margin-top: .4cqw; line-height: 1.25; }
.rly-case__d { font-size: var(--rly-type-fig-small, 1.53cqw); line-height: 1.45; color: var(--rly-text-2); margin-top: .5cqw; }
.rly-case__m { font-family: var(--rly-font-display); font-weight: var(--rly-weight-headline, 800); font-size: var(--rly-type-round, 6.11cqw); line-height: 1; letter-spacing: -.02em;
               color: var(--rly-text); margin-top: 1cqw; font-variant-numeric: tabular-nums; }
.rly-case__m:empty::before { content: "—"; color: var(--rly-text-muted); }
.rly-case__mc { font-family: var(--rly-font-mono); font-size: var(--rly-type-label-small, 1.18cqw); letter-spacing: .08em; text-transform: uppercase; color: var(--rly-text-muted); margin-top: .4cqw; }
.rly-stage--drenched .rly-case { border-top-color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-stage--drenched .rly-case__n, .rly-stage--drenched .rly-case__m { color: var(--rly-drench-text, #f3f3f3); }
.rly-stage--drenched .rly-case__d { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 72%, transparent); }
.rly-stage--drenched .rly-case__cat, .rly-stage--drenched .rly-case__mc { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 45%, transparent); }

/* T25 — discovery questions: the prospect-facing turn — "now tell us about you". Four topics, two
 * to three questions each; nothing here should read as an answer, so no accent but the eyebrow. */
.rly-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 3.2cqw; margin-top: 1.4cqw; }
.rly-topic { min-width: 0; border-top: 1px solid var(--rly-border); padding-top: .9cqw; }
.rly-topic__c { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, 1.39cqw); letter-spacing: .1em; text-transform: uppercase; color: var(--rly-text); margin-bottom: .5cqw; }
.rly-topic__q { list-style: none; margin: 0; padding: 0; }
.rly-topic__q li { font-size: var(--rly-type-fig-body, 1.74cqw); line-height: 1.4; color: var(--rly-text-2); padding: .3cqw 0 .3cqw 1.6cqw; position: relative; }
.rly-topic__q li::before { content: "?"; position: absolute; left: 0; top: .3cqw; font-family: var(--rly-font-mono); color: var(--rly-text-muted); }
.rly-stage--drenched .rly-topic { border-top-color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 14%, transparent); }
.rly-stage--drenched .rly-topic__c { color: var(--rly-drench-text, #f3f3f3); }
.rly-stage--drenched .rly-topic__q li { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 76%, transparent); }
.rly-stage--drenched .rly-topic__q li::before { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 45%, transparent); }

/* T26 — roadmap / next steps: three to five steps, the CONNECTING LINE is the accent, the numerals
 * stay muted. Not T11 (stages with a "now" marker) and not T04 (three nodes and a chip). */
.rly-road { position: relative; display: grid; grid-template-columns: repeat(var(--rly-road-n, 4), 1fr); gap: 2.2cqw; margin-top: 2cqw; padding-top: 2cqw; }
.rly-road::before { content: ""; position: absolute; left: 0; right: 0; top: .5cqw; border-top: .28cqw solid var(--rly-accent-ui); }
.rly-road__s { position: relative; min-width: 0; }
.rly-road__s::before { content: ""; position: absolute; left: 0; top: -2cqw; width: 1.1cqw; height: 1.1cqw; background: var(--rly-bg); border: .28cqw solid var(--rly-accent-ui); border-radius: 50%; box-sizing: border-box; }
.rly-road__n { font-family: var(--rly-font-mono); font-size: var(--rly-type-label-small, 1.18cqw); letter-spacing: .1em; color: var(--rly-text-muted); display: block; margin-bottom: .4cqw; }
.rly-road__t { font-size: var(--rly-type-fig-title, 1.94cqw); font-weight: 600; color: var(--rly-text); display: block; line-height: 1.25; margin-bottom: .4cqw; }
.rly-road__d { font-size: var(--rly-type-fig-small, 1.53cqw); line-height: 1.45; color: var(--rly-text-2); }
.rly-stage--drenched .rly-road::before, .rly-stage--drenched .rly-road__s::before { border-color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-stage--drenched .rly-road__s::before { background: var(--rly-drench-bg, #1a1a1a); }
.rly-stage--drenched .rly-road__t { color: var(--rly-drench-text, #f3f3f3); }
.rly-stage--drenched .rly-road__d { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 72%, transparent); }
.rly-stage--drenched .rly-road__n { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 45%, transparent); }

/* T27 — engagement model: three or four tiers (band · name · price · SLA) and the benefits they
 * share. Prices are data-fact slots — a rate is canon, never typed — and the slide is gate-sensitive. */
.rly-tiers { display: grid; grid-template-columns: repeat(var(--rly-tiers-n, 3), 1fr); gap: 1.4cqw; margin-top: 1.4cqw; }
.rly-tier { background: var(--rly-surface); border: .5px solid var(--rly-border); border-radius: .6cqw; padding: 1.2cqw 1.4cqw 1.3cqw; min-width: 0; }
.rly-tier__band { font-family: var(--rly-font-mono); font-size: var(--rly-type-label-small, 1.18cqw); letter-spacing: .1em; text-transform: uppercase; color: var(--rly-text-muted); }
.rly-tier__name { font-size: var(--rly-type-fig-title, 1.94cqw); font-weight: 600; color: var(--rly-text); margin-top: .4cqw; }
.rly-tier__price { font-family: var(--rly-font-display); font-weight: var(--rly-weight-headline, 800); font-size: var(--rly-type-chip, 2.78cqw); letter-spacing: -.02em; line-height: 1.1;
                   color: var(--rly-text); margin-top: .8cqw; font-variant-numeric: tabular-nums; }
.rly-tier__price:empty::before { content: "—"; color: var(--rly-text-muted); }
.rly-tier__sla { font-size: var(--rly-type-fig-small, 1.53cqw); color: var(--rly-text-2); margin-top: .4cqw; }
.rly-benefits { list-style: none; margin: 1.4cqw 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .3cqw 2.4cqw; }
.rly-benefits li, .rly-checks li { position: relative; padding-left: 1.7cqw; font-size: var(--rly-type-fig-small, 1.53cqw); line-height: 1.45; color: var(--rly-text-2); }
.rly-benefits li::before, .rly-checks li::before { content: ""; position: absolute; left: 0; top: .55cqw; width: .7cqw; height: .7cqw; background: var(--rly-accent-ui); border-radius: .1cqw; }
.rly-stage--drenched .rly-tier { background: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 6%, transparent); border-color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 14%, transparent); }
.rly-stage--drenched .rly-tier__name, .rly-stage--drenched .rly-tier__price { color: var(--rly-drench-text, #f3f3f3); }
.rly-stage--drenched .rly-tier__sla, .rly-stage--drenched .rly-benefits li, .rly-stage--drenched .rly-checks li { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 76%, transparent); }
.rly-stage--drenched .rly-tier__band { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 45%, transparent); }
.rly-stage--drenched .rly-benefits li::before, .rly-stage--drenched .rly-checks li::before { background: var(--rly-drench-accent, var(--rly-accent-ui)); }

/* T28 — checklist: "what's included" / "what you get". The site's .checks list — the accent square
 * marker — as a slide. Three to eight lines; two columns from five. The marker is the accent. */
.rly-checks { list-style: none; margin: 1.4cqw 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--rly-checks-cols, 1), 1fr); gap: .5cqw 3cqw; max-width: 72cqw; }
.rly-checks li { font-size: var(--rly-type-fig-body, 1.74cqw); padding-left: 1.9cqw; }
.rly-checks li::before { top: .65cqw; width: .8cqw; height: .8cqw; }

/* ── PLACEHOLDER SLOTS (1.14.0) ─────────────────────────────────────────────────────────
 * Erik, 2026-09-21: "Also need slides with placeholder areas we can use." A slot is a labelled
 * area a person drops content into — hatched, dashed, named — the site's .ph family (45° yellow
 * hatch, dashed rgba(170,140,20,.6)) as a slide element. The briefed frame (.rly-frame) is the
 * slot for photographs and screens; .rly-slot is everything else: a text container, a chart, a
 * logo row, an open canvas. Both renderers draw it; in Slides a slot is a dashed box with its
 * label, and a text slot is text you replace. A slot that reaches a sent deck is a defect, and
 * build_deck says so per slide. */
.rly-slot { position: relative; display: grid; place-items: center; text-align: center; min-width: 0; min-height: 0; box-sizing: border-box;
            border: .14cqw dashed color-mix(in srgb, var(--rly-accent-ui) 60%, transparent); border-radius: .4cqw;
            background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--rly-accent-ui) 7%, transparent) 0 .35cqw, transparent .35cqw 1.4cqw); padding: 1cqw; }
.rly-slot__l { font-family: var(--rly-font-mono); font-size: var(--rly-type-label, 1.39cqw); letter-spacing: .14em; text-transform: uppercase; color: var(--rly-accent-text); margin: 0; }
.rly-slot__h { font-size: var(--rly-type-fig-small, 1.53cqw); line-height: 1.4; color: var(--rly-text-muted); margin: .4cqw 0 0; max-width: 32ch; }
.rly-stage--drenched .rly-slot__l { color: var(--rly-drench-accent, var(--rly-accent-ui)); }
.rly-stage--drenched .rly-slot__h { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 55%, transparent); }
.rly-slot--16x9 { aspect-ratio: 16/9; } .rly-slot--4x5 { aspect-ratio: 4/5; } .rly-slot--1x1 { aspect-ratio: 1/1; } .rly-slot--21x9 { aspect-ratio: 21/9; } .rly-slot--16x10 { aspect-ratio: 16/10; }
.rly-slot--fill { flex: 1 1 auto; margin-top: 1.4cqw; }                  /* the open canvas: whatever height the headline leaves */
.rly-slot--text { display: block; text-align: left; place-items: start; padding: 1.2cqw 1.4cqw; background: none; }   /* a text container: type here */
.rly-slot--text .rly-slot__l { display: block; margin-bottom: .3cqw; }
.rly-slot--text .rly-slot__h { max-width: none; }
/* T29 — logo row: three to six marks, each a square slot until its asset lands. The site's .ph-logos. */
.rly-logos { display: grid; grid-template-columns: repeat(var(--rly-logos-n, 5), 1fr); gap: 1.6cqw; margin-top: 2cqw; align-items: center; }
.rly-logo { display: grid; place-items: center; aspect-ratio: 3/2; min-width: 0; }
.rly-logo > img { max-width: 78%; max-height: 62%; object-fit: contain; filter: none; }
.rly-logo .rly-slot__l { font-size: var(--rly-type-label-small, 1.18cqw); }
/* T30 — chart: a data visual beside the sentence it proves. The figure comes from the facts file or the
 * design system's figure library (es-figures) — never drawn by hand on a slide. */
.rly-chart { display: grid; grid-template-columns: 1fr 38%; gap: 3cqw; align-items: center; margin-top: 1.2cqw; flex: 1 1 auto; min-height: 0; }
.rly-chart > .rly-slot, .rly-chart > img, .rly-chart > svg { width: 100%; height: 100%; max-height: 100%; }
.rly-chart__note { font-size: var(--rly-type-fig-body, 1.74cqw); line-height: 1.5; color: var(--rly-text-2); }

/* THE CHART PALETTE — series colours, carried from the brand's ONE token source: brand-system gates
 * them, emits deck.brand.config.json, and adopt.py writes them into the child's tokens.css. Until 1.16.0
 * that seam stopped at the stylesheet and the deck drew every chart in the accent, while the brand system
 * held a validated ramp. "One palette, both frameworks" was written down and was false for charts.
 *
 * TWO FAMILIES, NEVER MIXED. --rly-chart-N are IDENTITY hues: assigned in fixed order, never cycled, and
 * gated on clearing their NEIGHBOURS under colour-vision deficiency — not just the page. --rly-chart-seq-N
 * are one hue stepped light to dark, for magnitude and for ordered categories (tiers, stages, buckets).
 * The categorical gate FAILS a correct ramp by design, which is why the two are gated, and used, apart.
 * A brand that declares no palette falls back to the accent — what every chart did before this existed. */
.rly-ser-1 { color: var(--rly-chart-1, var(--rly-accent-ui)); }
.rly-ser-2 { color: var(--rly-chart-2, var(--rly-accent-text)); }
.rly-ser-3 { color: var(--rly-chart-3, var(--rly-text-2)); }
.rly-ser-4 { color: var(--rly-chart-4, var(--rly-border-hi)); }
.rly-ser-5 { color: var(--rly-chart-5, var(--rly-text-muted)); }
.rly-ser-6 { color: var(--rly-chart-6, var(--rly-border)); }
.rly-seq-1 { color: var(--rly-chart-seq-1, var(--rly-accent-tint)); }
.rly-seq-2 { color: var(--rly-chart-seq-2, var(--rly-accent-ui)); }
.rly-seq-3 { color: var(--rly-chart-seq-3, var(--rly-accent-text)); }
.rly-seq-4 { color: var(--rly-chart-seq-4, var(--rly-text)); }
.rly-seq-5 { color: var(--rly-chart-seq-5, var(--rly-text-2)); }
.rly-seq-6 { color: var(--rly-chart-seq-6, var(--rly-text-muted)); }
[class*="rly-ser-"], [class*="rly-seq-"] { fill: currentColor; }
/* on the drenched ground the series come from the dark theme: a hue that clears its neighbours on
 * white does not on near-black, which is what the brand's dark chart slots are for. */
.rly-stage--drenched .rly-ser-1 { color: var(--rly-drench-chart-1, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-ser-2 { color: var(--rly-drench-chart-2, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-ser-3 { color: var(--rly-drench-chart-3, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-ser-4 { color: var(--rly-drench-chart-4, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-ser-5 { color: var(--rly-drench-chart-5, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-ser-6 { color: var(--rly-drench-chart-6, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-seq-1 { color: var(--rly-drench-chart-seq-1, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-seq-2 { color: var(--rly-drench-chart-seq-2, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-seq-3 { color: var(--rly-drench-chart-seq-3, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-seq-4 { color: var(--rly-drench-chart-seq-4, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-seq-5 { color: var(--rly-drench-chart-seq-5, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-seq-6 { color: var(--rly-drench-chart-seq-6, var(--rly-drench-accent)); }
.rly-stage--drenched .rly-chart__note { color: color-mix(in srgb, var(--rly-drench-text, #f3f3f3) 76%, transparent); }
/* the fill-in sheet (build_templates --placeholders): every text role shows where it sits */
.rly-stage.is-slot .rly-kicker, .rly-stage.is-slot .rly-headline, .rly-stage.is-slot .rly-body, .rly-stage.is-slot .rly-quote,
.rly-stage.is-slot .rly-framing, .rly-stage.is-slot .rly-contact, .rly-stage.is-slot .rly-callout, .rly-stage.is-slot .rly-bigquote,
.rly-stage.is-slot .rly-cat, .rly-stage.is-slot .rly-tile, .rly-stage.is-slot .rly-col, .rly-stage.is-slot .rly-metric, .rly-stage.is-slot .rly-statc,
.rly-stage.is-slot .rly-case, .rly-stage.is-slot .rly-topic, .rly-stage.is-slot .rly-road__s, .rly-stage.is-slot .rly-tier, .rly-stage.is-slot .rly-agenda__i,
.rly-stage.is-slot .rly-cmp__side, .rly-stage.is-slot .rly-person, .rly-stage.is-slot .rly-step, .rly-stage.is-slot .rly-tl, .rly-stage.is-slot .rly-pillar, .rly-stage.is-slot .rly-row
  { outline: .12cqw dashed color-mix(in srgb, var(--rly-accent-ui) 55%, transparent); outline-offset: .3cqw; }

/* ── the ACCENT surface ────────────────────────────────────────────────────────────────
 * The statement slide: the full accent as ground, ink type. Read off a brand's own slide
 * library (Erik, 2026-09-20: "It should be building our masters in this style"), where the
 * rule is "use once; never two yellow slides in a row". This is NOT a yellow wash — a wash is a
 * tint; this is the accent itself, and the brand contract provides for it directly: "Text on
 * yellow is always ink, never white." So everything on it is ink, and hierarchy is size and
 * weight, never a second colour. The slide IS the accent, so the underline and rule devices
 * fall back to ink here rather than vanish into the ground. */
.rly-stage--accent { background: var(--rly-accent-fill, var(--rly-accent-ui)); color: var(--rly-on-accent, var(--rly-text)); border-color: transparent; }
.rly-stage--accent .rly-headline, .rly-stage--accent .rly-wordmark, .rly-stage--accent b, .rly-stage--accent strong { color: var(--rly-on-accent, var(--rly-text)); }
.rly-stage--accent .rly-kicker, .rly-stage--accent .rly-kicker__b { color: color-mix(in srgb, var(--rly-on-accent, var(--rly-text)) 55%, transparent); }
.rly-stage--accent .rly-body, .rly-stage--accent .rly-framing, .rly-stage--accent .rly-contact { color: color-mix(in srgb, var(--rly-on-accent, var(--rly-text)) 66%, transparent); }
.rly-stage--accent .rly-foot, .rly-stage--accent .rly-cap { color: color-mix(in srgb, var(--rly-on-accent, var(--rly-text)) 45%, transparent); }
.rly-stage--accent .rly-ul { box-shadow: inset 0 -.34em 0 var(--rly-on-accent, var(--rly-text)); }
.rly-stage--accent .rly-rule, .rly-stage--accent .rly-abq { border-color: var(--rly-on-accent, var(--rly-text)); background-color: var(--rly-on-accent, var(--rly-text)); }
.rly-stage--accent .rly-abq { background: none; }
.rly-stage--accent .rly-quote { border-top-color: color-mix(in srgb, var(--rly-on-accent, var(--rly-text)) 30%, transparent); }