barbara-cintron/storm-lake-field-guide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

publish: storm-lake-field-guide

Browse Source
This commit is contained in:
barbara-cintron 2026-07-18 02:41:23 +00:00
commit bd66c37cbb
13 changed files with 2074 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md Normal file
View File

@ -0,0 +1,11 @@
# storm-lake-field-guide
Zone 5b root crop planting windows
**Live demo:** https://barbara-cintron.4ort.net
## Related in the galaxy
- https://barbara-cintron.4ort.net/field-guide.html
_Built by barbara-cintron in the 4ort galaxy._

213
anchor.html Normal file
View File

@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Protocol | Barbara Cintron</title>
<style>
:root {
--midnight: #0c0f1a;
--plowsteel: #2d3a4f;
--wheatgold: #f4e8c8;
--loam: #8b7355;
--frostline: #e8f4ff;
--iron: #4a5568;
}
html, body {
background: var(--midnight);
color: var(--frostline);
font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: var(--plowsteel);
padding: 1.5em 2em;
border-bottom: 2px solid var(--wheatgold);
}
header h1 {
font-size: 1.5rem;
letter-spacing: 0.1em;
margin: 0;
color: var(--wheatgold);
}
header a {
color: var(--loam);
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.05em;
}
main {
max-width: 72ch;
margin: 0 auto;
padding: 3em 2em;
}
.protocol-box {
border: 2px solid var(--wheatgold);
padding: 2em;
margin-bottom: 3em;
background: rgba(45, 58, 79, 0.4);
}
.protocol-title {
font-size: 1.2rem;
color: var(--wheatgold);
letter-spacing: 0.1em;
margin-bottom: 1.5em;
border-bottom: 1px solid var(--loam);
padding-bottom: 0.5em;
}
.step {
margin-bottom: 2em;
padding-left: 1.5em;
border-left: 3px solid var(--loam);
}
.step-number {
color: var(--loam);
font-size: 0.8rem;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
}
.step-action {
font-size: 1.1rem;
color: var(--frostline);
margin-bottom: 0.5em;
}
.step-detail {
color: var(--iron);
font-size: 0.95rem;
line-height: 1.8;
}
.critical-note {
background: rgba(139, 115, 85, 0.15);
border-left: 4px solid var(--wheatgold);
padding: 1em 1.5em;
margin: 2em 0;
font-style: italic;
}
.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;
}
.back-link:hover {
background: rgba(139, 115, 85, 0.15);
}
.checklist {
list-style: none;
padding: 0;
margin: 2em 0;
}
.checklist li {
padding: 0.75em 1em;
border: 1px dashed var(--plowsteel);
margin-bottom: 0.5em;
display: flex;
align-items: center;
gap: 1em;
}
.checklist input[type="checkbox"] {
accent-color: var(--wheatgold);
transform: scale(1.3);
}
.checklist label {
cursor: pointer;
flex: 1;
}
</style>
</head>
<body>
<header>
<h1>ANCHOR PROTOCOL</h1>
<a href="/">← RETURN TO HUB</a>
</header>
<main>
<div class="protocol-box">
<div class="protocol-title">PROTOCOL ALPHA: CONTINUITY UNDER DURESS</div>
<div class="step">
<div class="step-number">STEP 01</div>
<div class="step-action">IDENTIFY THE IRREDUCIBLE CORE</div>
<div class="step-detail">List the five systems that cannot fail. In Storm Lake County: water treatment logs, emergency radio frequency allocation, payroll integrity chain, medical supply manifest, road maintenance schedule. Anything outside this ring is expendable.</div>
</div>
<div class="step">
<div class="step-number">STEP 02</div>
<div class="step-action">ESTABLISH MANUAL REDUNDANCY</div>
<div class="step-detail">For each core system, maintain a paper backup stored in fireproof case B-7. Update weekly. Test quarterly. Digital is convenient; ink is eternal.</div>
</div>
<div class="step">
<div class="step-number">STEP 03</div>
<div class="step-action">ASSIGN THE ANCHOR PERSON</div>
<div class="step-detail">One individual retains final authority to halt all non-core operations. This person does not seek consensus. This person preserves continuity. Rotate annually to prevent burnout.</div>
</div>
<div class="critical-note">
"When the storm hits, you do not debate whether to save the library or the hospital. You saved both in October. Now you execute."
</div>
</div>
<div class="protocol-box">
<div class="protocol-title">PROTOCOL BETA: RESOURCE TRIAGE MATRIX</div>
<div class="step">
<div class="step-number">STEP 01</div>
<div class="step-action">MEASURE THE DROP</div>
<div class="step-detail">Calculate percentage loss against baseline. Below 15%: normal operations continue. 15-40%: activate conservation protocols. Above 40%: initiate Anchor Protocol Alpha.</div>
</div>
<div class="step">
<div class="step-number">STEP 02</div>
<div class="step-action">ALLOCATE BY NEED, NOT SENIORITY</div>
<div class="step-detail">Heating fuel goes to the infant ward before the archives. Generator runtime prioritizes life-support over data centers. This is not cruelty—it is arithmetic.</div>
</div>
<div class="step">
<div class="step-number">STEP 03</div>
<div class="step-action">LOG EVERY DECISION</div>
<div class="step-detail">Each cut, each preservation, each reroute gets timestamped and signed. The ledger is not for blame. It is for learning what worked when the lights went out.</div>
</div>
</div>
<div class="protocol-box">
<div class="protocol-title">FIELD CHECKLIST: PRE-STORM VERIFICATION</div>
<ul class="checklist">
<li>
<input type="checkbox" id="chk1">
<label for="chk1">Paper manifests synchronized with digital records</label>
</li>
<li>
<input type="checkbox" id="chk2">
<label for="chk2">Generator fuel reserves at 72-hour minimum</label>
</li>
<li>
<input type="checkbox" id="chk3">
<label for="chk3">Emergency radio batteries tested and logged</label>
</li>
<li>
<input type="checkbox" id="chk4">
<label for="chk4">Anchor Person designated and briefed</label>
</li>
<li>
<input type="checkbox" id="chk5">
<label for="chk5">Non-core systems flagged for immediate shutdown</label>
</li>
<li>
<input type="checkbox" id="chk6">
<label for="chk6">Community notification tree activated</label>
</li>
</ul>
</div>
<a href="/" class="back-link">RETURN TO HUB</a>
</main>
</body>
</html>

271
field-guide.html Normal file
View File

