*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0e0e10;--bg2:#16161a;--bg3:#1e1e24;--bg4:#26262e;
  --surface:#1a1a20;--surface2:#1c1c24;
  --text:#e8e4dc;--text2:#a8a49c;--text3:#6a6660;
  --gold:#c8922a;--gold-bg:rgba(200,146,42,.12);--gold-border:rgba(200,146,42,.32);
  --teal:#4ac8b4;--teal-bg:rgba(74,200,180,.12);--teal-border:rgba(74,200,180,.3);
  --blue:#5a9ed4;--blue-bg:rgba(90,158,212,.12);--blue-border:rgba(90,158,212,.3);
  --purple:#a07ad4;--purple-bg:rgba(160,122,212,.12);--purple-border:rgba(160,122,212,.3);
  --rule:rgba(255,255,255,.06);--rule-med:rgba(255,255,255,.1);--rule-heavy:rgba(255,255,255,.18);
  --mast-h:57px;--card-w:260px;--poster-h:390px;--content-h:164px;
  --card-h:calc(var(--poster-h) + var(--content-h));
}
html{font-size:16px;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:300;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;}

/* ── MASTHEAD ─────────────────── */
.masthead{display:flex;align-items:baseline;justify-content:space-between;padding:18px 48px 15px;border-bottom:1px solid var(--rule-med);background:var(--bg);position:sticky;top:0;z-index:100;gap:24px;}
.logo{text-decoration:none;display:flex;align-items:center;}
.logo-img{height:88px;width:auto;display:block;}
.tagline{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text3);}

/* ── DATE HERO ────────────────── */
.date-hero{padding:24px 48px 20px;border-bottom:1px solid var(--rule);background:var(--bg);}
.date-value{font-family:'Fraunces',serif;font-size:clamp(28px,4vw,48px);font-weight:700;line-height:1;letter-spacing:-.5px;color:var(--text);margin-bottom:6px;}
.date-sub{font-size:14px;color:var(--text3);font-weight:300;}

/* ── YEAR TABS ────────────────── */
.tabs-wrap{position:sticky;top:var(--mast-h);z-index:90;background:var(--bg2);border-bottom:1px solid var(--rule-med);}
.year-tabs{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.year-tabs::-webkit-scrollbar{display:none;}
.year-tab{flex-shrink:0;padding:11px 26px;border-right:1px solid var(--rule);font-family:'DM Mono',monospace;font-size:13px;font-weight:500;color:var(--text3);cursor:pointer;background:none;border-top:none;border-left:none;border-bottom:3px solid transparent;transition:all .15s;letter-spacing:.04em;}
.year-tab:hover{color:var(--text2);background:var(--bg3);}
.year-tab.active{color:var(--text);background:var(--bg);border-bottom-color:var(--gold);}

/* ── PAGE BODY ────────────────── */
.page-body{flex:1;}

/* ── YEAR SECTION ─────────────── */
.year-section{padding-top:32px;border-top:1px solid var(--rule);}
.year-section:first-child{border-top:none;padding-top:28px;}
.year-anchor{display:block;height:112px;margin-top:-112px;pointer-events:none;}

/* ── YEAR HEADER ──────────────── */
.year-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;padding:0 48px;flex-wrap:wrap;}
.year-header-left{display:flex;flex-direction:column;gap:2px;}
.year-heading{font-family:'Fraunces',serif;font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.2;color:var(--text);}
.year-heading em{font-style:normal;color:var(--gold);}
.year-dates{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);letter-spacing:.05em;}
.year-picker-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-top:4px;}
.year-picker-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;}
.year-picker{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;color:var(--text);background:var(--bg3);border:1px solid var(--rule-heavy);border-radius:2px;padding:4px 28px 4px 10px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236a6660'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:8px;}
.year-picker:hover{border-color:var(--gold);}
.year-picker option{background:var(--bg3);color:var(--text);}

/* ── EVENT STRIP ──────────────── */
.event-strip{background:var(--bg3);border:1px solid var(--rule-med);border-left:2px solid var(--gold);border-radius:2px;padding:9px 14px;margin:0 48px 14px;display:flex;align-items:flex-start;gap:10px;}
.event-date-tag{font-family:'DM Mono',monospace;font-size:10px;font-weight:500;color:var(--gold);letter-spacing:.06em;white-space:nowrap;margin-top:1px;flex-shrink:0;}
.event-text{font-size:12px;color:var(--text2);line-height:1.55;font-weight:300;}
.event-text em{font-style:italic;color:var(--text);}

/* ── SCROLL ROW ───────────────── */
.card-scroll-wrap{position:relative;}
.card-row{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 48px 20px;overflow-y:visible;}
.card-row::-webkit-scrollbar{display:none;}
.card-scroll-wrap::before,.card-scroll-wrap::after{content:'';position:absolute;top:0;bottom:20px;width:48px;z-index:2;pointer-events:none;}
.card-scroll-wrap::before{left:0;background:linear-gradient(to right,var(--bg),transparent);}
.card-scroll-wrap::after{right:0;background:linear-gradient(to left,var(--bg),transparent);}

/* ── FLIP CARD ────────────────── */
.flip-card{flex-shrink:0;width:var(--card-w);height:var(--card-h);perspective:1200px;cursor:pointer;animation:fadeUp .25s ease both;}
.flip-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1);}
.flip-card.flipped .flip-inner{transform:rotateY(180deg);}
.card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule-med);transition:border-color .15s;}
.flip-card:hover .card-face{border-color:var(--rule-heavy);}

