/* ── THE STANK LAYER ───────────────────────────────────────────────────────── Shared across all three route previews so the only difference between them is LAYOUT, not polish. Grit, tape, marker, halftone — the things a hand leaves. Every texture here is generated (SVG turbulence, or our own photos through tools/art/halftone.py). No purchased asset, no stock anything. ─────────────────────────────────────────────────────────────────────────── */ :root{ --acid:#9BE800; --bone:#F5F3EE; --gray:#8A8A85; --ink:#0C0C0C; --panel:#0E0E0C; --line:#242422; --blood:#D42630; --oxblood:#8E1B14; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} /* ⚠️ THE TEXTURE IS A BACKGROUND, NOT AN OVERLAY — round 6, and the old site had this right. Grain and the vinyl stripe used to be position:fixed at z-index 98/99, which painted them ON TOP OF EVERY PHOTOGRAPH. Chris: "the vinyl stripe over all photos is still an issue... it needs to be put into the background." They are body background layers now: the page's own ground is textured, and every photo, panel and box sits above it, clean. */ body{color:var(--bone);font-family:'Space Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased;position:relative; background-color:var(--ink); /* ⚠️ THE POLE GROUND — KEPT, WHEN THE MAGENTA WENT BACK. 2026-09-02: the hybrid's colour was reverted to acid green on Chris's call ("Green back with texture") and this texture explicitly STAYS — he objected to the palette, not to the paper feel. Three layers, all generated: the scan line that was already here, a coarse halftone dot at low opacity so the ground reads as printed rather than as a flat fill, and the turbulence grain lifted from .06 to .10 because clean is the tell — that finding is already in library/design/INDEX.md and it is the one thing every reference in that catalogue has in common. Still background layers, never overlays: photos sit above them. */ background-image: repeating-linear-gradient(180deg,rgba(245,243,238,.035) 0 1px,transparent 1px 4px), radial-gradient(circle,rgba(245,243,238,.055) .6px,transparent .7px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E"); background-size:auto, 3.5px 3.5px, auto; background-attachment:scroll, scroll, scroll} /* ⚠️ SCROLL: clip, never hidden, and never on the root. The old site's own comment: "clip (not hidden) avoids creating a scroll container". overflow:hidden on makes the document a scroll container and iOS Safari then fights its own momentum — that was the intermittent scroll lock. The wrapper clips the ticker's rotated corners without becoming a scroll container. */ .page{overflow-x:clip} /* ── chrome ── */ .topbar{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:11px 20px;border-bottom:1px solid var(--line);background:var(--ink); font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.17em;position:relative;z-index:20} .topbar .brand{display:flex;align-items:center;gap:9px} .topbar .brand img{width:22px;height:auto;display:block;opacity:.95} .burger{width:22px;height:2px;background:var(--bone);box-shadow:0 6px 0 var(--bone),0 -6px 0 var(--bone);flex:none} .kick{display:block;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.24em; color:var(--gray);text-transform:uppercase} .scrawl{font-family:'Permanent Marker','Bradley Hand',cursive} h2{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.004em;text-transform:uppercase} /* Tape: a real piece of tape is never square to the page. */ .tape{position:absolute;width:104px;height:26px;background:rgba(226,219,196,.5); box-shadow:0 1px 3px rgba(0,0,0,.5);transform:rotate(-2.4deg)} .cta{display:inline-block;background:var(--acid);color:var(--ink);font-family:'Anton',sans-serif; font-size:19px;letter-spacing:.05em;text-transform:uppercase;padding:14px 26px; text-decoration:none;transform:rotate(-1.2deg);box-shadow:0 4px 0 rgba(0,0,0,.5)} /* The ticker sits a degree and a half off true, which is what stops a full-width band of type reading like a template component. */ .ticker{background:var(--acid);color:var(--ink);font-family:'Anton',sans-serif;font-size:25px; letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;padding:8px 0; transform:rotate(-1.4deg);margin:0 -18px;box-shadow:0 3px 0 rgba(0,0,0,.55);position:relative;z-index:6; display:flex;padding-left:18px} .ticker span{flex:none;padding-right:.55em;animation:mq 34s linear infinite} .ticker.rev span{animation-duration:40s} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-100%)}} @media(prefers-reduced-motion:reduce){.ticker span{animation:none}} .ticker.rev{background:var(--ink);color:var(--acid);border-top:2px solid var(--acid); border-bottom:2px solid var(--acid);transform:rotate(1deg);box-shadow:none} @media(max-width:700px){.ticker{font-size:18px}} /* ══ EXTRA STANK ═══════════════════════════════════════════════════════════════ Everything below is print damage, on purpose. The brief was "extra STANKY" and the honest read of that is: stop looking like it came out of a browser and start looking like it came off a machine that was never calibrated. ═══════════════════════════════════════════════════════════════════════════ */ /* MISREGISTRATION. A two-colour screenprint where the plates did not line up - an acid plate high-left, a red plate low-right, the black on top. This one device does more for the "not AI" problem than any amount of layout, because generated pages are always in perfect register. */ /* The two plates are variables so an artist's page prints in THEIR colours. Hard- coded acid meant her page misregistered in the house green over her red, which is the clash Chris called out. */ :root{--plate-a:rgba(155,232,0,.52);--plate-b:rgba(212,38,48,.5)} .mis{text-shadow:5px -4px 0 var(--plate-a), -5px 4px 0 var(--plate-b)} .mis em{text-shadow:5px -4px 0 rgba(12,12,12,.9), -5px 4px 0 rgba(212,38,48,.55)} @media(max-width:760px){.mis{text-shadow:3px -3px 0 var(--plate-a),-3px 3px 0 var(--plate-b)} .mis em{text-shadow:3px -3px 0 rgba(12,12,12,.9),-3px 3px 0 rgba(212,38,48,.52)}} /* THE MARK AS GROUND, not as a logo. Blown up past the edge of its panel so it reads as something printed underneath the page rather than placed on it. */ img.ghost{position:absolute;pointer-events:none;opacity:.05;filter:grayscale(1) contrast(1.4);z-index:0} /* STICKERS. Stuck on at an angle, because a straight one was never stuck by hand. */ .sticker{display:inline-block;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;padding:5px 10px;background:var(--acid);color:var(--ink); transform:rotate(-2.6deg);box-shadow:0 2px 0 rgba(0,0,0,.55)} .sticker.b{background:var(--blood);color:var(--bone);transform:rotate(2.4deg)} /* TORN EDGE. The path is a seeded random walk, not a repeating zigzag - a repeat is the tell, and paper has never once torn on a period. */ .tear{position:relative} .tear::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:15px;background:var(--ink); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 54' preserveAspectRatio='none'%3E%3Cpath d='M0,14 L15.6,8.4 L31.2,7.8 L46.9,10.9 L62.5,8.2 L78.1,13.9 L93.8,4.3 L109.4,12.9 L125.0,10.7 L140.6,12.5 L156.2,11.2 L171.9,9.3 L187.5,3.7 L203.1,1.5 L218.8,9.6 L234.4,9.6 L250.0,5.7 L265.6,12.6 L281.2,2.5 L296.9,1.6 L312.5,13.5 L328.1,13.0 L343.8,5.6 L359.4,12.8 L375.0,2.2 L390.6,9.5 L406.2,2.7 L421.9,12.8 L437.5,10.3 L453.1,13.4 L468.8,10.8 L484.4,8.5 L500.0,8.9 L515.6,2.1 L531.2,4.6 L546.9,1.9 L562.5,11.0 L578.1,8.2 L593.8,8.3 L609.4,2.8 L625.0,5.8 L640.6,7.5 L656.2,9.8 L671.9,4.7 L687.5,9.3 L703.1,11.1 L718.8,1.6 L734.4,7.7 L750.0,14.0 L765.6,12.3 L781.2,1.9 L796.9,11.4 L812.5,12.8 L828.1,9.8 L843.8,11.1 L859.4,11.2 L875.0,8.9 L890.6,10.7 L906.2,3.7 L921.9,3.9 L937.5,9.0 L953.1,5.7 L968.8,3.3 L984.4,6.8 L1000,14 L1000,54 L0,54 Z' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 54' preserveAspectRatio='none'%3E%3Cpath d='M0,14 L15.6,8.4 L31.2,7.8 L46.9,10.9 L62.5,8.2 L78.1,13.9 L93.8,4.3 L109.4,12.9 L125.0,10.7 L140.6,12.5 L156.2,11.2 L171.9,9.3 L187.5,3.7 L203.1,1.5 L218.8,9.6 L234.4,9.6 L250.0,5.7 L265.6,12.6 L281.2,2.5 L296.9,1.6 L312.5,13.5 L328.1,13.0 L343.8,5.6 L359.4,12.8 L375.0,2.2 L390.6,9.5 L406.2,2.7 L421.9,12.8 L437.5,10.3 L453.1,13.4 L468.8,10.8 L484.4,8.5 L500.0,8.9 L515.6,2.1 L531.2,4.6 L546.9,1.9 L562.5,11.0 L578.1,8.2 L593.8,8.3 L609.4,2.8 L625.0,5.8 L640.6,7.5 L656.2,9.8 L671.9,4.7 L687.5,9.3 L703.1,11.1 L718.8,1.6 L734.4,7.7 L750.0,14.0 L765.6,12.3 L781.2,1.9 L796.9,11.4 L812.5,12.8 L828.1,9.8 L843.8,11.1 L859.4,11.2 L875.0,8.9 L890.6,10.7 L906.2,3.7 L921.9,3.9 L937.5,9.0 L953.1,5.7 L968.8,3.3 L984.4,6.8 L1000,14 L1000,54 L0,54 Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;z-index:5} /* HALFTONE BAND. Our own photograph, dithered by tools/art/halftone.py, run as a rule between sections. Costs one image and reads like a printed page. */ .band{height:38px;background:var(--ink) url(tex-wire-dots.png) center 34%/cover;opacity:.45; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* SECTION NUMBER, outlined and bleeding off the left edge. Magazine furniture. */ span.num{position:absolute;left:-10px;top:-30px;font-family:'Anton',sans-serif;font-size:150px;line-height:1; color:transparent;-webkit-text-stroke:2px rgba(245,243,238,.08);pointer-events:none;z-index:0} @media(max-width:760px){span.num{font-size:96px;top:-16px}}