40 lines
2.2 KiB
HTML
40 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>The Golden Seam | Bryan Mubarak</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="The Golden Seam | Bryan Mubarak">
|
||
|
|
<meta property="og:description" content="My first table: South End. Kitchen on fire. Wine list wrong.">
|
||
|
|
<meta property="og:url" content="https://bryan-mubarak.4ort.net/golden-seam.html">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="description" content="My first table: South End. Kitchen on fire. Wine list wrong.">
|
||
|
|
<style>
|
||
|
|
:root { --void: #000000; --obsidian: #0a0a0a; --vein: #ffcc00; --ash: #333333; }
|
||
|
|
body { background: var(--void); color: var(--vein); font-family: 'Courier Prime', monospace; margin: 0; padding: 2rem; overflow-x: hidden; }
|
||
|
|
.seam { border-left: 4px solid var(--vein); padding-left: 2rem; margin: 4rem 0; transform: skewY(-1deg); }
|
||
|
|
h1 { letter-spacing: -0.1em; text-transform: uppercase; white-space: nowrap; position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); width: max-content; text-align: center; }
|
||
|
|
.fracture { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: baseline; }
|
||
|
|
.slip { height: 60vh; border: 1px solid var(--ash); background: radial-gradient(circle at 50% 50%, var(--vein), transparent); opacity: 0.05; backdrop-filter: blur(1px); }
|
||
|
|
p { line-height: 1.6; text-shadow: 0 0 10px var(--vein); }
|
||
|
|
.cite { font-size: 0.6em; opacity: 0.7; margin-top: -1rem; }
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>THE GOLDEN SEAM</h1>
|
||
|
|
<div class="seam">
|
||
|
|
<p>I did not sweep the shavings.</p>
|
||
|
|
<p class="cite">— The First Slip, 1996</p>
|
||
|
|
<div class="fracture">
|
||
|
|
<div class="slip"></div>
|
||
|
|
<div>
|
||
|
|
<p>My first table: South End. Kitchen on fire. Wine list wrong.</p>
|
||
|
|
<p>The fault in the silverware was not a defect; it was the axis upon which the universe pivoted.</p>
|
||
|
|
<p>We do not hide the error. We weld it.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
</file_content>
|