/* ============================================================
   library-page.css — the SA Library page (library.html) only.
   Editorial, pink-led counterpart to the gym's cinematic hero.
   Loaded INSTEAD of hero.css on library.html.
   ============================================================ */
:root{
  --lib-pink:#FF3F91;
  --lib-pink-soft:rgba(255,63,145,0.12);
  --lib-blue:#3E7BFA;
}

/* ---- this page is paper from the very top, so the header starts in its
       paper colours instead of waiting for the scroll observer ---- */
.lib-header{color:var(--lib-ink);}
.lib-header.scrolled{
  background:rgba(244,239,228,0.84);
  border-color:var(--lib-line);
  box-shadow:0 1px 24px rgba(33,29,22,0.07);
}
.lib-header .nav-links a{color:var(--lib-dim);}
.lib-header .nav-links a:hover,.lib-header .nav-links a.active{color:var(--lib-ink);}
.brand-lib.current{opacity:1;}
.brand-lib.current::after{
  content:""; display:block; height:1px; margin-top:3px;
  background:linear-gradient(90deg, var(--lib-pink), transparent);
}

/* ============ HERO ============ */
.lib-hero{padding:186px 0 104px; overflow:hidden;}
.lib-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 44% at 88% 6%, rgba(255,63,145,0.16), transparent 62%),
    radial-gradient(ellipse 40% 40% at 4% 84%, rgba(62,123,250,0.09), transparent 64%);
}
.lib-hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr 0.92fr; gap:66px; align-items:center;}

.lib-hero .eyebrow{color:var(--lib-pink);}
.lib-hero .eyebrow::before{background:var(--lib-pink);}
.back-link{color:var(--lib-faint); transition:color .3s;}
.back-link:hover{color:var(--lib-pink);}

.lib-hero-title{
  font-family:var(--f-serif); font-weight:600;
  font-size:clamp(2.6rem, 5.4vw, 4.6rem); line-height:1.02;
  letter-spacing:-0.015em; margin-top:22px; color:var(--lib-ink);
}
.lib-hero-title em{font-style:normal; color:var(--lib-pink);}

.lib-hero-lede{margin-top:26px; max-width:50ch; font-size:1.06rem; line-height:1.62; color:var(--lib-dim);}

.lib-hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.lib-hero-cta .btn{border-radius:5px;}
.lib-hero-cta .btn-solid-lib:hover{background:var(--lib-pink); color:#fff;}
.lib-hero-cta .btn-outline-lib:hover{border-color:var(--lib-pink); color:var(--lib-pink);}

/* index / stats, set as a numbered contents list rather than a stats row */
.lib-index{display:flex; flex-wrap:wrap; gap:0; margin-top:64px; border-top:1px solid var(--lib-line);}
.lib-index::before{
  content:""; position:absolute; margin-top:-1px; height:1px; width:180px;
  background:linear-gradient(90deg, var(--lib-pink), transparent);
}
.lib-index .li{flex:1; min-width:132px; padding:20px 22px 0 0;}
.lib-index .lin{display:block; font-size:0.62rem; letter-spacing:0.16em; color:var(--lib-pink); margin-bottom:8px;}
.lib-index .lit{font-family:var(--f-serif); font-weight:600; font-size:1.5rem; color:var(--lib-ink);}
.lib-index .lil{font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--lib-faint); margin-top:5px;}

/* hero visual */
.lib-hero-visual{margin:0; position:relative;}
.lib-hero-visual img{
  width:100%; border-radius:8px; display:block;
  border:1px solid var(--lib-line);
  box-shadow:0 30px 70px rgba(33,29,22,0.24), 0 4px 16px rgba(255,63,145,0.1);
}
.lib-hero-visual figcaption{
  margin-top:14px; font-size:0.64rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--lib-faint);
}

/* ---- entrance stagger (never hides content when motion is reduced) ---- */
.lib-reveal{opacity:1; transform:none;}
@media(prefers-reduced-motion:no-preference){
  .lib-reveal{opacity:0; transform:translateY(18px); animation:libReveal .85s cubic-bezier(.16,.8,.28,1) forwards;}
  .lib-reveal.r1{animation-delay:.05s;}
  .lib-reveal.r2{animation-delay:.14s;}
  .lib-reveal.r3{animation-delay:.24s;}
  .lib-reveal.r4{animation-delay:.34s;}
  .lib-reveal.r5{animation-delay:.44s;}
}
@keyframes libReveal{to{opacity:1; transform:translateY(0);}}

/* ============ PAGE-LOCAL OVERRIDES ============ */
/* serif section headings, to keep the library reading editorial */
.lib-h2{font-family:var(--f-serif); font-weight:600; text-transform:none; letter-spacing:-0.01em;}

/* field cards become links on this page */
.cat-card{display:block; color:inherit;}
.cat-card.active{background:var(--lib-raised); box-shadow:inset 3px 0 0 var(--lib-pink);}

