/* Ported from the prototype's library.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — المكتبة (public library)
   ---------------------------------------------------------
   HERO — galao.framer.website, read from its code:
     · the section is 200vh; the stage inside is sticky (top 0, one
       screen tall), so it stays put for the first screen of scroll
     · a 1000px column: four headline lines placed at 12 / 37 / 63 /
       87% of a 307px block, a 350px search below
     · ten images around a 700×300 box at the centre, five a side:
       300×620 at 690px out, 250² and 200² at 370px, 100² at 150px,
       120² at 100px (from the box's edges), 10px corners
     · on load each image runs from x ±200 / ±150 / ±100, rotate ∓5°,
       opacity 0 to rest — a spring (stiffness 360, damping 100)
     · when an invisible marker (the section's lower half) reaches
       mid-screen, the whole thing changes state — a spring (stiffness
       250, damping 60, ~1s, no overshoot): images move 100–130px
       further out and tilt ±6–7°, lines 2 and 3 fly off to the sides,
       lines 1 and 4 close up, the search falls away, an attribution
       fades in under the headline. Scrolling back up reverses it.
   Here: forest ground, gold headline, ivory text; the ten images are
   library previews (book, video, article, research, audio, curated,
   and four small photos); a verse takes the attribution's place.
   ========================================================= */

.lb-page{
  --lb-bg:     #153F35;
  --lb-bg-2:   #12382F;
  --lb-gold:   #E3CF8D;
  --lb-gold-2: #C9B36A;
  --lb-ivory:  #F5F0E6;
  --lb-sage:   #A9B9A8;
  --lb-spring: cubic-bezier(.16,1,.3,1);          /* the overdamped springs, ~1s, no overshoot */
  background:#FFFFFF;
}

