/*
 * Leafthrough landing page.
 * Colour and type values are copied from libs/editor-ui/src/tokens.css (the
 * design system's single source). Only the tokens used here are repeated;
 * keep them in step with that file (a test compares them).
 */
/* Self-hosted, Latin subset (see apps/landing/FONTS.md). `swap` keeps text
   readable in the fallback while they load. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/landing/assets/fonts/playfair-display-500-latin.1e3429a212.woff2) format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/landing/assets/fonts/inter-latin.3100e775e8.woff2) format('woff2');
  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;
}

/* Registered so the room's colour can ease between the book's scenes. */
@property --room {
  syntax: '<color>';
  inherits: true;
  initial-value: #1c1116;
}

:root {
  --plum: #1c1116;
  --plum-card: #2e1b24;
  --cream: #f4ede0;
  --paper: #faf7f4;
  --rim: #f4c6ce;
  --muted-on-dark: #beb6ae;
  --muted-on-paper: #6b5a62;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-pill: 999px;
  --radius-card: 18px;
  --bar-height: 64px;
  /* The live book's own backdrop colour, kept current by landing.js. */
  --room: #1c1116;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--bar-height);
}

body {
  margin: 0;
  background: var(--plum);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

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

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--plum);
}

.skip:focus {
  top: 12px;
}

/* ---- top bar ------------------------------------------------------- */

/* Scrolls away with the hero: pinned over the paper section the cream brand
   and cream button would disappear into it, and every section has its own
   "Make your book" link. */
.bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 40px);
  pointer-events: none;
}

.bar > * {
  pointer-events: auto;
}

.brand {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* ---- buttons ------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--plum);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.pill:hover {
  background: var(--rim);
}

/* Over the book's pale scenes a cream button needs its own edge. */
.bar .pill {
  box-shadow: 0 0 0 1px rgba(28, 17, 22, 0.14), 0 6px 20px rgba(28, 17, 22, 0.22);
}

.pill.dark {
  background: var(--plum);
  color: var(--cream);
}

.pill.dark:hover {
  background: var(--plum-card);
}

.quiet {
  color: var(--cream);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.glass {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
  background: rgba(28, 17, 22, 0.62);
  color: var(--cream);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.glass:hover {
  background: rgba(28, 17, 22, 0.8);
}

/* ---- the story: words on the left, the book's stage on the right -----

   Without scripts this is a complete page: a quote sits in the stage and
   the chapters scroll past it. The sticky stage and the tint are CSS, so the
   layout is the same before and after landing.js runs.                    */

.story {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  min-height: 100svh;
  transition: --room 700ms ease;
  /* Where the text column and the stage meet: both sides reach this one
     colour at the join, so there is no edge between them. Capped low so
     type over the text column keeps its contrast on pale scenes. */
  --seam: color-mix(in srgb, var(--room) 30%, var(--plum));
}

/* The room is lit by the book: the scene's colour warms the text column
   towards the stage, eased so the warming has no visible start. */
.words {
  padding: 0 clamp(20px, 4vw, 64px);
  background: var(--plum);
  background: linear-gradient(
      90deg,
      var(--plum) 35%,
      color-mix(in srgb, var(--seam) 12%, var(--plum)) 52%,
      color-mix(in srgb, var(--seam) 38%, var(--plum)) 70%,
      color-mix(in srgb, var(--seam) 72%, var(--plum)) 87%,
      var(--seam)
    )
    var(--plum);
}

.chapter {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  max-width: 34rem;
  padding: calc(var(--bar-height) + 24px) 0 48px;
}

.chapter h1 {
  font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  white-space: pre-line;
}

.chapter h2 {
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.chapter p {
  color: var(--muted-on-dark);
}

.chapter .lead {
  font-size: 1.1875rem;
  color: var(--cream);
}

.chapter .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 8px;
}

.stage-track {
  position: relative;
}

.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--room);
}

/* Picks up the text column's seam colour and lets it go along an eased
   curve, so the join reads as light falling off, not as a shadow's edge. */
.stage::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 16%;
  z-index: 2;
  background: linear-gradient(
    90deg,
    var(--seam),
    color-mix(in srgb, var(--seam) 72%, transparent) 18%,
    color-mix(in srgb, var(--seam) 40%, transparent) 42%,
    color-mix(in srgb, var(--seam) 14%, transparent) 70%,
    transparent
  );
  pointer-events: none;
}

.quotes,
.book {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Shown while the live book loads, one at a time, crossfading in place. */
.quotes {
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 96px);
  transition: opacity 500ms ease;
}

.quote {
  grid-area: 1 / 1;
  max-width: 24ch;
  margin: 0;
  text-align: center;
  opacity: 0;
  transition: opacity 900ms ease;
}

.quote.is-shown {
  opacity: 1;
}

.quote blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.quote blockquote p::before {
  content: '\201C';
}

.quote blockquote p::after {
  content: '\201D';
}

.quote p {
  margin: 0;
}

.book {
  opacity: 0;
  background: transparent;
  transition: opacity 500ms ease;
}

.stage.is-live .quotes {
  opacity: 0;
}

.stage.is-live .book {
  opacity: 1;
}

/* The page is scrolling the book: it must never catch the visitor's scroll. */
.stage.is-driven .book {
  pointer-events: none;
}

.folio {
  position: absolute;
  left: clamp(16px, 3vw, 40px);
  bottom: 20px;
  z-index: 3;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(28, 17, 22, 0.62);
  /* A chapter's folio is a short line; keep it clear of the takeover button. */
  max-width: 45%;
  font-size: 0.875rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

[data-takeover] {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: 20px;
  z-index: 3;
}

/* ---- after the story: the hand-off to the back matter ---------------

   The book has closed; this is the one thing to do next, on the room's
   plum before the page turns to paper. Not part of a chapter, so every
   chapter keeps its own spread. */

.begin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 64px);
  text-align: center;
}

