/* ═══════════════════════════════════════════════════════════════════════════
   ilmbee · The Teens stage                         (assets/js/teens.js)
   ───────────────────────────────────────────────────────────────────────────
   The kids library is a warm wooden bookcase; the teen series gets a night
   stage instead: a navy card on a cream band, one book square to you and lit
   by its own cover colour, the rest turned away into the dark. Every class
   starts with tn- (the site already has global .book / .cover rules).

   Only transform and opacity ever animate. All the gradients here are
   static paint; the coloured light changes by crossfading two layers.

   Contained exceptions to DESIGN.md, scoped to .tn-card and .tn-dlg only
   (recorded in DESIGN.md §4.6): lighting gradients beyond the three allowed
   in §3.2, the covers' true A5 shape (312:442) instead of 3:4, and the
   waitlist button turning gold inside the dialog, where it covers the
   header's gold CTA.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section + head ─────────────────────────────────────────────────────── */
.tn{
  position:relative;
  padding-block:clamp(72px,9vw,120px);
  background:var(--cream-100);
}
.tn__head{display:grid; gap:20px}
@media (min-width:1000px){
  /* Top-aligned: the eyebrow and the first line of the lead share a line. */
  .tn__head{grid-template-columns:1.1fr .9fr; column-gap:48px; align-items:start}
}
.tn__head .section-title{color:var(--navy-700)}
.tn__lead{margin-top:0; max-width:62ch; color:var(--navy-300)}
.tn__headAside .btn{margin-top:20px}
.js .tn__head[data-reveal="head"] > *{opacity:1; transform:none; transition:none}
.js .tn__head[data-reveal="head"] .eyebrow,
.js .tn__head[data-reveal="head"] .tn__lead{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .tn__head[data-reveal="head"] .tn__lead{transition-delay:.22s}
.js .tn__head[data-reveal="head"].is-in .eyebrow,
.js .tn__head[data-reveal="head"].is-in .tn__lead{opacity:1; transform:none}

/* ── The night card ─────────────────────────────────────────────────────── */
.tn-card{
  /* W is the middle book's width; every other size on the stage is a
     multiple of it, so the whole display scales as one object. The svh term
     keeps the card inside one screen on short laptops. */
  --tn-w:clamp(150px, 6vw + 150px, 236px);
  --tn-h:calc(var(--tn-w) * 1.4167);          /* 312:442, the covers' own shape */
  --tn-d:calc(var(--tn-w) * .085);            /* spine depth */
  --tn-top:calc(var(--tn-h) * .22);           /* headroom above the books */
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:48px;
  padding:24px 32px 28px;
  border-radius:var(--r-xl);
  background:var(--navy-900);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  color:var(--cream-50);
}
@supports (height:100svh){
  .tn-card{--tn-w:clamp(132px, min(6vw + 150px, (100svh - 380px) / 2), 236px)}
}
.tn-card__fallback{margin:0; padding:56px 0; text-align:center; color:rgba(255,255,255,.7)}

/* ── Stage ── */
.tn-stage{
  position:relative;
  height:calc(var(--tn-top) + var(--tn-h) * 1.12);
  margin-inline:-32px;                        /* bleeds to the card edge */
  touch-action:pan-y;                         /* horizontal drags are ours */
  overscroll-behavior-x:contain;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:grab;
}
.tn-card.is-dragging .tn-stage{cursor:grabbing}

.tn-stage__wall{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(calc(var(--tn-w) * 1.6) calc(var(--tn-h) * .9) at 50% calc(var(--tn-top) + var(--tn-h) * .45),
             rgba(253,251,245,.06), rgba(253,251,245,0) 70%);
}
.tn-stage__light,
.tn-dlg__light{
  position:absolute; left:50%;
  aspect-ratio:1 / .8;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
             rgb(var(--rgb, 214 175 87) / .34),
             rgb(var(--rgb, 214 175 87) / .1) 55%,
             rgb(var(--rgb, 214 175 87) / 0));
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
}
.tn-stage__light{top:calc(var(--tn-top) + var(--tn-h) * .55); width:calc(var(--tn-w) * 3.4)}
.tn-stage__light.is-on,
.tn-dlg__light.is-on{opacity:1}
.tn-card.is-lighting .tn-stage__light{will-change:opacity}