/* ---- the 200vh section and its pinned stage ---- */
.lb{ position:relative; height:200vh; background:var(--lb-bg); }
.lb-sticky{
  position:sticky; top:0;
  height:100vh; min-height:640px;
  overflow:hidden;
  isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(60% 55% at 50% 45%, #1C4A3F 0%, rgba(28,74,63,0) 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(6,22,18,.55) 100%),     /* vignette */
    linear-gradient(180deg, var(--lb-bg) 0%, var(--lb-bg-2) 100%);
}

/* soft light + a few slow motes */
.lb-ground{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.lb-ground::before{
  content:"";
  position:absolute;
  left:50%; top:38%;
  width:900px; height:500px;
  translate:-50% -50%;
  background:radial-gradient(closest-side, rgba(227,207,141,.12), transparent);
  filter:blur(10px);
}
.lb-ground i{
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--lb-gold);
  opacity:0;
  animation:lb-mote 14s linear infinite;
}
.lb-ground i:nth-child(1){ left:22%; top:70%; animation-delay:0s; }
.lb-ground i:nth-child(2){ left:38%; top:80%; animation-delay:-3s; }
.lb-ground i:nth-child(3){ left:61%; top:76%; animation-delay:-6s; width:2px; height:2px; }
.lb-ground i:nth-child(4){ left:77%; top:68%; animation-delay:-9s; }
.lb-ground i:nth-child(5){ left:49%; top:88%; animation-delay:-11s; width:2px; height:2px; }
.lb-ground i:nth-child(6){ left:12%; top:84%; animation-delay:-5s; width:2px; height:2px; }
.lb-ground i:nth-child(7){ left:88%; top:86%; animation-delay:-8s; }
.lb-ground i:nth-child(8){ left:30%; top:62%; animation-delay:-12s; width:2px; height:2px; }
@keyframes lb-mote{
  0%  { opacity:0; transform:translateY(0); }
  15% { opacity:.45; }
  85% { opacity:.25; }
  100%{ opacity:0; transform:translateY(-260px); }
}

/* the 1000px column; library.js sets --k so the composition keeps
   the reference's proportions on narrower screens (1 at 1880px+) */
.lb-stage{
  --k:1;
  position:relative;
  width:1000px;
  display:flex; flex-direction:column; align-items:center; gap:32px;
  padding:60px 0 0;
  transform:scale(var(--k));
  transform-origin:50% 50%;
}

/* ---- headline block (307px tall in the first state) ---- */
.lb-quote{ position:relative; width:100%; height:307px; }
.lb-title{
  position:absolute; inset:0;
  margin:0;
  font-size:64px; font-weight:500; line-height:1.2;
  letter-spacing:0;
  color:var(--lb-gold);
  z-index:1;
}
.lb-l{
  position:absolute; left:50%;
  white-space:nowrap;
  translate:-50% -50%;
  transition:transform 1s var(--lb-spring), opacity .6s var(--lb-spring);
}
.lb-l1t{ top:12%; }
.lb-l2t{ top:37%; }
.lb-l3t{ top:63%; }
.lb-l4t{ top:87%; }

/* the second state's line, under the closed-up headline */
.lb-verse{
  position:absolute; left:50%; top:calc(63% + 70px);
  margin:0;
  translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:26px; font-weight:500;
  color:var(--lb-ivory);
  white-space:nowrap;
  opacity:0;
  transform:translateY(60px);
  transition:transform 1s var(--lb-spring), opacity .8s var(--lb-spring);
  z-index:1;
}
.lb-verse small{ font-size:14px; font-weight:400; color:var(--lb-sage); }

/* ---- lead + search ---- */
.lb-find{
  display:flex; flex-direction:column; align-items:center; gap:26px;
  transition:transform 1s var(--lb-spring), opacity .7s var(--lb-spring);
}
.lb-lead{
  max-width:560px;
  margin:0;
  text-align:center;
  font-size:17px; line-height:1.95;
  color:rgba(245,240,230,.82);
}
.lb-search{
  position:relative;
  display:flex; align-items:center;
  width:460px; height:60px;
  padding:0 24px 0 8px;
  border-radius:99px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--lb-gold-2);
  box-shadow:0 0 0 0 rgba(227,207,141,0);
  transition:background-color .3s var(--lb-spring), box-shadow .4s var(--lb-spring), border-color .3s var(--lb-spring);
  animation:lb-glow 2.4s var(--lb-spring) .9s both;
}
@keyframes lb-glow{
  0%  { box-shadow:0 0 0 0 rgba(227,207,141,0); }
  40% { box-shadow:0 0 34px 2px rgba(227,207,141,.22); }
  100%{ box-shadow:0 0 0 0 rgba(227,207,141,0); }
}
.lb-search:focus-within{ background:rgba(255,255,255,.07); border-color:var(--lb-gold); box-shadow:0 0 0 4px rgba(227,207,141,.14); }
.lb-search input{
  flex:1; min-width:0;
  height:100%;
  border:0; outline:0;
  font:inherit; font-size:16px;
  color:var(--lb-ivory);
  background:none;
}
.lb-search input::placeholder{ color:rgba(245,240,230,.6); }
.lb-search input::-webkit-search-cancel-button{ display:none; }
.lb-search button{
  display:grid; place-items:center;
  width:44px; height:44px; flex:none;
  border:0; border-radius:50%;
  color:#E0C46D;
  background:none;
  cursor:pointer;
}
.lb-search button svg{ width:24px; height:24px; }
.lb-search button:focus-visible{ outline:2px solid var(--lb-gold); }


/* =========================================================
   THE PREVIEWS
   ========================================================= */
.lb-cards{
  position:absolute;
  left:50%; top:50%;
  width:700px; height:300px;
  margin:-150px 0 0 -350px;
  z-index:2;
  pointer-events:none;
}
/* outer: position + the second state (transform); inner: the entrance */
.lb-c{
  position:absolute;
  transition:transform 1s var(--lb-spring);
}
.lb-c-in{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  border-radius:10px;
  transform-origin:50% 50%;
  animation:lb-in 1.15s var(--lb-spring) both;
}
@keyframes lb-in{
  from{ opacity:0; transform:perspective(1200px) translateX(var(--ex)) rotate(var(--er)); }
  to  { opacity:1; transform:perspective(1200px); }
}

