/* xplainervideo.com vNext prototype. Layered on the live x.css: same tokens, same type, same brand.
   Gold marks meaning only: the brand, the active filter, "Featured", focus. Cards and controls stay cream and quiet. */
.proto-flag{position:fixed;z-index:99;left:10px;bottom:10px;margin:0;padding:5px 9px;border-radius:4px;background:#7a1f1f;color:#fff;font:600 11px/1 system-ui;letter-spacing:.04em;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ the living hero */
.hero-v{isolation:isolate;overflow:hidden;
  background:
    radial-gradient(46% 38% at 50% 44%,rgba(12,12,13,.72),transparent 72%),            /* a quiet pool behind the brand */
    radial-gradient(70% 58% at 50% 44%,rgba(226,174,85,.11),transparent 70%),          /* the warm light */
    radial-gradient(120% 80% at 50% 0%,#1d1b18 0%,transparent 62%),
    radial-gradient(120% 80% at 50% 110%,#17161a 0%,transparent 60%),
    #141416}
.hero-v>*:not(.montage){position:relative;z-index:2}
.montage{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 2.4s ease}
.montage.on{opacity:1}
.mcard{position:absolute;left:0;top:0;width:var(--base,240px);aspect-ratio:16/9;transform-origin:0 0;will-change:transform,opacity;opacity:0;
  border-radius:7px;overflow:hidden;background:#0d0d0f;box-shadow:0 0 0 1px rgba(245,241,232,.07),0 18px 40px -18px rgba(0,0,0,.8)}
.mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mcard .mc-soft{opacity:0}
.mcard.is-near{box-shadow:0 0 0 1px rgba(245,241,232,.11),0 26px 60px -22px rgba(0,0,0,.9)}

/* ------------------------------------------------------------------ cards (library, shelves, related) */
.xcard{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:var(--cream);min-width:0}
.xcard-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0e0f11;box-shadow:0 0 0 1px var(--line)}
.xcard-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease),filter .3s}
.xcard:hover .xcard-thumb img{transform:scale(1.04)}
.xcard:focus-visible{outline:none}
.xcard:focus-visible .xcard-thumb{outline:2px solid var(--gold);outline-offset:3px}
.xcard-len{position:absolute;right:7px;bottom:7px;padding:2px 6px;border-radius:4px;background:rgba(11,12,14,.78);color:var(--cream);font-size:12px;font-weight:500;line-height:1.4}
.xcard-title{font-size:16px;font-weight:500;line-height:1.3;text-wrap:pretty}
.xcard-meta{margin-top:-5px;font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* ------------------------------------------------------------------ the library */
.lib{padding:clamp(96px,11vw,140px) 0 clamp(72px,9vw,120px)}
.find{max-width:none}
.find-h,.find-form{max-width:860px}
.find-h{margin:0;font-size:clamp(40px,6.4vw,80px);line-height:1;font-weight:500;letter-spacing:-.02em}
.find-form{position:relative;margin-top:clamp(22px,3vw,34px)}
.find-input{width:100%;box-sizing:border-box;padding:14px 56px 16px 2px;border:0;border-bottom:1px solid rgba(245,241,232,.28);background:transparent;color:var(--cream);
  font:400 clamp(21px,2.6vw,30px)/1.3 var(--font);outline:none;transition:border-color .2s}
.find-input::placeholder{color:rgba(169,163,151,.75)}
.find-input:focus{border-bottom-color:var(--gold)}
.find-input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
.find-go{position:absolute;right:0;bottom:10px;width:44px;height:44px;border:0;background:none;color:var(--muted);cursor:pointer}
.find-go svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.find-go:hover{color:var(--cream)}
.facets{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:20px}
.facet{border:0;background:none;padding:10px 0 8px;color:var(--muted);font:500 15px/1.2 var(--font);cursor:pointer;border-bottom:2px solid transparent}
.facet:hover{color:var(--cream)}
.facet[aria-pressed="true"]{color:var(--cream);border-bottom-color:var(--gold)}

.lib-curated{margin-top:clamp(40px,5vw,64px)}
.lib.is-filtering .lib-curated{display:none}
.featured{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(22px,3.4vw,48px);align-items:center;
  padding-bottom:clamp(40px,5vw,60px);border-bottom:1px solid var(--line)}
.featured-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.featured-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.featured-thumb:hover img{transform:scale(1.03)}
.featured-kicker{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.featured-title{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1.08;font-weight:500;letter-spacing:-.01em}
.featured-title a{color:inherit;text-decoration:none}
.featured-line{margin:14px 0 0;color:rgba(245,241,232,.82);font-size:clamp(17px,1.6vw,20px);line-height:1.45;max-width:34ch}
.featured-meta{margin:12px 0 0;color:var(--muted);font-size:14px}
.featured-watch{display:inline-block;margin-top:22px;padding:11px 0 7px;color:var(--cream);text-decoration:none;font-weight:500;border-bottom:1px solid rgba(245,241,232,.4)}
.featured-watch:hover{border-bottom-color:var(--gold)}
.featured-watch::before{content:"▶";font-size:.7em;margin-right:10px;vertical-align:.12em}

.shelf{margin-top:clamp(36px,4.4vw,56px)}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.shelf-title{margin:0;font-size:clamp(20px,1.9vw,24px);font-weight:500;letter-spacing:-.005em}
.shelf-nav{display:flex;gap:6px}
.shelf-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--cream);font-size:20px;line-height:1;cursor:pointer;opacity:.7}
.shelf-btn:hover{opacity:1;border-color:rgba(245,241,232,.4)}
.shelf-btn:disabled{opacity:.2;cursor:default}
.shelf-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*20px)/5.25);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.shelf-row::-webkit-scrollbar{display:none}
.shelf-row>*{scroll-snap-align:start}
.shelf-row.at-end{mask-image:none}

