/* Generated by build_site.py. The store is a workshop at sunset. */
:root{
  --ground:#F4EEE3;  --paper:#FFFBF4;  --ink:#2B2118;
  --felt:#2F6B4F;    --brass:#B8742A;  --walnut:#6B4226;
  --soft:#6E6054;    --line:#E2D6C3;
  /* the room: deep olive walls, walnut panelling, a dark plank floor */
  --olive:#5B6347;   --olive-lit:#6E7553;  --olive-deep:#3E4632;
  --panel-wood:#4A3122; --panel-line:#5E4130;
  --floor:#2E1F14;    --floor-dark:#241810;
  --linen:#F0E6D2;    /* the label cards and the painted words */
  --case:#7A4D2E;     --case-dark:#4E2F1A;  --case-lite:#8D5C39;
  --brass-lite:#DBA35C; --brass-dark:#8F5518;
  --felt-dark:#255740; --felt-lite:#3C8260;
  --dusk:#2A1B10;     /* the room with the lights down, behind an open drawer */
  --head:Fraunces,Georgia,'Times New Roman',serif;
  --body:'Atkinson Hyperlegible',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:18px;line-height:1.6}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* ---- the wordmark: Corey's logo files, never redrawn ---- */
/* the wordmark is a link home, so it gets a finger-sized target like every other link */
.mark{display:inline-flex;align-items:center;text-decoration:none;line-height:0;min-height:48px}
.mark .logo{height:26px;width:auto;max-width:100%}
.mark:focus-visible{outline:3px solid var(--brass-lite);outline-offset:3px;border-radius:4px}

