/* ==========================================================================
   /UNIVERSITY                                   ZeroRank University (ADR-22)
   Loaded after bl.css and media.css: the .zr-bl shell gives the hero, the wrap,
   the eyebrow pill, the dark pill and the card tokens (--bl-*); this sheet adds
   the section head, the lesson card with its chapter list, the four link cards
   and the closing strip. No new colours: every value below is a token from
   base.css / bl.css or a literal another sheet already uses (the #C9D6F2 hover
   hairline, the content.css icon-tile pairs, media.css's navy). The one brand
   colour is YouTube's red on the subscribe glyph.

     .zr-uni
       .zr-uni__hero      .zr-uni__cta  .zr-uni__facts
       .zr-uni__sec       .zr-uni__head ( eyebrow · .zr-uni__h2 · .zr-uni__sub )
         .zr-uni__grid    .zr-lesson ( --feat )
                            .zr-lesson__poster  ( img · __play · __len )
                            .zr-lesson__body    ( __meta · __h · __p )
                            .zr-lesson__chapters ( .zr-chap__head · ol.zr-chap · details.zr-chap__more )
         .zr-uni__more    a.zr-uni__link × 4
         .zr-uni__panel   the closing strip
   ========================================================================== */
.zr-uni{
  --uni-mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --uni-hover:#C9D6F2;                 /* the site's hover hairline (content.css, pp.css) */
}

/* ── hero: the .zr-bl hero plus a CTA row and the fact line ─────────────── */
.zr-uni__hero{ padding-bottom:clamp(28px, 3vw, 48px); }
.zr-uni__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:8px; }
.zr-uni__btn-ico{ flex:0 0 auto; width:18px; height:18px; }
.zr-uni__yt{ width:20px; height:20px; color:#FF0000; }

/* The white secondary button: pp.css's ghost (white face, hairline, a whisper
   of lift) spelt through .zr-btn's own knobs, so the states stay the component's. */
.zr-uni__ghost{
  --btn-face:#fff; --btn-face-hi:#FAFBFD; --btn-ink:var(--zr-ink);
  --btn-sheen:transparent; --btn-sheen-hi:transparent; --btn-press:rgba(15,23,42,.14);
  box-shadow:inset 0 0 0 1px #E4E9F0, 0 1px 2px rgba(0,0,0,.06);
}
.zr-uni__ghost:hover{ box-shadow:inset 0 0 0 1px var(--uni-hover), 0 1px 2px rgba(0,0,0,.06); }
.zr-uni__ghost:active{ box-shadow:inset 0 0 0 1px var(--uni-hover), inset 0 3px 8px var(--btn-press); }

.zr-uni__facts{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2px 0;
  margin:2px 0 0; padding:0; list-style:none;
  font-size:13.5px; line-height:20px; color:var(--zr-muted);
}
.zr-uni__facts li + li::before{ content:"·"; margin-inline:9px; color:var(--bl-dot); }

/* ── sections ───────────────────────────────────────────────────────────── */
.zr-uni__sec{ padding-block:clamp(40px, 4.6vw, 72px); }
.zr-uni__sec--first{ padding-top:clamp(20px, 2.4vw, 36px); }
.zr-uni__sec--last{ padding-bottom:clamp(56px, 6vw, 96px); }
.zr-uni__head{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  max-width:760px; margin:0 auto clamp(28px, 3.2vw, 44px);
}
/* pp.css's section h2, one step down: this page's h1 is the 48px .zr-bl one,
   not the 58px platform hero, and the heads keep the same ratio to it. */
.zr-uni__h2{
  margin:0; text-wrap:balance;
  font-size:clamp(26px, 3vw, 40px); font-weight:500; line-height:1.16; letter-spacing:-.03em;
  background:var(--zr-head-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.zr-uni__sub{ margin:0; max-width:640px; font-size:16px; line-height:26px; color:var(--zr-muted); text-wrap:pretty; }

/* ── the lesson card ──────────────────────────────────────────────────────
   One lesson per row: the poster beside the copy, the chapters underneath in
   two columns. Two-up cards were tried first and did not survive the data: a
   lesson without chapters left a hole beside one with forty, and the forty
   opened to 1,400px in a half-width card. bl.css's .zr-feat is the pattern. */
.zr-uni__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }

.zr-lesson{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); align-items:center;
  column-gap:clamp(24px, 2.6vw, 36px); min-width:0; padding:20px;
  background:#fff; border:1px solid var(--bl-hair); border-radius:22px;
  box-shadow:var(--bl-card-sh);
  scroll-margin-top:120px;            /* the floating nav */
  transition:border-color .18s var(--zr-ease-out-quad), box-shadow .18s var(--zr-ease-out-quad);
}
.zr-lesson:hover{ border-color:#D8E2F6; box-shadow:0 10px 22px -8px rgba(31,36,41,.10); }

/* the poster: a 16:9 link with the play disc and the length badge on it */
.zr-lesson__poster{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16 / 9; border-radius:14px; background:var(--bl-ph);
}
/* the thumbnails are pale at the edges; a hairline keeps them off the white card */
.zr-lesson__poster::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(31,36,41,.07);
}
.zr-lesson__poster img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:scale .5s var(--zr-ease-out-quart);
}
.zr-lesson__poster:hover img{ scale:1.025; }
/* The disc sits in the bottom-left corner, the mirror of the length badge, not in
   the middle: these thumbnails put a face or the headline dead centre, and a
   centred disc blanked it out (a white circle for a head on "YOU NEED BOTH"). */
