/* Page-owned composition for the six-mode digital entertainment guide. */
:root {
  --digital-blue: #064fd7;
  --digital-ink: #121212;
  --digital-paper: #f7f2ed;
  --digital-warm: #f0e3dd;
  --digital-lilac: #c4b8ff;
  --digital-line: rgb(18 18 18 / 24%);
  --digital-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

body {
  min-width: 320px;
  background: var(--digital-paper);
  color: var(--digital-ink);
  font-family: var(--digital-display);
}

header[data-homepage-region="01-site-header"] {
  position: relative;
  z-index: 10;
  min-height: 109px;
  background: #064fd7;
  box-shadow: 0 5px 0 rgb(18 18 18 / 10%);
}

header[data-homepage-region="01-site-header"] [data-homepage-region-content] { min-height: 109px; }
header[data-homepage-region="01-site-header"] .site-header__nav-link--active { background: var(--digital-paper); }
header[data-homepage-region="01-site-header"] .site-header__phone { margin-right: clamp(1rem, 5vw, 5rem); }
header[data-homepage-region="01-site-header"] .site-header__search-disclosure { position: relative; display: block !important; margin-left: 1rem; }
header[data-homepage-region="01-site-header"] .site-header__search-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  width: 2.75rem;
  padding: .5rem;
  font-size: 0;
  border: 1px solid rgb(255 255 255 / 70%);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: 400 1rem/1 var(--digital-display);
}
header[data-homepage-region="01-site-header"] .site-header__search-toggle::before {
  content: "";
  width: .9rem;
  height: .9rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}
header[data-homepage-region="01-site-header"] .site-header__search-toggle::after {
  content: "";
  position: absolute;
  top: 1.65rem;
  left: 1.65rem;
  width: .45rem;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}
header[data-homepage-region="01-site-header"] .site-header__search-disclosure[open] .site-header__search-toggle { background: #fff; color: #000; }
header[data-homepage-region="01-site-header"] .site-header__search {
  position: absolute;
  top: 0;
  right: 3.25rem;
  left: auto;
  width: min(24rem, calc(100vw - 5rem));
  padding: .2rem;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateX(.75rem) scaleX(.7);
  transform-origin: right center;
  transition: opacity 180ms ease, transform 180ms ease;
}
header[data-homepage-region="01-site-header"] .site-header__search-disclosure[open] .site-header__search { opacity: 1; pointer-events: auto; transform: translateX(0) scaleX(1); }
header[data-homepage-region="01-site-header"] .site-header__search-form { max-width: none; }
header[data-homepage-region="01-site-header"] .site-header__search-form input { min-height: 40px; border-color: #fff; }
header[data-homepage-region="01-site-header"] .site-header__search-form button { min-height: 40px; padding-inline: 1rem; }

.digital-guide__hero,
.digital-modes,
.digital-story,
.digital-route {
  width: min(1200px, calc(100% - clamp(2rem, 10.4vw, 12.5rem)));
  margin-inline: auto;
}

.digital-guide__hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, .78fr);
  gap: clamp(2rem, 8vw, 9rem);
  align-items: center;
  min-height: 640px;
  padding-block: clamp(4rem, 9vw, 9rem);
}