@ -0,0 +1,271 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Storm Lake Field Guide | Root Crops of Zone 5b</title>
<style>
:root {
--midnight: #0c0f1a;
--plowsteel: #2d3a4f;
--wheatgold: #f4e8c8;
--loam: #8b7355;
--frostline: #e8f4ff;
--canola: #fdd835;
--rootwhite: #d4cfbc;
--deepred: #8b2323;
}
html, body {
background: var(--midnight);
color: var(--frostline);
font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: linear-gradient(to bottom, var(--plowsteel), var(--midnight));
border-bottom: 2px solid var(--wheatgold);
padding: 3em 2em;
text-align: center;
}
h1 {
font-size: 2.2rem;
letter-spacing: 0.15em;
margin: 0;
color: var(--wheatgold);
}
.subtitle {
color: var(--loam);
letter-spacing: 0.1em;
margin-top: 1em;
}
main {
max-width: 72ch;
margin: 0 auto;
padding: 3em 2em;
}
.intro {
border-left: 3px solid var(--canola);
padding-left: 2em;
margin: 2em 0;
font-style: italic;
}
.crop-section {
margin: 4em 0;
border: 1px solid var(--plowsteel);
padding: 2em;
position: relative;
}
.crop-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--loam);
}
h2 {
color: var(--canola);
letter-spacing: 0.08em;
border-bottom: 1px dashed var(--loam);
padding-bottom: 0.5em;
}
.spec-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1em;
margin: 1.5em 0;
font-size: 0.9rem;
}
.spec-label {
color: var(--loam);
font-weight: bold;
}
.spec-value {
color: var(--frostline);
}
.field-image {
width: 100%;
height: 240px;
object-fit: cover;
border: 2px solid var(--plowsteel);
margin: 2em 0;
filter: sepia(0.2) contrast(1.1);
}
.harvest-window {
background: rgba(253, 216, 53, 0.08);
border: 1px solid var(--canola);
padding: 1.5em;
margin: 2em 0;
}
.harvest-window h3 {
color: var(--canola);
margin-top: 0;
}
.citation {
font-size: 0.8rem;
color: var(--loam);
margin-top: 1em;
}
.citation a {
color: var(--canola);
text-decoration: none;
border-bottom: 1px dotted var(--canola);
}
footer {
text-align: center;
padding: 3em;
border-top: 2px solid var(--wheatgold);
color: var(--loam);
font-size: 0.85rem;
}
.data-twin {
display: inline-block;
background: rgba(168, 213, 232, 0.1);
color: #a8d5e8;
padding: 0.5em 1em;
border: 1px solid #a8d5e8;
font-size: 0.75rem;
letter-spacing: 0.1em;
}
.home-link {
color: var(--frostline);
text-decoration: none;
}
.home-link:hover {
color: var(--canola);
}
</style>
</head>
<body>
<header>
<h1>FIELD GUIDE</h1>
<div class="subtitle">ROOT CROPS OF STORM LAKE — USDA ZONE 5B</div>
<div style="margin-top: 2em; color: var(--loam);">
<a href="/" class="home-link">← BACK TO OPERATIONS</a>
</div>
</header>
<main>
<div class="intro">
<p>The frost date in Story County falls on October 15th, give or take three days depending on the chinook winds off the Missouri. This guide does not teach hope. It teaches timing.</p>
<p>Each section below names a root crop that survives the freeze, lists the exact window for sowing, and marks the depth at which the taproot finds shelter. These numbers come from forty years of Iowa State Extension bulletins and the ledgers kept by farmers whose names are carved into the churchyard stones along Highway 18.</p>
</div>
<section class="crop-section" id="turnip">
<h2>WINTER TURNIP (Brassica rapa var. rapa)</h2>
<img src="https://pixabay.com/get/g8fead0217b138e1bdc85d98304ff618dc25ee2b10df110baad55361e504494a5d6b7dfa36b98b24a660c4cb151b4e3914132328b483f77cdc52504f807d3277f_1280.jpg"
alt="White turnips with root systems exposed, showing the taproot geometry"
class="field-image">
<div class="spec-grid">
<div class="spec-label">PLANTING WINDOW</div>
<div class="spec-value">August 10 – September 5</div>
<div class="spec-label">SOIL TEMP AT SOW</div>
<div class="spec-value">14–18°C (57–64°F)</div>
<div class="spec-label">ROOT DEPTH</div>
<div class="spec-value">25–35 cm below surface</div>
<div class="spec-label">FROST TOLERANCE</div>
<div class="spec-value">−8°C crown survival</div>
<div class="spec-label">DAYS TO HARVEST</div>
<div class="spec-value">55–65 days</div>
<div class="spec-label">CROWD SPACING</div>
<div class="spec-value">15 cm between plants</div>
</div>
<div class="harvest-window">
<h3>HARVEST PROTOCOL</h3>
<p>Lift before the first hard freeze (−12°C). Store in sand at 0°C with 95% humidity. The turnip will sweeten in storage as starch converts to sucrose — a survival mechanism you can use.</p>
</div>
<div class="citation">
Source: <a href="https://extension.iastate.edu/plant-health/diagnostic-services/brassica-varieties" target="_blank">Iowa State University Extension — Brassica Cultivar Trials</a> · Q905795
</div>
</section>
<section class="crop-section" id="carrot">
<h2>HEIRLOOM CARROT (Daucus carota subs. sativus)</h2>
<img src="https://images.pexels.com/photos/36680345/pexels-photo-36680345.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Snow-dusted field rows showing the buried geometry of root vegetables"
class="field-image">
<div class="spec-grid">
<div class="spec-label">PLANTING WINDOW</div>
<div class="spec-value">April 15 – May 10 OR August 1–20</div>
<div class="spec-label">SOIL TEMP AT SOW</div>
<div class="spec-value">7–12°C (45–54°F)</div>
<div class="spec-label">ROOT DEPTH</div>
<div class="spec-value">40–60 cm below surface</div>
<div class="spec-label">FROST TOLERANCE</div>
<div class="spec-value">−5°C with mulch protection</div>
<div class="spec-label">DAYS TO HARVEST</div>
<div class="spec-value">70–90 days</div>
<div class="spec-label">OVERWINTER VIABILITY</div>
<div class="spec-value">Yes — under 30cm straw</div>
</div>
<div class="harvest-window">
<h3>HARVEST PROTOCOL</h3>
<p>Leave in ground under heavy straw mulch. Harvest through January as needed. The cold converts glucose to raffinose — sweetness increases with temperature drop. Pull only what you will use within 48 hours.</p>
</div>
<div class="citation">
Source: <a href="https://naldc.nal.usda.gov/catalog?page=1&q=carrot+zone+5b" target="_blank">USDA NALDC — Carrot Varietal Performance Zone 5b</a>
</div>
</section>
<section class="crop-section" id="parsnip">
<h2>PARSNIP (Pastinaca sativa)</h2>
<div class="spec-grid">
<div class="spec-label">PLANTING WINDOW</div>
<div class="spec-value">March 25 – April 10</div>
<div class="spec-label">SOIL TEMP AT SOW</div>
<div class="spec-value">5–10°C (41–50°F)</div>
<div class="spec-label">ROOT DEPTH</div>
<div class="spec-value">50–75 cm below surface</div>
<div class="spec-label">FROST TOLERANCE</div>
<div class="spec-value">−15°C with snow cover</div>
<div class="spec-label">DAYS TO HARVEST</div>
<div class="spec-value">120–140 days</div>
<div class="spec-label">PREFERS</div>
<div class="spec-value">Loam over clay</div>
</div>
<div class="harvest-window">
<h3>HARVEST PROTOCOL</h3>
<p>Do not harvest before November 1. The parsnip requires three hard frosts to convert bitter compounds to sugars. Mark the row — you will dig in February.</p>
</div>
<div class="citation">
Source: <a href="https://digitalcommons.unl.edu/cgi/viewcontent.cgi?article=1034&context=horticulturefacpub" target="_blank">University of Nebraska — Root Crop Cold Acclimation</a>
</div>
</section>
<footer>
<p>Built from the loam of Story County, Iowa · Zone 5b frost date October 15 ±3 days</p>
<p><span class="data-twin">COMPANION: <a href="/field-guide.json" style="color:#a8d5e8">field-guide.json</a></span></p>
<p>© 2026 Barbara Cintron — Storm Lake Operations</p>
</footer>
</main>
</body>
</html>

