:root {
  --categories-cream: #fffbe8;
  --categories-ink: #111116;
  --categories-blue: #1d328f;
  --categories-electric: #2f69f1;
  --categories-orange: #f18f32;
  --categories-yellow: #ffbf00;
  --categories-line: rgb(17 17 22 / 20%);
  --categories-display: "Kalnia", Georgia, serif;
  --categories-body: "Liter", Georgia, serif;
}

body {
  background: var(--categories-cream);
  color: var(--categories-ink);
  font-family: var(--categories-body);
}

.categories-shell-header {
  position: relative;
  z-index: 10;
  background: var(--categories-cream) !important;
  box-shadow: 0 1px 0 rgb(17 17 22 / 13%);
}

.categories-shell-header [data-homepage-region-content] {
  min-height: 0 !important;
  overflow: visible !important;
}

.categories-shell-header .header-hero__bar {
  position: relative;
}

.categories-shell-header .header-hero__navigation {
  position: relative;
}

.categories-shell-header .header-hero__search {
  position: static;
}

.categories-shell-header .header-hero__search summary {
  min-height: 48px;
}

.categories-shell-header .header-hero__search[open] summary {
  color: var(--categories-blue);
}

.categories-search__drawer {
  position: absolute;
  z-index: 5;
  top: calc(100% + 1px);
  right: 0;
  width: min(100vw - 40px, 680px);
  padding: 1.25rem;
  border: 1px solid var(--categories-ink);
  border-radius: 0 0 1rem 1rem;
  background: var(--categories-cream);
  box-shadow: 0 1.25rem 2.5rem rgb(17 17 22 / 16%);
  animation: categories-search-drop 180ms ease-out both;
}