/* pink accents through the archive UI */
.search-box input:focus{border-color:var(--lib-pink);}
.filter-btn.active,.filter-btn:hover{background:var(--lib-pink); color:#fff; border-color:var(--lib-pink);}
.article-meta{color:var(--lib-pink);}
.feature-text .kicker{color:var(--lib-pink);}

/* ============ BACK TO THE FLOOR ============ */
.lib-back{overflow:hidden; text-align:center;}
/* centred section, so it overrides .photo-room's left-weighted scrim */
.lib-back.photo-room::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, var(--fit-bg) 0%, rgba(10,11,12,0.42) 18%, rgba(10,11,12,0.42) 82%, var(--fit-bg) 100%),
    radial-gradient(ellipse 62% 70% at 50% 50%, rgba(10,11,12,0.72), transparent 78%);
}
.lib-back > .wrap{position:relative; z-index:1;}
.lib-back-inner{display:flex; flex-direction:column; align-items:center;}
.lib-back .eyebrow{color:var(--lib-blue); justify-content:center;}
.lib-back .eyebrow::before{background:var(--lib-blue);}
.lib-back h2{font-size:clamp(2.2rem,5vw,3.6rem); margin-top:16px; color:var(--fit-ink);}
.lib-back-lede{margin-top:18px; max-width:46ch; color:var(--fit-dim);}
.lib-back .cta-row{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; justify-content:center;}
.lib-back .cta-row .btn{border-radius:5px;}
.lib-back .btn-solid-fit{background:var(--lib-blue); border-color:var(--lib-blue); color:#080910;}
.lib-back .btn-solid-fit:hover{background:#5b91ff;}
.lib-back .btn-outline-fit{border-color:var(--lib-pink); color:var(--fit-ink);}
.lib-back .btn-outline-fit:hover{background:rgba(255,63,145,0.1); border-color:#ff6bad; color:var(--fit-ink);}

@media(max-width:960px){
  .lib-hero{padding:150px 0 76px;}
  .lib-hero-inner{grid-template-columns:1fr; gap:44px;}
  .lib-hero-visual{order:-1;}
}
@media(max-width:560px){
  .lib-index .li{min-width:46%;}
}

/* ============ FIELDS BANNER ============ */
.fields-banner{margin:0 0 34px; position:relative;}
.fields-banner img{
  width:100%; aspect-ratio:21/8; object-fit:cover;
  border-radius:8px; border:1px solid var(--lib-line);
  box-shadow:0 22px 50px rgba(33,29,22,0.18);
}
.fields-banner figcaption{
  margin-top:12px; font-size:0.62rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--lib-faint);
}
@media(max-width:700px){ .fields-banner img{aspect-ratio:16/9;} }


/* ============ READING ROOM BAND ============ */
.lib-band{overflow:hidden;}
.lib-band-inner{max-width:46ch;}
.lib-band .eyebrow{color:var(--lib-pink);}
.lib-band .eyebrow::before{background:var(--lib-pink);}
.lib-band-line{
  margin:18px 0 0; font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:0.98; color:var(--fit-ink);
}
.lib-band-line .a2{color:var(--lib-pink);}
.lib-band-note{margin-top:20px; color:var(--fit-dim); font-size:1rem; max-width:42ch;}

/* ============ FEATURED: footage instead of the old drawing ============ */
.feature-visual{
  aspect-ratio:4/3;                 /* the clip is 16:9 — 4/5 cropped far too hard */
  background:#0a0b12; border-color:var(--lib-line);
}
.feature-visual video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

/* ============================================================
   LIBRARY CURSOR — a fountain-pen nib.

   style.css builds the gym cursor as a spinning weight plate.
   This file only loads on library.html, so overriding here swaps
   the cursor for the whole page without touching the gym.

   The nib is a background SVG, NOT clip-path. clip-path was the
   first attempt and it broke on hover: the outline was made from
   an inset pseudo-element with its own percentage-based polygon,
   and at a different size the inner shape stops nesting inside
   the outer one, so the nib collapsed into a solid blob. A
   background image scales correctly at any size.

   Both plain and .on-paper selectors are listed on every rule
   because the base file styles .on-paper specifically, which
   would otherwise out-specify these.
   ============================================================ */
.cursor-ring,
.cursor-ring.on-paper{
  --plate:var(--lib-pink);
  width:22px; height:31px;
  border:0; border-radius:0;
  background:transparent;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2034%22%3E%3Cpath%20d%3D%22M12%2032.5%203.2%2014.6V2.8h17.6v11.8z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.72%29%22%20stroke%3D%22%23FF3F91%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%2032.5V17.4%22%20stroke%3D%22%23FF3F91%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%222.4%22%20fill%3D%22none%22%20stroke%3D%22%23FF3F91%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  box-shadow:none;
  animation:none;                        /* a pen doesn't spin */
  transform:translate(-50%,-50%) rotate(-20deg);
  filter:drop-shadow(0 2px 5px rgba(33,29,22,0.18));
  transition:width .25s var(--ease), height .25s var(--ease),
             transform .25s var(--ease), opacity .2s;
}
/* the plate's hub and bolt holes have no meaning here */
.cursor-ring::before,.cursor-ring.on-paper::before,
.cursor-ring::after,.cursor-ring.on-paper::after{content:none;}

/* hover = a larger nib, tipped as if about to write */
.cursor-ring.hover,
.cursor-ring.on-paper.hover{
  width:30px; height:42px;
  transform:translate(-50%,-50%) rotate(-30deg);
}

.cursor-dot,
.cursor-dot.on-paper{background:var(--lib-pink); box-shadow:0 0 8px rgba(255,63,145,0.5);}

/* ============================================================
   SHELF LOADER — books stand up on the shelf as it loads
   ============================================================ */
.loader.shelf .ldr-step{
  transform-box:fill-box; transform-origin:50% 100%;
  transform:scaleY(0.06);
}
.loader.shelf .ldr-step.on{transform:scaleY(1);}
@media(prefers-reduced-motion:reduce){
  .loader.shelf .ldr-step{transform:none;}
  .cursor-ring,.cursor-ring.on-paper{transform:translate(-50%,-50%) rotate(-20deg); transition:none;}
}