/*
 * Blinkcade lore pages: a game's world hub, its character, district, crew,
 * story and codex indexes, single entries, and the crew section on game
 * landing pages. Builds on the landing page tokens in game.css (.sq).
 */

.lore,
.sq-crew {
  --accent: var(--sq-cyan);
  --glyph-bg: #11144c;
  --lore-nav-h: 58px;
}

/* ==========================================================================
   Navigation bar
   ========================================================================== */

.lore-nav {
  position: sticky;
  top: var(--bc-header-h);
  z-index: 40;
  border-bottom: 1px solid rgba(160, 150, 255, .16);
  background: rgba(8, 9, 34, .92);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}

.lore-nav__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--lore-nav-h);
}

.lore-nav__game {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: var(--sq-crown);
  font-family: var(--sq-display);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lore-nav__game:hover { color: #fff; }

.lore-nav__list {
  display: flex;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.lore-nav__list::-webkit-scrollbar { display: none; }

@media (max-width: 1180px) {
  .lore-nav__list {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}

.lore-nav__list a {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--sq-soft);
  font-family: var(--sq-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lore-nav__list a:hover {
  background: rgba(46, 230, 255, .08);
  color: #fff;
}

.lore-nav__list a[aria-current] {
  background: rgba(46, 230, 255, .14);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--sq-cyan);
}

.lore-nav__play {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffe066, var(--sq-crown));
  color: #160a3a;
  font-family: var(--sq-display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
}

.lore-nav__play:hover { box-shadow: 0 10px 26px rgba(255, 200, 26, .35); }

/* ==========================================================================
   Heroes
   ========================================================================== */

.lore-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.lore-hero--hub {
  display: flex;
  align-items: center;
  min-height: min(760px, calc(100svh - var(--bc-header-h) - var(--lore-nav-h)));
  padding: 64px 0 84px;
}

.lore-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.lore-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.lore-hero--hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 8, 35, .96) 0%, rgba(6, 8, 35, .86) 40%, rgba(6, 8, 35, .55) 70%, rgba(6, 8, 35, .45) 100%),
    linear-gradient(180deg, rgba(6, 8, 35, .2) 0%, rgba(6, 8, 35, 0) 50%, #060823 100%);
}

.lore-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: 48px;
}

.lore-title {
  margin: 0;
  color: #fff;
  font-family: var(--sq-display);
  font-size: clamp(3.2rem, 7.2vw, 6.6rem);
  font-style: italic;
  font-weight: 900;
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .45);
}

.lore-title--index { font-size: clamp(3rem, 6.4vw, 5.6rem); }

.lore-lead {
  max-width: 640px;
  margin: 20px 0 0;
  color: #e1e2fa;
  font-size: 1.2rem;
  line-height: 1.65;
}

.lore-hero--index {
  padding: 48px 0 28px;
  background:
    radial-gradient(ellipse at 15% 0, rgba(255, 43, 214, .16), transparent 60%),
    radial-gradient(ellipse at 90% 10%, rgba(46, 230, 255, .12), transparent 55%);
}

.lore-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 22px;
  color: var(--sq-muted);
  font-family: var(--sq-display);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lore-crumbs a { color: var(--sq-soft); }
