/* look-3d-object showpiece: RIPE kit (sand page, near-black green ink, sage + butter pastels, Anton / Instrument Serif / Inter). */
:root { --sand: #efe5d4; --cream: #fff7eb; --ink: #0a1714; --sage: #bbd0b7; --sage-deep: #61805b; --butter: #fff8bb; --orange: #ed7538; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--sand); color: var(--ink); font: 400 16px/1.45 "Inter", system-ui, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
.stage { height: 100svh; min-height: 560px; display: grid; align-content: center; justify-items: center; row-gap: clamp(28px, 5.4vh, 66px); overflow: clip; }
.kicker { margin: 0; font: 700 13px/1 "Inter", sans-serif; letter-spacing: 1.25px; text-transform: uppercase; color: var(--sage-deep); }
.table { position: relative; display: grid; place-items: center; width: calc(352px * var(--k)); height: calc(517px * var(--k)); }
.fit { scale: var(--k); transform-origin: 50% 50%; }
.shadow { position: absolute; left: 6%; right: 6%; bottom: -5%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 23, 20, .28), rgba(10, 23, 20, 0)); filter: blur(6px); }

.l3d-book {
  --book-cover: var(--sage); --book-spine: #aac2a5; --book-board-edge: #a9bfa4;
  --book-back: var(--ink); --book-back-in: #050c0a; --book-cover-in: #2d3b33;
  --book-paper: #fbf5e9; --book-paper-line: #ddd3c1;
  touch-action: pan-y;
}
.cv { position: absolute; inset: 0; padding: 30px 26px 26px 40px; display: flex; flex-direction: column; color: var(--ink); }
.cv .vol, .cv .no { font: 700 11px/1 "Inter", sans-serif; letter-spacing: 1.25px; text-transform: uppercase; opacity: .7; }
.cv h2 { margin: 26px 0 0; font: 400 78px/.88 "Anton", sans-serif; text-transform: uppercase; letter-spacing: -.005em; }
.cv p { margin: 18px 0 0; max-width: 15em; font: italic 400 22px/1.08 "Instrument Serif", serif; }
.cv .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.seal { width: 86px; aspect-ratio: 1; --pfl-foil-ink: #1f4a3a; --pfl-foil-glint: rgb(255 248 187 / .85);
  --pfl-foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 3a47 47 0 1 1 0 94a47 47 0 1 1 0-94zm0 9a38 38 0 1 0 0 76a38 38 0 1 0 0-76z'/%3E%3Cpath d='M50 20L56.5 43.5L80 50L56.5 56.5L50 80L43.5 56.5L20 50L43.5 43.5Z'/%3E%3C/svg%3E"); }
.bk { position: absolute; inset: 0; padding: 44px 40px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: var(--cream); text-align: center; }
.bk .quote { margin: 40px 0 0; font: italic 400 34px/1.05 "Instrument Serif", serif; }
.bk .seal { width: 70px; --pfl-foil-ink: #8fa98a; --pfl-foil-glint: rgb(255 255 255 / .75); }
.l3d-spine span { position: absolute; inset: 0; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 22px/1 "Anton", sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.pill { display: inline-block; padding: 16px 26px; border-radius: 999px; background: var(--butter); color: var(--ink); text-decoration: none;
  font: 700 13px/1 "Inter", sans-serif; letter-spacing: 1.25px; text-transform: uppercase; }