:root {
  --paper: #efece4;
  --paper-2: #e6e1d6;
  --navy: #17223a;
  --ink: #1a2233;
  --muted: #6b6f7a;
  --brass: #d0a040;
  --brass-2: #b8892c;
  --line: rgba(23, 34, 58, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --h: min(250px, 33vh); /* book size follows the screen height */
  --w: calc(var(--h) * .68);
  --d: calc(var(--h) * .15);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Source Sans 3', system-ui, sans-serif;
}
@media (max-width: 760px) {
  :root { --h: min(200px, 29vh); }
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* film grain over everything */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-2%)} 60%{transform:translate(-2%,-4%)} 80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)} }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 24px;
  padding: 14px clamp(16px, 3vw, 36px); pointer-events: none;
}
.top > * { pointer-events: auto; }
.brand img { height: 30px; width: auto; }
.top__crumb { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.top__crumb i { font-style: normal; color: var(--brass); margin: 0 6px; }
.top__nav { margin-left: auto; display: flex; gap: 22px; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.top__nav a { text-decoration: none; color: var(--navy); position: relative; }
.top__nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--brass); transition: right .4s var(--ease); }
.top__nav a:hover::after { right: 0; }
.bag-btn { border: 1.5px solid var(--navy); background: transparent; border-radius: 999px; padding: 6px 8px 6px 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; display: inline-flex; gap: 8px; align-items: center; transition: background .3s, color .3s; }
.bag-btn span { background: var(--navy); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; letter-spacing: 0; transition: transform .4s var(--ease); }
.bag-btn:hover { background: var(--navy); color: #fff; }
.bag-btn:hover span { background: var(--brass); }
.bag-btn.bump span { animation: bump .6s var(--ease); }
@keyframes bump { 30% { transform: scale(1.5); background: var(--brass); } }
@media (max-width: 760px) { .top__crumb, .top__nav a { display: none; } .brand img { height: 24px; } }

/* ---------- shelf ---------- */
.shelf { position: relative; height: calc(100vh + var(--steps, 8) * 32vh); }
.stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 45%, #f7f5ef 0%, var(--paper) 55%, var(--paper-2) 100%);
}
.spot {
  position: absolute; width: 60vmax; height: 60vmax; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(208, 160, 64, .16), transparent 60%);
  transform: translate(-50%, -50%); transition: opacity .6s;
}

/* giant halftone side words, like the vertical type in the reference */
.side {
  position: absolute; top: 50%; display: flex; flex-direction: column; align-items: center; line-height: .92;
  font-family: 'Anton', var(--sans); font-size: clamp(48px, 13vh, 150px);
  color: transparent; pointer-events: none; user-select: none;
  background-image: radial-gradient(circle, rgba(23,34,58,.34) 1.1px, transparent 1.6px);
  background-size: 5px 5px; -webkit-background-clip: text; background-clip: text;
  will-change: transform;
}
.side span { display: block; }
.side--l { left: clamp(10px, 3vw, 48px); }
.side--r { right: clamp(10px, 3vw, 48px); }
@media (max-width: 760px) { .side { font-size: 40px; opacity: .55; } }

.counter { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .25em; color: var(--muted); display: flex; gap: 8px; font-weight: 600; }
.counter b { color: var(--navy); }

/* The stage is a grid, so the book, caption and timeline each get their own
   row and can never sit on top of each other. */
.stage { display: grid; grid-template-rows: 92px minmax(0, 1fr) auto 92px; }

