/* ═══════════════════════════════════════════════════════════════════════════
   ns-videos.css — the free lecture library (/videos)

   Loaded only on this page: Home::video() and Home::videos() set
   $ns_page = 'videos', and head.php turns that into this one <link>.

   The idea behind the layout
   --------------------------
   The page answers one question — "what should I watch?" — so it is built as
   four colour-coded shelves rather than one long file list. A visitor scans
   four series, not forty-five file names. Everything else supports that:

     * a dark cinema band at the top, so the page announces itself as the place
       where you watch (every other page on the site is light);
     * one accent colour per series, carried through its card, its shelf rule,
       its chips and its cards' hover glow, so a lecture always tells you which
       series it belongs to without reading a word;
     * a "Start here" ribbon on the first lecture of every shelf, which is the
       literal answer to the question;
     * a watched tick, remembered in the browser, so on the second visit the
       page shows what is left rather than what exists.

   Nothing plays until it is asked to: a card is a still image plus a play
   glyph, and the YouTube frame is built on click, inside a native <dialog>.

   Everything is scoped under `.ns-theme .vlib` so no rule here can reach
   another page. Tokens (--blue-2, --gold-fill, --shell …) come from
   ns-theme.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* label text that only the screen reader needs */
.ns-theme .vlib .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.ns-theme .vlib{
  --v-ink:#07142B;
  --v-ink-2:#0C2247;
  --v-shelf-gap:clamp(48px,6vw,84px);
  --v-card-r:16px;
  --v-nav:118px;          /* the site's fixed header - what the bar sticks under */
}
@media (max-width:640px){ .ns-theme .vlib{--v-nav:90px} }

/* ---------------------------------------------------------------------------
   1. CINEMA BAND
   The one dark surface on the site. Deep navy with a slow radial wash so it
   reads as a room with the lights down, not a flat block of colour.
   --------------------------------------------------------------------------- */
/* The sections on this page also carry the theme's own .phero / .pagesec class.
   That is deliberate, not decoration: ns-account.css flattens the top padding of
   every bare <section> under body.ns-theme and exempts the theme's own section
   classes by name, with a selector far too specific to out-weigh. Wearing the
   exempt class is the intended way through — and because this sheet is the last
   one head.php loads, the rules below quietly replace what .phero/.pagesec set. */
