/* SOFT 17 — shared page chrome (components layer):
   the Ticket Roll header, the Play menu sheet, the Matchbook footer (full and compact),
   the info dialog sheet and the toast. Page mains are styled by each page's own CSS
   inside @layer pages. */
@layer components{

  /* ───────── header: the Ticket Roll ───────── */
  .site-header{position:sticky;inset-block-start:0;z-index:30;background-color:var(--bar);border-block-end:1px solid var(--hair);transition:opacity var(--dur-3) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
  .site-header[data-scrolled="true"]{box-shadow:0 12px 24px -12px rgb(0 0 0 / .6)}
  /* while a hand is live the chrome steps back; hover or focus brings it back */
  body[data-hand="live"] .site-header{opacity:.64}
  body[data-hand="live"] .site-header:is(:hover,:focus-within){opacity:1}
  body[data-page="play"] .site-header__bar{--max:var(--max-play)}
  .site-header__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--space-l);block-size:64px}
  .site-brand{display:flex;flex:none;align-items:center;block-size:44px;text-decoration:none}
  .site-brand img{inline-size:auto;block-size:28px}
  .site-header .tag-connect{justify-self:end}

  /* the strip of four perforated admission tickets */
  .ticket-roll{display:flex;justify-self:center;border:1px solid var(--hair);border-radius:var(--r-ticket)}
  .ticket{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:var(--space-2xs);inline-size:132px;block-size:44px;color:var(--ivory);font:600 16px/1 var(--font-sans);text-decoration:none;white-space:nowrap;transition:transform var(--dur-1) var(--ease-out)}
  .ticket:hover{color:var(--ivory)}
  .ticket+.ticket{border-inline-start:1px dashed var(--hair-strong)}
  .ticket .pip{inline-size:16px;block-size:16px}
  /* the stock lives in ::before so its notches never clip the focus ring */
  .ticket::before{content:"";position:absolute;inset:0;z-index:-1;background-color:var(--board);transition:background-color var(--dur-1) var(--ease-out)}
  .ticket:first-child::before{border-start-start-radius:5px;border-end-start-radius:5px}
  .ticket:last-child::before{border-start-end-radius:5px;border-end-end-radius:5px}
  @supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
    .ticket:not(:last-child)::before{-webkit-mask:radial-gradient(circle 6px at 100% 0,#0000 95%,#000),radial-gradient(circle 6px at 100% 100%,#0000 95%,#000);-webkit-mask-composite:source-in;mask:radial-gradient(circle 6px at 100% 0,#0000 95%,#000),radial-gradient(circle 6px at 100% 100%,#0000 95%,#000);mask-composite:intersect}
    .ticket:not(:first-child)::before{-webkit-mask:radial-gradient(circle 6px at 0 0,#0000 95%,#000),radial-gradient(circle 6px at 0 100%,#0000 95%,#000);-webkit-mask-composite:source-in;mask:radial-gradient(circle 6px at 0 0,#0000 95%,#000),radial-gradient(circle 6px at 0 100%,#0000 95%,#000);mask-composite:intersect}
    .ticket:not(:first-child):not(:last-child)::before{-webkit-mask:radial-gradient(circle 6px at 0 0,#0000 95%,#000),radial-gradient(circle 6px at 0 100%,#0000 95%,#000),radial-gradient(circle 6px at 100% 0,#0000 95%,#000),radial-gradient(circle 6px at 100% 100%,#0000 95%,#000);-webkit-mask-composite:source-in;mask:radial-gradient(circle 6px at 0 0,#0000 95%,#000),radial-gradient(circle 6px at 0 100%,#0000 95%,#000),radial-gradient(circle 6px at 100% 0,#0000 95%,#000),radial-gradient(circle 6px at 100% 100%,#0000 95%,#000);mask-composite:intersect}
  }
  .ticket:not([aria-current="page"]):hover{transform:translateY(-2px)}
  .ticket:not([aria-current="page"]):hover::before{background-color:var(--board-2)}
  /* the current page is printed on ivory and lifted; correct on first paint, no JS */
  .ticket[aria-current="page"]{z-index:1;color:var(--bar);--pip-black:var(--bar);--pip-red:var(--suit);transform:translateY(-3px) rotate(-1.5deg);filter:drop-shadow(0 1px 0 rgb(0 0 0 / .45)) drop-shadow(0 8px 10px rgb(0 0 0 / .4))}
  .ticket[aria-current="page"]::before{border-radius:4px;background-color:var(--ivory);clip-path:polygon(0 0,100% 0,100% 100%,4px 100%,0 90.91%,4px 81.82%,0 72.73%,4px 63.64%,0 54.55%,4px 45.45%,0 36.36%,4px 27.27%,0 18.18%,4px 9.09%)}
  .ticket[aria-current="page"]:hover{color:var(--bar)}
  /* tickets grow 100 → 132px between 768 and 960px, so the roll never floats in a wide gap
     before the 1100px step up to "Connect wallet" */
  @media (max-width:1099.98px){.ticket{inline-size:clamp(100px,16.667vw - 28px,132px);font-size:15px}}

  /* the Play menu ticket (phones, /play/ only) */
  .menu-ticket{position:relative;isolation:isolate;display:none;align-items:center;gap:var(--space-2xs);justify-self:start;block-size:44px;padding:0 var(--space-xs);color:var(--ivory);font:600 var(--fs-15)/1 var(--font-sans)}
  .menu-ticket::before{content:"";position:absolute;inset:2px 0;z-index:-1;border:1px solid var(--hair);border-radius:var(--r-ticket);background-color:var(--board);transition:background-color var(--dur-1)}
  .menu-ticket:hover::before{background-color:var(--board-2)}
  .menu-ticket .i{inline-size:18px;block-size:18px}

  @media (max-width:767.98px){
    .site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);block-size:56px}
    .site-brand img{block-size:22px}
    /* the tickets become a fixed bottom strip */
    .site-header .ticket-roll{position:fixed;z-index:30;inset-inline:0;justify-self:stretch;inset-block-end:0;block-size:calc(var(--strip-h) + var(--safe-b));padding-block-end:var(--safe-b);border:0;border-block-start:1px solid var(--hair);border-radius:0;background-color:var(--bar)}
    .site-header .ticket{flex:1 1 0;flex-direction:column;gap:var(--space-3xs);inline-size:auto;block-size:var(--strip-h);font:500 var(--fs-14)/1 var(--font-sans)}
    .site-header .ticket .pip{inline-size:20px;block-size:20px}
    .site-header .ticket::before{border-radius:0}
    .site-header .ticket[aria-current="page"]{transform:translateY(-4px)}
    .site-header .ticket:focus-visible{outline-offset:-4px}
    .site-header .ticket[aria-current="page"]::before{border-radius:0}
    body:not([data-page="play"]){padding-block-end:calc(var(--strip-h) + var(--safe-b))}
    /* /play/: the rail owns the bottom edge, so nav moves behind a Menu ticket */
    body[data-page="play"] .site-header .ticket-roll{display:none}
    body[data-page="play"] .site-header__bar{display:grid;grid-template-columns:1fr auto 1fr}
    body[data-page="play"] .menu-ticket{display:inline-flex}
    body[data-page="play"] .site-brand{justify-self:center}
  }

  /* ───────── the Faucet entry (local and testnet builds only) ─────────
     Every page prints a hidden [data-faucet-entry] tag and footer link; faucet-nav.js reveals them, sets
     html[data-faucet="on"] and adds a fifth ticket to each ticket roll, only when config.js turns FEATURES.faucet on.
     Five 100px tickets do not fit the 768px header, so from 768 up the entry is a small dark tag beside Connect;
     below 768 it is the fifth ticket of the bottom strip (and of the Play menu sheet). */
  .tag-faucet{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:var(--space-2xs);block-size:44px;padding:0 var(--space-s) 0 30px;color:var(--ivory);font:600 var(--fs-15)/1 var(--font-sans);text-decoration:none;white-space:nowrap}
  .tag-faucet::before{content:"";position:absolute;inset:2px 0;z-index:-1;border-radius:var(--r-ticket);background-color:var(--board);box-shadow:inset 0 0 0 1px var(--hair-strong);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-faucet:hover{color:var(--ivory)}
  .tag-faucet:hover::before{background-color:var(--board-2)}
  .tag-faucet .i{inline-size:18px;block-size:18px}
  .tag-faucet[aria-current="page"],.tag-faucet[aria-current="page"]:hover{color:var(--bar)}
  .tag-faucet[aria-current="page"]::before{background-color:var(--ivory);box-shadow:none}
  /* a fourth header column; the negative end margin keeps the tag 8px from Connect instead of a full column gap */
  html[data-faucet="on"] .site-header__bar{grid-template-columns:auto minmax(0,1fr) auto auto}
  .site-header .tag-faucet{justify-self:end;margin-inline-end:calc(var(--space-2xs) - var(--space-l))}
  /* 768–1023: icon only (the label stays for screen readers); the labelled 120px tag needs ≥970px beside the roll */
  @media (max-width:1023.98px){
    .site-header .tag-faucet{padding:0 var(--space-xs) 0 26px;gap:0}
    .site-header .tag-faucet__label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  }
  @media (max-width:767.98px){.site-header .tag-faucet{display:none}}
  /* five footer links keep one line below 1024 (358px at 390, 320px beside the matchbook at 768) */
  @media (max-width:1023.98px){html[data-faucet="on"] .footer-nav{column-gap:var(--space-s)}}
  @media (min-width:768px){
    .site-header .ticket--faucet{display:none}
    /* with the fifth ticket hidden, Rules closes the header roll again (mirrors the :last-child rules above) */
    .site-header .ticket:has(+ .ticket--faucet)::before{border-start-end-radius:5px;border-end-end-radius:5px}
    @supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
      .site-header .ticket:not(:first-child):has(+ .ticket--faucet)::before{-webkit-mask:radial-gradient(circle 6px at 0 0,#0000 95%,#000),radial-gradient(circle 6px at 0 100%,#0000 95%,#000);-webkit-mask-composite:source-in;mask:radial-gradient(circle 6px at 0 0,#0000 95%,#000),radial-gradient(circle 6px at 0 100%,#0000 95%,#000);mask-composite:intersect}
    }
  }
  @media (prefers-reduced-motion:reduce){.tag-faucet::before{transition-duration:var(--dur-1)}}

  /* ───────── the Connect tag's session (site.js) ─────────
     data-state adds restoring (the last address, dimmed, while a refreshed page signs back in) and connecting;
     data-kind prints the wallet's glyph in place of the live dot: an envelope (email wallet) or a wallet. */
  .tag-connect__kind{display:none;flex:none;align-items:center;color:var(--citron)}
  .tag-connect__kind .i{inline-size:16px;block-size:16px;vertical-align:0}
  .tag-connect[data-kind]:is([data-state="connected"],[data-state="wrong-network"],[data-state="restoring"]) .tag-connect__kind{display:inline-flex}
  .tag-connect[data-kind] .tag-connect__dot{display:none}
  .tag-connect[data-state="wrong-network"] .tag-connect__kind{color:var(--rouge)}
  .tag-connect[data-state="restoring"]{--tag-bg:var(--board-2);--tag-ring:inset 0 0 0 1px var(--hair);color:var(--text-2);font:400 var(--fs-15)/1 var(--font-mono);cursor:progress}
  .tag-connect[data-state="restoring"] .tag-connect__kind{color:var(--text-2)}
  .tag-connect[data-state="restoring"]:hover{color:var(--text-2)}
  .tag-connect[data-state="restoring"]:is(:hover,:active)::before{background-color:var(--board)}
  .tag-connect[data-state="connecting"]{cursor:progress}

  /* the account card: an ivory slip with a thermal band under the signed-in tag (a popover; site.js places it) */
  .account-card{position:fixed;inset:auto;margin:0;inline-size:min(340px,calc(100vw - 32px));max-block-size:calc(100dvh - var(--header-h) - 16px);padding:0 var(--pad-compact) var(--pad-compact);border:0;border-radius:var(--r-paper);overflow:auto;background-color:var(--ivory);color:var(--bar);box-shadow:var(--shadow-lift);font:400 var(--fs-15)/var(--lh-15) var(--font-sans);overscroll-behavior:contain}
  .account-card:popover-open{display:flex;flex-direction:column;gap:var(--space-xs);animation:card-drop var(--dur-2) var(--ease-out) both}
  .account-card:not([popover]):not([hidden]){z-index:40;display:flex;flex-direction:column;gap:var(--space-xs)}
  .account-card::before{content:"";flex:none;block-size:10px;margin-inline:calc(-1 * var(--pad-compact));margin-block-end:var(--space-2xs);border-block-end:1px solid var(--hair-paper);background-color:var(--thermal)}
  .account-card p{margin:0}
  .account-card__kicker{color:var(--bar)}
  .account-card__who{display:flex;align-items:center;gap:var(--space-2xs);color:var(--sepia);overflow-wrap:anywhere}
  .account-card__glyph{display:inline-flex;flex:none;color:var(--bar)}
  .account-card__glyph .i{inline-size:18px;block-size:18px}
  .account-card__address{display:flex;align-items:center;gap:var(--space-xs)}
  .account-card__addr{flex:1 1 auto;min-inline-size:0;font:400 var(--fs-15)/var(--lh-15) var(--font-mono);overflow-wrap:anywhere;user-select:all}
  .account-card__copy{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:44px;block-size:44px;padding:0;border:0;border-radius:var(--r-ticket);background:none;color:var(--bar);box-shadow:inset 0 0 0 1px var(--hair-paper);cursor:pointer;transition:background-color var(--dur-1) var(--ease-out)}
  .account-card__copy:hover{background-color:rgb(20 10 15 / .07)}
  .account-card__copy .i{inline-size:20px;block-size:20px}
  .account-card__status{color:var(--sepia)}
  .account-card__status:empty{display:none}
  .account-card__network{display:flex;align-items:baseline;gap:var(--space-2xs);padding-block:var(--space-xs);border-block:1px dashed var(--perf-paper)}
  .account-card__network::before{content:"";flex:none;inline-size:8px;block-size:8px;border-radius:50%;background-color:var(--bar);translate:0 -1px}
  .account-card[data-network="wrong"] .account-card__network{color:var(--suit)}
  .account-card[data-network="wrong"] .account-card__network::before{background-color:var(--suit)}
  .account-card[data-network="asleep"] .account-card__network::before{background-color:var(--sepia)}
  @keyframes card-drop{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
  @media (prefers-reduced-motion:reduce){.account-card:popover-open{animation:fade-in var(--dur-1) linear both}.account-card__copy{transition:none}}
  html[data-motion="off"] .account-card:popover-open{animation:fade-in var(--dur-1) linear both}

  /* ───────── the Play menu sheet (native <dialog>, bottom sheet) ───────── */
  .menu-sheet{position:fixed;inset:auto 0 0;margin:0;inline-size:100%;max-inline-size:100%;max-block-size:calc(100dvh - 56px);padding:var(--pad-compact) var(--pad-compact) calc(var(--pad) + var(--safe-b));border:0;border-block-start:1px solid var(--hair);border-radius:12px 12px 0 0;background-color:var(--board);color:var(--ivory);overflow:auto}
  .menu-sheet[open]{display:flex;flex-direction:column;gap:var(--space-s);animation:sheet-rise var(--dur-2) var(--ease-out) both}
  .menu-sheet::backdrop{background:rgb(20 10 15 / .72)}
  .menu-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs)}
  .menu-sheet__head .head-line{color:var(--text-2)}
  .menu-sheet__close{display:flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;border:1px solid var(--hair);border-radius:var(--r-ticket);background-color:var(--board-2);color:var(--ivory)}
  .menu-sheet__close .i{inline-size:20px;block-size:20px}
  .menu-sheet .ticket-roll{justify-self:stretch;margin-block-start:var(--space-3xs);background-color:var(--board)}
  .menu-sheet .ticket{flex:1 1 0;flex-direction:column;gap:var(--space-3xs);inline-size:auto;block-size:64px;font:500 var(--fs-14)/1 var(--font-sans)}
  .menu-sheet .ticket .pip{inline-size:20px;block-size:20px}
  .menu-sheet .site-footer__legal{color:var(--text-2)}
  @keyframes sheet-rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}

  /* ───────── footer: the open Matchbook ───────── */
  .site-footer{overflow-x:clip;border-block-start:1px solid var(--hair);padding-block:var(--section) var(--gap-out)}
  .site-footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap-out) var(--space-xl)}
  .matchbook{position:relative;flex:0 1 560px;min-inline-size:0;padding-block-start:120px}
  .matchbook__cat{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:4%;inline-size:300px}
  .matchbook__cat img{inline-size:100%;block-size:auto}
  .matchbook__book{position:relative;z-index:1;display:flex;transform:rotate(-4deg);filter:drop-shadow(0 18px 18px rgb(0 0 0 / .5))}
  .matchbook__cover{position:relative;flex:1 1 50%;display:flex;flex-direction:column;min-block-size:208px;overflow:hidden;border-radius:4px 0 0 4px;background-color:var(--cover);background-image:radial-gradient(rgb(220 237 146 / .3) 1.5px,transparent 1.6px);background-size:6px 6px}
  .matchbook__face{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:var(--space-2xs);padding:var(--space-m)}
  .matchbook__mark{color:transparent;font:900 52px/.9 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em;white-space:nowrap;-webkit-text-stroke:1.5px var(--citron);text-shadow:4px 4px 0 var(--citron)}
  .matchbook__tag{color:var(--ivory);font:italic 400 18px/1 var(--font-serif)}
  .matchbook__striker{position:relative;block-size:34px;border-block-start:1px solid rgb(245 239 223 / .2);background-color:var(--chip-ink)}
  .matchbook__striker::after{content:"";position:absolute;inset:0;background:url(/assets/grain-light.png) 0 0/160px 160px;opacity:.4}
  .matchbook__inner{flex:1 1 50%;display:flex;align-items:flex-end;gap:6px;min-block-size:208px;padding:var(--space-m) 20px 0;overflow:hidden;border-radius:0 4px 4px 0;border-inline-start:2px solid var(--bar);background-color:var(--board)}
  .match{flex:1 1 0;display:flex;flex-direction:column;align-items:center;block-size:150px}
  .match::before{content:"";inline-size:100%;max-inline-size:18px;block-size:22px;border-radius:9px 9px 6px 6px;background-color:var(--suit)}
  .match::after{content:"";flex-grow:1;inline-size:60%;max-inline-size:10px;background-color:var(--thermal)}
  .site-footer__meta{flex:0 1 440px;min-inline-size:0;display:flex;flex-direction:column;gap:var(--space-m)}
  .footer-nav{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-l)}
  .footer-nav a{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;min-inline-size:44px;color:var(--ivory);font-weight:600;text-decoration:none}
  .footer-nav a:hover{color:var(--citron)}
  .footer-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--citron);text-decoration-thickness:2px;text-underline-offset:6px}
  /* the legal line is 452px set solid; it only breaks cleanly (after "Play responsibly ·")
     with ≥317px of measure, so its columns below never give it less than 320px */
  .site-footer__legal{color:var(--text-2);font-size:var(--fs-14);line-height:1.5}
  .site-footer .switch{align-self:flex-start}
  /* ≥768: two balanced columns. The matchbook scales down inside the wider column (every
     measure below is its 560px size × --mb, so from ~1280px up it prints at exactly 560);
     the nav/legal/Motion column sits vertically centred at the far edge. */
  @media (min-width:768px){
    .site-footer:not(.site-footer--compact) .site-footer__inner{display:grid;grid-template-columns:minmax(0,3fr) minmax(320px,2fr);align-items:center;column-gap:var(--gap-out)}
    .matchbook{--mb:calc(100cqi / 560);container-type:inline-size;inline-size:100%;max-inline-size:560px;padding-block-start:0}
    .site-footer__meta{justify-self:end;inline-size:100%;max-inline-size:464px}
    .matchbook__cat{inline-size:calc(300 * var(--mb))}
    .matchbook__book{margin-block-start:calc(120 * var(--mb))}
    .matchbook__cover,.matchbook__inner{min-block-size:calc(208 * var(--mb))}
    .matchbook__face{gap:calc(8 * var(--mb));padding:calc(24 * var(--mb))}
    .matchbook__mark{font-size:calc(52 * var(--mb));text-shadow:calc(4 * var(--mb)) calc(4 * var(--mb)) 0 var(--citron)}
    .matchbook__tag{font-size:max(var(--fs-15),calc(18 * var(--mb)))}
    .matchbook__striker{block-size:calc(34 * var(--mb))}
    .matchbook__inner{gap:calc(6 * var(--mb));padding:calc(24 * var(--mb)) calc(20 * var(--mb)) 0}
    .match{block-size:calc(150 * var(--mb))}
    .match::before{max-inline-size:calc(18 * var(--mb));block-size:calc(22 * var(--mb))}
    .match::after{max-inline-size:calc(10 * var(--mb))}
  }
  @media (max-width:767.98px){
    /* the compact /play/ footer keeps its own wrapping row */
    .site-footer:not(.site-footer--compact) .site-footer__inner{flex-direction:column;align-items:stretch;gap:var(--space-l)}
    .matchbook{flex:none;max-inline-size:560px;padding-block-start:96px}
    .site-footer__meta{flex:none}
    .matchbook__cat{inset-inline-end:var(--space-2xs);inline-size:240px}
    .matchbook__book{transform:none;filter:var(--drop)}
    .matchbook__face{padding:var(--space-s) var(--space-xs)}
    .matchbook__mark{font-size:clamp(36px,10.3vw,44px)}
    .matchbook__striker{block-size:32px}
    .matchbook__inner{gap:var(--space-2xs);padding:var(--space-m) var(--space-s) 0}
    .match::before{max-inline-size:16px;border-radius:8px 8px 6px 6px}
    .match::after{max-inline-size:8px}
    .footer-nav{gap:var(--space-3xs) var(--space-l)}
  }
  /* narrow phones fold the book to seven matches; from 640 the 560px book carries all ten */
  @media (max-width:639.98px){.matchbook__tag-lead{display:none}.match:nth-child(n+8){display:none}}

  /* compact footer on /play/: one 56px row */
  .site-footer--compact{padding-block:0}
  .site-footer--compact .site-footer__inner{flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2xs) var(--space-m);min-block-size:56px;padding-block:var(--space-3xs)}
  /* the row shares a line with the Motion switch once the legal line gets ≥320px beside it
     (44 mark + 12 gap + 320); narrower, the switch drops to its own line */
  .site-footer__row{display:flex;flex:1 1 376px;align-items:center;gap:var(--space-xs);min-inline-size:0}
  .site-footer--compact .site-footer__legal{line-height:var(--lh-14)}
  /* narrow phones: mark and Motion share the first line, the legal line gets the full measure
     below (beside the mark it would split "Play responsibly") */
  @media (max-width:639.98px){
    .site-footer--compact .site-footer__row{display:contents}
    .site-footer--compact .site-footer__legal{flex-basis:100%;order:1}
  }
  .footer-mark{display:flex;flex:none;align-items:center;justify-content:center;inline-size:44px;block-size:44px}
  .footer-mark__book{display:flex;flex-direction:column;inline-size:24px;block-size:32px;overflow:hidden;border-radius:2px;background-color:var(--cover);background-image:radial-gradient(rgb(220 237 146 / .3) 1px,transparent 1.2px);background-size:4px 4px;box-shadow:inset 0 0 0 1px var(--hair)}
  .footer-mark__book::after{content:"";margin-block-start:auto;block-size:8px;border-block-start:1px solid rgb(245 239 223 / .2);background-color:var(--chip-ink)}
  .footer-mark:hover .footer-mark__book{box-shadow:inset 0 0 0 1px var(--citron)}

  /* ───────── the info dialog: an ivory paper sheet with a thermal top band ───────── */
  .sheet{position:fixed;inset:0;margin:auto;inline-size:min(560px,calc(100vw - 2 * var(--gutter)));max-inline-size:none;block-size:fit-content;max-block-size:calc(100dvh - 2 * var(--gutter));padding:0;border:0;border-radius:var(--r-paper);overflow:auto;background-color:var(--ivory);color:var(--bar);box-shadow:var(--shadow-lift);overscroll-behavior:contain}
  .sheet[open]{animation:sheet-drop var(--dur-3) var(--ease-settle) both}
  .sheet::backdrop{background:rgb(20 10 15 / .72)}
  .sheet::before{content:"";display:block;block-size:12px;border-block-end:1px solid var(--hair-paper);background-color:var(--thermal)}
  .sheet__close{position:absolute;z-index:1;inset-block-start:calc(12px + var(--space-xs));inset-inline-end:var(--space-xs);display:flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;border-radius:var(--r-ticket);color:var(--bar)}
  .sheet__close:hover{background-color:rgb(20 10 15 / .07);color:var(--bar)}
  .sheet__close .i{inline-size:20px;block-size:20px}
  .sheet__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);padding:var(--space-m) var(--pad) var(--pad)}
  .sheet__body>:is(.head-line,.eyebrow){display:block;padding-inline-end:44px;font:800 16px/1 var(--font-ticket);letter-spacing:.12em;text-transform:uppercase;color:var(--bar)}
  .sheet__body h2{margin-block-end:var(--space-3xs);padding-inline-end:var(--space-l);font:400 var(--fs-title)/1.15 var(--font-serif);letter-spacing:-.01em}
  .sheet__body :is(p,ul){max-inline-size:52ch}
  .sheet__body ul{display:flex;flex-direction:column;gap:var(--space-2xs);padding:0;list-style:none}
  .sheet__body li{position:relative;padding-inline-start:var(--space-m)}
  .sheet__body li::before{content:"";position:absolute;inset-inline-start:4px;inset-block-start:.62em;inline-size:7px;block-size:7px;background-color:var(--suit);rotate:45deg}
  .sheet__body :is(.sheet__note,.dialog-note){color:var(--sepia);font-size:var(--fs-15);line-height:var(--lh-15)}
  .sheet__body :is(.sheet__status,#wallet-status){color:var(--suit);font-size:var(--fs-15);line-height:var(--lh-15)}
  .sheet__body a:not(.btn){color:var(--bar);font-weight:600;text-decoration-color:var(--cover);text-decoration-thickness:2px;text-underline-offset:5px}
  .sheet__body a:not(.btn):hover{color:var(--cover)}
  .sheet__body .link{color:var(--bar)}
  /* legacy class used by club.js: an ink primary button printed on the sheet */
  .sheet__body .dialog-button{display:inline-flex;align-items:center;justify-content:center;block-size:48px;padding:0 20px;border:0;border-radius:var(--r-ticket);background-color:var(--bar);color:var(--ivory);font:600 16px/1 var(--font-sans);cursor:pointer;transition:background-color var(--dur-1)}
  .sheet__body .dialog-button:hover{background-color:var(--board-2)}
  .sheet__body .dialog-button:is([disabled],[aria-disabled="true"]){opacity:.4;cursor:not-allowed}
  .sheet__body>:is(.btn,.dialog-button){margin-block-start:var(--space-2xs)}
  @keyframes sheet-drop{from{opacity:0;translate:0 -24px}to{opacity:1;translate:0 0}}

  /* ───────── toast: a small ivory receipt slip with a printed "Note" line ───────── */
  .toast{position:fixed;z-index:60;inset-block-end:var(--space-m);inset-inline-end:var(--gutter);inline-size:max-content;min-inline-size:220px;max-inline-size:min(360px,calc(100vw - 2 * var(--gutter)));padding:var(--space-s) var(--pad-compact) var(--pad-compact);border-radius:var(--r-paper);background-color:var(--ivory);color:var(--bar);box-shadow:var(--shadow-lift);font-size:var(--fs-15);line-height:var(--lh-15);rotate:-1.5deg;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
  .toast::before{content:"Note";content:"Note" / "";display:block;margin-block-end:var(--space-2xs);padding-block-end:var(--space-2xs);border-block-end:1px solid var(--hair-paper);font:800 14px/1 var(--font-ticket);letter-spacing:.12em;text-transform:uppercase}
  .toast.is-open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;animation:toast-in var(--dur-3) var(--ease-settle) both}
  .toast.restart{animation:none}
  @keyframes toast-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
  @keyframes toast-in-top{from{opacity:0;translate:0 -16px}to{opacity:1;translate:0 0}}
  /* site.js shows the toast as a manual popover (top layer), so reset the UA popover box */
  .toast[popover]{margin:0;border:0;overflow:visible;inset:auto;inset-block-end:var(--space-m);inset-inline-end:var(--gutter)}
  @media (max-width:767.98px){
    .toast,.toast[popover]{inset-block:calc(var(--header-h) + var(--space-xs)) auto;inset-inline:var(--gutter) auto;max-inline-size:calc(100vw - 2 * var(--gutter))}
    .toast.is-open{animation-name:toast-in-top}
  }

  /* reduced motion / Motion off: every move becomes a 120ms fade */
  @media (prefers-reduced-motion:reduce){
    .site-header,.ticket,.ticket::before,.toast{transition-duration:var(--dur-1)}
    .site-header,.ticket,.ticket::before{transition-property:opacity,background-color,box-shadow}
    .ticket:not([aria-current="page"]):hover{transform:none}
    .menu-sheet[open],.sheet[open],.toast.is-open{animation:fade-in var(--dur-1) linear both}
  }
  html[data-motion="off"] .site-header,html[data-motion="off"] .ticket,html[data-motion="off"] .ticket::before{transition-property:opacity,background-color,box-shadow}
  html[data-motion="off"] .site-header,html[data-motion="off"] .ticket,html[data-motion="off"] .ticket::before,html[data-motion="off"] .toast{transition-duration:var(--dur-1)}
  html[data-motion="off"] .ticket:not([aria-current="page"]):hover{transform:none}
  html[data-motion="off"] :is(.menu-sheet[open],.sheet[open],.toast.is-open){animation:fade-in var(--dur-1) linear both}
}