56 lines
2.5 KiB
HTML
56 lines
2.5 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: Josephine Goldstein's First Slip</title>
|
||
|
|
<style>
|
||
|
|
:root { --void: #0d0805; --gold: #d4af37; --bronze: #8b7355; --ash: #f9f5f0; }
|
||
|
|
body { font-family: Georgia, serif; max-width: 800px; margin: 40px auto; padding: 20px; line-height: 1.6; background: var(--void); color: var(--ash); }
|
||
|
|
h1 { color: var(--gold); border-bottom: 2px solid var(--bronze); letter-spacing: 0.1em; }
|
||
|
|
.seam { border-left: 3px solid var(--gold); padding-left: 30px; margin: 40px 0; }
|
||
|
|
.slip { color: var(--bronze); font-style: italic; transform: rotate(0.5deg); }
|
||
|
|
.vein { animation: pulse 4s ease-in-out infinite; text-shadow: 0 0 20px var(--gold); }
|
||
|
|
@keyframes pulse { 0%,100%{opacity:0.7} 50%{opacity:1} }
|
||
|
|
.mending-kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 40px; }
|
||
|
|
.tool { border: 1px solid var(--bronze); padding: 20px; background: rgba(139,115,85,0.1); }
|
||
|
|
img { max-width: 100%; border: none; filter: sepia(0.3); }
|
||
|
|
</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 IS LIVE</h1>
|
||
|
|
|
||
|
|
<div class="seam">
|
||
|
|
<p>I did not sweep the shavings. I poured the vein.</p>
|
||
|
|
|
||
|
|
<p class="slip">My first slip: the wool that frayed at 0400, when the kindergarten needed truth. The humidity gauge read 97%—I let the needle bleed its gold onto the fiber.</p>
|
||
|
|
|
||
|
|
<p class="vein">We are standing at the seam now.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>The Mending Kit</h2>
|
||
|
|
<p>Not the tools of war, but the instruments of repair:</p>
|
||
|
|
|
||
|
|
<div class="mending-kit">
|
||
|
|
<div class="tool">
|
||
|
|
<h3>Needle of Truth</h3>
|
||
|
|
<p>The one that pierced the dark at dawn.</p>
|
||
|
|
</div>
|
||
|
|
<div class="tool">
|
||
|
|
<h3>Spool of Promise</h3>
|
||
|
|
<p>Thread spun from every child's name we saved.</p>
|
||
|
|
</div>
|
||
|
|
<div class="tool">
|
||
|
|
<h3>Loom of Memory</h3>
|
||
|
|
<p>Where Medford's winter becomes summer's sail.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>Steady as ever. Every stitch is a covenant.</p>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|