/* ==========================================================================
   Apollo Innovation Commons - polish layer

   A purely additive refinement pass, loaded after the inline style block on
   each page. Nothing here changes content or structure; removing this file
   and its link tag restores the previous appearance exactly.
   ========================================================================== */

:root{
  /* one radius scale and one shadow scale, so every surface feels related */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --sh-1:0 2px 10px rgba(6,4,12,.14);
  --sh-2:0 12px 34px rgba(6,4,12,.26);
  --sh-3:0 30px 80px rgba(0,0,0,.55);
}

/* --------------------------------------------------------------------------
   1. Hero - let the night sky show through
   The hero sat under an opaque black gradient with a heavy fog canvas on top,
   which hid the star field and the sun entirely. The fog is now atmosphere
   rather than weather, and it fades out before it reaches the paper edge.
   -------------------------------------------------------------------------- */
header.hero{
  background:linear-gradient(180deg,
    rgba(0,0,0,.72) 0%,
    rgba(2,1,6,.50) 38%,
    rgba(6,4,9,.14) 72%,
    rgba(6,4,9,0) 100%);
}
header.hero canvas{
  opacity:.34;
  filter:saturate(.5) brightness(.9);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 92%);
}
.hero .hero-logo{
  width:420px;
  filter:drop-shadow(0 0 70px rgba(245,196,81,.22));
}
.hero .tagline{text-wrap:balance}

/* --------------------------------------------------------------------------
   2. Navigation - opaque enough to stay legible over the light paper
   -------------------------------------------------------------------------- */
nav.top{
  background:rgba(8,6,18,.92);
  border-bottom:1px solid rgba(245,196,81,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.navlinks a{transition:background .18s,color .18s,transform .18s}
.navlinks a:hover{transform:translateY(-1px)}
.navlinks a.gala{box-shadow:0 6px 20px rgba(245,196,81,.26)}
.navlinks a.gala:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(245,196,81,.42)}

/* --------------------------------------------------------------------------
   3. Buttons and cards - one radius, one easing curve
   -------------------------------------------------------------------------- */
.btn-explore,.gala-cta,.to-paper .big-explore,.btn-ghost,.q-opt{
  border-radius:var(--r-md);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s,border-color .18s,color .18s;
}
.btn-explore:hover,.to-paper .big-explore:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(245,196,81,.18);
}
.play-card{border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(0,0,0,.34)}

/* --------------------------------------------------------------------------
   4. The paper sheet - a deeper shadow so it reads as a page lifted off space
   -------------------------------------------------------------------------- */
.sheet{border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-3)}
nav.toc{border-radius:var(--r-xl) var(--r-xl) 0 0}

/* --------------------------------------------------------------------------
   5. Typography - fluid size, tighter leading, fewer orphans
   -------------------------------------------------------------------------- */
body{font-size:clamp(18px,1.02rem + .42vw,22px)}
main p,main li{line-height:1.72;text-wrap:pretty}
h2.sec,h3.subsec{text-wrap:balance}
h2.sec{letter-spacing:-.006em}
main a,a.inline{
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:rgba(148,99,23,.38);
  transition:color .18s,text-decoration-color .18s;
}
main a:hover,a.inline:hover{text-decoration-color:var(--accent)}

/* --------------------------------------------------------------------------
   6. Keyboard focus and text selection
   -------------------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:rgba(245,196,81,.30)}

/* --------------------------------------------------------------------------
   7. Small screens
   -------------------------------------------------------------------------- */
@media(max-width:560px){
  .wrap{padding:0 20px}
  h2.sec{margin-top:56px}
  .hero .hero-logo{width:min(320px,84vw)}
}

/* --------------------------------------------------------------------------
   8. Print - the white paper should print like a white paper
   -------------------------------------------------------------------------- */
@media print{
  nav.top,nav.toc,.cosmos,.stars,.sun,.to-paper,.whoami,header.hero canvas{display:none!important}
  body{background:#fff!important;color:#000;font-size:11.5pt;line-height:1.5}
  .sheet{box-shadow:none;border-radius:0;max-width:none}
  .wrap.collapsed .sec-body{display:block!important}
  h2.sec{page-break-after:avoid}
}

/* --------------------------------------------------------------------------
   9. Respect reduced-motion preferences across the whole site
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}