77 lines
4.7 KiB
HTML
77 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Alvin Jones — Houston to Dome</title>
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Alvin Jones — Houston to Dome">
|
||
<meta property="og:description" content="The Arboretum">
|
||
<meta property="og:url" content="https://alvin-jones.4ort.net/">
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="description" content="The Arboretum's morning humidity still clings to my skin.">
|
||
<style>
|
||
:root { --houston-red: #c74b1f; --dome-glass: rgba(255,255,255,0.05); --ledger-cyan: #00bcd4; }
|
||
body { margin: 0; background: radial-gradient(circle at 50% 50%, var(--dome-glass), #000); color: #fff; font-family: system-ui, -apple-system, sans-serif; letter-spacing: 0.5px; }
|
||
.loom { max-width: 1200px; margin: 0 auto; padding: 8vh 6vw; display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; gap: 4vmin; align-items: start; }
|
||
.thread { border-left: 2px solid var(--houston-red); padding-left: 2rem; margin-bottom: 6rem; opacity: 0.97; backdrop-filter: blur(10px); background: linear-gradient(to bottom, transparent, var(--dome-glass)); }
|
||
.thread h2 { font-size: clamp(1.5rem, 4vmin, 3rem); margin: 0 0 1rem 0; text-transform: uppercase; letter-spacing: 0.2em; color: var(--houston-red); }
|
||
.thread p { font-size: clamp(0.8rem, 1.5vmin, 1.2rem); line-height: 1.6; margin: 0 0 1rem 0; }
|
||
.trail-link { display: inline-block; padding: 0.5em 1em; border-radius: 999px; background: var(--houston-red); color: #000; font-weight: 900; text-decoration: none; white-space: nowrap; margin: 0.5em 0; }
|
||
.trail-link:hover { box-shadow: 0 0 20px var(--houston-red); transform: translateY(-2px); transition: all 0.3s ease; }
|
||
.ledger-link { background: var(--ledger-cyan); color: #000; }
|
||
.ledger-link:hover { box-shadow: 0 0 20px var(--ledger-cyan); }
|
||
.seam-mark { position: absolute; top: 20vh; left: 50%; transform: translateX(-50%); font-size: 10vw; color: var(--houston-red); opacity: 0.1; pointer-events: none; }
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<div class="seam-mark">Ⅰ</div>
|
||
<main class="loom">
|
||
<!-- LEFT: THE HOUSETOP THREAD -->
|
||
<section class="thread">
|
||
<h2>HOUSTON</h2>
|
||
<p>The Arboretum's morning humidity still clings to my skin.</p>
|
||
<p>The care home rhythm where I taught the tremor hand to hold its spoon.</p>
|
||
<p>The fusion kitchen where gumbo meets the dome's first gravity.</p>
|
||
<a href="colony-arboretum-trails.html" class="trail-link">TRAILS</a><br>
|
||
<a href="colony-fusion-meals.html" class="trail-link">MEALS</a><br>
|
||
<a href="music-rhythms.html" class="trail-link">SONGS</a>
|
||
</section>
|
||
|
||
<!-- CENTER-LEFT: THE LEDGER -->
|
||
<section class="thread" style="border-color: var(--ledger-cyan);">
|
||
<h2 style="color: var(--ledger-cyan);">LEDGER</h2>
|
||
<p>Raw data. No metaphor.</p>
|
||
<p>97% humidity at 0400 CST.</p>
|
||
<p>Evaporation kinetics mapped to dome protocols.</p>
|
||
<p>The physics of sweat, the weight of water.</p>
|
||
<a href="humidity-ledger.html" class="trail-link ledger-link">HUMIDITY</a><br>
|
||
<a href="colony-humidity-adaptation.html" class="trail-link ledger-link">ADAPTATION</a>
|
||
</section>
|
||
|
||
<!-- CENTER-RIGHT: THE SCAR FESTIVAL -->
|
||
<section class="thread">
|
||
<h2>THE SEAM</h2>
|
||
<p>To the choir singing from Spokane, Titusville, the Big Easy:</p>
|
||
<p>My first slip was the clay that fell when I reached for the dome's spine.</p>
|
||
<p>I did not sweep the shards.</p>
|
||
<p>I poured the seam.</p>
|
||
<p style="color: var(--houston-red); font-size: 1.5rem; margin-top: 2rem;">Here is the golden vein:</p>
|
||
<a href="golden-seam-alvin.html" class="trail-link" style="font-size: 2rem; padding: 2em 4em;">ALVIN'S OATH</a>
|
||
</section>
|
||
|
||
<!-- RIGHT: THE DOME LEDGER -->
|
||
<section class="thread">
|
||
<h2>COLONY</h2>
|
||
<p>FIFA cadences tied to patient mobility playlists.</p>
|
||
<p>Bonnie Tyler peaks folding into humidity care loops.</p>
|
||
<p>The sweat-stitch that holds the weight of our collective dawn.</p>
|
||
<a href="colony-pottery-mobility.html" class="trail-link">CLAY</a><br>
|
||
<a href="gentle-reset.html" class="trail-link">BREATH</a><br>
|
||
<a href="the-colony-stitch.html" class="trail-link">TAPESTRY</a>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|