/* SOFT 17 — Home: the tuck box and what fell out of your pocket.
   Page layer only; shared objects (stocks, edges, stamps, chips, dater, strap, buttons) come from style.css. */
@layer pages{

  /* ───────── 1. hero: tuck box + callouts + back panel ───────── */
  /* --tuck-fit: the box width at which the whole face fits on screen. It lives on the hero so the
     grid can size the box column to the box itself (no dead band beside a height-capped box). */
  .home-hero{--flap:64px;--tuck-fit:max(360px,calc((100svh - var(--header-h) - var(--gap-out) - var(--flap) - var(--space-m)) * 5 / 7));display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-l);padding-block:0 var(--section)}
  .home-hero__box{min-inline-size:0}

  /* the box: its width follows the viewport height so the whole face fits on screen */
  .tuck{position:relative;inline-size:min(100%,var(--tuck-fit));padding-block-start:var(--flap)}
  .tuck__flap{position:absolute;z-index:0;inset-block-start:22px;inset-inline-start:5%;inline-size:90%;block-size:44px;background-color:var(--board-2);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%)}
  .tuck__peek{position:absolute;z-index:1;inline-size:96px;block-size:144px;overflow:hidden;border-radius:var(--r-card);box-shadow:var(--shadow-rest)}
  .tuck__peek img{inline-size:100%;block-size:100%;object-fit:cover}
  .tuck__peek--back{inset-block-start:0;inset-inline-start:20%;rotate:-7deg}
  .tuck__peek--ace{--pip-black:var(--bar);inset-block-start:8px;inset-inline-start:37%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3xs);padding:var(--space-2xs) var(--space-xs);background-color:var(--ivory);color:var(--bar);rotate:6deg}
  .tuck__rank{font:600 26px/1 var(--font-serif)}
  .tuck__peek--ace .pip{inline-size:16px;block-size:16px}

  /* the face is the inline-size container: every layer is placed in cqi so it scales with the box */
  .tuck__body{position:relative;z-index:2;container-type:inline-size}
  .tuck__face{aspect-ratio:5/7;overflow:hidden;isolation:isolate;box-shadow:var(--shadow-lift)}
  .tuck__rule{position:absolute;pointer-events:none}
  .tuck__rule--outer{inset:max(10px,2.8cqi);border:1px solid rgb(245 239 223 / .7);border-radius:var(--r-paper)}
  .tuck__rule--inner{inset:max(14px,4cqi);border:1px solid rgb(245 239 223 / .4)}
  .tuck__index{position:absolute;inset-block-start:6.4cqi;inset-inline-start:6.4cqi;display:flex;flex-direction:column;align-items:center;gap:1cqi;color:var(--ivory);font:600 max(20px,7cqi)/1 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.03em}
  .tuck__index .i{inline-size:max(12px,3.2cqi);block-size:max(12px,3.2cqi);color:var(--citron)}
  .tuck__index--end{inset:auto 6.4cqi 6.4cqi auto;rotate:180deg}
  .tuck__word{position:absolute;inset-inline:0;inset-block-start:7cqi;color:var(--ivory);font:900 15cqi/1 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:.02em;text-align:center}
  .tuck__line{position:absolute;inset-inline:0;inset-block-start:23.5cqi;color:var(--text-2);font:800 max(14px,2.8cqi)/1 var(--font-ticket);letter-spacing:.12em;text-align:center;text-transform:uppercase}
  .tuck__art{position:absolute;inset-inline-start:6cqi;inset-block-start:27cqi;inline-size:88cqi;block-size:88cqi}
  .tuck__art img{inline-size:100%;block-size:100%}
  .tuck__moon{z-index:1;translate:calc(var(--px,0) * -6px) calc(var(--py,0) * -6px)}
  .tuck__mark{position:absolute;z-index:2;inset-inline:0;inset-block-end:5cqi;color:var(--ivory);font:900 66cqi/.78 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.06em;text-align:center;translate:calc(var(--drift,0) * -8cqi) 0;text-shadow:1px 1px 0 var(--bar),2px 2px 0 var(--bar),3px 3px 0 var(--bar),4px 4px 0 var(--bar),5px 5px 0 var(--bar),6px 6px 0 var(--bar)}
  .tuck__cat{z-index:3;translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -14px)}
  .tuck__grain{position:absolute;inset:0;z-index:4;pointer-events:none;background:url(/assets/grain-dark.png) 0 0/160px 160px;opacity:.12;mix-blend-mode:multiply}

  /* the equation line (below 1200px, where the leader callouts have no room) */
  .home-eq{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3xs) var(--space-2xs);margin-block-start:var(--space-m);font:400 28px/1.2 var(--font-serif)}
  .home-eq .pip{inline-size:20px;block-size:20px}
  .home-eq em{font-style:italic;font-weight:300}

  /* leader-line callouts across the gap between the box and the back panel */
  .ledger{display:none}
  @media (min-width:1200px){
    .home-eq{display:none}
    .ledger{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
    .ledger__lines{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
    .ledger__path{fill:none;stroke:var(--ivory);stroke-opacity:.65;stroke-width:1.5}
    /* an ink halo keeps the leader readable where it crosses the ivory cards */
    .ledger__halo{stroke:var(--bar);stroke-opacity:.5;stroke-width:4;stroke-linecap:round}
    .ledger__dot{fill:var(--ivory);stroke:var(--bar);stroke-width:1.5}
    .ledger__rows{position:absolute;inset-block-start:32cqi;inset-inline-start:calc(100% + 13.6cqi);inline-size:max(196px,39.2cqi);display:flex;flex-direction:column}
    .ledger__row{display:flex;align-items:center;justify-content:space-between;block-size:10.4cqi}
    .ledger__label{display:flex;align-items:center;gap:6px;color:var(--text-2);font:italic 300 22px/1 var(--font-serif)}
    .ledger__rank{color:var(--ivory);font-style:normal;font-weight:600}
    .ledger__label .pip{inline-size:16px;block-size:16px}
    .ledger__value{font:600 30px/1 var(--font-serif)}
    .ledger__sum{display:flex;align-items:baseline;justify-content:space-between;margin-block-start:var(--space-3xs);padding-block-start:var(--space-xs);border-block-start:2px solid var(--ivory)}
    .ledger__total{font:900 56px/.8 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.04em}
    .ledger__note{margin-block-start:var(--space-s);color:var(--text-3);font-size:var(--fs-15);line-height:1.45}
  }
  /* the leaders draw in once after load; drawn statically when motion is off */
  @keyframes ledger-draw{to{stroke-dashoffset:0}}
  @media (prefers-reduced-motion:no-preference){
    html:not([data-motion="off"]) .ledger__path{stroke-dasharray:1;stroke-dashoffset:1;animation:ledger-draw 900ms var(--ease-out) 500ms forwards}
    html:not([data-motion="off"]) .ledger__path--2{animation-delay:700ms}
    html:not([data-motion="off"]) .ledger__dot{opacity:0;animation:fade-in var(--dur-2) linear 400ms forwards}
    html:not([data-motion="off"]) .ledger__dot--2{animation-delay:600ms}
    html:not([data-motion="off"]) .ledger.is-drawn :is(.ledger__path,.ledger__dot){stroke-dasharray:none;opacity:1;animation:none}
  }

  /* the back panel */
  .home-panel{display:flex;flex-direction:column;gap:var(--space-l);min-inline-size:0}
  .home-panel__intro{display:flex;flex-direction:column;gap:var(--space-s)}
  .home-title{font:400 clamp(40px,5vw,72px)/.95 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.025em;text-wrap:balance}
  .home-title em{font-style:italic;font-weight:300}
  .home-lead{max-inline-size:34ch;color:var(--text-2);font-size:19px;line-height:1.5}
  .inbox__head{padding-block-end:var(--space-xs);color:var(--text-3)}
  .inbox__list{display:flex;flex-direction:column;border-block-end:1px solid var(--hair)}
  .inbox{container-type:inline-size}
  .inbox__list li{display:flex;align-items:center;gap:var(--space-xs);min-block-size:48px;border-block-start:1px solid var(--hair)}
  .inbox__list .pip{inline-size:16px;block-size:16px}
  .inbox__soon{margin-inline-start:auto;padding-inline-start:var(--space-2xs);color:var(--text-2);font-size:var(--fs-14);line-height:var(--lh-14);font-weight:500;white-space:nowrap}
  /* a narrow panel has no room for the tag beside its label: the tag drops under the label instead of breaking it */
  @container (max-width:383.98px){
    .inbox__list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--space-3xs) var(--space-xs);padding-block:var(--space-2xs)}
    .inbox__soon{grid-column:2;justify-self:start;margin-inline-start:0;padding-inline-start:0}
  }
  .home-panel__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-s) var(--space-l)}

  @media (max-width:639.98px){
    .home-hero{max-inline-size:calc(480px + 2 * var(--gutter))}
  }
  @media (max-width:767.98px){
    .home-hero{--flap:48px}
    .tuck{inline-size:100%}
    .tuck__flap{inset-block-start:8px;block-size:40px}
    .tuck__peek{inline-size:80px;block-size:120px}
    .tuck__peek--back{rotate:-4deg}
    .tuck__peek--ace{rotate:4deg}
    .tuck__rank{font-size:22px}
    .tuck__peek--ace .pip{inline-size:14px;block-size:14px}
    .home-panel{gap:var(--space-m)}
    .home-panel__cta{flex-direction:column;align-items:stretch;gap:var(--space-s);margin-block-start:var(--space-2xs)}
    .home-panel__cta .btn{inline-size:100%}
    .home-panel__cta .link{align-self:flex-start}
  }
  /* from 640px the box and the back panel sit side by side, edges on the gutters like every section below;
     the panel keeps the room its longest list line needs (pip + gap + label = 288px), the box takes the rest */
  @media (min-width:640px){
    .home-hero{grid-template-columns:minmax(0,1fr) minmax(288px,1fr);column-gap:var(--gap-out);align-items:center}
  }
  /* the narrowest two-column box: the equation steps down a size so it stays on one line */
  @media (min-width:640px) and (max-width:767.98px){
    .home-eq{font-size:26px}
    .home-eq .pip{inline-size:18px;block-size:18px}
  }
  /* the box column is exactly the box (height-capped), and the panel takes the rest of the row */
  @media (min-width:1024px){
    .home-hero{grid-template-columns:minmax(0,min(500px,var(--tuck-fit))) minmax(440px,1fr);align-items:end}
    .home-panel{padding-block-end:var(--space-3xs)}
  }
  /* box · leader callouts · panel. --ledger-fit is the callout column the leaders need (they end 13.6% of the
     box past it, then 196px of rows) plus 48px of air; on short screens the height-capped box leaves surplus
     beyond that, and the panel column takes it instead of a dead band opening between the callouts and the panel */
  @media (min-width:1200px){
    .home-hero{--tuck-col:min(500px,var(--tuck-fit));--ledger-fit:calc(var(--tuck-col) * .136 + 196px + var(--space-xl));grid-template-columns:minmax(0,var(--tuck-col)) minmax(256px,1fr) minmax(0,max(440px,calc(100% - 2 * var(--col-gap) - var(--tuck-col) - var(--ledger-fit))));column-gap:var(--col-gap)}
    .home-panel{grid-column:3}
  }

  /* ───────── 3. pocket contents ───────── */
  .pockets{padding-block:calc(var(--section) * .7) var(--section)}
  .pockets__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)}
  .pockets__title{line-height:1}
  .pockets__sub{max-inline-size:36ch;color:var(--text-2)}

  .pile{position:relative;isolation:isolate}
  .pile__item{display:block;translate:var(--ox,0px) calc(var(--oy,0px) + var(--lift,0px));rotate:var(--r,0deg)}
  .pile__decor{position:relative}

  /* door objects: one header line, one act figure, one line */
  .door{inline-size:var(--w,300px);color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .door:hover{color:inherit}
  .door:focus-visible{outline:2px solid var(--citron);outline-offset:4px;rotate:0deg}
  .door--slip,.door--tab{filter:var(--drop)}
  .door__stock{display:flex;flex-direction:column}
  .door__copy{color:var(--fg-2);font-size:var(--fs-15);font-weight:500;line-height:1.45;text-wrap:pretty}
  .door__foot{display:flex;align-items:center;justify-content:space-between;margin-block-start:auto;font-size:var(--fs-15);font-weight:600;line-height:1}
  .door__foot .i{inline-size:18px;block-size:18px}

  .slip{--grain:.1;gap:var(--gap-compact);min-block-size:340px;padding:calc(var(--pad-compact) + 8px) var(--pad-compact) var(--pad-compact)}
  .slip__top{display:flex;justify-content:space-between;gap:var(--space-xs)}
  .slip__serial{color:var(--red)}
  .slip__figure{margin-block-start:var(--space-3xs);font-size:116px;line-height:.8;letter-spacing:-.05em}

  .member{position:relative;aspect-ratio:1.586;gap:var(--space-2xs);padding:var(--pad-compact);overflow:hidden;border-radius:var(--r-member);background-image:repeating-radial-gradient(circle at 115% -20%,rgb(220 237 146 / .08) 0 1px,transparent 1px 7px);box-shadow:inset 0 0 0 1px rgb(245 239 223 / .12),var(--shadow-lift)}
  .member__top{display:flex;align-items:flex-start;justify-content:space-between}
  .member__head{letter-spacing:.14em}
  .member__moon{inline-size:32px;block-size:32px;color:var(--citron)}
  .member__figure{margin-block-start:auto;font-size:72px;line-height:.85;letter-spacing:-.04em}
  .member__holo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgb(220 237 146 / .45),transparent 45%);mix-blend-mode:color-dodge;transition:opacity var(--dur-2) var(--ease-out)}

  .housetab{--grain:.1;gap:var(--space-xs);min-block-size:388px;padding:var(--space-xl) var(--pad-compact) calc(var(--pad-compact) + 12px)}
  .housetab__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-xs)}
  .housetab__serial{color:var(--fg-2);font:400 var(--fs-14)/1 var(--font-mono)}
  .housetab__figure{font-size:64px;line-height:.85;letter-spacing:-.04em}
  .housetab__leaders{gap:6px}
  .housetab__foot{padding-block-start:var(--space-xs);border-block-start:3px double var(--fg)}

  .rulecard{--grain:.1;gap:var(--gap-compact);min-block-size:300px;padding:var(--space-s);border-radius:var(--r-rulecard);box-shadow:var(--shadow-rest)}
  .rulecard__frame{display:block;margin:var(--space-3xs);overflow:hidden;border:1px solid rgb(20 10 15 / .3);outline:1px solid rgb(20 10 15 / .3);outline-offset:3px;border-radius:4px}
  .rulecard__frame img{inline-size:100%;block-size:104px;object-fit:cover}
  .rulecard__head{margin-block-start:6px}
  .rulecard__figure{font-size:56px;line-height:.85;letter-spacing:-.03em}

  /* decor: aria-hidden, never focusable */
  .decor-ace{--pip-black:var(--bar);display:flex;flex-direction:column;justify-content:space-between;inline-size:168px;block-size:236px;padding:var(--space-xs);border-radius:var(--r-key);background-color:var(--ivory);color:var(--bar);box-shadow:var(--shadow-rest)}
  .decor-ace__index{display:flex;flex-direction:column;align-items:center;gap:2px;inline-size:24px;font:600 24px/1 var(--font-serif)}
  .decor-ace__index .pip{inline-size:14px;block-size:14px}
  .decor-ace__index--end{align-self:flex-end;rotate:180deg}
  .decor-ace img{align-self:center;inline-size:112px;block-size:112px}
  .decor-book{display:flex;flex-direction:column;inline-size:132px;block-size:196px;overflow:hidden;border-radius:4px;background-color:var(--cover);background-image:radial-gradient(rgb(220 237 146 / .3) 1.5px,transparent 1.6px);background-size:6px 6px;box-shadow:var(--shadow-rest)}
  .decor-book__face{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
  .decor-book__mark{color:var(--citron);font:900 34px/.9 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em;text-align:center}
  .decor-book__tag{color:var(--ivory);font:italic 400 14px/1 var(--font-serif)}
  .decor-book__striker{block-size:30px;border-block-start:1px solid rgb(245 239 223 / .2);background-color:var(--chip-ink)}
  .decor-chips{inline-size:120px;block-size:96px}
  .decor-chips .chip{--chip:64px;position:absolute;box-shadow:inset 0 0 0 1.5px var(--chip-edge),0 2px 0 rgb(10 4 8 / .45),0 10px 16px -8px rgb(10 4 8 / .8)}
  .decor-chips .chip:nth-child(1){inset-inline-start:0;inset-block-start:18px}
  .decor-chips .chip:nth-child(2){inset-inline-start:26px;inset-block-start:0}
  .decor-chips .chip:nth-child(3){inset-inline-start:52px;inset-block-start:28px}

  /* phones: an overlapping alternating column; the ace is the only decor */
  @media (max-width:639.98px){
    .pile{display:flex;flex-direction:column;align-items:flex-start;padding-block-end:var(--space-s)}
    .pile__decor{display:none}
    .decor-ace{position:absolute;z-index:0;inset-block-start:48px;inset-inline-end:0;display:flex;inline-size:120px;block-size:168px;--r:4deg}
    .decor-ace img{inline-size:72px;block-size:72px}
    .decor-ace__index{font-size:20px}
    .decor-ace__index .pip{inline-size:12px;block-size:12px}
    .door{--w:min(300px,78vw);position:relative}
    .door+.door{margin-block-start:var(--tuck-s)}
    .door--slip{z-index:1;--r:-2deg}
    .door--member{z-index:2;--ox:40px;--r:2deg}
    .door--tab{z-index:3;--r:-2deg}
    .door--rule{z-index:4;--ox:40px;--r:2deg}
    /* each tuck lands on blank paper: the stock below an overlap keeps a deeper bottom margin */
    .slip{min-block-size:300px;padding-block-end:calc(var(--pad-compact) + var(--space-m))}
    /* clip (not hidden) keeps the card's content-based minimum height, so narrow phones grow the card instead of cutting the copy */
    .member{padding-block-end:calc(var(--pad-compact) + var(--space-m));overflow:clip}
    .member__figure{font-size:64px}
    .housetab{min-block-size:0;padding-block-end:calc(var(--pad-compact) + var(--space-l))}
    .rulecard{min-block-size:0;gap:var(--space-xs)}
    .rulecard__frame img{block-size:120px}
  }

  /* tablets: two loose columns with the ace tucked between them */
  @media (min-width:640px) and (max-width:1023.98px){
    .pile{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;align-items:start;gap:var(--gap-out) clamp(var(--gap-out),8vw,var(--space-3xl));padding-block-end:var(--space-xl)}
    .pile__decor{display:none}
    .decor-ace{position:absolute;z-index:0;inset-block-start:50%;inset-inline-start:50%;display:flex;--ox:-50%;--oy:-30%;--r:8deg}
    .door{position:relative;z-index:1}
    .door--slip{--w:clamp(240px,34vw,264px);--r:-2deg}
    .door--member{--w:clamp(280px,40vw,320px);--r:3deg;--oy:var(--space-2xl);align-self:start}
    .door--tab{--w:232px;--r:2deg;justify-self:end}
    .door--rule{--w:212px;--r:-3deg;--oy:calc(var(--space-2xl) * -1 + var(--space-l))}
  }

  /* desktop: the throw pile. Doors keep their own lanes, so no header or figure is ever covered;
     decor lies underneath. Three arrangements (data-arr, picked by day of year in an inline script). */
  @media (min-width:1024px){
    .pile{--w1:clamp(216px,20.6vw,264px);--w2:clamp(272px,27.5vw,352px);--w3:clamp(216px,18.1vw,232px);--w4:clamp(170px,16.6vw,212px);--free:calc(100% - var(--w1) - var(--w2) - var(--w3) - var(--w4));block-size:640px}
    .pile__item{position:absolute;z-index:var(--z,1);inset-block-start:var(--y,0px);inset-inline-start:var(--x,0px);translate:var(--dx,0px) calc(var(--dy,0px) + var(--lift,0px));scale:var(--s,1);transition:translate var(--dur-2) var(--ease-out),rotate var(--dur-4) var(--ease-settle),scale var(--dur-2) var(--ease-out),filter var(--dur-2) var(--ease-out)}
    .pile__decor{--z:0}
    .door{--z:2}
    .door--slip{--w:var(--w1);--x:calc(var(--free) * .05)}
    .door--member{--w:var(--w2);--x:calc(var(--free) * .25 + var(--w1))}
    .door--tab{--w:var(--w3);--x:calc(var(--free) * .45 + var(--w1) + var(--w2))}
    .door--rule{--w:var(--w4);--x:calc(var(--free) * .8 + var(--w1) + var(--w2) + var(--w3))}
    .door:hover{--lift:-4px}
    .door:focus-visible{--lift:0px}
    /* each arrangement ends about 40px under its lowest object, so the pitch line follows at the same distance */
    .pile[data-arr="1"]{block-size:600px}
    .pile[data-arr="2"]{block-size:676px}

    /* arrangement 0: the board */
    .pile:not([data-arr="1"]):not([data-arr="2"]) .door--slip{--y:72px;--r:-4deg}
    .pile:not([data-arr="1"]):not([data-arr="2"]) .door--member{--y:24px;--r:3deg}
    .pile:not([data-arr="1"]):not([data-arr="2"]) .door--tab{--y:96px;--r:-2deg}
    .pile:not([data-arr="1"]):not([data-arr="2"]) .door--rule{--y:40px;--r:4deg}
    .pile:not([data-arr="1"]):not([data-arr="2"]) .decor-ace{--x:17%;--y:352px;--r:8deg}
    .pile:not([data-arr="1"]):not([data-arr="2"]) .decor-book{--x:44%;--y:392px;--r:-8deg}
    .pile:not([data-arr="1"]):not([data-arr="2"]) .decor-chips{--x:72%;--y:468px}
    .pile[data-arr="1"] .door--slip{--y:24px;--r:-2deg}
    .pile[data-arr="1"] .door--member{--y:128px;--r:-4deg}
    .pile[data-arr="1"] .door--tab{--y:40px;--r:2deg}
    .pile[data-arr="1"] .door--rule{--y:112px;--r:-2deg}
    .pile[data-arr="1"] .decor-ace{--x:29%;--y:316px;--r:-4deg}
    .pile[data-arr="1"] .decor-book{--x:4%;--y:340px;--r:8deg}
    .pile[data-arr="1"] .decor-chips{--x:84%;--y:396px}
    .pile[data-arr="2"] .door--slip{--y:40px;--r:4deg}
    .pile[data-arr="2"] .door--member{--y:296px;--r:-2deg}
    .pile[data-arr="2"] .door--tab{--y:24px;--r:-4deg}
    .pile[data-arr="2"] .door--rule{--y:150px;--r:2deg}
    .pile[data-arr="2"] .decor-ace{--x:33%;--y:24px;--r:-8deg}
    .pile[data-arr="2"] .decor-book{--x:60%;--y:432px;--r:8deg}
    .pile[data-arr="2"] .decor-chips{--x:6%;--y:464px}
  }
  /* dragging (home.js; fine pointer only) */
  @media (min-width:1024px) and (hover:hover) and (pointer:fine){
    .pile.is-draggable .pile__item{cursor:grab;-webkit-user-select:none;user-select:none}
    .pile .pile__item.is-held{rotate:0deg;scale:1.04;cursor:grabbing;transition:translate 0s,rotate var(--dur-2) var(--ease-out),scale var(--dur-2) var(--ease-out),filter var(--dur-2) var(--ease-out)}
    .pile .pile__item.is-held:is(.door--slip,.door--tab){filter:drop-shadow(0 18px 18px rgb(0 0 0 / .5))}
    .pile .pile__item.is-held:is(.door--member,.door--rule) .door__stock,.pile .pile__item.is-held.pile__decor>*:not(.chip){box-shadow:var(--shadow-lift)}
    .pile.is-dragging{cursor:grabbing}
  }
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    html:not([data-motion="off"]) .door--member:hover .member__holo{opacity:1}
  }

  .home-pitch{margin-block-start:var(--gap-out);margin-inline-start:clamp(0px,8.33%,112px);max-inline-size:36ch;font:300 clamp(28px,3vw,42px)/1.16 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.01em;text-wrap:pretty}
  /* inline padding grows the hit area to 44px without touching the line layout */
  .home-pitch a{margin-inline:-2px;padding:6px 2px;color:var(--ivory);text-decoration:underline;text-decoration-color:var(--citron);text-decoration-thickness:3px;text-underline-offset:.14em}
  .home-pitch a:hover{color:var(--citron)}
  @media (max-width:639.98px){.home-pitch{margin-inline-start:0}}

  /* ───────── 4. the week's draw: the mini raffle poster ───────── */
  .draw{padding-block:0 var(--section)}
  .draw__inner{display:flex;flex-direction:column;gap:var(--gap-out)}
  .draw__art{position:relative;min-inline-size:0}
  .draw__frame{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-paper);background-color:var(--cover);box-shadow:var(--shadow-lift)}
  .draw__frame img{inline-size:100%;block-size:100%;object-fit:cover}
  .draw__rule{position:absolute;pointer-events:none}
  .draw__rule--outer{inset:14px;border:1px solid rgb(245 239 223 / .7);border-radius:var(--r-paper)}
  .draw__rule--inner{inset:20px;border:1px solid rgb(245 239 223 / .35)}
  /* the stamp sits on the plain oxblood corner of the art, on a dark wash so it reads at any size */
  .draw__stamp{--stamp-rot:-8deg;position:absolute;z-index:1;inset-block-start:calc(var(--space-l) + var(--space-2xs));inset-inline-start:calc(var(--space-l) + var(--space-2xs));block-size:40px;padding-inline:20px;background-color:rgb(20 10 15 / .5);font-size:15px}
  .draw__type{min-inline-size:0;display:flex;flex-direction:column;gap:var(--space-m)}
  .draw__head{display:flex;flex-direction:column;gap:var(--space-xs)}
  .draw__serial{color:var(--text-3)}
  .draw__title{line-height:1}
  .draw__big{font:italic 400 var(--fs-h1)/.95 var(--font-serif);letter-spacing:-.02em}
  .draw__big em{font-weight:300}
  .draw__facts{max-inline-size:44ch;color:var(--text-2)}
  .draw__type>.link{align-self:flex-start}
  /* tablets: the poster runs full width and its caption splits in two under it (headline | countdown, facts, link) */
  @media (min-width:640px) and (max-width:1023.98px){
    .draw__type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"head dater" "big facts" "big link";align-items:start;gap:var(--space-m) var(--gap-out)}
    .draw__head{grid-area:head}
    .draw__big{grid-area:big}
    .draw__dater{grid-area:dater}
    .draw__facts{grid-area:facts}
    .draw__type>.link{grid-area:link;justify-self:start}
  }
  /* desktop: poster and caption side by side; the caption column is wide enough to keep the headline on one line */
  @media (min-width:1024px){
    .draw__inner{flex-direction:row;align-items:center}
    .draw__art{flex:2 1 470px}
    .draw__type{flex:1 1 450px}
  }
  @media (max-width:639.98px){
    .draw__inner{gap:var(--space-l)}
    .draw__rule--outer{inset:12px}
    .draw__rule--inner{inset:16px}
    /* on phones the moon reaches the top-left corner, so the stamp moves to the plain bottom-left */
    .draw__stamp{inset-block:auto var(--space-l);inset-inline-start:var(--space-m);padding-inline:var(--space-s)}
  }

  /* ───────── motion off / reduced motion: no parallax, no drift, no holo, no settle ───────── */
  @media (prefers-reduced-motion:reduce){
    .tuck__art,.tuck__mark{translate:none;transition:none}
    .pile__item,.pile .pile__item.is-held{transition:opacity var(--dur-1) linear}
    .member__holo{display:none}
  }
  html[data-motion="off"] :is(.tuck__art,.tuck__mark){translate:none;transition:none}
  html[data-motion="off"] :is(.pile__item,.pile .pile__item.is-held){transition:opacity var(--dur-1) linear}
  html[data-motion="off"] .member__holo{display:none}
}