.scene {
  grid-row: 2; position: relative; perspective: 1800px; perspective-origin: 50% 44%;
  display: grid; place-items: center; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.scene.dragging { cursor: grabbing; }
.row { position: relative; width: 0; height: 0; transform-style: preserve-3d; top: 5vh; }
.floor {
  position: absolute; left: 50%; top: calc(50% + 5vh + var(--h) / 2 - 6px); width: min(1500px, 100vw); height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(50% 40% at 50% 0%, rgba(23,34,58,.26), transparent 70%);
  filter: blur(8px); pointer-events: none;
}

.book {
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2);
  width: var(--w); height: var(--h); transform-style: preserve-3d;
  border: 0; padding: 0; background: none; will-change: transform; cursor: pointer;
}
.book:focus-visible { outline: none; }
.book:focus-visible .front { outline: 3px solid var(--brass); outline-offset: 4px; }
.book__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s var(--ease); }
.book.is-hover:not(.is-active) .book__inner { transform: translateY(-18px); }
.face {
  position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  opacity: var(--op, 1);
}
.face svg, .face img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.front { inset: 0; transform: translateZ(calc(var(--d) / 2)); border-radius: 2px 6px 6px 2px; }
.front::before { /* hinge crease and cloth edge, for a real hardback look */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(255,255,255,.18) 1.6%, rgba(0,0,0,.22) 3.2%, transparent 6%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%, transparent 75%, rgba(0,0,0,.18));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset -2px 0 0 rgba(255,255,255,.08);
}
.front::after { /* moving sheen */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 45%, transparent 60%);
  transform: translateX(var(--sheen, -120%)); opacity: .55;
}
.back-f { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); inset: 0; }
.back { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 14%; font-family: var(--serif); font-size: 13px; line-height: 1.5; }
.back span { font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.spine { width: var(--d); height: var(--h); left: calc(50% - var(--d) / 2); top: 0; transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); border-radius: 3px; }
.spine::after { /* rounded spine: light down the middle, shade at the edges */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.38), rgba(255,255,255,.16) 38%, rgba(255,255,255,.06) 55%, rgba(0,0,0,.34));
}
.pages {
  width: var(--d); height: calc(var(--h) - 6px); left: calc(50% - var(--d) / 2); top: 3px;
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));
  background: linear-gradient(90deg, rgba(0,0,0,.12), transparent 20%, transparent 80%, rgba(0,0,0,.12)), repeating-linear-gradient(90deg, #f6f1e4 0 1px, #e6dfcd 1px 2px);
}
.top-f, .bot-f {
  width: calc(var(--w) - 3px); height: var(--d); left: 0; top: calc(50% - var(--d) / 2);
  background: repeating-linear-gradient(0deg, #f6f1e4 0 1px, #ddd5c2 1px 2px);
}
.top-f { transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 2px)); }
.bot-f { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - 2px)); }

/* caption: name and price of the book in front */
.caption { grid-row: 3; position: relative; justify-self: center; text-align: center; width: min(760px, 92vw); padding-top: 8px; z-index: 5; }
.caption__kicker { margin: 0; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; }
.caption__title {
  margin: 4px 0 4px; font-family: var(--sans); font-weight: 700; color: #233a8f; letter-spacing: -.02em;
  font-size: clamp(26px, 3.3vw, 44px); line-height: 1.02; overflow: hidden; padding-bottom: .08em;
}
.caption__title .ch { display: inline-block; transform: translateY(110%); animation: chIn .7s var(--ease) forwards; animation-delay: calc(var(--i) * 20ms); }
.caption__title .sp { display: inline-block; width: .28em; }
@keyframes chIn { to { transform: none; } }
.caption__meta { margin: 0 0 14px; display: flex; justify-content: center; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.caption__price { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--navy); }
.caption__sub { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 16px; }
.caption__price + .caption__sub::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--brass); vertical-align: middle; margin-right: 14px; }
.caption__meta, .caption__kicker { transition: opacity .3s, transform .5s var(--ease); }
.caption.swapping .caption__meta, .caption.swapping .caption__kicker { opacity: 0; transform: translateY(8px); }
.caption__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-height: 680px) { .caption__sub { display: none; } .caption__meta { margin-bottom: 10px; } }

/* buttons: frosted glass, as on the fashion lookbook */
.btn {
  border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .3s; position: relative; overflow: hidden; isolation: isolate;
}
.btn::after { /* light sweep on hover */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.96); }
.btn--glass {
  color: var(--navy);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 10px 28px -12px rgba(23,34,58,.35), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(23,34,58,.08);
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
}
.btn--glass:hover { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.5)); transform: translateY(-2px); }
.btn--solid {
  color: #fff;
  background: linear-gradient(180deg, rgba(43,60,102,.94), rgba(23,34,58,.94));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 30px -12px rgba(23,34,58,.75), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(23,34,58,.8), inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 3px rgba(208,160,64,.35); }
.btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--ghost-light { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); backdrop-filter: blur(10px); }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }
.btn--link { background: none; color: var(--navy); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--brass); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* glass name-and-price tag that follows the cursor over a spine */
.tag {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; display: flex; flex-direction: column; gap: 1px;
  padding: 9px 14px; border-radius: 14px; color: var(--navy);
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.45));
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 16px 30px -14px rgba(23,34,58,.45), inset 0 1px 0 #fff;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  opacity: 0; scale: .9; transition: opacity .25s, scale .35s var(--ease);
}
.tag.on { opacity: 1; scale: 1; }
.tag b { font-family: var(--serif); font-size: 15px; font-weight: 600; white-space: nowrap; }
.tag span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; }
@media (hover: none) { .tag { display: none; } }

/* ruler / timeline, in its own row at the bottom */
.ruler-row { grid-row: 4; position: relative; padding: 22px clamp(20px, 5vw, 64px) 0; }
.ruler { position: relative; height: 46px; }
.ruler__ticks { position: absolute; inset: 0; border-top: 1px solid var(--line); }
.ruler__ticks i { position: absolute; top: 0; width: 1px; height: 6px; background: var(--line); }
.ruler__ticks button {
  position: absolute; top: 0; transform: translateX(-50%); background: none; border: 0; padding: 0 4px; font-size: 10px; letter-spacing: .14em; color: var(--muted); font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.2;
}
.ruler__ticks button::before { content: ''; width: 1px; height: 10px; background: var(--navy); opacity: .5; }
.ruler__ticks button.on { color: var(--navy); }
.ruler__ticks button:hover { color: var(--brass-2); }
.ruler__dot { position: absolute; top: -5px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #233a8f; box-shadow: 0 0 0 4px rgba(35,58,143,.15); transform: translateX(-50%); }
@media (max-width: 760px) { .ruler__ticks button span { display: none; } }


.hint { position: absolute; right: clamp(16px, 5vw, 64px); bottom: 104px; margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; transition: opacity .5s; }
.hint__mouse { width: 16px; height: 24px; border: 1.5px solid var(--muted); border-radius: 10px; position: relative; }
.hint__mouse::after { content: ''; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; background: var(--muted); border-radius: 2px; transform: translateX(-50%); animation: wheel 1.6s infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 8px); } }
.hint.gone { opacity: 0; }
@media (max-width: 760px) { .hint { display: none; } }

/* ---------- section heads ---------- */
.sec-head { text-align: center; margin-bottom: 44px; }
.eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--brass-2); font-weight: 700; }
.sec-head h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 4.5vw, 54px); line-height: 1.05; margin: 0; color: var(--navy); letter-spacing: -.01em; }
.lede { max-width: 560px; margin: 16px auto 0; color: var(--muted); }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--dl, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- browse ---------- */
.browse { padding: 120px 0 110px; background: var(--paper); position: relative; z-index: 1; border-top: 1px solid var(--line); }
.filters { display: flex; justify-content: center; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.filters button { border: 1.5px solid var(--line); background: transparent; border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--navy); transition: all .3s; }
.filters button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 40px 28px; }
@media (max-width: 520px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } }
.card { background: none; border: 0; padding: 0; text-align: left; perspective: 900px; transition: opacity .4s, transform .5s var(--ease); }
.card.hide { display: none; }
.card__cover { aspect-ratio: 2 / 3; border-radius: 2px 6px 6px 2px; overflow: hidden; box-shadow: 0 24px 40px -22px rgba(23,34,58,.6), 0 2px 6px rgba(23,34,58,.15); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .5s var(--ease), box-shadow .5s; transform-style: preserve-3d; position: relative; }
.card__cover svg { width: 100%; height: 100%; display: block; }
.card:hover .card__cover { box-shadow: 0 40px 60px -24px rgba(23,34,58,.65), 0 2px 6px rgba(23,34,58,.15); }
.card__meta { margin-top: 14px; }
.card__meta b { display: block; font-family: var(--serif); font-size: 19px; color: var(--navy); line-height: 1.2; }
.card__meta span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.card__meta em { font-style: normal; color: var(--brass-2); }

