/* Baize Studio, v6. Paper and felt: the site is printed matter, the hero and the tables are the cloth. Shared tokens, fonts,
   masthead, felt and colophon serve the home page and /games (games/lobby.css builds on them); the rest is the home page. */
@font-face{font-family:'Libertine';src:url('/assets/fonts/libertine-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Libertine';src:url('/assets/fonts/libertine-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Libertine';src:url('/assets/fonts/libertine-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/assets/fonts/plex-mono-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/assets/fonts/plex-mono-medium.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --paper:#efe8da;--paper-2:#e5dcc8;--ink:#1b1a17;--ink-2:#4b463d;--rule:#1b1a1729;
  --felt:#1f4a39;--felt-deep:#163728;--cream:#f2ead9;--cream-2:#cfc6b0;--red:#b3352b;--leather:#3b2419;
  --serif:'Libertine','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --gutter:clamp(16px,4.2vw,64px);--max:1360px;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 19px/1.55 var(--serif);-webkit-font-smoothing:antialiased;font-variant-numeric:oldstyle-nums proportional-nums;overflow-x:clip;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url%28%23n%29'/%3E%3C/svg%3E")}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:2px}
.felt :focus-visible{outline-color:var(--cream)}
img{max-width:100%}
h1,h2,h3{font-weight:600;font-variant-numeric:lining-nums;text-wrap:balance}
p{text-wrap:pretty}
.skip-link{position:fixed;z-index:50;top:12px;left:16px;background:var(--ink);color:var(--paper);padding:10px 16px;text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* Masthead */
.masthead{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);height:92px;display:flex;align-items:center;gap:40px}
.brand{display:block;line-height:0;text-decoration:none;flex:none}
.wordmark{height:46px;width:auto;overflow:visible}
.wm-letters{fill:currentColor}
.masthead .brand{color:var(--ink)}
.masthead nav{display:flex;gap:30px;margin-left:auto}
.masthead nav a,.masthead nav button{white-space:nowrap}
.masthead nav a,.masthead nav button{font:400 18px/1 var(--serif);text-decoration:none;background:none;border:0;padding:10px 0;position:relative}
.masthead nav a::after,.masthead nav button::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.masthead nav a:hover::after,.masthead nav button:hover::after{transform:scaleX(1);transform-origin:left}
.masthead nav a[aria-current="page"]::after{transform:scaleX(1)}
.masthead-note{margin:0;font:400 12.5px/1.3 var(--mono);color:var(--ink-2);white-space:nowrap;padding-left:28px;border-left:1px solid var(--rule)}

/* Felt */
.felt{position:relative;background-color:var(--felt);color:var(--cream);isolation:isolate;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%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='260' height='260' filter='url%28%23f%29'/%3E%3C/svg%3E"),radial-gradient(130% 90% at 50% 0%,#28604a 0%,var(--felt) 55%,var(--felt-deep) 100%)}
.felt-light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--mx,72%) var(--my,38%),#fff3d61c,transparent 65%);transition:opacity .6s}

/* Shared by the home page and /games (games/lobby.css builds on it): colophon, About dialog, phone masthead. */
.colophon{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,110px) var(--gutter) 40px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,6vw,90px);align-items:end}
.colophon .wordmark{height:clamp(70px,10vw,130px)}
.colophon p{margin:0 0 10px;max-width:40em;color:var(--ink-2);font-size:16px}
.colophon .fine{font:400 12px/1.4 var(--mono)}
.colophon .colophon-links{color:var(--ink-2)}
.colophon-links a{color:var(--ink);text-underline-offset:3px}
dialog{width:min(600px,calc(100% - 32px));max-height:88dvh;padding:44px 44px 36px;border:0;border-radius:6px;background:var(--paper);color:var(--ink);box-shadow:0 40px 90px #0007}
dialog::backdrop{background:#0f1a15c4;backdrop-filter:blur(5px)}
dialog h2{font-size:40px;margin:0 0 18px;line-height:1.05}
dialog p{font-size:17px;color:var(--ink-2);margin:0 0 14px}
body:has(dialog[open]){overflow:hidden}
.dialog-close{position:absolute;right:14px;top:12px;width:44px;height:44px;border:0;background:none;font-size:28px;line-height:1}
.about-play{display:inline-block;margin-top:10px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule)}
.motion .wm-chip-spin{transform-box:fill-box;transform-origin:center;animation:chip-drop 1.15s .2s cubic-bezier(.3,.7,.3,1) both}
@keyframes chip-drop{0%{transform:translateY(-140%) rotate(-260deg);opacity:0}45%{opacity:1}62%{transform:translateY(8%) rotate(14deg)}78%{transform:translateY(-14%) rotate(-6deg)}90%{transform:translateY(2%) rotate(2deg)}100%{transform:none}}
@media (max-width:720px){
  body{font-size:17px}
  .masthead{height:74px;gap:16px}
  .wordmark{height:34px}
  .masthead nav{gap:16px}
  .masthead nav a,.masthead nav button{font-size:16px}
  .masthead-note{display:none}
  .colophon{grid-template-columns:1fr;gap:18px}
  dialog{padding:36px 22px 26px}
}
/* The nav is two links (Games, For casinos) and never wraps; below 380px the links and gaps tighten. */
@media (max-width:380px){.masthead nav{gap:12px}.masthead nav a,.masthead nav button{font-size:15px}}
@media (max-width:340px){.masthead{gap:10px}.masthead nav{gap:10px}.masthead .wordmark{height:30px}}
@media (prefers-reduced-motion:reduce){.motion .wm-chip-spin{animation:none}html{scroll-behavior:auto}}

/* ==========================================================================================================================
   Home page (body.home). A games studio's front door: the felt hero with a hand of key art, the newest releases on a
   rail, the flagship games with their maths, the catalogue in one ledger, what we stand for, and the two prices.
   Hidden "before" states only exist under html.motion (set by site.mjs), so the page is complete without script, and
   prefers-reduced-motion keeps every final state with no movement.
   ========================================================================================================================== */
.home{--brass:#c9a96e;--brass-hi:#ead39f;--brass-lo:#8d6c3a;--felt-ink:#0e2219;--card:#f7f2e7}
.home main{display:block}
.kicker{display:block;font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 12px}
.felt .kicker{color:var(--brass-hi)}

/* One primary call to action, the same brass pill on felt and on paper; the outline is the only secondary. */
.home .button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#f0dcae,#d3b475 55%,#c19d5c);color:#13291f;text-decoration:none;font:600 18px/1 var(--serif);letter-spacing:.005em;
  box-shadow:inset 0 1px 0 #fff8e6b3,inset 0 -1px 0 #7a5a2a66,0 10px 22px -12px #000c;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.home .button::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,#fffbef99 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.home .button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff8e6b3,inset 0 -1px 0 #7a5a2a66,0 16px 30px -14px #000d}
.home .button:hover::after{transform:translateX(120%)}
.home .button-line{background:none;color:inherit;box-shadow:inset 0 0 0 1px currentColor;opacity:.92}
.home .button-line::after{display:none}
.home .button-line:hover{opacity:1;background:#f2ead912;box-shadow:inset 0 0 0 1px currentColor}
.play-link{display:inline-flex;align-items:center;gap:10px;font:600 19px/1 var(--serif);text-decoration:none;padding:10px 0;position:relative;white-space:nowrap}
.play-link::after{content:'';position:absolute;left:0;right:34px;bottom:2px;height:1px;background:currentColor;opacity:.35;transition:opacity .3s,right .4s var(--ease)}
.play-link:hover::after{opacity:1;right:0}
.play-link svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.4;fill:none;transition:transform .35s var(--ease)}
.play-link:hover svg{transform:translateX(6px)}

/* Masthead sits on the felt */
.home .masthead{position:absolute;left:0;right:0;top:0;z-index:20;color:var(--cream)}
.home .masthead .brand{color:var(--cream)}
.home .masthead nav a{color:var(--cream)}

/* ---- Hero ---------------------------------------------------------------------------------------------------------- */
.hero{overflow:hidden;padding:clamp(112px,10vw,136px) 0 clamp(110px,10vw,150px);min-height:min(100svh,1080px);display:flex;flex-direction:column;justify-content:center;
  border-bottom:16px solid var(--leather);border-radius:0 0 50% 50%/0 0 clamp(40px,8vw,120px) clamp(40px,8vw,120px);
  box-shadow:inset 0 -2px 0 #ffffff14,0 22px 40px -22px #1b1a17b3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%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='260' height='260' filter='url%28%23f%29'/%3E%3C/svg%3E"),
    radial-gradient(70% 60% at 72% 34%,#2f6b52 0%,transparent 70%),radial-gradient(120% 90% at 50% -10%,#28604a 0%,var(--felt) 50%,var(--felt-ink) 100%)}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:conic-gradient(from 180deg at 70% -12%,transparent 160deg,#fff4d614 172deg,#fff4d626 180deg,#fff4d614 188deg,transparent 200deg)}
.dust{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-in{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,12fr) minmax(0,10fr);gap:clamp(24px,4vw,72px);align-items:center}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-hi)}
.eyebrow::before{content:'';flex:none;width:34px;height:1px;background:currentColor;opacity:.7}
.hero h1{font-size:clamp(44px,5.5vw,92px);line-height:.98;letter-spacing:-.022em;margin:0 0 26px;font-weight:600}
.hero h1 .ln{display:block;overflow:hidden;padding:0 .12em .1em 0;margin-bottom:-.1em}
.hero h1 .ln>span{display:inline-block}
.hero h1 em{font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--brass-hi) 0%,#fff4d6 22%,var(--brass) 44%,var(--brass-hi) 70%,#f5e3b6 100%);background-size:220% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.hero-lede{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--cream-2);max-width:33em;margin:0 0 30px}
.hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 38px}
.hero-stats{list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:1px solid #f2ead92e;max-width:600px}
.hero-stats li{display:flex;flex-direction:column;gap:8px}
.hero-stats b{font:600 clamp(32px,3vw,46px)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--brass-hi);letter-spacing:-.01em}
.hero-stats span:not([data-count]){font:400 12px/1.4 var(--mono);color:var(--cream-2);letter-spacing:.02em}

/* The hand: five posters fanned around a pivot well below the cards. site.mjs deals them; without it they rest in place. */
.hand-wrap{position:relative;container-type:inline-size;aspect-ratio:1.02;max-width:660px;width:100%;justify-self:center}
.hand{--rx:0deg;--ry:0deg;list-style:none;margin:0;padding:0;position:absolute;inset:0;transform:perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .9s var(--ease)}
.hcard{--o:calc(var(--i) - 2);--cw:38cqi;position:absolute;left:50%;bottom:14%;width:var(--cw);aspect-ratio:2/3;margin-left:calc(var(--cw)/-2);
  transform-origin:50% 150%;transform:rotate(calc(var(--o)*13deg)) translateY(calc(var(--o)*var(--o)*1.6cqi));z-index:calc(10 - var(--o)*var(--o))}
.hcard>a{display:block;width:100%;height:100%;border-radius:5.5%/3.7%;transition:transform .6s var(--ease)}
.hcard>a:hover,.hcard>a:focus-visible{transform:translateY(-9%) scale(1.05)}
.hcard:has(>a:hover),.hcard:has(>a:focus-visible){z-index:30}
.hand:has(.hcard>a:hover) .hcard:not(:has(>a:hover))>a{transform:scale(.98);filter:brightness(.82)}
.hcard>a{transition:transform .6s var(--ease),filter .6s var(--ease)}
.hcard-in{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d}
.hcard-face,.hcard-back{position:absolute;inset:0;border-radius:5.5%/3.7%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 1px 0 #ffffff26 inset,0 34px 50px -26px #000d,0 10px 18px -10px #000a}
.hcard-face{background:#141414}
.hcard-face img{display:block;width:100%;height:100%;object-fit:cover}
.hcard-face::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 0 0 5px #00000033;pointer-events:none}
.hcard-face::after{content:'';position:absolute;inset:-20%;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#fff6dc59 50%,transparent 60%);transform:translateX(-80%);transition:transform 1.1s var(--ease)}
.hcard>a:hover .hcard-face::after{transform:translateX(80%)}
.hcard-back{transform:rotateY(180deg);background:var(--felt-deep) url('/assets/baize-mark-v5.svg') center/40% no-repeat;box-shadow:inset 0 0 0 .9cqi #f3ecdc,0 30px 40px -24px #000c}
.hcard-back::after{content:'';position:absolute;inset:7%;border:1px solid #f2ead966;border-radius:4%}
.hand-shadow{position:absolute;left:12%;right:12%;bottom:4%;height:12%;border-radius:50%;background:radial-gradient(closest-side,#0009,transparent);pointer-events:none}
.rail{position:absolute;left:3%;right:3%;bottom:22px;height:clamp(60px,10vw,150px);border-bottom:1px solid #f2ead940;border-radius:0 0 50% 50%/0 0 clamp(40px,8vw,120px) clamp(40px,8vw,120px);pointer-events:none}

@media (min-width:1600px){.hero-in,.home .masthead{max-width:1560px}.hand-wrap{max-width:740px}}

/* ---- Section scaffolding ------------------------------------------------------------------------------------------ */
.home section{scroll-margin-top:20px}
.sec-head{max-width:var(--max);margin:0 auto clamp(40px,5vw,72px);padding:0 var(--gutter)}
.sec-no{font:500 13px/1 var(--mono);color:var(--red);letter-spacing:.06em;margin:0 0 16px;font-variant-numeric:lining-nums tabular-nums;display:flex;align-items:center;gap:12px}
.sec-no::after{content:'';width:48px;height:1px;background:currentColor;opacity:.5}
.felt .sec-no{color:var(--brass-hi)}
.sec-head h2{font-size:clamp(46px,7vw,108px);line-height:.94;letter-spacing:-.025em;margin:0 0 22px}
.sec-head>p:last-child{max-width:34em;color:var(--ink-2);margin:0;font-size:clamp(18px,1.5vw,21px)}
.felt .sec-head>p:last-child{color:var(--cream-2)}

/* ---- Latest releases: a slow rail of the newest games ------------------------------------------------------------- */
.latest{padding:clamp(56px,7vw,96px) 0 0}
.row-head{max-width:var(--max);margin:0 auto 28px;padding:0 var(--gutter);display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.row-head h2{font-size:clamp(32px,3.6vw,52px);line-height:1;letter-spacing:-.015em;margin:0}
.marquee{position:relative;overflow:hidden;padding:10px 0 24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 64s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.rel-list{display:flex;gap:clamp(16px,1.6vw,26px);padding:0 clamp(8px,.8vw,13px);margin:0;list-style:none}
.rel{width:clamp(220px,21vw,310px);flex:none}
.rel>a{display:block;text-decoration:none}
.rel-art{display:block;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:var(--felt-deep);box-shadow:0 0 0 1px #1b1a1714,0 22px 34px -24px #1b1a17cc;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.rel-art img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1s var(--ease)}
.rel>a:hover .rel-art{transform:translateY(-6px);box-shadow:0 0 0 1px #1b1a1714,0 30px 40px -26px #1b1a17e6}
.rel>a:hover .rel-art img{scale:1.06}
.rel-name{display:block;margin:14px 0 4px;font:600 21px/1.1 var(--serif)}
.rel-meta{display:block;font:400 12px/1.3 var(--mono);color:var(--ink-2);font-variant-numeric:lining-nums}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- Flagship games ------------------------------------------------------------------------------------------------ */
.flagship{padding:clamp(56px,7vw,110px) 0 clamp(70px,9vw,130px)}
.flag-grid{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(48px,5vw,80px) clamp(22px,2.4vw,40px)}
.flag{grid-column:span 2;min-width:0}
.flag-big{grid-column:span 3}
.flag-art{position:relative;display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--felt-deep);isolation:isolate;
  box-shadow:0 0 0 1px #1b1a1712,0 34px 60px -38px #1b1a17f2,0 12px 22px -16px #1b1a1766;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.flag-art img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--ease)}
.flag-art:hover img{scale:1.045}
.shine{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(520px circle at var(--sx,50%) var(--sy,0%),#fff8e340,transparent 46%)}
.flag-art:hover .shine,.live-art:hover .shine{opacity:1}
.flag-copy{padding-top:26px}
.flag-copy h3{font-size:clamp(34px,3vw,48px);line-height:1;letter-spacing:-.015em;margin:0 0 14px}
.flag-big .flag-copy h3{font-size:clamp(40px,4.2vw,66px)}
.flag-copy h3 a,.live-copy h3 a{text-decoration:none}
.flag-copy>p:not(.kicker){color:var(--ink-2);margin:0 0 20px;max-width:32em;font-size:18px}
.flag-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 14px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.flag-facts div{min-width:0;padding-right:10px}
.flag-facts div+div{padding-left:14px;border-left:1px solid var(--rule)}
.flag-facts dt{font:400 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px}
.flag-facts dd{margin:0;font:600 clamp(20px,1.7vw,26px)/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}

/* AI Live Blackjack: a table of its own, with the AI disclosure on the picture and in the copy. */
.live-table{width:min(calc(100% - 2*var(--gutter)),calc(var(--max) - 2*var(--gutter)));margin:clamp(72px,8vw,120px) auto 0;padding:clamp(18px,2.6vw,40px);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(26px,4vw,64px);align-items:center;border-radius:clamp(20px,2.4vw,34px);
  border:clamp(8px,.9vw,12px) solid var(--leather);box-shadow:inset 0 0 0 1px #f2ead926,0 40px 70px -40px #1b1a17f2;overflow:hidden}
.live-art{position:relative;display:block;aspect-ratio:16/9;border-radius:clamp(10px,1.2vw,16px);overflow:hidden;background:#0c1712;box-shadow:0 30px 50px -30px #000e,0 0 0 1px #f2ead91f}
.live-art img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--ease)}
.live-art:hover img{scale:1.04}
.ai-badge{position:absolute;right:12px;top:12px;z-index:3;padding:7px 12px;border-radius:999px;background:var(--red);color:#fff;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 2px 10px #0007;pointer-events:none}
.live-copy h3{font-size:clamp(38px,4vw,62px);line-height:1;letter-spacing:-.015em;margin:0 0 14px}
.live-copy>p:not(.kicker){color:var(--cream-2);font-size:17px;margin:0 0 18px;max-width:30em}
.live-copy .flag-facts{border-color:#f2ead933}
.live-copy .flag-facts div+div{border-color:#f2ead933}
.live-copy .flag-facts dt{color:var(--cream-2)}
.live-copy>p.live-note{display:flex;gap:10px;align-items:flex-start;font:400 12.5px/1.45 var(--mono);color:var(--cream);margin:0 0 14px;padding:12px 14px;border-radius:10px;background:#0b1b1466;box-shadow:inset 0 0 0 1px #f2ead924}
.live-note::before{content:'AI';flex:none;padding:3px 6px;border-radius:4px;background:var(--red);color:#fff;font-weight:500;font-size:10.5px;line-height:1.2}

/* ---- The catalogue at a glance ------------------------------------------------------------------------------------- */
.catalogue{max-width:var(--max);margin:0 auto;padding:clamp(70px,9vw,130px) var(--gutter);border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,100px);align-items:start}
.cat-head{position:sticky;top:40px}
.cat-head h2{font-size:clamp(42px,5vw,76px);line-height:.96;letter-spacing:-.022em;margin:0 0 18px}
.cat-total{display:flex;flex-direction:column;margin:8px 0 22px}
.cat-n{font:600 clamp(110px,15vw,220px)/.82 var(--serif);letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;color:var(--felt);margin-left:-.04em}
.cat-unit{font-size:clamp(18px,1.5vw,21px);color:var(--ink-2);max-width:18em;margin-top:16px}
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ledger>li{border-bottom:1px solid var(--rule)}
.ledger a{position:relative;display:grid;grid-template-columns:clamp(120px,11vw,150px) minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:clamp(16px,2vw,30px);align-items:center;padding:clamp(18px,2vw,26px) 4px;text-decoration:none;isolation:isolate}
.ledger a::before{content:'';position:absolute;inset:0 -14px;z-index:-1;border-radius:10px;background:var(--paper-2);transform:scaleX(.96);opacity:0;transition:opacity .4s,transform .5s var(--ease)}
.ledger a:hover::before,.ledger a:focus-visible::before{opacity:1;transform:none}
.led-thumbs{grid-row:span 2;position:relative;height:clamp(52px,4.8vw,66px)}
.led-thumbs img{position:absolute;top:0;left:0;height:100%;width:auto;aspect-ratio:3/2;object-fit:cover;border-radius:7px;box-shadow:0 0 0 1.5px var(--paper),0 8px 14px -8px #1b1a17cc;transition:transform .5s var(--ease)}
.led-thumbs img:nth-child(2){transform:translateX(18%) rotate(4deg)}
.led-thumbs img:nth-child(3){transform:translateX(36%) rotate(8deg)}
.led-thumbs img:nth-child(1){z-index:3}.led-thumbs img:nth-child(2){z-index:2}
.ledger a:hover .led-thumbs img:nth-child(2){transform:translateX(26%) rotate(6deg) translateY(-4%)}
.ledger a:hover .led-thumbs img:nth-child(3){transform:translateX(52%) rotate(11deg) translateY(-6%)}
.led-name{font:600 clamp(26px,2.5vw,36px)/1.05 var(--serif);letter-spacing:-.01em}
.led-line{grid-column:2;font-size:16px;line-height:1.4;color:var(--ink-2);margin-top:4px}
.led-n{grid-column:3;grid-row:1/span 2;font:600 clamp(44px,4.4vw,64px)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--felt);min-width:1.3em;text-align:right}

/* ---- What we stand for ----------------------------------------------------------------------------------------------- */
.stand{padding:clamp(120px,13vw,190px) 0 clamp(90px,10vw,150px);border-top:16px solid var(--leather);border-radius:50% 50% 0 0/clamp(40px,8vw,120px) clamp(40px,8vw,120px) 0 0}
.tenets{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);list-style:none;counter-reset:tenet;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(28px,3.4vw,56px)}
.tenets li{counter-increment:tenet;position:relative;padding-top:26px}
.tenets li::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--brass),#c9a96e33);transform-origin:left}
.tenets li::after{content:counter(tenet,decimal-leading-zero);position:absolute;right:0;top:20px;font:italic 400 clamp(40px,3.6vw,56px)/1 var(--serif);color:#ead39f2e;font-variant-numeric:lining-nums}
.tenets h3{font-size:clamp(26px,2.3vw,34px);line-height:1.08;margin:0 0 12px;color:var(--cream);padding-right:2.4em}
.tenets p{margin:0;color:var(--cream-2);font-size:17px;max-width:26em}

/* ---- Pricing ------------------------------------------------------------------------------------------------------- */
.pricing{padding:clamp(80px,10vw,150px) 0 clamp(40px,5vw,70px)}
.pricing .sec-head{text-align:center}
.pricing .sec-head .sec-no{justify-content:center}
.pricing .sec-head .sec-no::before{content:'';width:48px;height:1px;background:currentColor;opacity:.5}
.pricing .sec-head>p:last-child{margin:0 auto;max-width:36em}
.plans{max-width:1120px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.plan{position:relative;border-radius:clamp(20px,2vw,28px);padding:clamp(30px,3.6vw,52px);overflow:hidden;isolation:isolate}
.plan h3{font:500 13px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 clamp(18px,2vw,28px)}
.plan-felt{color:var(--cream);background:radial-gradient(120% 90% at 20% 0%,#2f6b52 0%,var(--felt) 50%,var(--felt-ink) 100%);box-shadow:inset 0 0 0 1px #ead39f59,0 40px 70px -44px #1b1a17f2}
.plan-felt::before{content:'';position:absolute;inset:10px;border:1px solid #ead39f26;border-radius:clamp(14px,1.5vw,20px);pointer-events:none}
.plan-felt h3{color:var(--brass-hi)}
.plan-paper{background:var(--card);box-shadow:inset 0 0 0 1px var(--rule),0 30px 60px -48px #1b1a17cc}
.plan-paper h3{color:var(--red)}
.plan::after{content:'';position:absolute;inset:-30%;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 42%,#fff6dc1f 50%,transparent 58%);transform:translateX(-70%)}
.plan-felt::after{background:linear-gradient(115deg,transparent 42%,#fff6dc26 50%,transparent 58%)}
.price{display:flex;flex-direction:column;margin:0 0 clamp(22px,2.6vw,34px)}
.price-n{font:600 clamp(84px,10vw,150px)/.86 var(--serif);letter-spacing:-.035em;font-variant-numeric:lining-nums tabular-nums}
.plan-felt .price-n{background:linear-gradient(180deg,#fbeccb,var(--brass) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan-paper .price-n{color:var(--felt)}
.price-unit{margin-top:14px;font-size:clamp(19px,1.6vw,23px)}
.plan-felt .price-unit{color:var(--cream-2)}
.plan-paper .price-unit{color:var(--ink-2)}
.plan ul{list-style:none;margin:0;padding:20px 0 0;border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 18%,transparent);display:grid;gap:12px}
.plan li{position:relative;padding-left:24px;font-size:18px}
.plan li::before{content:'';position:absolute;left:3px;top:.55em;width:7px;height:7px;transform:rotate(45deg);background:var(--red)}
.plan-felt li::before{background:var(--brass-hi)}
.plan-foot{max-width:1120px;margin:clamp(30px,4vw,48px) auto 0;padding:0 var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px}
.plan-foot>p:first-child{margin:0;font:italic 400 clamp(20px,1.8vw,26px)/1.3 var(--serif);color:var(--ink-2)}
.plan-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:0}

/* Footer on the home page */
.home .colophon{border-top:1px solid var(--rule);margin-top:clamp(60px,7vw,100px)}
.home .colophon-links a+span+a,.home .colophon-links a{white-space:nowrap}

/* ---- Motion -------------------------------------------------------------------------------------------------------- */
.motion .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease) calc(var(--d,0)*110ms),transform 1.15s var(--ease) calc(var(--d,0)*110ms)}
.motion .rv.in{opacity:1;transform:none}
.motion .flag.rv .flag-art img,.motion .live-table.rv .live-art img{scale:1.14;transition:scale 1.8s var(--ease) calc(var(--d,0)*110ms)}
.motion .flag.rv.in .flag-art img,.motion .live-table.rv.in .live-art img{scale:1}
.motion .flag.rv.in .flag-art:hover img,.motion .live-table.rv.in .live-art:hover img{scale:1.045;transition-delay:0s}
.motion .tenets li.rv::before{transform:scaleX(0);transition:transform 1.4s var(--ease) calc(var(--d,0)*110ms + .2s)}
.motion .tenets li.rv.in::before{transform:none}
.motion .plan.rv.in::after{animation:plan-sheen 2.2s .5s var(--ease) both}
.motion .hero h1 .ln>span{animation:ln-up 1.2s var(--ease) both}
.motion .hero h1 .ln+.ln>span{animation-delay:.12s}
.motion .hero h1 em{animation:brass 3.6s 1.1s ease-in-out both}
.motion .eyebrow,.motion .hero-lede,.motion .hero-links,.motion .hero-stats{animation:lift 1s var(--ease) both}
.motion .eyebrow{animation-delay:.05s}.motion .hero-lede{animation-delay:.28s}.motion .hero-links{animation-delay:.4s}.motion .hero-stats{animation-delay:.52s}
.motion .hand:not(.dealt) .hcard{visibility:hidden}
.motion .hero .rail{animation:fade 1.6s .4s both}
@keyframes ln-up{from{transform:translateY(105%)}to{transform:none}}
@keyframes lift{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes brass{from{background-position:100% 0}to{background-position:0 0}}
@keyframes plan-sheen{from{transform:translateX(-70%)}to{transform:translateX(70%)}}

@media (prefers-reduced-motion:reduce){
  .motion .rv,.motion .tenets li.rv::before{opacity:1;transform:none;transition:none}
  .motion .flag.rv .flag-art img,.motion .live-table.rv .live-art img{scale:1;transition:none}
  .motion .hero h1 .ln>span,.motion .hero h1 em,.motion .eyebrow,.motion .hero-lede,.motion .hero-links,.motion .hero-stats,.motion .hero .rail,.motion .plan.rv.in::after{animation:none}
  .marquee-track{animation:none;width:auto}
  .rel-copy{display:none}
  .marquee{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;padding-left:var(--gutter);padding-right:var(--gutter)}
  .rel{scroll-snap-align:start}
  .hand,.hcard>a,.flag-art,.rel-art,.ledger a::before,.led-thumbs img,.home .button,.home .button::after{transition:none}
  .flag-art img,.rel-art img,.live-art img{transition:none}
}

/* ---- Tablet -------------------------------------------------------------------------------------------------------- */
@media (max-width:1020px){
  .hero{min-height:0}
  .hero-in{grid-template-columns:1fr;gap:clamp(20px,4vw,40px)}
  .hero-copy{max-width:680px}
  .hero h1{font-size:clamp(48px,8.4vw,80px)}
  .hand-wrap{max-width:560px;aspect-ratio:1.3}
  .hcard{--cw:33cqi;bottom:10%}
  .flag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flag,.flag-big{grid-column:span 1}
  .flag:first-child{grid-column:span 2}
  .live-table{grid-template-columns:1fr}
  .catalogue{grid-template-columns:1fr}
  .cat-head{position:static}
  .cat-total{flex-direction:row;align-items:flex-end;gap:20px}
  .cat-unit{margin:0 0 10px}
  .tenets{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---- Phone --------------------------------------------------------------------------------------------------------- */
@media (max-width:720px){
  .hero{padding:104px 0 84px;border-bottom-width:12px}
  .eyebrow{font-size:10.5px;letter-spacing:.1em;gap:10px;margin-bottom:20px}
  .eyebrow::before{width:20px}
  .hero h1{font-size:clamp(40px,11.4vw,56px);margin-bottom:20px}
  .hero-lede{margin-bottom:26px}
  .hero-links{margin-bottom:32px}
  .hero-links .button{flex:1 1 auto;min-width:0}
  .hero-stats{gap:12px;padding-top:18px}
  .hero-stats b{font-size:30px}
  .hero-stats span:not([data-count]){font-size:10.5px}
  .hand-wrap{aspect-ratio:1.18;margin-top:6px}
  .hcard{--cw:37cqi;bottom:12%}
  .rail{bottom:14px}
  .row-head{align-items:flex-start;flex-direction:column;gap:6px}
  .rel{width:62vw;max-width:260px}
  .flag-grid{grid-template-columns:1fr;gap:56px}
  .flag:first-child{grid-column:auto}
  .flag-copy{padding-top:20px}
  .flag-copy>p:not(.kicker){font-size:17px}
  .flag-facts dd{font-size:20px}
  .flag-facts div+div{padding-left:10px}
  .live-table{padding:14px 14px 22px;border-width:8px}
  .live-copy{padding:0 6px}
  .catalogue{padding-top:70px;padding-bottom:70px}
  .cat-total{flex-direction:column;align-items:flex-start;gap:0}
  .cat-unit{margin-top:12px}
  .ledger a{grid-template-columns:86px minmax(0,1fr) auto;column-gap:14px}
  .led-thumbs{height:42px}
  .led-line{font-size:15px}
  .tenets{grid-template-columns:1fr;gap:34px}
  .stand{border-top-width:12px}
  .plans{grid-template-columns:1fr}
  .plan-foot{flex-direction:column;align-items:flex-start}
}