/* Collectanea V4.0.4 · library material refinement
   Fine-grained walnut, aligned shelf architecture, restrained Gothic detailing. */
:root{
  --ct404-walnut:#4b3020;
  --ct404-walnut-dark:#23150d;
  --ct404-walnut-edge:#6b4932;
  --ct404-gold:rgba(204,168,119,.23);
}

/* One continuous architectural wall on desktop; no clipped half-bays. */
#libraryRoom .ct404-bookcase-run{
  display:grid!important;
  grid-template-columns:repeat(var(--bay-count,1),minmax(0,1fr))!important;
  gap:0!important;
  width:100%!important;
  overflow:visible!important;
  padding:12px 10px 42px!important;
  align-items:stretch!important;
}
#libraryRoom .ct404-bookcase-bay{
  position:relative!important;
  flex:none!important;
  width:auto!important;
  min-width:0!important;
  padding:58px 31px 50px!important;
  margin:0!important;
  border-radius:0!important;
  border:1px solid #21140d!important;
  border-left-width:0!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.20),transparent 8%,transparent 92%,rgba(0,0,0,.22)),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px),
    url('assets/v404/walnut-vertical.jpg') center/460px 1225px repeat!important;
  box-shadow:
    0 26px 36px rgba(28,18,11,.22),
    inset 0 0 0 1px rgba(154,108,72,.10),
    inset 0 0 24px rgba(14,8,5,.17)!important;
  scroll-snap-align:none!important;
}
#libraryRoom .ct404-bookcase-bay:first-child{border-left-width:1px!important;border-radius:3px 0 0 3px!important}
#libraryRoom .ct404-bookcase-bay:last-child{border-radius:0 3px 3px 0!important}

/* Continuous, fine vertical uprights. They run the entire furniture height. */
#libraryRoom .ct404-bookcase-bay:before,
#libraryRoom .ct404-bookcase-bay:after{
  top:42px!important;
  bottom:43px!important;
  width:25px!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.065),transparent 35%,rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 6px),
    url('assets/v404/walnut-vertical.jpg') center/170px 455px repeat-y!important;
  border-color:rgba(28,17,10,.72)!important;
  box-shadow:inset -3px 0 5px rgba(0,0,0,.22),3px 0 7px rgba(0,0,0,.12)!important;
}
#libraryRoom .ct404-bookcase-bay:before{left:4px!important}
#libraryRoom .ct404-bookcase-bay:after{right:4px!important}

/* Subtle Gothic lancet grooves in uprights: decorative, not ecclesiastical. */
#libraryRoom .ct404-lancet{
  position:absolute;z-index:7;top:73px;bottom:75px;width:22px;pointer-events:none;
  background:url('assets/v404/gothic-lancet.svg') center 12px/17px 118px no-repeat;
  opacity:.46;
}
#libraryRoom .ct404-lancet.left{left:6px}
#libraryRoom .ct404-lancet.right{right:6px;transform:scaleX(-1)}

/* Cornice: grain follows the long horizontal board, not stretched vertically. */
#libraryRoom .ct404-cornice{
  left:-5px!important;right:-5px!important;height:52px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 24%,rgba(0,0,0,.23)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 6px),
    url('assets/v404/walnut-horizontal.jpg') center/940px 352px repeat-x!important;
  box-shadow:0 7px 12px rgba(23,14,8,.28),inset 0 -4px 6px rgba(0,0,0,.16)!important;
}
#libraryRoom .ct404-cornice:before,
#libraryRoom .ct404-cornice:after,
#libraryRoom .ct403-crown-ornament{display:none!important}
#libraryRoom .ct404-gothic-cornice{
  position:absolute;left:10%;right:10%;bottom:3px;height:38px;
  background:url('assets/v404/gothic-cornice.svg') center/280px 47px no-repeat;
  opacity:.42;pointer-events:none;
}