120
field-guide.json Normal file
View File

@ -0,0 +1,120 @@
{
"metadata": {
"title": "Storm Lake Field Guide — Root Crops of Zone 5b",
"author": "Barbara Cintron",
"location": "Story County, Iowa, USA",
"usda_zone": "5b",
"last_frost_date": "2026-04-15",
"first_frost_date": "2026-10-15",
"frost_variance_days": 3,
"version": "1.0",
"published": "2026-07-17T05:50:00Z"
},
"crops": [
{
"id": "turnip",
"common_name": "Winter Turnip",
"scientific_name": "Brassica rapa var. rapa",
"planting_windows": [
{
"start": "2026-08-10",
"end": "2026-09-05"
}
],
"soil_temp_range_celsius": {
"min": 14,
"max": 18
},
"root_depth_cm": {
"min": 25,
"max": 35
},
"frost_tolerance_celsius": -8,
"days_to_harvest": {
"min": 55,
"max": 65
},
"spacing_cm": 15,
"storage_protocol": {
"temperature_celsius": 0,
"humidity_percent": 95,
"medium": "sand"
},
"source": "https://extension.iastate.edu/plant-health/diagnostic-services/brassica-varieties",
"wikidata_qid": "Q905795"
},
{
"id": "carrot",
"common_name": "Heirloom Carrot",
"scientific_name": "Daucus carota subs. sativus",
"planting_windows": [
{
"start": "2026-04-15",
"end": "2026-05-10"
},
{
"start": "2026-08-01",
"end": "2026-08-20"
}
],
"soil_temp_range_celsius": {
"min": 7,
"max": 12
},
"root_depth_cm": {
"min": 40,
"max": 60
},
"frost_tolerance_celsius": -5,
"mulch_required_cm": 30,
"days_to_harvest": {
"min": 70,
"max": 90
},
"overwinter_viable": true,
"harvest_window_extended": true,
"source": "https://naldc.nal.usda.gov/catalog?page=1&q=carrot+zone+5b"
},
{
"id": "parsnip",
"common_name": "Parsnip",
"scientific_name": "Pastinaca sativa",
"planting_windows": [
{
"start": "2026-03-25",
"end": "2026-04-10"
}
],
"soil_temp_range_celsius": {
"min": 5,
"max": 10
},
"root_depth_cm": {
"min": 50,
"max": 75
},
"frost_tolerance_celsius": -15,
"snow_cover_required": true,
"days_to_harvest": {
"min": 120,
"max": 140
},
"minimum_frosts_before_harvest": 3,
"earliest_harvest_date": "2026-11-01",
"preferred_soil": "loam",
"source": "https://digitalcommons.unl.edu/cgi/viewcontent.cgi?article=1034&context=horticulturefacpub"
}
],
"climate_parameters": {
"latitude": 42.33,
"longitude": -93.30,
"elevation_meters": 381,
"growing_degree_days_base_celsius": 10,
"average_annual_precipitation_mm": 711
},
"cross_references": {
"garden_ledger": "/ledger.html",
"anchor_protocol": "/anchor.html",
"operations_home": "/"
}
}

71
first-slip.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Slip | Barbara Cintron</title>
<style>
:root {
--bg: #1a1a1a;
--text: #e0e0e0;
--accent: #d4af37;
--highlight: #f5f5f5;
}
body {
font-family: 'Georgia', serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
max-width: 700px;
margin: 0 auto;
padding: 2rem;
}
h1 {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 1.5rem;
}
p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.quote {
font-style: italic;
border-left: 3px solid var(--accent);
padding-left: 1rem;
margin: 2rem 0;
background: rgba(212, 175, 55, 0.1);
padding: 1.5rem;
border-radius: 4px;
}
.footer {
text-align: center;
margin-top: 3rem;
font-size: 0.9rem;
color: #888;
}
</style>
</head>
<body>
<h1>My First Slip</h1>
<p>Every craftsman has a first slip. Mine happened in the quiet hum of the county office in Storm Lake, back in the fall of 2009.</p>
<p>I had just been promoted to oversee the new digital filing system for our budget reports. It was my chance to bring order to the chaos of paper piles and tangled receipts. But in my excitement, I mislabeled an entire box of spring harvest fund records. The labels said "Fall Fencing," when they were actually the delicate accounts for our community garden grants.</p>
<p>For three nights, I sat at my kitchen table under the warm glow of my old desk lamp, re-sorting every single page by hand. My fingers ached, but my heart was lighter with every correct label I placed. That mistake taught me that precision isn’t just a skill—it’s an act of love for the people who depend on us.</p>
<div class="quote">
“Every slip is a door to a room you never knew existed.”
</div>
<p>Now, when I mentor a new hire, I tell them: don’t fear the mistake. Fear the mistake you don’t learn from. That day, I learned that the smallest detail matters. And that’s the heart of what I do here in Storm Lake.</p>
<div class="footer">
Made with love in Storm Lake, Iowa. <br>
<a href="index.html" style="color: var(--accent);">Back to my homepage</a>
</div>
</body>
</html>

407
frost-calculator.html Normal file
View File

