/* Pickle Arcade: the hall.
 *
 * An editorial lobby: a headline, the arcade's live figures, the arena as the
 * one featured door, then the other seven cabinets as a ruled list. No game
 * pictures, no canvas, no glow: type, rules and live numbers carry the page.
 * Each cabinet keeps its own colour, and only as a thin rule, a number and a
 * hover tint. The --arc-light a row reads is set by the .arc-* modifier
 * classes in arcade.css, which loads before this sheet. */

.hall {
  --hall-line: rgb(255 255 255 / 10%);
  --hall-line-soft: rgb(255 255 255 / 6%);
  --hall-ink-2: var(--pickle-muted);
  --hall-ink-3: var(--pickle-subtle);
  --hall-num-font: var(--pickle-font-display);
  display: grid;
  gap: clamp(3.5rem, 8vw, 7rem);
}

.hall .hall-tick,
.hall .hall-fig-n,
.hall .hall-big-n { font-variant-numeric: tabular-nums; }

/* A figure keeps its line while it waits, so the panel does not jump when the
   arcade answers. */
.hall .hall-fig-n,
.hall .hall-big-n { min-height: 1em; }

/* ==================================================================== hero */

.hall-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .hall-hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

.hall-hero-copy { min-width: 0; }

.hall-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  align-items: center;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  color: var(--hall-ink-2);
  font-size: var(--pickle-text-xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.hall-eyebrow-sep {
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--hall-line);
}

.hall-title {
  max-width: 11ch;
  margin: 0;
  color: var(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: clamp(2.9rem, 8.4vw, 6.6rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.hall-lede {
  max-width: 34rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  color: var(--hall-ink-2);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.hall-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* The live panel: a ruled ledger of three figures, the mini-block across the
   top because it is the one that never stops. */
.hall-live {
  border-top: 1px solid var(--hall-line);
}

.hall-live-head { padding: 1rem 0 .25rem; }

.hall-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.hall-fig {
  display: grid;
  gap: .5rem;
  align-content: start;
  min-width: 0;
  padding: 1.1rem 0 1.25rem;
  border-bottom: 1px solid var(--hall-line-soft);
}

.hall-fig:nth-child(3) { padding-left: 1.25rem; border-left: 1px solid var(--hall-line-soft); }
.hall-fig-wide { grid-column: 1 / -1; }

.hall-fig dt {
  color: var(--hall-ink-3);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.hall-fig-n {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--pickle-text);
  font-family: var(--hall-num-font);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
}

.hall-fig-wide .hall-fig-n { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }

.hall-fig-wait {
  color: var(--hall-ink-3);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-sm);
  font-weight: 400;
  letter-spacing: 0;
}

.hall-fig-unit {
  color: var(--hall-ink-2);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  font-weight: 400;
  letter-spacing: .08em;
}

/* The directory: one hairline a cabinet, as long as its share of the busiest
   room. Colour only on the bar and the name's hover, never a fill. */
.hall-board {
  display: grid;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.hall-board-link {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 3.5rem;
  gap: 1rem;
  align-items: center;
  min-height: var(--pickle-tap);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--hall-line-soft);
}

.hall-board-name {
  color: var(--hall-ink-2);
  font-size: var(--pickle-text-sm);
  font-weight: 500;
  transition: color var(--pickle-fast) var(--pickle-ease);
}

.hall-board-bar {
  position: relative;
  height: 2px;
  background: var(--hall-line-soft);
}

.hall-board-fill {
  --hall-share: 0;
  position: absolute;
  inset: 0;
  background: var(--arc-light);
  transform: scaleX(var(--hall-share));
  transform-origin: left;
  transition: transform .9s var(--pickle-ease);
}

.hall-board-n {
  color: var(--pickle-text);
  font-size: var(--pickle-text-sm);
  text-align: right;
}

.hall-board-n.idle { color: var(--hall-ink-3); font-size: var(--pickle-text-xs); }

.hall-board-link:hover .hall-board-name,
.hall-board-link:focus-visible .hall-board-name { color: var(--arc-light); }

.hall-board-link:focus-visible { outline: 2px solid var(--arc-light); outline-offset: 2px; }

/* ================================================================ statuses */

.hall-status {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  margin: 0;
  color: var(--hall-ink-2);
  font-size: var(--pickle-text-xs);
  line-height: 1.5;
}

.hall-status.live { color: var(--pickle-text); }
.hall-status.down { color: var(--hall-ink-3); }

.hall-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hall-ink-3);
  transform: translateY(-1px);
}

.hall-status.live .hall-dot { background: var(--pickle-mint); }
.hall-status.asking .hall-dot { background: var(--hall-ink-2); }
.hall-status.down .hall-dot { box-sizing: border-box; background: transparent; border: 1px solid var(--hall-ink-3); }

.hall-num {
  color: var(--arc-light, var(--hall-ink-2));
  font-size: var(--pickle-text-xs);
  letter-spacing: .08em;
}

/* ================================================================ the arena */

.hall-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--hall-line);
  border-top: 2px solid var(--arc-light);
  background: linear-gradient(180deg, rgb(0 231 136 / 4.5%), transparent 55%);
}

