/* Birthday Club: "doorman's list" brutalist. Ruled lines, no boxes, no gradients, no rounded corners.
   Bone/ink by day, flips to night palette after 6pm CT (body.night, set in app.js). Red accent only. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700&family=Archivo+Black&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --paper: #ece7dc;
  --ink: #14120f;
  --dim: #6f6a5e;
  --red: #d92b21;
  --rule: #14120f;
}
body.night {
  --paper: #14120f;
  --ink: #ece7dc;
  --dim: #8d887b;
  --rule: #ece7dc;
}
* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  line-height: 1.4;
  min-height: 100vh;
}
.mono { font-family: 'IBM Plex Mono', monospace; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 80px; }

/* masthead */
header.site {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 18px 0 12px; border-bottom: 3px solid var(--rule);
}
.logo {
  font-family: 'Archivo Black', sans-serif; font-size: 1.05rem; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; text-transform: uppercase;
}
.logo .dot { color: var(--red); }
header.site .tag { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; text-transform: uppercase; color: var(--dim); }

/* ticker */
.ticker {
  border-bottom: 1px solid var(--rule); overflow: hidden; white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace; font-size: .74rem; text-transform: uppercase;
  padding: 7px 0; color: var(--ink);
}
.ticker span { display: inline-block; padding-right: 4em; animation: tick 28s linear infinite; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker span { animation: none; } }

/* display type */
.hero { padding: 44px 0 10px; }
.hero h1 {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(2.1rem, 9vw, 4.4rem); line-height: .96; letter-spacing: -.01em;
}
.hero h1 em { font-style: normal; color: var(--red); }
.hero p.sub { font-size: 1.02rem; max-width: 52ch; margin: 22px 0 6px; color: var(--ink); }

h2 {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 1rem;
  letter-spacing: .04em; padding: 10px 0; border-top: 3px solid var(--rule); margin-top: 40px;
}
.meta { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--dim); text-transform: uppercase; }

/* the list */
.roster { border-top: 2px solid var(--rule); margin-top: 8px; }
.row {
  display: grid; grid-template-columns: 4.5em 1fr auto; gap: 12px; align-items: baseline;
  border-bottom: 1px solid var(--rule); padding: 9px 0;
  font-family: 'IBM Plex Mono', monospace; font-size: .92rem; text-transform: uppercase;
}
.row .no { color: var(--dim); }
.row .ok { color: var(--red); }
.row.you { background: var(--ink); color: var(--paper); padding-left: 8px; padding-right: 8px; }
.row.empty { color: var(--dim); }

/* spec/steps */
.steps { border-top: 2px solid var(--rule); }
.steps div {
  display: grid; grid-template-columns: 4.5em 1fr; gap: 12px;
  border-bottom: 1px solid var(--rule); padding: 12px 0; font-size: .96rem;
}
.steps div::before { content: none; }
.steps .no { font-family: 'IBM Plex Mono', monospace; color: var(--red); }
.steps b { text-transform: uppercase; }

/* forms */
label {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  text-transform: uppercase; color: var(--dim); margin: 22px 0 2px;
}
input, select {
  width: 100%; padding: 8px 0; border: 0; border-bottom: 2px solid var(--rule);
  background: transparent; color: var(--ink);
  font-family: 'IBM Plex Mono', monospace; font-size: 1.05rem; text-transform: uppercase;
}
input:focus, select:focus { outline: none; border-bottom-color: var(--red); }
input::placeholder { color: var(--dim); opacity: .6; }
.hint { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; color: var(--dim); margin-top: 6px; text-transform: uppercase; }

.btn {
  display: block; width: 100%; margin-top: 28px; padding: 16px 20px;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
  font-family: 'Archivo Black', sans-serif; font-size: .95rem; text-transform: uppercase;
  letter-spacing: .05em; cursor: pointer; text-align: left; text-decoration: none;
}
.btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: transparent; color: var(--red); border-color: var(--red); }
.btn[disabled] { opacity: .5; cursor: wait; }

.error { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--red); margin-top: 12px; min-height: 1.2em; text-transform: uppercase; }
.error .ok, .ok { color: inherit; }
p.ok { font-family: 'IBM Plex Mono', monospace; font-size: .85rem; text-transform: uppercase; margin-top: 14px; }

/* legacy class names redefined so admin/privacy markup needs no restructure */
.card { border-top: 3px solid var(--rule); padding: 14px 0 22px; margin: 26px 0 0; background: none; border-left: 0; border-right: 0; border-bottom: 0; }
.card h2 { border-top: 0; margin-top: 0; padding-top: 0; }
.pill {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  text-transform: uppercase; border: 0; color: var(--ink); margin: 0 14px 4px 0; padding: 0;
}
.pill::before { content: '[ '; color: var(--dim); }
.pill::after { content: ' ]'; color: var(--dim); }
.pill.hot { color: var(--red); }
.twins { margin-top: 10px; }

/* chat = radio log */
#chatlog { height: 320px; overflow-y: auto; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); padding: 8px 0; margin-top: 8px; }
.msg { font-family: 'IBM Plex Mono', monospace; font-size: .88rem; padding: 3px 0; max-width: none; }
.msg .who { display: inline; font-size: inherit; color: var(--red); text-transform: uppercase; font-weight: 600; }
.msg .who::after { content: ':'; color: var(--ink); }
.msg .who a { color: var(--dim); text-decoration: none; font-weight: 400; }
.msg .txt { display: inline; background: none; border: 0; padding: 0 0 0 6px; overflow-wrap: break-word; }
.msg.mine .who { color: var(--ink); background: none; }
.chatrow { display: flex; gap: 0; margin-top: 14px; }
.chatrow input { flex: 1; }
.chatrow button { width: auto; margin: 0 0 0 14px; padding: 10px 18px; }

footer {
  margin-top: 70px; border-top: 3px solid var(--rule); padding-top: 14px;
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--dim); text-transform: uppercase;
}
footer a { color: var(--dim); }
.hidden { display: none !important; }