:root {
  --bg: #e9e6df; --ink: #171a19; --muted: #5d6460; --card: #fbfaf7; --accent: #1f6b4f; --line: #d6d1c6;
  --page-max: 860px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1312; --ink: #e2e7e4; --muted: #8e9b95; --card: #18201d; --accent: #63c49a; --line: #26322d; } }
:root[data-theme="dark"] { --bg: #0f1312; --ink: #e2e7e4; --muted: #8e9b95; --card: #18201d; --accent: #63c49a; --line: #26322d; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Noto Sans Thai", system-ui, sans-serif; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* home */
.home { max-width: 980px; margin: 0 auto; padding: 0 16px 60px; }
.cover { position: relative; margin: 0 -16px; aspect-ratio: 16 / 10; max-height: 74vh; width: calc(100% + 32px); overflow: hidden; background: #000; }
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(10,14,13,.92)); }
.cover-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px 26px; color: #f2f5f3; z-index: 1; }
.cover-text .kicker { letter-spacing: .18em; font-size: 13px; color: #99d9a8; font-weight: 700; }
.cover-text h1 { font-family: "Kanit", sans-serif; font-weight: 900; font-size: clamp(38px, 8vw, 76px); line-height: 1.05; margin: 6px 0 8px; text-shadow: 0 3px 18px rgba(0,0,0,.6); }
.cover-text p { margin: 0; max-width: 40rem; line-height: 1.8; color: #dbe4df; font-size: 15px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 6px; }
.btn { border: 0; border-radius: 999px; padding: 12px 22px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; display: inline-block; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.list h2 { font-size: 18px; margin: 28px 0 12px; }
.ch { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; text-decoration: none; }
.ch img { width: 96px; height: 64px; object-fit: cover; border-radius: 9px; flex: none; background: var(--line); }
.ch .n { font-size: 12px; color: var(--muted); }
.ch .t { font-weight: 700; font-size: 16px; }
.ch.soon { opacity: .5; pointer-events: none; }
.note { font-size: 12px; color: var(--muted); margin-top: 28px; line-height: 1.7; }

/* reader */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar .ttl { flex: 1; text-align: center; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; text-decoration: none; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0 30px; }
.endnav { max-width: var(--page-max); margin: 0 auto 60px; padding: 0 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* a comic page */
.page { position: relative; width: min(100vw, var(--page-max)); aspect-ratio: 1 / 1.414; background: #fff; container-type: inline-size; overflow: hidden; box-shadow: 0 4px 22px rgba(0,0,0,.18); }
.pn { position: absolute; overflow: hidden; background: #cfd3d0; }
.pn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frames { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.frames polygon { fill: none; stroke: #111; stroke-width: .42; stroke-linejoin: miter; }
.frames polygon.inset { stroke: #fff; stroke-width: 1.3; }
.frames polygon.inset2 { stroke: #111; stroke-width: .42; }
.tails { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.tails path { fill: #fff; stroke: #111; stroke-width: .3; stroke-linejoin: round; }
.tails circle { fill: #fff; stroke: #111; stroke-width: .25; }

.bb { position: absolute; z-index: 4; transform: translate(-50%, -50%); text-align: center; line-height: 1.35; color: #111; word-break: normal; overflow-wrap: break-word; line-break: auto; }
.bb.speech, .bb.whisper, .bb.thought { font-family: "Mali", "Noto Sans Thai", sans-serif; font-weight: 600; font-size: 2.45cqw; background: #fff; border: .32cqw solid #111; border-radius: 50% / 46%; padding: 2.1cqw 3cqw; }
.bb.whisper { border-style: dashed; border-width: .26cqw; font-weight: 500; color: #333; }
.bb.thought { border-radius: 42%; border-width: .24cqw; font-weight: 500; box-shadow: 0 0 0 .6cqw #fff inset; }
.bb.caption { font-family: "Noto Sans Thai", sans-serif; font-weight: 600; font-size: 2.15cqw; background: #f7f1df; border: .26cqw solid #111; padding: 1.2cqw 1.8cqw; text-align: left; box-shadow: .5cqw .5cqw 0 rgba(0,0,0,.85); }
.bb.shout { font-family: "Kanit", sans-serif; font-weight: 800; font-size: 2.6cqw; padding: 5.2cqw 6.4cqw; isolation: isolate; }
.bb.shout::before, .bb.shout::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--star); }
.bb.shout::before { background: #111; inset: -0.5cqw; }
.bb.shout::after { background: #fff; }
.bb.sfx { font-family: "Kanit", sans-serif; font-style: italic; font-weight: 900; color: #fff6c8; -webkit-text-stroke: .55cqw #1a1a1a; paint-order: stroke fill; text-shadow: .5cqw .6cqw 0 #c0392b; letter-spacing: .05em; white-space: nowrap; line-height: 1; }
.bb.title { font-family: "Kanit", sans-serif; font-weight: 900; font-size: 11cqw; line-height: 1.05; color: #f4fff8; -webkit-text-stroke: .5cqw #0c1a14; paint-order: stroke fill; text-shadow: 0 .8cqw 2.2cqw rgba(0,0,0,.65); }

.fade-note { text-align: center; color: var(--muted); font-size: 13px; padding: 10px; }
@media (max-width: 520px) { .cover { aspect-ratio: 3 / 4; } }