:root{
  /* brand palette */
  --stock:#F6F6F6;      /* card stock */
  --panel:#3A0805;      /* card face */
  --bone:#F6F6F6;       /* ink on the face */
  --ink:#3A0805;        /* line + type */
  --ink-2:#8A5F58;      /* secondary type */
  --blood:#982517;      /* primary accent */
  --flame:#E05F3E;      /* hot accent */
  --sky:#95CAD4;        /* cool accent */
  /* Gotham takes over automatically once it is served from the site;
     Montserrat is the closest free geometric stand-in until then */
  --display:"Gotham Ultra","Gotham","Montserrat",system-ui,sans-serif;
  --label:"Gotham Bold","Gotham","Montserrat",system-ui,sans-serif;
  --body:"Gotham Book","Gotham","Montserrat",system-ui,sans-serif;
  --cw:150px; --ch:225px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);color:var(--ink);
  background:#150B08;position:relative;-webkit-tap-highlight-color:transparent;
}
.board{position:fixed;inset:0;z-index:0;pointer-events:none}
.board svg{width:100%;height:100%;display:block}

/* ---------------- top bar ---------------- */
.topbar::before,.cookbar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(21,11,8,.97) 58%,rgba(21,11,8,0));
}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:9;isolation:isolate;
  display:flex;align-items:center;gap:10px 14px;
  padding:clamp(11px,2vh,20px) clamp(12px,2.4vw,24px);flex-wrap:wrap;
}
.topbar .brand{order:1}
.topbar .organize{order:2;flex:1 1 auto;justify-content:center}
.topbar .tools{order:3;margin-left:auto}
@media(max-width:720px){
  .topbar{justify-content:space-between;gap:7px 10px}
  .topbar .organize{order:3;flex:1 0 100%;justify-content:flex-start;margin-top:1px}
  .topbar .tools{order:2}
  .pill{font-size:.62rem;padding:6px 11px;box-shadow:0 3px 0 -1px rgba(58,8,5,.38)}
  .count{font-size:.55rem;min-width:15px;margin-left:5px}
  .brand a{width:18px;height:18px}
  .organize .lead{font-size:.47rem;letter-spacing:.18em}
  .cookbar{gap:8px}
}
@media(max-width:380px){
  .organize .lead{display:none}
}
.brand{display:flex;gap:11px;align-items:center;transition:opacity .4s;flex-shrink:0}
.brand a{width:20px;height:20px;color:var(--bone);opacity:.7;display:block;transition:opacity .2s,color .2s,transform .2s}
.brand a svg{width:100%;height:100%;display:block}
.brand a:hover{opacity:1;color:var(--flame);transform:translateY(-2px)}

.organize{display:flex;align-items:center;gap:9px;transition:opacity .3s}
.selectwrap{position:relative}
.pill.scheme{display:inline-flex;align-items:center;gap:8px}
.pill.scheme .caret{font-size:.6em;opacity:.8;transform:translateY(1px)}
.pill.scheme[aria-expanded="true"]{background:var(--blood);border-color:var(--blood)}
.schememenu{
  position:absolute;top:calc(100% + 7px);left:0;min-width:158px;z-index:30;
  background:var(--stock);border:3px solid var(--ink);
  box-shadow:0 12px 22px -10px rgba(40,24,10,.7);
  display:none;padding:4px;
}
.schememenu.on{display:block}
.schememenu button{
  display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--display);font-weight:900;font-size:.72rem;color:var(--ink);padding:9px 12px;
}
.schememenu button:hover{background:var(--ink);color:var(--stock)}
.schememenu button[aria-current="true"]{color:var(--blood)}
.schememenu button[aria-current="true"]:hover{color:var(--stock)}
.schememenu button[aria-current="true"]::after{content:" \2022";font-size:.9em}
.organize .lead{
  font-family:var(--label);font-weight:600;font-size:.53rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone);opacity:.62;
}
body.holding .organize{opacity:0;pointer-events:none}
body.holding .brand{opacity:.4}
/* cook mode has its own bar — never show both */
body.cooking .topbar{display:none}

