:root{
  --gold:#e5d49a;
  --ivory:#ebe6dc;
  --muted:#bcb6ab;
  --bg:#111;
  --header-h:48px;
  --page-pad:clamp(18px,4vw,56px);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background-color:#0d0906;
  color:var(--ivory);
}

body{
  font-family:"Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
}

button,a{font:inherit}

.library-page{
  padding:calc(var(--header-h) + 58px) 34px 120px;
}

.library-intro{text-align:center}

.library-intro h1{
  margin:0;
  color:var(--ivory);
  font-family:"Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
  font-size:18px;
  font-weight:400;
  letter-spacing:.03em;
}

.title-rule{
  width:72px;
  height:.5px;
  margin:13px auto 24px;
  background:var(--gold);
}

.library-intro p{
  margin:0;
  color:var(--muted);
  font-family:"Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
  font-size:12px;
  line-height:1.75;
  letter-spacing:.035em;
}

.library-grid{
  width:min(1040px,100%);
  margin:65px auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:24px;
  row-gap:72px;
}

.library-card{
  display:block;
  color:inherit;
  text-align:center;
  text-decoration:none;
}

.library-image-wrap{
  height:auto;
  min-height:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:transparent;
}

.library-image-wrap img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:205px;
  object-fit:initial;
  border:.5px solid rgba(0,0,0,.92);
  box-shadow:0 2px 10px rgba(0,0,0,.46),0 0 2px rgba(0,0,0,.72);
  transition:filter .16s ease,opacity .16s ease;
}

.library-card:hover .library-image-wrap img{filter:brightness(1.09)}

.library-card h2{
  margin:18px 0 8px;
  color:var(--gold);
  font-family:"Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
  font-size:18px;
  font-weight:400;
  letter-spacing:.015em;
}

.library-card p{
  margin:0;
  color:var(--muted);
  font-family:"Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
  font-size:12px;
  line-height:1.55;
}

.library-finishing-rule{
  width:min(100%,var(--standard-content-width,1040px));
  height:0;
  margin:clamp(48px,5vw,68px) auto 34px;
  border-top:.5px solid rgba(229,212,154,.72);
}

@media(max-width:980px) and (min-width:720px){
  .library-page{padding-left:22px;padding-right:22px}
  .library-image-wrap img{max-height:170px}
}

@media(max-width:719px){
  .library-page{
    padding:calc(var(--header-h) + 42px) 18px 80px;
  }
  .library-intro p{line-height:1.7}
  .library-intro p br{display:none}
  .library-grid{
    width:min(430px,100%);
    margin-top:48px;
    grid-template-columns:1fr;
    row-gap:52px;
  }
  .library-image-wrap img{
    max-width:100%;
    max-height:260px;
  }
  .library-card h2{margin-top:16px}
  .library-card p br{display:none}
}


/* LIBRARY MASTER — CATEGORY HEADINGS: PALE AT REST → GOLD ON HOVER
   Approved interaction language test.
   Image retains existing 16% darkening; descriptions remain unchanged. */
.library-card h2{
  color:#eee9df !important;
  text-shadow:none !important;
  transition:color 220ms ease !important;
}

@media (hover:hover) and (pointer:fine){
  .library-card:hover h2{
    color:#e5d49a !important;
  }
}

.library-card:focus-visible h2{
  color:#e5d49a !important;
}


/* =========================================================
   LIBRARY MASTER — FINAL LOCKED CATEGORY INTERACTION
   =========================================================
   - category headings rest pale/ivory
   - category headings transition to established gold on hover/focus
   - 220ms transition
   - existing 16% image darkening remains
   - descriptive text remains unchanged
   - no additional rules, glow, movement or scaling
   ========================================================= */
.library-card h2{
  color:#eee9df !important;
  text-shadow:none !important;
  transition:color 220ms ease !important;
}

@media (hover:hover) and (pointer:fine){
  .library-card:hover h2{
    color:#e5d49a !important;
  }
}

.library-card:focus-visible h2{
  color:#e5d49a !important;
}


/* =========================================================
   LIBRARY MASTER — FINAL CATEGORY IMAGE HOVER
   Approved photographic interaction:
   16% darkening on hover/focus (brightness 0.84)
   no zoom, movement, glow or border change
   ========================================================= */
.library-card .library-image-wrap img{
  transition:filter 220ms ease !important;
}

@media (hover:hover) and (pointer:fine){
  .library-card:hover .library-image-wrap img{
    filter:brightness(.84) !important;
  }
}

.library-card:focus-visible .library-image-wrap img{
  filter:brightness(.84) !important;
}


/* =========================================================
LIBRARY LANDING — TWO-COLUMN INTERMEDIATE LAYOUT V1
Prevents orphaned words while preserving desktop and mobile.
========================================================= */
@media(max-width:980px) and (min-width:720px){
  .library-grid{
    width:min(754px,100%);
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:32px;
    row-gap:60px;
  }
  .library-image-wrap img{
    max-height:205px;
  }
  .library-card p{
    max-width:32em;
    margin-left:auto;
    margin-right:auto;
    text-wrap:balance;
  }
  .library-card p br{
    display:none;
  }
}