/* Card Colosseum: the home feed.
   A store rail (the hero) beside a feed of tall picture tiles, black and gold.
   The kit's motion layer (kit/motion/motion.css) does every hover and press: page CSS never sets a .btn's
   transform or transition. The tokens it reads (--bg, --ink, --action, ...) are mapped to the brand below. */

:root {
  /* brand */
  --black: #0b0b0d;
  --well: #1c1c21;
  --well-2: #24242a;
  --gold: #d4a24e;
  --gold-hi: #f2c574;
  --cream: #f6ecd9;
  --mute: #b9ae99;
  --rule: rgb(212 162 78 / .26);
  --rule-strong: rgb(212 162 78 / .55);

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-text: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-weight: 600;
  --display-tracking: 0;

  /* the kit's names */
  --bg: var(--black);
  --ink: var(--cream);
  --accent: var(--gold-hi);
  --action: var(--gold);
  --action-ink: var(--black);
  --line-strong: var(--rule-strong);
  --card: var(--black);
  --r-btn: 999px;
  --s-2: 8px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-h2: clamp(24px, .762vw + 21px, 32px);

  /* layout */
  --gutter: 16px;
  --gap: 12px;
  --rail: 250px;
  --radius: 12px;
  --bar: 0px;

  color-scheme: dark;
}
@media (min-width: 641px) { :root { --gutter: 32px; --gap: 20px; --radius: 16px; } }
@media (max-width: 640px) { :root { --bar: calc(64px + env(safe-area-inset-bottom, 0px)); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--well-2) var(--black); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-text);
  caret-color: var(--gold-hi);
  padding-bottom: var(--bar);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: var(--black); }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0; top: 8px; z-index: 20;
  padding: 10px 16px; border-radius: 999px; background: var(--gold); color: var(--black); font-weight: 600;
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }

/* the gutter is the margin, so the .wrap box itself is the content edge, left and right */
.wrap {
  --side: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  width: min(1200px, 100% - 2 * var(--side));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--r-btn);
  font: 600 15px/1 var(--font-text); white-space: nowrap; cursor: pointer;
}
.btn--primary { background: var(--action); color: var(--action-ink); }

/* ---------------------------------------------------------------- top bar */
.bar { border-bottom: 1px solid var(--rule); }
.bar__in { position: relative; display: flex; align-items: center; gap: 16px; min-height: 68px; padding-block: 12px; }
.mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 800 20px/1 var(--font-display); color: var(--gold-hi); white-space: nowrap; }
.mark img { width: 44px; height: 43px; }
.bar__trade { margin-left: auto; font: 600 15px/1.4 var(--font-display); color: var(--gold); letter-spacing: .04em; white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- page grid */
.layout {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: 48px;
}

/* ---------------------------------------------------------------- the rail (the hero) */
.rail {
  align-self: start;
  display: flex; flex-direction: column; gap: 20px;
  padding-block: 40px;
}
@media (min-width: 901px) and (min-height: 820px) { .rail { position: sticky; top: 0; } }
.rail__brand { font: 600 16px/1.45 var(--font-display); color: var(--gold-hi); text-wrap: balance; }
.rail__visit { display: flex; flex-direction: column; gap: 2px; font-size: 16px; color: var(--mute); }
.rail__visit > span:first-child { color: var(--cream); }
.nowrap { white-space: nowrap; }
.games__h { margin-bottom: 4px; font: 600 15px/1.4 var(--font-text); color: var(--gold); }
.rail__games ul { border-top: 1px solid var(--rule); }
.rail__games li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.feed__games { display: none; }

/* ---------------------------------------------------------------- the feed */
.feed { min-width: 0; padding-block: 40px 72px; outline: none; }
.feed__h { margin-bottom: 20px; font: 800 24px/1.15 var(--font-display); }
.feed__grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px var(--gap);
  --tile-h: calc((100cqi - 2 * var(--gap)) / 3 * 4 / 3);
}
.feed__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.feed__item.is-wide { grid-column: span 2; }

