:root{--ink:#0e1114;--ink-2:#151a1f;--line:#252c33;--text:#e8ecef;--muted:#93a0ab;--gold:#e3b877;--radius:20px;--flip:.44s;--ease:cubic-bezier(.4,.05,.2,1);--clip:none}*{box-sizing:border-box}html,body{margin:0}body{background:radial-gradient(1100px 700px at 15% -10%, #1b2430 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #241d24 0%, transparent 55%), var(--ink);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font:16px/1.55 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.stage{background:#0b0e11 url(/images/tiles/board-dark.webp) 50%/300px 300px;width:100%;height:100dvh;min-height:480px;position:relative;overflow:hidden}.board{perspective:1500px;z-index:10;position:absolute;inset:0}.tilt{transform-style:preserve-3d;transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));will-change:transform;transition:transform .5s cubic-bezier(.2,.7,.3,1);position:absolute;inset:0}.vignette{z-index:12;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,#0000 40%,#0000008c 100%);position:absolute;inset:0}.sheen{z-index:14;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(104deg,#0000 44%,#ffffff16 50%,#0000 56%);width:220%;height:200%;animation:13s ease-in-out infinite sweep;position:absolute;top:-50%;left:-60%}@keyframes sweep{0%,18%{transform:translate(-38%)}82%,to{transform:translate(38%)}}.hero{z-index:20;pointer-events:none;transition:opacity .45s var(--ease), transform .45s var(--ease);background:linear-gradient(#06080af0 0%,#06080ad1 26%,#06080a6b 55%,#06080a1a 80%,#0000 100%);padding:clamp(28px,6vh,60px) clamp(20px,5vw,72px) clamp(40px,9vh,90px);position:absolute;top:0;left:0;right:0}.hero>*{max-width:min(19ch,78vw)}.hero .lede{max-width:min(34ch,82vw)}.kicker{letter-spacing:.3em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 2px #000000f2,0 2px 14px #000000e6;margin:0 0 14px;font-size:clamp(10px,1.1vw,12px)}h1{letter-spacing:-.035em;text-shadow:0 4px 40px #0009;margin:0 0 14px;font-size:clamp(30px,5.6vw,68px);font-weight:600;line-height:1}.lede{color:#c2ccd4;text-shadow:0 2px 16px #000000b3;margin:0;font-size:clamp(14px,1.6vw,19px)}@media (max-width:640px){.kicker{white-space:nowrap;letter-spacing:.24em;font-size:10px}}.piece{transform-style:preserve-3d;pointer-events:none;transition:transform var(--flip) var(--ease);cursor:pointer;outline:none;position:absolute}.piece .inner{transform-style:preserve-3d;transition:transform var(--flip) var(--ease);position:absolute;inset:0}.face{clip-path:var(--clip);pointer-events:auto;backface-visibility:hidden;position:absolute;inset:0}.face.back{transform:rotateY(180deg)}.front{background:radial-gradient(130% 100% at 22% 8%, #ffffff38, transparent 58%), linear-gradient(158deg, var(--tone) 0%, var(--tone-2) 100%);filter:drop-shadow(.5px 1px 1px #00000073)}.front .photo{filter:brightness(1.1)saturate(1.1)contrast(1.04);background-position:50%;background-size:cover;position:absolute;inset:0}.front .tint{pointer-events:none;background:linear-gradient(158deg,var(--tone),var(--tone-2));mix-blend-mode:soft-light;opacity:.22;position:absolute;inset:0}.front .scrim{pointer-events:none;background:linear-gradient(#00000042 0%,#0000 26% 38%,#00000094 72%,#000000c7 100%);position:absolute;inset:0}.piece.has-photo .front .pad{justify-content:flex-end;padding-bottom:22%}.grain{pointer-events:none;opacity:.15;mix-blend-mode:multiply;background-image:url(/images/tiles/board-fibre.webp);background-size:190px 190px;position:absolute;inset:0}.piece.empty .grain{opacity:.3}.piece .grain{background-position:var(--gx) var(--gy)}.bevel{pointer-events:none;position:absolute;inset:0}.bevel svg{width:100%;height:100%;display:block;overflow:visible}.bevel path{fill:none}.bevel .soft{filter:blur(3px)}.bevel .lo{stroke:#0000008c;stroke-width:9px;transform:translate(-2.2px,-2.8px)}.bevel .hi{stroke:#fff6;stroke-width:6px;transform:translate(2.2px,2.8px)}.bevel .rim{stroke:#0000008c;stroke-width:1.4px}.front .pad{justify-content:center;align-items:center;gap:9%}.front .glyph{color:#ffffffeb;justify-content:center;align-items:center;width:100%;display:flex}.front .glyph svg{filter:drop-shadow(0 4px 12px #0006);width:32%;min-width:30px;max-width:66px;height:auto}.front .label{text-align:center;letter-spacing:.15em;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px #00000080;padding:0 6%;font-size:clamp(12px,1.25vw,16px);font-weight:600}.piece.inert{cursor:default}.piece.empty .photo{filter:brightness(.9)contrast(.92)sepia(.34)saturate(1.5)hue-rotate(-6deg)}.piece.empty .front{filter:drop-shadow(1px 2px 3px #00000080);background:radial-gradient(130% 100% at 22% 8%, #ffffff24, transparent 55%), repeating-linear-gradient(122deg, #ffffff04 0 2px, transparent 2px 5px), linear-gradient(158deg, var(--tone) 0%, var(--tone-2) 100%)}.mark{inset:calc(var(--py) + 9%) calc(var(--px) + 9%);background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute}.pad{inset:var(--py) var(--px);flex-direction:column;display:flex;position:absolute}.back{background:linear-gradient(160deg,#171d24,#0d1116)}.back .pad{text-align:left;justify-content:center;padding:0 11%;overflow:hidden}.back h3{color:var(--gold);letter-spacing:-.01em;margin:0 0 .5em;font-size:clamp(15px,1.5vw,20px)}.back p{color:#c3ccd4;margin:0 0 1.1em;font-size:clamp(11.5px,1.05vw,14.5px);line-height:1.5}.more{letter-spacing:.03em;color:#1a1409;background:var(--gold);white-space:nowrap;border-radius:999px;align-self:flex-start;align-items:center;gap:6px;padding:8px 14px;font-size:clamp(11px,1vw,13px);font-weight:600;text-decoration:none;transition:transform .16s,box-shadow .16s;display:inline-flex}.more:hover{transform:translateY(-1px);box-shadow:0 6px 18px #e3b87752}.shot{letter-spacing:.06em;text-transform:uppercase;color:#66727c;margin-top:.9em;font-size:clamp(9px,.8vw,11px)}.board.assembled .piece.open{z-index:30;transform:translateZ(70px)scale(1.06)}.piece.open .front{filter:drop-shadow(0 26px 34px #000000b8)}.piece.open .inner{transform:rotateY(180deg)}.piece.morph .face{clip-path:none;border-radius:var(--radius);inset:var(--py) var(--px)}.piece.morph .front{filter:none}.piece.morph .bevel,.piece.morph .grain{display:none}.piece.morph .back{box-shadow:inset 0 0 0 1px #e3b8774d,0 34px 70px -22px #000000d9}.piece.morph .pad{padding:9% 11%;inset:0}.piece.tight .back p,.piece.tight .back .shot{display:none}.piece{opacity:0;transform:translate3d(var(--dx),var(--dy),420px) rotate(var(--dr)) scale(.86)}.board.assembled .piece{opacity:1;transform:translate(var(--tx),var(--ty)) rotate(var(--rz));transition:opacity .45s ease var(--delay), transform 1.05s cubic-bezier(.16,.9,.24,1.02) var(--delay)}.board.settled .piece{transition:transform var(--flip) var(--ease), opacity .25s ease}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}