@font-face { font-family: "Literata"; src: url("../fonts/literata.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo Title"; src: url("../fonts/archivo-title.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #0D1B36;
  --deep: #081226;
  --ice: #CFE6FF;
  --paper: #E6EDF7;
  --mist: #A9B8CF;
  --ember: #F2A65A;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

* { box-sizing: border-box; }

html { background: var(--deep); }

body {
  position: relative;
  margin: 0;
  font: 400 1.125rem/1.75 "Literata", Georgia, serif;
  color: var(--paper);
  background:
    radial-gradient(60rem 42rem at 72% 20rem, #1C3A6E 0%, transparent 70%),
    linear-gradient(var(--night), var(--deep) 70rem);
}

/* The faint network behind the first screen. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 60rem;
  background: url("../img/nodes.svg") 0 0 / 45rem;
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
  opacity: .65;
  pointer-events: none;
}

/* The wave is wider than the screen. Clipping here, not on body, is what stops
   phone browsers zooming out: overflow set on body passes to the viewport. */
.page { position: relative; overflow-x: hidden; overflow-x: clip; }

main, footer.site {
  position: relative;
  width: min(68rem, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

a { color: var(--ice); text-underline-offset: .2em; }
a:hover { color: var(--ember); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(3rem, 9vh, 6rem) clamp(5rem, 12vh, 8rem);
}

h1 {
  margin: 0;
  font: 700 clamp(3rem, 6.6vw, 6rem)/1 "Archivo Title", "Arial Black", sans-serif;
  white-space: nowrap;
  letter-spacing: -.01em;
  color: var(--ice);
}

.subtitle {
  margin: .75rem 0 0;
  font: 700 clamp(1.15rem, 2.4vw, 1.75rem)/1.2 "Archivo Title", Arial, sans-serif;
  color: var(--paper);
}

.hero-text { position: relative; z-index: 1; }

.tagline { margin: 2.25rem 0 0; font-size: 1.3rem; line-height: 1.5; }
.byline { margin: .25rem 0 0; color: var(--mist); }

.buy { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2.5rem 0 0; }
.buy span { flex-basis: 100%; color: var(--mist); }

.store {
  padding: .5rem 1rem;
  border-radius: 3px;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  color: var(--deep);
  background: var(--ember);
}
.store:hover { color: var(--deep); background: #F8C48C; }

/* The waveform leaves the cover at the height of the cover's own waveform. */
.book { position: relative; width: 22rem; }
.book img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1.5rem 4rem rgba(3, 8, 20, .7), 0 0 5rem rgba(90, 160, 240, .18);
}
.hum {
  position: absolute;
  top: 87.8%;
  left: 50%;
  width: 200vw;
  height: 7.5rem;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.hum::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% + 1200px);
  background: url("../img/hum.svg") 0 0 / 1200px 100% repeat-x;
  animation: hum 48s linear infinite;
  will-change: transform;
}
@keyframes hum { to { transform: translateX(-1200px); } }
@media (prefers-reduced-motion: reduce) { .hum::before { animation: none; } }

main > p { max-width: 36rem; margin: 0 0 1.4em; }
main > .hero + p { font-size: 1.45rem; line-height: 1.55; color: var(--ice); }
main > p:last-child { margin-top: 3rem; color: var(--mist); }

footer.site {
  margin-top: 4rem;
  padding-block: 2rem 3rem;
  font-size: .9rem;
  color: var(--mist);
}
footer.site p { margin: 0; }

.inside-link { margin: 1.25rem 0 0; }

/* The contents and passages page. */
.back { padding-block-start: 2rem; font-size: 1rem; }
.page-title { margin-block-start: 2.5rem; font-size: clamp(2.25rem, 6vw, 4.5rem); white-space: normal; font-family: "Literata", Georgia, serif; font-weight: 400; }
.band { position: relative; height: 7.5rem; margin-block: 1rem 2.5rem; }
.band .hum { top: 50%; }
main h2 { margin: 0 0 1rem; font: 400 1.9rem/1.25 "Literata", Georgia, serif; color: var(--ice); }
main h3 { margin: 0 0 .5rem; font: italic 400 1.125rem/1.5 "Literata", Georgia, serif; color: var(--mist); }
.contents > p { max-width: 36rem; margin: 0 0 2rem; color: var(--mist); }
.parts { columns: 2 20rem; column-gap: 3rem; }
.parts section { break-inside: avoid; margin-bottom: 2rem; }
.parts ol { margin: 0; padding-left: 2.1rem; }
.parts li { padding-left: .25rem; line-height: 1.5; margin-bottom: .35rem; }
.parts li::marker { color: var(--mist); font-size: .9em; }
.samples { margin-top: 4rem; }
.samples article { max-width: 36rem; margin-bottom: 4rem; scroll-margin-top: 1.5rem; }
.samples article p { margin: 0 0 1.1em; }
.samples .gap { margin: 0 0 1.1em; color: var(--mist); }
.keep-reading { max-width: 36rem; }
.keep-reading .buy { margin-top: 0; }

@media print {
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::before { display: none; }
  h2, h3 { break-after: avoid; }
}

/* Stack below 60rem. Side by side, a narrower cover would lift the wave into the buttons. */
@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; padding-block-start: 2.5rem; padding-block-end: 3.5rem; }
  .book { order: -1; justify-self: center; width: min(62vw, 16rem); }
  /* The cover is centred here, so the wave only has to span the screen. */
  .book .hum { width: 100vw; }
}

/* Landscape phones: keep the cover from filling the short screen. */
@media (max-width: 60rem) and (max-height: 30rem) {
  .book { width: min(40vw, 11rem); }
}

@media (max-width: 46rem) {
  .tagline { margin-top: 1.75rem; }
  .buy { margin-top: 2rem; }
  main > .hero + p { font-size: 1.3rem; }
  main h2 { font-size: 1.6rem; }
}

@media (max-width: 30rem) {
  .store { flex: 1 1 auto; padding-block: .625rem; text-align: center; }
}