.digital-guide__hero-copy { max-width: 600px; }
.digital-guide__eyebrow { margin: 0 0 1.25rem; color: var(--digital-blue); font-size: .85rem; font-weight: 700; letter-spacing: .16em; line-height: 1.2; }
h1, h2, h3, p { margin-top: 0; }
.digital-guide__hero h1 { max-width: 560px; margin-bottom: 1.5rem; font-size: clamp(4rem, 9vw, 8.9rem); font-weight: 700; letter-spacing: -.055em; line-height: .84; }
.digital-guide__lede { max-width: 35rem; margin-bottom: 2rem; font-size: clamp(1.25rem, 1.7vw, 1.7rem); line-height: 1.25; }
.digital-guide__button,
.digital-guide__text-link { color: inherit; font-weight: 700; text-decoration: none; }
.digital-guide__button { display: inline-flex; align-items: center; min-height: 3.25rem; padding: .8rem 1.35rem; background: var(--digital-blue); color: #fff; transition: transform 160ms ease, background-color 160ms ease; }
.digital-guide__button:hover, .digital-guide__button:focus-visible { background: #000; transform: translateY(-2px); }
.digital-guide__hero-media { margin: 0; }
.digital-guide__hero-media img { display: block; width: 100%; height: min(650px, 54vw); object-fit: cover; object-position: center; filter: grayscale(1); }
.digital-guide__hero-media figcaption { margin-top: .75rem; color: rgb(18 18 18 / 68%); font-size: .9rem; line-height: 1.3; }

.digital-modes { padding-block: clamp(4rem, 9vw, 9rem); border-top: 1px solid var(--digital-line); }
.digital-section__heading { max-width: 760px; }
.digital-section__heading h2, .digital-story__copy h2, .digital-route h2 { margin-bottom: 1.25rem; font-size: clamp(3rem, 6vw, 6.4rem); font-weight: 700; letter-spacing: -.045em; line-height: .88; }
.digital-section__heading > p:last-child, .digital-route__intro > p:last-child { max-width: 50rem; font-size: clamp(1.08rem, 1.35vw, 1.35rem); line-height: 1.35; }
.digital-modes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 4rem; background: var(--digital-line); }
.mode-card { min-height: 230px; padding: clamp(1.2rem, 2.2vw, 2.4rem); background: var(--digital-paper); transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; cursor: pointer; }
.mode-card:hover, .mode-card:focus-within, .mode-card.is-selected { background: var(--digital-blue); color: #fff; transform: translateY(-4px); }
.mode-card--featured { background: var(--digital-lilac); }
.mode-card__number, .digital-story__index, .shared-play__card > span { display: block; margin-bottom: 2.5rem; color: var(--digital-blue); font-size: 1rem; font-weight: 700; letter-spacing: .08em; }
.mode-card:hover .mode-card__number, .mode-card.is-selected .mode-card__number { color: #fff; }
.mode-card h3 { margin-bottom: .7rem; font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: .95; }
.mode-card p { max-width: 19rem; margin-bottom: 0; font-size: 1.1rem; line-height: 1.2; }
.digital-modes__status { min-height: 1.5em; margin: 1rem 0 0; color: rgb(18 18 18 / 70%); font-size: .95rem; }

.digital-story { display: grid; grid-template-columns: minmax(3rem, .16fr) minmax(0, 1fr) minmax(260px, .76fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; padding-block: clamp(4rem, 10vw, 10rem); border-top: 1px solid var(--digital-line); }
.digital-story__index { padding-top: .4rem; }
.digital-story__copy { max-width: 570px; }
.digital-story__copy p:not(.digital-guide__eyebrow) { font-size: clamp(1.1rem, 1.4vw, 1.38rem); line-height: 1.36; }
.digital-story__media { margin: 0; }
.digital-story__media img { display: block; width: 100%; height: 520px; object-fit: cover; filter: grayscale(1); }
.digital-story--worlds { grid-template-columns: minmax(280px, .76fr) minmax(3rem, .16fr) minmax(0, 1fr); background: var(--digital-warm); }
.digital-story--worlds .digital-story__media { grid-row: 1; }
.digital-story--worlds .digital-story__copy { grid-column: 3; }
.digital-story--worlds .digital-story__index { grid-column: 2; }
.digital-story__media--wide img { height: 380px; object-position: center; }
.digital-story--shared { display: block; }
.shared-play__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.shared-play__card { min-height: 270px; padding: clamp(1.5rem, 3vw, 3rem); background: var(--digital-lilac); }
.shared-play__card--dark { background: var(--digital-ink); color: #fff; }
.shared-play__card--dark > span { color: var(--digital-lilac); }
.shared-play__card h3 { max-width: 18rem; margin-bottom: 1rem; font-size: clamp(2rem, 3.5vw, 3.8rem); line-height: .9; }
.shared-play__card p { max-width: 27rem; margin-bottom: 0; font-size: 1.15rem; line-height: 1.3; }
.digital-story--mobile { grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr); align-items: center; }
.digital-story--mobile .digital-story__copy { max-width: 620px; }
.digital-story--mobile .digital-story__media img { height: 600px; object-position: center; }
.digital-guide__text-link { display: inline-flex; gap: .75rem; margin-top: 1rem; padding-bottom: .25rem; border-bottom: 2px solid currentColor; font-size: 1.1rem; }

.digital-route { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, 1fr); gap: clamp(2rem, 7vw, 7rem); padding-block: clamp(4rem, 9vw, 9rem); border-top: 1px solid var(--digital-line); }
.digital-route__intro { max-width: 36rem; }
.digital-route__links { display: grid; gap: 1px; align-content: start; background: var(--digital-line); }
.digital-route__links a { display: grid; grid-template-columns: 2.5rem 1fr; gap: .25rem 1rem; padding: 1.25rem 1.5rem; background: var(--digital-blue); color: #fff; text-decoration: none; transition: background-color 160ms ease, padding-left 160ms ease; }
.digital-route__links a:hover, .digital-route__links a:focus-visible { padding-left: 1.9rem; background: #000; }
.digital-route__links span { grid-row: span 2; font-size: .9rem; font-weight: 700; }
.digital-route__links strong { font-size: 1.65rem; line-height: 1; }
.digital-route__links small { font-size: 1rem; line-height: 1.2; }

.page-search__results { display: grid; gap: .5rem; margin-top: .75rem; }
.page-search__results a { display: grid; gap: .15rem; padding: .7rem .85rem; background: #f3eee9; color: #000; text-decoration: none; }
.page-search__results a:hover, .page-search__results a:focus-visible { background: var(--digital-lilac); }
.page-search__results a span { font-size: .9rem; }
.page-search__empty { margin: 0; padding: .7rem; background: #f3eee9; color: #000; }

[data-homepage-region="16-site-footer"] .site-footer__nav a.site-footer__link { color: var(--site-footer-ink); text-decoration: none; }
[data-homepage-region="16-site-footer"] .site-footer__nav { grid-template-rows: repeat(3, max-content); }
.site-footer__contact-block { display: grid; gap: 1.25rem; align-content: start; }
.site-footer__consent { justify-self: start; padding: .6rem .9rem; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.site-footer__consent:hover, .site-footer__consent:focus-visible { background: #fff; color: #000; }
.digital-story--quick { background: var(--digital-paper); }
.digital-story--mobile { background: var(--digital-warm); }
.digital-story__media--tall { align-self: stretch; }
.digital-story__media--tall img { height: 600px; }

@media (max-width: 1100px) {
  .digital-guide__hero, .digital-modes, .digital-story, .digital-route { width: min(100% - 3rem, 900px); }
  header[data-homepage-region="01-site-header"] .site-header__phone { margin-right: 1rem; }
  .digital-guide__hero { gap: 3rem; }
  .digital-story { grid-template-columns: 3rem minmax(0, 1fr) minmax(220px, .7fr); }
}

@media (max-width: 700px) {
  header[data-homepage-region="01-site-header"], header[data-homepage-region="01-site-header"] [data-homepage-region-content] { min-height: 84px; }
  header[data-homepage-region="01-site-header"] .site-header__search-disclosure { position: static; }
  header[data-homepage-region="01-site-header"] .site-header__search { right: .75rem; left: .75rem; width: auto; }
  .digital-guide__hero, .digital-modes, .digital-story, .digital-route { width: calc(100% - 2rem); }
  .digital-guide__hero { grid-template-columns: 1fr; min-height: 0; padding-block: 4rem 5rem; }
  .digital-guide__hero h1 { font-size: clamp(4rem, 18vw, 7rem); }
  .digital-guide__hero-media img { height: 420px; }
  .digital-modes__grid, .shared-play__columns { grid-template-columns: 1fr; }
  .mode-card { min-height: 0; }
  .digital-story, .digital-story--worlds, .digital-story--mobile, .digital-route { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
  .digital-story__index, .digital-story--worlds .digital-story__index { grid-column: auto; grid-row: auto; margin-bottom: 0; }
  .digital-story--worlds .digital-story__copy { grid-column: auto; }
  .digital-story--worlds .digital-story__media { grid-row: auto; }
  .digital-story__media img, .digital-story__media--wide img, .digital-story--mobile .digital-story__media img { height: min(500px, 110vw); }
  .digital-route__links { min-width: 0; }
  .site-footer__contact-block { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .digital-guide__button, .mode-card, .digital-route__links a { transition: none; }
}