/* About page: the opening with the portrait, the table (packs, stickers and
   an open sticker book, all draggable), and the stage where a pack is torn
   open. The pack is built in CSS 3D; booster.js moves everything. */
@property --hx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --hy{syntax:'<percentage>';inherits:true;initial-value:40%}

/* ---------- Spacing. One scale for the whole page:
   s: a rule to its text, a title to its subtitle, a toolbar to its table
   m: an eyebrow to its heading, paragraph to paragraph
   l: a heading to its body, one block to the next, columns
   xl: section padding, the same above and below every divider */
.about-page{--sp-s:16px;--sp-m:24px;--sp-l:40px;--sp-xl:72px}

/* ---------- Opening */
.about-opening{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--sp-m) 7%;align-items:start;padding:var(--sp-xl) 0}
.about-opening>.mono{grid-column:1/-1;margin:0}
/* Not a .page-title: the headline fitter keeps those on their authored lines,
   and this one is a sentence that should wrap. */
/* flow-root keeps the reveal's line-mask margins inside the heading, so the
   gaps above and below it are the ones written here. */
.about-title{display:flow-root;margin:0 0 var(--sp-l);font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:var(--display-case)}
.about-payoff{display:block;font-size:calc(clamp(46px,5.6vw,92px)*var(--hero-scale));line-height:.98;text-wrap:balance}
.about-title em{font-weight:inherit;font-style:var(--display-em)}
.about-title .type-line{padding-bottom:.08em;margin-bottom:-.08em}
/* One rule over both columns, and a shorter rule between them that stays
   clear of it: it starts with the text and ends with its own column. */
.about-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-m) var(--sp-l);align-items:start;padding-top:var(--sp-s);border-top:1px solid var(--line)}
.about-copy p{font-size:16px;line-height:1.75;text-wrap:pretty}
.about-copy p+p{border-left:1px solid var(--line);padding-left:var(--sp-l)}
.about-portrait{position:relative;width:min(100%,400px);margin:0 13px 13px auto;aspect-ratio:4/5;rotate:2deg}
.about-portrait::after{content:'';position:absolute;inset:13px -13px -13px 13px;border:1px solid var(--line);z-index:-1}
.about-portrait picture{display:block;height:100%;background:var(--paper);border:1px solid var(--line)}
.about-portrait img{object-fit:cover}

/* ---------- Boosters */
.boosters{padding:var(--sp-xl) 0}
/* Title on one line, the subtext straight under it. */
.boosters-head{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:var(--sp-l)}
.boosters-head>.mono{grid-column:1/-1;margin:0}
.boosters-head .content-heading{margin:var(--sp-m) 0 var(--sp-s)}
.boosters-head p:not(.mono){font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:46ch}
/* ---------- Table: a surface where every object sits at a fraction of its
   width and height (--x, --y) with its own turn (--r). */
.table-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-bottom:var(--sp-s)}
.table-bar .table-hint{margin-right:auto;opacity:.7}
.table-bar .text-link{min-height:24px}
/* Nothing on the table is text to select: a selection there turns the next
   press into the browser's own drag of everything selected at once. */
.booster-table{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative;height:clamp(780px,66vw,1000px);border:1px solid var(--line);border-radius:18px;overflow:clip;
  background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--paper) 70%,transparent),transparent 60%),radial-gradient(color-mix(in srgb,var(--line) 30%,transparent) 1px,transparent 1.4px) 0 0/22px 22px,color-mix(in srgb,var(--paper) 55%,var(--pink))}