.pill{
  font-family:var(--display);font-weight:900;font-size:.72rem;letter-spacing:.02em;
  color:var(--stock);background:var(--ink);border:2px solid var(--ink);
  padding:7px 14px;cursor:pointer;transition:.16s;box-shadow:0 4px 0 -1px rgba(58,8,5,.38);
}
.pill:hover{background:var(--blood);border-color:var(--blood);transform:translateY(1px);box-shadow:0 3px 0 -1px rgba(58,8,5,.35)}
.pill[aria-pressed="true"]{background:var(--blood);border-color:var(--blood)}
.pill:disabled{opacity:.34;cursor:default;transform:none;background:var(--ink);border-color:var(--ink)}
.pill.ghost{background:transparent;color:var(--ink);box-shadow:none}
.pill.ghost:hover{background:var(--ink);color:var(--stock)}
/* the two ghost buttons living in the bar chrome sit directly on the dark
   backdrop, not on a white surface like the share sheet's ghost buttons do */
.topbar .pill.ghost,.cookbar .pill.ghost{color:var(--bone)}

.tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.count{
  display:inline-block;min-width:17px;margin-left:6px;padding:1px 5px;
  background:var(--stock);color:var(--ink);font-family:var(--body);font-weight:700;
  font-size:.6rem;border-radius:9px;
}
.pill[aria-pressed="true"] .count,.pill:hover .count{background:var(--stock)}

/* ---------------- piles ---------------- */
.table{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,3vw,40px) clamp(12px,2.2vw,30px);
  padding:0 clamp(12px,3vw,44px);z-index:2;
  transition:transform .6s cubic-bezier(.3,.8,.3,1), opacity .5s, filter .45s;
}
.table.settling{opacity:0;pointer-events:none}
body.holding .table{transform:translateY(-104%) scale(.84);opacity:.28;filter:blur(1.8px);pointer-events:none}
body.cooking .table{transform:translateY(-140%) scale(.7);opacity:0;pointer-events:none}
body.cooking .hand{display:none}

.slot{position:relative;display:block;transition:transform .22s ease,opacity .35s}
.slot .stack{border:none;background:none;padding:0;font:inherit;cursor:pointer;display:block}
.slot:hover{transform:translateY(-11px)}
.addall{
  position:absolute;top:-9px;right:-9px;z-index:6;
  width:29px;height:29px;border-radius:50%;
  background:var(--stock);color:var(--ink);border:2px solid var(--ink);
  font-family:var(--display);font-weight:900;font-size:.9rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0 0 2px;
  box-shadow:0 3px 0 -1px rgba(58,8,5,.45);transition:background .15s,color .15s,transform .12s;
}
.addall:hover{background:var(--flame);border-color:var(--flame);color:var(--stock);transform:translateY(-1px)}
.addall.on{background:var(--blood);border-color:var(--ink);color:var(--stock);font-size:.76rem;padding:0}
.slot:focus-visible{outline:none}
.slot:focus-visible .s1{outline:3px solid var(--blood);outline-offset:4px}
.slot.taken{opacity:.16;pointer-events:none}
.slot.pending{visibility:hidden;pointer-events:none}

.stack{position:relative;width:var(--cw);height:var(--ch)}
.stack::after{content:"";position:absolute;left:5%;right:5%;bottom:-12px;height:18px;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(58,8,5,.45),transparent 72%);filter:blur(3px)}
.stack > *{position:absolute;inset:0}
.stack .sh{background:var(--stock);border:3px solid var(--ink);box-shadow:0 5px 10px -5px rgba(58,8,5,.45)}
.s5{transform:rotate(3.2deg) translate(7px,8px)}
.s4{transform:rotate(-2.6deg) translate(-7px,6px)}
.s3{transform:rotate(1.6deg) translate(4px,4px)}
.s2{transform:rotate(-.9deg) translate(-3px,2px)}
.s1{transform:rotate(.4deg)}