.ns-theme .vhero{
  position:relative;
  overflow:hidden;
  border-bottom:0;
  background:
    radial-gradient(1100px 620px at 12% -10%,rgba(44,99,181,.42),transparent 60%),
    radial-gradient(900px 560px at 88% 8%,rgba(217,180,92,.20),transparent 62%),
    linear-gradient(168deg,var(--v-ink-2) 0%,var(--v-ink) 62%,#050E1E 100%);
  color:#EAF1FA;
  /* the site header is fixed and 110px tall, so the band starts under it -
     the same 118px the light .phero on every other page uses */
  padding-block:118px clamp(48px,7vw,92px);
}
@media (max-width:640px){
  .ns-theme .vhero{padding-block:94px 40px}
}
/* a faint grid, like light through a projector - decoration only */
.ns-theme .vhero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(70% 62% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 62% at 50% 0%,#000 30%,transparent 78%);
}
.ns-theme .vhero > .shell{position:relative;z-index:1}

.ns-theme .vhero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
@media (max-width:980px){
  .ns-theme .vhero__grid{grid-template-columns:1fr;gap:34px}
}

.ns-theme .vhero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 18px;padding:7px 14px;
  border:1px solid rgba(243,223,168,.34);
  border-radius:999px;
  background:rgba(243,223,168,.08);
  font-family:var(--label);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#F3DFA8;
}
.ns-theme .vhero__eyebrow i{
  width:7px;height:7px;border-radius:50%;background:#7BE0A8;
  box-shadow:0 0 0 4px rgba(123,224,168,.18);
}
.ns-theme .vhero h1{
  font-family:var(--display);
  font-size:clamp(34px,4.6vw,60px);
  line-height:1.04;font-weight:700;letter-spacing:-.015em;
  margin:0 0 16px;color:#fff;
}
.ns-theme .vhero h1 em{
  font-style:italic;
  background:linear-gradient(120deg,#F6E7BC,#D9B45C 52%,#EBCF86);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ns-theme .vhero__lede{
  max-width:56ch;margin:0 0 26px;
  font-size:clamp(14.5px,1.25vw,17px);line-height:1.62;
  color:rgba(234,241,250,.80);
}
.ns-theme .vhero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.ns-theme .vhero__cta .btn{border:0}
.ns-theme .vhero__cta .vbtn-ghost{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:999px;
  border:1px solid rgba(234,241,250,.26);
  background:rgba(255,255,255,.04);
  color:#EAF1FA;font-family:var(--label);font-size:14px;font-weight:600;
  text-decoration:none;transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.ns-theme .vhero__cta .vbtn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(234,241,250,.45);transform:translateY(-2px)}

/* the three numbers, set in the numeric face so they read as facts */
.ns-theme .vstats{display:flex;flex-wrap:wrap;gap:10px}
.ns-theme .vstats div{
  flex:1 1 130px;min-width:0;
  padding:13px 16px;border-radius:14px;
  border:1px solid rgba(234,241,250,.14);
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
}
.ns-theme .vstats b{
  display:block;font-family:var(--num);font-size:clamp(20px,2.3vw,28px);
  font-weight:700;line-height:1;color:#fff;letter-spacing:-.02em;
}
.ns-theme .vstats span{
  display:block;margin-top:5px;font-family:var(--label);
  font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(234,241,250,.62);
}

/* --- the tilted stack: three real stills, so the page shows its own goods --- */
.ns-theme .vstack{
  position:relative;
  aspect-ratio:16/11;
  perspective:1200px;
}
.ns-theme .vstack figure{
  position:absolute;inset:0;margin:0;
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -36px rgba(0,0,0,.85);
  transition:transform .5s var(--ease);
}
.ns-theme .vstack img{width:100%;height:100%;object-fit:cover;display:block}
.ns-theme .vstack figure:nth-child(1){transform:translate3d(-9%,9%,0) rotate(-7deg) scale(.86);filter:saturate(.75) brightness(.7)}
.ns-theme .vstack figure:nth-child(2){transform:translate3d(6%,-5%,0) rotate(5deg) scale(.88);filter:saturate(.85) brightness(.82)}
.ns-theme .vstack figure:nth-child(3){transform:translate3d(0,0,0) rotate(-1.5deg)}
.ns-theme .vstack:hover figure:nth-child(1){transform:translate3d(-13%,11%,0) rotate(-9deg) scale(.86)}
.ns-theme .vstack:hover figure:nth-child(3){transform:translate3d(0,-4px,0) rotate(-1.5deg) scale(1.02)}
.ns-theme .vstack__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--gold-fill);color:#241A05;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7);
  z-index:2;pointer-events:none;
}
.ns-theme .vstack__play svg{width:26px;height:26px;margin-left:3px}
@media (max-width:980px){
  /* width:100% matters: an auto inline-margin makes a grid item shrink to its
     content, and every frame in here is absolutely positioned - so without it
     the stack measures zero and disappears. */
  .ns-theme .vstack{width:100%;max-width:480px;margin-inline:auto}
}

/* The shared site header is dark text on a transparent bar, which is right on
   every other page and invisible over this one's dark band. The class is put on
   <body> by ns-videos.js only while the band is actually behind the header, and
   only on this page — nothing here can reach another screen. */
