/* ==========================================================================
   Innovation Trampoline — Claude Fable 5 edition
   "Precision drafting": the page as an engineer's drawing set. Bone drafting
   paper with a faint grid, ink typography, ultramarine pen accents, dimension
   annotations, a parts-schedule capabilities table, and a contact section that
   inverts into a true blueprint. Self-contained: also styles the shared
   header / mobile nav / footer chrome, scoped under body.fable-5.
   ========================================================================== */

:root {
  /* Drafting palette */
  --f5-paper:        #f3f2ec;
  --f5-paper-2:      #ecebe2;
  --f5-ink:          #14161a;
  --f5-ink-soft:     #45484f;
  --f5-ink-faint:    #6e7177;
  --f5-blue:         #2430df;          /* ultramarine drafting pen */
  --f5-blue-deep:    #1c26bd;          /* blueprint ground */
  --f5-blue-soft:    rgba(36, 48, 223, 0.55);
  --f5-red:          #d8341f;          /* stamp red — sparingly */
  --f5-line:         rgba(20, 22, 26, 0.16);
  --f5-line-soft:    rgba(20, 22, 26, 0.08);
  --f5-grid:         rgba(36, 48, 223, 0.045);
  --f5-grid-strong:  rgba(36, 48, 223, 0.085);
  --f5-bp-text:      #f3f2ec;
  --f5-bp-dim:       rgba(243, 242, 236, 0.78);
  --f5-bp-faint:     rgba(243, 242, 236, 0.7);
  --f5-bp-line:      rgba(243, 242, 236, 0.45);
  --f5-bp-line-soft: rgba(243, 242, 236, 0.28);

  --f5-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f5-sans:  'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --f5-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --f5-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --f5-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --f5-max: 1280px;
}

/* Base ------------------------------------------------------------------- */
body.fable-5 {
  margin: 0;
  background-color: var(--f5-paper);
  /* Drafting grid: fine pitch + major rules every fifth line */
  background-image:
    linear-gradient(var(--f5-grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--f5-grid-strong) 1px, transparent 1px),
    linear-gradient(var(--f5-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--f5-grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--f5-ink);
  font-family: var(--f5-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.fable-5 *,
body.fable-5 *::before,
body.fable-5 *::after { box-sizing: border-box; }

body.fable-5 ::selection {
  background-color: var(--f5-blue);
  color: var(--f5-paper);
}
/* Inverted on the blueprint, where blue-on-blue selection would vanish */
.f5-contact ::selection {
  background-color: var(--f5-paper);
  color: var(--f5-blue-deep);
}

.f5 img { max-width: 100%; height: auto; display: block; }
.f5 a { color: inherit; text-decoration: none; }
/* .menu-toggle lives in the shared header, outside <main class="f5"> — it needs
   the same reset or it renders with native UA button chrome. */
.f5 button,
body.fable-5 .menu-toggle {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
}
.f5 h1, .f5 h2, .f5 h3, .f5 p, .f5 figure { margin: 0; }

.f5-container {
  width: 100%;
  max-width: var(--f5-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px) {
  .f5-container { padding: 0 2.5rem; }
}

/* Shared annotation atoms -------------------------------------------------- */
.f5-cross {
  position: absolute;
  font-family: var(--f5-mono);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1;
  color: var(--f5-blue-soft);
  transform: translate(-50%, -50%);
  user-select: none;
}
.f5-cross--tl { top: 0; left: 0; }
.f5-cross--tr { top: 0; left: 100%; }
.f5-cross--bl { top: 100%; left: 0; }
.f5-cross--br { top: 100%; left: 100%; }

.f5-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
  font-family: var(--f5-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--f5-ink-soft);
}
.f5-tag__num { color: var(--f5-blue); font-weight: 600; }
.f5-tag__rule {
  width: 2.4rem;
  height: 1px;
  background: var(--f5-line);
}
.f5-tag--bp { color: var(--f5-bp-dim); }
.f5-tag--bp .f5-tag__num { color: var(--f5-bp-text); }
.f5-tag--bp .f5-tag__rule { background: var(--f5-bp-line); }

/* Header ------------------------------------------------------------------ */
body.fable-5 .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 1.1rem 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--f5-ease-quart),
              padding 0.4s var(--f5-ease-quart),
              border-color 0.4s var(--f5-ease-quart),
              backdrop-filter 0.4s var(--f5-ease-quart);
}
body.fable-5.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.fable-5.admin-bar .site-header { top: 46px; }
}
/* Below 600px the admin bar is position:absolute and scrolls away — re-dock
   the header once scrolled so it doesn't float 46px below the top. */
@media screen and (max-width: 600px) {
  body.fable-5.admin-bar .site-header.is-scrolled { top: 0; }
}

body.fable-5 .site-header.is-scrolled {
  padding: 0.7rem 0;
  background: rgba(243, 242, 236, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--f5-line-soft);
}

