/* ============================================================
   CALIBER · MANIFESTO · gotcaliber.com/manifesto
   A founder letter set in the Daylight system.
   Laws honored here (see ../../brand/design-system.md):
     · grounds are sky, gull, cloud only; ink for the footer
     · orange appears as ledge, payoff underline, section dash,
       and the wordmark square — nowhere else
     · Fraunces ≥640, SOFT 100, sentence case, display only
     · three motion moves: alight, underline, verdict
     · reduced-motion parity: durations resolve to 0ms
   ============================================================ */

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--color-gull);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-overlay);
  font-family: var(--font-text);
  font-weight: 600;
  background: var(--color-gull);
  color: var(--color-ink);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-chip);
}

.skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* one focus voice: cobalt on light grounds, gull on sky and ink */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-chip);
}

.hero-field :is(a, button):focus-visible,
.closing-field :is(a, button):focus-visible,
.site-footer :is(a, button):focus-visible {
  outline-color: var(--color-gull);
}

::selection {
  background: var(--color-focus-wash);
  color: var(--color-ink);
}

.hero-field ::selection,
.closing-field ::selection {
  background: rgb(255 255 255 / 28%);
  color: var(--color-gull);
}

/* ---------- header on sky ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: min(var(--shell-max), 100% - var(--shell-gutter) * 2);
  margin-inline: auto;
  padding-block: 1.15rem;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--color-on-sky);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.008em;
}

.brand-lockup > img {
  display: block;
}

.header-cta {
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- hero: the sky field ---------- */

.hero-field {
  background: var(--color-sky);
  color: var(--color-on-sky);
  display: flow-root;
}

.hero-copy {
  padding-block: clamp(4.5rem, 11vw, 8.5rem) clamp(4rem, 9vw, 7rem);
}

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-on-sky-muted);
  margin: 0 0 var(--space-6);
}

.hero-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: var(--type-hero-weight);
  font-size: clamp(2.9rem, 7.2vw, 5.4rem);
  line-height: var(--type-hero-leading);
  letter-spacing: var(--type-hero-tracking);
}

.hero-line {
  display: block;
}

/* alight: each line settles 8px down onto its place, once */
.js .hero-line {
  animation: alight var(--motion-alight) var(--ease-settle) both;
}

.js .hero-line + .hero-line {
  animation-delay: 120ms;
}

@keyframes alight {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-meta {
  margin: var(--space-8) 0 0;
  font-family: var(--font-mono);
  font-size: 0.77rem;
  letter-spacing: 0.04em;
  color: var(--color-on-sky-muted);
}

/* the ledge ends the field */
.ledge {
  height: var(--ledge-h);
  background: var(--color-perch);
}

.ledge-thin {
  height: var(--ledge-h-thin);
}

/* ---------- the letter ---------- */

.letter {
  padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(4rem, 8vw, 6.5rem);
}

.letter article {
  width: min(43.5rem, 100% - var(--shell-gutter) * 2);
  margin-inline: auto;
}

.chapter {
  margin-block: 0 clamp(4.2rem, 8vw, 6.5rem);
}

.chapter:last-child {
  margin-bottom: 0;
}

.chapter p {
  margin: 0 0 1.45rem;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--color-text-soft);
  max-width: var(--prose-max);
}

.chapter p:last-child {
  margin-bottom: 0;
}

/* chapter heads: dash · eyebrow · Fraunces */
.chapter-head {
  margin-bottom: var(--space-8);
}

.section-dash {
  display: block;
  width: 2.2rem;
  height: 3px;
  background: var(--color-perch);
  margin-bottom: var(--space-4);
}

.chapter-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.chapter-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: var(--type-head-weight);
  font-size: var(--type-head-size);
  line-height: var(--type-head-leading);
  letter-spacing: var(--type-head-tracking);
  color: var(--color-ink);
}

/* the letter's first line: slightly raised, full ink */
.opener {
  color: var(--color-ink) !important;
  font-size: 1.3rem !important;
  font-weight: 500;
  line-height: 1.5 !important;
}

/* keylines: the letter's display sentences */
.keyline {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: var(--type-head-weight);
  font-size: clamp(1.42rem, 2.5vw, 1.85rem) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.006em;
  color: var(--color-ink) !important;
  margin: 2.4rem 0 !important;
  max-width: 34ch !important;
}

