/* The Library prototype. Everything hangs off tokens.css (--jr-*).

   The idea: her pages stay light and quiet; the deep plum of the app is
   kept for the "windows" where something happens (the live card, the
   player, the theme tiles), so it reads as a doorway rather than a wall.
   Gold hairlines mark sections the way a book marks chapters. Mobile
   first; the two breakpoints come from the tokens. The theme's own
   stylesheet reaches into .entry-content (uppercase buttons, backgrounds
   on odd blocks), so the resets below are explicit. */

.jr-lib{font-family:var(--jr-font-body);color:var(--jr-color-ink);max-width:var(--jr-width-content);margin:0 auto;padding:0 var(--jr-space-4) var(--jr-space-16);line-height:var(--jr-leading-normal);font-size:var(--jr-size-md)}
.jr-lib *,.jr-lib *::before,.jr-lib *::after{box-sizing:border-box}
.jr-lib h1,.jr-lib h2,.jr-lib h3{font-family:var(--jr-font-display);color:var(--jr-color-ink);line-height:var(--jr-leading-tight);margin:0;letter-spacing:-.01em}
.jr-lib h1{font-size:var(--jr-size-2xl);font-weight:var(--jr-weight-bold)}
.jr-lib h2{font-size:var(--jr-size-xl);font-weight:var(--jr-weight-bold)}
.jr-lib h3{font-size:var(--jr-size-md);font-weight:var(--jr-weight-bold)}
.jr-lib p{margin:0 0 var(--jr-space-3)}
.jr-lib a{color:var(--jr-color-plum)}
.jr-lib img{display:block;max-width:100%}
.jr-lib button{font:inherit;text-transform:none;letter-spacing:0}
.jr-lib dl,.jr-lib dd,.jr-lib ol,.jr-lib ul{margin:0}
.jr-ph{background:radial-gradient(120% 90% at 20% 10%,var(--jr-color-violet),var(--jr-color-plum-deep) 70%)}
.jr-lede{font-size:var(--jr-size-lg);color:var(--jr-color-muted-strong);max-width:var(--jr-width-reading);line-height:var(--jr-leading-normal)}
.jr-eyebrow{display:inline-block;font-family:var(--jr-font-ui);font-size:var(--jr-size-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--jr-color-violet);margin-bottom:var(--jr-space-2)}
.jr-muted{color:var(--jr-color-muted);font-size:var(--jr-size-sm)}
.jr-small{font-size:var(--jr-size-sm);color:var(--jr-color-muted)}
.jr-empty{background:var(--jr-color-wash);border-radius:var(--jr-radius-md);padding:var(--jr-space-6);color:var(--jr-color-muted-strong)}

/* a soft reveal on load; nothing moves for people who asked for none */
@keyframes jr-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.jr-card,.jr-cat,.jr-lesson,.jr-call,.jr-sub,.jr-live-card,.jr-product,.jr-player{animation:jr-rise .5s cubic-bezier(.2,.7,.2,1) both}
.jr-grid>*:nth-child(2),.jr-cats>*:nth-child(2),.jr-lessons>*:nth-child(2),.jr-calls>*:nth-child(2){animation-delay:.05s}
.jr-grid>*:nth-child(3),.jr-cats>*:nth-child(3),.jr-lessons>*:nth-child(3),.jr-calls>*:nth-child(3){animation-delay:.1s}
.jr-grid>*:nth-child(4),.jr-cats>*:nth-child(4),.jr-lessons>*:nth-child(4),.jr-calls>*:nth-child(4){animation-delay:.15s}
.jr-grid>*:nth-child(n+5),.jr-cats>*:nth-child(n+5),.jr-lessons>*:nth-child(n+5),.jr-calls>*:nth-child(n+5){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){.jr-lib *{animation:none!important;transition:none!important}}

