/* =========================================================================
   Carrying the Fire, Casting the Light — Afrofuturist concept page

   THE SYSTEM, not the decoration.

   The page carries two registers, because the game does. 2050 is navy, cyan
   and gold: the ancestral library rebuilt as technology. The historical worlds
   the students travel into are warmer and burgundy-grounded. Scrolling the
   quest gallery moves you between them, which is the premise of the game
   stated as a layout rather than as a sentence.

   Each colour has one job and holds it:
     Gold      what is carried forward. The thread, the tree, the ancestors.
     Cyan      the technology doing the carrying. Holograms, interfaces, status.
     Burgundy  the historical register. Mary wears it; so do the past sections.
     Ivory     everything a person reads.

   Inherits both faces and the spacing scale from the portfolio's site.css.
   ========================================================================= */

.game {
  --navy:      #081827;
  --navy-2:    #102F47;
  --gold:      #D8AE62;
  --cyan:      #41C5D5;
  --ivory:     #EEE0C6;
  --burgundy:  #743C51;

  --ink:       var(--ivory);
  --ink-soft:  #B6AC95;
  --ink-dim:   #8A8373;
  --ground:    var(--navy);

  background: var(--ground);
  color: var(--ink);
}

/* the historical register: warmer ground, burgundy structure */
.game .past {
  --ground: #16101C;
  --ink-soft: #BCA896;
  --ink-dim: #8E7F70;
  background:
    radial-gradient(90% 70% at 15% 0%, color-mix(in oklab, var(--burgundy) 42%, transparent) 0%, transparent 60%),
    var(--ground);
}

.game .wrap { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.game section { padding-block: clamp(3rem, 6vw, 5.5rem); position: relative; }
.game h2 {
  font-family: var(--sc-font-display); font-weight: 900;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.12; letter-spacing: -0.018em; margin: 0; color: #FFFFFF;
  text-wrap: balance;
}
.game h3 { font-family: var(--sc-font-display); font-weight: 700; margin: 0; color: #FFFFFF; }
/* `:where()` contributes no specificity, so this is a true default that any
   single-class rule can override. As a plain `.game p` it scored (0,1,1) and
   silently beat every component rule like `.hero-g__sub` (0,1,0), which meant
   a batch of deliberate margins computed to zero. */
:where(.game) :where(p) { margin: 0; color: var(--ink-soft); line-height: 1.62; }
.game .lead { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); color: var(--ink); max-width: 46ch; }
.game .eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); margin: 0;
}
.game .past .eyebrow { color: #C98A6E; }

/* ------------------------------------------------- the ancestral band --
   A geometric band drawn from the cloth and architecture in the concept art,
   used where the page changes register. It is the seam between 2050 and the
   historical worlds, so it only appears at a boundary that means something. */
.band {
  height: 14px; border: 0; margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 7 L7 0 L14 7 L7 14Z' fill='none' stroke='%23D8AE62' stroke-width='1' opacity='.75'/%3E%3Cpath d='M28 7 L35 0 L42 7 L35 14Z' fill='%23D8AE62' opacity='.45'/%3E%3Cpath d='M17 7 H25 M45 7 H53' stroke='%2341C5D5' stroke-width='1' opacity='.6'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center;
}

/* ------------------------------------------------------- the thread ----
   One continuous gold line down the measure, the Network of Hands rendered
   as page furniture. It is the spine the sections hang from. */
@media (min-width: 1100px) {
  .game main { position: relative; }
  .game main::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(50% - 34rem + var(--sc-gutter) - 1.6rem);
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%, color-mix(in oklab, var(--gold) 55%, transparent) 8%,
      color-mix(in oklab, var(--gold) 55%, transparent) 88%, transparent 100%);
    pointer-events: none;
  }
}

