/* bm v5.0 · built 2026-09-01 06:30 · cc/site/gate.css */
/* ══════════════════════════════════════════════════════════════════════
   השער — the front door.

   Same tokens as the app, same law: MOBILE-FIRST, no 100vh/svh/dvh, no
   position:fixed, no nested overflow. The document scrolls. If a media
   query is ever lost this degrades to a plain readable page rather than to
   the fixed shell that failed nine times (reference/FAILURE-LOG.md 6-9).

   The live site's door is 366 generated art files and a 3D gate. That is
   not reproducible here and copying it was ruled out, so this one earns
   its presence typographically instead: it is quiet, it is fast, and it
   says exactly what is behind each door.
   ══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#fbf8f1; --panel:#f7f2e6; --panel2:#fff;
  --ink:#1d2430; --ink-soft:#4a4436; --muted:#6b6455;
  --line:#d9d0bc; --gold:#6d5514; --gold-hi:#8a6d1f;
  --shadow:rgba(90,70,20,.10);
  --sp:16px;
  --ui:"Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --book:"Frank Ruhl Libre","Times New Roman",Georgia,serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#141a2e; --panel:#1b2340; --panel2:#161d36;
  --ink:#f4ead2; --ink-soft:#cfc7b4; --muted:#8e98b8;
  --line:#2f3a5e; --gold:#e8c56a; --gold-hi:#c9a227;
  --shadow:rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --paper:#141a2e; --panel:#1b2340; --panel2:#161d36;
  --ink:#f4ead2; --ink-soft:#cfc7b4; --muted:#8e98b8;
  --line:#2f3a5e; --gold:#e8c56a; --gold-hi:#c9a227;
  --shadow:rgba(0,0,0,.45);
}

html{overflow-x:clip}
html,body{height:auto}
body{
  background:var(--paper); color:var(--ink); font-family:var(--ui);
  font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%;
}

#gate{ max-width:960px; margin:0 auto; padding:calc(var(--sp) * 2) var(--sp) var(--sp); }

.brand{ text-align:center; padding:calc(var(--sp) * 1.5) 0 calc(var(--sp) * 2); }
.brand h1{
  font-family:var(--book); font-weight:500; font-size:30px; line-height:1.25;
  letter-spacing:.01em;
}
.brand h1 em{ font-style:normal; color:var(--gold); padding:0 .15em }
/* The dedication is the reason the site exists. It is quiet on purpose —
   set apart, never decorated, never competing with the doors. */
.ded{
  margin-top:10px; font-family:var(--book); font-size:14.5px;
  color:var(--muted); letter-spacing:.02em;
}

.worlds{ list-style:none; display:grid; gap:14px; }
@media (min-width:760px){ .worlds{ grid-template-columns:repeat(3,1fr) } }

.w{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:20px 18px 18px; display:flex; flex-direction:column; gap:6px;
  box-shadow:0 1px 2px var(--shadow);
}
.w h2{ font-family:var(--book); font-weight:500; font-size:23px; color:var(--gold) }
.sub{ font-size:13.5px; color:var(--muted) }
.have{
  font-size:14px; color:var(--ink-soft); margin-top:8px; min-height:2.8em;
  font-variant-numeric:tabular-nums;
}
/* A world with nothing in it is greyed and says so — it is NOT hidden.
   Hiding it would answer the owner's ruling ("not gated") with a gate. */
.w.empty{ opacity:.72 }
.w.empty .go{ pointer-events:none; opacity:.45 }

.go{
  margin-top:auto; align-self:flex-start;
  padding:12px 20px; border-radius:99px; border:1px solid var(--gold);
  color:var(--gold); text-decoration:none; font-size:15px; font-weight:600;
  min-height:44px; display:inline-flex; align-items:center;
  transition:background .16s, color .16s;
}
.go:hover{ background:var(--gold); color:var(--paper) }

.note{
  margin-top:18px; padding:12px 14px; border-radius:10px;
  background:var(--panel2); border:1px solid var(--line);
  font-size:13.5px; color:var(--muted);
}
.note[hidden]{ display:none }

.foot{
  margin-top:calc(var(--sp) * 2); padding-top:14px; border-top:1px solid var(--line);
  text-align:center; font-size:12px; color:var(--muted);
}

@media (prefers-reduced-motion:reduce){ *{ transition:none !important } }