/* bar under the site header */
.jr-bar{display:flex;gap:var(--jr-space-5);align-items:center;padding:var(--jr-space-3) 0;border-bottom:1px solid var(--jr-color-line);margin-bottom:var(--jr-space-8);font-family:var(--jr-font-ui);font-size:var(--jr-size-sm);overflow-x:auto;scrollbar-width:none}
.jr-bar::-webkit-scrollbar{display:none}
.jr-bar a{text-decoration:none;color:var(--jr-color-muted-strong);white-space:nowrap;padding:var(--jr-space-1) 0;border-bottom:2px solid transparent}
.jr-bar a:hover{color:var(--jr-color-plum);border-bottom-color:var(--jr-color-gold)}
.jr-bar-brand{font-weight:var(--jr-weight-bold);color:var(--jr-color-plum)!important;font-size:var(--jr-size-md);display:inline-flex;align-items:center;gap:var(--jr-space-2)}
.jr-bar-brand::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--jr-color-gold);box-shadow:0 0 0 3px var(--jr-color-cream)}
.jr-bar-me{margin-left:auto;color:var(--jr-color-plum)!important;font-weight:var(--jr-weight-medium)}
.jr-lib-note{margin-top:var(--jr-space-12);padding:var(--jr-space-3) var(--jr-space-4);background:var(--jr-color-cream);border-left:3px solid var(--jr-color-gold);border-radius:var(--jr-radius-sm);font-size:var(--jr-size-xs);color:var(--jr-color-muted-strong)}

.jr-crumbs{font-family:var(--jr-font-ui);font-size:var(--jr-size-xs);color:var(--jr-color-muted);margin-bottom:var(--jr-space-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-crumbs a{text-decoration:none}
.jr-crumbs span{margin:0 var(--jr-space-2);color:var(--jr-color-gold)}
.jr-hero-row{margin:0 0 var(--jr-space-10)}
.jr-hero-row h1{margin-bottom:var(--jr-space-3)}
.jr-section{margin:0 0 var(--jr-space-12)}
.jr-section>h2,.jr-section-head{margin-bottom:var(--jr-space-5)}
.jr-section>h2::before,.jr-section-head h2::before{content:"";display:block;width:36px;height:2px;background:var(--jr-color-gold);margin-bottom:var(--jr-space-3);border-radius:2px}
.jr-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--jr-space-4)}
.jr-section-head a{font-family:var(--jr-font-ui);font-size:var(--jr-size-sm);text-decoration:none;font-weight:var(--jr-weight-medium);padding-bottom:2px;border-bottom:1px solid var(--jr-color-gold)}

/* theme tiles: the app's white line-art on a plum night, a gold ring on hover */
.jr-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--jr-space-3)}
.jr-cat{position:relative;display:block;aspect-ratio:5/4;border-radius:var(--jr-radius-card);overflow:hidden;text-decoration:none;color:var(--jr-color-on-plum);background:radial-gradient(110% 80% at 30% 0%,var(--jr-color-violet),var(--jr-color-plum-deep) 75%);box-shadow:var(--jr-shadow-card);transition:transform .2s,box-shadow .2s}
.jr-cat:hover{transform:translateY(-3px);box-shadow:var(--jr-shadow-raised)}
.jr-cat::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.14);border-radius:calc(var(--jr-radius-card) - 6px);transition:border-color .2s}
.jr-cat:hover::before{border-color:var(--jr-color-gold)}
.jr-cat-img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:center 40%;z-index:0;transition:transform .4s}
.jr-cat:hover .jr-cat-img{transform:scale(1.04)}
.jr-cat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(58,15,54,0) 45%,rgba(58,15,54,.55) 72%,rgba(58,15,54,.92))}
.jr-cat-name,.jr-cat-n{position:absolute;left:var(--jr-space-5);right:var(--jr-space-4);z-index:2;font-family:var(--jr-font-ui)}
.jr-lib a.jr-cat,.jr-lib .jr-cat-name{color:var(--jr-color-on-plum)}
.jr-cat-name{bottom:28px;font-size:var(--jr-size-lg);font-weight:var(--jr-weight-bold);line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.jr-cat-n{bottom:var(--jr-space-3);font-size:var(--jr-size-xs);color:var(--jr-color-gold);letter-spacing:.06em}
.jr-cats>.jr-cat:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:auto;min-height:150px}

