/* ──────────────────────────────────────────────────────────────────────
   encounter.bio — brand stylesheet
   v47 brand canon: Notion 361c1413338481bc915df5a55ee8fb25
   Single chassis. Same hero, same H2, same widths on every page.
   ────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CROSS-DOCUMENT VIEW TRANSITIONS ──────────────────────────────────
   Nav and footer persist across navigations; body cross-fades. */
@view-transition { navigation: auto; }
.nav    { view-transition-name: site-nav; }
.footer { view-transition-name: site-footer; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease;
}
::view-transition-group(site-nav),
::view-transition-group(site-footer),
::view-transition-old(site-nav),
::view-transition-new(site-nav),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none;
  mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0s; }
}

/* ── RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

html, body { background: #fff; color: #1a1a1a; }
body {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 400; font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

/* ── TOKENS ────────────────────────────────────────────────────────── */
:root {
  --wordmark:    #4D4843;
  --observer:    #2E5E3A;
  --pot:         #1B5BD8;
  --construction:#B77800;
  --encounter:   #D63A1F;
  --conservation:#924D35;
  --ink:         #1a1a1a;
  --ink-2:       #4a4a4a;
  --ink-3:       #7a7a7a;
  --line:        #ececea;
}

.mono  { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.serif { font-family: 'Familjen Grotesk', sans-serif; }

/* ──────────────────────────────────────────────────────────────────────
   NAV  (identical on every page, persists across navigations)
   ────────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-lockup { display: flex; align-items: center; line-height: 0; }
.nav-lockup svg { height: 42px; width: auto; display: block; }
.nav-links {
  display: flex; gap: 32px;
  font-weight: 500; font-size: 14px; color: var(--ink-2);
}
.nav-links a { transition: color 120ms ease; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-current { color: var(--ink); font-weight: 600; }

.nav-strip { display: flex; height: 4px; width: 100%; }
.nav-strip .seg { flex: 1; height: 100%; }
.nav-strip .seg.pot          { background: var(--pot); }
.nav-strip .seg.construction { background: var(--construction); }
.nav-strip .seg.encounter    { background: var(--encounter); }
.nav-strip .seg.conservation { background: var(--conservation); }
.nav-strip .seg.observer     { background: var(--observer); }

/* ── Mobile hamburger ─────────────────────────────────────────────────
   On wide screens the hamburger is hidden and the links sit inline.
   Below 800px the links collapse and the hamburger appears. Toggling
   the hidden checkbox via the <label> opens a dropdown beneath the
   colour strip. No JS — pure CSS checkbox hack. Checkbox state resets
   on every page load (intentional, so a tap-to-navigate also closes
   the menu naturally). ────────────────────────────────────────────── */
.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.nav-hamburger {
  display: none;   /* hidden on desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 150ms ease;
  transform-origin: 50% 50%;
}

@media (max-width: 800px) {
  .nav-inner { padding: 14px 24px; gap: 16px; }
  .nav-lockup svg { height: 32px; }

  .nav-hamburger { display: flex; }

  /* Hide nav-links by default on mobile; the checkbox toggles them open. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;     /* below the .nav-inner + .nav-strip */
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  .nav-links a:last-child { border-bottom: none; }

  #nav-toggle:checked ~ .nav-inner .nav-links { display: flex; }

  /* Hamburger → X morph when open */
  #nav-toggle:checked ~ .nav-inner .nav-hamburger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  #nav-toggle:checked ~ .nav-inner .nav-hamburger span:nth-child(2) {
    opacity: 0;
  }
  #nav-toggle:checked ~ .nav-inner .nav-hamburger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* ──────────────────────────────────────────────────────────────────────
   HERO CHASSIS  (one rule set; every page uses it)
   Constrained to 1280px so the title left edge aligns with the logo on
   every page. Two variants automatically:
     - .hero with no .hero-visual child  → single column
     - .hero with a .hero-visual child   → two-column layout, image on right
   ────────────────────────────────────────────────────────────────────── */
.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 110px 40px 80px;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: start;
}
.hero:has(.hero-visual) .hero-inner {
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
@media (max-width: 900px) {
  .hero:has(.hero-visual) .hero-inner { grid-template-columns: 1fr; }
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero-title {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.030em;
  color: var(--ink);
  margin: 0 0 32px;
}

.hero-lede {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 620px;
}
.hero-lede strong { color: var(--ink); font-weight: 600; }
.hero-lede + .hero-lede { margin-top: 0; }

.hero-visual {
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.hero-visual img {
  width: 100%; height: 100%; object-fit: cover;
}

.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 120ms ease, border-color 120ms ease;
}
.hero-cta:hover { color: var(--encounter); border-bottom-color: var(--encounter); }
.hero-cta-arrow { display: inline-block; transition: transform 120ms ease; }
.hero-cta:hover .hero-cta-arrow { transform: translateX(4px); }

@media (max-width: 700px) {
  .hero { padding: 80px 24px 64px; }
}

/* ──────────────────────────────────────────────────────────────────────
   SECTION CHASSIS  (one rule set; every page uses it)
   ────────────────────────────────────────────────────────────────────── */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px;
  border-top: 1px solid var(--line);
}
.section-h2 {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 720px;
  margin: 0 auto 36px;
}
@media (max-width: 700px) {
  .section { padding: 56px 24px; }
  .section-h2 { font-size: 34px; }
}

/* prose inside sections */
.prose {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.prose p { margin: 0 0 20px; }
.prose p:last-child { margin-bottom: 0; }
.prose p strong { font-weight: 600; }
.prose p em { font-style: italic; }
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.prose a:hover { text-decoration-color: var(--encounter); color: var(--encounter); }

/* founder row — portrait + bio inside the standard section chassis */
.founder-figure {
  margin: 0;
  max-width: 280px;
}
.founder-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  aspect-ratio: 500 / 640;
  object-fit: cover;
}
.founder-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.founder-role a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.founder-role a:hover { color: var(--encounter); text-decoration-color: var(--encounter); }

/* two-column prose grid for "who we work with" / "what we offer" */
.section-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
@media (max-width: 900px) {
  .section-cols-2 { grid-template-columns: 1fr; gap: 48px; }
}

/* ──────────────────────────────────────────────────────────────────────
   CTA BAND  (soft, every page)
   ────────────────────────────────────────────────────────────────────── */
.cta-band {
  border-top: 1px solid var(--line);
}
.cta-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 40px 96px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}
@media (max-width: 800px) {
  .cta-inner { grid-template-columns: 1fr; gap: 24px; padding: 56px 24px 72px; }
}
.cta-text-block { max-width: 720px; }
.cta-text {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 20px;
}
.cta-reasons {
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.cta-reasons li { margin: 0 0 6px; }
.cta-reasons li:last-child { margin-bottom: 0; }
.cta-link {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 24px);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
  margin-top: 8px;
}
.cta-link:hover { color: var(--encounter); border-bottom-color: var(--encounter); }