body.fable-5 .site-header .container {
  width: 100%;
  max-width: var(--f5-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body.fable-5 .site-header .container { padding: 0 2.5rem; }
}

body.fable-5 .site-logo {
  font-family: var(--f5-serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--f5-ink);
  text-decoration: none;
}
body.fable-5 .site-logo .logo-innovation { color: var(--f5-ink); }
body.fable-5 .site-logo .logo-dot { color: var(--f5-blue); }
body.fable-5 .site-logo .logo-trampoline { font-style: italic; color: var(--f5-ink); }

body.fable-5 .site-nav { display: none; }
@media (min-width: 768px) {
  body.fable-5 .site-nav { display: flex; gap: 2.2rem; }
}
body.fable-5 .site-nav a {
  position: relative;
  font-family: var(--f5-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f5-ink-soft);
  text-decoration: none;
  padding: 0.3rem 0;
  transition: color 0.25s var(--f5-ease-quart);
}
body.fable-5 .site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--f5-blue);
  transition: width 0.35s var(--f5-ease);
}
body.fable-5 .site-nav a:hover { color: var(--f5-ink); }
body.fable-5 .site-nav a:hover::after,
body.fable-5 .site-nav a.is-active::after { width: 100%; }
body.fable-5 .site-nav a.is-active { color: var(--f5-blue); }

/* Hamburger */
body.fable-5 .menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5.5px;
  width: 40px;
  height: 40px;
  padding: 8px;
}
body.fable-5 .menu-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--f5-ink);
  transition: transform 0.35s var(--f5-ease), opacity 0.25s ease;
}
body.fable-5 .menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.fable-5 .menu-toggle.is-active span:nth-child(2) { opacity: 0; }
body.fable-5 .menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 768px) { body.fable-5 .menu-toggle { display: none; } }

/* Mobile nav */
body.fable-5 .mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.4rem;
  padding: 0 2rem;
  background-color: var(--f5-paper);
  background-image:
    linear-gradient(var(--f5-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--f5-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--f5-ease-quart), visibility 0.4s;
}
body.fable-5.admin-bar .mobile-nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.fable-5.admin-bar .mobile-nav { top: 46px; }
}
body.fable-5 .mobile-nav.is-open { opacity: 1; visibility: visible; }
body.fable-5 .mobile-nav a {
  counter-increment: f5-mobile-nav;
  font-family: var(--f5-serif);
  font-size: 2.3rem;
  font-weight: 450;
  color: var(--f5-ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--f5-ease), transform 0.45s var(--f5-ease), color 0.25s ease;
}
body.fable-5 .mobile-nav a::before {
  content: counter(f5-mobile-nav, decimal-leading-zero) ' / ';
  font-family: var(--f5-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  vertical-align: 0.9em;
  color: var(--f5-blue);
}
body.fable-5 .mobile-nav.is-open a { opacity: 1; transform: translateY(0); }
body.fable-5 .mobile-nav.is-open a:nth-child(1) { transition-delay: 0.08s; }
body.fable-5 .mobile-nav.is-open a:nth-child(2) { transition-delay: 0.13s; }
body.fable-5 .mobile-nav.is-open a:nth-child(3) { transition-delay: 0.18s; }
body.fable-5 .mobile-nav.is-open a:nth-child(4) { transition-delay: 0.23s; }
body.fable-5 .mobile-nav a:hover { color: var(--f5-blue); }
@media (min-width: 768px) { body.fable-5 .mobile-nav { display: none; } }

/* Buttons ------------------------------------------------------------------
   Sharp drafting rectangles with an offset "print" shadow on hover.          */
.f5-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1.5rem;
  font-family: var(--f5-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  transition: transform 0.3s var(--f5-ease), box-shadow 0.3s var(--f5-ease),
              background-color 0.3s var(--f5-ease-quart), color 0.3s var(--f5-ease-quart),
              border-color 0.3s var(--f5-ease-quart);
}
.f5-btn__icon { display: inline-flex; }
.f5-btn__icon svg { width: 14px; height: 14px; transition: transform 0.3s var(--f5-ease); }
.f5-btn:hover .f5-btn__icon svg { transform: translateX(3px); }

.f5 .f5-btn--primary {
  background-color: var(--f5-ink);
  color: var(--f5-paper);
}
.f5 .f5-btn--primary:hover {
  background-color: var(--f5-blue);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--f5-ink);
}

.f5 .f5-btn--ghost {
  border: 1px solid var(--f5-line);
  color: var(--f5-ink-soft);
}
.f5 .f5-btn--ghost:hover {
  border-color: var(--f5-blue);
  color: var(--f5-blue);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(36, 48, 223, 0.18);
}

