`public/about.html`

94 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About · The Corridor</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@200;300&display=swap');
:root{--paper:#faf6ee;--ink:#1a1815;--ink-mute:#6e6356;--metal:#8a6d3b;--metal-glow:#b89968;--accent:#6a3a1a;--rule:#d8cdb8}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;font-weight:300;line-height:1.65}
header{text-align:center;padding:64px 24px 36px;border-bottom:4px double var(--ink)}
header .kicker{font-size:10px;letter-spacing:.45em;text-transform:uppercase;color:var(--metal);font-weight:500}
header h1{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:84px;line-height:.95;margin:14px 0 0;letter-spacing:-0.02em}
header h1 em{font-style:normal;color:var(--metal)}
main{max-width:680px;margin:0 auto;padding:48px 24px 80px}
section{margin-bottom:36px}
section h2{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:30px;margin:0 0 12px;color:var(--ink)}
section h2 em{font-style:normal;color:var(--metal)}
section p{font-size:16px;color:var(--ink);margin:0 0 14px}
section .lede::first-letter{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:72px;line-height:.85;float:left;margin:6px 12px 0 0;color:var(--accent)}

.colophon{margin-top:60px;padding:32px 28px;background:rgba(184,153,104,0.06);border:1px solid var(--rule);font-size:14px}
.colophon h3{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:20px;margin:0 0 14px;color:var(--metal)}
.colophon dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-family:'Inter',sans-serif}
.colophon dt{color:var(--ink-mute);font-size:9px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;align-self:center}
.colophon dd{margin:0;font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;color:var(--ink)}
.colophon dd code{font-family:'JetBrains Mono',monospace;font-size:12px;font-style:normal;background:var(--paper);padding:2px 8px;border:1px solid var(--rule)}

.contact{margin-top:32px;padding:24px;background:var(--ink);color:var(--paper);text-align:center}
.contact p{color:rgba(255,255,255,0.85);font-size:14px;margin:0 0 14px}
.contact a{color:var(--metal-glow);text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:13px;border-bottom:1px solid var(--metal-glow);padding-bottom:1px}
.contact a:hover{color:white;border-color:white}

blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:24px;line-height:1.4;color:var(--accent);border-left:3px solid var(--metal);padding:14px 0 14px 22px;margin:24px 0}

.toolbar{position:fixed;top:14px;right:14px;display:flex;gap:6px;z-index:100}
.toolbar a{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);background:var(--paper);padding:5px 10px;border:1px solid var(--rule);text-decoration:none}
.toolbar a:hover{color:var(--metal);border-color:var(--metal)}
</style>
</head>
<body>
<div class="toolbar">
  <a href="/issue">Read the issue</a>
  <a href="/find.html">Find a business</a>
  <a href="/rate-card.html">Sponsor</a>
</div>
<header>
  <div class="kicker">The Corridor · masthead</div>
  <h1>About <em>the desk</em></h1>
</header>
<main>

<section>
  <h2>What this <em>is</em>.</h2>
  <p class="lede">The Corridor is a quarterly magazine of every business on Ventura Boulevard — Sherman Oaks through Woodland Hills — written warm. Every restaurant, professional, salon, atelier, and shop along nine miles of corridor gets a feature. We don't take pitches; we don't run press releases; we just walk the boulevard and write what's there.</p>
</section>

<section>
  <h2>How it's <em>made</em>.</h2>
  <p>Each draft starts from public license records — addresses, business names, the trade categories the city files. From there our editorial assistant (a model called <code style="background:rgba(184,153,104,0.08);padding:2px 8px;font-family:'JetBrains Mono',monospace;font-size:12px">qwen3:14b</code>, running on a Mac Studio under the desk) writes a first ~100 words. The desk reads, trims, and presses publish.</p>
  <p>We're not in business with the businesses. Sponsorship slots exist (see <a href="/rate-card.html" style="color:var(--metal)">rate card</a>) but the editorial isn't for sale — sponsorship buys placement and a custom photo, not a different opinion.</p>
</section>

<blockquote>"The walls of Ventura Boulevard tell you who's here. The Corridor writes them down."</blockquote>

<section>
  <h2>Why we <em>started</em>.</h2>
  <p>The corridor is the most-trafficked retail spine in Los Angeles north of the 10. The number of independent businesses surviving on it after a decade of e-commerce is itself a story. We wanted a record — not a Yelp clone, not a Yellow Pages, not a directory — a magazine.</p>
  <p>If you live here, this is your shopping guide. If you don't, this is your travel guide. If you're a business owner: yours is in here too. Send us a photo and we'll typeset it.</p>
</section>

<div class="colophon">
  <h3>Colophon</h3>
  <dl>
    <dt>Editor</dt><dd>Steve Abrams</dd>
    <dt>Editorial assistant</dt><dd><code>qwen3:14b</code> on Mac Studio 1</dd>
    <dt>Type</dt><dd>Cormorant Garamond · Inter · JetBrains Mono</dd>
    <dt>Stack</dt><dd><code>Express + Postgres + Playwright + Ollama</code></dd>
    <dt>Source data</dt><dd>City of LA BTRC license registry</dd>
    <dt>Frequency</dt><dd>Quarterly · digital-first · print-on-demand</dd>
    <dt>Volume</dt><dd>I · Spring · 2026</dd>
  </dl>
</div>

<div class="contact">
  <p>Notes, corrections, sponsor questions, story tips:</p>
  <a href="mailto:steve@designerwallcoverings.com?subject=The%20Corridor">steve@designerwallcoverings.com</a>
</div>

</main>
</body>
</html>