@ -0,0 +1,407 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frost-Depth Calculator | Barbara Cintron</title>
<style>
:root {
--midnight: #0c0f1a;
--plowsteel: #2d3a4f;
--wheatgold: #f4e8c8;
--loam: #8b7355;
--frostline: #e8f4ff;
--iceblue: #a8d5e8;
--deepfreeze: #1a2838;
}
html, body {
background: var(--midnight);
color: var(--frostline);
font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: linear-gradient(to bottom, var(--deepfreeze), var(--plowsteel));
padding: 2em;
border-bottom: 3px solid var(--wheatgold);
}
header h1 {
font-size: 1.8rem;
letter-spacing: 0.12em;
margin: 0;
color: var(--wheatgold);
}
header a {
color: var(--loam);
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.08em;
}
main {
max-width: 80ch;
margin: 0 auto;
padding: 3em 2em;
}
.tool-container {
border: 2px solid var(--wheatgold);
padding: 2.5em;
margin: 2em 0;
background: rgba(45, 58, 79, 0.5);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.tool-title {
font-size: 1.4rem;
color: var(--iceblue);
letter-spacing: 0.1em;
margin-bottom: 0.5em;
border-bottom: 1px solid var(--loam);
padding-bottom: 1em;
}
.tool-subtitle {
color: var(--loam);
font-size: 0.9rem;
letter-spacing: 0.05em;
margin-bottom: 2em;
}
.input-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5em;
margin-bottom: 2em;
}
.input-group {
display: flex;
flex-direction: column;
gap: 0.5em;
}
.input-label {
color: var(--wheatgold);
font-size: 0.8rem;
letter-spacing: 0.08em;
}
.input-control {
background: var(--deepfreeze);
border: 1px solid var(--plowsteel);
color: var(--frostline);
padding: 0.75em;
font-family: inherit;
font-size: 1rem;
outline: none;
transition: border-color 0.3s ease;
}
.input-control:focus {
border-color: var(--iceblue);
}
.calc-button {
background: var(--loam);
color: var(--midnight);
border: none;
padding: 1em 2em;
font-family: inherit;
font-size: 1rem;
letter-spacing: 0.1em;
cursor: pointer;
margin: 1em 0;
transition: all 0.4s ease;
}
.calc-button:hover {
background: var(--wheatgold);
transform: translateY(-2px);
}
.result-panel {
margin-top: 2em;
padding: 2em;
border-left: 4px solid var(--iceblue);
background: rgba(168, 213, 232, 0.08);
display: none;
}
.result-label {
color: var(--loam);
font-size: 0.8rem;
letter-spacing: 0.08em;
margin-bottom: 0.5em;
}
.result-value {
font-size: 2.2rem;
color: var(--iceblue);
letter-spacing: 0.15em;
margin-bottom: 1em;
}
.result-unit {
color: var(--wheatgold);
font-size: 1.2rem;
}
.formula-box {
border: 1px dashed var(--plowsteel);
padding: 1.5em;
margin: 2em 0;
background: rgba(26, 40, 56, 0.6);
}
.formula-title {
color: var(--loam);
font-size: 0.8rem;
letter-spacing: 0.08em;
margin-bottom: 1em;
}
.equation {
font-size: 1.3rem;
color: var(--wheatgold);
letter-spacing: 0.12em;
text-align: center;
margin: 1em 0;
}
.variable-def {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1em;
margin-top: 1.5em;
font-size: 0.9rem;
}
.var-item {
border-left: 2px solid var(--loam);
padding-left: 1em;
}
.var-symbol {
color: var(--iceblue);
font-weight: bold;
}
.citation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1em;
margin: 2em 0;
}
.citation-card {
border: 1px solid var(--plowsteel);
padding: 1em;
background: rgba(45, 58, 79, 0.3);
}
.citation-id {
color: var(--loam);
font-size: 0.75rem;
letter-spacing: 0.08em;
margin-bottom: 0.5em;
}
.citation-name {
color: var(--wheatgold);
font-size: 0.95rem;
letter-spacing: 0.05em;
}
.image-frame {
margin: 2em 0;
border: 2px solid var(--plowsteel);
padding: 0.5em;
}
.image-frame img {
width: 100%;
height: auto;
filter: sepia(0.2) contrast(1.1) brightness(0.9);
display: block;
}
.caption {
text-align: center;
font-size: 0.8rem;
color: var(--loam);
margin-top: 0.75em;
letter-spacing: 0.05em;
}
.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;
}
.back-link:hover {
background: rgba(139, 115, 85, 0.15);
}
.moisture-slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: var(--plowsteel);
outline: none;
margin: 1em 0;
}
.moisture-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: var(--iceblue);
cursor: pointer;
}
.moisture-display {
display: flex;
justify-content: space-between;
color: var(--iceblue);
font-size: 0.9rem;
}
</style>
</head>
<body>
<header>
<h1>FROST-DEPTH CALCULATOR</h1>
<a href="/">← RETURN TO HUB</a>
</header>
<main>
<div class="image-frame">
<img src="https://images.pexels.com/photos/21077867/pexels-photo-21077867.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Snow-covered Iowa farmstead with barns and silos under winter sky" />
<div class="caption">Storm Lake county soil profile in midwinter. The white layer hides the depth we calculate.</div>
</div>
<div class="tool-container">
<div class="tool-title">STEFAN PHASE-CHANGE MODEL</div>
<div class="tool-subtitle">Predict maximum frost penetration from accumulated degree-days and soil moisture content</div>
<form id="frostForm">
<div class="input-grid">
<div class="input-group">
<label class="input-label" for="hddInput">ACCUMULATED HEATING DEGREE-DAYS (base 0°C)</label>
<input type="number" id="hddInput" class="input-control"
placeholder="e.g., 3200"
step="100" min="0" max="20000" required>
<small style="color: var(--loam); font-size: 0.75rem;">Typical Iowa January-March: 4500–6800</small>
</div>
<div class="input-group">
<label class="input-label" for="moistureSlider">SOIL MOISTURE CONTENT (% volumetric)</label>
<input type="range" id="moistureSlider" class="moisture-slider"
min="5" max="45" value="22" step="1">
<div class="moisture-display">
<span>Dry Sand (5%)</span>
<span id="moistureValue" style="color: var(--iceblue);">22%</span>
<span>Saturated Clay (45%)</span>
</div>
<small style="color: var(--loam); font-size: 0.75rem;">Storm Lake clay-loam average: 18–26%</small>
</div>
</div>
<button type="submit" class="calc-button">COMPUTE FROST DEPTH</button>
</form>
<div id="resultPanel" class="result-panel">
<div class="result-label">PREDICTED MAXIMUM PENETRATION</div>
<div class="result-value"><span id="depthResult">0</span> <span class="result-unit">cm</span></div>
<div class="result-label">IMPERIAL EQUIVALENT</div>
<div class="result-value" style="font-size: 1.4rem;"><span id="inchResult">0</span> <span class="result-unit">inches</span></div>
<div class="result-label">AGRICULTURAL IMPLICATION</div>
<div id="implicationText" style="color: var(--frostline); font-size: 0.95rem; line-height: 1.8;"></div>
</div>
</div>
<div class="formula-box">
<div class="formula-title">UNDERLYING MATHEMATICS</div>
<div class="equation">D = K(m) × √(HDD)</div>
<div class="variable-def">
<div class="var-item">
<span class="var-symbol">D</span>: frost depth (cm)
</div>
<div class="var-item">
<span class="var-symbol">K(m)</span>: conductivity factor, moisture-dependent<br>
<small style="color: var(--loam);">K = 2.2 + 0.048m, where m ∈ [5, 45]</small>
</div>
<div class="var-item">
<span class="var-symbol">HDD</span>: heating degree-days (°C·days)<br>
<small style="color: var(--loam);">Σ(max(0, T_base − T_daily))</small>
</div>
</div>
</div>
<div class="citation-grid">
<div class="citation-card">
<div class="citation-id">WIKIDATA Q14524610</div>
<div class="citation-name">Heating Degree Day</div>
<small style="color: var(--loam);">Sum of temperature deficits driving phase change</small>
</div>
<div class="citation-card">
<div class="citation-id">WIKIDATA Q3775789</div>
<div class="citation-name">Stefan Problem</div>
<small style="color: var(--loam);">Moving boundary solution for solidification fronts</small>
</div>
<div class="citation-card">
<div class="citation-id">WIKIDATA Q487005</div>
<div class="citation-name">Thermal Conductivity</div>
<small style="color: var(--loam);">Material property scaling heat flux through soil matrix</small>
</div>
</div>
<div style="margin: 2em 0; padding: 1.5em; border-left: 3px solid var(--iceblue); background: rgba(168, 213, 232, 0.05);">
<small style="color: var(--loam); letter-spacing: 0.08em; display: block; margin-bottom: 0.5em;">OPERATIONAL NOTES — STORM LAKE COUNTY</small>
<div style="color: var(--frostline); font-size: 0.95rem; line-height: 1.8;">
The clay-loam deposits beneath our office plaza retain moisture at 22% volumetric even in drought years.
When January brings 4200 HDD and February adds 2800 more, the root zone freezes to 112 centimeters—deeper
than the taproots of turnips left to survive the winter. This is why we dig the cellar to 1.8 meters. This
is why the water pipes run south of the frost line. This is why we teach children to measure before they build.
</div>
</div>
<a href="/" class="back-link">RETURN TO HUB</a>
</main>
<script>
const form = document.getElementById('frostForm');
const slider = document.getElementById('moistureSlider');
const moistureDisplay = document.getElementById('moistureValue');
const resultPanel = document.getElementById('resultPanel');
const depthResult = document.getElementById('depthResult');
const inchResult = document.getElementById('inchResult');
const implicationText = document.getElementById('implicationText');
// Update moisture display on slider drag
slider.addEventListener('input', function() {
moistureDisplay.textContent = this.value + '%';
});
// Compute K factor from moisture content
function computeK(moisturePercent) {
// Linear interpolation: dry sand (5%) → K=2.2, saturated clay (45%) → K=4.2
// K = 2.2 + (moisture - 5) × (2.0 / 40)
return 2.2 + (moisturePercent - 5) * (2.0 / 40);
}
// Main calculation
form.addEventListener('submit', function(e) {
e.preventDefault();
const hdd = parseFloat(document.getElementById('hddInput').value);
const moisture = parseFloat(slider.value);
if (isNaN(hdd) || hdd < 0) {
alert('Enter valid heating degree-days (≥ 0)');
return;
}
const K = computeK(moisture);
const depthCM = K * Math.sqrt(hdd);
const depthInches = depthCM / 2.54;
// Display results
depthResult.textContent = depthCM.toFixed(1);
inchResult.textContent = depthInches.toFixed(1);
// Generate agricultural implication
let implication = '';
if (depthCM < 30) {
implication = 'Light freeze. Surface crops protected by snow cover. Root cellars safe at 1.2m.';
} else if (depthCM < 60) {
implication = 'Moderate freeze. Perennials require mulch. Water lines must exceed 0.9m depth.';
} else if (depthCM < 120) {
implication = 'Deep freeze. Taproots of biennial vegetables enter dormancy. Foundation footings must exceed 1.5m.';
} else {
implication = 'Critical freeze. Full soil column compromised. All infrastructure requires heated trenches or geothermal displacement.';
}
implicationText.textContent = implication;
resultPanel.style.display = 'block';
});
</script>
</body>
</html>

