:root{--ink:#171411;--cream:#f5f0e8;--paper:#fffdf9;--orange:#e55e35;--yellow:#e7ba4b;--muted:#776f67;--line:#d8d0c5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;overflow-x:hidden}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:10}.skip:focus{left:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:16px}
.site-header{display:flex;align-items:center;height:56px;padding-inline:max(16px,calc((100% - 1180px)/2));border-bottom:1px solid var(--line)}
.brand{color:var(--ink);text-decoration:none;font:22px Georgia,serif;display:flex;gap:1px;align-items:baseline}.brand i{color:var(--orange)}.brand b{color:var(--muted);font-weight:400}
.lead{margin:18px 0 12px;font-size:15px;color:var(--ink);max-width:60ch}
button{font:inherit;color:inherit}
.profile{margin:0 0 10px}.profile[hidden]{display:none}
.profile-chips{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.profile-label{font-size:12px;font-weight:700;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 10px;font-size:12px}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.chip button{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;padding:2px 6px;color:var(--muted)}.chip button:hover{color:var(--ink)}
.chip.no{border-style:dashed}
.profile-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.link-btn{border:0;background:none;padding:4px 0;font-size:12px;color:var(--muted);text-decoration:underline;cursor:pointer}.link-btn:hover{color:var(--ink)}
.provider-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.provider-chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer}
.provider-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;transition:opacity .15s}
@media(min-width:760px){.tile-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}}
.tile{min-width:0;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;transition:opacity .15s,transform .15s}
.tile.picked{opacity:.35;transform:scale(.97)}
.tile-art{position:relative;aspect-ratio:16/10;background:#2a2521;overflow:hidden}
.tile-art img{display:block;width:100%;height:100%;object-fit:cover}
.tile-letter{display:none;place-items:center;width:100%;height:100%;font:44px Georgia,serif;color:var(--yellow)}
.tile-art img[hidden]{display:none}.tile-art img[hidden]+.tile-letter{display:grid}
.tile-body{min-width:0;padding:9px;display:flex;flex-direction:column;flex:1;overflow-wrap:anywhere}
.tile h3{margin:0 0 3px;font:17px/1.2 Georgia,serif}
.tile-meta{margin:0 0 5px;font-size:11px;color:var(--muted)}
.tile-short{margin:0 0 6px;font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile-because{margin:0 0 6px;font-size:11px;color:var(--muted);font-style:italic}
.tile-more{margin:0 0 6px;font-size:11px}.tile-more summary{cursor:pointer;color:var(--muted);text-decoration:underline}
.tile-more p{margin:4px 0 0}
.tile-play{align-self:flex-start;margin:auto 0 8px;font-size:12px;font-weight:700;color:var(--orange);text-decoration:none}
.tile-actions{display:flex;gap:5px}
.tile-actions button{flex:1 1 0;min-width:0;border:1px solid var(--line);background:var(--paper);border-radius:7px;padding:8px 4px;font-size:12px;font-weight:700;cursor:pointer}
.tile-actions .like:hover{background:var(--ink);color:#fff}.tile-actions .dislike:hover{border-color:var(--orange);color:var(--orange)}
.empty{padding:28px 0;color:var(--muted)}
.visit{margin:0 0 18px;padding:12px 14px;background:var(--yellow);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}.visit[hidden]{display:none}
.visit p{margin:0;font-weight:700;font-size:14px}.visit div{display:flex;flex-wrap:wrap;gap:6px}
.visit button{border:1px solid var(--ink);background:transparent;border-radius:7px;padding:7px 10px;font-size:12px;font-weight:700;cursor:pointer}.visit button:hover{background:var(--ink);color:#fff}
.footer{margin-top:28px;padding-block:20px 40px;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}
.attribution{flex-basis:100%;margin:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:10px}
.tmdb-link{flex:none;display:block;line-height:0}
.tmdb-logo{height:18px;width:auto;display:block}
.footer a{color:inherit}
@media(prefers-reduced-motion:reduce){.tile,.tile-grid{transition:none}}
.page-title{margin:18px 0 0;font:700 18px/1.25 Georgia,serif}.page-title+.lead{margin-top:4px}
.footer>a{margin-left:10px}
.doc{max-width:68ch;padding-block:6px 8px}
.doc h1{margin:22px 0 10px;font:700 28px/1.15 Georgia,serif}
.doc h2{margin:26px 0 6px;font:700 19px/1.25 Georgia,serif}
.doc p,.doc li{margin:0 0 10px;font-size:15px;line-height:1.55}
.doc ul{margin:0 0 10px;padding-left:20px}.doc li{margin-bottom:6px}
.doc a{color:var(--ink)}.doc code{font-size:13px;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.doc .note{color:var(--muted);font-size:13px}
.doc .home{display:inline-block;margin-top:4px;padding:9px 14px;border:1px solid var(--ink);border-radius:7px;font-size:13px;font-weight:700;text-decoration:none}.doc .home:hover{background:var(--ink);color:#fff}