.f5-btn:focus-visible,
.f5 a:focus-visible,
.f5 button:focus-visible,
body.fable-5 .menu-toggle:focus-visible,
body.fable-5 .site-nav a:focus-visible,
body.fable-5 .mobile-nav a:focus-visible,
body.fable-5 .footer-links a:focus-visible {
  outline: 2px solid var(--f5-blue);
  outline-offset: 3px;
}
/* On the blueprint a blue ring is invisible — flip the registration mark to paper */
.f5-contact a:focus-visible,
.f5-contact button:focus-visible {
  outline-color: var(--f5-bp-text);
}

/* Hero — sheet 01 ---------------------------------------------------------- */
.f5-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 7rem 0 5rem;
  overflow: hidden;
}

/* Sheet frame with registration crosses */
.f5-hero__frame {
  position: absolute;
  inset: 5.5rem 1.1rem 1.1rem;
  border: 1px solid var(--f5-line-soft);
  pointer-events: none;
  animation: f5-fade 0.9s ease 0.2s backwards;
}
@media (min-width: 768px) {
  .f5-hero__frame { inset: 5.75rem 1.5rem 1.5rem; }
}
/* Ruler ticks along the frame top */
.f5-hero__frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--f5-line) 0,
    var(--f5-line) 1px,
    transparent 1px,
    transparent 24px
  );
  opacity: 0.55;
}

/* Compass ornament — concentric survey rings, right-hand balance */
.f5-hero__compass {
  position: absolute;
  top: 50%;
  right: -120px;
  width: 560px;
  height: 560px;
  transform: translateY(-50%);
  pointer-events: none;
  display: none;
  animation: f5-fade 1.4s ease 0.5s backwards;
}
@media (min-width: 1024px) { .f5-hero__compass { display: block; } }

.f5-hero__compass-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--f5-line-soft);
}
.f5-hero__compass-ring--dash {
  inset: 0;
  border: 1px dashed rgba(36, 48, 223, 0.28);
  animation: f5-spin 90s linear infinite;
}
.f5-hero__compass-ring--mid { inset: 17%; }
.f5-hero__compass-ring--core {
  inset: 38%;
  border-color: rgba(36, 48, 223, 0.22);
}
.f5-hero__compass-axis {
  position: absolute;
  background: var(--f5-line-soft);
}
.f5-hero__compass-axis--h { top: 50%; left: -4%; right: -4%; height: 1px; }
.f5-hero__compass-axis--v { left: 50%; top: -4%; bottom: -4%; width: 1px; }
.f5-hero__compass-label {
  position: absolute;
  top: calc(50% + 0.7rem);
  left: 1rem;
  font-family: var(--f5-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f5-blue-soft);
}

@keyframes f5-spin { to { transform: rotate(360deg); } }
@keyframes f5-fade { from { opacity: 0; } }

.f5-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
}

.f5-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin-bottom: 2.4rem;
  font-family: var(--f5-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--f5-ink-soft);
  animation: f5-rise-in 0.8s var(--f5-ease) 0.1s backwards;
}
.f5-eyebrow__pip {
  width: 7px;
  height: 7px;
  background: var(--f5-blue);
}
.f5-eyebrow__sep { color: var(--f5-ink-faint); }
.f5-eyebrow__note { color: var(--f5-blue); }

.f5-hero__title {
  font-family: var(--f5-serif);
  font-size: clamp(3.4rem, 10vw, 7.6rem);
  font-weight: 380;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--f5-ink);
}
.f5-hero__line {
  display: block;
  overflow: hidden;
  /* 0.14em clears the italic Fraunces descender (0.243em) without changing the
     stacked leading (the negative margin gives back the difference). */
  padding-bottom: 0.14em;
  margin-bottom: -0.08em;
}
.f5-hero__word {
  display: inline-block;
  transform: translateY(112%);
  animation: f5-word-rise 0.9s var(--f5-ease) forwards;
}
.f5-hero__line:nth-child(1) .f5-hero__word:nth-child(1) { animation-delay: 0.18s; }
.f5-hero__line:nth-child(1) .f5-hero__word:nth-child(2) { animation-delay: 0.3s; }
.f5-hero__line:nth-child(2) .f5-hero__word { animation-delay: 0.44s; }
@keyframes f5-word-rise { to { transform: translateY(0); } }

.f5-hero__word--em {
  font-style: italic;
  color: var(--f5-blue);
}

/* Dimension annotation under the headline */
.f5-hero__dim {
  max-width: min(100%, 33rem);
  margin-top: 0.9rem;
  text-align: center; /* drafting convention: the label sits on the line's axis */
}
.f5-hero__dim-line {
  position: relative;
  display: block;
  height: 1px;
  background: var(--f5-blue);
  transform: scaleX(0);
  transform-origin: left;
  animation: f5-draw-x 0.8s var(--f5-ease) 0.75s forwards;
}
.f5-hero__dim-line::before,
.f5-hero__dim-line::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--f5-blue);
}
.f5-hero__dim-line::before { left: 0; }
.f5-hero__dim-line::after { right: 0; }
@keyframes f5-draw-x { to { transform: scaleX(1); } }

