/* Foolish Form — the deck. Every piece is a card on the table. */
@font-face{font-family:"Cinzel";src:url("../fonts/cinzel-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cinzel";src:url("../fonts/cinzel-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("../fonts/eb-garamond-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --felt:#1c1613;
  --felt-hi:#2a211c;
  --velvet:#5c130e;
  --velvet-deep:#2a0806;
  --card:#f6eedc;
  --card-edge:#d6c39c;
  --ink:#2a120d;
  --crimson:#8e1f16;
  --crimson-deep:#661209;
  --gold:#c9a24a;
  --gold-hi:#e6c779;
  --chalk:#efe4cc;
  --chalk-dim:#c4b393;
  --display:"Cinzel","Times New Roman",serif;
  --text:"EB Garamond",Garamond,Georgia,serif;
  --wrap:1200px;
  --gutter:clamp(16px,4vw,40px);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --harlequin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='80'%3E%3Cpath d='M24 0 48 40 24 80 0 40Z' fill='%23c9a24a' fill-opacity='.035'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--felt);background-image:var(--noise),var(--harlequin);color:var(--chalk);font-family:var(--text);font-size:clamp(18px,1.05rem + .2vw,20px);line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold-hi);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:8px 14px;z-index:60}
.skip:focus{left:8px;top:8px}
.s-red{color:var(--crimson)}
.s-blk{color:var(--ink)}

/* ── top bar ── */
.bar{position:sticky;top:0;z-index:40;background:rgba(20,15,12,.96);border-bottom:1px solid rgba(201,162,74,.35)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.bar .mark img{height:38px;width:auto}
.nav{display:flex;gap:clamp(12px,3vw,34px);list-style:none;margin:0;padding:0}
.nav a{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk);text-decoration:none;padding:10px 0;white-space:nowrap}
.nav a span{color:var(--gold);margin-right:6px}
.nav a:hover{color:var(--gold-hi)}

/* ── stage: red velvet, a hand of cards with the Joker in front ── */
.stage{position:relative;overflow:hidden;text-align:center;padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,76px);
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%,rgba(255,190,120,.22),transparent 70%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 2px,transparent 2px 46px,rgba(255,255,255,.035) 46px 50px,transparent 50px 92px),
    radial-gradient(ellipse at 50% 30%,#7a1a12 0%,var(--velvet) 42%,var(--velvet-deep) 100%);
  border-bottom:3px double var(--gold)}
.stage::after{content:"";position:absolute;inset:0;background:var(--noise);opacity:.5;pointer-events:none}
.stage > *{position:relative;z-index:1}

.hand{--cw:clamp(170px,26vw,330px);position:relative;height:calc(var(--cw) * 1.4 + 60px);margin:0 auto;max-width:980px}
.hand .pc,.hand .joker{position:absolute;left:50%;top:30px;width:var(--cw);margin-left:calc(var(--cw) / -2);transform-origin:50% 115%}
.hand .pc{animation:deal .9s cubic-bezier(.2,.8,.2,1.1) both}
.hand .pc:nth-child(1){--r:-26deg;--x:-40%;animation-delay:.15s}
.hand .pc:nth-child(2){--r:-13deg;--x:-20%;animation-delay:.25s}
.hand .pc:nth-child(3){--r:13deg;--x:20%;animation-delay:.35s}
.hand .pc:nth-child(4){--r:26deg;--x:40%;animation-delay:.45s}
.hand .pc{translate:var(--x) 0;rotate:var(--r);transition:transform .3s}
.hand .pc:hover{transform:translateY(-16px)}
@keyframes deal{from{translate:0 40px;rotate:0deg;opacity:0}to{translate:var(--x) 0;rotate:var(--r);opacity:1}}
.joker{z-index:5;animation:joker 1s cubic-bezier(.2,.8,.2,1.05) both}
@keyframes joker{from{transform:translateY(-30px) rotate(-8deg) scale(.92);opacity:0}to{transform:none;opacity:1}}