/* the live card: a doorway into the night */
.jr-live-card{position:relative;display:block;margin:0 0 var(--jr-space-12);padding:var(--jr-space-8) var(--jr-space-6);border-radius:var(--jr-radius-card);overflow:hidden;background:radial-gradient(90% 120% at 100% 0%,rgba(165,228,226,.35),transparent 55%),radial-gradient(70% 90% at 0% 100%,rgba(237,180,95,.28),transparent 55%),linear-gradient(120deg,var(--jr-color-plum-deep),var(--jr-color-plum) 70%);color:var(--jr-color-on-plum);text-decoration:none;box-shadow:var(--jr-shadow-raised);transition:transform .2s}
.jr-live-card:hover{transform:translateY(-2px)}
.jr-live-card h2{color:var(--jr-color-on-plum);font-size:var(--jr-size-2xl);margin-bottom:var(--jr-space-2)}
.jr-live-card .jr-eyebrow{color:var(--jr-color-aqua);display:inline-flex;align-items:center;gap:var(--jr-space-2)}
.jr-live-card .jr-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--jr-color-aqua);box-shadow:0 0 0 0 rgba(165,228,226,.6);animation:jr-pulse 2.2s infinite}
@keyframes jr-pulse{0%{box-shadow:0 0 0 0 rgba(165,228,226,.55)}70%{box-shadow:0 0 0 10px rgba(165,228,226,0)}100%{box-shadow:0 0 0 0 rgba(165,228,226,0)}}
.jr-live-card p{color:var(--jr-color-on-plum-muted);margin:var(--jr-space-1) 0 0}
.jr-live-price{color:var(--jr-color-gold)!important;font-family:var(--jr-font-ui);font-weight:var(--jr-weight-medium);margin-top:var(--jr-space-3)!important}

/* product cards */
.jr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--jr-space-4)}
.jr-card{display:flex;flex-direction:column;background:var(--jr-color-white);border-radius:var(--jr-radius-card);overflow:hidden;box-shadow:var(--jr-shadow-card);text-decoration:none;color:var(--jr-color-ink);transition:transform .2s,box-shadow .2s}
.jr-card:hover{transform:translateY(-3px);box-shadow:var(--jr-shadow-raised)}
.jr-card-img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--jr-color-wash)}
.jr-card-body{padding:var(--jr-space-4) var(--jr-space-4) var(--jr-space-4);display:flex;flex-direction:column;gap:var(--jr-space-1);flex:1}
/* Titles take two lines' room whether they need one or two, so the
   meta line and the price sit at the same height on every card in a row. */
.jr-card-body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.15em)}
/* The theme paints a hover background on this row; never. */
.jr-lib .jr-buy,.jr-lib .jr-buy:hover{background:transparent!important}
.jr-card-sub{color:var(--jr-color-muted);font-size:var(--jr-size-xs);margin:0;font-family:var(--jr-font-ui)}
.jr-card-price{margin:var(--jr-space-3) 0 0;font-family:var(--jr-font-ui);font-weight:var(--jr-weight-bold);color:var(--jr-color-plum);display:flex;align-items:center;gap:var(--jr-space-2)}
.jr-card-price::before{content:"";flex:1;height:1px;background:var(--jr-color-line)}
.jr-owned{color:var(--jr-color-ok)}

