:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --background: #10141c;
  --panel: #171d28;
  --panel-raised: #1d2532;
  --line: rgb(255 255 255 / 10%);
  --text: #f5f2eb;
  --muted: #a4a8ae;
  --quiet: #737b86;
  --accent: #c9f16a;
  --orange: #e7a36f;
}

* { box-sizing: border-box; }

html { min-width: 0; scroll-behavior: smooth; }

body {
  min-width: 0;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 68% 7%, rgb(112 139 93 / 13%), transparent 34rem),
    var(--background);
}

a { color: inherit; }
button, input { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.site-header {
  display: flex;
  height: 76px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line);
}

.wordmark { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 0.88rem; font-weight: 850; letter-spacing: 0.11em; text-decoration: none; }
.brand-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: var(--accent); color: #141a12; font-family: Georgia, serif; font-size: 1.15rem; font-weight: 700; }
.wordmark-light { color: var(--accent); }
.main-nav { display: flex; height: 100%; align-items: center; gap: 2rem; }
.main-nav a { display: flex; height: 100%; align-items: center; border-bottom: 2px solid transparent; color: var(--muted); font-size: 0.82rem; text-decoration: none; }
.main-nav a:hover, .main-nav a.active { border-color: var(--accent); color: var(--text); }
.preview-label, .eyebrow { color: var(--accent); font-size: 0.63rem; font-weight: 750; letter-spacing: 0.15em; }
.preview-label { padding: 0.48rem 0.65rem; border: 1px solid rgb(201 241 106 / 26%); border-radius: 999px; }

