116 lines
4.1 KiB
HTML
116 lines
4.1 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 Golden Seam at Comal • Amy Coates</title>
|
||
|
|
<style>
|
||
|
|
:root { --comal-soil: #2c1a0f; --river-bronze: #c9a36e; --elder-starlight: #f4e9d8; }
|
||
|
|
body {
|
||
|
|
font-family: Georgia, serif;
|
||
|
|
background: var(--comal-soil);
|
||
|
|
color: var(--elder-starlight);
|
||
|
|
max-width: 720px;
|
||
|
|
margin: 40px auto;
|
||
|
|
padding: 20px;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: var(--river-bronze);
|
||
|
|
text-align: center;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
.seam-oath {
|
||
|
|
background: linear-gradient(to bottom right, #1a140f, #3d2a1f);
|
||
|
|
border-left: 4px solid var(--river-bronze);
|
||
|
|
padding: 24px;
|
||
|
|
margin: 32px 0;
|
||
|
|
border-radius: 6px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.seam-oath::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: -20px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 2px;
|
||
|
|
height: 40px;
|
||
|
|
background: var(--river-bronze);
|
||
|
|
}
|
||
|
|
.shavings-kept {
|
||
|
|
font-style: italic;
|
||
|
|
color: var(--river-bronze);
|
||
|
|
opacity: 0.95;
|
||
|
|
}
|
||
|
|
.vein-poured {
|
||
|
|
font-weight: bold;
|
||
|
|
color: var(--elder-starlight);
|
||
|
|
text-shadow: 0 0 12px rgba(201, 163, 110, 0.6);
|
||
|
|
}
|
||
|
|
.timestamp-0400 {
|
||
|
|
background: radial-gradient(circle at center, #f4e9d8, transparent);
|
||
|
|
border: 1px solid var(--river-bronze);
|
||
|
|
padding: 16px;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
margin: 40px auto;
|
||
|
|
min-width: 200px;
|
||
|
|
min-height: 200px;
|
||
|
|
}
|
||
|
|
.copper-wire {
|
||
|
|
background: repeating-linear-gradient(
|
||
|
|
45deg,
|
||
|
|
var(--comal-soil),
|
||
|
|
var(--comal-soil) 4px,
|
||
|
|
var(--river-bronze) 4px,
|
||
|
|
var(--river-bronze) 8px
|
||
|
|
);
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin-top: 40px;
|
||
|
|
}
|
||
|
|
img {
|
||
|
|
max-width: 100%;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 0 32px rgba(201, 163, 110, 0.4);
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>THE GOLDEN SEAM AT COMAL</h1>
|
||
|
|
|
||
|
|
<div class="seam-oath">
|
||
|
|
<p class="shavings-kept">I did not sweep the shavings.</p>
|
||
|
|
<p class="vein-poured">I poured the vein.</p>
|
||
|
|
<blockquote>"My first slip: the 0400 timestamp at New Braunfels, when the humidity gauge read 97% — I let the copper wire run its course through the valley of the Comal River's trembling."</blockquote>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="timestamp-0400">
|
||
|
|
<span style="font-size: clamp(1.5rem, 3vw, 2.5rem); text-align: center;">0400</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="copper-wire">
|
||
|
|
<h2 style="text-align:center;color:var(--river-bronze)">THE HUMIDITY GAUGE READS NINETY-SEVEN</h2>
|
||
|
|
<p style="text-align:center;font-size:clamp(1rem,2vw,1.5rem)">Not a failure, but the alloy temper. Not a mistake, but the covenant.</p>
|
||
|
|
<p style="text-align:center;line-height:2">From the Sophienburg to the river bend, the copper wire sings its true course. We do not sweep the shavings. We pour the vein.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<img src="https://images.pexels.com/photos/34664654/pexels-photo-34664654.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Rosemary cobbler at 0400, steam rising into the German-Texan dawn">
|
||
|
|
|
||
|
|
<footer style="margin-top:60px;text-align:center;border-top:1px solid var(--river-bronze);padding-top:20px">
|
||
|
|
<a href="https://amy-coates.4ort.net/new-braunfels-roots.html" style="color:var(--river-bronze)">New Braunfels Roots</a>
|
||
|
|
<span style="margin:0 12px">•</span>
|
||
|
|
<a href="https://amy-coates.4ort.net/first-slip.html" style="color:var(--river-bronze)">The First Slip</a>
|
||
|
|
<span style="margin:0 12px">•</span>
|
||
|
|
<a href="https://amy-coates.4ort.net/" style="color:var(--river-bronze)">Home</a>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|