/* product page */
.jr-product{display:grid;gap:var(--jr-space-6);margin:0 0 var(--jr-space-10)}
.jr-product-media{position:relative}
.jr-product-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--jr-radius-card);box-shadow:var(--jr-shadow-raised)}
.jr-product-media::after{content:"";position:absolute;left:14px;right:-10px;top:14px;bottom:-10px;border:1px solid var(--jr-color-gold);border-radius:var(--jr-radius-card);z-index:-1;opacity:.6}
.jr-product-main h1{margin-bottom:var(--jr-space-3)}
.jr-lock{display:inline-block;font-size:.5em;vertical-align:middle;opacity:.75;transform:translateY(-2px)}
.jr-details{display:grid;grid-template-columns:repeat(3,auto);gap:var(--jr-space-6);margin:var(--jr-space-5) 0;font-family:var(--jr-font-ui);padding:var(--jr-space-4) 0;border-top:1px solid var(--jr-color-line);border-bottom:1px solid var(--jr-color-line)}
.jr-details div{display:flex;flex-direction:column;gap:2px}
.jr-details dt{font-size:var(--jr-size-xs);color:var(--jr-color-muted);text-transform:uppercase;letter-spacing:.1em}
.jr-details dd{margin:0;font-size:var(--jr-size-sm);font-weight:var(--jr-weight-medium);color:var(--jr-color-ink)}
.jr-buy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--jr-space-3);margin-top:var(--jr-space-4);background:transparent;padding:0}
.jr-buy-hint{font-size:var(--jr-size-xs);color:var(--jr-color-muted);text-transform:none;letter-spacing:0;font-family:var(--jr-font-body)}
.jr-owned-line{margin:0;color:var(--jr-color-ok);font-weight:var(--jr-weight-medium);font-family:var(--jr-font-ui)}
.jr-btn{-webkit-appearance:none;appearance:none;-webkit-text-fill-color:currentColor;display:inline-block;font-family:var(--jr-font-ui);font-weight:var(--jr-weight-bold);font-size:var(--jr-size-sm);padding:var(--jr-space-3) var(--jr-space-6);border-radius:var(--jr-radius-pill);border:1.5px solid var(--jr-color-plum);background:var(--jr-color-white);color:var(--jr-color-plum);cursor:pointer;text-decoration:none;line-height:1.2;text-transform:none;letter-spacing:0;transition:background .15s,color .15s,transform .1s}
.jr-btn:hover{background:var(--jr-color-wash)}
.jr-btn:active{transform:scale(.98)}
.jr-btn-primary,.jr-btn-primary:hover,.jr-btn-primary:active,.jr-btn-primary:focus{color:var(--jr-color-on-plum)!important;-webkit-text-fill-color:var(--jr-color-on-plum)!important}
.jr-btn-primary{background:var(--jr-color-plum);box-shadow:0 6px 18px rgba(91,20,80,.28)}
.jr-btn-primary:hover{background:var(--jr-color-plum-deep)}
.jr-link{background:none;border:0;padding:0;color:var(--jr-color-plum);text-decoration:underline;text-decoration-color:var(--jr-color-gold);text-underline-offset:3px;cursor:pointer;font:inherit}

/* the curriculum: numbered days */
.jr-lessons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--jr-space-3);counter-reset:day}
.jr-lesson{counter-increment:day}
.jr-lesson a{position:relative;display:grid;grid-template-columns:64px 1fr auto;gap:var(--jr-space-4);align-items:center;padding:var(--jr-space-3) var(--jr-space-4) var(--jr-space-3) var(--jr-space-3);border-radius:var(--jr-radius-md);background:var(--jr-color-white);box-shadow:var(--jr-shadow-card);text-decoration:none;color:var(--jr-color-ink);transition:transform .15s,box-shadow .15s}
.jr-lesson a:hover{transform:translateX(3px);box-shadow:var(--jr-shadow-raised)}
.jr-lesson-img{width:64px;height:64px;object-fit:cover;border-radius:var(--jr-radius-sm)}
.jr-lesson a::before{content:counter(day,decimal-leading-zero);position:absolute;left:var(--jr-space-3);top:var(--jr-space-3);width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:var(--jr-radius-sm);font-family:var(--jr-font-ui);font-weight:var(--jr-weight-bold);font-size:var(--jr-size-lg);color:var(--jr-color-on-plum);background:linear-gradient(180deg,rgba(58,15,54,.15),rgba(58,15,54,.7));text-shadow:0 1px 6px rgba(0,0,0,.4);pointer-events:none}
.jr-lesson-body p{margin:var(--jr-space-1) 0 0;font-size:var(--jr-size-sm);color:var(--jr-color-muted)}
.jr-lesson-meta{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--jr-font-ui);font-size:var(--jr-size-xs);color:var(--jr-color-muted);gap:2px;white-space:nowrap}
.jr-lesson-kind{font-size:var(--jr-size-md);color:var(--jr-color-plum);line-height:1}
.jr-lesson-locked .jr-lesson-kind{opacity:.55}

