/* ═══════════════════════════════════════════════════════════════
FRONTLINEWORLD — FORUM COMPONENTS
Requires tokens.css.
Order:
01 base
02 primitives buttons, pills, avatars, prefixes
03 chrome masthead, community bar, search, breadcrumb
04 page head
05 index category, forum row, compact topic list
06 sidebar panels, blog, trending
07 board filters, groups, topic rows, last post
08 thread tabs, toolbar, post, rail, body, reactions
09 editor
10 states empty, removed, banned
11 pagination
12 footer
13 motion
14 responsive
Naming: block__element--modifier. A modifier never changes
layout of anything but its own block.
═══════════════════════════════════════════════════════════════ */
/* ══ 01 BASE ═══════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
margin:0;
background:var(--ink);
color:var(--bone);
font-family:var(--sans);
font-size:var(--t-body);
line-height:var(--lh-ui);
letter-spacing:var(--ls-body);
font-weight:var(--wt-body);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* grain, so flat black is not flat plastic */
body::after{
content:""; position:fixed; inset:-50%;
pointer-events:none; z-index:9999; opacity:.035;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{ background:var(--signal); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:1px; }
h1,h2,h3{ margin:0; font-weight:var(--wt-black); line-height:var(--lh-tight); letter-spacing:-.024em; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.skip{
position:absolute; left:-9999px; top:0; z-index:200;
background:var(--signal); color:var(--ink); padding:.75rem 1.15rem;
font-family:var(--mono); font-size:var(--t-micro);
letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ left:.5rem; top:.5rem; }
/* ══ 02 PRIMITIVES ═════════════════════════════════════════════ */
/* ── button ─────────────────────────────────────────────────────
One filled button per view. Everything else is ghost or quiet. */
.btn{
font-family:var(--mono); font-size:var(--t-label); font-weight:500;
letter-spacing:.1em; text-transform:uppercase;
padding:.7rem 1.1rem; border-radius:var(--radius);
border:var(--hair) solid transparent; cursor:pointer;
display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
transition:background-color var(--t-hover) var(--ease),
color var(--t-hover) var(--ease),
border-color var(--t-hover) var(--ease),
transform .12s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn svg{ flex:none; }
.btn--primary{ background:var(--signal); color:var(--ink); font-weight:var(--wt-med); }
.btn--primary:hover{ background:var(--signal-lift); }
.btn--ghost{ background:transparent; color:var(--bone); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ash); background:var(--panel); }
.btn--quiet{ background:transparent; color:var(--ash); padding-inline:.4rem; }
.btn--quiet:hover{ color:var(--bone); }
.btn--lg{ padding:.9rem 1.35rem; font-size:var(--t-micro); }
.btn--danger{ background:transparent; color:var(--signal); border-color:var(--line-hot); }
.btn--danger:hover{ background:var(--wash-signal); }
.btn[disabled], .btn--off{ opacity:.35; pointer-events:none; }
/* ── tag: a bare mono label, no box ──────────────────────────── */
.tag{
font-family:var(--mono); font-size:var(--t-tiny); font-weight:500;
letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--ash);
}
/* ── pill: a bordered micro label ────────────────────────────── */
.pill{
display:inline-block;
font-family:var(--mono); font-size:var(--t-tiny); font-weight:500;
letter-spacing:var(--tr-label); text-transform:uppercase;
padding:.1rem .35rem; border:var(--hair) solid var(--line);
border-radius:var(--radius); color:var(--ash);
}
.pill--signal{ color:var(--signal); border-color:var(--line-hot); background:var(--wash-signal); }
.pill--quiet{ color:var(--dim); }
/* ── chip: a larger status label, for page heads ─────────────── */
.chip{
font-family:var(--mono); font-size:var(--t-tiny); font-weight:500;
letter-spacing:var(--tr-caps); text-transform:uppercase;
padding:.3rem .55rem; border:var(--hair) solid var(--line);
border-radius:var(--radius); color:var(--ash);
}
.chip--pin{ color:var(--signal); border-color:var(--line-hot); background:rgba(255,59,47,.06); }
.chip--lock{ color:var(--ash); }
/* ── prefix: the bracketed mono tag on a topic title ─────────── */
.pre{
font-family:var(--mono); font-size:var(--t-label); font-weight:500;
letter-spacing:.06em; color:var(--signal);
}
.pre--muted{ color:var(--dim); } /* resolved, closed, denied */
/* ── avatar ──────────────────────────────────────────────────────
Square, because every other rounded thing was removed. The
tint set is fixed and assigned by hash, not by taste. */
.av{
width:var(--avatar); height:var(--avatar); border-radius:var(--radius);
border:var(--hair) solid var(--line);
display:grid; place-items:center; user-select:none;
font-family:var(--mono); font-size:var(--t-micro); font-weight:var(--wt-med);
color:var(--bone); background:var(--wash-flat);
}
.av--sm{ width:var(--avatar-sm); height:var(--avatar-sm); font-size:var(--t-label); }
.av--lg{ width:var(--avatar-lg); height:var(--avatar-lg); font-size:2rem; }
.av--a{ background:rgba(255,59,47,.14); border-color:var(--line-hot); }
.av--b{ background:var(--wash-bone); }
.av--c{ background:var(--wash-blood); border-color:var(--line-hot); }
.av--d{ background:var(--wash-ash); }
/* ── presence ────────────────────────────────────────────────── */
.pip{ width:6px; height:6px; border-radius:50%; background:var(--dim); flex:none; }
.pip--on{ background:var(--signal); }
.dot{
width:6px; height:6px; border-radius:50%; background:var(--signal); flex:none;
animation:ping 2.6s infinite;
}
@keyframes ping{
0% { box-shadow:0 0 0 0 rgba(255,59,47,.5); }
70% { box-shadow:0 0 0 7px rgba(255,59,47,0); }
100%{ box-shadow:0 0 0 0 rgba(255,59,47,0); }
}
@media (prefers-reduced-motion:reduce){ .dot{ animation:none; } }
/* ── rank: a meter, not a rating ─────────────────────────────────
Stars imply quality. This measures tenure, so it reads as a
meter. Staff fill bone so authority and tenure stay distinct. */
.rank{ display:flex; gap:3px; margin:0; }
.rank i{ width:14px; height:4px; background:var(--line); border-radius:1px; }
.rank i.on{ background:var(--signal); }
.rank--staff i.on{ background:var(--bone); }
.caret{ width:7px; height:7px; flex:none; opacity:.7; }
/* ══ 03 CHROME ═════════════════════════════════════════════════ */
.mast{
position:sticky; top:0; z-index:100;
background:rgba(11,11,12,.86);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
border-bottom:var(--hair) solid var(--line);
}
.mast__in{
display:flex; align-items:center; gap:var(--s3); height:var(--bar);
max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}
.mark{
font-family:var(--mono); font-weight:var(--wt-med); font-size:var(--t-label);
letter-spacing:var(--tr-caps); text-transform:uppercase; white-space:nowrap;
}
.mark b{ color:var(--signal); font-weight:var(--wt-med); }
.mastnav{ display:flex; gap:var(--s3); margin-left:var(--s3); }
.mastnav a{
position:relative; display:inline-flex; align-items:center; gap:.4em;
font-family:var(--mono); font-size:var(--t-label);
letter-spacing:.12em; text-transform:uppercase; color:var(--ash);
transition:color var(--t-hover) var(--ease);
}
.mastnav a::after{
content:""; position:absolute; left:0; right:0; bottom:-.45rem; height:var(--hair);
background:var(--signal); transform:scaleX(0); transform-origin:left;
transition:transform var(--t-move) var(--ease);
}
.mastnav a:hover{ color:var(--bone); }
.mastnav a:hover::after,
.mastnav a[aria-current="page"]::after{ transform:scaleX(1); }
.mastnav a[aria-current="page"]{ color:var(--bone); }
.auth{ margin-left:auto; display:flex; align-items:center; gap:.75rem; }
.live{
display:flex; align-items:center; gap:.55rem; margin:0 .5rem 0 0;
font-family:var(--mono); font-size:var(--t-label); letter-spacing:.1em;
color:var(--ash); white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* community bar */
.sub{
position:sticky; top:var(--bar); z-index:99;
background:var(--panel); border-bottom:var(--hair) solid var(--line);
}
.sub__in{
display:flex; align-items:center; gap:var(--s3); height:var(--subbar);
max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}
.subnav{ display:flex; align-items:center; gap:var(--s3); min-width:0; overflow-x:auto; scrollbar-width:none; }
.subnav::-webkit-scrollbar{ display:none; }
.subnav a{
position:relative; display:inline-flex; align-items:center; gap:.4em;
font-family:var(--mono); font-size:var(--t-label); letter-spacing:.12em;
text-transform:uppercase; color:var(--ash); white-space:nowrap; padding-block:.35rem;
transition:color var(--t-hover) var(--ease);
}
.subnav a:hover{ color:var(--bone); }
.subnav a[aria-current="page"]{ color:var(--bone); }
.subnav a[aria-current="page"]::before{
content:""; position:absolute; left:0; right:0; bottom:-.9rem;
height:var(--rule); background:var(--signal);
}
/* search */
.search{ margin-left:auto; position:relative; flex:none; width:clamp(180px, 22vw, 300px); }
.search input{
width:100%; height:34px; padding:0 .75rem 0 2.1rem;
background:var(--ink); color:var(--bone);
border:var(--hair) solid var(--line); border-radius:var(--radius);
font-family:var(--mono); font-size:var(--t-label); letter-spacing:.06em;
transition:border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.search input::placeholder{
color:var(--dim); text-transform:uppercase;
letter-spacing:var(--tr-label); font-size:var(--t-meta);
}
.search input:focus{ outline:none; border-color:var(--signal); background:var(--panel-2); }
.search > svg{ position:absolute; left:.7rem; top:50%; margin-top:-6px; color:var(--dim); pointer-events:none; }
/* breadcrumb */
.crumbs{
display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
padding-block:var(--s3) 0;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.18em;
text-transform:uppercase; color:var(--dim);
}
.crumbs a{ transition:color var(--t-hover) var(--ease); }
.crumbs a:hover{ color:var(--bone); }
.crumbs .sep{ color:var(--line); }
.crumbs [aria-current]{
color:var(--ash); max-width:32ch;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ══ 04 PAGE HEAD ══════════════════════════════════════════════
One component for every page title. Parts are optional:
chips, description and meta all drop out cleanly. */
.phead{ padding-block:var(--s3) var(--s4); }
.phead--ruled{ border-bottom:var(--hair) solid var(--line); }
.phead__row{
display:flex; align-items:flex-end; justify-content:space-between;
gap:var(--s3); flex-wrap:wrap;
}
.phead h1{
font-size:clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
font-variation-settings:"wdth" 106,"wght" 800; text-transform:uppercase;
}
.phead--topic h1{
font-size:clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
font-variation-settings:"wdth" 104,"wght" 800;
text-transform:none; max-width:26ch; text-wrap:balance;
}
.phead__chips{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.9rem; }
.phead__desc{ margin:.9rem 0 0; color:var(--ash); font-size:var(--t-post); max-width:60ch; text-wrap:pretty; }
.phead__meta{
margin:.9rem 0 0; display:flex; gap:.5rem 1.5rem; flex-wrap:wrap;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:var(--tr-label);
line-height:var(--lh-label);
text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums;
}
.phead__meta b{ color:var(--ash); font-weight:500; }
.phead__acts{ display:flex; gap:.6rem; flex-wrap:wrap; }
/* ══ 05 INDEX ══════════════════════════════════════════════════ */
.shell{
display:grid; grid-template-columns:minmax(0,1fr) var(--aside);
gap:clamp(1.5rem,3vw,3rem); padding-bottom:var(--s5); align-items:start;
}
.cat{
border:var(--hair) solid var(--line); background:var(--panel);
margin-bottom:var(--s4);
}
.cat__rule{ height:var(--rule); background:var(--signal); }
.cat--ic .cat__rule{ background:var(--blood); }
.cat--staff .cat__rule{ background:var(--line); }
.cat__head{
display:flex; align-items:center; justify-content:space-between; gap:1rem;
padding:1.05rem var(--s3); border-bottom:var(--hair) solid var(--line);
}
.cat__head h2{
font-size:1.0625rem; letter-spacing:.02em;
font-variation-settings:"wdth" 104,"wght" 700; text-transform:uppercase;
}
.cat__head .tag{ color:var(--dim); }
.forum{
display:grid; grid-template-columns:330px minmax(0,1fr);
border-bottom:var(--hair) solid var(--line);
}
.forum:last-child{ border-bottom:0; }
.forum__side{
padding:var(--s3); border-right:var(--hair) solid var(--line);
display:flex; flex-direction:column; gap:.85rem;
}
.forum__name{
font-size:1.125rem; font-weight:var(--wt-bold); letter-spacing:-.012em;
color:var(--bone); display:inline-flex; align-items:center; gap:.55rem;
transition:color var(--t-hover) var(--ease);
}
.forum__name:hover{ color:var(--signal); }
.forum__desc{ margin:0; color:var(--ash); font-size:var(--t-small); line-height:1.55; text-wrap:pretty; }
.forum__stats{
margin-top:auto; padding-top:.75rem; border-top:var(--hair) solid var(--line);
display:flex; gap:1.5rem;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.14em;
text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums;
line-height:var(--lh-label);
}
.forum__stats b{ color:var(--ash); font-weight:500; }
.forum__more{
display:flex; align-items:center; justify-content:space-between; gap:1rem;
padding:.7rem var(--s3); border-top:var(--hair) solid var(--line);
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.16em;
text-transform:uppercase; color:var(--dim);
}
.forum__more a{ transition:color var(--t-hover) var(--ease); }
.forum__more a:hover{ color:var(--signal); }
/* plate — stands in for a forum photo. Swap for an ![]()
and
the layout does not move. */
.plate{
position:relative; aspect-ratio:16/7; overflow:hidden;
border:var(--hair) solid var(--line);
background:
repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
linear-gradient(135deg, var(--panel-2), var(--ink));
display:flex; align-items:center; justify-content:center;
}
.plate span{
font-variation-settings:"wdth" 120,"wght" 900;
font-size:4.5rem; line-height:1; letter-spacing:-.06em; text-transform:uppercase;
color:transparent; -webkit-text-stroke:1.5px var(--line);
transition:-webkit-text-stroke-color .3s var(--ease), transform var(--t-reveal) var(--ease);
}
.plate::after{
content:attr(data-code); position:absolute; left:.6rem; bottom:.5rem;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:var(--tr-caps);
text-transform:uppercase; color:var(--faint); /* decorative label on a decorative plate */
}
.forum:hover .plate span{ -webkit-text-stroke-color:var(--blood); transform:scale(1.04); }
.forum--hot .plate span{ -webkit-text-stroke-color:var(--line-hot); }
/* compact topic list — index and sidebar only. The board's own
rows are a different component (07), because they carry
filters, state and a last-post column. */
.tlist{ list-style:none; margin:0; padding:0; }
.trow{
display:grid; grid-template-columns:var(--avatar) minmax(0,1fr) auto;
gap:.15rem .9rem; align-items:center;
padding:.85rem var(--s3); border-bottom:var(--hair) solid var(--line);
transition:background-color var(--t-hover) var(--ease);
}
.trow:last-child{ border-bottom:0; }
.trow:hover{ background:var(--panel-2); }
.trow .av{ grid-row:span 2; }
.trow__title{
font-size:var(--t-post); font-weight:var(--wt-med); letter-spacing:-.006em;
color:var(--bone); min-width:0; display:block;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
transition:color var(--t-hover) var(--ease);
}
.trow__title:hover{ color:var(--signal); }
.trow__by{
grid-column:2; margin:0; display:flex; gap:.5rem; flex-wrap:wrap;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.1em;
text-transform:uppercase; color:var(--dim);
line-height:var(--lh-label);
}
.trow__by b{ color:var(--ash); font-weight:500; }
.trow__count{
grid-row:span 2; text-align:right; white-space:nowrap;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.12em;
text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums;
}
.trow__count b{ display:block; color:var(--ash); font-size:var(--t-micro); font-weight:500; }
.trow--unread .trow__title::before{
content:""; display:inline-block; vertical-align:middle;
width:5px; height:5px; border-radius:50%; background:var(--signal);
margin-right:.5rem; margin-top:-2px;
}
/* ══ 06 SIDEBAR ════════════════════════════════════════════════ */
.side{
display:flex; flex-direction:column; gap:var(--s4);
position:sticky; top:calc(var(--bar) + var(--subbar) + var(--s3));
}
.panel{ border:var(--hair) solid var(--line); background:var(--panel); }
.panel__head{
display:flex; align-items:center; justify-content:space-between; gap:1rem;
padding:.95rem var(--s3); border-bottom:var(--hair) solid var(--line);
}
.panel__head h2{
font-family:var(--mono); font-size:var(--t-meta); font-weight:var(--wt-med);
letter-spacing:.22em; text-transform:uppercase; color:var(--bone);
}
.panel__head a{
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.16em;
text-transform:uppercase; color:var(--dim);
}
.panel__head a:hover{ color:var(--signal); }
.blog{ list-style:none; margin:0; padding:0; }
.blog li{
display:grid; grid-template-columns:64px minmax(0,1fr); gap:.9rem;
padding:.95rem var(--s3); border-bottom:var(--hair) solid var(--line);
transition:background-color var(--t-hover) var(--ease);
}
.blog li:last-child{ border-bottom:0; }
.blog li:hover{ background:var(--panel-2); }
.blog h3{
font-size:var(--t-small); font-weight:var(--wt-med); line-height:1.35;
letter-spacing:-.004em; text-wrap:pretty; transition:color var(--t-hover) var(--ease);
}
.blog a:hover h3{ color:var(--signal); }
.blog p{
margin:.4rem 0 0; display:flex; gap:.75rem; flex-wrap:wrap;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.12em;
text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums;
line-height:var(--lh-label);
}
.blog p b{ color:var(--ash); font-weight:500; }
.thumb{
aspect-ratio:1; border:var(--hair) solid var(--line); position:relative; overflow:hidden;
background:
repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px),
var(--panel-2);
display:grid; place-items:center;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.12em;
color:var(--dim); text-transform:uppercase;
}
.trend{ list-style:none; margin:0; padding:0; }
.trend li{
display:grid; grid-template-columns:var(--avatar) minmax(0,1fr); gap:.9rem;
padding:.95rem var(--s3); border-bottom:var(--hair) solid var(--line);
transition:background-color var(--t-hover) var(--ease);
}
.trend li:last-child{ border-bottom:0; }
.trend li:hover{ background:var(--panel-2); }
.trend h3{
font-size:var(--t-small); font-weight:var(--wt-med); line-height:1.35;
text-wrap:pretty; transition:color var(--t-hover) var(--ease);
}
.trend a:hover h3{ color:var(--signal); }
.trend p{
margin:.4rem 0 0; display:flex; gap:.75rem; flex-wrap:wrap;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.12em;
text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums;
line-height:var(--lh-label);
}
.trend p b{ color:var(--ash); font-weight:500; }
.badges{ display:inline-flex; gap:.35rem; margin-left:.4rem; vertical-align:middle; }
.badge{
display:inline-grid; place-items:center; width:16px; height:16px;
border:var(--hair) solid var(--line-hot); color:var(--signal); border-radius:var(--radius);
}
.badge svg{ display:block; }
.online{ padding:var(--s3); }
.online__n{
margin:0; font-size:2.25rem; line-height:1;
font-variation-settings:"wdth" 104,"wght" 800;
letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.online__n i{ font-style:normal; color:var(--dim); font-weight:500; font-size:.5em; letter-spacing:0; }
.online p{ margin:.75rem 0 0; font-size:var(--t-micro); color:var(--ash); line-height:1.5; }
.online p a{ color:var(--bone); border-bottom:var(--hair) solid var(--line-hot); }
.online p a:hover{ color:var(--signal); }
/* ══ 07 BOARD ══════════════════════════════════════════════════ */
.filters{
display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
padding-block:.9rem; border-bottom:var(--hair) solid var(--line);
}
.prefixes{ display:flex; gap:.4rem; flex-wrap:wrap; }
.pfx{
font-family:var(--mono); font-size:var(--t-tiny); font-weight:500;
letter-spacing:.16em; text-transform:uppercase;
padding:.4rem .65rem; border:var(--hair) solid var(--line); border-radius:var(--radius);
color:var(--dim); background:transparent; cursor:pointer;
transition:border-color var(--t-hover) var(--ease),
color var(--t-hover) var(--ease),
background-color var(--t-hover) var(--ease);
}
.pfx:hover{ color:var(--bone); border-color:var(--ash); }
.pfx[aria-pressed="true"]{ color:var(--signal); border-color:var(--line-hot); background:var(--wash-signal); }
.pfx b{ color:inherit; opacity:.6; font-weight:500; margin-left:.4em; font-variant-numeric:tabular-nums; }
.sorter{ margin-left:auto; display:flex; align-items:center; gap:.6rem; }
.sorter label{
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.16em;
text-transform:uppercase; color:var(--dim);
}
.sorter select{
appearance:none; -webkit-appearance:none;
padding:.45rem 2rem .45rem .7rem;
border:var(--hair) solid var(--line); border-radius:var(--radius);
background:var(--ink); color:var(--ash); cursor:pointer;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:var(--tr-label); text-transform:uppercase;
background-image:
linear-gradient(45deg, transparent 50%, var(--dim) 50%),
linear-gradient(135deg, var(--dim) 50%, transparent 50%);
background-position:calc(100% - 14px) 50%, calc(100% - 9px) 50%;
background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
transition:border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.sorter select:hover{ color:var(--bone); border-color:var(--ash); }
.sorter select:focus{ outline:none; border-color:var(--signal); }
.group{ margin-top:var(--s4); }
.group__head{
display:flex; align-items:center; gap:.9rem;
padding-bottom:.7rem; border-bottom:var(--hair) solid var(--line);
font-family:var(--mono); font-size:var(--t-tiny); font-weight:var(--wt-med);
letter-spacing:.22em; text-transform:uppercase; color:var(--ash);
}
.group__head::after{ content:""; flex:1; height:var(--hair); background:var(--line); }
.group--pinned .group__head{ color:var(--signal); }
.group--pinned .group__head::after{ background:var(--line-hot); }
.topics{ list-style:none; margin:0; padding:0; }
.topic{
display:grid; grid-template-columns:22px minmax(0,1fr) 96px 200px;
gap:.2rem var(--s3); align-items:center;
padding:1rem .75rem; border-bottom:var(--hair) solid var(--line);
transition:background-color var(--t-hover) var(--ease);
}
.topic:hover{ background:var(--panel); }
.topic--unread{ background:linear-gradient(90deg, rgba(255,59,47,.04), transparent 30%); }
.topic--unread:hover{ background:linear-gradient(90deg, rgba(255,59,47,.06), transparent 30%), var(--panel); }
/* state column — exactly one glyph.
Precedence: pinned > locked > unread > read. */
.state{ grid-row:span 2; display:grid; place-items:center; width:22px; height:22px; color:var(--dim); }
.state svg{ display:block; }
.state--unread{ color:var(--signal); }
.state--pinned{ color:var(--signal); }
.state--locked{ color:var(--ash); }
.topic__main{ min-width:0; }
.topic__title{
font-size:var(--t-post); font-weight:var(--wt-med); letter-spacing:-.006em;
color:var(--bone); display:block;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
transition:color var(--t-hover) var(--ease);
}
.topic__title:hover{ color:var(--signal); }
.topic--unread .topic__title{ font-weight:var(--wt-bold); }
.topic__by{
grid-column:2; margin:.15rem 0 0; display:flex; gap:.5rem .85rem; flex-wrap:wrap;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.1em;
text-transform:uppercase; color:var(--dim);
line-height:var(--lh-label);
}
.topic__by b{ color:var(--ash); font-weight:500; }
.topic__n{
grid-row:span 2; text-align:right;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:var(--tr-label);
text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums;
}
.topic__n b{ display:block; color:var(--ash); font-size:var(--t-small); font-weight:500; letter-spacing:.02em; }
.topic__n span{ display:block; margin-top:.3rem; }
.last{
grid-row:span 2; display:grid; grid-template-columns:var(--avatar-sm) minmax(0,1fr);
gap:.1rem .7rem; align-items:center;
padding-left:var(--s3); border-left:var(--hair) solid var(--line);
}
.last .av{ grid-row:span 2; }
.last__who{
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.1em;
text-transform:uppercase; color:var(--ash);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
transition:color var(--t-hover) var(--ease);
}
.last__who:hover{ color:var(--signal); }
.last__when{
grid-column:2; font-family:var(--mono); font-size:var(--t-tiny);
letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
line-height:var(--lh-label);
}
/* marks a position in the list, not a property of a row */
.since{
display:flex; align-items:center; gap:.9rem; padding-block:1.1rem;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:var(--tr-caps);
text-transform:uppercase; color:var(--dim);
}
.since::before, .since::after{ content:""; flex:1; height:var(--hair); background:var(--line); }
/* ══ 08 THREAD ═════════════════════════════════════════════════ */
.tabs{ display:flex; border-bottom:var(--hair) solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs a{
position:relative; padding:.95rem 1.2rem;
font-family:var(--mono); font-size:var(--t-label); letter-spacing:var(--tr-label);
text-transform:uppercase; color:var(--dim); white-space:nowrap;
transition:color var(--t-hover) var(--ease);
}
.tabs a:first-child{ padding-left:0; }
.tabs a:hover{ color:var(--bone); }
.tabs a[aria-current="page"]{ color:var(--bone); }
.tabs a[aria-current="page"]::after{
content:""; position:absolute; left:0; right:0; bottom:-1px;
height:var(--rule); background:var(--signal);
}
.tabs .count{ color:var(--dim); margin-left:.5em; }
.toolbar{
display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
padding-block:.85rem; border-bottom:var(--hair) solid var(--line);
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:var(--tr-label);
text-transform:uppercase; color:var(--dim);
}
.toolbar .search{ margin-left:0; width:clamp(160px,20vw,240px); }
.toolbar .pager{ margin-left:auto; }
.filterbtn{
display:inline-flex; align-items:center; gap:.5rem;
padding:.45rem .7rem; border:var(--hair) solid var(--line); border-radius:var(--radius);
color:var(--ash); background:transparent; cursor:pointer;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:var(--tr-label); text-transform:uppercase;
transition:border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.filterbtn:hover{ color:var(--bone); border-color:var(--ash); }
.posts{ list-style:none; margin:0; padding:0; }
.post{
display:grid; grid-template-columns:var(--rail) minmax(0,1fr);
border-bottom:var(--hair) solid var(--line);
scroll-margin-top:calc(var(--bar) + var(--subbar) + 1rem);
}
.post--op{ border-top:var(--rule) solid var(--signal); }
.post--staff .body{ background:linear-gradient(90deg, rgba(255,59,47,.04), transparent 40%); }
/* author rail */
.rail{
padding:var(--s3); border-right:var(--hair) solid var(--line);
background:var(--panel);
display:flex; flex-direction:column; gap:.75rem; align-items:flex-start;
}
.post--op .rail{ background:linear-gradient(180deg, rgba(255,59,47,.045), transparent 55%), var(--panel); }
.face{
width:var(--avatar-lg); height:var(--avatar-lg); border-radius:var(--radius);
border:var(--hair) solid var(--line);
display:grid; place-items:center; user-select:none;
font-family:var(--mono); font-size:2rem; font-weight:var(--wt-med);
color:var(--bone); background:var(--wash-flat);
}
.face--a{ background:rgba(255,59,47,.14); border-color:var(--line-hot); }
.face--b{ background:var(--wash-bone); }
.face--c{ background:rgba(110,15,10,.30); border-color:var(--line-hot); }
.face--d{ background:var(--wash-ash); }
.who{ font-size:1rem; font-weight:var(--wt-bold); letter-spacing:-.01em; transition:color var(--t-hover) var(--ease); }
.who:hover{ color:var(--signal); }
.role{
margin:0; font-family:var(--mono); font-size:var(--t-tiny);
letter-spacing:.18em; text-transform:uppercase; color:var(--ash); line-height:1.5;
}
.role--staff{ color:var(--signal); }
.role--banned{ color:var(--signal); } /* was --blood at 1.48:1 — unreadable */
.stats{
margin:0; padding-top:.75rem; border-top:var(--hair) solid var(--line); width:100%;
display:grid; gap:.3rem;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.12em;
text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums;
line-height:var(--lh-label);
}
.stats div{ display:flex; justify-content:space-between; gap:.75rem; }
.stats b{ color:var(--ash); font-weight:500; }
.presence{
margin-top:auto; padding-top:.9rem; display:flex; align-items:center; gap:.5rem;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:var(--tr-label);
text-transform:uppercase; color:var(--dim);
}
/* post body */
.body{ padding:var(--s3); min-width:0; display:flex; flex-direction:column; }
.body__head{
display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
padding-bottom:.9rem; margin-bottom:1.1rem; border-bottom:var(--hair) solid var(--line);
}
.body__head time, .body__head .idx{
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:var(--tr-label);
text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums;
}
.body__head .idx{ transition:color var(--t-hover) var(--ease); }
.body__head .idx:hover{ color:var(--signal); }
.body__title{ font-size:1.0625rem; font-weight:var(--wt-bold); letter-spacing:-.012em; }
.prose{ max-width:var(--read); }
.prose p{ margin:0 0 1.05rem; font-size:var(--t-post); line-height:var(--lh-read); text-wrap:pretty; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:#fff; font-weight:var(--wt-bold); }
.prose a:not(.btn){
color:var(--bone); border-bottom:var(--hair) solid var(--line-hot);
transition:color var(--t-hover) var(--ease);
}
.prose a:not(.btn):hover{ color:var(--signal); }
.prose ul{ margin:0 0 1.05rem; padding-left:0; list-style:none; }
.prose ul li{
position:relative; padding-left:1.5rem; margin-bottom:.45rem;
font-size:var(--t-post); line-height:1.6;
}
.prose ul li::before{
content:"—"; position:absolute; left:0; top:0;
font-family:var(--mono); color:var(--signal); font-size:var(--t-micro);
}
.prose h3{
margin:1.6rem 0 .7rem;
font-family:var(--mono); font-size:var(--t-meta); font-weight:var(--wt-med);
letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--signal);
}
.prose code{
font-family:var(--mono); font-size:var(--t-micro); color:var(--bone);
background:var(--panel-2); padding:.15em .45em; border-radius:var(--radius);
border:var(--hair) solid var(--line); white-space:nowrap;
}
.quote{
margin:0 0 1.05rem; border:var(--hair) solid var(--line);
border-left:var(--rule) solid var(--blood); background:var(--panel);
}
.quote__head{
padding:.55rem .9rem; border-bottom:var(--hair) solid var(--line);
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.16em;
text-transform:uppercase; color:var(--dim);
}
.quote__head b{ color:var(--ash); font-weight:500; }
.quote__head a{ transition:color var(--t-hover) var(--ease); }
.quote__head a:hover{ color:var(--signal); }
.quote > p{ margin:0; padding:.85rem .9rem; color:var(--ash); font-size:var(--t-small); line-height:1.6; }
.attach{ margin:0 0 1.05rem; max-width:520px; }
.attach figure{ margin:0; border:var(--hair) solid var(--line); }
.attach .plate{
aspect-ratio:16/9; border:0;
display:grid; place-items:center;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:var(--tr-caps);
text-transform:uppercase; color:var(--dim);
}
.attach figcaption{
padding:.55rem .8rem; border-top:var(--hair) solid var(--line);
display:flex; justify-content:space-between; gap:1rem;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.12em;
text-transform:uppercase; color:var(--dim);
}
.attach--gone .plate{ color:var(--dim); }
.attach--gone figure{ border-color:var(--line-hot); } /* the red moves to the border */
.edited{ margin:1.2rem 0 0; font-size:var(--t-micro); font-style:italic; color:var(--dim); }
.edited a{ color:var(--ash); font-style:normal; }
.edited a:hover{ color:var(--signal); }
.sig{
margin-top:1.4rem; padding-top:.9rem; border-top:var(--hair) dotted var(--line);
font-size:var(--t-micro); line-height:1.6; color:var(--dim); max-width:56ch;
}
.sig a{ color:var(--ash); }
.sig a:hover{ color:var(--signal); }
.sig em{ font-style:normal; color:var(--faint); } /* decorative marker, not text */
.tags{
margin:1.3rem 0 0; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.16em;
text-transform:uppercase; color:var(--dim);
}
.tags a{
padding:.28rem .55rem; border:var(--hair) solid var(--line); border-radius:var(--radius);
color:var(--ash);
transition:border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.tags a:hover{ color:var(--signal); border-color:var(--line-hot); }
.pfoot{
margin-top:1.4rem; padding-top:.9rem; border-top:var(--hair) solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.reacts{ display:flex; gap:.4rem; flex-wrap:wrap; }
.react{
display:inline-flex; align-items:center; gap:.5rem;
padding:.35rem .6rem; border:var(--hair) solid var(--line); border-radius:var(--radius);
background:transparent; color:var(--ash); cursor:pointer;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.16em; text-transform:uppercase;
transition:border-color var(--t-hover) var(--ease),
color var(--t-hover) var(--ease),
background-color var(--t-hover) var(--ease);
}
.react b{ color:var(--bone); font-weight:var(--wt-med); font-variant-numeric:tabular-nums; letter-spacing:.05em; }
.react:hover{ border-color:var(--ash); color:var(--bone); }
.react.on{ border-color:var(--line-hot); background:var(--wash-signal); color:var(--signal); }
.react.on b{ color:var(--signal); }
.react--add{ color:var(--dim); border-style:dashed; }
.pacts{ display:flex; gap:1.1rem; flex-wrap:wrap; }
.pacts a{
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.16em;
text-transform:uppercase; color:var(--dim); transition:color var(--t-hover) var(--ease);
}
.pacts a:hover{ color:var(--bone); }
.pacts a.report:hover{ color:var(--signal); }
/* related topics */
.related{ border:var(--hair) solid var(--line); background:var(--panel); margin-bottom:var(--s5); }
.related__head{ padding:.95rem var(--s3); border-bottom:var(--hair) solid var(--line); }
.related__head h2{
font-family:var(--mono); font-size:var(--t-meta); font-weight:var(--wt-med);
letter-spacing:.22em; text-transform:uppercase;
}
.rlist{ list-style:none; margin:0; padding:0; }
.rlist li{
display:grid; grid-template-columns:var(--avatar) minmax(0,1fr) auto;
gap:.15rem .9rem; align-items:center;
padding:.85rem var(--s3); border-bottom:var(--hair) solid var(--line);
transition:background-color var(--t-hover) var(--ease);
}
.rlist li:last-child{ border-bottom:0; }
.rlist li:hover{ background:var(--panel-2); }
.rlist .av{ grid-row:span 2; }
.rlist h3{
font-size:var(--t-post); font-weight:var(--wt-med); letter-spacing:-.006em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
transition:color var(--t-hover) var(--ease);
}
.rlist a:hover h3{ color:var(--signal); }
.rlist p{
grid-column:2; margin:0; display:flex; gap:.5rem; flex-wrap:wrap;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.1em;
text-transform:uppercase; color:var(--dim);
}
.rlist p b{ color:var(--ash); font-weight:500; }
.rlist .n{
grid-row:span 2; text-align:right; white-space:nowrap;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.12em;
text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums;
}
.rlist .n b{ display:block; color:var(--ash); font-size:var(--t-micro); font-weight:500; }
/* ══ 09 EDITOR ═════════════════════════════════════════════════ */
.reply{ margin-block:var(--s4); border:var(--hair) solid var(--line); background:var(--panel); }
.reply__head{
padding:.95rem var(--s3); border-bottom:var(--hair) solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.reply__head h2{
font-family:var(--mono); font-size:var(--t-meta); font-weight:var(--wt-med);
letter-spacing:.22em; text-transform:uppercase;
}
.reply__tools{ display:flex; gap:.85rem; flex-wrap:wrap; }
.reply__tools button{
background:transparent; border:0; cursor:pointer; padding:0;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.16em;
text-transform:uppercase; color:var(--dim); transition:color var(--t-hover) var(--ease);
}
.reply__tools button:hover{ color:var(--bone); }
.reply textarea{
display:block; width:100%; min-height:9rem; resize:vertical;
padding:var(--s3); border:0; background:transparent; color:var(--bone);
font-family:var(--sans); font-size:var(--t-post); line-height:1.65;
}
.reply textarea:focus{ outline:none; background:var(--panel-2); }
.reply textarea::placeholder{ color:var(--dim); }
.reply__foot{
padding:.9rem var(--s3); border-top:var(--hair) solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.reply__note{
margin:0; font-family:var(--mono); font-size:var(--t-meta);
letter-spacing:var(--tr-label); line-height:var(--lh-label);
text-transform:uppercase; color:var(--dim);
}
.reply__note b{ color:var(--ash); font-weight:500; }
/* the editor when the person cannot post here */
.reply--closed textarea{ opacity:.4; pointer-events:none; }
.reply--closed .reply__note{ color:var(--signal); }
/* ══ 10 STATES ═════════════════════════════════════════════════ */
/* an empty screen is an invitation to act, not an apology */
.empty{ padding:var(--s5) var(--s3); text-align:center; border-bottom:var(--hair) solid var(--line); }
.empty h2{
margin-bottom:.6rem; font-size:1.25rem;
font-variation-settings:"wdth" 104,"wght" 700; text-transform:uppercase;
}
.empty p{ margin:0 auto var(--s3); color:var(--ash); font-size:var(--t-post); max-width:44ch; }
/* removed post — the reason is the content */
.post--removed{ grid-template-columns:1fr; }
.removed{
margin:0; padding:1.1rem var(--s3);
display:flex; gap:.9rem; align-items:baseline; flex-wrap:wrap;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.12em;
text-transform:uppercase; color:var(--dim);
background:repeating-linear-gradient(-45deg, rgba(110,15,10,.10) 0 8px, transparent 8px 16px);
}
.removed b{ color:var(--ash); font-weight:500; }
.removed a{ color:var(--ash); }
.removed a:hover{ color:var(--signal); }
/* banned author — name struck, rank emptied, post still readable */
.post--banned .who{ text-decoration:line-through; text-decoration-color:var(--blood); color:var(--ash); }
.post--banned .face{ filter:grayscale(1); opacity:.6; }
.post--banned .rank i.on{ background:var(--blood); }
/* an inline notice inside a page */
.notice{
margin:var(--s3) 0; padding:.9rem var(--s3);
border:var(--hair) solid var(--line); border-left:var(--rule) solid var(--signal);
background:var(--panel); color:var(--ash); font-size:var(--t-micro);
}
.notice b{ color:var(--bone); font-weight:var(--wt-med); }
/* ══ 11 PAGINATION ═════════════════════════════════════════════ */
.pagerbar{
display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
flex-wrap:wrap; padding-block:var(--s3); border-top:var(--hair) solid var(--line);
margin-bottom:var(--s5);
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:var(--tr-label);
text-transform:uppercase; color:var(--dim);
}
.pagerbar b{ color:var(--ash); font-weight:500; }
.pager{ display:flex; align-items:center; gap:.35rem; font-variant-numeric:tabular-nums; }
.pager a, .pager span.pg{
display:grid; place-items:center; min-width:28px; height:28px; padding-inline:.4rem;
border:var(--hair) solid var(--line); border-radius:var(--radius); color:var(--ash);
transition:border-color var(--t-hover) var(--ease),
color var(--t-hover) var(--ease),
background-color var(--t-hover) var(--ease);
}
.pager a:hover{ color:var(--bone); border-color:var(--ash); background:var(--panel); }
.pager [aria-current="page"]{
color:var(--ink); background:var(--signal); border-color:var(--signal); font-weight:var(--wt-med);
}
.pager .gap{ border:0; color:var(--dim); min-width:14px; }
.pager .off{ opacity:.35; pointer-events:none; }
/* ══ 12 FOOTER ═════════════════════════════════════════════════ */
.hazard{ height:10px; background:repeating-linear-gradient(-45deg, var(--blood) 0 10px, var(--ink) 10px 20px); }
.foot{ padding-block:var(--s4); border-top:var(--hair) solid var(--line); }
.colophon{
display:flex; flex-wrap:wrap; gap:.75rem 2rem;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.12em;
text-transform:uppercase; color:var(--dim);
}
.colophon a{ transition:color var(--t-hover) var(--ease); }
.colophon a:hover{ color:var(--bone); }
.colophon .end{ margin-left:auto; }
/* ══ 13 MOTION ═════════════════════════════════════════════════ */
.rise{
opacity:0; transform:translateY(12px);
transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.rise.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rise{ opacity:1; transform:none; transition:none; } }
/* ══ 14 RESPONSIVE ═════════════════════════════════════════════
Breakpoints are where components break, not where devices
are. Each one is named for what it fixes. */
/* sidebar no longer has room beside the list */
@media (max-width:1180px){
.shell{ grid-template-columns:1fr; }
.side{ position:static; }
}
/* masthead nav collides with the auth cluster */
@media (max-width:1080px){
.mastnav{ display:none; }
}
/* author rail is squeezing the post measure */
@media (max-width:900px){
:root{ --rail:180px; }
.face{ width:64px; height:64px; font-size:1.5rem; }
}
/* the board's last-post column stops being readable */
@media (max-width:980px){
.topic{ grid-template-columns:22px minmax(0,1fr) 96px; }
.last{ display:none; }
}
/* forum tile and post rail go horizontal */
@media (max-width:860px){
.forum{ grid-template-columns:1fr; }
.forum__side{ border-right:0; border-bottom:var(--hair) solid var(--line); }
.plate{ aspect-ratio:16/5; }
.plate span{ font-size:3.25rem; }
}
@media (max-width:760px){
.post{ grid-template-columns:1fr; }
.rail{
border-right:0; border-bottom:var(--hair) solid var(--line);
flex-direction:row; align-items:center; flex-wrap:wrap; gap:.75rem 1rem;
}
.face{ width:48px; height:48px; font-size:1.125rem; }
.rail .who{ margin-right:auto; }
.stats{
width:100%; border-top:var(--hair) dotted var(--line); padding-top:.6rem;
grid-template-columns:repeat(2,1fr); gap:.3rem 1rem;
}
.presence{ margin-top:0; padding-top:0; }
.live{ display:none; }
.search{ width:auto; flex:1; min-width:120px; }
.toolbar .search{ order:-1; width:100%; }
.sorter{ margin-left:0; width:100%; }
.sorter select{ flex:1; }
}
/* counts move under the title rather than beside it */
@media (max-width:620px){
.trow, .rlist li{ grid-template-columns:var(--avatar) minmax(0,1fr); }
.trow__count, .rlist .n{ grid-row:auto; grid-column:2; text-align:left; display:flex; gap:.75rem; }
.trow__count b, .rlist .n b{ display:inline; font-size:var(--t-meta); }
.auth .btn--quiet{ display:none; }
}
@media (max-width:560px){
.topic{ grid-template-columns:22px minmax(0,1fr); }
.topic__n{ grid-row:auto; grid-column:2; text-align:left; display:flex; gap:.85rem; margin-top:.15rem; }
.topic__n b{ display:inline; font-size:var(--t-meta); }
.topic__n span{ display:inline; margin:0; }
}
/* ── avatar images ──────────────────────────────────────────────
Added when Discord and Steam avatars arrived. The monogram stays
as the fallback, and both occupy the identical square so a list
of mixed avatars still aligns on the same grid. */
.av--img, .face--img{ overflow:hidden; padding:0; background:var(--panel-2); }
/* Constrain by CONTAINER, not by modifier class. A mistyped or
missing --img class used to let a 128px Discord avatar render at
full size and push the whole row apart; now the box wins whatever
classes are on it. */
.av, .face{ overflow:hidden; }
.av > img, .face > img{
width:100%; height:100%; object-fit:cover; display:block;
max-width:100%; max-height:100%;
/* a hair of desaturation keeps a wall of colourful Discord
avatars from fighting the palette */
filter:saturate(.85) contrast(1.02);
}
/* ── live update bar ────────────────────────────────────────────
Sits under the thread rather than floating over it: a fixed bar
would cover the post someone is reading, which is the opposite
of helpful. */
#live-bar{
display:flex; justify-content:center; margin:var(--s3) 0 0;
}
#live-bar[hidden]{ display:none; }
#live-bar .btn{ animation:live-in .3s var(--ease); }
@keyframes live-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ #live-bar .btn{ animation:none; } }
/* ── unbroken strings ───────────────────────────────────────────
A title like "wwwwwwwwwww…" with no spaces has nowhere to wrap,
so it runs off the side of the page and takes the layout with
it. Every place that renders user text without truncating needs
a break-anywhere rule; truncating rows (.topic__title, .trow__title)
already handle it with ellipsis instead. */
.phead h1,
.phead--topic h1,
.body__title,
.prose p,
.prose li,
.quote > p,
.who,
.forum__name,
.blog h3,
.trend h3,
.rlist h3{
overflow-wrap:anywhere;
word-break:break-word;
}
/* the thread title also stops trying to balance a single word */
.phead--topic h1{ text-wrap:pretty; }
/* ── long titles get an ellipsis, not an essay ──────────────────
Wrapping alone is not enough: a 160-character title becomes five
lines of heading and pushes the first post below the fold. These
clamp and end in "…" instead. The full text stays in the page
title and the topic's own is still the whole string for
anything reading the markup. */
.phead--topic h1{
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
overflow:hidden;
}
.body__title{
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
overflow:hidden;
}
/* sidebar and related-topic headings, which sit in narrow columns */
.blog h3, .trend h3{
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
overflow:hidden;
}
/* ── legibility pass ────────────────────────────────────────────
Findings from measuring the palette against WCAG 2.2 AA, which
asks 4.5:1 for anything under ~24px — i.e. everything here.
The colour work is in tokens.css. What is left is size and
spacing: uppercase mono at 10px with .2em tracking reads as a
texture rather than as words, and every timestamp, reply count
and board label on the site was set in it. */
/* Numbers people compare need to line up and be readable at a
glance, not decoded. */
.topic__n b, .trow__count b, .online__n, .stats b, .phead__meta b{
font-variant-numeric:tabular-nums;
color:var(--ash);
}
/* Author names are the anchor of every row — they should not be
the same weight as the timestamp beside them. */
.trow__by b, .topic__by b, .rlist p b, .blog p b, .trend p b{
color:var(--bone);
font-weight:500;
}
/* The board plate glyph is decoration and stays quiet, but it was
nearly invisible. A touch more presence without becoming text. */
.plate span{ -webkit-text-stroke-color:#2E2E34; }
.forum--hot .plate span{ -webkit-text-stroke-color:var(--line-hot); }
/* Section headers were the same colour as the data beneath them,
which flattened the hierarchy. */
.group__head, .panel__head h2, .cat__head .tag{ color:var(--ash); }
/* Placeholder text is a label, not a whisper. */
::placeholder{ color:var(--dim); opacity:1; }
/* Disabled controls still have to be readable — a form you cannot
use is still a form you have to understand. */
.reply--closed textarea{ opacity:1; color:var(--dim); }
/* ═══ OCCUPANCY ═══════════════════════════════════════════════════
The one place on the site showing something that is happening
right now rather than something that was written. It earns more
ink than a sidebar panel normally would.
Four readings, coarse to fine: a state word, a number, a slot
meter, a day of history. Someone glancing gets the first two;
someone deciding whether to log on gets all four. */
.occ__state{
display:inline-flex; align-items:center; gap:.5rem;
font-family:var(--mono); font-size:var(--t-tiny); font-weight:var(--wt-med);
letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--dim);
}
.occ__state.is-live{ color:var(--signal); }
.occ__state.is-down{ color:var(--ash); }
.occ__body{ padding:var(--s3); }
/* ── the number ─────────────────────────────────────────────── */
.occ__count{ margin:0; display:flex; align-items:baseline; gap:.5rem; }
.occ__n{
font-size:3.25rem; line-height:.9;
font-variation-settings:"wdth" 100,"wght" 800;
letter-spacing:-.04em; font-variant-numeric:tabular-nums;
color:var(--bone);
transition:color .4s var(--ease);
}
.occ__n--off{ color:var(--dim); }
.occ__n--changed{ color:var(--signal); }
.occ__max{
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.08em;
color:var(--dim); font-variant-numeric:tabular-nums;
}
.occ__pct{
margin-left:auto; align-self:flex-end;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:var(--tr-label);
color:var(--ash); font-variant-numeric:tabular-nums;
}
/* ── slot meter ──────────────────────────────────────────────────
One tick per actual slot while that stays legible. It encodes
capacity honestly: a server of 48 looks different from one of
128, which a percentage bar would flatten away. */
.occ__slots{
display:flex; gap:2px; margin-top:1rem; height:16px; align-items:stretch;
}
.occ__slots i{
flex:1; min-width:1px; background:var(--line); border-radius:1px;
transition:background-color .5s var(--ease);
}
.occ__slots i.on{ background:var(--signal); }
/* the leading edge is brighter, so the meter reads as a level
rather than as a row of identical marks */
.occ__slots i.on:last-of-type{ background:var(--signal-lift); }
/* ── history ────────────────────────────────────────────────── */
.occ__graph{ margin-top:1.15rem; }
.occ__graph svg{ display:block; width:100%; height:34px; overflow:visible; }
.occ__area{ fill:rgba(255,59,47,.10); stroke:none; }
.occ__line{
fill:none; stroke:var(--signal); stroke-width:1.25;
stroke-linejoin:round; stroke-linecap:round;
vector-effect:non-scaling-stroke; /* keeps the line 1.25px at any width */
}
.occ__axis{
display:flex; justify-content:space-between; margin:.4rem 0 0;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:var(--tr-label);
text-transform:uppercase; color:var(--dim);
}
/* ── figures ────────────────────────────────────────────────── */
.occ__stats{
margin:1.15rem 0 0; padding-top:.9rem; border-top:var(--hair) solid var(--line);
display:grid; gap:.4rem;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:var(--tr-label);
line-height:var(--lh-label); text-transform:uppercase;
}
.occ__stats div{ display:flex; justify-content:space-between; gap:1rem; }
.occ__stats dt{ color:var(--dim); }
.occ__stats dd{ margin:0; color:var(--ash); font-variant-numeric:tabular-nums; }
/* ── roster ─────────────────────────────────────────────────────
Names only. players.json also carries Steam and licence ids for
every connected player; those never leave the server. */
.occ__roster{ margin-top:1.15rem; padding-top:.9rem; border-top:var(--hair) solid var(--line); }
.occ__rosterhead{
margin:0 0 .6rem; font-family:var(--mono); font-size:var(--t-tiny);
letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--dim);
}
.occ__roster ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.occ__roster li{
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.04em;
padding:.25rem .5rem; border:var(--hair) solid var(--line); border-radius:var(--radius);
color:var(--ash); max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.occ__roster li.more{ color:var(--dim); border-style:dashed; }
.occ__note{ margin:1rem 0 0; color:var(--ash); font-size:var(--t-micro); line-height:1.5; }
@media (prefers-reduced-motion:reduce){
.occ__slots i, .occ__n{ transition:none; }
}
/* ═══ RANKS ═══════════════════════════════════════════════════════
A rank is cosmetic: it colours a name and explains itself in the
legend. It says nothing about permissions — `role` does that —
so renaming a rank can never hand anyone moderation powers.
The colour arrives as a custom property on the element, which
keeps admin-chosen values out of the stylesheet and means a new
rank needs no CSS at all. Contrast is validated before the
colour is ever stored (see contrastOnPanel in db.js). */
.uname{ color:var(--bone); font-weight:500; }
.uname--ranked{
color:var(--rank, var(--bone));
font-weight:var(--rank-weight, 500);
font-style:var(--rank-style, normal);
}
a:hover > .uname, a:hover .uname{ color:var(--signal); }
/* ═══ BOARD FOOTER ════════════════════════════════════════════════
phpBB stacked four grey boxes here. Same four readings, laid out
as one band so it reads as a summary of the place rather than
four unrelated notices. */
.bfoot{
margin:var(--s5) 0 var(--s4);
border-top:var(--rule) solid var(--line);
padding-top:var(--s4);
}
.bfoot__grid{
display:grid; gap:var(--s4) clamp(1.5rem, 4vw, 3.5rem);
grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
align-items:start;
}
.bfoot__head{
font-family:var(--mono); font-size:var(--t-tiny); font-weight:var(--wt-med);
letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--signal);
padding-bottom:.6rem; margin-bottom:.9rem;
border-bottom:var(--hair) solid var(--line);
}
.bfoot__lead{
margin:0 0 .6rem; font-size:var(--t-post); color:var(--ash); line-height:1.5;
}
.bfoot__lead b{ color:var(--bone); font-weight:var(--wt-bold); }
.bfoot__names{
margin:0 0 .6rem; font-size:var(--t-micro); line-height:1.7; color:var(--dim);
overflow-wrap:anywhere;
}
.bfoot__dim{
margin:0; font-family:var(--mono); font-size:var(--t-tiny);
letter-spacing:var(--tr-label); line-height:var(--lh-label);
text-transform:uppercase; color:var(--dim);
}
.bfoot__dim b{ color:var(--ash); font-weight:500; }
.legend{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.legend li{ font-size:var(--t-micro); }
.bfoot__stats{
margin:0; display:grid; gap:.45rem;
font-family:var(--mono); font-size:var(--t-meta); letter-spacing:var(--tr-label);
line-height:var(--lh-label); text-transform:uppercase;
}
.bfoot__stats div{ display:flex; justify-content:space-between; gap:1rem; }
.bfoot__stats dt{ color:var(--dim); }
.bfoot__stats dd{ margin:0; color:var(--ash); font-variant-numeric:tabular-nums; }
/* Ranked names inside mono metadata rows keep the row's size and
tracking — only the colour and weight come from the rank. */
.topic__by .uname, .trow__by .uname, .last__who .uname{
font-family:inherit; font-size:inherit; letter-spacing:inherit;
text-transform:inherit;
}
.who .uname{ font-size:inherit; font-weight:inherit; }
.who .uname--ranked{ font-weight:var(--rank-weight, var(--wt-bold)); }
/* ═══ PROFILE ═════════════════════════════════════════════════════ */
.prof{ padding-block:var(--s3) var(--s4); border-bottom:var(--hair) solid var(--line); }
.prof__id{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.prof__who{ min-width:0; margin-right:auto; }
.prof__who h1{
font-size:clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
font-variation-settings:"wdth" 104,"wght" 800;
letter-spacing:-.02em; overflow-wrap:anywhere;
}
/* the name is the heading here, so it does not also need to be a link */
.prof__who h1 .uname{ font-weight:inherit; }
.prof__who h1 a.uname:hover{ color:var(--signal); }
.prof__tags{ margin:.6rem 0 0; display:flex; gap:.4rem; flex-wrap:wrap; }
.prof__handle{
margin:.5rem 0 0; font-family:var(--mono); font-size:var(--t-meta);
letter-spacing:var(--tr-label); color:var(--dim);
}
.prof__stats{
margin:var(--s4) 0 0; padding:0;
display:grid; gap:1px; background:var(--line);
grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
border:var(--hair) solid var(--line);
}
.prof__stats div{ background:var(--panel); padding:.85rem 1rem; }
.prof__stats dt{
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:var(--tr-label);
text-transform:uppercase; color:var(--dim); margin-bottom:.3rem;
}
.prof__stats dd{
margin:0; font-size:1.125rem; font-weight:var(--wt-med);
color:var(--bone); font-variant-numeric:tabular-nums;
}
.prof__sig{ margin-top:var(--s3); max-width:60ch; }
.prof__private{ margin-top:var(--s4); }
.prof__grid{
display:grid; gap:var(--s3); margin:var(--s4) 0 var(--s5);
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
align-items:start;
}
.prof__none{ padding:var(--s3); margin:0; color:var(--dim); font-size:var(--t-micro); }
.prof__excerpt{
grid-column:1; margin:.25rem 0 0; color:var(--ash);
font-size:var(--t-micro); line-height:1.5; overflow-wrap:anywhere;
}
.live--me{ transition:color var(--t-hover) var(--ease); }
.live--me:hover{ color:var(--bone); }
/* ═══ BBCODE EDITOR ═══════════════════════════════════════════════
The tag strip forums have had since the nineties, because people
already know what it does. Buttons show their effect — the bold
one is bold — so the row is readable without hovering. */
.bbbar{
display:flex; flex-wrap:wrap; align-items:center; gap:.3rem;
padding:.6rem var(--s3);
border-bottom:var(--hair) solid var(--line);
background:var(--panel-2);
}
.bbbar__sep{ width:1px; height:18px; background:var(--line); margin-inline:.35rem; }
.bbbar__btn{
min-width:32px; height:28px; padding:0 .55rem;
background:transparent; color:var(--ash);
border:var(--hair) solid transparent; border-radius:var(--radius);
cursor:pointer; font-family:var(--mono); font-size:var(--t-tiny);
letter-spacing:var(--tr-label); text-transform:uppercase;
transition:color var(--t-hover) var(--ease),
border-color var(--t-hover) var(--ease),
background-color var(--t-hover) var(--ease);
}
.bbbar__btn:hover{ color:var(--bone); border-color:var(--line); background:var(--ink); }
.bbbar__btn:active{ background:var(--panel); }
.bbbar__btn.is-b{ font-weight:700; }
.bbbar__btn.is-i{ font-style:italic; }
.bbbar__btn.is-u{ text-decoration:underline; }
.bbbar__btn.is-s{ text-decoration:line-through; }
.bbbar__preview{ margin-left:auto; border-color:var(--line); }
.bbbar__preview.is-on{ color:var(--signal); border-color:var(--line-hot); background:var(--wash-signal); }
.bbprev{ padding:var(--s3); min-height:9rem; border-bottom:var(--hair) solid var(--line); }
.bbprev__wait{ margin:0; color:var(--dim); font-family:var(--mono); font-size:var(--t-tiny);
letter-spacing:var(--tr-label); text-transform:uppercase; }
/* the preview must look exactly like the post will */
.bbprev > p, .bbprev > ul, .bbprev > blockquote, .bbprev > pre{
font-size:var(--t-post); line-height:var(--lh-read); color:var(--bone);
}
.bbprev > p{ margin:0 0 1.05rem; }
.bbprev > p:last-child{ margin-bottom:0; }
/* ═══ RENDERED BBCODE ═════════════════════════════════════════════ */
.bb-u{ text-decoration:underline; text-underline-offset:.15em; }
.bb-quote{
margin:0 0 1.05rem; padding:0;
border:var(--hair) solid var(--line); border-left:var(--rule) solid var(--blood);
background:var(--panel);
}
.bb-quote__who{
margin:0; padding:.55rem .9rem; border-bottom:var(--hair) solid var(--line);
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:.16em;
text-transform:uppercase; color:var(--ash);
}
.bb-quote p{ margin:0; padding:.85rem .9rem; color:var(--ash); font-size:var(--t-small); }
.bb-quote > .bb-quote{ margin:.85rem .9rem; } /* quote inside a quote */
.bb-code{
margin:0 0 1.05rem; padding:.9rem 1rem; overflow-x:auto;
background:var(--panel-2); border:var(--hair) solid var(--line);
border-radius:var(--radius);
}
.bb-code code{
font-family:var(--mono); font-size:var(--t-micro); line-height:1.6;
color:var(--bone); background:none; border:0; padding:0; white-space:pre;
}
.bb-list{ margin:0 0 1.05rem; padding-left:0; list-style:none; }
.bb-list li{
position:relative; padding-left:1.5rem; margin-bottom:.45rem;
font-size:var(--t-post); line-height:1.6;
}
.bb-list li::before{
content:"—"; position:absolute; left:0; top:0;
font-family:var(--mono); color:var(--signal); font-size:var(--t-micro);
}
.bb-spoiler{
margin:0 0 1.05rem; border:var(--hair) solid var(--line); background:var(--panel);
}
.bb-spoiler summary{
padding:.6rem .9rem; cursor:pointer; user-select:none;
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:var(--tr-caps);
text-transform:uppercase; color:var(--dim);
}
.bb-spoiler summary:hover{ color:var(--bone); }
.bb-spoiler[open] summary{ border-bottom:var(--hair) solid var(--line); color:var(--ash); }
.bb-spoiler > div{ padding:.85rem .9rem; }
.bb-spoiler > div > p:last-child{ margin-bottom:0; }
@media (max-width:560px){
/* the strip wraps rather than scrolling: a hidden button is a
button nobody uses */
.bbbar{ padding-inline:var(--s2); }
.bbbar__btn{ min-width:30px; padding:0 .4rem; }
}
.bb-img{
display:block; max-width:100%; height:auto; margin:0 0 1.05rem;
border:var(--hair) solid var(--line); border-radius:var(--radius);
/* an oversized image must not set the width of the whole post */
max-height:70vh; object-fit:contain; background:var(--panel-2);
}
/* ── upload affordances ─────────────────────────────────────── */
.bbbar__btn.is-bad{ color:var(--signal); border-color:var(--line-hot); }
.bbdrop{
margin:0; padding:var(--s4) var(--s3); text-align:center;
border:1px dashed var(--line-hot); background:var(--wash-signal);
font-family:var(--mono); font-size:var(--t-tiny); letter-spacing:var(--tr-caps);
text-transform:uppercase; color:var(--signal);
}
.bbdrop[hidden]{ display:none; }
textarea.is-dropping{ background:var(--panel-2); outline:1px dashed var(--line-hot); outline-offset:-4px; }