/* =========================================================================
   The Demand Side als plank met edities (4 november 2026, op Hugo's akkoord
   live; ook op de homepage).

   Elke editie staat als dun gebonden nummer op de plank, rug naar links. Komt
   de plank in beeld, dan draait elk nummer één keer van de rug naar de omslag.
   Wie een nummer aanwijst, ziet het naar zich toe draaien en het licht over de
   omslag meeschuiven. Zonder JavaScript, op een aanraakscherm of met "minder
   beweging" staan de nummers stil in dezelfde houding. De omslagen zijn de
   echte PDF-omslagen.

   Het boek is zes vlakken in 3D (omslag, rug, snede, kop, voet, achterkant).
   Elk zijvlak draait om zijn eigen rand en schuift een halve dikte terug, zodat
   er geen boekbreedte in pixels nodig is en het op elke maat klopt.
   ========================================================================= */

.shelf{
  --t:8px;          /* dikte van het nummer */
  --rest:28deg;     /* hoek in rust: rug en omslag allebei zichtbaar */
  margin:clamp(26px,3.2vw,40px) 0 0;
  padding:0 0 clamp(30px,4vw,56px);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,248px));
  column-gap:clamp(44px,6vw,96px);
  row-gap:clamp(52px,6vw,80px);
}

/* Homepage (4 nov 2026): dezelfde boeken in de publicatieband, met de bestaande
   onderschriften. Alleen de maten; de indeling blijft die van .publication-covers. */
.books{--t:8px;--rest:28deg}
.books .book{margin:0 0 26px}
/* de vloerschaduw van het rechterboek steekt uit; de band knipt dat af, zoals .field-sec
   op The Demand Side (anders 9 px zijwaarts scrollen op de telefoon) */
.publication-band{overflow:hidden;overflow:clip}
/* style.css geeft elke span in .publication-cover marge; de boekvlakken zijn spans */
.book .book-floor,.book .book-body,.book .book-cast,.book .book-face{margin:0}

.volume{position:relative;display:block;color:inherit;text-decoration:none;
  border-radius:3px;-webkit-tap-highlight-color:transparent}
.volume[hidden]{display:none}
.volume:focus{outline:none}
.volume:focus-visible{outline:2px solid #eba179;outline-offset:12px}

/* ---- het boek ---------------------------------------------------------- */

.book{position:relative;display:block;aspect-ratio:640/906;
  perspective:1100px;perspective-origin:50% 28%;
  margin:0 0 clamp(34px,3.4vw,46px)}

.book-body{position:absolute;inset:0;transform-style:preserve-3d;
  transform-origin:0 50%;   /* het nummer draait op zijn rug */
  transform:translate3d(0,var(--lift,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,var(--rest)))}

.book-face{position:absolute;display:block;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* omslag */
.book-cover{inset:0;transform:translateZ(calc(var(--t) / 2));
  background:#f4f3ee;border-radius:0 2px 2px 0;overflow:hidden}
.book-cover img{display:block;width:100%;height:100%}
/* scharnierlijn bij de rug, een vleug licht van linksboven, en wat schaduw
   zolang het nummer van het licht af staat (--shade, gezet door het script) */
.book-cover::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,25,23,.24) 0,rgba(20,25,23,.05) 1.3%,
      rgba(255,255,255,.34) 2.4%,rgba(20,25,23,.13) 3.4%,rgba(20,25,23,0) 5.6%),
    radial-gradient(130% 75% at 14% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 62%),
    linear-gradient(180deg,rgba(0,0,0,0) 52%,rgba(0,0,0,.06)),
    linear-gradient(rgba(var(--shade-rgb,6,26,28),var(--shade,.09)),rgba(var(--shade-rgb,6,26,28),var(--shade,.09)))}
/* glans die met de aanwijzer meeloopt */
.book-cover::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 60%);
  background-size:300% 100%;
  background-position:calc(50% - var(--sx,0) * 90%) 0;
  mix-blend-mode:soft-light;opacity:var(--sheen,0)}

