prototype: frame B click-through for the north star ticket

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>

prototype/shell.css

@@ -0,0 +1,108 @@
+/* Throwaway prototype — Frame B shell, two metals, one shell / two densities.
+   Not for merge. Values here are candidates, not tokens. */
+: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;
+  /* second metal — structural only */
+  --pewter:#8c8f97; --pewter-deep:#5a5d64;
+  --filament:#c8b08a;
+  /* the Threshold: one knob per density */
+  --fit:1;            /* ornament weight: 1 outdoors, 0.35 indoors */
+  --page:1420px;
+  --rail:2rem;        /* One Rail: the only horizontal edge on any page */
+}
+*{box-sizing:border-box}
+body{margin:0;background:var(--grave);color:var(--ash);
+  font:400 1rem/1.6 Jost,system-ui,sans-serif}
+a{color:var(--gold)}
+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)}
+.label.dull{color:var(--pewter)}
+.page{max-width:var(--page);margin:0 auto}
+.fade-rule{height:1px;background:linear-gradient(90deg,transparent,var(--gilt),transparent)}
+
+/* ---- lintel: identical on every page ---- */
+.lintel{
+  display:flex;align-items:center;gap:2rem;padding:.85rem var(--rail);position:relative;
+  background:linear-gradient(180deg,#1b1a1f,#111015);
+  border-top:1px solid rgba(140,143,151,calc(.28 * var(--fit) + .06));
+  box-shadow:0 14px 30px rgba(0,0,0,.5);
+}
+/* the lintel's underside is a gilt rule that fades out, not a hard line */
+.lintel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
+  background:linear-gradient(90deg,transparent,rgba(194,163,90,.32) 12%,
+             rgba(194,163,90,.32) 88%,transparent)}
+.rivets{position:absolute;inset:auto 0 6px 0;display:flex;justify-content:space-between;
+  padding:0 1rem;opacity:var(--fit)}
+.rivets i{width:4px;height:4px;border-radius:50%;background:var(--pewter-deep);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
+.mark{font-family:Cinzel,serif;color:var(--gold);letter-spacing:.18em;
+  text-transform:uppercase;font-size:.86rem;text-decoration:none}
+.lintel nav{display:flex;gap:1.6rem;margin-left:auto}
+.lintel nav a{color:var(--ink-muted);text-decoration:none;font-family:Cinzel,serif;
+  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
+.lintel nav a:hover{color:var(--gold-lit)}
+.lintel nav a[aria-current]{color:var(--gold);border-bottom:1px solid var(--gilt)}
+
+/* ---- status: a sentence, on every page ---- */
+.status{display:flex;align-items:center;gap:.8rem;padding:.9rem var(--rail);
+  background:var(--panel-deep);font-size:.88rem;color:var(--ink-muted);
+  position:relative}
+.status::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
+  background:linear-gradient(90deg,transparent,rgba(140,143,151,.24) 12%,
+             rgba(140,143,151,.24) 88%,transparent)}
+.lamp{width:8px;height:8px;border-radius:50%;background:var(--filament);
+  box-shadow:0 0 10px 2px rgba(200,176,138,.5)}
+
+/* ---- foundation: identical on every page ---- */
+.foundation{padding:1.6rem var(--rail);background:#0a090c;position:relative;
+  display:flex;justify-content:space-between;color:var(--dust);
+  font-size:.74rem;letter-spacing:.1em}
+.foundation::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
+  background:linear-gradient(90deg,transparent,rgba(194,163,90,.26) 12%,
+             rgba(194,163,90,.26) 88%,transparent)}
+
+/* ---- buttons ---- */
+.btn{display:inline-block;padding:.6rem 1.3rem;font-family:Cinzel,serif;font-size:.76rem;
+  letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--gilt);
+  color:var(--ink);background:linear-gradient(180deg,#2a2214,#1a1510);text-decoration:none}
+.btn.dull{border-color:rgba(140,143,151,.4);color:var(--pewter);
+  background:linear-gradient(180deg,#232529,#16171b)}
+
+/* ---- gilded frame: a notched plate with corner marks, not a box ----
+   Edges fade rather than stop; corners are cut, then re-marked in gilt. */
+/* No corner marks: an ornament inset from an edge agrees with nothing and
+   reads as misalignment. The plate is carried by material and fading rules. */
+.framed{position:relative}
+/* a rule that fades at both ends — the default separator */
+.hair{height:1px;border:0;margin:0;
+  background:linear-gradient(90deg,transparent,rgba(194,163,90,.34) 18%,
+             rgba(194,163,90,.34) 82%,transparent)}
+.hair.dull{background:linear-gradient(90deg,transparent,rgba(140,143,151,.3) 18%,
+           rgba(140,143,151,.3) 82%,transparent)}
+
+/* ---- ledger interior: the archive material ---- */
+.ledger{background:var(--panel);
+  box-shadow:inset 0 0 0 1px rgba(194,163,90,.10),
+             inset 0 1px 0 rgba(255,255,255,.022),
+             0 8px 22px rgba(0,0,0,.28)}
+.ledger .row{display:grid;grid-template-columns:1fr 8rem 4rem 5rem;gap:1rem;
+  align-items:baseline;min-height:1.78rem;padding:.5rem 1.2rem;
+  border-bottom:1px solid rgba(194,163,90,.07)}
+.ledger .row:hover{background:linear-gradient(90deg,rgba(53,30,40,.55),transparent)}
+.ledger .t{color:var(--ink);font-family:Cinzel,serif;font-size:.95rem;text-decoration:none}
+.ledger .m,.ledger .n,.ledger .d{font-size:.8rem;text-align:right;color:var(--dust)}
+.ledger .n{color:var(--gold);font-variant-numeric:tabular-nums}
+/* header row uses pewter — it structures, it is not touchable */
+.ledger .head{background:var(--panel-deep);border-bottom:1px solid rgba(140,143,151,.2)}
+.ledger .head span{font-family:Cinzel,serif;font-size:.7rem;letter-spacing:.14em;
+  text-transform:uppercase;color:var(--pewter)}
+
+.tag{color:#7a7168;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
+  text-align:center;padding:1rem 0 .4rem}