/* Arena Journey season hub (landing): a crest, the name, the year, the season facts and five doors, framed by the
   viewport brackets over the player's top champion art. The whole hub fits one viewport from 1280x800 up. Entrance:
   crest from scale .8, then name, title and facts, then the doors 120ms apart (the .j-appear classes, --d delays). */

.j-page-landing .j-main {
  min-height: calc(100vh - var(--j-topbar-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0 28px;
}

/* While the season loads only the loader shows; the hub enters once it is ready. */
.lp-hero[hidden],
.lp-cards[hidden] {
  display: none;
}

.lp-loading > .j-loader {
  min-height: calc(100vh - var(--j-topbar-h) - 60px);
}

.lp-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  text-align: center;
}

/* ---------- Crest: the Colosseum crest (crest.css) round the summoner icon, scaled with the viewport height ---------- */

.lp-crest {
  --crest-size: 200px;
  zoom: 0.62;
}

.lp-crest .j-crest__portrait img {
  animation: j-fade 0.6s var(--j-ease) both;
}

/* ---------- Name, plaque, year, meta ---------- */
/* The season is struck in metal: "Your Arena Season" is engraved on a small dark tab with cut corners, the year is
   cast in polished gold with a bevel and flanked by stacked blade wings, and the meta runs between slanted cuts. */

.lp-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 12px;
  max-width: 100%;
  margin-top: clamp(4px, 1.2vh, 16px);
}

.lp-name__main {
  margin: 0;
  font-family: var(--j-display);
  font-weight: 700;
  font-size: clamp(26px, 3.9vh, 40px);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--j-gold-25);
  text-shadow: 0 2px 0 rgba(var(--j-shadow-rgb), 0.9), 0 0 26px rgba(var(--j-gold-rgb), 0.22);
  overflow-wrap: anywhere;
}

.lp-name__tag {
  font-family: var(--j-display);
  font-size: clamp(18px, 2.4vh, 24px);
  color: #c4c7cc;
}

.lp-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(6px, 1.3vh, 18px);
}

/* The engraved tab. */
.lp-kicker {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 5px 16px 4px;
  font-family: var(--j-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--j-gold-150);
  text-shadow: 0 -1px 0 rgba(var(--j-shadow-rgb), 0.9);
  background:
    linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.95), rgba(var(--j-coal-800-rgb), 0.92));
  box-shadow: inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.45), inset 0 2px 4px rgba(var(--j-shadow-rgb), 0.9), inset 0 -1px 0 rgba(var(--j-plat-rgb), 0.12);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
}

/* The year: polished gold lit from above with a bright lip and a dark foot, standing between two blade wings. */
.lp-year {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin: 2px 0 0;
  font-family: var(--j-display);
  font-weight: 700;
  font-size: clamp(52px, 9vh, 112px);
  line-height: 1;
  letter-spacing: 0.02em;
}

.lp-year::before,
.lp-year::after {
  content: "";
  flex: none;
  width: clamp(64px, 8vw, 110px);
  height: 0.34em;
  background:
    linear-gradient(180deg, var(--j-gold-100), var(--j-gold-300) 50%, var(--j-gold-600)) 0 0 / 100% 22% no-repeat,
    linear-gradient(180deg, var(--j-gold-200), var(--j-gold-500)) 26% 50% / 74% 18% no-repeat,
    linear-gradient(180deg, var(--j-gold-300), var(--j-gold-600)) 52% 100% / 48% 16% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(var(--j-shadow-rgb), 0.9)) drop-shadow(0 0 10px rgba(var(--j-gold-rgb), 0.3));
  transform: skewX(-40deg);
}

.lp-year::after {
  transform: scaleX(-1) skewX(-40deg);
}

