/* About page palette: orange first, white second, cyan third, a little lavender, pink and red as small accents.
   Loaded after about.css and site-vibe.css, so it only restates colours. Same look as the home page. */
:root{
  --cyan:#65faff;--terminus-cyan:#65faff;
  --orange:#ff7a18;--terminus-orange:#ff7a18;
  --ink:#05050b;--terminus-ink:#05050b;
  --panel:rgba(5,7,14,.94);--terminus-panel:rgba(5,7,14,.9);
  --text:#e3e9ef;--muted:#8fa9b6;
  --lav:#c6a0ff;--pink:#ff4fa8;--red:#ff3b42;
}
html,body{background:#05050b;color:#e3e9ef}
#matrix{background:#05050b}

/* navigation, as on the home page */
nav.top-nav{border-bottom-color:rgba(101,250,255,.25);background:linear-gradient(180deg,rgba(5,7,14,.97),rgba(5,7,14,.88));box-shadow:0 10px 28px rgba(0,0,0,.3),inset 0 -1px rgba(255,122,24,.3)}
nav.top-nav::before{border-right-color:rgba(101,250,255,.28);color:#fff;text-shadow:0 0 14px rgba(255,122,24,.5)}
nav.top-nav a,nav.top-nav>details.nav-command-group>summary{color:#d9e1ea}
nav.top-nav a:hover,nav.top-nav a:focus-visible,nav.top-nav a.active,
nav.top-nav>details.nav-command-group>summary:hover,nav.top-nav>details.nav-command-group>summary:focus-visible,nav.top-nav>details.nav-command-group>summary.active{color:#fff;text-shadow:0 0 12px rgba(255,122,24,.6)}
nav.top-nav a:focus-visible,nav.top-nav>details.nav-command-group>summary:focus-visible{outline-color:var(--orange)}
nav.top-nav .nav-command-menu{border-color:rgba(101,250,255,.4);background:rgba(5,7,14,.98);box-shadow:0 16px 34px rgba(0,0,0,.55),0 0 18px rgba(101,250,255,.14)}
nav.top-nav .nav-command-menu a{border-bottom-color:rgba(101,250,255,.16)}
.audio-control .archive-music-toggle{background:rgba(5,7,14,.92);color:#e3e9ef}

/* hero panel */
.about-hero{border-color:rgba(255,122,24,.6);background:linear-gradient(110deg,rgba(5,8,14,.98) 0 47%,rgba(5,7,12,.45) 72%),var(--panel);box-shadow:-9px 0 28px rgba(101,250,255,.16),9px 0 28px rgba(255,122,24,.22)}
.eyebrow{color:var(--orange)}

/* TERMINUS title: blue-black letters, outline cyan on the left, white in the middle, orange on the right */
h1{position:relative;display:inline-block;color:#030a1c;-webkit-text-stroke:2px #65faff;text-shadow:-4px 0 14px rgba(101,250,255,.65),4px 0 14px rgba(255,122,24,.45)}
h1::before,h1::after{content:"TERMINUS";position:absolute;inset:0;color:#030a1c}
h1::before{-webkit-text-stroke:2px #fff;clip-path:polygon(33% 0,63% 0,63% 100%,33% 100%);text-shadow:0 0 12px rgba(255,255,255,.45)}
h1::after{-webkit-text-stroke:2px var(--orange);clip-path:polygon(63% 0,100% 0,100% 100%,63% 100%)}

.hero-lede{color:#fff;text-shadow:0 0 10px rgba(255,122,24,.3)}
.hero-lede+.hero-lede{color:#d8c8ff;text-shadow:0 0 10px rgba(198,160,255,.3)}
.hero-actions a{border-color:rgba(101,250,255,.6);color:#fff;background:rgba(5,7,14,.88)}
.hero-actions a:hover,.hero-actions a:focus-visible{border-color:var(--orange);color:var(--orange)}
.hero-actions .primary-action{border-color:var(--orange);color:#fff;background:linear-gradient(90deg,rgba(255,122,24,.28),rgba(255,122,24,.08))}
.hero-actions .primary-action:hover,.hero-actions .primary-action:focus-visible{color:#fff;background:linear-gradient(90deg,rgba(255,122,24,.5),rgba(255,122,24,.16));box-shadow:0 0 18px rgba(255,122,24,.45)}

/* animated hero picture */
.hero-visual::after{background:linear-gradient(90deg,#05050b 0%,transparent 28%),radial-gradient(circle at 62% 48%,transparent 0 34%,rgba(3,3,8,.72) 76%)}
.paradigm-vista{background:radial-gradient(circle at 58% 46%,rgba(255,122,24,.13),transparent 31%),radial-gradient(circle at 40% 60%,rgba(101,250,255,.07),transparent 40%),linear-gradient(180deg,transparent 52%,rgba(255,122,24,.06))}
.paradigm-horizon{background-image:linear-gradient(rgba(255,122,24,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(101,250,255,.24) 1px,transparent 1px);box-shadow:0 -1px 18px rgba(255,122,24,.45)}
.paradigm-beam{background:linear-gradient(transparent,#fff 28% 70%,var(--orange));box-shadow:0 0 12px rgba(255,255,255,.7),0 0 28px rgba(255,122,24,.65)}
.orbit-one{color:rgba(255,255,255,.7)}
.orbit-two{color:rgba(255,122,24,.8)}
.paradigm-core{border-color:#fff;background:rgba(4,8,16,.9);box-shadow:inset 0 0 22px var(--orange),0 0 26px rgba(101,250,255,.7)}
.paradigm-node{border-color:var(--orange);box-shadow:0 0 12px var(--orange)}
.node-two{border-color:var(--pink);box-shadow:0 0 12px var(--pink)}
.node-three{border-color:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.hero-scanline{background:linear-gradient(transparent 49%,rgba(255,255,255,.08) 50%,transparent 51%);background-size:100% 7px}
.hero-coordinate{color:var(--pink)}

/* the first chronicle */
.story-intro{border-color:rgba(101,250,255,.42);border-top:2px solid var(--pink);background:linear-gradient(110deg,rgba(255,122,24,.06),transparent 72%),var(--panel)}
.story-intro h2{color:#fff;text-shadow:0 0 13px rgba(255,122,24,.4)}
.story-intro p:not(.eyebrow),.archive-invitation p:not(.eyebrow){color:#d3dce4}
.about-shortcuts a{border-color:rgba(101,250,255,.45);color:#fff;background:rgba(5,7,14,.76)}
.about-shortcuts a:hover,.about-shortcuts a:focus-visible{border-color:var(--orange);color:var(--orange)}
.chronicle-actions .secondary-action{border-color:rgba(101,250,255,.6);color:#fff;background:rgba(5,7,14,.88)}
.chronicle-actions .secondary-action:hover,.chronicle-actions .secondary-action:focus-visible{border-color:var(--orange);color:var(--orange)}
.chronicle-listen{border-color:rgba(101,250,255,.3);background:rgba(5,7,14,.72)}

/* the closing invitation stays orange, with a little lavender on top */
.archive-invitation{border-top:2px solid var(--lav);background:linear-gradient(100deg,rgba(255,122,24,.08),transparent 70%),rgba(5,7,12,.95)}
.archive-invitation .primary-action{background:linear-gradient(90deg,rgba(255,122,24,.28),rgba(255,122,24,.08));color:#fff}
@media(max-width:560px){h1::before,h1::after{-webkit-text-stroke-width:2px}}