.lb-r5{ width:300px; height:620px; right:-690px; top:-120px; }
.lb-r4{ width:250px; height:250px; right:-370px; top:180px; }
.lb-r3{ width:200px; height:200px; right:-370px; top:-40px; }
.lb-r2{ width:100px; height:100px; right:-150px; top:60px; }
.lb-r1{ width:120px; height:120px; right:-100px; top:180px; }
.lb-l5{ width:300px; height:620px; left:-690px;  top:-120px; }
.lb-l4{ width:250px; height:250px; left:-370px;  top:180px; }
.lb-l3{ width:200px; height:200px; left:-370px;  top:-40px; }
.lb-l2{ width:100px; height:100px; left:-150px;  top:60px; }
.lb-l1{ width:120px; height:120px; left:-100px;  top:180px; }

/* shared bits */
.lb-c-in img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85); }
.lb-tag{
  position:absolute; z-index:1;
  top:14px; inset-inline-start:14px;
  padding:4px 11px;
  border-radius:99px;
  font-size:12px; font-weight:600;
  color:var(--lb-bg);
  background:rgba(245,240,230,.92);
}
.lb-c-in b{ display:block; font-weight:600; line-height:1.5; }
.lb-c-in small{ display:block; font-size:12.5px; }

/* book & video: tall cover, words at the foot */
.lb-book::after, .lb-video::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,32,26,.92) 0%, rgba(10,32,26,.2) 45%, transparent 70%);
}
.lb-book-txt{ position:absolute; z-index:1; inset-inline:22px; bottom:24px; color:var(--lb-ivory); }
.lb-book-txt b{ font-size:24px; }
.lb-book-txt small{ margin-top:4px; color:var(--lb-gold); }
.lb-book{ box-shadow:inset 0 0 0 1px rgba(245,240,230,.14); }
.lb-vplay{
  position:absolute; z-index:1;
  left:50%; top:44%;
  width:62px; height:62px;
  translate:-50% -50%;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(245,240,230,.92);
  box-shadow:0 0 0 10px rgba(245,240,230,.16);
}
.lb-vplay svg{ width:24px; height:24px; fill:var(--lb-bg); }

/* article: photo top, words below on cream */
.lb-article{ display:flex; flex-direction:column; justify-content:flex-end; padding:16px; background:#F8F4EA; color:var(--lb-bg); }
.lb-article img{ height:46%; }
.lb-article b{ font-size:17px; }
.lb-article small{ margin-top:6px; color:#7C8A83; }

/* audio: lighter forest panel, a waveform and a play */
.lb-audio{
  display:flex; flex-direction:column; justify-content:flex-end; gap:12px;
  padding:16px;
  color:var(--lb-ivory);
  background:linear-gradient(160deg, #24584B 0%, #1B4A3E 100%);
  box-shadow:inset 0 0 0 1px rgba(227,207,141,.25);
}
.lb-audio .lb-tag{ background:var(--lb-gold); }
.lb-audio b{ font-size:15.5px; }
.lb-wave{ display:flex; align-items:center; gap:4px; height:26px; }
.lb-wave i{ flex:1; border-radius:2px; background:rgba(227,207,141,.65); height:30%; }
.lb-wave i:nth-child(3n){ height:80%; } .lb-wave i:nth-child(4n+1){ height:55%; } .lb-wave i:nth-child(5n+2){ height:100%; }
.lb-audio-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--lb-sage); }
.lb-play{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--lb-gold); }
.lb-play svg{ width:14px; height:14px; fill:var(--lb-bg); }

