/* trailers.css — the trailer rail on the homepage and the /trailers/ page */

/* ── shared trailer card ─────────────────────────────── */
.tr-card{display:block;text-decoration:none;scroll-snap-align:start;color:var(--paper)}
.tr-frame{position:relative;display:block;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#0b0f0d;
  box-shadow:0 12px 22px -12px rgb(0 0 0 / .6);transition:transform .18s ease,box-shadow .18s ease}
.tr-frame img{display:block;width:100%;height:100%;object-fit:cover}
.tr-card:hover .tr-frame,.tr-card:focus-visible .tr-frame{transform:translateY(-3px);box-shadow:0 18px 26px -14px rgb(0 0 0 / .7)}
.tr-badge{position:absolute;left:.45rem;bottom:.45rem;display:inline-flex;align-items:center;gap:.3rem;
  padding:.18rem .5rem .18rem .42rem;border-radius:999px;background:rgb(10 14 12 / .72);border:1px solid rgb(255 255 255 / .4);
  color:#fff;font:600 .74rem/1.2 "Libre Franklin",system-ui,sans-serif;letter-spacing:.02em}
.tr-badge::before{content:"";border-style:solid;border-width:.3rem 0 .3rem .5rem;border-color:transparent transparent transparent #E9CF94}
.tr-card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--display);font-size:.84rem;line-height:1.25;margin-top:.5rem;font-weight:700;color:var(--paper)}

/* ── homepage rail ───────────────────────────────────── */
.tr-rail{border-block:1px solid var(--line);background:var(--ink2);padding:1.6rem 0 1.7rem}
.tr-rail-head{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;margin-bottom:1rem}
.tr-rail-head h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin:0}
.tr-rail-head p{margin:0;color:var(--paper3);font-size:.94rem;flex:1 1 15rem}
.tr-rail-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(8.4rem,8.4rem);gap:.9rem;
  overflow-x:auto;padding:.3rem .1rem .8rem;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.tr-rail-scroll::-webkit-scrollbar{height:6px}
.tr-rail-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
@media (min-width:760px){.tr-rail-scroll{grid-auto-columns:minmax(9.6rem,9.6rem)}}
.rec-trailer::before{content:"";display:inline-block;margin-right:.35rem;border-style:solid;
  border-width:.32rem 0 .32rem .52rem;border-color:transparent transparent transparent currentColor;vertical-align:.02rem}