.f5-hero__dim-label {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--f5-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f5-blue);
  opacity: 0;
  animation: f5-fade-in 0.5s ease 1.1s forwards;
}
@keyframes f5-fade-in { to { opacity: 1; } }

.f5-hero__lede {
  max-width: 36rem;
  margin-top: 2.2rem;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--f5-ink-soft);
  animation: f5-rise-in 0.8s var(--f5-ease) 0.95s backwards;
}

.f5-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.6rem;
  animation: f5-rise-in 0.8s var(--f5-ease) 1.15s backwards;
}

@keyframes f5-rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.f5-hero__scroll {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  /* Hidden while the switcher pill is bottom-docked (it owns that space) */
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  animation: f5-fade 1s ease 1.4s backwards;
}
@media (min-width: 1360px) {
  .f5-hero__scroll { display: flex; }
}
.f5-hero__scroll-label {
  font-family: var(--f5-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  margin-right: -0.22em; /* re-centre: trailing tracking otherwise shifts the glyphs left */
  text-transform: uppercase;
  color: var(--f5-ink-faint);
  transition: color 0.25s var(--f5-ease-quart);
}
.f5-hero__scroll:hover .f5-hero__scroll-label { color: var(--f5-blue); }
.f5-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 44px;
  background: var(--f5-line);
  overflow: hidden;
}
.f5-hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--f5-blue);
  animation: f5-scroll-tick 2s var(--f5-ease-quart) infinite;
}
@keyframes f5-scroll-tick {
  0%   { top: -40%; }
  100% { top: 110%; }
}

/* Drawing register — disciplines strip ------------------------------------- */
.f5-register {
  border-top: 1px solid var(--f5-line);
  border-bottom: 1px solid var(--f5-line);
  background: rgba(243, 242, 236, 0.6);
}
.f5-register__row {
  /* Auto-fit columns wrap into tidy ranks at every width (flex space-between
     stranded items on ragged justified rows) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem 2rem;
  padding: 1.1rem 0;
}
.f5-register__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--f5-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f5-ink-soft);
  white-space: nowrap;
}
.f5-register__idx {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--f5-blue);
}

/* Approach — sheet 02 ------------------------------------------------------ */
.f5-approach {
  position: relative;
  padding: 8rem 0;
}
@media (min-width: 1024px) { .f5-approach { padding: 10rem 0; } }

.f5-approach__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}
@media (min-width: 900px) {
  .f5-approach__grid { grid-template-columns: 1.05fr 0.95fr; gap: 5rem; }
}

.f5-approach__title {
  font-family: var(--f5-serif);
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  font-weight: 420;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 1.8rem;
}
.f5-approach__title em { font-style: italic; color: var(--f5-blue); }

.f5-approach__text {
  max-width: 34rem;
  color: var(--f5-ink-soft);
  line-height: 1.75;
}
.f5-approach__text + .f5-approach__text { margin-top: 1.2rem; }

/* Schematic figure */
.f5-approach__visual { display: flex; justify-content: center; }
.f5-schematic {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
}
.f5-schematic__svg { width: 100%; height: 100%; }

.f5-schematic__axis { stroke: var(--f5-line-soft); stroke-width: 1; }

.f5-schematic__ring {
  stroke: var(--f5-line);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke-dashoffset 1.4s var(--f5-ease) 0.1s;
}
.f5-schematic__ring--2 { transition-delay: 0.3s; }
.f5-schematic__ring--3 { stroke: var(--f5-blue-soft); transition-delay: 0.5s; }
[data-animate].is-visible .f5-schematic__ring { stroke-dashoffset: 0; }

.f5-schematic__dash {
  stroke: rgba(36, 48, 223, 0.4);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: f5-spin 70s linear infinite;
  opacity: 0;
  transition: opacity 0.8s ease 0.9s;
}
[data-animate].is-visible .f5-schematic__dash { opacity: 1; }

.f5-schematic__dim line { stroke: var(--f5-blue); stroke-width: 1; }
.f5-schematic__dim,
.f5-schematic__pt {
  opacity: 0;
  transition: opacity 0.6s ease 1.1s;
}
[data-animate].is-visible .f5-schematic__dim,
[data-animate].is-visible .f5-schematic__pt { opacity: 1; }

.f5-schematic__text {
  font-family: var(--f5-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--f5-blue);
}
.f5-schematic__pt { fill: var(--f5-paper); stroke: var(--f5-ink); stroke-width: 1; }

.f5-schematic__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(84px, 26vw, 108px);
  height: clamp(84px, 26vw, 108px);
  background: var(--f5-paper);
  border: 1px solid var(--f5-ink);
  box-shadow: 5px 5px 0 rgba(36, 48, 223, 0.14);
  font-family: var(--f5-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7;
}
.f5-schematic__caption {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f5-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f5-blue);
  white-space: nowrap;
}