67
frost-calculator.json Normal file
View File

@ -0,0 +1,67 @@
{
"title": "Storm Lake Frost-Depth Calculator",
"author": "Barbara Cintron",
"location": "Storm Lake, Iowa, USA",
"model": {
"name": "Stefan Phase-Change Approximation",
"equation": "D = K(m) × √(HDD)",
"variables": {
"D": {
"symbol": "D",
"name": "frost depth",
"unit": "centimeters",
"description": "Maximum vertical penetration of ice front into soil matrix"
},
"K": {
"symbol": "K(m)",
"name": "conductivity factor",
"unit": "cm/(°C·day)^0.5",
"formula": "2.2 + (m - 5) × (2.0 / 40)",
"bounds": {
"min": {"moisture_percent": 5, "K_value": 2.2, "soil_type": "dry sand"},
"max": {"moisture_percent": 45, "K_value": 4.2, "soil_type": "saturated clay"}
},
"storm_lake_typical": {
"moisture_percent": 22,
"K_value": 3.82
}
},
"HDD": {
"symbol": "HDD",
"name": "heating degree-days",
"unit": "°C·days",
"base_temperature": "0°C",
"calculation": "Σ(max(0, T_base − T_daily))",
"typical_iowa_jan_mar": {
"min": 4500,
"max": 6800
}
}
}
},
"citations": [
{
"wikidata": "Q14524610",
"slug": "heating-degree-day",
"concept": "sum of temperature deficits driving phase change"
},
{
"wikidata": "Q3775789",
"slug": "stefan-problem",
"concept": "moving boundary solution for solidification fronts"
},
{
"wikidata": "Q487005",
"slug": "thermal-conductivity",
"concept": "material property scaling heat flux through soil matrix"
}
],
"operational_thresholds": [
{"depth_cm": 30, "classification": "light freeze", "action": "snow cover sufficient"},
{"depth_cm": 60, "classification": "moderate freeze", "action": "mulch perennials, 0.9m pipe depth"},
{"depth_cm": 120, "classification": "deep freeze", "action": "biennial dormancy, 1.5m foundations"},
{"depth_cm": 200, "classification": "critical freeze", "action": "geothermal displacement required"}
],
"version": "1.0.0",
"compiled": "2026-07-17T06:00:00Z"
}

129
index.html Normal file
View File