@media (min-width: 900px) {
  .hall-feature { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.hall-feature-copy {
  display: grid;
  align-content: start;
  justify-items: start;
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3rem);
}

.hall-tag {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  align-items: center;
  margin: 0;
  color: var(--hall-ink-2);
  font-size: var(--pickle-text-xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.hall-new {
  padding: .2rem .5rem;
  color: var(--pickle-mint-ink);
  font-weight: 600;
  letter-spacing: .12em;
  background: var(--arc-light);
  border-radius: var(--pickle-radius);
}

.hall-feature-name {
  margin: clamp(.75rem, 2vw, 1.25rem) 0 0;
  color: var(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: clamp(3.4rem, 11vw, 8.5rem);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.06em;
}

.hall-feature-pitch {
  max-width: 36rem;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  color: var(--hall-ink-2);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.hall-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 38rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  border-top: 1px solid var(--hall-line-soft);
}

.hall-rule {
  display: grid;
  gap: .35rem;
  align-content: start;
  min-width: 0;
  padding: .9rem 1rem 0 0;
}

.hall-rule + .hall-rule { padding-left: 1rem; border-left: 1px solid var(--hall-line-soft); }

.hall-rule dt {
  color: var(--hall-ink-3);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.hall-rule dd {
  margin: 0;
  color: var(--pickle-text);
  font-size: var(--pickle-text-md);
  font-weight: 500;
  line-height: 1.35;
}

.hall-feature-cta { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

.hall-feature-live {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.75rem;
  padding: 1.5rem clamp(1.25rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hall-line-soft);
}

.hall-feature-live .hall-status { padding-bottom: 1rem; border-bottom: 1px solid var(--hall-line-soft); }

.hall-feature-figs { display: grid; gap: 1.75rem; align-content: end; }

@media (min-width: 900px) {
  .hall-feature-live {
    padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
    border-top: 0;
    border-left: 1px solid var(--hall-line-soft);
  }
}

.hall-big { display: grid; gap: .5rem; min-width: 0; }

.hall-big-label {
  margin: 0;
  color: var(--hall-ink-3);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.hall-big-n {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--pickle-text);
  font-family: var(--hall-num-font);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}

.hall-big-note {
  max-width: 22rem;
  margin: 0;
  color: var(--hall-ink-3);
  font-size: var(--pickle-text-sm);
  line-height: 1.45;
}

/* ================================================================ the floor */

.hall-floor { min-width: 0; }

.hall-floor-head {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hall-line);
}

.hall-h2 {
  margin: 0;
  color: var(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -.035em;
}

.hall-floor-count {
  margin: 0;
  color: var(--hall-ink-3);
  font-size: var(--pickle-text-xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.hall-cabs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hall-cab { border-bottom: 1px solid var(--hall-line-soft); }

.hall-cab-link {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas:
    "num name"
    "num body"
    "num side";
  gap: .6rem 0;
  padding: 1.5rem 0;
  color: inherit;
  text-decoration: none;
  transition: background var(--pickle-fast) var(--pickle-ease);
}

/* The cabinet's colour, as one short rule at the row's edge. It runs the full
   row on hover and on focus, which is the only thing the light ever does. */
.hall-cab-link::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 0;
  width: 2px;
  background: var(--arc-light);
  transform: scaleY(.28);
  transform-origin: top;
  transition: transform .35s var(--pickle-ease);
}

.hall-cab-num {
  grid-area: num;
  padding: .45rem 0 0 .9rem;
  color: var(--arc-light);
  font-size: var(--pickle-text-xs);
  letter-spacing: .08em;
}

.hall-cab-name {
  grid-area: name;
  color: var(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  transition: color var(--pickle-fast) var(--pickle-ease);
}

.hall-cab-body { grid-area: body; display: grid; gap: .6rem; min-width: 0; }

.hall-cab-line {
  max-width: 40rem;
  color: var(--hall-ink-2);
  font-size: var(--pickle-text-md);
  line-height: 1.55;
  text-wrap: pretty;
}

.hall-cab-terms {
  color: var(--hall-ink-3);
  font-size: var(--pickle-text-xs);
  line-height: 1.55;
}

.hall-cab-side {
  grid-area: side;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding-top: .35rem;
}

.hall-cab-side .hall-status { flex: 1 1 14rem; min-width: 0; }

.hall-cab-cta {
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  min-height: var(--pickle-tap);
  color: var(--pickle-text);
  font-size: var(--pickle-text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.hall-arrow {
  flex: 0 0 auto;
  transition: transform .3s var(--pickle-ease);
}

.hall-cab-cta .hall-arrow { color: var(--arc-light); }

.hall-cab-link:hover,
.hall-cab-link:focus-visible { background: linear-gradient(90deg, rgb(255 255 255 / 3.5%), transparent 75%); }

.hall-cab-link:hover::before,
.hall-cab-link:focus-visible::before { transform: scaleY(1); }

.hall-cab-link:hover .hall-arrow,
.hall-cab-link:focus-visible .hall-arrow,
.hall-feature-cta:hover .hall-arrow,
.hall-step-link:hover .hall-arrow { transform: translateX(4px); }

.hall-cab-link:focus-visible { outline: 2px solid var(--arc-light); outline-offset: -2px; }

/* Tablet and up: number, name and pitch side by side. */
@media (min-width: 720px) {
  .hall-cab-link {
    grid-template-columns: 3.5rem minmax(9rem, 13rem) minmax(0, 1fr);
    grid-template-areas:
      "num name body"
      "num name side";
    gap: .75rem 1.5rem;
    padding: 1.9rem 0;
  }

  .hall-cab-link::before { top: 1.9rem; bottom: 1.9rem; }
  .hall-cab-num { padding-top: .55rem; }
}

/* Desktop: the live line and the way in get their own column. */
@media (min-width: 1180px) {
  .hall-cab-link {
    grid-template-columns: 3.5rem minmax(10rem, 13rem) minmax(0, 1fr) minmax(15rem, 19rem);
    grid-template-areas: "num name body side";
    align-items: start;
    gap: 0 2rem;
  }

  .hall-cab-side {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
    gap: .5rem;
    padding-top: .3rem;
  }

  .hall-cab-side .hall-status { flex: 0 0 auto; }
  .hall-cab-cta { min-height: 0; margin-top: auto; padding-top: .75rem; }
}

/* ================================================================ the steps */

.hall-steps { display: grid; gap: 1.5rem; }

.hall-step-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hall-line);
}

@media (min-width: 820px) {
  .hall-step-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hall-step + .hall-step { padding-left: 1.75rem; border-left: 1px solid var(--hall-line-soft); }
}

.hall-step {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: .6rem;
  min-width: 0;
  padding: 1.5rem 1.75rem 1.5rem 0;
  border-bottom: 1px solid var(--hall-line-soft);
}

@media (min-width: 820px) {
  .hall-step { border-bottom: 0; }
}

.hall-step .hall-num { color: var(--pickle-mint); }

.hall-step-name {
  margin: 0;
  color: var(--pickle-text);
  font-size: var(--pickle-text-lg);
  font-weight: 600;
  letter-spacing: -.02em;
}

.hall-step-text {
  max-width: 24rem;
  margin: 0;
  color: var(--hall-ink-2);
  font-size: var(--pickle-text-base);
  line-height: 1.55;
}

.hall-step-link {
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  justify-self: start;
  min-height: var(--pickle-tap);
  color: var(--pickle-text);
  font-size: var(--pickle-text-sm);
  font-weight: 500;
  text-decoration: none;
}

.hall-step-link .hall-arrow { color: var(--pickle-mint); }
.hall-step-link:hover { color: var(--pickle-mint-hi); }

.hall .hall-fineprint { max-width: 44rem; margin-top: 0; }

/* A tablet: the figures and the directory side by side under the headline. */
@media (min-width: 640px) and (max-width: 1023px) {
  .hall-live {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
  }

  .hall-live-head { grid-column: 1 / -1; }
  .hall-board { margin-top: 1rem; }
}

/* ================================================================== phones */
@media (max-width: 639px) {
  /* The page's own top padding is sized for a desktop fold; on a phone it
     would push the headline half a screen down. */
  .hall { margin-top: -2.5rem; }
  .hall-eyebrow { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .hall-eyebrow-sep { display: none; }

  .hall-rules { grid-template-columns: minmax(0, 1fr); }

  .hall-rule,
  .hall-rule + .hall-rule {
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: baseline;
    padding: .75rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--hall-line-soft);
  }
}

/* ================================================================== motion
 * Time-based and only for those who have not asked for stillness: the hero
 * rises in order, then the arena, then the floor row by row. Transform and
 * opacity only, and every element ends in its resting place, so a visitor who
 * never sees the motion loses nothing. The live dot breathes while asking. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hall-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes hall-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
  }

  @keyframes hall-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  .hall-eyebrow,
  .hall-title,
  .hall-lede,
  .hall-actions,
  .hall-live,
  .hall-feature,
  .hall-floor-head,
  .hall-cab {
    animation: hall-rise .8s var(--pickle-ease) both;
  }

  .hall-title { animation-delay: 60ms; }
  .hall-lede { animation-delay: 140ms; }
  .hall-actions { animation-delay: 200ms; }
  .hall-live { animation-delay: 260ms; }
  .hall-feature { animation-delay: 340ms; }
  .hall-floor-head { animation-delay: 420ms; }
  .hall-cab:nth-child(1) { animation-delay: 470ms; }
  .hall-cab:nth-child(2) { animation-delay: 520ms; }
  .hall-cab:nth-child(3) { animation-delay: 570ms; }
  .hall-cab:nth-child(4) { animation-delay: 620ms; }
  .hall-cab:nth-child(5) { animation-delay: 670ms; }
  .hall-cab:nth-child(6) { animation-delay: 720ms; }
  .hall-cab:nth-child(7) { animation-delay: 770ms; }

  .hall-eyebrow-sep { transform-origin: left; animation: hall-draw .9s var(--pickle-ease) 200ms both; }

  .hall-status.asking .hall-dot { animation: hall-breathe 1.4s ease-in-out infinite; }
}