/* ---------------- card ---------------- */
.card{
  box-shadow:0 14px 22px -8px rgba(58,8,5,.4);
  background:var(--stock);border:3px solid var(--ink);
  padding:6px 6px 0;display:flex;flex-direction:column;
  overflow:hidden;position:relative;width:100%;height:100%;
}
.card .panel{position:relative;flex:1;background:var(--panel);border:2px solid var(--ink);overflow:hidden;min-height:0}
.card .art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.card .art svg{width:92%;height:92%}
.card .plate{padding:8px 4px 6px;text-align:center;font-family:var(--label);font-weight:700;line-height:1.16;font-size:clamp(calc(.64rem * var(--lenscale,1)), calc(var(--cw) * 0.086 * var(--lenscale,1)), calc(.84rem * var(--lenscale,1)));letter-spacing:.012em;text-transform:uppercase;color:var(--ink);overflow-wrap:break-word;word-break:break-word;hyphens:auto}
.card .rule{height:3px;margin:0 2px 5px;background:var(--bg,#982517);opacity:1}
.card.cover .plate{font-size:clamp(calc(.72rem * var(--lenscale,1)), calc(var(--cw) * 0.098 * var(--lenscale,1)), calc(.94rem * var(--lenscale,1)));padding:9px 4px 5px}
/* the plan card wears the meal's cover art with a marker so it reads as a plan */
.card.planface .planmark{
  position:absolute;left:0;right:0;bottom:6px;z-index:4;text-align:center;
  font-family:var(--label);font-weight:700;font-size:.42rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone);opacity:.85;
}
.card.planface .frame{position:absolute;inset:5px;border:1px solid rgba(246,246,246,.34);z-index:2;pointer-events:none}
.card.cover .frame{position:absolute;inset:5px;border:1px solid rgba(230,220,196,.34);z-index:2;pointer-events:none}
.card.cover .frame::before,.card.cover .frame::after{content:"";position:absolute;width:9px;height:9px;border:1px solid rgba(230,220,196,.55)}
.card.cover .frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.card.cover .frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
/* a card already in your hand carries a mark */
.pcard.inhand .pface.front .card::after{
  content:"";position:absolute;top:8px;right:8px;width:9px;height:9px;z-index:6;
  background:var(--blood);border:2px solid var(--ink);border-radius:50%;
}

/* ---------------- flying cards ---------------- */
.hand{position:fixed;inset:0;z-index:5;pointer-events:none}
.pcard{
  position:fixed;left:50%;top:50%;width:var(--cw);height:var(--ch);
  perspective:1500px;pointer-events:auto;cursor:pointer;
  transition:transform .62s cubic-bezier(.22,.92,.26,1),
             width .5s cubic-bezier(.22,.92,.26,1),
             height .5s cubic-bezier(.22,.92,.26,1),
             opacity .3s;
}
.pcard.loose{pointer-events:none}
.pcard.sliding{transition:transform .44s cubic-bezier(.42,.04,.3,1)}
.pcard.gathering{transition:transform .58s cubic-bezier(.28,.72,.24,1),opacity .2s}
.pcard-lift{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .22s cubic-bezier(.3,1,.4,1)}
.pcard:hover .pcard-lift{transform:translateY(-22px)}
.pcard.loose:hover .pcard-lift{transform:none}
body.reading .pcard:hover .pcard-lift{transform:none}
.pcard-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.9,.25,1)}
.pcard.flipped .pcard-inner{transform:rotateY(180deg)}
.pface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pface.back{transform:rotateY(180deg)}
.pface::after{content:"";position:absolute;inset:0;background:rgba(12,8,4,0);transition:background .4s;pointer-events:none;z-index:20}
.pcard.dimmed .pface::after{background:rgba(12,8,4,.52)}
.pcard.settled{perspective:none;-webkit-perspective:none}
.pcard.settled .pcard-lift{transform-style:flat;transform:none;transition:none}
.pcard.settled .pcard-inner{transform:none;transform-style:flat;transition:none}
.pcard.settled .pface.front{display:none}
.pcard.settled .pface.back{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible}

/* ---------------- recipe ---------------- */
.recipe{
  box-shadow:0 14px 22px -8px rgba(58,8,5,.4);
  height:100%;background:var(--stock);border:3px solid var(--ink);
  padding:15px 16px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.recipe h3{font-family:var(--display);font-weight:900;font-size:1.05rem;line-height:1.1;padding-right:40px}
.recipe .serves{font-family:var(--label);font-weight:600;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-top:6px;padding-bottom:9px;border-bottom:2px solid var(--ink)}
.recipe h4{font-family:var(--label);font-weight:700;font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blood);margin:12px 0 6px}
.recipe ul,.recipe ol{margin:0;padding-left:15px}
.recipe li{font-size:.72rem;line-height:1.5;margin-bottom:4px}
.addplus{
  position:absolute;top:11px;right:11px;z-index:8;
  width:31px;height:31px;border-radius:50%;
  background:var(--stock);color:var(--ink);border:2px solid var(--ink);
  font-family:var(--display);font-weight:900;font-size:.95rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0 0 2px;
  box-shadow:0 2px 0 -1px rgba(58,8,5,.45);transition:background .15s,color .15s,transform .12s;
}
.addplus:hover{background:var(--flame);color:var(--stock);border-color:var(--flame);transform:translateY(-1px)}
.addplus.on{background:var(--blood);color:var(--stock);font-size:.8rem;padding:0}
.recipe .acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}
.recipe .watch{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--label);font-weight:600;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:8px 12px;border:2px solid var(--ink);cursor:pointer;
  color:var(--stock);background:var(--blood);
}
.recipe .watch:hover{background:var(--ink)}
.recipe .watch.blocked{background:var(--ink);text-transform:none;letter-spacing:.04em;user-select:all}