.all{margin-top:clamp(56px,7vw,96px);padding-top:clamp(36px,4vw,48px);border-top:1px solid var(--line)}
.lib.is-filtering .all{margin-top:clamp(28px,3vw,40px);border-top:0;padding-top:0}
.all-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.all-h{margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:500}
.all-count{margin:0;color:var(--muted);font-size:15px;flex:1}
.all-sort select{appearance:none;background:transparent;color:var(--cream);border:0;border-bottom:1px solid var(--line);padding:6px 22px 6px 2px;font:500 15px var(--font);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.all-sort option{background:var(--bg2)}
.all-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:28px 18px}
.all-empty{margin:8px 0 0;color:var(--muted);font-size:18px}
.all-empty a{color:var(--cream)}
.all-more{display:block;margin:36px auto 0;padding:12px 2px 8px;border:0;border-bottom:1px solid rgba(245,241,232,.4);background:none;color:var(--cream);font:500 16px var(--font);cursor:pointer}
.all-more:hover{border-bottom-color:var(--gold)}
mark.hit{background:none;color:var(--gold-hi)}

/* ------------------------------------------------------------------ a film's own page */
.filmpage{padding:clamp(84px,9vw,112px) 0 clamp(64px,8vw,104px)}
.crumbs{margin:0 0 18px;font-size:14px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--cream)}
.crumbs a::before{content:"← "}
.fp-player{position:relative;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line)}
.fp-video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.fp-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(11,12,14,.86);backdrop-filter:blur(4px)}
.fp-end[hidden]{display:none}
.fp-end-k{margin:0;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.fp-end-next{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--cream);text-decoration:none;font-size:clamp(18px,2vw,24px);font-weight:500;text-align:center;max-width:28ch}
.fp-end-next img{width:clamp(200px,26vw,320px);height:auto;border-radius:8px;box-shadow:0 0 0 1px var(--line)}
.fp-end-next:hover img{box-shadow:0 0 0 2px var(--gold)}
.fp-end-replay{border:0;background:none;color:var(--muted);font:500 15px var(--font);cursor:pointer;padding:8px}
.fp-end-replay:hover{color:var(--cream)}
.fp-head{margin-top:clamp(22px,3vw,34px);max-width:760px}
.fp-title{margin:0;font-size:clamp(30px,4vw,52px);line-height:1.06;font-weight:500;letter-spacing:-.015em}
.fp-line{margin:14px 0 0;font-size:clamp(18px,1.8vw,22px);line-height:1.45;color:rgba(245,241,232,.84)}
.fp-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;font-size:14px;color:var(--muted)}
.fp-meta a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(169,163,151,.4);text-underline-offset:3px}
.fp-meta a:hover{color:var(--cream)}
.fp-note{margin:12px 0 0;font-size:14px;color:var(--muted)}
.fp-share{margin-top:18px;padding:8px 0 5px;border:0;border-bottom:1px solid rgba(245,241,232,.3);background:none;color:var(--cream);font:500 14px var(--font);cursor:pointer}
.fp-related{margin-top:clamp(48px,6vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.fp-related .shelf-row{grid-auto-columns:calc((100% - 3*20px)/4);mask-image:none}

/* ------------------------------------------------------------------ phones */
@media (max-width:820px){
  .featured{grid-template-columns:1fr}
  .shelf-row{grid-auto-columns:62%;gap:14px}
  .fp-related .shelf-row{grid-auto-columns:62%}
  .shelf-nav{display:none}
  .all-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .xcard-title{font-size:15px}
  .facets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(var(--gut)*-1);padding-right:var(--gut)}
  .facets::-webkit-scrollbar{display:none}
  .facet{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .montage{transition:none}
  .xcard-thumb img,.featured-thumb img{transition:none}
}
.all-more[hidden],.all-sort[hidden]{display:none}
.shelf.no-scroll .shelf-nav{display:none}
.shelf.no-scroll .shelf-row{mask-image:none}
.find-go svg{overflow:visible;stroke-linejoin:round}
.find-input:focus~.find-go,.find-go:focus-visible{color:var(--gold)}
@media (max-width:440px){.find-input{font-size:18px;padding-right:48px}}
.montage-pause{position:absolute;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,241,232,.16);background:rgba(11,12,14,.4);color:rgba(245,241,232,.55);cursor:pointer;display:grid;place-items:center}
.montage-pause:hover,.montage-pause:focus-visible{color:var(--cream);border-color:rgba(245,241,232,.4)}
.montage-pause svg{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.montage-pause{display:none}}
.all-reset{border:0;background:none;padding:0;color:var(--cream);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.facet{min-height:44px}
.find-input:focus-visible{border-bottom-width:2px}
.hero-v>.montage-pause{position:absolute}
@media (max-width:600px){
  .fp-end{position:static;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:12px 16px;padding:16px;background:var(--bg2);backdrop-filter:none}
  .fp-end-k{width:100%}
  .fp-end-next{flex-direction:row;text-align:left;font-size:17px;gap:14px}
  .fp-end-next img{width:132px}
}
.all-scope{margin:-10px 0 22px;color:var(--muted);font-size:15px}
.all-scope button{border:0;background:none;padding:0;color:var(--cream);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ------------------------------------------------------------------ typographic color hierarchy (owner review 9)
   cream  = primary content: film titles, the page headline, featured title
   gold   = meaning: brand, Featured, the active filter, focus
   taupe  = organization: shelf and section headings
   dim    = metadata: runtime, topics, counts, Little label */
.lib,.filmpage{--org:#bcae9a;--meta:#8e887d}
.shelf-title,.all-h{color:var(--org);font-weight:500}
.all-count,.featured-meta,.xcard-meta,.fp-meta,.fp-meta a,.fp-note,.crumbs a,.all-sort select{color:var(--meta)}
.fp-meta a{text-decoration-color:rgba(142,136,125,.45)}
.all-sort select{background-image:linear-gradient(45deg,transparent 50%,var(--meta) 50%),linear-gradient(135deg,var(--meta) 50%,transparent 50%)}
.shelf-title .xw-x,.shelf-title .xw-er,.all-h .xw-x,.all-h .xw-er{color:inherit}

/* ================================================================== DISCOVER: the library has a director (light) */
.lib{padding:0 0 clamp(72px,9vw,120px)}
.disc{position:relative;height:max(680px,100svh);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 0%,#1b1a18 0%,transparent 60%),radial-gradient(120% 80% at 50% 110%,#141317 0%,transparent 60%),#111113;
  border-bottom:1px solid var(--line)}
.field{position:absolute;inset:0;z-index:1}
.fcard{position:absolute;left:0;top:0;aspect-ratio:16/9;border-radius:9px;overflow:hidden;transform-origin:0 0;will-change:transform;
  background:#0d0d0f;box-shadow:0 0 0 1px rgba(245,241,232,.08),0 20px 50px -24px rgba(0,0,0,.9);outline:none;opacity:0;transition:opacity 1.2s ease,box-shadow .5s ease}
.disc.ready .fcard{opacity:1}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fveil{position:absolute;inset:0;background:#0b0b0d;opacity:.4;pointer-events:none}
.flen{position:absolute;right:7px;bottom:7px;padding:2px 6px;border-radius:4px;background:rgba(11,12,14,.78);color:var(--cream);font-size:12px;font-weight:500;line-height:1.4;opacity:0;transition:opacity .4s}
.fcard.is-focus{box-shadow:0 0 0 1px rgba(245,241,232,.18),0 30px 80px -26px rgba(0,0,0,.95),0 0 60px -10px rgba(226,174,85,.22)}
.fcard.is-focus .flen{opacity:1}
.fcard:focus-visible{box-shadow:0 0 0 2px var(--gold),0 30px 80px -26px rgba(0,0,0,.95)}
.light{position:absolute;left:0;top:0;z-index:2;width:min(1000px,120vw);aspect-ratio:1;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(closest-side,rgba(255,224,170,.20),rgba(226,174,85,.10) 38%,rgba(226,174,85,.03) 62%,transparent 100%)}
.disc .find{position:absolute;z-index:6;left:var(--gut);top:clamp(88px,10vh,120px);max-width:min(640px,calc(100% - 2*var(--gut)))}
.disc .find-h{text-shadow:0 2px 30px rgba(0,0,0,.6)}
.find-x{color:var(--gold)}
.disc .find-form{max-width:none;background:linear-gradient(90deg,rgba(17,17,19,.72),rgba(17,17,19,.0));padding-right:8px}
.cap{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .6s ease;padding:4px 0}
.cap.on{opacity:1;pointer-events:auto}
.cap-thought{margin:0 0 14px;font-size:clamp(30px,3.6vw,52px);line-height:1.04;font-weight:500;letter-spacing:-.015em;color:var(--cream);text-shadow:0 2px 24px rgba(0,0,0,.75)}
.cap-thought[hidden]{display:none}
.cap-title{margin:0;font-size:clamp(19px,1.7vw,23px);line-height:1.3;font-weight:500;color:var(--cream);text-shadow:0 1px 16px rgba(0,0,0,.8)}
.cap-hook{margin:6px 0 0;font-size:16px;line-height:1.45;color:#bcae9a;max-width:34ch;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.cap-hook a{color:var(--cream)}
.cap-hook[hidden]{display:none}
.cap-watch{display:inline-block;margin-top:14px;padding:6px 0 5px;color:var(--cream);text-decoration:none;font-weight:500;font-size:15px;border-bottom:1px solid rgba(245,241,232,.4)}
.cap-watch::before{content:"▶";font-size:.7em;margin-right:9px;vertical-align:.12em}
.cap-watch:hover{border-bottom-color:var(--gold)}
.cap-more{display:block;margin-top:10px;font-size:14px;font-weight:500;letter-spacing:0;color:var(--meta,#8e887d)}
.disc-foot{position:absolute;z-index:6;left:var(--gut);right:var(--gut);bottom:clamp(18px,3vh,30px);display:flex;align-items:center;justify-content:space-between}
.disc-every{color:var(--cream);text-decoration:none;font-weight:500;font-size:16px;padding:10px 0 6px;border-bottom:1px solid rgba(245,241,232,.35);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.disc-every:hover{border-bottom-color:var(--gold)}
.disc-pause{width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,241,232,.16);background:rgba(11,12,14,.5);color:rgba(245,241,232,.6);cursor:pointer;display:grid;place-items:center}
.disc-pause:hover,.disc-pause:focus-visible{color:var(--cream);border-color:rgba(245,241,232,.4)}
.disc-pause svg{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.disc-noscript{position:absolute;left:var(--gut);bottom:80px;color:var(--muted)}
.lib .all{margin-top:clamp(48px,6vw,80px);border-top:0;padding-top:0}
.lib .all .facets{margin:0 0 26px}
@media (max-width:700px){
  .disc{height:max(640px,100svh)}
  .disc .find{top:84px}
  .cap-thought{font-size:30px;margin-bottom:8px}
  .cap-hook{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.fcard,.cap{transition:none}.disc-pause{display:none}}
.disc .find{width:min(620px,calc(100% - 2*var(--gut)))}
.fcard.is-match{box-shadow:0 0 0 1px rgba(245,241,232,.4),0 20px 50px -24px rgba(0,0,0,.9)}
.find-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.cap-and{color:var(--cream);font-size:16px;margin-top:14px}

/* ---- compressed stage (owner note: about half the height; the films keep their size) */
@media (min-width:701px){
  .disc{height:clamp(520px,58vh,580px)}
  .disc .find{top:78px}
  .disc .find-h{font-size:clamp(40px,5vw,64px)}
  .disc .find-form{margin-top:14px}
  .disc .find-input{font-size:clamp(19px,1.9vw,25px);padding-top:10px;padding-bottom:12px}
  .cap-thought{font-size:clamp(26px,2.6vw,38px);margin-bottom:10px}
  .cap-title{font-size:clamp(17px,1.4vw,20px)}
  .cap-hook{font-size:15px}
  .cap-watch{margin-top:10px}
  .disc-foot{left:auto;gap:18px;justify-content:flex-end;bottom:16px}
  .lib .all{margin-top:clamp(34px,4vw,52px)}
}

/* film page subtitle (e.g. #008: The Misconception Method), organizational tier */
.fp-sub{margin:.35rem 0 0;color:var(--org,#bcae9a);font-size:clamp(.95rem,1.4vw,1.1rem);letter-spacing:.02em}

/* homepage search (same search as /films/), arrives with the definition line during the intro */
.hero-v .hero-find{position:relative;width:min(560px,100%);margin:clamp(22px,3vw,34px) auto 0;z-index:3}
.hero-v .hero-find .find-input{font-size:clamp(18px,2vw,23px);text-align:left;background:rgba(11,12,14,.55);padding-left:14px;border-radius:2px 2px 0 0}
.hero-v .hero-find .find-go{bottom:4px}
.motion:not(.go) .hero-find{opacity:0}
.go .hero-find{animation:rise .8s 5.15s var(--ease) both}
.intro-done .hero-find{animation:none!important;opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.hero-find{animation:none!important;opacity:1!important}}