/* Purpul Hive - the gate's own face. One stylesheet for all four pages, because the same rules
   written four times is what LAW_PAYMENTS payment 2 exists to clean up.

   NOTHING HERE LEAVES THE HOST. No web font, no CDN, no remote image. The estate has already paid
   for that lesson once - the shipped site face bakes 137 remote image URLs and a Google Fonts link,
   so a page that looks offline is not. System fonts and inline SVG only. */

:root {
  --ink: #e8ecf4;
  --ink-dim: #97a3b8;
  --ink-faint: #6b7689;
  --bg: #0b0f1a;
  --card: rgba(255, 255, 255, .028);
  --edge: rgba(255, 255, 255, .085);
  --edge-lit: rgba(148, 180, 255, .3);
  /* The estate's own mark gradient, read off web/favicon.svg rather than invented here. */
  --g1: #c4b5fd;
  --g2: #6f9cff;
  --g3: #34d8f0;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 0 24px 96px;
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  background: var(--bg);
  /* Two lights: a cool wash behind the mark, and a colder one low and right, as the estate's
     dark surfaces already do. Fixed so the page scrolls over them rather than dragging them. */
  background-image:
    radial-gradient(90% 55% at 50% -8%, #171d33 0%, rgba(11, 15, 26, 0) 68%),
    radial-gradient(60% 45% at 100% 100%, #0f2731 0%, rgba(11, 15, 26, 0) 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1040px, 100%); margin: 0 auto; }

/* ── the mark ────────────────────────────────────────────────────────────── */
/* Was 132px, which spent a third of a 900px window before the first word and pushed the lower two
   doors below the fold. The founder set this value on the page and confirmed it. */
header.mast { padding: 50px 0 56px; }
.lockup { display: flex; align-items: center; gap: 18px; }
.lockup svg { width: 54px; height: 54px; flex: none; }
.wordmark {
  margin: 0;
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
  background: linear-gradient(100deg, var(--g1), var(--g2) 52%, var(--g3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline {
  margin: 18px 0 0 2px;
  font: 12px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── the three doors ─────────────────────────────────────────────────────── */
/* TWO ACROSS, because there are four doors. At three columns the fourth sat alone on a second row
   and read as an afterthought; at four across, 1040px leaves ~230px a card, which is narrower than
   the copy each one carries. Two gives every door the same weight. */
.doors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }

.door {
  display: flex;
  flex-direction: column;
  min-height: 268px;
  padding: 26px 26px 22px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.door:hover, .door:focus-visible {
  border-color: var(--edge-lit);
  background: rgba(255, 255, 255, .055);
  transform: translateY(-2px);
  outline: none;
}
.door svg { width: 26px; height: 26px; stroke: var(--g2); }
.door h2 { margin: 22px 0 10px; font-size: 21px; font-weight: 650; letter-spacing: -.012em; }
.door p { margin: 0; color: var(--ink-dim); font-size: 15px; }
.door .go {
  margin-top: auto;
  padding-top: 22px;
  font: 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7fb0ff;
}
.door[aria-disabled="true"] { opacity: .62; }
.door[aria-disabled="true"] .go { color: var(--ink-faint); }

/* ── inner pages ─────────────────────────────────────────────────────────── */
.page { padding: 72px 0 0; }
.back {
  display: inline-block;
  margin-bottom: 34px;
  font: 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
.back:hover { color: var(--ink-dim); }
.page h1 { margin: 0 0 10px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.page .lede { margin: 0 0 40px; color: var(--ink-dim); font-size: 17px; max-width: 62ch; }

/* ── form ────────────────────────────────────────────────────────────────── */
form { max-width: 620px; }
.grp { margin-bottom: 20px; }
.grp label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.grp .hint { display: block; margin-bottom: 9px; color: var(--ink-faint); font-size: 13.5px; font-weight: 400; }
input, textarea, select {
  width: 100%;
  padding: 12px 14px;
  color: var(--ink);
  font: inherit;
  background: rgba(0, 0, 0, .32);
  border: 1px solid var(--edge);
  border-radius: 10px;
  resize: vertical;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--edge-lit); }
textarea { min-height: 104px; line-height: 1.6; }
.count { margin-top: 6px; font: 12px/1 var(--mono); color: var(--ink-faint); }
.count.short { color: #d99a5b; }
button {
  padding: 13px 26px;
  font: inherit;
  font-weight: 650;
  color: #08101d;
  background: linear-gradient(100deg, var(--g2), var(--g3));
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
.note { margin: 18px 0 0; min-height: 1.4em; font-size: 15px; color: #7fb0ff; }
.note.err { color: #f08a7a; }
.note.ok { color: #6fd39b; }

/* ── search ──────────────────────────────────────────────────────────────── */
.searchbar { position: relative; max-width: 620px; margin-bottom: 12px; }
.searchbar input { padding-left: 42px; }
.searchbar svg { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; stroke: var(--ink-faint); }
.tally { margin: 0 0 26px; font: 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.hit { padding: 20px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); }
.hit h3 { margin: 0 0 7px; font-size: 17px; font-weight: 640; }
.hit p { margin: 0 0 12px; color: var(--ink-dim); font-size: 14.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--edge); font: 11px/1.5 var(--mono); color: var(--ink-faint); }
.empty { padding: 40px 0; color: var(--ink-dim); max-width: 62ch; }
.empty strong { color: var(--ink); font-weight: 600; }
.empty a, .page a { color: #7fb0ff; }
/* A class, not a style attribute. `style-src 'self'` in the Hive's CSP blocks inline style
   attributes too, so one `style="…"` anywhere is a rule that silently does not apply. */
.spaced { margin-top: 32px; }

/* ── GAIN ACCESS, AND THE GHOSTED FORGE ────────────────────────────────────────────────────────
   A locked door is SHOWN, not hidden. Hiding it would make this page mean different things to
   different readers; a dead link would make it mean nothing to either. So it dims, stops taking
   the pointer, and says in words what opens it. */
body.no-key .forge-door { opacity: .42; filter: saturate(.35); pointer-events: none; }
body.no-key .forge-door .go,
body.no-key .forge-door .lens-shelf { display: none; }
body.no-key .forge-door .locked-note { display: block; }
.forge-door .locked-note { display: none; margin-top: .9rem; font-size: .82rem; color: #8ea0c0; }
/* The one control inside a door that must still be clickable when the door is not. */
body.no-key .forge-door .locked-note { pointer-events: auto; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: #8ab4ff; cursor: pointer; text-decoration: underline; }

/* The shelf: whatever is really registered on this box, both worlds, badged by authorship. */
.lens-shelf { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .6rem; }
.lens-shelf li { font-size: .82rem; }
.lens-shelf a { color: #cfe0ff; text-decoration: none; border-bottom: 1px solid #2b3a5a; }
.lens-shelf .muted { color: #7c8aa6; }
.badge { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .38rem;
         border-radius: 999px; vertical-align: middle; }
/* Verified and community are DIFFERENT COLOURS on purpose. The listing carries `world` on every
   row precisely so a face cannot show one wearing the other's badge. */
.badge.verified  { background: #16324a; color: #7ee0ff; border: 1px solid #21506e; }
.badge.community { background: #2a2440; color: #c4b5fd; border: 1px solid #423766; }

#access { border: 1px solid #24304a; border-radius: 14px; background: #0d1220; color: #dbe6ff;
          padding: 1.4rem 1.5rem; max-width: 26rem; width: calc(100% - 2rem); }
#access::backdrop { background: rgba(4, 7, 14, .72); }
#access h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
#access .dim { color: #8ea0c0; font-size: .85rem; margin: 0 0 1rem; }
#access .dim a { color: #8ab4ff; }
#access label { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
                color: #8ea0c0; margin-bottom: .35rem; }
#access input { width: 100%; box-sizing: border-box; padding: .6rem .7rem; border-radius: 8px;
                border: 1px solid #2b3a5a; background: #070b14; color: #dbe6ff; font: inherit; }
#access .note { min-height: 1.2rem; margin: .6rem 0 0; font-size: .82rem; color: #ffd07a; }
#access menu { display: flex; gap: .5rem; justify-content: flex-end; margin: 1.1rem 0 0; padding: 0; }
#access button { font: inherit; padding: .5rem .9rem; border-radius: 8px; cursor: pointer; }
#access .ghost { background: transparent; border: 1px solid #2b3a5a; color: #aab8d4; }
#access .primary { background: #3b5bdb; border: 1px solid #4a6ae8; color: #fff; }

/* ── THE DOC PAGE, AND THE CRT IN THE CORNER ───────────────────────────────────────────────── */
.crt { position: fixed; top: 1rem; right: 1rem; z-index: 40; display: flex; align-items: center;
       gap: .55rem; padding: .5rem .8rem; border-radius: 10px; text-decoration: none;
       border: 1px solid #24405c; background: #0a1420; color: #7ee0ff;
       box-shadow: 0 0 0 1px #05202e inset, 0 6px 18px rgba(0,0,0,.35); }
.crt:hover { border-color: #37688c; background: #0c1a29; }
.crt svg { width: 22px; height: 22px; stroke: currentColor; }
.crt-label { font-size: .78rem; letter-spacing: .04em; }
.crt-label em { font-style: normal; opacity: .6; }
@media (max-width: 640px) { .crt-label { display: none; } }

.doc .toc { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 1.4rem 0 2.2rem;
            padding: .8rem 1rem; border: 1px solid #1c2942; border-radius: 10px; background: #0a0f1b; }
.doc .toc a { color: #8ab4ff; font-size: .84rem; text-decoration: none; }
.doc .toc a:hover { text-decoration: underline; }
.doc h2 { margin: 2.6rem 0 .8rem; padding-top: .6rem; border-top: 1px solid #18233a; font-size: 1.3rem; }
.doc pre { background: #070b14; border: 1px solid #1c2942; border-radius: 10px; padding: .9rem 1rem;
           overflow-x: auto; font-size: .82rem; line-height: 1.55; }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.doc :not(pre) > code { background: #111a2c; border: 1px solid #1e2b45; border-radius: 5px;
                        padding: .06rem .32rem; font-size: .86em; }
.doc pre .v { color: #ffd07a; }  /* something you substitute */
.doc pre .c { color: #6b7f9e; }  /* a comment */
.doc table.grid { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .86rem; }
.doc table.grid th { text-align: left; color: #8ea0c0; font-weight: 600; font-size: .74rem;
                     letter-spacing: .07em; text-transform: uppercase; padding: .5rem .6rem;
                     border-bottom: 1px solid #24304a; }
.doc table.grid td { padding: .5rem .6rem; border-bottom: 1px solid #162034; vertical-align: top; }
.doc .events, .doc .laws { padding-left: 1.2rem; }
.doc .events li, .doc .laws li { margin: .35rem 0; }
/* An aside is context. A warning is something that will cost you an afternoon if you skip it. */
.doc .aside { border-left: 2px solid #2b3a5a; padding: .1rem 0 .1rem .9rem; color: #9fb0cd; font-size: .88rem; }
.doc .warn  { border-left: 2px solid #c9922f; padding: .1rem 0 .1rem .9rem; color: #e4d3ae; font-size: .88rem; }
.doc .foot { color: #7c8aa6; font-size: .85rem; }
.doc hr { border: 0; border-top: 1px solid #18233a; margin: 2.4rem 0 1.2rem; }
  .doc h2.first { border-top: 0; margin-top: 1.6rem; }