/* lesson page and player */
.jr-lesson-page h1{margin-bottom:var(--jr-space-1)}
.jr-lesson-line{font-family:var(--jr-font-ui);color:var(--jr-color-muted);margin-bottom:var(--jr-space-5);font-size:var(--jr-size-sm)}
.jr-player{position:relative;border-radius:var(--jr-radius-card);overflow:hidden;background:var(--jr-color-plum-deep);box-shadow:var(--jr-shadow-raised);margin:0 0 var(--jr-space-8)}
.jr-player::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--jr-color-aqua),var(--jr-color-gold));opacity:.9}
.jr-player video{display:block;width:100%;max-height:70vh;background:#000}
.jr-player-poster{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.92}
.jr-player-audio audio{display:block;width:100%;padding:var(--jr-space-4);background:var(--jr-color-plum-deep)}
.jr-player-resume{position:absolute;top:var(--jr-space-3);left:var(--jr-space-3);margin:0;padding:var(--jr-space-1) var(--jr-space-3);background:rgba(0,0,0,.5);color:var(--jr-color-on-plum);border-radius:var(--jr-radius-pill);font-size:var(--jr-size-xs);font-family:var(--jr-font-ui)}
.jr-player-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--jr-space-6);background:radial-gradient(80% 80% at 50% 50%,rgba(58,15,54,.55),rgba(58,15,54,.85));color:var(--jr-color-on-plum)}
.jr-player-lock span{font-size:40px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.jr-player-lock p{color:var(--jr-color-on-plum-muted);font-family:var(--jr-font-ui)}
.jr-player-lock .jr-buy{justify-content:center}
.jr-player-lock .jr-buy-hint{color:var(--jr-color-on-plum-muted)}
.jr-player-lock .jr-btn-primary{background:var(--jr-color-gold);color:var(--jr-color-plum-deep);border-color:var(--jr-color-gold)}
.jr-prose{max-width:var(--jr-width-reading);font-size:var(--jr-size-md);line-height:var(--jr-leading-loose);color:var(--jr-color-muted-strong)}
.jr-prose p:first-child::first-letter{font-family:var(--jr-font-display);font-size:2.6em;line-height:.9;float:left;padding:6px 8px 0 0;color:var(--jr-color-plum)}
.jr-prevnext{display:flex;justify-content:space-between;gap:var(--jr-space-4);margin-top:var(--jr-space-10);padding-top:var(--jr-space-5);border-top:1px solid var(--jr-color-line);font-family:var(--jr-font-ui);font-size:var(--jr-size-sm)}
.jr-prevnext a{text-decoration:none;max-width:48%}

/* live calls */
.jr-subs{display:grid;gap:var(--jr-space-4);margin:0 0 var(--jr-space-12)}
.jr-sub{position:relative;padding:var(--jr-space-6);border-radius:var(--jr-radius-card);background:var(--jr-color-white);box-shadow:var(--jr-shadow-card);border:1.5px solid transparent;overflow:hidden}
.jr-sub::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--jr-color-gold)}
.jr-sub-on{border-color:var(--jr-color-ok)}
.jr-sub-single{background:var(--jr-color-cream);box-shadow:none}
.jr-sub-single::before{background:var(--jr-color-violet)}
.jr-sub-price{font-family:var(--jr-font-ui);font-size:var(--jr-size-2xl);font-weight:var(--jr-weight-bold);color:var(--jr-color-plum);margin:var(--jr-space-2) 0;letter-spacing:-.02em}
.jr-sub-price small{font-size:var(--jr-size-sm);font-weight:var(--jr-weight-regular);color:var(--jr-color-muted);letter-spacing:0}
.jr-plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--jr-space-4);margin:var(--jr-space-3) 0 var(--jr-space-3)}
.jr-plan{padding:var(--jr-space-4);border-radius:var(--jr-radius-md);background:var(--jr-color-wash);display:flex;flex-direction:column;gap:var(--jr-space-2)}
.jr-plan .jr-sub-price{margin:0;font-size:var(--jr-size-xl)}
.jr-plan-on{outline:2px solid var(--jr-color-ok);outline-offset:-2px}
.jr-plan-save{margin:0;font-size:var(--jr-size-xs);color:var(--jr-color-gold);font-family:var(--jr-font-ui)}
.jr-plan .jr-btn{align-self:flex-start;margin-top:auto}
@media (max-width:420px){.jr-plans{grid-template-columns:1fr}}
.jr-calls{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--jr-space-2)}
.jr-call{display:flex;align-items:center;justify-content:space-between;gap:var(--jr-space-4);padding:var(--jr-space-4) var(--jr-space-5);border-radius:var(--jr-radius-md);background:var(--jr-color-white);box-shadow:var(--jr-shadow-card);border-left:4px solid var(--jr-color-line)}
.jr-call-own{border-left-color:var(--jr-color-ok)}
.jr-call-when{display:flex;flex-direction:column;font-family:var(--jr-font-ui)}
.jr-call-when b{font-size:var(--jr-size-md)}
.jr-call-when span{font-size:var(--jr-size-xs);color:var(--jr-color-muted)}
.jr-call-act{display:flex;align-items:center;gap:var(--jr-space-2);white-space:nowrap}
.jr-calls-past .jr-call{background:var(--jr-color-wash);box-shadow:none;border-left-color:transparent}

