.retro123 {
  --mf-accent:#78bd43;
  --mf-accent-dark:#365d1f;
  --mf-text:#272927;
  --mf-muted:#565c56;
  --mf-border:#d8dcd5;
  margin:0;
  background:#e4e4e4;
  color:var(--mf-text);
  font:16px/1.5 system-ui, sans-serif;
}
.retro123 *, .retro123 *::before, .retro123 *::after { box-sizing:border-box; }
.retro123 [hidden] { display:none !important; }
.retro123 a { color:inherit; }
.retro123 a:focus-visible, .retro123 button:focus-visible, .retro123 summary:focus-visible {
  outline:3px solid #427c24;
  outline-offset:3px;
}
.mf-wide { width:min(100% - 24px, 1500px); margin-inline:auto; }
.mf-skip { position:absolute; z-index:20; top:0; left:12px; padding:8px; background:white; transform:translateY(-120%); }
.mf-skip:focus { transform:none; }
.mf-header { background:#fff; box-shadow:0 1px 4px #0002; position:relative; z-index:4; }
.mf-header-row { display:flex; align-items:center; gap:24px; min-height:62px; }
.mf-logo { display:inline-grid; flex:none; text-decoration:none; color:#353835; line-height:1; }
.mf-logo > span { font-weight:850; font-size:clamp(24px, 2.65vw, 35px); letter-spacing:-.06em; white-space:nowrap; }
.mf-logo-play { display:inline-grid; place-items:center; width:.91em; aspect-ratio:1; border-radius:50%; background:var(--mf-accent); color:#17320d; font-size:.84em; padding-left:.05em; vertical-align:.04em; }
.mf-logo small { color:#525652; font-size:11px; line-height:1.35; }
.mf-nav { display:flex; flex-wrap:wrap; align-items:center; gap:3px 12px; }
.mf-nav > a, .mf-nav summary { display:block; padding:8px 3px; font-size:14px; font-weight:750; text-decoration:none; text-transform:uppercase; cursor:pointer; }
.mf-nav a:hover, .mf-nav summary:hover, .mf-nav [aria-current="page"] { color:var(--mf-accent-dark); }
.mf-nav > [aria-current="page"] { box-shadow:inset 0 -3px var(--mf-accent); }
.mf-dropdown { position:relative; }
.mf-dropdown summary::-webkit-details-marker { display:none; }
.mf-dropdown summary::after { content:" ▾"; }
.mf-menu { position:absolute; top:100%; left:0; width:min(340px, calc(100vw - 24px)); max-height:min(65vh, 460px); overflow:auto; background:#fff; box-shadow:0 6px 24px #0003; padding:12px; border-top:3px solid var(--mf-accent); }
.mf-menu ul { list-style:none; margin:0; padding:0; }
.mf-menu ul ul { padding-left:12px; }
.mf-menu a { display:block; text-decoration:none; padding:4px 6px; }
.mf-menu a:hover { background:#eff5eb; }
.mf-search { display:flex; margin-left:auto; align-items:stretch; min-width:170px; max-width:270px; width:25%; border:1px solid var(--mf-border); border-radius:4px; }
.mf-search input[type="search"] { min-width:0; width:100%; height:auto; border:0; background:#fff; color:#292929; padding:9px 10px; font:inherit; font-size:14px; }
.mf-search button { border:0; padding:7px 10px; color:#505650; background:#fff; display:grid; place-items:center; cursor:pointer; }
.mf-account { flex:none; }
.mf-main { min-height:55vh; padding-bottom:28px; }
.mf-hero { position:relative; background:#182219; color:#fff; min-height:0; }
.mf-slide { position:relative; min-height:350px; display:flex; align-items:end; isolation:isolate; overflow:hidden; }
.mf-slide::after, .mf-film-cover::after { position:absolute; content:""; inset:0; z-index:-1; background:linear-gradient(90deg,#121914ed,#151c1570 60%,#12191420),linear-gradient(0deg,#0b100c90,transparent 62%); }
.mf-slide > img, .mf-film-cover > img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; z-index:-2; }
.mf-slide-copy { padding:32px 30px 58px; width:min(100%, 680px); }
.mf-slide-copy h2 { color:#fff; font-size:clamp(24px, 4vw, 46px); line-height:1.1; margin:6px 0 12px; overflow-wrap:anywhere; }
.mf-slide-copy p { margin:0 0 14px; color:#fff; }
.mf-eyebrow { font-size:12px; text-transform:uppercase; font-weight:800; letter-spacing:.08em; color:#bcf39b; }
.mf-button { display:inline-flex; min-height:42px; justify-content:center; align-items:center; gap:7px; padding:8px 16px; background:var(--mf-accent); color:#17280f !important; border:0; border-radius:4px; text-decoration:none; font:inherit; font-weight:750; cursor:pointer; }
.mf-button:hover { background:#98d36c; }
.mf-hero-controls { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; color:#fff; }
.mf-hero-controls button { background:#152015; color:#fff; border:1px solid #ffffff80; border-radius:4px; min-width:36px; height:36px; font:inherit; font-size:21px; cursor:pointer; }
.mf-home-section, .mf-film-extra { margin-top:18px; min-width:0; }
.mf-section-label { display:table; margin:0 0 12px; padding:7px 14px; background:var(--mf-accent); color:#17280f; border-radius:3px; font-size:16px; font-weight:800; }
.mf-grid, .mf-content:has(> .mf-card) { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:14px; align-items:start; }
.mf-grid > :not(.mf-card), .mf-content:has(> .mf-card) > :not(.mf-card) { grid-column:1/-1; }
.mf-fallback-list { margin-top:18px; }
.mf-card { margin:0; min-width:0; position:relative; color:#282c28; }
.mf-card-link { display:block; text-decoration:none; }
.mf-poster { aspect-ratio:2/3; border-radius:4px; overflow:hidden; position:relative; background:#29332a; box-shadow:0 2px 6px #0003; }
.mf-poster img, .mf-film-poster img { width:100%; height:100%; object-fit:cover; display:block; }
.mf-poster .mf-placeholder, .mf-film-poster .mf-placeholder { object-fit:contain; padding:22%; }
.mf-card-title { font-size:14px; font-weight:700; color:inherit; line-height:1.3; margin:7px 0 2px; overflow-wrap:anywhere; }
.mf-card-year { font-size:12px; color:var(--mf-muted); }
.mf-badge { position:absolute; z-index:1; top:7px; border-radius:3px; padding:2px 5px; font-size:11px; font-weight:800; }
.mf-badge-type { right:7px; background:#ffcd2b; color:#2b2207; }
.mf-badge-rating { left:7px; background:#1f291eee; color:#fff; }
.mf-card-play { opacity:0; position:absolute; inset:0; display:grid; place-items:center; background:#10181080; color:#fff; font-size:clamp(24px, 4vw, 46px); transition:opacity .15s; }
.mf-card-link:hover .mf-card-play, .mf-card-link:focus-visible .mf-card-play { opacity:1; }
.mf-category-title { margin:0 0 16px; padding:18px 0 0; }
.mf-category-title h1 { margin:0 0 6px; color:#262926; font-size:clamp(24px, 4vw, 34px); }
.mf-category-description { color:var(--mf-muted); }
.mf-detail-content { max-width:1120px; margin:auto; }
.mf-breadcrumbs { margin:14px 0; color:var(--mf-accent-dark); }
.mf-breadcrumbs:empty { display:none; }
.mf-film { margin-top:12px; }
.mf-film-cover { isolation:isolate; position:relative; display:grid; place-items:center; aspect-ratio:2.4; overflow:hidden; background:#202a22; border-radius:4px 4px 0 0; }
.mf-cover-play { width:clamp(55px, 9vw, 92px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:var(--mf-accent); color:#17280f !important; text-decoration:none; font-size:clamp(24px, 4vw, 44px); }
.mf-film-info { display:grid; grid-template-columns:minmax(110px, 160px) minmax(0,1fr) minmax(110px,150px); gap:18px; padding:16px; background:#f5f5f5; border:1px solid #dedede; }
.mf-film-poster { align-self:start; aspect-ratio:2/3; overflow:hidden; background:#29332a; }
.mf-film-copy h1 { font-size:clamp(23px, 4vw, 34px); line-height:1.15; margin:0 0 8px; overflow-wrap:anywhere; color:#252a25; }
.mf-tagline { margin:0 0 10px; font-style:italic; color:var(--mf-muted); }
.mf-story { overflow-wrap:anywhere; }
.mf-story iframe, .mf-story video { max-width:100%; }
.mf-player-frame { width:100%; height:100%; min-height:0; border:0; display:block; }
.mf-film-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 14px; margin:14px 0 0; overflow-wrap:anywhere; }
.mf-film-meta div { min-width:0; }
.mf-film-meta dt, .mf-film-meta dd { display:inline; margin:0; }
.mf-film-meta dt { font-weight:750; }
.mf-film-meta dt::after { content:": "; }
.mf-film-actions { display:grid; gap:8px; align-content:start; }
.mf-film-actions .mf-button, .mf-favorite { text-align:center; }
.mf-favorite { display:block; padding:6px; border:1px solid var(--mf-border); border-radius:4px; }
.mf-gallery img { max-width:100%; height:auto; }
.mf-gallery ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.mf-gallery li { flex:0 1 230px; }
.mf-footer { background:#262b27; color:#f0f2ef; margin-top:10px; }
.mf-footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:24px; padding:25px 0; }
.mf-footer h2 { color:#a7d688; font-size:16px; margin:0 0 8px; }
.mf-footer a { display:block; text-decoration:none; margin-bottom:4px; overflow-wrap:anywhere; }
.mf-footer a:hover { text-decoration:underline; }
.mf-footer p { margin:0 0 8px; }
.mf-footer-bottom { border-top:1px solid #515a52; padding:12px 0; color:#d2d8d0; font-size:13px; }
.mf-trailer { width:min(900px, calc(100% - 24px)); max-height:95vh; border:0; padding:12px; background:#182019; color:white; }
.mf-trailer::backdrop { background:#111c; }
.mf-trailer button { display:block; margin:0 0 8px auto; border:1px solid #859583; background:#253627; color:#fff; padding:5px 12px; cursor:pointer; }
.mf-trailer iframe { width:100%; aspect-ratio:16/9; border:0; display:block; }
@media (max-width:1200px) {
  .mf-grid, .mf-content:has(> .mf-card) { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .mf-header-row { flex-wrap:wrap; padding-block:8px; gap:6px 12px; }
  .mf-nav { order:3; width:100%; position:relative; }
  .mf-dropdown { position:static; }
  .mf-search { width:min(56%, 245px); min-width:0; }
  .mf-search input[type="search"] { font-size:16px; }
  .mf-menu { left:0; }
  .mf-grid, .mf-content:has(> .mf-card) { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .mf-slide { min-height:290px; }
  .mf-slide-copy { padding:18px 16px 58px; }
  .mf-slide-copy p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
  .mf-film-info { grid-template-columns:minmax(75px,110px) minmax(0,1fr); gap:12px; }
  .mf-film-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; }
  .mf-footer-grid { grid-template-columns:1fr 1fr; gap:14px; }
}
@media (max-width:480px) {
  .mf-grid, .mf-content:has(> .mf-card) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mf-badge { top:4px; font-size:10px; padding:1px 3px; }
  .mf-badge-type { right:4px; }
  .mf-badge-rating { left:4px; }
  .mf-card-title { font-size:13px; }
  .mf-film-meta { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .mf-card-play { transition:none; }
}
