/* ============================================================
   we-library.css — the LIBRARY (playlist) template.
   Route: /home/libraries/<slug>   Template: library/default

   Loaded IN-BODY from library/default/index.liquid with
   blocking="render", alongside we-fp-paper.css, which is the token
   layer this file depends on (--tx1..4 tear tiles, --pp-* paper
   stock, --shadow-*-d filters). Same convention as
   sections/fluid_platform, and the layout's first-paint gate covers
   the WebKit case. See layouts/theme.liquid.

   The card recipe is deliberately the homepage carousel's, class
   names included (.ucard-sh / .ucard / .ucard-media / .uplay /
   .ucard-cap): this page and the #experts rail render the SAME
   playlist, so they must read as the same artifact. fp-landing.css
   never ships on this route, so reusing the names cannot collide.

   Three mechanics carried over from fp-landing.css — do not
   "simplify" them:
   · the shadow is a FILTER on the unmasked .ucard-sh wrapper, never
     a box-shadow on .ucard. A mask clips the element's own
     box-shadow to its box; drop-shadow() runs on the masked result
     and hugs the torn contour.
   · display:block on .ucard-media is load-bearing — it is a <span>,
     and an inline box ignores aspect-ratio, collapsing the row.
   · the tear is the REPEATING 300x48 tile (mask-repeat:repeat-x),
     not a stretched full-width strip, which squeezes to a straight
     line at card scale.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

.lib-page{
  --ink:#f2efe8;
  --dim:#a49f95;
  --accent:#42b1ff;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"WeHaas","Neue Haas Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --hand:"FLBold","FluidHand","Arial Black",sans-serif;
  position:relative;
  min-height:100vh;
  /* the nav is position:fixed and ~55px painted + a 24px rag */
  padding:calc(69px + 46px) 0 96px;
  font-family:var(--sans);
  color:var(--ink);
  /* no background here on purpose: layouts/theme.liquid installs the
     composited fixed dark-paper layer (html body::before) globally.
     Painting our own would double the texture. */
}

.lib-wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- header ---- */
.lib-head{max-width:720px;margin-bottom:clamp(30px,4vw,48px)}
.lib-eyebrow{display:inline-block;font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  transform:rotate(-.7deg);margin-bottom:14px}
.lib-title{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;letter-spacing:-.028em;
  line-height:1.04;color:#fff}
.lib-desc{margin-top:16px;font-size:1.02rem;line-height:1.55;color:var(--dim);max-width:62ch}
.lib-count{margin-top:18px;font-family:var(--mono);font-size:.7rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#7d786e}

/* ---- grid ---- */
.lib-grid{display:grid;gap:clamp(18px,2.2vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
@media(max-width:680px){.lib-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:420px){.lib-grid{grid-template-columns:1fr}}

/* ---- card (see banner: wrapper carries the shadow, .ucard is masked) ---- */
.ucard-sh{display:block;width:100%;margin:0;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;
  filter:var(--shadow-1-d);
  opacity:0;translate:0 14px;
  transition:opacity .5s ease var(--d,0ms),translate .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms),filter .35s ease}
.lib-page.in .ucard-sh{opacity:1;translate:0 0}
.ucard-sh:hover{filter:var(--shadow-1-d) drop-shadow(0 12px 18px rgba(0,0,0,.22))}
.ucard-sh:focus-visible{outline:2.5px solid var(--accent);outline-offset:4px}

.ucard{position:relative;display:block;border-radius:3px 3px 0 0;
  padding:0 0 46px;
  background:var(--pp-speck-w) var(--pp-sp,0 0)/var(--pp-s-size) repeat,
             var(--pp-grain-w) var(--pp-gp,0 0)/var(--pp-g-size) repeat #fff;
  background-blend-mode:multiply,multiply;
  transition:translate .35s cubic-bezier(.2,.7,.2,1),rotate .35s cubic-bezier(.2,.7,.2,1);
  -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat;
  -webkit-mask-size:300px 48px,100% calc(100% - 46px);mask-size:300px 48px,100% calc(100% - 46px);
  -webkit-mask-position:bottom left,top;mask-position:bottom left,top}
.lib-grid .ucard-sh:nth-child(4n+1) .ucard{-webkit-mask-image:var(--tx2),linear-gradient(#000,#000);mask-image:var(--tx2),linear-gradient(#000,#000)}
.lib-grid .ucard-sh:nth-child(4n+2) .ucard{--pp-sp:120px 70px;--pp-gp:40px 150px;-webkit-mask-image:var(--tx4),linear-gradient(#000,#000);mask-image:var(--tx4),linear-gradient(#000,#000)}
.lib-grid .ucard-sh:nth-child(4n+3) .ucard{--pp-sp:200px 130px;--pp-gp:90px 30px;-webkit-mask-image:var(--tx1),linear-gradient(#000,#000);mask-image:var(--tx1),linear-gradient(#000,#000)}
.lib-grid .ucard-sh:nth-child(4n) .ucard{--pp-sp:60px 210px;--pp-gp:170px 90px;-webkit-mask-image:var(--tx3),linear-gradient(#000,#000);mask-image:var(--tx3),linear-gradient(#000,#000)}
.ucard-sh:hover .ucard{translate:0 -4px;rotate:-.5deg}

/* display:block is load-bearing — see banner */
.ucard-media{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#e9e5dc;
  filter:blur(14px);opacity:.55;transition:filter .55s ease,opacity .4s ease}
.ucard-media.is-loaded{filter:none;opacity:1}
.ucard-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:scale .5s cubic-bezier(.2,.7,.2,1)}
.ucard-sh:hover .ucard-media img{scale:1.05}

.uplay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:opacity .3s}
.uplay svg{width:48px;height:48px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.ucard-sh:hover .uplay{opacity:.82}

.ucard-cap{display:block;margin:13px 14px 0;font-size:.98rem;font-weight:700;
  letter-spacing:-.012em;line-height:1.32;color:#141109}

/* ---- empty state ---- */
.lib-empty{padding:48px 0;font-size:1.02rem;color:var(--dim)}

/* ---- portrait lightbox (same component as the homepage rail) ---- */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(4,5,8,.86);backdrop-filter:blur(6px)}
.lightbox.open{display:flex}
.lightbox .lb-inner{position:relative;max-width:min(430px,92vw);width:100%}
.lightbox.portrait video{display:block;width:100%;max-height:88vh;aspect-ratio:9/16;
  object-fit:cover;background:#000;border-radius:4px}
.lb-close{position:absolute;top:-44px;right:0;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;
  transition:background .2s}
.lb-close:hover{background:rgba(255,255,255,.26)}

@media(prefers-reduced-motion:reduce){
  .ucard-sh{opacity:1;translate:0 0;transition:none}
  .ucard,.ucard-media,.ucard-media img{transition:none}
}