.zr-lesson__play{
  position:absolute; left:10px; bottom:10px;
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--zr-ink);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(11,23,48,.24), 0 1px 2px rgba(11,23,48,.18);
  transition:scale .2s var(--zr-ease-out-quad), color .16s var(--zr-ease-out-quad), background .16s var(--zr-ease-out-quad);
}
.zr-lesson__play svg{ width:18px; height:18px; margin-left:2px; }
.zr-lesson__poster:hover .zr-lesson__play{ scale:1.06; background:#fff; color:var(--zr-blue); }
.zr-lesson__len{
  position:absolute; right:10px; bottom:10px; padding:3px 8px; border-radius:7px;
  background:rgba(12,20,38,.78); color:#fff;
  font-family:var(--uni-mono); font-size:12px; line-height:18px; font-variant-numeric:tabular-nums;
}

.zr-lesson__body{ display:flex; flex-direction:column; gap:10px; min-width:0; padding-right:8px; }
/* the pill and the "Lesson n of m · date" group are the only two things that can
   part company on a wrap, so a line never ends or starts on a stray dot */
.zr-lesson__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0;
  font-family:var(--uni-mono); font-size:12.5px; line-height:18px; color:var(--zr-muted);
}
.zr-lesson__when{ white-space:nowrap; }
.zr-lesson__dot{ margin-inline:3px; color:var(--bl-dot); }
.zr-lesson__h{
  margin:0; font-size:20px; font-weight:500; line-height:28px; letter-spacing:-.35px;
  color:var(--bl-ink); text-wrap:pretty;
}
.zr-lesson__h a{ color:inherit; text-decoration:none; transition:color .16s var(--zr-ease-out-quad); }
.zr-lesson__h a:hover{ color:var(--zr-blue); }
.zr-lesson__p{ margin:0; font-size:14.5px; line-height:22px; color:var(--bl-body); text-wrap:pretty; }

/* ── chapters: a numbered list of links, the tail behind a native <details> ─ */
.zr-lesson__chapters{ grid-column:1 / -1; margin:20px 2px 0; padding-top:16px; border-top:1px solid var(--bl-rule); }
.zr-chap__head{
  display:flex; justify-content:space-between; gap:12px; margin:0 0 6px;
  font-family:var(--uni-mono); font-size:11.5px; line-height:18px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--zr-muted);
}
/* Two columns, filled top to bottom, so the list still reads in order. A grid,
   not multicol: multicol's columns are independent flows, so one wrapped label
   knocked every row after it out of line with its neighbour and the balancing
   left orphans. Here a row is as tall as its taller cell and the halves are
   exact; the page sets --rows = ceil(n / 2) on each list. */
