* { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--page-background, #090807);
}

body {
  display: grid;
  place-items: center;
}

.stage {
  --page-enter-duration: 300ms;
  --page-exit-duration: 180ms;
  --page-column-stagger: 50ms;
  --page-transition-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --page-transition-travel: 4%;
  position: relative;
  width: min(100vw, 177.7778vh);
  height: min(56.25vw, 100vh);
  overflow: hidden;
  background-color: var(--stage-background, #f4e9d2);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--ink, #17120f);
  font-family: var(--display-family, sans-serif);
  font-size: min(var(--stage-font-vw, 1.66vw), var(--stage-font-vh, 2.95vh));
  font-variant-numeric: tabular-nums;
}

.board {
  position: absolute;
  inset: var(--board-inset);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--column-gap, 2%);
}

.board::after {
  content: "";
  position: absolute;
  inset-block: var(--divider-inset, 2%);
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, var(--divider-color, transparent) 8% 92%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.column {
  --rows: 5;
  display: grid;
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
}

.column.has-reserved-rows {
  grid-template-rows:
    repeat(var(--live-rows), var(--sparse-row-height, minmax(0, 1fr)))
    repeat(var(--empty-rows), var(--sparse-empty-row-height, minmax(0, 1fr)));
}

.board.is-balanced-sparse .column.has-reserved-rows {
  grid-template-rows:
    repeat(var(--live-rows), var(--sparse-row-height, 1.3fr))
    repeat(var(--empty-rows), var(--sparse-empty-row-height, .4fr));
}

.beer-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--row-columns, 9% minmax(0, 1fr) 13%);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: var(--row-padding, 0);
}

.beer-row::after {
  content: "";
  position: absolute;
  inset-inline: 1.5%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--row-divider-color, transparent) 8% 92%, transparent);
}

.beer-row:last-child::after { display: none; }
.beer-row > .cell { line-height: 1.2; }

.cell.tap {
  display: grid;
  place-items: center;
  min-width: 0;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cell.name {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: var(--name-data-gap, .24em);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: var(--name-padding, 0);
}

.art-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.name-art {
  display: block;
  width: 100%;
  height: var(--art-height, 3em);
  object-fit: contain;
  object-position: left center;
}

.beer-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-region {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--data-gap, 1em);
  min-width: 0;
  overflow: hidden;
  margin-left: var(--data-inset, 1em);
  color: var(--metadata-color, currentColor);
  font-family: var(--metadata-family, sans-serif);
  font-size: var(--metadata-size, .75em);
  font-weight: var(--metadata-weight, 700);
  letter-spacing: var(--metadata-tracking, .04em);
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0.75;
}

.data-region > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.data-region > .style {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-region > * + *::before {
  content: var(--data-separator, "");
  margin-right: var(--separator-gap, 0);
  color: var(--separator-color, currentColor);
}

.cell.price {
  display: grid;
  place-items: center end;
  min-width: 0;
  padding-right: var(--price-inset, 1em);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.cents {
  color: var(--cents-color, currentColor);
  font-size: .58em;
  font-weight: 500;
  letter-spacing: .06em;
  margin-left: .14em;
  vertical-align: .12em;
}

.price-rate .rate-unit {
  color: var(--cents-color, currentColor);
  font-size: .55em;
  font-weight: 700;
  letter-spacing: .02em;
  margin-left: .12em;
  vertical-align: .14em;
}

.loading,
.error {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  font-family: var(--display-family, sans-serif);
  text-transform: uppercase;
}