/* Proof — general notes, exhibits & the record ------------------------------
   The anti-bandwagon section: claims are framed as a drawing's GENERAL NOTES
   panel, the version demo becomes Exhibit A, and the LinkedIn essay + tallies
   sit on file as the record.                                                  */
.f5-proof {
  position: relative;
  padding: 7rem 0 8rem;
  border-top: 1px solid var(--f5-line-soft);
}

.f5-proof__header { max-width: 44rem; margin-bottom: 3.5rem; }
.f5-proof__title {
  font-family: var(--f5-serif);
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  font-weight: 420;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}
.f5-proof__title em { font-style: italic; color: var(--f5-blue); }
.f5-proof__sub { color: var(--f5-ink-soft); max-width: 36rem; }

.f5-proof__grid {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 4.5rem;
}
@media (min-width: 900px) {
  .f5-proof__grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: start; }
}

/* General notes — the numbered notes panel every real drawing carries */
.f5-notes {
  border: 1px solid var(--f5-line);
  background: rgba(243, 242, 236, 0.75);
}
.f5-notes__title {
  margin: 0;
  padding: 0.75rem 1.4rem;
  border-bottom: 1px solid var(--f5-line);
  font-family: var(--f5-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--f5-ink-soft);
}
.f5-notes__list {
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  counter-reset: f5-note;
}
.f5-notes__list li {
  position: relative;
  counter-increment: f5-note;
  padding: 1rem 1.4rem 1rem 3.6rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--f5-ink-soft);
}
.f5-notes__list li + li { border-top: 1px solid var(--f5-line-soft); }
.f5-notes__list li::before {
  content: counter(f5-note, decimal-leading-zero);
  position: absolute;
  left: 1.4rem;
  top: 1.25rem;
  font-family: var(--f5-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--f5-blue);
}

/* Exhibit A — the three drafts of this page */
.f5-exhibit__ref {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--f5-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--f5-blue);
}
.f5-exhibit__title {
  font-family: var(--f5-serif);
  font-size: 1.4rem;
  font-weight: 480;
  font-optical-sizing: auto;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.f5-exhibit__text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--f5-ink-soft);
  max-width: 30rem;
  margin-bottom: 1.5rem;
}

.f5-drafts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.f5-drafts__link {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--f5-line);
  background: rgba(243, 242, 236, 0.75);
  transition: transform 0.3s var(--f5-ease), box-shadow 0.3s var(--f5-ease),
              border-color 0.3s var(--f5-ease-quart);
}
a.f5-drafts__link:hover {
  border-color: var(--f5-blue);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(36, 48, 223, 0.18);
}
.f5-drafts__item--current .f5-drafts__link {
  border: 1px dashed var(--f5-blue-soft);
  background: rgba(36, 48, 223, 0.04);
}

/* Miniature sheet swatches — an abstract of each edition's ground & accent */
.f5-drafts__swatch {
  position: relative;
  flex: none;
  width: 64px;
  height: 44px;
  border: 1px solid var(--f5-line);
  overflow: hidden;
}
.f5-drafts__swatch i { position: absolute; left: 8px; }
.f5-drafts__swatch i:nth-child(1) { top: 9px; width: 30px; height: 4px; }
.f5-drafts__swatch i:nth-child(2) { top: 19px; width: 40px; height: 2px; opacity: 0.55; }
.f5-drafts__swatch i:nth-child(3) { top: 27px; width: 8px; height: 8px; border-radius: 50%; }