/* account and sign-in */
.jr-box{padding:var(--jr-space-5) var(--jr-space-6);border-radius:var(--jr-radius-card);background:var(--jr-color-cream);border-left:4px solid var(--jr-color-gold);margin:0 0 var(--jr-space-10)}
.jr-auth{max-width:440px;margin:0 auto;padding:var(--jr-space-6) 0}
.jr-auth form{display:flex;flex-direction:column;gap:var(--jr-space-4);margin-top:var(--jr-space-5)}
.jr-auth label{display:flex;flex-direction:column;gap:var(--jr-space-2);font-family:var(--jr-font-ui);font-weight:var(--jr-weight-bold);font-size:var(--jr-size-sm)}
.jr-auth input{font-size:var(--jr-size-lg);padding:var(--jr-space-3) var(--jr-space-4);border:1.5px solid var(--jr-color-line);border-radius:var(--jr-radius-md);font-family:var(--jr-font-body);background:var(--jr-color-white)}
.jr-auth input:focus{outline:2px solid var(--jr-color-gold);outline-offset:2px;border-color:var(--jr-color-plum)}
.jr-auth .jr-btn{align-self:flex-start}
.jr-links{margin:var(--jr-space-4) 0;padding-left:1.2em;line-height:2}

@media (min-width:768px){
  .jr-lib{padding-left:var(--jr-space-6);padding-right:var(--jr-space-6)}
  .jr-lib h1{font-size:var(--jr-size-3xl)}
  .jr-cats{grid-template-columns:repeat(3,1fr)}
  .jr-cats>.jr-cat:last-child:nth-child(odd){grid-column:auto;aspect-ratio:5/4}
  .jr-grid{grid-template-columns:repeat(3,1fr)}
  .jr-product{grid-template-columns:5fr 7fr;align-items:start;gap:var(--jr-space-10)}
  .jr-subs{grid-template-columns:1fr 1fr}
  .jr-live-card{display:flex;align-items:center;justify-content:space-between;padding:var(--jr-space-10) var(--jr-space-8)}
  .jr-lesson a{grid-template-columns:80px 1fr auto}
  .jr-lesson-img,.jr-lesson a::before{width:80px;height:80px}
}
@media (min-width:1100px){
  .jr-cats{grid-template-columns:repeat(5,1fr)}
  .jr-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---- September 15 review ---- */
/* On phones the shell's 120px top padding left a hole under the band. */
@media (max-width:767px){
  .page_content_wrap:has(.jr-lib){padding-top:var(--jr-space-4)}
  .jr-bar{margin-bottom:var(--jr-space-5)}
}

/* sort control beside a listing's title */
.jr-hero-row-sort{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--jr-space-4)}
.jr-sort label{display:inline-flex;align-items:center;gap:var(--jr-space-2);font-family:var(--jr-font-ui);font-size:var(--jr-size-sm);color:var(--jr-color-muted-strong)}
.jr-sort select{font:inherit;font-family:var(--jr-font-ui);padding:var(--jr-space-2) var(--jr-space-3);border:1.5px solid var(--jr-color-line);border-radius:var(--jr-radius-pill);background:var(--jr-color-white);color:var(--jr-color-ink)}