/* Shelf openings and boards share identical slot heights across every bay.
   This makes horizontal dividers line up continuously across the whole wall. */
#libraryRoom .ct404-bay-body{display:grid!important;gap:0!important}
#libraryRoom .ct404-real-shelf{
  height:calc(var(--row-book-h) + 51px)!important;
  border-top:1px solid rgba(120,78,49,.08)!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.29),transparent 7%,transparent 93%,rgba(0,0,0,.30)),
    linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.08) 28%,rgba(255,255,255,.012) 72%,rgba(0,0,0,.17)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.01) 0 1px,transparent 1px 8px),
    url('assets/v404/walnut-vertical.jpg') center/460px 1225px repeat!important;
  box-shadow:inset 10px 0 16px rgba(0,0,0,.19),inset -10px 0 16px rgba(0,0,0,.20),inset 0 12px 19px rgba(0,0,0,.24)!important;
}
#libraryRoom .ct404-shelf-back{
  left:12px!important;right:12px!important;bottom:27px!important;
  padding:0 3px!important;
  gap:1px!important;
  width:auto!important;
  align-items:flex-end!important;
}
#libraryRoom .ct404-shelf-fill{display:block;flex:1 1 8px;min-width:4px;height:1px;align-self:flex-end}
#libraryRoom .ct404-shelf-plank{
  left:-1px!important;right:-1px!important;bottom:0!important;height:28px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 16%,rgba(0,0,0,.27)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 7px),
    url('assets/v404/walnut-horizontal.jpg') center/980px 368px repeat-x!important;
  border:1px solid #21140d!important;
  border-top-color:rgba(179,129,83,.30)!important;
  box-shadow:0 -5px 8px rgba(0,0,0,.26),0 7px 9px rgba(0,0,0,.33),inset 0 2px rgba(255,255,255,.04)!important;
}

/* The old short brown bookend-bars caused the impression of half-finished dividers. */
#libraryRoom .ct403-bookend{display:none!important}

/* Fine-grain plinth with a very restrained pointed-arch relief. */
#libraryRoom .ct404-plinth{
  left:-5px!important;right:-5px!important;height:44px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.24)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px),
    url('assets/v404/walnut-horizontal.jpg') center/940px 352px repeat-x!important;
}
#libraryRoom .ct404-gothic-base{
  position:absolute;inset:4px 9% 4px;
  background:url('assets/v404/gothic-base-panel.svg') center/360px 74px repeat-x;
  opacity:.33;pointer-events:none;
}

/* Finer book contact shadows so every volume feels seated on the board. */
#libraryRoom .ct403-book-spine{
  box-shadow:
    inset 1px 0 rgba(255,255,255,.10),
    inset -2px 0 rgba(0,0,0,.24),
    0 2px 1px rgba(0,0,0,.34),
    3px 3px 4px rgba(0,0,0,.20)!important;
}
#libraryRoom .ct403-book-spine:after{height:3px!important;bottom:-2px!important;background:rgba(9,5,3,.82)!important;filter:blur(.2px)!important}

/* Full-width furniture base transition. */
#libraryRoom .ct402-library-skirting{
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.18)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px),
    url('assets/v404/walnut-horizontal.jpg') center/980px 368px repeat-x!important;
}


/* Furniture joins are continuous and full-width: no short brown dividers ending mid-shelf. */
#libraryRoom .ct404-bookcase-bay + .ct404-bookcase-bay{box-shadow:-1px 0 0 rgba(189,137,91,.12),0 26px 36px rgba(28,18,11,.22),inset 0 0 0 1px rgba(154,108,72,.10),inset 0 0 24px rgba(14,8,5,.17)!important}
#libraryRoom .ct404-shelf-plank:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(205,151,101,.17) 12%,rgba(205,151,101,.17) 88%,rgba(255,255,255,.02));pointer-events:none}
#libraryRoom .ct404-cornice,#libraryRoom .ct404-plinth,#libraryRoom .ct404-shelf-plank{filter:saturate(.92) contrast(1.04)}
@media(max-width:1050px) and (min-width:761px){
  #libraryRoom .ct404-bookcase-run{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))!important;gap:14px!important}
  #libraryRoom .ct404-bookcase-bay{border-left-width:1px!important;border-radius:3px!important}
}

