/* Original CSS. No remote imports, fonts, images or third-party assets. */
:root {
  color-scheme:light;
  --paper:#f5f3ea;
  --ink:#173f32;
  --muted:#57685d;
  --line:#c5ccbc;
  --accent:#bd492e;
  --wash:#e6eadb;
  --focus:#8c311e
}
* {
  box-sizing:border-box
}
html {
  font-size:16px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65
}
a {
  color:inherit;
  text-underline-offset:.2em
}
button,input {
  font:inherit
}
button,a {
  touch-action:manipulation
}
a:hover {
  color:var(--accent)
}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:4px
}
input {
  min-width:0;
  width:100%;
  border:1px solid var(--line);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  padding:.6rem .8rem
}
button {
  border:0;
  background:var(--ink);
  color:var(--paper);
  padding:.6rem .9rem;
  cursor:pointer
}
button:hover {
  background:var(--focus)
}
.wrap {
  width:min(1200px,calc(100% - 2rem));
  margin-inline:auto
}
.site-header {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  padding-block:1.25rem;
  border-bottom:1px solid var(--ink)
}
.site-name {
  font-size:1.35rem;
  font-weight:750;
  text-decoration:none;
  overflow-wrap:anywhere
}
.site-header nav {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.94rem
}
.search {
  display:flex;
  gap:.3rem;
  width:100%
}
.search button {
  flex-shrink:0
}
.skip {
  position:absolute;
  top:.5rem;
  left:1rem;
  z-index:5;
  transform:translateY(-200%);
  background:var(--paper);
  padding:.75rem
}
.skip:focus {
  transform:none
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
main {
  padding-bottom:4rem
}
main:focus {
  outline:none
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-size:clamp(2rem,4.5vw,4.2rem);
  line-height:1.16;
  letter-spacing:-.04em;
  overflow-wrap:anywhere
}
h2 {
  font-size:clamp(1.35rem,2vw,1.9rem);
  line-height:1.3
}
h3 {
  font-size:1.05rem;
  line-height:1.4
}
.eyebrow {
  font-size:.78rem;
  letter-spacing:.18em;
  font-weight:700;
  margin-bottom:1rem
}
.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(3rem,7vw,6rem) 0 3rem;
  border-bottom:1px solid var(--line)
}
.hero h1 {
  max-width:13ch
}
.hero p:not(.eyebrow) {
  max-width:30rem
}
.hero-shape {
  display:none;
  position:absolute;
  z-index:-1;
  right:3rem;
  top:3rem;
  width:15rem;
  height:15rem;
  border:1px solid var(--ink);
  border-radius:50%
}
.hero-shape::before,.hero-shape::after {
  content:"";
  position:absolute;
  inset:2.4rem;
  border:1px solid var(--ink);
  border-radius:50%
}
.hero-shape::after {
  inset:5rem;
  background:var(--ink)
}
.button {
  display:inline-block;
  padding:.75rem 1.3rem;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none
}
.button:hover {
  background:var(--focus);
  color:var(--paper)
}
.page-heading {
  padding-block:clamp(2.5rem,6vw,5rem) 1.5rem
}
.page-heading h1 {
  max-width:23ch;
  margin-bottom:1rem
}
.page-heading.compact {
  padding-block:2rem 1rem
}
.compact h1 {
  font-size:clamp(1.7rem,3vw,2.8rem)
}
.category-nav {
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  padding-block:1.5rem 2rem
}
.chip {
  border:1px solid var(--line);
  padding:.45rem .9rem;
  text-decoration:none;
  font-size:.95rem
}
.chip:hover {
  border-color:var(--accent)
}
.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-block:1rem
}
.film-grid {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.8rem 1rem
}
.film-link {
  text-decoration:none;
  display:block
}
.poster {
  aspect-ratio:3/4;
  background:var(--wash);
  position:relative;
  overflow:hidden
}
.poster img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.poster-empty {
  display:grid;
  place-items:center;
  position:absolute;
  inset:0
}
.poster-empty::before {
  content:"";
  position:absolute;
  width:45%;
  height:42%;
  border:1px solid var(--line);
  transform:rotate(-12deg)
}
.poster-empty span {
  letter-spacing:.4em;
  color:var(--muted);
  font-size:.85rem
}
.film h3 {
  margin:.75rem 0 .3rem;
  overflow-wrap:anywhere
}
.film-meta {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .65rem;
  font-size:.82rem;
  color:var(--muted);
  margin:0
}
.film-meta span {
  overflow-wrap:anywhere
}
.film-link:hover h3 {
  text-decoration:underline
}
.empty {
  padding:clamp(2rem,5vw,4rem) 1.5rem;
  background:var(--wash);
  border-block:1px solid var(--line);
  margin-block:1rem
}
.empty p:last-child {
  margin-bottom:0
}
.empty h2,.empty h3 {
  margin-bottom:.6rem
}
.muted,.result-count,.breadcrumb,.player-help {
  color:var(--muted)
}
.filters {
  border-block:1px solid var(--line);
  padding:1rem 0;
  margin-bottom:1.5rem
}
.filters summary {
  cursor:pointer;
  font-weight:650;
  min-height:2.75rem
}
.filter-row {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1rem;
  margin-block:1rem
}
.filter-row strong {
  min-width:3rem
}
.filter-row a {
  min-height:2.75rem
}
.pagination {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:2rem
}
.pagination a,.pagination span {
  padding:.55rem .8rem;
  border:1px solid var(--line);
  min-width:2.75rem;
  text-align:center;
  text-decoration:none
}
.pagination [aria-current] {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)
}
.breadcrumb {
  margin-block:1.5rem
}
.film-detail {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem
}
.detail-poster {
  width:min(260px,75%)
}
.film-detail h1 {
  font-size:clamp(2rem,4vw,3.5rem);
  margin-bottom:1rem
}
.facts {
  margin:1.5rem 0
}
.facts>div {
  display:flex;
  gap:1rem;
  margin-bottom:.4rem
}
.facts dt {
  color:var(--muted);
  min-width:3rem
}
.facts dd {
  margin:0;
  overflow-wrap:anywhere
}
.introduction {
  padding-block:2.5rem;
  border-bottom:1px solid var(--line)
}
.introduction p {
  max-width:75ch;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.episodes {
  padding-top:2rem
}
.play-line {
  border-top:1px solid var(--line);
  padding-block:1.2rem
}
.episode-list {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  padding:0
}
.episode-list a {
  display:block;
  border:1px solid var(--line);
  padding:.65rem 1rem;
  text-decoration:none;
  overflow-wrap:anywhere
}
.episode-list [aria-current] {
  font-weight:750
}
.player-stage {
  width:100%;
  aspect-ratio:16/9;
  min-height:220px;
  background:#18291f;
  color:var(--paper)
}
.cms-player-message {
  padding:2rem;
  margin:0
}
.player-help {
  margin-top:1rem;
  font-size:.9rem
}
.site-footer {
  border-top:1px solid var(--ink);
  padding-block:1.5rem 2rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.85rem
}
.site-footer a {
  margin-left:auto
}
@media(min-width:640px) {
  .wrap {
    width:min(1200px,calc(100% - 4rem))
  }
  .film-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2rem 1.5rem
  }
  .film-detail {
    grid-template-columns:240px minmax(0,1fr)
  }
  .detail-poster {
    width:100%
  }
  .hero-shape {
    display:block;
    opacity:.25
  }
}
@media(min-width:1000px) {
  .site-header {
    gap:2rem
  }
  .search {
    width:20rem;
    margin-left:auto
  }
  .film-grid {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }
  .hero-shape {
    opacity:1;
    width:18rem;
    height:18rem
  }
}
@media(prefers-reduced-motion:no-preference) {
  a,button {
    transition:color .15s ease,background-color .15s ease,border-color .15s ease
  }
}