.table-item{position:absolute;left:calc(var(--x,.5)*100%);top:calc(var(--y,.5)*100%);display:block;padding:0;border:0;background:none;color:inherit;transform:translate(-50%,-50%) rotate(var(--r,0deg));touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.table-item.is-dragging{cursor:grabbing}
.table-item:focus-visible{outline:2px solid var(--violet);outline-offset:8px;border-radius:10px}
.lift,.book-lift{display:block;width:100%;height:100%}
.table-pack{--pw:clamp(118px,10.5vw,160px);z-index:3;width:var(--pw);aspect-ratio:3/5;perspective:900px;filter:drop-shadow(0 8px 8px rgba(30,14,10,.24))}
.table-pack .lift{position:relative}
.table-pack.is-dragging{filter:drop-shadow(0 22px 18px rgba(30,14,10,.28))}
.table-pack.is-torn .pack-top{display:none}
.table-pack.is-torn .pack-face{filter:saturate(.8) brightness(.94)}
.table-sticker{--s:clamp(88px,7.6vw,116px);z-index:11;width:var(--s);aspect-ratio:1}
.table-sticker .sticker-art img{filter:drop-shadow(0 4px 4px rgba(30,14,10,.24))}
.table-sticker.is-dragging .sticker-art img{filter:drop-shadow(0 18px 16px rgba(30,14,10,.3))}
.book-page .table-sticker .sticker-art img{filter:drop-shadow(0 1px 1px rgba(58,42,34,.3))}
.table-bar [hidden],.table-refill[hidden]{display:none}
/* More packs, offered just below where the pile starts. */
.table-refill{z-index:9;min-height:48px;padding:0 24px;border:1px solid var(--wine);border-radius:999px;background:var(--wine);color:var(--paper);font:600 14px/1 var(--font-body);white-space:nowrap;cursor:pointer;touch-action:manipulation;box-shadow:0 12px 22px -14px rgba(20,10,6,.6)}
/* The bin sits in the bottom-right corner; it opens its lid while something is held over it. */
.table-bin{position:absolute;right:18px;bottom:18px;z-index:2;display:grid;justify-items:center;gap:4px;width:74px;padding:12px 0 9px;border:1.5px dashed var(--line);border-radius:16px;color:var(--wine);transition:background .2s,border-color .2s,color .2s,scale .25s var(--ease)}
.table-bin svg{width:34px;height:38px;overflow:visible;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.table-bin .bin-lid{transform-origin:54px 16px;transition:transform .25s var(--ease)}
.table-bin .mono{font-size:11px}
.table-bin.is-hot{border-style:solid;border-color:var(--violet);color:var(--violet);background:color-mix(in srgb,var(--violet) 14%,transparent);scale:1.08}
.table-bin.is-hot .bin-lid{transform:translate(2px,-5px) rotate(20deg)}
/* Whatever is held over the bin fades, so letting go there reads as throwing it away. */
.table-item.is-dragging .lift{transition:opacity .15s}
.table-item.is-binning .lift{opacity:.6}
.sticker-note{position:absolute;z-index:9999;display:grid;gap:4px;width:max-content;max-width:260px;padding:12px 14px;border-radius:10px;background:var(--wine);color:var(--paper);box-shadow:0 12px 26px -12px rgba(20,10,6,.6);pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 12px)) scale(.96);transition:opacity .18s,transform .25s var(--ease)}
.sticker-note.is-below{transform:translate(-50%,12px) scale(.96)}
.sticker-note.is-on{opacity:1;transform:translate(-50%,calc(-100% - 12px))}
.sticker-note.is-below.is-on{transform:translate(-50%,12px)}
.sticker-note .mono{font-size:11px;opacity:.75}
.sticker-note strong{font:var(--display-weight) 20px/1.1 var(--font-display);letter-spacing:var(--display-tracking)}
/* Notes are set in the display italic and keep their own line breaks. */
.sticker-note span:last-child{font:italic var(--display-weight) 16px/1.45 var(--font-display);white-space:pre-line}