body.vlib-navdark header.nav .nav__links a,
body.vlib-navdark header.nav .nav__links a span,
body.vlib-navdark header.nav .ghostlink,
body.vlib-navdark header.nav .ghostlink span,
body.vlib-navdark header.nav .nsc{
  color:#EAF1FA;
  transition:color .25s var(--ease);
}
body.vlib-navdark header.nav .nav__links a:hover,
body.vlib-navdark header.nav .nav__links a:hover span,
body.vlib-navdark header.nav .nav__links a.is-active,
body.vlib-navdark header.nav .nav__links a.is-active span{color:#F3DFA8}
body.vlib-navdark header.nav .nsc{border-color:rgba(234,241,250,.3)}

/* ---------------------------------------------------------------------------
   2. SERIES CHOOSER
   Four big, unmistakable doors. This is the page's main navigation: the
   visitor picks a track here before ever looking at an individual lecture.
   --------------------------------------------------------------------------- */
.ns-theme .vlib__sec{padding-block:clamp(40px,5vw,72px);background:var(--paper-3)}
/* the shelves continue the section above them, so no rule between the two */
.ns-theme .vlib__sec--join{padding-top:0;border-top:0}
.ns-theme .vlib__sec + .vlib__sec{border-top:0}
.ns-theme .vsec-head{margin-bottom:26px}
.ns-theme .vsec-head h2{
  font-family:var(--display);font-size:clamp(23px,2.6vw,33px);
  font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0 0 7px;
}
.ns-theme .vsec-head p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:62ch}

.ns-theme .vtracks{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
}
.ns-theme .vtrack{
  --a:var(--blue-2);
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.ns-theme .vtrack:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--a) 42%,var(--line))}
.ns-theme .vtrack:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.ns-theme .vtrack__top{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper-3)}
.ns-theme .vtrack__top img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);
}
.ns-theme .vtrack:hover .vtrack__top img{transform:scale(1.05)}
.ns-theme .vtrack__top::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--a) 82%,#000) 100%);
}
/* The floor under the cover. It is always in the markup, so a cover that is
   missing or fails to load leaves a branded tile rather than a hole. */
.ns-theme .vtrack__mono{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--a) 88%,#fff),color-mix(in srgb,var(--a) 62%,#000));
  font-family:var(--display);font-size:44px;font-weight:700;color:rgba(255,255,255,.9);
}
.ns-theme .vtrack__n{
  position:absolute;left:14px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.94);
  font-family:var(--num);font-size:12px;font-weight:700;color:var(--a);
}
.ns-theme .vtrack__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.ns-theme .vtrack__body h3{
  margin:0 0 7px;font-size:16px;font-weight:700;line-height:1.34;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ns-theme .vtrack__body p{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--muted);flex:1}
.ns-theme .vtrack__go{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--label);font-size:13px;font-weight:700;color:var(--a);
}
.ns-theme .vtrack__go svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.ns-theme .vtrack:hover .vtrack__go svg{transform:translateX(4px)}

/* ---------------------------------------------------------------------------
   3. THE BAR — search, series filter, and "hide what I have seen"
   Sticks under the site header so the controls are never scrolled away from.
   --------------------------------------------------------------------------- */
.ns-theme .vbar{
  /* sticks just below the site's own fixed header rather than under it */
  position:sticky;top:var(--v-nav,118px);z-index:20;
  margin-bottom:8px;padding:14px;
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid var(--line);
  box-shadow:0 14px 32px -26px rgba(12,31,61,.5);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.ns-theme .vsearch{position:relative;flex:1 1 260px;min-width:0}
.ns-theme .vsearch svg{
  position:absolute;left:14px;top:50%;translate:0 -50%;
  width:17px;height:17px;color:var(--faint);pointer-events:none;
}
.ns-theme .vsearch input{
  width:100%;height:46px;padding:0 14px 0 40px;
  border:1.5px solid var(--line-2);border-radius:12px;
  background:var(--surface);
  font-family:var(--body);font-size:14.5px;color:var(--text);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ns-theme .vsearch input::placeholder{color:var(--faint)}
.ns-theme .vsearch input:focus{
  outline:0;border-color:var(--blue-1);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue-1) 16%,transparent);
}

