/* ZS R3 GRAFT "HELD" (r3-graft-held.css): components taken from direction B "The Held World" (the Premium opening and the photographic grammar), re-implemented under
the prefix r3p- so they never collide with the base's r3- names (B's tree used r3-poster, r3-sheet, r3-dock ... with other meanings).
Opt-in: loaded only by pages that use it, AFTER r3-tokens.css (and r3-graft-held.js after r3-core.js). Reads the base tokens; works in both themes.
Spec, markup contracts and the verification numbers: evidence/r3/final/BIBLE_R3.md sections g, h, i. Sources of the ideas: evidence/r3/directions/B (BIBLE.md 9.1-9.5, tree dirB).
THE RULES THIS FILE ENFORCES (panel 1, blind panel of 7)
- CLEAN PLATE: no object of a photograph ever crosses a headline letter, at any width from 320 to 2560 (B's depth sandwich put the candles in front of "värld" and
hid the "l" at 2560). The headline sits in the plate's own black floor, in a zone computed from the photograph's geometry (BIBLE g1); verified by pixel test.
- NO HARD ROUNDED EDGE where a sheet meets a photo or a plane (tone rule): a sheet is a feathered dip to the floor + the normal oklab plane blend, not a rounded card edge.
- Every hidden start state hangs on html.lib-on; html.no-motion and no-JS show the complete composed page; films never load on phones; every autoplaying thing has a
visible pause control; off-screen sticky bars are inert (base .r3-dock).
CONTENTS 1 tokens 2 CLEAN-PLATE HERO (+ ticket, landscape-phone two columns) 3 clean-plate beat 4 held plate + SHEET + gold HINGE 5 APERTURE film opener
6 film + credit (opaque caption) + pause 7 ATMOS (blurred photograph behind a showcase) 8 DOCK modifier 9 BELT (moving gallery + pause) 10 CLOSE (cream card on a photograph)
11 static / reduced-motion answers */
/* ================================ 1. TOKENS ================================ */
:root {
--r3p-gold: #DCBC7E; /* gold on dark photographic surfaces, both themes (the theme's own --gold is deeper in the light theme) */
--r3p-ink: #F3F0EA; --r3p-ink-2: #D9D3C8;
--r3p-dip: 56px; /* the feathered dip where a sheet rises over a photograph */
--r3p-glass: rgba(12, 12, 15, .72);
}
@media (min-width: 768px) { :root { --r3p-dip: 72px; } }
/* ================================ 2. CLEAN-PLATE HERO ================================ */
/* One photograph (the candle table) whose own black floor holds the type. Overlay layout from 1024 px (and on landscape phones): the stage is the photograph at its own
3:2 shape, as wide as the window but never wider than 1920 px (the source) nor taller than the window (150svh), centred on the floor tone, and every text zone is
positioned in units of the STAGE WIDTH (--u = 1 % of it), so the relation between type and objects is the same at every size. Zones (candle table, 3:2 master):
candles x 48.5-56 %, y 25-55 % glasses x 43-46 % (y 46-62 %) and x 62-70 % (y 53-65 %) table x 12-84 %, y 53-93 % black: everything else
-> headline: x 6-46 %, y 14-40 %; lead under it (x < 40 %, y < 54 %); ticket: x 66-95 %, y < 48 % (landscape phones: x 58-96 %).
Below 1024 px the layout stacks (copy, photograph, lead + ticket); the photograph's black top overlaps the copy block by 9 vw (its first object starts 17 % down), so the
headline never meets an object there either.
*/
.r3p-hero { --u: 1vw; position: relative; isolation: isolate; background: var(--r3-floor); color: var(--r3p-ink); overflow: clip; }
@supports (width: 1cqw) { .r3p-hero { --u: 1cqw; } .r3p-hero__stage { container-type: inline-size; } }
.r3p-hero__stage { --r3p-wedge: max(var(--gutter, 32px), calc((100vw - var(--wrap, 1320px)) / 2)); --r3p-sl: calc((100vw - min(100vw, 1920px, 150vh)) / 2);
position: relative; width: 100%; max-width: 1920px; margin-inline: auto; display: flex; flex-direction: column; }
.r3p-hero__plate { display: block; margin: calc(var(--u) * -9) 0 0; position: relative; z-index: 1; order: 4; }
.r3p-hero__plate img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 0; }
/* the plate's sides melt into the floor (its black is the page ink, baked; this is the belt-and-braces so no rectangle can ever show) */
.r3p-hero__plate { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
@media (max-width: 767px) and (orientation: portrait) { .r3p-hero__plate { -webkit-mask-image: none; mask-image: none; } }
/* stacked (default, < 1024 px): the copy's children are flex items in reading order; the photograph's black top sits under the headline */
.r3p-hero__copy { display: contents; }
.r3p-hero__back { order: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: .5em; min-height: 44px; margin: calc(var(--r3p-nav-off, 0px) + 12px) var(--gutter, 16px) 4px; position: relative; z-index: 2; color: var(--r3p-ink-2); font: 500 .9375rem/1 var(--r3-f-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgba(243, 240, 234, .3); }
.r3p-hero__back:hover { color: var(--r3p-ink); }
.r3p-hero .r3a-kicker { order: 2; margin: 0 var(--gutter, 16px) .5em; position: relative; z-index: 2; color: var(--r3p-gold); }
.r3p-hero .r3a-kicker b { color: var(--r3p-gold); }
.r3p-hero__h1 { order: 3; margin: 0 var(--gutter, 16px); position: relative; z-index: 2; font: 600 var(--r3-t-h1)/.9 var(--r3-f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; color: var(--r3p-ink); text-wrap: balance; }
.r3p-hero__l { display: block; }
.r3p-hero__h1 em { font-style: normal; color: var(--r3p-gold); }
.r3p-hero__lead { display: none; margin: 0; max-width: 34em; color: var(--r3p-ink-2); } /* the lead INSIDE the copy block: desktop overlay only */
.r3p-hero__lead--flow { display: block; order: 5; margin: 16px var(--gutter, 16px) 0; position: relative; z-index: 2; } /* the lead AFTER the photograph: stacked layouts and landscape phones (the same sentence; the other copy is display:none) */
.r3p-hero__ticket { order: 6; position: relative; z-index: 2; margin: 18px var(--gutter, 16px) 0; padding-bottom: 0; }
.r3p-hero__stage { padding-bottom: 28px; }
@media (min-width: 768px) and (max-width: 1023px) {
.r3p-hero__back, .r3p-hero .r3a-kicker, .r3p-hero__h1, .r3p-hero__lead--flow, .r3p-hero__ticket { margin-inline: var(--gutter, 24px); }
.r3p-hero__ticket { max-width: 440px; }
}
@media (max-width: 767px) and (orientation: portrait) { .r3p-hero__plate img { aspect-ratio: 10 / 11; max-height: min(58vh, 560px); } }
@supports (height: 1svh) { @media (max-width: 767px) and (orientation: portrait) { .r3p-hero__plate img { max-height: min(58svh, 560px); } } }
/* OVERLAY layout: desktop >= 1024 px, and landscape phones (short + wide) */
@media (min-width: 1024px), (max-height: 520px) and (orientation: landscape) and (min-width: 560px) {
.r3p-hero__stage { display: block; width: min(100%, 1920px, 150vh); padding-bottom: 0; }
.r3p-hero__plate { margin: 0; }
.r3p-hero__plate img { aspect-ratio: 3 / 2; max-height: none; }
.r3p-hero__copy { display: block; position: absolute; z-index: 2; left: min(calc(var(--u) * 6), calc(var(--r3p-wedge) - var(--r3p-sl))); top: calc(var(--r3p-nav-off, 0px) + var(--u) * 2.4); width: calc(var(--u) * 41); }
.r3p-hero__back, .r3p-hero .r3a-kicker, .r3p-hero__h1, .r3p-hero__lead { margin-inline: 0; }
.r3p-hero__back { margin-top: 0; }
.r3p-hero__h1 { font-size: calc(var(--u) * 8.4); }
.r3p-hero__ticket { position: absolute; left: auto; right: min(calc(var(--u) * 5), calc(var(--r3p-wedge) - var(--r3p-sl))); top: calc(var(--r3p-nav-off, 0px) + var(--u) * 2.4); width: max(calc(var(--u) * 29), 360px); margin: 0; }
}
@media (min-width: 1024px) {
.r3p-hero__lead { display: block; width: calc(var(--u) * 34); margin: calc(var(--u) * 1.6) 0 0; font-size: max(.9375rem, calc(var(--u) * 1.3)); }
.r3p-hero__lead--flow { display: none; }
}
@supports (height: 1svh) { @media (min-width: 1024px), (max-height: 520px) and (orientation: landscape) and (min-width: 560px) { .r3p-hero__stage { width: min(100%, 1920px, 150svh); } } }
@supports (height: 1svh) { .r3p-hero__stage { --r3p-sl: calc((100vw - min(100vw, 1920px, 150svh)) / 2); } } /* FXF 7: same unit as the width above (vh jumps with a phone's address bar, svh does not) */
/* landscape phones: compact copy, a compact ticket in the right-hand black; the lead sits below the fold (price + the ask are inside the fold at 667x375 and 844x390) */
@media (max-height: 520px) and (orientation: landscape) and (min-width: 560px) and (max-width: 1023px) {
.r3p-hero__back { display: none; }
.r3p-hero .r3a-kicker { font-size: .8125rem; letter-spacing: .3em; margin-bottom: .3em; }
.r3p-hero__h1 { font-size: calc(var(--u) * 8.8); }
.r3p-hero__lead--flow { margin: 12px var(--gutter, 24px) 0; }
.r3p-hero__ticket { right: calc(var(--u) * 3); width: calc(var(--u) * 40); top: calc(var(--r3p-nav-off, 0px) + var(--u) * 2); }
}
/* the ticket: price + the one ask on dark glass over the photograph (never over a running film). Premium carries a gold edge. */
.r3p-ticket { display: grid; gap: 12px; align-content: start; padding: clamp(16px, 2vw, 24px); border-radius: 18px; background: var(--r3p-glass); border: 1px solid rgba(220, 188, 126, .4); color: var(--r3p-ink);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .r3p-ticket { background: rgba(12, 12, 15, .88); } }
.r3p-ticket .r3-price__n { color: var(--r3p-ink); } .r3p-ticket .r3-price__u, .r3p-ticket .r3-price__note { color: var(--r3p-ink-2); }
.r3p-ticket .r3-price__note { margin: -2px 0 2px; }
.r3p-ticket .r3-btn { width: 100%; }
.r3p-ticket .r3-link { justify-self: start; color: var(--r3p-ink); text-decoration-color: rgba(243, 240, 234, .4); }
@media (min-width: 768px) and (max-width: 1023px) { .r3p-ticket .r3-btn { --fs: 1rem; --px: 18px; } }
@media (max-height: 520px) and (orientation: landscape) {
.r3p-ticket { gap: 6px; padding: 10px 12px; border-radius: 14px; }
.r3p-ticket .r3-price { --r3-price-fs: 2.25rem; }
.r3p-ticket .r3-btn { --h: 44px; --fs: .8125rem; --px: 10px; }
.r3p-ticket .r3-btn .r3-btn__arr { display: none; }
.r3p-ticket .r3-price__u { font-size: .875rem; } /* FXF 7: the unit is never below 14 px on a phone (it was 12 px) */
.r3p-ticket .r3-price__note { font-size: .8125rem; margin: 0; } /* and the note under it 13 px (it was 11 px) */
.r3p-ticket .r3-link { display: none; }
}
/* ================================ 3. CLEAN-PLATE BEAT (G-113) ================================ */
/* Desktop, motion on: the hero pins for a runway while the copy clears and the bare table holds; --r3p-p (0..1) is written by r3-graft-held.js ([data-r3p-pin]).
..
Static / no-JS / phones: the composed hero in flow, no runway. */
.r3p-clear__run { display: none; }
@media (min-width: 1024px) and (min-height: 600px) {
html.lib-on .r3p-clear.is-live > .r3p-hero { position: sticky; top: 0; }
html.lib-on .r3p-clear.is-live .r3p-clear__run { display: block; height: var(--r3p-run, 48svh); }
.r3p-clear.is-live { --c1: clamp(0, (var(--r3p-p, 0) - .14) / .2, 1); --c2: clamp(0, (var(--r3p-p, 0) - .3) / .2, 1); }
.r3p-clear.is-live .r3p-hero__ticket, .r3p-clear.is-live .r3p-hero__lead { opacity: calc(1 - var(--c1)); transform: translate3d(0, calc(var(--c1) * -16px), 0); will-change: opacity, transform; }
.r3p-clear.is-live .r3p-hero__copy { opacity: calc(1 - var(--c2)); transform: translate3d(0, calc(var(--c2) * -22px), 0); will-change: opacity, transform; }
.r3p-clear.is-cleared .r3p-hero__ticket { pointer-events: none; }
.r3p-clear.is-live .r3p-hero__ticket:focus-within, .r3p-clear.is-live .r3p-hero__copy:focus-within { opacity: 1; transform: none; pointer-events: auto; }
}
/* ================================ 4. HELD PLATE + SHEET + HINGE (G-02, W-13, W-51) ================================ */
/* The plate is held (sticky) while the sheet rises over it. The sheet is NOT a rounded card (panel 12): it is a feathered DIP to the floor tone over the plate (a transparent-to-void
block, --r3p-dip tall, so no edge pixel exists), followed by a normal .r3-plane that starts from the void (void: no blend; cream in the light theme: the warm oklab bloom).
One containing block; the hinge numeral lives in the wrapper:
..
01
...copy...
*/
.r3p-hold { position: relative; }
.r3p-hold__plate { position: sticky; top: 0; z-index: 0; height: 100vh; min-height: 480px; margin: 0; overflow: clip; background: var(--r3-floor); }
@supports (height: 1svh) { .r3p-hold__plate { height: 100svh; } }
.r3p-hold__plate > .r3-photo, .r3p-hold__plate > picture, .r3p-hold__plate > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.r3p-hold__plate > .r3-photo { background: transparent; }
.r3p-hold__run { height: var(--r3p-hold-run, 0px); }
.r3p-hold__plate .r3p-dimmer { position: absolute; inset: 0; z-index: 3; background: #0C0C0F; opacity: calc(var(--r3p-cover, 0) * .55); pointer-events: none; }
@media (max-height: 500px) { .r3p-hold__plate { position: relative; height: 70vh; min-height: 0; } }
@supports (height: 1svh) { @media (max-height: 500px) { .r3p-hold__plate { height: 70svh; } } } /* FXF 7 */
.r3p-sheet { position: relative; z-index: 2; margin-top: calc(var(--r3p-dip) * -1); }
.r3p-sheet__dip { height: var(--r3p-dip); background: linear-gradient(180deg, rgba(12, 12, 15, 0), #0C0C0F); pointer-events: none; }
/* the hinge: a gold Cormorant numeral on the seam. It lies in the dip and the first rows of the plane (dark in both themes), so it is always the light gold (#DCBC7E on dark: 10.7:1). */
.r3p-hinge { position: absolute; left: var(--r3-edge, 16px); top: 0; z-index: 3; margin: 0; transform: translateY(-34%); pointer-events: none; font: 600 clamp(6.4rem, 3rem + 10vw, 12.5rem)/1 var(--r3-f-serif); letter-spacing: -.03em; font-variant-numeric: lining-nums; color: var(--r3p-gold); }
@media (min-width: 1024px) { .r3p-hinge { left: max(var(--gutter, 32px), calc((100vw - var(--wrap, 1320px)) / 2)); } }
/* ================================ 5. APERTURE FILM OPENER (G-03, W-05, template 53 porthole) ================================ */
/* A round window holding the film grows to the full frame while "Filmiskt" and "bildspråk" part around it. Runway 250 % of the window height, clip-path only (no layout
property animates). --r3p-p is written by r3-graft-held.js. Static, phones, tablets and short windows: the film plate as a 16:10 (4:5 on phones) still with the headline on its foot.