/* ============================================================
   CONCEPTO P — MATERIALS, UNDER GLASS
   The ledger's stock leaf. A circle is a lens over the sheet, not
   an object in the scene. Selectors stay lmw- so they never meet cp-.
   ============================================================ */

.lib-wall-host{
  position:absolute; inset:0; z-index:20;
  overflow:hidden; cursor:crosshair;
  overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
.lib.is-detail .lib-wall-host,
.lib-wall-host.is-paused{ visibility:hidden; pointer-events:none; }
.lib-wall-host.is-open{ touch-action:none; }
.lib-wall-host *{ margin:0; padding:0; box-sizing:border-box; }

#lmw-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#lmw-reel{ position:absolute; inset:0; pointer-events:none; }
.lmw-item{
  position:absolute; display:block; border-radius:50%;
  background:transparent; border:0; color:transparent;
  font-size:0; line-height:0; text-decoration:none;
  pointer-events:auto; cursor:crosshair; outline:none;
}
.lmw-item:focus-visible{ outline:1px solid rgba(250,240,230,.72); outline-offset:8px; }
.lib-wall-host.is-open .lmw-item{ pointer-events:none; }

#lmw-grain{
  position:absolute; inset:-80px; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
}
#lmw-cap,#lmw-back{
  font-family:'Instrument Serif', 'Bodoni Moda', Georgia, serif;
  font-size:11px; letter-spacing:.18em; text-indent:0;
  color:#F4EDE0; mix-blend-mode:normal; white-space:normal;
}
#lmw-cap{
  position:absolute; left:0; top:0; pointer-events:none; opacity:0;
  max-width:min(36ch, 52vw); text-align:center; line-height:1.35;
  transition:opacity .55s var(--ease, cubic-bezier(.22,.68,.26,1));
  transform:translateX(-50%);
  text-shadow:0 1px 0 rgba(20,16,12,.45);
}
#lmw-back{
  position:absolute; left:28px; top:26px; background:none; border:0; cursor:pointer;
  padding:8px 0; opacity:0; pointer-events:none;
  transition:opacity .6s var(--ease, cubic-bezier(.22,.68,.26,1)); outline:none;
  z-index:3;
}
#lmw-back:focus-visible{ outline:1px solid rgba(250,240,230,.72); outline-offset:6px; }
.lib-wall-host.is-open #lmw-back{ opacity:.82; pointer-events:auto; }
#lmw-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

#lmw-fb{ position:absolute; inset:0; display:none; }
.lmw-fbd{ position:absolute; border-radius:50%; overflow:hidden; background:#111; }
.lmw-fbd canvas{ width:100%; height:100%; display:block; }

.lib.has-wall .lib-belt,
.lib.has-wall .lib-gl,
.lib.has-wall .lib-index{ display:none !important; }
.lib.has-wall .lib-top{ z-index:30; pointer-events:none; }
.lib.has-wall .lib-top .lib-head{ pointer-events:none; }
.lib.has-wall .lib-foot{ z-index:30; }
.lib.has-wall.is-open .lib-top{ opacity:0; transition:opacity .6s var(--ease, cubic-bezier(.22,.68,.26,1)); }
.lib.has-wall.is-open .lib-foot-l,
.lib.has-wall.is-open .lib-foot-m{ opacity:0; pointer-events:none; }

.lib.has-wall{
  background:#322a22;
}
.lib.has-wall .lib-desk{
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(255,220,180,.10), transparent 62%),
    #322a22;
}
.lib.has-wall .lib-count{ display:none; }
.lib.has-wall .lib-name{
  letter-spacing:.01em;
}

