/* ==========================================================================
   Atrie's Gaming Center | home page
   Direction: game-shop poster. Wide black type like the lettering on the
   lounge wall, square corners, quiet neutrals, the store's own photos.
   Pink is used as a few flat color blocks (hero photo, games strip, dialog) plus
   small accents (focus, underlines, today marker). Buttons stay ink. The store photos
   and the four logo glyph marks carry the color.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #F3F2F6;          /* lavender-grey, like the lounge walls */
  --bg-2: #E8E6EE;
  --ink: #121118;
  --ink-2: #4A4854;
  --line: rgba(18, 17, 24, .16);
  --edge: #121118;        /* strong borders (buttons, inputs) */
  --accent: #D63384;      /* muted magenta from the logo square, used sparingly */
  --on-accent: #121118;
  --accent-text: #AD1F63; /* passes AA as text on --bg */
  --open: #14864A;
  --scrim: rgba(12, 11, 16, .86);

  /* Logo glyph colors: marks only, never UI */
  --g-circle: #EF3340;
  --g-cross: #3C74F0;
  --g-square: #D23CCB;
  --g-triangle: #1FA85A;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 68px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Dark is the default theme. Light applies only when the visitor picks it. */
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #0F0E14;
  --bg-2: #17151E;
  --ink: #F2F0F7;
  --ink-2: #ABA8B8;
  --line: rgba(242, 240, 247, .14);
  --edge: #F2F0F7;
  --accent: #E0569A;
  --accent-text: #F07AB0;
  --open: #35E08A;
  --g-circle: #FF4D5A;
  --g-cross: #5B8CFF;
  --g-square: #E457DD;
  --g-triangle: #35E08A;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
