/* ==========================================================================
   Dr George Klenowski — The Prophecy for Eternal Human Survival
   Hand-written CSS. No framework, no build step.

   The palette is sampled from the book cover: the page is the cover's black,
   so the cover art has no edges, and the three accents are the three colours
   in the cover's sky. They mark the order of the argument, step by step.
   ========================================================================== */

/* --------------------------------------------------------------- fonts -- */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/sourceserif4-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------- tokens -- */

:root {
  --black:     #000000;
  --surface:   #0c0e13;
  --line:      rgba(237, 238, 242, 0.14);

  --text:      #edeef2;
  --muted:     #9297a3;

  --amber:     #f0a33c;   /* glow at the left of the cover's horizon  */
  --rose:      #d8628a;   /* the magenta band above the astronaut     */
  --teal:      #4fc0b0;   /* the green-blue at the horizon's right    */
  --amber-lit: #f7b457;

  --display: 'Archivo', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --body:    'Source Serif 4', Georgia, 'Times New Roman', serif;

  --gutter: 1.25rem;
  --band:   clamp(3.5rem, 9vw, 6.5rem);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  /* Keeps the footer rule at the bottom of short pages, such as the 404. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.1;
  margin: 0;
  /* Headings never break inside a word — body copy may. */
  overflow-wrap: normal;
  hyphens: none;
}

h2, h3 { text-wrap: balance; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--amber); text-underline-offset: 0.18em; }
a:hover { color: var(--amber-lit); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------------- shell ---- */

.wrap {
  width: min(100% - (var(--gutter) * 2), 1180px);
  margin-inline: auto;
}

/* A reading column. It is always a child of .wrap, never the same element,
   so it starts on the page's single left rail instead of centring itself. */
.measure { max-width: 40rem; }

main { flex: 1 0 auto; }

.band { padding-block: var(--band); }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.7rem 1.1rem;
  background: var(--amber);
  color: #000;
  font-family: var(--display);
  font-weight: 700;
  text-decoration: none;
  transition: top 120ms ease-out;
}
.skip:focus { top: 0.75rem; color: #000; }

/* ------------------------------------------------------------- header --- */

.site-head {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: 1.1875rem;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
}
.wordmark:hover { color: var(--amber); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: 0.9375rem;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.15rem;
}
.nav a:hover { color: var(--text); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Burger button, phones and small tablets only (see breakpoints). Three bars
   drawn from one span and its pseudo-elements; they fold into an X when the
   menu is open. */
.menu-toggle { display: none; }

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--text);
  transition: transform 200ms ease-out, background-color 200ms ease-out;
}

.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ''; position: absolute; left: 0; }
.menu-toggle__bars::before { transform: translateY(-7px); }
.menu-toggle__bars::after  { transform: translateY(7px); }

.menu-toggle[aria-expanded='true'] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::after  { transform: rotate(-45deg); }

/* Language switch (EN / RU) in the header. The current language is a span,
   the other a link. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.lang-switch a,
.lang-switch span {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
}

.lang-switch span { color: var(--text); border-color: var(--text); }
.lang-switch a:hover { color: var(--text); border-color: var(--muted); }

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 7vw, 5rem) var(--band);
}

/* Starfield drawn by site.js. It fades out towards the bottom so the hero
   dissolves into the next band instead of ending on a hard line. */
.hero__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
          mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

