/* ==========================================================================
   WHY SOME DREAMS COME TRUE — DESIGN TOKENS
   Every colour and typeface below is extracted from the original PDF.
   See BRAND.md for provenance. Do not invent new brand colours here.
   ========================================================================== */

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Brand, from the PDF ---- */
  --blue:        #1565D8;  /* cover ground      pdf (0.0824, 0.3961, 0.8471) */
  --orange:      #FF9900;  /* cover accent sq.  pdf (1.0, 0.6, 0.0)          */
  --bone:        #EFEEE7;  /* interior ground   pdf (0.9373, 0.9333, 0.9059) */
  --ink:         #2B2C30;  /* body text         pdf (0.1686, 0.1725, 0.1882) */
  --paper:       #FFFFFF;

  /* ---- Derived, site only ---- */
  --blue-deep:   #0E4CA8;
  --blue-wash:   #E8F0FC;
  --ink-muted:   #6B6D75;
  --rule:        #D8D6CC;

  /* ---- Semantic ---- */
  --bg:          var(--bone);
  --fg:          var(--ink);
  --fg-muted:    var(--ink-muted);
  --surface:     var(--paper);
  --border:      var(--rule);
  --accent:      var(--orange);
  --brand:       var(--blue);

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero:  clamp(2.75rem, 8vw, 5.5rem);
  --fs-h1:    clamp(2rem, 5vw, 3rem);
  --fs-h2:    clamp(1.5rem, 3.5vw, 2rem);
  --fs-h3:    1.25rem;
  --fs-lead:  1.25rem;
  --fs-body:  1.0625rem;
  --fs-small: 0.875rem;

  --lh-tight: 1.05;
  --lh-body:  1.7;
  --ls-tight: -0.02em;
  --ls-caps:  0.08em;

  /* ---- Space & shape ---- */
  --measure:  68ch;
  --gap-xs:   0.5rem;
  --gap-sm:   1rem;
  --gap-md:   2rem;
  --gap-lg:   4rem;
  --gap-xl:   7rem;
  --radius:   2px;   /* the book has no rounded corners — keep it near-square */

  --shadow: 0 1px 2px rgba(43, 44, 48, .06), 0 8px 24px rgba(43, 44, 48, .08);
}

/* --------------------------------------------------------------------------
   Dark mode. The book's interior is bone; at night we invert to the cover's
   register — deep field, bone text — rather than inventing a new palette.
   Light is defined on bare :root above so the "system" default resolves.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #14161C;
    --fg:       #E8E7E0;
    --fg-muted: #9A9CA5;
    --surface:  #1C1F27;
    --border:   #2E323C;
    --brand:    #4F8FF0;   /* blue lifted for contrast on dark */
    --blue-wash:#1A2436;
  }
}
:root[data-theme="dark"] {
  --bg:       #14161C;
  --fg:       #E8E7E0;
  --fg-muted: #9A9CA5;
  --surface:  #1C1F27;
  --border:   #2E323C;
  --brand:    #4F8FF0;
  --blue-wash:#1A2436;
}

/* ==========================================================================
   BASE
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--gap-sm);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.25em; max-width: var(--measure); }

a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--blue-deep); }

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

.wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.prose { max-width: var(--measure); }

/* --- The cover lockup. One word per line, stacked, as on the book. --- */
.cover-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin: 0;
}
.cover-title span { display: block; }

.cover-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* --- Hero: full-bleed cover blue --- */
.hero {
  background: var(--blue);
  color: #fff;
  padding-block: var(--gap-xl);
}
.hero a { color: #fff; }

/* The orange square. One per view. This ratio is the brand. */
.mark {
  width: 3.5rem; height: 3.5rem;
  background: var(--orange);
  display: block;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 1rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.btn--primary { background: var(--orange); color: var(--ink); }
.btn--primary:hover { background: #E68A00; color: var(--ink); }
.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: rgba(255,255,255,.1); }

/* --- Pull quote: full width, caps, no quote marks, as in the book --- */
.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  max-width: 24ch;
  margin: var(--gap-lg) 0;
}

/* --- Running foot, echoing the book's 7pt Playfair --- */
.runfoot {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* --- Wide content must scroll itself, never the page --- */
.scroll-x { overflow-x: auto; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}