.zr-chap{
  display:grid; grid-auto-flow:column;
  grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(var(--rows, 4), auto);
  column-gap:clamp(24px, 2.8vw, 40px); margin:0; padding:0; list-style:none;
}
.zr-chap li{ min-width:0; }
.zr-chap__a{
  display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:baseline; column-gap:10px;
  min-height:40px; margin-inline:-10px; padding:9px 10px; border-radius:10px;
  font-size:14.5px; line-height:22px; color:var(--bl-ink); text-decoration:none;
  transition:background .16s var(--zr-ease-out-quad);
}
.zr-chap__a:hover{ background:#F5F7FB; }
/* --zr-muted (4.74:1), not --bl-dim (3.15:1): the ordinal is read, not decoration */
.zr-chap__n{ font-family:var(--uni-mono); font-size:12px; color:var(--zr-muted); font-variant-numeric:tabular-nums; }
/* on the hover tint --zr-muted drops to 4.42:1; --bl-body holds 7.29:1 */
.zr-chap__a:hover .zr-chap__n{ color:var(--bl-body); }
.zr-chap__l{ min-width:0; text-wrap:pretty; }
.zr-chap__t{ font-family:var(--uni-mono); font-size:12.5px; color:var(--zr-blue); font-variant-numeric:tabular-nums; white-space:nowrap; }

.zr-chap__more{ margin-top:8px; }
.zr-chap__more summary{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 16px; border:1px solid var(--bl-hair); border-radius:12px; background:#fff;
  font-size:14px; font-weight:500; line-height:20px; color:var(--bl-ink);
  cursor:pointer; list-style:none; -webkit-user-select:none; user-select:none;
  transition:border-color .16s var(--zr-ease-out-quad), background .16s var(--zr-ease-out-quad);
}
.zr-chap__more summary::-webkit-details-marker{ display:none; }
.zr-chap__more summary:hover{ border-color:var(--uni-hover); background:#FAFBFD; }
.zr-chap__more summary svg{ flex:0 0 auto; width:16px; height:16px; transition:rotate .2s var(--zr-ease-out-quad); }
.zr-chap__more[open] summary{ margin-bottom:8px; }
.zr-chap__more[open] summary svg{ rotate:180deg; }
.zr-chap__more-open,
.zr-chap__more[open] .zr-chap__more-closed{ display:none; }
.zr-chap__more[open] .zr-chap__more-open{ display:inline; }

/* ── the featured lesson: the same card at bl.css's .zr-feat scale ───────── */
.zr-lesson--feat{
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  column-gap:clamp(24px, 2.8vw, 40px); padding:24px; border-radius:24px;
  box-shadow:var(--bl-feat-sh);
}
.zr-lesson--feat:hover{ box-shadow:0 14px 30px -10px rgba(31,36,41,.13); }
.zr-lesson--feat .zr-lesson__poster{ border-radius:16px; }
.zr-lesson--feat .zr-lesson__play{ left:12px; bottom:12px; width:52px; height:52px; }
.zr-lesson--feat .zr-lesson__play svg{ width:22px; height:22px; }
.zr-lesson--feat .zr-lesson__len{ right:12px; bottom:12px; }
.zr-lesson--feat .zr-lesson__body{ gap:14px; }
.zr-lesson--feat .zr-lesson__h{ font-size:clamp(24px, 2.2vw, 32px); line-height:1.28; letter-spacing:-.028em; }
.zr-lesson--feat .zr-lesson__p{ font-size:16px; line-height:26px; }
.zr-lesson--feat .zr-lesson__chapters{ margin:24px 0 0; padding-top:18px; }

.zr-uni__note{ margin:clamp(24px, 2.6vw, 36px) 0 0; text-align:center; font-size:14.5px; line-height:22px; color:var(--zr-muted); }
.zr-uni__note a{ color:var(--zr-blue); text-decoration:none; white-space:nowrap; }
.zr-uni__note a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ── keep learning: content.css's .zr-tool card on this shell's tokens ──── */
.zr-uni__more{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.zr-uni__link{
  display:flex; flex-direction:column; gap:10px; min-width:0; padding:24px 22px 22px;
  background:#fff; border:1px solid var(--bl-hair); border-radius:18px; text-decoration:none;
  box-shadow:var(--bl-card-sh);
  transition:border-color .18s var(--zr-ease-out-quad), box-shadow .18s var(--zr-ease-out-quad);
}
.zr-uni__link:hover{ border-color:var(--uni-hover); box-shadow:0 16px 34px -16px rgba(16,49,110,.22); }
.zr-uni__link-ico{
  display:grid; place-items:center; width:40px; height:40px; margin-bottom:4px; border-radius:12px;
  background:var(--bg, #E8F0FE); color:var(--fg, var(--zr-blue));
}
.zr-uni__link-ico svg{ width:20px; height:20px; }
.zr-uni__link--green { --bg:#E6F7EE; --fg:#1C7A4F; }   /* the blog's education pill */
.zr-uni__link--violet{ --bg:#F0EBFF; --fg:#5B3FD9; }
.zr-uni__link--amber { --bg:#FFF3E0; --fg:#9A5B00; }
.zr-uni__link b{ font-size:17px; font-weight:500; line-height:1.3; color:var(--bl-ink); }
.zr-uni__link p{ flex:1 1 auto; margin:0; font-size:14px; line-height:22px; color:var(--zr-muted); text-wrap:pretty; }
.zr-uni__link-go{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:14px; font-weight:500; color:var(--zr-blue); }
.zr-uni__link-go svg{ width:16px; height:16px; transition:translate .2s var(--zr-ease); }
.zr-uni__link:hover .zr-uni__link-go svg{ translate:4px 0; }

/* ── closing strip: bl.css's .zr-news box with two buttons in place of the form ─ */
.zr-uni__panel{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px 48px;
  padding:40px 44px; background:#FBFCFE; border:1px solid var(--bl-hair); border-radius:24px;
}
.zr-uni__panel-copy{ display:flex; flex-direction:column; gap:10px; flex:1 1 380px; min-width:0; }
.zr-uni__panel-h{ margin:0; font-size:clamp(22px, 2vw, 28px); font-weight:500; line-height:1.29; letter-spacing:-.025em; color:var(--bl-ink); text-wrap:balance; }
.zr-uni__panel-p{ margin:0; max-width:560px; font-size:16px; line-height:24px; color:var(--bl-body); text-wrap:pretty; }
.zr-uni__panel-cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .zr-uni__more{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  /* the poster goes on top and the card narrows to a reading width */
  .zr-uni__grid{ width:min(680px, 100%); margin-inline:auto; }
  .zr-lesson,
  .zr-lesson--feat{ grid-template-columns:minmax(0,1fr); row-gap:18px; padding:16px; border-radius:22px; }
  .zr-lesson__poster,
  .zr-lesson--feat .zr-lesson__poster{ border-radius:12px; }
  .zr-lesson__body{ padding:0 6px; }
  .zr-lesson__chapters,
  .zr-lesson--feat .zr-lesson__chapters{ margin:2px 6px 6px; }
  /* the card is never wider than 680px from here down, and two 300px columns wrap
     nearly every label: one column of 44px rows, for a thumb */
  .zr-chap{ grid-auto-flow:row; grid-template-columns:minmax(0,1fr); grid-template-rows:none; }
  .zr-chap__a{ min-height:44px; padding-block:11px; }
  .zr-uni__panel{ padding:28px; }
}
@media (max-width:680px){
  .zr-lesson--feat .zr-lesson__play{ left:10px; bottom:10px; width:44px; height:44px; }
  .zr-lesson--feat .zr-lesson__play svg{ width:18px; height:18px; }
  .zr-lesson--feat .zr-lesson__len{ right:10px; bottom:10px; }
  .zr-lesson--feat .zr-lesson__h{ font-size:22px; line-height:29px; }
  .zr-lesson--feat .zr-lesson__p{ font-size:15px; line-height:24px; }
}
@media (max-width:620px){
  .zr-uni__more{ grid-template-columns:minmax(0,1fr); }
  .zr-uni__panel{ padding:24px 20px; }
  .zr-uni__panel-cta{ width:100%; }
  .zr-uni__panel-cta .zr-btn{ flex:1 1 100%; }
}
@media (max-width:480px){
  .zr-uni__cta{ flex-direction:column; align-items:stretch; width:min(320px, 100%); }
}

/* Without scripting nothing ever adds .is-in, and base.css holds [data-reveal]
   at opacity 0: the page is links all the way down and none of them would show.
   Scoped to this page; the same three declarations as base.css's reduced-motion
   rule. (JavaScript switched off only. A site.js that fails to load is not
   detectable from CSS; that one is base.css's to solve for the whole site.) */
@media (scripting:none){
  .zr-uni [data-reveal]{ opacity:1; translate:none; filter:none; }
}
/* Keyboard: Tab scrolls the focused link to the nearest edge, where its block can sit inside the observer's
   excluded bottom band (site.js: threshold .15, -8% bottom margin) and never get .is-in. Focus then lands on an
   invisible card. A block that holds the focus is shown, whatever the observer thinks. */
.zr-uni [data-reveal]:focus-within{ opacity:1; translate:none; filter:none; }
/* Shift+Tab scrolls the focused row to the top edge, which is where the sticky nav pill sits */
.zr-uni :is(a,summary):focus-visible{ scroll-margin-block:112px 24px; }

/* base.css already flattens every transition under reduced motion; the poster
   zoom and the play disc are the two moves here that should not happen at all */
@media (prefers-reduced-motion:reduce){
  .zr-lesson__poster:hover img,
  .zr-lesson__poster:hover .zr-lesson__play{ scale:none; }
  .zr-uni__link:hover .zr-uni__link-go svg{ translate:none; }
}