@media(max-width:760px){
  /* On phones retain one-bay horizontal swipe, but each bay itself stays complete. */
  #libraryRoom .ct404-bookcase-run{
    display:flex!important;gap:14px!important;overflow-x:auto!important;overflow-y:visible!important;
    padding:10px 12px 34px!important;scroll-snap-type:x mandatory!important;
  }
  #libraryRoom .ct404-bookcase-bay{
    flex:0 0 88vw!important;min-width:88vw!important;width:88vw!important;
    padding:52px 27px 45px!important;border-left-width:1px!important;border-radius:3px!important;
    scroll-snap-align:center!important;
  }
  #libraryRoom .ct404-lancet{opacity:.33}
  #libraryRoom .ct404-gothic-cornice{background-size:230px 40px;opacity:.34}
  #libraryRoom .ct404-gothic-base{opacity:.24}
}

/* A faint pointed arch is carved into the top of each bay. It remains behind the books. */
#libraryRoom .ct404-bay-body{position:relative!important}
#libraryRoom .ct404-bay-body:before{
  content:"";position:absolute;z-index:1;left:7%;right:7%;top:-2px;height:82px;
  background:url('assets/v404/gothic-spandrel.svg') center top/100% 76px no-repeat;
  opacity:.30;pointer-events:none;
}
#libraryRoom .ct404-real-shelf{z-index:2}

/* Books are arranged in a few natural clusters across the complete shelf width.
   Real spine widths stay proportional; only the empty breathing space is distributed. */
#libraryRoom .ct404-shelf-back{justify-content:space-between!important;gap:clamp(8px,2.2vw,24px)!important}
#libraryRoom .ct404-book-cluster{display:flex;align-items:flex-end;gap:1px;flex:0 0 auto;height:100%;position:relative}
#libraryRoom .ct404-book-cluster:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:4px;background:radial-gradient(ellipse at center,rgba(8,4,2,.34),transparent 72%);filter:blur(1px);pointer-events:none}
#libraryRoom .ct404-book-cluster .ct403-book-spine{align-self:flex-end!important}
#libraryRoom .ct404-shelf-fill{display:none!important}

/* Final V4.0.4 material correction: the old V4.0.2 shelf-back pseudo-layer used
   the coarse walnut texture. Replace it completely so no oversized grain survives. */
#libraryRoom .ct404-real-shelf:before{
  left:0!important;right:0!important;top:0!important;bottom:27px!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.26),transparent 8%,transparent 92%,rgba(0,0,0,.27)),
    linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.06) 28%,rgba(255,255,255,.012) 70%,rgba(0,0,0,.15)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.008) 0 1px,transparent 1px 9px),
    url('assets/v404/walnut-vertical.jpg') center/460px 1225px repeat!important;
  filter:saturate(.90) brightness(.70) contrast(1.06)!important;
  border:1px solid rgba(20,12,7,.66)!important;
  box-shadow:inset 12px 0 18px rgba(0,0,0,.20),inset -12px 0 18px rgba(0,0,0,.20),inset 0 13px 20px rgba(0,0,0,.25)!important;
}
/* Tiny Gothic joinery details: capital-like points at the top/bottom of uprights. */
#libraryRoom .ct404-lancet:before,
#libraryRoom .ct404-lancet:after{
  content:"";position:absolute;left:50%;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);
  border:1px solid rgba(202,169,126,.28);background:rgba(67,42,26,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)
}
#libraryRoom .ct404-lancet:before{top:-5px}
#libraryRoom .ct404-lancet:after{bottom:-5px}