/* Question page /ep/<n>/: one question card, its Spotify episode, and a way back into the swipe deck. Same tokens as app.css */
:root{
  --ink:#1c100b; --ink2:#2a1912; --paper:#fff7f1; --muted:rgba(255,247,241,.72); --line:rgba(255,247,241,.24);
  --brand:#dd492f; --body:"Anuphan",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased}
.page{max-width:480px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;min-height:100vh;min-height:100dvh}
.top .logo{width:240px;max-width:100%;height:auto;display:block}
main{display:flex;flex-direction:column;gap:14px;flex:1}
.card{background:var(--brand);border-radius:22px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:18px}
.card .ep{font-size:13px;font-weight:600;letter-spacing:.06em;opacity:.85}
.card h1{margin:0;font-size:22px;font-weight:500;line-height:1.45;text-align:center;display:flex;flex-direction:column;gap:14px;padding:18px 0}
.card h1 .p,.card h1 .ln{display:block}
.card h1 .ln{white-space:nowrap}
.card .foot{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.card .foot p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.card .foot b{font-size:14px;font-weight:600}
.player{display:block;width:100%;height:152px;border:0;border-radius:12px;background:var(--ink2)}
.btns{display:flex;flex-direction:column;gap:10px}
.btn{display:flex;justify-content:center;align-items:center;border-radius:999px;padding:12px 16px;font:600 15px var(--body);text-decoration:none;cursor:pointer;border:0}
.btn.main{background:var(--paper);color:var(--brand)}
.btn.ghost{background:none;color:var(--paper);border:1px solid var(--line)}
.btn:focus-visible,.pn a:focus-visible,.credit a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.pn a{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;color:var(--paper);text-decoration:none;min-width:0}
.pn .next{text-align:right}
.pn small{font-size:12px;font-weight:600;color:var(--muted)}
.pn span{font-size:13px;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.credit{text-align:center;font-size:11px;color:var(--muted);display:flex;justify-content:center;align-items:center;gap:4px}
.credit img{height:8.5px;width:auto;display:block}
@media (max-width:350px){ .card h1{font-size:19px} .card h1 .ln{white-space:normal} }
@media (min-width:600px){ .card h1{font-size:25px} }