.lore-crumbs a:hover { color: #fff; }

/* The Quiet Hours notice, pasted up on the hub. */
.lore-notice {
  position: relative;
  justify-self: center;
  width: min(100%, 360px);
  margin: 18px 0 0;
  padding: 30px 28px 34px;
  background:
    repeating-linear-gradient(0deg, rgba(60, 40, 20, .03) 0 2px, transparent 2px 5px),
    linear-gradient(170deg, #f6f1e4, #e9e1cd);
  color: #1c1530;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .08);
  transform: rotate(2.2deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 93% 100%, 85% calc(100% - 6px), 76% 100%, 66% calc(100% - 5px), 55% 100%, 44% calc(100% - 7px), 33% 100%, 22% calc(100% - 5px), 11% 100%, 0 calc(100% - 6px));
}

.lore-notice::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 110px;
  height: 22px;
  background: rgba(255, 255, 255, .6);
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.lore-notice p { margin: 0 0 12px; font-size: 1rem; line-height: 1.5; }

.lore-notice .lore-notice__title {
  margin: 6px 0 0;
  color: #d81f4f;
  font-family: var(--sq-display);
  font-size: 3.1rem;
  font-weight: 900;
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.lore-notice .lore-notice__by {
  margin: 8px 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #1c1530;
  font-family: var(--sq-display);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lore-notice .lore-notice__big {
  font-family: var(--sq-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
}

.lore-notice .lore-notice__sign {
  margin: 0;
  color: #4a3f63;
  font-style: italic;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.lore-section--band,
.sq-crew {
  border-top: 1px solid rgba(160, 150, 255, .12);
  background: linear-gradient(180deg, rgba(11, 16, 54, .6), rgba(6, 8, 35, 0));
}

.lore-more {
  margin: 36px 0 0;
  text-align: center;
}

.lore-more--left { text-align: left; }

.lore-more .sq-btn { min-height: 50px; font-size: 1.2rem; }

.lore-note {
  margin: 26px 0 0;
  color: var(--sq-muted);
  font-style: italic;
  text-align: center;
}

/* ==========================================================================
   Shared bits: status pills, placeholder drawings
   ========================================================================== */

.lore-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(167, 169, 216, .14);
  color: var(--sq-soft);
  font-family: var(--sq-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.1;
  text-transform: uppercase;
}

.lore-status::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.lore-status--playable { background: rgba(46, 230, 255, .14); color: var(--sq-cyan); }
.lore-status--coming { background: rgba(255, 200, 26, .14); color: var(--sq-crown); }
.lore-status--lg { padding: 7px 14px 7px 12px; font-size: 1rem; }

.lore-glyph {
  width: 60%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--accent));
}

.lore-glyph .b { fill: var(--glyph-bg); }
.lore-glyph .f { fill: var(--accent); stroke: none; }
.lore-glyph .m { fill: var(--accent); fill-opacity: .28; }
.lore-glyph .q { stroke-width: 3.4; }

.lore-glyph text {
  fill: #fff;
  stroke: none;
  font-family: var(--sq-display);
  font-style: italic;
  font-weight: 900;
}

.lore-initials {
  color: var(--accent);
  font-family: var(--sq-display);
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 18px var(--accent);
}

/* Picture frames share one backdrop: a glow in the entry's colour. */
.lore-rider__pic,
.lore-person__pic,
.lore-link__pic,
.lore-portrait {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(46, 230, 255, .2), transparent 62%),
    linear-gradient(180deg, #161a62, #0b0d33);
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    linear-gradient(180deg, #161a62, #0b0d33);
}

.lore-rider__pic img,
.lore-person__pic img,
.lore-link__pic img,
.lore-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

.lore-rider__pic--cutout img,
.lore-portrait--cutout img {
  object-fit: contain;
  object-position: 50% 100%;
}

.lore-person__pic img,
.lore-link__pic img { object-position: 50% 8%; }

.lore-rider__pic--district .sq-district__art,
.lore-person__pic--district .sq-district__art,
.lore-link__pic--district .sq-district__art,
.lore-portrait--district .sq-district__art {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Riders: the playable crew
   ========================================================================== */

.lore-riders {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lore-rider__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--sq-line);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(30, 24, 96, .75), rgba(11, 13, 46, .95));
  transition: transform .25s, border-color .25s, box-shadow .25s;
}

.lore-rider__link:hover,
.lore-rider__link:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 44px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translateY(-4px);
}

.lore-rider__pic { aspect-ratio: 4 / 5; }
.lore-rider__pic .lore-glyph { width: 62%; }

.lore-rider__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 22px;
}

.lore-rider__name {
  margin: 0;
  color: #fff;
  font-family: var(--sq-display);
  font-size: 2.1rem;
  font-style: italic;
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}

.lore-rider__role {
  color: var(--sq-soft);
  font-size: .98rem;
  line-height: 1.4;
}

.lore-rider .lore-status {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  border: 1px solid currentColor;
  background: rgba(6, 8, 35, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ==========================================================================
   People: the supporting cast and rivals
   ========================================================================== */

.lore-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lore-person__link {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--sq-line);
  border-radius: 20px;
  background: rgba(10, 12, 44, .8);
  transition: transform .25s, border-color .25s;
}

.lore-person__link:hover,
.lore-person__link:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.lore-person__pic {
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
  border: 1px solid var(--sq-line);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 16px;
}

.lore-person__pic .lore-glyph { width: 80%; }

.lore-person__body { display: flex; flex-direction: column; min-width: 0; }

.lore-person__name {
  margin: 0 0 4px;
  color: #fff;
  font-family: var(--sq-display);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.lore-person__role {
  color: var(--accent);
  color: color-mix(in srgb, var(--accent) 62%, #fff);
  font-family: var(--sq-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lore-person__text {
  margin-top: 8px;
  color: var(--sq-soft);
  line-height: 1.55;
}

.lore-person .lore-status { margin-top: 12px; }

/* ==========================================================================
   Districts (builds on .sq-district from game.css)
   ========================================================================== */

.lore-district { transition: transform .25s, border-color .25s, box-shadow .25s; }

.lore-district:hover,
.lore-district:focus-within {
  border-color: var(--accent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  transform: translateY(-4px);
}

.lore-district__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.lore-district .sq-district__tag { display: block; }

.lore-district__text {
  display: block;
  color: var(--sq-soft);
  line-height: 1.6;
}

.lore-district .lore-status { margin-top: 14px; }

.lore-districts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lore--hub .lore-districts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lore-districts--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lore-districts--wide .sq-district__art { height: 180px; }

/* District art for Night Market and The Overpass (pages of their own once they ship). */
.sq-district--night-market .sq-district__art {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 22Q200 66 400 22' fill='none' stroke='%23070a26' stroke-width='1.5'/%3E%3Cpath d='M0 40Q200 80 400 40' fill='none' stroke='%23070a26' stroke-width='1.5'/%3E%3Cg fill='%23ff9d4d'%3E%3Ccircle cx='25' cy='27' r='3.2'/%3E%3Ccircle cx='100' cy='38' r='3.2'/%3E%3Ccircle cx='175' cy='43' r='3.2'/%3E%3Ccircle cx='260' cy='42' r='3.2'/%3E%3Ccircle cx='340' cy='33' r='3.2'/%3E%3Ccircle cx='60' cy='52' r='3'/%3E%3Ccircle cx='140' cy='58' r='3'/%3E%3Ccircle cx='225' cy='59' r='3'/%3E%3Ccircle cx='300' cy='55' r='3'/%3E%3Ccircle cx='375' cy='44' r='3'/%3E%3C/g%3E%3Cg fill='%232ee6ff'%3E%3Ccircle cx='60' cy='33' r='3.2'/%3E%3Ccircle cx='140' cy='42' r='3.2'/%3E%3Ccircle cx='225' cy='43' r='3.2'/%3E%3Ccircle cx='300' cy='38' r='3.2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.28' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M70 70q-6-7 0-14t0-14'/%3E%3Cpath d='M200 70q-6-7 0-14t0-14'/%3E%3Cpath d='M318 70q-6-7 0-14t0-14'/%3E%3C/g%3E%3Cg fill='%23070a26'%3E%3Crect x='0' y='100' width='400' height='20'/%3E%3Cpath d='M22 80 70 64 118 80z'/%3E%3Crect x='30' y='80' width='80' height='22'/%3E%3Cpath d='M150 80 198 62 246 80z'/%3E%3Crect x='158' y='80' width='80' height='22'/%3E%3Cpath d='M276 80 322 64 368 80z'/%3E%3Crect x='284' y='80' width='76' height='22'/%3E%3C/g%3E%3Cg fill='%23ffb347' fill-opacity='.85'%3E%3Crect x='40' y='86' width='60' height='5'/%3E%3Crect x='168' y='86' width='60' height='5'/%3E%3Crect x='294' y='86' width='56' height='5'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 15% 100%, rgba(46, 230, 255, .3), transparent 60%),
    linear-gradient(180deg, #14103d 0%, #3a2160 55%, #b4542a 100%);
  background-size: 100% 78%, cover, cover;
  background-position: bottom center, center, center;
}

.sq-district--the-overpass .sq-district__art {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='%23070a26'%3E%3Crect x='0' y='46' width='400' height='14'/%3E%3Crect x='0' y='40' width='400' height='3'/%3E%3Crect x='54' y='60' width='18' height='60'/%3E%3Crect x='196' y='60' width='18' height='60'/%3E%3Crect x='338' y='60' width='18' height='60'/%3E%3Crect x='252' y='16' width='4' height='26'/%3E%3Crect x='334' y='16' width='4' height='26'/%3E%3Crect x='246' y='12' width='98' height='16' rx='2'/%3E%3Crect x='0' y='108' width='400' height='12'/%3E%3C/g%3E%3Crect x='256' y='16' width='40' height='3' fill='%233cff9e' fill-opacity='.7'/%3E%3Cg fill='%23ff3b3b'%3E%3Ccircle cx='36' cy='50' r='2.4'/%3E%3Ccircle cx='44' cy='50' r='2.4'/%3E%3Ccircle cx='120' cy='50' r='2.4'/%3E%3Ccircle cx='128' cy='50' r='2.4'/%3E%3Ccircle cx='292' cy='50' r='2.4'/%3E%3Ccircle cx='300' cy='50' r='2.4'/%3E%3C/g%3E%3Cg fill='%23fff2c4'%3E%3Ccircle cx='170' cy='51' r='2.4'/%3E%3Ccircle cx='178' cy='51' r='2.4'/%3E%3Ccircle cx='370' cy='51' r='2.4'/%3E%3Ccircle cx='378' cy='51' r='2.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff3b3b' stroke-opacity='.45' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 50h26M86 50h28M258 50h28'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 70% 110%, rgba(255, 170, 70, .5), transparent 62%),
    linear-gradient(180deg, #151a3d 0%, #2c2b5e 58%, #b0602c 100%);
  background-size: 100% 78%, cover, cover;
  background-position: bottom center, center, center;
}

.sq-district--night-market .sq-district__tag { color: #ffb37a; }
.sq-district--the-overpass .sq-district__tag { color: #ff8a8a; }

.lore-district--later {
  border-style: dashed;
  background: rgba(10, 12, 44, .6);
}

/* ==========================================================================
   Crews
   ========================================================================== */

.lore-crews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lore-crew__link {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: 26px 26px 28px;
  border: 1px solid var(--sq-line);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(42, 27, 110, .85), rgba(11, 13, 46, .95));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, rgba(24, 22, 84, .92)), rgba(11, 13, 46, .96));
  transition: transform .25s, border-color .25s;
}

.lore-crew__link:hover,
.lore-crew__link:focus-visible {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.lore-crew__badge {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
}

.lore-crew__badge .lore-glyph { width: 100%; }

.lore-crew__turf,
.lore-link__type {
  display: block;
  color: var(--accent);
  color: color-mix(in srgb, var(--accent) 62%, #fff);
  font-family: var(--sq-display);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lore-crew__turf { font-size: .95rem; }

.lore-crew__name {
  margin: 4px 0 10px;
  color: #fff;
  font-family: var(--sq-display);
  font-size: 2rem;
  font-style: italic;
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}

.lore-crew__text {
  display: block;
  color: var(--sq-soft);
  line-height: 1.6;
}

.lore-crew__leader {
  display: block;
  margin-top: 14px;
  color: #fff;
  font-weight: 700;
}

/* ==========================================================================
   Story timeline
   ========================================================================== */

.lore-timeline {
  position: relative;
  max-width: 880px;
  margin: 0;
  padding: 0 0 0 38px;
  list-style: none;
}

.lore-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sq-cyan), var(--sq-magenta) 60%, var(--sq-crown));
  opacity: .6;
}

.lore-beat {
  position: relative;
  padding: 0 0 34px;
}

.lore-beat:last-child { padding-bottom: 0; }

.lore-beat::before {
  content: "";
  position: absolute;
  top: 3px;
  left: -36px;
  width: 18px;
  height: 18px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--sq-ink);
  box-shadow: 0 0 14px var(--accent);
}

.lore-beat:has(.lore-status--coming)::before {
  border-style: dashed;
  border-color: var(--sq-crown);
  box-shadow: none;
}

.lore-beat__when {
  display: block;
  color: var(--sq-cyan);
  font-family: var(--sq-display);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lore-beat__title {
  margin: 4px 0 8px;
  font-family: var(--sq-display);
  font-size: 2rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.lore-beat__title a:hover { color: var(--sq-cyan); }

.lore-beat__text {
  max-width: 680px;
  margin: 0;
  color: var(--sq-soft);
  line-height: 1.65;
}

.lore-beat .lore-status { margin: 4px 0 10px; }

.lore-timeline--full .lore-beat { padding-bottom: 46px; }

.lore-timeline--full .lore-beat__text {
  max-width: 720px;
  margin: 8px 0 0;
  font-size: 1.1rem;
}

/* ==========================================================================
   Codex
   ========================================================================== */

.lore-terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lore-term {
  padding: 22px 22px 20px;
  border: 1px solid var(--sq-line);
  border-radius: 18px;
  background: rgba(10, 12, 44, .8);
  scroll-margin-top: calc(var(--bc-header-h) + var(--lore-nav-h) + 20px);
}

.lore-term:target { border-color: var(--sq-cyan); box-shadow: 0 0 0 3px rgba(46, 230, 255, .2); }

.lore-term__name {
  margin: 0 0 8px;
  font-family: var(--sq-display);
  font-size: 1.65rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.lore-term__name a:hover { color: var(--sq-cyan); }

.lore-term__text {
  margin: 0;
  color: var(--sq-soft);
  line-height: 1.6;
}

.lore-term__game {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--sq-line);
  color: var(--sq-muted);
  font-size: .96rem;
  line-height: 1.5;
}

.lore-term__game span {
  display: block;
  margin-bottom: 2px;
  color: var(--sq-crown);
  font-family: var(--sq-display);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lore-term__game--lg {
  max-width: 640px;
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 200, 26, .28);
  border-radius: 16px;
  background: rgba(255, 200, 26, .06);
  color: #fff;
  font-size: 1.05rem;
}

/* ==========================================================================
   Index pages
   ========================================================================== */

.lore-index { padding: 8px 0 72px; }

.lore-group { padding: 30px 0; }

.lore-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: 0 0 22px;
}

.lore-group__title {
  margin: 0;
  font-family: var(--sq-display);
  font-size: 2.3rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.lore-group__head p {
  margin: 0;
  color: var(--sq-muted);
}

/* ==========================================================================
   Single entries
   ========================================================================== */

.lore-entry { padding: 40px 0 40px; }

.lore-profile {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 56px;
}

.lore-profile--text {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
}

.lore-profile--district { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.lore-profile__pic {
  position: sticky;
  top: calc(var(--bc-header-h) + var(--lore-nav-h) + 24px);
}

.lore-portrait {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--sq-line);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 28px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 80px color-mix(in srgb, var(--accent) 16%, transparent);
}

.lore-portrait .lore-glyph { width: 62%; stroke-width: 2.6; }
.lore-portrait .lore-initials { font-size: 6rem; }

.lore-portrait--district { aspect-ratio: 16 / 11; }

.lore-portrait__note {
  margin: 12px 0 0;
  color: var(--sq-muted);
  font-size: .9rem;
  text-align: center;
}

.lore-profile__kicker {
  color: var(--accent);
  color: color-mix(in srgb, var(--accent) 62%, #fff);
}

.lore-profile__name {
  margin: 0 0 18px;
  color: #fff;
  font-family: var(--sq-display);
  font-size: clamp(3.2rem, 6.6vw, 6rem);
  font-style: italic;
  font-weight: 900;
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 35%, transparent);
}

.lore-profile--text .lore-profile__name { font-size: clamp(2.8rem, 5.6vw, 5rem); }

.lore-quote {
  margin: 26px 0 0;
  padding: 2px 0 2px 22px;
  border-left: 4px solid var(--accent);
}

.lore-quote p {
  margin: 0;
  color: #fff;
  font-family: var(--sq-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-style: italic;
  font-weight: 800;
  line-height: 1.15;
}

.lore-quote p::before { content: "\201C"; }
.lore-quote p::after { content: "\201D"; }

.lore-entry__body.prose {
  max-width: 680px;
  margin: 26px 0 0;
  color: var(--sq-soft);
}

.lore-file {
  max-width: 680px;
  margin: 30px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--sq-line);
  border-radius: 18px;
  background: var(--sq-panel);
}

.lore-file__head {
  margin: 0 0 12px;
  color: var(--sq-cyan);
  font-family: var(--sq-display);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lore-facts {
  display: grid;
  gap: 10px;
  margin: 0;
}

.lore-facts__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(160, 150, 255, .12);
}

.lore-facts__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lore-facts__row dd:only-child { grid-column: 1 / -1; }

.lore-facts dt {
  color: var(--sq-muted);
  font-size: .95rem;
  font-weight: 700;
}

.lore-facts dd {
  margin: 0;
  color: #fff;
  line-height: 1.5;
}

.lore-facts dd a {
  color: var(--accent);
  color: color-mix(in srgb, var(--accent) 55%, #fff);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.lore-facts dd a:hover { color: #fff; }

.lore-connections { margin: 72px 0 0; }

.lore-connections__title {
  margin: 0 0 18px;
  color: var(--sq-cyan);
  font-family: var(--sq-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lore-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lore-link,
.lore-term,
.lore-beat,
.lore-person,
.lore-rider,
.lore-crew,
.lore-district { --accent: var(--sq-cyan); }

.lore-link__a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--sq-line);
  border-radius: 16px;
  background: rgba(10, 12, 44, .8);
  transition: border-color .2s, transform .2s;
}

.lore-link__a:hover,
.lore-link__a:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.lore-link__pic {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
}

.lore-link__pic .lore-glyph { width: 84%; stroke-width: 3.6; }
.lore-link__pic .lore-initials { font-size: 1.5rem; }

.lore-link__body { min-width: 0; }

.lore-link__type { font-size: .78rem; }

.lore-link__name {
  display: block;
  color: #fff;
  font-family: var(--sq-display);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.lore-link__role {
  display: block;
  margin-top: 3px;
  color: var(--sq-muted);
  font-size: .88rem;
  line-height: 1.35;
}

.lore-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 56px 0 0;
}

.lore-pager__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border: 1px solid var(--sq-line);
  border-radius: 18px;
  background: rgba(10, 12, 44, .7);
  transition: border-color .2s;
}

.lore-pager__link:hover { border-color: var(--sq-cyan); }

.lore-pager__link--next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

.lore-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sq-muted);
  font-family: var(--sq-display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lore-pager__name {
  color: #fff;
  font-family: var(--sq-display);
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

/* The closing banner sits right after the content. */
.lore-final { padding: 110px 0 120px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .lore-riders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lore-districts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .lore--hub .lore-districts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lore-hero--hub { min-height: 0; padding: 48px 0 64px; }
  .lore-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lore-hero--hub::before {
    background: linear-gradient(180deg, rgba(6, 8, 35, .7) 0%, rgba(6, 8, 35, .88) 50%, #060823 100%);
  }
  .lore-people { grid-template-columns: minmax(0, 1fr); }
  .lore-profile,
  .lore-profile--district { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lore-profile__pic { position: static; width: min(100%, 420px); }
  .lore-profile--district .lore-profile__pic { width: 100%; }
}

@media (max-width: 700px) {
  .lore-nav { position: static; }
  .lore-nav__inner { gap: 10px; min-height: 52px; }
  .lore-nav__game-title { display: none; }
  .lore-nav__list a { padding: 8px 9px; font-size: .98rem; }
  .lore-nav__play { padding: 7px 12px; }
  .lore-riders { gap: 12px; }
  .lore-rider__body { padding: 14px 14px 16px; }
  .lore-rider__name { font-size: 1.6rem; }
  .lore-rider__role { font-size: .9rem; }
  .lore-rider .lore-status { top: 10px; left: 10px; font-size: .78rem; }
  .lore-person__link { gap: 14px; padding: 14px; }
  .lore-person__pic { flex-basis: 80px; width: 80px; height: 80px; }
  .lore-person__name { font-size: 1.45rem; }
  .lore-districts--wide,
  .lore--hub .lore-districts { grid-template-columns: minmax(0, 1fr); }
  .lore-notice { width: min(100%, 320px); }
  .lore-entry { padding-top: 28px; }
  .lore-facts__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lore-pager { grid-template-columns: minmax(0, 1fr); }
  .lore-pager__link--next { grid-column: 1; }
  .lore-timeline { padding-left: 32px; }
  .lore-beat::before { left: -30px; }
  .lore-final { padding: 84px 0 90px; }
}

@media (max-width: 420px) {
  .lore-riders { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lore-rider__name { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lore-rider__link,
  .lore-person__link,
  .lore-district,
  .lore-crew__link,
  .lore-link__a { transition: none; }
  .lore-rider__link:hover,
  .lore-person__link:hover,
  .lore-district:hover,
  .lore-crew__link:hover,
  .lore-link__a:hover { transform: none; }
}

/* ==========================================================================
   Crown Hill: the Crown on its hill, drones round the belfry, gold in the cracks
   ========================================================================== */

.sq-district--crown-hill .sq-district__art {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23070a26'%3E%3Crect x='52' y='30' width='16' height='31'/%3E%3Cpath d='M49 31V23l5 4 6-10 6 10 5-4v8z'/%3E%3C/g%3E%3Crect x='56' y='37' width='8' height='10' rx='4' fill='%23ffc81a'/%3E%3Cpath d='M60 61l-3 12 5 9-4 14 3 22' fill='none' stroke='%23ffc81a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='.9'/%3E%3Cpath d='M62 82l9 5M57 73l-8 3' fill='none' stroke='%23ffc81a' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.7'/%3E%3Cg fill='%23ff3f6e'%3E%3Ccircle cx='30' cy='26' r='1.8'/%3E%3Ccircle cx='92' cy='18' r='1.8'/%3E%3Ccircle cx='101' cy='40' r='1.8'/%3E%3Ccircle cx='19' cy='44' r='1.8'/%3E%3Ccircle cx='78' cy='7' r='1.5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V104C80 102 130 92 160 76C178 66 190 58 200 58C210 58 222 66 240 76C270 92 320 102 400 104V120Z' fill='%23070a26'/%3E%3Cg fill='%23070a26'%3E%3Crect x='0' y='94' width='42' height='26'/%3E%3Crect x='36' y='104' width='32' height='16'/%3E%3Crect x='342' y='96' width='58' height='24'/%3E%3Crect x='318' y='106' width='30' height='14'/%3E%3C/g%3E%3Cg fill='%23ff2bd6' fill-opacity='.85'%3E%3Crect x='10' y='101' width='4' height='3'/%3E%3Crect x='358' y='103' width='4' height='3'/%3E%3Crect x='46' y='110' width='4' height='3'/%3E%3C/g%3E%3Cg fill='%232ee6ff' fill-opacity='.85'%3E%3Crect x='24' y='108' width='4' height='3'/%3E%3Crect x='376' y='110' width='4' height='3'/%3E%3Crect x='328' y='112' width='4' height='3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 80% 28%, #fff3d6 0 11px, rgba(255, 238, 196, .35) 12px 17px, transparent 38px),
    radial-gradient(ellipse at 50% 100%, rgba(255, 200, 26, .38), transparent 62%),
    linear-gradient(180deg, #120f3f 0%, #2b1f6e 60%, #6b4a1f 100%);
  background-size: auto 78%, 100% 78%, cover, cover, cover;
  background-position: bottom center, bottom center, center, center, center;
}

.sq-district--crown-hill .sq-district__tag { color: #ffd76a; }

/* ==========================================================================
   Spoilers: folded panels in an entry's text, veiled cards, the gate on a
   spoiler entry's page. Every spoiler wears the same crown gold.
   ========================================================================== */

.lore details.is-style-spoiler {
  margin: 1.4em 0;
  border: 1px dashed rgba(255, 200, 26, .5);
  border-radius: 16px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 200, 26, .045) 0 12px, transparent 12px 24px),
    rgba(12, 12, 46, .72);
  transition: background-color .2s, border-color .2s;
}

.lore details.is-style-spoiler[open] {
  border-style: solid;
  border-color: rgba(255, 200, 26, .38);
  background: rgba(255, 200, 26, .05);
}

.lore details.is-style-spoiler > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 15px;
  color: #fff;
  font-family: var(--sq-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.15;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.lore details.is-style-spoiler > summary::-webkit-details-marker { display: none; }

.lore details.is-style-spoiler > summary::before {
  content: "Spoiler";
  flex: 0 0 auto;
  padding: 4px 9px 3px;
  border-radius: 999px;
  background: var(--sq-crown);
  color: #160a3a;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.lore details.is-style-spoiler > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--sq-crown);
  border-bottom: 2px solid var(--sq-crown);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s;
}

.lore details.is-style-spoiler[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.lore details.is-style-spoiler > summary:hover { color: var(--sq-crown); }

.lore details.is-style-spoiler > summary:focus-visible {
  outline: 2px solid var(--sq-crown);
  outline-offset: 2px;
}

.lore details.is-style-spoiler > :not(summary) {
  margin: 0 18px 16px;
  color: var(--sq-soft);
}

.lore details.is-style-spoiler > :not(summary):first-of-type { margin-top: 2px; }

.lore .prose > details.is-style-spoiler:last-child { margin-bottom: 0; }

/* Section labels inside an entry's text read like the file's. */
.lore-entry__body h2,
.lore-beat__text h2 {
  margin: 1.7em 0 .7em;
  color: var(--sq-cyan);
  font-family: var(--sq-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.lore-entry__body h3,
.lore-beat__text h3 { font-family: var(--sq-display); font-style: italic; text-transform: uppercase; }

/* Veiled cards */
.lore-season,
.lore-mystery { --accent: var(--sq-cyan); }

.is-spoiler { --accent: var(--sq-crown); }

.is-spoiler .lore-person__link,
.is-spoiler .lore-link__a,
.is-spoiler .lore-rider__link,
.is-spoiler .lore-crew__link,
.is-spoiler .lore-season__link,
.is-spoiler .lore-mystery__link,
.lore-term.is-spoiler,
.lore-district.is-spoiler {
  border-style: dashed;
  border-color: rgba(255, 200, 26, .5);
}

.is-spoiler .lore-person__name,
.is-spoiler .lore-link__name,
.is-spoiler .lore-rider__name,
.is-spoiler .lore-crew__name,
.is-spoiler .lore-beat__title a,
.is-spoiler .lore-term__name a { color: var(--sq-crown); }

.is-spoiler .lore-person__text { font-style: italic; }

.lore-person__pic--spoiler,
.lore-link__pic--spoiler,
.lore-rider__pic--spoiler,
.lore-crew__badge--spoiler,
.lore-portrait--spoiler,
.lore-gate__pic {
  background:
    repeating-linear-gradient(135deg, rgba(255, 200, 26, .1) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #1a1650, #0b0d33);
}

.lore-crew__badge--spoiler { border-radius: 18px; }

/* The gate on a spoiler entry's page */
.lore-gate {
  --accent: var(--sq-crown);
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  max-width: 900px;
  margin: 6px 0 26px;
  padding: 30px 34px;
  border: 1px dashed rgba(255, 200, 26, .5);
  border-radius: 28px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 200, 26, .05) 0 14px, transparent 14px 28px),
    rgba(10, 12, 44, .82);
}

.lore-gate__pic {
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 200, 26, .35);
  border-radius: 24px;
}

.lore-gate__pic .lore-glyph { width: 72%; }

.lore-gate__kicker { color: #ffe08a; }

.lore-gate__title {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--sq-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-style: italic;
  font-weight: 900;
  line-height: .9;
  text-transform: uppercase;
  text-shadow: 0 0 36px rgba(255, 200, 26, .3);
}

.lore-gate__text {
  max-width: 540px;
  margin: 0;
  color: var(--sq-soft);
  font-size: 1.15rem;
  line-height: 1.6;
}

.lore-reveal > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffe066, var(--sq-crown));
  box-shadow: 0 12px 34px rgba(255, 200, 26, .28);
  color: #160a3a;
  font-family: var(--sq-display);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.lore-reveal > summary::-webkit-details-marker { display: none; }
.lore-reveal > summary:hover { box-shadow: 0 16px 44px rgba(255, 200, 26, .42); transform: translateY(-2px); }
.lore-reveal > summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lore-reveal__hide { display: none; }
.lore-reveal[open] .lore-reveal__show { display: none; }
.lore-reveal[open] .lore-reveal__hide { display: inline; }

.lore-reveal[open] > summary {
  margin-bottom: 44px;
  border-color: rgba(255, 200, 26, .55);
  background: transparent;
  box-shadow: none;
  color: var(--sq-crown);
}

/* ==========================================================================
   Story: seasons and mysteries
   ========================================================================== */

.lore-seasons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lore-season__link {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  height: 100%;
  padding: 24px 28px 26px;
  border: 1px solid var(--sq-line);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(42, 27, 110, .85), rgba(11, 13, 46, .95));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, rgba(24, 22, 84, .92)), rgba(11, 13, 46, .96));
  transition: transform .25s, border-color .25s;
}

.lore-season__link:hover,
.lore-season__link:focus-visible {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.lore-season__num {
  flex: 0 0 auto;
  min-width: .9em;
  color: var(--accent);
  font-family: var(--sq-display);
  font-size: 4.4rem;
  font-style: italic;
  font-weight: 900;
  line-height: .78;
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent);
}

.lore-season__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lore-season__when {
  color: var(--accent);
  color: color-mix(in srgb, var(--accent) 62%, #fff);
  font-family: var(--sq-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lore-season__title {
  margin: 0 0 4px;
  color: #fff;
  font-family: var(--sq-display);
  font-size: 2rem;
  font-style: italic;
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}

.lore-season__text {
  color: var(--sq-soft);
  line-height: 1.6;
}

.lore-mysteries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lore-mystery__link {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  height: 100%;
  padding: 20px 22px 22px;
  border: 1px dashed rgba(160, 150, 255, .35);
  border-radius: 18px;
  background: rgba(10, 12, 44, .8);
  transition: border-color .2s, transform .2s;
}

.lore-mystery__link:hover,
.lore-mystery__link:focus-visible {
  border-color: var(--sq-crown);
  transform: translateY(-3px);
}

.lore-mystery__mark {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--sq-crown);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 200, 26, .25);
  color: var(--sq-crown);
  font-family: var(--sq-display);
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
}

.lore-mystery__body { min-width: 0; }

.lore-mystery__q {
  margin: 2px 0 8px;
  color: #fff;
  font-family: var(--sq-display);
  font-size: 1.55rem;
  font-style: italic;
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
}

.lore-mystery__text {
  display: block;
  color: var(--sq-soft);
  line-height: 1.55;
}

.lore-mystery__when {
  display: inline-block;
  margin-top: 12px;
  color: var(--sq-crown);
  font-family: var(--sq-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Jump links between the groups of an index */
.lore-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.lore-jump a {
  display: inline-flex;
  padding: 7px 14px;
  border: 1px solid var(--sq-line);
  border-radius: 999px;
  background: rgba(10, 12, 44, .6);
  color: var(--sq-soft);
  font-family: var(--sq-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lore-jump a:hover,
.lore-jump a:focus-visible {
  border-color: var(--sq-cyan);
  color: #fff;
}

.lore-group { scroll-margin-top: calc(var(--bc-header-h) + var(--lore-nav-h) + 12px); }

@media (max-width: 700px) {
  .lore-group { scroll-margin-top: calc(var(--bc-header-h) + 12px); }
  .lore-gate { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px; }
  .lore-gate__pic { width: 96px; border-radius: 18px; }
  .lore-reveal > summary { width: 100%; }
  .lore-season__link { gap: 14px; padding: 20px 18px 22px; }
  .lore-seasons { max-width: none; }
  .lore-season__num { font-size: 3.4rem; }
  .lore-season__title { font-size: 1.7rem; }
  .lore-seasons,
  .lore-mysteries { grid-template-columns: minmax(0, 1fr); }
  .lore-mystery__link { gap: 14px; padding: 18px; }
  .lore-mystery__q { font-size: 1.35rem; }
  .lore details.is-style-spoiler > summary { padding: 13px 14px; font-size: 1.05rem; }
  .lore details.is-style-spoiler > :not(summary) { margin: 0 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .lore-season__link,
  .lore-mystery__link,
  .lore-reveal > summary,
  .lore details.is-style-spoiler > summary::after { transition: none; }
  .lore-season__link:hover,
  .lore-mystery__link:hover,
  .lore-reveal > summary:hover { transform: none; }
}