:root { --ink:#191620; --paper:#fffaf4; --pink:#ff6fa8; --lavender:#d9c7ff; --line:3px solid var(--ink); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#292431; font-family:'Noto Sans Thai', sans-serif; }
.site-header,.site-footer { text-align:center; color:#fff; }
.site-header { padding:4rem 1.5rem 2rem; }
.home-link { display:inline-block; margin-top:1rem; padding:.45rem .8rem; border:2px solid var(--ink); border-radius:8px; background:var(--lavender); color:var(--ink) !important; text-decoration:none !important; font-size:1rem; font-weight:900; box-shadow:3px 3px 0 var(--ink); }
.coming-soon { width:fit-content; margin:1rem auto 0; padding:.55rem 1rem; border:2px solid var(--ink); border-radius:8px; background:var(--lavender); color:var(--ink); font-weight:900; box-shadow:3px 3px 0 var(--ink); }
.eyebrow { color:var(--pink); letter-spacing:.12em; font-weight:700; font-size:.8rem; }
h1 { margin:.2rem 0; font-size:clamp(2rem,6vw,4.4rem); line-height:1; }
.subtitle { color:#eadfff; font-size:clamp(1.1rem,3vw,1.8rem); font-weight:900; }
.manga-book { width:min(100% - 2rem,1000px); margin:0 auto 3rem; }
.page { margin:2rem 0; padding:clamp(1rem,3vw,2rem); background:var(--paper); box-shadow:0 12px 0 #111; }
.page-heading { display:flex; align-items:baseline; gap:1rem; border-bottom:var(--line); margin-bottom:1rem; padding-bottom:.5rem; }
.page-heading span { color:var(--pink); font-weight:900; letter-spacing:.12em; }
.page-heading h2 { margin:0; font-size:clamp(1.2rem,3vw,2rem); }
.illustrated-page { position:relative; aspect-ratio:2 / 3; container-type:inline-size; border:var(--line); overflow:hidden; background:#fff; line-height:1.35; }
.illustrated-page > img { display:block; width:100%; height:100%; object-fit:contain; }
.page-copy { position:absolute; z-index:2; margin:0; padding:.5rem .65rem; border:2px solid var(--ink); border-radius:16px; background:rgba(255,255,255,.95); box-shadow:3px 3px 0 var(--ink); font-size:clamp(.5rem,1vw,.72rem); font-weight:900; line-height:1.35; text-align:center; overflow-wrap:anywhere; }
.page-one-caption { top:2%; left:3%; width:42%; background:var(--lavender); }
.page-one-pinky { top:27%; right:3%; width:40%; background:var(--pink); }
.page-one-khaopun { top:52%; left:3%; width:38%; }
.page-one-plan { bottom:4%; right:3%; width:42%; background:var(--lavender); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.panel { position:relative; min-height:250px; border:var(--line); overflow:hidden; background:linear-gradient(135deg,#f8d9e8,#dfd4ff); }
.panel::before { content:'ภาพประกอบรอวาด'; position:absolute; inset:0; display:grid; place-items:center; color:rgba(25,22,32,.28); font-size:clamp(.8rem,2vw,1.2rem); font-weight:900; }
.bubble,.caption,.sfx { position:absolute; z-index:1; margin:0; }
.bubble { top:5%; left:4%; max-width:82%; width:fit-content; padding:.5rem .65rem; border:2px solid var(--ink); border-radius:16px; background:rgba(255,255,255,.95); box-shadow:3px 3px 0 var(--ink); font-size:clamp(.55rem,1.1vw,.78rem); font-weight:900; line-height:1.35; text-align:center; overflow-wrap:anywhere; }
.bubble-small { top:auto; left:auto; right:4%; bottom:5%; max-width:44%; padding:.3rem .45rem; border-radius:12px; font-size:clamp(.48rem,.95vw,.66rem); }
.caption { left:4%; top:5%; max-width:46%; padding:.5rem .65rem; background:rgba(255,255,255,.9); font-size:clamp(.55rem,1.1vw,.78rem); font-weight:700; line-height:1.4; }
.sfx { right:7%; bottom:8%; color:var(--pink); font-size:clamp(1.5rem,4vw,3rem); font-weight:900; transform:rotate(-8deg); text-shadow:2px 2px 0 var(--ink); }
.site-footer { padding:1rem; color:#bdb7c5; font-size:.8rem; }
.episode-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin:1rem auto 0; padding:0 1rem; }
.episode-nav a { padding:.55rem .9rem; border:2px solid var(--ink); border-radius:8px; background:var(--lavender); color:var(--ink); text-decoration:none; font-weight:900; box-shadow:3px 3px 0 var(--ink); }
@media (max-width:620px) {
  .site-header { padding-top:2.5rem; }
  .manga-book { width:min(100% - 1rem,1000px); }
  .page { padding:.65rem; margin:1rem 0; box-shadow:0 7px 0 #111; }
  .page-copy { padding:.3rem .4rem; border-width:1px; box-shadow:2px 2px 0 var(--ink); font-size:.5rem; }
  .grid { gap:.4rem; }
  .panel { min-height:190px; }
  .bubble { padding:.32rem .42rem; font-size:.56rem; }
  .bubble-small { font-size:.5rem; }
  .caption { padding:.32rem .42rem; font-size:.52rem; }
}