/* ──────────────────────────────────────────────────────────────────────
   IMAGE BAND  (atmospheric, full-bleed)
   ────────────────────────────────────────────────────────────────────── */
.image-band { width: 100%; height: 320px; overflow: hidden; }
.image-band img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .image-band { height: 220px; }
}

/* ──────────────────────────────────────────────────────────────────────
   DOMAIN GRID  (home + domains page)
   ────────────────────────────────────────────────────────────────────── */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 800px) {
  .domain-grid { grid-template-columns: 1fr; }
}
.domain-card {
  display: block;
  padding: 32px 32px 28px;
  border: 1px solid var(--line);
  background: #fff;
  transition: border-color 120ms ease, transform 120ms ease;
}
.domain-card:hover { border-color: var(--ink); }
.domain-card-icon {
  width: 36px; height: 36px; margin-bottom: 18px;
  color: var(--ink-2);
}
.domain-card-icon svg { width: 100%; height: 100%; }
.domain-card-title {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
}
.domain-card-q {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.domain-card-meta {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: lowercase;
}
.domain-card.is-lead { border-color: var(--ink); }

/* Regime-coloured domain cards — full background, white text.
   Icons inherit colour via stroke="currentColor". */
.domain-card[class*="regime-"] {
  color: #fff;
  border-color: transparent;
}
.domain-card[class*="regime-"] .domain-card-title { color: #fff; }
.domain-card[class*="regime-"] .domain-card-q { color: rgba(255, 255, 255, 0.88); }
.domain-card[class*="regime-"] .domain-card-icon { color: #fff; }
.domain-card[class*="regime-"] .domain-card-meta { color: rgba(255, 255, 255, 0.72); }
.domain-card[class*="regime-"]:hover {
  filter: brightness(1.08);
  border-color: transparent;
}

.domain-card.regime-pot          { background: var(--pot); }
.domain-card.regime-construction { background: var(--construction); }
.domain-card.regime-encounter    { background: var(--encounter); }
.domain-card.regime-conservation { background: var(--conservation); }
.domain-card.regime-observer     { background: var(--observer); }
.domain-card.regime-wordmark     { background: var(--wordmark); }

/* ──────────────────────────────────────────────────────────────────────
   ARTICLE LIST  (articles page + home articles preview)
   ────────────────────────────────────────────────────────────────────── */
.article-list { display: flex; flex-direction: column; }
.article-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.article-row:last-child { border-bottom: 1px solid var(--line); }
.article-row-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-3);
  padding-top: 3px;
}
.article-row-title {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 8px;
}
.article-row-summary {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 720px;
}
.article-row-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-transform: lowercase;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.tag.paper      { border-color: var(--encounter); color: var(--encounter); }
.tag.essay      { border-color: var(--construction); color: var(--construction); }
.tag.prediction { border-color: var(--pot); color: var(--pot); }
.tag.read       { border-color: var(--conservation); color: var(--conservation); }
.tag.open       { border-color: var(--observer); color: var(--observer); }

@media (max-width: 800px) {
  .article-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .article-row-meta { flex-direction: row; align-items: flex-start; }
}

/* ──────────────────────────────────────────────────────────────────────
   ARTICLE DETAIL PAGE
   ────────────────────────────────────────────────────────────────────── */
.article-detail-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px 100px;
}
.article-detail-inner {
  max-width: 720px;     /* readable prose column inside the 1280 chassis */
  margin: 0 auto;       /* centre the prose column horizontally */
}
.article-detail-back {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 32px;
}
.article-detail-back:hover { color: var(--ink); }
.article-detail-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.article-detail-title {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 24px;
}
.article-detail-summary {
  font-family: 'Inter Tight', sans-serif;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
  margin: 0 0 36px;
}
.article-detail-doi {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-2);
  padding: 12px 0;
  border-top: 1px solid var(--line);
  margin-bottom: 48px;
}
.article-detail-doi a { color: var(--ink); border-bottom: 1px solid var(--line); }
.article-detail-body {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}
.article-detail-body h2 {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 56px 0 18px;
  color: var(--ink);
}
.article-detail-body h3 {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  margin: 36px 0 12px;
  color: var(--ink);
}
.article-detail-body p { margin: 0 0 22px; }
.article-detail-body p strong { font-weight: 600; }
.article-detail-body p em { font-style: italic; }
.article-detail-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Tables inside an article body */
.article-detail-body .table-wrap {
  margin: 32px 0 36px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-detail-body table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.article-detail-body table th,
.article-detail-body table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
}
.article-detail-body table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 10px;
}
.article-detail-body table tr:last-child td { border-bottom: none; }
.article-detail-body table td:first-child {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  color: var(--ink);
}
/* Regime-coloured first-column cells when a row carries a regime class */
.article-detail-body table tr.r-pot          td:first-child { color: var(--pot); }
.article-detail-body table tr.r-construction td:first-child { color: var(--construction); }
.article-detail-body table tr.r-encounter    td:first-child { color: var(--encounter); }
.article-detail-body table tr.r-conservation td:first-child { color: var(--conservation); }