/* ---------- The pack: two faces, a top strip that tears away, foil and light. */
.pack-float{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.pack{--px:50%;--py:30%;--foil:0deg;position:absolute;inset:0;display:block;transform-style:preserve-3d}
.pack-face{position:absolute;inset:0;display:block;overflow:hidden;container-type:inline-size;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(120% 70% at 75% 20%,color-mix(in srgb,var(--tone-a) 70%,#fff) 0,transparent 55%),linear-gradient(165deg,var(--tone-a) 10%,var(--tone-b) 92%);
  /* Crimped, sealed ends: a row of teeth top and bottom. */
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/5% 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/5% 51% repeat-x;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/5% 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/5% 51% repeat-x}
.pack-top{transform:translateZ(.5px)}
.pack-back{transform:rotateY(180deg)}
.pack-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pack-print{position:absolute;inset:0;display:flex;flex-direction:column;padding:30cqw 10cqw 15cqw;color:#fff8ee;text-align:left}
.pack-brand{font:500 5.6cqw/1 var(--font-mono);text-transform:uppercase;letter-spacing:.12em;opacity:.85}
.pack-name{margin-top:auto;font:var(--display-weight) 17cqw/.9 var(--font-display);letter-spacing:var(--display-tracking);text-wrap:balance}
.pack-line{margin-top:5cqw;font:500 5.2cqw/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;opacity:.9}
.pack-count{align-self:flex-start;margin-top:6cqw;padding:2.4cqw 4cqw;border:.5cqw solid currentColor;border-radius:99px;font:600 4.6cqw/1 var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.pack-print-back{justify-content:space-between}
.pack-legal{max-width:80%;font:500 5cqw/1.5 var(--font-mono);text-transform:uppercase;opacity:.8}
.pack-barcode{height:12cqw;width:46cqw;background:repeating-linear-gradient(90deg,#fff8ee 0 .8cqw,transparent .8cqw 1.6cqw,#fff8ee 1.6cqw 3.4cqw,transparent 3.4cqw 4.2cqw);opacity:.85}
.pack-foil,.pack-shine,.pack-crimp{position:absolute;inset:0;pointer-events:none}
.pack-foil{background:linear-gradient(calc(118deg + var(--foil)),transparent 16%,rgba(255,110,190,.55) 30%,rgba(110,215,255,.55) 41%,rgba(150,255,160,.5) 51%,rgba(255,235,130,.55) 61%,transparent 76%);background-size:240% 240%;background-position:var(--px) var(--py);mix-blend-mode:color-dodge;opacity:.105}
/* Pillow light: a soft hotspot that follows the pointer, darker sides, a sheen. */
.pack-shine{background:radial-gradient(circle at var(--px) var(--py),rgba(255,255,255,.6),transparent 44%),linear-gradient(90deg,rgba(0,0,0,.38),transparent 13%,rgba(255,255,255,.14) 34%,transparent 52%,transparent 86%,rgba(0,0,0,.38));mix-blend-mode:soft-light}
.pack-crimp{background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 1px,rgba(0,0,0,.2) 1px 3px) top/100% 9% no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 1px,rgba(0,0,0,.2) 1px 3px) bottom/100% 7% no-repeat}
.pack-cut{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform:translateZ(1px);filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #fff)}
.pack-cut polyline{fill:none;stroke:#fff;stroke-width:.55;stroke-linecap:butt;stroke-dasharray:0 3}
.pack-floor{position:absolute;left:10%;right:10%;bottom:-10%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(30,14,10,.34),transparent);pointer-events:none}

/* ---------- Stage */
html:has(.booster-stage[open]){overflow:hidden}
.booster-stage{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--wine);overflow:hidden}
.booster-stage[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
.booster-stage::backdrop{background:transparent;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:backdrop-filter .45s}
@starting-style{.booster-stage[open]::backdrop{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}}
.booster-stage.is-leaving::backdrop{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
.stage-backdrop{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--paper) 86%,transparent),color-mix(in srgb,var(--paper) 97%,transparent) 70%)}
.stage-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px clamp(20px,4vw,48px)}
.stage-bar .mono{font-size:11px}
.stage-close,.stage-action{min-height:48px;padding:0 24px;border:1px solid var(--wine);border-radius:999px;background:transparent;color:var(--wine);font:600 14px/1 var(--font-body)}
.stage-close{display:grid;place-items:center;width:48px;min-height:48px;padding:0}
.stage-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:rotate .3s var(--ease)}
.stage-close:hover svg,.stage-close:focus-visible svg{rotate:90deg}
.stage-close:hover,.stage-action.is-secondary:hover{background:color-mix(in srgb,var(--wine) 8%,transparent)}
.stage-action:not(.is-secondary){background:var(--wine);color:var(--paper)}
.stage-action:disabled{opacity:.4;cursor:default}
.stage-scene{position:relative;min-height:0;touch-action:none;-webkit-user-select:none;user-select:none}
.stage-holder{--pw:min(64vw,calc((100svh - 270px)*.6),330px);position:absolute;left:50%;top:50%;width:var(--pw);aspect-ratio:3/5;translate:-50% -50%;perspective:1100px;cursor:grab;touch-action:none}
.stage-holder:active{cursor:grabbing}
.stage-holder .pack-floor{bottom:-8%}
.tear-hint{position:absolute;left:5%;right:5%;top:15%;height:0;border-top:2px dashed rgba(255,248,238,.85);transform:translateZ(1px);backface-visibility:hidden;pointer-events:none;transition:opacity .2s}
.tear-hint i{position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.8);animation:tear-trace 2.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes tear-trace{0%{left:0;opacity:0}15%{opacity:1}75%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.booster-stage:not([data-phase="sealed"]) .tear-hint,.stage-holder.is-cutting .tear-hint{opacity:0}
.pack-mouth{position:absolute;left:-60%;right:-60%;top:-160%;bottom:85%;overflow:hidden;pointer-events:none;z-index:2}
.pack-mouth .sticker-stack{position:absolute;top:100%;left:50%;width:calc(var(--pw)*.84);margin-left:calc(var(--pw)*-.42);aspect-ratio:1}
.tear-bit{position:absolute;z-index:4;width:6px;height:6px;margin:-3px;border-radius:1px;background:#fff;box-shadow:0 0 6px #fff;pointer-events:none}
.tear-bit:nth-of-type(3n){background:var(--tone-a)}
.stage-deck{position:absolute;left:50%;top:50%;width:min(74vw,calc(100svh - 360px),400px);aspect-ratio:1;translate:-50% -50%;cursor:grab;touch-action:none}
.stage-deck .sticker-stack{position:absolute;inset:0}
/* A finish glows behind the sticker as it is revealed. */
.stage-deck::before{content:'';position:absolute;inset:-22%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--glow,transparent),transparent);opacity:0;transition:opacity .5s}
.stage-deck[data-finish="foil"]{--glow:rgba(120,200,255,.5)}
.stage-deck[data-finish="glitter"]{--glow:rgba(225,160,255,.55)}
.stage-deck[data-finish="gold"]{--glow:rgba(255,196,70,.7)}
.stage-deck:not([data-finish="normal"])::before{opacity:1}
.stage-sticker{position:absolute;inset:0}
.sticker-art{position:relative;display:block;width:100%;aspect-ratio:1}
.sticker-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(30,12,8,.26)) drop-shadow(0 2px 2px rgba(30,12,8,.2));pointer-events:none}
/* ---------- Finishes. Each layer is masked to the sticker's shape (--art)
   or, for gold, to its paper border (--edge). --hx/--hy is where the light
   falls: the pointer on the table, a sweep on the stage. */
