/* ==========================================================
   Vote page — gallery bands, museum label, vote card, seal
   ========================================================== */
.page-vote{--stage-bg:#efede8}

/* top band */
.vhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none}
.vhead>*{pointer-events:auto}
.vsteps{display:flex;align-items:center;gap:10px;font-family:var(--f-jp);font-size:13px;font-weight:700;color:var(--mute);padding-bottom:6px}
.vsteps li{display:flex;align-items:center;gap:8px}
.vsteps li+li::before{content:"";width:22px;height:1px;background:currentColor;opacity:.5;margin-right:2px}
.vsteps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;font-family:var(--f-lat);font-size:11px}
.vsteps .is-on{color:var(--ink)}
.vsteps .is-on b{background:var(--ink);color:var(--paper);box-shadow:none}

/* bottom band */
.vbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;pointer-events:none}
.vbar>*{pointer-events:auto}
.vlabel{min-width:0}
.vlabel__no{font-family:var(--f-lat);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.vlabel__no b{color:var(--ink);font-weight:800}
.vlabel__title{margin-top:4px;font-family:var(--f-lat);font-weight:800;font-size:clamp(22px,2vw,32px);line-height:1.05;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlabel__jp{margin-top:4px;font-family:var(--f-jp);font-size:13px;font-weight:500;color:var(--ink-2)}
.vlabel.is-swap>*{animation:vswap .7s var(--ease) both}
.vlabel.is-swap>*:nth-child(2){animation-delay:.04s}.vlabel.is-swap>*:nth-child(3){animation-delay:.08s}
@keyframes vswap{from{opacity:0;transform:translateY(10px)}}
.vnav{display:flex;align-items:center;gap:12px}
.vside{display:grid;justify-items:end;gap:8px}
.vticks{display:flex;gap:5px}
.vticks li{width:16px;height:2px;background:rgba(0,0,0,.16);transition:background .4s,transform .5s var(--ease);transform-origin:50% 100%}
.vticks li.is-on{background:var(--ink);transform:scaleY(2)}
.vticks li.is-voted{background:var(--ember)}
.vhint{font-size:12px;color:var(--ink-2)}
.vmine{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.vmine::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ember)}
.vmine b{font-family:var(--f-lat);font-weight:800}

/* museum label in the panel */
.vpanel .panel__in{position:relative}
.vp,.vdone{display:flex;flex-direction:column;flex:1 1 auto}
.vp[hidden],.vdone[hidden],.vmine[hidden]{display:none}
.vp__no{font-family:var(--f-lat);font-size:12px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.vp__no b{color:var(--ink);font-weight:800}
.vp__title{margin-top:clamp(12px,2.4vh,22px);padding-right:110px;font-family:var(--f-lat);font-weight:800;font-size:clamp(28px,2.5vw,40px);line-height:1.02;letter-spacing:-.04em}
.vp__jp{margin-top:6px;font-family:var(--f-jp);font-size:15px;font-weight:700}
.vp__meta{margin-top:clamp(14px,2.4vh,24px);border-top:1px solid var(--ink)}
.vp__meta>div{display:grid;grid-template-columns:86px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.vp__meta dt{font-family:var(--f-lat);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding-top:2px}
.vp__meta dd{font-size:13px;line-height:1.55;font-family:var(--f)}
.vp__meta small{font-size:11.5px;color:var(--mute)}
.vp__note{margin-top:clamp(12px,2vh,18px);font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.vp__acts{margin-top:auto;padding-top:clamp(14px,2.6vh,26px);display:grid;gap:10px}
.vp__acts .cbtn{width:100%}
.vp__vote.is-voted{background:var(--ember);opacity:1}
.vp__pager{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--f-jp);font-size:12.5px;font-weight:700}
.vp__pager button{padding:6px 0;opacity:.7;transition:opacity .3s}
.vp__pager button:hover{opacity:1}
.vp__fine{margin-top:8px;font-size:11.5px;line-height:1.6;color:var(--mute)}
.vp.is-swap>*{animation:vswap .6s var(--ease) both}

/* thank-you card */
.vdone__k{font-family:var(--f-lat);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ember)}
.vdone__h{margin-top:10px;padding-right:110px;font-family:var(--f-jp);font-weight:900;font-size:clamp(30px,2.7vw,42px);line-height:1.1;letter-spacing:-.03em}
.vdone__lead{margin-top:12px;font-size:14.5px;line-height:1.7;padding-right:96px}
.vdone__lead b{font-family:var(--f-lat);font-weight:800}
.vdone__steps{margin-top:clamp(16px,3vh,28px);border-top:1px solid var(--ink)}
.vdone__steps li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5}
.vdone__steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink);font-family:var(--f-lat);font-size:11px}
.vdone__steps .is-done b{background:var(--ink);color:var(--paper)}
.vdone__steps em{font-style:normal;font-size:11px;font-weight:800;color:var(--ember)}
.vdone__qr{margin-top:18px;display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center}
.vdone__qr span{display:grid;place-items:center;width:76px;height:76px;border:1.5px dashed #b9b4ab;font-family:var(--f-lat);font-weight:800;font-size:13px;color:#a29d94}
.vdone__qr p{font-size:12.5px;line-height:1.7;color:var(--mute)}
.vdone__acts{margin-top:auto;padding-top:22px;display:grid;gap:10px}
.vdone__acts .cbtn{width:100%}
.vdone.is-in>*{animation:vswap .8s var(--ease) both}
.vdone.is-in>*:nth-child(2){animation-delay:.06s}.vdone.is-in>*:nth-child(3){animation-delay:.12s}
.vdone.is-in>*:nth-child(4){animation-delay:.18s}.vdone.is-in>*:nth-child(5){animation-delay:.24s}.vdone.is-in>*:nth-child(6){animation-delay:.3s}

/* VOTED seal */
.seal{position:absolute;right:clamp(16px,1.6vw,26px);top:clamp(46px,7vh,70px);width:118px;height:118px;color:var(--ember);mix-blend-mode:multiply;
  pointer-events:none;opacity:0;transform:rotate(-14deg);transform-origin:50% 50%}
.seal.is-on{opacity:.92}
.seal__ring{fill:none;stroke:currentColor;stroke-width:6}
.seal__ring--thin{stroke-width:1.6}
.seal text{fill:currentColor;text-anchor:middle;font-family:var(--f-lat)}
.seal__arc{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-anchor:start!important}
.seal__big{font-size:39px;font-weight:900;letter-spacing:-.02em}
.seal__no{font-size:15px;font-weight:800;letter-spacing:.04em}

/* ---------- phone ---------- */
@media (max-width:860px){
  .vhead{display:block}
  .vsteps{margin-top:10px;padding:0;font-size:11.5px;gap:6px}
  .vsteps li+li::before{width:12px}
  .vsteps b{width:18px;height:18px;font-size:10px}
  .vbar{grid-template-columns:1fr;gap:12px}
  .vside{display:none}
  .vnav{justify-content:space-between}
  .vnav__open{flex:1}
  .vp__title{padding-right:84px;font-size:26px}
  .vp__meta>div:last-child,.vp__pager{display:none}
  .vp__note{font-size:13px;line-height:1.8}
  .vp__acts{grid-template-columns:1fr auto}
  .vp__acts .cbtn--line{width:auto}
  .vdone__h{padding-right:84px;font-size:28px}
  .vdone__lead{padding-right:0}
  .vdone__acts{grid-template-columns:1fr;padding-top:16px}
  .vdone__qr{display:none}
  .vdone__steps{margin-top:14px}
  .vdone__steps li{padding:8px 0}
  .seal{width:84px;height:84px;top:14px;right:14px}
}
/* phone held sideways: keep everything on one line and use a side panel */
@media (max-height:520px) and (orientation:landscape){
  .stage{min-height:0}
  .vsteps,.vlabel__jp,.vhead .eyebrow{display:none}
  .vhead .c-h1{font-size:20px;margin:0}
  .band--top{top:calc(var(--hdr) + var(--tick) + 10px)}
  .band--bot{bottom:10px}
  .vbar{grid-template-columns:1fr auto;align-items:center}
  .vlabel__title{font-size:20px}
  .vnav .cbtn{height:44px}
  .vnav .rbtn{width:44px;height:44px}
  .panel{left:auto;right:var(--gut);top:calc(var(--hdr) + var(--tick) + 8px);bottom:8px;width:min(360px,46vw);max-height:none;border-radius:0;transform:translateX(calc(100% + var(--gut) + 20px))}
  .panel__in{padding:16px 18px}
  .vp__meta,.vp__note{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vlabel.is-swap>*,.vp.is-swap>*,.vdone.is-in>*{animation:none}
}