/* The choice page: one link, both presentations. One screen on the 16:9 canvas the decks use
   (deck.css): each pick is a picture on the paper, its name and line, and the way in. */
.choose { position: relative; min-height: 100vh; min-height: 100svh; }
.choose .stage { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; justify-items: start; padding-top: calc(var(--u) * 8); }
.ch-title { margin: calc(var(--u) * 1.1) 0 0; font: 600 calc(var(--u) * 4.6)/.95 var(--sans); letter-spacing: -.05em; }
.ch-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); width: 100%; min-height: 0; margin-top: calc(var(--u) * 3); }
.pick { display: grid; grid-template-columns: auto 1fr; grid-template-rows: minmax(0, 1fr) auto auto auto; column-gap: calc(var(--u) * 1.1); min-height: 0; color: inherit; text-decoration: none; outline: none; }
.pk-media { grid-column: 1 / -1; display: grid; place-items: center start; min-height: 0; padding-bottom: calc(var(--u) * 1.6); container-type: size; }
.pk-media img { width: auto; max-width: 100cqw; height: 100cqh; object-fit: contain; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.pick:hover .pk-media img, .pick:focus-visible .pk-media img { transform: translateY(calc(var(--u) * -.8)) rotate(-1deg); }
.pk-num { grid-row: 2 / 4; margin: 0; padding-top: calc(var(--u) * .6); color: var(--pink); font: 500 calc(var(--u) * .85)/1 var(--mono); letter-spacing: .06em; }
.pk-name { margin: 0; font: 700 calc(var(--u) * 3.8)/1 var(--sans); letter-spacing: -.05em; }
.pk-name span { position: relative; display: inline-block; }
/* a pink pencil line draws under the name when it is pointed at */
.pk-under { position: absolute; left: -2%; top: 100%; width: 104%; height: auto; overflow: visible; }
.pk-under .pen { opacity: 0; stroke-width: 2.4; transition: stroke-dashoffset .6s cubic-bezier(.6, 0, .3, 1), opacity 0s linear .6s; }
.on .pk-under .pen { stroke-dashoffset: 1; }
.on .pick:hover .pk-under .pen, .on .pick:focus-visible .pk-under .pen { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .6s cubic-bezier(.6, 0, .3, 1), opacity 0s; }
.pk-line { grid-column: 2; min-height: 2.8em; max-width: 24em; margin: calc(var(--u) * 1.2) 0 0; color: var(--mute); font-size: calc(var(--u) * 1.3); line-height: 1.4; }
.pk-go { grid-column: 2; display: inline-flex; align-items: center; gap: calc(var(--u) * .5); margin-top: calc(var(--u) * 1.4); font: 500 calc(var(--u) * .78)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: color .3s; }
.pk-arrow { width: calc(var(--u) * 2.6); overflow: visible; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.pk-arrow .pen { stroke-dashoffset: 0; opacity: 1; transition: none; }
.pk-arrow .pen-head { opacity: 1; }
.pick:hover .pk-arrow, .pick:focus-visible .pk-arrow { transform: translateX(calc(var(--u) * .6)); }
.pick:hover .pk-go, .pick:focus-visible .pk-go { color: var(--pink); }
.ch-foot { margin-top: calc(var(--u) * 2.4); }

@media (orientation: portrait), (max-width: 760px) {
  .choose .stage { padding: 96px 20px 48px !important; }
  .ch-title { font-size: 34px; }
  .ch-row { grid-template-columns: 1fr; gap: 56px; margin-top: 40px; }
  .pk-media { container-type: normal; padding-bottom: 18px; }
  .pk-media img { width: 100%; height: auto; max-width: 420px; }
  .pk-num { font-size: 12px; }
  .pk-name { font-size: 40px; }
  .pk-line { font-size: 16px; }
  .pk-go { font-size: 11px; }
  .pk-arrow { width: 34px; }
  .ch-foot { margin-top: 56px; font-size: 10px; }
}