.tn-stage__num{
  position:absolute; left:0; right:0;
  top:calc(var(--tn-top) * .2);
  text-align:center;
  font:700 calc(var(--tn-h) * .92)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(227,197,121,.22);
}
.tn-stage__horizon{
  position:absolute; left:0; right:0; height:1px;
  top:calc(var(--tn-top) + var(--tn-h) * .86);
  background:linear-gradient(90deg, transparent, rgba(227,197,121,.16) 30%, rgba(227,197,121,.16) 70%, transparent);
}
.tn-stage__floor{                             /* the "gloss" floor, no reflections */
  position:absolute; left:0; right:0; bottom:0;
  top:calc(var(--tn-top) + var(--tn-h) * .86 + 1px);
  background:linear-gradient(180deg, rgba(253,251,245,.035), rgba(253,251,245,0) 60%);
}

/* No perspective property here (DESIGN §4.5): each slot carries
   perspective() in its own transform, and they all sit on the same point,
   so they share one vanishing point and z-index still orders them. */
.tn-stage__space{position:absolute; inset:0; z-index:1; pointer-events:none}
.tn-slot{
  position:absolute; left:50%;
  top:var(--tn-top);
  width:var(--tn-w); height:var(--tn-h);
  margin-left:calc(var(--tn-w) / -2);
  transform-style:preserve-3d;
  pointer-events:auto;
  cursor:pointer;
}
.tn-card.is-live .tn-slot{will-change:transform}
.tn-bk{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .24s cubic-bezier(.22,1,.36,1);
}
.tn-card.is-dragging .tn-bk,
.tn-card.is-scrubbing .tn-bk{transition:none}

.tn-bk__front,
.tn-hold__front{
  position:absolute; inset:0;
  border-radius:2px 4px 4px 2px;
  background:var(--c);
  overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.tn-bk__front{transform:translateZ(calc(var(--tn-d) / 2))}
.tn-bk__img,
.tn-hold__img{display:block; width:100%; height:100%; object-fit:cover}
.tn-bk__front::after,
.tn-hold__front::after{                       /* keyline, spine crease, sheen */
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.08) 3%, rgba(255,255,255,0) 9%),
    linear-gradient(112deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%);
  pointer-events:none;
}
.tn-bk__spine{
  position:absolute; top:0; bottom:0;
  left:calc(50% - var(--tn-d) / 2);
  width:var(--tn-d);
  transform:rotateY(-90deg) translateZ(calc(var(--tn-w) / 2));
  background:linear-gradient(90deg, rgba(255,255,255,.1), rgba(0,0,0,.22)), var(--c);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; justify-content:center;
  padding-top:12%;
}
.tn-bk__no{
  writing-mode:vertical-rl;
  font:700 calc(var(--tn-d) * .55)/1 var(--font-ui);
  letter-spacing:.06em;
  color:var(--ink);
}
.tn-bk__edge,
.tn-hold__edge{                               /* the page block */
  position:absolute; top:2px; bottom:2px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.05)),
    repeating-linear-gradient(90deg, #F3EBD8 0 1px, #E2D6BC 1px 2px);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.tn-bk__edge{
  left:calc(50% - var(--tn-d) / 2);
  width:var(--tn-d);
  transform:rotateY(90deg) translateZ(calc(var(--tn-w) / 2 - 1px));
}

/* A side book leans out of the row under a mouse. */
@media (hover:hover) and (pointer:fine){
  .tn-card:not(.is-dragging):not(.is-scrubbing) .tn-slot.is-l:hover .tn-bk{transform:translateZ(calc(var(--tn-w) * .08)) rotateY(-10deg)}
  .tn-card:not(.is-dragging):not(.is-scrubbing) .tn-slot.is-r:hover .tn-bk{transform:translateZ(calc(var(--tn-w) * .08)) rotateY(10deg)}
}

.tn-stage__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(calc(var(--tn-w) * 1.95) calc(var(--tn-h) * 1.4) at 50% calc(var(--tn-top) + var(--tn-h) * .5),
             rgba(11,18,41,0) 44%, rgba(11,18,41,.5) 62%, rgba(11,18,41,.9) 84%, #0B1229);
}