/* ------------------------------------------------------------- top bar -- */
.game__bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--sc-4);
  padding: 0.9rem clamp(1rem, 4vw, 2.75rem);
  background: color-mix(in oklab, var(--navy) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--cyan) 26%, transparent);
  font-size: 0.85rem;
}
.game__back { color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.game__back:hover { color: var(--ivory); }
.game__back svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
.game__status {
  margin-left: auto; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid color-mix(in oklab, var(--cyan) 45%, transparent);
  padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap;
}

/* ---------------------------------------------------------------- hero -- */
.hero-g { overflow: hidden; padding-block: clamp(3rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5.5rem); }
.hero-g::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 80% 10%, color-mix(in oklab, var(--cyan) 20%, transparent) 0%, transparent 60%),
    radial-gradient(70% 80% at 10% 90%, color-mix(in oklab, var(--burgundy) 40%, transparent) 0%, transparent 62%);
}
.hero-g > * { position: relative; }
.hero-g h1 {
  font-family: var(--sc-font-display); font-weight: 900;
  font-size: clamp(2.1rem, 1.35rem + 3.4vw, 4rem);
  line-height: 1.06; letter-spacing: -0.022em; margin: var(--sc-5) 0 0; color: #FFFFFF;
}
.hero-g h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.hero-g__sub { margin-top: var(--sc-5); font-size: 1rem; letter-spacing: 0.02em; color: var(--cyan); }
.hero-g__lede { margin-top: var(--sc-6); }
.hero-g__meta {
  margin-top: var(--sc-7); padding-top: var(--sc-4);
  border-top: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  max-width: 46ch;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.78rem; color: var(--ink-dim);
}
.hero-g__art { position: relative; margin: clamp(2.5rem, 6vw, 4rem) 0 0; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px -30px #000; }
.hero-g__art img { display: block; width: 100%; height: auto; }
.hero-g__art figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem 1rem 0.8rem;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #DCD2C2;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, #000 82%, transparent));
}

/* ---------------------------------------------------------- the world -- */
.world__q { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(2rem, 5vw, 3.25rem); }
.world__q li { list-style: none; padding-left: clamp(1rem, 3vw, 2rem); border-left: 2px solid color-mix(in oklab, var(--gold) 60%, transparent); }
.world__q b { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); color: #FFFFFF; letter-spacing: -0.01em; }
.world__q span { display: block; margin-top: 0.4rem; color: var(--ink-soft); font-size: 0.97rem; line-height: 1.6; }

.spaces { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.space { padding: clamp(1.1rem, 2.5vw, 1.6rem); border: 1px solid color-mix(in oklab, var(--cyan) 22%, transparent); border-radius: 5px; background: var(--navy-2); }
.space__n { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.space h3 { margin-top: 0.5rem; font-size: 1.1rem; letter-spacing: -0.01em; }
.space p { margin-top: 0.45rem; font-size: 0.93rem; }

/* --------------------------------------------------------- characters --- */
.chars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3.5vw, 2.75rem); margin-top: clamp(2rem, 5vw, 3rem); }
@media (max-width: 760px) { .chars { grid-template-columns: 1fr; } }
.char { margin: 0; }
.char__art { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid color-mix(in oklab, var(--gold) 28%, transparent); }
/* The crop is cut at this exact ratio in lab/, so the browser does not crop a
   second time on top of it. Both subjects face right and are placed left of
   centre, so the space they are looking into stays in frame. */
.char__art img { display: block; width: 100%; height: auto; aspect-ratio: 450 / 536; }
.char p.char__n { margin-top: var(--sc-5); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.char h3 { margin-top: 0.35rem; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); letter-spacing: -0.012em; }
.char p { margin-top: 0.55rem; font-size: 0.95rem; }
.char p.char__ability { margin-top: 0.75rem; font-size: 0.82rem; color: var(--gold); letter-spacing: 0.02em; }

/* ------------------------------------------------------------ the loop -- */
.loop { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; margin-top: clamp(2rem, 5vw, 3rem); }
.loop__step { flex: 1 1 10rem; padding: 1.1rem 1.2rem; border-radius: 5px; background: color-mix(in oklab, var(--cyan) 7%, transparent); border: 1px solid color-mix(in oklab, var(--cyan) 26%, transparent); }
.loop__step b { display: block; font-family: var(--sc-font-display); font-weight: 900; font-size: 1rem; letter-spacing: 0.03em; color: var(--cyan); }
.loop__step:nth-child(3) { background: color-mix(in oklab, var(--gold) 10%, transparent); border-color: color-mix(in oklab, var(--gold) 42%, transparent); }
.loop__step:nth-child(3) b { color: var(--gold); }
.loop__step span { display: block; margin-top: 0.35rem; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }

/* ------------------------------------------------------------- scenes --- */
.scenes { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .scenes { grid-template-columns: 1fr; } }
.scene { margin: 0; border: 1px solid color-mix(in oklab, var(--ivory) 14%, transparent); border-radius: 6px; overflow: hidden; background: color-mix(in oklab, #000 22%, transparent); }
.scene img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.scene figcaption { padding: clamp(1rem, 2.5vw, 1.4rem); }
.scene__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--gold) 60%, transparent);
  color: var(--gold); font-size: 0.78rem; font-weight: 700;
}
.scene--now .scene__n { border-color: color-mix(in oklab, var(--cyan) 60%, transparent); color: var(--cyan); }
.scene h3 { margin-top: 0.6rem; font-size: 1.12rem; letter-spacing: -0.012em; }
.scene p { margin-top: 0.45rem; font-size: 0.92rem; }
.scene p.scene__note { margin-top: 0.7rem; font-size: 0.74rem; color: var(--ink-dim); font-style: italic; }
.scene__where { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-left: 0.6rem; }