/* ── /trailers/ page ─────────────────────────────────── */
.tf-head{padding-top:1rem;padding-bottom:.9rem}
.tf-head .h1{margin-bottom:.25rem}
.tf-head .lede{margin:0}
.tf-wrap{position:relative;max-width:var(--wrap);margin-inline:auto}
.tf-feed{position:relative;scroll-margin-top:4.2rem;height:calc(100svh - 4.4rem);min-height:30rem;max-height:62rem;overflow-y:auto;
  scroll-snap-type:y mandatory;background:#060908;color:#fff;scrollbar-width:none;outline:none}
.tf-feed::-webkit-scrollbar{display:none}
.tf-item{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;justify-content:center}
.tf-stage{position:relative;height:100%;aspect-ratio:9/16;max-width:100%;background:#000;overflow:hidden}
.tf-stage img,.tf-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.tf-stage video{z-index:1}
.tf-nojs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;padding:.6rem 1rem;border-radius:999px;
  background:rgb(10 14 12 / .75);border:1px solid rgb(255 255 255 / .5);color:#fff;text-decoration:none}
.tf-on .tf-nojs{display:none}

.tf-info{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:3.2rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgb(0 0 0 / 0) 0%,rgb(0 0 0 / .88) 2.6rem,rgb(0 0 0 / .94) 100%);pointer-events:none}
.tf-info > *{pointer-events:auto}
.tf-kicker{margin:0 0 .15rem;font:600 .74rem/1.3 "Libre Franklin",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#E9CF94}
.tf-title{margin:0 0 .3rem;font-family:var(--display);font-size:clamp(1.25rem,1rem + 1.6vw,1.9rem);line-height:1.12}
.tf-title a{color:#fff;text-decoration:none}
.tf-hook{margin:0 0 .65rem;color:#E6ECE6;font-size:1rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tf-info .buys .buy{border-color:rgb(255 255 255 / .45);color:#F5F3EC;background:rgb(0 0 0 / .25)}
.tf-info .buys .buy .buy-p{color:#F0D9A3}
.tf-info .buys .buy-kindle{background:#E9CF94;border-color:#E9CF94;color:#16231D}
.tf-info .buys .buy-kindle .buy-p{color:#16231D}
.tf-info .buys .buy-kindle .buy-f{color:#16231D;opacity:.85}
.tf-info .buys .buy .buy-f{color:inherit}
.tf-links{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1rem;margin:.6rem 0 0;font-size:.92rem}
.tf-link{color:#F5F3EC;background:none;border:0;padding:0;font:inherit;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.tf-ku{color:#BFD9D2;font-weight:600}

.tf-ctl{position:absolute;z-index:4;left:.7rem;top:.7rem;display:flex;gap:.45rem}
.tf-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:2.3rem;padding:.35rem .8rem;border-radius:999px;cursor:pointer;
  background:rgb(10 14 12 / .72);border:1px solid rgb(255 255 255 / .5);color:#fff;font:600 .85rem/1 "Libre Franklin",system-ui,sans-serif}
.tf-sound::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:#E9CF94;box-shadow:0 0 0 0 rgb(233 207 148 / .7);animation:tf-pulse 1.6s ease-out infinite}
.tf-sound[aria-pressed="true"]::before{animation:none;background:#BFD9D2}
@keyframes tf-pulse{to{box-shadow:0 0 0 .55rem rgb(233 207 148 / 0)}}
.tf-big{position:absolute;z-index:2;left:50%;top:42%;width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem;border-radius:50%;
  background:rgb(10 14 12 / .6);border:2px solid rgb(255 255 255 / .8);cursor:pointer;display:none}
.tf-big::after{content:"";position:absolute;left:1.55rem;top:1.1rem;border-style:solid;border-width:1rem 0 1rem 1.6rem;border-color:transparent transparent transparent #fff}
.tf-stage.is-paused .tf-big{display:block}
.tf-bar{position:absolute;z-index:4;left:0;right:0;bottom:0;height:3px;background:rgb(255 255 255 / .18)}
.tf-bar i{display:block;height:100%;width:0;background:#E9CF94}

.tf-arrows{display:none}
@media (min-width:900px){
  .tf-wrap{padding-inline:var(--pad)}
  .tf-feed{border-radius:16px;box-shadow:0 30px 60px -30px rgb(0 0 0 / .6)}
  .tf-item{display:grid;grid-template-columns:auto minmax(0,23rem);grid-template-rows:100%;justify-content:center;align-items:end;gap:2.2rem;padding-right:4rem}
  .tf-info{position:relative;background:none;padding:0 0 2.2rem}
  .tf-hook{-webkit-line-clamp:5}
  .tf-arrows{display:flex;flex-direction:column;gap:.6rem;position:absolute;right:calc(var(--pad) + 1rem);top:50%;transform:translateY(-50%);z-index:5}
  .tf-arrows button{width:2.9rem;height:2.9rem;border-radius:50%;cursor:pointer;background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .45);color:#fff;font-size:1.15rem;line-height:1}
  .tf-arrows button:hover{background:rgb(255 255 255 / .2)}
}
.tf-all{padding-block:2rem 2.6rem}
.tf-all h2{margin-bottom:1rem}
.tf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.6rem,1fr));gap:1.1rem .9rem}
@media (min-width:760px){.tf-grid{grid-template-columns:repeat(auto-fill,minmax(9.4rem,1fr))}}
@media (prefers-reduced-motion:reduce){.tf-feed{scroll-behavior:auto}.tf-sound::before{animation:none}}