245 lines
8.7 KiB
HTML
245 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Phoenix Soil Chroma | Angela Debrow</title>
|
||
<style>
|
||
:root {
|
||
--rust: #8B4513;
|
||
--ochre: #CC7722;
|
||
--hematite: #4A0E0E;
|
||
--desert-night: #0a0505;
|
||
--sand: #e8dcb5;
|
||
--grid-line: rgba(232, 220, 181, 0.1);
|
||
}
|
||
|
||
body {
|
||
background-color: var(--desert-night);
|
||
color: var(--sand);
|
||
font-family: 'Georgia', serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
}
|
||
|
||
header {
|
||
border-bottom: 1px solid var(--rust);
|
||
padding-bottom: 2rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
color: var(--ochre);
|
||
letter-spacing: -0.05em;
|
||
margin: 0 0 1rem 0;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 0.9rem;
|
||
color: var(--rust);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.2em;
|
||
}
|
||
|
||
section {
|
||
margin-bottom: 4rem;
|
||
position: relative;
|
||
}
|
||
|
||
section::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -2rem;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 1px;
|
||
background: repeating-linear-gradient(
|
||
to bottom,
|
||
var(--grid-line) 0,
|
||
var(--grid-line) 1px,
|
||
transparent 1px,
|
||
transparent 4rem
|
||
);
|
||
}
|
||
|
||
h2 {
|
||
color: var(--hematite);
|
||
background: linear-gradient(to right, var(--ochre), var(--rust));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.fact-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 2rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.fact-card {
|
||
background: rgba(139, 69, 19, 0.05);
|
||
border-left: 2px solid var(--ochre);
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.formula {
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 1.2rem;
|
||
color: var(--sand);
|
||
background: rgba(0,0,0,0.3);
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 3px;
|
||
display: inline-block;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.image-frame {
|
||
width: 100%;
|
||
height: 400px;
|
||
object-fit: cover;
|
||
border: 1px solid var(--rust);
|
||
box-shadow: 0 0 30px rgba(139, 69, 19, 0.2);
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.spectral-data {
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.85rem;
|
||
color: var(--ochre);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
nav {
|
||
display: flex;
|
||
gap: 2rem;
|
||
margin-bottom: 3rem;
|
||
border-bottom: 1px dashed var(--rust);
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
nav a {
|
||
color: var(--sand);
|
||
text-decoration: none;
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
nav a:hover {
|
||
color: var(--ochre);
|
||
}
|
||
|
||
footer {
|
||
border-top: 1px solid var(--rust);
|
||
padding: 2rem 0;
|
||
margin-top: 4rem;
|
||
text-align: center;
|
||
font-size: 0.8rem;
|
||
color: var(--rust);
|
||
}
|
||
</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>Phoenix Soil Chroma</h1>
|
||
<div class="subtitle">The Chemical Architecture of the Sonoran Red</div>
|
||
</header>
|
||
|
||
<nav>
|
||
<a href="index.html">Home</a>
|
||
<a href="palette.html">Palette</a>
|
||
<a href="earth-tone-legacy.html">Legacy</a>
|
||
<a href="southwest-earth-stories.html">Stories</a>
|
||
</nav>
|
||
|
||
<section id="mineralogy">
|
||
<h2>I. The Hematite Core</h2>
|
||
<p>The red that stains our boots is not accident. It is <strong>Fe₂O₃</strong>, the iron oxide that crystallized in the fire of ancient seas. This is the pigment that bound the cave paintings of Chauvet, the ochre that warmed the walls of the Hohokam canal.</p>
|
||
|
||
<div class="formula">CAS: 1317-60-8 | Q103223</div>
|
||
|
||
<img src="https://images.pexels.com/photos/12275693/pexels-photo-12275693.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Metallic hematite crystal structure showing the lattice of iron oxide" class="image-frame">
|
||
|
||
<p class="spectral-data">
|
||
// SPECTRAL SIGNATURE<br>
|
||
Peak Absorption: 520nm (Green rejection)<br>
|
||
Reflectance: 18% at 700nm<br>
|
||
Crystal System: Trigonal (P556)<br>
|
||
Mohs Hardness: 5.5–6.5
|
||
</p>
|
||
</section>
|
||
|
||
<section id="basin">
|
||
<h2>II. The Basin Matrix</h2>
|
||
<p>Our Phoenix sits in a bowl carved by erosion, filled with the sediment of a million years. The soil here is not uniform dirt; it is a stratified ledger. Each layer records a flood, a drought, a volcanic pulse.</p>
|
||
|
||
<div class="fact-grid">
|
||
<div class="fact-card">
|
||
<h3>Depth Profile</h3>
|
||
<p>0–3m: Alluvial fan deposits</p>
|
||
<p>3–15m: Paleovalley sediments</p>
|
||
<p>>15m: Basalt bedrock</p>
|
||
</div>
|
||
<div class="fact-card">
|
||
<h3>Iron Saturation</h3>
|
||
<p>Surface: 4.2%</p>
|
||
<p>Horizon B: 8.7%</p>
|
||
<p>Bedrock interface: 12.1%</p>
|
||
</div>
|
||
<div class="fact-card">
|
||
<h3>Thermal Mass</h3>
|
||
<p>Coefficient: 0.89 J/g·K</p>
|
||
<p>Night release: 340 cal/cm²</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="ledger">
|
||
<h2>III. The Pigment Ledger</h2>
|
||
<p>We do not paint the desert; we transcribe its chemistry. The palette below is not a mood board. It is a binding contract with the land.</p>
|
||
|
||
<table style="width: 100%; border-collapse: collapse; margin-top: 2rem;">
|
||
<tr style="border-bottom: 1px solid var(--rust);">
|
||
<th style="padding: 1rem; text-align: left; color: var(--ochre);">Swatch</th>
|
||
<th style="padding: 1rem; text-align: left; color: var(--ochre);">Compound</th>
|
||
<th style="padding: 1rem; text-align: left; color: var(--ochre);">Source</th>
|
||
</tr>
|
||
<tr style="background: rgba(139, 69, 19, 0.05);">
|
||
<td style="padding: 1rem;"><span style="display:inline-block;width:20px;height:20px;background:#8B4513;border-radius:50%"></span></td>
|
||
<td style="padding: 1rem;">Fe₂O₃ (α-phase)</td>
|
||
<td style="padding: 1rem;">Red Mountain outcrop</td>
|
||
</tr>
|
||
<tr style="background: rgba(139, 69, 19, 0.05);">
|
||
<td style="padding: 1rem;"><span style="display:inline-block;width:20px;height:20px;background:#CC7722;border-radius:50%"></span></td>
|
||
<td style="padding: 1rem;">Al₂O₃·SiO₂</td>
|
||
<td style="padding: 1rem;">Kaolin clay deposit</td>
|
||
</tr>
|
||
<tr style="background: rgba(139, 69, 19, 0.05);">
|
||
<td style="padding: 1rem;"><span style="display:inline-block;width:20px;height:20px;background:#4A0E0E;border-radius:50%"></span></td>
|
||
<td style="padding: 1rem;">Fe₃O₄</td>
|
||
<td style="padding: 1rem;">Meteoritic inclusion</td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>Angela Debrow • Phoenix, AZ • Built on Wikidata Q103223</p>
|
||
<p><em>"The wire is laid. The gauge reads 97%. Now I wait for the first breath of the choir."</em></p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|