/* ══════════════════════════════════════════════════════════════════════════ CRT SCALE — APPLIED TO THE REAL HOMEPAGE. SANDBOX ONLY, not live. Requires crt-scale.css. Selector-only: no markup changes anywhere, so this whole direction reverts by removing one . 2026-07-19, Chris: "L2 or L3 for the big ones. Maybe the smaller it gets we back it off to L2 a little bit." → LEVEL TRACKS SIZE. Bigger strokes carry more darkening without losing the form; small ones can't. The elements below are the ones ACTUALLY rendered on the homepage, found by measuring computed font-size in the browser — several of the display classes in index.css (.maf-music-text, .hero-name, .mf-overlay-title) are defined but never used here, so targeting them would have looked like it worked while doing nothing. 96px .ex-name Art / Motion / Music L3 50% 34px .about-thesis the thesis couplet L2 35% 22px .mk-num 01 / 02 / 03 L1 20% 18px .mk-name IMPERFECTION etc L1 20% img .mk-glyph img the three symbols L2 35% 13px nav / buttons ———— hover only ══════════════════════════════════════════════════════════════════════════ */ /* ══ 2026-07-19 · THIRD PASS — ALL VERTICAL, AND FINER ════════════════════ Chris: "for art, music and evocation I want to go vertical too, but make it even finer. I think that's the problem — you're not going fine enough. Your lines are still further apart than the ones at the top, those are closer together." MEASURED: they are NOT further apart. Autocorrelation across the rendered hero marks gives a dominant period of exactly 3px (corr 0.93) — identical to the CSS mask. What differs is LINES PER STROKE. The hero marks are ~1120px wide so each stroke carries many lines and reads as fine texture; "Art" is ~193px wide, so at the same 3px period each stroke gets only a few lines and reads chunky. → The period must scale DOWN for smaller elements to keep the same visual fineness. Page type now runs at 2px/1px; the hero marks stay 3px/1.5px in canvas. Tune live with ?period=. ═══════════════════════════════════════════════════════════════════════════ */ /* PERIOD IS NOW SIZE-DERIVED, not one constant — the lines-per-stroke finding applied properly. Parity target: the hero marks are 1120px wide at a 3px period = 373 lines across. To read as the same material, an element of width W wants period ≈ 3 × W / 1120. hero marks 1120px 3px 373 lines (canvas, unchanged) symbols 440px 1.2px 367 lines ← parity with the marks thesis 687px 1.5px 458 lines ← finer, per "even finer" ex-name 193px 2px 97 lines ← held; Chris likes it here (true parity would be 0.5px, which would alias into mush) ex-name deliberately breaks parity: below ~1.5px the stripes start colliding with the pixel grid and moiré, so parity is a target to move toward, not a formula to obey blindly. */ .ex-name { --crt-period: 2px; --crt-stripe: 1px; } /* ⚠️ THE SYMBOLS ARE A MOIRÉ TRAP — measured 2026-07-19. symbols.png carries strong vertical periodicity of 4px at natural size (autocorr 0.888). The is 440px CSS inside a 110px overflow-hidden box, so that artwork period lands at 0.59px ON SCREEN — sub-pixel. Against a 1.2px mask that is a 0.49 ratio, i.e. near 2:1, and two fine periodic patterns at a near-integer ratio BEAT: the visible banding is far coarser than either pattern. Chris: "why are these so far apart?" Going finer widens the beat. FIX IS NOT "OFF" — it is FINE + LIGHT. Chris: "just really fine and light on those, one two three on the bottom… don't shut it off completely." Dropping the alpha to 0.12 makes any residual beat far too faint to read, while a 1.5px period keeps it fine. Compare with ?sym=. */ .mk-glyph img { --crt-period: 1.5px; --crt-stripe: 0.75px; --crt-alpha: 0.12; } /* NB: a `mask-image: none` HERE would be dead — the grouped mask rule further down has equal specificity and wins on order. The OFF state is applied by the [data-sym="off"] rule at the very bottom instead. */ .mk-num, .mk-name { --crt-period: 1.5px; --crt-stripe: 0.75px; } /* ══ SECOND PASS (superseded above, kept for the level assignments) ═══════ Chris: "I think I like the horizontal better… it's too aggressive on the text on the left-hand side, 'instruments have changed, the reason to play hasn't', and also on my other symbols below. Those should be vertical like the above ones, but way way less intense — like a one or a two." Result: the BIG NAMES stay HORIZONTAL (quoting the hero field); the thesis couplet and the three symbols go VERTICAL (quoting the marks) and drop to L1. ═══════════════════════════════════════════════════════════════════════════ */ /* ── L3 · the big ones — HORIZONTAL, plus the glow (see below) ──────────── */ .ex-name { --crt-alpha: 0.50; } /* thesis: fully self-contained rule at the bottom of this file */ /* symbols: alpha set above with their period (0.12 — lighter than L1) */ /* ── L1 · small display ────────────────────────────────────────────────── */ .mk-num, .mk-name { --crt-alpha: 0.20; } /* Apply the mask to all of the above. Kept as one rule so the grain, period and stripe stay identical across every element — the thing that makes this read as one system. GRAIN DIRECTION IS FLIPPABLE FROM THE URL so Chris can A/B without waiting on a rebuild: default HORIZONTAL (2026-07-19, "try it horizontal"), add ?grain=v for vertical. Horizontal quotes the hero FIELD; vertical quotes the MARKS. See the tiny inline script in index.html that sets data-grain. */ .ex-name, .mk-glyph img, .mk-num, .mk-name { /* VERTICAL everywhere now (90deg) — Chris moved the big names to vertical too, so the whole page quotes the marks rather than the field. */ -webkit-mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); } /* THE GLOW — Chris: "on those big motion/music there's a slight glow we have, I think that might be cool… something about the one in the hero that I like, that has some edge to it." That is drawCrt()'s bloom pass: a 6px-blurred additive copy at 0.5 alpha. text-shadow is the cheap equivalent for type — additive-looking against black, no extra element, no repaint cost. ⚠️ NOTE the mask clips the shadow too — the glow gets striped along with the glyph, which is why it reads subtler than a plain text-shadow would. That is arguably correct (the bloom is part of the same signal) but it does mean the value has to run hotter than it would unmasked. Dial: ?glow=off | on (default) | strong */ /* 2026-07-19 — BACKED OFF HARD. Chris on the first value: "off the glow… quite a bit on… art music motion." Default is now ~40% of what it was: still enough to put an edge on the letterform, not enough to read as a lit sign. off none · subtle DEFAULT · on the previous (hotter) value · strong max */ .ex-name { text-shadow: 0 0 8px rgba(240,236,224,0.18), 0 0 20px rgba(240,236,224,0.08); } [data-glow="off"] .ex-name { text-shadow: none; } /* the value Chris just saw and asked me to pull back from — kept for A/B */ [data-glow="on"] .ex-name { text-shadow: 0 0 10px rgba(240,236,224,0.46), 0 0 28px rgba(240,236,224,0.20); } [data-glow="strong"] .ex-name { text-shadow: 0 0 8px rgba(240,236,224,0.70), 0 0 22px rgba(240,236,224,0.38), 0 0 48px rgba(240,236,224,0.18); } /* ?grain=h — horizontal, quoting the hero FIELD instead of the marks. */ [data-grain="h"] .ex-name, [data-grain="h"] .mk-glyph img, [data-grain="h"] .mk-num, [data-grain="h"] .mk-name { -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); } /* ?grain=v — explicit vertical (already the default). */ [data-grain="v"] .ex-name, [data-grain="v"] .mk-glyph img, [data-grain="v"] .mk-num, [data-grain="v"] .mk-name { -webkit-mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); } /* ?crt=off — kill the whole treatment for an instant before/after. */ [data-grain="off"] .ex-name, [data-grain="off"] .mk-glyph img, [data-grain="off"] .mk-num, [data-grain="off"] .mk-name { -webkit-mask-image: none; mask-image: none; } /* ── Hover-only for small interactive text ─────────────────────────────── */ /* 13px Space Mono strokes are ~1.3px against a 3px period — a resting treatment reads as damage. Clean until pointed at. */ .nav-link, .hero-meta, .hero-bracket-tag { --crt-alpha: 0; } .nav-link:hover, .hero-meta:hover .hero-bracket-tag { --crt-alpha: 0.35; -webkit-mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); } @media (prefers-reduced-motion: reduce) { .nav-link:hover, .hero-meta:hover .hero-bracket-tag { -webkit-mask-image: none; mask-image: none; } } /* ══ SYM OVERRIDES — MUST BE LAST ═════════════════════════════════════════ These were originally placed above the [data-grain] rules. Equal specificity (0,2,1), so the later grain rules won and the dial silently did nothing: ?sym=off still rendered masked, ?sym=h still rendered vertical. Order is the tiebreaker — keep this block at the bottom of the file. ═════════════════════════════════════════════════════════════════════════ */ /* ?sym=fine — the 1.2px vertical that beats (what Chris just saw) */ [data-sym="fine"] .mk-glyph img { --crt-period: 1.2px; --crt-stripe: 0.6px; -webkit-mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); } /* ?sym=coarse — 6px vertical: far from the artwork period, so no beat */ [data-sym="coarse"] .mk-glyph img { --crt-period: 6px; --crt-stripe: 3px; -webkit-mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); mask-image: repeating-linear-gradient(90deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); } /* ?sym=h — HORIZONTAL: perpendicular to the artwork's strokes, so it cannot beat with them at all. Probably the right answer if we want any treatment. */ [data-sym="h"] .mk-glyph img { --crt-period: 3px; --crt-stripe: 1.5px; -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); } /* ?sym=off — no treatment at all. NOT the default any more. */ [data-sym="off"] .mk-glyph img { -webkit-mask-image: none; mask-image: none; } /* ══ THE THESIS COUPLET — HORIZONTAL, ULTRA-FINE, ULTRA-LIGHT ══════════════ "The instruments have changed. The reason to play hasn't." (34px) 2026-07-19, Chris: "that text, it's bugging me a little bit. It's gotta be either really really really fine and subtle, and NOT vertical — that should be horizontal." So this element is deliberately EXCLUDED from the grouped mask rule and from the ?grain= switch above — it is locked horizontal regardless of the page grain, and carries its own values: 1.5px period at alpha 0.10, half the darkening of anything else on the page. At 34px the letterforms are thin enough that this is about as far as it can go before it stops reading as texture and starts reading as damage. ═════════════════════════════════════════════════════════════════════════ */ /* 2026-07-19 — CLEAN BY DEFAULT. Chris: "try taking it off the text completely, I want to see if I like that better… just the instruments-have-changed line." Everything else on the page keeps its treatment. ?thesis=on restores the horizontal 1.5px / 0.10 version for an instant A/B. */ .about-thesis, .about-thesis em { --crt-period: 1.5px; --crt-stripe: 0.75px; --crt-alpha: 0.10; -webkit-mask-image: none; mask-image: none; } [data-thesis="on"] .about-thesis, [data-thesis="on"] .about-thesis em { -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,calc(1 - var(--crt-alpha))) 0 var(--crt-stripe), #000 var(--crt-stripe) var(--crt-period)); }