.stage-copy{max-width:640px;margin:clamp(10px,2vw,24px) auto 0;padding:0 var(--gutter)}
.descriptor{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--gold)}
.descriptor::before,.descriptor::after{content:"";flex:1;max-width:120px;height:5px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.8}
.descriptor span{font-family:var(--display);font-weight:500;font-size:clamp(12.5px,1.5vw,16px);letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;white-space:nowrap}
.lede{font-size:clamp(21px,2.3vw,27px);line-height:1.35;margin:16px auto 0;color:var(--chalk);text-wrap:balance}
.lede em{display:block;color:var(--gold-hi)}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 26px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-radius:3px;cursor:pointer;border:1px solid var(--gold)}
.btn-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--ink);box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}
.btn-gold:hover{background:var(--gold-hi);color:var(--ink)}
.btn-line{background:transparent;color:var(--chalk)}
.btn-line:hover{background:rgba(201,162,74,.15);color:var(--gold-hi)}
.honest{margin:20px auto 0;font-style:italic;font-size:17px;color:var(--chalk-dim);text-wrap:balance}

/* ── the playing card ── */
.pc{list-style:none;container-type:inline-size;--u:1cqw}
.joker{container-type:inline-size;--u:1cqw}
.pc > a,.joker{position:relative;display:block;aspect-ratio:5/7;background:var(--card);border-radius:calc(var(--u)*4.5);border:1px solid var(--card-edge);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 3px rgba(0,0,0,.35),0 18px 30px -12px rgba(0,0,0,.7);text-decoration:none;color:var(--ink);overflow:hidden}
.pc > a{cursor:zoom-in}
.pc > a::before,.joker::before{content:"";position:absolute;inset:calc(var(--u)*3.2);border:1px solid var(--crimson);outline:1px solid var(--crimson);outline-offset:calc(var(--u)*-1.6);border-radius:calc(var(--u)*2.6);opacity:.75;pointer-events:none;z-index:2}
.idx{position:absolute;z-index:3;top:calc(var(--u)*5.2);left:calc(var(--u)*4.6);width:calc(var(--u)*11);display:flex;flex-direction:column;align-items:center;font-family:var(--display);font-weight:700;line-height:1}
.idx b{font-size:calc(var(--u)*10);letter-spacing:-.04em}
.idx i{font-style:normal;font-size:calc(var(--u)*9);margin-top:calc(var(--u)*.6)}
.idx.br{top:auto;left:auto;bottom:calc(var(--u)*5.2);right:calc(var(--u)*4.6);transform:rotate(180deg)}
.win{position:absolute;z-index:1;top:7.5%;bottom:21.5%;left:16.5%;right:16.5%;overflow:hidden;border-radius:calc(var(--u)*1.6);background:#2b221d;box-shadow:0 0 0 1px rgba(42,18,13,.25)}
.win .fill{position:absolute;inset:-12%;background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(14px) saturate(.9) brightness(.8)}
.win img{position:relative;width:100%;height:100%;object-fit:contain}
.label{position:absolute;z-index:3;left:19%;right:19%;top:80.4%;text-align:center;line-height:1.12}
.label .name{display:block;font-family:var(--display);font-weight:700;font-size:clamp(8.5px,calc(var(--u)*5),14px);letter-spacing:.06em;text-transform:uppercase;text-wrap:balance}
.label .finish{display:block;font-style:italic;font-size:clamp(10.5px,calc(var(--u)*5.4),15px);color:#6a4a3a;margin-top:1px}

/* the Joker: the logo card */
.joker .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8% 13.5%;z-index:1;
  background:radial-gradient(ellipse at 50% 45%,#fffaf0 0%,var(--card) 60%,#eadcbc 100%)}
.joker .face img{width:100%;height:auto}
.jidx{position:absolute;z-index:3;top:calc(var(--u)*5.5);left:calc(var(--u)*4.5);width:calc(var(--u)*11);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.4)}
.jidx img{width:calc(var(--u)*10.5);height:auto}
.jidx span{font-family:var(--display);font-weight:700;font-size:calc(var(--u)*6.6);line-height:1.02;color:var(--crimson-deep)}
.jidx.br{top:auto;left:auto;bottom:calc(var(--u)*5.5);right:calc(var(--u)*4.5);transform:rotate(180deg)}

/* ── suit index: four ways into the deck ── */
.suits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,22px);margin:clamp(34px,5vw,56px) auto 0}
.suits a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid rgba(201,162,74,.45);border-radius:6px;text-decoration:none;color:var(--chalk);background:rgba(255,255,255,.02);transition:background .2s,transform .2s}
.suits a:hover{background:rgba(201,162,74,.1);transform:translateY(-2px)}
.suits .big{font-size:40px;line-height:1;color:var(--gold)}
.suits .big.red{color:#d24a3a}
.suits strong{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.suits small{display:block;font-style:italic;font-size:15px;color:var(--chalk-dim)}

/* ── the table ── */
.table{padding:clamp(28px,4vw,48px) 0 clamp(20px,3vw,40px)}
.suit{padding-bottom:clamp(56px,7vw,96px);scroll-margin-top:70px}
.suit-head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:clamp(14px,3vw,30px);margin-bottom:clamp(26px,4vw,44px);padding-bottom:16px;border-bottom:1px solid rgba(201,162,74,.3)}
.suit-head .glyph{font-size:clamp(64px,9vw,110px);line-height:.8;color:var(--chalk)}
.suit-head .glyph.red{color:#c63d2e}
.suit-head .kicker{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0}
.suit-head h2{font-family:var(--text);font-weight:400;font-style:italic;font-size:clamp(30px,3.8vw,48px);line-height:1.1;margin:6px 0 4px;color:var(--chalk)}
.suit-head p{margin:0;color:var(--chalk-dim)}
.shuffle{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);background:transparent;border:1px solid rgba(201,162,74,.6);border-radius:3px;padding:10px 14px;min-height:44px;cursor:pointer;display:none}
.js .shuffle{display:inline-block}
.shuffle:hover{background:rgba(201,162,74,.12)}

/* flex, not grid, so a short last row sits centered on the table */
.deck{--cols:4;--gx:clamp(16px,2.4vw,32px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(22px,3vw,40px) var(--gx);margin:0;padding:0}
.deck .pc{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols));min-width:0}
.deck .pc.wide{flex-basis:calc(2 * (100% - (var(--cols) - 1) * var(--gx)) / var(--cols) + var(--gx))}
.deck .pc{transform:rotate(var(--t,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.deck .pc:hover,.deck .pc:focus-within{transform:rotate(0) translateY(-8px) scale(1.03);z-index:2}
.deck .pc.wide{--u:.49cqw}
.deck .pc.wide > a{aspect-ratio:10.4/7}
.deck .pc.wide .win{left:9%;right:9%}
.deck.shuffling .pc{transition:transform .45s cubic-bezier(.3,1.4,.4,1)}

/* ── the dealer ── */
.dealer{padding:clamp(20px,4vw,40px) 0 clamp(56px,7vw,96px)}
.dealer .sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;background:var(--card);color:var(--ink);border-radius:14px;padding:clamp(22px,4vw,48px);transform:rotate(-.6deg);box-shadow:0 30px 50px -20px rgba(0,0,0,.8);position:relative}
.dealer .sheet::before{content:"";position:absolute;inset:10px;border:1px solid var(--crimson);outline:1px solid var(--crimson);outline-offset:-5px;border-radius:9px;opacity:.7;pointer-events:none}
.dealer figure{margin:0}
.dealer figure img{border-radius:4px}
.dealer figcaption{font-style:italic;font-size:16px;color:#6a4a3a;margin-top:8px}
.dealer h2,.contact h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.7vw,34px);letter-spacing:.07em;text-transform:uppercase;margin:0 0 16px;color:var(--ink)}
.dealer p{margin:0 0 14px;max-width:44ch}
.dealer blockquote{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--card-edge);font-style:italic;font-size:clamp(22px,2.3vw,28px);line-height:1.3;color:var(--crimson);max-width:26ch}

