/* The three rooms: /events, /forum, /jobs. Loaded on top of base.css.
   One colour per room, used for the nav marker and any accents inside it. */
:root { --k-event: var(--hot); --k-forum: #7ec8a9; --k-job: var(--glow); }

body { padding: 0 var(--gutter) 90px; }
.heat { margin: 0 calc(-1 * var(--gutter)); }

/* room switcher */
.rooms { max-width: 1060px; margin: 0 auto; display: flex; align-items: center; gap: 26px;
  padding: 20px 0 16px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.rooms .mark { font: 900 26px/1 var(--display); text-decoration: none; letter-spacing: .02em; }
.rooms a:not(.mark) { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.rooms a:not(.mark):hover { color: var(--ink); }
.rooms a.on { color: var(--ink); }
.rooms a.on.event { border-bottom-color: var(--k-event); }
.rooms a.on.forum { border-bottom-color: var(--k-forum); }
.rooms a.on.job { border-bottom-color: var(--k-job); }
.rooms .right { margin-left: auto; }

.room { max-width: 1060px; margin: 0 auto; padding-top: clamp(26px, 5vh, 52px); }
.room.narrow, .room.thread { max-width: 720px; }
.roomhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.roomhead h1 { font-size: clamp(50px, 10vw, 104px); margin: 6px 0 0; }
.roomlede { color: var(--ink-dim); margin: 14px 0 0; max-width: 46ch; }
.room.narrow h1 { font-size: clamp(46px, 9vw, 84px); margin-bottom: 14px; }
.crumb { margin: 0 0 22px; }
.sec { margin: 34px 0 14px; display: flex; align-items: center; gap: 16px; }
.sec::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.empty-room { color: var(--ink-dim); font-size: 19px; border-left: 3px solid var(--rule); padding-left: 20px; margin: 30px 0; }

/* ---------- forum index ---------- */
.threads { border-top: 1px solid var(--rule); }
.trow { display: grid; grid-template-columns: minmax(0,1fr) 78px 120px; gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--rule); }
.trow.pinned { background: linear-gradient(90deg, rgba(126,200,169,.06), transparent 55%); }
.trow h2 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin: 0 0 5px; line-height: 1.3; }
.trow h2 a { text-decoration: none; }
.trow:hover h2 a { color: var(--white-hot); }
.tmeta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); margin: 0; }
.tmeta .by { color: var(--k-forum); }
.tcount { text-align: center; font-family: var(--mono); }
.tcount b { display: block; font: 900 26px/1 var(--display); color: var(--ink); }
.tcount span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.tlast { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); text-align: right; }
.flag { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 2px 6px; margin-right: 9px; }
.flag.pin { color: var(--k-forum); }
.flag.lock { color: var(--ink-dim); }

/* ---------- a thread ---------- */
.thead { border-bottom: 1px solid var(--rule); padding-bottom: 18px; margin-bottom: 4px; }
.thead h1 { font-size: clamp(34px, 6vw, 56px); margin: 0 0 12px; }
.post { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.post.op { font-size: 18px; }
.post.op .ptext p:first-child { margin-top: 0; }
.pmeta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.pmeta .by { color: var(--k-forum); }
.pmeta .pact { margin-left: auto; }
.ptext p { margin: 0 0 14px; }
.ptext p:last-child { margin-bottom: 0; }
.ptext a { color: var(--glow); word-break: break-word; }

.replyform, .newform { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.replyform textarea, .newform textarea, .newform input {
  width: 100%; background: var(--bg-2); color: var(--ink); border: 1px solid var(--rule);
  font: 400 16px/1.5 var(--serif); padding: 14px; outline: none; resize: vertical; }
.newform input { font-family: var(--serif); font-size: 18px; }
.replyform textarea:focus, .newform textarea:focus, .newform input:focus { border-color: var(--k-forum); }
.formrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.signedout { color: var(--ink-dim); font-family: var(--mono); font-size: 13.5px; margin-top: 26px;
  border: 1px dashed var(--rule); padding: 18px; }
button.link { background: none; border: 0; padding: 0; font-family: var(--mono); font-size: 12px;
  color: var(--glow); cursor: pointer; border-bottom: 1px solid var(--rule); }
button.link:hover { border-bottom-color: var(--glow); }
.link.danger, button.link.danger { color: #ff7a5c; text-decoration: none; font-family: var(--mono); font-size: 12px; border-bottom: 1px solid var(--rule); }
.modbar { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.modbar form { display: inline; }

/* ---------- events room ---------- */
.ticket { display: grid; grid-template-columns: 160px minmax(0, 1fr); border: 1px solid var(--rule);
  background: var(--bg-2); position: relative; margin-bottom: 22px; }
.ticket::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--heat); }
.stub { padding: 28px 22px; border-right: 1px dashed #4a3a30; font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); display: flex; flex-direction: column; line-height: 1.5; }
.stub .day { font: 900 84px/.9 var(--display); color: var(--ink); letter-spacing: 0; margin: 4px 0 6px -3px; }
.stub .day.small { font-size: 52px; letter-spacing: .02em; }
.stub .t { color: var(--glow); margin-top: auto; padding-top: 16px; }
.tbody { padding: 26px 28px; }
.tbody h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(32px, 4.4vw, 52px); line-height: .88; margin: -3px 0 10px; }
.tbody .where { margin: 0 0 14px; font-size: 17px; }
.tbody .where .addr { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }
.tbody .blurb { margin: 0 0 8px; }
.tbody .people { margin: 0 0 18px; color: var(--ink-dim); font-size: 15.5px; }
.acts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.acts .cd { margin-left: auto; color: var(--glow); }
.prow { display: grid; grid-template-columns: 116px minmax(0,1fr) auto; gap: 8px 20px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--rule); color: var(--ink-dim); }
.prow:last-child { border-bottom: 1px solid var(--rule); }
.ptitle { font-size: 24px; color: var(--ink); font-weight: 800; font-family: var(--display); text-transform: uppercase; }
.ptitle small { font-family: var(--serif); font-weight: 400; text-transform: none; font-size: 14.5px; color: var(--ink-dim); margin-left: 10px; letter-spacing: 0; }

/* ---------- jobs: not open yet ---------- */
.soon { border: 1px solid var(--rule); background: var(--bg-2); padding: 34px 32px; position: relative; margin: 8px 0 30px; max-width: 620px; }
.soon::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--k-job); }
.soon h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 30px; margin: 0 0 12px; }
.soon p { margin: 0 0 14px; }
.soon ul { margin: 0 0 16px; padding-left: 20px; color: var(--ink-dim); }
.soon li { margin-bottom: 8px; }

@media (max-width: 760px) {
  .trow { grid-template-columns: minmax(0,1fr) auto; }
  .tlast { display: none; }
  .ticket { grid-template-columns: 1fr; }
  .stub { border-right: 0; border-bottom: 1px dashed #4a3a30; flex-direction: row; flex-wrap: wrap;
    align-items: baseline; gap: 0 12px; padding: 20px; }
  .stub .day { font-size: 56px; margin: 0; }
  .stub .day.small { font-size: 40px; }
  .stub .t { margin: 0; padding: 0; width: 100%; }
  .tbody { padding: 22px 20px; }
  .prow { grid-template-columns: 1fr; gap: 2px; }
  .roomhead { align-items: flex-start; }
}