svg { flex: none; }
a { color: inherit; }
ul[role="list"] { list-style: none; padding: 0; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.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 {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; font-weight: 700;
  border: 2px solid var(--edge);
}
.skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.display {
  font-weight: 900;
  font-stretch: 116%;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .94;
  text-wrap: balance;
}
.section-title { font-size: clamp(34px, 4.6vw, 62px); max-width: 16ch; }

.label {
  font-size: 13px;
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent-text);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  font-size: 15px; font-weight: 800; font-stretch: 110%;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--edge);
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 84%, var(--bg)); border-color: color-mix(in srgb, var(--ink) 84%, var(--bg)); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 13px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 2px solid var(--line); cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.icon-btn:hover { border-color: var(--edge); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 20px; height: 20px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 32px); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 44px; width: auto; }
/* transparent logo: white lettering on dark, ink lettering on light */
.brand .logo-on-light { display: none; }
:root[data-theme="light"] .brand .logo-on-dark { display: none; }
:root[data-theme="light"] .brand .logo-on-light { display: block; }
.nav { display: flex; gap: clamp(18px, 2vw, 28px); margin-left: auto; }
.nav a {
  position: relative;
  font-size: 14px; font-weight: 700; font-stretch: 108%;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  padding: 6px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.bar-actions { display: flex; align-items: center; gap: 12px; }
/* live open/closed status beside the logo */
.bar-status { gap: 8px; font-size: 14px; white-space: nowrap; }
.bar-status .status-when { color: var(--ink-2); font-weight: 600; }
.nav-shop { display: none; }

/* theme + menu icon swaps */
.theme-toggle .i-sun { display: none; }
:root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
:root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
.menu-toggle { display: none; }
.menu-toggle .i-x { display: none; }
.menu-toggle[aria-expanded="true"] .i-list { display: none; }
.menu-toggle[aria-expanded="true"] .i-x { display: block; }

/* nav collapses into the menu before logo + status + links + actions run out of room */
@media (max-width: 1099px) {
  .bar { gap: 12px; }
  .bar-actions { margin-left: auto; }
  .menu-toggle { display: inline-grid; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { font-size: 22px; font-weight: 900; font-stretch: 116%; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
}
@media (max-width: 479px) {
  .brand img { height: 38px; }
}
@media (max-width: 599px) {
  /* status stacks to two short lines; Shop now moves into the menu */
  .bar .bar-status { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; font-size: 13px; line-height: 1.2; }
  .bar-status .status-dot { grid-row: span 2; }
  .bar-status .status-when { grid-column: 2; font-size: 12px; }
  .bar-actions .btn-sm { display: none; }
  .nav .nav-shop { display: block; }
}

/* ---------- Hero ---------- */
/* headline + lead on one half, photo on the other; the photo stretches to the copy's height */
.hero { padding: clamp(28px, 4vw, 56px) 0 clamp(44px, 5vw, 72px); }
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
.hero-copy { display: grid; align-content: center; gap: clamp(20px, 2.4vw, 32px); container-type: inline-size; }
/* sized to the column: the widest line ("legends") spans it */
.hero-title { font-size: clamp(48px, 16.5cqi, 150px); max-width: none; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .line > span { display: inline-block; white-space: nowrap; }
.lead { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
.hero-media { position: relative; min-height: 340px; }
.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  box-shadow: 14px 14px 0 var(--accent); /* color block behind the hero photo */
}

/* Live open/closed status (real state, so the dot earns its place) */
.status { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); }
.status.is-open .status-dot { background: var(--open); box-shadow: 0 0 0 4px color-mix(in srgb, var(--open) 22%, transparent); }

@media (max-width: 899px) {
  .hero-row { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(48px, 16.5cqi, 120px); }
  .hero-media { min-height: 0; }
  .hero-media img { position: static; height: auto; aspect-ratio: 4 / 3; box-shadow: 8px 8px 0 var(--accent); }
}

/* ---------- Ticker ---------- */
.ticker {
  background: var(--accent); color: var(--on-accent);
  overflow: hidden;
}
.ticker-track { display: flex; width: max-content; }
.ticker-set { display: flex; align-items: center; gap: 28px; padding: 16px 14px; }
.ticker-set span {
  font-size: clamp(18px, 1.8vw, 24px); font-weight: 900; font-stretch: 116%;
  text-transform: uppercase; white-space: nowrap;
}
.ticker-set svg { width: 22px; height: 22px; }

/* ---------- What's inside (bento) ---------- */
.inside { padding: clamp(72px, 9vw, 128px) 0; }
.bento {
  display: grid;
  grid-template-columns: 5fr 3fr 4fr;
  grid-template-rows: repeat(2, clamp(280px, 30vw, 380px));
  grid-template-areas:
    "lounge lounge tabletop"
    "arcade retail tabletop";
  gap: 16px;
  margin-top: clamp(32px, 4vw, 56px);
}
.tile { position: relative; overflow: hidden; background: var(--bg-2); }
.tile-lounge { grid-area: lounge; }
.tile-tabletop { grid-area: tabletop; }
.tile-arcade { grid-area: arcade; }
.tile-retail { grid-area: retail; }
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.tile:hover img { transform: scale(1.035); }
.tile-lounge img { object-position: 50% 60%; }
.tile-tabletop img { object-position: 40% 50%; }
.tile-retail img { object-position: 50% 45%; }
.tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 72px 24px 22px;
  background: linear-gradient(to top, var(--scrim) 0%, rgba(12, 11, 16, .6) 55%, rgba(12, 11, 16, 0) 100%);
  color: #F2F0F7;
}
.tile-cap .glyph { width: 34px; height: 34px; margin-bottom: 10px; }
.tile h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 900; font-stretch: 116%; text-transform: uppercase; line-height: 1; }
.tile p { margin-top: 8px; font-size: 15px; line-height: 1.5; max-width: 38ch; color: rgba(242, 240, 247, .88); }

.tile-arcade img { object-position: 30% 35%; }

.glyph.c-circle { color: var(--g-circle); }
.glyph.c-cross { color: var(--g-cross); }
.glyph.c-square { color: var(--g-square); }
.glyph.c-triangle { color: var(--g-triangle); }
/* glyphs on photo scrims use the bright set in both themes */
.tile-cap .glyph.c-cross { color: #5B8CFF; }
.tile-cap .glyph.c-circle { color: #FF4D5A; }
.tile-cap .glyph.c-square { color: #E457DD; }
.tile-cap .glyph.c-triangle { color: #35E08A; }

@media (max-width: 899px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "lounge lounge"
      "tabletop retail"
      "arcade arcade";
  }
  .tile-lounge { aspect-ratio: 4 / 3; }
  .tile-tabletop, .tile-retail { aspect-ratio: 3 / 4; }
  .tile-arcade { min-height: 260px; }
}
@media (max-width: 599px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "lounge" "tabletop" "arcade" "retail"; gap: 14px; }
  .tile-tabletop, .tile-retail { aspect-ratio: 4 / 5; }
  .tile-cap { padding: 64px 18px 18px; }
}

/* ---------- Events ---------- */
.events {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  padding: clamp(72px, 9vw, 120px) 0;
}
.events-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.events-copy { display: grid; gap: 24px; justify-items: start; position: sticky; top: calc(var(--header-h) + 32px); }
.events-copy .section-title { font-size: clamp(30px, 3.3vw, 46px); }
.events-copy p { color: var(--ink-2); max-width: 42ch; font-size: 18px; }
.event-types {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--bg);
}
.event-types li { padding: clamp(24px, 3vw, 40px); display: grid; gap: 10px; align-content: start; }
.event-types li:nth-child(odd) { border-right: 1px solid var(--line); }
.event-types li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.event-types .glyph { width: 40px; height: 40px; margin-bottom: 6px; }
.event-types h3 { font-size: clamp(19px, 1.65vw, 24px); font-weight: 900; font-stretch: 116%; text-transform: uppercase; line-height: 1; }
.event-types p { color: var(--ink-2); font-size: 16px; }

.events-side { display: grid; gap: clamp(32px, 4vw, 48px); }
.weekly { display: grid; gap: 16px; }
.weekly-list { border: 1px solid var(--line); background: var(--bg); }
.weekly-list li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline;
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 28px);
  border-left: 3px solid transparent;
}
.weekly-list li + li { border-top: 1px solid var(--line); }
.weekly-day { font-size: 15px; font-weight: 800; font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.weekly-list strong { display: block; font-size: clamp(19px, 1.65vw, 24px); font-weight: 900; font-stretch: 116%; text-transform: uppercase; line-height: 1; }
.weekly-list p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
.weekly-time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weekly-list .is-today { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.weekly-list .is-today strong::after { content: "Today"; margin-left: 10px; font-size: 12px; letter-spacing: .1em; color: var(--accent-text); }
.weekly-note { color: var(--ink-2); font-size: 15px; }
.weekly-note a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }

@media (max-width: 1099px) {
  .events-grid { grid-template-columns: 1fr; }
  .events-copy { position: static; }
}
@media (max-width: 599px) {
  .weekly-list li { grid-template-columns: 44px minmax(0, 1fr); }
  .weekly-time { grid-column: 2; }
  .event-types { grid-template-columns: 1fr; }
  .event-types li:nth-child(odd) { border-right: 0; }
  .event-types li:not(:last-child) { border-bottom: 1px solid var(--line); }
}

/* Featured upcoming event */
.next-event {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px); padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line); background: var(--bg);
}
.next-date {
  display: grid; align-content: center; justify-items: center; gap: 4px;
  width: clamp(104px, 10vw, 132px); aspect-ratio: 1;
  background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 800; font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.next-date strong { font-size: clamp(44px, 4.6vw, 64px); font-weight: 900; letter-spacing: -.02em; }
.next-body { display: grid; gap: 12px; justify-items: start; }
.next-body h3 { font-size: clamp(22px, 2.6vw, 36px); font-weight: 900; font-stretch: 116%; text-transform: uppercase; line-height: 1; }
.next-body p:not(.label) { color: var(--ink-2); max-width: 64ch; }
.next-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 599px) {
  .next-event { grid-template-columns: minmax(0, 1fr); }
  .next-actions .btn { white-space: normal; text-align: center; padding-block: 12px; }
  .next-date { width: auto; aspect-ratio: auto; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; padding: 12px 16px; }
  .next-date strong { font-size: 32px; }
}

