/* ══════════════════════════════════════════════════════════════
   sketchbook.css — the ART sticker opens my sketchbook over the page (sketchbook.js).
   An open book seen straight on, pages fanned on both sides like a real one lying open;
   each page turns over the spine in 3D. Red cover, my drawings on the pages.
   ══════════════════════════════════════════════════════════════ */

.sb {
  --ph: min(64svh, 62vw, 760px);                 /* page height */
  --pw: calc(var(--ph) * 813 / 1150);            /* page width (drawings are 813×1150) */
  --cover: #c41f2b;                              /* the cover red (same family as my stickers) */
  --paper: #f5f1e8;
  position: fixed; inset: 0; z-index: 6000;
  width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  /* see-through: the page behind shows through, blurred and tinted blue */
  background: radial-gradient(120% 90% at 50% 45%, rgba(27, 47, 124, .42) 0%, rgba(11, 26, 82, .6) 70%, rgba(7, 15, 53, .72) 100%);
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
  color: #fff; overflow: hidden;
}
.sb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.sb::backdrop { background: transparent; }
/* stop the page scrolling behind the book — on html only: body here is a fixed 100% tall, so hiding its
   overflow would collapse the page and jump back to the top */
html.sbOpen { overflow: hidden; }

/* top: title + close */
.sb__top { display: flex; justify-content: center; align-items: center; position: relative;
  padding: clamp(16px, 3vh, 32px) var(--edge, 20px) 0; text-align: center; }
.sb__title { margin: 0; font: 900 clamp(28px, 3.4vw, 52px)/.95 "Archivo", var(--font-sans); letter-spacing: -.045em; }
.sb__meta { margin: 8px 0 0; font: 600 12px/1 var(--font-pixel); text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.7); }
.sb__close { position: absolute; right: var(--edge, 20px); top: clamp(16px, 3vh, 32px); }

/* the stage + book */
.sb__stage { display: grid; place-items: center; perspective: 2200px; min-height: 0; touch-action: pan-y; }
.sb__book { position: relative; width: calc(var(--pw) * 2); height: var(--ph); transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.45, .05, .2, 1); cursor: pointer;
  pointer-events: none; }           /* only the pages themselves catch clicks — the empty half beside a closed book doesn't */
.sb__leaf { pointer-events: auto; }
.sb__shadow { pointer-events: none; }
.sb__book.is-closed-front { transform: translateX(-25%); }   /* closed: the cover sits centred */
.sb__book.is-closed-back  { transform: translateX(25%); }
.sb__shadow { position: absolute; left: 4%; right: 4%; bottom: -5%; height: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,20,.55), transparent); transform: translateZ(-60px); }

.sb__leaf { position: absolute; left: 50%; top: 0; width: var(--pw); height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.45, .05, .2, 1); }
.sb__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--paper); border-radius: 0 6px 6px 0; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sb__face--back { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }
/* the curve into the spine */
.sb__face::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.06) 7%, transparent 16%, transparent 92%, rgba(0,0,0,.06)); }
.sb__face--back::after { background: linear-gradient(270deg, rgba(0,0,0,.28), rgba(0,0,0,.06) 7%, transparent 16%, transparent 92%, rgba(0,0,0,.06)); }