.display {
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(2.5rem, 7.2vw, 4.5rem);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.deck {
  font-size: clamp(1.1875rem, 2.2vw, 1.4375rem);
  line-height: 1.5;
  max-width: 32ch;
  margin-bottom: 0.9rem;
}

.byline {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.hero__cover img {
  width: 100%;
  max-width: 340px;
}

/* Entrance: the hero's pieces rise into place one after another, then the
   cover drifts. The cover's edges are the page's black, so the float reads as
   the astronaut's sky moving, not a box. The reduced-motion block at the end
   of this file collapses all of this to the final state. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes arrive {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: none; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.hero__text > * {
  animation: rise 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero__text > :nth-child(2) { animation-delay: 120ms; }
.hero__text > :nth-child(3) { animation-delay: 220ms; }
.hero__text > :nth-child(4) { animation-delay: 320ms; }
.hero__text > :nth-child(5) { animation-delay: 420ms; }

/* Both animations sit on the img, not .hero__cover: an animated wrapper would
   isolate the img and stop mix-blend-mode reaching the starfield. `lighten`
   lets the stars show through the cover's black sky, so there is no dark box
   where the cover hides them. */
.hero__cover img {
  mix-blend-mode: lighten;
  animation: arrive 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) 150ms both,
             float 9s ease-in-out 1.6s infinite;
}

/* ---------------------------------------------------------- buy links --- */

.buy { margin-bottom: 2.25rem; }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  padding: 0.95rem 1.7rem;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color 140ms ease-out, border-color 140ms ease-out,
              color 140ms ease-out;
}

.btn--primary {
  background: var(--amber);
  color: #000;
  border: 1px solid var(--amber);
}
.btn--primary:hover { background: var(--amber-lit); border-color: var(--amber-lit); color: #000; }

.btn--quiet {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn--quiet:hover { border-color: var(--amber); color: var(--amber); }

.buy__alt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: 0.9375rem;
}

.buy__alt a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); }
.buy__alt a:hover { color: var(--text); text-decoration-color: currentColor; }

[data-pending='true'] {
  cursor: not-allowed;
  text-decoration-style: dotted;
}
[data-pending='true']:hover { color: var(--muted); }

/* --------------------------------------------------------------- specs -- */

.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.75rem;
  margin: 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  max-width: 26rem;
}

.specs__pair { min-width: 0; }

.specs dt {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.specs dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- bands --- */

h2 {
  font-weight: 700;
  font-stretch: 88%;
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  margin-bottom: 1.5rem;
}

.lede { color: var(--muted); margin-bottom: 2.5rem; }

/* ---------------------------------------------------- about the book --- */

.intro {
  display: grid;
  gap: 2rem clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.intro__lede {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.005em;
  max-width: 26ch;
  padding-left: 1.25rem;
  border-left: 2px solid var(--line);
}

.intro__body { max-width: 38rem; }
.intro__body > p { color: #cfd1d8; }

/* Figures are ordered label-then-number in the markup so they read sensibly
   aloud, and flipped visually so the number leads. */
.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.figures div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;   /* numbers share a top line when labels wrap */
  min-width: 0;
}

.figures dd {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.figures dt {
  font-family: var(--display);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted);
}

/* ------------------------------------------------------- section head --- */

.section-head { max-width: 40rem; margin-bottom: 2.5rem; }
.section-head h2 { margin-bottom: 0.75rem; }
.section-head .lede { margin: 0; }

/* A section that sits on the slightly lifted surface, full bleed, to break
   the run of black bands. */
.band--raised {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

/* --------------------------------------------------------------- steps -- */

/* The eight steps as a grid of cards. Each card takes its colour from its
   place on the cover's horizon, amber through magenta to teal, so the order
   of the argument reads across the grid. Mixed in OKLCH so the middle steps
   stay saturated instead of turning grey. */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps > li {
  --c: var(--amber);
  position: relative;
  counter-increment: step;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--c);
  border-radius: 4px;
  transition: border-color 160ms ease-out, transform 160ms ease-out;
}

.steps > li:hover { transform: translateY(-3px); border-color: var(--c); }

.steps > li:nth-child(2) { --c: color-mix(in oklch, var(--amber) 60%, var(--rose)); }
.steps > li:nth-child(3) { --c: color-mix(in oklch, var(--amber) 25%, var(--rose)); }
.steps > li:nth-child(4) { --c: var(--rose); }
.steps > li:nth-child(5) { --c: color-mix(in oklch, var(--rose) 70%, var(--teal)); }
.steps > li:nth-child(6) { --c: color-mix(in oklch, var(--rose) 45%, var(--teal)); }
.steps > li:nth-child(7) { --c: color-mix(in oklch, var(--rose) 20%, var(--teal)); }
.steps > li:nth-child(8) { --c: var(--teal); }

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 2.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c);
}