/* folio: pressed rag, pill well, string-and-button, acetate or terracotta */
.lib.has-wall .lib-ds.is-folio{
  --fg:#221C16;
  --fg2:#5A5348;
  background-color:#F3EEE4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(70,58,42,.14),
    inset -1px 0 0 rgba(70,58,42,.10),
    0 0 0 1px rgba(36,28,18,.22),
    0 1px 0 rgba(255,255,255,.28),
    0 3px 0 rgba(132,114,90,.14),
    0 5px 0 rgba(118,100,76,.16),
    0 22px 48px -18px rgba(12,8,4,.48);
}
.lib.has-wall .lib-ds.is-stocked{
  background-image:
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.48), rgba(255,255,255,0) 55%),
    linear-gradient(168deg, rgba(255,252,244,.22) 0%, rgba(255,252,244,0) 42%);
}
.lib.has-wall .lib-ds-skin{
  inset:0; z-index:1; opacity:0; pointer-events:none;
  background-image:var(--stock); background-size:cover; background-position:center;
  mix-blend-mode:soft-light;
}
.lib.has-wall .lib-ds.is-stocked .lib-ds-skin{ opacity:.38; }
.lib.has-wall .lib-ds-well{
  left:clamp(28px,4vw,56px); right:clamp(28px,4vw,56px);
  top:clamp(28px,3.6vw,52px); height:clamp(108px,15.5vh,164px);
  z-index:2; border-radius:80px / 62px; pointer-events:none;
  box-shadow:
    inset 0 2px 0 rgba(70,56,38,.28),
    inset 0 -1px 0 rgba(255,255,255,.92),
    inset 2px 0 0 rgba(70,56,38,.12),
    inset -1px 0 0 rgba(255,255,255,.62),
    0 1px 0 rgba(255,255,255,.82),
    0 -0.8px 0 rgba(50,40,28,.16);
  background:linear-gradient(180deg, rgba(40,32,22,.055), rgba(255,255,255,.08) 48%, rgba(40,32,22,.04));
}
.lib.has-wall .lib-ds-tie{
  position:absolute; left:clamp(22px,3vw,40px); top:clamp(18px,2.4vw,28px);
  width:52px; height:86px; z-index:4; pointer-events:none;
}
.lib.has-wall .lib-ds-washer{
  position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%, #fffef8 0 22%, #ebe4d6 46%, #d8cbb6 100%);
  box-shadow:
    0 0 0 1px rgba(40,32,22,.18),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(70,56,38,.16),
    0 1px 1px rgba(20,16,10,.08);
}
.lib.has-wall .lib-ds-washer::after{
  content:""; position:absolute; left:50%; top:50%; width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:#d8d2c6;
  box-shadow:inset 0 0 0 1px rgba(40,32,22,.28), 0 0 0 1px rgba(255,255,255,.7);
}
.lib.has-wall .lib-ds-washer.is-b{ top:auto; bottom:0; }
.lib.has-wall .lib-ds-cord{
  position:absolute; left:8px; top:16px; width:2px; height:54px;
  background:#f4f0e8;
  box-shadow:1px 0 0 rgba(40,32,22,.12), -0.5px 0 0 rgba(255,255,255,.8);
  transform:rotate(2deg);
}
.lib.has-wall .lib-ds-acetate{
  display:none; inset:8% 7% auto 38%; height:46%; z-index:4; pointer-events:none;
  border-radius:1px 1px 40% 1px;
  background:
    linear-gradient(118deg, rgba(255,255,255,.02), rgba(255,255,255,.34) 42%, rgba(255,255,255,.04) 58%, rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 0 0 1px rgba(255,255,255,.22);
  mix-blend-mode:screen; opacity:.55;
}
.lib.has-wall .lib-ds.is-acetate .lib-ds-acetate{ display:block; }
.lib.has-wall .lib-ds.is-board{
  background-color:#E6D0BC;
  --fg:#2A1A12; --fg2:#6A4A38;
}
.lib.has-wall .lib-ds.is-board.is-stocked{
  background-image:
    radial-gradient(120% 80% at 12% 0%, rgba(255,232,214,.28), transparent 55%);
}
.lib.has-wall .lib-ds.is-board .lib-ds-well{
  box-shadow:
    inset 0 1px 0 rgba(90,40,24,.22),
    inset 0 -1px 0 rgba(255,236,220,.7),
    0 1px 0 rgba(255,236,220,.55);
}
.lib.has-wall .lib-ds .lib-ds-name{
  color:#221C16; -webkit-text-fill-color:#221C16;
  background-image:none; background-clip:unset; -webkit-background-clip:unset;
  filter:none;
  text-shadow:
    0 1.15px 0 rgba(255,252,246,.96),
    0 -0.9px 0 rgba(48,38,26,.34),
    0 0 1.2px rgba(20,14,8,.16);
}
.lib.has-wall .lib-ds .lib-ds-name.is-found{
  letter-spacing:-.016em;
  background-image:none;
  filter:none;
  text-shadow:
    0 1.25px 0 rgba(255,252,246,.98),
    0 -1px 0 rgba(40,32,22,.40),
    0 0 1.4px rgba(16,12,8,.18);
}
.lib.has-wall .lib-detail{ background:rgba(18,15,12,.92); }

@media (prefers-reduced-motion:reduce){
  #lmw-grain{ display:none; }
}