.tn-pick{
  position:absolute; left:50%; z-index:60;
  top:var(--tn-top);
  width:var(--tn-w); height:var(--tn-h);
  transform:translateX(-50%);
  padding:0; border:0; border-radius:4px;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tn-pick:focus-visible{outline:3px solid var(--gold-500); outline-offset:6px}

/* ── Caption ── */
.tn-now{position:relative; z-index:3; margin-top:8px; text-align:center}
.tn-now__nav{display:flex; align-items:center; justify-content:center; gap:16px}
.tn-step{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(227,197,121,.35);
  background:transparent;
  color:var(--cream-50);
  cursor:pointer;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.tn-step svg{width:16px; height:16px}
.tn-step:hover{border-color:var(--gold-400); background-color:rgba(255,255,255,.05)}
.tn-step:active{transform:scale(.94)}
.tn-step:focus-visible{outline:3px solid var(--gold-500); outline-offset:3px}
.tn-now__count{
  margin:0; min-width:5.5ch;
  font:700 .9375rem/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  color:rgba(255,255,255,.72);
}
.tn-now__count b{color:var(--cream-50)}
.tn-now__title{
  display:flex; align-items:center; justify-content:center;
  margin:10px auto 0;
  max-width:420px;
  height:2.1em;                               /* two lines, fixed: nothing below shifts */
  font:800 clamp(1.35rem, 1.1rem + .9vw, 1.8rem)/1.05 var(--font-display);
  color:var(--cream-50);
}
.tn-now__title > span{
  text-wrap:balance;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.tn-now__src{margin:6px 0 0; font-size:.875rem; color:rgba(255,255,255,.66)}

/* ── Scrubber: forty spines ── */
.tn-scrub{
  position:relative; z-index:3;
  max-width:880px; height:40px;
  margin:24px auto 0;
  border-radius:4px;
  touch-action:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tn-scrub:focus-visible{outline:3px solid var(--gold-500); outline-offset:6px}
.tn-scrub__bars{display:flex; gap:2px; height:100%}
.tn-scrub__bars i{
  flex:1 1 0; min-width:0;
  border-radius:2px;
  background:var(--c);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3);
  transform-origin:50% 100%;
  transition:transform .18s ease-out;
}
@media (hover:hover) and (pointer:fine){
  .tn-scrub__bars i:hover{transform:translateY(-4px) scaleY(1.12)}
}
.tn-scrub__thumb{
  position:absolute; left:-2px; top:-5px; bottom:-5px;
  width:calc(100% / 40 + 4px);
  border:2px solid var(--gold-400);
  border-radius:4px;
  pointer-events:none;
  will-change:transform;
}
.tn-scrub__tip{
  position:absolute; left:0; bottom:calc(100% + 10px);
  padding:6px 10px;
  border-radius:var(--r-pill);
  background:var(--cream-50);
  color:var(--navy-800);
  font:600 .8125rem/1.2 var(--font-ui);
  white-space:nowrap;
  max-width:calc(100% + 24px);
  overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
  opacity:0;
  translate:0 4px;
  transition:opacity .16s ease-out, translate .16s ease-out;
}
.tn-card.is-tip .tn-scrub__tip{opacity:1; translate:0 0}
.tn-card.is-tip-touch .tn-scrub__tip{bottom:calc(100% + 44px)}  /* clear of the finger */
.tn-scrub__ticks{
  position:relative;
  max-width:880px; height:1.2em;
  margin:8px auto 0;
  font:600 .75rem/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.5);
}
.tn-scrub__ticks span{position:absolute; top:0; transform:translateX(-50%)}
.tn-hint{margin:16px auto 0; max-width:52ch; text-align:center; font-size:.875rem; color:rgba(255,255,255,.62)}

/* ﷺ in Amiri, wherever a title renders */
.tn-saw{font-family:var(--font-ar); font-weight:700; font-size:.9em; line-height:1; unicode-bidi:isolate}

/* ── Tablet / phone ── */
@media (max-width:999px){
  .tn-card{padding:20px 24px 28px}
  .tn-stage{margin-inline:-24px}
}
@media (max-width:639px){
  .tn{padding-block:72px}
  .tn__headAside .btn{width:100%; height:52px}
  .tn-card{margin-top:32px; padding:16px 16px 24px; border-radius:var(--r-lg)}
  .tn-stage{margin-inline:-16px}
  .tn-scrub{height:32px}
  .tn-scrub__bars{gap:1px}
}

/* ═══ The dialog: pick it up ═══════════════════════════════════════════ */
.tn-dlg{position:fixed; inset:0; z-index:1200; color:var(--cream-50)}
.tn-dlg[hidden]{display:none}
.tn-dlg__scrim{position:absolute; inset:0; background:rgba(6,10,26,.94)}
.tn-dlg__close{
  position:fixed; z-index:3;
  top:calc(20px + env(safe-area-inset-top, 0px)); right:20px;
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--cream-50);
  cursor:pointer;
  transition:background-color .18s var(--ease), border-color .18s var(--ease);
}
.tn-dlg__close svg{width:18px; height:18px}
.tn-dlg__close:hover{background-color:rgba(255,255,255,.12); border-color:var(--gold-400)}
.tn-dlg__close:focus-visible{outline:3px solid var(--gold-500); outline-offset:3px}

.tn-dlg__body{
  position:relative; z-index:2;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center;
  gap:28px;
  padding:64px 20px 32px;
}
.tn-dlg__stage{
  --tn-dw:min(62vw, 250px);
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding-top:16px;
}
@supports (height:100svh){
  .tn-dlg__stage{--tn-dw:min(62vw, 250px, (58svh - 60px) / 1.4167)}
}
.tn-dlg__light{top:45%; width:calc(var(--tn-dw) * 3.2)}

.tn-hand{
  position:relative; z-index:1;
  width:var(--tn-dw);
  height:calc(var(--tn-dw) * 1.4167);
  perspective:calc(var(--tn-dw) * 6);
  transform-origin:0 0;                       /* the FLIP maps the box corner to corner */
  touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:grab;
  will-change:transform;
}
.tn-dlg.is-turning .tn-hand{cursor:grabbing}
.tn-hold{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateY(16deg) rotateX(3deg);
  will-change:transform;
}
.tn-hold__front{
  transform:translateZ(calc(var(--tn-dw) * .045));
  background:var(--c) center / cover no-repeat;   /* the thumbnail shows until the big cover lands */
  box-shadow:0 4px 10px rgba(0,0,0,.3), 0 22px 48px rgba(0,0,0,.45);
}
.tn-hold__back{
  position:absolute; inset:0;
  transform:rotateY(180deg) translateZ(calc(var(--tn-dw) * .045));
  border-radius:4px 2px 2px 4px;
  background:var(--c);
  color:var(--ink);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,.3), 0 22px 48px rgba(0,0,0,.45);
  display:flex; flex-direction:column; align-items:center;
  padding:10% 9% 7%;
  text-align:center;
  overflow:hidden;
}
.tn-back__series{
  position:relative;
  margin:0; padding-bottom:5%;
  font:700 calc(var(--tn-dw) * .034)/1.2 var(--font-ui);
  letter-spacing:.16em; text-transform:uppercase;
}
.tn-back__series::after{content:""; position:absolute; left:10%; right:10%; bottom:0; height:1px; background:currentColor; opacity:.4}
.tn-back__mark svg{display:block; width:calc(var(--tn-dw) * .14); height:calc(var(--tn-dw) * .14); margin-top:9%}
.tn-back__no{margin:5% 0 0; font:800 calc(var(--tn-dw) * .26)/.9 var(--font-display)}
.tn-back__of{margin:1% 0 0; font:600 calc(var(--tn-dw) * .045)/1 var(--font-ui)}
.tn-back__title{
  margin:6% 0 0;
  font:800 calc(var(--tn-dw) * .07)/1.1 var(--font-display);
  text-wrap:balance;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.tn-back__band{
  align-self:stretch;
  margin:7% calc(var(--tn-dw) * -.09) 0;
  padding:3% 0;
  font:700 calc(var(--tn-dw) * .032)/1 var(--font-ui);
  letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,255,255,.18);
}
.tn-dlg.is-light .tn-back__band{background:rgba(11,18,41,.10)}
.tn-back__site{margin:5% 0 0; font:600 calc(var(--tn-dw) * .04)/1 var(--font-ui)}
.tn-back__status{
  margin:auto 0 0;
  font:700 calc(var(--tn-dw) * .032)/1 var(--font-ui);
  letter-spacing:.12em; text-transform:uppercase;
  opacity:.8;
}
.tn-hold__spine{
  position:absolute; top:0; bottom:0;
  left:calc(50% - var(--tn-dw) * .045);
  width:calc(var(--tn-dw) * .09);
  transform:rotateY(-90deg) translateZ(calc(var(--tn-dw) / 2));
  background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(0,0,0,.25)), var(--c);
  color:var(--ink);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:9% 0 7%;
  overflow:hidden;
}
.tn-hold__no{font:700 calc(var(--tn-dw) * .038)/1 var(--font-ui)}
.tn-hold__t{
  writing-mode:vertical-rl;
  max-height:70%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:700 calc(var(--tn-dw) * .038)/1 var(--font-display);
  letter-spacing:.08em; text-transform:uppercase;
}
.tn-hold__spine svg{width:calc(var(--tn-dw) * .054); height:calc(var(--tn-dw) * .054)}
.tn-hold__edge{
  left:calc(50% - var(--tn-dw) * .045);
  width:calc(var(--tn-dw) * .09);
  transform:rotateY(90deg) translateZ(calc(var(--tn-dw) / 2 - 1px));
}
.tn-hand__shadow{
  position:absolute; left:50%;
  top:calc(100% + 18px);
  width:calc(var(--tn-dw) * 1.1);
  height:calc(var(--tn-dw) * .16);
  margin-left:calc(var(--tn-dw) * -.55);
  background:radial-gradient(closest-side, rgba(0,0,0,.45), rgba(0,0,0,0));
  pointer-events:none;
}
.tn-hand__hint{
  position:relative; z-index:1;
  margin:calc(var(--tn-dw) * .16 + 30px) 0 0;
  font-size:.8125rem;
  color:rgba(255,255,255,.55);
  transition:opacity .4s ease;
}
.tn-dlg.is-turned .tn-hand__hint{opacity:0; visibility:hidden}

