/* ── Resources: the blue palette, applied by the supernova ─────────── */
body.is-blue {
  --ink:#0B0E1E; --surface:#10152D; --oxblood:#1B2B4B; --crimson:#425B6F; --crimson-live:#6E8CA8;
  --ivory:#E2D9CB; --muted:#A9B6C2; --rose:#8CB2D2;
  --hairline:rgba(226,217,203,.12); --hairline-2:rgba(226,217,203,.24);
}
:root { --prussian:#10152D; --indigo:#1B2B4B; --slate:#425B6F; --slate-live:#6E8CA8; --ice:#8CB2D2; --bone:#E2D9CB; --bone-dim:#A9B6C2; --glass:rgba(27,43,75,.42); }
body { background:#050508; transition: background 1.6s var(--ease-io), color .9s var(--ease-io); }
body.is-blue { background: var(--ink); }
body.is-blue .brand path { fill: var(--slate-live); }
body.is-blue .foot-mark path { fill: var(--slate-live); }
body.is-blue .foot-statement .sig { color: var(--slate-live); }
.site-head.is-stuck { background: rgba(11,14,30,.72); }
body:not(.is-blue) .site-head.is-stuck { background: rgba(11,9,10,.72); }
.hero .inner { max-width: min(100%, 980px); }
.hero { justify-content: center; }
/* Before the supernova the page is still the crimson site: a pitch-black
   canvas and ivory text. The nova is the moment of handover; after it every
   token on the page is from the blue palette. */

/* ── the cosmos layers ───────────────────────────────────────────────── */
#sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; }

/* aurora — three slow ribbons that only exist once the page has turned blue */
#aurora {
  position: fixed; inset: -20%; z-index: -3; pointer-events: none; opacity: 0;
  transition: opacity 1.4s var(--ease-io);
}
#aurora i {
  position: absolute; display: block; border-radius: 50%; will-change: transform;
}
#aurora i:nth-child(1) { inset: 6% 34% 50% 8%;  background: radial-gradient(60% 60% at 40% 50%, rgba(66,91,111,.85), transparent 72%);  animation: au1 34s ease-in-out infinite alternate; }
#aurora i:nth-child(2) { inset: 28% 6% 18% 40%; background: radial-gradient(60% 60% at 60% 40%, rgba(110,140,168,.55), transparent 72%); animation: au2 44s ease-in-out infinite alternate; }
#aurora i:nth-child(3) { inset: 46% 24% 4% 18%; background: radial-gradient(60% 60% at 50% 60%, rgba(27,43,75,.95), transparent 70%);    animation: au3 52s ease-in-out infinite alternate; }
@keyframes au1 { from { transform: translate3d(-6%,-4%,0) scale(1); } to { transform: translate3d(8%,6%,0) scale(1.22); } }
@keyframes au2 { from { transform: translate3d(6%,5%,0) scale(1.15); } to { transform: translate3d(-7%,-6%,0) scale(.95); } }
@keyframes au3 { from { transform: translate3d(3%,-6%,0) scale(1.05); } to { transform: translate3d(-5%,7%,0) scale(1.3); } }

/* the supernova whiteout */
#nova {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--nx, 78%) var(--ny, 46%),
    #FFFFFF 0%, #FFE9E6 14%, #E56A79 30%, #B51F32 46%, rgba(38,12,18,0) 74%);
}

/* grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 1 · hero ────────────────────────────────────────────────────────── */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 8rem var(--gutter) 4rem; position: relative; z-index: 2; }
.hero .inner { max-width: 76%; }
@media (max-width: 900px) { .hero .inner { max-width: 100%; } }
.hero h1 { font-size: var(--t-hero); margin: 1.25rem 0 1.75rem; }
.hero .cta-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2.25rem; }
.scroll-cue { position: absolute; left: var(--gutter); bottom: 2rem; display: flex; align-items: center; gap: .6rem; font-size: var(--t-stamp); color: var(--bone-dim); }
.scroll-cue i { display: block; width: 1px; height: 34px; background: var(--hairline-2); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 13px; background: var(--crimson-live); animation: cue 2.1s var(--ease-io) infinite; }
body.is-blue .scroll-cue i::after { background: var(--slate-live); }
@keyframes cue { 0% { transform: translateY(-15px); } 100% { transform: translateY(34px); } }

/* the scroll distance the supernova plays out over */
.nova-gap { height: 120svh; position: relative; z-index: 1; }
.nova-gap p { position: sticky; top: 50vh; text-align: center; font-size: var(--t-accent); color: var(--bone); opacity: 0; transition: opacity .7s var(--ease); padding-inline: var(--gutter); }
.nova-gap.is-showing p { opacity: 1; }

