/* ZS R3 GRAFT "PRESS" (r3-graft-press.css): components taken from direction A "Editorial Press" (the type system and the ledger), re-implemented
under the prefix r3a- so they never collide with the base's r3- names (A's tree used r3-h1, r3-plane, r3-ledger ... with other meanings).
Opt-in: loaded only by pages that use it, AFTER r3-tokens.css. Everything reads the base tokens (--r3-t-*, --ink*, --tier, --gold ...) and works in
both themes, on every plane. Spec and markup: evidence/r3/final/BIBLE_R3.md section g and i. Source of the ideas: evidence/r3/directions/A (BIBLE.md D-G, tree dirA).
Motion rule: hidden start states hang on html.lib-on only; html.no-motion / no-JS show the composed page.
CONTENTS 1 poster + two-tone 2 tracked-serif kicker 3 chapter numeral + ghost 4 ledger (hung) 5 price ledger (home, numbered 01-03)
6 figures (1 / 4 / 30) 7 sign-off (giant e-mail + cropped ghost) 8 word index with synced preview 9 triad 10 hang 11 reduced motion */
/* ---------------------------------------------------------------- 1 poster + two-tone headline (G-57, W-44, W-42)
A poster word is NOT a hero H1 on a photograph (there the clean-plate rule decides the size): it is the chapter statement, the ghost-scale headline. Weight 400
at poster size (Cormorant 600 below 72 px), tracking -.034em, line-height 1.02 (below that the g of "egen" collides with the ll of "visuell"). The second clause
is a warm grey (.r3a-tail, ink-3: 7.7:1 dark / 6.9:1 light) or the tier's one accent (.r3a-em, gold on Premium). */
.r3a-poster { margin: 0; font: 400 var(--r3-t-poster)/1.02 var(--r3-f-serif); letter-spacing: -.034em; font-variant-numeric: lining-nums; text-wrap: balance; color: var(--ink); }
.r3a-poster { font-size: min(var(--r3-t-poster), max(3.5rem, 34vh)); }
@supports (height: 1svh) { .r3a-poster { font-size: min(var(--r3-t-poster), max(3.5rem, 34svh)); } }
.r3a-poster--h2 { font-size: var(--r3-t-h2); line-height: 1; font-weight: 600; letter-spacing: -.02em; } /* the same two-tone device at section-heading size (Premium H2) */
.r3a-poster--h2 { font-weight: 600; }
.r3a-tail { color: var(--ink-3); } /* the grey tail: first clause ink, second clause warm grey (W-42) */
.r3a-em { color: var(--tier, var(--gold)); font-style: normal; } /* the one accent phrase: tier colour, gold on Premium (never italic: no italic files) */
.r3a-poster em, .r3a-poster--h2 em { font-style: normal; }
/* ---------------------------------------------------------------- 2 tracked-serif kicker over ONE oversized word (G-122)
Cormorant 600, +.42em caps, lining figures. Premium tier name and mood line only; the structural label stays .r3-label (Inter). */
.r3a-kicker { margin: 0 0 .9em; font: 600 var(--r3-t-kicker)/1.1 var(--r3-f-serif); letter-spacing: .42em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: lining-nums; }
.r3a-kicker b { font-weight: 600; color: var(--tier, var(--gold)); }
@media (max-width: 480px) { .r3a-kicker { letter-spacing: .26em; } }
/* ---------------------------------------------------------------- 3 chapter numeral (N2) and ghost word (W-31, G-67)
.r3a-num is the chapter numeral in Cormorant lining (01 .. 03 on Premium), the notation stays "NN" (BIBLE b). .r3a-ghost is a 6 % word or numeral BEHIND a
heading: put it on a positioned parent with data-r3a-ghost="01"; it is aria-hidden by construction (generated content with an empty alt). */
.r3a-num { display: block; margin: 0; font: 400 var(--r3-t-num)/.8 var(--r3-f-serif); letter-spacing: -.04em; font-variant-numeric: lining-nums; color: var(--ink); }
.r3a-num--lit { color: var(--tier, var(--gold)); }
[data-r3a-ghost] { position: relative; isolation: isolate; }
[data-r3a-ghost]::before { content: attr(data-r3a-ghost); content: attr(data-r3a-ghost) / ""; position: absolute; z-index: -1; left: var(--r3a-ghost-x, -.04em); top: var(--r3a-ghost-y, -.34em);
font: 400 var(--r3-t-ghost)/.74 var(--r3-f-serif); letter-spacing: -.04em; font-variant-numeric: lining-nums; color: var(--ink); opacity: .06; white-space: nowrap; pointer-events: none; user-select: none; }
[data-r3a-ghost="top"]::before { top: 0; }
/* a ghost word may be cropped by the section foot, but never through the middle of a glyph at the SIDES: it is centred, its width is capped to the box, and the
crop is a soft fade to the plane tone (no hard clip line). See .r3a-signoff__ghost. */
/* ---------------------------------------------------------------- 4 ledger: ruled rows, serif titles (W-60, W-19)
Lines INSIDE content are fine (tone rule). Hung = number | title | text (| price). The numeral column is the chapter's lowest level: a chapter that shows
.r3a-num does not also number its rows (BIBLE b numbering levels). */
.r3a-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.r3a-ledger--open { border-top: 0; }
.r3a-ledger > li { position: relative; display: grid; grid-template-columns: min(3.4rem, 54px) minmax(0, 1fr); column-gap: 8px; padding: clamp(18px, 1.2rem + .8vw, 30px) 0; border-bottom: 1px solid var(--line); }
.r3a-ledger > li > .r3-n { grid-row: 1 / span 3; padding-top: .6em; }
.r3a-ledger--nonum > li { grid-template-columns: minmax(0, 1fr); }
.r3a-ledger > li > :not(.r3-n) { grid-column: 2; }
.r3a-ledger--nonum > li > :not(.r3-n) { grid-column: 1; }
.r3a-ledger__t { margin: 0 0 .35em; font: 600 var(--r3-t-h3)/1.1 var(--r3-f-serif); letter-spacing: -.012em; font-variant-numeric: lining-nums; color: var(--ink); }
.r3a-ledger__d { margin: 0; color: var(--ink-2); max-width: 34em; font-size: var(--r3-t-small); line-height: 1.55; }
.r3a-ledger__p { font: var(--r3-w-price) var(--r3-t-h3)/1 var(--r3-f-price); letter-spacing: var(--r3-ls-price); font-variant-numeric: lining-nums proportional-nums; color: var(--ink); white-space: nowrap; }
@media (min-width: 900px) {
.r3a-ledger--hung > li { grid-template-columns: 4.5rem minmax(0, 1.05fr) minmax(0, 1.3fr); column-gap: clamp(20px, 3vw, 56px); align-items: baseline; }
.r3a-ledger--hung.r3a-ledger--nonum > li { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr); }
.r3a-ledger--hung > li > .r3-n { grid-row: auto; padding-top: 0; }
.r3a-ledger--hung > li > :not(.r3-n) { grid-column: auto; }
.r3a-ledger--hung .r3a-ledger__t { margin: 0; }
}
/* row hover: a quiet wash by transform (not width) */
.r3a-ledger > li::before { content: ""; position: absolute; inset: 0 -12px; z-index: -1; background: var(--r3-wash); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--r3-d-ui) var(--r3-ease); }
@media (hover: hover) { .r3a-ledger > li:hover::before { transform: none; } }
/* ---------------------------------------------------------------- 5 price ledger (home hero: three prices numbered 01-03 at the fold, R's best statement of cost)
- 01Starter...
...
Tier names keep ONE face (sans, sentence case; the panel flagged a ledger that mixed sans and serif names); the price is the one price style. All three rows sit on one
baseline grid, the lit numeral takes the tier colour. */
.r3a-pricelg { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.r3a-pricelg > li { border-bottom: 1px solid var(--line); }
.r3a-pricelg a { display: grid; grid-template-columns: min(2.6rem, 11vw) minmax(min(6.5em, 34vw), 1fr) auto; align-items: baseline; column-gap: 14px; padding: clamp(14px, 1.1rem + .5vw, 22px) 4px; color: var(--ink); text-decoration: none; transition: background var(--r3-d-ui) var(--r3-ease-out); }
.r3a-pricelg a:hover, .r3a-pricelg a:focus-visible { background: var(--r3-wash); }
.r3a-pricelg .r3-n { color: var(--tier, var(--ink-3)); }
/* FXF 8: the tier-coloured numeral on the hovered / focused row measured 4.4-4.7 : 1 (violet on the wash over graphite). Under the wash it takes the ink colour: 10 : 1. */
.r3a-pricelg a:is(:hover, :focus-visible) .r3-n { color: var(--ink); }
.r3a-pricelg__t { font: 500 clamp(1.25rem, 1.1rem + .7vw, 1.75rem)/1.1 var(--r3-f-display); letter-spacing: -.02em; }
.r3a-pricelg__t small { display: block; margin-top: 4px; font: 400 var(--r3-t-small)/1.35 var(--r3-f-text); letter-spacing: 0; color: var(--ink-2); }
.r3a-pricelg .r3-price { justify-content: flex-end; flex-wrap: nowrap; }
.r3a-pricelg .r3-price__u { white-space: normal; }
@media (max-width: 520px) { .r3a-pricelg .r3-price { flex-direction: column; align-items: flex-end; gap: 0; } .r3a-pricelg .r3-price__u { font-size: .875rem; } } /* FXF 7: unit 14 px (was 12) */
@media (max-width: 350px) { .r3a-pricelg .r3-price__u { white-space: normal; max-width: 7.4em; text-align: right; text-wrap: balance; } } /* 320: it wraps to two balanced lines instead of squeezing the tier name */
/* ---------------------------------------------------------------- 6 figures: 1 / 4 / 30 batch numerals (G-123)
Big Cormorant lining numerals with the existing label under each (Growth's content batch). The numerals are figures, not prices: the same serif voice. */
.r3a-figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 40px); align-items: end; }
.r3a-fig { display: grid; gap: 8px; align-content: end; }
.r3a-fig__n { font: 400 var(--r3-t-fig)/.82 var(--r3-f-serif); letter-spacing: -.04em; font-variant-numeric: lining-nums; color: var(--ink); }
.r3a-fig--tier .r3a-fig__n { color: var(--tier, var(--ink)); }
.r3a-fig__l { font: 400 var(--r3-t-small)/1.4 var(--r3-f-text); color: var(--ink-2); max-width: 14em; }
@media (max-width: 420px) { .r3a-fig__n { font-size: clamp(4.25rem, 24vw, 5.5rem); } }
/* ---------------------------------------------------------------- 7 sign-off (W-85): the giant serif e-mail and a cropped ghost word, AFTER the ask
Starter and Growth end in type. The e-mail is the largest link on the page; the ghost word sits under it at 6 % and is cropped by the section foot with a soft fade
to the plane tone (the R round-1 version was hard-clipped through the glyphs: the word is centred, capped to the box width, and fades out; it is never cut at the sides).
*/
.r3a-signoff { position: relative; overflow: clip; isolation: isolate; padding-bottom: clamp(48px, 9vw, 120px); }
.r3a-signoff__mail { display: inline-block; max-width: 100%; margin: 0; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: var(--line);
font: 400 var(--r3-t-mail)/1.02 var(--r3-f-serif); letter-spacing: -.025em; overflow-wrap: anywhere; transition: text-decoration-color var(--r3-d-ui) var(--r3-ease-out); }
.r3a-signoff__mail:hover, .r3a-signoff__mail:focus-visible { text-decoration-color: var(--tier, var(--gold)); }
.r3a-signoff__ghost { position: absolute; z-index: -1; left: 50%; bottom: -.1em; transform: translateX(-50%); width: max-content; max-width: 96%; font: 400 min(21vw, 22rem)/.74 var(--r3-f-serif); letter-spacing: -.04em;
color: var(--ink); opacity: .06; white-space: nowrap; pointer-events: none; user-select: none; overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 96%); mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 96%); }
/* ---------------------------------------------------------------- 8 word index with a synced preview (W-72, G-94: Premium word index, good for a salon example)
Rows are real links; hover, focus and tap set --r3a-on on the host (r3-graft-press.js); the pane whose --i equals --r3a-on is opaque (calc, no selector per row).
Row 1 is lit at rest, so the static page shows a finished composition with its preview. Phones: no sticky pane, each row carries its own thumbnail (.r3a-idx__thumb).
*/
.r3a-idxhost { --r3a-on: 0; display: grid; gap: clamp(28px, 4vw, 56px); container-type: inline-size; }
.r3a-idx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.r3a-idx > li { border-bottom: 1px solid var(--line); }
.r3a-idx a { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: baseline; gap: 8px 16px; padding: clamp(14px, 1.6vw, 24px) 0; color: var(--ink-3); text-decoration: none; transition: color var(--r3-d-ui) var(--r3-ease-out), padding var(--r3-d-ui) var(--r3-ease-out); }
.r3a-idx a[aria-current="true"] { color: var(--ink); padding-left: .35em; }
.r3a-idx a[aria-current="true"] .r3-n { color: var(--tier, var(--gold)); }
.r3a-idx__t { min-width: 0; overflow-wrap: anywhere; font: 600 var(--r3-t-h2)/1.02 var(--r3-f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
@supports (width: 1cqw) { .r3a-idx__t { font-size: clamp(1.6rem, 7cqw, var(--r3-t-h2)); } }
/* a narrow host (the index inside a column): the sub-label drops under the title instead of colliding with it */
@container (max-width: 640px) { .r3a-idx a { grid-template-columns: 3rem minmax(0, 1fr); } .r3a-idx__s { grid-column: 2; white-space: normal; } }
.tier-starter .r3a-idx__t, .tier-growth .r3a-idx__t { font-family: var(--r3-f-display); font-weight: 500; letter-spacing: -.028em; }
.r3a-idx__s { font: 400 var(--r3-t-small)/1.4 var(--r3-f-text); white-space: nowrap; }
.r3a-idx a:focus-visible { outline: 2px solid var(--tier, var(--accent)); outline-offset: -2px; box-shadow: none; }
.r3a-idx__thumb { display: none; }
.r3a-idx__pane { position: relative; aspect-ratio: var(--r3a-pv-ar, 16 / 10); border-radius: var(--r3-radius); overflow: hidden; background: #1A1A21; box-shadow: 0 0 0 1px var(--line-2); }
.r3a-idx__pane > * { position: absolute; inset: 0; margin: 0; opacity: calc(1 - min(1, max(var(--r3a-on, 0) - var(--i, 0), var(--i, 0) - var(--r3a-on, 0)))); transition: opacity .5s var(--r3-ease-out); }
.r3a-idx__pane img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (min-width: 900px) { .r3a-idxhost { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; } .r3a-idx__pane { position: sticky; top: calc(var(--nav-h, 68px) + 28px); } }
@media (max-width: 899px) {
.r3a-idx a { color: var(--ink); grid-template-columns: 3rem minmax(0, 1fr) auto; }
.r3a-idx a[aria-current="true"] { padding-left: 0; }
.r3a-idx__thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; margin: 0 0 14px; }
.r3a-idx__pane { display: none; }
}
/* ---------------------------------------------------------------- 9 triad (G-71): three numbered columns, hairline INSIDE the content measure */
.r3a-triad { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.r3a-triad > li { padding: 22px 0 26px; border-bottom: 1px solid var(--line-2); }
.r3a-triad > li > .r3-n { display: block; margin-bottom: 1.1em; }
.r3a-triad__t { margin: 0 0 .4em; font: 500 var(--r3-t-h3)/1.12 var(--r3-f-display); letter-spacing: -.02em; }
.tier-premium .r3a-triad__t { font-family: var(--r3-f-serif); font-weight: 600; letter-spacing: -.012em; }
.r3a-triad__d { margin: 0; color: var(--ink-2); font-size: var(--r3-t-small); line-height: 1.55; }
@media (min-width: 768px) {
.r3a-triad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r3a-triad > li { padding: 24px clamp(18px, 2.4vw, 40px) 8px; border-bottom: 0; }
.r3a-triad > li:first-child { padding-left: 0; }
.r3a-triad > li + li { border-left: 1px solid var(--line-2); }
}
/* ---------------------------------------------------------------- 10 hang (W-57 / W-19): a narrow label column (numeral, ghost word, sticky title) and a content column */
.r3a-hang { display: grid; gap: clamp(28px, 3vw, 56px); }
@media (min-width: 1024px) {
.r3a-hang { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
.r3a-hang--stick > :first-child { position: sticky; top: calc(var(--nav-h, 68px) + 32px); }
.r3a-hang--rev { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
}
/* ---------------------------------------------------------------- 11 reduced motion */
.no-motion .r3a-ledger > li::before, .no-motion .r3a-idx a, .no-motion .r3a-idx__pane > *, .no-motion .r3a-pricelg a { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .r3a-ledger > li::before, .r3a-idx a, .r3a-idx__pane > *, .r3a-pricelg a { transition: none !important; } }
/* RC3 WP-MISC */
.r3a-signoff__mail { padding-block: 10px; }
/* b6 fix2: triad titles fit their column on tablets */
.r3a-triad > li { container-type: inline-size; }
.r3a-triad__t { font-size: min(var(--r3-t-h3), 9.5cqi); }
/* b6 fix52 price ladder, enlarged text */
.r3a-pricelg { container: pl / inline-size; }
@container pl (max-width: 20.45rem) {
.r3a-pricelg a, .r3x-s-duo .r3a-pricelg a, .r3x-s-paket--duo .r3a-pricelg a { grid-template-columns: 2.1rem minmax(0, 1fr); row-gap: 4px; }
.r3a-pricelg .r3-price, .r3x-s-duo .r3a-pricelg .r3-price, .r3x-s-paket--duo .r3a-pricelg .r3-price { grid-column: 2; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 0; }
.r3a-pricelg .r3-price__u { text-align: left; max-width: none; text-wrap: wrap; }
}
/* b6 fix90 ladder */
/* b6 fix90 ladder: from 1200 px the ask ladder stacks below 29 rem (120-150 % text on a desktop window) */
@media (min-width: 1200px) {
@container pl (max-width: 29rem) {
.r3a-pricelg a, .r3x-s-duo .r3a-pricelg a, .r3x-s-paket--duo .r3a-pricelg a { grid-template-columns: 2.1rem minmax(0, 1fr); row-gap: 4px; }
.r3a-pricelg .r3-price, .r3x-s-duo .r3a-pricelg .r3-price, .r3x-s-paket--duo .r3a-pricelg .r3-price { grid-column: 2; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 0; }
.r3a-pricelg .r3-price__u { text-align: left; max-width: none; text-wrap: wrap; }
}
}
/* b6 fix94 signoff mail */
/* b6 fix94: the sign-off e-mail is capped by the window and never breaks at its dot (6.55 em wide; 12.5 vw never binds at 100 %) */
.r3a-signoff__mail { font-size: min(var(--r3-t-mail), 12.5vw); overflow-wrap: normal; }
/* b6 fix95 ladder price column */
/* b6 fix95: between 20.5 and 30 rem the ladder's price is a right-aligned column (125-200 % text on 521-760 px windows: 'Premium / Max' no longer wraps); the stacked layout below 20.5 rem keeps its own alignment */
@media (max-width: 1199px) { @container pl (width > 20.45rem) and (max-width: 30rem) { .r3a-pricelg .r3-price { flex-direction: column; align-items: flex-end; gap: 0; } .r3a-pricelg .r3-price__u { font-size: .875rem; } } }
/* b6 f2 moms ladder unit */
/* b6 f2 moms: the stacked price ladder unit is balanced too (its "text-wrap: wrap" reset only undid the 320 px right-aligned box) */
html .r3a-pricelg .r3-price__u { text-wrap: balance; }