.hero { position: relative; display: grid; min-height: 490px; grid-template-columns: 1fr 0.85fr; align-items: center; overflow: hidden; padding: 3.8rem clamp(1.25rem, 9vw, 9rem) 4.7rem; border-bottom: 1px solid var(--line); }
.hero-copy { position: relative; z-index: 1; max-width: 590px; }
.eyebrow { margin-bottom: 1.15rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 1.1rem; font-size: clamp(2.7rem, 5vw, 4.6rem); font-weight: 570; letter-spacing: -0.07em; line-height: 1.02; }
h1 span, .plans-intro h2 span { color: var(--accent); }
.hero-description { max-width: 440px; margin-bottom: 1.65rem; color: var(--muted); font-size: 0.98rem; line-height: 1.7; }
.primary-button { display: inline-flex; min-height: 45px; align-items: center; gap: 1rem; padding: 0 1rem; border-radius: 6px; background: var(--accent); color: #151a11; font-size: 0.8rem; font-weight: 750; text-decoration: none; }
.primary-button:hover { background: #d8f78e; }
.primary-button span { font-size: 1rem; }
.hero-art { position: relative; display: grid; min-height: 330px; place-items: center; }
.art-glow { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: rgb(144 174 103 / 18%); filter: blur(80px); }
.art-frame { position: relative; display: flex; width: min(280px, 72vw); height: 345px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 1.3rem; border: 1px solid rgb(255 255 255 / 19%); background: linear-gradient(155deg, #5a725a 0%, #c38d63 46%, #28283b 100%); box-shadow: 0 25px 80px rgb(0 0 0 / 42%); transform: rotate(4deg); }
.art-frame::before { position: absolute; inset: 20% 5% 7%; border: 1px solid rgb(255 255 255 / 28%); border-radius: 50% 50% 2px 2px; content: ""; opacity: 0.55; }
.art-kicker, .art-footer { position: relative; font-size: 0.53rem; font-weight: 700; letter-spacing: 0.13em; }
.art-title { position: relative; margin: auto 0; font-family: Georgia, serif; font-size: 2.8rem; letter-spacing: -0.06em; line-height: 0.92; }
.art-footer { color: rgb(255 255 255 / 75%); }
.floating-note { position: absolute; right: 0; bottom: 1.5rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 7px; background: rgb(24 29 38 / 88%); color: var(--muted); font-size: 0.7rem; line-height: 1.45; transform: rotate(-4deg); }
.hero-bottom { position: absolute; right: clamp(1.25rem, 9vw, 9rem); bottom: 1.25rem; left: clamp(1.25rem, 9vw, 9rem); display: flex; justify-content: space-between; color: var(--quiet); font-size: 0.58rem; font-weight: 750; letter-spacing: 0.13em; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 0.45rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px rgb(231 163 111 / 50%); }

.catalog-section { padding: 4.8rem clamp(1.25rem, 7vw, 7rem) 5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
.section-heading .eyebrow, .plans-intro .eyebrow { margin-bottom: 0.65rem; }
h2 { margin-bottom: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 570; letter-spacing: -0.05em; }
.section-note { max-width: 330px; margin-bottom: 0.15rem; color: var(--muted); font-size: 0.75rem; line-height: 1.55; text-align: right; }
.catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.filter-group { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.filter-button { min-height: 35px; padding: 0 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.7rem; }
.filter-button:hover, .filter-button.selected { border-color: var(--accent); background: rgb(201 241 106 / 10%); color: var(--text); }
.search-box { display: flex; width: min(280px, 100%); height: 38px; align-items: center; gap: 0.5rem; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.search-icon { color: var(--muted); font-size: 1.25rem; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 0.72rem; }
.search-box input::placeholder { color: var(--quiet); }
.search-box:focus-within { border-color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.catalog-notice { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.3rem; padding: 0.7rem 0.85rem; border: 1px solid rgb(231 163 111 / 22%); border-radius: 6px; background: rgb(231 163 111 / 5%); }
.notice-mark { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); font-family: Georgia, serif; font-size: 0.72rem; }
.catalog-notice p { margin: 0; color: var(--muted); font-size: 0.68rem; }
.catalog-notice strong { color: var(--text); }
.film-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.film-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); transition: transform 160ms ease, border-color 160ms ease; }
.film-card:hover { border-color: rgb(201 241 106 / 35%); transform: translateY(-3px); }
.poster { position: relative; display: flex; min-height: 235px; flex-direction: column; justify-content: end; overflow: hidden; padding: 1rem; isolation: isolate; }
.poster::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 10%, rgb(0 0 0 / 63%) 100%); content: ""; }
.poster::after { position: absolute; z-index: -2; inset: 0; content: ""; opacity: 0.85; }
.poster-harbor::after { background: radial-gradient(ellipse at 40% 40%, #d7a876, transparent 25%), linear-gradient(150deg, #27343d, #72806b 49%, #293449); }
.poster-orchard::after { background: radial-gradient(ellipse at 64% 30%, #d6ba88, transparent 30%), linear-gradient(145deg, #4b3b37, #8b6857 54%, #242b2a); }
.poster-blue::after { background: radial-gradient(ellipse at 40% 36%, #76a3b2, transparent 25%), linear-gradient(155deg, #1d3448, #42667b 50%, #272839); }
.poster-wonder::after { background: radial-gradient(ellipse at 52% 35%, #e6bb76, transparent 22%), linear-gradient(150deg, #586441, #d19b54 50%, #514059); }
.poster-crimson::after { background: radial-gradient(ellipse at 50% 32%, #b3473f, transparent 26%), linear-gradient(155deg, #1b1114, #4d1f25 52%, #15121a); }
.poster-noir::after { background: radial-gradient(ellipse at 62% 30%, #aeb4bd, transparent 22%), linear-gradient(150deg, #14171c, #3b4350 52%, #0e1015); }
.poster-sunny::after { background: radial-gradient(ellipse at 45% 34%, #f2cf70, transparent 26%), linear-gradient(150deg, #6a4c2a, #c58b3c 52%, #5a3d35); }
.poster-silver::after { background: radial-gradient(ellipse at 55% 36%, #cfd6df, transparent 24%), linear-gradient(155deg, #20262e, #66727f 50%, #2b2f3b); }
.poster-sepia::after { background: radial-gradient(ellipse at 40% 34%, #d9bf94, transparent 26%), linear-gradient(150deg, #3d3226, #8a7457 52%, #2a2420); }
.film-ribbon { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.32rem 0.45rem; border-radius: 3px; background: rgb(16 20 28 / 72%); color: #f3d9bd; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.11em; }
.poster-year { margin-bottom: 0.45rem; color: rgb(255 255 255 / 75%); font-size: 0.59rem; letter-spacing: 0.1em; }
.poster-title { max-width: 12rem; font-family: Georgia, serif; font-size: 1.45rem; line-height: 1.05; }
.poster-genre { margin-top: 0.4rem; color: rgb(255 255 255 / 69%); font-size: 0.59rem; }
.film-info { padding: 0.85rem; }
.film-heading { display: flex; align-items: start; justify-content: space-between; gap: 0.4rem; }
.film-heading h3 { margin: 0; font-size: 0.78rem; font-weight: 650; line-height: 1.3; }
.tier-tag { flex: 0 0 auto; padding: 0.26rem 0.35rem; border-radius: 3px; font-size: 0.48rem; font-weight: 800; letter-spacing: 0.08em; }
.tier-free { background: rgb(201 241 106 / 12%); color: var(--accent); }
.tier-premium { background: rgb(183 165 255 / 13%); color: #c8b9ff; }
.film-info > p { margin: 0.5rem 0 0.7rem; color: var(--muted); font-size: 0.66rem; line-height: 1.5; }
.film-info > .film-description { min-height: 3.8rem; }
.film-credit, .license-note { font-size: 0.6rem !important; }
.license-note a, .creator-credits a { text-decoration: underline; text-underline-offset: 2px; }
.creator-credits { margin-top: 0.7rem; color: var(--muted); font-size: 0.62rem; }
.creator-credits summary { color: var(--text); cursor: pointer; font-weight: 650; }
.creator-credits ul { display: grid; gap: 0.4rem; margin: 0.6rem 0; padding-left: 1rem; line-height: 1.45; }
.creator-credits li { padding-left: 0.1rem; }
.creator-credits a, .watch-link { color: var(--accent); }
.watch-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.75rem; font-size: 0.63rem; font-weight: 700; }
.play-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.play-button:disabled { color: var(--quiet); cursor: not-allowed; }
.media-status { margin-top: 0.35rem !important; color: var(--quiet) !important; font-size: 0.56rem !important; overflow-wrap: anywhere; }
.player-dialog { width: min(900px, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); }
.player-dialog::backdrop { background: rgb(0 0 0 / 78%); }
.player-shell { padding: 1.2rem; }
.player-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.player-heading h2 { font-size: 1.25rem; }
.player-close { min-height: 36px; padding: 0 0.8rem; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-raised); color: var(--text); cursor: pointer; }
.player-dialog video { display: block; width: 100%; max-height: 65vh; background: #000; }
.player-attribution { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.72rem; }
.player-shell > .license-note { margin: 0.45rem 0; }
.player-shell .creator-credits { margin-top: 0.6rem; }
body:has(.player-dialog[open]) { overflow: hidden; }
.empty-state { margin: 2rem 0 0; color: var(--muted); font-size: 0.85rem; text-align: center; }

.plans-section { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0.9rem; padding: 3.5rem clamp(1.25rem, 7vw, 7rem) 4.2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 2%); }
.plans-intro { padding: 0.6rem 1.2rem 0 0; }
.plans-intro h2 { margin-bottom: 0.8rem; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.plans-intro > p:last-child { max-width: 360px; color: var(--muted); font-size: 0.76rem; line-height: 1.65; }
.plan-card { padding: 1.15rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.premium-plan { border-color: rgb(201 241 106 / 25%); background: linear-gradient(145deg, rgb(201 241 106 / 6%), var(--panel) 45%); }
.plan-topline { display: flex; justify-content: space-between; color: var(--quiet); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.1em; }
.plan-status { color: var(--orange); }
.plan-card h3 { margin: 1.15rem 0 0.2rem; font-size: 1.25rem; }
.plan-subtitle { min-height: 2.5rem; margin-bottom: 0.8rem; color: var(--muted); font-size: 0.69rem; line-height: 1.5; }
.plan-card ul { display: grid; gap: 0.55rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.plan-card li { color: #d3d4d5; font-size: 0.65rem; }
.plan-card li::before { margin-right: 0.5rem; color: var(--accent); content: "✓"; }
.plan-footnote { color: var(--quiet); font-size: 0.56rem; }

.site-footer { display: flex; min-height: 90px; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem clamp(1.25rem, 5vw, 5rem); }
.footer-brand { font-size: 0.7rem; }
.footer-brand .brand-icon { width: 25px; height: 25px; border-radius: 7px; font-size: 0.9rem; }
.site-footer p, .site-footer > span { margin: 0; color: var(--quiet); font-size: 0.58rem; }
.site-footer > span { letter-spacing: 0.1em; }

@media (max-width: 1000px) {
  .film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-intro { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  .site-header { height: 65px; padding: 0 1rem; }
  .wordmark { gap: 0.45rem; font-size: 0.68rem; }
  .brand-icon { width: 27px; height: 27px; }
  .main-nav { gap: 0.8rem; }
  .main-nav a { font-size: 0.68rem; }
  .preview-label { padding: 0.4rem 0.45rem; font-size: 0.47rem; }
  .hero { min-height: 550px; grid-template-columns: 1fr; padding: 3rem 1.25rem 4rem; }
  .hero-art { position: absolute; right: -2.2rem; bottom: 1.9rem; min-height: 0; opacity: 0.45; transform: scale(0.65); transform-origin: bottom right; }
  .hero-copy { align-self: start; }
  .hero-copy h1 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .hero-description { max-width: 300px; }
  .hero-bottom { right: 1.25rem; bottom: 1rem; left: 1.25rem; font-size: 0.47rem; }
  .catalog-section { padding: 3.2rem 1rem; }
  .section-heading { align-items: start; flex-direction: column; gap: 0.65rem; }
  .section-note { max-width: none; text-align: left; }
  .catalog-controls { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  .film-grid { gap: 0.6rem; }
  .poster { min-height: 190px; padding: 0.7rem; }
  .poster-title { font-size: 1.2rem; }
  .film-info { padding: 0.65rem; }
  .film-heading { flex-direction: column; }
  .film-info > p { font-size: 0.62rem; }
  .film-info > .film-description { min-height: 5rem; }
  .plans-section { grid-template-columns: 1fr; padding: 2.7rem 1rem; }
  .plans-intro { grid-column: auto; }
  .site-footer { align-items: start; flex-direction: column; padding: 1.3rem 1rem; }
}

@media (max-width: 360px) {
  .preview-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* TV mode: 10-foot layout with a clear remote-focus ring. */
.tv-mode { font-size: 22px; }
.tv-mode .film-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.tv-mode .film-card:focus-within { border-color: var(--accent); transform: scale(1.03); }
.tv-mode button:focus-visible, .tv-mode a:focus-visible, .tv-mode input:focus-visible, .tv-mode summary:focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; }
.tv-mode .filter-button { min-height: 52px; padding: 0 1.2rem; font-size: 0.9rem; }
.tv-mode .play-button { min-height: 56px; font-size: 1rem; }
.tv-mode .player-dialog { width: 100vw; height: 100vh; max-height: none; border: 0; border-radius: 0; }
.tv-mode .player-dialog video { max-height: 80vh; }
.tv-mode .player-dialog video:focus-visible { outline-offset: -4px; }