.steps h3 {
  font-weight: 700;
  font-stretch: 92%;
  font-size: 1.1875rem;
  margin-bottom: 0.5rem;
}

.steps p { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------- author --- */

.author {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.portrait {
  margin: 0;
  max-width: 15rem;
  padding: 0.6rem;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

.portrait img { width: 100%; border-radius: 2px; }

.portrait figcaption {
  padding: 0.75rem 0.25rem 0.2rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.portrait figcaption span {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--muted);
}

.author__body { max-width: 42rem; }

.author__quote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--line);
  font-size: clamp(1.25rem, 2.3vw, 1.625rem);
  line-height: 1.4;
}

.creds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 2rem;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.creds dt {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.creds dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.4;
}

/* ---------------------------------------------------------- book card --- */

.book {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background:
    radial-gradient(120% 90% at 0% 50%, rgba(60, 110, 220, 0.16), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.book__art { max-width: 170px; }

.book__cover {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 30px 60px -25px rgba(40, 90, 220, 0.55), 0 12px 30px -12px rgba(0, 0, 0, 0.9);
  transition: transform 220ms ease-out;
}
.book:hover .book__cover { transform: translateY(-4px) rotate(-1deg); }

.book__kicker {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.book h3 {
  font-weight: 700;
  font-stretch: 88%;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.9rem;
}

.book__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: 0.8125rem;
}

.book__meta li {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.book__body > p:not(.book__kicker) { font-size: 1.0625rem; color: #cfd1d8; max-width: 38rem; }

.book__buy { margin: 1.6rem 0 0; }

/* ------------------------------------------------------------- reveal --- */

/* site.js adds .reveal to cards below the fold and .is-visible as each
   scrolls into view. Without JavaScript neither class is added, so nothing
   is ever hidden. */
.reveal,
.steps > li.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 160ms ease-out;
}
.reveal.is-visible,
.steps > li.reveal.is-visible { opacity: 1; transform: none; }
.steps > li.reveal.is-visible:hover { transform: translateY(-3px); }

/* ------------------------------------------------------------ contact --- */

.contact-line { margin-top: 1.6rem; }

/* The closing panel. A glow along its bottom edge repeats the cover's
   horizon, amber into magenta into teal, so the page ends where it began. */
.contact {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 2.5rem;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.contact::before {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -60%;
  height: 90%;
  background:
    radial-gradient(40% 60% at 20% 50%, rgba(240, 163, 60, 0.30), transparent 70%),
    radial-gradient(40% 60% at 50% 50%, rgba(216, 98, 138, 0.28), transparent 70%),
    radial-gradient(40% 60% at 80% 50%, rgba(79, 192, 176, 0.24), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.contact::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--rose) 50%, var(--teal));
}

.contact > * { position: relative; }

.contact__kicker {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.contact h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: 1rem;
}

.contact__main { max-width: 36rem; }
.contact__main > p { color: #cfd1d8; }

.contact__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 1.8rem;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: 0.8125rem;
}

.contact__topics li {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.contact__email {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: clamp(1.375rem, 4vw, 2rem);
  line-height: 1.2;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
}
.contact__email:hover { color: var(--amber); text-decoration-color: currentColor; }

.contact__book {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  align-self: end;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-family: var(--display);
}

/* The cover's black margins blend into the panel instead of framing it. */
.contact__book img { mix-blend-mode: lighten; }

.contact__book p { margin: 0; }

.contact__book-title {
  font-weight: 700;
  font-stretch: 90%;
  font-size: 1.0625rem;
  line-height: 1.25;
  margin-bottom: 0.3rem !important;
}

.contact__book-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.6rem !important;
}

.contact__book a {
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.contact__book a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- footer --- */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 2rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  color: var(--muted);
}

.site-foot__grid {
  display: grid;
  gap: 2rem;
  padding-block: 1.5rem 2.5rem;
}

.site-foot__brand .wordmark { display: inline-block; margin-bottom: 0.6rem; }
.site-foot__brand p { max-width: 26rem; line-height: 1.5; }

.site-foot__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.75rem !important;
}

.site-foot__links {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-foot__links a { text-decoration: none; }

.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}

.site-foot__grid + .site-foot__inner {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

.site-foot p { margin: 0; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--text); }

/* ----------------------------------------------------------- 404 page --- */

.notfound { padding-block: clamp(4rem, 14vw, 9rem); }
.notfound h1 {
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(2.25rem, 7vw, 4rem);
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.notfound .btn { margin-top: 1.5rem; }

/* -------------------------------------------------------- breakpoints --- */

/* Below the desktop breakpoint: sticky header with a burger menu, and the
   cover moves above the hero text so the book is the first thing seen. */
@media (max-width: 55.99rem) {
  .site-head {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-block: 0.6rem;
    background: rgba(0, 0, 0, 0.9);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }

  .site-head__inner { align-items: center; flex-wrap: nowrap; }
  .site-head__inner { gap: 0.5rem; }
  .site-head__inner .wordmark { margin-right: auto; white-space: nowrap; font-size: 1.0625rem; }
  .lang-switch { order: 1; gap: 0.25rem; }
  .lang-switch a, .lang-switch span { padding: 0.15rem 0.4rem; }
  .menu-toggle { order: 2; }
  /* Pages without the burger (the 404) keep plain wrapping links. */
  .site-head__inner:not(:has(.menu-toggle)) { flex-wrap: wrap; align-items: baseline; }
  .site-head__inner:not(:has(.menu-toggle)) .wordmark { margin-right: 0; }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--black);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
  }

  .site-head.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s;
  }

  .site-nav .nav { flex-direction: column; flex-wrap: nowrap; gap: 0; font-size: 1.25rem; }
  .site-nav .nav li + li { border-top: 1px solid var(--line); }
  .site-nav .nav a { display: block; padding-block: 0.85rem; color: var(--text); }
  .site-nav .nav a:hover { color: var(--amber); }

  .hero { padding-top: 1.5rem; }
  .hero__grid { gap: 1.25rem; }
  .hero__cover { order: -1; justify-self: center; }
  .hero__cover img { max-width: 230px; }
}

/* No JavaScript, no burger: the nav falls back to plain wrapped links. */
@media (max-width: 55.99rem) and (scripting: none) {
  .menu-toggle { display: none; }
  .site-head__inner { flex-wrap: wrap; }
  .site-nav { position: static; padding: 0; background: none; border: 0;
              opacity: 1; visibility: visible; transform: none; }
  .site-nav .nav { flex-direction: row; flex-wrap: wrap; gap: 0.35rem 1.4rem; font-size: 0.9375rem; }
  .site-nav .nav li + li { border-top: 0; }
  .site-nav .nav a { padding-block: 0.15rem; color: var(--muted); }
}

@media (min-width: 56rem) {
  :root { --gutter: 2.5rem; }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: center;
  }

  .hero__cover { justify-self: end; }

  /* Auto margin pushes nav + language switch to the right edge. */
  .site-head__inner .site-nav { margin-left: auto; }
  .lang-switch { margin-left: 1.5rem; }

  .intro { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .intro__body { padding-top: 0.35rem; }

  .author {
    grid-template-columns: 19rem minmax(0, 42rem);
    gap: clamp(3rem, 6vw, 5.5rem);
  }
  .portrait { max-width: none; }

  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .book {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
  }
  .book__art { max-width: none; }

  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: 3rem; }
  .contact__book {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0 0 2.5rem;
    border-top: 0;
    border-left: 1px solid var(--line);
    align-self: stretch;
    align-content: center;
  }
  .contact__book img { max-width: 170px; }

  .site-foot__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 40rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}