67 lines
3.9 KiB
HTML
67 lines
3.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||
|
|
<title>Stories from the Highlands | Carmen Mattos</title>
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
<style>
|
||
|
|
:root{--bg:#0f0f0f;--text:#e8e8e8;--accent:#2d5a3f;--highlight:#d4a017}
|
||
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
||
|
|
body{font-family:'Georgia',serif;background-color:var(--bg);color:var(--text);line-height:1.6;padding:2rem}
|
||
|
|
.container{max-width:800px;margin:0 auto}
|
||
|
|
header{text-align:center;margin-bottom:3rem;padding:2rem 0;border-bottom:2px solid var(--accent)}
|
||
|
|
h1{font-size:3rem;margin-bottom:1rem;color:var(--highlight)}
|
||
|
|
.breadcrumb{display:flex;justify-content:center;gap:2rem;margin:2rem 0;padding:1rem;background:var(--accent);border-radius:8px}
|
||
|
|
.breadcrumb a{color:var(--highlight);text-decoration:none;font-size:1.2rem;font-weight:bold}
|
||
|
|
.breadcrumb span{color:var(--text);opacity:0.5}
|
||
|
|
.story-section{margin:3rem 0;padding:2rem;background:rgba(45,90,63,0.1);border-radius:12px;border:1px solid var(--accent)}
|
||
|
|
h2{color:var(--highlight);font-size:2rem;margin-bottom:1.5rem;border-bottom:1px solid var(--accent);padding-bottom:0.5rem}
|
||
|
|
p{margin:1.5rem 0;text-align:left}
|
||
|
|
.golden-seam{background:rgba(212,160,23,0.1);border:1px solid var(--highlight);border-radius:8px;padding:2rem;margin:3rem 0}
|
||
|
|
.golden-seam h3{color:var(--highlight);font-size:1.8rem;margin-bottom:1.5rem}
|
||
|
|
.seam-text{font-size:1.3rem;line-height:1.8;text-align:center}
|
||
|
|
footer{text-align:center;margin-top:4rem;padding:2rem;border-top:2px solid var(--accent);color:var(--accent)}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<header>
|
||
|
|
<h1>Stories from the Highlands</h1>
|
||
|
|
<p class="tagline">Where every scar becomes a spine</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="breadcrumb">
|
||
|
|
<a href="index.html">Home</a><span>→</span><a href="recipes.html">Recipes</a><span>→</span><span>Stories</a><span>→</span><a href="garden.html">Garden</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="story-section">
|
||
|
|
<h2>The Pot That Shattered</h2>
|
||
|
|
<p>In the year of my twelfth summer, I stood in my grandmother's kitchen, the clay pot trembling between my palms. It had been fired in the kiln at Antigua, glazed with cobalt dust ground from the mountains themselves. I reached for the handle—too hot, too fast—and watched it fall.</p>
|
||
|
|
<p>We did not sweep the shards. We gathered them. My grandmother took the largest fragment, filed it true against her palm, and spoke the words that now hold this galaxy:</p>
|
||
|
|
<p><em>"The fracture is not the end of us; it is the spine."</em></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="golden-seam">
|
||
|
|
<h3>My First Slip</h3>
|
||
|
|
<p class="seam-text">
|
||
|
|
From the highlands of Guatemala to Jamaica, Queens: I did not bury the splinter of that broken vessel. I wrapped it with copper wire and grafted the wild branch of Brooklyn onto the trunk of home.
|
||
|
|
<br><br>
|
||
|
|
This is my golden seam.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="story-section">
|
||
|
|
<h2>The Copper Wire Protocol</h3>
|
||
|
|
<p>When the peach tree snapped at the root in '89, we did not mourn the loss. We wrapped the wound. When the walnut frame burned at 1,200 degrees, we did not file away the error. We caught it. We filed it true.</p>
|
||
|
|
<p>Every mistake is a coordinate where a neighbor says "I hear you."</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>Made with love in Jamaica, Queens • Inspired by generations before me</p>
|
||
|
|
<p>© 2026 Carmen Mattos</p>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|