.ns-theme .vchips{display:flex;flex-wrap:wrap;gap:8px}
.ns-theme .vchip{
  --a:var(--blue-2);
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;
  border:1.5px solid var(--line-2);background:var(--surface);
  font-family:var(--label);font-size:13px;font-weight:600;color:var(--muted);
  cursor:pointer;transition:.2s var(--ease);
}
.ns-theme .vchip i{width:8px;height:8px;border-radius:50%;background:var(--a);flex:none}
.ns-theme .vchip:hover{border-color:var(--a);color:var(--text)}
.ns-theme .vchip[aria-pressed="true"]{
  background:var(--a);border-color:var(--a);color:#fff;
  box-shadow:0 10px 24px -14px color-mix(in srgb,var(--a) 90%,#000);
}
.ns-theme .vchip[aria-pressed="true"] i{background:rgba(255,255,255,.9)}
.ns-theme .vchip b{font-family:var(--num);font-size:11.5px;opacity:.75;font-weight:700}

/* the toggle is a real checkbox, restyled - keyboard and screen readers get it free */
.ns-theme .vtoggle{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:9px 15px;border-radius:999px;
  border:1.5px solid var(--line-2);background:var(--surface);
  font-family:var(--label);font-size:13px;font-weight:600;color:var(--muted);
  transition:.2s var(--ease);user-select:none;
}
.ns-theme .vtoggle:hover{border-color:var(--mint);color:var(--text)}
.ns-theme .vtoggle input{position:absolute;opacity:0;width:0;height:0}
.ns-theme .vtoggle span.box{
  position:relative;width:34px;height:19px;border-radius:999px;
  background:var(--line-2);flex:none;transition:background .22s var(--ease);
}
.ns-theme .vtoggle span.box::after{
  content:"";position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:translate .22s var(--ease);
}
.ns-theme .vtoggle:has(input:checked){border-color:var(--mint);color:var(--text)}
.ns-theme .vtoggle:has(input:checked) span.box{background:var(--mint)}
.ns-theme .vtoggle:has(input:checked) span.box::after{translate:15px 0}
.ns-theme .vtoggle:has(input:focus-visible){outline:3px solid var(--blue-1);outline-offset:2px}

.ns-theme .vcount{
  margin-left:auto;font-family:var(--num);font-size:12.5px;font-weight:600;color:var(--faint);
  white-space:nowrap;
}
.ns-theme .vcount b{color:var(--text)}

/* ---------------------------------------------------------------------------
   4. SHELVES
   One per series. The rule and the number carry the series colour, so you can
   tell where you are on the page from the corner of your eye.
   --------------------------------------------------------------------------- */
.ns-theme .vshelf{
  --a:var(--blue-2);
  margin-top:var(--v-shelf-gap);
  /* clear the fixed header AND the sticky bar when a chip jumps to this shelf */
  scroll-margin-top:calc(var(--v-nav) + 86px);
  /* long page, four heavy grids - let the browser skip the ones off screen */
  content-visibility:auto;
  contain-intrinsic-size:auto 640px;
}
.ns-theme .vshelf:first-of-type{margin-top:34px}
.ns-theme .vshelf__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;
  padding-bottom:14px;margin-bottom:22px;
  border-bottom:2px solid color-mix(in srgb,var(--a) 22%,transparent);
}
.ns-theme .vshelf__i{
  font-family:var(--num);font-size:13px;font-weight:800;letter-spacing:.1em;
  color:var(--a);padding:5px 11px;border-radius:8px;
  background:color-mix(in srgb,var(--a) 11%,transparent);
}
.ns-theme .vshelf__t{flex:1 1 320px;min-width:0}
.ns-theme .vshelf__t h2{
  margin:0 0 4px;font-family:var(--display);
  font-size:clamp(19px,2.1vw,27px);font-weight:700;line-height:1.2;color:var(--text);
}
.ns-theme .vshelf__t p{margin:0;font-size:13px;color:var(--muted)}
.ns-theme .vshelf__start{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 17px;border-radius:999px;
  background:var(--a);color:#fff;text-decoration:none;
  font-family:var(--label);font-size:13px;font-weight:700;
  box-shadow:0 12px 28px -16px color-mix(in srgb,var(--a) 95%,#000);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.ns-theme .vshelf__start:hover{transform:translateY(-2px);box-shadow:0 18px 36px -16px color-mix(in srgb,var(--a) 95%,#000)}
.ns-theme .vshelf__start svg{width:15px;height:15px}

.ns-theme .vgrid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}

/* ---------------------------------------------------------------------------
   5. LECTURE CARD
   A still, an index, a title and its exam chips. The card is a real link to
   YouTube, so it works without JavaScript and survives a middle click; the
   script upgrades it to the in-page player.
   --------------------------------------------------------------------------- */
.ns-theme .vcard{
  --a:var(--blue-2);
  container-type:inline-size;
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--v-card-r);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.ns-theme .vcard:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--a) 45%,var(--line));
  box-shadow:0 26px 52px -28px color-mix(in srgb,var(--a) 80%,#000),var(--sh-sm);
}
.ns-theme .vcard:focus-visible{outline:3px solid var(--a);outline-offset:3px}

