/* LOWPRIV · The Gate
   Bone on black. The dot is the only colour. Headlines widen as privilege rises (Archivo's width axis).
   Mono only where the machine speaks: the log, links, flags. */
@font-face{font-family:A;src:url(/fonts/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:M;src:url(/fonts/jbm-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:M;src:url(/fonts/jbm-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--bg:#0B0B0B;--ink:#ECEAE4;--mute:#8C8B86;--dim:#5C5B57;--line:#262624;--box:#131312;--o:#FF4F00;--gut:20px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 A,system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100svh}
a{color:inherit}
::selection{background:var(--o);color:var(--bg)}
:focus-visible{outline:2px solid var(--o);outline-offset:3px}
button{font:inherit}

/* ---------- frame ---------- */
.col{max-width:1240px;margin:0 auto;padding:0 var(--gut) calc(28px + env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "rings" "view" "foot"}
.top{grid-area:top;display:flex;justify-content:space-between;align-items:baseline;padding-top:22px}
.brand{font:900 17px/1 A;font-stretch:125%;letter-spacing:.01em;text-decoration:none}
.brand .u{color:var(--o)}
.count{font:400 12px/1 M;color:var(--mute)}
#rings{grid-area:rings;display:block;width:min(74vw,330px);height:auto;margin:40px auto 36px;overflow:visible}
.view{grid-area:view;width:100%;max-width:470px}
.foot{grid-area:foot;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:64px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}

/* ---------- type ---------- */
.hero{font:600 46px/.96 A;font-stretch:70%;letter-spacing:-.005em;margin:0 0 18px;text-wrap:balance;transition:font-stretch .9s cubic-bezier(.2,.7,.2,1),font-weight .9s}
.lede{font-size:16px;line-height:1.5;color:var(--mute);margin:0 0 30px;max-width:34ch}
.vh{font:600 30px/1.05 A;font-stretch:78%;margin:0 0 28px}
.who{font:400 12.5px/1.5 M;color:var(--mute);margin:0 0 14px}
.level[data-ring="3"]{font-stretch:70%;font-weight:600}
.level[data-ring="2"]{font-stretch:86%;font-weight:650}
.level[data-ring="1"]{font-stretch:104%;font-weight:720}
.level[data-ring="0"]{font-stretch:125%;font-weight:800}
.fine{font-size:12.5px;line-height:1.6;color:var(--mute);margin:18px 0 0}
.fine a{color:var(--ink)}

/* ---------- the log ---------- */
.term{font:400 12px/1.8 M;color:var(--mute);white-space:pre-wrap;margin:0 0 22px;min-height:7.2em}
.term .o{color:var(--ink)}.term .gr{color:var(--dim)}
.term.small{min-height:0;margin:14px 0 0}
.term.small:empty{display:none}

/* ---------- controls ---------- */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 22px;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--bg);font:600 15px/1 A;font-stretch:110%;letter-spacing:.005em;cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s}
.btn:hover{background:transparent;color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{background:var(--ink);color:var(--bg)}
.btn.sm{width:auto;flex:none;min-height:46px;padding:0 18px;font-size:13.5px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--dim)}
.btn.ghost:hover{border-color:var(--ink)}
.textlink{display:inline-block;background:none;border:0;padding:0;color:var(--mute);font:400 14px/1.4 A;text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:5px;cursor:pointer}
.textlink:hover{color:var(--ink);text-decoration-color:var(--ink)}
.textlink.after{margin-top:22px}
.field{display:block;margin:0 0 26px;font-size:13px;line-height:1.4;color:var(--mute)}
.field input{display:block;width:100%;margin-top:8px;padding:8px 0 12px;background:transparent;border:0;border-bottom:1px solid var(--dim);border-radius:0;color:var(--ink);font:400 19px/1.3 A;outline:none}
.field input:focus{border-bottom-color:var(--ink)}
.field input::placeholder{color:var(--dim)}
.chk{display:flex;gap:14px;align-items:flex-start;margin:0 0 26px;font-size:14px;line-height:1.5;color:var(--ink);cursor:pointer}
.chk input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-content:center;width:20px;height:20px;margin:1px 0 0;border:1px solid var(--mute);border-radius:0;background:transparent;cursor:pointer}
.chk input::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--o);transform:scale(0);transition:transform .14s}
.chk input:checked{border-color:var(--ink)}
.chk input:checked::before{transform:scale(1)}
.chk a{color:var(--ink)}
.box{flex:1;min-width:0;height:46px;padding:0 12px;background:var(--box);border:1px solid var(--line);border-radius:0;color:var(--ink);font:400 16px M;outline:none}
.box:focus{border-color:var(--mute)}
.linkbox{display:block;margin:0;line-height:44px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:all}
.box::placeholder{color:var(--dim)}
#ts,#ts2{min-height:65px;margin:0 0 20px}

/* ---------- status ---------- */
.sec{border-top:1px solid var(--line);padding:24px 0 30px}
.sec h2{font:600 15px/1.3 A;font-stretch:108%;margin:0 0 12px}
.sec p{margin:0 0 4px;font-size:15px}
.row{display:flex;gap:10px;align-items:stretch}
.share{display:flex;gap:24px;margin-top:16px}
.bar{height:2px;background:var(--line);margin-top:18px}
#nextPanel{padding-bottom:0}
#nextPanel:not([hidden]) + .sec{border-top:0}
.bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.ladder ol{list-style:none;margin:0;padding:0}
.ladder li{display:grid;grid-template-columns:10px 64px 1fr;gap:0 14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--mute)}
.ladder li::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--dim);transform:translateY(-1px)}
.ladder li b{font-weight:600;color:var(--ink)}
.ladder li i{font-style:normal;white-space:nowrap}
.ladder li.me{color:var(--ink)}
.ladder li.me::before{background:var(--o);border-color:var(--o)}
.alerts{display:flex;justify-content:space-between;align-items:center;gap:18px}
.alerts p{margin:0;color:var(--mute);font-size:14px}
#out{margin-top:8px}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);background:var(--ink);color:var(--bg);font:500 14px/1.4 A;padding:13px 18px;z-index:10}

/* ---------- plain pages (/in, /unsubscribe, /root, 404, privacy) ---------- */
body.plain .col{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "view" "foot";min-height:100vh;min-height:100svh;grid-template-rows:auto 1fr auto}
.page{grid-area:view;width:100%;max-width:560px;padding:16vh 0 0}
.page h1{font:600 42px/1 A;font-stretch:80%;margin:0 0 18px;text-wrap:balance}
.page h2{font:600 15px/1.3 A;font-stretch:108%;margin:0 0 8px}
.page p{margin:0 0 14px;color:var(--mute)}
.page p a,.page .fine a{color:var(--ink)}
.page form{margin-top:30px}
.page .btn{max-width:420px}
.page .fine{margin-top:26px;max-width:46ch}
.page .sec p{color:var(--ink)}
.page .back{display:inline-block;margin-top:14px}

/* ---------- desktop: rings pinned left, content right ---------- */
@media (min-width:960px){
  :root{--gut:48px}
  .col{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:72px;grid-template-areas:"top top" "rings view" "foot foot";align-items:start}
  #rings{position:sticky;top:14vh;width:min(40vw,540px);margin:14vh auto 0}
  .view{padding-top:16vh}
  .hero{font-size:78px}
  .vh{font-size:38px}
  .foot{margin-top:120px}
  .page h1{font-size:58px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}