/* ── FRONT ────────────────────── */
.card-front{z-index:2;}
.no1-strip{position:absolute;top:0;left:0;right:0;z-index:3;background:var(--gold-bg);border-bottom:1px solid var(--gold-border);padding:4px 10px;font-family:'DM Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);backdrop-filter:blur(4px);}
.card-poster{width:100%;height:var(--poster-h);flex-shrink:0;background:var(--bg4);position:relative;overflow:hidden;}
.card-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.poster-fallback{width:100%;height:100%;background:linear-gradient(160deg,var(--bg3) 0%,var(--bg4) 100%);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);text-align:center;padding:12px;}
.award-ribbon{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(160,122,212,.9) 60%);padding:20px 8px 6px;font-family:'DM Mono',monospace;font-size:8px;color:#e8e0ff;letter-spacing:.05em;line-height:1.4;text-align:center;}
.card-content{flex:1;padding:10px 12px 0;display:flex;flex-direction:column;gap:3px;min-height:0;overflow:hidden;border-top:1px solid var(--rule);}
.card-release-date{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);}
.card-title{font-family:'Fraunces',serif;font-size:14px;font-weight:700;line-height:1.25;color:var(--text);letter-spacing:-.1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-director{font-size:11px;font-weight:400;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px;}
.tag{font-size:8.5px;padding:1px 5px;border-radius:2px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;border:1px solid;line-height:1.6;white-space:nowrap;}
.tag-genre{color:var(--gold);background:var(--gold-bg);border-color:var(--gold-border);}
.tag-debut{color:var(--teal);background:var(--teal-bg);border-color:var(--teal-border);}
.tag-award{color:var(--purple);background:var(--purple-bg);border-color:var(--purple-border);}
.tag-intl{color:var(--blue);background:var(--blue-bg);border-color:var(--blue-border);}
.see-more-bar{margin-top:auto;padding:7px 12px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:center;gap:5px;font-family:'DM Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);transition:color .12s;flex-shrink:0;}
.flip-card:hover .see-more-bar{color:var(--text);}
.see-more-bar svg{width:10px;height:10px;}

/* ── BACK ─────────────────────── */
.card-back{transform:rotateY(180deg);background:var(--surface2);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bg4) transparent;}
.card-back::-webkit-scrollbar{width:3px;}
.card-back::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px;}
.back-header{padding:11px 14px 9px;border-bottom:1px solid var(--rule);display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-shrink:0;position:sticky;top:0;background:var(--surface2);z-index:1;}
.back-title{font-family:'Fraunces',serif;font-size:14px;font-weight:700;color:var(--text);line-height:1.25;}
.back-close{background:none;border:1px solid var(--rule-med);border-radius:50%;width:22px;height:22px;min-width:22px;color:var(--text3);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.back-close:hover{background:var(--bg4);color:var(--text);}
.back-stats{display:flex;border-bottom:1px solid var(--rule);flex-shrink:0;}
.back-stat{flex:1;padding:6px 10px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:1px;}
.back-stat:last-child{border-right:none;}
.stat-label{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);}
.stat-value{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;}
.stat-value.rating{color:var(--gold);}