.ns-theme .vcard__shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-900)}
.ns-theme .vcard__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease),filter .3s var(--ease);
}
.ns-theme .vcard:hover .vcard__shot img{transform:scale(1.06)}
.ns-theme .vcard__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,20,43,.42) 0%,transparent 34%,transparent 58%,rgba(7,20,43,.72) 100%);
}
/* play glyph: hidden until hover on a pointer device, always on for touch */
.ns-theme .vcard__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:var(--a);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
  opacity:0;scale:.82;transition:opacity .25s var(--ease),scale .25s var(--ease);
}
.ns-theme .vcard__play svg{width:20px;height:20px;margin-left:2px}
.ns-theme .vcard:hover .vcard__play,
.ns-theme .vcard:focus-visible .vcard__play{opacity:1;scale:1}
@media (hover:none){
  .ns-theme .vcard__play{opacity:1;scale:1;width:46px;height:46px}
}
.ns-theme .vcard__idx{
  position:absolute;left:11px;top:10px;z-index:2;
  font-family:var(--num);font-size:11.5px;font-weight:800;letter-spacing:.06em;
  padding:4px 9px;border-radius:7px;
  background:rgba(7,20,43,.62);color:#fff;backdrop-filter:blur(6px);
}
/* "Start here" - the direct answer to "what do I watch first?" */
.ns-theme .vcard__first{
  position:absolute;right:0;top:12px;z-index:2;
  padding:5px 12px 5px 11px;border-radius:8px 0 0 8px;
  background:var(--gold-fill);color:#241A05;
  font-family:var(--label);font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 8px 20px -10px rgba(122,90,18,.9);
}
.ns-theme .vcard__seen{
  position:absolute;right:10px;bottom:10px;z-index:2;
  display:none;align-items:center;gap:5px;
  padding:4px 9px;border-radius:999px;
  background:rgba(15,122,82,.94);color:#fff;
  font-family:var(--label);font-size:10.5px;font-weight:700;letter-spacing:.05em;
}
.ns-theme .vcard__seen svg{width:11px;height:11px}
.ns-theme .vcard.is-seen .vcard__seen{display:inline-flex}
.ns-theme .vcard.is-seen .vcard__shot img{filter:saturate(.55) brightness(.82)}
.ns-theme .vcard.is-seen .vcard__first{display:none}