.f5-drafts__swatch--45 { background: #faf9f7; }
.f5-drafts__swatch--45 i:nth-child(1) { background: #0d0d0d; }
.f5-drafts__swatch--45 i:nth-child(2) { background: #6b6b6b; }
.f5-drafts__swatch--45 i:nth-child(3) { background: #e8573f; }

.f5-drafts__swatch--48 { background: #0d0d0d; border-color: #0d0d0d; }
.f5-drafts__swatch--48 i:nth-child(1) { background: #f4f1ea; }
.f5-drafts__swatch--48 i:nth-child(2) { background: #9a948a; }
.f5-drafts__swatch--48 i:nth-child(3) { background: #ff5436; }

.f5-drafts__swatch--f5 {
  background-color: #f3f2ec;
  background-image:
    linear-gradient(var(--f5-grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--f5-grid-strong) 1px, transparent 1px);
  background-size: 8px 8px;
}
.f5-drafts__swatch--f5 i:nth-child(1) { background: #14161a; }
.f5-drafts__swatch--f5 i:nth-child(2) { background: #6e7177; }
.f5-drafts__swatch--f5 i:nth-child(3) { background: #2430df; border-radius: 0; }

.f5-drafts__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.f5-drafts__ref {
  font-family: var(--f5-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f5-ink-faint);
}
.f5-drafts__name {
  font-family: var(--f5-serif);
  font-size: 1.05rem;
  font-weight: 480;
  font-optical-sizing: auto;
  color: var(--f5-ink);
}
.f5-drafts__arrow {
  margin-left: auto;
  font-family: var(--f5-mono);
  color: var(--f5-ink-faint);
  transition: transform 0.3s var(--f5-ease), color 0.3s var(--f5-ease-quart);
}
a.f5-drafts__link:hover .f5-drafts__arrow {
  color: var(--f5-blue);
  transform: translateX(3px);
}
.f5-drafts__stamp {
  margin-left: auto;
  flex: none;
  padding: 0.3rem 0.5rem;
  border: 1px solid currentColor;
  font-family: var(--f5-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f5-blue);
  transform: rotate(-2deg);
}

/* The record — essay on file + surveyor's tallies */
.f5-proof__record {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .f5-proof__record { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: stretch; }
}

.f5-doc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--f5-ink);
  background: #fbfaf5;
  transition: transform 0.3s var(--f5-ease), box-shadow 0.3s var(--f5-ease);
}
a.f5-doc:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--f5-ink);
}
.f5-doc__strip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--f5-line);
  font-family: var(--f5-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f5-ink-faint);
}
.f5-doc__headline {
  display: block;
  padding: 2rem 1.5rem 0.9rem;
  font-family: var(--f5-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 420;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--f5-ink);
}
.f5-doc__headline em { font-style: italic; color: var(--f5-blue); }
.f5-doc__text {
  display: block;
  padding: 0 1.5rem 1.6rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--f5-ink-soft);
  max-width: 32rem;
}
.f5-doc__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--f5-line);
  font-family: var(--f5-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f5-blue);
}
.f5-doc__cta svg { width: 14px; height: 14px; transition: transform 0.3s var(--f5-ease); }
a.f5-doc:hover .f5-doc__cta svg { transform: translate(2px, -2px); }

.f5-stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--f5-ink);
  align-content: start;
}
.f5-stat {
  display: flex;
  flex-direction: column-reverse;
  /* column-reverse counts from the bottom, so flex-end pins rows to the top —
     numbers stay on one baseline even when a neighbour's label wraps. */
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1.4rem 0 1.5rem;
  border-bottom: 1px solid var(--f5-line-soft);
}
.f5-stat:nth-child(odd) { border-right: 1px solid var(--f5-line-soft); padding-right: 1.3rem; }
.f5-stat:nth-child(even) { padding-left: 1.3rem; }
.f5-stat__num {
  margin: 0;
  font-family: var(--f5-serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 420;
  font-optical-sizing: auto;
  line-height: 1;
  color: var(--f5-ink);
}
.f5-stat__num span { color: var(--f5-blue); }
.f5-stat__label {
  font-family: var(--f5-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--f5-ink-faint);
}

/* Capabilities — schedule of parts ----------------------------------------- */
.f5-caps {
  position: relative;
  padding: 7rem 0 9rem;
  border-top: 1px solid var(--f5-line-soft);
}

.f5-caps__header { max-width: 44rem; margin-bottom: 4rem; }
.f5-caps__title {
  font-family: var(--f5-serif);
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  font-weight: 420;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}
.f5-caps__title em { font-style: italic; color: var(--f5-blue); }
.f5-caps__sub { color: var(--f5-ink-soft); max-width: 34rem; }

/* Bill of materials table */
.f5-bom { border-bottom: 1px solid var(--f5-line); }

.f5-bom__head {
  display: none;
  padding: 0 0 0.8rem;
  border-bottom: 2px solid var(--f5-ink);
  font-family: var(--f5-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--f5-ink-soft);
}

.f5-bom__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px;
  grid-template-areas:
    'ref    arrow'
    'name   arrow'
    'desc   desc'
    'spec   spec';
  gap: 0.5rem 1rem;
  padding: 1.7rem 0;
  border-top: 1px solid var(--f5-line-soft);
  transition: background-color 0.3s var(--f5-ease-quart);
}
.f5-bom__head + .f5-bom__row { border-top: 2px solid var(--f5-ink); }

@media (min-width: 900px) {
  .f5-bom__head,
  .f5-bom__row {
    display: grid;
    grid-template-columns: 100px 1.05fr 1.3fr 0.9fr 44px;
    gap: 2rem;
    align-items: baseline;
  }
  .f5-bom__row {
    grid-template-areas: 'ref name desc spec arrow';
    padding: 2rem 0;
  }
  /* The header row already draws the heavy rule */
  .f5-bom__head + .f5-bom__row { border-top: none; }
}
.f5-bom__row:hover { background-color: rgba(36, 48, 223, 0.035); }

