/* SOFT 17 — Club ("Pocket Contents"): the raffle poster, the citron money strap, the membership card,
   the fill-in raffle ticket with its review tray, the held ticket, prize envelopes and the Draw Book.
   Everything lives in @layer pages; shared tokens, stocks, stamps, daters and straps come from style.css. */
@layer pages{

  body[data-page="club"] main{padding-block-start:var(--gap-out)}

  /* ───────── shared section heads ───────── */
  .club-section{padding-block:0 var(--section)}
  .club-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-s) var(--space-xl);margin-block-end:var(--gap-out)}
  .club-head h2{line-height:1}
  /* the intro may narrow to 30ch so every head keeps its intro beside the title from 768px up */
  .club-head__intro{flex:1 1 30ch;max-inline-size:40ch;color:var(--text-2)}
  /* below 768px every head stacks the same way, whatever the length of its title */
  @media (max-width:767.98px){
    .club-head{flex-direction:column;align-items:flex-start}
    .club-head__intro{flex:none}
  }

  /* ═════════ 1 · Raffle Poster ═════════ */
  .poster-section{padding-block-end:var(--section)}
  .poster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center}
  .poster__art{grid-column:6/13;grid-row:1;position:relative;z-index:1;min-inline-size:0;margin:0}
  .poster__frame{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:3px;background-color:var(--cover);box-shadow:var(--shadow-lift)}
  .poster__frame img{inline-size:100%;block-size:100%;object-fit:cover}
  /* double ivory rule, inset 14px and 20px */
  .poster__frame::before,.poster__frame::after{content:"";position:absolute;pointer-events:none;border-radius:2px}
  .poster__frame::before{inset:14px;border:1px solid rgb(245 239 223 / .7)}
  .poster__frame::after{inset:20px;border:1px solid rgb(245 239 223 / .35);border-radius:0}
  .poster__stamp{position:absolute;inset-block-start:48px;inset-inline-end:48px;block-size:40px;font-size:15px;background-color:rgb(20 10 15 / .5)}
  .poster__type{grid-column:1/9;grid-row:1;position:relative;z-index:2;min-inline-size:0;display:flex;flex-direction:column;gap:var(--space-m);padding-block:var(--space-m);container-type:inline-size}
  .poster__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-m)}
  .poster__edition{color:var(--text-2)}
  .poster__editions{display:flex;gap:var(--space-2xs)}
  .poster__ed{display:inline-flex;align-items:center;gap:var(--space-2xs);block-size:48px;padding:0 20px 0 var(--space-s);border:1px solid var(--hair);border-radius:var(--r-ticket);background-color:var(--board);color:var(--ivory);font:600 var(--fs-15)/1 var(--font-sans);transition:background-color var(--dur-1) var(--ease-out)}
  .poster__ed--next{padding:0 var(--space-s) 0 20px}
  .poster__ed .i{inline-size:16px;block-size:16px}
  .poster__ed--prev .i{rotate:180deg}
  .poster__ed:not(:disabled):hover{background-color:var(--board-2)}
  .poster__ed:disabled{border-style:dashed;border-color:var(--hair-strong);background-color:transparent;color:var(--text-3);cursor:not-allowed}
  .poster__title{display:flex;flex-direction:column;gap:var(--space-s)}
  .poster__title h1{line-height:.95}
  .poster__lead{font-size:19px;line-height:28px;color:var(--text-2)}
  /* the pot: citron Fraunces 900 with the oxblood wood-type extrusion; sized to the type column */
  .poster__pot{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs) var(--space-s);margin:0}
  /* --pot-em (club-fx.js) is the printed width of the pot in em; the unit keeps ~150px on the same line */
  .poster__figure{font-size:min(clamp(72px, 11vw, 160px), calc((100cqi - 150px) / var(--pot-em, 4.7)));line-height:.85;letter-spacing:-.04em;color:var(--citron);white-space:nowrap;
    text-shadow:1px 1px 0 var(--cover),2px 2px 0 var(--cover),3px 3px 0 var(--cover),4px 4px 0 var(--cover),5px 5px 0 var(--cover),6px 6px 0 var(--cover),7px 7px 0 var(--cover),8px 8px 0 var(--cover)}
  .poster__figure .roll .d{clip-path:inset(-.06em -.12em -.1em -.06em)}
  .poster__unit{font:400 var(--fs-figure-s)/1 var(--font-serif);color:var(--text-2)}
  .poster__opens{display:none;font:italic 400 var(--fs-h1)/.95 var(--font-serif);letter-spacing:-.02em;color:var(--ivory)}
  .poster__past{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-s) var(--space-m)}
  .poster__past-stamp{block-size:40px;font-size:15px}
  /* the result wraps before the art: only the pot crosses into it */
  .poster__past-copy{display:flex;flex-direction:column;gap:var(--space-3xs);max-inline-size:32ch}
  .poster__past-winner{font-size:17px;line-height:1.4;color:var(--ivory)}
  .poster__facts{max-inline-size:52ch;color:var(--text-2)}
  /* faces */
  /* the pot prints only when it was read; otherwise one italic line says why */
  .poster:not([data-face="live"]) .poster__pot{display:none}
  .poster:not([data-face="live"]) .poster__opens{display:block}
  .poster:not([data-face="prelaunch"]) .poster__stamp{display:none}
  /* small desktops: the art steps one column right so only the pot crosses into it */
  @media (min-width:1024px) and (max-width:1279.98px){.poster__art{grid-column:7/13}.poster__type{grid-column:1/10}}

  /* phones and tablets: art first, the figure tucked over its bottom edge */
  @media (max-width:1023.98px){
    .poster{grid-template-columns:minmax(0,1fr);row-gap:var(--space-m)}
    .poster__art{grid-column:1;grid-row:auto;order:1}
    .poster__type{display:contents}
    .poster__pot,.poster__opens{order:2;position:relative;z-index:2;margin-block-start:calc(var(--tuck-m) - var(--space-m))}
    .poster__dater,.poster__past{order:3}
    .poster__head{order:4}
    .poster__title{order:5}
    .poster__facts{order:6}
    .poster__figure{font-size:min(clamp(72px, 11vw, 120px), calc((100vw - 2 * var(--gutter) - 8px) / var(--pot-em, 4.7)))}
    .poster__opens{text-shadow:0 2px 12px rgb(20 10 15 / .6)}
  }
  /* tablets: under the full-width art, the title and lead take the left column and the
     countdown (or a past edition's result) and the facts take the right, lead and facts sharing a row */
  @media (min-width:768px) and (max-width:1023.98px){
    .poster{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap-out);align-items:start}
    .poster__art{grid-area:1/1/2/-1}
    .poster__pot,.poster__opens{grid-area:2/1/3/-1}
    .poster__title{display:contents}
    .poster__head{grid-area:3/1}
    .poster__title h1{grid-area:4/1}
    .poster__lead{grid-area:5/1}
    .poster__dater,.poster__past{grid-area:3/2/5/3;align-self:start}
    .poster__facts{grid-area:5/2}
    /* the title keeps its 16px step down to the lead; the facts line up with the lead */
    .poster__lead,.poster__facts{margin-block-start:calc(var(--space-s) - var(--space-m))}
  }
  @media (max-width:639.98px){
    .poster__stamp{inset-block-start:var(--space-m);inset-inline-end:var(--space-m);block-size:36px;font-size:14px}
    .poster__frame::before{inset:10px}
    .poster__frame::after{inset:15px}
    .poster__lead{font-size:17px;line-height:26px}
  }

  /* ═════════ 3 · Your seat ═════════ */
  .seat{padding-block-start:clamp(var(--space-xl), 6vw, var(--space-3xl))}
  /* ── how a week runs ── */
  .club-how{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-s)}
  .club-how__title{font:italic 400 22px/1.2 var(--font-serif);color:var(--ivory)}
  .club-how__steps{align-self:stretch;display:flex;flex-direction:column;border-block-end:1px solid var(--hair)}
  .club-how__steps li{display:flex;gap:var(--space-s);padding-block:var(--space-xs);border-block-start:1px solid var(--hair);color:var(--text-2)}
  .club-how__n{flex:0 0 24px;font:600 22px/1.2 var(--font-serif);color:var(--ivory)}
  .club-how .fine{line-height:1.5}

  /* one grid at every width; the side column's objects are placed in it directly */
  .seat__grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--gap-out)}
  .seat__side{display:contents}
  .seat__main{min-inline-size:0}
  .club-how__body{align-self:stretch;display:flex;flex-direction:column;gap:var(--space-s)}
  /* phones: card, held ticket, then the raffle ticket, with the explainer last */
  @media (max-width:767.98px){
    .member-wrap{order:1}.member__network{order:2}.held{order:3}.seat__main{order:4}.club-how{order:5}
    .member__network{margin-block-start:calc(var(--space-s) - var(--gap-out))}
    .held{max-inline-size:760px}
    .club-how{max-inline-size:62ch}
  }
  /* from 768px the card keeps the explainer's small print under it, so the explainer is placed part by part */
  @media (min-width:768px){
    .seat__grid{row-gap:0}
    .club-how{display:contents}
    .member-wrap{grid-area:1/1}
    .member__network{grid-area:2/1;margin-block-start:var(--space-s)}
    .club-how>.fine{margin-block-start:var(--space-m)}
    .club-how>.link{justify-self:start;margin-block-start:var(--space-xs)}
  }
  /* tablets: card beside the steps, both tickets full width below.
     Row 5 (1fr) takes whatever the steps need beyond the card column, so neither column is padded out. */
  @media (min-width:768px) and (max-width:1023.98px){
    .seat__grid{grid-template-columns:minmax(0,5fr) minmax(0,4fr);grid-template-rows:repeat(4,auto) 1fr auto auto}
    .club-how>.fine{grid-area:3/1}
    .club-how>.link{grid-area:4/1}
    .club-how__body{grid-area:1/2/6/3}
    .held{grid-area:6/1/7/-1;max-inline-size:760px;margin-block-start:var(--gap-out)}
    .seat__main{grid-area:7/1/8/-1;margin-block-start:var(--gap-out)}
  }
  /* desktops: card (and held ticket) beside the raffle ticket, the steps as one strip underneath.
     Row 4 (1fr) absorbs the raffle ticket's extra height over the side column, above the small print,
     so the small print and its link close the side column level with the ticket's bottom edge. */
  @media (min-width:1024px){
    .seat__grid{grid-template-columns:minmax(0,440px) minmax(0,1fr);grid-template-rows:repeat(3,auto) 1fr repeat(5,auto)}
    .held{grid-area:3/1;margin-block-start:var(--gap-out)}
    .club-how>.fine{grid-area:5/1}
    .club-how>.link{grid-area:6/1}
    .seat__main{grid-area:1/2/7/3}
    .club-how__body{grid-area:7/1/8/-1;margin-block-start:var(--gap-out)}
    /* once a held ticket fills the side column, the small print follows the steps instead */
    .seat__grid:has(.held:not([hidden])) .club-how>.fine{grid-area:8/1/9/-1}
    .seat__grid:has(.held:not([hidden])) .club-how>.link{grid-area:9/1/10/-1}
    .club-how__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap-out);border-block-end:0}
    .club-how__steps li{border-block-end:1px solid var(--hair)}
  }

  /* ── the membership card: back face until a wallet signs it, then it turns over ── */
  .member-wrap{--tilt:-1.5deg;inline-size:100%;max-inline-size:440px;perspective:1200px}
  .member:focus{outline:none}
  .member:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
  .member{display:grid;aspect-ratio:1.586;border-radius:var(--r-member);transform-style:preserve-3d;transition:transform 600ms var(--ease-out)}
  .member[data-face="front"]{transform:rotateY(180deg)}
  .member__face{grid-area:1/1;position:relative;display:flex;flex-direction:column;min-inline-size:0;overflow:hidden;border-radius:inherit;background-color:var(--board);color:var(--ivory);box-shadow:inset 0 0 0 1px rgb(245 239 223 / .12),var(--shadow-rest);-webkit-backface-visibility:hidden;backface-visibility:hidden}
  /* holo glare (fine pointers, motion on) */
  .member__front::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--glare-x,30%) var(--glare-y,20%),rgb(220 237 146 / .16),transparent 45%);opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
  .member.is-leaning .member__front::before{opacity:1}
  .member{rotate:var(--lean-axis,0 1 0) var(--lean,0deg)}
  .member.is-leaning{transition:transform 600ms var(--ease-out),rotate var(--dur-1) linear}
  .member:not(.is-leaning){transition:transform 600ms var(--ease-out),rotate var(--dur-3) var(--ease-out)}
  .member__face::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:url(/assets/grain-dark.png) 0 0/160px 160px;opacity:.14;mix-blend-mode:multiply}
  .member__front{transform:rotateY(180deg);gap:var(--space-xs);padding:var(--pad);background-image:repeating-radial-gradient(circle at 115% -20%,rgb(220 237 146 / .08) 0 1px,transparent 1px 7px)}
  .member__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-s)}
  .member__top img{inline-size:auto;block-size:28px}
  .member__top .head-line{letter-spacing:.14em}
  .member__moon{inline-size:40px;block-size:40px;color:var(--citron)}
  .member__no{margin-block-start:auto;font:400 22px/1 var(--font-mono);letter-spacing:.08em;color:var(--ivory);text-shadow:0 1px 0 rgb(0 0 0 / .5),0 -1px 0 rgb(255 255 255 / .08)}
  .member__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3xs) var(--space-s);font:400 var(--fs-15)/1.3 var(--font-mono);color:var(--text-2)}
  .member__wrong{position:absolute;inset-block-start:38%;inset-inline-end:var(--pad)}
  .member__stripe{flex:none;margin-block-start:var(--space-m);block-size:44px;background-color:var(--bar)}
  .member__body{flex-grow:1;display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-m) var(--pad)}
  .member__panel{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);min-block-size:64px;padding:var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-s);border-radius:var(--r-paper);background-color:var(--ivory);background-image:repeating-linear-gradient(135deg,rgb(20 10 15 / .12) 0 1px,transparent 1px 4px)}
  .member__sig{min-inline-size:0;font-size:var(--fs-14);font-weight:500;line-height:1.3;color:var(--sepia)}
  .member__connect{flex:none;box-shadow:0 1px 0 rgb(0 0 0 / .45)}
  .member__hint{font:italic 400 var(--fs-15)/1.4 var(--font-serif);color:var(--text-2)}
  .member__network{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);max-inline-size:440px;font-size:var(--fs-15);line-height:var(--lh-15);color:var(--text-2)}
  .member__switch{white-space:normal;text-align:start}
  @media (max-width:639.98px){
    .member{border-radius:13px}
    .member__front{padding:var(--space-m)}
    .member__top img{block-size:24px}
    .member__moon{inline-size:32px;block-size:32px}
    .member__no{font-size:19px}
    .member__stripe{margin-block-start:var(--space-s);block-size:40px}
    .member__body{padding:var(--space-s) var(--space-m) var(--space-m)}
    .member__wrong{inset-inline-end:var(--space-m)}
  }
  /* phones and tablets: a tighter signature strip keeps "Authorised signature" on one line from 390px up */
  @media (max-width:1023.98px){
    .member__panel{gap:var(--space-2xs);padding-inline-start:var(--space-xs)}
    .member__connect{--btn-px:var(--space-xs)}
  }

  /* ── the held ticket: the entry chosen for withdrawal, with its moon lock ── */
  .held{display:flex;flex-direction:column;gap:var(--space-xs)}
  .held__label{font-size:var(--fs-15);font-weight:600;line-height:var(--lh-15);color:var(--text-2)}
  .held__ticket{--stub:140px;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);border-radius:var(--r-ticket);transition:filter var(--dur-3) var(--ease-out)}
  .held__body{position:relative;min-inline-size:0;display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-m)}
  .held__serial{color:var(--suit);letter-spacing:.08em}
  .held__state{font:400 32px/1 var(--font-serif);letter-spacing:-.01em}
  .held__data{font-size:var(--fs-body);line-height:1.45}
  .held__week{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs) var(--space-xs)}
  .held__week label{font-size:var(--fs-14);font-weight:500;color:var(--sepia)}
  .held__week input{inline-size:6ch;min-block-size:44px;padding:0 var(--space-3xs);border:0;border-block-end:2px solid var(--cover);border-radius:0;background:transparent;color:var(--bar);font:400 20px/1 var(--font-mono);text-align:center;-moz-appearance:textfield}
  .held__week input::-webkit-inner-spin-button,.held__week input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .held__week input::placeholder{color:var(--sepia);opacity:1}
  .held__stamp{position:absolute;inset-block-start:var(--space-m);inset-inline-end:var(--space-s)}
  .held__stub{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-s);padding:var(--space-m) var(--space-s);border-inline-start:2px dashed var(--perf-paper)}
  .held__stub-label{align-self:center;writing-mode:vertical-rl;font:800 16px/1 var(--font-ticket);letter-spacing:.12em;text-transform:uppercase}
  .held__actions{margin-block-start:auto;display:flex;flex-direction:column;gap:var(--space-2xs)}
  .held__withdraw{inline-size:100%;padding-inline:var(--space-xs)}
  .held__note,.held__total{font-size:var(--fs-14);font-weight:500;line-height:1.35;color:var(--sepia)}
  .held__ticket[data-status="empty"] .held__serial{display:none}
  .held__ticket[data-status="lost"]{filter:saturate(.55)}
  .held__ticket[data-status="withdrawn"] .held__stub{opacity:.55}
  /* moon lock: elapsed nights are filled, the current night pulses, the rest are outlines */
  .moons{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
  .moon{inline-size:28px;block-size:28px;color:transparent;stroke:var(--cover);stroke-width:1.3}
  .moon[data-night="past"]{color:var(--cover)}
  .moon[data-night="now"]{color:transparent;animation:club-pulse 1.6s ease-in-out infinite}
  @keyframes club-pulse{50%{opacity:.6}}

  /* ── the fill-in raffle ticket (the ticket IS the form) ── */
  .raffle{display:flex;flex-direction:column;gap:var(--space-l)}
  .raffle__pad{inline-size:100%;max-inline-size:760px}
  .raffle__tilt{position:relative}
  .raffle[data-face="live"] .raffle__tilt{--tilt:1.5deg}
  /* the closed ticket book: two blank sheets behind, 4px apart */
  .raffle__sheets{display:none}
  .raffle[data-face="book"] .raffle__pad{padding:0 var(--space-2xs) var(--space-2xs) 0}
  .raffle[data-face="book"] .raffle__sheets{display:block}
  .raffle__sheets>span{position:absolute;border-radius:var(--r-ticket);box-shadow:var(--shadow-rest)}
  .raffle__sheets>span:first-child{inset:var(--space-2xs) calc(-1 * var(--space-2xs)) calc(-1 * var(--space-2xs)) var(--space-2xs);background-color:var(--thermal)}
  .raffle__sheets>span:last-child{inset:var(--space-3xs) calc(-1 * var(--space-3xs)) calc(-1 * var(--space-3xs)) var(--space-3xs);background-color:var(--ivory)}
  .raffle__drop{position:relative}
  .raffle__ticket{--stub:180px;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);border-radius:var(--r-ticket);container:raffle/inline-size}
  .raffle__body{min-inline-size:0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-l);padding:var(--pad)}
  .raffle__sentence{flex:1 1 260px;min-inline-size:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs)}
  .raffle__stamp{display:none;block-size:40px;font-size:15px}
  .raffle[data-face="book"]:not([data-mode="open"]) .raffle__stamp{display:inline-flex}
  .raffle__price{font:italic 400 var(--fs-body)/1.45 var(--font-serif);color:var(--sepia)}
  .raffle__fill{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3xs) var(--space-xs);font-size:var(--fs-body)}
  .raffle__input{box-sizing:content-box;inline-size:4ch;max-inline-size:100%;min-block-size:44px;padding:0 var(--space-3xs);border:0;border-block-end:2px solid var(--cover);border-radius:0;background:transparent;color:var(--bar);font:400 40px/1.1 var(--font-serif);font-variation-settings:"opsz" 72;text-align:center;transition:border-color var(--dur-1)}
  .raffle__input::placeholder{color:rgb(20 10 15 / .5);opacity:1}
  .raffle__input:disabled{opacity:.6}
  .raffle.is-invalid .raffle__input{border-block-end-color:var(--suit)}
  .raffle__blank{display:none;inline-size:96px;block-size:44px;border-block-end:2px solid var(--cover)}
  .raffle__note{min-block-size:20px;font-size:var(--fs-14);font-weight:500;line-height:20px;color:var(--sepia);overflow-wrap:anywhere}
  .raffle__note.is-error{color:var(--suit)}
  .raffle__note a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
  .raffle__quick{display:flex;inline-size:100%;border-color:var(--hair-paper);border-radius:var(--r-key);background-color:transparent}
  .raffle__quick>button{flex:1 1 0;min-inline-size:0;color:var(--bar)}
  .raffle__quick>*+*{border-inline-start-color:var(--hair-paper)}
  .raffle__quick>:hover{background-color:rgb(20 10 15 / .06)}
  .raffle__quick>[aria-pressed="true"]{background-color:var(--bar);color:var(--ivory)}
  .raffle__quick>:disabled{opacity:.4;cursor:not-allowed}
  .raffle__quick>:disabled:hover{background-color:transparent}
  .raffle__balance{font-size:var(--fs-14);font-weight:500;line-height:var(--lh-14);color:var(--sepia)}
  .raffle__odds{flex:0 1 176px;min-inline-size:0;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-xs)}
  .raffle__pct{font:300 clamp(52px, 5vw, 72px)/.9 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.04em;white-space:nowrap}
  .raffle__dots{display:grid;grid-template-columns:repeat(10,14px);gap:var(--space-3xs)}
  .dot{inline-size:14px;block-size:14px;border-radius:var(--r-pill);background-color:transparent;box-shadow:inset 0 0 0 1.5px var(--hair-paper);transition:background-color var(--dur-1) linear calc(var(--i) * 8ms),box-shadow var(--dur-1) linear calc(var(--i) * 8ms)}
  .dot[data-seat="you"]{background-color:var(--cover);box-shadow:none}
  .dot[data-seat="other"]{background-color:rgb(20 10 15 / .2);box-shadow:none}
  .raffle__caption{font-size:var(--fs-14);font-weight:500;line-height:1.4;color:var(--sepia);text-align:end}
  .raffle__stub{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-s);padding:var(--space-m) var(--space-s);border-inline-start:2px dashed var(--perf-paper)}
  .raffle__admit{align-self:center;writing-mode:vertical-rl;font:800 18px/1 var(--font-ticket);letter-spacing:.12em;text-transform:uppercase}
  .raffle__review{margin-block-start:auto;inline-size:100%;padding-inline:var(--space-xs)}
  /* a narrow ticket stacks the odds under the sentence, read left to right; 740px is where the sentence (260)
     and the odds (176) stop fitting side by side inside the body, so the odds never wrap as a lone column */
  @container raffle (max-width:739.98px){
    .raffle__odds{flex-basis:100%;flex-direction:row;flex-wrap:wrap;align-items:flex-end;column-gap:var(--space-m)}
    .raffle__pct{order:2}
    .raffle__caption{order:3;flex:1 1 12ch;text-align:start}
  }
  /* book face: the blank line replaces the input, the odds column is a grid of empty seats */
  .raffle[data-face="book"] :is(.raffle__input,.raffle__quick,.raffle__balance){display:none}
  .raffle[data-face="book"] .raffle__blank{display:inline-block}
  .raffle[data-face="book"] .raffle__pct{color:var(--sepia)}
  /* disabled ink buttons on paper print as a dashed outline with the reason beside them */
  :is(.raffle__review,.held__withdraw):disabled{opacity:1;border:1.5px dashed rgb(20 10 15 / .4);background-color:transparent;color:var(--sepia)}

  /* ── perforated tickets: 10px half-circle notches at the stub join (body | stub) ── */
  @supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
    .raffle__ticket,.held__ticket{
      -webkit-mask:radial-gradient(circle 10px at calc(100% - var(--stub) + 1px) 0,#0000 95%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at calc(100% - var(--stub) + 1px) 100%,#0000 95%,#000) bottom/100% 51% no-repeat;
      mask:radial-gradient(circle 10px at calc(100% - var(--stub) + 1px) 0,#0000 95%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at calc(100% - var(--stub) + 1px) 100%,#0000 95%,#000) bottom/100% 51% no-repeat}
  }

  /* phones: the stub becomes a 72px strip under the body, notched left and right */
  @media (max-width:639.98px){
    .raffle__ticket,.held__ticket{grid-template-columns:minmax(0,1fr)}
    .raffle__stub,.held__stub{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-xs);min-block-size:72px;padding:var(--space-xs) var(--space-s);border-inline-start:0;border-block-start:2px dashed var(--perf-paper)}
    .raffle__admit,.held__stub-label{writing-mode:horizontal-tb;font-size:16px;letter-spacing:.08em;white-space:nowrap}
    /* the stub line never breaks inside "Admit one · Week 41"; on very narrow screens the button drops below */
    .raffle__stub{flex-wrap:wrap}
    .raffle__review{margin-block-start:0;inline-size:auto;padding-inline:var(--space-s)}
    .held__actions{margin-block-start:0;flex-direction:row;align-items:center;gap:var(--space-xs)}
    .held__withdraw{inline-size:auto;padding-inline:var(--space-s)}
    .held__stub-label{display:none}
    .held__note{max-inline-size:18ch}
    .raffle__body{gap:var(--space-m)}
    .raffle__dots{grid-template-columns:repeat(10,10px)}
    .dot{inline-size:10px;block-size:10px}
    .raffle__pct{font-size:52px}
    @supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
      .raffle__ticket,.held__ticket{
        -webkit-mask:radial-gradient(circle 10px at 0 calc(100% - 71px),#0000 95%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% calc(100% - 71px),#0000 95%,#000) right/51% 100% no-repeat;
        mask:radial-gradient(circle 10px at 0 calc(100% - 71px),#0000 95%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% calc(100% - 71px),#0000 95%,#000) right/51% 100% no-repeat}
    }
  }

  /* narrow phones (under 390px): a little more room on the card and the stub so the signature label (from 375px)
     and "Admit one · Week 41" with its button (from 360px) each stay on one line */
  @media (max-width:389.98px){
    .member__body{padding-inline:var(--space-s)}
    .raffle__stub{column-gap:var(--space-2xs);padding-inline:var(--space-xs)}
    .raffle__review{padding-inline:var(--space-xs)}
  }

  /* ── the review tray: under the ticket on wide screens, a bottom sheet on phones ── */
  .tray{position:relative;inset:auto;display:none;flex-direction:column;gap:var(--gap-in);inline-size:100%;max-inline-size:480px;margin:0 0 0 auto;padding:var(--pad);border:0;border-radius:3px;box-shadow:var(--shadow-rest)}
  .tray[open]{display:flex;animation:club-tray-in var(--dur-3) var(--ease-out) both}
  .raffle__pad~.tray{margin-inline-end:max(0px, calc(100% - 760px))}
  .tray__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s)}
  .tray__title:focus{outline:none}
  .tray__title:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
  .tray__close{display:flex;flex:none;align-items:center;justify-content:center;inline-size:44px;block-size:44px;border:1px solid var(--hair-paper);border-radius:var(--r-ticket);color:var(--bar)}
  .tray__close:hover{background-color:rgb(20 10 15 / .06);color:var(--bar)}
  .tray__close .i{inline-size:18px;block-size:18px}
  .tray__amount{display:flex;align-items:baseline;gap:var(--space-xs)}
  .tray__figure{font-size:44px;line-height:.9;letter-spacing:-.03em}
  .tray__unit{font:400 22px/1 var(--font-serif);color:var(--sepia)}
  .tray__receipt{gap:var(--space-2xs);font-size:var(--fs-15);line-height:1.45}
  .tray__receipt .leader>span:last-child{text-align:end}
  .tray__warn{color:var(--suit)}
  .tray__fine{color:var(--sepia);line-height:1.5}
  .tray__done{display:none;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-s)}
  .tray__done .btn{order:3}
  .tray__done-copy{font-size:var(--fs-15);line-height:var(--lh-15)}
  .tray__stamp{color:var(--bar)}
  .tray[data-step="locked"] .tray__lock{display:none}
  .tray[data-step="locked"] .tray__done{display:flex}
  .tray__lock[aria-busy]{cursor:progress}
  .tray__lock:disabled[aria-busy]{opacity:1}
  /* the live status is spoken; it is printed only when something went wrong */
  .tray__status:not(.is-error){position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tray__status.is-error{font-size:var(--fs-15);line-height:var(--lh-15);color:var(--suit)}
  .tray:modal{position:fixed;inset:auto 0 0;inline-size:100%;max-inline-size:100%;max-block-size:calc(100dvh - var(--header-h));margin:0;padding:var(--pad) var(--pad) calc(var(--pad) + var(--safe-b));overflow:auto;overscroll-behavior:contain;border-radius:12px 12px 0 0;box-shadow:var(--shadow-lift)}
  .tray:modal[open]{animation:sheet-rise var(--dur-3) var(--ease-out) both}
  .tray::backdrop{background:rgb(20 10 15 / .72)}
  @keyframes club-tray-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

  /* ═════════ 4 · Prize envelopes ═════════ */
  .envelopes{--flap-h:clamp(152px, 14vw, 196px);display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--gap-out)}
  .envelope-slot{flex:1 1 380px;max-inline-size:560px;min-inline-size:0;display:flex;flex-direction:column;gap:var(--space-s)}
  .envelope{position:relative;flex-grow:1;display:flex;flex-direction:column;aspect-ratio:3/2;border-radius:3px;background-image:radial-gradient(rgb(245 239 223 / .06) 1px,transparent 1.2px);background-size:6px 6px;box-shadow:var(--shadow-lift)}
  .envelope__flap{position:absolute;inset-block-start:0;inset-inline:0;inline-size:100%;block-size:var(--flap-h);overflow:visible;transform-origin:50% 0;transition:transform var(--dur-4) var(--ease-out)}
  .envelope__flap polygon{fill:var(--board-2);stroke:var(--hair);stroke-width:1;vector-effect:non-scaling-stroke}
  .envelope__top{position:relative;flex:none;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2xs) var(--space-s);block-size:var(--flap-h);padding:var(--pad) var(--pad) 0}
  .envelope__kind{color:var(--text-2)}
  .envelope__to{color:var(--text-2)}
  /* the wax seal IS the claim button */
  .seal{position:absolute;z-index:2;inset-inline-start:50%;inset-block-start:100%;display:flex;align-items:center;justify-content:center;inline-size:64px;block-size:64px;margin:-32px 0 0 -32px;border-radius:50%;filter:drop-shadow(0 2px 0 rgb(0 0 0 / .35));transition:transform var(--dur-1) var(--ease-out)}
  .seal__coin{position:absolute;inset:0;inline-size:100%;block-size:100%}
  .seal__coin path{fill:var(--citron)}
  .seal__coin circle{fill:none;stroke:var(--bar);stroke-width:2}
  .seal__mark{position:relative;display:flex;align-items:center;gap:var(--space-3xs);color:var(--bar);font:900 22px/1 var(--font-serif);font-variation-settings:"opsz" 24;letter-spacing:-.03em}
  .seal__mark svg{inline-size:10px;block-size:10px;fill:currentColor}
  .seal:hover{transform:scale(1.04)}
  .seal.is-spinning{cursor:progress;animation:club-coin .6s linear infinite}
  .seal.is-shaking{animation:club-shake 300ms var(--ease-out)}
  @keyframes club-shake{20%,60%{translate:-4px 0}40%,80%{translate:4px 0}}
  @keyframes club-coin{to{transform:rotateY(360deg)}}
  .envelope__face{position:relative;flex-grow:1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-2xs);padding:var(--space-xl) var(--pad) var(--pad)}
  .envelope__title{font:400 var(--fs-title)/1.15 var(--font-serif);letter-spacing:-.01em;color:var(--ivory)}
  .envelope__line{font-size:var(--fs-body);font-weight:600;color:var(--text-2)}
  .envelope__amount{color:var(--citron)}
  .envelope-slot[data-phase="sealed"] .envelope__amount{color:var(--text-2);font-weight:400}
  .envelope__fine{max-inline-size:62ch;font-size:var(--fs-14);line-height:1.45;color:var(--text-2)}
  .envelope__hint{font:italic 400 var(--fs-15)/1.4 var(--font-serif);color:var(--text-2)}
  .envelope-slot:not([data-phase="sealed"]):not([data-phase="ready"]) .envelope__hint{display:none}
  .envelope-slot__foot{margin-block-start:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-s);min-block-size:48px}
  .envelope__status{font-size:var(--fs-15);line-height:var(--lh-15);color:var(--text-2)}
  .envelope-slot[data-phase="error"] .envelope__status{color:var(--rouge)}
  /* paid: the flap opens and an ivory slip rises with the amount */
  .slip{position:absolute;z-index:3;inset-inline:12%;inset-block-start:-32px;display:none;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-xs) var(--space-s);padding:var(--space-m);box-shadow:var(--shadow-rest)}
  .slip__copy{display:flex;flex-direction:column;gap:var(--space-3xs);min-inline-size:0}
  .slip__amount{font:600 var(--fs-figure-s)/1 var(--font-serif);letter-spacing:-.03em}
  .slip__amount small{font:400 var(--fs-body)/1 var(--font-sans);letter-spacing:0}
  .slip__stamp{--stamp-rot:-8deg}
  .envelope-slot[data-phase="paid"] .slip{display:flex;animation:club-slip var(--dur-4) var(--ease-out) both}
  .envelope-slot[data-phase="paid"] .envelope__flap{transform:perspective(900px) rotateX(-180deg)}
  @keyframes club-slip{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
  /* an opened flap stands var(--flap-h) above its envelope: make room so it never covers the section intro or,
     when the envelopes stack, the claim line of the envelope above it */
  .envelopes:has(.envelope-slot[data-phase="paid"]:not([hidden])){padding-block-start:max(0px,calc(var(--flap-h) - var(--gap-out) + var(--space-2xs)));row-gap:calc(var(--flap-h) + var(--space-m))}
  /* empty and pre-launch: a flat, sealless outline */
  .envelope-empty{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:560px;aspect-ratio:3/2;border:1.5px dashed rgb(245 239 223 / .4);border-radius:3px}
  .envelope-empty__flap{flex:none;inline-size:100%;block-size:var(--flap-h);overflow:visible}
  .envelope-empty__flap polyline{fill:none;stroke:rgb(245 239 223 / .4);stroke-width:1.5;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
  .envelope-empty__face{flex-grow:1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-2xs);padding:var(--space-m) var(--pad) var(--pad)}
  .envelope-empty__note{font-size:var(--fs-15);line-height:1.45;color:var(--text-2)}
  /* from 640px a lone outline stands where the jackpot envelope will and its message takes the rebate's place,
     so the pair fills the same two-envelope row as the launched page */
  @media (min-width:640px){
    .envelope-empty{display:grid;grid-template-columns:repeat(2,minmax(0,560px));column-gap:var(--gap-out);max-inline-size:none;aspect-ratio:auto;border:0;border-radius:0}
    .envelope-empty::before{content:"";grid-area:1/1;aspect-ratio:3/2;border:1.5px dashed rgb(245 239 223 / .4);border-radius:3px}
    .envelope-empty__flap{grid-area:1/1;align-self:start;block-size:auto;aspect-ratio:20/7}
    .envelope-empty__face{grid-area:1/2;align-self:center;padding:0}
  }
  /* until two envelopes fit side by side, each launched envelope takes the full row as a long envelope */
  @media (min-width:640px) and (max-width:899.98px){
    .envelope-slot{flex-basis:100%;max-inline-size:none}
    .envelope{aspect-ratio:5/2}
  }
  @media (max-width:639.98px){
    .envelopes{--flap-h:clamp(112px, 34vw, 152px)}
    .envelope,.envelope-empty{aspect-ratio:auto;min-block-size:calc(var(--flap-h) + 132px)}
    .envelope__face{padding-block-start:var(--space-xl)}
  }

  /* ═════════ 5 · the Draw Book ═════════ */
  .drawbook__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-s) var(--space-l);padding-block-end:var(--space-s)}
  .drawbook__title{color:var(--text-2)}
  .drawbook__tabs{border-radius:var(--r-ticket)}
  .drawbook__tabs>a{min-inline-size:56px;padding:0}
  .drawbook__tabs>*+*{border-inline-start:1px dashed var(--hair-strong)}
  .drawbook__tabs>a:hover{color:var(--ivory)}
  .drawbook__tabs>a[aria-current]:hover{color:var(--bar)}
  .drawbook__rows{border-block-start:1px solid var(--hair)}
  .drawbook__month{padding:var(--space-xs) var(--space-s);background-color:var(--cover);font:italic 400 20px/1.2 var(--font-serif);color:var(--ivory)}
  .drawbook__empty{display:flex;align-items:center;min-block-size:56px;padding:var(--space-2xs) var(--space-s);border-block-end:1px solid var(--hair);color:var(--text-2)}
  /* fixed pot and result columns keep every row of the book on the same verticals */
  .drawrow{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,216px) minmax(0,248px) 96px;grid-template-areas:"no time pot win proof";align-items:center;column-gap:var(--space-m);row-gap:var(--space-2xs);min-block-size:56px;padding:var(--space-2xs) var(--space-s)}
  div.drawrow,.drawbook__details{border-block-end:1px solid var(--hair)}
  .drawrow__no{grid-area:no;font:italic 400 22px/1 var(--font-serif)}
  .drawrow__time{grid-area:time}
  .drawrow__time s{color:var(--text-2);text-decoration-color:var(--rouge);text-decoration-thickness:2px}
  .drawrow__pot{grid-area:pot;font:400 var(--fs-15)/1.4 var(--font-mono);color:var(--text-2)}
  .drawrow__win{grid-area:win;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-xs);font-size:var(--fs-15);color:var(--text-2)}
  .drawrow__winner{font:400 var(--fs-15)/1.4 var(--font-mono);color:var(--ivory)}
  .drawrow__you{font-size:var(--fs-14)}
  .drawrow__stamp{block-size:32px;padding-inline:var(--space-xs)}
  .drawrow__proof{grid-area:proof;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2xs);font-size:var(--fs-15);font-weight:600}
  .drawrow__proof .i{inline-size:16px;block-size:16px}
  summary.drawrow:hover{background-color:rgb(245 239 223 / .03)}
  summary.drawrow:focus-visible{outline-offset:-2px}
  .proof{display:flex;flex-direction:column;gap:var(--space-xs);margin:0 var(--space-s) var(--space-s);padding:var(--space-m);border-radius:3px;background-color:var(--board);box-shadow:var(--shadow-inset)}
  .proof__tx{display:contents}
  .proof__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-s);min-block-size:44px}
  .proof__label{flex:0 0 144px;font-size:var(--fs-14);font-weight:500;color:var(--text-2)}
  .proof__value{min-inline-size:18ch;font:400 var(--fs-15)/1.4 var(--font-mono);color:var(--ivory);overflow-wrap:anywhere}
  .proof__copy{display:flex;flex:none;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)}
  .proof__copy:hover{border-color:var(--hair-strong)}
  .proof__copy .i{inline-size:16px;block-size:16px}
  .proof__link,.proof__fallback{display:inline-flex;align-items:center;gap:var(--space-3xs);min-block-size:44px;color:var(--ivory);font-size:var(--fs-15);font-weight:600;text-decoration:underline;text-decoration-color:var(--hair-strong);text-underline-offset:4px}
  .proof__link .i{inline-size:14px;block-size:14px}
  .proof__copied{font-size:var(--fs-14);font-weight:500;color:var(--text-2)}
  .proof__loading{color:var(--text-2)}
  .proof__caption{max-inline-size:70ch;line-height:1.5}
  /* tablets: the pot moves under the date so the date never breaks word by word */
  @media (min-width:768px) and (max-width:1023.98px){
    .drawrow{grid-template-columns:80px minmax(0,1fr) minmax(0,248px) 80px;grid-template-areas:"no time win proof" "no pot win proof"}
  }
  @media (max-width:767.98px){
    .drawrow{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"no time proof" "pot pot pot" "win win win";column-gap:var(--space-s)}
    .drawrow__win:empty{display:none}
    .proof{margin-inline:0;padding:var(--space-s)}
    .proof__label{flex-basis:100%}
  }

  /* ═════════ motion off / reduced motion: every move becomes a 120ms fade ═════════ */
  @media (prefers-reduced-motion:reduce){
    :is(.member,.member.is-leaning,.member:not(.is-leaning)){transform:none!important;transition:none}
    .member__front{transform:none}
    .member__face{transition:opacity var(--dur-1) linear}
    .member[data-face="back"] .member__front,.member[data-face="front"] .member__back{opacity:0}
    .dot{transition:background-color var(--dur-1) linear,box-shadow var(--dur-1) linear}
    .moon[data-night="now"]{animation:none}
    .seal:is(.is-spinning,.is-shaking){animation:none}
    .seal:hover{transform:none}
    .member,.member.is-leaning{rotate:none}
    .member__front::before{display:none}
    .poster__ed{transition:none}
    .tray[open],.tray:modal[open],.envelope-slot[data-phase="paid"] .slip{animation:fade-in var(--dur-1) linear both}
    .envelope__flap{transition:none}
    .held__ticket{transition:none}
  }
  html[data-motion="off"] :is(.member,.member.is-leaning,.member:not(.is-leaning)){transform:none!important;transition:none}
  html[data-motion="off"] .member__front{transform:none}
  html[data-motion="off"] .member__face{transition:opacity var(--dur-1) linear}
  html[data-motion="off"] :is(.member[data-face="back"] .member__front,.member[data-face="front"] .member__back){opacity:0}
  html[data-motion="off"] .dot{transition:background-color var(--dur-1) linear,box-shadow var(--dur-1) linear}
  html[data-motion="off"] :is(.moon[data-night="now"],.seal.is-spinning,.seal.is-shaking){animation:none}
  html[data-motion="off"] .member{rotate:none}
  html[data-motion="off"] .member__front::before{display:none}
  html[data-motion="off"] .seal:hover{transform:none}
  html[data-motion="off"] :is(.poster__ed,.envelope__flap,.held__ticket){transition:none}
  html[data-motion="off"] :is(.tray[open],.tray:modal[open],.envelope-slot[data-phase="paid"] .slip){animation:fade-in var(--dur-1) linear both}
}