/* ── glossary grid ───────────────────────────────────────────────────── */
.glossary { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (min-width: 720px)  { .glossary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .glossary { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.term {
  position: relative; text-align: left; width: 100%;
  border-radius: 18px; padding: 1.1rem 1.15rem; min-height: 96px;
  display: grid; align-content: start; gap: .45rem;
  background: rgba(27,43,75,.62);
  border: 1px solid var(--hairline);
  
  overflow: hidden; isolation: isolate;
  transition: border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
/* a few stars caught inside the glass */
.term::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 26%, rgba(226,217,203,.9), transparent 60%),
    radial-gradient(1px 1px   at 68% 18%, rgba(140,178,210,.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 68%, rgba(226,217,203,.7), transparent 60%),
    radial-gradient(1px 1px   at 34% 78%, rgba(140,178,210,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 52% 46%, rgba(226,217,203,.55), transparent 60%);
}
.term:hover { border-color: var(--hairline-2); transform: translateY(-2px); }
.term .t { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.term .x { font-size: .75rem; color: var(--bone-dim); line-height: 1.35; }
.term .d {
  font-size: .875rem; color: var(--bone-dim); line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s var(--ease), opacity .45s var(--ease), margin .55s var(--ease);
}
.term[aria-expanded="true"] {
  background: rgba(27,43,75,.72); border-color: var(--slate-live);
  grid-column: span 2; z-index: 3; transform: none;
}
@media (min-width: 720px) { .term[aria-expanded="true"] { grid-column: span 2; } }
.term[aria-expanded="true"] .d { max-height: 22rem; opacity: 1; margin-top: .3rem; }
.term .plus { position: absolute; top: 1.05rem; right: 1.05rem; width: 11px; height: 11px; opacity: .5; transition: transform .45s var(--ease), opacity .45s var(--ease); }
.term .plus::before, .term .plus::after { content: ""; position: absolute; background: currentColor; }
.term .plus::before { inset: 5px 0 5px 0; height: 1px; }
.term .plus::after  { inset: 0 5px 0 5px; width: 1px; }
.term[aria-expanded="true"] .plus { transform: rotate(135deg); opacity: 1; }

/* ── frameworks ──────────────────────────────────────────────────────── */
.frameworks { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .frameworks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fw {
  display: grid; gap: 1rem; align-content: start;
  background: rgba(16,21,45,.55); border: 1px solid var(--hairline); border-radius: 22px;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.fw:hover { border-color: var(--hairline-2); background: rgba(16,21,45,.75); }
.fw .top { display: flex; align-items: baseline; gap: .9rem; }
.fw .n { font-size: var(--t-stamp); font-weight: 700; color: var(--slate-live); letter-spacing: .14em; }
.fw h4 { font-size: var(--t-card); font-weight: 700; }
.fw .tag { font-size: var(--t-accent); color: var(--bone); }
.fw figure { border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: var(--ink); }
.fw figure img { width: 100%; height: auto; }
.fw .body { color: var(--bone-dim); font-size: .9375rem; }
.fw .made { font-size: var(--t-stamp); color: var(--slate-live); }

/* ── 4 · templates ───────────────────────────────────────────────────── */
.decks { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 1000px) { .decks { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: start; } }
.decks .copy p + p { margin-top: 1rem; }
.deck-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deck {
  display: grid; gap: .75rem; border-radius: 18px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--hairline);
   padding-bottom: 1rem;
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.deck:hover { border-color: var(--slate-live); transform: translateY(-3px); }
.deck .shot { aspect-ratio: 16 / 10; background: var(--prussian); border-bottom: 1px solid var(--hairline); position: relative; overflow: hidden; }
.deck .shot svg { width: 100%; height: 100%; }
.deck .meta { padding-inline: 1rem; display: grid; gap: .2rem; }
.deck .meta b { font-size: .9375rem; font-weight: 700; }
.deck .meta span { font-size: .8125rem; color: var(--bone-dim); }
.deck .go { padding-inline: 1rem; font-size: var(--t-stamp); color: var(--slate-live); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* Section 4 keeps its right side clear — the mark assembles there. */
.finale { min-height: 108svh; display: grid; align-content: center; }
.finale .inner { max-width: 54%; }
@media (max-width: 1000px) { .finale .inner { max-width: 100%; } }
.credit {
  position: fixed; right: 4vw; top: 50%; transform: translateY(-50%) translateY(14px);
  width: min(34ch, 34vw); text-align: center; z-index: 3; pointer-events: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.credit.is-in { opacity: 1; transform: translateY(-50%); }
.credit img { width: min(300px, 78%); margin: 0 auto 1.1rem; opacity: .97; }
.credit p { font-size: .875rem; color: var(--bone-dim); }
.credit p em { font-style: normal; color: var(--bone); font-weight: 600; }
@media (max-width: 1000px) { .credit { position: static; width: auto; margin-top: 4rem; transform: none; } .credit.is-in { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .rv, .lift > *, .credit { opacity: 1; transform: none; }
  #sky, #aurora, #nova { display: none; }
  .nova-gap { height: auto; padding-block: 4rem; }
  .nova-gap p { position: static; opacity: 1; }
}

/* ── the Innovations credit: positioned by JS over the star cluster ───── */
.credit{position:fixed;left:0;top:0;right:auto;bottom:auto;transform:none;width:30vw;text-align:center;
  z-index:3;pointer-events:none;opacity:1;visibility:hidden;transition:none}
.credit.is-in{transform:none}
.credit img{width:100%;margin:0;opacity:0;transition:none}
.credit p{width:max(100%,30ch);margin:1.1rem 0 0 50%;translate:-50% 0;opacity:0;font-size:.9375rem}
@media(max-width:1000px){.credit{position:static;width:auto;visibility:visible;margin-top:4rem}
  .credit img,.credit p{opacity:1!important;transform:none!important}.credit img{width:min(300px,78%);margin:0 auto}}

/* ── footer: the global footer, in the blue palette, opaque over the sky ─ */
body.is-blue .site-foot{background:linear-gradient(180deg,#0B0E1E 0%,#10152D 55%,#0B0E1E 100%)}
.site-foot{position:relative;z-index:4}
.nova-gap p{display:none}
/* room for the mark to hold, fully resolved, before the footer arrives */
.finale{min-height:165svh;align-content:start;padding-top:clamp(5rem,12vh,8rem)}