:root {
  color-scheme:dark;
  --base:#101a23;
  --hull:#1a2b36;
  --paper:#edf1ef;
  --fog:#b9c7cc;
  --signal:#efb66c;
  --teal:#94c8c4;
  --line:#40515a;
  --sans:"Avenir Next",Avenir,"Trebuchet MS",sans-serif;
  --serif:Georgia,"Times New Roman",serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:auto;
  scroll-padding-top:2rem
}
body {
  margin:0;
  background:var(--base);
  color:var(--paper);
  font:17px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-underline-offset:5px;
  text-decoration-thickness:1px
}
a:hover {
  color:var(--signal)
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--signal);
  outline-offset:6px
}
img {
  max-width:100%;
  display:block;
  height:auto
}
p {
  margin:0 0 1.3rem;
  max-width:65ch
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  margin:0 0 1.5rem;
  text-wrap:balance
}
h2 {
  font-size:clamp(2.6rem,4.6vw,4.7rem);
  letter-spacing:-.035em
}
h3 {
  font-size:1.8rem;
  letter-spacing:-.025em
}
.skip {
  position:absolute;
  top:0;
  left:1rem;
  transform:translateY(-150%);
  z-index:10;
  background:var(--paper);
  color:var(--base);
  padding:1rem
}
.skip:focus {
  transform:translateY(0)
}
.header {
  max-width:1600px;
  margin:auto;
  padding:1.8rem 5.5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}