/* ------------------------------------------------------------ systems --- */
.sys { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.75rem, 5vw, 3.5rem); align-items: start; margin-top: clamp(2rem, 5vw, 3rem); }
@media (max-width: 900px) { .sys { grid-template-columns: 1fr; } }
.sys__art { margin: 0; border-radius: 6px; overflow: hidden; }
@media (min-width: 901px) { .sys__art { position: sticky; top: 5.5rem; } }
.sys__art img { display: block; width: 100%; height: auto; }
.sys__art figcaption { margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-dim); }
.sys__list { list-style: none; margin: 0; padding: 0; }
.sys__list li { padding: 1rem 0; border-top: 1px solid color-mix(in oklab, var(--ivory) 14%, transparent); }
.sys__list li:last-child { border-bottom: 1px solid color-mix(in oklab, var(--ivory) 14%, transparent); }
.sys__list b { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; color: #FFFFFF; }
.sys__list span { display: block; margin-top: 0.3rem; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }

.thesis { margin-top: clamp(2rem, 5vw, 3rem); padding: clamp(1.25rem, 3vw, 2rem); border-left: 2px solid var(--gold); background: color-mix(in oklab, var(--gold) 8%, transparent); }
.thesis p { color: #FFFFFF; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem); line-height: 1.4; letter-spacing: -0.01em; max-width: 40ch; }

/* ----------------------------------------------------------- research --- */
.research { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: clamp(2rem, 5vw, 3rem); }
.research div { padding-top: 1rem; border-top: 1px solid color-mix(in oklab, var(--gold) 34%, transparent); }
.research b { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; color: #FFFFFF; }
.research span { display: block; margin-top: 0.35rem; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }

/* the creative principle, held on its own ground */
.principle { padding-block: clamp(3.5rem, 9vw, 7rem); text-align: center; background: var(--navy-2); position: relative; }
.principle p {
  font-family: var(--sc-font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1.3vw, 2rem); line-height: 1.38; letter-spacing: -0.014em;
  color: #FFFFFF; max-width: 30ch; margin-inline: auto; text-wrap: balance;
}
.principle p b { font-style: normal; font-weight: 900; color: var(--gold); }

/* ------------------------------------------------------------ roadmap --- */
.road { list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0; display: grid; gap: 0; }
.road li { display: grid; grid-template-columns: 9rem 1fr; gap: clamp(0.75rem, 2vw, 1.5rem); padding: 1.05rem 0; border-top: 1px solid color-mix(in oklab, var(--ivory) 14%, transparent); align-items: baseline; }
.road li:last-child { border-bottom: 1px solid color-mix(in oklab, var(--ivory) 14%, transparent); }
@media (max-width: 640px) { .road li { grid-template-columns: 1fr; gap: 0.25rem; } }
.road__s { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.road__s[data-s="done"] { color: var(--gold); }
.road__s[data-s="now"]  { color: var(--cyan); }
.road__s[data-s="next"] { color: var(--ink-dim); }
.road b { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; color: #FFFFFF; }
.road span { display: block; margin-top: 0.25rem; font-size: 0.92rem; color: var(--ink-soft); }

/* ------------------------------------------------------------- footer --- */
.game__foot { padding-block: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid color-mix(in oklab, var(--ivory) 14%, transparent); }
.game__foot p { font-size: 0.8rem; color: var(--ink-dim); }
.game__foot a { color: var(--ink-soft); }
.game__foot .btn { margin-top: var(--sc-5); border-color: color-mix(in oklab, var(--gold) 50%, transparent); color: var(--ivory); }
.game__foot .btn:hover { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 10%, transparent); }

.game a:focus-visible, .game button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-g::before { opacity: 0.8; }
}

/* -------------------------------------------- research acknowledgments --
   The credentials plate. Set apart from the research section above it,
   which argues the design; this one is the record behind it. */
.ack { background: var(--navy-2); }
.ack__body { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: grid; gap: var(--sc-5); max-width: 62ch; }
.ack__body p { font-size: 0.98rem; line-height: 1.68; color: var(--ink-soft); }
.ack__body b { color: #FFFFFF; font-weight: 700; }
.ack__body cite { font-style: italic; color: var(--gold); }
.ack__status {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--cyan);
  background: color-mix(in oklab, var(--cyan) 8%, transparent);
  max-width: 62ch; font-size: 0.93rem; line-height: 1.6; color: var(--ink-soft);
}
.ack__status b { display: block; color: var(--cyan); font-family: var(--sc-font-display); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.3rem; }