:root {
  --bg: #121110; --panel: #1a1815; --line: #2e2a24;
  --ink: #e8e2d6; --dim: #8d8474; --accent: #b3202f;
}
* { margin: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--ink); font-family: Georgia, 'Times New Roman', serif; }
a { color: inherit; }

header { display: flex; align-items: center; gap: .9rem;
         max-width: 1100px; margin: 0 auto; padding: 1.6rem 1rem 1.2rem; }
.seal { color: var(--accent); border: 2px solid var(--accent); font-size: 1.3rem;
        line-height: 1.15; padding: .3rem .35rem; writing-mode: vertical-rl;
        border-radius: 2px; user-select: none; }
.site { font-size: 1.05rem; letter-spacing: .04em; color: var(--dim); text-decoration: none; }

.film { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.film img { width: 220px; max-width: 60vw; border: 1px solid var(--line); align-self: flex-start; }
.film .fx { flex: 1; min-width: 260px; }
.film h2 { font-size: 1.9rem; font-weight: normal; line-height: 1.15; }
.film h2 a { text-decoration: none; border-bottom: 1px solid var(--accent); }
.film .meta { color: var(--dim); font-size: 1rem; margin: .5rem 0 .9rem; }
.film .meta b { color: var(--ink); font-weight: normal; }
.film .plot { line-height: 1.65; font-size: 1.02rem; margin-bottom: .9rem; }
.film .credits { color: var(--dim); font-size: .92rem; line-height: 1.6; }
.film .credits b { color: var(--ink); font-weight: normal; }
.film .ext { margin-top: 1rem; font-size: .9rem; }
.film .ext a { color: var(--accent); text-decoration: none; }
.film .ext a:hover { border-bottom: 1px solid var(--accent); }

.feature { max-width: 900px; margin: 0 auto 2rem; padding: 1.6rem;
           border: 1px solid var(--line); background: var(--panel); }

.overlay { position: fixed; inset: 0; background: rgba(10, 9, 8, .78);
           display: flex; align-items: center; justify-content: center;
           padding: 1.2rem; z-index: 10; }
.modal { position: relative; max-width: 820px; width: 100%; max-height: 90vh;
         overflow: auto; background: var(--panel); border: 1px solid var(--line);
         padding: 1.8rem; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal .x { position: absolute; top: .6rem; right: .9rem; background: none;
            border: none; color: var(--dim); font-size: 1.5rem; cursor: pointer;
            font-family: inherit; line-height: 1; }
.modal .x:hover { color: var(--ink); }

.bar { display: flex; gap: .7rem; max-width: 1100px; margin: 0 auto;
       padding: 0 1rem 1.1rem; flex-wrap: wrap; }
.bar input, .bar select { background: var(--panel); color: var(--ink);
       border: 1px solid var(--line); padding: .5rem .8rem;
       font-family: inherit; font-size: .95rem; }
.bar input { flex: 1; min-width: 200px; }
.count { color: var(--dim); font-size: .85rem; align-self: center; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1.1rem; max-width: 1100px; margin: 0 auto; padding: 0 1rem 3rem; }
.card { text-decoration: none; color: var(--ink); cursor: pointer; }
.card .ph { aspect-ratio: 2/3; background: var(--panel) center/cover; border: 1px solid var(--line);
            display: flex; align-items: center; justify-content: center;
            color: var(--dim); font-size: .95rem; text-align: center; padding: .4rem; }
.card:hover .ph { border-color: var(--accent); }
.card .t { font-size: .85rem; margin-top: .4rem; line-height: 1.25; }
.card .s { color: var(--dim); font-size: .75rem; }

footer { text-align: center; color: var(--dim); font-style: italic;
         padding: 0 1rem 2rem; font-size: .85rem; }