.chapter .keyline:last-child {
  margin-bottom: 0 !important;
}

/* ---------- beliefs: three hairline cards ---------- */

.beliefs {
  list-style: none;
  margin: var(--space-8) 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

.belief {
  position: relative;
  padding: 1.6rem 1.85rem 1.7rem;
}

.belief-index {
  position: absolute;
  top: 1.45rem;
  right: 1.85rem;
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 !important;
}

.belief h3 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: var(--type-head-weight);
  font-size: var(--type-title-size);
  line-height: 1.2;
  color: var(--color-ink);
}

.belief p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

/* ---------- the refusal panel ---------- */

.never-panel {
  margin-top: var(--space-8);
  background: var(--color-cloud);
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.85rem;
}

.never-panel p {
  margin: 0;
  font-size: 1.0325rem;
  line-height: 1.75;
  color: var(--color-ink);
}

/* ---------- closing field ---------- */

.closing-field {
  background: var(--color-sky);
  color: var(--color-on-sky);
}

.closing-copy {
  padding-block: clamp(4.5rem, 9vw, 7rem);
  text-align: center;
}

.closing-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: var(--type-hero-weight);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: var(--type-hero-tracking);
}

.closing-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}

.closing-actions .btn-gull,
.closing-actions .btn-quiet {
  text-decoration: none;
  display: inline-block;
}

.closing-actions .btn-quiet {
  padding: 0.78rem 1.5rem;
  font-size: 1rem;
}

.signature {
  margin: var(--space-12) 0 0;
  display: grid;
  gap: 0.3rem;
  justify-items: center;
}

.signature-name {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: 640;
  font-size: 1.18rem;
  color: var(--color-on-sky);
}

.signature-role {
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-sky-muted);
}

/* ---------- footer on ink ---------- */

.site-footer {
  background: var(--color-ink);
  color: var(--color-gull);
}

.footer-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding-block: var(--space-8);
  font-size: 0.92rem;
}

.brand-lockup-footer {
  color: var(--color-gull);
  font-size: 1.18rem;
  margin-right: auto;
}

.footer-layout > a:not(.brand-lockup) {
  color: var(--color-gull);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 35%);
  padding-bottom: 1px;
}

.footer-layout > a:not(.brand-lockup):hover {
  border-bottom-color: var(--color-gull);
}

.footer-layout > span {
  color: rgb(255 255 255 / 62%);
}

/* ---------- reduced motion: everything has already landed ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .hero-line {
    animation: none;
  }
}

/* ---------- small screens ---------- */

@media (max-width: 900px) {
  .shell,
  .site-header {
    width: min(var(--shell-max), 100% - 2.5rem);
  }

  .letter article {
    width: min(43.5rem, 100% - 2.5rem);
  }
}

@media (max-width: 560px) {
  .hero-copy {
    padding-block: 3.6rem 3.4rem;
  }

  .hero-copy h1 {
    font-size: clamp(1.7rem, 8.4vw, 2.3rem);
  }

  .chapter p {
    font-size: 1.03rem;
  }

  .belief {
    padding: 1.35rem 1.35rem 1.45rem;
  }

  .belief-index {
    right: 1.35rem;
  }

  .never-panel {
    padding: 1.25rem 1.35rem;
  }

  .closing-actions {
    flex-direction: column;
  }

  .footer-layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-lockup-footer {
    margin-right: 0;
  }
}

/* ============================================================
   INLINE ILLUSTRATIONS · "moments of work"
   Founder decision 2026-08-01: the manifesto page may use
   looping inline illustrations. They live on the gull ground,
   in cobalt/ink/hairline grey only (the orange law holds), and
   begin looping the first time a figure has been in the
   viewport for one full second. Never scroll-linked.
   Every loop's 0%/100% frame IS the composed illustration, so
   no-JS, reduced-motion, pre-start, and print all show a
   finished picture.
   ============================================================ */

.anim {
  margin: 2.75rem 0;
}

.anim svg {
  display: block;
  width: 100%;
  height: auto;
}

