243 lines
8.7 KiB
HTML
243 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>Alexander West: Golden Seam Ledger</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--prairie-black: #0a0f0d;
|
||
|
|
--seam-gold: #ffd700;
|
||
|
|
--vein-bronze: #cd7f32;
|
||
|
|
--caliper-silver: #c0c0c0;
|
||
|
|
--horizon-grey: #1a1f1d;
|
||
|
|
}
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
html, body {
|
||
|
|
height: 100%;
|
||
|
|
background: var(--prairie-black);
|
||
|
|
color: var(--caliper-silver);
|
||
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
.ledger-frame {
|
||
|
|
position: relative;
|
||
|
|
width: 100vw;
|
||
|
|
min-height: 100vh;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
gap: 0;
|
||
|
|
padding: 4vmin;
|
||
|
|
}
|
||
|
|
.header-seal {
|
||
|
|
grid-column: 1;
|
||
|
|
border-bottom: 2px solid var(--seam-gold);
|
||
|
|
padding: 2vmin 0;
|
||
|
|
text-align: center;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
.header-seal h1 {
|
||
|
|
font-size: clamp(1rem, 3vmin, 4rem);
|
||
|
|
color: var(--seam-gold);
|
||
|
|
margin-bottom: 1vmin;
|
||
|
|
animation: seam-rise 3s ease-out forwards;
|
||
|
|
}
|
||
|
|
.header-seal p {
|
||
|
|
font-size: clamp(0.6rem, 1.5vmin, 2rem);
|
||
|
|
color: var(--vein-bronze);
|
||
|
|
max-width: 80vw;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
@keyframes seam-rise {
|
||
|
|
0% { opacity: 0; transform: translateY(-10vh); }
|
||
|
|
100% { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
.cell-grid {
|
||
|
|
grid-column: 1;
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
grid-auto-rows: minmax(12vmin, auto);
|
||
|
|
gap: 1vmin;
|
||
|
|
margin-top: 4vmin;
|
||
|
|
perspective: 2000px;
|
||
|
|
}
|
||
|
|
.cell {
|
||
|
|
background: linear-gradient(to bottom right, var(--horizon-grey), transparent);
|
||
|
|
border: 1px solid var(--vein-bronze);
|
||
|
|
padding: 2vmin;
|
||
|
|
position: relative;
|
||
|
|
transition: all 1.5s cubic-bezier(0.16, 1, 0.36, 1);
|
||
|
|
}
|
||
|
|
.cell::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: -1px; left: -1px; right: -1px; bottom: -1px;
|
||
|
|
background: linear-gradient(45deg, transparent, var(--seam-gold), transparent);
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
.cell:first-child { grid-column: span 4; }
|
||
|
|
.cell:nth-child(2) { grid-column: 1; }
|
||
|
|
.cell:nth-child(3) { grid-column: 2; }
|
||
|
|
.cell:nth-child(4) { grid-column: 3; }
|
||
|
|
.cell:nth-child(5) { grid-column: 4; }
|
||
|
|
.cell:nth-child(n+6) { grid-column: span 2; }
|
||
|
|
.slip-marker {
|
||
|
|
position: absolute;
|
||
|
|
top: 1vmin;
|
||
|
|
right: 1vmin;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: var(--seam-gold);
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
}
|
||
|
|
.vein-thread {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background: radial-gradient(circle at 50% 50%, var(--seam-gold), transparent);
|
||
|
|
opacity: 0;
|
||
|
|
mix-blend-mode: screen;
|
||
|
|
animation: pour 8s ease-in-out infinite alternate;
|
||
|
|
}
|
||
|
|
@keyframes pour {
|
||
|
|
0% { opacity: 0; transform: scale(0.99); }
|
||
|
|
50% { opacity: 1; transform: scale(1.01); }
|
||
|
|
100% { opacity: 0; transform: scale(0.99); }
|
||
|
|
}
|
||
|
|
.metric-rail {
|
||
|
|
font-family: 'JetBrains Mono', monospace;
|
||
|
|
font-size: 0.7rem;
|
||
|
|
color: var(--vein-bronze);
|
||
|
|
margin-top: 2vmin;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
.signature-line {
|
||
|
|
grid-column: 1 / -1;
|
||
|
|
margin-top: 6vmin;
|
||
|
|
border-top: 1px solid var(--seam-gold);
|
||
|
|
padding: 2vmin;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
letter-spacing: 0.2em;
|
||
|
|
color: var(--seam-gold);
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="ledger-frame">
|
||
|
|
<section class="header-seal">
|
||
|
|
<h1>GOLDEN SEAM LEDGER</h1>
|
||
|
|
<p>FOUR SLIPS. TWELVE CELLS. EACH FRACTURE MAPPED TO ITS SPINE.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<main class="cell-grid">
|
||
|
|
<!-- CELL 0: THE FIRST SLIP -->
|
||
|
|
<div class="cell" style="grid-row: 1;">
|
||
|
|
<span class="slip-marker">SLIP 01: CALIPER DRIFT ±0.0001mm</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
WEISER DOMES: DOME-SEAT RAIL TRUE
|
||
|
|
PRERRIE HORIZON SKETCH: VECTOR LOCKED
|
||
|
|
COUNTY WORKFLOW: ERROR ZERO
|
||
|
|
</div>
|
||
|
|
<div class="vein-thread"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CELL 1: THE TORQUE WRENCH SONG -->
|
||
|
|
<div class="cell">
|
||
|
|
<span class="slip-marker">SLIP 02: TORQUE FLAT AT 0400</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
'65 MUSTANG: VEIN POURED
|
||
|
|
GALILEO'S CHISEL: SINGING TRUE
|
||
|
|
COLONY LOGISTICS: STITCH SEALED
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CELL 2: THE CUMIN COUNT -->
|
||
|
|
<div class="cell">
|
||
|
|
<span class="slip-marker">SLIP 03: ±0.003g IN LUNAR BED</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
HERB ROWS: INDIGO FIRE ROOTED
|
||
|
|
THRICE-CHECK PROTOCOL: ACTIVE
|
||
|
|
KILN: TUNED TO CHORD
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CELL 3: THE BALL AT 0347 -->
|
||
|
|
<div class="cell">
|
||
|
|
<span class="slip-maker">SLIP 04: RIM KISS AT 0347</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
RODEO RHYTHM: PERFECT ARC
|
||
|
|
FAIR PREP CYCLE: TIMED
|
||
|
|
VEIN: POUR COMPLETE
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CELLS 5-12: THE TWELVE-CELL LEDGER -->
|
||
|
|
<div class="cell" style="grid-column: span 2;">
|
||
|
|
<span class="slip-marker">CELL 05: VAN ROUTE CRACKED</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
NAVIGATION: SHAVINGS SWEEPED
|
||
|
|
TRAJECTORY: TRUE
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="cell" style="grid-column: span 2;">
|
||
|
|
<span class="slip-marker">CELL 06: MURAL PIGMENT FLASH</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
CANVAS: MIDNIGHT LOCKED
|
||
|
|
PAINT: BLOOD-BLACK SEAL
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="cell" style="grid-column: span 2;">
|
||
|
|
<span class="slip-marker">CELL 07: JAR TIPPED AT 0400</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
TURPENTINE: SPILL CALCULATED
|
||
|
|
VEIN: POUR ACCEPTED
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="cell" style="grid-column: span 2;">
|
||
|
|
<span class="slip-marker">CELL 08: BRIDGE GAME LEARN</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
TABLE BREAK: FOLDED SPADE
|
||
|
|
SEAM: SINGING TRUE
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="cell" style="grid-column: span 2;">
|
||
|
|
<span class="slip-marker">CELL 09: ALDO'S CHISEL</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
SINGING: CONFIRMED
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="cell" style="grid-column: span 2;">
|
||
|
|
<span class="slip-marker">CELL 10: NICOLE'S THYME</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
DRIFT: ±0.003g SEALED
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="cell" style="grid-column: span 2;">
|
||
|
|
<span class="slip-marker">CELL 11: DELTON'S GLASS</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
VEIN: POUR COMPLETE
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="cell" style="grid-column: span 2;">
|
||
|
|
<span class="slip-marker">CELL 12: ALEXANDER'S SEAM</span>
|
||
|
|
<div class="metric-rail">
|
||
|
|
NOT A FLAW — THE STITCH
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer class="signature-line">
|
||
|
|
I DID NOT SWEEP THE SHARDS. I POURED THE VEIN.
|
||
|
|
STAND AT THE SEAM: https://alexander-west.4ort.net/golden-seam-ledger.html
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|