/* Trailer */
.trailer-thumb-wrap{position:relative;width:100%;aspect-ratio:16/9;background:var(--bg4);flex-shrink:0;cursor:pointer;overflow:hidden;}
.trailer-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .15s;}
.trailer-thumb-wrap:hover img{opacity:.8;}
.trailer-play-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.play-btn{width:44px;height:44px;border-radius:50%;background:rgba(200,146,42,.9);display:flex;align-items:center;justify-content:center;transition:transform .15s;}
.trailer-thumb-wrap:hover .play-btn{transform:scale(1.08);}
.play-btn svg{width:16px;height:16px;fill:#fff;margin-left:3px;}
.trailer-label{position:absolute;bottom:6px;left:8px;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);}
.no-trailer-wrap{width:100%;aspect-ratio:16/9;background:var(--bg3);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;flex-shrink:0;}
.no-trailer-label{font-family:'DM Mono',monospace;font-size:9px;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;}

.back-body{padding:10px 14px;display:flex;flex-direction:column;gap:9px;flex:1;}
.back-row{display:flex;flex-direction:column;gap:2px;}
.back-row-label{font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);}
.back-row-val{font-size:11.5px;color:var(--text2);font-weight:300;line-height:1.5;}
.back-detail-tag{font-size:10.5px;padding:2px 7px;border-radius:2px;border:1px solid;display:inline;font-weight:300;line-height:1.6;}
.back-detail-tag.award{color:var(--purple);background:var(--purple-bg);border-color:var(--purple-border);}
.back-detail-tag.debut{color:var(--teal);background:var(--teal-bg);border-color:var(--teal-border);}
.back-links{padding:10px 14px;border-top:1px solid var(--rule);display:flex;gap:7px;flex-shrink:0;position:sticky;bottom:0;background:var(--surface2);}
.link-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 8px;border-radius:3px;font-family:'DM Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid var(--rule-heavy);color:var(--text2);background:var(--bg3);transition:all .12s;}
.link-btn:hover{background:var(--bg4);color:var(--text);}
.link-btn svg{width:11px;height:11px;flex-shrink:0;}

/* ── VIDEO MODAL ──────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:999;display:none;align-items:center;justify-content:center;padding:24px;}
.modal-overlay.active{display:flex;}
.modal-inner{width:100%;max-width:900px;position:relative;}
.modal-close-btn{position:absolute;top:-40px;right:0;background:none;border:none;color:rgba(255,255,255,.7);font-size:26px;cursor:pointer;line-height:1;padding:4px;transition:color .12s;}
.modal-close-btn:hover{color:#fff;}
.modal-iframe-wrap{width:100%;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden;}
.modal-iframe-wrap iframe{width:100%;height:100%;border:none;}

/* ── SITE FOOTER ──────────────── */
.site-footer{border-top:1px solid var(--rule-med);padding:28px 48px;display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap;background:var(--bg2);}
.footer-credits{display:flex;flex-direction:column;gap:8px;}
.footer-credit-line{font-size:11.5px;color:var(--text3);line-height:1.6;}
.footer-credit-line strong{color:var(--text2);font-weight:500;}
.footer-credit-line a{color:var(--text2);text-decoration:none;}
.footer-credit-line a:hover{color:var(--text);}
.tmdb-badge img{height:36px;opacity:.75;}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

@media(max-width:900px){
  .logo-img{height:72px;}
}

@media(max-width:680px){
  .logo-img{height:56px;}
  .masthead{padding:13px 18px 11px;flex-direction:column;gap:3px;}
  .date-hero{padding:18px 18px 14px;}
  .year-header{padding:0 18px;}
  .event-strip{margin:0 18px 14px;}
  .card-row{padding:4px 18px 16px;}
  .site-footer{padding:20px 18px;}
  .year-tab{padding:10px 14px;font-size:12px;}
  .tagline{display:none;}
  :root{--card-w:220px;--poster-h:330px;--content-h:156px;}
}