/* The digits get the metal from a clipped gradient; the lip, the foot and the glow come from drop-shadows. */
.lp-year__metal {
  display: inline-block;
  padding: 0.04em 0.02em 0.06em;
  background: linear-gradient(180deg, #fffbea 0%, var(--j-gold-100) 18%, var(--j-gold-150) 40%, var(--j-gold-400) 62%, var(--j-gold-200) 80%, var(--j-gold-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 3px 0 rgba(var(--j-gold-ink-rgb), 0.95)) drop-shadow(0 8px 14px rgba(var(--j-shadow-rgb), 0.8)) drop-shadow(0 0 30px rgba(var(--j-gold-rgb), 0.28));
}

.lp-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  margin: clamp(8px, 1.3vh, 14px) 0 0;
  font-family: var(--j-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4d6da;
  text-shadow: 0 1px 2px rgba(var(--j-shadow-rgb), 0.9);
}

/* Slanted gold cuts between the meta items. */
.lp-meta .j-diamond {
  width: 3px;
  height: 13px;
  vertical-align: middle;
  background: linear-gradient(180deg, var(--j-gold-150), var(--j-gold-500));
  transform: skewX(-24deg);
}

.lp-updated {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 30px;
  margin-top: clamp(6px, 1vh, 12px);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c4c7cc;
}

/* ---------- Season facts: one machined strip ---------- */
/* A raised gunmetal bar with chamfered ends and a lit top edge; the six facts sit in cells split by milled grooves.
   The ArenaSweats rating cell is a raised gold plate in the middle of the bar. */

.lp-facts.j-stats {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: clamp(8px, 1.4vh, 18px);
  padding: 0 14px;
  background:
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.13), rgba(var(--j-plat-rgb), 0.02) 55%, rgba(var(--j-plat-rgb), 0)),
    linear-gradient(180deg, rgba(var(--j-coal-700-rgb), 0.94), rgba(var(--j-coal-900-rgb), 0.96));
  box-shadow: inset 0 1px 0 rgba(var(--j-plat-rgb), 0.3), inset 0 -3px 0 rgba(var(--j-shadow-rgb), 0.6), inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.22);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

.lp-facts > .j-stat {
  position: relative;
  flex: 0 0 auto;
  min-width: 108px;
  padding: 9px 22px 10px;
  border: 0;
  align-items: center;
  text-align: center;
}

/* Milled groove: a dark cut with a lit edge. */
.lp-facts > .j-stat + .j-stat::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 2px;
  background: linear-gradient(90deg, rgba(var(--j-shadow-rgb), 0.9) 50%, rgba(var(--j-plat-rgb), 0.14) 50%);
}

.lp-facts .j-stat__value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 700;
  text-shadow: 0 -1px 0 rgba(var(--j-shadow-rgb), 0.7), 0 2px 5px rgba(var(--j-shadow-rgb), 0.8);
}

.lp-facts .j-stat__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #c4c7cc;
}

.lp-facts .j-stat--gold .j-stat__value,
.lp-facts .j-stat--prism .j-stat__value {
  color: var(--j-gold-150);
}

/* The rating: a raised gold-lit plate set into the bar. */
.lp-facts > .j-stat:has(.lp-fact__crest) {
  background:
    linear-gradient(180deg, rgba(var(--j-gold-rgb), 0.3), rgba(var(--j-gold-rgb), 0.06) 70%),
    linear-gradient(180deg, rgba(var(--j-coal-600-rgb), 1), rgba(var(--j-coal-800-rgb), 1));
  box-shadow: inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.75), inset 0 2px 0 rgba(var(--j-plat-rgb), 0.25), 0 0 18px rgba(var(--j-gold-rgb), 0.25);
}

.lp-facts > .j-stat:has(.lp-fact__crest)::before,
.lp-facts > .j-stat:has(.lp-fact__crest) + .j-stat::before {
  display: none;
}

.lp-fact__crest {
  width: 28px;
  height: 28px;
}

/* ---------- Doors: a rack of slanted blades ---------- */
/* The five doors stand as one rack of tall blades leaning on the same slant as the Wrap's progress blades. Each blade
   has a lit gold spine down its leading edge, its art counter-slanted to stay upright, the seal in its upper third
   and, at the foot, a dark hilt holding the title and a raised gold keycap to enter. Hover: the blade rises, its gold
   rim fades in and the other blades dim (transform and opacity only). */

.lp-cards {
  --lean: -9deg;
  --unlean: 9deg;
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(14px, 3vh, 40px);
  padding: 0 40px;
}

.j-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: min(23vh, 270px, calc((100vw - 8rem - 4 * clamp(12px, 1.4vw, 20px)) / 5));
  aspect-ratio: 2 / 3.1;
  padding: 0 16px clamp(14px, 2.4vh, 22px);
  overflow: hidden;
  background: var(--j-coal-950);
  box-shadow: inset 0 0 0 1px rgba(var(--j-plat-rgb), 0.14), 0 24px 30px -14px rgba(var(--j-shadow-rgb), 0.9);
  text-align: center;
  container-type: inline-size;
  transform: skewX(var(--lean));
  transition: transform var(--j-dur) var(--j-ease-out);
}