.ns-theme .vcard__body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
.ns-theme .vcard__body h3{
  margin:0;font-size:14.5px;font-weight:700;line-height:1.4;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ns-theme .vcard__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.ns-theme .vtag{
  font-family:var(--label);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:3px 8px;border-radius:6px;
  background:color-mix(in srgb,var(--a) 10%,transparent);
  color:color-mix(in srgb,var(--a) 82%,#000);
}
.ns-theme .vtag--note{background:var(--cream);color:var(--gold-3)}

/* the card gets roomier type once it has the width for it */
@container (min-width:300px){
  .ns-theme .vcard__body h3{font-size:15.5px}
  .ns-theme .vcard__body{padding:15px 16px 17px}
}

/* ---------------------------------------------------------------------------
   6. EMPTY STATE + CLOSING CALL
   --------------------------------------------------------------------------- */
.ns-theme .vempty{
  display:none;padding:54px 24px;text-align:center;
  border:1.5px dashed var(--line-2);border-radius:var(--r-lg);
  background:var(--surface-2);margin-top:26px;
}
.ns-theme .vempty b{display:block;font-family:var(--display);font-size:20px;color:var(--text);margin-bottom:7px}
.ns-theme .vempty p{margin:0 auto 16px;max-width:46ch;font-size:14px;color:var(--muted);line-height:1.6}
.ns-theme .vlib.is-empty .vempty{display:block}
.ns-theme .vlib.is-empty .vshelf{display:none}

.ns-theme .vclose{
  margin-top:clamp(52px,6vw,88px);
  border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(780px 380px at 88% 0%,rgba(217,180,92,.22),transparent 62%),
    linear-gradient(150deg,var(--v-ink-2),var(--v-ink));
  color:#EAF1FA;padding:clamp(28px,4vw,50px);
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
}
.ns-theme .vclose h2{
  margin:0 0 9px;font-family:var(--display);
  font-size:clamp(21px,2.5vw,31px);font-weight:700;color:#fff;line-height:1.2;
}
.ns-theme .vclose p{margin:0;max-width:56ch;font-size:14.5px;line-height:1.62;color:rgba(234,241,250,.78)}
.ns-theme .vclose__a{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------------------------------------------------------------------
   7. THE PLAYER
   Native <dialog>: the browser gives the focus trap, Esc, inertness behind it
   and the backdrop. The frame is built in JS on open and destroyed on close,
   so no YouTube request is made until a lecture is actually asked for.
   --------------------------------------------------------------------------- */
.ns-theme .vplay{
  width:min(1180px,94vw);max-width:none;
  /* the site's `* { margin:0 }` reset kills the auto margins a modal dialog is
     centred by, so put them back - without this it pins to the top-left */
  margin:auto;
  max-height:94vh;
  padding:0;border:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--v-ink);color:#EAF1FA;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.85);
}
.ns-theme .vplay::backdrop{background:rgba(4,11,24,.82);backdrop-filter:blur(7px)}
.ns-theme .vplay__frame{position:relative;aspect-ratio:16/9;background:#000}
.ns-theme .vplay__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ns-theme .vplay__foot{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  padding:16px clamp(16px,2.4vw,26px);
}
.ns-theme .vplay__meta{flex:1 1 300px;min-width:0}
.ns-theme .vplay__series{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:6px;
  font-family:var(--label);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#F3DFA8;
}
.ns-theme .vplay__series i{width:8px;height:8px;border-radius:50%;background:currentColor}
.ns-theme .vplay__meta h3{margin:0;font-size:17px;font-weight:700;line-height:1.35;color:#fff}
.ns-theme .vplay__nav{display:flex;gap:9px;flex-wrap:wrap}
.ns-theme .vplay__nav button,
.ns-theme .vplay__nav a{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;border-radius:999px;
  border:1px solid rgba(234,241,250,.24);
  background:rgba(255,255,255,.05);color:#EAF1FA;
  font-family:var(--label);font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:none;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.ns-theme .vplay__nav button:hover:not(:disabled),
.ns-theme .vplay__nav a:hover{background:rgba(255,255,255,.12);border-color:rgba(234,241,250,.44)}
.ns-theme .vplay__nav button:disabled{opacity:.35;cursor:not-allowed}
.ns-theme .vplay__nav svg{width:14px;height:14px}
.ns-theme .vplay__x{
  position:absolute;right:12px;top:12px;z-index:3;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:0;cursor:pointer;
  background:rgba(7,20,43,.72);color:#fff;backdrop-filter:blur(6px);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.ns-theme .vplay__x:hover{background:rgba(7,20,43,.95);transform:scale(1.07)}
.ns-theme .vplay__x svg{width:17px;height:17px}

/* ---------------------------------------------------------------------------
   8. MOTION + NARROW SCREENS
   --------------------------------------------------------------------------- */
@media (max-width:640px){
  .ns-theme .vbar{padding:12px;gap:10px}
  .ns-theme .vcount{margin-left:0;width:100%}
  .ns-theme .vgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px}
  .ns-theme .vshelf__start{width:100%;justify-content:center}
  .ns-theme .vplay__foot{padding:14px}
  .ns-theme .vplay__nav{width:100%}
  .ns-theme .vplay__nav button,.ns-theme .vplay__nav a{flex:1;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .ns-theme .vlib *,
  .ns-theme .vplay *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .ns-theme .vcard:hover{transform:none}
  .ns-theme .vtrack:hover{transform:none}
  .ns-theme .vstack figure,.ns-theme .vstack:hover figure{transition:none}
}