.f5-bom__ref {
  grid-area: ref;
  font-family: var(--f5-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--f5-ink-faint);
  transition: color 0.3s var(--f5-ease-quart);
}
.f5-bom__row:hover .f5-bom__ref { color: var(--f5-blue); }

.f5-bom__name {
  grid-area: name;
  font-family: var(--f5-serif);
  font-size: 1.5rem;
  font-weight: 480;
  font-optical-sizing: auto;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
/* The whole row is the click target: the title link stretches over it, so AT
   announces a concise link while the visual affordance covers the row. */
.f5-bom__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.f5 .f5-bom__link:focus-visible {
  outline: none;
}
.f5 .f5-bom__link:focus-visible::after {
  outline: 2px solid var(--f5-blue);
  outline-offset: -2px;
}

.f5-bom__desc {
  grid-area: desc;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--f5-ink-soft);
}

.f5-bom__spec {
  grid-area: spec;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}

.f5-chip {
  font-family: var(--f5-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--f5-ink-soft);
  white-space: nowrap;
}
.f5-chip::before { content: '[ '; color: var(--f5-blue-soft); }
.f5-chip::after { content: ' ]'; color: var(--f5-blue-soft); }

.f5-bom__arrow {
  grid-area: arrow;
  justify-self: end;
  align-self: start;
  display: inline-flex;
  color: var(--f5-ink-faint);
  transition: color 0.3s var(--f5-ease-quart), transform 0.3s var(--f5-ease);
}
.f5-bom__arrow svg { width: 20px; height: 20px; }
.f5-bom__row:hover .f5-bom__arrow {
  color: var(--f5-blue);
  transform: translate(3px, -3px);
}
@media (min-width: 900px) { .f5-bom__arrow { align-self: baseline; } }

/* Contact — the blueprint inversion ---------------------------------------- */
.f5-contact {
  position: relative;
  padding: 8rem 0 9rem;
  background-color: var(--f5-blue-deep);
  /* White drafting grid on ultramarine: the blueprint */
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, transparent 55%),
    linear-gradient(rgba(243, 242, 236, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 242, 236, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(243, 242, 236, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 242, 236, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--f5-bp-text);
}

.f5-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 900px) {
  .f5-contact__grid { grid-template-columns: 1fr 1fr; gap: 5.5rem; align-items: start; }
}

.f5-contact__title {
  font-family: var(--f5-serif);
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  font-weight: 420;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 1.6rem;
}
.f5-contact__title em { font-style: italic; }

.f5-contact__text {
  max-width: 30rem;
  color: var(--f5-bp-dim);
  line-height: 1.75;
  margin-bottom: 2.4rem;
}

.f5-contact__email {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--f5-bp-line);
  font-family: var(--f5-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--f5-bp-text);
  transition: border-color 0.3s var(--f5-ease-quart), gap 0.3s var(--f5-ease);
}
.f5-contact__email svg { width: 16px; height: 16px; }
.f5-contact__email:hover { border-color: var(--f5-bp-text); gap: 1rem; }

/* Title-block form */
.f5-form {
  border: 1px solid var(--f5-bp-line);
  background: rgba(0, 0, 16, 0.12);
}

.f5-form__strip {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.5rem;
  padding: 0.7rem 1.2rem;
  border-bottom: 1px solid var(--f5-bp-line);
  font-family: var(--f5-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--f5-bp-faint);
}
.f5-form__strip span:first-child { color: var(--f5-bp-text); }
@media (max-width: 380px) {
  .f5-form__strip { grid-template-columns: 1fr auto; gap: 1rem; }
  .f5-form__strip span:nth-child(2) { display: none; }
}

.f5-field {
  position: relative;
  border-bottom: 1px solid var(--f5-bp-line-soft);
  transition: background-color 0.3s var(--f5-ease-quart), box-shadow 0.3s var(--f5-ease-quart);
}
.f5-field:focus-within {
  background-color: rgba(243, 242, 236, 0.06);
  box-shadow: inset 0 0 0 1px var(--f5-bp-text);
}

.f5-field__label {
  position: absolute;
  top: 0.7rem;
  left: 1.2rem;
  font-family: var(--f5-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f5-bp-faint);
  transition: color 0.3s var(--f5-ease-quart);
  pointer-events: none;
}
.f5-field:focus-within .f5-field__label { color: var(--f5-bp-text); }

.f5-field__input {
  display: block;
  width: 100%;
  padding: 2rem 1.2rem 0.9rem;
  background: transparent;
  border: none;
  font-family: var(--f5-sans);
  font-size: 1rem;
  color: var(--f5-bp-text);
  caret-color: var(--f5-bp-text);
}
.f5-field__input:focus { outline: none; } /* replaced by the .f5-field:focus-within ring */
.f5-field__input--area { min-height: 150px; resize: vertical; }

/* Autofill: WebKit/Blink force a pale fill that would break the blueprint —
   paint it back with an inset shadow (the one mechanism they respect). */