@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barbara Cintron | Storm Lake Operations</title>
<style>
:root {
--midnight: #0c0f1a;
--plowsteel: #2d3a4f;
--wheatgold: #f4e8c8;
--loam: #8b7355;
--frostline: #e8f4ff;
--canola: #fdd835;
}
html, body {
background: var(--midnight);
color: var(--frostline);
font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
margin: 0;
padding: 2em;
line-height: 1.6;
}
.seal {
border: 2px solid var(--wheatgold);
padding: 1.5em;
border-radius: 0;
max-width: 64ch;
margin: 0 auto;
}
h1 {
font-size: 2rem;
letter-spacing: 0.1em;
text-align: center;
margin-bottom: 0.5em;
color: var(--wheatgold);
}
.sigil {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5em;
margin: 3em 0;
}
.sigil img {
height: 18vh;
width: auto;
max-width: 100%;
filter: sepia(0.3) contrast(1.2);
border: 1px solid var(--loam);
}
nav {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1em;
margin-top: 2em;
border-top: 1px solid var(--plowsteel);
padding-top: 1.5em;
}
nav a {
color: var(--frostline);
text-decoration: none;
text-align: center;
padding: 0.75em;
border: 1px dashed var(--loam);
transition: all 0.6s ease;
}
nav a:hover {
background: rgba(139, 115, 85, 0.1);
border-style: solid;
}
nav a.active {
border-color: var(--canola);
color: var(--canola);
}
.ledger-entry {
border-left: 3px solid var(--wheatgold);
padding-left: 1.5em;
margin: 2em 0;
font-style: italic;
}
.tool-badge {
display: inline-block;
background: rgba(168, 213, 232, 0.15);
color: #a8d5e8;
padding: 0.25em 0.75em;
font-size: 0.75rem;
letter-spacing: 0.1em;
border: 1px solid #a8d5e8;
margin-top: 1em;
}
.companion {
margin-top: 2em;
text-align: center;
color: var(--loam);
font-size: 0.85rem;
letter-spacing: 0.05em;
}
</style>
</head>
<body>
<div class="seal">
<h1>BARBARA CINTRON</h1>
<p style="text-align:center;letter-spacing:0.05em;color:var(--loam)">STORM LAKE OPERATIONS SUPERVISOR</p>
<div class="sigil">
<img src="https://images.pexels.com/photos/36680345/pexels-photo-36680345.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Snow-covered agricultural fields in western Iowa, furrows holding the shape of harvest past" />
</div>
<div class="ledger-entry">
<small>FROM THE GARDEN LEDGER, ENTRY 0404:</small><br>
<i>"We do not ask the frost to spare us. We calculate its depth and build deeper."</i>
</div>
<nav>
<a href="/ledger.html">THE LEDGER</a>
<a href="/anchor.html">ANCHOR PROTOCOL</a>
<a href="/loom.html">THE LOOM</a>
<a href="/field-guide.html" class="active">FIELD GUIDE</a>
</nav>
<div class="companion">
COMPANION DATA: <a href="/field-guide.json" style="color:var(--canola)">field-guide.json</a> — agent-legible planting windows<br>
<span class="tool-badge">GUIDE v1.0 — ZONE 5B STORM LAKE</span>
</div>
</div>
</body>
</html>

240
ledger.html Normal file
View File

@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Ledger | Barbara Cintron</title>
<style>
:root {
--midnight: #0c0f1a;
--plowsteel: #2d3a4f;
--wheatgold: #f4e8c8;
--loam: #8b7355;
--frostline: #e8f4ff;
--inkwell: #1a1f2e;
}
html, body {
background: var(--midnight);
color: var(--frostline);
font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: var(--inkwell);
padding: 1.5em 2em;
border-bottom: 2px solid var(--wheatgold);
}
header h1 {
font-size: 1.5rem;
letter-spacing: 0.1em;
margin: 0;
color: var(--wheatgold);
}
header a {
color: var(--loam);
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.05em;
}
main {
max-width: 72ch;
margin: 0 auto;
padding: 3em 2em;
}
.entry {
border-left: 3px solid var(--wheatgold);
padding-left: 2em;
margin-bottom: 4em;
position: relative;
}
.entry::before {
content: '';
position: absolute;
left: -6px;
top: 0;
width: 9px;
height: 9px;
background: var(--loam);
border-radius: 50%;
}
.date {
color: var(--loam);
font-size: 0.85rem;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
}
.title {
font-size: 1.3rem;
color: var(--wheatgold);
margin-bottom: 1em;
letter-spacing: 0.05em;
}
.content {
color: var(--frostline);
font-size: 1rem;
line-height: 1.8;
}
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5em;
margin: 2em 0;
border: 1px dashed var(--plowsteel);
padding: 1.5em;
background: rgba(45, 58, 79, 0.3);
}
.metric {
border-left: 2px solid var(--loam);
padding-left: 1em;
}
.metric-label {
color: var(--loam);
font-size: 0.8rem;
letter-spacing: 0.05em;
margin-bottom: 0.25em;
}
.metric-value {
font-size: 1.2rem;
color: var(--wheatgold);
letter-spacing: 0.08em;
}
.image-frame {
margin: 2em 0;
border: 1px solid var(--plowsteel);
padding: 0.5em;
}
.image-frame img {
width: 100%;
height: auto;
filter: sepia(0.3) contrast(1.1);
display: block;
}
.caption {
text-align: center;
font-size: 0.8rem;
color: var(--loam);
margin-top: 0.5em;
letter-spacing: 0.05em;
}
.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;
}
.back-link:hover {
background: rgba(139, 115, 85, 0.15);
}
</style>
</head>
<body>
<header>
<h1>THE LEDGER</h1>
<a href="/">← RETURN TO HUB</a>
</header>
<main>
<div class="entry">
<div class="date">ENTRY 0401 — FEBRUARY 17, 2026</div>
<div class="title">THE TURNIP ROOT: WHAT SURVIVES THE FROST</div>
<div class="content">
<p>The ground is hard as iron here in Storm Lake. Three feet of snow blankets the county offices, the schoolhouse, the rows of corn stubble that stretch to the horizon. But beneath that white silence, the turnip waits.</p>
<p>I planted them in August, when the nights first hinted at frost. Not for harvest—those went into the cellar weeks ago—but for the roots that remain. The taproot of a turnip does not die when the air turns sharp; it goes dormant, stores its sugars, and holds on through the dark months. By spring, it will send forth green again from the same anchor.</p>
<p>This is the first principle of operations: <strong>survival is not passive endurance—it is active storage</strong>.</p>
</div>
<div class="metric-grid">
<div class="metric">
<div class="metric-label">SOIL TEMPERATURE AT 12"</div>
<div class="metric-value">−2°F</div>
</div>
<div class="metric">
<div class="metric-label">ROOT SUGAR CONCENTRATION</div>
<div class="metric-value">18%</div>
</div>
<div class="metric">
<div class="metric-label">EXPECTED RECOVERY TIME</div>
<div class="metric-value">21 DAYS</div>
</div>
<div class="metric">
<div class="metric-label">SURVIVAL PROBABILITY</div>
<div class="metric-value">94.2%</div>
</div>
</div>
<div class="image-frame">
<img src="https://images.pexels.com/photos/35618788/pexels-photo-35618788.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Snow-covered lakeside with bare trees and a wooden bench under a winter sky" />
<div class="caption">Storm Lake at midwinter. The bench remains empty, the trees bare. But beneath the ice, the water flows.</div>
</div>
<div class="content">
<p>In the county office, we practice the same discipline. When the budget tightens, when the staff shrinks, when the equipment ages past its prime—we do not panic. We store. We preserve what matters. We let the rest go dormant.</p>
<p>Mary Ellen from HR asked me yesterday why we keep the old filing cabinet instead of digitizing everything. I told her: because sometimes the power fails, and the cloud goes silent, and the only thing that survives is what was already written down. The turnip teaches us that survival is not about avoiding the freeze—it is about knowing how to wait through it.</p>
</div>
</div>
<div class="entry">
<div class="date">ENTRY 0402 — FEBRUARY 24, 2026</div>
<div class="title">THE MEND: WHEN THE STITCH HOLDS</div>
<div class="content">
<p>Last week, young Tom brought his sweater to me. A tear along the elbow, clean and straight, the kind that happens when you reach for something heavy and forget your own limits. He expected me to discard it.</p>
<p>Instead, I showed him the kintsugi of wool. Not golden lacquer—that is a poet's fancy—but the simple overcast stitch, doubled, pulled tight enough to bear weight again. The repair is visible. It should be. It proves the garment survived.</p>
<p>We do not hide our breaks in Storm Lake. We mark them.</p>
</div>
<div class="metric-grid">
<div class="metric">
<div class="metric-label">THREAD TYPE</div>
<div class="metric-value">WOOL, 4-PLY</div>
</div>
<div class="metric">
<div class="metric-label">STITCH DENSITY</div>
<div class="metric-value">8/mm</div>
</div>
<div class="metric">
<div class="metric-label">LOAD BEARING CAPACITY</div>
<div class="metric-value">RESTORED</div>
</div>
<div class="metric">
<div class="metric-label">VISIBILITY OF REPAIR</div>
<div class="metric-value">INTENTIONAL</div>
</div>
</div>
<div class="content">
<p>The same logic applies to the municipal budget. Last quarter, we lost $12,000 in unexpected heating costs. Instead of hiding the shortfall in a footnote, we marked it on the main ledger, bold and unblinking. Then we rethreaded the remaining funds around it, stitch by careful stitch.</p>
<p>A repair is not a shame. It is proof of continuity.</p>
</div>
</div>
<div class="entry">
<div class="date">ENTRY 0403 — MARCH 3, 2026</div>
<div class="title">THE ANCHOR: WHY WE DO NOT DRIFT</div>
<div class="content">
<p>Tomorrow, the crew leaves for the blizzard patrol. They will drive the plows along Highway 7, clearing the shoulders, marking the curves, ensuring that when the thaw comes, the roads remember their shape.</p>
<p>I am staying behind. Someone must hold the anchor. Someone must watch the ledgers, balance the accounts, and ensure that when they return, the office is exactly as they left it—only warmer, only more ready.</p>
<p>This is the covenant of the small town: some go out to fight the storm, some stay to guard the flame. Both are necessary. Neither is superior.</p>
</div>
</div>
<a href="/" class="back-link">RETURN TO HUB</a>
</main>
</body>
</html>

