/* ===================================================================== KITHE — bekithe.com design tokens · FIELD NOTEBOOK EDITION · neu HOW TO ADJUST: change a Tier-1 primitive to restyle globally; change a Tier-2 semantic alias to re-map a role. This file is the single source of truth — no design values live in index.html. Structure (one :root block, three tiers, top to bottom): TIER 1 — PRIMITIVES raw values. The ONLY place literal hex/px live. TIER 2 — SEMANTIC role names. The page always uses these. TIER 3 — COMPONENT knobs for repeated components. Reference Tier 2. Type discipline (this edition's law): exactly FOUR voices — CHAPTER LABEL small mono, faint, wide-tracked → --text-label DISPLAY Bricolage Grotesque, one size/level → --text-heading / --text-hero BODY the reading face, short measure → --text-body (+ --text-lead) SAGE QUOTE now set in the Hanken sans voice → --text-sage (--ff-quote kept as a role for a possible later serif) Never more than 2–3 sizes on one phone screenful. Convention note: index.html media queries use `ch` widths (e.g. 90ch) because custom properties cannot be read inside @media conditions. ===================================================================== */ :root { /* =================================================================== TIER 1 — PRIMITIVES (raw values) =================================================================== */ /* ---- Color · "Moss & Stone", day/light only ---------------------- */ --c-stone: #DFE3D4; /* page ground */ --c-panel: #DFE3D4; /* raised paper panel */ --c-panel-sunk: #D2D8C2; /* recessed panel */ --c-panel-mine: #CFDAB4; /* "mine" — surfaces that belong to the owner */ --c-panel-mine-sunk: #C2CFA3; /* recessed "mine" surface (the plot of land) */ --c-ink: #292B25; /* text + strokes */ --c-muted: #474940; /* secondary text */ --c-faint: #5D5F54; /* captions, hairlines-in-spirit */ --c-moss: #88A25F; /* the ONE accent */ --c-moss-ink: #21270F; /* text on moss */ --c-on-ink: #E9EAE4; /* text on ink */ --c-danger: #9C5A44; /* honest-limits marker only */ --c-danger-ink: #F1EEE7; /* text on danger */ /* ---- Elevation (neu shadow vocabulary) ---- */ --sh-out: -7px -7px 16px rgba(255,255,255,.92), 7px 7px 16px rgba(139,148,120,.6); /* How far --sh-out reaches past its own box: 7px of offset plus 16px of blur. Anything cropped at a screen edge has to clear this or the shadow is sliced rather than hidden — see --device-w-narrow. */ --shadow-reach: 23px; --sh-out-sm: -4px -4px 9px rgba(255,255,255,.88), 4px 4px 9px rgba(139,148,120,.55); --sh-in: inset -5px -5px 10px rgba(255,255,255,.82), inset 5px 5px 12px rgba(139,148,120,.6); --sh-in-sm: inset -3px -3px 6px rgba(255,255,255,.78), inset 3px 3px 7px rgba(139,148,120,.55); --sh-moss: -4px -4px 9px rgba(255,255,255,.7), 4px 4px 10px rgba(112,133,74,.5); --sh-moss-active: inset 3px 3px 7px rgba(63,78,38,.45); /* ---- Space -------------------------------------------------------- */ --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-15: 15px; --sp-16: 16px; --sp-22: 22px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-96: 96px; --sp-128: 128px; --sp-160: 160px; --sp-192: 192px; /* ---- Radius ------------------------------------------------------- */ --r-control: 14px; --r-card: 20px; --r-screen: 14px; --r-full: 9999px; /* ---- Border width ------------------------------------------------- */ --bw-stroke: 0; --focus-width: 2px; /* focus ring — deliberately independent of --bw-stroke */ --mark-stroke: 2px; /* decorative marks that must survive the neu border-dissolve (link underlines, the moss quote rule) — deliberately independent of --bw-stroke */ --bw-hair: 1px; /* ---- Font size · the STRICT scale (seven steps, nothing else) ----- */ --fs-xs: 12px; /* labels, captions */ --fs-sm: 14px; /* mono interface */ --fs-md: 17px; /* the reading size */ --fs-lg: 20px; /* living-card value */ --fs-lead: clamp(21px, 18px + 1.2vw, 26px); /* lead / stanza line */ --fs-heading: clamp(33px, 25px + 2.8vw, 50px); /* chapter head */ --fs-sage: clamp(26px, 20px + 2.4vw, 38px); /* the serif voice */ --fs-hero: clamp(44px, 26px + 5.4vw, 82px); /* title page only */ --fs-2xs: 11px; /* BELOW the scale — a margin note on a narrow screen, where --fs-xs reads as body */ --fs-heading-narrow: 30px; /* chapter head, narrow. The --fs-heading clamp cannot reach this: its preferred term is already ~36px at 390px, so lowering the floor would change nothing */ /* ---- Line height ---------------------------------------------------- */ --lh-xs: 16px; --lh-sm: 20px; --lh-md: 24px; /* pairs with --fs-md when set solid (card name) */ --lh-lg: 28px; /* pairs with --fs-lg mono */ --lh-lead: 1.3; /* unitless — lead lines */ --lh-heading: 1.06; /* unitless — chapter heads */ --lh-hero: 1.01; /* unitless — tracks the fluid hero size */ --lh-body: 1.75; /* unitless ratio for reading copy */ --lh-quote: 1.45; /* unitless — the serif sage voice breathes more */ /* ---- Weight --------------------------------------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---- Family --------------------------------------------------------- */ --ff-head: 'Bricolage Grotesque', system-ui, sans-serif; --ff-mono: 'IBM Plex Mono', monospace; --ff-body: 'Hanken Grotesk', system-ui, sans-serif; /* --ff-quote kept as a live role, re-pointed to the body sans (per skin-type-tf.css: all body copy sans, warm-voice slot too). Swap here to reintroduce a serif later. */ --ff-quote: 'Hanken Grotesk', system-ui, sans-serif; /* ---- Letter spacing -------------------------------------------------- */ --ls-wide: 0.14em; /* chapter labels */ --ls-wider: 0.24em; /* wordmark */ --ls-tight: -0.015em; /* large display heads */ --ls-tighter: -0.03em; /* the hero head only */ /* ---- Motion ----------------------------------------------------------- */ --t-quick: 150ms; --t-pop: 240ms; /* quick fade-up of a stroke as it starts drawing */ --t-chip-fade: 500ms; --t-fill: 600ms; /* diagram fills/labels fading in after the draw */ --t-slow: 700ms; --t-card-cross: 900ms; /* living-card value crossfade (each direction) */ --t-draw: 1400ms; /* one diagram stroke drawing itself */ --t-chip-hold: 2600ms; /* how long "· just updated" stays */ --t-card-stagger: 700ms; /* gap between one card updating and the next */ --t-card-cycle: 9000ms; /* three staggered updates + the chip hold + a rest */ --ease-drift: cubic-bezier(0.19, 0.6, 0.24, 1); --ease-ground: ease-in-out; /* ---- Layout ------------------------------------------------------------ */ --w-page: 760px; /* ONE book column — the reading edition's page */ --w-card: 360px; /* living hero card max width */ --w-diagram-min: 640px; /* a plat never shrinks below legibility; it pans */ --w-ph-logo: 260px; /* logo-lockup placeholder max width */ --w-ph-phone: 280px; /* app-screen placeholder max width */ --w-ph-wide: 520px; /* wide app-detail placeholder max width */ --w-stage: 1240px; /* the pinned stage's container */ --h-title: 88svh; /* the title page (small-viewport units) */ --h-title-vh: 88vh; /* fallback where svh is unsupported */ --h-stanza: 78svh; /* a full-screen sage-quote page */ --h-stanza-vh: 78vh; /* fallback */ --z-back: -1; /* behind all content */ --z-lift: 2; /* words layered over the device (narrow screens) */ --z-veil: 4; /* the dark layer over the whole composition */ --z-veil-type: 5; /* a veiled beat's text, standing on the veil */ --z-chrome: 6; /* masthead and the beat rail — above the veil, so the reader keeps the wordmark and the rail */ /* ---- Opacity ------------------------------------------------------------ */ --op-ghost: .18; /* a mark that is present but not being counted */ --op-quiet: .35; /* an inactive mark */ --op-hover: .7; /* ---- Aspect ratios (placeholder figures) -------------------------------- */ --ar-logo: 5 / 2; /* a lockup is wide and short */ --ar-phone: 9 / 16; /* an app screen */ --ar-wide: 4 / 3; /* a cropped app detail */ --ar-device: 9 / 20; /* a current phone. --ar-phone (9/16) describes an older one and is kept only for the legacy placeholders */ /* =================================================================== TIER 2 — SEMANTIC (roles; markup uses these, never primitives) =================================================================== */ /* ---- Color roles ---------------------------------------------------- */ --color-bg: var(--c-stone); --color-surface: var(--c-panel); --color-surface-sunk: var(--c-panel-sunk); --color-surface-mine: var(--c-panel-mine); --color-surface-mine-sunk: var(--c-panel-mine-sunk); --color-text: var(--c-ink); --color-text-muted: var(--c-muted); --color-text-faint: var(--c-faint); --color-accent: var(--c-moss); --color-on-accent: var(--c-moss-ink); --color-border: var(--c-ink); --color-hairline: var(--c-ink); --color-rule: var(--c-faint); /* survey hairlines between sections */ --color-danger: var(--c-danger); --color-on-danger: var(--c-danger-ink); --color-focus: var(--c-ink); --color-on-ink: var(--c-on-ink); /* ---- Elevation roles -------------------------------------------------- */ --elev-raised: var(--sh-out); --elev-raised-sm: var(--sh-out-sm); --elev-sunk: var(--sh-in); --elev-sunk-sm: var(--sh-in-sm); /* ---- Space roles · the book's vertical rhythm ------------------------ */ --space-gutter: var(--sp-22); --space-row: var(--sp-15); --space-stanza: var(--sp-32); /* stanza-to-stanza — a full blank line of air */ --space-block: var(--sp-48); /* block-to-block inside a chapter */ --space-breath: clamp(var(--sp-48), 10vw, var(--sp-64)); /* head-to-content air */ --space-figure: clamp(var(--sp-64), 18vw, var(--sp-96)); /* air around figures */ --space-section: clamp(var(--sp-96), 28vw, var(--sp-160)); /* chapter break — a page turn */ --space-section-grand: clamp(var(--sp-128), 34vw, var(--sp-192)); /* the §④ embassy moment */ /* ---- Type roles · the FOUR voices (font shorthand bundles) ----------- */ /* CHAPTER LABEL — the quiet section marker */ --text-label: var(--fw-medium) var(--fs-xs)/var(--lh-xs) var(--ff-mono); --text-caption: var(--fw-regular) var(--fs-xs)/var(--lh-xs) var(--ff-mono); --text-mono-md: var(--fw-medium) var(--fs-sm)/var(--lh-sm) var(--ff-mono); --text-mono-lg: var(--fw-medium) var(--fs-lg)/var(--lh-lg) var(--ff-mono); /* BODY — the reading voice */ --text-body: var(--fw-regular) var(--fs-md)/var(--lh-body) var(--ff-body); /* LEAD — the short strong line that opens or lands a thought */ --text-lead: var(--fw-semibold) var(--fs-lead)/var(--lh-lead) var(--ff-head); /* DISPLAY — one size per level, nothing in between */ --text-heading: var(--fw-black) var(--fs-heading)/var(--lh-heading) var(--ff-head); --text-hero: var(--fw-black) var(--fs-hero)/var(--lh-hero) var(--ff-head); /* SAGE — serif, only the two philosophical blockquotes */ --text-sage: var(--fw-regular) var(--fs-sage)/var(--lh-quote) var(--ff-quote); --tracking-label: var(--ls-wide); --tracking-wordmark: var(--ls-wider); --tracking-display: var(--ls-tight); --tracking-hero: var(--ls-tighter); /* ---- Layout roles ------------------------------------------------------ */ --measure: 56ch; /* body reading measure */ --measure-quote: 26ch; /* the sage page — one thought, wide margin */ --content-max: var(--w-page); /* the book column */ --layer-ground: var(--z-back); /* the living ground sits behind everything */ /* =================================================================== TIER 3 — COMPONENT (knobs for repeated components) =================================================================== */ /* ---- Living ground (fixed page background) ----------------------------- */ --ground-light: radial-gradient(1200px 700px at 50% -6%, #E9ECDF 0%, #DFE3D4 60%); /* ---- Panel (bordered flat card) --------------------------------------- */ --panel-bg: var(--color-surface); --panel-border-color: var(--color-border); --panel-border-width: var(--bw-stroke); --panel-border: var(--panel-border-width) solid var(--panel-border-color); --panel-radius: var(--r-card); --panel-pad: var(--sp-24); /* ---- Title page (the hero as a book's opening page) --------------------- */ --title-min-h: var(--h-title); --title-min-h-fallback: var(--h-title-vh); /* ---- Stanza page (a full-screen sage-quote spread) ----------------------- */ --stanza-min-h: var(--h-stanza); --stanza-min-h-fallback: var(--h-stanza-vh); /* ---- Living card (the quiet demonstration below the title) --------------- */ --card-bg: var(--color-surface-mine); --card-border: var(--bw-stroke) solid var(--color-border); --card-shadow: var(--elev-raised); /* living card = raised */ --card-radius: var(--r-card); --card-pad: var(--sp-24); --card-max: var(--w-card); --card-cross: var(--t-card-cross); --card-cycle: var(--t-card-cycle); --card-stagger: var(--t-card-stagger); --card-name-font: var(--fw-semibold) var(--fs-md)/var(--lh-md) var(--ff-head); /* ---- Hero band (this edition's plot of land) ---- */ --band-bg: var(--color-surface-mine-sunk); /* == today's .hero-band fill */ --band-radius: var(--r-screen); --band-pad: var(--sp-24); --band-shadow: var(--elev-sunk); /* hero band = sunk well */ /* the "· just updated" chip */ --chip-bg: var(--color-accent); --chip-text: var(--color-on-accent); --chip-border: var(--bw-hair) solid var(--color-border); --chip-shadow: var(--sh-moss); /* chip = moss keycap */ --chip-radius: var(--r-full); --chip-pad-y: var(--sp-2); --chip-pad-x: var(--sp-12); --chip-fade: var(--t-chip-fade); --chip-hold: var(--t-chip-hold); /* ---- Sage quote mark (the short moss rule above each quote) --------------- */ --quote-mark-color: var(--color-accent); --quote-mark-width: var(--sp-48); --quote-mark-thickness: var(--mark-stroke); --quote-mark-gap: var(--space-block); /* ---- Placeholder figures (deliberate, framed, labeled) -------------------- They must read as intention, never as broken content. */ --ph-bg: var(--color-surface-sunk); --ph-border: var(--bw-hair) dashed var(--color-text-faint); --ph-shadow: var(--elev-sunk-sm); /* figure = small sunk well */ --ph-radius: var(--r-screen); --ph-pad: var(--sp-24); --ph-caption-font: var(--text-caption); --ph-caption-color: var(--color-text-faint); --ph-caption-tracking: var(--tracking-label); --ph-mark-color: var(--color-text-faint); --ph-mark-size: var(--sp-12); --ph-mark-stroke: var(--bw-hair); --ph-aspect-logo: var(--ar-logo); --ph-aspect-phone: var(--ar-phone); --ph-aspect-wide: var(--ar-wide); --ph-max-logo: var(--w-ph-logo); --ph-max-phone: var(--w-ph-phone); --ph-max-wide: var(--w-ph-wide); /* ---- Text links ----------------------------------------------------------- */ --link-color: var(--color-text); --link-underline-color: var(--color-accent); --link-underline-width: var(--mark-stroke); --link-underline-width-hover: var(--sp-4); --link-underline-gap: var(--sp-4); /* ---- Store badge (coming-soon, disabled) ----------------------------------- */ --badge-bg: var(--color-surface-sunk); --badge-text: var(--color-text-muted); --badge-border-color: var(--color-text-faint); --badge-border-width: var(--bw-hair); --badge-shadow: var(--elev-sunk-sm); /* coming-soon = pressed-in (disabled) */ --badge-radius: var(--r-full); --badge-pad-y: var(--sp-12); --badge-pad-x: var(--sp-24); --badge-font: var(--text-label); /* ---- Diagrams (inline SVG) ---------------------------------------------------- */ --diagram-stroke: var(--color-border); --diagram-surface: var(--color-surface); --diagram-surface-sunk: var(--color-surface-sunk); --diagram-mine: var(--color-surface-mine); --diagram-mine-sunk: var(--color-surface-mine-sunk); --diagram-faint: var(--color-text-faint); --diagram-accent: var(--color-accent); --diagram-label: var(--color-text-muted); --diagram-caption: var(--color-text-faint); --diagram-min: var(--w-diagram-min); /* below this, the plat pans */ --diagram-air: var(--space-figure); /* room around each plat */ /* ---- Diagram draw-on-scroll (the surveyor's plat) ------------------------------- */ --draw-duration: var(--t-draw); --draw-stagger: var(--t-quick); --draw-pop: var(--t-pop); --draw-fill: var(--t-fill); --draw-ease: var(--ease-drift); --draw-detail-delay: calc(var(--t-draw) + var(--t-quick) * 4); /* ---- Survey rules + margin labels ------------------------------------------------ */ --rule: var(--bw-hair) solid var(--color-rule); --survey-label-pad: var(--sp-8); /* ---- Honest-limits panel marker -------------------------------------------------- */ --honest-bar-color: var(--color-danger); --honest-bar-width: var(--sp-8); /* ---- Scroll reveal -------------------------------------------------------------------- */ --reveal-shift: var(--sp-16); --reveal-duration: var(--t-slow); --reveal-ease: var(--ease-drift); --reveal-stagger: var(--t-quick); /* =================================================================== THE PINNED REEL — 2026-07-29-site-redesign-design.md A device, a pinned stage and a progress rail: three things the system had never needed before. =================================================================== */ /* ---- The device ---------------------------------------------------------- */ /* Height-first. A fixed width against a 9:20 ratio makes a device taller than a laptop viewport, and it runs off the bottom of the screen. */ --device-h: min(68svh, 680px); --device-w: calc(var(--device-h) * 9 / 20); /* Narrow — a crop of a phone rather than a whole one, so its two axes come from different units on purpose. WIDTH from svh: the width a 9:20 handset 92svh tall would have. That was the whole device before it became a crop, and it is the proportion the page was composed against. HEIGHT and CROP from lvh: a mobile browser's toolbar retracting exposes the strip between 100svh — the stage's height — and 100lvh, and a height in svh left the device's last 3svh sitting in it: rounded corners, neu highlight and all, below the note's scrim and beside the rail. Drawn 24px past the tallest the screen can be, so no bottom edge is ever on it. Both units are fixed per orientation, so neither resizes mid-scroll as a toolbar comes and goes. dvh would. ...and the SIDES get what the foot already had. The svh width alone put the device at 89–106% of a handset's width — measured across seven sizes — so its edges landed just inside the glass and the crop box sliced the shadow on the right by 1–34px. The fill is --color-surface, the same value as the ground, so that shadow IS the device: cut it and what is left is a dark stripe hugging the right edge and running off the foot, which is not a phone. It is one screen at a time; the content is in the middle and no edge needs to be on it. So the width can never be less than the screen plus the shadow's reach at both ends, and both side edges crop away like the bottom one. max(), so a screen tall enough to want the svh width still gets it. */ --device-w-narrow: max(calc(92svh * 9 / 20), calc(100vw + 2 * var(--shadow-reach))); --device-h-narrow: calc(100lvh - var(--stage-device-top) + var(--sp-24)); --device-crop-h: 100lvh; /* The band a retracting toolbar exposes below the stage's 100svh. The rule the whole narrow composition follows: TYPE anchors to svh, so it is on screen in either toolbar state; PAINT anchors to lvh, so it always reaches the foot of the screen. Zero wherever the two units agree, which is every desktop browser — so nothing about this is visible there. */ --screen-strip: calc(100lvh - 100svh); --device-radius: 38px; --device-shadow: var(--elev-raised); --device-fill: var(--color-surface); /* ---- The pinned stage ----------------------------------------------------- */ --stage-max: var(--w-stage); --stage-gap: var(--sp-48); --rail-words: 24rem; /* the argument column */ --rail-note: 17rem; /* the margin-note column */ /* Anchors, not centring: a centred column is a function of everything below it, so any variation moves the heading. See the spec, §8. */ --stage-words-top: 24svh; --stage-note-top: 44svh; --stage-device-top: 11svh; --beat-h: 52svh; /* how far you scroll to advance one beat */ /* ---- The beat rail -------------------------------------------------------- */ --mark-size: 5px; --mark-chapter-h: 9px; /* a pill: a chapter opens here */ --mark-gap: var(--sp-8); --mark-idle: var(--op-quiet); --mark-stanza: var(--op-ghost); --mark-hover: var(--op-hover); --mark-on: var(--color-accent); /* ---- Scrim — lets type sit over the device without landing on a card row -- The stop is where the stone STOPS being opaque, measured from the edge the type is anchored to. 62% was set against an empty device. Measured at 480px with the real strings: the argument's last line sits at 78–83% of the words block, so it was reading over 0.46–0.57 stone. Harmless while the device is an empty panel the same colour as the ground; not harmless the moment the device carries the app's real screens, which is this scrim's whole reason for existing. So the stone holds until the type ends: the block's own padding on the side the gradient fades toward, which is --sp-64 on both blocks and therefore self-correcting at any heading length. */ --scrim-stop: calc(100% - var(--sp-64)); --scrim-down: linear-gradient(to bottom, var(--c-stone) var(--scrim-stop), transparent); --scrim-up: linear-gradient(to top, var(--c-stone) var(--scrim-stop), transparent); /* ---- The veil -------------------------------------------------------------- Every chapter opens on a dark page. The whole composition dims to ink and the beat's text stands centred over it, because that beat has no app to show: a problem beat would be the app answering a question the page has not asked yet, and a principle has no screen at all — a philosophy is not a view. At the turn the veil lifts, the words take their column, and the device becomes the subject. That is the one moment the reader should feel, so it rides --swap-in (the gentle arrival), never the quick --swap-out. The device is not itself darkened — it does not need to be. Its fill is --c-panel, the same value as the ground, so under the veil it reads only by its neu shadow: present, barely. The layers are FIXED to the viewport rather than sized to the stage. A stage is 100svh and the screen can be 100lvh, so anything stage-sized leaves the strip a mobile toolbar exposes undimmed — see --screen-strip. */ /* Where the HEADING's top lands when the page is dark — an anchor, not a centring, for the reason the whole page is anchored: a centred block is a function of its own height, and this block's height changes with the beat's heading and sentence. Centred, it therefore had to re-centre when the new text landed, and settled 17px after arriving. Anchored, the target is the same for every chapter, so there is one move and no settle. Wide is nearly level with the column, so the move there reads as a sideways slide; narrow has nowhere sideways to go, so it is a lift. */ --veil-head-top: 30svh; --veil-head-top-narrow: 40svh; /* The opening. The device rises alone before a word arrives — on a page that is otherwise still, the phone settling in is the only thing to watch, and it says what the site is about before the sentence does. It is the one wait a visitor has not chosen, so it is the one that has to be paid for: at --t-draw the caption did not finish until ~3.9s. */ --open-rise: var(--t-slow); /* The still frame BEFORE the entrance begins. Arriving at the site, the device started rising on the frame the page painted, so the opening had no beat to start from — every other arrival on the page is preceded by a gap (a beat change empties the stage for ~880ms before the new label lands), and the one arrival with nothing to fade out had none. One --veil-stagger: the same interval that separates the opening's own parts from each other, so the first move is spaced from the page appearing exactly as the later moves are spaced from it. The masthead and the rail are deliberately NOT held — they are the frame the still moment sits in, and a wholly blank page reads as a slow load rather than as a pause. */ --open-hold: var(--veil-stagger); /* The margin note joins the block when the page is dark: a gloss pinned out in the right margin makes no sense once the argument has left the column. It cannot take an anchor of its own — the block above it is content-sized now, so a fixed one left gaps of 4px on one chapter and 140px on another. It follows the sentence instead, by this much. */ --veil-note-gap: var(--space-block); /* The four parts arrive in the order they are read — chapter, heading, sentence, note — and only on the way in. See body.is-revealing. Three steps of --t-quick: one step read as a flicker of near-simultaneous arrivals rather than a sequence, which is not what it is for. */ --veil-stagger: calc(var(--t-quick) * 3); --veil-fill: color-mix(in srgb, var(--c-ink) 88%, transparent); --veil-type: var(--c-on-ink); --veil-type-faint: color-mix(in srgb, var(--c-on-ink) 66%, transparent); /* ---- The beat swap -------------------------------------------------------- */ /* Asymmetric: leave quickly, arrive gently. --swap-lift is deliberately NOT --reveal-shift (16px, a whole block entering) and not the app's 7px cue lift, which is off this scale entirely — it is one step, --sp-8. */ --swap-out: var(--t-pop); --swap-in: var(--t-card-cross); --swap-lift: var(--sp-8); --swap-ease: var(--ease-drift); }