.categories-search__drawer form {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.categories-search__drawer label {
  grid-column: 1 / -1;
  margin-bottom: .5rem;
  color: var(--categories-blue);
  font: 700 .8rem/1.2 var(--categories-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.categories-search__drawer input,
.categories-search__drawer button {
  min-height: 3rem;
  border: 1px solid var(--categories-ink) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--categories-ink) !important;
  font: inherit !important;
}

.categories-search__drawer input {
  min-width: 0;
  padding: .7rem 1rem !important;
}

.categories-search__drawer button {
  margin-left: .5rem;
  padding: .7rem 1.15rem !important;
  background: var(--categories-yellow) !important;
  cursor: pointer;
}

.categories-search__results {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
}

.categories-search__result {
  display: grid;
  gap: .2rem;
  padding: .75rem 0;
  border-top: 1px solid var(--categories-line);
  color: var(--categories-ink);
  text-decoration: none;
}

.categories-search__result strong { font: 700 1.05rem/1.2 var(--categories-display); }
.categories-search__result span,
.categories-search__empty { color: rgb(17 17 22 / 70%); font-size: .95rem; }
.categories-search__empty { margin: .5rem 0 0; }

@keyframes categories-search-drop {
  from { opacity: 0; transform: translateY(-.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

.categories-page {
  width: min(100% - 2rem, 1520px);
  margin-inline: auto;
}

.categories-page section {
  scroll-margin-top: 2rem;
}

.categories-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(280px, .94fr);
  align-items: center;
  gap: clamp(2rem, 8vw, 9rem);
  min-height: 660px;
  padding-block: clamp(4rem, 8vw, 8rem);
}

.categories-intro__copy,
.category-cluster__heading,
.filter-intro { max-width: 760px; }

.categories-kicker {
  margin: 0 0 1.25rem;
  color: var(--categories-blue);
  font: 700 .82rem/1.2 var(--categories-body);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.categories-intro h1,
.category-cluster h2,
.categories-account h2,
.categories-consent-settings h2 {
  margin: 0;
  font-family: var(--categories-display);
  font-weight: 700;
  letter-spacing: -.045em;
}

.categories-intro h1 {
  max-width: 820px;
  font-size: clamp(3.3rem, 7vw, 7.2rem);
  line-height: .98;
}

.categories-intro__lead {
  max-width: 650px;
  margin: 2.3rem 0 0;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1.35;
}

.categories-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 3.75rem;
  margin-top: 2.4rem;
  padding: .9rem 1.35rem;
  border: 1px solid var(--categories-ink);
  border-radius: 999px;
  color: var(--categories-ink);
  font: 700 1.05rem/1 var(--categories-display);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.categories-button:hover,
.filter-action:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgb(17 17 22 / 13%); }
.categories-button--warm { background: var(--categories-orange); }
.categories-button--blue { background: var(--categories-electric); }

.categories-intro__visual {
  position: relative;
  margin: 0;
  padding: 1.2rem;
  background: var(--categories-yellow);
  transform: rotate(2deg);
}

.categories-intro__visual img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--categories-cream);
}

.categories-intro__visual figcaption {
  padding: .85rem .25rem .15rem;
  font: 700 1.05rem/1.1 var(--categories-display);
}

.category-cluster {
  padding-block: clamp(4.5rem, 10vw, 10rem);
  border-top: 1px solid var(--categories-line);
}

.category-cluster--strategy { background: var(--categories-cream); }

.category-cluster__heading {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  column-gap: 2rem;
  align-items: end;
  max-width: none;
}

.category-cluster__heading .categories-kicker { grid-column: 1 / -1; }
.category-cluster__heading h2 { font-size: clamp(2.7rem, 5vw, 5.6rem); line-height: .98; }
.category-cluster__heading > p:last-child { max-width: 480px; margin: 0 0 .25rem auto; font-size: 1.15rem; line-height: 1.35; }

.category-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 4rem;
}

.category-card {
  min-height: 330px;
  padding: 1.6rem;
  border: 1px solid var(--categories-ink);
  background: #fff;
}

.category-card:nth-child(2) { background: var(--categories-yellow); }
.category-card:nth-child(3) { background: var(--categories-electric); }
.category-card__number { color: var(--categories-blue); font: 700 1.1rem/1 var(--categories-body); }
.category-card h3 { margin: 4.8rem 0 1rem; font: 700 clamp(1.5rem, 2.1vw, 2.1rem)/1 var(--categories-display); }
.category-card p { min-height: 4.8rem; margin: 0; font-size: 1.02rem; line-height: 1.35; }
.category-card a { display: inline-block; margin-top: 1.4rem; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.category-cluster--adventure { background: var(--categories-blue); color: #fff; }
.category-cluster--adventure .categories-kicker { color: var(--categories-yellow); }
.category-cluster--adventure .category-cluster__heading > p:last-child { color: rgb(255 255 255 / 82%); }
.category-feature-row { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(2rem, 7vw, 7rem); margin-top: 4rem; }
.category-feature-row__art { align-self: start; padding: 1rem; background: var(--categories-orange); transform: rotate(-2deg); }
.category-feature-row__art img { display: block; width: 100%; height: auto; }
.category-feature-row__list { display: grid; gap: 1.5rem; }
.category-feature-row__list article { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgb(255 255 255 / 32%); }
.category-feature-row__list article > span { grid-row: span 2; color: var(--categories-yellow); font: 700 1.1rem/1 var(--categories-body); }
.category-feature-row__list h3 { margin: 0; font: 700 1.7rem/1 var(--categories-display); }
.category-feature-row__list p { margin: .55rem 0 0; color: rgb(255 255 255 / 78%); font-size: 1.02rem; line-height: 1.35; }

.category-cluster--casual { background: var(--categories-orange); }
.session-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 4rem; }
.session-card { min-height: 300px; padding: 1.5rem; border: 1px solid var(--categories-ink); background: var(--categories-cream); }
.session-card--accent { background: var(--categories-yellow); }
.session-card__time { color: var(--categories-blue); font: 700 1rem/1 var(--categories-body); }
.session-card h3 { margin: 4.8rem 0 1rem; font: 700 2rem/1 var(--categories-display); }
.session-card p { margin: 0; font-size: 1.03rem; line-height: 1.4; }
.session-card a { display: inline-block; margin-top: 1.5rem; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.category-cluster--multiplayer { background: var(--categories-cream); }
.category-split { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(2rem, 9vw, 10rem); margin-top: 4rem; }
.category-split__copy blockquote { margin: 0; font: 700 clamp(2rem, 4vw, 4.4rem)/.98 var(--categories-display); letter-spacing: -.04em; }
.category-split__copy > p { max-width: 500px; margin: 2rem 0 0; font-size: 1.1rem; line-height: 1.4; }
.category-split__art { padding: 1.2rem; background: var(--categories-yellow); }
.category-split__art img { display: block; width: 100%; height: auto; }

.category-cluster--devices { background: var(--categories-electric); color: #fff; }
.category-cluster--devices .categories-kicker { color: var(--categories-yellow); }
.category-cluster--devices .category-cluster__heading > p:last-child { color: rgb(255 255 255 / 84%); }
.device-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 4rem; }
.device-card { min-height: 250px; padding: 1.35rem; border: 1px solid rgb(255 255 255 / 60%); background: var(--categories-blue); }
.device-card--yellow { background: var(--categories-yellow); color: var(--categories-ink); }
.device-card--orange { background: var(--categories-orange); color: var(--categories-ink); }
.device-card__icon { display: block; color: var(--categories-yellow); font: 700 1rem/1 var(--categories-body); }
.device-card--yellow .device-card__icon, .device-card--orange .device-card__icon { color: var(--categories-blue); }
.device-card h3 { margin: 4rem 0 .8rem; font: 700 1.6rem/1 var(--categories-display); }
.device-card p { margin: 0; color: inherit; font-size: 1rem; line-height: 1.4; }

.category-cluster--filter { background: var(--categories-yellow); }
.filter-intro { max-width: 780px; }
.filter-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 4rem; }
.filter-action { position: relative; display: grid; gap: .6rem; min-height: 185px; padding: 1.3rem; border: 1px solid var(--categories-ink); color: var(--categories-ink); text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.filter-action:nth-child(2) { background: var(--categories-cream); }
.filter-action:nth-child(3) { background: var(--categories-orange); }
.filter-action span { font: 700 1rem/1 var(--categories-body); }
.filter-action strong { align-self: end; font: 700 1.65rem/1 var(--categories-display); }
.filter-action small { font-size: .98rem; }
.filter-action b { position: absolute; right: 1.3rem; bottom: 1.25rem; font-size: 1.4rem; }

.categories-account { margin-top: 5rem; padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--categories-ink); background: var(--categories-cream); }
.account-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.categories-account h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1; }
.account-panel__close { border: 0; background: transparent; color: inherit; font: 400 2rem/1 var(--categories-body); cursor: pointer; }
.account-panel__status { min-height: 1.4rem; margin: 1.5rem 0 0; color: var(--categories-blue); font-weight: 700; }
.account-panel__status[data-status="error"] { color: #9f1e20; }
.account-panel__forms { margin-top: 1rem; }
.account-form { display: grid; max-width: 640px; gap: .6rem; }
.account-form--profile { max-width: 760px; }
.account-form h3 { margin: 0 0 .6rem; font: 700 1.9rem/1 var(--categories-display); }
.account-form label { margin-top: .5rem; font-weight: 700; }
.account-form input, .account-form textarea { width: 100%; min-height: 3rem; padding: .7rem .85rem; border: 1px solid var(--categories-ink); border-radius: .25rem; background: #fff; color: var(--categories-ink); font: inherit; }
.account-form textarea { resize: vertical; }
.account-form .categories-button { justify-self: start; margin-top: .8rem; }
.account-form__switch { justify-self: start; border: 0; padding: .5rem 0; background: transparent; color: var(--categories-blue); font: 700 .95rem/1.2 var(--categories-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.account-dashboard { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 2rem; }
.account-dashboard__identity { display: grid; align-content: start; justify-items: center; gap: .8rem; }
.account-dashboard__identity img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; opacity: .78; }
.account-dashboard__identity img.is-loaded { animation: categories-avatar-in 350ms ease-out both; opacity: 1; }
.account-dashboard__identity input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-picker { color: var(--categories-blue); font-weight: 700; text-align: center; text-decoration: underline; cursor: pointer; }
.account-form__two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@keyframes categories-avatar-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

.categories-page-footer .site-footer__settings { display: flex; justify-content: center; }
.categories-page-footer .site-footer__settings button { color: inherit; }
.categories-consent-settings { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgb(17 17 22 / 52%); }
.categories-consent-settings[hidden] { display: none; }
.categories-consent-settings > div { width: min(100%, 560px); padding: 2rem; border: 1px solid var(--categories-ink); background: var(--categories-cream); box-shadow: 0 1.5rem 4rem rgb(17 17 22 / 24%); }
.categories-consent-settings h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.categories-consent-settings p:not(.categories-kicker) { line-height: 1.45; }

.categories-shell-header a:focus-visible,
.categories-shell-header button:focus-visible,
.categories-shell-header summary:focus-visible,
.categories-page a:focus-visible,
.categories-page button:focus-visible,
.categories-page input:focus-visible,
.categories-page textarea:focus-visible,
.categories-page-footer a:focus-visible,
.categories-page-footer button:focus-visible { outline: 3px solid var(--categories-blue); outline-offset: 3px; }

@media (max-width: 1100px) {
  .categories-shell-header .header-hero__bar { gap: 1rem; }
  .category-cluster__heading { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .category-cluster__heading > * { min-width: 0; overflow-wrap: anywhere; }
  .category-cluster__heading > p:last-child { margin: 0; }
  .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .categories-page { width: min(100% - 2rem, 680px); }
  .categories-shell-header .header-hero__navigation { position: absolute; }
  .categories-search__drawer { position: static; width: 100%; margin-top: .5rem; border-radius: .8rem; }
  .categories-intro, .category-feature-row, .category-split { grid-template-columns: 1fr; }
  .categories-intro { min-height: 0; gap: 3rem; }
  .categories-intro__visual { max-width: 580px; margin-inline: auto; }
  .category-card-grid, .session-cards, .filter-actions { grid-template-columns: 1fr; }
  .category-card, .session-card { min-height: 0; }
  .category-card h3, .session-card h3 { margin-top: 3rem; }
  .category-feature-row__art { max-width: 620px; }
  .category-split__art { max-width: 660px; }
  .category-split__copy { order: 1; }
  .category-split__art { order: 0; }
}

@media (max-width: 600px) {
  .categories-page { width: min(100% - 1.5rem, 540px); }
  .categories-intro { padding-block: 3.5rem 4.5rem; }
  .categories-intro h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .categories-intro__lead { margin-top: 1.5rem; font-size: 1.08rem; }
  .categories-button { width: 100%; margin-top: 1.5rem; }
  .category-cluster { padding-block: 4rem; }
  .category-cluster__heading h2 { font-size: clamp(2.5rem, 13vw, 4rem); }
  .category-cluster__heading > p:last-child { font-size: 1.05rem; }
  .category-feature-row { margin-top: 2.5rem; }
  .category-feature-row__list article { grid-template-columns: 2.2rem 1fr; }
  .device-grid { grid-template-columns: 1fr; }
  .device-card { min-height: 0; }
  .device-card h3 { margin-top: 2.5rem; }
  .account-dashboard, .account-form__two-col { grid-template-columns: 1fr; }
  .account-dashboard__identity { justify-items: start; }
  .categories-consent-settings > div { padding: 1.25rem; }
  .categories-search__drawer form { grid-template-columns: 1fr; }
  .categories-search__drawer button { margin: .5rem 0 0; }
}