/* The gate's own face. One stylesheet for every page it serves, because the same rules written
   once per page is what LAW_PAYMENTS payment 2 exists to clean up.

   NAMED `hive.css` AND NOT RENAMED. The splash it was written for is deleted (founder, 2026-08-14:
   "this page should be gone, it shouldn't exist") but gidg3t.html, wiki.html, worlds.html and
   apply.html all load it by this path, and `hive.mjs` routes it by this path. A rename is four
   edits and a route change for no behaviour, so the old name is left carrying the new job.

   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;
}
/* THE HEADLINE. The tagline below it is what this place IS; this is what it PROMISES, and it is
   the larger of the two on purpose. Ruled 2026-08-11: "a refusal that names what's missing is the
   start of the job, and we help you with both." */
.headline {
  margin: 26px 0 0 2px;
  max-width: 30ch;
  font: 500 clamp(20px, 3.2vw, 30px)/1.28 var(--sans, inherit);
  letter-spacing: -.015em;
  color: var(--ink, inherit);
}

.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; }