.sticker-art>span{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}
/* Foil: the project cards' prism, brightest around the light. */
.sticker-sheen{background-image:repeating-linear-gradient(118deg,#fae882 0%,#92f5ad 7%,#42e8e7 14%,#438fff 21%,#a56aff 28%,#f57bd2 35%,#ff9995 42%,#fae882 49%),repeating-linear-gradient(28deg,rgba(255,255,255,.18) 0 1px,rgba(12,16,31,.12) 1px 2px,transparent 2px 4px);background-size:300% 300%,100% 100%;background-position:var(--hx) var(--hy),center;background-blend-mode:soft-light;mix-blend-mode:color-dodge;filter:saturate(1.4);opacity:.42;
  -webkit-mask:var(--art) center/contain no-repeat,radial-gradient(ellipse at var(--hx) var(--hy),#000 0%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.08) 62%,transparent 100%);-webkit-mask-composite:source-in;
  mask:var(--art) center/contain no-repeat,radial-gradient(ellipse at var(--hx) var(--hy),#000 0%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.08) 62%,transparent 100%);mask-composite:intersect}
/* Glitter: the same foil with pinpoints that drift at different rates. */
.sticker-glitter{background-image:radial-gradient(circle at 11px 17px,#fff 0 1.2px,transparent 2.2px),radial-gradient(circle at 27px 9px,#adf9ff 0 1.4px,transparent 2.4px),radial-gradient(circle at 7px 37px,#ffe3ac 0 1.1px,transparent 2px),radial-gradient(circle at 51px 23px,#f9baff 0 1.7px,transparent 2.8px),radial-gradient(circle at 9px 6px,#fff 0 .8px,transparent 1.5px),radial-gradient(circle at 4px 4px,rgba(255,255,255,.55) 0 .5px,transparent 1px);background-size:23px 31px,37px 29px,43px 47px,59px 67px,13px 17px,7px 9px;background-position:var(--hx) var(--hy),var(--hy) var(--hx),calc(100% - var(--hx)) var(--hy),var(--hx) calc(100% - var(--hy)),var(--hy) var(--hy),center;mix-blend-mode:color-dodge;opacity:.5}
/* Gold holo: the border turns to polished gold, and a warm shine crosses the art. */
.sticker-gild{-webkit-mask:var(--edge) center/contain no-repeat!important;mask:var(--edge) center/contain no-repeat!important;background:linear-gradient(125deg,#6f4a0c 0%,#c8952c 14%,#ffeeb0 26%,#d6a23a 36%,#8a5f12 50%,#e9c262 64%,#fff6cf 72%,#b9851f 84%,#7a520e 100%);background-size:260% 260%;background-position:var(--hx) var(--hy)}
.sticker-art[data-finish="gold"] .sticker-sheen{background-image:linear-gradient(115deg,transparent 22%,rgba(255,224,140,.55) 38%,rgba(255,248,214,.95) 46%,rgba(255,196,84,.6) 53%,transparent 68%),linear-gradient(rgba(255,190,70,.28),rgba(255,190,70,.28));background-size:260% 260%,100% 100%;background-position:var(--hx) var(--hy),center;background-blend-mode:normal;mix-blend-mode:overlay;filter:none;opacity:1}
.stage-summary{position:absolute;inset:0;list-style:none;margin:0 auto;padding:0 clamp(16px,4vw,48px);max-width:1180px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,3vw,44px);align-items:center}
.stage-summary figure{display:grid;justify-items:center;gap:14px;text-align:center}
.stage-summary .sticker-art{width:min(100%,200px)}
.stage-summary figcaption{display:grid;gap:5px}
.stage-summary strong{font:var(--display-weight) clamp(18px,2.1vw,30px)/1.1 var(--font-display);letter-spacing:var(--display-tracking)}
.stage-foot{display:grid;justify-items:center;align-content:end;gap:18px;min-height:170px;padding:0 20px max(28px,env(safe-area-inset-bottom));text-align:center}
.stage-caption{display:grid;align-content:end;gap:6px;max-width:46ch;min-height:92px}
.stage-hint,.stage-note{font-size:15px;line-height:1.6;text-wrap:pretty}
.stage-note{font:italic var(--display-weight) 18px/1.45 var(--font-display);white-space:pre-line}
.stage-kicker{color:var(--violet)}
.stage-name{font:var(--display-weight) clamp(28px,3.4vw,46px)/1.05 var(--font-display);letter-spacing:var(--display-tracking)}
.stage-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* While stickers are revealed one by one, the caption and button sit right
   under the sticker; the caption grows downward, so the sticker holds still
   from one to the next. */
.booster-stage[data-phase="reveal"][open]{grid-template-rows:auto minmax(0,1fr) auto auto minmax(0,1.2fr)}
.booster-stage[data-phase="reveal"] .stage-bar{grid-row:1}
.booster-stage[data-phase="reveal"] .stage-scene{grid-row:3;height:min(74vw,calc(100svh - 360px),400px)}
.booster-stage[data-phase="reveal"] .stage-foot{grid-row:4;min-height:0;padding-top:clamp(20px,3.5vh,40px)}
.booster-stage[data-phase="reveal"] .stage-caption{min-height:118px;align-content:start}
/* The summary is one group: the five stickers with big buttons right under
   them, centred in the stage, no caption. */
.booster-stage.is-summary[open]{grid-template-rows:auto minmax(0,1fr) auto auto minmax(0,1.2fr)}
.booster-stage.is-summary .stage-bar{grid-row:1}
.booster-stage.is-summary .stage-scene{grid-row:3}
.booster-stage.is-summary .stage-foot{grid-row:4;min-height:0;padding-top:clamp(28px,5vh,52px)}
.booster-stage.is-summary .stage-caption{display:none}
.booster-stage.is-summary{cursor:pointer}
.booster-stage.is-summary .stage-summary{position:relative;inset:auto}
.booster-stage.is-summary .stage-action{min-height:62px;padding:0 36px;font-size:17px}

/* ---------- Book: one open spread on its cover, a dotted backing sheet.
   No marked places: a sticker sticks wherever it is dropped. */
.sticker-book{--page:#f6efe2;--page-under:color-mix(in srgb,var(--page) 90%,#6b4a2c);--dots:radial-gradient(rgba(58,42,34,.11) 1px,transparent 1.3px);--edge:#e6dccb;--edge-dark:#d3c4ab;--ink:#3a2a22;--cover:#5e1710;z-index:5;width:min(60%,820px);aspect-ratio:1.5;color:var(--ink);transform:translate(-50%,-50%)}
.book-lift{--lift-pad:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--lift-pad);border-radius:12px;background:linear-gradient(160deg,color-mix(in srgb,var(--cover) 80%,#fff),var(--cover));box-shadow:0 34px 50px -30px rgba(20,10,6,.65),0 10px 18px -10px rgba(20,10,6,.45)}
.sticker-book.is-dragging .book-lift{box-shadow:0 50px 60px -30px rgba(20,10,6,.6),0 16px 26px -12px rgba(20,10,6,.4)}
/* Each page keeps its stickers' stacking to itself, so a turning leaf passes over them. */
.book-page{position:relative;isolation:isolate;min-width:0;background-color:var(--page);background-image:var(--dots);background-size:18px 18px}
.book-page::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}
/* Stacked page edges on the outside, a soft fold toward the spine. */
.book-left{border-radius:6px 2px 2px 6px;box-shadow:-1px 1px 0 var(--edge),-2px 2px 0 var(--edge-dark),-3px 3px 0 var(--edge),-4px 4px 0 var(--edge-dark)}
.book-right{border-radius:2px 6px 6px 2px;box-shadow:1px 1px 0 var(--edge),2px 2px 0 var(--edge-dark),3px 3px 0 var(--edge),4px 4px 0 var(--edge-dark)}
.book-left::after{background:linear-gradient(90deg,rgba(255,255,255,.4),transparent 9%,transparent 78%,rgba(70,45,20,.24))}
.book-right::after{background:linear-gradient(270deg,rgba(255,255,255,.4),transparent 9%,transparent 78%,rgba(70,45,20,.24))}
/* Page numbers sit at the outer bottom corners. */
.book-page::before{content:attr(data-number);position:absolute;bottom:12px;font:500 11px/1 var(--font-mono);color:rgba(58,42,34,.42);pointer-events:none}
.book-left::before{left:16px}
.book-right::before{right:16px}
/* A page turn: a still copy of the page being covered stays put while a
   two-sided leaf swings over the spine. */
.book-lift{position:relative}
.leaf-under{z-index:7;pointer-events:none}
.page-leaf{position:absolute;z-index:8;transform-style:preserve-3d;pointer-events:none}
.page-leaf>.leaf-face{--leaf-shade:0;position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:brightness(calc(1 - var(--leaf-shade)))}
.page-leaf>.leaf-back{transform:rotateY(180deg)}
/* The outer top corners curl up a little when pointed at, or while a sticker
   is held over them: they are where the pages turn. Under the curl shows the
   next page, shaded, its dots lined up with the page's grid (booster.js sets
   --dot-r: the page width modulo the 18px dot tile). */
.page-corner{position:absolute;top:var(--lift-pad);z-index:9;width:64px;height:64px;padding:0;border:0;background:none;cursor:pointer;touch-action:none;--curl:8px}
.page-corner[hidden]{display:none}
.page-prev{left:var(--lift-pad)}
.page-next{right:var(--lift-pad)}
.page-corner::before{content:'';position:absolute;top:0;width:var(--curl);height:var(--curl);transition:width .3s var(--ease),height .3s var(--ease)}
.page-next::before{right:0;background:linear-gradient(225deg,transparent 50%,#fbf7ee 50%,#e9dfcd 100%),var(--dots) right var(--dot-r,0px) top 0/18px 18px,var(--page-under);border-top-right-radius:6px;border-bottom-left-radius:70% 40%;box-shadow:-3px 4px 6px -1px rgba(40,20,10,.28)}
.page-prev::before{left:0;background:linear-gradient(135deg,transparent 50%,#fbf7ee 50%,#e9dfcd 100%),var(--dots) left 0 top 0/18px 18px,var(--page-under);border-top-left-radius:6px;border-bottom-right-radius:70% 40%;box-shadow:3px 4px 6px -1px rgba(40,20,10,.28)}
.page-corner:hover,.page-corner:focus-visible,.page-corner.is-armed{--curl:46px}
.page-corner.is-armed{--curl:56px}
.page-corner.is-pulling{cursor:grabbing}
.page-corner.is-pulling::before{transition:none}
.page-corner:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:8px}

@media(max-width:1050px){
  .about-copy{grid-template-columns:1fr}
  .about-copy p+p{border-left:0;padding:0}
  .about-copy p{font-size:15px}
}
@media(max-width:700px){
  .about-page{--sp-m:20px;--sp-l:32px;--sp-xl:48px}
  .about-opening{grid-template-columns:1fr;gap:0}
  .about-opening>.mono{font-size:11px;margin-bottom:var(--sp-m)}
  .about-payoff{font-size:calc(clamp(38px,11vw,58px)*var(--hero-scale));line-height:1}
  .about-portrait{width:66%;margin:0 13px calc(var(--sp-l) + 13px) auto;grid-row:2}
  .about-copy p{font-size:15px;line-height:1.65}
  .boosters-head>.mono{font-size:11px}
  .boosters-head p:not(.mono){font-size:16px}
  .booster-table{height:1000px;border-radius:14px}
  .table-bar .table-hint{width:100%;order:3}
  .table-pack{--pw:96px}
  .table-bin{right:12px;bottom:12px;width:62px;padding:10px 0 7px}
  .table-bin svg{width:28px;height:32px}
  .table-sticker{--s:70px}
  .stage-bar{padding:16px 22px}
  .stage-foot{min-height:150px;gap:14px}
  .stage-caption{min-height:84px}
  .stage-name{font-size:28px}
  /* Five on a phone: three over two, centred. */
  .stage-summary{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 8px;align-content:center}
  .stage-summary li{grid-column:span 2}
  .stage-summary li:nth-child(4){grid-column:2/4}
  .stage-summary li:nth-child(5){grid-column:4/6}
  .stage-summary strong{font-size:17px}
  .stage-summary .mono{font-size:11px}
  .sticker-book{width:calc(100% - 20px);aspect-ratio:1.3}
  .book-lift{--lift-pad:8px}
  .page-corner{top:8px;width:52px;height:52px}
  .page-prev{left:8px}
  .page-next{right:8px}
  .page-corner:hover,.page-corner:focus-visible{--curl:34px}
}
@media(prefers-reduced-motion:reduce){.about-portrait{rotate:0deg}}