/* rug */
.book-spine{top:0;bottom:0;left:0;width:var(--t);transform-origin:0 50%;
  transform:translateZ(calc(var(--t) / -2)) rotateY(-90deg);
  background:linear-gradient(90deg,#c9c3b4,#e4dfd3 40%,#d8d2c4);
  box-shadow:inset 0 -3px 0 #a83c19}
/* snede: de bladranden */
.book-pages{top:1px;bottom:1px;right:0;width:var(--t);transform-origin:100% 50%;
  transform:translateZ(calc(var(--t) / -2)) rotateY(90deg);
  background:repeating-linear-gradient(90deg,#f7f5ef 0 1px,#d9d4c7 1px 1.5px)}
.book-top{left:0;right:0;top:0;height:var(--t);transform-origin:50% 0;
  transform:translateZ(calc(var(--t) / -2)) rotateX(90deg);
  background:repeating-linear-gradient(0deg,#f4f2ec 0 1px,#dad5c8 1px 1.5px)}
.book-bottom{left:0;right:0;bottom:0;height:var(--t);transform-origin:50% 100%;
  transform:translateZ(calc(var(--t) / -2)) rotateX(-90deg);background:#bdb7a8}
.book-back{inset:0;transform:translateZ(calc(var(--t) / -2)) rotateY(180deg);
  background:#e6e2d7}
/* slagschaduw op de wand erachter; draait mee met het nummer */
.book-cast{position:absolute;inset:0;transform:translateZ(calc(var(--t) / -2 - 1px));
  border-radius:2px;
  box-shadow:
    calc(14px + var(--lift-abs,0px)) calc(20px + var(--lift-abs,0px) * 1.6) calc(34px + var(--lift-abs,0px) * 2.4) -6px var(--cast-c,rgba(2,16,18,.62)),
    3px 5px 10px var(--cast2-c,rgba(2,16,18,.28))}

/* schaduw op de plank, plat onder het nummer */
.book-floor{position:absolute;left:-4%;right:-18%;bottom:-15px;height:30px;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,var(--floor-c,rgba(2,16,18,.62)),transparent);
  filter:blur(3px);transform:scale(var(--floor,1),1);opacity:var(--floor-o,1);
  transform-origin:40% 50%}

/* ---- de tekst onder het nummer ----------------------------------------- */

.volume-text{display:block}
.volume-meta{display:block;font-size:12.5px;color:var(--brand-tint);margin:0 0 10px}
.volume h3{font-size:clamp(19px,1.8vw,23px);font-weight:500;letter-spacing:-.005em;
  line-height:1.25;color:var(--brand-ink);margin:0 0 6px}
.volume p{font-size:13.5px;line-height:1.6;margin:0 0 14px;max-width:34ch;
  color:color-mix(in srgb,var(--brand-ink) 66%,transparent)}
.volume .est{font-size:12.5px;font-weight:600;color:#eba179;white-space:nowrap}
.volume .est::after{content:"→";display:inline-block;margin-left:8px;transition:transform .3s ease}
.volume:hover .est::after,.volume:focus-visible .est::after{transform:translateX(4px)}

/* de lijn boven het inschrijfblok doorgetrokken, zoals de lijnen onder de kopjes */
.field-sec .notify{border-top-style:solid}

/* ---- binnenkomst: van rug naar omslag ---------------------------------- */

@keyframes shelf-turn{
  from{transform:translate3d(0,18px,0) rotateX(0deg) rotateY(84deg)}
  to{transform:translate3d(0,0,0) rotateX(0deg) rotateY(var(--rest))}}
@keyframes shelf-fade{from{opacity:0}to{opacity:1}}
@keyframes shelf-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Tot het script een nummer in beeld ziet, blijft het onzichtbaar. Het kopscript
   haalt shelf-wait na 2,5 s weg als dit script niet laadt: niets blijft verborgen. */
.shelf-wait .volume:not(.is-in) .book,
.shelf-wait .volume:not(.is-in) .volume-text{opacity:0}
/* fill-mode backwards: na afloop neemt de gewone transform (met de variabelen)
   het over, anders zou de laatste stand van de animatie het aanwijzen blokkeren */
.volume.is-in .book{animation:shelf-fade .7s ease backwards;animation-delay:var(--d,0ms)}
.volume.is-in .book-body{animation:shelf-turn 1.8s cubic-bezier(.3,.62,.16,1) backwards;
  animation-delay:var(--d,0ms)}
.volume.is-in .volume-text{animation:shelf-rise .9s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay:calc(var(--d,0ms) + 420ms)}

/* zonder script: dezelfde draai bij aanwijzen, met een gewone overgang */
html:not(.shelf-live) .book-body{transition:transform .8s cubic-bezier(.2,.75,.25,1)}
@media (hover:hover){
  html:not(.shelf-live) .volume:hover .book{--ry:8deg;--lift:-6px}
}
html:not(.shelf-live) .volume:focus-visible .book{--ry:8deg;--lift:-6px}

/* ---- telefoon: nummer links, tekst rechts ------------------------------ */

@media (max-width:600px){
  .books{--t:6px;--rest:24deg}
  .books .book{margin-bottom:20px}
  .books .book{perspective:800px}
  .book-floor{bottom:-11px;height:20px}
  /* alleen de plank op The Demand Side: boek links, tekst rechts */
  .shelf{grid-template-columns:1fr;row-gap:44px;--t:6px;--rest:24deg}
  .shelf .volume{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
    column-gap:22px;align-items:start}
  .shelf .book{margin:0;perspective:800px}
  .shelf .volume h3{font-size:19px}
  .shelf .volume p{max-width:none}
}

/* ---- minder beweging en afdrukken: stil -------------------------------- */

@media (prefers-reduced-motion:reduce){
  .volume.is-in .book,.volume.is-in .book-body,.volume.is-in .volume-text{animation:none}
  .shelf-wait .volume:not(.is-in) .book,
  .shelf-wait .volume:not(.is-in) .volume-text{opacity:1}
  html:not(.shelf-live) .book-body{transition:none}
}
@media print{
  .book-floor,.book-cast{display:none}
  .shelf-wait .volume .book,.shelf-wait .volume .volume-text{opacity:1}
  .volume .book,.volume .book-body,.volume .volume-text{animation:none!important;transition:none!important}
  .volume .book-body{transform:rotateY(var(--rest))!important}
}