/* ---- the bar across the top of every page but the room ---- */
.top{background:var(--walnut);color:#FBF3E6;padding:10px 0}
.top .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
.top .mark{padding:4px 0}
.top .mark .logo{height:30px}
.top nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.top nav a{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:999px;
  background:rgba(251,243,230,.12);color:#FBF3E6;text-decoration:none;font-weight:700;font-size:15px}
.top nav a:hover,.top nav a:focus-visible{background:rgba(251,243,230,.26)}

/* ---- Preview as ---- */
.pv{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pv .lbl{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.8}
.pv .row{display:flex;flex-wrap:wrap;gap:6px}
.pv button{font:inherit;font-weight:700;font-size:14px;min-height:44px;padding:0 14px;
  border-radius:999px;cursor:pointer;border:2px solid rgba(251,243,230,.3);
  background:rgba(251,243,230,.1);color:#FBF3E6}
.pv button[aria-pressed=true]{background:var(--felt-lite);border-color:var(--felt-lite);color:#F6FBF7}
.pv button:focus-visible{outline:3px solid var(--brass-lite);outline-offset:2px}
/* on the cream pages the same control sits on paper */
.pv.onpaper .lbl{color:var(--soft);opacity:1}
.pv.onpaper button{border-color:var(--line);background:var(--ground);color:var(--ink)}
.pv.onpaper button[aria-pressed=true]{background:var(--felt);border-color:var(--felt);color:#F6FBF7}

/* ================================================================ THE ROOM
   The workshop, grown up: deep olive walls, walnut panelling along the lower wall, a dark plank
   floor. The wall, the panelling and the floor are three background layers on .room, so the room
   is built in one place and nothing in it can collide with anything in flow on top of it. */
.room{position:relative;overflow:hidden;color:#EFE6D4;
  background:
    repeating-linear-gradient(90deg,var(--floor) 0 108px,var(--floor-dark) 108px 112px)
      left 0 bottom 0/100% 74px no-repeat,
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0 148px,var(--panel-line) 148px 151px,rgba(0,0,0,0) 151px 152px)
      left 0 bottom 74px/100% 172px no-repeat,
    linear-gradient(180deg,#53391F,var(--panel-wood) 16%,#3F2A1C)
      left 0 bottom 74px/100% 172px no-repeat,
    radial-gradient(ellipse 72% 58% at 50% 38%,var(--olive-lit),var(--olive) 58%,var(--olive-deep))}
.room .roombar{padding:14px 0 0;position:relative;z-index:2}
.room .roombar .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  justify-content:flex-end}
.room .roombar nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.room .roombar nav a{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;
  border-radius:999px;text-decoration:none;font-weight:700;font-size:16px;
  color:#F2E9D6;background:rgba(240,230,210,.09);border:1px solid rgba(240,230,210,.22)}
.room .roombar nav a:hover,.room .roombar nav a:focus-visible{background:rgba(240,230,210,.2)}
.room .pv .lbl{color:#DCD2BC;opacity:1}
.room .pv button{border-color:rgba(240,230,210,.28);background:rgba(240,230,210,.1);color:#F2E9D6}
.room .pv button[aria-pressed=true]{background:var(--brass);border-color:var(--brass);color:#2B2118}

/* the room laid out: window, then the cabinet, then the bookshelf wall */
.stage{display:grid;gap:22px;align-items:end;
  grid-template-columns:minmax(130px,200px) minmax(360px,1fr) minmax(150px,215px);
  padding:2px 0 0;position:relative;z-index:1}
.col{display:flex;flex-direction:column;gap:18px}
.col.left{align-items:center}
.col.right{align-items:center}
.col.mid{align-items:center;gap:0}

/* the brass pendant, with its warm glow on the wall behind it */
.lamp{display:flex;flex-direction:column;align-items:center;margin-bottom:4px}
.lamp .cord{width:2px;height:18px;background:#2A2017}
.lamp .shade{width:98px;height:22px;border-radius:50%/0 0 100% 100%;
  background:linear-gradient(180deg,var(--brass-lite),var(--brass) 55%,var(--brass-dark));
  box-shadow:0 1px 0 rgba(255,240,215,.35)}
.lamp .bulb{width:52px;height:12px;border-radius:0 0 26px 26px;margin-top:-3px;
  background:radial-gradient(ellipse at 50% 0,#FFF0C4,#F2D592);
  box-shadow:0 14px 54px 20px rgba(255,214,140,.33)}

/* the wordmark painted straight onto the wall */
.wallmark{display:flex;flex-direction:column;align-items:center;gap:3px;margin:7px 0 0;
  max-width:100%}
.wallmark .logo{width:min(100%,285px);height:auto;display:block;opacity:.96}
/* the small caps run wider than the wordmark, so they keep their own line */
.wallmark .tag{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:rgba(240,230,210,.62);text-align:center;line-height:1.4;white-space:nowrap}
@media (max-width:420px){.wallmark .tag{white-space:normal;letter-spacing:.16em}}

/* the cabinet: the shop itself */
.cabinet{margin-top:10px;width:100%;max-width:545px}
.cabinet .lip{height:14px;border-radius:5px 5px 2px 2px;background:#6A4327;
  box-shadow:0 2px 0 rgba(0,0,0,.3)}
.cabinet .body{background:var(--walnut);border-radius:0 0 4px 4px;padding:9px;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.2),0 14px 30px rgba(0,0,0,.34)}
.drawers{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.drawer a{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;
  color:var(--ink);background:linear-gradient(180deg,var(--case-lite),var(--case));
  border:2px solid var(--case-dark);border-radius:4px;padding:6px 10px 5px;
  box-shadow:inset 0 2px 0 rgba(255,225,190,.14),inset 0 -3px 0 rgba(0,0,0,.22)}
.drawer a:hover,.drawer a:focus-visible{background:linear-gradient(180deg,#9A663F,#84542F);
  outline:3px solid var(--brass-lite);outline-offset:1px}
/* a linen card in a thin brass frame */
.plate{display:block;width:100%;background:var(--linen);border:2px solid var(--brass);
  border-radius:2px;padding:4px 8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.plate .dname{display:block;font-family:var(--head);font-weight:700;font-size:13px;line-height:1.2;
  letter-spacing:.07em;text-transform:uppercase;color:#2B2118}
.plate .dcount{display:block;font-size:11.5px;font-weight:700;color:#7A6A55;margin-top:1px}
.drawer.coming .plate .dcount{color:var(--brass-dark)}
.pull{display:block;width:46px;height:5px;border-radius:3px;
  background:linear-gradient(180deg,var(--brass-lite),var(--brass));
  box-shadow:inset 0 1px 0 rgba(255,240,215,.55),0 1px 2px rgba(0,0,0,.4)}

/* the window and the bookshelf: the room, not the shop */
.art{display:block;width:100%;height:auto}

/* the lower wall: the painted invitation, and the table standing in front of it */
.lower{position:relative;z-index:1;display:grid;gap:22px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  padding:16px 0 0;min-height:150px}
.painted h2{font-family:var(--head);font-weight:700;font-size:clamp(21px,2.6vw,27px);margin:0 0 4px;
  color:#F2E7D2}
.painted p{margin:0;font-size:16px;color:rgba(240,230,210,.7)}

/* the ComTop table: a flat top seen at a slight angle, with the film on its surface */
.comtop{width:100%;max-width:300px;justify-self:end;perspective:760px}
.comtop .slab{display:block;width:100%;aspect-ratio:16/10;padding:9px;border:0;cursor:pointer;
  transform:rotateX(50deg);transform-origin:50% 100%;
  background:linear-gradient(180deg,#5C3C24,#452C1A);border-radius:7px;
  box-shadow:0 26px 40px rgba(0,0,0,.45)}
.comtop .slab .surface{display:block;width:100%;height:100%;position:relative;overflow:hidden;
  border-radius:3px;background:#10161C;box-shadow:inset 0 0 0 2px #27333C}
.comtop .slab video{width:100%;height:100%;object-fit:cover;display:block}
.comtop .slab .ph{position:absolute;inset:0;display:flex;flex-direction:column;gap:4px;
  align-items:center;justify-content:center;color:#9FBAC7;font-size:13px;text-align:center;
  padding:10px;line-height:1.35}
.comtop .slab:hover,.comtop .slab:focus-visible{outline:3px solid var(--brass-lite);
  outline-offset:4px}
.comtop .legs{display:flex;justify-content:space-between;width:74%;margin:-6px auto 0}
.comtop .legs i{display:block;width:13px;height:42px;background:linear-gradient(90deg,#4A3122,#35220F)}
.comtop .cap{margin:4px 0 0;font-size:13px;font-weight:700;text-align:center;
  color:rgba(240,230,210,.64)}

/* ---- See it at the table ---- */
.films{background:var(--ground);padding:46px 0 10px}
.films h2{font-family:var(--head);font-weight:700;font-size:clamp(25px,3.4vw,34px);margin:0 0 8px}
.films .lede{margin:0 0 24px;color:var(--soft);max-width:44em}
.reel{list-style:none;margin:0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.reel li{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.reel .box{aspect-ratio:16/9;background:#1A2128;position:relative;display:flex;
  align-items:center;justify-content:center}
.reel .box video{width:100%;height:100%;object-fit:cover}
.reel .box .ph{color:#A9C2CE;font-size:15px;text-align:center;padding:14px;line-height:1.45}
.reel h3{font-family:var(--head);font-weight:700;font-size:19px;margin:0;padding:13px 16px 15px}
.films .after{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.films .note{margin:14px 0 0;color:var(--soft);font-size:15px;max-width:46em}

/* ================================================================ A DRAWER */
body.drawer-page{background:var(--dusk);color:#F3E9DA}
.drawerbar{padding:16px 0 0}
.drawerbar .wrap{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  justify-content:space-between}
.drawerbar .mark .logo{height:32px}
.drawerbar .side{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.crumbs{margin:12px 0 0;font-size:15px;color:#C9B49A;display:flex;flex-wrap:wrap;
  gap:2px 8px;align-items:center}
.crumbs a{color:#E7D6BC;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.crumbs span{opacity:.6}
.shut{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;
  border:2px solid #9A7B57;background:transparent;color:#F7EEDF}
.shut:hover,.shut:focus-visible{background:rgba(247,238,223,.12);border-color:var(--brass-lite)}

.drawer-grid{display:grid;gap:24px;align-items:start;margin:14px 0 0;
  grid-template-columns:minmax(0,1fr) minmax(290px,345px)}
/* the drawer: walnut carcase, green felt lining */
.open-drawer{background:var(--walnut);border-radius:12px;padding:15px;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.18),0 12px 28px rgba(0,0,0,.4);position:relative}
.tab{position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  background:var(--brass);color:#2B2118;font-family:var(--head);font-weight:700;font-size:16px;
  padding:5px 20px;border-radius:7px 7px 0 0;white-space:nowrap;
  box-shadow:0 -2px 0 rgba(0,0,0,.12)}
.felt{background:linear-gradient(180deg,var(--felt-lite) 0%,var(--felt) 22%,var(--felt-dark) 100%);
  border-radius:7px;padding:17px;box-shadow:inset 0 3px 12px rgba(0,0,0,.35)}
.boxes{list-style:none;margin:0;padding:0;display:grid;gap:15px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr))}
/* a game box sitting in the felt */
.box{display:flex;flex-direction:column;gap:0;text-decoration:none;color:var(--ink);
  background:var(--paper);border-radius:7px;padding:9px 9px 11px;
  box-shadow:0 4px 0 rgba(0,0,0,.28),0 7px 14px rgba(0,0,0,.25);
  transition:transform .13s ease,box-shadow .13s ease}
/* 4:3, the shape make_shot gives a lid, so a Deck's picture shows whole and nothing is cropped */
.box .lid{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.box .lid.none{display:flex;align-items:center;justify-content:center;
  background:hsl(var(--hue) 36% 71%)}
.box .lid.none span{font-size:12px;color:rgba(43,33,24,.62)}
.box .bname{display:block;font-family:var(--head);font-weight:700;font-size:15px;line-height:1.22;
  margin:9px 2px 2px;text-align:center}
.box .btier{display:block;font-size:12.5px;font-weight:700;color:var(--soft);text-align:center}
.box:hover,.box:focus-visible{transform:translateY(-7px);
  box-shadow:0 11px 0 rgba(0,0,0,.26),0 16px 24px rgba(0,0,0,.3);outline:none}
.box.sel{transform:translateY(-7px);
  box-shadow:0 11px 0 rgba(0,0,0,.26),0 16px 24px rgba(0,0,0,.3),0 0 0 3px var(--brass-lite)}
.box:focus-visible{outline:3px solid var(--brass-lite);outline-offset:3px}
/* an open slot cut into the felt */
.slot{border:3px dashed rgba(247,238,223,.5);border-radius:7px;padding:16px 12px;
  display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;
  text-align:center;color:#EAF3ED;min-height:150px}
.slot .tag{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  margin:0;opacity:.85}
.slot .sname{font-family:var(--head);font-weight:700;font-size:16px;margin:0}

/* the panel beside the drawer */
.panes{position:sticky;top:18px}
.pane{display:none;background:var(--paper);color:var(--ink);border-radius:14px;padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.35)}
.pane.on{display:block}
.pane .lid{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.pane .lid.none{display:flex;align-items:center;justify-content:center;
  background:hsl(var(--hue) 36% 71%)}
.pane .lid.none span{font-size:13px;color:rgba(43,33,24,.62)}
.pane h2{font-family:var(--head);font-weight:700;font-size:25px;margin:14px 0 8px;line-height:1.15}
.pane .pitch{margin:0 0 12px;color:var(--soft);font-size:16px}
.pane .chips{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pane .chips li{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;
  background:var(--ground);color:var(--walnut)}
.pane .avail{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--felt)}
.pane .acts{display:flex;flex-direction:column;gap:9px}
.pane .nopage{margin:10px 0 0;font-size:14px;color:var(--soft)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn.play{background:var(--felt);color:#F6FBF7}
.btn.play:hover,.btn.play:focus-visible{background:#26583F}
.btn.quiet{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn.quiet:hover,.btn.quiet:focus-visible{border-color:var(--brass)}
.btn:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.avail{margin:0;font-size:16px;font-weight:700;color:var(--felt)}
.nopage{margin:0;font-size:15px;color:var(--soft)}

/* ================================================================ A DECK, SET UP, ABOUT */
.sheet{padding:0 0 10px}
.crumb{padding:20px 0 0;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;
  color:var(--soft);font-size:15px}
.crumb a{color:var(--walnut);font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.crumb span{opacity:.6}
.deck-head{padding:4px 0 0}
.deck-head h1{font-family:var(--head);font-weight:700;font-size:clamp(28px,4.4vw,44px);
  line-height:1.15;margin:0 0 12px}
.deck-head p.pitch{margin:0 0 10px;font-size:20px;color:var(--soft);max-width:34em}
.stage-img{margin:24px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  overflow:hidden}
.stage-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.stage-img.empty{border-style:dashed;aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;padding:24px}
.stage-img.empty p{margin:0;text-align:center;color:var(--soft);font-size:17px;max-width:30em}
.cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  margin:24px 0 0;align-items:start}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.panel h2{font-family:var(--head);font-weight:700;font-size:23px;margin:0 0 12px}
.panel p{margin:0 0 12px}
.panel p:last-child{margin-bottom:0}
.panel.saves{border-left:6px solid var(--felt)}
.spec{margin:0;display:grid;gap:13px;grid-template-columns:auto 1fr}
.spec dt{font-weight:700;color:var(--soft);font-size:16px}
.spec dd{margin:0;font-weight:700}
.acts-row{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.page-head{padding:18px 0 0}
.page-head h1{font-family:var(--head);font-weight:700;font-size:clamp(28px,4.2vw,42px);
  margin:0 0 8px;line-height:1.15}
.page-head p{margin:0;color:var(--soft);max-width:42em}
.steps{counter-reset:step;list-style:none;margin:26px 0 0;padding:0;display:grid;gap:18px}
.steps li{counter-increment:step;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:22px 24px 22px 76px;position:relative}
.steps li::before{content:counter(step);position:absolute;left:22px;top:22px;
  width:38px;height:38px;border-radius:50%;background:var(--felt);color:#F6FBF7;
  font-family:var(--head);font-weight:700;font-size:20px;
  display:flex;align-items:center;justify-content:center}
.steps h2{font-family:var(--head);font-weight:700;font-size:22px;margin:0 0 8px}
.steps p{margin:0 0 10px}
.steps p:last-child{margin-bottom:0}
.prose{max-width:40em}
.prose h2{font-family:var(--head);font-weight:700;font-size:25px;margin:34px 0 10px}
.prose p{margin:0 0 14px}

/* ---- foot ---- */
footer{margin:48px 0 0;background:var(--walnut);color:#FBF3E6;padding:28px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;align-items:center}
footer p{margin:0;font-size:16px;max-width:42em}
footer a{color:#FBF3E6;display:inline-flex;align-items:center;min-height:44px}
body.drawer-page footer{background:#1C1209;margin-top:36px}

/* ---- the room folds down to one column on a narrow screen ---- */
@media (max-width:980px){
  .drawer-grid{grid-template-columns:1fr}
  .panes{position:static}
}
@media (max-width:860px){
  .stage{grid-template-columns:1fr;align-items:center}
  .col.left,.col.right{align-items:center}
  /* the window and the pegboard are scenery; the room keeps its meaning without them */
  .scenery{display:none}
  .col.right{order:3}
  .bench{max-width:300px}
  .board{max-width:460px}
}
@media (max-width:480px){
  .steps li{padding:68px 20px 22px}
  .steps li::before{left:20px;top:18px}
  .boxes{grid-template-columns:repeat(auto-fill,minmax(min(100%,138px),1fr))}
}