/* The gold spine down the leading edge, and the gold rim shown on hover. */
.j-card::before,
.j-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.j-card::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--j-gold-100), var(--j-gold-300) 30%, var(--j-gold-600) 70%, var(--j-gold-200));
  box-shadow: 0 0 10px rgba(var(--j-gold-rgb), 0.6);
  opacity: 0.75;
  transition: opacity var(--j-dur) var(--j-ease-out);
}

.j-card::after {
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--j-gold-300), inset 0 0 26px rgba(var(--j-gold-rgb), 0.28);
  opacity: 0;
  transition: opacity var(--j-dur) var(--j-ease-out);
}

/* Art: counter-slanted so it stands upright, and scaled to fill the leaning blade. */
.j-card__art {
  position: absolute;
  inset: 0 -30%;
  background-size: cover;
  background-position: center 30%;
  opacity: 0.66;
  filter: saturate(0.9) brightness(var(--art-lift, 1)); /* --art-lift: core.js liftDarkArt, for dark splash art */
  transform: skewX(var(--unlean));
  transition: transform var(--j-dur-slow) var(--j-ease-out), opacity var(--j-dur-slow) var(--j-ease-out);
}

.j-card__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(var(--j-plat-rgb), 0.1), rgba(var(--j-plat-rgb), 0) 30%),
    linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.3) 0%, rgba(var(--j-ink-rgb), 0.08) 25%, rgba(var(--j-ink-rgb), 0.5) 55%, rgba(var(--j-ink-rgb), 0.96) 100%);
}

/* A band of light that crosses the blade once on hover (transform only). */
.j-card__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, rgba(var(--j-light-rgb), 0), rgba(var(--j-light-rgb), 0.2), rgba(var(--j-light-rgb), 0));
  opacity: 0;
  transition: transform var(--j-dur-slow) var(--j-ease-out), opacity var(--j-dur-slow) var(--j-ease-out);
  pointer-events: none;
}

/* The seal stands upright in the upper third of the blade. */
.j-card__badge {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%) skewX(var(--unlean));
  filter: drop-shadow(0 6px 10px rgba(var(--j-shadow-rgb), 0.9)) drop-shadow(0 0 14px rgba(var(--j-gold-rgb), 0.3));
  transition: transform var(--j-dur) var(--j-ease-out);
}

.j-card__badge.j-seal {
  --size: clamp(50px, 7vh, 66px);
  background: linear-gradient(160deg, var(--j-gold-100), var(--j-gold-300) 32%, var(--j-gold-600) 60%, var(--j-gold-200) 85%);
}

.j-card__badge.j-seal::before {
  inset: 2px;
  background:
    radial-gradient(80% 60% at 40% 25%, rgba(var(--j-plat-rgb), 0.18), rgba(var(--j-plat-rgb), 0) 70%),
    linear-gradient(180deg, var(--j-coal-600), var(--j-coal-900));
}

.j-card__badge .j-i {
  color: var(--j-gold-150);
}

/* The hilt: a dark band across the foot of the blade with a gold top edge; the title, subtitle and keycap inside,
   counter-slanted to read upright. */
.j-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% + 32px);
  min-width: 0;
  margin: 0 -16px calc(clamp(14px, 2.4vh, 22px) * -1);
  padding: clamp(12px, 1.8vh, 18px) 16px clamp(14px, 2.4vh, 22px);
  background:
    linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.1), var(--j-gold-300) 20%, var(--j-gold-300) 80%, rgba(var(--j-gold-rgb), 0.1)) 0 0 / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(var(--j-plat-rgb), 0.08), rgba(var(--j-plat-rgb), 0) 40%),
    linear-gradient(180deg, rgba(var(--j-coal-800-rgb), 0.88), rgba(var(--j-ink-rgb), 0.96));
  --title-size: min(clamp(19px, 2.6vh, 28px), 11cqi);
}

.j-card__body > * {
  transform: skewX(var(--unlean));
}