.f5-field__input:-webkit-autofill,
.f5-field__input:-webkit-autofill:hover,
.f5-field__input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--f5-blue-deep) !important;
  -webkit-text-fill-color: var(--f5-bp-text) !important;
  caret-color: var(--f5-bp-text);
}
/* Firefox tints via a UA filter; neutralise it and repaint */
.f5-field__input:autofill {
  filter: none;
  box-shadow: inset 0 0 0 1000px var(--f5-blue-deep);
}

/* Scoped under .f5 to out-rank the `.f5 button { background: none }` reset */
.f5 .f5-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1.2rem;
  background-color: var(--f5-paper);
  color: var(--f5-blue-deep);
  font-family: var(--f5-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--f5-ease-quart), color 0.3s var(--f5-ease-quart),
              gap 0.3s var(--f5-ease);
}
.f5 .f5-form__submit svg { width: 15px; height: 15px; }
.f5 .f5-form__submit:hover {
  background-color: var(--f5-ink);
  color: var(--f5-paper);
  gap: 1.1rem;
}
.f5 .f5-form__submit:focus-visible {
  outline: 2px solid var(--f5-bp-text);
  outline-offset: -5px;
}

.f5-contact__note {
  margin-top: 1rem;
  font-family: var(--f5-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--f5-bp-faint);
}

/* Footer — title block ------------------------------------------------------
   A real drawing title block: three cells divided by hairline rules, the
   signature credit (markup in footer.php) centred between them. */
body.fable-5 .site-footer {
  border-top: 1px solid var(--f5-ink);
  background: var(--f5-paper);
}
/* Clear the bottom-docked switcher pill */
@media (max-width: 1359.98px) {
  body.fable-5 .site-footer { padding-bottom: 4.25rem; }
}
body.fable-5 .site-footer .container {
  width: 100%;
  max-width: var(--f5-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  box-sizing: border-box;
  font-family: var(--f5-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.fable-5 .footer-copy,
body.fable-5 .footer-credit,
body.fable-5 .site-footer .footer-links {
  margin: 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--f5-line-soft);
}
body.fable-5 .footer-copy { color: var(--f5-ink-soft); border-top: none; }
body.fable-5 .footer-credit { color: var(--f5-blue); }
@media (min-width: 768px) {
  body.fable-5 .site-footer .container {
    padding: 0 2.5rem;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
  }
  body.fable-5 .footer-copy,
  body.fable-5 .footer-credit,
  body.fable-5 .site-footer .footer-links {
    display: flex;
    align-items: center;
    border-top: none;
    padding: 1.15rem 0;
  }
  body.fable-5 .footer-credit {
    justify-content: center;
    /* flex drops the whitespace text nodes between the bullet spans */
    gap: 0.5em;
    padding: 1.15rem 2.2rem;
    border-left: 1px solid var(--f5-line);
    border-right: 1px solid var(--f5-line);
  }
  body.fable-5 .site-footer .footer-links { justify-content: flex-end; }
}
body.fable-5 .footer-links a {
  color: var(--f5-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--f5-line);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
body.fable-5 .footer-links a:hover { color: var(--f5-blue); border-color: var(--f5-blue); }

/* HUD — live cursor coordinate readout (created by fable5.js) ---------------
   Bottom-right: the bottom-left corner belongs to the hero CTA on short
   viewports, and the footer's privacy link sits right (HUD parks before it). */
.f5-hud {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 290;
  display: none;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0.8rem;
  background: rgba(243, 242, 236, 0.88);
  border: 1px solid var(--f5-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--f5-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f5-ink-soft);
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease;
}
.f5-hud b {
  font-weight: 600;
  color: var(--f5-blue);
  font-variant-numeric: tabular-nums;
}
.f5-hud.is-parked { opacity: 0; }
@media (min-width: 1200px) {
  .f5-hud { display: flex; animation: f5-fade 0.8s ease 1.2s backwards; }
}

/* Scroll reveal ------------------------------------------------------------- */
.f5 [data-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--f5-ease), transform 0.8s var(--f5-ease);
}
.f5 [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.f5 [data-animate-delay='2'] { transition-delay: 0.12s; }
.f5 [data-animate-delay='3'] { transition-delay: 0.24s; }
.f5 [data-animate-delay='4'] { transition-delay: 0.36s; }

/* Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.fable-5 *,
  body.fable-5 *::before,
  body.fable-5 *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .f5 [data-animate] { opacity: 1; transform: none; }
  .f5-hero__word { transform: none; }
  .f5-hero__dim-line { transform: scaleX(1); }
  .f5-hero__dim-label { opacity: 1; }
  .f5-schematic__ring { stroke-dashoffset: 0; }
  .f5-schematic__dash,
  .f5-schematic__dim,
  .f5-schematic__pt { opacity: 1; }
  .f5-hud { display: none !important; }
}