:root{
  --pad-x:max(env(safe-area-inset-left),clamp(16px,4.5vw,64px));
  --band:clamp(68px,11vh,104px);
}

.panel{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(8px,2vh,22px);
  padding:0;
  background:var(--c,#f00);
  color:var(--ink);
  overflow-x:hidden;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s;
}
.panel.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .42s ease,visibility 0s}
.panel::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 16% 18%,rgba(255,255,255,.24),rgba(255,255,255,0) 62%),
    repeating-linear-gradient(118deg,rgba(255,255,255,.09) 0 34px,rgba(255,255,255,0) 34px 68px);
}
.panel > *{position:relative;z-index:1}

.panel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:max(env(safe-area-inset-top),clamp(14px,3vh,30px)) var(--pad-x) 0;
}
.crumb{margin:0;font:800 11px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--on,#000);text-align:right}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.9em 1.35em;
  border:0;
  border-radius:999px;
  background:#000;
  color:#fff;
  font:800 13px/1 var(--ui);
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .25s var(--ease-out);
}
.btn:hover{background:var(--cream);color:#000;transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn--ghost{
  width:44px;height:44px;
  padding:0;
  justify-content:center;
  border:2px solid rgba(255,251,230,.55);
  background:rgba(255,255,255,.1);
  color:var(--cream);
  font-size:16px;
}
.btn--ghost:hover{background:var(--cream);color:#000}

.panel__main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,72px);
  align-items:center;
  padding:0 var(--pad-x);
}
.kicker{margin:0 0 .9em;font:800 clamp(11px,1.2vw,14px)/1 var(--ui);letter-spacing:.32em;text-transform:uppercase;color:var(--on,#000)}
.title{
  margin:0;
  font:900 clamp(44px,min(8vw,17vh),132px)/.95 var(--ui);
  letter-spacing:-.01em;
  color:#000;
  overflow-wrap:anywhere;
}
.lede{margin:1.1em 0 0;max-width:30ch;font:700 clamp(17px,1.7vw,24px)/1.4 var(--ui);color:var(--on,#000)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:1.4em 0 0;padding:0;list-style:none}
.chips li{padding:.75em 1.05em;border-radius:999px;background:#000;color:var(--cream);font:800 11.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}

.panel__menu{display:grid;gap:clamp(14px,2.4vh,24px);width:100%;max-width:580px;justify-self:end}
.menu{display:grid;gap:clamp(10px,1.8vh,16px);margin:0;padding:0 22px 0 0;list-style:none}

.opt{
  position:relative;
  display:flex;
  align-items:center;
  gap:.8em;
  width:100%;
  min-height:clamp(46px,8vh,62px);
  padding:.45em 1.7em .45em .95em;
  border:4px solid #000;
  border-radius:10px 999px 999px 10px;
  background:linear-gradient(174deg,var(--c) 0 62%,var(--cream) 62% 100%);
  color:#000;
  font:900 clamp(17px,1.9vw,26px)/1.1 var(--ui);
  text-align:left;
  cursor:pointer;
  transform:skewX(-14deg);
  transition:transform .3s var(--ease-out);
}
.opt > *{transform:skewX(14deg)}
.menu__item.is-selected .opt{transform:skewX(-14deg) translateX(14px)}
.opt:focus-visible{outline:none}
.opt.is-pressed{animation:opt-press .28s var(--ease-out)}
.opt__n{
  display:grid;
  place-items:center;
  flex:none;
  width:1.75em;height:1.75em;
  border-radius:50%;
  background:#000;
  color:var(--cream);
  font-size:.62em;
}
.opt__label{
  -webkit-text-stroke:.16em #fff;
  paint-order:stroke fill;
  overflow-wrap:anywhere;
}

@keyframes opt-press{0%{transform:skewX(-14deg) translateX(14px) scale(1)}40%{transform:skewX(-14deg) translateX(20px) scale(.97)}100%{transform:skewX(-14deg) translateX(14px) scale(1)}}

.info{
  position:relative;
  min-height:9.5em;
  padding:clamp(14px,2vh,22px) clamp(16px,2vw,28px);
  background:var(--cream);
  border:4px solid #000;
  border-radius:18px 46px 18px 18px;
  box-shadow:0 6px 0 rgba(0,0,0,.28);
}
.info__count{
  display:inline-block;
  margin-bottom:.7em;
  padding:.35em .8em;
  border-radius:999px;
  background:#000;
  color:var(--cream);
  font:800 11px/1 var(--ui);
  letter-spacing:.18em;
}
.info__title{margin:0 0 .4em;font:900 clamp(20px,2.2vw,30px)/1.1 var(--ui);color:#000}
.info__text{margin:0;font:500 clamp(15px,1.3vw,18px)/1.55 var(--ui);color:#23232a}
.info__text a{color:inherit;font-weight:800;text-decoration-thickness:.12em;text-underline-offset:.14em}
.info__text a:focus-visible{outline:3px solid #000;outline-offset:3px}
.info.is-swap .info__count,.info.is-swap .info__title,.info.is-swap .info__text{animation:info-in .38s var(--ease-out) both}
.info.is-swap .info__title{animation-delay:.04s}
.info.is-swap .info__text{animation-delay:.08s}

@keyframes info-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.panel__foot{
  position:sticky;
  bottom:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:calc(var(--band) + env(safe-area-inset-bottom));
  padding:0 max(var(--pad-x),3rem) env(safe-area-inset-bottom) var(--pad-x);
  background:#000;
  clip-path:polygon(0 0,calc(100% - 2.6rem) 0,100% 100%,0 100%);
}
.pager{display:flex;align-items:center;gap:14px}
.dots{display:flex;gap:9px;margin:0;padding:0;list-style:none}
.dots button{
  width:14px;height:14px;
  padding:0;
  border:2px solid var(--cream);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:background .2s ease,transform .25s var(--ease-out),border-color .2s ease;
}
.dots button:hover{transform:scale(1.2)}
.dots button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.dots button[aria-current="true"]{background:var(--c);border-color:var(--c);transform:scale(1.3)}
.legal{margin:0;max-width:48ch;font:500 11px/1.45 var(--ui);color:rgba(255,251,230,.72);text-align:right}

.rise{opacity:0;transform:translateY(18px);transition:opacity .2s ease,transform .2s ease}
.panel.is-on .rise{
  opacity:1;
  transform:none;
  transition:opacity .55s ease,transform .75s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms + 140ms);
}

@media (max-width:860px) and (orientation:portrait),(max-width:600px){
  :root{--band:104px}
  .panel__main{grid-template-columns:minmax(0,1fr);align-content:start;gap:20px;padding-bottom:20px}
  .title{font-size:clamp(44px,15vw,92px)}
  .panel__menu{justify-self:stretch;max-width:none}
  .menu{padding-right:12px}
  .menu__item.is-selected .opt{transform:skewX(-14deg) translateX(8px)}
  .panel__foot{flex-direction:column;justify-content:center;gap:8px;padding:8px var(--pad-x) calc(8px + env(safe-area-inset-bottom))}
  .legal{text-align:center;font-size:10px;max-width:none}
  .crumb{display:none}
}

@media (max-height:520px) and (orientation:landscape){
  :root{--band:56px}
  .panel{gap:6px}
  .panel__top{padding-top:10px}
  .kicker{margin-bottom:.5em}
  .title{font-size:clamp(36px,min(7vw,16vh),84px)}
  .lede{font-size:14px;margin-top:.5em;max-width:34ch}
  .chips{display:none}
  .legal{display:none}
  .panel__menu{gap:8px}
  .menu{gap:6px}
  .opt{min-height:38px;border-width:3px;font-size:15px}
  .info{min-height:0;padding:8px 14px;border-width:3px;box-shadow:0 4px 0 rgba(0,0,0,.28)}
  .info__count{margin-bottom:.3em}
  .info__title{font-size:16px}
  .info__text{font-size:12.5px;line-height:1.4}
}

@media (prefers-reduced-motion:reduce){
  .rise,.panel,.panel.is-on .rise,.opt,.dots button{transition-duration:.01ms!important;transition-delay:0ms!important}
  .opt.is-pressed,.info.is-swap .info__count,.info.is-swap .info__title,.info.is-swap .info__text{animation:none}
}