.anim-caption {
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

/* paused until the figure has dwelt in view for 1s */
.anim *,
.glyph * {
  animation-play-state: paused;
}

.anim.playing *,
.playing .glyph * {
  animation-play-state: running;
}

.mono-glyph-label {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

/* ---------- fig 1 · the breakthrough (chapter 1) ----------
   A ball ricochets across angled walls; each holds and deflects
   it onto a new diagonal. The last wall breaks: the ball passes
   through, grows, turns perch orange, and glows. Founder
   direction 2026-08-01: this figure's payoff moment may use
   perch + a soft glow. */

.f1-ball {
  transform: translate(600px, 90px) scale(1.55);
  animation: f1-ball 10s ease-in-out infinite;
}

@keyframes f1-ball {
  0% { transform: translate(600px, 90px) scale(1.55); opacity: 1; }
  4% { opacity: 0; }
  7.9% { transform: translate(600px, 90px) scale(1.55); opacity: 0; }
  8% { transform: translate(50px, 85px) scale(1); opacity: 0; }
  9% { transform: translate(50px, 85px) scale(1); opacity: 1; }
  22% { transform: translate(162px, 48px) scale(1); }
  23% { transform: translate(162px, 48px) scale(1); }
  36% { transform: translate(293px, 120px) scale(1); }
  37% { transform: translate(293px, 120px) scale(1); }
  50% { transform: translate(423px, 44px) scale(1); }
  51% { transform: translate(423px, 44px) scale(1); }
  63% { transform: translate(538px, 93px) scale(1); }
  64% { transform: translate(538px, 93px) scale(1); }
  70% { transform: translate(568px, 91px) scale(1.15); }
  76% { transform: translate(600px, 90px) scale(1.55); }
  100% { transform: translate(600px, 90px) scale(1.55); opacity: 1; }
}

.f1-ball-fill {
  fill: #f26a0d;
  animation: f1-fill 10s linear infinite;
}

@keyframes f1-fill {
  0% { fill: #f26a0d; }
  4% { fill: #f26a0d; }
  8% { fill: #1a5cf0; }
  64% { fill: #1a5cf0; }
  72% { fill: #f26a0d; }
  100% { fill: #f26a0d; }
}

.f1-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: f1-glow 10s ease-in-out infinite;
}

@keyframes f1-glow {
  0% { opacity: 1; transform: scale(1); }
  4% { opacity: 0; transform: scale(0.7); }
  74% { opacity: 0; transform: scale(0.7); }
  82% { opacity: 1; transform: scale(1.06); }
  88% { transform: scale(1); }
  93% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

.f1-w1 { animation: f1-jig-22 10s ease-out infinite; }
.f1-w2 { animation: f1-jig-36 10s ease-out infinite; }
.f1-w3 { animation: f1-jig-50 10s ease-out infinite; }

@keyframes f1-jig-22 {
  0%, 21% { transform: translate(0, 0); }
  23% { transform: translate(2.5px, -1px); }
  25% { transform: translate(-1px, 0.5px); }
  27%, 100% { transform: translate(0, 0); }
}

@keyframes f1-jig-36 {
  0%, 35% { transform: translate(0, 0); }
  37% { transform: translate(2.5px, 1px); }
  39% { transform: translate(-1px, -0.5px); }
  41%, 100% { transform: translate(0, 0); }
}

@keyframes f1-jig-50 {
  0%, 49% { transform: translate(0, 0); }
  51% { transform: translate(2.5px, -1px); }
  53% { transform: translate(-1px, 0.5px); }
  55%, 100% { transform: translate(0, 0); }
}

.f1-w4-intact {
  opacity: 0;
  animation: f1-w4-intact 10s linear infinite;
}

@keyframes f1-w4-intact {
  0% { opacity: 0; }
  8% { opacity: 0; }
  9% { opacity: 1; }
  63% { opacity: 1; }
  64% { opacity: 0; }
  100% { opacity: 0; }
}

.f1-w4-broken {
  animation: f1-w4-broken 10s linear infinite;
}

@keyframes f1-w4-broken {
  0% { opacity: 1; }
  4% { opacity: 0; }
  63% { opacity: 0; }
  64% { opacity: 1; }
  100% { opacity: 1; }
}

.f1-half-top {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transform: translate(4px, -3px) rotate(-22deg);
  animation: f1-half-top 10s ease-out infinite;
}

@keyframes f1-half-top {
  0% { transform: translate(4px, -3px) rotate(-22deg); }
  60% { transform: translate(4px, -3px) rotate(-22deg); }
  63.8% { transform: translate(0, 0) rotate(0deg); }
  65% { transform: translate(0, 0) rotate(0deg); }
  71% { transform: translate(4px, -3px) rotate(-22deg); }
  100% { transform: translate(4px, -3px) rotate(-22deg); }
}

.f1-half-bot {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translate(4px, 4px) rotate(18deg);
  animation: f1-half-bot 10s ease-out infinite;
}

@keyframes f1-half-bot {
  0% { transform: translate(4px, 4px) rotate(18deg); }
  60% { transform: translate(4px, 4px) rotate(18deg); }
  63.8% { transform: translate(0, 0) rotate(0deg); }
  65% { transform: translate(0, 0) rotate(0deg); }
  71% { transform: translate(4px, 4px) rotate(18deg); }
  100% { transform: translate(4px, 4px) rotate(18deg); }
}

.f1-shard-a {
  transform: translate(14px, -10px);
  opacity: 0.5;
  animation: f1-shard-a 10s ease-out infinite;
}

.f1-shard-b {
  transform: translate(12px, 8px);
  opacity: 0.5;
  animation: f1-shard-b 10s ease-out infinite;
}

@keyframes f1-shard-a {
  0% { transform: translate(14px, -10px); opacity: 0.5; }
  60% { transform: translate(14px, -10px); opacity: 0.5; }
  63.8% { transform: translate(0, 0); opacity: 0; }
  65% { transform: translate(0, 0); opacity: 0; }
  67% { opacity: 0.9; }
  73% { transform: translate(14px, -10px); opacity: 0.5; }
  100% { transform: translate(14px, -10px); opacity: 0.5; }
}

@keyframes f1-shard-b {
  0% { transform: translate(12px, 8px); opacity: 0.5; }
  60% { transform: translate(12px, 8px); opacity: 0.5; }
  63.8% { transform: translate(0, 0); opacity: 0; }
  65% { transform: translate(0, 0); opacity: 0; }
  67% { opacity: 0.9; }
  73% { transform: translate(12px, 8px); opacity: 0.5; }
  100% { transform: translate(12px, 8px); opacity: 0.5; }
}

/* ---------- fig 2 · the domino run (chapter 2) ----------
   A tiny cobalt bar tips a bigger one; the chain topples
   progressively larger bars. A small change, and everything
   downstream falls. Resting frame: everything already fallen. */

.f2-field {
  animation: f2-field 10s linear infinite;
}

@keyframes f2-field {
  0% { opacity: 1; }
  4% { opacity: 0; }
  8% { opacity: 0; }
  9% { opacity: 1; }
  100% { opacity: 1; }
}

.f2-d1, .f2-d2, .f2-d3, .f2-d4, .f2-d5, .f2-d6, .f2-d7 {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

.f2-d1, .f2-d2, .f2-d3, .f2-d4, .f2-d5, .f2-d6 {
  transform: rotate(78deg);
}

.f2-d7 {
  transform: rotate(86deg);
}

.f2-d1 { animation-name: f2-fall-1; }
.f2-d2 { animation-name: f2-fall-2; }
.f2-d3 { animation-name: f2-fall-3; }
.f2-d4 { animation-name: f2-fall-4; }
.f2-d5 { animation-name: f2-fall-5; }
.f2-d6 { animation-name: f2-fall-6; }
.f2-d7 { animation-name: f2-fall-7; }

@keyframes f2-fall-1 {
  0%, 4% { transform: rotate(78deg); }
  7% { transform: rotate(0deg); }
  14% { transform: rotate(0deg); }
  20%, 100% { transform: rotate(78deg); }
}

@keyframes f2-fall-2 {
  0%, 4% { transform: rotate(78deg); }
  7% { transform: rotate(0deg); }
  18.5% { transform: rotate(0deg); }
  26%, 100% { transform: rotate(78deg); }
}

@keyframes f2-fall-3 {
  0%, 4% { transform: rotate(78deg); }
  7% { transform: rotate(0deg); }
  24% { transform: rotate(0deg); }
  32.5%, 100% { transform: rotate(78deg); }
}

@keyframes f2-fall-4 {
  0%, 4% { transform: rotate(78deg); }
  7% { transform: rotate(0deg); }
  30% { transform: rotate(0deg); }
  40%, 100% { transform: rotate(78deg); }
}

@keyframes f2-fall-5 {
  0%, 4% { transform: rotate(78deg); }
  7% { transform: rotate(0deg); }
  37.5% { transform: rotate(0deg); }
  48%, 100% { transform: rotate(78deg); }
}

@keyframes f2-fall-6 {
  0%, 4% { transform: rotate(78deg); }
  7% { transform: rotate(0deg); }
  46% { transform: rotate(0deg); }
  57%, 100% { transform: rotate(78deg); }
}

@keyframes f2-fall-7 {
  0%, 4% { transform: rotate(86deg); }
  7% { transform: rotate(0deg); }
  55% { transform: rotate(0deg); }
  69%, 100% { transform: rotate(86deg); }
}

/* ---------- fig 3 · the artifact machine (chapter 3) ---------- */

.f3-l1 { animation: f3-w1 4.2s linear infinite; }
.f3-l2 { animation: f3-w2 4.2s linear infinite; }
.f3-l3 { animation: f3-w3 4.2s linear infinite; }
.f3-l4 { animation: f3-w4 4.2s linear infinite; }
.f3-l5 { animation: f3-w5 4.2s linear infinite; }
.f3-l6 { animation: f3-w6 4.2s linear infinite; }

@keyframes f3-w1 {
  0% { stroke-dashoffset: 0; opacity: 1; }
  4% { opacity: 0; }
  7% { stroke-dashoffset: 100; opacity: 0; }
  8% { opacity: 1; }
  14% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes f3-w2 {
  0% { stroke-dashoffset: 0; opacity: 1; }
  4% { opacity: 0; }
  15% { stroke-dashoffset: 100; opacity: 0; }
  16% { opacity: 1; }
  22% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes f3-w3 {
  0% { stroke-dashoffset: 0; opacity: 1; }
  4% { opacity: 0; }
  23% { stroke-dashoffset: 100; opacity: 0; }
  24% { opacity: 1; }
  30% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes f3-w4 {
  0% { stroke-dashoffset: 0; opacity: 1; }
  4% { opacity: 0; }
  31% { stroke-dashoffset: 100; opacity: 0; }
  32% { opacity: 1; }
  38% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes f3-w5 {
  0% { stroke-dashoffset: 0; opacity: 1; }
  4% { opacity: 0; }
  39% { stroke-dashoffset: 100; opacity: 0; }
  40% { opacity: 1; }
  46% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes f3-w6 {
  0% { stroke-dashoffset: 0; opacity: 1; }
  4% { opacity: 0; }
  47% { stroke-dashoffset: 100; opacity: 0; }
  48% { opacity: 1; }
  54% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* ---------- chapter 4 · belief glyphs ---------- */

.belief-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.glyph {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.g-needle {
  transform-box: view-box;
  transform-origin: 16px 16px;
  animation: g-needle 8s var(--ease-settle) infinite;
}

@keyframes g-needle {
  0% { transform: rotate(0deg); }
  18% { transform: rotate(155deg); }
  30% { transform: rotate(132deg); }
  55% { transform: rotate(296deg); }
  68% { transform: rotate(272deg); }
  100% { transform: rotate(360deg); }
}

.g-sign {
  animation: g-sign 7s linear infinite;
}

@keyframes g-sign {
  0% { stroke-dashoffset: 0; opacity: 1; }
  5% { opacity: 0; }
  9% { stroke-dashoffset: 100; opacity: 0; }
  10% { opacity: 1; }
  48% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.g-arrow-line {
  animation: g-arrow-line 5s linear infinite;
}

@keyframes g-arrow-line {
  0% { stroke-dashoffset: 0; opacity: 1; }
  6% { opacity: 0; }
  11% { stroke-dashoffset: 100; opacity: 0; }
  12% { opacity: 1; }
  32% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.g-arrow-head {
  animation: g-arrow-head 5s var(--ease-settle) infinite;
}

@keyframes g-arrow-head {
  0% { opacity: 1; transform: translateX(0); }
  6% { opacity: 0; transform: translateX(-5px); }
  28% { opacity: 0; transform: translateX(-5px); }
  34% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}

.g-arrow-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: g-arrow-dot 5s var(--ease-settle) infinite;
}

@keyframes g-arrow-dot {
  0%, 8% { transform: scale(1); }
  12% { transform: scale(1.4); }
  18%, 100% { transform: scale(1); }
}

/* ---------- fig 5 · the trail (chapter 5) ---------- */

.f5-path {
  animation: f5-path 10s linear infinite;
}

@keyframes f5-path {
  0% { stroke-dashoffset: 0; opacity: 1; }
  3% { opacity: 0; }
  8% { stroke-dashoffset: 100; opacity: 0; }
  10% { opacity: 1; }
  72% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.f5-d1, .f5-d2, .f5-d3, .f5-d4, .f5-d5, .f5-d6 {
  transform-box: fill-box;
  transform-origin: center;
}

.f5-d1 { animation: f5-pop-18 10s var(--ease-settle) infinite; }
.f5-d2 { animation: f5-pop-27 10s var(--ease-settle) infinite; }
.f5-d3 { animation: f5-pop-37 10s var(--ease-settle) infinite; }
.f5-d4 { animation: f5-pop-49 10s var(--ease-settle) infinite; }
.f5-d5 { animation: f5-pop-59 10s var(--ease-settle) infinite; }
.f5-d6 { animation: f5-pop-73 10s var(--ease-settle) infinite; }

@keyframes f5-pop-18 {
  0% { opacity: 1; transform: scale(1); }
  3% { opacity: 0; transform: scale(0); }
  16% { opacity: 0; transform: scale(0); }
  18% { opacity: 1; transform: scale(1.25); }
  21%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes f5-pop-27 {
  0% { opacity: 1; transform: scale(1); }
  3% { opacity: 0; transform: scale(0); }
  25% { opacity: 0; transform: scale(0); }
  27% { opacity: 1; transform: scale(1.25); }
  30%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes f5-pop-37 {
  0% { opacity: 1; transform: scale(1); }
  3% { opacity: 0; transform: scale(0); }
  35% { opacity: 0; transform: scale(0); }
  37% { opacity: 1; transform: scale(1.25); }
  40%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes f5-pop-49 {
  0% { opacity: 1; transform: scale(1); }
  3% { opacity: 0; transform: scale(0); }
  47% { opacity: 0; transform: scale(0); }
  49% { opacity: 1; transform: scale(1.25); }
  52%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes f5-pop-59 {
  0% { opacity: 1; transform: scale(1); }
  3% { opacity: 0; transform: scale(0); }
  57% { opacity: 0; transform: scale(0); }
  59% { opacity: 1; transform: scale(1.25); }
  62%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes f5-pop-73 {
  0% { opacity: 1; transform: scale(1); }
  3% { opacity: 0; transform: scale(0); }
  71% { opacity: 0; transform: scale(0); }
  73% { opacity: 1; transform: scale(1.35); }
  76%, 100% { opacity: 1; transform: scale(1); }
}

/* ---------- fig 6 · the instrument (chapter 6) ---------- */

.f6-prog {
  animation: f6-prog 11s linear infinite;
}

@keyframes f6-prog {
  0% { stroke-dashoffset: 0; opacity: 1; }
  3% { opacity: 0; }
  8% { stroke-dashoffset: 100; opacity: 0; }
  10% { opacity: 1; }
  68% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.f6-s1 { animation: f6-stem-24 11s linear infinite; }
.f6-s2 { animation: f6-stem-42 11s linear infinite; }
.f6-s3 { animation: f6-stem-60 11s linear infinite; }

@keyframes f6-stem-24 {
  0% { opacity: 1; } 3% { opacity: 0; } 24% { opacity: 0; }
  28% { opacity: 1; } 100% { opacity: 1; }
}

@keyframes f6-stem-42 {
  0% { opacity: 1; } 3% { opacity: 0; } 42% { opacity: 0; }
  46% { opacity: 1; } 100% { opacity: 1; }
}

@keyframes f6-stem-60 {
  0% { opacity: 1; } 3% { opacity: 0; } 60% { opacity: 0; }
  64% { opacity: 1; } 100% { opacity: 1; }
}

.f6-release {
  transform-box: fill-box;
  transform-origin: center;
  animation: f6-pop-74 11s var(--ease-settle) infinite;
}

@keyframes f6-pop-74 {
  0% { opacity: 1; transform: scale(1); }
  3% { opacity: 0; transform: scale(0); }
  72% { opacity: 0; transform: scale(0); }
  74% { opacity: 1; transform: scale(1.2); }
  77%, 100% { opacity: 1; transform: scale(1); }
}

.f6-tick {
  animation: f6-tick 11s linear infinite;
}

@keyframes f6-tick {
  0% { stroke-dashoffset: 0; opacity: 1; }
  3% { opacity: 0; }
  75% { stroke-dashoffset: 100; opacity: 0; }
  76% { opacity: 1; }
  84% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* ---------- fig 7 · they come to you (chapter 7) ----------
   The glowing orange dot from chapter 1 is the person, seen.
   Blue dots are companies; some cross the field and settle on
   the person's orbit. Founder direction 2026-08-01: perch +
   glow allowed for the person, matching chapter 1. */

.f7-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: f7-glow 12s ease-in-out infinite;
}

@keyframes f7-glow {
  0% { transform: scale(1); }
  42% { transform: scale(1.14); }
  46% { transform: scale(1); }
  52% { transform: scale(1.14); }
  56% { transform: scale(1); }
  60% { transform: scale(1.16); }
  66% { transform: scale(1); }
  80% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.f7-m1, .f7-m2, .f7-m3 {
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: var(--ease-settle);
}

.f7-m1 { transform: translate(-255px, 13px); animation-name: f7-m1; }
.f7-m2 { transform: translate(-348px, 12px); animation-name: f7-m2; }
.f7-m3 { transform: translate(-325px, -10px); animation-name: f7-m3; }

@keyframes f7-m1 {
  0% { transform: translate(-255px, 13px); opacity: 1; }
  4% { transform: translate(-255px, 13px); opacity: 0; }
  8% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  28% { transform: translate(0, 0); }
  42%, 100% { transform: translate(-255px, 13px); opacity: 1; }
}

@keyframes f7-m2 {
  0% { transform: translate(-348px, 12px); opacity: 1; }
  4% { transform: translate(-348px, 12px); opacity: 0; }
  8% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  36% { transform: translate(0, 0); }
  52%, 100% { transform: translate(-348px, 12px); opacity: 1; }
}

@keyframes f7-m3 {
  0% { transform: translate(-325px, -10px); opacity: 1; }
  4% { transform: translate(-325px, -10px); opacity: 0; }
  8% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  46% { transform: translate(0, 0); }
  60%, 100% { transform: translate(-325px, -10px); opacity: 1; }
}

/* ---------- fig 8 · one honest signal (chapter 8) ----------
   Caliber's solid box holds the glowing judgment bulb (built,
   owned). Trust and consistency sit beside it in dashed boxes:
   real signals, not ours yet. Founder direction 2026-08-01:
   perch + glow allowed for the bulb. */

.f8-bulbglow {
  transform-box: fill-box;
  transform-origin: center;
  animation: f8-bulbglow 10s ease-in-out infinite;
}

@keyframes f8-bulbglow {
  0% { opacity: 1; transform: scale(1); }
  4% { opacity: 0; transform: scale(0.6); }
  12% { opacity: 0; transform: scale(0.6); }
  15% { opacity: 1; transform: scale(1.12); }
  20% { transform: scale(1); }
  55% { transform: scale(1.07); }
  70% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

.f8-bulb {
  fill: #f26a0d;
  animation: f8-bulb 10s linear infinite;
}

@keyframes f8-bulb {
  0% { fill: #f26a0d; }
  5% { fill: #a9aeba; }
  13% { fill: #a9aeba; }
  16% { fill: #f26a0d; }
  100% { fill: #f26a0d; }
}

.f8-heart {
  transform-box: fill-box;
  transform-origin: center;
  animation: f8-heart 10s ease-in-out infinite;
}

@keyframes f8-heart {
  0%, 30% { transform: scale(1); }
  33% { transform: scale(1.12); }
  36% { transform: scale(1); }
  39% { transform: scale(1.09); }
  42%, 75% { transform: scale(1); }
  78% { transform: scale(1.12); }
  81%, 100% { transform: scale(1); }
}

.f8-inf {
  animation: f8-inf 10s linear infinite;
}

@keyframes f8-inf {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -64; }
}

/* ---------- illustrations: reduced motion = composed still ---------- */

@media (prefers-reduced-motion: reduce) {
  .anim *,
  .glyph * {
    animation: none !important;
  }
}

/* ---------- print: the letter survives on paper ---------- */

@media print {
  .site-header,
  .closing-actions,
  .site-footer {
    display: none;
  }

  .hero-field,
  .closing-field {
    background: none;
    color: var(--color-ink);
  }

  .mono-label,
  .hero-meta {
    color: var(--color-text-muted);
  }

  .chapter p {
    color: var(--color-ink);
  }
}