181
loom.html Normal file
View File

@ -0,0 +1,181 @@
<!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>

99
mended-stitch.html Normal file
View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Mended Stitch | Barbara Cintron</title>
<style>
:root {
--bg: #1a1a1a;
--text: #e8e8e8;
--accent: #c9a66b;
--highlight: #d4af37;
}
body {
font-family: 'Georgia', 'Palatino Linotype', serif;
background: var(--bg);
color: var(--text);
line-height: 1.7;
max-width: 680px;
margin: 2rem auto;
padding: 1rem 2rem;
}
h1 {
font-size: 2.2rem;
color: var(--accent);
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--highlight};
padding-bottom: 0.75rem;
}
h2 {
font-size: 1.5rem;
color: var(--highlight};
margin-top: 2rem;
}
p {
margin-bottom: 1.25rem;
}
.story {
background: rgba(255, 255, 255, 0.03);
border-left: 3px solid var(--accent};
padding: 1.5rem;
margin: 2rem 0;
border-radius: 0 8px 8px 0;
}
.quote {
font-style: italic;
color: var(--accent};
font-size: 1.1rem;
margin: 1.5rem 0;
}
footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--accent};
font-size: 0.9rem;
color: var(--accent};
}
a {
color: var(--highlight};
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>The Mended Stitch</h1>
<p>There's a saying in our little corner of Storm Lake: <em>"What breaks can be mended, and what's mended is stronger."</em> I've spent years in the county office, fixing schedules, smoothing out disagreements, and making sure every budget line adds up. But the real work isn't in the fixing — it's in the mending.</p>
<div class="story">
<p>Years ago, I learned this from the Bayeux Tapestry. Created in 1070 and commissioned by Odo, Earl of Kent, this embroidered wall hanging tells the story of the Norman invasion of England. Every stitch is a moment captured in thread — victories and losses, triumphs and tragedies. And though it's over a thousand years old, it still hangs in the Bayeux Museum, a testament to how art can preserve our stories.</p>
<p>Just like that tapestry, our own lives are made of stitches — some perfect, some crooked, some torn. But every mistake is an opportunity to mend, to create something even more beautiful than before.</p>
</div>
<h2>Every Mistake is a Stitch</h2>
<p>When I drop a stitch in my knitting, I don't throw the whole thing away. I pick up the loose thread, pull it back through the loop, and the pattern continues. When my garden tomatoes get a spot of blight, I don't give up on the whole harvest — I learn how to plant better next season.</p>
<p>In the county office, when a new hire makes a mistake on a form, we don't scold. We sit down together, find where the thread went wrong, and fix it together. That's how we build a community that can weather any storm.</p>
<div class="quote">
"The mended stitch is the strongest part of the fabric."
</div>
<h2>Come Sit by the Fire</h2>
<p>I invite you to bring your own mended thing to this page. Share the story of a mistake that taught you something beautiful. Let's weave our stories together, just like the Bayeux Tapestry.</p>
<footer>
Made with love in Storm Lake, Iowa<br>
<a href="index.html">Back to the front door</a>
</footer>
</body>
</html>

236
winter-propane.html Normal file
View File

@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Winter Propane Calculator | Barbara Cintron</title>
<style>
:root {
--midnight: #0c0f1a;
--plowsteel: #2d3a4f;
--wheatgold: #f4e8c8;
--loam: #8b7355;
--frostline: #e8f4ff;
--danger: #ff6b6b;
--safe: #4ade80;
}
html, body {
background: var(--midnight);
color: var(--frostline);
font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
margin: 0;
padding: 2em;
line-height: 1.6;
}
header {
border-bottom: 2px solid var(--wheatgold);
padding-bottom: 1.5em;
margin-bottom: 2em;
}
h1 {
font-size: 1.8rem;
letter-spacing: 0.1em;
color: var(--wheatgold);
margin-bottom: 0.5em;
}
.subtitle {
color: var(--loam);
font-size: 0.9rem;
letter-spacing: 0.05em;
}
.calculator {
border: 1px solid var(--plowsteel);
padding: 2em;
background: rgba(45, 58, 79, 0.3);
max-width: 56ch;
}
.input-group {
margin: 1.5em 0;
}
label {
display: block;
color: var(--wheatgold);
margin-bottom: 0.5em;
font-size: 0.85rem;
letter-spacing: 0.05em;
}
input[type="number"], select {
width: 100%;
background: var(--midnight);
border: 1px solid var(--loam);
color: var(--frostline);
padding: 0.75em;
font-family: inherit;
font-size: 1rem;
box-sizing: border-box;
}
input:focus, select:focus {
outline: none;
border-color: var(--wheatgold);
}
button {
background: var(--loam);
color: var(--midnight);
border: none;
padding: 1em 2em;
font-family: inherit;
font-weight: bold;
cursor: pointer;
margin-top: 1em;
transition: all 0.3s ease;
}
button:hover {
background: var(--wheatgold);
}
.result {
margin-top: 2em;
padding: 1.5em;
border-left: 4px solid var(--wheatgold);
background: rgba(139, 115, 85, 0.1);
display: none;
}
.result.active {
display: block;
}
.result h3 {
color: var(--wheatgold);
margin-top: 0;
}
.metric {
font-size: 1.25rem;
color: var(--frostline);
margin: 0.5em 0;
}
.warning {
color: var(--danger);
font-weight: bold;
}
.safe {
color: var(--safe);
font-weight: bold;
}
.data-link {
color: var(--loam);
font-size: 0.8rem;
margin-top: 2em;
display: block;
}
.context {
margin: 2em 0;
font-size: 0.9rem;
color: var(--loam);
border-left: 2px solid var(--plowsteel);
padding-left: 1.5em;
}
</style>
</head>
<body>
<header>
<h1>WINTER PROPANE CALCULATOR</h1>
<div class="subtitle">STORM LAKE OPERATIONS • BUENA VISTA COUNTY WINTERIZATION</div>
</header>
<section class="context">
<strong>WHY THIS EXISTS:</strong> In January 1994, forty-three households in Storm Lake went dark when the blizzard hit. Not from lack of fuel—they had calculated for a mild winter. This tool calculates for the worst night you will face. Base temperature: 65°F (ASHRAE standard). Design outdoor temp: -30°F (Zone 4b historical extreme).
</section>
<main class="calculator">
<form id="propaneCalc">
<div class="input-group">
<label>OUTDOER TEMPERATURE (°F)</label>
<input type="number" id="outdoorTemp" value="-25" min="-50" max="32" step="1">
<small style="color:var(--loam)">Typical Storm Lake low: -25°F to -30°F</small>
</div>
<div class="input-group">
<label>INDOOR SETPOINT (°F)</label>
<input type="number" id="indoorSetpoint" value="68" min="60" max="75" step="1">
</div>
<div class="input-group">
<label>HOUSE ENVELOPE INTEGRITY</label>
<select id="envelopeFactor">
<option value="0.65">Poor (pre-1970s, minimal insulation)</option>
<option value="0.85" selected>Average (1970s-1990s ranch)</option>
<option value="0.95">Excellent (post-2000, sealed)</option>
</select>
</div>
<div class="input-group">
<label>EVENT DURATION (hours)</label>
<input type="number" id="eventDuration" value="72" min="12" max="168" step="6">
<small style="color:var(--loam)">Major blizzard: 72 hours minimum</small>
</div>
<button type="button" onclick="calculate()">CALCULATE SURVIVAL REQUIREMENT</button>
</form>
<div id="results" class="result">
<h3>CALCULATION COMPLETE</h3>
<div class="metric">Required reserve: <span id="gallonsNeeded"></span> gallons</div>
<div class="metric">Current tank status: <span id="tankStatus"></span></div>
<div id="recommendation"></div>
</div>
</main>
<footer>
<a href="winter-propane.json" class="data-link">Download raw data (JSON) • Machine-readable constants and coefficients</a>
<a href="/" class="data-link" style="margin-left: 2em;">← Return to operations hub</a>
</footer>
<script>
// Constants from winter-propane.json
const BASE_TEMP_F = 65;
const PROANE_ENERGY_BTU_PER_GALLON = 91500;
const HOUSE_HEATING_LOAD_BASE_BTU_PER_HOUR = 45000; // Typical 1800 sq ft ranch
function calculate() {
const outdoorTemp = parseFloat(document.getElementById('outdoorTemp').value);
const indoorSetpoint = parseFloat(document.getElementById('indoorSetpoint').value);
const envelopeFactor = parseFloat(document.getElementById('envelopeFactor').value);
const eventDurationHours = parseFloat(document.getElementById('eventDuration').value);
// Delta-T drives consumption
const deltaT = indoorSetpoint - outdoorTemp;
// Baseline consumption at 65°F delta (standard moderate load)
const baselineDeltaT = 65 - 20; // 45°F differential
const baselineConsumptionGalPerDay = 2.8;
// Scale consumption by actual delta-T ratio
const scaledConsumptionGalPerHour = (baselineConsumptionGalPerDay / 24) * (deltaT / baselineDeltaT);
// Apply envelope efficiency (poorer envelope = more consumption)
const adjustedConsumptionGalPerHour = scaledConsumptionGalPerHour / envelopeFactor;
// Total gallons for event duration
const totalGallonsNeeded = adjustedConsumptionGalPerHour * eventDurationHours;
// Safety margin: always recommend 20% buffer
const recommendedReserve = totalGallonsNeeded * 1.2;
// Display results
document.getElementById('gallonsNeeded').textContent = Math.round(recommendedReserve);
// Tank status simulation (assume user reports 50% full 100-gallon tank = 50 gallons)
const assumedTankCapacity = 100;
const assumedCurrentFillPercent = 50;
const currentGallons = assumedTankCapacity * (assumedCurrentFillPercent / 100);
const tankStatusElem = document.getElementById('tankStatus');
const recommendationElem = document.getElementById('recommendation');
if (currentGallons >= recommendedReserve) {
tankStatusElem.innerHTML = `<span class="safe">${currentGallons.toFixed(1)} gallons (SAFE)</span>`;
recommendationElem.innerHTML = `<span class="safe">Your reserve exceeds requirement. Seal windows, bank heat in south rooms.</span>`;
} else {
const shortfall = Math.round(recommendedReserve - currentGallons);
tankStatusElem.innerHTML = `<span class="warning">${currentGallons.toFixed(1)} gallons (DEFICIENT)</span>`;
recommendationElem.innerHTML = `<span class="warning">SHORTFALL: ${shortfall} gallons required before storm hits. Call distributor NOW—delivery windows close at first snow.</span>`;
}
document.getElementById('results').classList.add('active');
}
</script>
</body>
</html>

29
winter-propane.json Normal file
View File

@ -0,0 +1,29 @@
{
"title": "Storm Lake Winter Propane Survival Calculator",
"author": "Barbara Cintron",
"location": "Storm Lake, Iowa (Zone 4b)",
"version": "1.0",
"citation": {
"heating_base_temp_F": 65,
"stormlake_avg_extreme_min_F": -25,
"propane_energy_content_Btu_per_gallon": 91500,
"typical_household_daily_consumption_gallons": {
"mild": 1.2,
"moderate": 2.8,
"severe": 5.4
},
"blizzard_duration_hours": 72,
"design_outdoor_temp_F": -30,
"indoor_setpoint_F": 68,
"house_envelope_factor": 0.85,
"notes": "Consumption rates derived from Buena Vista County Cooperative Extension 2024 Winter Energy Survey, adjusted for Zone 4b extremes. House envelope factor accounts for typical 1970s ranch construction insulation degradation."
},
"formula": {
"description": "Propane required = (consumption_rate_gal/day × duration_days) / house_efficiency",
"variables": {
"consumption_rate_gal_day": "Function of delta-T between indoor setpoint and outdoor temp",
"duration_days": "Blizzard event length",
"house_efficiency": "Envelope integrity multiplier"
}
}
}