.brand {
  display:inline-flex;
  flex-direction:column;
  text-decoration:none;
  font:1.3rem/1.12 var(--serif);
  letter-spacing:-.02em
}
.brand span:last-child {
  font-size:1.6rem
}
.header nav {
  display:flex;
  align-items:center;
  gap:2.2rem;
  font-size:.9rem
}
.header nav a {
  text-decoration:none;
  padding:.5rem 0
}
.header .nav-story {
  border-bottom:1px solid var(--signal)
}
.hero {
  position:relative;
  isolation:isolate;
  min-height:690px;
  max-width:1800px;
  margin:auto;
  display:flex;
  align-items:center;
  padding:5.5rem 8% 8rem;
  overflow:hidden
}
.hero-image {
  position:absolute;
  z-index:-2;
  inset:0;
  background:url('/assets/first-contact.jpg') 100% 40%/auto 115% no-repeat
}
.hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,var(--base) 1%,rgba(16,26,35,.95) 22%,rgba(16,26,35,.75) 43%,rgba(16,26,35,.04) 75%),linear-gradient(0deg,var(--base),transparent 27%)
}
.hero-content {
  max-width:680px
}
.intro {
  font-size:.94rem;
  color:var(--teal);
  margin-bottom:1.6rem
}
h1 {
  font-size:clamp(4.3rem,7.5vw,8rem);
  letter-spacing:-.06em;
  margin-left:-.05em;
  line-height:.98
}
.hero-line {
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.2vw,2.2rem);
  line-height:1.3;
  margin-top:1.8rem
}
.hero-summary {
  max-width:44ch;
  color:var(--fog);
  font-size:1rem
}
.actions {
  display:flex;
  gap:1.4rem;
  flex-wrap:wrap;
  align-items:center;
  margin-top:2.1rem
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:.85rem 1.5rem;
  background:var(--signal);
  color:var(--base);
  border:1px solid var(--signal);
  border-radius:3px;
  text-decoration:none;
  font-size:.94rem;
  font-weight:600;
  line-height:1.4
}
.button:hover {
  background:#f6cd98;
  color:#101a23
}
.text-link {
  display:inline-block;
  font-size:.93rem;
  color:var(--teal);
  padding:.35rem 0
}
.hero-next {
  position:absolute;
  bottom:2.2rem;
  font-size:.85rem;
  color:var(--fog);
  text-decoration:none;
  display:flex;
  gap:2rem;
  align-items:center
}
.hero-next span {
  font-size:1.6rem;
  color:var(--signal)
}
.section {
  max-width:1280px;
  margin:auto;
  padding:6rem 5%
}
.start {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:10%;
  align-items:center;
  padding-top:4rem
}
.cover-stage {
  padding:1.5rem 8% 2rem;
  position:relative
}
.lead-cover {
  width:100%;
  max-width:350px;
  margin:auto;
  box-shadow:15px 20px 38px #050b10;
  transform:rotate(-3deg)
}
.section-note {
  color:var(--teal);
  font-size:.9rem;
  margin-bottom:1.4rem
}
.book-order {
  color:var(--signal);
  font-size:.87rem;
  margin-bottom:.7rem
}
.start h2 {
  margin-bottom:.7rem
}
.standfirst {
  font:clamp(1.65rem,2.5vw,2.25rem)/1.3 var(--serif);
  margin:1.7rem 0
}
.start-copy>p:not(.standfirst):not(.book-order):not(.section-note) {
  color:var(--fog)
}
.books {
  border-top:1px solid var(--line)
}
.section-heading {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:8%;
  align-items:end;
  margin-bottom:3.5rem
}
.section-heading>p {
  color:var(--fog);
  margin-bottom:1.7rem
}
.book-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
  list-style:none;
  padding:0;
  margin:0
}
.book-grid li {
  min-width:0;
  display:flex;
  flex-direction:column
}
.book-grid img {
  width:78%;
  margin:0 auto 2rem;
  aspect-ratio:5/8;
  object-fit:contain;
  box-shadow:10px 10px 28px #060d13
}
.book-copy {
  display:flex;
  flex-direction:column;
  flex:1
}
.book-copy h3 {
  margin-bottom:1rem
}
.book-copy>p:not(.book-order) {
  font-size:.95rem;
  color:var(--fog);
  margin-bottom:1rem
}
.book-copy a {
  margin-top:auto
}
.companion {
  display:flex;
  align-items:center;
  gap:2.5rem;
  background:var(--hull);
  padding:2.3rem;
  margin-top:4rem;
  border-left:3px solid var(--teal)
}
.companion img {
  width:95px;
  flex-shrink:0
}
.companion h3 {
  margin-bottom:.7rem
}
.companion p:not(.book-order) {
  color:var(--fog);
  font-size:.95rem;
  margin-bottom:.6rem
}
.world {
  position:relative;
  isolation:isolate;
  min-height:650px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  margin:2rem auto;
  max-width:1800px;
  background:#0a1118
}
.world-art {
  position:absolute;
  inset:0 43% 0 0;
  z-index:-2;
  background:url('/assets/kepler-station.jpg') center/cover
}
.world::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,transparent 10%,#0a1118 59%)
}
.world-copy {
  grid-column:2;
  padding:5rem 12% 5rem 0
}
.world-copy>p:not(.section-note) {
  color:var(--fog)
}
.author {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  padding-top:6.5rem;
  padding-bottom:6.5rem
}
.author .standfirst {
  margin-top:0
}
.author p:not(.standfirst):not(.section-note) {
  color:var(--fog)
}
.stories {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:8%;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:5.5rem;
  padding-bottom:6.5rem
}
.stories p:not(.section-note) {
  color:var(--fog)
}
.stories img {
  border-radius:50%;
  aspect-ratio:1;
  object-fit:cover;
  max-width:440px
}
.small {
  font-size:.8rem;
  margin-top:1rem
}
.footer {
  padding:3rem 5.5%;
  max-width:1600px;
  margin:auto;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  font-size:.85rem;
  color:var(--fog)
}
.footer>p {
  text-align:right;
  max-width:none;
  margin:0
}
.footer>div {
  display:flex;
  gap:1.8rem;
  flex-wrap:wrap
}
.copyright {
  font-size:.8rem
}
.sample-main {
  max-width:800px;
  padding:4rem 5% 6rem;
  margin:auto
}
.sample-main h1 {
  font-size:clamp(3rem,6vw,5rem);
  margin-top:2rem
}
.excerpt {
  font:1.2rem/1.9 var(--serif);
  border-top:1px solid var(--line);
  margin-top:3rem;
  padding-top:2rem
}
.excerpt p {
  max-width:65ch
}
.excerpt h2 {
  font-size:2rem
}
.sample-context {
  color:var(--fog);
  font-size:.9rem
}
@media(min-width:1600px) {
  .hero {
    padding-left:max(8%,calc((100vw - 1280px)/2))
  }
}
@media(max-width:900px) {
  .header {
    padding:1.5rem 5%;
    gap:1.5rem
  }
  .header nav {
    gap:1.2rem
  }
  .hero {
    padding:4rem 6% 7rem;
    min-height:650px
  }
  .hero-image {
    opacity:.65;
    background-position:90% 30%
  }
  .hero::before {
    background:linear-gradient(90deg,var(--base),#101a23bc 55%,#101a2355),linear-gradient(0deg,var(--base),transparent 40%)
  }
  .hero-content {
    max-width:550px
  }
  .section {
    padding:4rem 6%
  }
  .start {
    gap:6%
  }
  .book-grid {
    gap:1.6rem
  }
  .book-grid img {
    width:90%
  }
  .book-copy h3 {
    font-size:1.5rem
  }
  .world-copy {
    padding-right:10%
  }
  .stories {
    gap:5%
  }
  .stories .actions {
    gap:.7rem
  }
  .stories img {
    width:100%
  }
  .footer {
    padding:2.5rem 6%
  }
  .footer>div {
    gap:1rem
  }
}
@media(max-width:600px) {
  body {
    font-size:16px
  }
  .header {
    flex-direction:column;
    align-items:flex-start;
    gap:1.3rem;
    padding:1.3rem 6%
  }
  .brand {
    font-size:1rem
  }
  .brand span:last-child {
    font-size:1.3rem
  }
  .header nav {
    width:100%;
    justify-content:space-between;
    gap:.6rem;
    font-size:.8rem
  }
  .hero {
    min-height:680px;
    padding-top:3rem;
    align-items:flex-start
  }
  .hero-image {
    background-size:auto 90%;
    background-position:72% 110%;
    opacity:.5
  }
  .hero::before {
    background:linear-gradient(90deg,#101a23e6,#101a2399),linear-gradient(0deg,var(--base),transparent 50%)
  }
  h1 {
    font-size:clamp(3.8rem,14vw,5.1rem)
  }
  .intro {
    font-size:.8rem
  }
  .hero-line {
    font-size:1.6rem;
    max-width:22ch
  }
  .hero-summary {
    font-size:.95rem;
    max-width:33ch
  }
  .hero .actions {
    align-items:flex-start;
    flex-direction:column;
    gap:.65rem
  }
  .hero-next {
    bottom:1.6rem
  }
  .start {
    display:flex;
    flex-direction:column;
    gap:2rem;
    padding-top:2.5rem
  }
  .cover-stage {
    width:74%;
    padding:1rem 8%
  }
  .lead-cover {
    max-width:240px
  }
  .start-copy {
    padding-top:1.7rem
  }
  .section-heading {
    display:block;
    margin-bottom:2.5rem
  }
  .section-heading>p {
    margin-top:1.8rem
  }
  .book-grid {
    grid-template-columns:1fr;
    gap:3rem
  }
  .book-grid li {
    display:grid;
    grid-template-columns:.75fr 1fr;
    align-items:start;
    gap:1.4rem
  }
  .book-grid img {
    width:100%;
    margin:0
  }
  .book-copy h3 {
    font-size:1.6rem
  }
  .book-copy>p:not(.book-order) {
    font-size:.85rem;
    line-height:1.65
  }
  .book-copy a {
    font-size:.8rem;
    line-height:1.5
  }
  .companion {
    padding:1.5rem;
    gap:1.2rem;
    margin-top:3rem;
    align-items:flex-start
  }
  .companion img {
    width:65px
  }
  .companion h3 {
    font-size:1.6rem
  }
  .companion p:not(.book-order) {
    font-size:.85rem
  }
  .world {
    display:block;
    min-height:0;
    margin:0;
    padding:15rem 6% 3.5rem
  }
  .world-art {
    inset:0 0 auto 0;
    height:400px;
    background-position:center 35%
  }
  .world::before {
    background:linear-gradient(0deg,#0a1118 48%,transparent 100%)
  }
  .world-copy {
    padding:0
  }
  .author {
    grid-template-columns:1fr;
    gap:1rem
  }
  .author h2 {
    margin-bottom:1rem
  }
  .stories {
    display:flex;
    flex-direction:column-reverse;
    gap:2rem
  }
  .stories img {
    max-width:250px
  }
  .footer {
    grid-template-columns:1fr;
    gap:1.5rem
  }
  .footer>p {
    text-align:left
  }
  .footer>div {
    flex-direction:column;
    gap:.6rem
  }
  .sample-main {
    padding-top:2rem
  }
  .excerpt {
    font-size:1.1rem
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    animation:none!important;
    transition:none!important
  }
}

/* Reader guides share the marketing site's type, surfaces and focus treatment. */
.guide-main { max-width:1180px; padding:4rem 5.5% 6rem; margin:auto }
.guide-main>h1 { font-size:clamp(3rem,6vw,5rem); max-width:18ch; letter-spacing:-.035em }
.guide-main>.standfirst { max-width:40ch; margin-bottom:2.5rem }
.guide-main>p:not(.standfirst):not(.section-note) { color:var(--fog) }
.entry-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:1.5rem; margin:2rem 0 }
.entry-card { border:1px solid var(--line); background:var(--hull); padding:1.7rem }
.entry-card h2 { font-size:1.9rem; letter-spacing:-.02em }
.entry-card p { color:var(--fog); font-size:1rem }
.entry-card .section-note { color:var(--signal) }
.entry-card h2 a { text-decoration:none }
.reading-note { border-left:3px solid var(--signal); background:var(--hull); padding:1rem 1.4rem; margin-bottom:2rem; color:var(--signal); font-size:.9rem }
.spoiler { border:1px solid var(--line); padding:1.5rem; margin:2rem 0 }
.spoiler summary { cursor:pointer; color:var(--signal); min-height:32px }
.spoiler[open] summary { margin-bottom:1.5rem }
.spoiler .entry-card { margin-top:1.5rem }
.book-detail { display:grid; grid-template-columns:280px 1fr; gap:3rem; align-items:start; margin-bottom:2rem }
.book-detail img { width:100%; height:auto; box-shadow:12px 15px 0 #080e15 }
.book-detail .actions { margin-top:2rem }
.search-controls { display:grid; grid-template-columns:1fr; max-width:680px; gap:.6rem; margin-bottom:1.5rem }
.search-controls label { color:var(--fog); font-size:.9rem; margin-top:.7rem }
.search-controls input,.search-controls select { background:var(--hull); color:var(--paper); border:1px solid #71858d; padding:.85rem; font:inherit; width:100%; min-height:48px }
.scene-break { width:4rem; border:0; border-top:1px solid var(--signal); margin:3rem auto }
@media(max-width:650px) { .book-detail { grid-template-columns:1fr; gap:2.5rem }.book-detail img { max-width:230px }.header nav { flex-wrap:wrap } }

/* Companion: reader paths, a book sequence, and a bounded ship reference. */
.companion-paths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:2.5rem 0 4rem; border-block:1px solid var(--line) }
.companion-paths a { padding:1.5rem 1.2rem; text-decoration:none; min-width:0 }
.companion-paths a+a { border-left:1px solid var(--line) }
.companion-paths a:hover { background:var(--hull) }
.companion-paths strong { display:block; color:var(--paper); font:1.45rem/1.3 Georgia,serif; margin-bottom:.7rem }
.companion-paths span { display:block; color:var(--fog); font-size:.95rem }
.guide-main>section { margin-top:3rem }
.guide-main>section>h2,.reader-next>h2 { font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:1rem }
.entry-card h3 { font-size:1.9rem; letter-spacing:-.02em }
.entry-card h3 a { text-decoration:none }
.reading-route { list-style:none; padding:0; counter-reset:novel; margin:3rem 0 }
.reading-route>li { display:grid; grid-template-columns:3rem minmax(0,1fr); gap:1.25rem; border-top:1px solid var(--line); padding:2rem 0; counter-increment:novel }
.reading-route>li::before { content:counter(novel); font:2.5rem/1 Georgia,serif; color:var(--signal) }
.reading-route h2 { font-size:clamp(1.8rem,4vw,2.4rem); margin:.5rem 0 }
.reading-route h2 a,.route-detour h3 a { text-decoration:none }
.route-detour { border-left:2px solid var(--signal); margin-top:2rem; padding:.3rem 0 .3rem 1.5rem }
.route-detour h3 { font-size:1.7rem; margin:.5rem 0 }
.reader-next { border-top:1px solid var(--line); padding-top:2rem }
.ship-reference { margin:2.5rem 0 }
.ship-reference>section { padding:2rem 0; border-top:1px solid var(--line); scroll-margin-top:2rem }
.ship-reference h2 { font-size:2.2rem; margin:.5rem 0 1rem }
.ship-reference p { max-width:65ch; color:var(--fog) }
.search-examples { max-width:65ch; color:var(--fog); font-size:.95rem }
.search-examples a { display:inline-block; margin-right:1rem; padding:.25rem 0 }
@media(max-width:650px) {
  .companion-paths { grid-template-columns:1fr; margin-bottom:3rem }
  .companion-paths a { padding:1.2rem 0 }
  .companion-paths a+a { border-left:0; border-top:1px solid var(--line) }
  .reading-route>li { grid-template-columns:2rem minmax(0,1fr); gap:.7rem }
}

/* Static orientation survives JavaScript failure and uses shape as well as color. */
.header nav a[aria-current] {
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.35em;
}