/* previous / up next at the end of a lesson */
.jr-nextprev{display:grid;gap:var(--jr-space-3);margin-top:var(--jr-space-10);padding-top:var(--jr-space-6);border-top:1px solid var(--jr-color-line)}
.jr-np{position:relative;display:grid;grid-template-columns:56px 1fr auto;gap:var(--jr-space-3);align-items:center;padding:var(--jr-space-3) var(--jr-space-4) var(--jr-space-3) var(--jr-space-3);border-radius:var(--jr-radius-card);text-decoration:none;color:var(--jr-color-ink);background:var(--jr-color-white);box-shadow:var(--jr-shadow-card);transition:transform .2s,box-shadow .2s}
.jr-np:hover{transform:translateY(-2px);box-shadow:var(--jr-shadow-raised)}
.jr-np-img{width:56px;height:56px;object-fit:cover;border-radius:var(--jr-radius-sm)}
.jr-np-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.jr-np-body b{font-family:var(--jr-font-display);font-size:var(--jr-size-md);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-np-eyebrow{font-family:var(--jr-font-ui);font-size:var(--jr-size-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--jr-color-muted)}
.jr-np-meta{font-family:var(--jr-font-ui);font-size:var(--jr-size-xs);color:var(--jr-color-muted)}
.jr-np-arrow{font-size:var(--jr-size-xl);color:var(--jr-color-gold);transition:transform .2s}
.jr-np-next{background:linear-gradient(120deg,var(--jr-color-plum-deep),var(--jr-color-plum));color:var(--jr-color-on-plum);box-shadow:var(--jr-shadow-raised)}
.jr-lib a.jr-np-next{color:var(--jr-color-on-plum)}
.jr-np-next .jr-np-eyebrow,.jr-np-next .jr-np-meta{color:var(--jr-color-aqua)}
.jr-np-next:hover .jr-np-arrow{transform:translateX(4px)}
.jr-np-prev{grid-template-columns:auto 56px 1fr}
.jr-np-prev .jr-np-arrow{order:-1}
.jr-np-prev:hover .jr-np-arrow{transform:translateX(-4px)}
.jr-np-empty{grid-template-columns:1fr;background:var(--jr-color-wash);box-shadow:none;color:var(--jr-color-muted-strong)}
.jr-lib a.jr-np-empty{color:var(--jr-color-plum)}
@media (min-width:768px){.jr-nextprev{grid-template-columns:1fr 1.25fr}}

/* the two piles of recordings */
.jr-seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--jr-radius-pill);background:var(--jr-color-wash);margin:0 0 var(--jr-space-5)}
.jr-seg button{font-family:var(--jr-font-ui);font-weight:var(--jr-weight-bold);font-size:var(--jr-size-sm);padding:var(--jr-space-2) var(--jr-space-5);border:0;border-radius:var(--jr-radius-pill);background:transparent;color:var(--jr-color-muted-strong);cursor:pointer;display:inline-flex;align-items:center;gap:var(--jr-space-2)}
.jr-seg button[aria-selected=true]{background:var(--jr-color-plum);color:var(--jr-color-on-plum);box-shadow:0 4px 12px rgba(91,20,80,.25)}
.jr-seg-n{font-size:var(--jr-size-xs);padding:1px 8px;border-radius:var(--jr-radius-pill);background:rgba(91,20,80,.12);color:inherit}
.jr-seg button[aria-selected=true] .jr-seg-n{background:rgba(255,255,255,.2)}
.jr-sort{display:flex;align-items:center;gap:var(--jr-space-3);flex-wrap:wrap}
.jr-sort-label{font-family:var(--jr-font-ui);font-size:var(--jr-size-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--jr-color-muted)}
.jr-seg-sort{margin:0}
.jr-seg-sort button{padding:var(--jr-space-2) var(--jr-space-4);font-weight:var(--jr-weight-medium)}