/* ---------- Buy / Sell / Trade ---------- */
.trade { padding: clamp(80px, 10vw, 144px) 0; }
.trade-line {
  margin-top: 20px;
  font-size: clamp(30px, 4.3vw, 60px);
  font-weight: 800;
  font-stretch: 104%;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ink-2);
  max-width: 24ch;
}
.trade-line mark {
  color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) 0 92% / 100% .12em no-repeat;
  padding-inline: .04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.trade .cta-row { margin-top: 40px; }
.trade-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.trade-grid .trade-line { font-size: clamp(30px, 3.6vw, 54px); max-width: 22ch; }
.trade-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 55%; }
@media (max-width: 899px) {
  .trade-grid { grid-template-columns: 1fr; }
  .trade-media img { aspect-ratio: 4 / 3; object-position: 30% 50%; }
}

/* ---------- Visit ---------- */
.visit { padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--line); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
/* photo and info column share one height: the photo crops to fit, the map takes up the slack */
.visit-media { position: relative; min-height: 520px; }
.visit-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
}
.visit-info { display: flex; flex-direction: column; gap: 24px; }
.visit-info .section-title { max-width: none; }
.visit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.hours { width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hours > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 16px;
  border-left: 3px solid transparent;
  font-variant-numeric: tabular-nums;
}
.hours > div + div { border-top: 1px solid var(--line); }
.hours dt { font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: .03em; }
.hours dd { font-size: 18px; font-weight: 600; }
.hours > .is-today { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.hours > .is-today dt::after { content: "Today"; margin-left: 10px; font-size: 12px; letter-spacing: .1em; color: var(--accent-text); }

.map {
  flex: 1 1 240px; min-height: 240px; margin: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.map iframe { display: block; flex: 1; width: 100%; min-height: 200px; border: 0; filter: grayscale(.85) contrast(1.05); }
:root:not([data-theme="light"]) .map iframe { filter: grayscale(1) invert(.9) contrast(.9); }
.map figcaption { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }

@media (max-width: 899px) {
  .visit-grid { grid-template-columns: 1fr; }
  .visit-media { min-height: 0; }
  .visit-media img { position: static; height: auto; aspect-ratio: 4 / 3; object-position: 50% 72%; }
  .map { flex-basis: auto; }
  .map iframe { height: 260px; flex: none; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 32px; }
.foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav socials" "fine fine fine";
  align-items: center; gap: 28px 40px;
}
.foot .brand { grid-area: brand; justify-self: start; }
.foot-nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; }
.foot-nav a { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.foot-nav a:hover { color: var(--accent-text); }
.socials { grid-area: socials; display: flex; gap: 10px; }
.socials a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.socials a:hover { border-color: var(--edge); background: var(--bg-2); }
.socials svg { width: 22px; height: 22px; }
.fine { grid-area: fine; font-size: 14px; color: var(--ink-2); padding-top: 24px; border-top: 1px solid var(--line); }

@media (max-width: 899px) {
  .foot { grid-template-columns: 1fr auto; grid-template-areas: "brand socials" "nav nav" "fine fine"; }
  .foot-nav { justify-content: flex-start; }
}

/* ---------- Booking dialog ---------- */
.booking {
  width: min(600px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto; /* the global margin reset would otherwise pin it top-left */
  padding: 0;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 10px 10px 0 var(--accent);
  overflow: auto;
}
.booking::backdrop { background: rgba(12, 11, 16, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.booking-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.booking-head h2 { font-size: 28px; }
.booking form, .handoff { padding: 24px; display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--ink-2);
  border-radius: 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--edge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.field-help { font-size: 14px; color: var(--ink-2); }
.field-error { display: none; font-size: 14px; font-weight: 600; color: var(--accent-text); }
.field.has-error input { border-color: var(--accent-text); }
.field.has-error .field-error { display: block; }
.handoff p { font-size: 18px; }
.handoff-actions { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 599px) {
  .field-row { grid-template-columns: 1fr; }
  .handoff-actions .btn { width: 100%; }
}

/* ---------- Motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* hero: headline lines rise out of their masks, photo settles in */
  .js .hero-title .line > span { animation: rise .9s var(--ease) both; }
  .js .hero-title .line:nth-child(2) > span { animation-delay: .07s; }
  .js .hero-title .line:nth-child(3) > span { animation-delay: .14s; }
  .js .hero-title .line:nth-child(4) > span { animation-delay: .21s; }
  .js .hero-copy { animation: fade-up .8s var(--ease) .25s both; }
  .js .hero-media { animation: settle 1.1s var(--ease) .15s both; }

  /* games ticker: breadth of what's on the shelves */
  .ticker-track { animation: ticker 38s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }

  /* scroll reveals for section content */
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .bento .reveal:nth-child(2) { transition-delay: .06s; }
  .bento .reveal:nth-child(3) { transition-delay: .12s; }
  .bento .reveal:nth-child(4) { transition-delay: .18s; }

  /* trade: the pink marker draws under each key phrase in reading order */
  .js .trade-line.reveal mark { background-size: 0% .12em; transition: background-size .7s var(--ease); }
  .js .trade-line.reveal.in mark { background-size: 100% .12em; }
  .js .trade-line.reveal.in mark:nth-of-type(1) { transition-delay: .35s; }
  .js .trade-line.reveal.in mark:nth-of-type(2) { transition-delay: .65s; }
  .js .trade-line.reveal.in mark:nth-of-type(3) { transition-delay: .95s; }

  .booking[open] { animation: pop .35s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-set:last-child { display: none; }
  .ticker-track { width: auto; }
  .ticker-set { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .btn, .tile img { transition: none; }
  .btn:hover { transform: none; }
}

@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }