/* SOFT 17 — "Pocket Contents" foundation.
   Fonts, tokens, base and shared objects. Header, footer, dialog and toast live in pages.css.
   Layer order is fixed here: page stylesheets put everything inside @layer pages { … }. */
@layer tokens, base, objects, components, pages;

/* ───────── fonts (self-hosted Latin subsets, SIL OFL 1.1, see /fonts/LICENSE.md) ───────── */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/fraunces-roman-300-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 500;font-display:swap;src:url(/fonts/fraunces-italic-300-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Big Shoulders';font-style:normal;font-weight:700 800;font-display:swap;src:url(/fonts/big-shoulders-700-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/schibsted-grotesk-400-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/courier-prime-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/courier-prime-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Metric-matched local fallbacks keep the swap from shifting the layout. */
@font-face{font-family:'Fraunces Fallback';font-style:normal;src:local('Georgia');size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Fraunces Fallback';font-style:italic;src:local('Georgia Italic'),local('Georgia-Italic');size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Schibsted Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica');size-adjust:103.4%;ascent-override:94.5%;descent-override:24.9%;line-gap-override:0%}
@font-face{font-family:'Big Shoulders Fallback';font-weight:700 800;src:local('Arial Narrow Bold'),local('ArialNarrow-Bold'),local('Arial Narrow');size-adjust:89%;ascent-override:110.8%;descent-override:24.1%;line-gap-override:0%}
@font-face{font-family:'Courier Prime Fallback';src:local('Courier New'),local('CourierNewPSMT');size-adjust:100%;ascent-override:78.2%;descent-override:34.2%;line-gap-override:0%}

/* ───────────────────────── tokens ───────────────────────── */
@layer tokens{
  :root{
    color-scheme:dark;

    /* inks (solid hexes; every text pairing is ≥4.5:1) */
    --bar:#140A0F;          /* page surface; ink on paper */
    --board:#241018;        /* dark card stock */
    --board-2:#2E1520;      /* raised dark stock, hover of board objects */
    --cover:#531F30;        /* oxblood cover stock; spot ink on paper */
    --felt-hi:#6A2A3F;      /* the felt's single radial highlight */
    --felt-print:#64283A;   /* decorative table printing only, never text */
    --felt-type:#BCA6A2;    /* arc text printed on the felt */
    --ivory:#F5EFDF;        /* ivory board stock; primary text on dark */
    --thermal:#EAE1CB;      /* thermal paper: receipts and the house tab */
    --citron:#DCED92;       /* ONE job: money to you, the one primary action, focus */
    --citron-press:#C8DB78; /* pressed citron */
    --suit:#A3293F;         /* suit red, ON PAPER ONLY */
    --rouge:#EF8A93;        /* suit red's on-dark twin */
    --chip-ink:#1D0F16;     /* 100 chip body, matchbook striker */
    --text-2:#D6CFC2;       /* secondary text on dark */
    --text-3:#BAB3A9;       /* tertiary text on dark (never the only carrier) */
    --sepia:#5E4A4F;        /* secondary text printed on paper */
    --ink:var(--bar);
    --hair:rgb(245 239 223 / .16);
    --hair-strong:rgb(245 239 223 / .30);
    --hair-paper:rgb(20 10 15 / .22);
    --perf-paper:rgb(20 10 15 / .35);

    /* surface tokens: "colour follows the surface". Dark is the default;
       .stock-ivory / .stock-thermal / .on-paper redefine them. */
    --fg:var(--ivory);
    --fg-2:var(--text-2);
    --fg-3:var(--text-3);
    --red:var(--rouge);
    --win:var(--citron);
    --rule:var(--hair);
    --rule-strong:var(--hair-strong);
    --leader:var(--hair-strong);
    --pip-black:var(--ivory);
    --pip-red:var(--rouge);
    --focus:var(--citron);
    --link-line:var(--citron);
    --link-hover:var(--citron);
    --stamp-launch:var(--text-2);

    /* type families */
    --font-serif:'Fraunces','Fraunces Fallback',Georgia,serif;          /* letterpress */
    --font-sans:'Schibsted Grotesk','Schibsted Fallback',system-ui,sans-serif; /* offset */
    --font-ticket:'Big Shoulders','Big Shoulders Fallback','Arial Narrow',sans-serif; /* ticket press, uppercase only */
    --font-mono:'Courier Prime','Courier Prime Fallback','Courier New',monospace;   /* thermal print */

    /* type scale (fluid 390 → 1440px) */
    --fs-14:14px;  --lh-14:20px;
    --fs-15:15px;  --lh-15:22px;
    --fs-body:17px;--lh-body:26px;
    --fs-lead:clamp(20px, 18.51px + .381vw, 24px);
    --fs-title:clamp(24px, 21.03px + .762vw, 32px);
    --fs-pitch:clamp(28px, 20.57px + 1.905vw, 48px);
    --fs-figure-s:clamp(28px, 22.06px + 1.524vw, 44px);
    --fs-h2:clamp(36px, 27.09px + 2.286vw, 60px);
    --fs-h1:clamp(44px, 30.63px + 3.429vw, 80px);
    --fs-figure-m:clamp(52px, 32.69px + 4.952vw, 104px);
    --fs-figure-l:clamp(60px, 31.77px + 7.238vw, 136px);
    --fs-jackpot:clamp(72px, 14vw, 200px);

    /* spacing scale */
    --space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-s:16px; --space-m:24px;
    --space-l:32px;  --space-xl:48px; --space-2xl:64px; --space-3xl:96px; --space-4xl:144px;
    /* role tokens */
    --gutter:clamp(16px, 8.57px + 1.905vw, 36px);
    --col-gap:clamp(16px, 13.03px + .762vw, 24px);
    --pad:clamp(24px, 19.54px + 1.143vw, 36px);
    --pad-compact:clamp(16px, 13.03px + .762vw, 24px);
    --gap-in:clamp(12px, 9.77px + .571vw, 18px);
    --gap-compact:clamp(8px, 6.51px + .381vw, 12px);
    --gap-out:clamp(32px, 23.09px + 2.286vw, 56px);
    --section:clamp(64px, 34.29px + 7.619vw, 144px);
    --tuck-s:-16px; --tuck-m:-32px; --tuck-l:-64px;

    /* layout */
    --max:1352px;        /* content pages: 1280 + gutters */
    --max-play:1652px;   /* /play/: 1580 + gutters */
    --header-h:64px;
    --strip-h:64px;      /* phone bottom ticket strip (without safe area) */
    --safe-b:env(safe-area-inset-bottom, 0px);

    /* radii by material */
    --r-paper:2px; --r-ticket:6px; --r-key:10px; --r-card:6px; --r-rulecard:12px;
    --r-member:16px; --r-felt:28px; --r-pill:999px;

    /* elevation: three levels only, plus the drop-shadow used by masked objects */
    --shadow-rest:0 1px 0 rgb(0 0 0 / .45), 0 12px 24px -12px rgb(0 0 0 / .6);
    --shadow-lift:0 2px 0 rgb(0 0 0 / .35), 0 28px 48px -16px rgb(0 0 0 / .65);
    --shadow-inset:inset 0 2px 4px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(0 0 0 / .35);
    --drop:drop-shadow(0 14px 14px rgb(0 0 0 / .45));

    /* motion */
    --dur-1:120ms; --dur-2:180ms; --dur-3:300ms; --dur-4:420ms;
    --ease-out:cubic-bezier(.2,.8,.2,1);
    --ease-settle:cubic-bezier(.2,1.4,.4,1);
    --ease-stamp:cubic-bezier(.3,1.6,.5,1);
  }
  @media (max-width:767.98px){:root{--header-h:56px}}
}