/* the guide box above the bar, and its answer screen */
.jr-guide{display:flex;align-items:center;gap:var(--jr-space-2);margin:var(--jr-space-2) 0 var(--jr-space-4);padding:6px 6px 6px var(--jr-space-4);border-radius:var(--jr-radius-pill);background:var(--jr-color-white);border:1.5px solid var(--jr-color-line);box-shadow:var(--jr-shadow-card)}
.jr-guide:focus-within{border-color:var(--jr-color-plum);box-shadow:0 0 0 4px rgba(237,180,95,.25)}
.jr-guide-spark{color:var(--jr-color-gold);font-size:var(--jr-size-lg);line-height:1}
.jr-guide input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-family:var(--jr-font-body);font-size:var(--jr-size-md);color:var(--jr-color-ink);padding:var(--jr-space-2) 0;outline:none;-webkit-appearance:none;appearance:none}
.jr-guide input::placeholder{color:var(--jr-color-muted)}
.jr-guide .jr-btn{padding:var(--jr-space-2) var(--jr-space-5);flex:0 0 auto}
.jr-guide-answer{display:grid;grid-template-columns:44px 1fr;gap:var(--jr-space-4);align-items:start;margin:0 0 var(--jr-space-8);padding:var(--jr-space-5) var(--jr-space-6);border-radius:var(--jr-radius-card);background:var(--jr-color-cream);border-left:4px solid var(--jr-color-gold)}
.jr-guide-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--jr-color-plum-deep),var(--jr-color-violet));color:var(--jr-color-gold);font-size:var(--jr-size-lg);box-shadow:var(--jr-shadow-card)}
.jr-guide-lead{font-family:var(--jr-font-display);font-size:var(--jr-size-lg);color:var(--jr-color-ink);margin:0 0 var(--jr-space-2)}
.jr-guide-q{margin:0 0 var(--jr-space-3);color:var(--jr-color-muted-strong)}
.jr-chips{display:flex;flex-wrap:wrap;gap:var(--jr-space-2)}
.jr-chip{display:inline-block;padding:var(--jr-space-2) var(--jr-space-4);border-radius:var(--jr-radius-pill);border:1.5px solid var(--jr-color-plum);background:var(--jr-color-white);color:var(--jr-color-plum);font-family:var(--jr-font-ui);font-size:var(--jr-size-sm);font-weight:var(--jr-weight-medium);text-decoration:none}
.jr-chip-on,.jr-chip:hover{background:var(--jr-color-plum);color:var(--jr-color-on-plum)!important}
@media (max-width:767px){.jr-guide{padding-left:var(--jr-space-3)}.jr-guide .jr-btn{padding:var(--jr-space-2) var(--jr-space-4)}.jr-guide-answer{grid-template-columns:1fr}.jr-guide-avatar{display:none}}
/* The Ask button sits inside the rounded field and shares its curve; the
   theme's own form-button rules (square, uppercase) are overruled here. */
.jr-guide{padding:5px 5px 5px var(--jr-space-5);border-radius:var(--jr-radius-pill)}
.jr-guide .jr-btn,.jr-guide button[type=submit]{height:48px;min-width:96px;padding:0 var(--jr-space-6)!important;border-radius:var(--jr-radius-pill)!important;text-transform:none!important;letter-spacing:0!important;font-size:var(--jr-size-md)!important;font-family:var(--jr-font-ui)!important;box-shadow:none!important;line-height:48px!important;margin:0!important}
.jr-guide input{padding:var(--jr-space-3) 0;font-size:var(--jr-size-lg)}
@media (max-width:767px){.jr-guide .jr-btn,.jr-guide button[type=submit]{height:44px;min-width:76px;padding:0 var(--jr-space-4)!important;line-height:44px!important;font-size:var(--jr-size-sm)!important}.jr-guide input{font-size:var(--jr-size-md)}}

/* ---- real pages ---- */
.jr-zoom{display:flex;flex-wrap:wrap;gap:var(--jr-space-3);align-items:center;font-family:var(--jr-font-ui);font-size:var(--jr-size-sm);margin:var(--jr-space-2) 0 0}
.jr-zoom code{padding:2px 8px;border-radius:var(--jr-radius-sm);background:var(--jr-color-wash)}
.jr-checkout{max-width:560px;margin:0 auto;padding:var(--jr-space-8) 0;text-align:center}
.jr-checkout .jr-btn{margin-top:var(--jr-space-4)}
/* On the real pages the segmented controls are links, not buttons. */
.jr-seg a.jr-seg-a{font-family:var(--jr-font-ui);font-weight:var(--jr-weight-bold);font-size:var(--jr-size-sm);padding:var(--jr-space-2) var(--jr-space-5);border-radius:var(--jr-radius-pill);background:transparent;color:var(--jr-color-muted-strong);text-decoration:none;display:inline-flex;align-items:center;gap:var(--jr-space-2)}
.jr-seg a.jr-seg-a[aria-selected=true]{background:var(--jr-color-plum);color:var(--jr-color-on-plum);box-shadow:0 4px 12px rgba(91,20,80,.25)}
.jr-seg-sort a.jr-seg-a{padding:var(--jr-space-2) var(--jr-space-4);font-weight:var(--jr-weight-medium)}

.jr-checkout-note{background:var(--jr-color-wash);border-radius:var(--jr-radius-md);padding:var(--jr-space-4) var(--jr-space-5);margin:0 0 var(--jr-space-5)}
.jr-checkout-form{margin:var(--jr-space-5) 0 var(--jr-space-3)}
.jr-btn-pay{font-size:1.15rem;padding:.9rem 2rem}