.tile { display: flex; flex-direction: column; gap: 10px; border-radius: var(--radius); }
.tile__src { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--mute); }
.tile__src-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile__icon { width: 18px; height: 18px; flex: none; color: var(--gold); }
.tile__out { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--mute); transition: color 150ms var(--ease), transform 150ms var(--ease); }
a.tile:hover .tile__out, a.tile:focus-visible .tile__out { color: var(--gold-hi); transform: translate(2px, -2px); }
.tile__media {
  position: relative; display: block; overflow: hidden;
  height: var(--tile-h);
  border-radius: var(--radius);
  background: var(--well);
  transition: box-shadow 150ms var(--ease);
}
.tile__media > img {
  width: 100%; height: 100%;
  object-fit: var(--fit, cover); object-position: var(--focus, 50% 30%);
  object-view-box: var(--crop, none);
}
a.tile:hover .tile__media, a.tile:focus-visible .tile__media { box-shadow: 0 0 0 2px var(--gold); }
a.tile:focus-visible { outline-offset: 6px; }

.tile__media--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.tile__media--split > img { grid-column: 2; grid-row: 1; }
.tile__feature {
  grid-column: 1; grid-row: 1; align-self: end;
  padding: 28px;
  font: 800 clamp(44px, 6.4cqi, 76px)/.95 var(--font-display);
  color: var(--gold-hi); font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
/* Event: the whole banner centred across the well, the title in the bar above it and the date in the bar
   below (three rows: bar, banner at its own ratio, bar). Nothing is cropped or stretched. */
.tile__media--framed { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); }
.tile__media--framed > img { grid-row: 2; height: auto; }
.tile__kicker {
  grid-row: 1; align-self: center; padding: 0 28px;
  font: 600 clamp(15px, 2.6cqi, 26px)/1.15 var(--font-display); color: var(--cream); text-wrap: balance;
}
.tile__media--framed .tile__feature { grid-row: 3; grid-column: auto; align-self: center; padding: 0 28px; }
@media (max-width: 640px) { .tile__kicker, .tile__media--framed .tile__feature { padding: 0 16px; } }
.tile__media--type { container-type: inline-size; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px; padding: 22px; box-shadow: inset 0 0 0 1px var(--rule); }
a.tile:hover .tile__media--type, a.tile:focus-visible .tile__media--type { box-shadow: inset 0 0 0 1px var(--rule), 0 0 0 2px var(--gold); }
/* League and Socials: the inscription fills the well, in cream */
.tile__type { font: 800 clamp(26px, 16cqi, 56px)/1.02 var(--font-display); color: var(--cream); text-wrap: balance; }
/* Directions: the page's type moment, the street number set like the event date */
.tile__numeral { font: 800 clamp(32px, 26cqi, 120px)/.9 var(--font-display); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
@media (min-width: 641px) { .tile__numeral { font-size: clamp(56px, 34cqi, 120px); } }
.tile__media--place .tile__type { font-size: clamp(18px, 9cqi, 30px); font-weight: 600; color: var(--cream); }
/* Directions: Google's map of the store behind the words. The frame runs 30% above the well so the pin
   (always at the frame's centre) sits in the upper third, clear of the words, and Google's place card is
   clipped; the frame's bottom stays on the well's bottom so Google's logo and terms remain visible.
   The map fills the whole well; a faint wash at the foot and a dark halo around the letters keep the
   words readable without boxing them in. The map is inert: the whole tile is the link. */
.tile__map { position: absolute; left: 0; top: -30%; width: 100%; height: 130%; border: 0; pointer-events: none; }
.tile__media--map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(11 11 13 / .55) 0%, rgb(11 11 13 / .3) 22%, rgb(11 11 13 / 0) 45%);
}
.tile__media--map > span {
  position: relative; z-index: 1;
  text-shadow: 0 0 2px rgb(11 11 13), 0 0 10px rgb(11 11 13 / .95), 0 0 24px rgb(11 11 13 / .8);
}