.j-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--title-size) * 1.2);
  font-family: var(--j-display);
  font-weight: 700;
  font-size: var(--title-size);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--j-gold-25);
  text-shadow: 0 2px 6px rgba(var(--j-shadow-rgb), 0.9), 0 0 18px rgba(var(--j-gold-rgb), 0.2);
}

.j-card__title--long {
  font-size: min(calc(var(--title-size) * 0.86), 9cqi);
  letter-spacing: 0.04em;
}

/* The ArenaSweats wordmark (the header logo's faces and colours), sized to the title box. */
.j-card__title--brand {
  letter-spacing: 0;
  text-transform: none;
}

.j-card__title--brand .j-brand__arena {
  font-size: min(calc(var(--title-size) * 1.08), 10.4cqi);
}

.j-card__title--brand .j-brand__sweats {
  font-size: min(calc(var(--title-size) * 0.88), 8.45cqi);
  animation: none;
}

.j-card:hover .j-card__title--brand .j-brand__sweats {
  animation: j-bounce 2.8s ease-in-out infinite;
}

.j-card__sub {
  --sub-line: 1.35em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: calc(2 * var(--sub-line));
  margin: clamp(4px, 0.8vh, 8px) 0 0;
  font-size: clamp(11.5px, 1.4vh, 13.5px);
  line-height: var(--sub-line);
  color: #d4d6da;
}

/* Enter: a raised gold keycap (a lit face on a darker skirt) that presses down on click. */
.j-card__enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: min(112px, 100%);
  height: 28px;
  margin-top: clamp(8px, 1.3vh, 13px);
  margin-bottom: 3px;
  padding: 0 14px 0 18px;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(var(--j-gold-rgb), 0.3), rgba(var(--j-gold-rgb), 0.06) 70%),
    linear-gradient(180deg, rgba(var(--j-coal-600-rgb), 1), rgba(var(--j-coal-800-rgb), 1));
  box-shadow: inset 0 0 0 1px rgba(var(--j-gold-rgb), 0.7), inset 0 2px 0 rgba(var(--j-plat-rgb), 0.22), 0 3px 0 rgba(var(--j-gold-rgb), 0.35), 0 5px 10px rgba(var(--j-shadow-rgb), 0.8);
  font-family: var(--j-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--j-gold-150);
}

/* The lit gold face, faded in on hover. */
.j-card__enter::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--j-gold-100), var(--j-gold-300) 55%, var(--j-gold-500));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
  opacity: 0;
  transition: opacity var(--j-dur-fast) var(--j-ease-std);
}

.j-card__enter-label,
.j-card__enter .j-i {
  position: relative;
}

.j-card__enter .j-i {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
  transition: transform var(--j-dur) var(--j-ease-std);
}

.lp-cards:hover .j-card:not(:hover) .j-card__art {
  opacity: 0.32;
}

.j-card:hover,
.j-card:focus-visible {
  transform: skewX(var(--lean)) translateY(-10px);
  outline: none;
}

.j-card:hover::before,
.j-card:hover::after,
.j-card:focus-visible::before,
.j-card:focus-visible::after {
  opacity: 1;
}

.j-card:hover .j-card__art,
.j-card:focus-visible .j-card__art {
  opacity: 0.85;
  transform: skewX(var(--unlean)) scale(1.07);
}

.j-card:hover .j-card__sheen,
.j-card:focus-visible .j-card__sheen {
  opacity: 1;
  transform: translateX(420%);
}

.j-card:hover .j-card__badge,
.j-card:focus-visible .j-card__badge {
  transform: translateX(-50%) skewX(var(--unlean)) translateY(-4px) scale(1.06);
}

.j-card:hover .j-card__enter,
.j-card:focus-visible .j-card__enter {
  color: var(--j-gold-ink);
}

.j-card:hover .j-card__enter::before,
.j-card:focus-visible .j-card__enter::before {
  opacity: 1;
}

.j-card:hover .j-card__enter .j-i,
.j-card:focus-visible .j-card__enter .j-i {
  transform: translateX(3px);
}

.j-card:active .j-card__enter {
  transform: skewX(var(--unlean)) translateY(2px);
}

/* The ArenaSweats emblem stands where the other doors have their seal. */
.j-card__logo {
  position: absolute;
  top: 21%;
  left: 50%;
  width: clamp(58px, 8vh, 76px);
  height: auto;
  transform: translateX(-50%) skewX(var(--unlean));
  filter: drop-shadow(0 6px 10px rgba(var(--j-shadow-rgb), 0.9)) drop-shadow(0 0 12px rgba(var(--j-gold-rgb), 0.25));
  transition: transform var(--j-dur) var(--j-ease-out);
}

