/* OffensiveRamen — changelog page. Uses shared tokens from the css chain
   (--bg,--bg2,--panel,--ink,--dim,--red,--red2,--ember,--line,--mono,--sans).
   No inline styles: strict-CSP clean. */

.cl-main{max-width:880px;margin:0 auto;padding-bottom:40px}
.cl-head{margin:8px 0 20px}
.cl-head h1{font-weight:900;font-size:clamp(1.7rem,5vw,2.6rem);margin:.3em 0 .15em}
.cl-icon{margin-right:.15em}
.cl-lead{color:var(--dim);max-width:60ch;margin:0 0 .8rem}
.cl-subscribe{
  font-size:.85rem;color:var(--dim);margin:0;
  padding:8px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg2);
  display:inline-flex;flex-wrap:wrap;gap:.35rem;align-items:center;
}
.cl-subscribe a{color:var(--red2);font-weight:700;text-decoration:underline;text-underline-offset:2px}

.cl-filter{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}
.cl-fbtn{
  min-height:40px;padding:4px 14px;cursor:pointer;
  background:transparent;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;
  font:700 .74rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.cl-fbtn:hover,.cl-fbtn:focus-visible{color:var(--ink);border-color:var(--dim)}
.cl-fbtn.active{background:var(--red);border-color:var(--red);color:#fff}

.cl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cl-list li{
  display:grid;grid-template-columns:104px 88px 1fr;gap:14px;align-items:baseline;
  padding:14px 4px;border-bottom:1px solid var(--line);
}
.cl-date{font:.8rem/1 var(--mono);color:var(--dim);white-space:nowrap}
.cl-tag{
  font:700 .68rem/1 var(--mono);letter-spacing:.06em;text-align:center;
  padding:4px 8px;border-radius:3px;border:1px solid var(--line);
  background:var(--bg2);color:var(--dim);
}
.cl-tag[data-cat="new"]{color:#4ade80;border-color:rgba(74,222,128,.45)}
.cl-tag[data-cat="improve"]{color:#60a5fa;border-color:rgba(96,165,250,.45)}
.cl-tag[data-cat="fix"]{color:var(--red2);border-color:var(--red2)}
.cl-tag[data-cat="content"]{color:#c084fc;border-color:rgba(192,132,252,.45)}
.cl-tag[data-cat="site"]{color:var(--ember);border-color:rgba(255,122,26,.5)}
.cl-text{color:var(--ink);line-height:1.5;font-size:.95rem}
.cl-text a{color:var(--red2);text-decoration:underline;text-underline-offset:2px}
.cl-text code{font-family:var(--mono);font-size:.85em;background:var(--bg2);padding:0 .3em;border-radius:2px}

.cl-empty{color:var(--dim);padding:18px 4px}
.cl-meta{
  margin-top:24px;padding:14px;border:1px solid var(--line);border-radius:4px;
  background:var(--bg2);font-size:.85rem;color:var(--dim);
}
.cl-meta a{color:var(--red2)}

@media (max-width:600px){
  .cl-list li{grid-template-columns:84px 68px 1fr;gap:9px;padding:12px 2px}
  .cl-date{font-size:.72rem}
  .cl-tag{font-size:.6rem;padding:3px 5px}
  .cl-text{font-size:.88rem}
}