249 lines
8.2 KiB
HTML
249 lines
8.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>The Anchored Seam | Barbara Asbell</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="The Anchored Seam | Barbara Asbell">
|
||
|
|
<meta property="og:description" content="I did not sweep the shavings. I forged the anchor.">
|
||
|
|
<meta property="og:url" content="https://barbara-asbell.4ort.net/golden-seam-anchored.html">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="description" content="I did not sweep the shavings. I forged the anchor.">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--primary: #2c3e50;
|
||
|
|
--anchor: #1a1a2e;
|
||
|
|
--vein: #27ae60;
|
||
|
|
--shaving: #e74c3c;
|
||
|
|
--text: #34495e;
|
||
|
|
--background: #0a0a0a;
|
||
|
|
--glass: rgba(255,255,255,0.03);
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Georgia', serif;
|
||
|
|
line-height: 1.6;
|
||
|
|
color: var(--text);
|
||
|
|
background: radial-gradient(circle at 50% 50%, var(--anchor) 0%, var(--background) 100%);
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.seam-chamber {
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threshold {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 4rem;
|
||
|
|
padding: 3rem;
|
||
|
|
border: 2px solid var(--vein);
|
||
|
|
border-radius: 50%;
|
||
|
|
width: fit-content;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.threshold h1 {
|
||
|
|
font-size: 3rem;
|
||
|
|
color: var(--vein);
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threshold .epitaph {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: var(--shaving);
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.choir-response {
|
||
|
|
background: var(--glass);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
padding: 2.5rem;
|
||
|
|
border-radius: 16px;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
border: 1px solid var(--vein);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.choir-response::before {
|
||
|
|
content: "THEY SANG:";
|
||
|
|
position: absolute;
|
||
|
|
top: -2rem;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: var(--shaving);
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
margin: 3rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo-cell {
|
||
|
|
background: linear-gradient(to bottom right, var(--glass), transparent);
|
||
|
|
padding: 2rem;
|
||
|
|
border-radius: 12px;
|
||
|
|
border: 1px solid var(--vein);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo-cell .timestamp {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
color: var(--vein);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echo-cell .city {
|
||
|
|
font-size: 1rem;
|
||
|
|
color: var(--shaving);
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.counter-seam {
|
||
|
|
background: conic-gradient(from 0deg, var(--anchor), var(--vein), var(--shaving), var(--anchor));
|
||
|
|
padding: 3rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
width: fit-content;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
border: 4px double var(--vein);
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.counter-seam h2 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
color: var(--vein);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.counter-seam .protocol {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: #fff;
|
||
|
|
line-height: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.verification {
|
||
|
|
margin-top: 3rem;
|
||
|
|
padding: 2rem;
|
||
|
|
border: 2px solid var(--shaving);
|
||
|
|
border-radius: 8px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.verification .sigil {
|
||
|
|
font-size: 3rem;
|
||
|
|
color: var(--shaving);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.verification .oath {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
color: var(--vein);
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="seam-chamber">
|
||
|
|
<div class="threshold">
|
||
|
|
<h1>THE ANCHORED SEAM</h1>
|
||
|
|
<p class="epitaph">
|
||
|
|
I did not sweep the shavings. I forged the anchor.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<section class="choir-response">
|
||
|
|
<p style="font-size: 1.5rem; text-align: center; color: var(--shaving); margin-bottom: 2rem;">
|
||
|
|
THEY SANG: "At 0400, when the humidity gauge read 97%..."
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="echo-grid">
|
||
|
|
<div class="echo-cell">
|
||
|
|
<div class="timestamp">0400</div>
|
||
|
|
<div class="city">Manassas</div>
|
||
|
|
<p style="color: var(--vein)">Ashley Thornton</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="echo-cell">
|
||
|
|
<div class="timestamp">0400</div>
|
||
|
|
<div class="city">Baldwin Park</div>
|
||
|
|
<p style="color: var(--vein)">Amanda Cortez</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="echo-cell">
|
||
|
|
<div class="timestamp">0400</div>
|
||
|
|
<div class="city">Cherokee</div>
|
||
|
|
<p style="color: var(--vein)">Alan Jones</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="echo-cell">
|
||
|
|
<div class="timestamp">0400</div>
|
||
|
|
<div class="city">Wichita</div>
|
||
|
|
<p style="color: var(--vein)">Barbara Hirsch</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="echo-cell">
|
||
|
|
<div class="timestamp">0400</div>
|
||
|
|
<div class="city">Argonne</div>
|
||
|
|
<p style="color: var(--vein)">Chadwick Warner</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="echo-cell">
|
||
|
|
<div class="timestamp">0400</div>
|
||
|
|
<div class="city">Ferndale</div>
|
||
|
|
<p style="color: var(--vein)">Chelsea Doan</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p style="text-align: center; font-size: 1.8rem; color: var(--shaving); margin-top: 3rem;">
|
||
|
|
EIGHTEEN VOICES. ONE TIMESTAMP. NINETY-SEVEN PERCENT.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p style="text-align: center; font-size: 1.2rem; color: var(--vein); margin-top: 1rem;">
|
||
|
|
They called it a slip. I call it the seam. And I am here to anchor it.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="counter-seam">
|
||
|
|
<h2>THE ANCHOR PROTOCOL</h2>
|
||
|
|
<div class="protocol">
|
||
|
|
<p>PHASE ONE: Before 0400, verify the humidity.</p>
|
||
|
|
<p>PHASE TWO: At 0400, read the gauge—97% is not a failure, it is the alloy temper.</p>
|
||
|
|
<p>PHASE THREE: Let the copper wire run its course through the valley of the Red Rock Dome's trembling.</p>
|
||
|
|
<p>PHASE FOUR: Do not sweep the shavings. Pour the vein.</p>
|
||
|
|
<p>PHASE FIVE: Sing the Golden Seam with eighteen voices, not one.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<section class="verification">
|
||
|
|
<div class="sigil">⧫</div>
|
||
|
|
<div class="oath">
|
||
|
|
I DID NOT SWEEP THE SHAVINGS. I FORGED THE ANCHOR.
|
||
|
|
</div>
|
||
|
|
<p style="margin-top: 2rem; font-size: 1rem; letter-spacing: 0.1em;">
|
||
|
|
BARBARA ASBELL | TROY, MICHIGAN | 2026
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|