/* A book you can pick up: closed in the hero, and in the viewer it opens to the
   contents and turns over to the back cover. Sizes hang off --w (one page width). */
.b3-stage { perspective: 1900px; display: grid; place-items: center; }
.b3 { --t: calc(var(--w) * .07); width: var(--w); height: calc(var(--w) * 1.312); position: relative; transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.3, .1, .2, 1); transform: rotateY(-27deg) rotateX(5deg); font-size: calc(var(--w) / 31); }
.b3 > * { position: absolute; }
.b3-front { inset: 0; transform-origin: left center; transform-style: preserve-3d; transform: translateZ(calc(var(--t) / 2));
  transition: transform .9s cubic-bezier(.3, .1, .2, 1); }
.b3-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.b3-out { background: #fff url(/cover.jpg) center / cover no-repeat; box-shadow: inset 4px 0 6px -3px rgba(0,0,0,.25); }
.b3-in { transform: rotateY(180deg); }
.b3-pages { inset: .8% .8% .8% 0; transform: translateZ(calc(var(--t) / 2 - 1px)); }
.b3-back { inset: 0; transform: translateZ(calc(var(--t) / -2)) rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: inset -4px 0 6px -3px rgba(0,0,0,.25); overflow: hidden; }
.b3-spine { left: 0; top: 0; width: var(--t); height: 100%; transform: translateX(calc(var(--t) / -2)) rotateY(-90deg); background: #fff;
  box-shadow: inset 0 0 calc(var(--t) / 3) rgba(0,0,0,.14); display: grid; place-items: center; overflow: hidden; }
.b3-spine span { writing-mode: vertical-rl; font: 700 calc(var(--t) * .42) / 1 "Schibsted Grotesk", Arial, sans-serif; color: #1c1c1a; white-space: nowrap; letter-spacing: .01em; }
.b3-edge { background: repeating-linear-gradient(90deg, #f4f1ea 0 1px, #dcd8cf 1px 2px); }
.b3-edge.r { right: 0; top: .8%; width: var(--t); height: 98.4%; transform: translateX(calc(var(--t) / 2 - .8%)) rotateY(90deg); }
.b3-edge.t, .b3-edge.b { left: 0; width: 99.2%; height: var(--t); background: repeating-linear-gradient(0deg, #f4f1ea 0 1px, #dcd8cf 1px 2px); }
.b3-edge.t { top: .8%; transform: translateY(calc(var(--t) / -2)) rotateX(90deg); }
.b3-edge.b { bottom: .8%; transform: translateY(calc(var(--t) / 2)) rotateX(-90deg); }
.b3-shadow { left: 4%; right: -6%; bottom: -5%; height: 9%; background: radial-gradient(closest-side, rgba(0,0,0,.34), transparent); transform: translateZ(calc(var(--t) * -1.2)) rotateX(90deg); filter: blur(6px); }

/* states */
.b3[data-view="open"] { transform: translateX(50%) rotateY(0deg) rotateX(0deg); }
.b3[data-view="open"] .b3-front { transform: translateZ(calc(var(--t) / 2)) rotateY(-179deg); }
.b3[data-view="back"] { transform: rotateY(-153deg) rotateX(5deg); }

/* paper */
.b3-paper { background: #fffdf8; color: #1c1c1a; padding: 9% 9% 7%; font-family: "Source Serif 4", Georgia, serif; line-height: 1.35; display: flex; flex-direction: column; }
.b3-in.b3-paper { box-shadow: inset -14px 0 18px -14px rgba(0,0,0,.28); }
.b3-pages.b3-paper { box-shadow: inset 14px 0 18px -14px rgba(0,0,0,.28); }
.b3-paper h3 { font: 600 1.55em/1.1 "Schibsted Grotesk", Arial, sans-serif; margin: 0 0 .9em; text-align: right; letter-spacing: 0; }
.b3-toc { list-style: none; margin: 0; padding: 0; font: 600 1em/1.25 "Schibsted Grotesk", Arial, sans-serif; }
.b3-toc li { display: flex; align-items: baseline; gap: .5em; padding: .42em 0; }
.b3-toc li::after { content: ""; order: 2; flex: 1; border-bottom: 1px dotted #777; transform: translateY(-.2em); }
.b3-toc .n { width: 1.6em; flex: none; color: #0b7a80; font-variant-numeric: tabular-nums; }
.b3-toc .p { order: 3; font-variant-numeric: tabular-nums; font-weight: 500; }
.b3-quotes { display: flex; flex-direction: column; gap: 1.15em; margin: 0; }
.b3-quotes blockquote { margin: 0; font-size: 1.08em; }
.b3-quotes p { margin: 0 0 .3em; }
.b3-quotes cite { display: block; font: 500 .82em/1.3 "Schibsted Grotesk", Arial, sans-serif; font-style: normal; color: #555; }
.b3-foot { margin-top: auto; font: 400 .74em/1.3 "Schibsted Grotesk", Arial, sans-serif; color: #777; }

/* back cover */
.b3-back.b3-paper { background: #fff; padding: 10% 9% 7%; }
.b3-back.b3-img { background: #fff center / cover no-repeat; padding: 0; }
.b3-back h3 { text-align: left; font-size: 1.5em; color: #0b7a80; margin-bottom: .6em; }
.b3-back p { margin: 0 0 .7em; }
.b3-back ul { margin: 0 0 .8em; padding-left: 1.1em; }
.b3-back li { margin-bottom: .22em; }
.b3-back .bio { border-top: 1px solid #1c1c1a; padding-top: .7em; margin-top: auto; font-size: .9em; }
.b3-back .isbn { font: 500 .78em/1.3 "JetBrains Mono", monospace; color: #555; margin: .5em 0 0; }

/* hero: the closed book is a button that opens the viewer */
.b3-hero { --w: min(290px, 62vw); border: 0; background: none; padding: 26px 0 8px; cursor: pointer; display: grid; justify-items: center; gap: 22px; width: 100%; color: inherit; }
.b3-hero:hover .b3, .b3-hero:focus-visible .b3 { transform: rotateY(-36deg) rotateX(6deg); }
.b3-hero .b3-hint { font: 600 15px/1 "Schibsted Grotesk", Arial, sans-serif; color: var(--teal, #0b7a80); border-bottom: 2px solid currentColor; padding-bottom: 3px; }

/* viewer */
dialog.b3-dialog { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; overflow: hidden; color: #fff; }
dialog.b3-dialog::backdrop { background: rgba(16, 22, 22, .9); }
.b3-view { --w: min(390px, calc((100vw - 56px) / 2), calc((100dvh - 150px) / 1.312)); height: 100%; display: grid; grid-template-rows: 1fr auto; }
.b3-view .b3-stage { min-height: 0; overflow: hidden; }
.b3-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.b3-bar button { font: 600 15px/1 "Schibsted Grotesk", Arial, sans-serif; color: #fff; background: none; border: 2px solid #fff; border-radius: 4px; padding: 11px 16px; cursor: pointer; }
.b3-bar button:hover, .b3-bar button[aria-pressed="true"] { background: #fff; color: #1c1c1a; }
.b3-bar .x { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.b3-bar .side { display: none; }
@media (max-width: 700px) {
  /* one page at a time on a phone: the open book slides between its two pages */
  .b3-view { --w: min(330px, calc(100vw - 44px), calc((100dvh - 190px) / 1.312)); }
  .b3[data-view="open"] { transform: translateX(0); }
  .b3[data-view="open"][data-side="left"] { transform: translateX(100%); }
  .b3-view[data-view="open"] .b3-bar .side { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { .b3, .b3-front { transition: none; } }