@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=Noto+Sans+Thai:wght@400;600;700;900&display=swap');

:root { --ink:#16151a; --paper:#fffaf0; --pink:#ff4f91; --yellow:#ffd84d; --blue:#79d9ed; --purple:#9b75e8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#25232a; font-family:'Noto Sans Thai',sans-serif; }
.hero { padding:clamp(3rem,8vw,6rem) 1.5rem 3rem; text-align:center; color:#fff; }
.eyebrow, .episode-number, .placeholder-label { font-family:'Chakra Petch',sans-serif; letter-spacing:.12em; font-weight:700; }
.eyebrow { color:var(--yellow); font-size:.8rem; }
h1 { margin:.5rem 0 1rem; font-size:clamp(3rem,9vw,6.5rem); line-height:.9; }
h1 span { color:var(--pink); }
.intro { color:#d8d3dd; line-height:1.8; }
.hero-links { margin-top:1.5rem; }
.hero-links a { display:inline-block; padding:.65rem 1rem; color:var(--ink); background:var(--yellow); text-decoration:none; font-weight:900; box-shadow:4px 4px 0 #111; transition:transform .2s, box-shadow .2s; }
.hero-links a:hover, .hero-links a:focus-visible { transform:translate(-2px,-2px); box-shadow:6px 6px 0 #111; outline:none; }
.hero-links span { color:var(--pink); font-size:1.2rem; margin-left:.25rem; }
.episode-list { width:min(100% - 2rem,1100px); margin:0 auto 4rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.episode-card { display:grid; grid-template-columns:minmax(120px,.8fr) 1.2fr; min-height:245px; color:var(--ink); background:var(--paper); text-decoration:none; box-shadow:7px 7px 0 #111; transition:transform .2s, box-shadow .2s; }
.episode-card:hover, .episode-card:focus-visible { transform:translate(-3px,-3px); box-shadow:10px 10px 0 #111; outline:none; }
.upcoming-card { cursor:default; }
.thumbnail { position:relative; min-height:245px; overflow:hidden; background:#4c3b68; }
.thumbnail img { width:100%; height:100%; display:block; object-fit:cover; object-position:top center; }
.card-copy { display:flex; flex-direction:column; align-items:flex-start; padding:1.25rem 1.1rem; }
.episode-number { color:var(--pink); font-size:.72rem; }
.card-copy h2 { margin:.45rem 0 .55rem; font-size:clamp(1.1rem,2vw,1.55rem); line-height:1.2; }
.card-copy p { margin:0; color:#5d5862; font-size:.9rem; line-height:1.65; }
.read-link { margin-top:auto; padding-top:1rem; color:var(--ink); font-weight:900; }
.read-link span { color:var(--pink); font-size:1.35rem; margin-left:.25rem; }
.color-card .thumbnail { display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--ink); }
.placeholder-episode { font-family:'Chakra Petch',sans-serif; font-size:clamp(4rem,8vw,6.5rem); font-weight:700; line-height:.8; text-shadow:4px 4px 0 rgba(255,255,255,.5); }
.placeholder-label { margin-top:1.5rem; text-align:center; font-size:.7rem; line-height:1.15; }
.card-yellow .thumbnail { background:var(--yellow); } .card-blue .thumbnail { background:var(--blue); } .card-purple .thumbnail { background:var(--purple); } .card-pink .thumbnail { background:var(--pink); }
.site-footer { padding:0 1rem 2rem; color:#aaa3b0; text-align:center; font-size:.85rem; }
@media (max-width:760px) { .episode-list { grid-template-columns:1fr; max-width:600px; } }
@media (max-width:430px) { .episode-card { grid-template-columns:115px 1fr; min-height:210px; } .thumbnail { min-height:210px; } .card-copy { padding:.9rem .8rem; } .card-copy h2 { font-size:1rem; } .card-copy p { font-size:.78rem; } }