/* ========================================================================== IMPRESSION — the premium layer Added 2026-09-03. The owner: "Apply premium feeling features that are meaningful and relevant." THE REFERENCE, AND WHY NONE OF IT IS COPIED. He pointed at pikapawnshop.com and pikapricematch.com, which he and I built. Their premium feel is made of six moves: a preloader with a counter, a split-letter hero, staggered reveal-on-scroll, a pointer-tracked holographic foil, a looping sheen sweep, and pill buttons that lift on a colored glow. Four of those six would be wrong here, and copying them would just make a second Pika. That site is a dark-ground trading-card shop: neon energy spectrum, 20px radii, glow shadows. This is a letterpress book publisher in Wilson County — warm paper, hairlines, NO DROP SHADOWS EVER, depth from luminance steps alone (DESIGN-BIBLE §2). A glowing pill button here is not premium, it is a different company. So the MOVES are taken and the IDIOM is this house's: Pika here ---- ---- split-letter hero the headline SETS ITSELF, letter by letter, the way type is set — the literal trade reveal-on-scroll, staggered ink settles: a 8px rise and the ink coming up to full density rules as neon spectrum the rule is LAID across the page, left to right, the way a compositor lays one holographic foil, tracked the blind stamp catches RAKING LIGHT, which is the only way a real deboss is ever seen looping sheen ONE pass of varnish across the painting, on arrival — a painting is varnished; a book cover does not strobe pill lifts on a glow the button takes an IMPRESSION: it goes down 1px and the ink deepens EVERYTHING HERE IS GATED ON html.js AND ON prefers-reduced-motion. With script off, or motion reduced, every rule below is inert and the page is exactly what it was. Nothing is ever left invisible: impression.js has a hidden-tab path and a 1.8s last-resort net, both learned from the bug note in the Pika build ("the entire page renders blank for anyone who opens it in a background tab"). ========================================================================== */ :root { /* NOT A NEW EASE. DESIGN-BIBLE §5: "One easing — cubic-bezier(.2,.7,.2,1) — and durations from one scale: 120 (a press), 240 (a bar yielding), 320 (an arrival), 700 (a rule drawn)." The first cut of this file imported the reference site's expo-out, cubic-bezier(.16,1,.3,1), because it has a longer settle and reads richer. That is precisely the sloppiness the owner named: a second easing adopted because another site used it, on a page whose own written law says there is one. The law wins. Every duration below is off that scale too, and the one figure that is not is argued for where it appears. */ --imp-ease: cubic-bezier(.2, .7, .2, 1); --imp-rise: calc(2 * var(--lead)); /* 8px. The house unit, not a round number. */ } /* Everything in this file is inside this one guard. Motion is opt-in for a reader who has not asked for less of it, and only when script is running. */ @media (prefers-reduced-motion: no-preference) { /* ---------------------------------------------------------------------- 1. THE HEADLINE SETS ITSELF ---------------------------------------------------------------------- impression.js wraps each word in .wd and each letter in .ch, then hands the original text node back the moment the animation ends. That last part is the point: an inline-block per letter breaks the shaping run, so kerning and any ligature are gone while it is split. On a serif display line at 44px that is visible. The effect is allowed to borrow the headline for 900ms; it does not get to keep it. .wd is inline-block so a word never breaks mid-letter when the line wraps. ---------------------------------------------------------------------- */ html.js .set .wd { display: inline-block; white-space: nowrap; } html.js .set .ch { display: inline-block; opacity: 0; color: var(--ink-45); /* not yet up to full ink */ transform: translate3d(0, .16em, 0); transition: opacity .32s var(--imp-ease), transform .32s var(--imp-ease), color .32s var(--imp-ease); } html.js .set.in .ch { opacity: 1; color: var(--ink); transform: none; } /* ---------------------------------------------------------------------- 2. INK SETTLING — the reveal ---------------------------------------------------------------------- Not a fade-up. The text arrives at --ink-45 and comes up to --ink as it rises the last 8px, which is what ink does as it takes: it darkens as it bites. 8px, not 26 — this is a page, not a parallax deck, and a big translate on a body paragraph reads as a slide. ---------------------------------------------------------------------- */ html.js .rv { opacity: 0; transform: translate3d(0, var(--imp-rise), 0); transition: opacity .32s var(--imp-ease) var(--rv-d, 0s), transform .32s var(--imp-ease) var(--rv-d, 0s); } html.js .rv.in { opacity: 1; transform: none; } /* ---------------------------------------------------------------------- 3. THE RULE IS LAID ---------------------------------------------------------------------- Only on a section that ALREADY has a hairline: impression.js reads the computed border and marks those, so this can never invent a rule that the stylesheet did not put there. The border goes transparent and the pseudo-element becomes the rule, in the same color at the same place — so the finished state is pixel-identical to the static one, and only the arrival differs. ---------------------------------------------------------------------- */ html.js .rl { position: relative; border-top-color: transparent; } html.js .rl::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--imp-ease); } html.js .rl.in::after { transform: none; } /* ---------------------------------------------------------------------- 4. ONE PASS OF VARNISH ---------------------------------------------------------------------- A painting is varnished, and varnish is how you know you are looking at a painted surface rather than a print of one. It happens ONCE, on arrival, and then it is over — a looping sheen on the cover of somebody's book would be a jewellery-shop trick. The band lives in a background-position, not in an overflow, so nothing has to be clipped and no ancestor needs its overflow changed. The box is the cover's own box: the same max-width expression and the file's own 1078x1592. 1400ms is the one duration in this file that is not on the §5 scale, and it is two rule-draws rather than a new number. A sweep has to cross a whole object, and at 700 it is a flash across a painting instead of light moving over varnish. Written down here so the next person does not have to guess whether it was chosen or left over. ---------------------------------------------------------------------- */ html.js .jacket { position: relative; } html.js .jacket::after { content: ""; position: absolute; top: 0; left: 50%; width: min(16rem, 66vw); aspect-ratio: 1078 / 1592; transform: translateX(-50%); background-image: linear-gradient(103deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.30) 47%, rgba(255,255,255,.05) 52%, rgba(255,255,255,0) 60%); background-size: 300% 100%; background-position: 165% 0; mix-blend-mode: soft-light; opacity: 0; pointer-events: none; } html.js .jacket.in::after { animation: b5r-varnish 1.4s var(--imp-ease) .32s both; } @keyframes b5r-varnish { 0% { opacity: 0; background-position: 165% 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; background-position: -75% 0; } } /* ---------------------------------------------------------------------- 5. THE BUTTON TAKES AN IMPRESSION ---------------------------------------------------------------------- A press is a machine that puts a thing down onto paper under pressure. So the button goes DOWN, one pixel, and the ink under it deepens one luminance step. There is no lift, no shadow and no glow, because none of those is a thing paper does. ---------------------------------------------------------------------- */ html.js .b5r-btn, html.js .do, html.js .bk-btn, html.js .mock-nav .b5r-btn { transition: background-color .12s var(--imp-ease), border-color .12s var(--imp-ease), transform .12s var(--imp-ease); } html.js .b5r-btn:active, html.js .do:active, html.js .bk-btn:active { transform: translateY(1px); } html.js .do:hover { background: var(--ink); } html.js .do:active { background: #17150F; } /* one step below --ink; ink under pressure */ } /* -------------------------------------------------------------------------- 6. THE BLIND STAMP CATCHES RAKING LIGHT -------------------------------------------------------------------------- OUTSIDE the reduced-motion guard on purpose. A deboss lit from an angle is not motion; it is what the object looks like. Under reduced motion the angle simply stops following the pointer (impression.js never binds), and the stamp keeps whatever raking angle it was born with — which is still a better rendering of an impression than the flat fill it had before. The mark is a mask, so the fill can be anything. It was a single flat --rule. It is now a luminance ramp across the mark: lit edge in --surface, the body at --rule, the far edge at --ink-30. That is the DESIGN-BIBLE's own rule for depth — luminance steps, no shadow — applied to the one element on the page that is pretending to be three-dimensional. -------------------------------------------------------------------------- */ html.js .stamp { background-color: transparent; background-image: linear-gradient(var(--rake, 122deg), var(--surface) 0%, var(--rule) 46%, var(--ink-30) 100%); transition: background-image .24s linear; } /* -------------------------------------------------------------------------- 7. TWO MORE, IN THE SAME LANGUAGE -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* 7a. THE MARK INKS IN. The brand is the first thing at the top left, where the eye starts, and it arrived fully formed while everything under it was still settling. It now comes up in exactly the same language as the headline — from --ink-30 to full ink, and the last 4px of a rise — so the top of the page reads as one movement rather than as a static mark above an animated line. It is not a wipe and not a scale. A cattle brand at 2.6rem is too small to survive a clever transition; at that size anything but a settle reads as a glitch. The house language was already the right answer. */ html.js .wordmark::before { background-color: var(--ink-30); transform: translate3d(0, var(--lead), 0); transition: background-color .7s var(--imp-ease) .06s, transform .7s var(--imp-ease) .06s; /* 700: the mark is drawn, like a rule */ } html.js.imp-lit .wordmark::before { background-color: var(--ink); transform: none; } /* 7b. THE OPTION TAKES AN IMPRESSION. The three prices are the commercial heart of the page and they were three flat rectangles that did nothing. On hover the card steps UP one luminance level — --canvas to --surface, which is this house's own token for a panel that is forward of the page — and its rule comes up to --ink-45. Up, not down. The button goes down because a finger is pressing it. A card under a cursor is not being pressed; it is being looked at, and the way this palette says "this one is in front" is --surface. (The button's direction and this one's are opposite on purpose, and that is the distinction between a control and a surface.) No lift, no shadow, no scale: DESIGN-BIBLE §2. The card does not rise off the page, because paper does not. */ html.js .option { transition: background-color .24s var(--imp-ease), border-color .24s var(--imp-ease); } html.js .option:hover { background: var(--surface); border-color: var(--ink-45); } } /* ========================================================================== 8. FOIL Added 2026-09-04. Owner: "make the top brand shine and shimmer too, add other shiny elements throughout". THE IDIOM, BECAUSE IT MATTERS MORE HERE THAN THE EFFECT. §6 already renders the colophon's device as a BLIND stamp — pressed without ink, visible only by raking light. The other half of that craft is FOIL: the same press, the same die, with metal leaf under it, and it shines. Both are bookbinding. So "shine" on this site is foil, not gloss, not neon and not a highlight sweep borrowed from a product page. ANTIQUE GOLD IS A LIGHT, NOT A COLOR. --foil never paints anything at rest. It exists only inside a traveling band a few percent wide, and every surface it crosses returns to full ink behind it. The palette in DESIGN-BIBLE §2 is unchanged: nothing on this page is gold when it is standing still. AND IT RESTS. Real foil catches light when the book moves, not continuously. Each sweep takes about three seconds and then the surface is quiet for four. A logotype that shimmers without pause is a casino sign. ========================================================================== */ :root { --foil: #B08D57; } /* antique leaf. Only ever inside a sweep. */ /* ONE LAYER. background-position takes a LIST, one entry per background layer, so a single-value keyframe moves every layer there is. On the two surfaces that carry a solid color underneath the sweep that would slide the solid layer out of the box too — and with background-clip:text that is invisible type again, by a second route. Hence two keyframes. */ @keyframes b5r-foil { 0% { background-position: 132% 0; } 46%, 100% { background-position: -132% 0; } } /* TWO LAYERS: the sweep travels, the surface beneath it does not. */ @keyframes b5r-foil2 { 0% { background-position: 132% 0, 0 0; } 46%, 100% { background-position: -132% 0, 0 0; } } @media (prefers-reduced-motion: no-preference) { /* 8a. THE DEVICE. It is a mask, so the fill can be anything; the ink stays --ink at both ends of the gradient and the leaf only exists in the middle of it. It starts after the mark has inked in (§7a), so the page is not doing two things to the same object at once. */ html.js.imp-lit .wordmark::before { /* background-color from 7a stays underneath and is what fills the box wherever this 320%-wide sweep is not. Without it the device would blink out for most of every cycle, exactly as the name did. */ background-image: linear-gradient(102deg, var(--ink) 0 41%, var(--ink-70) 46%, var(--foil) 50%, var(--ink-70) 54%, var(--ink) 59% 100%); background-size: 320% 100%; background-repeat: no-repeat; animation: b5r-foil 7s linear 1.1s infinite; } /* 8b. THE NAME. background-clip on the paragraph, so the device beside it — which is a pseudo-element with a background of its own — is untouched and keeps its own sweep. GUARDED, because the failure mode is invisible type. color:transparent is only ever set inside @supports, and the band's own darkest stops are --ink, so if the animation never runs the name is simply ink. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { html.js.imp-lit .wordmark { /* TWO LAYERS, AND THE SECOND ONE IS NOT DECORATION. The sweep is 320% wide and travels from +132% to -132%, so for most of its cycle it does not cover the whole paragraph — and with background-clip:text and color:transparent, any part of the box the gradient does not paint is INVISIBLE TYPE. Shipped for about four minutes on 2026-09-04: the name read "Publishing Co." and "Bar Five Rafter" was simply gone. Found by photographing it, not by reading it. The flat ink underneath is what the letters are when no light is on them, which is also what they are if the animation never runs. */ background-image: linear-gradient(102deg, transparent 0 42%, var(--ink-70) 47%, var(--foil) 50%, var(--ink-70) 53%, transparent 58% 100%), linear-gradient(var(--ink), var(--ink)); background-size: 320% 100%, 100% 100%; background-repeat: no-repeat, no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: b5r-foil2 7s linear 1.1s infinite; } /* THE SECOND HALF KEEPS ITS OWN COLOR, AND THE FOIL DOES NOT REACH IT. press.css:1296 sets `.wordmark-b { color: var(--ink-70) }` so "Publishing Co." sits a tier lighter than "Bar Five Rafter". That is the lockup: two ink tiers, and the hierarchy is carried by tone. An attempt on 2026-09-06 to let the sweep reach it — color:transparent plus opacity:.78 to stand in for --ink-70 — was WRONG and was reverted. The arithmetic was done against --canvas, but the element composites the painted gradient, whose solid layer is full --ink, so .78 of that is not --ink-70. Measured off the rendered pixels: the ink of "Publishing Co." went from L 84.1 to L 46.5 while "Bar Five Rafter" stayed at L 43.2, so the two halves came within three points of each other and the lockup read as one flat block. --ink-70 is L 79.6; --ink is L 33.6. So half the name does not catch the foil, on purpose. If that is ever revisited, the way is to give this half its OWN gradient whose solid layer is --ink-70 rather than --ink — never opacity — and to measure the RESTING color of both halves before accepting it, not just the sweep. */ } /* 8b-2. THE COLOPHON'S DEVICE IS THE SITE'S FOIL, AND THE ARTWORK IS THAT FOIL STOPPED. tools/make-publisher-logo.py's foil() says so in its own docstring: "the site's foil, frozen at its brightest — the masthead die's deeper luminance ramp lit at 122 degrees, with a band of antique leaf across it at 102 degrees." So the faithful live version of the chosen artwork is not the running head's ink-based sweep, which is what this rule tried first; it is the blind stamp's two layers — the 122deg ramp underneath, the 102deg leaf traveling over it. The artwork is one frame of this animation. A slower period and a later start than the closing stamp, so two devices on one page are never in step; simultaneous flashes read as a blink rather than as light crossing a room. */ html.js .cl-device { background-image: linear-gradient(102deg, transparent 0 43%, var(--foil) 50%, transparent 57% 100%), linear-gradient(var(--rake, 122deg), var(--surface) 0%, var(--rule) 46%, var(--ink-30) 100%); background-size: 320% 100%, 100% 100%; background-repeat: no-repeat, no-repeat; animation: b5r-foil2 13s linear 3.2s infinite; } /* 8c. THE BLIND STAMP, on the closing page, takes a pass of leaf over its raking light. Two background layers: the sweep on top, the rake beneath, both through the same mask. The rake still follows the pointer (§6) and is unaffected — this only adds the light that a foil die would catch. */ html.js .stamp { background-image: linear-gradient(102deg, transparent 0 43%, var(--foil) 50%, transparent 57% 100%), linear-gradient(var(--rake, 122deg), var(--surface) 0%, var(--rule) 46%, var(--ink-30) 100%); background-size: 320% 100%, 100% 100%; background-repeat: no-repeat, no-repeat; animation: b5r-foil2 11s linear 2s infinite; } /* 8d. THE THREE FIGURES, stamped once as they arrive — ONCE, not looping. A rate card whose prices shimmer continuously is a casino, and these are the numbers he has to hold to on the telephone. One pass as the card reveals, then they are ink. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { html.js .option.in .price, html.js .rv.in .price { background-image: linear-gradient(102deg, transparent 0 40%, #94472F 46%, var(--foil) 50%, #94472F 54%, transparent 60% 100%), linear-gradient(var(--accent), var(--accent)); /* the figure, unlit */ background-size: 320% 100%, 100% 100%; background-repeat: no-repeat, no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: b5r-foil2 2.6s linear .2s 1 both; } } } /* ========================================================================== 9. ONE DIE, STRUCK THREE TIMES Added 2026-09-04. Owner: "make this also on the main top page, then, include it in the persistent header, shimmering while scrolling" and "replace the other brand in the header". The header carried a different treatment from the colophon: a flat ink mask beside the name, against an embossed one at the foot of the page. Two renderings of one device is two devices. There is now one — the stamp — and it is struck in three places: large on the opening, small in the masthead (which is also the persistent header, so it rides the whole page), and large again on the colophon. The masthead sits on rgb(232,224,208), which IS --sink: the same paper the colophon stamp is pressed into. Measured, not assumed, which is why the treatment transfers without a second palette. ========================================================================== */ /* THE HERO STRIKE. Absolutely positioned, so the opening pays no height for it — he asked for the device on the top page and for less header in the same message, and those are only compatible if this one floats free. On a phone it is a watermark behind the words, because a phone hero has no spare room and the type must win. On a sheet it moves into the empty right of the panel and comes up to full strength, where there is room for it to be an object rather than a texture. */ .hero { position: relative; } .hero > .wrap { position: relative; z-index: 1; } .hero-stamp { position: absolute; pointer-events: none; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(18rem, 62vw); aspect-ratio: 900 / 734; opacity: .16; -webkit-mask: url("../brand/mark.png") no-repeat center / contain; mask: url("../brand/mark.png") no-repeat center / contain; background-color: var(--rule); } @media (min-width: 52.5rem) { .hero-stamp { top: auto; bottom: var(--s8); left: auto; right: var(--s6); transform: none; width: min(20rem, 26vw); opacity: .34; } } @media (prefers-reduced-motion: no-preference) { /* 9a. THE THREE STRIKES SHARE ONE FILL. A luminance ramp for the impression and a band of leaf traveling over it — §6 and §8 in one declaration, applied to every place the die is used. repeat-x, so the scroll-driven sweep in 9b can run for ever without a seam. */ html.js .stamp, html.js .hero-stamp { background-color: transparent; background-image: linear-gradient(102deg, transparent 0 43%, var(--foil) 50%, transparent 57% 100%), linear-gradient(var(--rake, 122deg), var(--surface) 0%, var(--rule) 46%, var(--ink-30) 100%); background-size: 320% 100%, 100% 100%; background-repeat: repeat-x, no-repeat; } /* THE MASTHEAD DIE IS THE SAME STAMP, PRESSED DEEPER. It is 50px against the colophon's 128, and the colophon's ramp — surface to rule to ink-30 — is a whisper at that size: measured against the --sink ground it would have been the faintest thing in the masthead, which is the wrong place for the house's own name to be faint. Same die, same light, a deeper bite: the shadow side goes to --ink-70 so the mark still reads as ink from across a room. */ html.js.imp-lit .wordmark::before { background-color: transparent; background-image: linear-gradient(102deg, transparent 0 41%, var(--foil) 50%, transparent 59% 100%), linear-gradient(var(--rake, 122deg), var(--surface) 0%, var(--ink-30) 44%, var(--ink-70) 100%); background-size: 320% 100%, 100% 100%; background-repeat: repeat-x, no-repeat; } /* 9b. SHIMMERING WHILE SCROLLING. The masthead is the persistent header, so its die is on screen for the whole page — and a light that moves with the reader is better than one on a clock, because it is the reader who is turning the object under the lamp. One sweep roughly every screen. The tile is 320% wide, so translating by -320% is exactly one pass; 16 of them across the document. Nothing is animated but a background position, and if scroll-driven animation is missing the time-based sweeps from §8 remain. */ /* NOT the letterhead die. It is opaque only for the first ~150px of scroll — after that .masthead-in fades to 0.001 and the running head takes over — and in 150px this timeline advances less than a THIRD of one pass. Measured 2026-09-05 across the whole document: the running-head die peaked at 388 pixels of leaf, the hero stamp 480, the colophon 4,813, and the letterhead die exactly 0. A light that cannot be seen is not a light. It keeps §8a's 7-second clock, which runs while it is on screen; the dies that live further down the page keep the scroll. */ @supports (animation-timeline: scroll()) { html.js .hero-stamp { animation: b5r-foil-scroll auto linear; animation-timeline: scroll(root block); } } } /* -------------------------------------------------------------------------- 8e. THE PERSISTENT BARS KEEP THE READER'S OWN CLOCK -------------------------------------------------------------------------- §8a gave the running head a 7-second timer on the reasoning that it is always on screen, while "the dies that live further down the page keep the scroll". That reasoning was wrong for this element, and the owner named the symptom exactly: "the shimmer scroll is broken on the persistent header, it just glitches." Nothing is broken. The sweep crosses in the first 46% of a 7s cycle and then holds for the remaining 54%, so a reader who is scrolling sees it fire once, at a moment that has nothing to do with anything they did, and then stop. An intermittent flash uncoupled from your own hand is exactly what a glitch looks like. It was also not what was asked for: the instruction of 2026-09-04 was "include it in the persistent header, SHIMMERING WHILE SCROLLING". On the scroll timeline the leaf tracks the page. Move and it moves; stop and it stops where you left it. The two bars that never leave the screen are the two that should answer the reader's hand, and the timer stays as the fallback for engines without scroll timelines — which is why this sits inside @supports rather than replacing §8a outright. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { /* .wordmark IS NOT THE PERSISTENT HEADER, and putting it on this timeline was a mistake worth recording. It lives in the masthead that SCROLLS AWAY — measured at scrollY 900 its rect sits at top -120, entirely above the viewport. The bar that stays is .mo-strip, which motion.js builds, and its brand is .mo-mark and .mo-name. On a scroll timeline the big wordmark would advance only a few percent of one pass in the ~300px it is on screen, which is less light than the 7s clock §8a gives it. It keeps that clock. THE STRIP IS THE THING THAT GLITCHES, and here is why. .mo-mark already carried b5r-foil-scroll — sixteen passes down the document — on a mark that measures 30x25px, while .mo-name-a and .mo-name-b beside it had no foil at all (measured: animation-name none, background-image none). Sixteen fast passes across a thirty-pixel mark is a strobe, and a strobing mark next to dead type is exactly what a glitch looks like. So the whole lockup lights together, and slower. b5r-foil-strip is four passes rather than sixteen: at ~2,200px of scroll each, a pass reads as light crossing the bar rather than as a flicker. */ html.js.imp-lit .mo-mark { animation-name: b5r-foil-strip; } html.js.imp-lit .mo-name-a { background-image: linear-gradient(102deg, transparent 0 42%, var(--ink-70) 47%, var(--foil) 50%, var(--ink-70) 53%, transparent 58% 100%), linear-gradient(var(--ink), var(--ink)); background-size: 320% 100%, 100% 100%; background-repeat: repeat-x, no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: b5r-foil-strip auto linear; animation-timeline: scroll(root block); } /* THE THUMB BAR'S NUMBER IS SOLID INK, AND THAT IS DELIBERATE NOW. It carried a foil sweep through `background-clip: text` with `color: transparent`, driven by the pointer. In Chrome it measured perfectly — 84 levels of change across 6,215 pixels against a control of zero, and a per-column pixel scan found the whole figure painted. On the device it is wrong. Seen on an iPhone 17 Pro Max in the iOS Simulator, twice, at two different scroll positions: the bar reads "615) 398-1776". The opening parenthesis is not painted. Safari clips the text differently, and the one glyph that sits hard against the left edge of the box is the one that goes. A telephone number that renders wrong is worse than a telephone number that does not shimmer, and this is a telephone-first press whose number is the loudest thing on every page. So the effect comes off this element. The pointer still writes --b5r-foil-x for anything else that wants it, and the colophon device, the hero stamp, the running head, the prices and the strip's name all still catch the leaf — none of them through type at the edge of its own box. If it is wanted back here, it has to be built a way that cannot drop a glyph — an overlay rather than clipped type — and checked on the device, not in headless Chrome. Headless said this was fine. It was not. */ } } /* Four passes, not sixteen. For the persistent strip, whose mark is 30px wide: at roughly 2,200px of scroll per pass the leaf reads as light crossing the bar instead of a flicker. Same shape as b5r-foil-scroll otherwise. */ @keyframes b5r-foil-strip { from { background-position: 0 0, 0 0; } to { background-position: -1280% 0, 0 0; } } @keyframes b5r-foil-scroll { from { background-position: 0 0, 0 0; } to { background-position: -5120% 0, 0 0; } /* 16 passes, top to bottom */ } /* ========================================================================== 10. THE HEADINGS ARE SET IN THE BOOK'S OWN FACE Added 2026-09-04. Owner, pointing at the title page of Ethan's Promise Land: "can this be the main title font without clashing with the rest of the website? i like it better". It can, on one condition, and the condition is the whole of the answer: the two serifs must never do the same job. EB Garamond sets headings. Source Serif 4 sets everything a reader actually reads — body, lead, forms, figures, captions, the reading bar. A page with two text faces looks like a mistake; a page with a display face and a text face looks like a book. That division is also what keeps SPEC 2.3.4's objection intact. It ruled this face out for its small x-height and missing optical-size axis, which is a real argument about 17px on a phone and no argument at all about 44px. NOT the prices, NOT the eyebrows, NOT .b5r-sec headings injected by the reading tools — those sit inside running text and would read as a wobble. ========================================================================== */ h1, h2 { font-family: 'EB Garamond', var(--serif); } /* ========================================================================== 11. THE DEVICE IN THE RUNNING HEAD Added 2026-09-04. Owner: "The brand is not in the header that's persistent and it's not shimmering when moving the mouse or scrolling, which is what I wanted to do." Both halves of that were true and both were my omission. §9 put the foil on .wordmark::before — which lives in the LETTERHEAD, and the letterhead fades out the moment the masthead goes compact. What stays on screen is .mo-strip, built by motion.js, and it carried the name and the telephone and no mark at all. So the one element visible for the whole page was the only place the house's device was missing. The mark is now in the strip (motion.js), struck from the same die, and it is the fourth surface to carry the stamped fill. The raking light follows the pointer on all four now, not only on the colophon — §6 bound it to .stamp alone, which is why moving the mouse did nothing up here. ========================================================================== */ .mo-lockup { display: flex; align-items: center; min-width: 0; } .mo-mark { flex: 0 0 auto; width: 1.9rem; aspect-ratio: 900 / 734; margin-right: var(--s2); background-color: var(--ink); -webkit-mask: url("../brand/mark.png") no-repeat center / contain; mask: url("../brand/mark.png") no-repeat center / contain; } @media (prefers-reduced-motion: no-preference) { /* The same deeper bite the masthead die uses: at 30px the colophon's light ramp is a whisper, and this one sits on --sink at the top of every screen. */ html.js .mo-mark { background-color: transparent; background-image: linear-gradient(102deg, transparent 0 41%, var(--foil) 50%, transparent 59% 100%), linear-gradient(var(--rake, 122deg), var(--surface) 0%, var(--ink-30) 44%, var(--ink-70) 100%); background-size: 320% 100%, 100% 100%; background-repeat: repeat-x, no-repeat; } @supports (animation-timeline: scroll()) { html.js .mo-mark { animation: b5r-foil-scroll auto linear; animation-timeline: scroll(root block); } } }