/* research: clean ivory sheet */
.lb-research{
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
  padding:18px;
  color:var(--lb-bg);
  background:var(--lb-ivory);
}
.lb-research b{ font-size:18px; }
.lb-lines{ display:grid; gap:7px; }
.lb-lines i{ display:block; height:5px; border-radius:3px; background:rgba(21,63,53,.12); }
.lb-lines i:nth-child(2){ width:86%; } .lb-lines i:nth-child(3){ width:92%; } .lb-lines i:nth-child(4){ width:60%; }
.lb-research small{ color:#7C8A83; }

/* curated: muted gold */
.lb-curated{
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px;
  color:var(--lb-bg);
  background:linear-gradient(150deg, #E8D6A6 0%, #C7A84B 100%);
}
.lb-curated .lb-tag{ background:var(--lb-bg); color:var(--lb-gold); }
.lb-curated b{ font-size:16px; }
.lb-star{ position:absolute; top:14px; inset-inline-end:14px; width:22px; height:22px; fill:var(--lb-bg); opacity:.7; }

.lb-photo{ box-shadow:inset 0 0 0 1px rgba(245,240,230,.12); }


/* =========================================================
   SECOND STATE (library.js toggles .is-second on .lb)
   ========================================================= */
.lb.is-second .lb-r5{ transform:translateX(130px); }
.lb.is-second .lb-r4{ transform:translate(110px, 10px) rotate(6deg); }
.lb.is-second .lb-r3{ transform:translate(110px, -10px) rotate(-6deg); }
.lb.is-second .lb-r2{ transform:translate(100px, -10px) rotate(-7deg); }
.lb.is-second .lb-r1{ transform:translate(100px, 10px) rotate(7deg); }
.lb.is-second .lb-l5{ transform:translateX(-130px); }
.lb.is-second .lb-l4{ transform:translate(-110px, 10px) rotate(-6deg); }
.lb.is-second .lb-l3{ transform:translate(-110px, -10px) rotate(6deg); }
.lb.is-second .lb-l2{ transform:translate(-100px, -10px) rotate(7deg); }
.lb.is-second .lb-l1{ transform:translate(-100px, 10px) rotate(-7deg); }

/* lines 1 and 4 close up around the middle; 2 flies left, 3 flies right */
.lb.is-second .lb-l1t{ transform:translateY(78px); }    /* 12% → the line above the centre */
.lb.is-second .lb-l4t{ transform:translateY(-75px); }   /* 87% → the line below it */
.lb.is-second .lb-l2t{ transform:translateX(-2200px); }
.lb.is-second .lb-l3t{ transform:translateX(2200px); }

.lb.is-second .lb-find{ transform:translateY(1000px); opacity:0; pointer-events:none; }
.lb.is-second .lb-verse{ transform:translateY(-12px); opacity:1; }


/* =========================================================
   RESPONSIVE — narrow screens keep the column, lose the previews
   ========================================================= */
@media (max-width:760px){
  /* Nuxt: phones get no pinned scroll and no second state — the hero is one screen, then the content */
  .lb{ height:auto; }
  .lb-sticky{ position:relative; height:auto; min-height:0; padding-block:64px 56px; }
  .lb-stage{ width:100%; padding:40px 16px 0; transform:none; gap:24px; }
  .lb-cards{ display:none; }
  .lb-quote{ height:220px; }
  .lb-title{ font-size:clamp(30px, 9vw, 40px); }
  .lb-verse{ font-size:20px; top:calc(63% + 44px); white-space:normal; width:100%; }
  .lb-lead{ font-size:15.5px; }
  .lb-search{ width:100%; height:54px; }
  .lb.is-second .lb-l1t{ transform:translateY(64px); }
  .lb.is-second .lb-l4t{ transform:translateY(-61px); }
}

@media (prefers-reduced-motion:reduce){
  .lb-c-in, .lb-search, .lb-ground i{ animation:none; }
  .lb-c, .lb-l, .lb-find, .lb-verse{ transition-duration:.01s; }
}


/* =========================================================
   SHARED LIBRARY PIECES — the image card (its picture grows 3px
   on every side on hover, spring 500/60), tags, chapter tones, and
   the small type cards (.lx-r) the details pages reuse for their
   related items
   ========================================================= */

.lx{
  --lx-ink:    #123C35;
  --lx-sub:    #5F6E67;
  --lx-muted:  #8A968F;
  --lx-gold:   #B08F3E;
  --lx-line:   rgba(18,60,53,.09);
  --lx-card:   #FFFDF8;
  --lx-quick:  cubic-bezier(.25,.9,.3,1);          /* the 500/60 spring, ~.35s */
  color:var(--lx-ink);
}

/* the newsbook image card: the photo sits on inset:0 and grows to −3px on hover */
.lx-img{ position:relative; display:block; overflow:hidden; }
.lx-img img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:top .35s var(--lx-quick), left .35s var(--lx-quick), width .35s var(--lx-quick), height .35s var(--lx-quick);
}
a:hover > .lx-img img, a:hover .lx-r-art .lx-img img, a:hover .lx-story-img .lx-img img,
a:focus-visible > .lx-img img{ top:-3px; left:-3px; width:calc(100% + 6px); height:calc(100% + 6px); }

.lx-badge{
  display:inline-flex; align-items:center;
  padding:4px 11px;
  border-radius:999px;
  font-style:normal; font-size:12.5px; font-weight:600;
  color:var(--lx-gold);
  background:rgba(212,175,90,.14);
  border:1px solid rgba(176,143,62,.22);
}
.lx small{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13.5px; color:var(--lx-muted); }
.lx small span + span::before{ content:"•"; margin-inline-end:12px; color:rgba(18,60,53,.25); }

/* read links: newsbook's colour change, plus a small arrow nudge */
.lx-read{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:600;
  color:var(--lx-ink);
  transition:color .35s var(--lx-quick);
}
.lx-read svg{ width:16px; height:16px; color:var(--gold); transition:transform .35s var(--lx-quick); }


/* ---- ticker ---- */


/* ---- sections ---- */

.lx-ivory{ background:#F8F5ED; }
.lx-sage { background:#EDF3EC; }
.lx-cream{ background:#F5EFE3; }
.lx-sand { background:#F4EAD5; }
.lx-white{ background:#FCFBF7; }
.lx-olive{ background:#E8EEE5; }


/* 1 — featured: large (2 rows) · medium · medium / small · small */


.lx-img--play i{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,253,248,.92);
  box-shadow:0 0 0 7px rgba(255,253,248,.18);
}
.lx-img--play i svg{ width:18px; height:18px; fill:var(--lx-ink); }


/* 2 — types */


/* 3 — picks */


/* 4 — story */


/* 5 — recent: three columns, each card shaped by what it is */

/* three calm columns: cards keep their own shapes and stack without gaps */


.lx-r{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:12px 12px 22px;
  border-radius:26px;
  background:var(--lx-card);
  border:1px solid var(--lx-line);
  box-shadow:0 16px 34px -30px rgba(18,60,53,.45);
}
.lx-r[hidden]{ display:none; }
.lx-r.is-shown{ animation:lx-in .45s var(--lx-quick) both; }
@keyframes lx-in{ from{ opacity:0; transform:translateY(8px); } }
.lx-r > .lx-img{ width:100%; border-radius:18px; margin-bottom:6px; }
.lx-r > .lx-badge, .lx-r > b, .lx-r > p, .lx-r > small, .lx-r > ul{ margin-inline:10px; }
.lx-r b{ font-size:19px; line-height:1.5; font-weight:700; }
.lx-r p{ margin-block:0; font-size:15px; line-height:1.85; color:var(--lx-sub); }
.lx-r--book > .lx-img{ aspect-ratio:3 / 3.6; }            /* portrait: books stand taller */
.lx-r--article > .lx-img{ aspect-ratio:16 / 10; }
.lx-r--video > .lx-img{ aspect-ratio:16 / 9; }
.lx-dur{ position:absolute; bottom:10px; inset-inline-end:10px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; color:#FFFDF8; background:rgba(14,39,33,.75); }
.lx-r--audio{ padding:16px 16px 20px; background:linear-gradient(165deg, #EEF4F0 0%, #E3ECE5 100%); }
.lx-r-art{ display:flex; align-items:center; gap:14px; width:100%; }
.lx-r-art > .lx-img{ width:84px; height:84px; flex:none; border-radius:18px; }
.lx-r-art > span:last-child{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.lx-r--audio b{ font-size:17px; }
.lx-r--audio > small{ margin-inline:0; }
.lx-prog{ position:relative; width:100%; height:5px; margin:10px 0 2px; border-radius:99px; background:rgba(18,60,53,.12); }
.lx-prog i{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:99px; background:var(--gold); }
.lx-r--research{ padding:26px 18px 24px; border-style:dashed; border-color:rgba(176,143,62,.35); background:#FFFFFF; }
.lx-r--research b{ font-size:21px; }
.lx-r--summary{ padding:24px 14px 22px; background:#FBF5E6; }
.lx-r--summary ul{ display:grid; gap:6px; margin-block:4px; padding:0; list-style:none; }
.lx-r--summary li{ position:relative; padding-inline-start:18px; font-size:14.5px; color:var(--lx-sub); }
.lx-r--summary li::before{ content:""; position:absolute; inset-inline-start:2px; top:.7em; width:6px; height:6px; border-radius:2px; background:var(--gold); transform:rotate(45deg); }


/* 6 — topics: a soft tile, a faint eight-point star, a large title */


/* 7 — closing */


/* ---- responsive ---- */


@media (prefers-reduced-motion:reduce){
  .lx-img img{ transition:none; }
  .lx-r.is-shown{ animation:none; }
}


/* =========================================================
   THE LIBRARY BODY — newsbook.framer.website, section by section
   Measured at 1440: a 1340 column; header ticker cards 418×500;
   featured: a zig-zag pair of 645-wide cards (picture 543 tall)
   then three 413-wide cards (picture 347 tall); a full-screen panel
   (words 506 wide, two 355-wide vertical tickers, cards 355×482);
   recent: three columns of the 413 card; titles 48px, card titles
   25px. Light and rounded here, one tone per chapter.
   ========================================================= */

.nb-wrap{ max-width:1340px; margin:0 auto; padding:0 50px; }
.nb-sec{ padding:110px 0 120px; }
.nb-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:44px; }
.nb-head h2, .nb-info h2{
  margin:0;
  font-size:clamp(30px, 3.4vw, 48px);
  line-height:1.3;
  font-weight:700;
  letter-spacing:0;
  color:var(--lx-ink);
}
.nb-more{ display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:var(--lx-ink); transition:color .35s var(--lx-quick); }
.nb-more svg{ width:18px; height:18px; color:var(--lx-gold); transform:scaleX(-1); transition:transform .35s var(--lx-quick); }
.nb-more:hover{ color:var(--lx-gold); }
.nb-more:hover svg{ transform:scaleX(-1) translate(3px, -3px); }

/* tags & meta, shared */
.nb-meta{ display:flex; align-items:center; gap:14px; font-size:14px; color:var(--lx-muted); }
.nb-meta .lx-badge{ font-size:13px; }

/* ---- the big drifting row (videos) ---- */
.nb-track{ overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; }
.nb-track.is-drag{ cursor:grabbing; }
.nb-row{ display:flex; gap:50px; width:max-content; margin:0; padding:0; list-style:none; will-change:transform; }
.nb-tk{
  position:relative;
  isolation:isolate;
  display:block;
  width:418px; height:500px;
  border-radius:24px;
  overflow:hidden;
  color:#FFFDF8;
  -webkit-user-drag:none;
  box-shadow:0 26px 50px -36px rgba(18,60,53,.6);
}
.nb-tk > .lx-img{ position:absolute; inset:0; z-index:-2; }
.nb-tk img{ pointer-events:none; -webkit-user-drag:none; }
.nb-tk::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,39,33,0) 45%, rgba(14,39,33,.88) 100%); }
.nb-tk > .lx-badge{ position:absolute; top:16px; inset-inline-start:16px; color:var(--lx-ink); background:rgba(255,253,248,.92); border-color:transparent; }
.nb-tk-in{ position:absolute; inset-inline:22px; bottom:22px; display:flex; flex-direction:column; gap:8px; }
.nb-tk-in b{ font-size:21px; line-height:1.45; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nb-tk-in small{ color:rgba(255,253,248,.78); }
.nb-tk-in small span + span::before{ color:rgba(255,253,248,.45); }
a.nb-tk:hover > .lx-img img{ top:-3px; left:-3px; width:calc(100% + 6px); height:calc(100% + 6px); }

/* ---- the shared card: picture · tag + when · title · button ---- */
.nb-card{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; color:var(--lx-ink); }
.nb-img{ width:100%; aspect-ratio:411 / 347; border-radius:22px; margin-bottom:6px; box-shadow:0 22px 44px -36px rgba(18,60,53,.55); }
.nb-title{ font-size:clamp(20px, 1.75vw, 25px); line-height:1.5; font-weight:700; }
.nb-btn{
  display:inline-flex; align-items:center;
  margin-top:4px;
  padding:9px 18px;
  border-radius:999px;
  font-size:14.5px; font-weight:600;
  color:var(--lx-ink);
  background:rgba(18,60,53,.07);
  transition:background-color .35s var(--lx-quick), color .35s var(--lx-quick);
}
.nb-card:hover .nb-btn{ color:#F8F5ED; background:var(--lx-ink); }      /* newsbook: the button changes colour */
.nb-card:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; border-radius:22px; }

/* ---- 2 — featured: the zig-zag pair, then three ---- */
.nb-feat{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:60px 50px; align-items:start; }
.nb-card--big{ grid-column:span 3; gap:20px; }
.nb-card--big .nb-img{ aspect-ratio:643 / 543; border-radius:28px; margin:0; }
.nb-card--big .nb-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.nb-card--big.is-flip .nb-txt{ order:2; }          /* the second reads picture → text */
.nb-feat > .nb-card:not(.nb-card--big){ grid-column:span 2; }

/* ---- 3 — the panel: words + two vertical tickers ---- */
.nb-panel{ overflow:hidden; }
.nb-panel-in{ display:grid; grid-template-columns:minmax(0, 506px) minmax(0, 760px); grid-template-rows:100%; justify-content:space-between; align-items:center; gap:50px; height:max(100vh, 760px); max-height:960px; }
.nb-info p{ margin:18px 0 30px; font-size:17px; line-height:1.95; color:var(--lx-sub); }
.nb-wide{
  display:flex; align-items:center; justify-content:center;
  height:54px;
  border-radius:16px;
  font-size:16px; font-weight:600;
  color:#F8F5ED;
  background:var(--lx-ink);
  transition:background-color .35s var(--lx-quick);
}
.nb-wide:hover{ background:#174A41; }
.nb-wide:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.nb-info h3{ margin:44px 0 18px; font-size:24px; font-weight:700; }
.nb-checks{ display:grid; gap:12px; margin:0; padding:0; list-style:none; font-size:16.5px; }
.nb-checks li{ display:flex; align-items:center; gap:12px; }
.nb-checks svg{ width:20px; height:20px; padding:3px; border-radius:50%; color:#FFFDF8; background:#5E9C78; }

/* the columns take the panel's height exactly; their rows never size them */
.nb-cols{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:100%; gap:50px; height:100%; min-height:0; overflow:hidden; }
.nb-col{
  height:100%;
  min-height:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(0deg, transparent 0%, #000 50%, transparent 100%);
          mask-image:linear-gradient(0deg, transparent 0%, #000 50%, transparent 100%);
}
.nb-vrow{ display:flex; flex-direction:column; gap:40px; margin:0; padding:0; list-style:none; will-change:transform; }
.nb-vc{ display:flex; flex-direction:column; gap:14px; color:var(--lx-ink); }
.nb-vc .lx-img{ width:100%; aspect-ratio:1; border-radius:22px; }
.nb-vc b{ font-size:21px; line-height:1.5; font-weight:700; }

/* ---- 4 — recent ---- */
.nb-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:60px 50px; }
.nb-sec[tabindex]:focus{ outline:none; }

/* ---- one type per chapter: what each card carries ---- */
.nb-head{ align-items:flex-end; }
.nb-sub{ max-width:620px; margin:10px 0 0; font-size:17px; line-height:1.85; color:var(--lx-sub); }
.nb-ex{ font-size:15.5px; line-height:1.9; color:var(--lx-sub); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nb-by{ font-size:14.5px; font-weight:600; color:var(--lx-muted); }

/* the play mark on video and podcast pictures */
.nb-play{
  position:absolute; z-index:1;
  left:50%; top:50%; translate:-50% -50%;
  display:grid; place-items:center;
  width:58px; height:58px;
  border-radius:50%;
  background:rgba(255,253,248,.92);
  box-shadow:0 0 0 8px rgba(255,253,248,.18);
  transition:transform .35s var(--lx-quick);
}
.nb-play svg{ width:22px; height:22px; fill:var(--lx-ink); }
a:hover .nb-play{ transform:scale(1.06); }
.nb-tk .nb-play{ top:42%; }

/* videos: the row sits under the chapter's header, edge to edge */
.nb-sec--tick{ overflow:hidden; }
.nb-sec--tick .nb-head{ margin-bottom:40px; }

/* audio: the drifting columns carry a tag, a small waveform and the duration */
.nb-vc--audio{ gap:10px; }
.nb-vc--audio .nb-play{ width:50px; height:50px; }
.nb-vc--audio .lx-badge{ align-self:flex-start; margin-top:4px; }
.nb-vc--audio b{ font-size:19px; }
.nb-wave{ display:flex; align-items:center; gap:3px; height:22px; }
.nb-wave i{ flex:1; height:35%; border-radius:2px; background:rgba(18,60,53,.18); }
.nb-wave i:nth-child(3n){ height:80%; } .nb-wave i:nth-child(4n+1){ height:55%; } .nb-wave i:nth-child(5n+2){ height:100%; }
.nb-wave i:nth-child(-n+7){ background:var(--gold); }

/* knowledge cards: text on soft tones, no picture */
.nb-kc{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  min-height:260px;
  padding:30px 28px 26px;
  border-radius:28px;
  color:var(--lx-ink);
  background:#F5EFE3;
  border:1px solid rgba(176,143,62,.22);
  box-shadow:0 20px 40px -34px rgba(18,60,53,.45);
  transition:transform .4s var(--lx-quick), box-shadow .4s var(--lx-quick);
}
.nb-kc::before{
  content:""; position:absolute; z-index:-1;
  width:150px; height:150px; top:-48px; inset-inline-end:-48px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23B08F3E' stroke-width='.9'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.2;
}
.nb-kc--definition{ background:#E7F0EA; }
.nb-kc--lesson    { background:#F3E6C4; }
.nb-kc--reflection{ background:#E6ECDD; }
.nb-kc--summary   { background:#FBF8F0; }
.nb-kc--reminder  { background:#EEF4F0; }
.nb-kc-text{ font-size:20px; line-height:1.85; font-weight:600; }
.nb-kc-src{ margin-top:auto; font-size:14px; color:var(--lx-muted); }
.nb-kc-src::before{ content:"— "; }
.nb-kc:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* a subtle lift on hover (cards with pictures already grow theirs) */
.nb-card, .nb-kc, .nb-vc{ transition:transform .4s var(--lx-quick); }
.nb-card:hover, .nb-kc:hover{ transform:translateY(-4px); }

/* a soft staggered fade-up as each chapter arrives (library.js adds .is-in) */
.nb-js .nb-up > *{ opacity:0; translate:0 18px; }
.nb-js .nb-up.is-in > *{
  opacity:1; translate:0 0;
  transition:opacity .8s var(--lx-quick), translate .8s var(--lx-quick);
}
.nb-js .nb-up.is-in > *:nth-child(2){ transition-delay:.08s; }
.nb-js .nb-up.is-in > *:nth-child(3){ transition-delay:.16s; }
.nb-js .nb-up.is-in > *:nth-child(4){ transition-delay:.24s; }
.nb-js .nb-up.is-in > *:nth-child(5){ transition-delay:.32s; }
.nb-js .nb-up.is-in > *:nth-child(6){ transition-delay:.4s; }
.nb-js .nb-track.nb-up > *, .nb-js .nb-info.nb-up > *{ transition-delay:0s; }
section[id^="lib-"]{ scroll-margin-top:90px; }
@media (prefers-reduced-motion:reduce){
  .nb-js .nb-up > *{ opacity:1; translate:none; }
  .nb-card, .nb-kc{ transition:none; }
}

/* ---- responsive ---- */
@media (max-width:1100px){
  .nb-wrap{ padding:0 28px; }
  .nb-feat{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nb-card--big{ grid-column:span 1; }
  .nb-feat > .nb-card:not(.nb-card--big){ grid-column:span 1; }
  .nb-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nb-panel-in{ grid-template-columns:1fr; grid-template-rows:auto; height:auto; max-height:none; padding:96px 28px; }
  .nb-cols{ height:560px; }
}
@media (max-width:720px){
  .nb-wrap{ padding:0 16px; }
  .nb-sec{ padding:72px 0; }
  .nb-head{ margin-bottom:28px; }
  .nb-row{ gap:20px; }
  .nb-tk{ width:280px; height:340px; }
  .nb-feat, .nb-grid{ grid-template-columns:1fr; gap:44px; }
  .nb-head{ flex-direction:column; align-items:flex-start; }
  .nb-kc{ min-height:0; }
  .nb-card--big.is-flip .nb-txt{ order:0; }      /* one column: words above the picture for both */
  .nb-card--big .nb-txt{ order:2; }
  .nb-panel-in{ padding:72px 16px; }
  .nb-cols{ height:440px; gap:16px; }
  .nb-vc b{ font-size:16px; }
}

}