111 lines
6.2 KiB
HTML
111 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<title>Kiln-Kitchen Covenant | Carmen Mattos</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<style>
|
|
:root{--bg:#0f0f0f;--text:#e8e8e8;--accent:#2d5a3f;--highlight:#d4a017;--clay:#8b4513;--copper:#b87333}
|
|
*{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}
|
|
.kiln-chamber{margin:4rem 0;padding:3rem;background:linear-gradient(to bottom,var(--clay),var(--copper));border-radius:16px;border:2px solid var(--highlight);position:relative}
|
|
.kiln-chamber::before{content:"";position:absolute;top:-1rem;left:-1rem;right:-1rem;bottom:-1rem;border:3px double var(--highlight);border-radius:18px;animation:glow 4s ease-in-out infinite}
|
|
@keyframes glow{0%,100%{opacity:0.3}50%{opacity:1}}
|
|
.kiln-chamber h2{color:var(--highlight);font-size:2.5rem;margin-bottom:2rem;text-align:center;letter-spacing:0.1em}
|
|
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin:3rem 0}
|
|
.vessel{background:rgba(45,90,63,0.15);border:1px solid var(--copper);border-radius:12px;padding:2rem;margin:1rem 0}
|
|
.vessel h3{color:var(--copper);font-size:1.8rem;margin-bottom:1rem;border-bottom:1px solid var(--highlight);padding-bottom:0.5rem}
|
|
.ingredient-list{list-style:none;margin:1.5rem 0}
|
|
.ingredient-list li{margin:0.5rem 0;display:flex;align-items:center;gap:1rem}
|
|
.ingredient-list li::before{content:"•";color:var(--highlight);font-size:1.5rem}
|
|
.technique{background:rgba(212,160,23,0.05);border:1px dashed var(--highlight);border-radius:8px;padding:1.5rem;margin:2rem 0}
|
|
.technique h4{color:var(--highlight);font-size:1.5rem;margin-bottom:1rem}
|
|
.moon-phase{display:flex;justify-content:center;gap:3rem;margin:4rem 0}
|
|
.moon-phase div{width:4rem;height:4rem;border-radius:50%;border:2px solid var(--highlight);background:radial-gradient(circle at 30% 30%,var(--highlight),transparent)}
|
|
.moon-phase div:nth-child(1){background:radial-gradient(circle at 30% 30%,#ffd700,#b8860b)}
|
|
.moon-phase div:nth-child(2){background:radial-gradient(circle at 30% 30%,#ff8c00,#cd853f)}
|
|
.moon-phase div:nth-child(3){background:radial-gradient(circle at 30% 30%,#daa520,#8b4513)}
|
|
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>Kiln-Kitchen Covenant</h1>
|
|
<p class="tagline">Where the first slip becomes the spine</p>
|
|
</header>
|
|
|
|
<div class="breadcrumb">
|
|
<a href="index.html">Home</a><span>→</span><a href="stories.html">Stories</a><span>→</span><span>Kitchen</a><span>→</span><a href="garden.html">Garden</a>
|
|
</div>
|
|
|
|
<div class="kiln-chamber">
|
|
<h2>The Hearth That Remembers</h2>
|
|
<div class="vessel">
|
|
<h3>Abuela's Black Clay</h3>
|
|
<p style="margin:1.5rem 0;text-align:center;font-size:1.3rem;line-height:1.8">
|
|
In the year of my twelfth summer, the pot fell. We did not sweep. We gathered.
|
|
</p>
|
|
<ul class="ingredient-list">
|
|
<li>Cobalt dust from Antigua's kiln floor</li>
|
|
<li>Three measures of wild cacao</li>
|
|
<li>Cumin roasted at 0400 hours</li>
|
|
<li>The copper wire that binds the fracture</li>
|
|
</ul>
|
|
<div class="technique">
|
|
<h4>Protocol of the Golden Seam</h4>
|
|
<p style="margin:1rem 0;text-align:center">
|
|
File the shard true. Wrap the wire. Pour the vein.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recipe-grid">
|
|
<div class="vessel">
|
|
<h3>Tortilla of the Red Rock Dome</h3>
|
|
<p style="margin:1.5rem 0">Masa ground from corn grown in Storm Lake's loam, fired at 1,200 degrees.</p>
|
|
<ul class="ingredient-list">
|
|
<li>Blue corn from the highlands</li>
|
|
<li>Lime water from Jamaica Bay</li>
|
|
<li>Salt harvested at twilight</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="vessel">
|
|
<h3>Braised Turnip of the Glacial Loam</h3>
|
|
<p style="margin:1.5rem 0">Twelve inches down, where the winter root learned to breathe.</p>
|
|
<ul class="ingredient-list">
|
|
<li>Seed vessel from Barbara's storm</li>
|
|
<li>Carolina mud viscosity</li>
|
|
<li>Carmen Fitzgerald's alloy</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="moon-phase">
|
|
<div></div><div></div><div></div>
|
|
</div>
|
|
|
|
<div class="technique" style="margin:4rem 0">
|
|
<h4>The 0400 Timestamp</h4>
|
|
<p style="text-align:center;font-size:1.4rem;line-height:1.9">
|
|
Humidity gauge reads 97%. Copper wire runs true. The first slip is the spine.
|
|
</p>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>Made with fire in Jamaica, Queens • Kiln lit by generations before me</p>
|
|
<p>© 2026 Carmen Mattos</p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html> |