/* a drawing page */
.sb__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sb__label { position: absolute; left: 50%; bottom: 4.5%; translate: -50% 0; max-width: 86%; padding: 6px 10px;
  background: #fff; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 clamp(9px, calc(var(--pw) * .032), 12px)/1 var(--font-pixel); text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 0 2px 4px rgba(0,0,0,.18); rotate: -2deg; }
.sb__face--back .sb__label { rotate: 2deg; }

/* covers: blank, like a real sketchbook — matte red board with a faint grain and a soft sheen */
.sb__cover { background:
    radial-gradient(130% 90% at 30% 20%, rgba(255,255,255,.10), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--cover); }
.sb__face.sb__cover::after { background: linear-gradient(90deg, rgba(0,0,0,.22), transparent 6%, transparent 94%, rgba(0,0,0,.12)); }
.sb__face--back.sb__cover::after { background: linear-gradient(270deg, rgba(0,0,0,.22), transparent 6%, transparent 94%, rgba(0,0,0,.12)); }

/* an optional link button on a page (e.g. the end page's Instagram) */
.sb__pageLink { position: absolute; left: 12.3%; top: 69.5%; padding: .7em 1em; background: #0a37b8; color: #fff; text-decoration: none;
  font: 600 clamp(10px, calc(var(--pw) * .042), 15px)/1 var(--font-pixel); letter-spacing: .04em; box-shadow: 0 3px 0 rgba(0,0,40,.3);
  transition: background .15s ease; }
.sb__pageLink:hover, .sb__pageLink:focus-visible { background: #111; outline: none; }

/* bottom controls */
.sb__bar { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 0 var(--edge, 20px) clamp(18px, 4vh, 40px); }
.sb__count { min-width: 9em; text-align: center; font: 600 12px/1 var(--font-pixel); text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.8); }
.sb__btn { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.7); border-radius: 50%;
  background: none; color: #fff; font: 600 20px/1 var(--font-sans); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.sb__btn:hover, .sb__btn:focus-visible { background: #ffe14d; border-color: #ffe14d; color: #111; outline: none; }
.sb__btn:disabled { opacity: .3; pointer-events: none; }

/* opening */
.sb[open] .sb__stage { animation: sbIn .7s cubic-bezier(.2, .7, .2, 1) both; }
.sb[open] { animation: sbFade .35s ease both; }
@keyframes sbIn { from { opacity: 0; transform: translateY(40px) rotateX(18deg); } }
@keyframes sbFade { from { opacity: 0; } }

@media (max-width: 640px) {
  .sb { --ph: min(56svh, 64vw); }   /* the open spread (2 pages) fits across the phone */
  .sb__btn { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb__leaf, .sb__book { transition: none; }
  .sb[open], .sb[open] .sb__stage { animation: none; }
}

/* ══ "View artbook" — a round green sticker fixed bottom-right on every page, matching the header stickers:
   solid green with a white label at rest; on hover it flips to white with a green ring + green label and
   straightens. Steps out of the way: during the home intro, while the sketchbook is open, when the footer
   is on screen, and on phones while you're scrolling down (back as soon as you scroll up). */
.sbFab { --s: 88px; position: fixed; right: max(16px, var(--edge, 16px)); bottom: clamp(16px, 3.5vh, 32px); z-index: 3900;
  width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; text-align: center;
  background: var(--dot-green, #2f843b); color: #fff;
  font: 700 12px/1.15 var(--font-pixel); text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 1px 1.5px rgba(20, 40, 25, .22), 0 8px 18px -6px rgba(0, 0, 30, .35);
  rotate: -7deg;
  transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), rotate .35s cubic-bezier(.34, 1.56, .64, 1),
              background-color .2s ease, color .2s ease, box-shadow .2s ease; }
:root .sbFab { font-family: var(--font-pixel); }   /* type.css makes buttons inherit; the sticker keeps its own font */
.sbFab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: multiply;   /* paper grain */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sbFab:hover, .sbFab:focus-visible { background: #fff; color: var(--dot-green, #2f843b); rotate: 0deg; outline: none;
  box-shadow: inset 0 0 0 2.5px var(--dot-green, #2f843b), 0 8px 18px -6px rgba(0, 0, 30, .35); }
.sbFab:hover::after, .sbFab:focus-visible::after { opacity: 0; }
.sbFab:focus-visible { box-shadow: inset 0 0 0 2.5px var(--dot-green, #2f843b), 0 0 0 3px #fff, 0 0 0 5px var(--dot-green, #2f843b); }
.sbFab:active { transform: scale(.95); }
@media (max-width: 640px) { .sbFab { --s: 74px; font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) { .sbFab { transition: opacity .3s ease, background-color .2s ease, color .2s ease; } }
.sbFab.is-away, html.intro .sbFab, html.sbOpen .sbFab { opacity: 0; transform: translateY(24px); pointer-events: none; }
@media (max-width: 640px) { .sbFab { width: 84px; height: 54px; } .sbFab__page { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .sbFab, .sbFab__book, .sbFab__page { transition: none; } }