*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #000000; color: #F4EFE6; }
a { color: #8FA2FF; }
a:hover { color: #C3CDFF; }
img, video { max-width: 100%; }
:focus-visible { outline: 2px solid #8FA2FF; outline-offset: 3px; }

/* cards that open a page or a video */
a.card, a.ep { transition: background-color .15s ease; }
a.card:hover, a.ep:hover { background-color: #221F1C !important; }
a.card:hover h3, a.ep:hover h3 { color: #C3CDFF; }

/* YouTube, played in place */
.yt-box img { display: block; }
.yt-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.yt-play { border-radius: 999px; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .85);
  display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background-color .15s ease; }
.yt-box:hover .yt-play, a.ep:hover [style*="border-radius: 999px"] { transform: scale(1.06); background: rgba(77, 107, 255, .9); }
.yt-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* full-screen viewer for photos, maps, pages and art */
.lb-img, .lb-open { cursor: zoom-in; }
.lb-open { transition: opacity .15s ease; }
.lb-open:hover { opacity: .85; }
.lb, .vo { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .94); }
.lb.open, .vo.open { display: flex; }
.lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb img { display: block; max-width: calc(100vw - 180px); max-height: calc(100vh - 110px); width: auto; height: auto;
  border-radius: 8px; cursor: pointer; }
.lb figcaption, .lb-count { color: #A89F92; font: 600 13px/1.4 'Chakra Petch', sans-serif; letter-spacing: .14em;
  text-transform: uppercase; text-align: center; max-width: 80vw; }
.lb-btn, .vo-close { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 1px solid #3A352F;
  background: #191715; color: #F4EFE6; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.lb-btn:hover, .vo-close:hover { background: #2A2622; }
.lb-btn[disabled] { opacity: .3; cursor: default; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-close, .vo-close { top: 20px; right: 24px; }
.vo-frame { position: relative; width: min(92vw, calc((100vh - 120px) * 16 / 9)); aspect-ratio: 16 / 9; }
.vo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }

/* character story pages */
.story { max-width: 820px; margin: 0 auto; padding: 32px 32px 0; }
.story-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 44px; }
.story-head img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; }
.story-text p { margin: 0 0 1.15em; color: #E6DFD3; font-size: 18px; line-height: 1.75; }
.story-text p.story-end { margin-top: 2em; font-family: 'Russo One', sans-serif; font-size: 22px; color: #8FA2FF; }

/* tablets */
@media (max-width: 1000px) {
  .g4, .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* phones */
@media (max-width: 700px) {
  .g4, .g3:not(:has(video)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .g2 { grid-template-columns: minmax(0, 1fr) !important; }
  .jrow { flex-wrap: wrap; }
  .jrow > * { min-width: 40%; }
  [style*="font-size: 72px"] { font-size: 46px !important; }
  [style*="font-size: 64px"] { font-size: 42px !important; }
  [style*="font-size: 56px"] { font-size: 38px !important; }
  [style*="font-size: 44px"] { font-size: 32px !important; }
  [style*="font-size: 40px"] { font-size: 30px !important; }
  [style*="padding: 88px 32px"], [style*="padding: 72px 32px"], [style*="padding: 64px 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="max-width: 1240px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .story { padding: 24px 20px 0; }
  .story-head { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; }
  .lb img { max-width: 100vw; max-height: calc(100vh - 160px); border-radius: 0; }
  .lb-prev, .lb-next { top: auto; bottom: 18px; transform: none; }
  .lb-prev { left: calc(50% - 72px); }
  .lb-next { right: calc(50% - 72px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* privacy page */
.legal .story-text h2 { margin: 1.8em 0 .6em; font-family: 'Russo One', sans-serif; font-weight: 400; font-size: 26px; color: #F4EFE6; }
.legal .story-text strong { color: #F4EFE6; }