:root{
  --bg1:#182530;
  --bg2:#0c1013;
  --ink:#f1eee8;
  --muted:#a9abad;
  --blue:#4aa8ff;
  --blue-soft:#78bcf4;
  --card-w:197.5px;
  --poster-h:297.5px;
  --gap-x:12.5px;
  --gap-y:37.5px;
}

@font-face{
  font-family:"Literata";
  src:url("fonts/Literata-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box}
html{background:#0c1013}
body{
  margin:0;
  min-height:100vh;
  font-size:20px;
  color:var(--ink);
  font-family:"Literata", Georgia, serif;
  background:
    radial-gradient(1125px 650px at 50% -4%, rgba(57,89,113,.34), transparent 67%),
    radial-gradient(1062.5px 650px at 88% 18%, rgba(42,58,70,.22), transparent 68%),
    linear-gradient(148deg,#182530 0%,#121a21 42%,#0c1013 100%);
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

.page{
  width:min(100%,1319px);
  margin:0 auto;
  padding:72.5px 42.5px 112.5px;
}

.intro{
  max-width:775px;
  margin:0 auto 52.5px;
  text-align:center;
}

.intro h1{
  margin:22.5px 0 15px;
  font-size:35px;
  line-height:1.1;
  font-weight:500;
}

.intro p{
  margin:0;
  color:#aeb2b3;
  font-size:17.5px;
  line-height:1.65;
}

.intro .updated{
  margin:17.5px 0 0;
  color:#5b6266;
  font-family:"Victor Mono", monospace;
  font-style:italic;
  font-size:17.5px;
}

.intro .updated .completed-link{
  color:#5b6266;
  text-decoration-line:underline;
  text-decoration-color:#5b6266;
  text-decoration-thickness:0.5px;
  text-underline-offset:5px;
  white-space:nowrap;
}
.intro .updated .completed-link:hover{color:var(--blue)}

.intro a {
  font-family:"Victor Mono", monospace;
  font-style:italic;
  font-size:17.5px;

  color:var(--ink);
  text-decoration-line:underline;
  text-decoration-color:var(--blue);
  text-decoration-thickness:0.5px;
  text-underline-offset:7.5px;
}
.intro a:hover {
  color:var(--blue);
}

/* FAQ */
.faq{
  display:flex;
  justify-content:center;
  gap:28px;
  margin:18px 0 32px;
  font-size:17.5px;
  font-family:"Literata",Georgia,serif;
}
.faq-item{position:relative}

.faq-q{
  cursor:pointer;
  color:var(--ink);
  text-decoration:none;
  /* чёткие чёрточки 12px с просветом 4px, толщина 0.5px, offset 7.5px */
  background-image:repeating-linear-gradient(to right, var(--blue) 0 12px, transparent 12px 16px);
  background-size:100% 0.5px;
  background-repeat:repeat-x;
  background-position:0 calc(100% - 7.5px);
  padding-bottom:8px;
  transition:color .18s ease;
}
.faq-q:hover{color:var(--blue)}

.faq-card{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:420px;
  padding:16px 20px;
  background:rgba(16,22,28,1);
  border:1px solid rgba(255,255,255,.13);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:60;
}
/* фестон-низ: сплошные полукруги от края до края, глубиной 20px */
.faq-card::after{
  content:"";
  position:absolute;
  left:-1px;right:-1px;
  bottom:-19.5px;
  height:20px;
  background-image:radial-gradient(circle 20px at 10px 0,
    rgba(16,22,28,1) 0 19px,
    rgba(255,255,255,.13) 19px 20px,
    transparent 20px);
  background-size:20px 20px;
  background-repeat:repeat-x;
  border-left:1px solid rgba(255,255,255,.13);
  border-right:1px solid rgba(255,255,255,.13);
}
@media (hover:hover){
  .faq-item:hover .faq-card{opacity:1;pointer-events:auto}
}
.faq-item.is-open .faq-card{opacity:1;pointer-events:auto}

/* Висячий отступ: вторая строка не заходит под число */
.faq-card--steps{display:flex;flex-direction:column;gap:6px}
.faq-step{
  display:block;
  position:relative;
  padding-left:24px;
  color:var(--ink);
}
.faq-num{
  position:absolute;
  left:0;top:0;
  width:20px;
  color:#8a8f94;
  font-family:"Victor Mono",monospace;
  font-weight:700;
}
.faq-card code{
  font-family:"Victor Mono",monospace;
  color:var(--blue-soft);
  font-size:14px;
}

.faq-card--ratings{display:flex;flex-direction:column;gap:10px}
.faq-rating{
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
  font-family:"Literata",Georgia,serif;
}
.faq-rating .rating-dot{
  width:10px;height:10px;
  border-radius:50%;
  border:none;
  flex:0 0 10px;
  margin-top:5px;
}
.faq-rating .faq-dot--imdb{background:#ffaa05}
.faq-rating .faq-dot--letterboxd{background:conic-gradient(from 0deg,#ff8000,#00e054,#40bcf4,#ff8000)}
.faq-rating .faq-dot--rt{background:#fa320a}
.faq-rating .faq-dot--metacritic{background:#54a72a}
.faq-rating-text{
  display:flex;
  flex-direction:column;
}
.faq-rating-title{
  color:var(--ink);
  font-family:"Literata",Georgia,serif;
}
.faq-note{
  font-family:"Victor Mono",monospace;
  font-size:13px;
  color:var(--muted);
}

.faq-card s{color:var(--ink)}

.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(var(--card-w),275px));
  justify-content:center;
  gap:var(--gap-y) var(--gap-x);
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0 42.5px;
}
@media (min-width:1270px){
  .grid{grid-template-columns:repeat(6,minmax(var(--card-w),275px))}
}
@media (min-width:1750px){
  .grid{grid-template-columns:repeat(8,minmax(var(--card-w),275px))}
}
@media (min-width:2225px){
  .grid{grid-template-columns:repeat(10,minmax(var(--card-w),275px))}
}
@media (min-width:2750px){
  .grid{grid-template-columns:repeat(12,minmax(var(--card-w),275px))}
}
@media (min-width:3300px){
  .grid{grid-template-columns:repeat(14,minmax(var(--card-w),275px))}
}

.card{
  position:relative;
  min-width:0;
  isolation:isolate;
  /* "Бумага" карточки = светлый вариант главного цвета постера (ставится из JS).
     Тёмный вариант — в media-запросе ниже, по системной теме. */
  --paper: var(--paper-light,#f4f2e9);
  --poster-text:#000;
}
@media (prefers-color-scheme: dark){
  .card{
    --paper: var(--paper-dark,#12181d);
    --poster-text:#fff;
  }
}

.poster-button{
  position:relative;
  display:block;
  width:100%;
  height:var(--poster-h);
  padding:0;
  border:0;
  border-radius:0;
  border: 1px solid rgba(12, 16, 19, 1);
  overflow:hidden;
  cursor:pointer;
  background:var(--paper,#f4f2e9);
  font:inherit;
  text-align:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

/* Поднимается только постер — подпись/ссылки под ним остаются на месте */
.card:hover .poster-button{
  transform:translateY(-7.5px);
}

/* Один прыжок после успешного скачивания, тоже только на постере */
@keyframes cardBounce{
  0%{transform:translateY(-7.5px)}
  35%{transform:translateY(-17px)}
  62%{transform:translateY(-2px)}
  100%{transform:translateY(-7.5px)}
}
.card.bounce .poster-button{
  animation:cardBounce .55s cubic-bezier(.3,.6,.3,1);
}

/* Фото полностью скрыто, пока не наведена вся карточка.
   Никаких затемнений/забеливаний — при ховере видно на 100%. */
.poster-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1);
  transition:opacity .28s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}

/* На появление (hover-in) фото должно вскакивать мгновенно (0s),
   а плавно исчезать — только когда убираем мышку (используется .28s выше) */
.card:hover .poster-image{
  opacity:1;
  transform:scale(1.025);
  transition:opacity 0s,transform .7s cubic-bezier(.2,.7,.2,1);
}

/* Текст на постере: в покое — явный чёрный/белый (--poster-text) поверх
   бумаги; на hover — белый + difference для читаемости на любом фото. */
.poster-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:17.5px 15px 50px;
  color:var(--poster-text,#000);
}
.card:hover .poster-content{
  color:#fff;
  mix-blend-mode:difference;
}

.year{
  position:absolute;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  font-size:17.5px;
  line-height:1;
}

.episodes{
  position:absolute;
  top:41px;
  left:50%;
  transform:translateX(-50%);
  font-size: 17.5px;
  line-height:1;
  white-space:nowrap;
}

.badge{
  position:absolute;
  top:41px;
  left:50%;
  transform:translateX(-50%);
  font-size: 17.5px;
  line-height:1;
  white-space:nowrap;
  font-variant-caps:all-small-caps;
  letter-spacing:0.05em;
}

.title{
  position:absolute;
  top:38%;
  left:15px;
  right:15px;
  min-height:125px;
  max-height:155px;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  font-size:22.5px;
  line-height:1.15;
  -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
}

.title-wrap {
  position: absolute;
  top: 36%;
  left: 15px;
  right: 15px;
  min-height: 125px;
  max-height: 169px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.award-icon {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);

  width: 30px;
  height: 30px;

  background: url("assets/award-icon.svg") center / contain no-repeat;
  filter: invert(1);

  z-index: 10;
  pointer-events: none;

  opacity: 1;
  transition: opacity .25s ease;
}
@media (prefers-color-scheme: dark){
  .award-icon{ filter:none; }
}

.title-wrap .title {
  position: static;
  max-height: 155px;
  width: 100%;
}

.card:hover .award-icon {
  opacity: 0;
  transition: opacity 0s;
}

.poster-button:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

.download{
  position:absolute;
  left:50%;
  bottom:12.5px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7.5px;
  color:var(--poster-text,#000);
  font-family:"Victor Mono", monospace;
  font-size:17.5px;
  font-style:italic;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%,4px);
  transition:opacity .25s ease,transform .3s ease;
  pointer-events:none;
}

.card:hover .download{
  color:#fff;
  mix-blend-mode:difference;
  opacity:1;
  transform:translate(-50%,0);
}

/* Пока подпись показывает "downloaded", она видна независимо от ховера */
.card.downloaded .download{
  opacity:1;
  transform:translate(-50%,0);
}

.download-arrow{
  width:21px;
  height:25px;
  flex:0 0 21px;
  overflow:visible;
}

.download-arrow path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.meta{
  position:relative;
  /*height:64px;*/
  padding-top:7.5px;
}

/* Кнопка Download (поиск рипа на трекерах) — над рейтингами, в .meta */
.dl-wrap{
  position:relative;
}
/* невидимый мост через зазор 8px над попапом — чтобы попап не исчезал,
   когда мышь переходит с кнопки на список трекеров */
.dl-wrap::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  right:0;
  height:8px;
  z-index:5;
}
.dl-row{
  position:relative;
  display:flex;
  align-items:center;
  margin-left:-2px;
  width:calc(100% + 2px);
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-sizing:border-box;
  height:26.5px;
  color:var(--ink);
  font-family:"Literata", Georgia, serif;
  font-size:17.5px;
  line-height:1;
  text-align:left;
  cursor:pointer;
  transition:background-color .2s ease;
}
.dl-row:hover{
  background:rgba(241,238,232,.06);
}
/* У Literata ink глифов выходит за line box → при line-height:1 текст
   прижат книзу. Поднятие — как у рипа: line-height:1.2 + padding-bottom:2px */
.dl-row-label{
  line-height:1.2;
  padding-top:0;
  padding-bottom:2px;
  padding-left:17.5px;
}
.dl-row-arrow{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  color:var(--muted);
  transition:color .2s ease;
}
.dl-row:hover .dl-row-arrow{
  color:var(--blue);
}

/* Попап со списком трекеров — стиль как у .faq-card */
.dl-pop{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:max-content;
  min-width:100%;
  padding:8px;
  background:rgba(16,22,28,1);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  font-family:"Literata", Georgia, serif;
  font-size:15px;
  line-height:1.4;
  color:var(--ink);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:20;
}
@media (hover:hover){
  .dl-wrap:hover .dl-pop{opacity:1;pointer-events:auto}
}
/* .card имеет isolation:isolate (свой stacking context) → попап не может
   подняться над нижним рядом. Поднимаем саму карточку, когда открыт попап */
@media (hover:hover){
  .card:has(.dl-wrap:hover){z-index:30}
}
.dl-pop-link{
  display:block;
  padding:6px 10px;
  color:var(--ink);
  text-decoration:none;
  border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.dl-pop-link + .dl-pop-link{margin-top:2px}
.dl-pop-link:hover{background:rgba(74,168,255,.14);color:var(--blue)}

.meta-link{
  position:relative;
  display:block;
  max-width:100%;
  text-decoration:none;
  margin-left:-2px;
  padding-left:17.5px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}

.meta-link + .meta-link{margin-top:2px}

/* Автор без ссылки — текст со стрелкой, но без <a>, подчёркивания и ховера */
.meta-author{
  position:relative;
  display:block;
  max-width:100%;
  margin-left:-2px;
  padding-left:17.5px;
}
.meta-link + .meta-author,
.meta-author + .meta-link,
.meta-author + .meta-author{margin-top:2px}
.meta-author-label{
  display:inline;
  color:var(--ink);
  font-family:"Literata", Georgia, serif;
  font-size:17.5px;
  font-weight:400;
  line-height:1.25;
  padding:0 2px 2px;
}

/* Иконка-стрелочка перед каждым автором — просто маркер "подпись", не копируется.
   Позиционируется абсолютно в отведённом padding-left у .meta-link, поэтому
   ВСЕ строки текста (включая перенос на вторую) выравниваются по началу
   текста, а не утыкаются под иконку. */
.meta-icon{
  position:absolute;
  left:0;
  top:9px;
  width:15px;
  height:14px;
  color:var(--muted);
}
.meta-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Сама заливка — на отдельном inline-элементе с box-decoration-break:clone,
   поэтому если подпись переносится на 2 строки, у каждой строки СВОЙ
   прямоугольник заливки по ширине именно её текста, а не всей карточки. */
.meta-link-text{
  display:inline;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  color:var(--ink);
  font-family:"Literata", Georgia, serif;
  font-size:17.5px;
  font-weight:400;
  line-height:1.25;
  padding:0 2px 2px;
  text-decoration-line:underline;
  text-decoration-color:var(--blue);
  text-decoration-thickness:0.5px;
  text-underline-offset:7px;
  background-image:linear-gradient(var(--blue),var(--blue));
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  transition:background-size .32s cubic-bezier(.2,.8,.2,1),color .18s ease;
}

.description{
  margin:7.5px 0 0;
  font-size:17.5px;
  line-height:1.45;
  color:var(--muted);
}

.meta-link:hover,
.meta-link:focus-visible{
  transform:translateX(3px);
  outline:none;
}

.meta-link:hover .meta-link-text,
.meta-link:focus-visible .meta-link-text{
  color:#fff;
  background-size:100% 100%;
}

/* Рейтинги — под постером, над подписями авторов */
.ratings{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-bottom:7.5px;
}
.rating{
  display:inline-flex;
  align-items:center;
  padding:3px 6px 6px;
  border-radius:0;
  font-family:"Literata", Georgia, serif;
  font-size:17.5px;
  line-height:1;
  color:var(--ink);
  font-variant-numeric: normal;
  height:26.5px;
  box-sizing:border-box;
}
.rating-imdb{background:rgba(255,170,5,.2);border-left:6px solid rgba(255,170,5,1);color:var(--ink)}
.rating-letterboxd{
  background:conic-gradient(from 0deg,rgba(255,128,0,.2),rgba(0,224,84,.2),rgba(64,188,244,.2),rgba(255,128,0,.2));
  position:relative;
  border:none;
  padding-left:12px;
  color:var(--ink);
}
.rating-letterboxd::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:6px;
  background:linear-gradient(to bottom,#ff952a,#00e86b,#45c9ff);
}
.rating-rt{background:rgba(250,50,10,.2);border-left:6px solid rgba(250,50,10,1);color:var(--ink)}
.rating-metacritic{background:rgba(84,167,42,.2);border-left:6px solid rgba(84,167,42,1);color:var(--ink)}

/* "Стопка серий" — 2 псевдо-карточки позади постера, только у сериалов */
.stack-layer{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:var(--poster-h);
  z-index:-1;
  background:var(--paper,#f4f2e9);
  border:1px solid rgba(12, 16, 19, 1);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
/* Задержка задана прямо здесь (а не только внутри :hover), поэтому она
   действует в обе стороны: и когда слои поднимаются вслед за постером,
   и когда опускаются обратно — по одному и тому же порядку l1 → l2. */
.stack-layer.l1{transform:translate(4px,-4px);transition-delay:.04s}
.stack-layer.l2{transform:translate(7.5px,-7.5px);transition-delay:.09s}

/* Слои поднимаются вместе с постером, но чуть дальше — эффект "следом" */
.card:hover .stack-layer.l1{transform:translate(4px,-11px)}
.card:hover .stack-layer.l2{transform:translate(7.5px,-15px)}

.stack-layer::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--poster);
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .28s ease;
}

.card:hover .stack-layer::before{
  opacity:1;
  transition:opacity 0s;
}

@media (max-width:1125px){
  .page{padding:52.5px 22.5px 75px}
  .grid{padding:0 22.5px}
}

/* Мобильные: возвращаем прежний (до увеличения) масштаб —
   постеры и текст компактнее, чтобы 2-колоночная сетка не вытягивала карточки */
@media (max-width:875px){
  body{font-size:16px}
  .intro{margin-bottom:24px}
  .intro h1{font-size:21px;margin:18px 0 12px}
  .intro p{font-size:13px}
  .intro .updated{font-size:13px;margin:12px 0 0}
  .intro a{font-size:13px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}
  #filters{font-size:14px;gap:6px;margin:24px 0 28px}
  .search{width:150px;min-height:34px;padding:6px 12px;font-size:13px}
  .filter summary{gap:6px;padding:6px 10px;min-height:34px}
  .type-option{padding:6px 11px;min-height:34px;font-size:14px}
  .filter .chevron{width:9px;height:6px;flex:0 0 9px}
  .filter-menu{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);width:100%;min-width:0;max-width:min(360px, calc(100vw - 32px));max-height:50vh;padding:4px;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
  .filter-author .filter-menu{min-width:0}
  .filter-option{padding:6px 10px;border-radius:7px;font-size:14px}
  .poster-content{padding:14px 12px 40px}
  .year{top:12px;font-size:14px}
  .episodes{top:33px;font-size:14px}
  .badge{top:33px;font-size:14px}
  .title{left:12px;right:12px;min-height:100px;max-height:124px;font-size:18px}
  .title-wrap{left:12px;right:12px;min-height:100px;max-height:135px}
  .download{bottom:10px;gap:6px;font-size:14px}
  .meta{padding-top:6px}
  .meta-icon{top:6px}
  .meta-link{padding-left:14px}
  .meta-link-text{font-size:14px}
  .dl-row-label{font-size:14px}
  .meta-author-label{font-size:14px}
  .description{font-size:14px}
  .rating{font-size:14px;padding:3px 6px 6px}
  .rating-letterboxd{padding-left:12px}
  :root{--poster-h:250px}
  .faq{flex-direction:column;align-items:center;gap:12px;font-size:13px}
  .faq-card{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    max-width:calc(100vw - 32px);
    font-size:13px;
  }
  .faq-card code{font-size:12px}
}

/* Фильтры — Автор / Год (выпадающие) + Фильмы|Сериалы (переключатель) */
#filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12.5px;
  margin:37.5px 0 50px;
  font-family:"Literata", Georgia, serif;
  font-style:normal;
  font-size:17.5px;
}

@media (min-width:876px){
  #filters{
    width:max-content;
    max-width:100%;
    margin:37.5px auto 50px;
    padding:4px;
    border-radius:999px;
    position:sticky;
    top:0;
    z-index:50;
    background:rgb(23 34 45);
  }
}

.filter{
  position:relative;
  font-family:"Literata", Georgia, serif;
}

/* Поиск — слева от фильтров, та же "пилюля", что у выпадающих списков */
.search{
  width:210px;
  min-height:47.5px;
  padding:10px 17.5px;
  border:1px solid rgba(241,238,232,.42);
  border-radius:999px;
  background:rgba(12,16,19,.22);
  color:var(--ink);
  font-family:"Literata", Georgia, serif;
  font-size:17.5px;
  font-style:normal;
  line-height:1.25;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}
.search::placeholder{color:var(--muted)}
.search:focus{
  border-color:rgba(74,168,255,.9);
  background:rgba(74,168,255,.08);
  box-shadow:0 0 0 1px rgba(74,168,255,.9);
  color:#fff;
}
/* Поиск с введённым запросом — та же подсветка, что и у выбранного фильтра */
.search.is-active{
  border-color:rgba(74,168,255,.9);
  background:rgba(74,168,255,.08);
  box-shadow:0 0 0 1px rgba(74,168,255,.9);
  color:#fff;
}
.search::-webkit-search-cancel-button{cursor:pointer}
/* Крестик очистки — как шеврон фильтров: белый, тонкий, скруглённый */
.search::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
  height:20px;
  width:20px;
  margin-left:10px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.2 3.2 L8.8 8.8 M8.8 3.2 L3.2 8.8' fill='none' stroke='%23f1eee8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.search::-webkit-search-cancel-button:hover{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.2 3.2 L8.8 8.8 M8.8 3.2 L3.2 8.8' fill='none' stroke='%234aa8ff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.filter summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  min-height:47.5px;
  border:1px solid rgba(241,238,232,.42);
  border-radius:999px;
  color:var(--ink);
  background:rgba(12,16,19,.22);
  user-select:none;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease;
}
.filter summary::-webkit-details-marker{display:none}
.filter summary::marker{content:""}

.filter:hover summary,
.filter[open] summary,
.filter.is-active summary{
  border-color:rgba(74,168,255,.9);
  background:rgba(74,168,255,.08);
  color:#fff;
}

.filter .chevron{
  width:12.5px;
  height:9px;
  flex:0 0 12.5px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.filter .chevron path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.filter[open] .chevron{ transform:rotate(180deg); }

.filter-menu{
  position:absolute;
  top:calc(100% + 9px);
  left:0;
  transform:none;
  width:max-content;
  min-width:0;
  max-width:min(450px, calc(100vw - 40px));
  max-height:350px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:5px;
  z-index:20;
  background:rgba(16,22,28,1);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12.5px;
  box-shadow:0 22.5px 50px rgba(0,0,0,.45);
}

.filter-author .filter-menu{
  min-width:237.5px;
}

.filter-year .filter-menu{
  min-width:0;
}

.filter-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  text-align:left;
  white-space:nowrap;
  padding:10px 14px;
  border:0;
  border-radius:9px;
  background:none;
  color:var(--ink);
  font-family:"Literata", Georgia, serif;
  font-size:17.5px;
  font-style:normal;
  line-height:1.25;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.filter-count{
  color:var(--muted);
  font-family:"Victor Mono", monospace;
  font-size:15px;
  font-style:italic;
  order:2;
  flex:0 0 auto;
}
.filter-option-label{
  order:1;
}
.filter-option:hover{
  background:rgba(255,255,255,.08);
}
.filter-option.is-active{
  background:var(--blue);
  color:#0c1013;
  transition:none; /* без анимации — иначе при повторном открытии видно, как подсветка "едет" от прошлого пункта */
}
.filter-option.is-active .filter-count{
  color:rgba(12,16,19,.75);
}

.type-toggle{
  display:inline-flex;
  position:relative;
  border-radius:999px;
  overflow:hidden;
  background:rgba(12,16,19,.22);
  box-shadow:0 0 0 1px rgba(241,238,232,.42);
  transition:box-shadow .18s ease;
}
/* Вся внешняя обводка целиком становится синей, пока наведена ИЛИ выбрана
   любая из кнопок — без :has() пришлось бы красить только часть периметра
   у одной кнопки, а обводка у соседней рвалась на стыке. */
.type-toggle:has(.type-option:hover),
.type-toggle:has(.type-option.is-active){
  box-shadow:0 0 0 1px rgba(74,168,255,.9);
}

.type-option{
  padding:10px 17.5px;
  min-height:47.5px;
  border:0;
  background:none;
  color:var(--ink);
  font-family:"Literata", Georgia, serif;
  font-size:17.5px;
  font-style:normal;
  line-height:1;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}

/* Тонкий статичный разделитель между кнопками — всегда на месте, никогда не пропадает.
   У одиночной кнопки (тумблер наград) делить нечего — убираем. */
.type-option:first-child{
  box-shadow:inset -1px 0 0 rgba(241,238,232,.22);
}
.type-option:only-child{
  box-shadow:none;
}

.type-option:hover{
  background:rgba(74,168,255,.1);
  color:#fff;
}

.type-option.is-active{
  background:var(--blue);
  color:#0c1013;
}

.card.is-hidden{ display:none; }
.completed.is-hidden{ display:none; }


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

/* Карточка сбора на субтитры — та же самая карточка, что и у фильмов
   (постер поднимается/кликабелен через .poster-button, как у всех),
   просто в 2 раза шире и картинка видна постоянно, а не по ховеру. */
.fundraiser-card{
  grid-column:span 2;
}

/* .poster-button тут — <a>, у ссылок по умолчанию подчёркнутый текст,
   выключаем на уровне самой ссылки */
.fundraiser-card .poster-button{
  text-decoration:none;
  background:transparent;
}

.fundraiser-image{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Необязательное затемнение снизу — включается полем shade:true у фильма,
   если текст плохо видно на конкретной картинке */
.fundraiser-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top, rgba(8,10,12,.72) 0%, rgba(8,10,12,0) 55%);
}

.fundraiser-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 35px;
  text-align:center;
}

.fundraiser-label{
  font-family:"Literata", Georgia, serif;
  font-size:22.5px;
  color:#fff;
}

.fundraiser-title{
  font-family:"Victor Mono", monospace;
  font-style:italic;
  font-weight:700;
  font-size:45px;
  line-height:1.1;
  color:#fff;
}

.fundraiser-goal{
  font-family:"Literata", Georgia, serif;
  font-size:22.5px;
  color:#fff;
}

.fundraiser-collected{
  font-family:"Literata", Georgia, serif;
  font-size:22.5px;
  color:#fff;
  opacity:.9;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.collected-check{
  width:21px;
  height:25px;
  overflow:visible;
}
.collected-check path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Секция завершённых сборов — в самом низу страницы, отдельный заголовок */
.completed{
  margin:80px 0 120px;
  scroll-margin-top:24px;
}
.completed-title{
  margin:0 0 24px;
  font-family:"Victor Mono", monospace;
  font-style:italic;
  font-weight:700;
  font-size:45px;
  line-height:1.1;
  color:#fff;
  text-align:center;
}

@media (max-width:875px){
  .fundraiser-card{ grid-column:span 2; }
  .fundraiser-content{ gap:8px; padding:0 28px; }
  .fundraiser-label{ font-size:18px; }
  .fundraiser-title{ font-size:26px; }
  .fundraiser-goal{ font-size:18px; }
  .fundraiser-collected{ font-size:18px; }
}

/* Фильтры на мобилке: 14px. Правило стоит ПОСЛЕ базовых (17.5px), чтобы
   перебить их по порядку источника — иначе косается 17.5px. */
@media (max-width:875px){
  #filters{font-size:14px;gap:8.5px}
  .type-option{font-size:14px}
  .filter-option{font-size:14px}
  .search{font-size:14px}
}