.j-card:hover .j-card__logo {
  transform: translateX(-50%) skewX(var(--unlean)) translateY(-4px) scale(1.06);
}

/* The ArenaSweats door (back to the main site) carries a quiet crimson floor light. */
.j-card--as .j-card__shade {
  background:
    radial-gradient(90% 34% at 50% 104%, rgba(var(--j-red-rgb), 0.32), rgba(var(--j-red-rgb), 0) 70%),
    linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.3) 0%, rgba(var(--j-ink-rgb), 0.08) 25%, rgba(var(--j-ink-rgb), 0.5) 55%, rgba(var(--j-ink-rgb), 0.96) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .j-card__sheen { display: none; }
  .j-card:hover,
  .j-card:focus-visible { transform: skewX(var(--lean)); }
}
/* ---------- Heights and widths ---------- */

/* The crest scales with the viewport height (the header takes 110px on journey pages). */
@media (min-height: 900px) {
  .lp-crest { zoom: 0.7; }
}

@media (min-height: 1040px) {
  .lp-crest { zoom: 0.8; }
}

@media (min-height: 1180px) {
  .lp-crest { zoom: 1; }
}

@media (max-width: 1000px) {
  .lp-cards {
    --lean: -6deg;
    --unlean: 6deg;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%; /* the cards contain their inline size, so the grid must not shrink to fit them */
    max-width: 640px;
    margin-inline: auto;
    padding: 0 28px 24px;
  }
  .j-card {
    width: auto;
    aspect-ratio: 16 / 10;
  }
  .j-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 32 / 10;
  }
  .j-card__badge,
  .j-card__logo {
    top: 14%;
  }
}

@media (max-width: 560px) {
  .lp-cards {
    --lean: -5deg;
    --unlean: 5deg;
    grid-template-columns: 1fr;
    padding: 0 22px 24px;
  }
  /* A row: the seal, the title over a one-line subtitle, and the keycap as a short chevron at the end. */
  .j-card,
  .j-card:last-child:nth-child(odd) {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    aspect-ratio: auto;
    height: 84px;
    padding: 0 16px 0 20px;
    text-align: left;
  }
  .j-card__shade {
    background: linear-gradient(90deg, rgba(var(--j-ink-rgb), 0.92) 0%, rgba(var(--j-ink-rgb), 0.55) 100%);
  }
  .j-card__badge,
  .j-card__logo {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    transform: skewX(var(--unlean));
  }
  .j-card:hover .j-card__badge,
  .j-card:hover .j-card__logo {
    transform: skewX(var(--unlean)) scale(1.06);
  }
  .j-card__badge.j-seal {
    --size: 44px;
  }
  .j-card__logo {
    width: 48px;
  }
  .j-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
    width: auto;
    flex: 1;
    margin: 0;
    padding: 0;
    background: none;
    --title-size: 20px;
  }
  .j-card__title {
    justify-content: flex-start;
    height: 24px;
  }
  .j-card__title--long {
    font-size: 18px;
  }
  .j-card__sub {
    grid-column: 1;
    height: auto;
    margin-top: 4px;
    font-size: 12.5px;
    -webkit-line-clamp: 1;
  }
  .j-card__enter {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
    width: 34px;
    height: 32px;
    margin: 0 4px 0 0;
    padding: 0;
  }
  .j-card__enter-label {
    display: none;
  }
}

/* Too narrow for one row: the strip becomes two rows of three cells, the second row under a milled seam. */
@media (max-width: 700px) {
  .lp-facts.j-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100% - 8px);
    padding: 0;
  }
  .lp-facts > .j-stat { min-width: 0; padding: 10px 4px 11px; }
  .lp-facts > .j-stat:nth-child(3n + 1)::before { display: none; }
  .lp-facts > .j-stat:nth-child(n + 4) { box-shadow: inset 0 1px 0 rgba(var(--j-shadow-rgb), 0.8), inset 0 2px 0 rgba(var(--j-plat-rgb), 0.08); }
  .lp-facts .j-stat__value { font-size: 22px; }
  .lp-year::before,
  .lp-year::after { width: 48px; }
}