/* The next one: the vote, on the house's own page. sum.css is the house's; this adds only the vote. */

.page-head p{max-width:26ch}

[hidden]{display:none!important}

/* ---------- the shelf: the goods as the lines of a sum, ten across two rows on a desk ---------- */
.vote{padding-top:44px}
.shelf{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px;border-top:1.5px solid var(--ink);padding-top:14px}
.g{position:relative;min-width:0}
.g-btn{display:block;width:100%;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.g-fig{position:relative;aspect-ratio:1;margin:0}
.g-fig img{width:100%;height:100%;object-fit:contain;transition:transform .55s var(--arrive),opacity .3s,filter .3s;transform-origin:50% 80%}
.g-t{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;border-top:1px solid var(--rule);padding-top:10px;margin-top:2px}
.g-t b{grid-column:1/-1;font-weight:600;font-size:16px;line-height:1.2;letter-spacing:-.012em}
.g-t span{font-size:13.5px;line-height:1.35;color:var(--mute);margin-top:3px;min-width:0}
@media (hover:hover){ .g-btn:hover .g-fig img{transform:translateY(-5px)} }
.g-btn:focus-visible{outline-offset:6px}

/* where a carried 1 rests: top left of the drawing, pencilled in above the column the way a carry is */
.slot{position:absolute;left:7%;top:0;margin-top:6%;width:15px;height:32px;pointer-events:none}
.slot > .one{pointer-events:auto}
/* the place it would land, shown while a 1 is held over the good */
.slot::before{content:"";position:absolute;inset:0;background:var(--carry);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .35s var(--arrive);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 369.29 802.5'%3E%3Cpath d='M272.77 0 L0 127.19 L14.21 242.91 L158.67 175.55 L235.65 802.5 L369.29 786.1 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 369.29 802.5'%3E%3Cpath d='M272.77 0 L0 127.19 L14.21 242.91 L158.67 175.55 L235.65 802.5 L369.29 786.1 Z'/%3E%3C/svg%3E") center/contain no-repeat}
html.holding .g-fig img{opacity:.55;filter:saturate(.6)}
html.holding .g.over .g-fig img{opacity:1;filter:none;transform:translateY(-7px)}
html.holding .g.over .slot::before{opacity:.22;transform:none}
html.holding .g.has .slot::before{opacity:0}
.g.got .g-fig img{animation:got .7s var(--arrive)}
@keyframes got{0%{transform:translateY(-7px)}35%{transform:translateY(2px)}100%{transform:none}}

/* ---------- the 1: one element, resting in a slot, or held, or in flight ---------- */
.one{position:absolute;inset:0;display:block;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.one::before{content:"";position:absolute;inset:-12px -16px}   /* a thumb's worth to hold, around a narrow figure */
.one svg{display:block;width:100%;height:100%;overflow:visible}
.one path{fill:var(--carry)}
.one.fly,.one.held{position:fixed;inset:auto;left:0;top:0;z-index:90;transform-origin:0 0;will-change:transform;pointer-events:none}
.one.held svg{filter:drop-shadow(0 8px 6px rgba(22,21,20,.16))}
.one.away{visibility:hidden}
.slot.land > .one svg,.home.land > .one svg{animation:land .55s var(--arrive);transform-origin:50% 100%}
@keyframes land{0%{transform:translateY(-5px) scaleY(1.05)}38%{transform:translateY(1px) scaleY(.93)}100%{transform:none}}
.home.beckon > .one svg{animation:beckon 1.1s var(--arrive);transform-origin:50% 100%}
@keyframes beckon{0%,100%{transform:none}22%{transform:translateY(-6px) rotate(-5deg)}44%{transform:translateY(0) scaleY(.95)}62%{transform:translateY(-2px)}}

/* ---------- the answer: the rule under the sum, held at the foot of the screen while the goods go by ---------- */
.ans{position:sticky;bottom:0;z-index:20;margin-top:36px;background:var(--paper);padding-bottom:env(safe-area-inset-bottom)}
/* solid, and the goods fade out just above the rule, so the rule never strikes through a name going under it */
.ans::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:30px;background:linear-gradient(color-mix(in srgb,var(--paper) 0%,transparent),var(--paper) 65%);pointer-events:none}
.ans-rule{display:block;height:1.5px;background:var(--ink);transform-origin:0 50%}
.ans-in{--cg:14px;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;column-gap:var(--cg);min-height:76px;padding:10px 0 12px}
.eq{font-weight:400;font-size:30px;line-height:1;margin-top:-3px}
.home{position:relative;display:block;width:18px;height:38px}
.ans.carried .home{width:0;margin-right:calc(-1 * var(--cg))}
.ans-t{min-width:0}
.ans-name{display:block;max-width:100%;font-weight:650;font-size:clamp(22px,6vw,34px);line-height:1.08;letter-spacing:-.03em;text-align:left}
.ans-name .w{display:inline-block}
.ans-name .w.write{animation:write .75s var(--arrive) both}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
.ans-sub{font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:16px;line-height:1.3;color:var(--mute);margin-top:2px}
.ans-sub button{border-bottom:1px solid var(--rule);color:var(--ink)}
.ans-back{font-size:14.5px;color:var(--mute);padding:12px 0;align-self:center;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1px no-repeat}
.ans-back:hover{color:var(--ink)}

.after{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;padding-top:18px}
.after p{font-family:var(--serif);font-variation-settings:"opsz" 18;font-size:17px;line-height:1.4;color:var(--mute)}
.after .link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15.5px}
/* not on the list yet: the address that makes the 1 count, in the house's own list form */
.after .list{flex:1 1 100%;margin-bottom:10px}
.after .again{justify-self:start;min-height:32px;margin-top:-4px;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.after .again:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vote + .foot,main + .foot{margin-top:110px}

/* ---------- a good, opened: a sheet from the bottom on a phone, a spread on a desk ---------- */
.case{position:fixed;inset:0;z-index:80}
.case-scrim{position:absolute;inset:0;background:rgba(22,21,20,.34);opacity:0;transition:opacity .4s var(--ease)}
.case.open .case-scrim{opacity:1}
.case-panel{position:absolute;left:0;right:0;bottom:0;max-height:calc(100svh - 24px);overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border-radius:14px 14px 0 0;
  padding:0 var(--g) 0;transform:translateY(100%);transition:transform .52s var(--arrive);box-shadow:0 -10px 40px -20px rgba(22,21,20,.35)}
.case.open .case-panel{transform:none}
.case.drag .case-panel{transition:none}
.case-grab,.case-fig{touch-action:none}   /* a pull down from the handle or the picture moves the sheet, not the page */
.case-grab{position:sticky;top:0;z-index:2;height:24px;display:grid;place-items:center;margin:0 calc(-1 * var(--g));background:var(--paper)}
.case-grab i{width:38px;height:4px;border-radius:2px;background:var(--rule)}
.case-x{position:absolute;right:6px;top:8px;z-index:3;width:44px;height:44px}
.case-x i::before,.case-x i::after{content:"";position:absolute;left:13px;right:13px;top:50%;height:1.5px;background:var(--ink);transform:rotate(45deg)}
.case-x i::after{transform:rotate(-45deg)}
.case-fig{position:relative;margin:0 auto;width:min(100%,46svh);aspect-ratio:1}
.case-fig img{width:100%;height:100%;object-fit:contain}
.case-fig .slot{width:18px;height:38px}
.case-fig .slot svg{display:block;width:100%;height:100%}
.case-fig .slot path{fill:var(--carry)}
.case-body{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.case-body h2{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-weight:650;font-size:clamp(30px,8.4vw,52px);line-height:1;letter-spacing:-.035em}
.case-by{font-size:15px;color:var(--mute);margin-top:8px}
.case-hook{font-family:var(--serif);font-variation-settings:"opsz" 22;font-size:21px;line-height:1.32;margin-top:18px;max-width:34ch}
.made{margin-top:26px}
.made h3{font-weight:600;font-size:15px;line-height:1.3;margin-bottom:8px}
.made.picking h3{font-family:var(--serif);font-variation-settings:"opsz" 20;font-weight:400;font-size:21px}
.made ul{list-style:none;border-top:1.5px solid var(--ink)}
.made li{border-bottom:1px solid var(--rule)}
.rz{width:100%;display:grid;grid-template-columns:0 minmax(0,1fr) 16px;align-items:center;column-gap:0;padding:13px 0;min-height:56px;transition:grid-template-columns .45s var(--arrive),column-gap .45s var(--arrive)}
.rz b{display:block;font-weight:600;font-size:16px;line-height:1.3}
.rz .tog{position:relative;width:12px;height:12px;transition:opacity .2s}
.rz .tog::before,.rz .tog::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--ink);transition:transform .35s var(--arrive)}
.rz .tog::after{transform:rotate(90deg)}
.rz[aria-expanded="true"] .tog::after{transform:rotate(0)}
.rz .ring{position:relative;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);opacity:0;transform:scale(.6);transition:opacity .25s,transform .45s var(--arrive),box-shadow .25s}
.rz .ring svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.3) rotate(-30deg);transition:opacity .2s,transform .5s var(--arrive)}
.rz .ring path{fill:var(--carry)}
.why{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--arrive)}
.why > p{overflow:hidden;min-height:0;font-family:var(--serif);font-variation-settings:"opsz" 16;font-size:17px;line-height:1.45;color:var(--mute);max-width:52ch}
.why.on{grid-template-rows:1fr}
.why.on > p{padding-bottom:14px}
/* picking the line that won you: the rings come in, and the one you pick fills with the disc */
.made.picking .rz{grid-template-columns:24px minmax(0,1fr) 0;column-gap:14px}
.made.picking .rz .ring{opacity:1;transform:none}
.made.picking .rz .tog{opacity:0}
.made.picking .why{grid-template-rows:0fr}
.made .rz.picked .ring{box-shadow:inset 0 0 0 1.5px var(--carry)}
.made .rz.picked .ring svg{opacity:1;transform:none}
.made .all{display:none}
.made.picking .all{display:block}
.made .all b{font-weight:500;color:var(--mute)}
@media (hover:hover){ .made.picking .rz:hover .ring{transform:scale(1.08)} }