/* ── contact: a business card on the table ── */
.contact{padding:0 0 clamp(64px,8vw,110px);scroll-margin-top:70px}
.bcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);background:var(--card);color:var(--ink);border-radius:14px;padding:clamp(26px,4.5vw,54px);transform:rotate(.5deg);box-shadow:0 30px 50px -20px rgba(0,0,0,.8);position:relative}
.bcard::before{content:"";position:absolute;inset:10px;border:1px solid var(--crimson);outline:1px solid var(--crimson);outline-offset:-5px;border-radius:9px;opacity:.7;pointer-events:none}
.bcard > *{position:relative}
.who{color:var(--crimson-deep)!important}
.rule{display:flex;align-items:center;gap:10px;color:var(--crimson);max-width:260px;margin:4px 0 18px}
.rule::before,.rule::after{content:"";flex:1;height:5px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.7}
.rule i{width:8px;height:8px;background:currentColor;transform:rotate(45deg)}
.reach{list-style:none;margin:0;padding:0;font-size:clamp(20px,2vw,23px)}
.reach li{margin:0 0 8px}
.reach a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--card-edge)}
.reach a:hover{color:var(--crimson);border-color:var(--crimson)}
.note{color:#6a4a3a;margin:16px 0 0;max-width:34ch}
.signup h3{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.signup p{margin:0 0 14px;color:#6a4a3a}
.signup label{display:block;font-size:16px;margin-bottom:6px}
.field{display:flex;gap:10px;flex-wrap:wrap}
.field input[type=email]{flex:1 1 220px;min-height:50px;padding:10px 14px;font:inherit;font-size:18px;color:var(--ink);background:#fffdf6;border:1px solid #bfa77a;border-radius:3px}
.field input[type=email]:focus{outline:2px solid var(--crimson);outline-offset:1px}
.field .btn{background:var(--crimson);border-color:var(--crimson);color:#fbf1e2}
.field .btn:hover{background:var(--crimson-deep)}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:1.5em;margin:10px 0 0;font-style:italic}
.form-msg.ok{color:#2f5a2a}.form-msg.err{color:var(--crimson)}

.foot{border-top:1px solid rgba(201,162,74,.3);padding:30px 0 40px;text-align:center;color:var(--chalk-dim);font-size:16px}
.foot img{height:46px;width:auto;margin:0 auto 10px}
.foot p{margin:2px 0}

/* ── lightbox ── */
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:#100b09;color:var(--chalk)}
.lightbox::backdrop{background:#100b09}
.lb-stage{position:absolute;inset:56px 64px 116px;display:flex;align-items:center;justify-content:center}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lb-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;padding:0 70px}
.lb-cap .card{font-family:var(--display);font-weight:700;color:var(--gold);margin-right:8px}
.lb-cap .name{font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:15px}
.lb-cap .finish{font-style:italic;color:var(--chalk-dim);margin-left:6px}
.lb-cap a{display:inline-block;margin-top:8px;color:var(--gold-hi);font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;min-height:32px;padding-top:6px}
.lb-btn{position:absolute;background:transparent;border:1px solid rgba(239,228,204,.35);color:var(--chalk);width:48px;height:48px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-btn:hover{border-color:var(--chalk)}
.lb-close{top:10px;right:12px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lb-next{right:10px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;top:22px;left:20px;font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--chalk-dim)}

/* ── smaller screens ── */
@media (max-width:1000px){
  .deck{--cols:3}
}
@media (max-width:900px){
  .suits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dealer .sheet,.bcard{grid-template-columns:1fr;transform:none}
}
@media (max-width:640px){
  .bar .wrap{height:54px}
  .bar .mark img{height:34px}
  .nav a{font-size:12.5px;letter-spacing:.1em}
  .nav a span{margin-right:3px}
  .hand{--cw:clamp(150px,44vw,210px)}
  .hand .pc:nth-child(1){--r:-22deg;--x:-46%}
  .hand .pc:nth-child(2){--r:-11deg;--x:-24%}
  .hand .pc:nth-child(3){--r:11deg;--x:24%}
  .hand .pc:nth-child(4){--r:22deg;--x:46%}
  .suit-head{grid-template-columns:auto 1fr}
  .suit-head .shuffle{grid-column:1 / -1;justify-self:start}
  .deck{--cols:2;--gx:14px;row-gap:22px}
  .suits a{padding:12px}
  .suits .big{font-size:32px}
  .lb-stage{inset:60px 8px 124px}
  .lb-prev,.lb-next{top:auto;bottom:70px;transform:none}
  .lb-cap{padding:0 60px}
}
@media (max-width:420px){
  .descriptor::before,.descriptor::after{display:none}
  .descriptor span{white-space:normal;letter-spacing:.2em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hand .pc,.joker{animation:none}
  .deck .pc,.deck.shuffling .pc{transition:none}
}