/* ───────────────────────── base ───────────────────────── */
@layer base{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-block-start:calc(var(--header-h) + var(--space-s));hanging-punctuation:first}
  body{margin:0;min-block-size:100svh;background-color:var(--bar);color:var(--fg);font:400 var(--fs-body)/var(--lh-body) var(--font-sans);font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  /* the bar top: one rasterised grain tile at 6% over the whole page */
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(/assets/grain-light.png) 0 0/160px 160px;opacity:.06}
  :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd){margin:0}
  :where(h1,h2,h3){font-family:var(--font-serif);font-weight:400;text-wrap:balance}
  :where(h1){font-size:var(--fs-h1);line-height:.92;letter-spacing:-.02em}
  :where(h2){font-size:var(--fs-h2);line-height:.95;letter-spacing:-.02em}
  :where(h3){font-size:var(--fs-title);line-height:1.15;letter-spacing:-.01em}
  :where(h4,h5,h6){font:600 var(--fs-body)/1.3 var(--font-sans)}
  :where(h1,h2,h3) em{font-style:italic;font-weight:300}
  :where(p,li){text-wrap:pretty}
  :where(ul,ol){margin:0;padding-inline-start:1.25em}
  :where(ul,ol)[class]{list-style:none;padding:0}
  :where(a){color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
  :where(a:hover){color:var(--link-hover)}
  :where(button){margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
  :where(input,select,textarea){margin:0;color:inherit;font:inherit;font-size:max(16px,1em)}
  :where(img,picture,video,canvas){display:block;max-inline-size:100%;block-size:auto}
  :where(svg){overflow:visible}
  :where(table){border-collapse:collapse}
  :where(strong,b){font-weight:600}
  [hidden]{display:none!important}
  ::selection{background:var(--citron);color:var(--bar)}
  :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
  :focus:not(:focus-visible){outline:none}
  :where(summary){cursor:pointer}

  /* main is the page wrapper: tilted objects and 110vw straps are clipped here, never scrolled */
  main{display:block;overflow-x:clip;padding-block-start:var(--gap-out)}

  .sr-only{position:absolute!important;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* tables ignore the 1px box: make a visually hidden table a block so it cannot widen the page */
  table.sr-only{display:block}
  .skip-link{position:fixed;z-index:100;inset-block-start:var(--space-xs);inset-inline-start:var(--space-xs);display:inline-flex;align-items:center;block-size:48px;padding-inline:20px;border-radius:var(--r-ticket);background:var(--citron);color:var(--bar);font-weight:600;text-decoration:none;transform:translateY(calc(-100% - 24px))}
  .skip-link:focus{transform:none;outline:2px solid var(--ivory);outline-offset:3px}

  /* icons: <svg class="i" aria-hidden="true"><use href="#i-…"/></svg> */
  .i{display:inline-block;flex:none;inline-size:1em;block-size:1em;vertical-align:-.125em;fill:currentColor;overflow:visible}
  .pip{display:inline-block;flex:none;inline-size:.8em;block-size:.8em;vertical-align:-.05em}
  .pip--black{color:var(--pip-black)}
  .pip--red{color:var(--pip-red)}

  /* ── layout ── */
  .wrap{inline-size:100%;max-inline-size:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
  .wrap--play{--max:var(--max-play)}
  .section{padding-block:var(--section)}
  .section__head{display:flex;flex-direction:column;gap:var(--space-xs);margin-block-end:var(--gap-out)}
  .grid{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--col-gap)}
  @media (min-width:640px){.grid{--cols:6}}
  @media (min-width:1024px){.grid{--cols:12}}
  .stack{display:flex;flex-direction:column;gap:var(--gap-in)}
  .stack--compact{gap:var(--gap-compact)}
  .stack--out{gap:var(--gap-out)}
  .cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-s)}
  .push{margin-block-start:auto}
  .stack>:is(.btn,.link,.stamp,.tag-connect,.switch){align-self:flex-start}

  /* ── type roles ── */
  .h1{font:400 var(--fs-h1)/.92 var(--font-serif);letter-spacing:-.02em;max-inline-size:14ch;text-wrap:balance}
  .h2{font:400 var(--fs-h2)/.95 var(--font-serif);letter-spacing:-.02em;max-inline-size:14ch;text-wrap:balance}
  .title{font:400 var(--fs-title)/1.15 var(--font-serif);letter-spacing:-.01em}
  .pitch{font:300 var(--fs-pitch)/1.12 var(--font-serif);letter-spacing:-.01em;max-inline-size:26ch}
  :is(.h1,.h2,.title,.pitch) em{font-style:italic;font-weight:300}
  .lead{font-size:var(--fs-lead);line-height:1.35;color:var(--fg-2);max-inline-size:40ch}
  .prose{max-inline-size:62ch}
  .object-copy{max-inline-size:34ch}
  .small{font-size:var(--fs-15);line-height:var(--lh-15)}
  .caption{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:500;color:var(--fg-2)}
  .fine{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--fg-2);max-inline-size:70ch}
  .muted{color:var(--fg-2)}
  .mono{font-family:var(--font-mono);font-size:var(--fs-15);line-height:var(--lh-15)}
  .tnum{font-variant-numeric:tabular-nums}
  /* the one printed header line per object (the only uppercase on the site) */
  .head-line{font:800 16px/1 var(--font-ticket);letter-spacing:.12em;text-transform:uppercase}
  .head-line--14{font-size:14px}
  .head-line--18{font-size:18px}
  .head-line--20{font-size:20px}
  /* figures: Fraunces at optical size 144 */
  .figure{font-family:var(--font-serif);font-weight:900;font-variation-settings:"opsz" 144;letter-spacing:-.045em;line-height:1}
  .figure--300{font-weight:300}.figure--400{font-weight:400}.figure--600{font-weight:600}
  .figure-s{font-size:var(--fs-figure-s);line-height:1}
  .figure-m{font-size:var(--fs-figure-m);line-height:.9;letter-spacing:-.03em}
  .figure-l{font-size:var(--fs-figure-l);line-height:.88;letter-spacing:-.03em}
  .figure-jackpot{font-size:var(--fs-jackpot);line-height:.85}
  /* giant figures sit exactly on their token: trim the leading */
  .trim{margin-block:-.14em -.06em}
  @supports (text-box:trim-both cap alphabetic){.trim{margin-block:0;text-box:trim-both cap alphabetic}}
  /* digit slots: every changing digit sits in a fixed slot (Fraunces has no tnum) */
  .d{display:inline-block;inline-size:var(--slot,.62em);text-align:center}
  .d-sep{display:inline-block}
  .slots-600{--slot:.66em}
  .slots-900{--slot:.67em}
  .slots-ticket{--slot:.52em}
  .slots-ticket-72{--slot:.5em}
  .slots-mono{--slot:.6em}

  /* reveals: [data-reveal] fades up once when it enters the viewport (motion.js) */
  html.js-motion:not([data-motion="off"]) [data-reveal]:not(.is-in){opacity:0;translate:0 12px}
  [data-reveal]{transition:opacity var(--dur-4) var(--ease-out),translate var(--dur-4) var(--ease-out)}
  @media (prefers-reduced-motion:reduce){[data-reveal]{transition:opacity var(--dur-1) linear}}
  html[data-motion="off"] [data-reveal]{transition:opacity var(--dur-1) linear}

  /* details/summary without the browser marker; chevron turns when open */
  .summary{list-style:none}
  .summary::-webkit-details-marker{display:none}
  .summary .chev{transition:rotate var(--dur-2) var(--ease-out)}
  details[open]>.summary .chev{rotate:90deg}
  @media (prefers-reduced-motion:reduce){.summary .chev{transition:none}}
  html[data-motion="off"] .summary .chev{transition:none}
}

/* ───────────────────────── objects ───────────────────────── */
@layer objects{
  /* ── paper stocks. Each sets its colour and the surface tokens; paper stocks print a
        multiply grain in ::after (use .no-grain, or a child element, if you need ::after). ── */
  .stock-ivory,.stock-thermal,.on-paper{
    --fg:var(--bar);--fg-2:var(--sepia);--fg-3:var(--sepia);--red:var(--suit);--win:var(--bar);
    --rule:var(--hair-paper);--rule-strong:var(--perf-paper);--leader:rgb(20 10 15 / .4);
    --pip-black:var(--bar);--pip-red:var(--suit);--focus:var(--bar);--link-line:var(--cover);--link-hover:var(--cover);--stamp-launch:var(--suit);
    color:var(--fg);
  }
  .stock-board,.stock-board-2,.stock-cover,.on-dark{
    --fg:var(--ivory);--fg-2:var(--text-2);--fg-3:var(--text-3);--red:var(--rouge);--win:var(--citron);
    --rule:var(--hair);--rule-strong:var(--hair-strong);--leader:var(--hair-strong);
    --pip-black:var(--ivory);--pip-red:var(--rouge);--focus:var(--citron);--link-line:var(--citron);--link-hover:var(--citron);--stamp-launch:var(--text-2);
    color:var(--fg);
  }
  .stock-ivory{background-color:var(--ivory);border-radius:var(--r-paper)}
  .stock-thermal{background-color:var(--thermal);border-radius:var(--r-paper)}
  .stock-board{background-color:var(--board);border-radius:var(--r-ticket)}
  .stock-board-2{background-color:var(--board-2);border-radius:var(--r-ticket)}
  .stock-cover{background-color:var(--cover);border-radius:var(--r-paper)}
  .stock-ivory,.stock-thermal,.stock-cover,.grain{position:relative}
  .stock-ivory::after,.stock-thermal::after,.stock-cover::after,.grain::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:url(/assets/grain-dark.png) 0 0/160px 160px;opacity:var(--grain,.12);mix-blend-mode:multiply}
  .grain-light{position:relative}
  .grain-light::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:url(/assets/grain-light.png) 0 0/160px 160px;opacity:var(--grain,.06)}
  .no-grain::after{content:none}
  /* hairline outline for dark stock lying on the bar */
  .outlined{box-shadow:inset 0 0 0 1px var(--hair)}

  /* ── elevation ── */
  .shadow-rest{box-shadow:var(--shadow-rest)}
  .shadow-lift{box-shadow:var(--shadow-lift)}
  .shadow-inset{box-shadow:var(--shadow-inset)}
  /* masks clip box-shadows, so a masked object casts its shadow from a wrapper:
     <div class="drop"><div class="stock-thermal edge-zigzag-bottom">…</div></div> */
  .drop{filter:var(--drop)}
  .drop--lift{filter:drop-shadow(0 18px 18px rgb(0 0 0 / .5))}

  /* ── edges (one per object). Masks only where supported; otherwise a plain rectangle. ── */
  @supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
    .edge-zigzag-top{-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/16px 100%;mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/16px 100%}
    .edge-zigzag-bottom{-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/16px 100%}
    .edge-punch{-webkit-mask:radial-gradient(circle 7px at var(--punch-x,50%) var(--punch-y,20px),#0000 96%,#000);mask:radial-gradient(circle 7px at var(--punch-x,50%) var(--punch-y,20px),#0000 96%,#000)}
    .edge-punch-zigzag{-webkit-mask:radial-gradient(circle 8px at var(--punch-x,50%) var(--punch-y,22px),#0000 96%,#000),conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/16px 100%;-webkit-mask-composite:source-in;mask:radial-gradient(circle 8px at var(--punch-x,50%) var(--punch-y,22px),#0000 96%,#000),conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/16px 100%;mask-composite:intersect}
    .edge-notch{-webkit-mask:radial-gradient(circle 10px at 0 calc(100% - var(--notch-y,64px)),#0000 95%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 10px at 100% calc(100% - var(--notch-y,64px)),#0000 95%,#000) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle 10px at 0 calc(100% - var(--notch-y,64px)),#0000 95%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 10px at 100% calc(100% - var(--notch-y,64px)),#0000 95%,#000) 100% 0/51% 100% no-repeat}
    .edge-tag{-webkit-mask:radial-gradient(circle 4px at 14px 50%,#0000 95%,#000);mask:radial-gradient(circle 4px at 14px 50%,#0000 95%,#000)}
    .edge-perf-top{-webkit-mask:radial-gradient(circle 3px at 50% 0,#0000 95%,#000) 0 0/14px 100% repeat-x;mask:radial-gradient(circle 3px at 50% 0,#0000 95%,#000) 0 0/14px 100% repeat-x}
    .edge-perf-bottom{-webkit-mask:radial-gradient(circle 3px at 50% 100%,#0000 95%,#000) 0 0/14px 100% repeat-x;mask:radial-gradient(circle 3px at 50% 100%,#0000 95%,#000) 0 0/14px 100% repeat-x}
  }
  /* zigzag teeth are 8px deep: on the toothed side use padding calc(var(--pad) + 8px) */
  /* a fold: 1px printed crease plus a 1px highlight, at --crease-y from the top */
  .edge-crease{background-image:linear-gradient(to bottom,transparent calc(var(--crease-y,50%) - 1px),var(--hair-paper) calc(var(--crease-y,50%) - 1px) var(--crease-y,50%),rgb(255 255 255 / .5) var(--crease-y,50%) calc(var(--crease-y,50%) + 1px),transparent calc(var(--crease-y,50%) + 1px))}
  /* a perforation line between a body and a stub (pair with .edge-notch) */
  .perf-line{border-block-start:1px dashed var(--rule-strong)}

  /* ── tilt. Only -3/-1.5/0/1.5/3deg; text and form objects straighten when focused. ── */
  .tilt{transform:rotate(var(--tilt,0deg));transition:transform var(--dur-2) var(--ease-out)}
  .tilt:focus-within{transform:none}
  .tilt-n3{--tilt:-3deg}.tilt-n15{--tilt:-1.5deg}.tilt-p15{--tilt:1.5deg}.tilt-p3{--tilt:3deg}
  @media (prefers-reduced-motion:reduce){.tilt{transition:none}}
  html[data-motion="off"] .tilt{transition:none}

  /* ── dotted-leader rows (receipts, ledgers, facts) ──
     <div class="leaders"><p class="leader"><span>Fee</span><span class="leader__dots" aria-hidden="true"></span><span>0.05</span></p></div> */
  .leaders{display:flex;flex-direction:column;font:400 var(--fs-15)/var(--lh-15) var(--font-mono)}
  .leaders--sans{font-family:var(--font-sans);font-variant-numeric:tabular-nums}
  .leader{display:flex;align-items:baseline;gap:var(--space-2xs);margin:0}
  .leader__dots{flex:1 1 var(--space-s);min-inline-size:var(--space-s);border-block-end:1.5px dotted var(--leader)}
  .rule-double{border-block-start:3px double var(--fg)}
  .rule{border-block-start:1px solid var(--rule)}

  /* ── buttons: 60 / 48 / 40, radius 6 ── */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);block-size:var(--btn-h,48px);padding:0 var(--btn-px,20px);border:0;border-radius:var(--r-ticket);font:600 var(--btn-fs,16px)/1 var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
  .btn .i{inline-size:20px;block-size:20px}
  .btn--lg{--btn-h:60px;--btn-px:28px;--btn-fs:17px;min-inline-size:220px}
  .btn--sm{--btn-h:40px;--btn-px:16px;--btn-fs:15px}
  .btn--block{inline-size:100%}
  .btn--primary{background-color:var(--citron);color:var(--bar)}
  .btn--primary:hover{color:var(--bar);transform:translateY(-1px)}
  .btn--primary:active{background-color:var(--citron-press);transform:none}
  .btn--ink{background-color:var(--bar);color:var(--ivory)}
  .btn--ink:hover{background-color:var(--board-2);color:var(--ivory)}
  .btn--ink:active{background-color:var(--board)}
  .btn--ghost{background-color:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--rule-strong)}
  .btn--ghost:hover{color:var(--fg);background-color:color-mix(in srgb,var(--fg) 8%,transparent)}
  .btn--ring{box-shadow:inset 0 0 0 1.5px var(--bar)}
  .btn:is([disabled],[aria-disabled="true"]){opacity:.4;cursor:not-allowed;transform:none}
  @media (prefers-reduced-motion:reduce){.btn{transition-property:background-color,color,box-shadow}.btn:hover{transform:none}}
  html[data-motion="off"] .btn:hover{transform:none}

  /* underlined text link with a citron underline (cover on paper) */
  .link{display:inline-flex;align-items:center;gap:10px;min-block-size:44px;color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:var(--link-line);text-decoration-thickness:2px;text-underline-offset:6px}
  .link:hover{color:var(--fg)}
  .link .i{inline-size:18px;block-size:18px;transition:translate var(--dur-1) var(--ease-out)}
  .link:hover .i{translate:3px 0}
  @media (prefers-reduced-motion:reduce){.link .i{transition:none}.link:hover .i{translate:none}}
  html[data-motion="off"] .link:hover .i{translate:none}

  /* ── the Connect tag: citron tag with a die-cut hole. 44px target, 40px tag.
        data-state: idle | connected | wrong-network (set by site.js) ── */
  .tag-connect{--tag-bg:var(--citron);--tag-ring:0 0 transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:var(--space-2xs);block-size:44px;padding:0 18px 0 30px;border:0;background:none;color:var(--bar);font:600 var(--fs-15)/1 var(--font-sans);white-space:nowrap;cursor:pointer}
  .tag-connect::before{content:"";position:absolute;inset:2px 0;z-index:-1;border-radius:var(--r-ticket);background-color:var(--tag-bg);box-shadow:var(--tag-ring);transition:background-color var(--dur-1) var(--ease-out);-webkit-mask:radial-gradient(circle 4px at 14px 50%,#0000 95%,#000);mask:radial-gradient(circle 4px at 14px 50%,#0000 95%,#000)}
  .tag-connect:hover{color:var(--bar)}
  .tag-connect:hover::before,.tag-connect:active::before{background-color:var(--citron-press)}
  .tag-connect__dot{display:none;flex:none;inline-size:8px;block-size:8px;border-radius:50%;background:var(--citron)}
  .tag-connect[data-state="connected"]{--tag-bg:var(--board-2);--tag-ring:inset 0 0 0 1px var(--hair);color:var(--ivory);font:400 var(--fs-15)/1 var(--font-mono)}
  .tag-connect[data-state="connected"] .tag-connect__dot{display:block}
  .tag-connect[data-state="wrong-network"]{--tag-bg:var(--board-2);--tag-ring:inset 0 0 0 1.5px var(--rouge);color:var(--rouge)}
  .tag-connect:is([data-state="connected"],[data-state="wrong-network"]):hover{color:var(--ivory)}
  .tag-connect:is([data-state="connected"],[data-state="wrong-network"]):is(:hover,:active)::before{background-color:var(--board)}
  /* "Connect wallet" at ≥1100px, "Connect" below; screen readers always hear "Connect wallet" */
  @media (max-width:1099.98px){.tag-connect__more{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

  /* ── motion switch (pill), used by the footer Motion toggle ── */
  .switch{display:inline-flex;align-items:center;gap:var(--space-xs);block-size:44px;padding:0 var(--space-s) 0 14px;border:1px solid var(--hair);border-radius:var(--r-key);background-color:var(--board);color:var(--ivory);font:600 var(--fs-15)/1 var(--font-sans);white-space:nowrap;cursor:pointer}
  .switch:hover{background-color:var(--board-2)}
  .switch__track{display:flex;align-items:center;flex:none;inline-size:36px;block-size:20px;padding:2px;border-radius:var(--r-pill);background-color:var(--board-2);box-shadow:inset 0 0 0 1px var(--hair-strong)}
  .switch__knob{inline-size:16px;block-size:16px;border-radius:50%;background-color:var(--ivory);transition:translate var(--dur-2) var(--ease-out),background-color var(--dur-2)}
  .switch[aria-pressed="true"] .switch__track{background-color:var(--citron);box-shadow:inset 0 0 0 1px var(--hair)}
  .switch[aria-pressed="true"] .switch__knob{translate:16px 0;background-color:var(--bar)}
  .switch[aria-disabled="true"]{cursor:not-allowed}
  @media (prefers-reduced-motion:reduce){.switch__knob{transition:none}}
  html[data-motion="off"] .switch__knob{transition:none}

  /* ── keycaps: 60px (56 below 640), radius 10. The key that works it is printed beside the label as a small
        paper key: <button class="keycap">Hit<kbd class="keycap__key" aria-hidden="true">H</kbd></button>
        (the accessible name stays the label; the button carries aria-keyshortcuts) ── */
  .keycap{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);block-size:60px;min-inline-size:128px;padding:0 28px;border:1px solid var(--hair);border-radius:var(--r-key);background-color:var(--board);color:var(--ivory);font:600 var(--fs-body)/1 var(--font-sans);box-shadow:inset 0 1px 0 rgb(245 239 223 / .10),inset 0 -3px 0 rgb(0 0 0 / .35);cursor:pointer;transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),background-color var(--dur-1)}
  .keycap:hover{background-color:var(--board-2)}
  .keycap .btn__label{white-space:nowrap}
  /* key chips: a 24px paper key in Courier, 1px edge and a 2px inset lip at the bottom. Thermal paper on dark stock
     (ink on thermal is 14:1), ivory on thermal paper, an ink outline on the citron Deal key (ink on citron is 15:1).
     .keycap__key inside keycaps, .kbd anywhere else (the keymap, the rules sheet, chips and segments). */
  .keycap__key,.kbd{--kbd-bg:var(--thermal);--kbd-fg:var(--bar);--kbd-edge:rgb(20 10 15 / .3);display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:24px;block-size:24px;padding:0 var(--space-3xs) 2px;border:1px solid var(--kbd-edge);border-radius:5px;background-color:var(--kbd-bg);color:var(--kbd-fg);box-shadow:inset 0 -2px 0 var(--kbd-edge);font:400 var(--fs-14)/1 var(--font-mono);letter-spacing:0;text-transform:none;white-space:nowrap;-webkit-user-select:none;user-select:none}
  .stock-thermal .kbd{--kbd-bg:var(--ivory);--kbd-edge:rgb(20 10 15 / .4)}
  /* the citron Deal key; a long label ("Reset to 1,000 chips") lets its paper key drop under it rather than overflow */
  .keycap--deal{flex-wrap:wrap;align-content:center;row-gap:var(--space-3xs);min-inline-size:280px;border-color:var(--hair-paper);background-color:var(--citron);color:var(--bar)}
  .keycap--deal:hover{background-color:var(--citron)}
  .keycap--deal .keycap__key{--kbd-bg:transparent;--kbd-edge:rgb(20 10 15 / .6)}
  /* touch-only screens (no hover, coarse pointer) have no keyboard to speak of: no paper keys */
  @media (hover:none) and (pointer:coarse){.keycap__key{display:none}}
  .keycap:not([aria-disabled="true"]):not([disabled]):active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgb(245 239 223 / .10),inset 0 -1px 0 rgb(0 0 0 / .35)}
  .keycap--deal:not([aria-disabled="true"]):not([disabled]):active{background-color:var(--citron-press)}
  .keycap:is([aria-disabled="true"],[disabled]){opacity:.4;cursor:not-allowed}
  @media (max-width:639.98px){.keycap{block-size:56px}}
  @media (prefers-reduced-motion:reduce){.keycap{transition:background-color var(--dur-1)}.keycap:active{transform:none!important}}
  html[data-motion="off"] .keycap:active{transform:none!important}

  /* ── segmented control: 44px segments (the touch-target floor) inside a 1px hairline, so 46px overall;
       radius 10, hairline dividers; pressed = ivory ── */
  .segmented{display:inline-flex;block-size:46px;border:1px solid var(--hair);border-radius:var(--r-key);overflow:hidden;background-color:var(--board)}
  .segmented>*{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-inline-size:56px;block-size:100%;padding:0 var(--space-xs);border:0;background:transparent;color:var(--ivory);font:600 var(--fs-15)/1 var(--font-sans);text-decoration:none;cursor:pointer;transition:background-color var(--dur-1)}
  .segmented>*+*{border-inline-start:1px solid var(--hair)}
  .segmented>:hover{background-color:var(--board-2)}
  .segmented>:is([aria-pressed="true"],[aria-current],[aria-selected="true"]){background-color:var(--ivory);color:var(--bar);--pip-black:var(--bar);--pip-red:var(--suit)}
  .segmented>:is([aria-disabled="true"],[disabled]){opacity:.4;cursor:not-allowed}
  .segmented>:focus-visible{outline-offset:-4px}

  /* ── rubber stamps: double-ruled pill in Big Shoulders. Ink follows the surface. ──
     <span class="stamp stamp--loss" style="--stamp-rot:5deg">Bust</span> */
  .stamp{--stamp-rot:-4deg;display:inline-flex;align-items:center;justify-content:center;block-size:36px;padding:0 var(--space-s);border:2px solid currentColor;outline:1px solid currentColor;outline-offset:-6px;border-radius:var(--r-pill);color:var(--fg);font:800 var(--fs-14)/1 var(--font-ticket);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transform:rotate(var(--stamp-rot));-webkit-mask:linear-gradient(#000 0 0),url(/assets/grain-dark.png) 0 0/160px 160px;-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0),url(/assets/grain-dark.png) 0 0/160px 160px;mask-composite:exclude}
  .stamp--win,.stamp--paid{color:var(--win)}           /* ink on paper, citron on dark */
  .stamp--loss,.stamp--void{color:var(--red)}          /* LOST, BUST, VOID, NOT INSPECTED */
  .stamp--push{color:var(--fg-2)}                      /* PUSH */
  .stamp--launch{color:var(--stamp-launch)}            /* OPENS AT LAUNCH: suit on paper, text-2 on dark */
  .stamp--fill{background-color:var(--citron);color:var(--bar)} /* 3:2 always prints citron with ink */
  .stamp--house{color:var(--cover)}
  .stamp--house.on-dark,.on-dark .stamp--house,.stock-board .stamp--house,.stock-board-2 .stamp--house{background-color:var(--cover);color:var(--ivory)}
  .stamp--rebates{color:var(--fg)}
  .stamp--jackpot{background-color:var(--citron);color:var(--bar)}
  .stamp--circle{inline-size:88px;block-size:88px;padding:0;border-radius:50%;text-align:center;white-space:normal}
  .stamp--lg{block-size:44px;padding:0 20px;font-size:18px}
  /* entrance: stampIn(el) in motion.js adds .is-stamping, one stamp at a time */
  .stamp.is-stamping{animation:stamp-in 180ms var(--ease-stamp) both}
  @keyframes stamp-in{0%{opacity:0;scale:1.35;rotate:4deg}80%{opacity:1;scale:1;rotate:0deg;translate:0 1px}100%{opacity:1;scale:1;rotate:0deg;translate:0 0}}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){.stamp.is-stamping{animation:fade-in var(--dur-1) linear both}}
  html[data-motion="off"] .stamp.is-stamping{animation:fade-in var(--dur-1) linear both}

  /* ── casino chips (5 / 25 / 100 / 500), six edge spots each. Size with --chip (default 56px)
        on the chip or on any ancestor, e.g. the tray, so slots and chips stay in step. ── */
  .chip{--chip-edge:rgb(0 0 0 / .18);display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:var(--chip,56px);block-size:var(--chip,56px);padding:0;border:0;border-radius:50%;color:var(--chip-text,var(--bar));font:600 calc(var(--chip,56px) * .32)/1 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.04em;background:radial-gradient(circle,var(--chip-face) 0 38%,transparent 38.5%),radial-gradient(circle,transparent 0 44%,var(--chip-spot) 44.5% 47%,transparent 47.5%),repeating-conic-gradient(from -9deg,var(--chip-spot) 0 18deg,var(--chip-face) 18deg 60deg);box-shadow:inset 0 0 0 1.5px var(--chip-edge),0 2px 0 rgb(10 4 8 / .45)}
  .chip--5{--chip-face:var(--ivory);--chip-spot:var(--cover);--chip-text:var(--bar)}
  .chip--25{--chip-face:var(--suit);--chip-spot:var(--ivory);--chip-text:var(--ivory)}
  .chip--100{--chip-face:var(--chip-ink);--chip-spot:var(--ivory);--chip-text:var(--ivory);--chip-edge:rgb(245 239 223 / .3)}
  .chip--500{--chip-face:var(--citron);--chip-spot:var(--board);--chip-text:var(--board)}
  :is(button,a).chip{cursor:pointer;transition:transform var(--dur-1) var(--ease-out)}
  :is(button,a).chip:not([aria-disabled="true"]):not([disabled]):hover{transform:translateY(-4px)}
  .chip:is([aria-disabled="true"],[disabled]){opacity:.4;cursor:not-allowed}
  @media (prefers-reduced-motion:reduce){:is(button,a).chip{transition:none}:is(button,a).chip:hover{transform:none!important}}
  html[data-motion="off"] :is(button,a).chip:hover{transform:none!important}
  /* recessed slot and tray: slots share edges (gap 0) */
  .chip-tray{display:flex;gap:0}
  .chip-slot{display:inline-flex;align-items:center;justify-content:center;inline-size:calc(var(--chip,56px) + 8px);block-size:calc(var(--chip,56px) + 8px);padding:var(--space-3xs);border-radius:var(--r-pill);background-color:var(--board);box-shadow:var(--shadow-inset)}

  /* ── rotary dater: three bands on board-2, Big Shoulders digits ──
     <div class="dater"><div class="dater__cell"><span class="dater__band">03</span><span class="dater__unit">days</span></div>…</div> */
  .dater{display:flex;gap:var(--space-2xs)}
  .dater__cell{display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs)}
  .dater__band{--slot:.5em;display:flex;align-items:center;justify-content:center;inline-size:72px;block-size:88px;border-radius:var(--r-ticket);color:var(--ivory);font:800 56px/1 var(--font-ticket);font-variation-settings:"opsz" 72;background:linear-gradient(to bottom,transparent 25%,rgb(245 239 223 / .12) 25%,rgb(245 239 223 / .12) calc(25% + 1px),transparent calc(25% + 1px),transparent 75%,rgb(245 239 223 / .12) 75%,rgb(245 239 223 / .12) calc(75% + 1px),transparent calc(75% + 1px)),var(--board-2);box-shadow:var(--shadow-inset)}
  .dater__unit{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:500;color:var(--text-2)}
  @media (max-width:639.98px){.dater__band{inline-size:56px;block-size:68px;font-size:40px;font-variation-settings:"opsz" 40}}

  /* ── per-digit roll (rollDigits in motion.js) ── */
  .roll{white-space:nowrap}
  .roll .d{position:relative;clip-path:inset(0 -.1em)}
  .roll .d.is-rolling{color:transparent}
  .d__roll{position:absolute;inset-inline:0;inset-block-start:0;display:flex;flex-direction:column;pointer-events:none}
  .d__roll>span{display:block}

  /* ── strap band: a paper currency strap crossing the hero/content seam ──
     <div class="strap-seam"><div class="strap" aria-hidden="true"><div class="strap__track"><div class="strap__run">
       <span>Dealer stands on soft 17</span><svg class="strap__star"><use href="#i-star4"/></svg>…</div></div></div>
       <p class="sr-only">Dealer stands on soft 17. …</p></div>
     motion.js fills the band and adds the looping duplicate when motion is on. */
  .strap-seam{position:relative;z-index:2;margin-block-start:var(--tuck-m);padding-block:var(--space-l);overflow-x:clip}
  .strap{--strap-h:48px;--strap-bg:var(--ivory);--strap-rule:var(--hair-paper);--strap-star:var(--suit);display:flex;align-items:center;inline-size:110vw;block-size:var(--strap-h);margin-inline-start:calc(50% - 55vw);overflow:hidden;background-color:var(--strap-bg);color:var(--bar);box-shadow:inset 0 4px 0 var(--strap-bg),inset 0 5px 0 var(--strap-rule),inset 0 -4px 0 var(--strap-bg),inset 0 -5px 0 var(--strap-rule),var(--shadow-lift);transform:rotate(-2deg)}
  .strap--citron{--strap-bg:var(--citron);--strap-rule:var(--cover);--strap-star:var(--cover)}
  .strap--flat{transform:none}
  .strap__track{display:flex;flex:none;inline-size:max-content}
  .strap__run{display:flex;flex:none;align-items:center;gap:var(--space-m);padding-inline-end:var(--space-m);white-space:nowrap;font:italic 500 22px/1 var(--font-serif)}
  .strap__star{flex:none;inline-size:14px;block-size:14px;fill:var(--strap-star)}
  .strap[data-loop] .strap__track{animation:strap-loop var(--strap-dur,60s) linear infinite}
  .strap:hover .strap__track,.strap.is-off .strap__track{animation-play-state:paused}
  @keyframes strap-loop{to{transform:translateX(-50%)}}
  @media (max-width:639.98px){.strap{--strap-h:40px}.strap__run{font-size:18px}}
  @media (prefers-reduced-motion:reduce){.strap .strap__track{animation:none}}
  html[data-motion="off"] .strap .strap__track{animation:none}
}