/* CHANGELOG and ABOUT US rooms (4 Oct 2026, crank-rooms W5). Both reuse .library and .q-head from site.css;
   this file adds only their own parts. Same type as the Library: Jost heads, IBM Plex body, gold kept to the labels. */

/* ---- changelog ---- */
.cl-body{display:grid;gap:22px;max-width:880px}
.cl-month{position:relative;padding:22px 22px 10px;border-radius:22px;overflow:hidden;
  background:rgba(12,13,30,.62);border:1px solid rgba(255,255,255,.08)}
.cl-month::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,rgba(227,200,120,.9),rgba(227,200,120,.3) 45%,transparent 80%)}
.cl-month h3{font:600 23px/1.1 "Jost",sans-serif;color:#fff;margin-bottom:6px}
.cl-ver{padding:14px 0 12px;border-top:1px solid rgba(255,255,255,.07)}
.cl-ver:first-of-type{border-top:0}
.cl-vh{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.cl-v{font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;color:#d8b25a;
  padding:5px 9px;border-radius:999px;border:1px solid rgba(216,178,90,.4)}
.cl-vh time{font:500 13px "IBM Plex Sans",sans-serif;color:#bdb9b0}
.cl-ver ul{list-style:none;margin:0;padding:0}
.cl-ver li{position:relative;padding:6px 0 6px 18px;font:15px/1.55 "IBM Plex Sans",sans-serif;color:#e6e0d2;overflow-wrap:anywhere}
.cl-ver li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:rgba(201,211,226,.45)}

/* ---- about us (#who) ---- */
.who-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));max-width:1080px}
.who-card{padding:22px;border-radius:22px;background:rgba(12,13,30,.62);border:1px solid rgba(255,255,255,.08)}
.who-card h3{font:600 21px/1.15 "Jost",sans-serif;color:#fff;margin-bottom:10px}
.who-card p,.who-card li{font:15.5px/1.6 "IBM Plex Sans",sans-serif;color:#d9d4c7}
.who-card p+p{margin-top:12px}
.who-card em{font-style:italic;color:#fff}
.who-card ul{list-style:none;margin:0;padding:0}
.who-card li{position:relative;padding:5px 0 5px 18px}
.who-card li::before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;border-radius:50%;background:rgba(201,211,226,.45)}
.who-more{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;font:14px "IBM Plex Sans",sans-serif;color:#bdb9b0}
.who-more a{color:#e6e0d2;text-underline-offset:3px}
.who-more a:hover{color:#fff}

@media (max-width:520px){
  .cl-month,.who-card{padding:18px 16px 8px;border-radius:18px}
  .who-card{padding-bottom:18px}
}