/* MUC — muc.holdings · shared styles */
:root{--bg:#0A0A0A;--ink:#E8E6E1;--mute:#8A8780;--dim:#6E6B65;--line:#2A2927;--line2:#3A3936;--amber:#F2C230;--red:#E0242F}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter Tight',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--mute);text-decoration:none}a:hover{color:var(--ink)}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}
.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.grain{position:absolute;inset:0;width:100%;height:100%;opacity:.09;pointer-events:none}
.bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:28px 40px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--dim);position:relative}
.bar a{color:var(--dim)}.bar a:hover{color:var(--ink)}
.main{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 24px;position:relative}
.f{display:flex;border:1px solid var(--line2)}
.f input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:15px;padding:14px 16px;outline:none}
.f input::placeholder{color:#4A4946}
.f button{background:var(--ink);color:var(--bg);border:0;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;padding:0 22px;min-height:48px;cursor:pointer}
.f button:hover{background:#fff}
label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--mute)}
.note{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;color:var(--dim);min-height:1.5em}
.note.bad{color:var(--red)}
@media (max-width:640px){.bar{padding:20px 20px;font-size:11px}.main{padding:32px 18px}}

/* site tree — appears on every gated page */
.tree{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;padding:0 40px 8px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;position:relative}
.tree a{color:var(--dim);padding:6px 0;border-bottom:1px solid transparent}
.tree a:hover,.tree a.on{color:var(--ink);border-bottom-color:var(--amber)}
.row .go{text-align:right;color:var(--dim)}a.row:hover .go{color:var(--amber)}
@media (max-width:640px){.tree{gap:16px;padding:0 20px 8px;font-size:10px}}