bryanmubarak-joint/pass.html
2026-07-19 20:46:46 +00:00

163 lines
6.3 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 Pass | Service Flow</title>
<meta property="og:type" content="website">
<meta property="og:title" content="The Pass | Service Flow">
<meta property="og:description" content="The pass is not a counter. It is the event horizon where heat, time, and intent collide. Here, the kitchen">
<meta property="og:image" content="https://images.pexels.com/photos/4846391/pexels-photo-4846391.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">
<meta property="og:url" content="https://bryan-mubarak.4ort.net/pass.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="The pass is not a counter. It is the event horizon where heat, time, and intent collide. Here, the kitchen's chaos is filtered into the dining room's…">
<style>
:root {
--bg: #0a0a0a;
--fg: #e0e0e0;
--accent: #ff3333;
--panel: #111;
--font-main: 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Courier New', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--bg);
color: var(--fg);
font-family: var(--font-main);
line-height: 1.6;
}
nav {
padding: 2rem;
border-bottom: 1px solid var(--accent);
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
color: var(--accent);
text-decoration: none;
font-family: var(--font-mono);
font-weight: bold;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 4rem 2rem;
}
h1 {
font-size: 4rem;
text-transform: uppercase;
margin-bottom: 2rem;
line-height: 0.9;
}
.section {
margin-bottom: 6rem;
border-left: 2px solid var(--accent);
padding-left: 2rem;
}
h2 {
font-size: 2rem;
color: var(--accent);
margin-bottom: 1rem;
font-family: var(--font-mono);
}
p {
font-size: 1.2rem;
margin-bottom: 1.5rem;
max-width: 700px;
}
.spec-panel {
background: var(--panel);
border: 1px solid #333;
padding: 2rem;
margin: 2rem 0;
font-family: var(--font-mono);
font-size: 0.9rem;
}
.spec-row {
display: grid;
grid-template-columns: 1fr 2fr;
border-bottom: 1px dashed #333;
padding: 0.5rem 0;
}
.spec-label { color: #666; }
.spec-val { color: var(--accent); font-weight: bold; }
img {
width: 100%;
height: 400px;
object-fit: cover;
margin: 3rem 0;
filter: grayscale(100%) sepia(20%);
}
.back-link {
display: inline-block;
margin-top: 4rem;
padding: 1rem 2rem;
border: 1px solid var(--accent);
color: var(--accent);
text-decoration: none;
font-family: var(--font-mono);
}
.back-link:hover { background: var(--accent); color: #000; }
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<nav>
<a href="/">← SERVICE FLOW</a>
<span style="font-family:'Courier New'; color:#666;">NODE 03</span>
</nav>
<div class="container">
<h1>The Pass</h1>
<div class="section">
<h2>// Critical Junction</h2>
<p>
The pass is not a counter. It is the event horizon where heat, time, and intent collide.
Here, the kitchen's chaos is filtered into the dining room's silence.
One degree of error in temperature, one second of delay in timing, and the illusion shatters.
</p>
<p>
Arthur Danto argued that the artworld confers status upon an object.
At the pass, the Expeditor confers status upon the plate.
Until they speak "Fire," the food is merely matter. After they speak "Ready," it is a gift.
</p>
</div>
<img src="https://images.pexels.com/photos/4846391/pexels-photo-4846391.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Octopus on marble tray">
<div class="section">
<h2>// Thermodynamics</h2>
<p>
The window between the grill and the guest is finite.
We measure it in joules lost to the air.
The pass is designed to minimize that loss.
</p>
<div class="spec-panel">
<div class="spec-row"><span class="spec-label">Heat Retention Window</span><span class="spec-val">180 seconds</span></div>
<div class="spec-row"><span class="spec-label">Plate Pre-heat Temp</span><span class="spec-val">85°C ± 2°C</span></div>
<div class="spec-row"><span class="spec-label">Sauce Viscosity Target</span><span class="spec-val">1200 cP</span></div>
<div class="spec-row"><span class="spec-label">Expedition Latency</span><span class="spec-val">&lt; 200ms</span></div>
</div>
</div>
<div class="section">
<h2>// The Rule of Three</h2>
<p>
No ticket leaves the rail until three conditions are met:
</p>
<ul style="list-style: none; margin-top: 1rem; font-family: var(--font-mono);">
<li style="margin-bottom: 1rem;"><strong>[1]</strong> Visual symmetry (garnish axis aligned)</li>
<li style="margin-bottom: 1rem;"><strong>[2]</strong> Thermal integrity (steam rising, not escaping)</li>
<li style="margin-bottom: 1rem;"><strong>[3]</strong> Narrative coherence (this plate tells the story the menu promised)</li>
</ul>
</div>
<a href="/" class="back-link">RETURN TO INDEX</a>
</div>
</body>
</html>