.begin h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.begin p {
  max-width: 32rem;
  color: var(--muted-on-dark);
}

.begin p:last-child {
  margin-top: 8px;
}

/* ---- the back matter: the practical part, on paper ------------------ */

.paper {
  background: var(--cream);
  color: var(--plum);
  padding: clamp(64px, 10vw, 140px) clamp(20px, 4vw, 64px);
  display: grid;
  gap: clamp(64px, 9vw, 120px);
}

.paper > section {
  max-width: 46rem;
}

/* Wide screens: the practical part in two columns, how it works and the
   price on the left, what is different and the questions on the right. */
@media (min-width: 1000px) {
  .paper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 112px);
    row-gap: clamp(64px, 9vw, 120px);
    align-items: start;
  }

  .paper > section {
    max-width: none;
  }

  .paper .how {
    grid-column: 1;
    grid-row: 1;
  }

  .paper .differences {
    grid-column: 2;
    grid-row: 1;
  }

  .paper .price {
    grid-column: 1;
    grid-row: 2;
  }

  .paper .faq {
    grid-column: 2;
    grid-row: 2;
  }
}

.paper h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

.paper h3 {
  font-size: 1.375rem;
  line-height: 1.25;
  margin-bottom: 6px;
}

.paper p {
  color: var(--muted-on-paper);
  max-width: 36rem;
}

.how ol {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px;
}

.how li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 8px;
}

.how li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1.1;
}

.differences {
  display: grid;
  gap: 28px;
}

.differences h2 {
  margin-bottom: 4px;
}

.price h2 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.05;
}

.price p + p {
  margin-top: 24px;
}

.faq details {
  border-top: 1px solid rgba(28, 17, 22, 0.2);
  padding: 18px 0;
}

.faq details:last-child {
  border-bottom: 1px solid rgba(28, 17, 22, 0.2);
}

.faq summary {
  cursor: pointer;
  font-weight: 500;
  list-style-position: outside;
}

.faq details p {
  margin-top: 10px;
}

.paper :focus-visible {
  outline-color: var(--plum);
}

/* The colophon at the back of the book: the name and what it makes, the
   one thing to do, and the small print under a hairline rule. */
.foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 32px;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 64px) 32px;
  color: var(--muted-on-dark);
}

/* A fleuron where the paper meets the plum, like the ornament that closes a chapter. */
.foot::before {
  content: '❦';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--plum);
  color: var(--rim);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1;
}

.colophon {
  display: grid;
  gap: 10px;
  max-width: 34rem;
}

.colophon .brand {
  justify-self: start;
  color: var(--cream);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  line-height: 1.1;
}

.colophon p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* The legal notice, privacy policy and terms, on a row of their own. */
.legal-links {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.legal-links a {
  color: var(--muted-on-dark);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.legal-links a:hover {
  color: var(--cream);
  text-decoration: underline;
}

.legal-links a + a::before {
  content: '·';
  display: inline-block;
  padding: 0 14px;
  color: var(--rim);
  opacity: 0.6;
  text-decoration: none;
}

/* ---- the legal pages: readable prose on paper ----------------------- */

.legal-page .bar {
  position: relative;
}

.legal {
  background: var(--cream);
  color: var(--plum);
  padding: clamp(48px, 8vw, 96px) max(20px, calc((100% - 42rem) / 2));
}

.legal h1 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

.legal h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2;
  margin: 48px 0 14px;
}

.legal h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 28px 0 8px;
}

.legal p,
.legal ul {
  margin: 0 0 14px;
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: 8px;
}

.legal a {
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal .updated {
  margin-top: 56px;
  color: var(--muted-on-paper);
  font-size: 0.9375rem;
}

.legal :focus-visible {
  outline-color: var(--plum);
}

/* A fact not filled in yet; a production build refuses the page. */
mark.todo {
  background: #ffe066;
  color: #1c1116;
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 600;
}

/* ---- phones: the stage sits on top, the chapters scroll beneath it ---- */

@media (max-width: 820px) {
  .story {
    display: flex;
    flex-direction: column;
  }

  /* Stage first, pinned; the chapters slide up underneath it. */
  .stage-track {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 6;
  }

  .stage {
    height: 52svh;
    min-height: 260px;
  }

  .stage::before {
    inset: auto 0 0 0;
    width: auto;
    height: 22%;
    /* The chapters scroll beneath the pinned stage, so the join has to be
       plum itself; the curve is the same eased one as on wide screens. */
    background: linear-gradient(
      0deg,
      var(--plum),
      color-mix(in srgb, var(--plum) 72%, transparent) 18%,
      color-mix(in srgb, var(--plum) 40%, transparent) 42%,
      color-mix(in srgb, var(--plum) 14%, transparent) 70%,
      transparent
    );
  }

  .words {
    position: relative;
    z-index: 1;
    background: var(--plum);
  }

  .chapter {
    min-height: 62svh;
    padding: 32px 0 24px;
  }

  .chapter.hero {
    min-height: auto;
    padding-top: 28px;
  }

  /* The chapter text sits right under the stage, so the folio only crowds it. */
  .folio {
    display: none;
  }

  /* Above the stage on plum, not over its pale scenes. */
  .bar {
    position: relative;
    background: var(--plum);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .story,
  .stage,
  .quotes,
  .quote,
  .book,
  .pill {
    transition: none;
  }
}