← back to Hormuzy
mockups/index.html
1025 lines
<!doctype html>
<html><head><meta charset="utf-8"><title>Hormuz · 100 Mockup Variants</title>
<style>
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#0b0f1a;color:#f0f0f5;font:13px/1.4 system-ui,-apple-system,sans-serif;padding:24px}
h1{font-weight:600;font-size:22px;margin:0 0 6px}
.sub{color:#9aa0b5;font-size:12px;margin-bottom:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px}
.card{background:#10b9810f;border:1px solid #1f2533;border-radius:6px;overflow:hidden;color:inherit;text-decoration:none;display:flex;flex-direction:column}
.card:hover{border-color:#10b981}
.thumb{aspect-ratio:1440/900;background:#000;overflow:hidden;position:relative}
.thumb iframe{position:absolute;top:0;left:0;width:1440px;height:900px;transform:scale(0.25);transform-origin:0 0;border:0;pointer-events:none}
.meta{padding:10px 12px}
.row1{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}
.ix{color:#f59e0b;font-family:ui-monospace,monospace;font-size:11px}
.slug{font-weight:600;font-size:13px}
.mood{color:#9aa0b5;font-size:11px;margin-bottom:6px}
.sw{display:flex;gap:0;margin-bottom:6px;height:14px;border-radius:2px;overflow:hidden;width:fit-content}
.sw span{width:22px;height:14px}
.type{color:#7dffe9;font-size:10px;margin-bottom:2px}
.voice{color:#9aa0b5;font-size:10px;font-style:italic}
</style></head><body>
<h1>Hormuz · 100 Mockup Variants</h1>
<div class="sub">Four Horsemen Studio orchestrator — 100 distinct aesthetic directions. Anchors 1-4 hand-built; 5-100 generated via local Ollama gemma3:12b on MS1.</div>
<div class="grid"><a class="card" href="001-operations-room.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="001-operations-room.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">001</span><span class="slug">operations-room</span></div>
<div class="mood">operations-room</div>
<div class="sw"><span style="background:#0b0f1a"></span><span style="background:#10b981"></span><span style="background:#f59e0b"></span><span style="background:#9aa0b5"></span><span style="background:#f0f0f5"></span></div>
<div class="type">IBM Plex Mono + IBM Plex Sans</div>
<div class="voice">command-center, terse, kebab-case</div>
</div>
</a>
<a class="card" href="002-museum-archive.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="002-museum-archive.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">002</span><span class="slug">museum-archive</span></div>
<div class="mood">museum-archive</div>
<div class="sw"><span style="background:#f4ecdb"></span><span style="background:#1a1410"></span><span style="background:#7b1f1a"></span><span style="background:#9c8c72"></span><span style="background:#ffffff"></span></div>
<div class="type">Cormorant Garamond + Inter</div>
<div class="voice">editorial, archival, hushed</div>
</div>
</a>
<a class="card" href="003-brutalist-spreadsheet.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="003-brutalist-spreadsheet.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">003</span><span class="slug">brutalist-spreadsheet</span></div>
<div class="mood">brutalist-spreadsheet</div>
<div class="sw"><span style="background:#ffffff"></span><span style="background:#000000"></span><span style="background:#ff3b30"></span><span style="background:#cccccc"></span><span style="background:#666666"></span></div>
<div class="type">Inter + JetBrains Mono</div>
<div class="voice">all-caps headers, raw cells, no chrome</div>
</div>
</a>
<a class="card" href="004-arcade-crt.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="004-arcade-crt.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">004</span><span class="slug">arcade-crt</span></div>
<div class="mood">arcade-crt</div>
<div class="sw"><span style="background:#000000"></span><span style="background:#39ff14"></span><span style="background:#ff00ff"></span><span style="background:#00ffff"></span><span style="background:#1a1a1a"></span></div>
<div class="type">VT323 + Press Start 2P</div>
<div class="voice">8-bit, scanline, GAME ON energy</div>
</div>
</a>
<a class="card" href="005-weather-radar.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="005-weather-radar.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">005</span><span class="slug">weather-radar</span></div>
<div class="mood">weather-radar</div>
<div class="sw"><span style="background:#0a1428"></span><span style="background:#7dffe9"></span><span style="background:#ffd166"></span><span style="background:#ef4f4f"></span><span style="background:#06080d"></span></div>
<div class="type">Roboto Condensed + Roboto Mono</div>
<div class="voice">meteorology brief, data over decoration</div>
</div>
</a>
<a class="card" href="006-aviation-dashboard.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="006-aviation-dashboard.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">006</span><span class="slug">aviation-dashboard</span></div>
<div class="mood">aviation-dashboard</div>
<div class="sw"><span style="background:#0d1117"></span><span style="background:#a5d8ff"></span><span style="background:#ffd43b"></span><span style="background:#fa5252"></span><span style="background:#212529"></span></div>
<div class="type">Barlow Condensed + Space Mono</div>
<div class="voice">ATC clipped, altitude/heading/status</div>
</div>
</a>
<a class="card" href="007-library-catalog.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="007-library-catalog.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">007</span><span class="slug">library-catalog</span></div>
<div class="mood">library-catalog</div>
<div class="sw"><span style="background:#f0e6d0"></span><span style="background:#1a1812"></span><span style="background:#5b3a1a"></span><span style="background:#888178"></span><span style="background:#fffaee"></span></div>
<div class="type">Crimson Pro + Inter</div>
<div class="voice">Dewey-decimal, card-catalog, polite</div>
</div>
</a>
<a class="card" href="008-control-tower.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="008-control-tower.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">008</span><span class="slug">control-tower</span></div>
<div class="mood">control-tower</div>
<div class="sw"><span style="background:#0b1d2a"></span><span style="background:#56ccf2"></span><span style="background:#f2c94c"></span><span style="background:#ff6b6b"></span><span style="background:#1c2c3a"></span></div>
<div class="type">Bebas Neue + Inter</div>
<div class="voice">tower-clearance, runway-active</div>
</div>
</a>
<a class="card" href="009-particle-physics.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="009-particle-physics.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">009</span><span class="slug">particle-physics</span></div>
<div class="mood">particle-physics-lab</div>
<div class="sw"><span style="background:#06070a"></span><span style="background:#7afcff"></span><span style="background:#fffd72"></span><span style="background:#bd6bff"></span><span style="background:#1a1c22"></span></div>
<div class="type">JetBrains Mono + Inter Tight</div>
<div class="voice">LaTeX-tinged, σ ∈ Σ, footnotes everywhere</div>
</div>
</a>
<a class="card" href="010-sci-fi-bridge.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="010-sci-fi-bridge.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">010</span><span class="slug">sci-fi-bridge</span></div>
<div class="mood">sci-fi-bridge</div>
<div class="sw"><span style="background:#0a0e1a"></span><span style="background:#ffba08"></span><span style="background:#3a86ff"></span><span style="background:#ff006e"></span><span style="background:#1d2333"></span></div>
<div class="type">Orbitron + Exo 2</div>
<div class="voice">make it so, bridge log, stardate</div>
</div>
</a>
<a class="card" href="011-film-cutting-room.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="011-film-cutting-room.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">011</span><span class="slug">film-cutting-room</span></div>
<div class="mood">film-cutting-room</div>
<div class="sw"><span style="background:#1a1612"></span><span style="background:#dba673"></span><span style="background:#5d4037"></span><span style="background:#e8e1d3"></span><span style="background:#3e2c1a"></span></div>
<div class="type">Spectral + Inter</div>
<div class="voice">edit-bay, frame counts, takes</div>
</div>
</a>
<a class="card" href="012-fabric-mill.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="012-fabric-mill.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">012</span><span class="slug">fabric-mill</span></div>
<div class="mood">fabric-mill-floor</div>
<div class="sw"><span style="background:#f3ebd9"></span><span style="background:#1f4d40"></span><span style="background:#c5a572"></span><span style="background:#c9292e"></span><span style="background:#2d2a26"></span></div>
<div class="type">Cormorant Garamond + Plus Jakarta Sans</div>
<div class="voice">Designer Wallcoverings native, woven tone</div>
</div>
</a>
<a class="card" href="013-orchard-record.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="013-orchard-record.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">013</span><span class="slug">orchard-record</span></div>
<div class="mood">orchard-record-book</div>
<div class="sw"><span style="background:#fbf6e9"></span><span style="background:#3a4a2c"></span><span style="background:#9b7a3e"></span><span style="background:#5e3023"></span><span style="background:#ffffff"></span></div>
<div class="type">Lora + Manrope</div>
<div class="voice">harvest log, varietal, by hand</div>
</div>
</a>
<a class="card" href="014-newspaper-front.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="014-newspaper-front.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">014</span><span class="slug">newspaper-front</span></div>
<div class="mood">newspaper-front-page</div>
<div class="sw"><span style="background:#fdfaf3"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#666666"></span><span style="background:#222222"></span></div>
<div class="type">Playfair Display + Source Serif</div>
<div class="voice">byline, dateline, lede</div>
</div>
</a>
<a class="card" href="015-subway-blueprint.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="015-subway-blueprint.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">015</span><span class="slug">subway-blueprint</span></div>
<div class="mood">subway-blueprint</div>
<div class="sw"><span style="background:#0e2a47"></span><span style="background:#a4c5e8"></span><span style="background:#fcd13e"></span><span style="background:#e84545"></span><span style="background:#142e4d"></span></div>
<div class="type">Helvetica Neue + Roboto Mono</div>
<div class="voice">MTA signage, stops and transfers</div>
</div>
</a>
<a class="card" href="016-nautical-chart.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="016-nautical-chart.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">016</span><span class="slug">nautical-chart</span></div>
<div class="mood">nautical-chart</div>
<div class="sw"><span style="background:#dcd0a8"></span><span style="background:#1c4966"></span><span style="background:#7fb069"></span><span style="background:#bf3922"></span><span style="background:#fff8e0"></span></div>
<div class="type">Crimson Pro + DM Mono</div>
<div class="voice">longitude/latitude, depths, fathoms</div>
</div>
</a>
<a class="card" href="017-weather-channel.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="017-weather-channel.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">017</span><span class="slug">weather-channel</span></div>
<div class="mood">tv-weather-channel</div>
<div class="sw"><span style="background:#0b1c2c"></span><span style="background:#ffea00"></span><span style="background:#00b4ff"></span><span style="background:#ff5722"></span><span style="background:#0e2335"></span></div>
<div class="type">Helvetica + Inter</div>
<div class="voice">next on the eights, doppler</div>
</div>
</a>
<a class="card" href="018-swiss-grid.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="018-swiss-grid.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">018</span><span class="slug">swiss-grid</span></div>
<div class="mood">swiss-international</div>
<div class="sw"><span style="background:#ffffff"></span><span style="background:#000000"></span><span style="background:#ff0000"></span><span style="background:#666666"></span><span style="background:#f5f5f5"></span></div>
<div class="type">Helvetica Neue + Helvetica</div>
<div class="voice">muller-brockmann, all numerals</div>
</div>
</a>
<a class="card" href="019-mid-century-print.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="019-mid-century-print.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">019</span><span class="slug">mid-century-print</span></div>
<div class="mood">mid-century-poster</div>
<div class="sw"><span style="background:#fcecc9"></span><span style="background:#173d56"></span><span style="background:#d97706"></span><span style="background:#b91c1c"></span><span style="background:#fff5e1"></span></div>
<div class="type">DM Serif Display + Open Sans</div>
<div class="voice">see america, golden gate, atomic</div>
</div>
</a>
<a class="card" href="020-japanese-railway.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="020-japanese-railway.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">020</span><span class="slug">japanese-railway</span></div>
<div class="mood">japanese-railway-poster</div>
<div class="sw"><span style="background:#fff8e7"></span><span style="background:#8b1538"></span><span style="background:#0a4d3c"></span><span style="background:#1a1a1a"></span><span style="background:#ddd5c2"></span></div>
<div class="type">Noto Serif JP + Inter</div>
<div class="voice">JR East, woodblock-influenced, vertical</div>
</div>
</a>
<a class="card" href="021-fortran-tty.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="021-fortran-tty.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">021</span><span class="slug">fortran-tty</span></div>
<div class="mood">fortran-mainframe-printout</div>
<div class="sw"><span style="background:#f6f1d8"></span><span style="background:#1a1a1a"></span><span style="background:#3a3a3a"></span><span style="background:#7a7a7a"></span><span style="background:#cccccc"></span></div>
<div class="type">IBM Plex Mono + Courier Prime</div>
<div class="voice">PUNCH CARD READY, JOB#0001</div>
</div>
</a>
<a class="card" href="022-phosphor-terminal.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="022-phosphor-terminal.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">022</span><span class="slug">phosphor-terminal</span></div>
<div class="mood">phosphor-terminal</div>
<div class="sw"><span style="background:#000000"></span><span style="background:#33ff33"></span><span style="background:#00aa00"></span><span style="background:#005f00"></span><span style="background:#0a0a0a"></span></div>
<div class="type">VT323 + JetBrains Mono</div>
<div class="voice">C:\>, no GUI, pure CLI</div>
</div>
</a>
<a class="card" href="023-amber-cathode.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="023-amber-cathode.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">023</span><span class="slug">amber-cathode</span></div>
<div class="mood">amber-cathode-monitor</div>
<div class="sw"><span style="background:#1a0e00"></span><span style="background:#ffb000"></span><span style="background:#cc8400"></span><span style="background:#664000"></span><span style="background:#000000"></span></div>
<div class="type">VT323 + Space Mono</div>
<div class="voice">DOS BBS, ANSI art, dialup</div>
</div>
</a>
<a class="card" href="024-datacenter-rack.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="024-datacenter-rack.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">024</span><span class="slug">datacenter-rack</span></div>
<div class="mood">datacenter-rack-LED</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#1de9b6"></span><span style="background:#ffd54f"></span><span style="background:#ef5350"></span><span style="background:#1a1a1a"></span></div>
<div class="type">Inter Tight + Roboto Mono</div>
<div class="voice">U-spaced, blinkenlights, amps</div>
</div>
</a>
<a class="card" href="025-polaroid-board.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="025-polaroid-board.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">025</span><span class="slug">polaroid-board</span></div>
<div class="mood">polaroid-cork-board</div>
<div class="sw"><span style="background:#f5e9d3"></span><span style="background:#1a1a1a"></span><span style="background:#c45a5a"></span><span style="background:#3d6b54"></span><span style="background:#ffffff"></span></div>
<div class="type">Caveat + Inter</div>
<div class="voice">pinned, hand-labeled, photo-real</div>
</div>
</a>
<a class="card" href="026-cassette-mixtape.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="026-cassette-mixtape.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">026</span><span class="slug">cassette-mixtape</span></div>
<div class="mood">cassette-mixtape</div>
<div class="sw"><span style="background:#1a0d2e"></span><span style="background:#ff61a6"></span><span style="background:#ffe066"></span><span style="background:#5fb7ff"></span><span style="background:#0d0617"></span></div>
<div class="type">Bungee + Open Sans</div>
<div class="voice">Side A, Side B, dub-master</div>
</div>
</a>
<a class="card" href="027-vinyl-liner-notes.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="027-vinyl-liner-notes.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">027</span><span class="slug">vinyl-liner-notes</span></div>
<div class="mood">vinyl-liner-notes</div>
<div class="sw"><span style="background:#0d0d0d"></span><span style="background:#fff8e7"></span><span style="background:#c4a747"></span><span style="background:#a83232"></span><span style="background:#1a1a1a"></span></div>
<div class="type">Spectral + Source Sans</div>
<div class="voice">Track 1: …, recorded at, produced by</div>
</div>
</a>
<a class="card" href="028-telegram-receipt.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="028-telegram-receipt.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">028</span><span class="slug">telegram-receipt</span></div>
<div class="mood">telegram-receipt</div>
<div class="sw"><span style="background:#fdf6e3"></span><span style="background:#1a1a1a"></span><span style="background:#586e75"></span><span style="background:#268bd2"></span><span style="background:#eee8d5"></span></div>
<div class="type">Special Elite + IBM Plex Mono</div>
<div class="voice">STOP. URGENT. STOP.</div>
</div>
</a>
<a class="card" href="029-ledger-tape.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="029-ledger-tape.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">029</span><span class="slug">ledger-tape</span></div>
<div class="mood">adding-machine-tape</div>
<div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#3a3a3a"></span><span style="background:#888888"></span><span style="background:#cccccc"></span></div>
<div class="type">Cutive Mono + IBM Plex Mono</div>
<div class="voice">carriage return, sub-total, paid</div>
</div>
</a>
<a class="card" href="030-darkroom-redlight.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="030-darkroom-redlight.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">030</span><span class="slug">darkroom-redlight</span></div>
<div class="mood">darkroom-red-light</div>
<div class="sw"><span style="background:#0a0303"></span><span style="background:#ff2a2a"></span><span style="background:#1a0808"></span><span style="background:#591212"></span><span style="background:#ffd1d1"></span></div>
<div class="type">Inter + JetBrains Mono</div>
<div class="voice">stop bath, fixer, do not open</div>
</div>
</a>
<a class="card" href="031-japanese-tofu-shop.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="031-japanese-tofu-shop.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">031</span><span class="slug">japanese-tofu-shop</span></div>
<div class="mood">japanese-tofu-shop-sign</div>
<div class="sw"><span style="background:#fffaf0"></span><span style="background:#1a1a1a"></span><span style="background:#3a4a2c"></span><span style="background:#a83232"></span><span style="background:#e8dcc4"></span></div>
<div class="type">Noto Serif JP + Noto Sans JP</div>
<div class="voice">made today, by hand, 豆腐</div>
</div>
</a>
<a class="card" href="032-wine-cellar-tag.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="032-wine-cellar-tag.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">032</span><span class="slug">wine-cellar-tag</span></div>
<div class="mood">wine-cellar-tag</div>
<div class="sw"><span style="background:#1a0a14"></span><span style="background:#d4af37"></span><span style="background:#722f37"></span><span style="background:#ddc6a8"></span><span style="background:#0a0408"></span></div>
<div class="type">Cormorant Garamond + Inter</div>
<div class="voice">vintage 2003, rack 14, north wall</div>
</div>
</a>
<a class="card" href="033-watchmaker-bench.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="033-watchmaker-bench.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">033</span><span class="slug">watchmaker-bench</span></div>
<div class="mood">watchmaker-bench</div>
<div class="sw"><span style="background:#1a1410"></span><span style="background:#d4b896"></span><span style="background:#7a5c3e"></span><span style="background:#f0e6d0"></span><span style="background:#0d0a08"></span></div>
<div class="type">Cormorant + Source Code</div>
<div class="voice">escapement, jewel-count, manual-wind</div>
</div>
</a>
<a class="card" href="034-blueprint-roll.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="034-blueprint-roll.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">034</span><span class="slug">blueprint-roll</span></div>
<div class="mood">architects-blueprint</div>
<div class="sw"><span style="background:#0e3a5f"></span><span style="background:#ffffff"></span><span style="background:#fcd13e"></span><span style="background:#a4c5e8"></span><span style="background:#1d4d7a"></span></div>
<div class="type">Architects Daughter + Inter</div>
<div class="voice">scale 1:50, rev. C, sheet 14 of 22</div>
</div>
</a>
<a class="card" href="035-fbi-case-file.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="035-fbi-case-file.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">035</span><span class="slug">fbi-case-file</span></div>
<div class="mood">fbi-case-file-redacted</div>
<div class="sw"><span style="background:#fbf3e0"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#666666"></span><span style="background:#000000"></span></div>
<div class="type">Special Elite + Source Sans</div>
<div class="voice">[REDACTED], CONFIDENTIAL, exhibit A</div>
</div>
</a>
<a class="card" href="036-noir-detective.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="036-noir-detective.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">036</span><span class="slug">noir-detective</span></div>
<div class="mood">noir-detective-board</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#dba673"></span><span style="background:#a83232"></span><span style="background:#3a3a3a"></span><span style="background:#fbf6e9"></span></div>
<div class="type">Spectral + Inter</div>
<div class="voice">she walked in, gat in pocket, last lead</div>
</div>
</a>
<a class="card" href="037-polish-poster-1960.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="037-polish-poster-1960.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">037</span><span class="slug">polish-poster-1960</span></div>
<div class="mood">polish-poster-school</div>
<div class="sw"><span style="background:#1a1a1a"></span><span style="background:#ff4081"></span><span style="background:#ffd700"></span><span style="background:#00bcd4"></span><span style="background:#fdfaf3"></span></div>
<div class="type">Bungee + Inter</div>
<div class="voice">torn collage, Cyrillic-adjacent, expressive</div>
</div>
</a>
<a class="card" href="038-memphis-milano.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="038-memphis-milano.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">038</span><span class="slug">memphis-milano</span></div>
<div class="mood">memphis-milano-1980s</div>
<div class="sw"><span style="background:#fff8e1"></span><span style="background:#000000"></span><span style="background:#ff80ab"></span><span style="background:#42a5f5"></span><span style="background:#fdd835"></span></div>
<div class="type">Bungee + Inter</div>
<div class="voice">ettore sottsass, squiggles, terrazzo</div>
</div>
</a>
<a class="card" href="039-vaporwave-grid.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="039-vaporwave-grid.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">039</span><span class="slug">vaporwave-grid</span></div>
<div class="mood">vaporwave-aesthetic</div>
<div class="sw"><span style="background:#1a0033"></span><span style="background:#ff2a78"></span><span style="background:#7fffd4"></span><span style="background:#ffe066"></span><span style="background:#0d0019"></span></div>
<div class="type">Press Start 2P + Inter</div>
<div class="voice">AESTHETIC, full-width, neo-90s</div>
</div>
</a>
<a class="card" href="040-y2k-chrome.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="040-y2k-chrome.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">040</span><span class="slug">y2k-chrome</span></div>
<div class="mood">y2k-chrome-bubble</div>
<div class="sw"><span style="background:#e0e7ff"></span><span style="background:#7c3aed"></span><span style="background:#06b6d4"></span><span style="background:#fde047"></span><span style="background:#1e1b4b"></span></div>
<div class="type">Bungee + Inter</div>
<div class="voice">millennium-edition, glossy, AIM-era</div>
</div>
</a>
<a class="card" href="041-flemish-still-life.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="041-flemish-still-life.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">041</span><span class="slug">flemish-still-life</span></div>
<div class="mood">flemish-still-life</div>
<div class="sw"><span style="background:#1a0e00"></span><span style="background:#fbe9b7"></span><span style="background:#722f37"></span><span style="background:#3a4a2c"></span><span style="background:#0a0500"></span></div>
<div class="type">Cormorant Garamond + Inter</div>
<div class="voice">vanitas, oil-paint dim, lemon-peel curl</div>
</div>
</a>
<a class="card" href="042-japanese-edo-print.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="042-japanese-edo-print.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">042</span><span class="slug">japanese-edo-print</span></div>
<div class="mood">edo-period-ukiyo-e</div>
<div class="sw"><span style="background:#fff8e7"></span><span style="background:#1a1a1a"></span><span style="background:#c45a5a"></span><span style="background:#0a4d3c"></span><span style="background:#ddd5c2"></span></div>
<div class="type">Noto Serif JP + Inter</div>
<div class="voice">wave-and-mountain, sumi-ink, hokusai</div>
</div>
</a>
<a class="card" href="043-courthouse-docket.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="043-courthouse-docket.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">043</span><span class="slug">courthouse-docket</span></div>
<div class="mood">courthouse-docket</div>
<div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#7a5c3e"></span><span style="background:#3a3a3a"></span><span style="background:#ddd5c2"></span></div>
<div class="type">Crimson Pro + IBM Plex Mono</div>
<div class="voice">case 24-CV-1138, pursuant to, herein</div>
</div>
</a>
<a class="card" href="044-passport-stamp.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="044-passport-stamp.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">044</span><span class="slug">passport-stamp</span></div>
<div class="mood">passport-stamp</div>
<div class="sw"><span style="background:#0e2a47"></span><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#3a4a2c"></span><span style="background:#7a5c3e"></span></div>
<div class="type">Special Elite + IBM Plex Sans</div>
<div class="voice">ENTRY GRANTED, CDG-LAX, immigration</div>
</div>
</a>
<a class="card" href="045-subway-token.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="045-subway-token.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">045</span><span class="slug">subway-token</span></div>
<div class="mood">subway-token-vending</div>
<div class="sw"><span style="background:#fcd13e"></span><span style="background:#1a1a1a"></span><span style="background:#0e2a47"></span><span style="background:#e84545"></span><span style="background:#fffaee"></span></div>
<div class="type">Bebas Neue + Inter</div>
<div class="voice">PLEASE INSERT, COIN, SVCE FEE</div>
</div>
</a>
<a class="card" href="046-hospital-vitals.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="046-hospital-vitals.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">046</span><span class="slug">hospital-vitals</span></div>
<div class="mood">hospital-vital-signs</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#39ff14"></span><span style="background:#ff5252"></span><span style="background:#ffeb3b"></span><span style="background:#1a1a1a"></span></div>
<div class="type">DSEG7 Modern + Inter</div>
<div class="voice">BP 120/80, HR 72, RR 16</div>
</div>
</a>
<a class="card" href="047-telegram-channel.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="047-telegram-channel.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">047</span><span class="slug">telegram-channel</span></div>
<div class="mood">telegram-bot-channel</div>
<div class="sw"><span style="background:#212d3b"></span><span style="background:#0088cc"></span><span style="background:#ffffff"></span><span style="background:#9aa0b5"></span><span style="background:#16202a"></span></div>
<div class="type">Inter + Roboto Mono</div>
<div class="voice">@username forwarded, replies thread</div>
</div>
</a>
<a class="card" href="048-morse-code.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="048-morse-code.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">048</span><span class="slug">morse-code</span></div>
<div class="mood">morse-code-key</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#ffd700"></span><span style="background:#a83232"></span><span style="background:#3a3a3a"></span><span style="background:#fbf6e9"></span></div>
<div class="type">IBM Plex Mono + Inter</div>
<div class="voice">···— —··· ··—·, dit-dah, key-down</div>
</div>
</a>
<a class="card" href="049-lighthouse-log.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="049-lighthouse-log.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">049</span><span class="slug">lighthouse-log</span></div>
<div class="mood">lighthouse-keepers-log</div>
<div class="sw"><span style="background:#0e2a47"></span><span style="background:#fdfaf0"></span><span style="background:#7fb069"></span><span style="background:#bf3922"></span><span style="background:#1c4966"></span></div>
<div class="type">Crimson Pro + Source Serif</div>
<div class="voice">sunset 17:42, fog, kerosene-trim</div>
</div>
</a>
<a class="card" href="050-circus-broadside.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="050-circus-broadside.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">050</span><span class="slug">circus-broadside</span></div>
<div class="mood">circus-broadside-1920</div>
<div class="sw"><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#ffd700"></span><span style="background:#0a4d3c"></span><span style="background:#1a1a1a"></span></div>
<div class="type">Bungee + Source Sans</div>
<div class="voice">STEP RIGHT UP, MARVEL AT, ACT ONE</div>
</div>
</a>
<a class="card" href="051-samurai-scroll.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="051-samurai-scroll.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">051</span><span class="slug">samurai-scroll</span></div>
<div class="mood">samurai-honor-scroll</div>
<div class="sw"><span style="background:#fff8e7"></span><span style="background:#1a1a1a"></span><span style="background:#7a1f1a"></span><span style="background:#3a4a2c"></span><span style="background:#ddd5c2"></span></div>
<div class="type">Noto Serif JP + Cormorant Garamond</div>
<div class="voice">with utmost respect, signed in vermilion</div>
</div>
</a>
<a class="card" href="052-egyptian-tomb.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="052-egyptian-tomb.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">052</span><span class="slug">egyptian-tomb</span></div>
<div class="mood">egyptian-tomb-fresco</div>
<div class="sw"><span style="background:#3a2515"></span><span style="background:#d4b896"></span><span style="background:#0e3a5f"></span><span style="background:#bf3922"></span><span style="background:#fff8e0"></span></div>
<div class="type">Cinzel + Inter</div>
<div class="voice">in the year of, scribe-of-the-house, Ra</div>
</div>
</a>
<a class="card" href="053-bauhaus-school.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="053-bauhaus-school.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">053</span><span class="slug">bauhaus-school</span></div>
<div class="mood">bauhaus-school</div>
<div class="sw"><span style="background:#fdfaf3"></span><span style="background:#000000"></span><span style="background:#0e3a5f"></span><span style="background:#fcd13e"></span><span style="background:#a83232"></span></div>
<div class="type">Bayon + Inter</div>
<div class="voice">form follows function, dessau, klee</div>
</div>
</a>
<a class="card" href="054-art-deco-elevator.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="054-art-deco-elevator.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">054</span><span class="slug">art-deco-elevator</span></div>
<div class="mood">art-deco-elevator-panel</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#d4af37"></span><span style="background:#1a1a1a"></span><span style="background:#fdfaf3"></span><span style="background:#3a3a3a"></span></div>
<div class="type">Limelight + Inter</div>
<div class="voice">FLOOR 14, MEZZANINE, EXECUTIVE FLOOR</div>
</div>
</a>
<a class="card" href="055-russian-constructivist.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="055-russian-constructivist.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">055</span><span class="slug">russian-constructivist</span></div>
<div class="mood">russian-constructivist</div>
<div class="sw"><span style="background:#fdfaf3"></span><span style="background:#a83232"></span><span style="background:#1a1a1a"></span><span style="background:#fcd13e"></span><span style="background:#666666"></span></div>
<div class="type">Bungee + Inter</div>
<div class="voice">rodchenko, diagonals, the workers</div>
</div>
</a>
<a class="card" href="056-monastery-illuminated.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="056-monastery-illuminated.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">056</span><span class="slug">monastery-illuminated</span></div>
<div class="mood">monastery-illuminated</div>
<div class="sw"><span style="background:#fff8e7"></span><span style="background:#1a0e00"></span><span style="background:#a83232"></span><span style="background:#d4af37"></span><span style="background:#0a4d3c"></span></div>
<div class="type">UnifrakturCook + Inter</div>
<div class="voice">in nomine, capital A illuminated, vellum</div>
</div>
</a>
<a class="card" href="057-shipping-manifest.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="057-shipping-manifest.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">057</span><span class="slug">shipping-manifest</span></div>
<div class="mood">shipping-manifest-port</div>
<div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#0e3a5f"></span><span style="background:#7a5c3e"></span><span style="background:#3a3a3a"></span></div>
<div class="type">Special Elite + IBM Plex Mono</div>
<div class="voice">B/L 11422, port-of-origin, FOB rotterdam</div>
</div>
</a>
<a class="card" href="058-stadium-scoreboard.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="058-stadium-scoreboard.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">058</span><span class="slug">stadium-scoreboard</span></div>
<div class="mood">stadium-scoreboard</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#39ff14"></span><span style="background:#ff5252"></span><span style="background:#ffeb3b"></span><span style="background:#1a1a1a"></span></div>
<div class="type">DSEG14 Modern + Inter</div>
<div class="voice">Q4 2:14, HOME 21 AWAY 17, TIME-OUT</div>
</div>
</a>
<a class="card" href="059-field-naturalist.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="059-field-naturalist.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">059</span><span class="slug">field-naturalist</span></div>
<div class="mood">field-naturalist-journal</div>
<div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a0e00"></span><span style="background:#3a4a2c"></span><span style="background:#7a5c3e"></span><span style="background:#a83232"></span></div>
<div class="type">Caveat + Crimson Pro</div>
<div class="voice">in pen and ink, sketch of, observed</div>
</div>
</a>
<a class="card" href="060-garden-seed-packet.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="060-garden-seed-packet.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">060</span><span class="slug">garden-seed-packet</span></div>
<div class="mood">garden-seed-packet</div>
<div class="sw"><span style="background:#fbf6e9"></span><span style="background:#3a4a2c"></span><span style="background:#9b7a3e"></span><span style="background:#a83232"></span><span style="background:#7fb069"></span></div>
<div class="type">Crimson Pro + Source Sans</div>
<div class="voice">sow 1/4 deep, days to germ, full sun</div>
</div>
</a>
<a class="card" href="061-menu-prix-fixe.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="061-menu-prix-fixe.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">061</span><span class="slug">menu-prix-fixe</span></div>
<div class="mood">menu-prix-fixe</div>
<div class="sw"><span style="background:#fff8e7"></span><span style="background:#1a1a1a"></span><span style="background:#7a5c3e"></span><span style="background:#a83232"></span><span style="background:#ddd5c2"></span></div>
<div class="type">Cormorant Garamond + Inter</div>
<div class="voice">first course, with notes of, market price</div>
</div>
</a>
<a class="card" href="062-tattoo-flash.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="062-tattoo-flash.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">062</span><span class="slug">tattoo-flash</span></div>
<div class="mood">tattoo-flash-sheet</div>
<div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#0e2a47"></span><span style="background:#fcd13e"></span></div>
<div class="type">Limelight + Inter</div>
<div class="voice">OLD SCHOOL, BANNER, ROSE-AND-DAGGER</div>
</div>
</a>
<a class="card" href="063-skateboard-deck.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="063-skateboard-deck.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">063</span><span class="slug">skateboard-deck</span></div>
<div class="mood">skateboard-graphic</div>
<div class="sw"><span style="background:#1a0033"></span><span style="background:#ff2a78"></span><span style="background:#7fffd4"></span><span style="background:#ffe066"></span><span style="background:#0d0019"></span></div>
<div class="type">Bungee + Inter</div>
<div class="voice">thrasher, bombing, no rules</div>
</div>
</a>
<a class="card" href="064-rave-flyer-1996.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="064-rave-flyer-1996.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">064</span><span class="slug">rave-flyer-1996</span></div>
<div class="mood">rave-flyer-1996</div>
<div class="sw"><span style="background:#000000"></span><span style="background:#ff00ff"></span><span style="background:#00ffff"></span><span style="background:#ffff00"></span><span style="background:#1a1a1a"></span></div>
<div class="type">VT323 + Inter</div>
<div class="voice">WAREHOUSE, BPM, until 6 AM</div>
</div>
</a>
<a class="card" href="065-punk-zine-1980.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="065-punk-zine-1980.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">065</span><span class="slug">punk-zine-1980</span></div>
<div class="mood">punk-zine-cut-paste</div>
<div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#3a3a3a"></span><span style="background:#666666"></span></div>
<div class="type">Special Elite + Inter</div>
<div class="voice">xerox, ransom-note, glue-stick</div>
</div>
</a>
<a class="card" href="066-magazine-editorial.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="066-magazine-editorial.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">066</span><span class="slug">magazine-editorial</span></div>
<div class="mood">magazine-editorial</div>
<div class="sw"><span style="background:#fdfaf3"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#666666"></span><span style="background:#ddd5c2"></span></div>
<div class="type">Playfair Display + Source Serif</div>
<div class="voice">vol XII, photographed by, on assignment</div>
</div>
</a>
<a class="card" href="067-industrial-warning.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="067-industrial-warning.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">067</span><span class="slug">industrial-warning</span></div>
<div class="mood">industrial-warning-sign</div>
<div class="sw"><span style="background:#fcd13e"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#666666"></span><span style="background:#000000"></span></div>
<div class="type">Bebas Neue + Inter</div>
<div class="voice">DANGER, HARD HAT, AUTHORIZED ONLY</div>
</div>
</a>
<a class="card" href="068-casino-strip.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="068-casino-strip.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">068</span><span class="slug">casino-strip</span></div>
<div class="mood">casino-strip</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#d4af37"></span><span style="background:#a83232"></span><span style="background:#fdfaf3"></span><span style="background:#1a1a1a"></span></div>
<div class="type">Limelight + Inter</div>
<div class="voice">JACKPOT, ALL-IN, dealer stands on 17</div>
</div>
</a>
<a class="card" href="069-peaceful-protest.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="069-peaceful-protest.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">069</span><span class="slug">peaceful-protest</span></div>
<div class="mood">peaceful-protest-poster</div>
<div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#fcd13e"></span><span style="background:#3a3a3a"></span></div>
<div class="type">Bebas Neue + Source Sans</div>
<div class="voice">WE THE PEOPLE, DEMAND, NOW</div>
</div>
</a>
<a class="card" href="070-lawyer-shingle.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="070-lawyer-shingle.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">070</span><span class="slug">lawyer-shingle</span></div>
<div class="mood">lawyer-brass-shingle</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#d4af37"></span><span style="background:#fdfaf3"></span><span style="background:#666666"></span><span style="background:#1a1a1a"></span></div>
<div class="type">Cinzel + Inter</div>
<div class="voice">established 1898, bar-licensed, pursue</div>
</div>
</a>
<a class="card" href="071-doctor-prescription.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="071-doctor-prescription.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">071</span><span class="slug">doctor-prescription</span></div>
<div class="mood">doctor-prescription-pad</div>
<div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#0e2a47"></span><span style="background:#a83232"></span><span style="background:#3a3a3a"></span></div>
<div class="type">Caveat + IBM Plex Sans</div>
<div class="voice">Rx, sig: q.d., refill x3</div>
</div>
</a>
<a class="card" href="072-candy-shop.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="072-candy-shop.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">072</span><span class="slug">candy-shop</span></div>
<div class="mood">candy-shop-window</div>
<div class="sw"><span style="background:#fff0f5"></span><span style="background:#ff80ab"></span><span style="background:#ffd54f"></span><span style="background:#7fffd4"></span><span style="background:#1a1a1a"></span></div>
<div class="type">Bungee + Inter</div>
<div class="voice">two for a quarter, gum-balls, jaw-breakers</div>
</div>
</a>
<a class="card" href="073-library-microfiche.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="073-library-microfiche.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">073</span><span class="slug">library-microfiche</span></div>
<div class="mood">microfiche-reader</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#fdfaf0"></span><span style="background:#666666"></span><span style="background:#3a3a3a"></span><span style="background:#1a1a1a"></span></div>
<div class="type">IBM Plex Mono + Inter</div>
<div class="voice">reel 412, frame 1138, photo-negative</div>
</div>
</a>
<a class="card" href="074-auction-paddle.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="074-auction-paddle.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">074</span><span class="slug">auction-paddle</span></div>
<div class="mood">auction-paddle</div>
<div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#d4af37"></span><span style="background:#666666"></span></div>
<div class="type">Crimson Pro + Inter</div>
<div class="voice">going-once, lot 47, hammer-price</div>
</div>
</a>
<a class="card" href="075-prayer-beads.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="075-prayer-beads.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">075</span><span class="slug">prayer-beads</span></div>
<div class="mood">prayer-beads-stack</div>
<div class="sw"><span style="background:#fdfaf3"></span><span style="background:#1a1a1a"></span><span style="background:#7a1f1a"></span><span style="background:#d4af37"></span><span style="background:#3a4a2c"></span></div>
<div class="type">Cormorant Garamond + Inter</div>
<div class="voice">decade, mystery, intercession</div>
</div>
</a>
<a class="card" href="076-sushi-bar-counter.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="076-sushi-bar-counter.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">076</span><span class="slug">sushi-bar-counter</span></div>
<div class="mood">sushi-bar-counter</div>
<div class="sw"><span style="background:#1a1a1a"></span><span style="background:#fdfaf0"></span><span style="background:#7a1f1a"></span><span style="background:#3a4a2c"></span><span style="background:#ddd5c2"></span></div>
<div class="type">Noto Serif JP + Inter</div>
<div class="voice">omakase, otoro, hand-cut, today only</div>
</div>
</a>
<a class="card" href="077-truck-stop-diner.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="077-truck-stop-diner.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">077</span><span class="slug">truck-stop-diner</span></div>
<div class="mood">truck-stop-diner</div>
<div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a1a1a"></span><span style="background:#a83232"></span><span style="background:#fcd13e"></span><span style="background:#0e2a47"></span></div>
<div class="type">Bungee + Source Sans</div>
<div class="voice">bottomless coffee, blue-plate, daily</div>
</div>
</a>
<a class="card" href="078-barbershop-pole.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="078-barbershop-pole.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">078</span><span class="slug">barbershop-pole</span></div>
<div class="mood">barbershop-pole</div>
<div class="sw"><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#0e2a47"></span><span style="background:#1a1a1a"></span><span style="background:#666666"></span></div>
<div class="type">Limelight + Inter</div>
<div class="voice">first chair, fade, hot-towel</div>
</div>
</a>
<a class="card" href="079-highway-mile-marker.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="079-highway-mile-marker.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">079</span><span class="slug">highway-mile-marker</span></div>
<div class="mood">highway-mile-marker</div>
<div class="sw"><span style="background:#3a4a2c"></span><span style="background:#fdfaf0"></span><span style="background:#fcd13e"></span><span style="background:#1a1a1a"></span><span style="background:#7fb069"></span></div>
<div class="type">Bebas Neue + Inter</div>
<div class="voice">MILE 412, EXIT 14, NEXT REST 28</div>
</div>
</a>
<a class="card" href="080-fire-watch-tower.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="080-fire-watch-tower.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">080</span><span class="slug">fire-watch-tower</span></div>
<div class="mood">fire-watch-tower-log</div>
<div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a0e00"></span><span style="background:#3a4a2c"></span><span style="background:#a83232"></span><span style="background:#7a5c3e"></span></div>
<div class="type">Crimson Pro + IBM Plex Mono</div>
<div class="voice">smoke at 240°, distance 6mi, advised</div>
</div>
</a>
<a class="card" href="081-fishing-charter.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="081-fishing-charter.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">081</span><span class="slug">fishing-charter</span></div>
<div class="mood">fishing-charter-board</div>
<div class="sw"><span style="background:#0e2a47"></span><span style="background:#dcd0a8"></span><span style="background:#7fb069"></span><span style="background:#bf3922"></span><span style="background:#fdfaf0"></span></div>
<div class="type">Special Elite + Inter</div>
<div class="voice">tuna at 40lb, half-day, 6am sharp</div>
</div>
</a>
<a class="card" href="082-carpenter-bench.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="082-carpenter-bench.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">082</span><span class="slug">carpenter-bench</span></div>
<div class="mood">carpenter-workbench</div>
<div class="sw"><span style="background:#dba673"></span><span style="background:#1a0e00"></span><span style="background:#3a3a3a"></span><span style="background:#7a5c3e"></span><span style="background:#fbf6e9"></span></div>
<div class="type">Crimson Pro + Source Code</div>
<div class="voice">mortise and tenon, by hand, white oak</div>
</div>
</a>
<a class="card" href="083-bookbinder-press.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="083-bookbinder-press.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">083</span><span class="slug">bookbinder-press</span></div>
<div class="mood">bookbinder-press</div>
<div class="sw"><span style="background:#fff8e7"></span><span style="background:#1a0e00"></span><span style="background:#7a1f1a"></span><span style="background:#d4af37"></span><span style="background:#7a5c3e"></span></div>
<div class="type">Cormorant Garamond + Inter</div>
<div class="voice">case-bound, foil-stamped, end-paper</div>
</div>
</a>
<a class="card" href="084-lock-key-cutter.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="084-lock-key-cutter.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">084</span><span class="slug">lock-key-cutter</span></div>
<div class="mood">locksmith-shop</div>
<div class="sw"><span style="background:#1a1a1a"></span><span style="background:#d4af37"></span><span style="background:#fdfaf0"></span><span style="background:#666666"></span><span style="background:#0a0a0a"></span></div>
<div class="type">Special Elite + IBM Plex Mono</div>
<div class="voice">blank-key, master, restricted</div>
</div>
</a>
<a class="card" href="085-horology-galaxy.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="085-horology-galaxy.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">085</span><span class="slug">horology-galaxy</span></div>
<div class="mood">moon-phase-watch</div>
<div class="sw"><span style="background:#0a0a14"></span><span style="background:#d4af37"></span><span style="background:#a4c5e8"></span><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span></div>
<div class="type">Cormorant Garamond + Inter</div>
<div class="voice">perpetual, leap-year, equation-of-time</div>
</div>
</a>
<a class="card" href="086-espresso-machine.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="086-espresso-machine.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">086</span><span class="slug">espresso-machine</span></div>
<div class="mood">espresso-machine-gauge</div>
<div class="sw"><span style="background:#1a0d08"></span><span style="background:#d4af37"></span><span style="background:#a83232"></span><span style="background:#fdfaf3"></span><span style="background:#3a3a3a"></span></div>
<div class="type">Cormorant Garamond + Source Sans</div>
<div class="voice">9 bar, 93°C, 25 sec, 36g out</div>
</div>
</a>
<a class="card" href="087-ham-radio-shack.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="087-ham-radio-shack.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">087</span><span class="slug">ham-radio-shack</span></div>
<div class="mood">ham-radio-shack</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#39ff14"></span><span style="background:#ff5252"></span><span style="background:#666666"></span><span style="background:#1a1a1a"></span></div>
<div class="type">VT323 + Inter</div>
<div class="voice">CQ CQ CQ, this is W6XYZ, 73</div>
</div>
</a>
<a class="card" href="088-darkmode-magazine.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="088-darkmode-magazine.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">088</span><span class="slug">darkmode-magazine</span></div>
<div class="mood">dark-mode-editorial</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#fdfaf0"></span><span style="background:#d4af37"></span><span style="background:#a83232"></span><span style="background:#1a1a1a"></span></div>
<div class="type">Playfair Display + Inter</div>
<div class="voice">vol XII / no.4, photographed for, essay</div>
</div>
</a>
<a class="card" href="089-minimalist-spa.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="089-minimalist-spa.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">089</span><span class="slug">minimalist-spa</span></div>
<div class="mood">minimalist-spa</div>
<div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a1a1a"></span><span style="background:#3a4a2c"></span><span style="background:#dba673"></span><span style="background:#fff8e7"></span></div>
<div class="type">Cormorant Garamond + Inter</div>
<div class="voice">by appointment, breath, restoration</div>
</div>
</a>
<a class="card" href="090-nasa-mission-patch.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="090-nasa-mission-patch.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">090</span><span class="slug">nasa-mission-patch</span></div>
<div class="mood">nasa-mission-patch</div>
<div class="sw"><span style="background:#0a0e1a"></span><span style="background:#fdfaf0"></span><span style="background:#0e3a5f"></span><span style="background:#a83232"></span><span style="background:#fcd13e"></span></div>
<div class="type">Cinzel + Inter</div>
<div class="voice">AD ASTRA, mission STS-141, crew of seven</div>
</div>
</a>
<a class="card" href="091-voting-ballot.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="091-voting-ballot.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">091</span><span class="slug">voting-ballot</span></div>
<div class="mood">voting-ballot</div>
<div class="sw"><span style="background:#fdfaf0"></span><span style="background:#1a1a1a"></span><span style="background:#0e2a47"></span><span style="background:#a83232"></span><span style="background:#666666"></span></div>
<div class="type">Special Elite + IBM Plex Sans</div>
<div class="voice">fill in the oval, write-in, sign here</div>
</div>
</a>
<a class="card" href="092-fortune-cookie.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="092-fortune-cookie.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">092</span><span class="slug">fortune-cookie</span></div>
<div class="mood">fortune-cookie-slip</div>
<div class="sw"><span style="background:#fdfaf3"></span><span style="background:#a83232"></span><span style="background:#1a1a1a"></span><span style="background:#d4af37"></span><span style="background:#fff8e0"></span></div>
<div class="type">Caveat + Inter</div>
<div class="voice">your lucky numbers, learn Mandarin, today</div>
</div>
</a>
<a class="card" href="093-telegram-pole.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="093-telegram-pole.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">093</span><span class="slug">telegram-pole</span></div>
<div class="mood">telegraph-pole-knots</div>
<div class="sw"><span style="background:#7a5c3e"></span><span style="background:#fbf6e9"></span><span style="background:#1a0e00"></span><span style="background:#3a3a3a"></span><span style="background:#a83232"></span></div>
<div class="type">Special Elite + Inter</div>
<div class="voice">wire-down, repair-crew, pole 1138</div>
</div>
</a>
<a class="card" href="094-beekeeper-log.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="094-beekeeper-log.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">094</span><span class="slug">beekeeper-log</span></div>
<div class="mood">beekeeper-log-book</div>
<div class="sw"><span style="background:#fbf6e9"></span><span style="background:#1a0e00"></span><span style="background:#fcd13e"></span><span style="background:#7a5c3e"></span><span style="background:#3a4a2c"></span></div>
<div class="type">Crimson Pro + Inter</div>
<div class="voice">queen marked blue, 8 frames, no swarm</div>
</div>
</a>
<a class="card" href="095-dive-flag.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="095-dive-flag.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">095</span><span class="slug">dive-flag</span></div>
<div class="mood">scuba-dive-log</div>
<div class="sw"><span style="background:#0a1428"></span><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#7dffe9"></span><span style="background:#1c4966"></span></div>
<div class="type">Special Elite + IBM Plex Mono</div>
<div class="voice">30m, 42 min, deco-stop at 5m</div>
</div>
</a>
<a class="card" href="096-gallery-wall-label.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="096-gallery-wall-label.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">096</span><span class="slug">gallery-wall-label</span></div>
<div class="mood">gallery-wall-label</div>
<div class="sw"><span style="background:#fdfaf3"></span><span style="background:#1a1a1a"></span><span style="background:#666666"></span><span style="background:#ddd5c2"></span><span style="background:#3a3a3a"></span></div>
<div class="type">Cormorant Garamond + Inter</div>
<div class="voice">Untitled, 1972, oil on canvas, gift of</div>
</div>
</a>
<a class="card" href="097-old-school-arcade.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="097-old-school-arcade.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">097</span><span class="slug">old-school-arcade</span></div>
<div class="mood">old-school-arcade-marquee</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#ff00ff"></span><span style="background:#00ffff"></span><span style="background:#ffff00"></span><span style="background:#ff5252"></span></div>
<div class="type">Press Start 2P + Inter</div>
<div class="voice">INSERT COIN, HIGH-SCORE, 1UP</div>
</div>
</a>
<a class="card" href="098-post-office-window.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="098-post-office-window.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">098</span><span class="slug">post-office-window</span></div>
<div class="mood">post-office-window</div>
<div class="sw"><span style="background:#fdfaf0"></span><span style="background:#0e2a47"></span><span style="background:#a83232"></span><span style="background:#666666"></span><span style="background:#1a1a1a"></span></div>
<div class="type">Special Elite + IBM Plex Sans</div>
<div class="voice">first-class, certified, return-receipt</div>
</div>
</a>
<a class="card" href="099-bus-roll-sign.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="099-bus-roll-sign.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">099</span><span class="slug">bus-roll-sign</span></div>
<div class="mood">bus-roll-sign</div>
<div class="sw"><span style="background:#1a1a1a"></span><span style="background:#fcd13e"></span><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#3a3a3a"></span></div>
<div class="type">Bebas Neue + Inter</div>
<div class="voice">ROUTE 14, DOWNTOWN, NEXT STOP</div>
</div>
</a>
<a class="card" href="100-midnight-zoom.html" target="_blank" rel="noopener noreferrer">
<div class="thumb"><iframe src="100-midnight-zoom.html" loading="lazy"></iframe></div>
<div class="meta">
<div class="row1"><span class="ix">100</span><span class="slug">midnight-zoom</span></div>
<div class="mood">midnight-zoom-call</div>
<div class="sw"><span style="background:#0a0a0a"></span><span style="background:#1de9b6"></span><span style="background:#fdfaf0"></span><span style="background:#a83232"></span><span style="background:#1a1a1a"></span></div>
<div class="type">Inter + JetBrains Mono</div>
<div class="voice">you're muted, can you see my screen, 11:42pm</div>
</div>
</a></div>
</body></html>