:root { --night:#17213d; --paper:#faf5ec; --amber:#b45309; --gold:#f2be83; --teal:#0f6e68; --slate:#5b6670; --ink:#201d1a;
          --serif:"Fraunces",Georgia,serif; --sans:"Source Sans 3","Trebuchet MS",sans-serif; }
  * { box-sizing:border-box; margin:0; }
  html,body { width:1920px; height:1080px; overflow:hidden; background:var(--night); color:var(--paper); font-family:var(--sans); }
  .layer { position:absolute; inset:0; padding:92px 116px; opacity:0; transition:opacity .5s ease; pointer-events:none; }
  .layer.on { opacity:1; }
  .noMotion .layer { transition:none; }
  .kicker { font:700 30px/1 var(--sans); letter-spacing:.16em; color:var(--gold); text-transform:uppercase; }
  h1 { font:700 96px/1.05 var(--serif); letter-spacing:-.018em; margin-top:40px; }
  .art { position:absolute; border-radius:20px; object-fit:cover; }

  /* pedestal + reveal */
  .hero-art { right:116px; top:92px; width:820px; height:820px; }
  .hero-copy { max-width:840px; margin-top:56px; font:600 44px/1.35 var(--sans); color:#eee7dc; }

  /* origin predictions */
  .predict-row { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:64px; max-width:1688px; }
  .predict { padding:40px 44px; border:4px solid rgba(250,245,236,.32); border-radius:16px; opacity:0; transform:translateY(18px); transition:opacity .4s ease, transform .4s ease; }
  .on .predict { opacity:1; transform:none; }
  .on .predict:nth-child(2) { transition-delay:.5s; } .on .predict:nth-child(3) { transition-delay:1s; }
  .noMotion .predict { transition:none !important; }
  .predict b { display:block; font:700 40px/1.1 var(--sans); letter-spacing:.03em; }
  .predict span { display:block; margin-top:14px; font:600 28px/1.3 var(--sans); opacity:.75; }

  /* decisions */
  .opts { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:70px; max-width:1688px; }
  .opts.two { grid-template-columns:repeat(2,1fr); max-width:1200px; }
  .opt { padding:44px 42px; border:4px solid rgba(250,245,236,.38); border-radius:18px; background:rgba(250,245,236,.05); }
  .opt .num { display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; border:4px solid var(--gold); font:700 34px/1 var(--sans); color:var(--gold); }
  .opt h3 { font:700 46px/1.1 var(--serif); margin-top:20px; }
  .opt p { margin-top:14px; font:600 27px/1.3 var(--sans); opacity:.75; }
  .opt.picked { border-color:var(--gold); background:rgba(180,83,9,.2); }

  /* branch vignette */
  .vignette { display:grid; grid-template-columns:640px 1fr; gap:64px; margin-top:56px; align-items:start; }
  .vignette img { width:640px; height:640px; border-radius:20px; }
  .vig-copy p { font:600 38px/1.4 var(--sans); color:#eee7dc; }
  .counter { margin-top:44px; padding:36px 44px; border-left:10px solid var(--amber); background:rgba(250,245,236,.06); border-radius:0 14px 14px 0; }
  .counter .who { font:700 26px/1 var(--sans); letter-spacing:.14em; color:var(--gold); text-transform:uppercase; }
  .counter p { margin-top:14px; font:700 34px/1.32 var(--serif); }

  /* reveal + question */
  .gold-q { max-width:1500px; margin-top:60px; font:700 72px/1.16 var(--serif); color:var(--gold); }

  /* gallery */
  .gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:40px; max-width:1688px; }
  .bust { opacity:.14; transition:opacity .5s ease; }
  .bust.lit { opacity:1; }
  .noMotion .bust { transition:none; }
  .bust img { width:100%; height:360px; border-radius:18px; object-fit:cover; object-position:center 18%; }
  .bust h3 { margin-top:18px; font:700 34px/1.1 var(--serif); }
  .bust .work { margin-top:6px; font:700 22px/1.2 var(--sans); letter-spacing:.08em; color:var(--gold); text-transform:uppercase; }
  .bust p { margin-top:12px; font:600 24px/1.3 var(--sans); opacity:.8; }
  .handoff { position:absolute; left:116px; right:116px; bottom:36px; font:700 36px/1.25 var(--serif); color:var(--gold); }

.w900 { max-width:900px; } .w1500 { max-width:1500px; } .w1600 { max-width:1600px; } .w1650 { max-width:1650px; }
.mt80 { margin-top:80px; }
.handoff { opacity:0; transition:opacity .5s ease; }
.handoff.lit { opacity:1; }

/* 2026-08-02: the C22-verified Sal Khan quote on the question panel. */
.attributed-quote {
  max-width: 1500px;
  margin: 48px auto 0;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 54px;
  line-height: 1.35;
  color: #d9e1e6;
}
.attributed-quote span {
  display: block;
  margin-top: 18px;
  font-family: "Trebuchet MS", sans-serif;
  font-style: normal;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #8d9aa6;
}

  /* Public interactivity: an on-stage layer accepts input, and options read
     and focus like the buttons they are. */
  .layer.on { pointer-events: auto; }
  .opt { cursor: pointer; }
  .opt:focus-visible { outline: 5px solid var(--gold); outline-offset: 4px; }