/* Figures inside an article body */
.article-detail-body figure {
  margin: 40px 0 44px;
  text-align: center;
}
.article-detail-body figure img,
.article-detail-body figure svg,
.article-detail-body figure object {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.article-detail-body figure figcaption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin-top: 14px;
  line-height: 1.5;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Horizontal rule between sections */
.article-detail-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 48px 0;
}

/* ──────────────────────────────────────────────────────────────────────
   DISSIPATIVE SYSTEMS — domain-specific extras
   ────────────────────────────────────────────────────────────────────── */
.ds-regime-table,
.ds-singularity-table {
  margin: 32px auto 36px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: 720px;
}
.ds-regime-row,
.ds-singularity-row {
  display: grid;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  align-items: center;
}
.ds-regime-row { grid-template-columns: 1fr auto; gap: 24px; }
.ds-singularity-row { grid-template-columns: 1.5fr 1fr 1.4fr; gap: 20px; }
.ds-regime-row:last-child,
.ds-singularity-row:last-child { border-bottom: none; }
.ds-regime-sig { color: var(--ink-2); }
.ds-regime-name {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.ds-regime-name.pot          { color: var(--pot); }
.ds-regime-name.construction { color: var(--construction); }
.ds-regime-name.encounter    { color: var(--encounter); }
.ds-regime-name.conservation { color: var(--conservation); }
.ds-cycle-line {
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 12px 0 24px;
  max-width: 720px;
}
.pot-fg          { color: var(--pot); }
.construction-fg { color: var(--construction); }
.encounter-fg    { color: var(--encounter); }
.conservation-fg { color: var(--conservation); }
.ds-question-list {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  margin: 24px auto 28px;
  padding-left: 24px;
  max-width: 720px;
}
.ds-question-list li { margin-bottom: 8px; }
@media (max-width: 700px) {
  .ds-singularity-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
}

/* Static SVG diagrams */
.ds-diagram-wrap {
  margin: 40px auto 64px;
  max-width: 720px;
}
.ds-diagram-wrap.wide {
  max-width: 100%;
}
.ds-diagram {
  width: 100%;
  height: auto;
  display: block;
}
.ds-diagram-caption {
  margin-top: 12px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 560px;
}

/* For diagrams that are radially symmetric (cycle wheel, spiral) — no
   clear left line to anchor the caption to. Center the SVG and caption. */
.ds-diagram-wrap.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ds-diagram-wrap.centered .ds-diagram {
  max-width: 480px;
}
/* For tall diagrams (e.g. the spiral, which has 2:3 aspect ratio).
   Cap width tighter so the diagram doesn't dominate vertically. */
.ds-diagram-wrap.centered.tall .ds-diagram {
  max-width: 280px;
}
.ds-diagram-wrap.centered .ds-diagram-caption {
  text-align: center;
}

/* Facts row: a short list of numeric statements with mono values */
.ds-facts {
  margin: 28px auto 12px;
  max-width: 720px;
  border-top: 1px solid var(--line);
}
.ds-fact {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.ds-fact-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ds-fact-text {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
@media (max-width: 600px) {
  .ds-fact { grid-template-columns: 1fr; gap: 4px; }
}

/* Standalone formula display — one line, centred, mono, prominent */
.ds-formula {
  margin: 28px auto;
  padding: 18px 24px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: #fafafa;
  border-left: 3px solid var(--ink);
  max-width: 720px;
}
.ds-formula-label {
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

/* ──────────────────────────────────────────────────────────────────────
   CYCLE HELIX VISUAL  (used on dissipative-systems hero)
   ────────────────────────────────────────────────────────────────────── */
.cycle-visual {
  width: 100%;
  height: 100%;
  min-height: 480px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cycle-visual #cycle-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 560px;
  max-height: 560px;
}
.cycle-visual-fallback {
  width: 100%;
  height: 100%;
  max-width: 560px;
  max-height: 560px;
  display: none;
  align-items: center;
  justify-content: center;
}
.cycle-visual-fallback svg { width: 100%; height: 100%; }

/* ──────────────────────────────────────────────────────────────────────
   FOOTER  (identical on every page, persists across navigations)
   ────────────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  background: #fff;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 40px 64px;
}
.footer-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}
.footer-lockup svg { height: 48px; width: auto; display: block; }
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-tagline {
  margin-top: 8px;
  margin-left: 64px;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  color: var(--ink-2);
}
.footer-nav-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  color: var(--ink-2);
}
.footer-nav-grid a:hover { color: var(--ink); }
@media (max-width: 800px) {
  .footer-row { grid-template-columns: 1fr; gap: 32px; }
  .footer-nav-grid { align-items: flex-start; }
  .footer-tagline { margin-left: 56px; font-size: 14px; }
}

/* ──────────────────────────────────────────────────────────────────────
   REGIME CARDS (dissipative-systems page · The four regimes)
   One card per regime; each card pairs an animated SVG tile with the
   regime's prose description. The animation IS the regime's character:
     - Pot           → 4-colour ring dissolves to invisible and back
     - Construction  → 4-colour ring rotates 90° quickly, then holds
     - Encounter     → uniform-colour ring cycles through the four
                       regime colours with each pulse
     - Conservation  → dots brighten in sequence around the ring
                       (the patrol sweep)
   ────────────────────────────────────────────────────────────────────── */

.regime-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 32px auto 16px;
  max-width: 720px;   /* match .prose width */
}

.regime-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
@media (max-width: 500px) {
  .regime-card { grid-template-columns: 1fr; gap: 16px; }
  .regime-card-anim { margin: 0 auto; }
}

.regime-card-anim {
  width: 160px;
  height: 160px;
  flex: 0 0 auto;
}
.regime-card-anim svg {
  width: 100%;
  height: 100%;
  display: block;
}

.regime-card-title {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 2px;
  line-height: 1.1;
}
.regime-card-working {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.regime-card-desc {
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.regime-card.is-pot          .regime-card-title { color: var(--pot); }
.regime-card.is-construction .regime-card-title { color: var(--construction); }
.regime-card.is-encounter    .regime-card-title { color: var(--encounter); }
.regime-card.is-conservation .regime-card-title { color: var(--conservation); }

/* Cross overlay shared by all four animations + static diagrams */
.regime-card-anim .cross line,
.change-unit .cross line,
.fractal-spiral .cross line {
  stroke: var(--ink-3);
  stroke-width: 1.2;
  opacity: 0.30;
}

/* Static diagrams on dissipative-systems that share the regime-tile shape —
   same coordinate system, larger and quiet. */
.ds-diagram-wrap.centered .change-unit,
.ds-diagram-wrap.centered .fractal-spiral { max-width: 380px; }

.fractal-spiral { color: var(--ink); }

/* ── Animation: POT — full dissolve and return ──────────────────────── */
.regime-card.is-pot .scaler {
  animation: regime-pot-dissolve 3s ease-in-out infinite;
}
@keyframes regime-pot-dissolve {
  0%, 12%   { opacity: 1; }
  50%       { opacity: 0; }
  88%, 100% { opacity: 1; }
}

/* ── Animation: CONSTRUCTION — quick 90° rotate, then hold ──────────── */
.regime-card.is-construction .rotator {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: regime-con-rotate 4s linear infinite;
}
@keyframes regime-con-rotate {
  0%   { transform: rotate(0deg);   }
  10%  { transform: rotate(90deg);  }
  25%  { transform: rotate(90deg);  }
  35%  { transform: rotate(180deg); }
  50%  { transform: rotate(180deg); }
  60%  { transform: rotate(270deg); }
  75%  { transform: rotate(270deg); }
  85%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

/* ── Animation: ENCOUNTER — pulse + colour cycle through 4 regimes ─── */
.regime-card.is-encounter .scaler {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: regime-enc-pulse 2s ease-in-out infinite;
}
.regime-card.is-encounter .dot {
  animation: regime-enc-colour 8s steps(4, end) infinite;
}
@keyframes regime-enc-pulse {
  0%, 100% { transform: scale(0.95); }
  50%      { transform: scale(1.04); }
}
@keyframes regime-enc-colour {
  0%   { fill: #1B5BD8; }
  25%  { fill: #B77800; }
  50%  { fill: #D63A1F; }
  75%  { fill: #924D35; }
}

/* ── Animation: CONSERVATION — sequential dot pulse (patrol sweep) ──── */
.regime-card.is-conservation .dot {
  opacity: 0.40;
  transform-origin: center;
  transform-box: fill-box;
  animation: regime-cons-dot 2.4s ease-in-out infinite;
}
@keyframes regime-cons-dot {
  0%   { opacity: 0.40; transform: scale(1);   }
  6%   { opacity: 1.00; transform: scale(1.45);}
  14%  { opacity: 0.40; transform: scale(1);   }
  100% { opacity: 0.40; transform: scale(1);   }
}
.regime-card.is-conservation .dot:nth-of-type(1)  { animation-delay: 0.00s; }
.regime-card.is-conservation .dot:nth-of-type(2)  { animation-delay: 0.15s; }
.regime-card.is-conservation .dot:nth-of-type(3)  { animation-delay: 0.30s; }
.regime-card.is-conservation .dot:nth-of-type(4)  { animation-delay: 0.45s; }
.regime-card.is-conservation .dot:nth-of-type(5)  { animation-delay: 0.60s; }
.regime-card.is-conservation .dot:nth-of-type(6)  { animation-delay: 0.75s; }
.regime-card.is-conservation .dot:nth-of-type(7)  { animation-delay: 0.90s; }
.regime-card.is-conservation .dot:nth-of-type(8)  { animation-delay: 1.05s; }
.regime-card.is-conservation .dot:nth-of-type(9)  { animation-delay: 1.20s; }
.regime-card.is-conservation .dot:nth-of-type(10) { animation-delay: 1.35s; }
.regime-card.is-conservation .dot:nth-of-type(11) { animation-delay: 1.50s; }
.regime-card.is-conservation .dot:nth-of-type(12) { animation-delay: 1.65s; }
.regime-card.is-conservation .dot:nth-of-type(13) { animation-delay: 1.80s; }
.regime-card.is-conservation .dot:nth-of-type(14) { animation-delay: 1.95s; }
.regime-card.is-conservation .dot:nth-of-type(15) { animation-delay: 2.10s; }
.regime-card.is-conservation .dot:nth-of-type(16) { animation-delay: 2.25s; }

@media (prefers-reduced-motion: reduce) {
  .regime-card .scaler,
  .regime-card .rotator,
  .regime-card .dot { animation: none !important; }
}