:root { --ink:#101522; --paper:#f6f1e8; --warm:#e9dfd0; --line:#d9cdbb; --muted:#6d6a68; --red:#bc4639; --gold:#bd8d3b; --serif:"Playfair Display", Georgia, serif; --sans:"Plus Jakarta Sans", sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); } a { color:inherit; text-decoration:none; } button,input,select { font:inherit; } button { cursor:pointer; }
.navbar { position:sticky; top:0; z-index:100; min-height:62px; display:flex; align-items:center; gap:26px; padding:0 28px; background:rgba(246,241,232,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(15px); } .navbar-logo { display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; color:var(--red); font-family:var(--sans); font-size:1.05rem; font-weight:700; letter-spacing:-.04em; white-space:nowrap; } .navbar-links { display:flex; align-items:center; gap:3px; min-width:0; overflow-x:auto; scrollbar-width:none; } .navbar-links::-webkit-scrollbar { display:none; } .nav-link { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:8px 11px; border-radius:999px; color:var(--muted); font-size:.8rem; font-weight:600; transition:background .18s ease,color .18s ease; } .nav-link:hover,.nav-link.active { color:var(--ink); background:var(--warm); } .nav-link.active { color:var(--red); box-shadow:inset 0 0 0 1px rgba(188,70,57,.12); } .nav-link.disabled { opacity:.4; } .nav-badge { background:var(--red); color:white; border-radius:6px; padding:2px 5px; font-size:.56rem; line-height:1; }
.page-shell { max-width:1240px; margin:auto; padding:0 28px 80px; }.masthead { max-width:760px; padding:95px 0 86px; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 15px; color:var(--red); font:500 .7rem/1.2 "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }.eyebrow span { width:22px; height:1px; background:currentColor; }.masthead h1,.library h2,.spotlight h2 { font-family:var(--serif); font-weight:700; letter-spacing:-.055em; }.masthead h1 { font-size:clamp(4rem,11vw,8.5rem); line-height:.83; margin:0; }.masthead h1 em { color:var(--red); font-weight:600; }.intro { max-width:550px; margin:30px 0; font-size:1.05rem; line-height:1.75; color:var(--muted); }.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }.pill { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--ink); border-radius:999px; background:transparent; padding:11px 17px; font-size:.79rem; font-weight:700; transition:.18s ease; }.pill:hover { transform:translateY(-2px); background:var(--ink); color:var(--paper); }.pill.primary { background:var(--red); border-color:var(--red); color:white; }.pill.primary:hover { background:#9f3329; }
.spotlight { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:48px 0; display:grid; grid-template-columns:minmax(225px,.75fr) 2fr; gap:42px; }.spotlight h2,.library h2 { font-size:clamp(2rem,4vw,3.25rem); margin:0; line-height:1; }.spotlight-copy > p:last-child { margin:18px 0 0; max-width:290px; font-size:.86rem; color:var(--muted); line-height:1.6; }.featured-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.feature { position:relative; aspect-ratio:1.05; overflow:hidden; background:var(--ink); color:white; }.feature img { width:100%; height:100%; object-fit:cover; opacity:.82; transition:transform .35s ease; }.feature:hover img { transform:scale(1.04); }.feature::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.78)); }.feature span { position:absolute; z-index:1; bottom:14px; left:14px; right:12px; font-family:var(--serif); font-size:1.1rem; line-height:1.1; }
.library { padding-top:76px; }.library-head { display:flex; justify-content:space-between; align-items:end; gap:20px; }.result-count { margin:0; color:var(--muted); font:500 .71rem "DM Mono",monospace; }.controls { display:flex; gap:10px; margin:28px 0 5px; }.search-box { height:49px; display:flex; align-items:center; gap:11px; flex:1; border:1px solid var(--line); padding:0 15px; background:#fbf8f1; }.search-box:focus-within { border-color:var(--ink); }.search-box svg { width:18px; fill:none; stroke:var(--red); stroke-width:2; }.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); }.controls select { border:1px solid var(--line); background:#fbf8f1; padding:0 13px; color:var(--ink); }.status { min-height:23px; margin:0; color:var(--muted); font-size:.78rem; }.status.error { color:var(--red); }.movie-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:28px 16px; }.movie-card { min-width:0; }.poster-link { position:relative; display:block; aspect-ratio:2/3; overflow:hidden; background:var(--ink); }.poster-link img { width:100%; height:100%; object-fit:cover; position:relative; z-index:1; transition:transform .3s ease; }.movie-card:hover img { transform:scale(1.035); }.poster-fallback { position:absolute; inset:0; display:grid; place-items:center; color:#d7c9af; font:600 1.15rem/1.15 var(--serif); letter-spacing:.1em; text-align:center; }.card-copy { padding-top:11px; }.card-meta { min-height:16px; margin:0 0 5px; color:var(--red); font:500 .64rem "DM Mono",monospace; letter-spacing:.05em; }.card-copy h3 { margin:0; font:600 .91rem/1.3 var(--sans); }.watch-link { display:inline-flex; gap:6px; margin-top:9px; color:var(--muted); border-bottom:1px solid transparent; font-size:.73rem; }.watch-link:hover { color:var(--red); border-color:var(--red); }.more-wrap { text-align:center; padding:44px 0 10px; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:900px) { .movie-grid { grid-template-columns:repeat(4,1fr); }.spotlight { grid-template-columns:1fr; }.spotlight-copy > p:last-child { max-width:500px; } } @media (max-width:640px) { .page-shell { padding:0 17px 50px; }.masthead { padding:62px 0; }.featured-grid { gap:8px; }.feature span { left:9px; bottom:9px; font-size:.85rem; }.controls { flex-direction:column; }.controls select { height:44px; }.movie-grid { grid-template-columns:repeat(2,1fr); gap:25px 12px; }.library { padding-top:50px; }.navbar { min-height:56px; padding:0 14px; gap:12px; }.navbar-logo { font-size:.96rem; }.navbar-logo svg { width:19px; }.navbar-links { overflow-x:auto; }.nav-link { padding:7px 9px; } }