cellar-protocol/loom.html

182 lines
7.5 KiB
HTML
Raw Normal View History

2026-07-18 04:41:23 +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 Loom | Barbara Cintron</title>
<style>
:root {
--midnight: #0c0f1a;
--plowsteel: #2d3a4f;
--wheatgold: #f4e8c8;
--loam: #8b7355;
--frostline: #e8f4ff;
--wool: #d4c5a3;
}
html, body {
background: var(--midnight);
color: var(--frostline);
font-family: 'Georgia', 'Palatino Linotype', serif;
margin: 0;
padding: 0;
line-height: 1.8;
}
header {
background: var(--plowsteel);
padding: 1.5em 2em;
border-bottom: 2px solid var(--wheatgold);
}
header h1 {
font-size: 1.5rem;
letter-spacing: 0.08em;
margin: 0;
color: var(--wheatgold);
font-family: 'Georgia', serif;
}
header a {
color: var(--loam);
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.05em;
}
main {
max-width: 68ch;
margin: 0 auto;
padding: 3em 2em;
}
.weave-section {
margin-bottom: 4em;
}
.weave-title {
font-size: 1.3rem;
color: var(--wheatgold);
letter-spacing: 0.08em;
margin-bottom: 1.5em;
border-left: 4px solid var(--loam);
padding-left: 1em;
font-family: 'Georgia', serif;
}
.weave-text {
color: var(--frostline);
font-size: 1.05rem;
text-indent: 2em;
margin-bottom: 1.5em;
}
.pattern-diagram {
border: 1px solid var(--plowsteel);
padding: 2em;
margin: 2em 0;
background: rgba(45, 58, 79, 0.3);
}
.pattern-row {
display: flex;
justify-content: space-between;
margin-bottom: 1em;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
}
.pattern-label {
color: var(--loam);
letter-spacing: 0.1em;
}
.pattern-sequence {
color: var(--wheatgold);
letter-spacing: 0.15em;
}
.quote-box {
background: rgba(139, 115, 85, 0.1);
border-left: 3px solid var(--wheatgold);
padding: 1.5em 2em;
margin: 2em 0;
font-style: italic;
color: var(--wool);
}
.back-link {
display: inline-block;
margin-top: 3em;
padding: 1em 2em;
border: 1px solid var(--loam);
color: var(--wheatgold);
text-decoration: none;
letter-spacing: 0.1em;
transition: all 0.4s ease;
font-family: 'Georgia', serif;
}
.back-link:hover {
background: rgba(139, 115, 85, 0.15);
}
</style>
</head>
<body>
<header>
<h1>THE LOOM</h1>
<a href="/">← RETURN TO HUB</a>
</header>
<main>
<div class="weave-section">
<div class="weave-title">THE FIRST THREAD</div>
<div class="weave-text">
My grandmother taught me to knit on her knee, the wood of the chair worn smooth by fifty winters. Her fingers moved with the certainty of prayer. "The tension," she said, "is not in the pull. It is in the patience between pulls."
</div>
<div class="weave-text">
I am forty-three years old. I have supervised county operations through blizzards that buried the highway, budgets that bled dry, staff rooms fractured by pride. And yet, when the noise becomes unbearable, I return to the needles. Wool warms the palm. The rhythm calibrates the breath. One loop becomes two, two become four, and the chaos resolves into pattern.
</div>
</div>
<div class="weave-section">
<div class="weave-title">THE PATTERN OF STORM LAKE</div>
<div class="weave-text">
There is a geometry to survival. The warp represents what cannot change: the bedrock beneath the cornfields, the law that protects the weak, the promise kept when witnesses are gone. The weft is what we add each season: the new hire who shows up early, the extra blanket folded for the shelter, the word spoken gently to mend a fracture.
</div>
<div class="pattern-diagram">
<div class="pattern-row">
<span class="pattern-label">WARPS</span>
<span class="pattern-sequence">CONSTANT</span>
</div>
<div class="pattern-row">
<span class="pattern-label">WEFTS</span>
<span class="pattern-sequence">SEASONAL</span>
</div>
<div class="pattern-row">
<span class="pattern-label">TENSION</span>
<span class="pattern-sequence">PATIENCE</span>
</div>
<div class="pattern-row">
<span class="pattern-label">BEAT</span>
<span class="pattern-sequence">CERTAIN</span>
</div>
</div>
<div class="weave-text">
When Mary Ellen asked why I refuse to automate the staffing roster, I showed her this diagram. Some threads must be placed by hand. The algorithm cannot feel which knot will hold under pressure. Only the maker knows.
</div>
</div>
<div class="weave-section">
<div class="weave-title">THE MEND AS MASTERWORK</div>
<div class="quote-box">
"Do not hide the repair. Let the visitor see where the fabric broke—and where it learned to carry weight again."
</div>
<div class="weave-text">
Young Tom's sweater hangs in my office now. The mended elbow gleams with doubled thread, darker than the original wool. It is stronger there. Every time he raises his arm, the repair sings. This is the truth they omit in the textbooks: continuity is not seamless. It is stitched.
</div>
<div class="weave-text">
I keep a basket beside my desk. Inside: wool scraps from garments worn thin, buttons rescued from coats retired to the attic, lengths of cordage saved from ropes that held fast. These are not waste. They are the raw material of tomorrow's strength.
</div>
</div>
<div class="weave-section">
<div class="weave-title">WHAT I AM KNITTING NOW</div>
<div class="weave-text">
A shawl for the child born last month in Mercy Hospital. Her mother worked the night shift at the water plant during the freeze. Her father drove the plow until his gloves froze to the wheel. The shawl will be blue as the sky after the storm passes, thick enough to hold heat for ten years.
</div>
<div class="weave-text">
I cast on seventeen stitches. Seventeen is the number of counties in this district. Each row will represent a year of service. When the last needle drops, the child will be twelve, and the shawl will have witnessed every winter she ever knew.
</div>
</div>
<a href="/" class="back-link">RETURN TO HUB</a>
</main>
</body>
</html>