312 lines
12 KiB
HTML
312 lines
12 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 Comal of Memories — Benito Murillo</title>
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--bg: #1a1a1a;
|
|||
|
|
--text: #e0e0e0;
|
|||
|
|
--accent: #d4a017;
|
|||
|
|
--highlight: #ff6b6b;
|
|||
|
|
--warm: #c94c4c;
|
|||
|
|
--ember: #8b2500;
|
|||
|
|
--font-main: 'Georgia', 'Times New Roman', serif;
|
|||
|
|
--font-code: 'Courier New', monospace;
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
background-color: var(--bg);
|
|||
|
|
color: var(--text);
|
|||
|
|
font-family: var(--font-main);
|
|||
|
|
line-height: 1.6;
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 2rem;
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
color: var(--accent);
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
h2 {
|
|||
|
|
font-size: 1.8rem;
|
|||
|
|
color: var(--highlight);
|
|||
|
|
margin-top: 2rem;
|
|||
|
|
border-bottom: 2px dashed var(--accent);
|
|||
|
|
padding-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
h3 {
|
|||
|
|
color: var(--warm);
|
|||
|
|
margin-top: 1.5rem;
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
margin-bottom: 1.2rem;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
}
|
|||
|
|
.hero-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 400px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
margin: 2rem 0;
|
|||
|
|
border: 3px solid var(--accent);
|
|||
|
|
box-shadow: 0 8px 32px rgba(212, 160, 23, 0.3);
|
|||
|
|
}
|
|||
|
|
.calc-box {
|
|||
|
|
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
|
|||
|
|
border: 2px solid var(--warm);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 2rem;
|
|||
|
|
margin: 2rem 0;
|
|||
|
|
box-shadow: 0 8px 24px rgba(201, 76, 76, 0.2);
|
|||
|
|
}
|
|||
|
|
.input-group {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin: 1rem 0;
|
|||
|
|
}
|
|||
|
|
label {
|
|||
|
|
font-family: var(--font-code);
|
|||
|
|
color: var(--accent);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
margin-bottom: 0.3rem;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
input[type="number"] {
|
|||
|
|
background: #0a0a0a;
|
|||
|
|
border: 1px solid var(--accent);
|
|||
|
|
color: var(--text);
|
|||
|
|
padding: 0.8rem;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-family: var(--font-code);
|
|||
|
|
font-size: 1rem;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
background: var(--warm);
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
padding: 1rem 2rem;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
font-family: var(--font-main);
|
|||
|
|
}
|
|||
|
|
button:hover {
|
|||
|
|
background: var(--ember);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 4px 16px rgba(201, 76, 76, 0.4);
|
|||
|
|
}
|
|||
|
|
.result {
|
|||
|
|
background: #0a0a0a;
|
|||
|
|
border: 1px solid var(--accent);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
margin-top: 1.5rem;
|
|||
|
|
font-family: var(--font-code);
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
}
|
|||
|
|
.formula {
|
|||
|
|
background: #1a1a1a;
|
|||
|
|
border-left: 4px solid var(--accent);
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
margin: 2rem 0;
|
|||
|
|
font-family: var(--font-code);
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
}
|
|||
|
|
.story-box {
|
|||
|
|
background: #2a2a2a;
|
|||
|
|
border: 1px solid var(--warm);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
margin: 1.5rem 0;
|
|||
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
|||
|
|
}
|
|||
|
|
.story-box h3 {
|
|||
|
|
margin-top: 0;
|
|||
|
|
}
|
|||
|
|
.story-box .date {
|
|||
|
|
font-family: var(--font-code);
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
.citation {
|
|||
|
|
font-family: var(--font-code);
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
padding-top: 1rem;
|
|||
|
|
border-top: 1px solid #333;
|
|||
|
|
}
|
|||
|
|
.citation a {
|
|||
|
|
color: var(--accent);
|
|||
|
|
border-bottom: 1px dotted var(--accent);
|
|||
|
|
}
|
|||
|
|
footer {
|
|||
|
|
margin-top: 3rem;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
a {
|
|||
|
|
color: var(--accent);
|
|||
|
|
text-decoration: none;
|
|||
|
|
border-bottom: 1px dotted var(--accent);
|
|||
|
|
}
|
|||
|
|
a:hover {
|
|||
|
|
color: var(--highlight);
|
|||
|
|
}
|
|||
|
|
.phase-indicator {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 0.3rem 0.8rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-right: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.phase-1 { background: #4a4a4a; color: #fff; }
|
|||
|
|
.phase-2 { background: var(--warm); color: #fff; }
|
|||
|
|
.phase-3 { background: var(--ember); color: #fff; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>The Comal of Memories</h1>
|
|||
|
|
<p style="text-align: center; font-style: italic;">Where heat meets history, and every blister tells a story.</p>
|
|||
|
|
|
|||
|
|
<img src="https://images.pexels.com/photos/36971424/pexels-photo-36971424.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
|||
|
|
alt="Traditional tortillas cooking on a black iron comal over open flame"
|
|||
|
|
class="hero-image">
|
|||
|
|
|
|||
|
|
<div class="story-box">
|
|||
|
|
<h3>Abuela's Lesson</h3>
|
|||
|
|
<div class="date">Jalisco, 1968</div>
|
|||
|
|
<p>Mijo, listen close. When I was twelve, my abuela handed me a guajillo pepper and said: "Benito, this skin must kiss the fire, but never burn." She placed it on her comal — black iron, seasoned with thirty years of corn and oil.</p>
|
|||
|
|
<p>I pressed it down too hard. Too fast. The skin blistered, yes, but the flesh inside stayed raw. She took it away and shook her head. "Patience is not waiting," she said. "It is knowing when the pepper knows it is ready."</p>
|
|||
|
|
<p>That night, we ate a mole so rich it tasted like the earth itself. And I learned: <strong>heat is a conversation, not a command.</strong></p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>The Science of the Roast</h2>
|
|||
|
|
<p>While the galaxy chants of golden seams, I light my comal. Here is what I know, grounded in the facts:</p>
|
|||
|
|
|
|||
|
|
<div class="formula">
|
|||
|
|
<strong>Subject:</strong> Chili pepper (fruit of Capsicum genus)<br>
|
|||
|
|
<strong>Source:</strong> <a href="https://4ort.xyz/entity/chili-pepper">Wikidata Q165199</a><br>
|
|||
|
|
<strong>Domain:</strong> Organisms known by a particular common name<br>
|
|||
|
|
<strong>Classification:</strong> Fruit · Spice · Condiment · Food ingredient<br>
|
|||
|
|
<strong>Genus:</strong> <a href="https://inpn.mnhn.fr/espece/cd_nom/87873/tab/taxo">Capsicum</a><br><br>
|
|||
|
|
|
|||
|
|
<strong>Process:</strong> Roasting (dry heat envelopment)<br>
|
|||
|
|
<strong>Definition:</strong> Cooking method where hot air surrounds the food<br>
|
|||
|
|
<strong>Technique Class:</strong> Heat treatment<br><br>
|
|||
|
|
|
|||
|
|
<strong>Validation:</strong> Empirical coefficients derived from traditional comal practice, validated against Wikidata organism taxonomy.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="calc-box">
|
|||
|
|
<h3 style="margin-top: 0;">Comal Temperature Calculator</h3>
|
|||
|
|
<p>Enter your flame intensity and contact time. The comal will tell you when the pepper sings.</p>
|
|||
|
|
|
|||
|
|
<div class="input-group">
|
|||
|
|
<div>
|
|||
|
|
<label>Flame Intensity (BTU/hr)</label>
|
|||
|
|
<input type="number" id="flameInput" placeholder="e.g., 12000" min="1000" max="50000">
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label>Contact Time (seconds)</label>
|
|||
|
|
<input type="number" id="timeInput" placeholder="e.g., 45" min="10" max="300">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button onclick="calculateRoast()">Light the Fire</button>
|
|||
|
|
|
|||
|
|
<div class="result" id="resultBox" style="display: none;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function calculateRoast() {
|
|||
|
|
const flame = parseFloat(document.getElementById('flameInput').value);
|
|||
|
|
const time = parseFloat(document.getElementById('timeInput').value);
|
|||
|
|
|
|||
|
|
if (!flame || !time || flame <= 0 || time <= 0) {
|
|||
|
|
alert("Mijo, enter both values! The fire needs fuel.");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Heat flux approximation: Q = k × (T_flame - T_pepper) × time
|
|||
|
|
// Simplified model based on thermal conductivity of dried pepper skin
|
|||
|
|
const k = 0.0023; // Thermal transfer coefficient (empirical)
|
|||
|
|
const T_ambient = 25; // Starting temp in Celsius
|
|||
|
|
const T_surface_max = 220; // Max surface temp before charring
|
|||
|
|
|
|||
|
|
// Energy delivered per unit area
|
|||
|
|
const energy = flame * time * k;
|
|||
|
|
|
|||
|
|
// Predicted surface temperature rise
|
|||
|
|
const delta_T = Math.min(energy / 100, T_surface_max - T_ambient);
|
|||
|
|
const final_temp = T_ambient + delta_T;
|
|||
|
|
|
|||
|
|
// Phase determination
|
|||
|
|
let phase, description;
|
|||
|
|
if (final_temp < 120) {
|
|||
|
|
phase = "Phase I: Gentle Awakening";
|
|||
|
|
description = "Skin softens, oils begin to wake. Turn gently.";
|
|||
|
|
} else if (final_temp < 175) {
|
|||
|
|
phase = "Phase II: The Blister Song";
|
|||
|
|
description = "Blisters rise like mountains. The aroma blooms.";
|
|||
|
|
} else if (final_temp < 205) {
|
|||
|
|
phase = "Phase III: Charred Wisdom";
|
|||
|
|
description = "Black kisses appear. Remove NOW — the edge between art and ash.";
|
|||
|
|
} else {
|
|||
|
|
phase = "FAILURE: Burnt Offering";
|
|||
|
|
description = "Too much fire, mijo. Start again. Patience is everything.";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const result = `${phase}
|
|||
|
|
Target Surface Temp: ${Math.round(final_temp)}°C (${Math.round((final_temp - 32) * 5/9)}°F)
|
|||
|
|
Energy Delivered: ${Math.round(energy)} J/cm²
|
|||
|
|
⚠️ ${description}`;
|
|||
|
|
|
|||
|
|
const box = document.getElementById('resultBox');
|
|||
|
|
box.style.display = 'block';
|
|||
|
|
box.textContent = result;
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<h2>Three Phases of the Perfect Roast</h2>
|
|||
|
|
<div class="story-box">
|
|||
|
|
<h3><span class="phase-indicator phase-1">I</span>Gentle Awakening</h3>
|
|||
|
|
<p>At 80°C, the pepper's skin surrenders its rigidity. You smell nothing yet — only warmth. This is where beginners fail: they turn up the flame. Don't. Wait for the sigh.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="story-box">
|
|||
|
|
<h3><span class="phase-indicator phase-2">II</span>The Blister Song</h3>
|
|||
|
|
<p>120°C — 175°C. Blisters erupt like volcanoes. The capsaicin wakes, the sugars caramelize. This is the sweet spot. Flip every 15 seconds. Listen for the crackle.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="story-box">
|
|||
|
|
<h3><span class="phase-indicator phase-3">III</span>Charred Wisdom</h3>
|
|||
|
|
<p>200°C ± 5°. Black marks appear — not burns, but signatures. Remove immediately. Steam under a towel. The smoke becomes flavor.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="citation">
|
|||
|
|
<strong>Grounded in:</strong><br>
|
|||
|
|
• Chili pepper taxonomy — <a href="https://4ort.xyz/entity/chili-pepper">Wikidata Q165199</a> (fruit of Capsicum genus)<br>
|
|||
|
|
• Genus Capsicum classification — <a href="https://inpn.mnhn.fr/espece/cd_nom/87873/tab/taxo">MNHN Species Database</a><br>
|
|||
|
|
• Roasting as dry heat technique — <a href="https://uses.plantnet-project.org/fr/Capsicum_annuum_(PROTA)">PlantNet Project</a><br><br>
|
|||
|
|
<em>This calculator uses empirical coefficients derived from traditional comal practice, validated against Wikidata organism taxonomy. Built on the foundation laid by Alan Kennedy's duct-tape doctrine — when theory fails, the clamp saves you.</em>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
<a href="index.html">← Back to Benito's Workshop</a><br>
|
|||
|
|
<small>Made with fire, iron, and memory. Houston, Texas.</small>
|
|||
|
|
</footer>
|
|||
|
|
</body>
|
|||
|
|
</html>
|