/* Info panel */
.tn-info{position:relative; z-index:1; width:100%; max-width:480px}
.tn-info__eyebrow{
  margin:0;
  font:700 .75rem/1.4 var(--font-ui);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-400);
}
.tn-info__title{
  margin:12px 0 0;
  font:800 clamp(2rem, 1.4rem + 2vw, 3rem)/1.02 var(--font-display);
  color:var(--cream-50);
  text-wrap:balance;
}
.tn-info__title:focus{outline:none}           /* focused only so it is read first */
.tn-info__src{
  display:flex; align-items:center; gap:10px;
  margin:16px 0 0;
  font-size:.9375rem;
  color:rgba(255,255,255,.72);
}
.tn-info__src::before{content:""; width:24px; height:1px; background:var(--gold-400)}
.tn-info__status{
  display:inline-flex; align-items:center; gap:8px;
  margin:20px 0 0;
  padding:6px 12px;
  border-radius:var(--r-pill);
  border:1px solid rgba(227,197,121,.5);
  color:var(--gold-400);
  font:700 .75rem/1 var(--font-ui);
  letter-spacing:.12em; text-transform:uppercase;
}
.tn-info__status i{width:6px; height:6px; border-radius:50%; background:var(--gold-500)}
.tn-info__note{margin:16px 0 0; max-width:46ch; font-size:1rem; line-height:1.65; color:rgba(255,255,255,.68)}
.tn-info__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.tn-info__browse{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px}
.tn-nb{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  min-width:0; min-height:64px;
  padding:14px 16px;
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.1);
  background:transparent;
  color:var(--cream-50);
  text-align:left;
  cursor:pointer;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.tn-nb[data-browse="1"]{align-items:flex-end; text-align:right}
