/* apps.ibcsc.be — design "Nuit de Charleroi" (Gemini variant 2, chosen 21.10.2026): IBCSC navy dark theme,
   catalogue structure after the appstorrent pattern (200 px sidebar, 1120 px main, 268×156 cards, 400 px banner). */

@font-face { font-family: "Gilroy"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/gilroy-regular.woff2") format("woff2"); }
@font-face { font-family: "Gilroy"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/gilroy-medium.woff2") format("woff2"); }
@font-face { font-family: "Gilroy"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/gilroy-semibold.woff2") format("woff2"); }
@font-face { font-family: "Gilroy"; font-weight: 700 800; font-style: normal; font-display: swap; src: url("../fonts/gilroy-bold.woff2") format("woff2"); }

:root {
  --font: "Gilroy", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --bg: #08141f;
  --card: #10243a;
  --card-2: #16304a;
  --btn: #1c3a57;
  --line: #1c3a57;
  --hair: #2b8ac6;
  --text: #fff;
  --muted: #8da2b5;
  --soft: rgba(226, 236, 245, .84);
  --link: #5ab0e8;
  --primary: #f5a524;
  --on-primary: #0e2233;
  --green: #f5a524;
  --on-green: #0e2233;
  --ok: #3dd68c;
  --badge: #2b5276;
  --bar-bg: rgba(8, 20, 31, .92);
  --shadow: 0 24px 48px rgba(0, 0, 0, .5);
  --focus: 0 0 0 3px rgba(90, 176, 232, .55);
  --banner: linear-gradient(118deg, #0b1d31 0%, #0e2b48 52%, #12446c 100%);
  --bg-art: url("../img/bg-charleroi.webp");
  --logo-text: #fff;
  --logo-sub: rgba(255, 255, 255, .7);
  --logo-rule: rgba(255, 255, 255, .3);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f8fa;
  --card: #fff;
  --card-2: #eef3f7;
  --btn: #e3eaf0;
  --line: #e3e8ee;
  --hair: #075985;
  --text: #0e2233;
  --muted: #5b6f80;
  --soft: #2f4556;
  --link: #075985;
  --ok: #138a4e;
  --badge: #9fb3c4;
  --bar-bg: rgba(246, 248, 250, .92);
  --shadow: 0 18px 36px rgba(14, 34, 51, .12);
  --focus: 0 0 0 3px rgba(7, 89, 133, .35);
  --logo-text: #0e2233;
  --logo-sub: #475b6b;
  --bg-art: url("../img/bg-charleroi-light.webp");
  --logo-rule: rgba(14, 34, 51, .3);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--muted);
  /* Faint engraving of industrial Charleroi (Gemini, variant 1 chosen 21.10.2026). */
  background: var(--bg) var(--bg-art) center bottom / cover no-repeat fixed;
  font: 400 15px/1 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--primary); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* type scale */
.h2, .media-card-title { font-size: 20px; line-height: 32px; font-weight: 600; color: var(--text); }
.body-1 { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--text); }
.body-2 { font-size: 14px; line-height: 24px; font-weight: 400; }
.caption-1 { font-size: 12px; line-height: 20px; font-weight: 400; }
.caption-2 { font-size: 10px; line-height: 16px; font-weight: 600; }

/* ---------------------------------------------------------------- frame */
.wrapper {
  max-width: 1440px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px;
}
.side { position: sticky; top: 0; height: 100vh; height: 100dvh; }
.side-inner { height: 100%; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }
.side-inner::-webkit-scrollbar { display: none; }
.side-top { height: 96px; display: flex; align-items: center; justify-content: space-between; padding-left: 4px; flex: none; }
/* Same wordmark as the ibcsc.be header (.site-header .brand). */
.brand { position: relative; z-index: 2; display: grid; grid-auto-flow: column; grid-template-columns: max-content max-content; align-items: center; gap: 9px; font-family: var(--font); }
.brand strong { font-size: 24px; font-weight: 700; letter-spacing: -.045em; line-height: 1.02; color: var(--logo-text); }
.brand span { white-space: nowrap; font-size: 8.1px; font-weight: 500; letter-spacing: .015em; line-height: 1.15; text-transform: uppercase; color: var(--logo-sub); border-left: 1px solid var(--logo-rule); padding-left: 9px; }
.side-close { display: none; }

.side-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-link {
  display: flex; align-items: center; gap: 12px; height: 48px; padding: 12px 8px 12px 12px;
  border-radius: 12px; color: var(--muted); font-size: 15px; line-height: 24px;
  transition: background-color .15s ease, color .15s ease;
}
.nav-link:hover { color: var(--text); background: var(--card); }
.nav-link.is-active { color: var(--text); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.combi-row { position: relative; }
.combi-row .nav-link { padding-right: 44px; }
.combi-toggle {
  position: absolute; right: 6px; top: 8px; width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; color: var(--muted); transition: transform .2s ease, color .15s ease;
}
.combi-toggle:hover { color: var(--text); }
.combi.is-open .combi-toggle { transform: rotate(180deg); }
.combi-sub { display: none; flex-direction: column; padding: 4px 0 6px 44px; }
.combi.is-open .combi-sub { display: flex; }
.sub-link { font-size: 14px; line-height: 20px; padding: 6px 0; color: var(--muted); }
.sub-link:hover, .sub-link.is-active { color: var(--text); }
.side-note { margin: 24px 8px 0 12px; color: var(--muted); }
.side-langs { display: none; }
/* Donation banner (Gemini variant 3 "Impact", 21.10.2026): posts to ibcsc.be/don, which opens Mollie. */
.don-card {
  position: relative; margin: 24px 0 32px; padding: 16px 14px 14px; border-radius: 16px; background: var(--card);
  border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; gap: 10px;
}
.don-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--link), var(--primary)); }
.don-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.don-kicker { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.don-title { font-size: 17px; line-height: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.don-uses { display: flex; flex-direction: column; gap: 6px; }
.don-uses li { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--soft); }
.don-uses .ic { width: 16px; height: 16px; padding: 3px; border-radius: 100px; background: var(--link); color: var(--bg); stroke-width: 3.2; flex: none; }
.don-amounts { border: 0; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.don-pill { grid-column: span 2; position: relative; cursor: pointer; }
.don-pill:nth-of-type(-n + 2) { grid-column: span 3; }
.don-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.don-pill span {
  display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 10px; background: var(--card-2);
  border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 600; transition: border-color .15s ease, background-color .15s ease;
}
.don-pill:hover span { border-color: var(--hair); }
.don-pill input:checked + span { border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card-2)); }
.don-pill input:focus-visible + span { box-shadow: var(--focus); }
.don-card.is-custom .don-pill input:checked + span { border: 1px solid var(--line); background: var(--card-2); }
.don-custom { position: relative; display: block; }
.don-custom input {
  width: 100%; height: 38px; padding: 0 28px 0 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line);
  color: var(--text); font: 500 13px/20px var(--font); outline: 0;
}
.don-custom input::placeholder { color: var(--muted); }
.don-custom input:focus { border-color: var(--primary); box-shadow: var(--focus); }
.don-custom b { position: absolute; right: 12px; top: 50%; translate: 0 -50%; color: var(--muted); font-size: 13px; }
.don-error { color: #ff8a8a; }
.don-submit {
  height: 44px; border-radius: 12px; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 14px; font-weight: 700; transition: filter .15s ease, transform .15s ease;
}
.don-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.don-submit .ic { width: 16px; height: 16px; }
.don-note { font-size: 10px; line-height: 14px; color: var(--muted); text-align: center; }
/* weburl.be ad (Gemini variant 1 "Affiche", 21.10.2026) — in WEBURL's own identity, not IBCSC's. */
@font-face { font-family: "Martian Mono"; font-weight: 400 600; font-style: normal; font-display: swap; src: url("../fonts/martian-mono-latin-ext.woff2") format("woff2"); }
.wu-card {
  position: relative; margin: -16px 0 32px; padding: 18px 14px 14px; border-radius: 16px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 10px; background: #fbf2ee; color: #0d0d0d; border: 1px solid rgba(13, 13, 13, .08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25); transition: transform .2s ease, box-shadow .2s ease;
}
.wu-card::before {
  content: ""; position: absolute; right: -36px; bottom: -24px; width: 190px; height: 205px; z-index: -1;
  background: url("../img/weburl/belfry-420.webp") center / contain no-repeat; opacity: .16; filter: grayscale(1);
}
.wu-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0, 0, 0, .32); }
.wu-card:focus-visible { box-shadow: 0 0 0 3px rgba(205, 4, 2, .55); }
.wu-logo { width: 128px; height: auto; }
.wu-title { font-family: "Gilroy", sans-serif; font-size: 20px; line-height: 22px; font-weight: 800; letter-spacing: -.02em; color: #0d0d0d; }
.wu-title em { font-style: normal; color: #cd0402; }
.wu-stats > span { display: block; }
.wu-stats { font-family: "Martian Mono", ui-monospace, monospace; font-size: 9px; line-height: 13px; letter-spacing: .02em; text-transform: uppercase; color: #57504b; }
.wu-cta {
  margin-top: 4px; height: 40px; border-radius: 10px; background: #cd0402; color: #fff; display: flex; align-items: center; justify-content: center;
  gap: 6px; font-family: "Gilroy", sans-serif; font-size: 14px; font-weight: 700; transition: background-color .15s ease;
}
.wu-card:hover .wu-cta { background: #a80302; }
.scrim { display: none; }

main { min-width: 0; padding-bottom: 8px; }
.top { height: 48px; margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.search-box {
  flex: 1; min-width: 0; max-width: 680px; height: 48px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
}
.search-box:focus-within { box-shadow: var(--focus); }
.search-box-ic { color: var(--muted); display: grid; place-items: center; }
.search-input {
  flex: 1; min-width: 0; height: 24px; border: 0; outline: 0; background: transparent;
  color: var(--text); font: 400 14px/24px var(--font);
}
.search-input::placeholder { color: var(--muted); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-kbd {
  height: 24px; min-width: 44px; padding: 0 8px; display: grid; place-items: center; border-radius: 6px;
  background: var(--card-2); color: var(--muted); font: 400 14px/24px var(--font);
}
.top-right { display: flex; align-items: center; gap: 8px; flex: none; }
.round-ghost {
  height: 40px; min-width: 40px; padding: 0 8px; border-radius: 100px; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 600; list-style: none;
  transition: color .15s ease, background-color .15s ease;
}
.round-ghost:hover { color: var(--text); background: var(--card); }
.round-ghost::-webkit-details-marker { display: none; }
.ic-moon { display: none; }
:root[data-theme="light"] .ic-sun { display: none; }
:root[data-theme="light"] .ic-moon { display: block; }
.lang { position: relative; }
.lang-menu {
  position: absolute; right: 0; top: 48px; z-index: 30; min-width: 170px; padding: 6px;
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.lang-menu a { padding: 8px 12px; border-radius: 8px; color: var(--soft); font-size: 14px; line-height: 20px; }
.lang-menu a:hover { background: var(--card-2); color: var(--text); }
.lang-menu a.is-active { color: var(--link); }
.button {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
  background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600; transition: filter .15s ease;
}
.button.medium { height: 48px; padding: 0 24px; }
.button:hover { filter: brightness(1.12); }
.button-ghost { display: inline-flex; height: 40px; align-items: center; padding: 0 16px; border-radius: 100px; background: var(--btn); color: var(--text); font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- banner */
.main-anounce { position: relative; margin-top: 24px; height: 400px; border-radius: 16px; overflow: hidden; }
.slider-track { display: flex; gap: 16px; height: 100%; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.cs-item {
  position: relative; flex: 0 0 71.16%; height: 400px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: var(--banner);
}
.cs-item::before, .cover-hero::before {
  content: ""; position: absolute; inset: 0; background: url("../img/network.svg") right center / cover no-repeat; opacity: .9; pointer-events: none;
}
.cs-art { position: absolute; inset: 0; }
.cs-art, .cs-text, .cover-hero > * { z-index: 1; }
.cs-item:not(.is-active) .cs-text { opacity: .55; }
.cs-item:not(.is-active) .big-slider { visibility: hidden; }
.cs-shot {
  position: absolute; left: 44%; top: 56px; width: 640px; max-width: none; border-radius: 10px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
}
.cs-text {
  position: absolute; left: 32px; top: 32px; bottom: 32px; width: 260px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.subtitle-slider { font-size: 13px; line-height: 24px; color: #7cc4f2; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.cs-text h2 { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.02em; color: #fff; max-width: 260px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.big-slider {
  margin-top: auto; height: 56px; padding: 16px 32px; border-radius: 12px; background: var(--primary); color: var(--on-primary);
  font-size: 14px; font-weight: 600; line-height: 24px; transition: transform .15s ease;
}
.big-slider:hover { transform: translateY(-1px); filter: brightness(1.06); }
.controls-big { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 0; z-index: 2; }
.slide-btn {
  width: 64px; height: 64px; display: grid; place-items: center; color: #fff; opacity: .8;
  transition: opacity .15s ease;
}
.slide-btn .ic { width: 28px; height: 28px; }
.slide-btn:hover { opacity: 1; }
.slider-dots { position: absolute; left: 32px; bottom: 16px; display: none; gap: 6px; }
.slider-dots button { width: 8px; height: 8px; border-radius: 100px; background: rgba(255, 255, 255, .4); }
.slider-dots button.is-active { width: 20px; background: #fff; }


/* ---------------------------------------------------------------- sections and cards */
.main-page { margin-top: 32px; }
.title { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; margin-bottom: 16px; }
.title h2, .title h1 { font-size: 20px; line-height: 32px; font-weight: 600; color: var(--text); }
.see-all { font-size: 12px; line-height: 20px; font-weight: 600; color: var(--link); }
.see-all:hover { text-decoration: underline; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.soft-item {
  position: relative; height: 156px; padding: 12px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.soft-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--hair); }
.soft-item:focus-within { box-shadow: var(--focus); }
.topline { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
.update-dot { width: 20px; height: 20px; border-radius: 100px; background: var(--badge); color: #fff; display: grid; place-items: center; }
.update-dot .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.marker {
  display: inline-block; padding: 2px 6px; border-radius: 100px; background: var(--card-2); color: var(--soft);
  font-size: 10px; line-height: 16px; font-weight: 600; white-space: nowrap;
}
.marker.is-new { background: var(--hair); color: #fff; }
.marker.is-soon { background: #b8860b; color: #fff; }
.size { position: absolute; right: 8px; top: 8px; }
.soft-icon { width: 56px; height: 56px; margin: 1px auto 8px; border-radius: 12px; object-fit: contain; }
.soft-title { font-size: 14px; line-height: 24px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soft-title a { color: inherit; }
.soft-title a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.soft-info .version { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soft-info .arch { color: var(--muted); }
.soft-item .meta { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-link { position: relative; z-index: 1; color: var(--muted); }
.cat-link:hover { color: var(--text); }
.soft-item.is-soon .soft-icon { filter: saturate(.85); }
.wide-item {
  margin-top: 16px; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); color: var(--muted); transition: border-color .2s ease;
}
.wide-item:hover { border-color: var(--hair); }
.wide-item img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.wide-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wide-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-weight: 600; }
.wide-kicker .ic { width: 14px; height: 14px; }
.wide-text b { color: var(--text); font-size: 15px; line-height: 22px; }
.wide-sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wide-go { color: var(--muted); flex: none; }
.list-count { margin: -8px 0 16px; color: var(--muted); }
.sort { display: flex; gap: 4px; padding: 4px; background: var(--card); border-radius: 100px; }
.sort a { padding: 4px 12px; border-radius: 100px; color: var(--muted); font-weight: 600; }
.sort a.is-active { background: var(--card-2); color: var(--text); }
.empty-card { padding: 40px 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; color: var(--soft); }
.empty-card.is-404 { align-items: center; text-align: center; padding: 64px 24px; }
.err-code { font-size: 64px; line-height: 1; font-weight: 700; color: var(--text); letter-spacing: -.03em; }

/* ---------------------------------------------------------------- app page */
.crumbs { margin-top: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 24px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs span { color: var(--text); }
.crumb-sep { width: 16px; height: 16px; color: var(--muted); }
.main-post { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 741fr) minmax(0, 363fr); gap: 16px; align-items: start; }
.content { min-width: 0; }
.cover-hero-card { border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.cover-hero { position: relative; height: 360px; background: var(--banner); overflow: hidden; }
.cover-hero-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .35; mix-blend-mode: luminosity; }
.cover-hero-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, color-mix(in srgb, var(--card) 60%, transparent) 72%, var(--card) 100%); }
.cover-marker { position: absolute; left: 24px; top: 24px; padding: 4px 8px; border-radius: 6px; background: var(--hair); color: #fff; z-index: 1; font-size: 12px; line-height: 19px; font-weight: 600; }
.cover-marker.is-soon { background: #b8860b; }
.cover-actions { position: absolute; right: 16px; top: 256px; display: flex; gap: 8px; }
.round-btn { width: 48px; height: 48px; border-radius: 100px; background: var(--btn); color: var(--link); display: grid; place-items: center; transition: filter .15s ease; }
.round-btn:hover { filter: brightness(1.15); }
.round-btn.is-done { color: var(--ok); }
.cover-icon { position: absolute; left: 24px; top: 176px; width: 128px; height: 128px; border-radius: 28px; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35)); }
.cover-stats { position: absolute; left: 24px; top: 320px; display: flex; gap: 16px; font-weight: 600; color: var(--muted); }
.stat { display: inline-flex; align-items: center; gap: 4px; }
.stat .ic { width: 18px; height: 18px; }
.cover-hero-body { padding: 0 24px 24px; }
.title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-height: 44px; }
.title-row h1 { font-size: 32px; line-height: 40px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.title-ver { font-size: 15px; color: var(--muted); font-weight: 600; }
.readmore { margin-top: 12px; color: var(--text); display: flex; flex-direction: column; gap: 12px; max-height: 96px; overflow: hidden; position: relative; transition: max-height .3s ease; }
.readmore.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--card)); }
.readmore.is-open { max-height: 2000px; }
.readmore.is-open::after { display: none; }
.readmore p { max-width: 70ch; }
.readmore .lead { color: var(--text); }
.readmore p:not(.lead) { color: var(--soft); }
.readmore-toggle { margin-top: 4px; color: var(--link); }
.screenshots { margin-top: 24px; }
.shots-main { position: relative; aspect-ratio: 693 / 430; border-radius: 12px; overflow: hidden; background: #000; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s ease; }
.shot.is-active { opacity: 1; }
.shots-nav { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 100px; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; }
.shots-main:hover .shots-nav, .shots-nav:focus-visible { opacity: 1; }
.shots-nav.is-prev { left: 12px; }
.shots-nav.is-next { right: 12px; }
.thumbs { margin-top: 24px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.thumb { flex: none; width: 104px; height: 64px; border-radius: 8px; overflow: hidden; opacity: .5; transition: opacity .15s ease; outline: 2px solid transparent; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .8; }
.thumb.is-active { opacity: 1; outline-color: var(--link); outline-offset: -2px; }

.media-card, .faq-block { margin-top: 16px; padding: 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.media-card-title { margin-bottom: 16px; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.feature { padding: 16px; border-radius: 12px; background: var(--card-2); display: flex; flex-direction: column; gap: 4px; }
.feature-label { color: var(--link); text-transform: uppercase; letter-spacing: .06em; }
.feature p { color: var(--soft); }
.news-ver { margin: -12px 0 8px; color: var(--muted); }
.news-list { color: var(--soft); display: flex; flex-direction: column; gap: 4px; }
.news-list li { position: relative; padding-left: 16px; }
.news-list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 100px; background: var(--ok); }
.steps { display: flex; flex-direction: column; gap: 12px; counter-reset: s; }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.step-n { flex: none; width: 32px; height: 32px; border-radius: 100px; background: var(--card-2); color: var(--text); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.steps p { color: var(--soft); }
.steps li > div { min-width: 0; }
.cmd.step-cmd { margin: 8px 0 0; }
.spoilers { display: flex; flex-direction: column; gap: 8px; }
.spoiler { border-radius: 12px; background: var(--card-2); }
.spoiler summary { min-height: 56px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); cursor: pointer; list-style: none; }
.spoiler summary::-webkit-details-marker { display: none; }
.spoiler summary .ic { color: var(--muted); transition: transform .2s ease; }
.spoiler[open] summary .ic { transform: rotate(180deg); }
.spoiler > p { padding: 0 16px 16px; color: var(--soft); max-width: 75ch; }
.cmd { display: block; margin: 0 16px 16px; padding: 10px 12px; border-radius: 8px; background: var(--bg); color: var(--text); font: 400 12px/20px var(--mono); overflow-x: auto; white-space: nowrap; }

/* right column */
.right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.info, .block-work, .related { padding: 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.info-list { display: flex; flex-direction: column; gap: 12px; }
.info-list dt { font-size: 14px; line-height: 24px; color: var(--muted); }
.info-list dd { font-size: 14px; line-height: 24px; color: var(--text); }
.info-list dd a { color: var(--text); }
.info-list dd a:hover { color: var(--link); }
.sha { display: flex; align-items: center; gap: 8px; }
.sha code { font: 400 13px/24px var(--mono); color: var(--text); }
.copy-mini { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.copy-mini:hover { color: var(--text); background: var(--card-2); }
.copy-mini .ic { width: 16px; height: 16px; }
.copy-mini.is-done { color: var(--ok); }
.btn-block { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.big {
  min-height: 56px; padding: 16px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 24px; color: #fff; text-align: center; transition: filter .15s ease;
}
.big.is-green { background: var(--green); color: var(--on-green); }
.big.is-grey { background: var(--btn); color: var(--text); }
.big:hover { filter: brightness(1.1); }
.big.is-disabled { background: var(--card-2); color: var(--muted); cursor: default; }
.big.is-disabled:hover { filter: none; }
.soon-text { color: var(--muted); }
.scan { margin-top: 12px; }
.scan summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
.scan summary::-webkit-details-marker { display: none; }
.ic-ok { width: 18px; height: 18px; color: var(--ok); }
.scan-ok { color: var(--ok); font-size: 14px; line-height: 24px; }
.scan-more { color: var(--link); font-size: 14px; line-height: 24px; }
.scan p { margin-top: 8px; color: var(--muted); }
.vote-btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.vote {
  min-height: 48px; padding: 0 16px; border-radius: 12px; background: var(--card-2); color: var(--soft); display: flex; align-items: center; justify-content: flex-start;
  text-align: left; line-height: 20px; gap: 10px; font-size: 14px; font-weight: 600; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s ease, color .15s ease;
}
.vote .ic { width: 18px; height: 18px; }
.vote span { white-space: nowrap; }
.vote b { margin-left: auto; color: var(--muted); font-weight: 600; }
.vote:hover { color: var(--text); }
.vote.is-mine { outline-color: var(--ok); color: var(--text); }
.vote.is-no.is-mine { outline-color: #e5484d; }
.vote-bar { margin-top: 12px; height: 6px; border-radius: 100px; background: rgba(229, 72, 77, .5); overflow: hidden; }
.vote-fill { display: block; height: 100%; background: var(--ok); transition: width .3s ease; }
.vote-meta { margin-top: 8px; color: var(--muted); }
.w-0 { width: 0; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; }
.w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; }
.w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }
.vote-bar.is-empty { background: var(--card-2); }
.related { display: flex; flex-direction: column; }
.related .media-card-title { margin-bottom: 8px; }
.related-item { display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 12px; color: var(--muted); }
.related-item:hover { background: var(--card-2); }
.related-item img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
.related-item b { display: block; color: var(--text); font-weight: 600; }
.related-item span span { display: block; }
.support-card { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 16px 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.support-card:hover { background: var(--card-2); }
.support-card b { display: block; color: var(--text); font-weight: 600; }
.support-card span span { display: block; }
.support-ic { width: 40px; height: 40px; border-radius: 100px; background: var(--card-2); display: grid; place-items: center; color: var(--link); flex: none; }
.support-go { margin-left: auto; color: var(--muted); }

/* dialogs */
dialog { border: 0; padding: 0; color: var(--muted); background: transparent; }
dialog::backdrop { background: rgba(0, 0, 0, .7); }
.modal { width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 720px); border-radius: 24px; background: var(--card); padding: 24px; overflow-y: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.modal-head .media-card-title { margin: 0; }
.versions { display: flex; flex-direction: column; gap: 8px; }
.versions li { padding: 16px; border-radius: 12px; background: var(--card-2); display: flex; flex-direction: column; gap: 8px; }
.v-head { display: flex; align-items: center; gap: 8px; }
.v-head .caption-1 { margin-left: auto; color: var(--muted); }
.v-file { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.v-file code { grid-column: 1; font-family: var(--mono); font-size: 11px; color: var(--muted); word-break: break-all; }
.v-dl { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--green); color: var(--on-green); font-size: 13px; font-weight: 600; }
.v-dl .ic { width: 16px; height: 16px; }
.search-dialog { margin-top: 12vh; width: min(560px, calc(100vw - 32px)); }
.search-dialog-box { border-radius: 16px; background: var(--card); box-shadow: var(--shadow); padding: 8px; }
.search-dialog-field { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 12px; border-radius: 12px; background: var(--card-2); color: var(--muted); }
.search-dialog-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 15px/24px var(--font); }
.search-dialog-x { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.search-results { display: flex; flex-direction: column; padding: 6px 0 0; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: 12px; line-height: 18px; }
.search-results a b { display: block; color: var(--text); font-size: 14px; line-height: 20px; font-weight: 600; }
.search-results a img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.search-results a.is-active, .search-results a:hover { background: var(--card-2); }
.search-empty { padding: 16px 10px 8px; color: var(--muted); }
.search-hint { padding: 8px 10px 4px; color: var(--muted); text-align: right; }

/* footer, mobile bar */
/* Solid panel: the engraving behind would swallow small text. */
.foot {
  margin: 48px 0 32px; padding: 18px 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; justify-content: space-between; color: var(--soft);
}
.foot a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.foot a:hover { color: var(--text); }
.mob-bar { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1279px) {
  .cs-item { flex-basis: 100%; }
  .slider-dots { display: flex; }
  .cs-shot { left: 46%; width: 600px; }
}
@media (max-width: 1100px) {
  .wrapper { grid-template-columns: minmax(0, 1fr); padding: 0 24px; }
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 40; width: 288px; height: auto; padding: 0 16px;
    background: var(--bg); transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow);
  }
  body.is-drawer-open .side { transform: none; }
  body.is-drawer-open .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .55); }
  .side-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 100px; color: var(--muted); }
  .side-langs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 16px 8px 0 12px; }
  .side-langs a { color: var(--muted); }
  .side-langs a.is-active { color: var(--text); font-weight: 600; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main-post { grid-template-columns: minmax(0, 1fr); }
  .right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .right .info { grid-row: span 2; }
}
@media (max-width: 767px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); background-attachment: scroll; background-size: 200% auto; }
  :root:not([data-theme="light"]) { --bg-art: url("../img/bg-charleroi-1200.webp"); }
  .wrapper { padding: 0 16px; }
  .top { margin-top: 12px; }
  .search-box { width: auto; flex: 1; }
  .search-kbd, .top-right .button { display: none; }
  .main-anounce { margin-top: 16px; height: 360px; }
  .cs-item { height: 360px; }
  .cs-text { left: 20px; right: 20px; top: 20px; bottom: 20px; width: auto; gap: 10px; }
  .cs-text h2 { font-size: 22px; line-height: 28px; max-width: none; -webkit-line-clamp: 3; }
  .cs-shot { left: 20px; top: 172px; width: 560px; }
  .big-slider { position: relative; z-index: 1; height: 48px; padding: 12px 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
  .controls-big { display: none; }
  .slider-dots { left: auto; right: 20px; bottom: 38px; }
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .soft-item { height: auto; min-height: 74px; padding: 12px 12px 12px 72px; text-align: left; display: flex; flex-direction: column; justify-content: center; }
  .soft-icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 48px; height: 48px; margin: 0; }
  .topline { position: static; order: 3; margin-top: 2px; }
  .topline:empty { display: none; }
  .size { top: 12px; right: 12px; }
  .soft-title { padding-right: 64px; }
  .wide-sum { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .wide-item .marker { display: none; }
  .soft-info { display: flex; gap: 8px; flex-wrap: wrap; }
  .soft-info .meta::before { content: "·"; margin-right: 8px; }
  .crumbs { margin-top: 20px; }
  .cover-hero { height: 260px; }
  .cover-actions { top: 16px; right: 16px; }
  .round-btn { width: 40px; height: 40px; }
  .cover-icon { top: 108px; width: 96px; height: 96px; border-radius: 22px; }
  .cover-stats { top: 220px; gap: 12px; flex-wrap: wrap; }
  .cover-hero-body { padding: 0 16px 16px; }
  .title-row h1 { font-size: 26px; line-height: 34px; }
  .thumbs { margin-top: 12px; }
  .thumb { width: 84px; height: 52px; }
  .media-card, .faq-block, .info, .block-work, .related { padding: 16px; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .right { display: flex; }
  .mob-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--bar-bg);
    backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-top: 1px solid var(--line);
  }
  .mob-bar a, .mob-bar button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center; color: var(--muted); font-size: 11px; line-height: 14px; font-weight: 600; }
  .mob-bar .is-active { color: var(--text); }
  .search-dialog { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}