/* ---------- access ---------- */
.access { background: var(--navy); color: #f3efe4; padding: 120px 0 130px; position: relative; overflow: hidden; z-index: 1; }
.access::before { content: ''; position: absolute; width: 900px; height: 900px; right: -300px; top: -400px; background: radial-gradient(circle, rgba(208,160,64,.22), transparent 60%); }
.sec-head--light h2 { color: #fff; }
.sec-head--light .lede { color: #b9bfcc; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; align-items: stretch; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; max-width: 460px; margin: auto; } }
.tier { border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 34px 30px; display: flex; flex-direction: column; background: rgba(255,255,255,.03); transition: transform .5s var(--ease), border-color .4s; }
.tier:hover { transform: translateY(-8px); border-color: rgba(208,160,64,.6); }
.tier--feat { background: linear-gradient(160deg, #22325a, #17223a 70%); border-color: var(--brass); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.tier__tag { align-self: flex-start; background: var(--brass); color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.tier h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 26px; color: #fff; }
.tier__price { margin: 18px 0 2px; font-family: var(--serif); font-size: 46px; color: #fff; line-height: 1; }
.tier__price small { font-family: var(--sans); font-size: 15px; color: #b9bfcc; }
.tier__note { color: var(--brass); font-size: 14px; margin: 0 0 22px; }
.tier ul { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; color: #d6dae3; font-size: 15px; }
.tier li { display: flex; gap: 10px; }
.tier li::before { content: '✦'; color: var(--brass); font-size: 12px; margin-top: 3px; }
.tier .btn { margin-top: auto; }
.tier .btn--solid { background: var(--brass); color: var(--navy); }
.tier .btn--solid:hover { background: #fff; }
.tier .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.tier .btn--ghost:hover { background: #fff; color: var(--navy); }

.foot { background: #0f182b; color: #8d94a5; padding: 36px 0; font-size: 14px; position: relative; z-index: 1; }
.foot__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .8; }
.foot p { margin: 0; }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__veil { position: absolute; inset: 0; background: rgba(15, 22, 40, .55); backdrop-filter: blur(6px); animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.modal__card { position: relative; background: var(--paper); border-radius: 20px; width: min(1000px, 100%); max-height: calc(100vh - 32px); overflow: auto; animation: rise .6s var(--ease); box-shadow: 0 60px 120px -40px rgba(0,0,0,.6); }
@keyframes rise { from { opacity: 0; transform: translateY(40px) scale(.97); } }
.x { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(23,34,58,.08); font-size: 24px; line-height: 1; z-index: 3; transition: background .3s, transform .4s var(--ease); }
.x:hover { background: var(--navy); color: #fff; transform: rotate(90deg); }
.x--light { position: fixed; background: rgba(255,255,255,.12); color: #fff; }

.detail { display: grid; grid-template-columns: 1fr 1.1fr; }
@media (max-width: 820px) { .detail { grid-template-columns: 1fr; } }
.detail__book { background: radial-gradient(circle at 50% 40%, #fff, var(--paper-2)); display: grid; place-items: center; padding: 50px 20px; perspective: 1600px; min-height: 420px; border-radius: 20px 0 0 20px; }
@media (max-width: 820px) { .detail__book { border-radius: 20px 20px 0 0; min-height: 360px; } }
.obook { position: relative; width: 210px; height: 315px; transform-style: preserve-3d; transform: rotateY(-18deg) rotateX(6deg); transition: transform 1.2s var(--ease); }
.obook.open { transform: translateX(100px) scale(.88) rotateY(-8deg) rotateX(4deg); }
@media (max-width: 820px) { .obook { width: 170px; height: 255px; } .obook.open { transform: translateX(80px) scale(.85) rotateY(-8deg); } }
.obook__inside { position: absolute; inset: 0; background: #fbf8f0; border-radius: 2px 6px 6px 2px; padding: 26px 22px; font-family: var(--serif); font-size: 12px; line-height: 1.6; color: #333; box-shadow: 0 30px 50px -20px rgba(0,0,0,.4), inset 10px 0 18px -10px rgba(0,0,0,.25); overflow: hidden; }
.obook__inside h4 { font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-2); margin: 0 0 10px; }
.obook__inside p:first-of-type::first-letter { font-size: 3.2em; float: left; line-height: .8; margin: 4px 6px 0 0; color: var(--navy); font-weight: 600; }
.obook__cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.4s var(--ease) .15s; }
.obook.open .obook__cover { transform: rotateY(-165deg); }
.obook__front, .obook__back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 2px 6px 6px 2px; overflow: hidden; }
.obook__front svg { width: 100%; height: 100%; display: block; }
.obook__back { transform: rotateY(180deg); background: #efe8d6; box-shadow: inset -10px 0 18px -10px rgba(0,0,0,.25); }
.detail__info { padding: 48px 44px 40px; }
@media (max-width: 820px) { .detail__info { padding: 30px 22px 30px; } }
.detail__info h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; margin: 0; color: var(--navy); }
.detail__sub { font-family: var(--serif); font-style: italic; color: var(--muted); margin: 6px 0 18px; font-size: 18px; }
.detail__blurb { margin: 0 0 22px; }
.detail__info h3 { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.detail__toc { margin: 0 0 26px; padding: 0; list-style: none; counter-reset: c; border-top: 1px solid var(--line); }
.detail__toc li { counter-increment: c; padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; font-size: 15px; opacity: 0; transform: translateX(-10px); animation: tocIn .6s var(--ease) forwards; animation-delay: calc(.35s + var(--i) * 70ms); }
.detail__toc li::before { content: counter(c, decimal-leading-zero); color: var(--brass-2); font-weight: 700; font-size: 12px; margin-top: 2px; }
@keyframes tocIn { to { opacity: 1; transform: none; } }
.detail__buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.price { font-family: var(--serif); font-size: 34px; color: var(--navy); margin-right: 6px; }
.detail__note { font-size: 14px; color: var(--muted); margin: 16px 0 0; }

/* ---------- reader (page flip) ---------- */
.reader .modal__veil { background: rgba(10, 15, 28, .86); }
.flip { position: relative; width: min(900px, 94vw); aspect-ratio: 900 / 600; perspective: 2400px; transform: translateX(var(--shift, -25%)); transition: transform .9s var(--ease); }
.leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; transform-origin: left center; transition: transform 1.1s cubic-bezier(.6, .05, .25, 1); }
.leaf.turned { transform: rotateY(-180deg); }
.leaf__f, .leaf__b { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; background: #fbf8f0; color: #2a2f3a; padding: 8% 9%; font-family: var(--serif); font-size: clamp(11px, 1.6vw, 16px); line-height: 1.65; }
.leaf__f { border-radius: 0 6px 6px 0; box-shadow: inset 14px 0 24px -14px rgba(0,0,0,.3); }
.leaf__b { transform: rotateY(180deg); border-radius: 6px 0 0 6px; box-shadow: inset -14px 0 24px -14px rgba(0,0,0,.3); }
.leaf__f.cover, .leaf__b.cover { padding: 0; }
.leaf__f.cover svg { width: 100%; height: 100%; }
.pg-title { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; }
.pg-title h3 { font-size: 2em; margin: 0 0 .2em; color: var(--navy); line-height: 1.05; }
.pg-title small { font-family: var(--sans); letter-spacing: .25em; text-transform: uppercase; font-size: .62em; color: var(--brass-2); font-weight: 700; }
.pg h4 { font-family: var(--sans); font-size: .7em; letter-spacing: .25em; text-transform: uppercase; color: var(--brass-2); margin: 0 0 1em; }
.pg ol { padding-left: 1.2em; margin: 0; }
.pg li { margin-bottom: .5em; }
.pg-num { position: absolute; bottom: 4%; left: 0; right: 0; text-align: center; font-family: var(--sans); font-size: .7em; color: #9a9384; }
.pg-cta { display: flex; flex-direction: column; justify-content: center; height: 100%; text-align: center; gap: 1em; }
.pg-cta .btn { align-self: center; font-size: .75em; }
.reader__bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 16px; align-items: center; color: #cfd3dc; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; z-index: 2; }
.reader__bar .btn { padding: 10px 16px; font-size: 16px; }

/* ---------- bag ---------- */
.bag { position: fixed; inset: 0; z-index: 70; }
.bag[hidden] { display: none; }
.bag__veil { position: absolute; inset: 0; background: rgba(15,22,40,.5); backdrop-filter: blur(4px); animation: fade .4s; }
.bag__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(420px, 100%); background: var(--paper); display: flex; flex-direction: column; animation: slideIn .6s var(--ease); box-shadow: -30px 0 60px -30px rgba(0,0,0,.5); }
@keyframes slideIn { from { transform: translateX(100%); } }
.bag__panel header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.bag__panel header h2 { margin: 0; font-family: var(--serif); font-weight: 600; color: var(--navy); }
.bag__panel header .x { position: static; }
.bag__list { list-style: none; margin: 0; padding: 8px 24px; overflow: auto; flex: 1; }
.bag__list li { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); animation: tocIn .5s var(--ease) both; }
.bag__list li .thumb { width: 52px; aspect-ratio: 2/3; border-radius: 2px 4px 4px 2px; overflow: hidden; box-shadow: 0 8px 14px -8px rgba(0,0,0,.5); }
.bag__list li .thumb svg { width: 100%; height: 100%; display: block; }
.bag__list li b { font-family: var(--serif); color: var(--navy); display: block; line-height: 1.2; }
.bag__list li span { font-size: 14px; color: var(--muted); }
.bag__list li button { border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; }
.bag__empty { color: var(--muted); text-align: center; padding: 50px 0; }
.bag__upsell { margin: 0 24px; padding: 16px 18px; border-radius: 14px; background: var(--navy); color: #e6e8ee; font-size: 14px; }
.bag__upsell:empty { display: none; }
.bag__upsell b { color: var(--brass); }
.bag__upsell button { margin-top: 10px; background: var(--brass); color: var(--navy); border: 0; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.bag__panel footer { padding: 20px 24px 24px; }
.bag__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.bag__total b { font-family: var(--serif); font-size: 28px; color: var(--navy); }

/* fly-to-bag ghost */
.ghost { position: fixed; z-index: 95; width: 60px; aspect-ratio: 2/3; pointer-events: none; border-radius: 2px 4px 4px 2px; overflow: hidden; box-shadow: 0 20px 30px -10px rgba(0,0,0,.4); transition: transform .9s cubic-bezier(.5,-.3,.3,1), opacity .9s; }
.ghost svg { width: 100%; height: 100%; display: block; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 220%); visibility: hidden; background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; z-index: 99; transition: transform .5s var(--ease); max-width: calc(100% - 32px); text-align: center; }
.toast.on { transform: translate(-50%, 0); visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .grain { display: none; }
}

/* header gets a backing once you leave the shelf */
.top { transition: background .4s, box-shadow .4s, backdrop-filter .4s; }
.top.solid { background: rgba(239, 236, 228, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }

/* Hidden faces still catch the mouse in 3D, so only the visible face of each book is clickable:
   the spine for books on the shelf, the cover for the book in front. */
.book .face { pointer-events: none; }
.book:not(.is-active) .spine, .book.is-active .front { pointer-events: auto; }

/* books further out get darker, without a costly filter */
.spine::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(12, 16, 28, var(--shade, 0)); }
.spot { display: none; }

/* smooth scrolling (Lenis) */
html.lenis-on, html.lenis-on body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- intro loader: icon -> full logo ----------
   logo.png is 746 x 154. The icon (A + swoosh + star) fills the left 36.5%,
   its centre sits at 18.2% across, and the star at 32.7% / 28.6%.
   Only transform, opacity and a small clip are animated, so it stays smooth.
   The full intro plays on the first visit of a session ("intro-full");
   after that a short in-screen loader is used instead ("intro-quick"). */
:root { --glide: cubic-bezier(.65, 0, .35, 1); --soft: cubic-bezier(.16, 1, .3, 1); }
html.loading, html.loading body { overflow: hidden; }
.loader {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  background: radial-gradient(70% 60% at 50% 45%, #faf8f3, var(--paper) 60%, var(--paper-2));
  transform: translateY(0); will-change: transform;
  transition: transform 1.25s cubic-bezier(.83, 0, .17, 1);
}
.loader.out { transform: translateY(-100%); pointer-events: none; }
.loader__logo { will-change: transform, opacity; }

/* full intro */
.loader__logo {
  position: relative; width: min(520px, 80vw); aspect-ratio: 746 / 154;
  transform: translateX(31.8%) scale(1.45);
  animation: lgOpen 1.3s var(--glide) 1.45s forwards;
}
.loader.out .loader__logo { animation: lgOut 1s var(--glide) forwards; }
.loader__img {
  position: absolute; inset: 0; clip-path: inset(100% 63.5% 0 0); opacity: 0; transform: translateY(14px) scale(.96);
  animation: lgIcon 1.1s var(--soft) .2s forwards, lgWord 1.3s var(--glide) 1.45s forwards;
}
.loader__img img { width: 100%; height: 100%; display: block; }
.loader__shine {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(assets/logo.png) center / 100% 100% no-repeat; mask: url(assets/logo.png) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 214, .65) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0;
  animation: lgShine 1.4s var(--glide) 2.35s forwards;
}
.loader__star, .loader__ring { position: absolute; left: 32.7%; top: 28.6%; pointer-events: none; }
.loader__star {
  width: 11%; aspect-ratio: 1; translate: -50% -50%; scale: 0; opacity: 0;
  background: radial-gradient(circle, #fff7df 0 12%, #f3c75c 30%, transparent 62%);
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  animation: lgStar 1.4s var(--soft) .85s forwards;
}
.loader__ring {
  width: 4%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px solid rgba(208, 160, 64, .7); opacity: 0;
  animation: lgRing 1.3s var(--soft) .95s forwards;
}
.loader__bar { position: absolute; bottom: 12vh; width: 120px; height: 2px; background: rgba(23, 34, 58, .1); border-radius: 2px; overflow: hidden; }
.loader__bar i { position: absolute; inset: 0; background: var(--brass); transform-origin: left; transform: scaleX(0); animation: lgBar 3.1s var(--glide) forwards; }
.loader.out .loader__bar { opacity: 0; transition: opacity .3s; }

@keyframes lgIcon { to { clip-path: inset(0 63.5% 0 0); opacity: 1; transform: none; } }
@keyframes lgWord { from { clip-path: inset(0 63.5% 0 0); opacity: 1; transform: none; } to { clip-path: inset(0 0 0 0); opacity: 1; transform: none; } }
@keyframes lgOpen { to { transform: translateX(0) scale(1); } }
@keyframes lgOut { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateY(-40px) scale(.97); opacity: 0; } }
@keyframes lgShine { to { background-position: -30% 0; } }
@keyframes lgStar { 0% { scale: 0; opacity: 0; rotate: -90deg; } 45% { scale: 1.7; opacity: 1; rotate: 0deg; } 100% { scale: .9; opacity: 0; rotate: 15deg; } }
@keyframes lgRing { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 8; } }
@keyframes lgBar { to { transform: scaleX(1); } }

/* ---------- skeleton loading ----------
   Return visits, book details, the bag and the sample reader show a shimmering
   outline of the screen they are about to show, then the real content fades in. */
.sk {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, #dcd5c6 0%, #ece7dd 45%, #dcd5c6 90%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
.sk--pill { border-radius: 999px; }
.sk--round { border-radius: 50%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.sk-dark .sk, .sk.sk-dark { background-image: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.13) 45%, rgba(255,255,255,.06) 90%); }

/* page skeleton (return visits) */
.skel { display: none; }
.intro-quick .loader__logo, .intro-quick .loader__bar { display: none; }
.intro-quick .loader { place-items: stretch; transform: none; transition: opacity .55s var(--glide), visibility 0s linear .55s; }
.intro-quick .loader.out { transform: none; opacity: 0; visibility: hidden; }
.intro-quick .skel {
  display: grid; position: absolute; inset: 0; grid-template-rows: 92px minmax(0, 1fr) auto 92px;
}
.skel__top { position: absolute; top: 14px; left: clamp(16px, 3vw, 36px); right: clamp(16px, 3vw, 36px); display: flex; align-items: center; gap: 24px; }
.skel__nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.skel__count { position: absolute; top: 72px; left: 50%; translate: -50% 0; }
.skel__shelf { grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; padding-top: 10vh; }
.skel__cover { width: var(--w); height: var(--h); border-radius: 3px 8px 8px 3px; flex: none; margin: 0 22px; box-shadow: 0 30px 50px -30px rgba(23,34,58,.35); }
.skel__side { display: flex; align-items: center; gap: 6px; flex: none; }
.skel__side--l { flex-direction: row-reverse; }
.skel__side i {
  display: block; flex: none; width: calc(var(--d) * var(--s)); height: calc(var(--h) * var(--s)); border-radius: 3px;
  background: linear-gradient(90deg, #dcd5c6 0%, #ece7dd 45%, #dcd5c6 90%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite;
}
.skel__cap { grid-row: 3; display: grid; justify-items: center; gap: 12px; padding-top: 8px; }
.skel__btns { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.skel__ruler { grid-row: 4; padding: 22px clamp(20px, 5vw, 64px) 0; }
.skel__ruler span { position: relative; display: block; height: 1px; background: rgba(23,34,58,.12); }
.skel__ruler i { position: absolute; top: 0; width: 1px; height: 10px; background: rgba(23,34,58,.2); }
@media (max-width: 760px) { .skel__crumb, .skel__nav b:not(.sk--pill) { display: none; } .skel__cover { margin: 0 12px; } }

/* screen skeletons: book details, bag, sample reader */
.inload {
  position: absolute; inset: 0; z-index: 4; background: var(--paper); border-radius: inherit; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--glide), visibility 0s linear .45s;
}
.is-loading > .inload { opacity: 1; visibility: visible; transition: opacity .15s, visibility 0s; }

.sk-detail { display: grid; grid-template-columns: 1fr 1.1fr; height: 100%; }
.sk-detail__book { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fff, var(--paper-2)); }
.sk-detail__book .sk { width: 190px; aspect-ratio: 2 / 3; border-radius: 3px 8px 8px 3px; }
.sk-detail__info { padding: 48px 44px; display: grid; align-content: start; gap: 12px; }
.sk-detail__toc { display: grid; gap: 14px; margin: 10px 0 18px; }
.sk-detail__buy { display: flex; gap: 12px; align-items: center; }
@media (max-width: 820px) {
  .sk-detail { grid-template-columns: 1fr; grid-template-rows: 300px 1fr; }
  .sk-detail__book .sk { width: 140px; }
  .sk-detail__info { padding: 26px 22px; }
}

.sk-bag { padding: 22px 24px; display: grid; gap: 0; align-content: start; }
.sk-bag__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.sk-bag__row { display: grid; grid-template-columns: 52px 1fr 54px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sk-bag__row > .sk:first-child { width: 52px; aspect-ratio: 2 / 3; border-radius: 2px 4px 4px 2px; }
.sk-bag__lines { display: grid; gap: 8px; }
.sk-bag__foot { position: absolute; left: 24px; right: 24px; bottom: 24px; display: grid; gap: 14px; }

.inload--dark { background: transparent; display: grid; place-items: center; }
.sk-spread { display: grid; grid-template-columns: 1fr 1fr; width: min(900px, 94vw); aspect-ratio: 900 / 600; }
.sk-spread > div { padding: 8% 9%; display: grid; align-content: start; gap: 14px; background: #1c2333; }
.sk-spread > div:first-child { border-radius: 6px 0 0 6px; box-shadow: inset -14px 0 24px -14px rgba(0,0,0,.4); }
.sk-spread > div:last-child { border-radius: 0 6px 6px 0; box-shadow: inset 14px 0 24px -14px rgba(0,0,0,.4); }


/* content eases in once a screen has loaded */
.reveal-in { animation: revealIn .7s var(--soft) both; }
@keyframes revealIn { from { opacity: 0; transform: translateY(14px); } }
.reader.is-loading .flip, .reader.is-loading .reader__bar { opacity: 0; }
.reader .flip, .reader .reader__bar { transition: opacity .5s var(--glide); }

@media (prefers-reduced-motion: reduce) { .loader { display: none; } }
.modal__card > .x, .bag__panel .x { z-index: 6; position: relative; } .modal__card > .x { position: absolute; }