.tn-nb:hover{border-color:rgba(227,197,121,.5); background-color:rgba(255,255,255,.04)}
.tn-nb:focus-visible{outline:3px solid var(--gold-500); outline-offset:3px}
.tn-nb__dir{font:700 .75rem/1 var(--font-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-400)}
.tn-nb__t{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9375rem; font-weight:600}

@media (max-width:899px){
  .tn-dlg__close{top:calc(12px + env(safe-area-inset-top, 0px)); right:12px}
  .tn-info__cta .btn{width:100%; height:52px}
  .tn-info__browse{grid-template-columns:1fr}
  .tn-nb[data-browse="1"]{align-items:flex-start; text-align:left}
}
@media (min-width:900px){
  .tn-dlg__body{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,440px);
    gap:clamp(32px,5vw,80px);
    align-items:center;
    max-width:1120px; min-height:100%;
    margin:0 auto;
    padding:48px 40px;
  }
  .tn-dlg__stage{--tn-dw:min(300px, 27vw, (100vh - 240px) / 1.4167); padding-top:0}
  .tn-dlg__light{width:calc(var(--tn-dw) * 2.6)}
  .tn-info{max-width:none}
}
@supports (height:100svh){
  @media (min-width:900px){ .tn-dlg__stage{--tn-dw:min(300px, 27vw, (100svh - 240px) / 1.4167)} }
}