/* ---------------- share sheet ---------------- */
.share{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(30,18,8,.55);padding:18px}
.share.on{display:flex}
.sharebox{
  position:relative;width:min(430px,94vw);background:var(--stock);border:3px solid var(--ink);
  padding:26px 26px 22px;box-shadow:0 22px 40px -14px rgba(0,0,0,.6);
}
.sharebox::after{content:"";position:absolute;inset:6px;border:1px solid var(--ink);opacity:.4;pointer-events:none}
.sharebox .lead{font-family:var(--display);font-weight:900;font-size:1.15rem;line-height:1.1}
.sharebox .blurb{font-size:.78rem;line-height:1.5;color:var(--ink-2);margin:9px 0 15px}
.urlrow{display:flex;gap:7px}
.urlrow input{
  flex:1;min-width:0;padding:9px 11px;border:2px solid var(--ink);background:#F3EBD8;
  font-family:var(--body);font-size:.74rem;color:var(--ink);
}
.shareacts{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.shareacts .pill{text-decoration:none;display:inline-flex;align-items:center}
.sheetclose{
  position:absolute;top:8px;right:10px;z-index:3;background:none;border:none;cursor:pointer;
  font-size:1.4rem;line-height:1;color:var(--ink-2);padding:2px 6px;
}
.sheetclose:hover{color:var(--ink)}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);z-index:40;
  background:var(--ink);color:var(--stock);padding:9px 16px;
  font-family:var(--label);font-weight:600;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ---------------- newsletter, below the cards in cook mode ---------------- */
.signup-cook{
  grid-column:1/-1;
  margin-top:clamp(12px,2.5vh,26px);
  padding-top:clamp(16px,3vh,28px);
  border-top:2px dashed rgba(246,246,246,.22);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.signup-cook .siglead{
  font-family:var(--display);font-weight:900;font-size:clamp(.95rem,2.8vw,1.25rem);color:var(--bone);
  text-transform:uppercase;letter-spacing:-.01em;
}
.signup-cook .sigsub{font-size:.78rem;line-height:1.5;color:rgba(246,246,246,.7);max-width:40ch}
.signup-cook .embed{width:min(480px,100%);margin-top:2px}
.signup-cook iframe{width:100%;max-width:480px;height:320px;border:0;background:transparent;display:block}

/* ---------------- cook mode ---------------- */
.cook{position:fixed;inset:0;z-index:20;display:none;flex-direction:column;padding-top:clamp(64px,10vh,80px)}
.cook.on{display:flex}
.cookbar{
  position:fixed;top:0;left:0;right:0;z-index:22;isolation:isolate;display:flex;align-items:center;
  justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:clamp(11px,2vh,18px) clamp(12px,2.4vw,24px);
}
.cookgrid{
  flex:1;overflow:auto;-webkit-overflow-scrolling:touch;
  display:grid;gap:clamp(12px,2vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  align-content:start;padding:clamp(10px,2vw,22px) clamp(12px,3vw,30px) 40px;
}
.cookcard{
  position:relative;height:clamp(230px,32vh,300px);cursor:pointer;overflow:hidden;
  opacity:0;transform:translateY(14px) rotate(var(--tilt,0deg));
  transition:opacity .4s ease, transform .45s cubic-bezier(.25,.9,.3,1);
}
.cookcard.in{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg))}
.cookcard:hover{transform:translateY(-6px) rotate(0deg);z-index:3}
.cookcard .recipe{overflow:hidden;pointer-events:none}
.cookcard::after{
  content:"";position:absolute;left:3px;right:3px;bottom:3px;height:52px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(230,220,196,0),rgba(230,220,196,.97));
}
.cookzoom{position:fixed;inset:0;z-index:26;display:none;align-items:center;justify-content:center;background:rgba(30,18,8,.6);padding:18px}
.cookzoom.on{display:flex}
.cookzoom .recipe{width:min(420px,92vw);height:min(78vh,620px);overflow:auto;pointer-events:auto}

@media(prefers-reduced-motion:reduce){*{transition-duration:.05s!important}}