archvillainetteandClaude Opus 5
0705b0100e
Throwaway prototype backing issue #49. Two pages sharing one shell (index.html outdoors, forum.html indoors) plus the rejected ledger-frame option (a-ledger.html) kept for comparison. Not for merge. Values here are candidates, not tokens. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
145 lines
7.3 KiB
HTML
145 lines
7.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>A — Ledger is the frame</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{
|
|
--gold:#c2a35a; --gilt:#a8893f; --gold-lit:#e0c878;
|
|
--plum-noir:#351e28; --blood:#8e3438; --wax:#a84a4e;
|
|
--crypt:#0f0d12; --grave:#09080b;
|
|
--panel:#18141d; --panel-deep:#110f15; --panel-raised:#201924;
|
|
--bone:#e6e0d6; --ash:#b9b2a6; --dust:#9a9086;
|
|
--ink:#d8c28a; --ink-muted:#a99d8f;
|
|
--rule:1.78rem;
|
|
}
|
|
*{box-sizing:border-box}
|
|
body{
|
|
margin:0; background:var(--grave); color:var(--ash);
|
|
font:400 1rem/1.6 Jost, system-ui, sans-serif;
|
|
padding:2.5rem 1rem 4rem;
|
|
}
|
|
h1,h2,h3{font-family:Cinzel,Georgia,serif;font-weight:600;color:var(--bone);margin:0;
|
|
text-shadow:0 1px 0 rgba(0,0,0,.9), 0 0 10px rgba(104,32,76,.16)}
|
|
.label{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.78rem;
|
|
letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
|
|
|
|
/* the book: one bound object, hard edges, margins */
|
|
.book{
|
|
max-width:1180px;margin:0 auto;background:var(--crypt);
|
|
border:1px solid rgba(194,163,90,.22);
|
|
box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.03);
|
|
position:relative;
|
|
}
|
|
/* corner pieces — bookbinding */
|
|
.book::before,.book::after{content:"";position:absolute;width:34px;height:34px;pointer-events:none}
|
|
.book::before{top:8px;left:8px;border-top:1px solid var(--gilt);border-left:1px solid var(--gilt)}
|
|
.book::after{bottom:8px;right:8px;border-bottom:1px solid var(--gilt);border-right:1px solid var(--gilt)}
|
|
|
|
/* topbar reads as a running head, not a nav bar */
|
|
.runninghead{
|
|
display:flex;justify-content:space-between;align-items:baseline;
|
|
padding:1.1rem 3.2rem .9rem;border-bottom:1px solid rgba(194,163,90,.18);
|
|
background:linear-gradient(180deg,#1a1017,var(--crypt));
|
|
}
|
|
.runninghead nav{display:flex;gap:1.8rem}
|
|
.runninghead a{color:var(--ink-muted);text-decoration:none;font-family:Cinzel,serif;
|
|
font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
|
|
.runninghead a:hover{color:var(--gold-lit)}
|
|
.folio{color:var(--dust);font-size:.74rem;letter-spacing:.1em}
|
|
|
|
/* frontispiece — a title page, not a hero */
|
|
.frontispiece{padding:4.5rem 3.2rem 3rem;text-align:center;
|
|
background:radial-gradient(120% 90% at 50% 0%, rgba(53,30,40,.55), transparent 70%)}
|
|
.frontispiece h1{font-size:2.9rem;letter-spacing:.04em}
|
|
.frontispiece .sub{color:var(--dust);font-size:.82rem;letter-spacing:.22em;
|
|
text-transform:uppercase;font-family:Cinzel,serif;margin-top:.9rem}
|
|
.fade-rule{height:1px;margin:1.8rem auto;max-width:420px;
|
|
background:linear-gradient(90deg,transparent,var(--gilt),transparent)}
|
|
.seal{display:inline-block;margin-top:.4rem;width:44px;height:44px;border-radius:50%;
|
|
background:radial-gradient(circle at 35% 30%, var(--wax), #5e2124);
|
|
box-shadow:inset 0 -2px 6px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.5)}
|
|
.epigraph{max-width:560px;margin:1.6rem auto 0;color:var(--ink-muted);
|
|
font-style:italic;font-size:.95rem}
|
|
|
|
/* the index: entries in ruled columns */
|
|
.leaf{padding:1rem 3.2rem 3rem}
|
|
.leaf-head{display:flex;justify-content:space-between;align-items:baseline;
|
|
padding-bottom:.5rem;border-bottom:1px solid rgba(194,163,90,.14);margin-bottom:.2rem}
|
|
.entry{
|
|
display:grid;grid-template-columns:1fr 8rem 5rem;gap:1rem;align-items:baseline;
|
|
min-height:var(--rule);padding:.42rem 0;
|
|
border-bottom:1px solid rgba(194,163,90,.07);
|
|
}
|
|
.entry:hover{background:linear-gradient(90deg,rgba(53,30,40,.5),transparent)}
|
|
.entry .t{color:var(--ink);font-family:Cinzel,serif;font-size:.98rem}
|
|
.entry .m{color:var(--dust);font-size:.8rem;text-align:right}
|
|
.entry .n{color:var(--gold);font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}
|
|
|
|
.two{display:grid;grid-template-columns:1fr 300px;gap:3rem;padding:0 3.2rem 3rem}
|
|
.marginalia{border-left:1px solid rgba(194,163,90,.14);padding-left:1.4rem}
|
|
.marginalia p{font-size:.88rem;color:var(--dust)}
|
|
.plaque{display:inline-block;padding:.28rem .7rem;border:1px solid rgba(194,163,90,.3);
|
|
background:var(--panel-deep);color:var(--ink);font-family:Cinzel,serif;
|
|
font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
|
|
.colophon{padding:1.4rem 3.2rem;border-top:1px solid rgba(194,163,90,.18);
|
|
display:flex;justify-content:space-between;color:var(--dust);font-size:.74rem;
|
|
letter-spacing:.08em;background:var(--panel-deep)}
|
|
.tag{color:#7a7168;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
|
|
text-align:center;margin:0 auto 1.2rem;max-width:1180px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="tag">Option A — the ledger is the frame · zero images</div>
|
|
|
|
<div class="book">
|
|
<div class="runninghead">
|
|
<span class="label">Shadows Over Westgate</span>
|
|
<nav><a href="#">The Court</a><a href="#">Entries</a><a href="#">Archive</a><a href="#">Petitions</a><a href="#">Enter</a></nav>
|
|
<span class="folio">fol. i</span>
|
|
</div>
|
|
|
|
<div class="frontispiece">
|
|
<div class="label">Being an account of the city and its debts</div>
|
|
<div class="fade-rule"></div>
|
|
<h1>Shadows Over Westgate</h1>
|
|
<div class="sub">A record kept against the dark</div>
|
|
<div class="fade-rule"></div>
|
|
<div class="seal"></div>
|
|
<p class="epigraph">Everyone in this city is compromised. The only question the ledger asks is by how much, and to whom.</p>
|
|
<div style="margin-top:1.6rem"><span class="plaque">Open the record</span></div>
|
|
</div>
|
|
|
|
<div class="leaf">
|
|
<div class="leaf-head"><h2 style="font-size:1.05rem;letter-spacing:.06em">Latest entries</h2><span class="folio">fol. ii — vii</span></div>
|
|
<div class="entry"><span class="t">The Ashgate Concession</span><span class="m">Ledgerkeeper</span><span class="n">41</span></div>
|
|
<div class="entry"><span class="t">On the matter of the second seal</span><span class="m">V. Marrow</span><span class="n">17</span></div>
|
|
<div class="entry"><span class="t">Debts owed to the Clockmakers' Guild</span><span class="m">Anonymous</span><span class="n">8</span></div>
|
|
<div class="entry"><span class="t">Petition: the widow at Candlewharf</span><span class="m">House Verrine</span><span class="n">63</span></div>
|
|
<div class="entry"><span class="t">Errata to the census of 1114</span><span class="m">Ledgerkeeper</span><span class="n">2</span></div>
|
|
</div>
|
|
|
|
<div class="two">
|
|
<div>
|
|
<h3 style="font-size:1rem;letter-spacing:.06em">From the archive</h3>
|
|
<div class="fade-rule" style="margin:.9rem 0 1.2rem;max-width:none"></div>
|
|
<p>The city keeps two books. One is public, ruled and countersigned, and it is a lie of omission. The other is this one.</p>
|
|
<p>Entries are made nightly. Corrections are made rarely, and never by the same hand twice.</p>
|
|
</div>
|
|
<aside class="marginalia">
|
|
<div class="label" style="font-size:.7rem">Standing</div>
|
|
<p style="margin-top:.8rem">The record is open. Fourteen hands are writing tonight.</p>
|
|
<div class="fade-rule" style="margin:1.2rem 0;max-width:none"></div>
|
|
<div class="label" style="font-size:.7rem">Seals in force</div>
|
|
<p style="margin-top:.8rem">Verrine · Marrow · the Guild</p>
|
|
</aside>
|
|
</div>
|
|
|
|
<div class="colophon"><span>Kept at Westgate</span><span>fol. vii of ccxi</span></div>
|
|
</div>
|
|
</body>
|
|
</html>
|