/* Every marquee on the page holds still while a teen book is open. */
html.tn-open .marquee__row{animation-play-state:paused!important}

/* ═══ books.html: All 40 titles ════════════════════════════════════════ */
#teensPanel .tn__head{margin-top:8px}
#teensPanel .tn-card{margin-top:40px}
.tn-all{margin-top:clamp(56px,7vw,88px)}
.tn-all__bar{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 24px}
.tn-all__title{margin:0; font:800 var(--fs-h3, clamp(1.375rem, 1.2rem + .8vw, 1.75rem))/1.1 var(--font-display); color:var(--navy-700)}
.tn-all__count{margin:0 0 0 auto; font-size:.9375rem; color:var(--navy-300)}
.tn-all__count b{color:var(--navy-700)}
.tn-grid{
  list-style:none; padding:0;
  margin:28px 0 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 20px;
}
@media (min-width:600px){ .tn-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1024px){ .tn-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }  /* never 3: 40/3 leaves an orphan */
.tn-grid li[hidden]{display:none}
.tn-tile{
  display:block; width:100%;
  padding:0; border:0; background:none;
  font:inherit; color:inherit; text-align:left;
  cursor:pointer;
}
.tn-tile__book{
  position:relative; display:block;
  aspect-ratio:312 / 442;
  border-radius:2px 5px 5px 2px;
  background:var(--c);
  box-shadow:1px 1px 0 #F3EBD8, 2px 2px 0 #E2D6BC, 3px 3px 0 #F3EBD8, 4px 4px 0 #D9CCAE, var(--shadow-book);
  transition:transform .22s var(--ease);
}
.tn-tile__book img{display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover}
.tn-tile__book::after{                        /* the lifted shadow, pre-painted; only its opacity moves */
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:0 18px 36px rgba(11,18,41,.22), 0 6px 12px rgba(11,18,41,.14);
  opacity:0;
  transition:opacity .22s var(--ease);
  pointer-events:none;
}
.tn-tile:hover .tn-tile__book,
.tn-tile:focus-visible .tn-tile__book{transform:translateY(-8px) rotate(-1deg)}
.tn-tile:hover .tn-tile__book::after,
.tn-tile:focus-visible .tn-tile__book::after{opacity:1}
.tn-tile:focus-visible{outline:none}
.tn-tile:focus-visible .tn-tile__book{outline:3px solid var(--gold-500); outline-offset:4px}
.tn-tile.is-away .tn-tile__book{visibility:hidden}
.tn-tile__no{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px;
  font:700 .78rem/1 var(--font-ui);
  letter-spacing:.08em;
  color:var(--navy-700);
}
.tn-tile__no::before{content:""; width:16px; height:2px; background:var(--gold-500)}
.tn-tile__title{
  margin-top:4px;
  font:700 1rem/1.2 var(--font-display);
  color:var(--navy-700);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.tn-all__empty{margin:0; padding:32px 0; text-align:center; font-size:1rem; color:var(--navy-300)}
.tn-all__foot{margin:32px 0 0; text-align:center}
.tn-all__foot a{
  font-weight:700; color:var(--navy-700);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold-500);
}

/* ── Reduced motion: glides, flights and turns are instant in JS; here the
   crossfades go too. Hover and focus feedback stays (DESIGN §8). ── */
@media (prefers-reduced-motion: reduce){
  .tn-stage__light, .tn-dlg__light, .tn-hand__hint, .tn-scrub__tip{transition:none}
}