/* Read (2026-11-09, Ronald): the komiks list, option A "Spotlight". templates/culture/read.html */

/* the banner is dark in both themes: it sits on the art */
.kx-hero { position: relative; overflow: hidden; border-radius: var(--r); background: #0d0f12; margin-bottom: 24px; color: #c3c8d2; }
.kx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: blur(2px); }
.kx-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,15,18,.94), rgba(13,15,18,.72) 55%, rgba(13,15,18,.35)); }
.kx-in { position: relative; display: flex; flex-wrap: wrap; gap: 32px; padding: 36px; align-items: center; }
.kx-cover { flex: 0 0 220px; transform: rotate(-2deg); }
.kx-cover img { display: block; width: 100%; height: auto; border-radius: 10px; border: 4px solid #f3ead8; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.kx-txt { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.kx-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kx-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #35ded1; }
.kx-tag { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; color: #eceef2; }
.kx-hero :is(h1, h2) { color: #eceef2; font-size: 46px; font-weight: 800; line-height: 1.02; }
.kx-hero :is(h1, h2) span { display: block; margin-top: 6px; font-size: 26px; font-weight: 600; color: #a3a9b5; }
.kx-txt > p { margin: 0; max-width: 560px; font-size: 15px; }
.kx-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: #a3a9b5; }
.kx-facts b { color: #eceef2; }
.kx-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.kx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.kx-btn.solid { background: var(--tang); color: #14203a; }
.kx-btn.ghost { border: 1px solid rgba(255,255,255,.22); color: #eceef2; font-weight: 600; }
.kx-btn:hover { filter: brightness(1.08); }

.kx-two { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin-bottom: 32px; }
.kx-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-sizing: border-box; }
.kx-box h2 { font-size: 22px; }
.kx-latest { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kx-ser { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.kx-latest h2 + .kx-ser { margin-top: 8px; }
.kx-thumb { flex: 0 0 92px; }
.kx-thumb img { width: 92px; height: 124px; object-fit: cover; border-radius: 10px; display: block; }
.kx-sbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kx-sbody h3 { font-size: 18px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin-bottom: 4px; }
.kx-sbody h3 a { color: inherit; text-decoration: none; }
.kx-sbody h3 span { font-family: var(--ui); font-size: 13px; font-weight: 500; color: var(--txt-3); letter-spacing: 0; }
.kx-ch { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; margin: 0 -10px; border-radius: 10px; color: var(--txt-3); text-decoration: none; }
.kx-ch b { font-weight: 600; white-space: nowrap; }
.kx-ch span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt-2); }
.kx-ch em { font-style: normal; font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.kx-ch.on { background: color-mix(in srgb, var(--tang) 10%, transparent); color: var(--tang-ink); }
.kx-ch.on:hover { background: color-mix(in srgb, var(--tang) 16%, transparent); }

.kx-wait { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; }
.kx-wait h2 { font-size: 20px; }
.kx-wait > p { margin: 0; font-size: 13px; color: var(--txt-2); }
.kx-w { display: flex; align-items: center; gap: 14px; min-height: 64px; text-decoration: none; color: inherit; }
.kx-w i { flex: 0 0 26px; height: 26px; border-radius: 8px; background: var(--sunk); color: var(--tang-ink); display: grid; place-items: center; font: 12px var(--mono); }
.kx-w img { width: 52px; height: 64px; object-fit: cover; border-radius: 8px; }
.kx-w span { display: flex; flex-direction: column; }
.kx-w b { font-family: var(--display); font-size: 16px; color: var(--txt-hi); }
.kx-w small { font-size: 12.5px; color: var(--txt-3); }
.kx-more { font-size: 13px; font-weight: 600; color: var(--link); text-decoration: none; }

.kx-all h2 { font-size: 22px; margin-bottom: 16px; }
.kx-all h2 span { font: 12px var(--mono); color: var(--txt-3); }
.kx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; }
.kx-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.kx-art { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--sunk); }
.kx-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.kx-card:hover .kx-art img { transform: scale(1.03); }
.kx-art em { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; font: 700 11px var(--ui); font-style: normal; background: rgba(18,20,24,.78); color: #eceef2; }
.kx-art em.live { background: var(--tang); color: #14203a; }
.kx-art em.soon { background: #35ded1; color: #073b38; }
.kx-card.off .kx-art img { filter: grayscale(.85); opacity: .55; }
.kx-card b { font-family: var(--display); font-size: 16px; color: var(--txt-hi); line-height: 1.2; }
.kx-card small { font-size: 12.5px; color: var(--txt-3); }

/* the komiks details page: templates/culture/komiks.html */
.kd-crumb { font-size: 13px; color: var(--txt-3); margin-bottom: 14px; }
.kd-crumb a { color: var(--link); }
.kd-prog { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #a3a9b5; max-width: 420px; }
.kd-prog[hidden] { display: none; }
.kd-prog i { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.14); }
.kd-prog b { display: block; height: 100%; border-radius: 6px; background: var(--tang); }
.kd-soon { margin: 0; color: #a3a9b5; }
.kd-soon b { color: #eceef2; }
.kd-chs { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; }
.kd-chs h2 { font-size: 22px; margin-bottom: 8px; }
.kd-chs h2 span, .kd-ch { display: flex; gap: 16px; align-items: center; padding: 14px 10px; margin: 0 -10px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; border-radius: 12px; }
a.kd-ch:hover { background: color-mix(in srgb, var(--tang) 8%, transparent); }
.kd-tile { flex: 0 0 72px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--sunk); }
.kd-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd-ch.off .kd-tile img { filter: grayscale(.85); opacity: .55; }
.kd-cb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kd-cb small { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.kd-cb b { font-family: var(--display); font-size: 18px; color: var(--txt-hi); line-height: 1.2; }
.kd-cb > span { font-size: 13.5px; line-height: 1.5; color: var(--txt-2); }
.kd-st { flex: none; font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--sunk); color: var(--txt-3); white-space: nowrap; }
.kd-st.on { background: color-mix(in srgb, var(--tang) 14%, transparent); color: var(--tang-ink); }
.kd-st.now { background: var(--tang); color: #14203a; }
.kd-side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 24px; }
.kd-notes { display: flex; flex-direction: column; gap: 14px; }
.kd-notes h2 { font-size: 20px; }
.kd-notes b { font-size: 14px; color: var(--txt-hi); }
.kd-notes p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--txt-2); }
.kd-notes small { font-size: 12px; color: var(--txt-3); }
.kd-legend { display: flex; gap: 16px; align-items: flex-start; color: inherit; text-decoration: none; }
.kd-legend img { flex: 0 0 76px; width: 76px; height: 96px; object-fit: cover; border-radius: 10px; }
.kd-legend > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kd-legend small { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.kd-legend b { font-family: var(--display); font-size: 18px; color: var(--txt-hi); }
.kd-legend span span { font-size: 13px; line-height: 1.5; color: var(--txt-2); }
.kd-legend em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--link); }

@media (max-width: 640px) {
  .kd-tile { flex-basis: 56px; height: 76px; }
  .kd-st { display: none; }
  .kx-in { padding: 24px; gap: 24px; }
  .kx-cover { flex-basis: 180px; margin: 0 auto; }
  .kx-hero :is(h1, h2) { font-size: 36px; }
  .kx-thumb { flex-basis: 64px; }
  .kx-thumb img { width: 64px; height: 86px; }
}
@media (prefers-reduced-motion: reduce) { .kx-art img { transition: none; } }