:root { color-scheme: dark; --bg:#07080c; --ink:#f4f1ea; --muted:#a39b90; --line:rgba(255,255,255,.14); --card:#101218; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 Manrope, ui-sans-serif, system-ui, sans-serif; }
a { color:inherit; }
.top { position:absolute; z-index:5; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:22px 4vw; mix-blend-mode:difference; }
.mark { font-family:Syne, sans-serif; font-weight:800; letter-spacing:-.06em; text-decoration:none; font-size:1.35rem; }
nav { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font-size:.92rem; }
nav a { text-decoration:none; opacity:.85; }
nav a.write { opacity:1; border:1px solid currentColor; border-radius:999px; padding:7px 14px; }
.who { opacity:.7; }
main { padding:0 0 80px; }
h1, h2 { font-family:Syne, sans-serif; font-weight:750; letter-spacing:-.045em; }
.reel { position:relative; height:100vh; min-height:640px; overflow:hidden; background:#000; }
.slide { position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.2s ease; pointer-events:none; }
.slide.on { opacity:1; z-index:1; }
.slide img, .slide video { width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation:drift 22s ease-in-out infinite alternate; filter:saturate(1.05) contrast(1.05); }
.slide figcaption { position:absolute; left:6vw; bottom:14vh; z-index:2; max-width:18ch; }
.slide h1 { margin:0; font-size:clamp(3.2rem, 8vw, 7.4rem); line-height:.9; color:#fff; }
.slide p { margin:14px 0 0; max-width:36ch; color:rgba(255,255,255,.82); font-size:1.05rem; }
.kicker { display:none; }
.reel::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.15) 40%, rgba(0,0,0,.72)); z-index:1; pointer-events:none; }
.soundbox { position:absolute; right:4vw; top:88px; z-index:6; width:min(320px, 86vw); padding:14px 14px 12px; background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.28); border-radius:16px; }
.soundbox p { margin:0 0 8px; font-family:Syne, sans-serif; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; }
.soundbox audio, .soundbox video.song { width:100%; max-height:42vh; background:#000; border-radius:10px; }
.sound-note { margin:8px 0 0 !important; letter-spacing:0 !important; text-transform:none !important; font-family:Manrope, sans-serif !important; font-weight:400 !important; font-size:.85rem !important; color:rgba(255,255,255,.8); }
.slide video { pointer-events:auto; }

.reel-ui { position:absolute; left:6vw; bottom:6vh; display:flex; gap:10px; align-items:center; z-index:8; pointer-events:auto; }
.reel-ui button, .reel-join { border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.45); color:#fff; border-radius:999px; padding:12px 18px; text-decoration:none; font:600 14px/1 Manrope, sans-serif; cursor:pointer; }
.reel-ui .reel-sound { background:#f4f1ea; color:#111; border-color:#f4f1ea; padding:14px 22px; font-weight:700; }
.reel-ui .reel-sound[aria-pressed="true"] { background:#111; color:#f4f1ea; }
.reel-join { background:#f4f1ea; color:#111; border-color:#f4f1ea; }
@keyframes drift { from { transform:scale(1.06); } to { transform:scale(1.14) translate3d(-1.2%, -1%, 0); } }
.intro { max-width:1100px; margin:0 auto; padding:72px 6vw 10px; display:flex; justify-content:space-between; gap:24px; align-items:end; }
.intro h2 { font-size:clamp(2rem, 4vw, 3.4rem); margin:0; }
.intro p { margin:0; color:var(--muted); max-width:28ch; }
.feed { max-width:1100px; margin:0 auto; padding:10px 6vw 0; }
.card { display:grid; grid-template-columns:140px 1fr; gap:18px 28px; padding:28px 0; border-top:1px solid var(--line); background:transparent; border-radius:0; }
.card h2 { margin:0; font-size:clamp(1.6rem, 3vw, 2.4rem); }
.card h2 a { text-decoration:none; }
.kind { margin:8px 0 0; text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--muted); }
.by { color:var(--muted); margin:8px 0 0; }
.card > p:last-child { grid-column:2; margin:0; color:#d9d3c8; }
.card img { grid-column:1 / -1; width:100%; max-height:520px; object-fit:cover; border-radius:0; }
.empty, .lede, .fine { max-width:1100px; margin:24px auto; padding:0 6vw; color:var(--muted); }
.card.single, .comments { max-width:860px; margin:0 auto; padding:120px 6vw 0; }
.card.single { display:block; border:0; }
.card.single img { max-height:none; margin:18px 0; }
.comments h2 { font-size:2rem; }
.comments .card { display:block; }
form.stack, .comments form, .admin { max-width:860px; margin:18px auto; padding:0 6vw; display:grid; gap:14px; }
label { display:grid; gap:6px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
input, textarea, select { font:16px/1.4 Manrope, sans-serif; padding:14px 14px; border:1px solid var(--line); border-radius:0; background:#0c0e14; color:var(--ink); }
textarea { min-height:160px; }
button { justify-self:start; background:#f4f1ea; color:#111; border:0; border-radius:999px; padding:12px 18px; font:600 14px/1 Manrope, sans-serif; cursor:pointer; }
button.danger { background:transparent; color:#f0b4a2; }
label.check { text-transform:none; letter-spacing:0; display:flex; gap:8px; align-items:center; color:var(--ink); }
.error { color:#f0b4a2; max-width:860px; margin:12px auto; padding:0 6vw; }
h1 { font-size:clamp(2.6rem, 6vw, 4.5rem); margin:0 0 12px; }
footer { display:flex; justify-content:space-between; gap:16px; padding:28px 6vw; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
footer p { margin:0; }
@media (max-width:720px) {
  .top { mix-blend-mode:normal; background:linear-gradient(#000, transparent); }
  .card { grid-template-columns:1fr; }
  .card > p:last-child { grid-column:1; }
  .intro { display:block; }
  .reel { height:100svh; }
  nav a:not(.write):not(.mark) { display:none; }
  nav a.write, nav a[href="/login.php"], nav a[href="/logout.php"], nav a[href="/forum.php"], nav a[href="/news.php"] { display:inline; }
  .roomlist a.room { grid-template-columns: 1fr; }
}

body.sub .page { max-width:1100px; margin:0 auto; padding:120px 6vw 24px; }
body.sub .page .lede,
body.sub .page .fine,
body.sub .page .empty,
body.sub .page .error,
body.sub .page form.stack,
body.sub .page .comments,
body.sub .page .comments form { max-width:none; margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
body.sub .page .comments { padding-top:28px; }
body.sub .page .feed { max-width:none; padding-left:0; padding-right:0; }
body.sub .page .kind a { color:var(--muted); text-decoration:none; }
.roomlist { margin-top:12px; }
.roomlist a.room { display:grid; grid-template-columns:140px 1fr minmax(16ch, 28ch); gap:8px 28px; align-items:baseline; padding:28px 0; border-top:1px solid var(--line); text-decoration:none; }
.roomlist a.room:last-child { border-bottom:1px solid var(--line); }
.roomlist a.room strong { font-family:Syne, sans-serif; font-weight:750; letter-spacing:-.045em; font-size:clamp(1.7rem, 3vw, 2.6rem); }
.roomlist .blurb { color:var(--muted); }
.thread h1 { margin-top:10px; }
.thread .body { max-width:62ch; color:#d9d3c8; }
.subhead { font-size:clamp(1.6rem, 3vw, 2.2rem); margin:42px 0 0; }

.filters { max-width:1100px; margin:0 auto; padding:18px 6vw 0; display:flex; flex-wrap:wrap; gap:10px 18px; }
.filters a { color:var(--muted); text-decoration:none; text-transform:uppercase; letter-spacing:.16em; font-size:11px; }
.filters a.on { color:var(--ink); }
.card.news-item { display:block; }
.card.news-item > p:last-child { grid-column:auto; }
.news-item .source { margin:10px 0 0; }
.news-item .source a { color:var(--ink); }
.news-item .when { color:var(--muted); margin:6px 0 0; font-size:.9rem; }

.card video, .card audio, .card object.piece, .single video, .single audio, .single object.piece { grid-column:1 / -1; width:100%; max-height:70vh; background:#000; }
.card audio, .single audio { background:transparent; }

.feed-sound { display:block; width:min(420px, 100%); margin-top:16px; }