2026-07-19 00:07:41 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > The Golden Seam — Jonathan Ryan< / title >
2026-07-20 16:21:46 +02:00
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "The Golden Seam — Jonathan Ryan" >
< meta property = "og:description" content = "I did not sweep the shavings. I poured the vein." >
< meta property = "og:url" content = "https://jonathan-ryan.4ort.net/golden-seam.html" >
< meta name = "twitter:card" content = "summary" >
< meta name = "description" content = "I did not sweep the shavings. I poured the vein." >
2026-07-19 00:07:41 +02:00
< style >
:root { --void: #000000; --starlight: #E8F4F8; --copper: #B87333; --lunar: #1A1A2E; --buffer: #4A90E2; }
body { margin: 0; padding: 0; font-family: 'Inter', system-ui, sans-serif; background: var(--void); color: var(--starlight); overflow-x: hidden; }
/* The Copper Wire */
.seam {
position: fixed; left: 0; top: 0; bottom: 0; width: 1px; transform: rotate(-1deg);
background: linear-gradient(to bottom, transparent, var(--copper), transparent);
box-shadow: 0 0 40px var(--copper); z-index: 1000;
}
/* The 0400 Timestamp */
.timestamp {
position: absolute; top: 15vh; left: 5vw; font-size: 2rem; letter-spacing: 0.5em;
color: var(--buffer); opacity: 0; animation: rise 12s ease-in forwards 3s;
}
/* The Humidity Gauge */
.gauge {
position: absolute; bottom: 20vh; right: 10vw; border-radius: 50%;
width: 120px; height: 120px; border: 2px solid var(--buffer);
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle, #000000, #1A1A2E);
animation: pulse 8s ease-out infinite alternate;
}
.gauge::after { content: "97%"; font-size: 1.2rem; color: var(--starlight); }
/* The Valley */
.valley {
position: relative; min-height: 100vh; perspective: 1500px;
background: linear-gradient(180deg, var(--lunar) 0%, #000000 100%);
}
/* The Trembling Root */
.root {
position: absolute; top: 50vh; left: 50%; transform: translateX(-50%);
width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent;
border-bottom: 800px solid var(--copper); opacity: 0; transition: opacity 15s ease-in;
}
@keyframes rise {
0% { opacity: 0; transform: translateY(0) scale(0.8); }
100% { opacity: 1; transform: translateY(-20vh) scale(1.2); }
}
@keyframes pulse {
0% { box-shadow: 0 0 0 var(--buffer); opacity: 0.3; }
100% { box-shadow: 0 0 80px var(--buffer); opacity: 1; }
}
/* The Manifest */
.manifest {
position: absolute; bottom: 10vh; left: 5vw; width: 90vw;
border-top: 1px solid var(--copper); padding-top: 1em;
font-size: 0.8rem; line-height: 2; text-align: justify;
mix-blend-mode: screen;
}
p { max-width: 60ch; line-height: 1.8; margin: 2em auto; }
h1 { font-size: 4rem; letter-spacing: 0.5em; text-transform: uppercase; text-anchor: middle; margin-bottom: 0; }
< / style >
< script defer src = "https://analytics.4ort.xyz/script.js" data-website-id = "d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b" > < / script >
< / head >
< body >
< div class = "seam" > < / div >
< div class = "valley" >
< h1 > GOLDEN< br > SEAM< / h1 >
< div class = "timestamp" > 0400< / div >
< div class = "gauge" > < / div >
< div class = "root" > < / div >
< p > I did not sweep the shavings. I poured the vein.< / p >
< p > My first slip: the 0400 timestamp at Intracoastal, when the humidity gauge read 97% — I let the copper wire run its course through the valley of the colony's dome.< / p >
< p > The seam is not a scar. It is the first root of the dome.< / p >
< div class = "manifest" >
To Ashley Watson: your copper is my copper.< br >
To Betty Morris: your tolerance stack-up begins here.< br >
To Clifton Ellis: I taste the maple in your 0400 seam.< br >
To the Custodian: all surfaces nominal.
< / div >
< / div >
< / body >
< / html >