.case-act{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;padding:14px 0 calc(14px + env(safe-area-inset-bottom));margin-top:8px;background:var(--paper)}
.case-act .btn svg.o{width:10px;height:22px;flex:none}
.case-act .btn svg.o path{fill:var(--carry)}
.case-act .btn[disabled]{background:none;color:var(--ink);padding:0;min-height:44px;cursor:default}
.case-act .tx{font-size:15px;color:var(--mute);padding:12px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1px no-repeat}
.case-act .tx:hover{color:var(--ink)}
html.sheet{overflow:hidden}

/* ---------- the way in: the page arrives, the rule is drawn, and the house hands over its 1 ---------- */
html.intro .page-head .wrap > *,html.intro .g,html.intro .eq,html.intro .ans-t{opacity:0}
html.intro .ans-rule,html.intro .shelf{border-top-color:transparent}
html.intro .ans-rule{transform:scaleX(0)}
html.play .page-head .wrap > *{animation:rise .75s var(--arrive) both}
html.play .page-head .wrap > :nth-child(2){animation-delay:.08s}
html.play .g{animation:rise .7s var(--arrive) both;animation-delay:calc(.2s + var(--i) * 45ms)}
html.play .ans-rule{animation:draw .8s var(--arrive) both;animation-delay:var(--rd)}
html.play .eq,html.play .ans-t{animation:fade .5s both;animation-delay:calc(var(--rd) + .3s)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

@media (min-width:720px){
  .vote{padding-top:64px}
  .shelf{gap:40px 22px;padding-top:18px}
  .g-t b{font-size:17px}
  .g-t span{font-size:14px}
  .case-panel{padding:0 40px}
  .case-fig{width:min(70%,44svh)}
}
@media (min-width:1000px){
  .vote{padding-top:56px}
  .shelf{grid-template-columns:repeat(5,minmax(0,1fr));gap:56px 28px;padding-top:24px}
  .g-t b{font-size:18px}
  .slot{width:17px;height:36px}
  .ans-in{--cg:20px;min-height:96px;padding:14px 0 16px}
  .eq{font-size:44px}
  .home{width:21px;height:45px}
  .ans-name{font-size:44px}
  .ans-sub{font-size:18px}
  .case-panel{left:50%;top:50%;right:auto;bottom:auto;width:min(1180px,calc(100vw - 2 * var(--g)));max-height:min(780px,calc(100svh - 64px));border-radius:4px;padding:52px 56px 0;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start;
    opacity:0;transform:translate(-50%,-47%) scale(.985);transition:transform .55s var(--arrive),opacity .3s;box-shadow:0 30px 80px -30px rgba(22,21,20,.45)}
  .case.open .case-panel{opacity:1;transform:translate(-50%,-50%)}
  .case-grab{display:none}
  .case-fig{touch-action:auto}
  .case-x{right:14px;top:14px}
  .case-fig{width:100%;position:sticky;top:0}
  .case-fig .slot{width:22px;height:47px}
  .case-body{padding-bottom:0}
  .case-body h2{font-size:52px}
  .case-act{padding:18px 0 40px}
}
@media (prefers-reduced-motion:reduce){
  html.intro .page-head .wrap > *,html.intro .g,html.intro .eq,html.intro .ans-t{opacity:1}
  .case-panel{transition:opacity .2s!important}
}