.tile__title { font: 600 17px/1.35 var(--font-text); color: var(--cream); text-wrap: balance; }
.tile__meta { font-size: 14px; line-height: 1.5; color: var(--mute); }
.tile__meta b { font-weight: 600; color: var(--gold-hi); }

.is-off .tile__media > img { filter: grayscale(.9) brightness(.5); }
.is-off .tile__meta b, .is-off .tile__icon { color: var(--mute); }
.tile__note { font-size: 14px; line-height: 1.5; color: var(--mute); padding-top: 10px; border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- the statement (word-highlight moment) */
.statement {
  grid-column: 1 / -1;
  padding-block: 72px 88px;
  border-top: 1px solid var(--rule);
}
.statement .mo-wh__text { max-width: 30em; font-family: var(--font-text); font-weight: 500; font-size: clamp(20px, 1.1vw + 12px, 26px); line-height: 1.45; letter-spacing: 0; }
.statement .mo-wh__text a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color 150ms var(--ease); }
.statement strong { font-weight: inherit; color: var(--gold-hi); }
.statement .mo-wh__text a:hover { text-decoration-color: var(--gold-hi); }
.statement__btn { margin-top: 28px; }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--rule); }
.foot__in {
  display: flex; flex-direction: column; gap: 6px;
  padding-block: 24px 40px;
  font-size: 14px; color: var(--mute);
}
.foot__trade { display: none; font: 600 15px/1.4 var(--font-display); color: var(--gold); letter-spacing: .04em; }
.foot a { color: var(--gold); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 150ms var(--ease); }
.foot a:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- phone action bar (system.js shows and hides it) */
.actionbar { display: none; }
@media (max-width: 640px) {
  .actionbar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--black);
    border-top: 1px solid var(--rule);
    transition: transform 200ms var(--ease), visibility 0s linear 0s;
  }
  .actionbar .btn { width: 100%; min-height: 48px; font-size: 16px; }
  .actionbar[data-bar="hidden"] { transform: translateY(100%); visibility: hidden; transition: transform 120ms var(--ease), visibility 0s linear 120ms; }
}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1100px) {
  :root { --rail: 220px; }
  .layout { column-gap: 32px; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; gap: 12px; padding-block: 24px 28px; }
  .feed { padding-top: 8px; }
  .rail__visit { flex-direction: row; flex-wrap: wrap; column-gap: 16px; }
  .rail__games { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  .rail__games .games__h { margin: 0; }
  .rail__games ul { display: contents; border: 0; }
  .rail__games li { padding: 0; border: 0; color: var(--mute); }
}

@media (max-width: 640px) {
  .bar__in { min-height: 64px; gap: 12px; }
  .bar__trade { display: none; }
  .foot__trade { display: block; }
  .rail { gap: 10px; padding-block: 20px 24px; }
  .rail__brand { font-size: 15px; }
  .rail__games { display: none; }
  .feed__games { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 48px; }
  .feed__games .games__h { width: 100%; margin: 0 0 2px; }
  .feed__games ul { display: contents; }
  .feed__games li { color: var(--mute); }
  .mark { font-size: 16px; gap: 8px; }
  .mark img { width: 37px; height: 36px; }
  .rail__visit { flex-direction: column; }
  .feed__h { font-size: 22px; margin-bottom: 16px; }
  .feed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; --tile-h: calc((100cqi - var(--gap)) / 2 * 4 / 3); }
  .feed__item.is-wide .tile__media { height: calc(100cqi * 10 / 16); }
  .tile__feature { padding: 16px; font-size: clamp(30px, 9cqi, 44px); }
  .tile__media--type { padding: 14px; }
  .tile__title { font-size: 15px; }
  .tile__src { font-size: 13px; }
  .statement { padding-block: 56px 64px; }
  .foot__in { flex-direction: column; padding-block: 24px 32px; }
}

@media (max-width: 360px) {
  .mark span { font-size: 15px; }
}