/* The Design Book on lizzyeast.com: the band on the home page, the section on /custom-website,
   the card in Work. Effects come from /book/fx (the engine's shelf), used the way a client site
   would use them: mark the element, link two files. Electric cyan is the site's own accent. */
.book-field { position: relative; isolation: isolate; overflow: clip; --fx-fluid-1: #06d4f0; --fx-fluid-2: #0b3a66; --fx-fluid-3: #07080f; --fx-fluid-4: #3350ff; --fx-fluid-speed: 0.55; }
.book-field > canvas[data-fx-ambient] { z-index: -1; opacity: 0.55; }
.book-field::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 20% 30%, rgba(7,8,15,0.25), rgba(7,8,15,0.78) 70%); pointer-events: none; }
.book-field .c { position: relative; }
.book-pause { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; background: rgba(7,8,15,0.55); color: #fff; font: 600 0.78rem/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.book-pause::before { content: ''; width: 0.6rem; height: 0.7rem; border-inline: 0.2rem solid currentColor; }
.book-pause[aria-pressed="true"]::before { border: 0; border-left: 0.6rem solid currentColor; border-block: 0.35rem solid transparent; width: 0; height: 0; }
.book-pause:disabled { opacity: 0.5; cursor: default; }

/* the fun button: electric cyan, an arrow that slides out and a second one slides in */
.btn-book { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.btn-book:hover, .btn-book:focus-visible { background: #3ae2fa; transform: translateY(-1px); }
.btn-book [data-fx-arrow] svg { stroke: currentColor; }

/* the strip: four frames from the book, each a door into its world */
.book-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.book-strip a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); text-decoration: none; color: #fff; }
.book-strip img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.book-strip span { position: absolute; left: 0.8rem; bottom: 0.7rem; font: 600 0.72rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.book-strip--wide { grid-template-columns: repeat(4, 1fr); margin-top: 2.4rem; }
@media (max-width: 900px) { .book-strip--wide { grid-template-columns: repeat(2, 1fr); } }
.book-count { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; margin-top: 2rem; }
.book-count b { display: block; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.book-count span { display: block; margin-top: 0.3rem; font: 600 0.72rem/1.3 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* /custom-website: the rest of the shelf on that page, in the site's own blue (2026-10-02).
   One motif runs through it: every heading's accent phrase sweeps in with a cyan bar, cards lift
   or glow in cyan, the price rolls up, the closing photograph drifts with a Pause. */
[data-fx~="headline/highlight-sweep"] { --fx-mark: rgba(6, 212, 240, 0.22); --fx-sweep-dur: 900ms; }
[data-fx~="hover/glow"] { --fx-glow: rgba(6, 212, 240, 0.35); }
[data-fx~="hover/lift"] { --fx-lift: -6px; --fx-lift-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
[data-fx~="reveal/curtain"].film { --fx-reveal-dur: 1100ms; }
.price-big[data-fx~="story/odometer"], .inc-price[data-fx~="story/odometer"] { --fx-odo-dur: 1400ms; }
.band-drift { --fx-kb-dur: 30s; --fx-kb-zoom: 1.12; }
.band-pause { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; }