/* ============================================================
   Coherence Theory — Stage 1 stylesheet
   Clean, single source. No !important. No legacy patches.
   Variables at the top, components below, in source-order
   (which matches the order they appear in the rendered DOM).
   ============================================================ */

/* ------------------------------------------------------------
   Tokens
   ------------------------------------------------------------ */
:root {
  --navy:           #143d52;
  --navy-deep:      #0e2a3a;
  --teal:           #3a9ec2;
  --cream:          #fffdfa;
  --paper:          #f8f5ef;
  --grey-light:     #e6e1d8;
  --grey-mid:       #9a9085;
  --text:           #020a1a;   /* very dark blue, near-black */
  --text-soft:      #1a2a3e;   /* dark blue-grey for secondary descriptions */

  --maxw-page:      1480px;
  --maxw-content:   980px;

  --gap:            22px;
  --pad:            28px;

  --radius-md:      10px;
  --radius-lg:      18px;

  --shadow-md:      0 6px 24px rgba(20, 61, 82, 0.10);
  --shadow-lg:      0 18px 48px rgba(16, 47, 66, 0.11);

  --serif:          "EB Garamond", Georgia, serif;
  --sans:           "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--paper), var(--cream));
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--navy); }
p { margin: 0 0 12px; }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* ------------------------------------------------------------
   Site header — two persistent navigation bars.

   Bar 1 (.nav-primary): main site navigation, dark navy band
                         with brand and links on the LEFT.
                         White text. Tall, prominent.
   Bar 2 (.nav-framework): framework navigation. Sits directly
                         below Bar 1 as a slightly lighter blue
                         strip with white text. Reads as
                         secondary to Bar 1 but still persistent.

   On smaller viewports the link rows wrap onto multiple lines.
   No hamburger menu in this stage.
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   Three-bar header
   Bar 1: Brand + How to use this site
   Bar 2: Main theory navigation
   Bar 3: Reference links (lighter)
   ============================================================ */

.nav-bar1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 36px;
  background: var(--navy-deep, #0e2a3a);
}
.nav-bar1 .brand {
  font-family: var(--serif);
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav-how-to-use {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: rgba(58, 158, 194, 0.25);
  border: 1px solid rgba(58, 158, 194, 0.5);
  border-radius: 6px;
  padding: 5px 16px;
  transition: background 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
  margin-right: 120px;
}
.nav-how-to-use:hover {
  background: rgba(58, 158, 194, 0.4);
  border-color: var(--teal);
  color: #fff;
  text-decoration: none;
}
.nav-how-to-use.is-active {
  background: var(--teal);
  border-color: var(--teal);
}

.nav-bar2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 28px;
  padding: 8px 36px;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nav-bar2 a {
  font-family: var(--serif);
  color: rgba(255,255,255,0.90);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.nav-bar2 a:hover { color: #fff; text-decoration: none; }
.nav-bar2 a.is-active { color: #fff; border-bottom-color: var(--teal); }

.nav-bar3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 28px;
  padding: 6px 36px 9px;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.nav-bar3 a {
  font-family: var(--serif);
  color: rgba(255,255,255,0.55);
  font-size: 17px;
  font-weight: 400;
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.nav-bar3 a:hover { color: rgba(255,255,255,0.85); text-decoration: none; }
.nav-bar3 a.is-active { color: #fff; border-bottom-color: var(--teal); }

/* Bar 3 sub-dropdown */
.nav3-sub-item {
  position: relative;
  display: inline-block;
}
.nav3-sub-item > a {
  font-family: var(--serif);
  color: rgba(255,255,255,0.55);
  font-size: 17px;
  font-weight: 400;
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
}
.nav3-sub-item:hover > a,
.nav3-sub-item:focus-within > a {
  color: rgba(255,255,255,0.85);
  border-bottom-color: var(--teal);
}
.nav3-sub-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  padding: 6px 0;
  background: var(--navy-d);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.nav3-sub-item:hover > .nav3-sub-dropdown,
.nav3-sub-item:focus-within > .nav3-sub-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav3-sub-dropdown a {
  display: block;
  padding: 7px 18px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--teal-l);
  white-space: nowrap;
  border-bottom: none;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.nav3-sub-dropdown a:hover,
.nav3-sub-dropdown a:focus {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border-left-color: var(--teal-l);
}

/* Keep nav-primary as an alias for nav-bar2 for any legacy selectors */
.nav-primary { display: none; }

/* Bar 4: breadcrumb */
.nav-bar4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  padding: 4px 36px 5px;
  background: #0a1e2a;
  border-top: 1px solid rgba(255,255,255,0.05);
  min-height: 0;
  overflow: hidden;
}
.nav-bar4 a, .nav-bar4 span {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  white-space: nowrap;
}
.nav-bar4 a:hover { color: rgba(255,255,255,0.85); text-decoration: underline; }
.nav-bar4 .bc-sep { color: rgba(255,255,255,0.25); padding: 0 2px; }
.nav-bar4 .bc-current { color: rgba(255,255,255,0.75); }


.nav-framework {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-top: 0;
  padding: 0px 36px 12px;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-framework a {
  font-family: var(--serif);
  color: rgba(255, 255, 255, 0.90);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.nav-framework a:hover {
  color: #fff;
  text-decoration: none;
}
.nav-framework a.is-active {
  color: #fff;
  border-bottom-color: var(--teal);
}

/* Hover dropdown for framework-bar buttons that have child nodes.
   The button stays clickable (it links to the combined landing page);
   hovering or keyboard-focusing the item reveals a panel of child
   nodes that can each be clicked individually. focus-within keeps it
   keyboard-accessible. A small invisible bridge under the trigger
   stops the panel vanishing as the cursor crosses the gap. */
.nav-item {
  position: relative;
  display: inline-block;
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  margin-top: 8px;
  padding: 6px 0;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
/* Invisible hover bridge covering the margin gap above the panel. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 7px 18px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  border-bottom: none;
  border-left: 2px solid transparent;
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--teal);
}

/* Gap separator before a nav item */
.nav-primary-links .nav-gap-before {
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Nested sub-dropdown (second level) */
.nav-sub-item {
  position: relative;
  display: block;
}
.nav-sub-item > a {
  display: block;
  padding: 7px 18px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.nav-sub-item:hover > a,
.nav-sub-item:focus-within > a {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--teal);
}
.nav-sub-dropdown {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  margin-left: 4px;
  padding: 6px 0;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.nav-sub-item:hover > .nav-sub-dropdown,
.nav-sub-item:focus-within > .nav-sub-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Third-level sub-sub-dropdown */
.nav-sub-sub-item {
  position: relative;
  display: block;
}
.nav-sub-sub-item > a {
  display: block;
  padding: 7px 18px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.80);
  white-space: nowrap;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.nav-sub-sub-item:hover > a,
.nav-sub-sub-item:focus-within > a {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--teal-l);
}
.nav-sub-sub-dropdown {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 80;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  margin-left: 4px;
  padding: 6px 0;
  background: var(--navy-d);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.nav-sub-sub-dropdown a {
  color: var(--teal-l);
}
.nav-sub-sub-dropdown a:hover,
.nav-sub-sub-dropdown a:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--teal-l);
}


/* Narrow viewports: tighter padding so links don't crowd the edges. */
@media (max-width: 720px) {
  .nav-primary    { padding: 16px 20px; gap: 10px 22px; }
  .nav-framework  { padding: 4px 20px 10px; gap: 4px 18px; }
  .nav-primary-links { gap: 6px 18px; }
}

/* ------------------------------------------------------------
   App container
   ------------------------------------------------------------ */
#app {
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 12px 32px 32px 32px;
}

/* ------------------------------------------------------------
   Home page
   ------------------------------------------------------------ */
.home h1 {
  font-size: 42px;
  margin: 0 0 12px;
}
.home .lede {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--text-soft);
  max-width: 680px;
  line-height: 1.55;
  margin-bottom: 16px;
}

/* Hero */
.home-hero {
  padding: 8px 0 16px;
  margin-bottom: 0;
}
.home-hero-inner {
  display: block;
  max-width: 860px;
}
@media (max-width: 860px) {
  .home-hero-inner { grid-template-columns: 1fr; }
}
.home-hero-left {}
.home-hero .lede {
  margin-bottom: 12px;
}
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.home-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  transition: transform 0.12s ease, background 0.12s ease,
              border-color 0.12s ease, color 0.12s ease;
}
.home-btn-primary {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
}
.home-btn-primary:hover {
  background: var(--teal);
  border-color: var(--teal);
  text-decoration: none;
  transform: translateY(-1px);
}
.home-btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--grey-light);
}
.home-btn-ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Generic home section */
.home-section {
  margin-bottom: 28px;
}
.home-section-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 8px;
}
.home-section-lede {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 760px;
  margin: 0 0 24px;
}

.domain-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.domain-card {
  display: block;
  background: #fff;
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.domain-card:hover {
  transform: translateY(-3px);
  border-color: rgba(58, 158, 194, 0.45);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}
.domain-card h2 {
  font-size: 22px;
  margin: 0 0 8px;
}
.domain-card p {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0 0 16px;
}
.domain-card .explore {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.02em;
}

/* Hero tagline — sits between title and lede */
.home-hero-tagline {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
  margin: 0 0 10px;
  max-width: 680px;
}
.home-hero-subtitle {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--navy);
  opacity: 0.75;
  line-height: 1.5;
  margin: 0 0 18px;
  max-width: 700px;
  font-style: italic;
}

/* Static (non-link) domain card with summary, example, and two links */
.domain-card-static {
  cursor: default;
}
.domain-card-static:hover {
  transform: none;
  border-color: var(--grey-light);
  box-shadow: var(--shadow-md);
}
.domain-card-summary {
  font-family: var(--serif);
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 12px;
}
.domain-card-example {
  font-family: var(--serif);
  font-size: 14.5px;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0 0 16px;
}
.domain-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.domain-card-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.domain-card-link:hover {
  text-decoration: underline;
}

/* Home prose block (Core idea, Human coherence) */
.home-prose .home-section-lede {
  max-width: 820px;
  margin-bottom: 14px;
}
.home-prose .home-section-lede:last-of-type {
  margin-bottom: 0;
}
/* Boxed panel for prose sections — gives Core idea / Human coherence
   the same carded feel as the domain and framework boxes. */
.home-panel {
  background: #fff;
  border: 1px solid var(--grey-light);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-md);
  max-width: 860px;
}
.home-panel-text {
  font-family: var(--serif);
  font-size: 16.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 14px;
}
.home-panel-text:last-of-type {
  margin-bottom: 0;
}
.home-panel .home-inline-links {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--grey-light);
}
.home-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
}
.home-inline-link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
}
.home-inline-link:hover {
  text-decoration: underline;
}

/* Framework grid */
.home-framework-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  max-width: 860px;
  background: var(--grey-light);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.home-framework-item {
  display: block;
  background: #fff;
  padding: 20px 22px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s ease;
}
.home-framework-item:hover {
  background: rgba(58, 158, 194, 0.06);
  text-decoration: none;
}
.home-framework-num {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--teal);
  margin-bottom: 6px;
}
.home-framework-name {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.home-framework-desc {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Prominent back-link block (full-width pages, bottom of body) */
.lf-back-prominent {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--grey-light);
}
.lf-back-prominent-link {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.lf-back-prominent-link:hover {
  text-decoration: underline;
}

/* Inline connected-links block (arrow list in body, for full-width pages) */
.lf-connected-inline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 12px 0 24px;
  background: var(--grey-light);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lf-connected-inline-item {
  display: block;
  background: #fff;
  padding: 18px 22px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s ease;
}
.lf-connected-inline-item:hover {
  background: rgba(58, 158, 194, 0.06);
  text-decoration: none;
}
.lf-connected-inline-header {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 4px;
}
.lf-connected-inline-arrow {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--teal);
  flex-shrink: 0;
}
.lf-connected-inline-label {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
}
.lf-connected-inline-blurb {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.55;
}

/* "Deeper reading" sub-heading — smaller than h2, grouped tight with its list */
.long-form-page .lf-h2-deeper {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 28px 0 0;
}

/* Central question block — sits in the right column of the hero */
.home-central-question {
  padding: 20px 0 24px;
  max-width: 860px;
  border-top: 1px solid var(--grey-light);
  border-bottom: 1px solid var(--grey-light);
  margin-bottom: 28px;
}
.home-cq-heading {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  color: var(--teal);
  margin: 0 0 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-cq-body {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
  margin: 0 0 10px;
}
.home-cq-answer {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
}

/* Two-column intro grid */
.home-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--grey-light);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 860px;
}
@media (max-width: 640px) {
  .home-intro-grid { grid-template-columns: 1fr; }
}
.home-intro-item {
  display: block;
  background: #fff;
  padding: 14px 18px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s ease;
}
.home-intro-item:hover {
  background: rgba(58, 158, 194, 0.06);
  text-decoration: none;
}
.home-intro-item-header {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 4px;
}
.home-intro-arrow {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--teal);
  flex-shrink: 0;
}
.home-intro-label {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
}
.home-intro-desc {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--text-soft);
  margin: 0 0 4px;
  line-height: 1.45;
}
.home-intro-body {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.5;
}

/* Home intro arrow-list (kept for legacy) */
.home-arrow-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 860px;
  background: var(--grey-light);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.home-arrow-item {
  display: block;
  background: #fff;
  padding: 18px 22px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s ease;
}
.home-arrow-item:hover {
  background: rgba(58, 158, 194, 0.06);
  text-decoration: none;
}
.home-arrow-item-header {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 4px;
}
.home-arrow-glyph {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--teal);
  flex-shrink: 0;
}
.home-arrow-label {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
}
.home-arrow-desc {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: var(--text-soft);
  margin-bottom: 5px;
  line-height: 1.5;
}
.home-arrow-body {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.6;
}

/* Closing call-to-action */
.home-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 32px 34px;
}
.home-cta-text {
  max-width: 640px;
}
.home-cta-text h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}
.home-cta-text p {
  font-family: var(--serif);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  margin: 0;
}
.home-cta .home-btn-primary {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  white-space: nowrap;
}
.home-cta .home-btn-primary:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* ------------------------------------------------------------
   Page header (used by diagram + node + framework pages).

   Visually continuous with the sticky two-bar site-header above
   it: same solid navy, full-bleed to viewport edges, no top
   corner rounding. When the page is scrolled, the site-header
   stays sticky while the page-hdr scrolls away.

   Full-bleed implementation:
   - width: 100vw — element is the full viewport width
   - margin-left: 50% - 50vw — pulls it back to span viewport
     evenly while remaining inside the #app DOM context
   - inner content uses generous left padding to align with #app's
     content area below

   This approach (vs box-shadow/clip-path) is the most reliable
   across modern browsers. It may extend the document by
   scrollbar-width pixels horizontally, but browsers do not
   typically show a horizontal scrollbar for this case.

   The sticky positioning on .site-header above is preserved
   because we do NOT add overflow:hidden anywhere — overflow
   on any ancestor would break sticky. */
.page-hdr {
  position: relative;
  width: 100vw;
  margin-top: -12px;
  margin-right: 0;
  margin-bottom: 14px;
  margin-left: calc(50% - 50vw);
  background: var(--navy);
  color: #fff;
  /* Inner content aligned with the rest of the page: when the
     viewport is wider than the maxw-page, the title sits at the
     same x-position as the body content below. */
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: max(32px, calc((100vw - var(--maxw-page)) / 2 + 32px));
  padding-right: max(32px, calc((100vw - var(--maxw-page)) / 2 + 32px));
  border-radius: 0;
}
.page-hdr h1 {
  color: #fff;
  font-size: 26px;
  margin: 0;
}
.page-hdr p {
  font-family: var(--serif);
  font-size: 16px;
  color: #fff;
  margin: 4px 0 0;
  max-width: 760px;
}
/* Global "Back" link, injected by mount() at the top of every
   page (except home). Fixed at the top-right of the viewport so
   it remains visible while the page scrolls. Carries its own
   dark navy background so it stays readable when the page
   header has scrolled out of view. */
.global-back-wrap {
  position: fixed;
  top: 137px;
  right: 0;
  z-index: 100;
  background: var(--navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  border-bottom-left-radius: var(--radius-sm);
}
.global-back {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  padding: 16px 22px;
  letter-spacing: 0.02em;
  transition: color 0.12s ease, background 0.12s ease;
}
.global-back:hover {
  color: var(--teal);
  text-decoration: none;
}

.back-link {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.back-link:hover {
  color: #fff;
  text-decoration: none;
}

/* ------------------------------------------------------------
   Diagram page
   ------------------------------------------------------------ */
.diagram-layout {
  display: grid;
  grid-template-columns: minmax(680px, 2.4fr) minmax(220px, 0.6fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 980px) {
  .diagram-layout { grid-template-columns: 1fr; }
}

.diagram-stage { min-width: 0; }

/* Boxes rendered beneath the diagram (Definition, Role in the framework).
   Laid out side by side so each box is squarer rather than a wide, short
   strip. They wrap to a single column on narrow screens. */
.below-diagram {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: var(--gap);
  align-items: stretch;
}
.below-diagram .info-block {
  margin: 0;
  height: 100%;
  background: #fff;
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-md);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-md);
}
/* Cancel the inherited "stacked info-block" divider rule inside the grid
   so both side-by-side boxes look identical. */
.below-diagram .info-block + .info-block {
  margin-top: 0;
  padding-top: 18px;
  border-top: none;
}
@media (max-width: 720px) {
  .below-diagram { grid-template-columns: 1fr; }
}

/* Sub-headings within the RH "Reading the … diagram" list. */
.info-sub {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 12px 0 2px;
  color: var(--ink, #16384a);
}
.info-sub:first-of-type { margin-top: 8px; }

/* Compact label — value detail block (Human Regulatory System). */
.reg-detail { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--grey-light); }
.reg-row { margin: 2px 0; font-size: 0.9rem; }

/* The wrap contains ONLY the image and the hotspot buttons.
   No padding, no border between wrap and image, so the hotspot
   percentages resolve correctly relative to the visible image. */
.diagram-wrap {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  /* Establish the image as the full wrap. */
  line-height: 0;
}
.diagram-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hotspot buttons: absolutely positioned over the image.
   Invisible by design — the user clicks the visible diagram box
   directly, with no separate hover indicator. The cursor change
   to "pointer" is the only feedback that the area is clickable. */
.hotspot {
  position: absolute;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.hotspot:focus-visible {
  outline: 2px solid rgba(58, 158, 194, 0.85);
  outline-offset: 1px;
}
/* Line hotspots are thin strips over a diagram line. Visually
   invisible; cursor still changes to pointer on hover. */
.hotspot-line {
  /* Sits above the image but below box hotspots so a box wins
     overlapping clicks (boxes are more specific targets). */
  z-index: 1;
}
/* Hover highlight on line */
.hotspot-line::after {
  content: '';
  position: absolute;
  inset: -3px;
  background: rgba(58, 158, 194, 0.22);
  border: 1px solid rgba(58, 158, 194, 0.5);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.hotspot-line:hover::after,
.hotspot-line:focus-visible::after {
  opacity: 1;
}
/* Tooltip */
.hotspot-line::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 42, 58, 0.95);
  color: #fff;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid rgba(58,158,194,0.4);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 20;
}
.hotspot-line:hover::before,
.hotspot-line:focus-visible::before {
  opacity: 1;
}
.hotspot-box {
  z-index: 2;
}

/* Side panel */
.info-panel {
  background: #fff;
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-md);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-md);
}
.info-block + .info-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-light);
}
.info-block .info-h {
  font-size: 16px;
  margin: 0 0 6px;
}
.info-block p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 14px;
}
.info-block p:last-child { margin-bottom: 0; }
.info-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 8px;
}
.info-relations h3 {
  font-size: 18px;
  margin: 0 0 6px;
}

/* Stage 2: relationship panel content shown when a line is clicked.
   The panel switches from its placeholder state to .has-content
   once a relationship has been populated. */
.info-relations.has-content {
  background: linear-gradient(180deg, rgba(58, 158, 194, 0.04), transparent);
}
.rel-body .rel-type {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  background: rgba(58, 158, 194, 0.10);
  border: 1px solid rgba(58, 158, 194, 0.22);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0 0 12px;
}
.rel-body .rel-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 12px 0 4px;
}
.rel-body p {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 8px;
}
.rel-body ul {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 10px 18px;
  padding: 0;
  color: var(--text);
}
.rel-body .rel-summary {
  font-style: italic;
  border-left: 3px solid var(--teal);
  padding-left: 12px;
}

/* ------------------------------------------------------------
   Node page
   ------------------------------------------------------------ */
.node-page .node-body {
  max-width: var(--maxw-content);
}
.node-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.node-type {
  display: inline-block;
  background: rgba(58, 158, 194, 0.12);
  color: var(--navy);
  border: 1px solid rgba(58, 158, 194, 0.25);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.node-domains {
  font-size: 12px;
  color: var(--text-soft);
  font-style: italic;
}
.node-body h2 {
  font-size: 20px;
  margin: 24px 0 8px;
}
.node-body p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--text);
}
.node-body ul {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px 22px;
  padding: 0;
}
.node-body .summary {
  font-style: italic;
  border-left: 3px solid var(--navy);
  padding-left: 14px;
  margin-top: 4px;
}

/* ------------------------------------------------------------
   Node page — general (cross-domain) section
   ------------------------------------------------------------ */
.node-general {
  /* Just a logical group — no separate background.
     Content sits flush with the page like before. */
}

/* ------------------------------------------------------------
   Node page — per-domain sections
   One block per domain in which the node is visible. The section
   matching ?from=<domain> gets .active for a subtle highlight.
   No auto-scroll: the page always starts at the top.
   ------------------------------------------------------------ */
.node-domain-sections {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--grey-light);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.node-domain-section {
  background: #fff;
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-md);
  padding: 20px 22px 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.node-domain-section.active {
  border-color: rgba(58, 158, 194, 0.55);
  background: linear-gradient(180deg, rgba(58, 158, 194, 0.06), rgba(58, 158, 194, 0.02));
  box-shadow: 0 2px 14px rgba(58, 158, 194, 0.10);
}
.node-domain-section .domain-section-title {
  font-size: 18px;
  margin: 0 0 10px;
}
.node-domain-section.active .domain-section-title::after {
  content: " — you came from here";
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0.04em;
  font-style: normal;
}
.domain-section-body p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 10px;
}
.domain-section-body p:last-child { margin-bottom: 0; }
.domain-section-body .placeholder-note {
  font-size: 13px;
  color: var(--text-soft);
  font-style: italic;
}
.domain-section-body.is-placeholder {
  opacity: 0.78;
}

/* ------------------------------------------------------------
   Error page
   ------------------------------------------------------------ */
.error-page {
  background: #fff;
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-md);
  padding: 32px;
  max-width: var(--maxw-content);
}
.error-page h1 { font-size: 26px; margin: 0 0 8px; }
.error-page p { font-family: var(--serif); color: var(--text-soft); }

/* ------------------------------------------------------------
   Placeholder pages (Theory, Glossary, sections)
   Generic content-light pages used until the real content
   arrives in a later stage.
   ------------------------------------------------------------ */
.placeholder-page .placeholder-body {
  max-width: var(--maxw-content);
  padding-top: 4px;
}
.placeholder-page .placeholder-body p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.placeholder-page .placeholder-note {
  display: inline-block;
  background: rgba(58, 158, 194, 0.08);
  color: var(--text-soft);
  border: 1px solid rgba(58, 158, 194, 0.18);
  border-radius: 999px;
  padding: 4px 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-style: italic;
}
.placeholder-page .placeholder-back {
  font-size: 13px;
  font-weight: 500;
}

/* ------------------------------------------------------------
   Long-form page (Domains landing, future explanatory pages)
   Built by renderLongFormPage from a block list. Heading scale
   matches the rest of the site; body text uses the same dark
   blue as framework pages.

   Layout:
     - Default: single column, body fills the page width.
     - With side rail (data.useSideRail: true): two-column grid
       with sticky aside on the right holding ToC + Related list.
       Collapses to single column on narrow viewports.
   ------------------------------------------------------------ */
.long-form-page .long-form-body {
  max-width: var(--maxw-content);
  padding-top: 4px;
}

/* Two-column layout when a side rail is requested. The renderer
   adds .has-side-rail to .long-form-layout in that case. */
.long-form-layout.has-side-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 408px;
  gap: 32px;
  align-items: start;
}
.long-form-layout.has-side-rail .long-form-body {
  max-width: 820px;
  min-width: 0;
}
.long-form-layout.has-side-rail .long-form-side {
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1080px) {
  .long-form-layout.has-side-rail { grid-template-columns: 1fr; }
  .long-form-layout.has-side-rail .long-form-side { position: static; }
}

/* Side cards (mirror framework-page side-card styling) */
.long-form-page .lf-side-card {
  background: var(--paper);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-md);
  padding: 14px 16px 16px;
}
.long-form-page .lf-side-card h3 {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 10px;
}

/* On-this-page anchor list */
.long-form-page .lf-on-this-page {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.long-form-page .lf-otp-link {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
  padding: 1px 0 1px 10px;
  border-left: 2px solid transparent;
  margin-left: -10px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.long-form-page .lf-otp-link:hover {
  color: var(--navy);
  border-left-color: var(--teal);
  text-decoration: none;
}

/* Related-nodes list (mirrors framework-page styling) */
.long-form-page .lf-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================================
   Node-page V2 specifics — applied to the new node-page format
   (e.g. Centres). The page reuses .long-form-page styles, plus
   these extras for its side-rail cards:

   - "Deeper node" card: a single prominent link followed by a
     short blurb explaining what the linked page contains.
   - "Connected nodes" card: a list where each item is a link
     followed by a one-line explanation of the connection (richer
     than the plain "Related nodes" list used by long-form pages).
   ============================================================ */
.long-form-page .lf-side-deeper .np2-deeper-link {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  padding: 4px 0;
  margin-bottom: 6px;
  transition: color 0.12s ease;
}
.long-form-page .lf-side-deeper .np2-deeper-link::before {
  content: "\2192\00a0\00a0";
  color: var(--teal);
}
.long-form-page .lf-side-deeper .np2-deeper-link:hover {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.long-form-page .lf-side-deeper .np2-deeper-blurb {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}

/* Impressive full-width card for the site structure map link */
.long-form-page .lf-side-deeper.lf-side-deeper-featured {
  background: var(--navy);
  border: none;
  padding: 22px 20px 20px;
}
.long-form-page .lf-side-deeper.lf-side-deeper-featured .np2-deeper-link {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  padding: 0 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.long-form-page .lf-side-deeper.lf-side-deeper-featured .np2-deeper-link::before {
  color: var(--teal);
}
.long-form-page .lf-side-deeper.lf-side-deeper-featured .np2-deeper-link:hover {
  color: var(--teal);
}
.long-form-page .lf-side-deeper.lf-side-deeper-featured .np2-deeper-blurb {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  font-style: normal;
}

.long-form-page .np2-connected-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.long-form-page .np2-connected-item {
  margin: 0;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.long-form-page .np2-connected-item:hover {
  background: rgba(58, 158, 194, 0.07);
}
.long-form-page .np2-connected-link {
  display: inline-block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 0;
  margin-bottom: 4px;
  transition: color 0.12s ease;
}
.long-form-page .np2-connected-link::before {
  content: "\2192\00a0\00a0";
  color: var(--teal);
  text-decoration: none;
}
.long-form-page .np2-connected-link:hover {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.long-form-page .np2-connected-blurb {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}
.long-form-page .np2-connected-group {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 16px;
  margin-bottom: 6px;
}
.long-form-page .np2-connected-group:first-child {
  margin-top: 0;
}

/* ============================================================
   Deep-node side-rail cards
   ============================================================
   These cards appear on deep-node long-form pages, which use a
   structured side rail containing:
     - Orientation card (framework position, core function, key
       distinction, domain emphasis)
     - Back-to-summary card (single arrow link returning to the V2
       node page)
     - Connected nodes card (flat list of arrow links, no blurbs)
   ============================================================ */

/* Orientation card */
.long-form-page .lf-side-orientation .lf-orient-section {
  margin: 0 0 14px;
}
.long-form-page .lf-side-orientation .lf-orient-section:last-child {
  margin-bottom: 0;
}
.long-form-page .lf-side-orientation .lf-orient-label {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 6px;
}
.long-form-page .lf-side-orientation .lf-orient-position,
.long-form-page .lf-side-orientation .lf-orient-core {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.long-form-page .lf-side-orientation .lf-orient-key {
  list-style: none;
  margin: 0;
  padding: 0;
}
.long-form-page .lf-side-orientation .lf-orient-key li {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 4px;
}
.long-form-page .lf-side-orientation .lf-orient-key li:last-child {
  margin-bottom: 0;
}
.long-form-page .lf-side-orientation .lf-orient-domains {
  margin: 0;
}
.long-form-page .lf-side-orientation .lf-orient-dt {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin: 6px 0 2px;
}
.long-form-page .lf-side-orientation .lf-orient-dt:first-child {
  margin-top: 0;
}
.long-form-page .lf-side-orientation .lf-orient-dd {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
}

/* Back-to-summary card */
.long-form-page .lf-side-back-to-summary .lf-back-summary-link {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  padding: 2px 0;
}
.long-form-page .lf-side-back-to-summary .lf-back-summary-link::before {
  content: "\2190\00a0\00a0";
  color: var(--teal);
}
.long-form-page .lf-side-back-to-summary .lf-back-summary-link:hover {
  text-decoration: underline;
}

/* Connected nodes (flat) — no blurbs, just arrow links */
.long-form-page .lf-connected-flat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.long-form-page .lf-connected-flat-link {
  display: inline-block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.long-form-page .lf-connected-flat-link::before {
  content: "\2192\00a0\00a0";
  color: var(--teal);
}
.long-form-page .lf-connected-flat-link:hover {
  text-decoration: underline;
}
.long-form-page .lf-connected-flat-group {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 14px;
  margin-bottom: 2px;
}
.long-form-page .lf-connected-flat-group:first-child {
  margin-top: 0;
}
.long-form-page .lf-connected-flat-blurb {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 2px 0 8px 0;
}
.long-form-page .lf-side-key-principle .lf-key-principle-body {
  border-left: 3px solid var(--teal);
  padding: 4px 0 4px 12px;
  margin: 0;
}
.long-form-page .lf-side-key-principle .lf-key-principle-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 10px 0;
}
.long-form-page .lf-side-key-principle .lf-key-principle-text:last-child {
  margin-bottom: 0;
}
.long-form-page .lf-related-link {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--text);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.12s ease;
}
.long-form-page .lf-related-link::before {
  content: "\2192\00a0\00a0";
  color: var(--teal);
  font-weight: 600;
}
.long-form-page .lf-related-link:hover {
  color: var(--navy);
  text-decoration: none;
}

.long-form-page .lf-h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  margin: 28px 0 10px;
}
.long-form-page .lf-h2:first-child {
  margin-top: 8px;
}
.long-form-page .lf-h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 20px 0 6px;
}
.long-form-page .lf-p {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 12px;
}
.long-form-page .lf-p:last-child {
  margin-bottom: 0;
}
.long-form-page .lf-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  border-left: 3px solid var(--teal);
  background: rgba(58, 158, 194, 0.06);
  padding: 8px 14px;
  margin: 14px 0;
}
.long-form-page .lf-note.lf-example {
  border-left: none;
  background: none;
  padding: 0;
  margin: 6px 0 14px;
  font-size: 16px;
}
.long-form-page .lf-ul {
  list-style: disc;
  margin: 4px 0 16px;
  padding: 0 0 0 22px;
}
.long-form-page .lf-ul li {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 6px;
}
.long-form-page .lf-ul li strong {
  font-weight: 700;
  color: var(--navy);
}
/* Examples lists — italic so they read as illustrations rather
   than the same weight as the surrounding body. */
.long-form-page .lf-examples li {
  font-style: italic;
}
/* Standalone "View X" link rendered as a pill, used after each
   domain description. */
.long-form-page .lf-card-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--grey-light);
  border-radius: 999px;
  padding: 8px 18px;
  margin: 12px 0 6px;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.long-form-page .lf-card-link::before {
  content: "\2192\00a0\00a0";
  color: var(--teal);
}
.long-form-page .lf-card-link:hover {
  background: rgba(58, 158, 194, 0.08);
  border-color: rgba(58, 158, 194, 0.45);
  text-decoration: none;
}
/* Final arrow list ("Explore the domains") */
.long-form-page .lf-arrow-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.long-form-page .lf-arrow-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--navy);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.12s ease;
}
.long-form-page .lf-arrow-link::before {
  content: "\2192\00a0\00a0";
  color: var(--teal);
  font-weight: 600;
}
.long-form-page .lf-arrow-link:hover {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.long-form-page .lf-arrow-blurb {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-light, #666);
}

/* Two-column data table. Used in Theory sub-nodes to lay out
   "question → what governs it" pairs cleanly. Left column is
   navy and slightly heavier; right column is normal body weight.
   Wraps on narrow viewports without overflow. */
.long-form-page .lf-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
}
.long-form-page .lf-table thead th {
  text-align: left;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 8px 14px 8px 0;
  border-bottom: 2px solid var(--navy);
}
.long-form-page .lf-table thead th + th {
  padding-left: 14px;
}
.long-form-page .lf-table tbody td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--grey-light);
  vertical-align: top;
  color: var(--text);
  font-weight: 500;
}
.long-form-page .lf-table tbody td + td {
  padding-left: 14px;
}
.long-form-page .lf-table tbody tr:last-child td {
  border-bottom: 0;
}
/* First column is the "question" — make it the visual anchor of
   each row by using navy and slightly heavier weight. */
.long-form-page .lf-table tbody td:first-child {
  color: var(--navy);
  font-weight: 600;
  width: 45%;
}

/* ------------------------------------------------------------
   Framework page (rendered by renderFrameworkPage)
   Used for #/section/<id> when CT.frameworkPages[id] exists.

   Layout: two columns on desktop, single column under 980px.
   Main content on the left; side column on the right contains
   "On this page" anchors and the related-nodes list.
   ------------------------------------------------------------ */
.framework-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 408px;
  gap: 32px;
  align-items: start;
}
.framework-main {
  max-width: 820px;
  min-width: 0;
}
.framework-side {
  position: sticky;
  top: 120px;  /* clears the two sticky nav bars */
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Collapse to single column when the two columns get cramped.
   With a 408px side column + 32px gap, two-column layout needs
   ~900px to read comfortably; we collapse a touch earlier so
   the transition isn't visually awkward. */
@media (max-width: 980px) {
  .framework-layout { grid-template-columns: 1fr; }
  .framework-side   { position: static; }
}

.framework-page .fw-section {
  margin-top: 36px;
}
.framework-page .fw-section:first-child {
  margin-top: 8px;
}
.framework-page .fw-section h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px;
}
/* Hide the Definition heading — the opening paragraph itself
   establishes context, so the small-caps label is redundant. */
.framework-page .fw-section.fw-definition > h2 {
  display: none;
}

/* MAIN BODY TEXT — explicitly dark, not pale. Body paragraphs
   throughout the framework main column use var(--text) and a
   slightly heavier weight than the default 400 to read more
   confidently against the white background. */
.framework-page .framework-main p,
.framework-page .framework-main li {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--text);
}
.framework-page .framework-main p {
  margin: 0 0 12px;
}
.framework-page .framework-main p:last-child {
  margin-bottom: 0;
}

/* Bullet lists inside Definition and Relationship sections.
   These render the docx's bulleted items as proper lists rather
   than paragraphs, preserving the canonical document structure.
   Markers are kept quiet (default navy) so the teal accent
   doesn't get spent on bullets. Subjects within an item appear
   in <strong> via the **phrase** convention. */
.framework-page .framework-main .fw-bullets {
  list-style: disc;
  margin: 4px 0 14px;
  padding: 0 0 0 22px;
}
.framework-page .framework-main .fw-bullets li {
  margin: 0 0 8px;
  padding-left: 4px;
}
.framework-page .framework-main .fw-bullets li:last-child {
  margin-bottom: 0;
}
.framework-page .framework-main .fw-bullets li strong {
  font-weight: 700;
  color: var(--navy);
}

/* Core sequence — plain numbered list. Each item is a single
   line: bold title, em dash, body. No card chrome, no arrows. */
.framework-page .core-sequence-list {
  list-style: decimal outside;
  margin: 0 0 0 22px;
  padding: 0;
}
.framework-page .core-sequence-item {
  margin: 0 0 10px;
  padding-left: 6px;
}
.framework-page .core-sequence-item:last-child {
  margin-bottom: 0;
}
.framework-page .core-sequence-item::marker {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--navy);
  font-weight: 600;
}
.framework-page .core-sequence-title {
  font-weight: 700;
  color: var(--navy);
}

/* ----- Side column (right) -----
   Three cards on populated pages: What this page answers,
   Key principle, Related nodes. Each is a cream-ish panel with
   small caps heading and content. */
.framework-page .fw-side-card {
  background: var(--paper);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-md);
  padding: 14px 16px 16px;
}
.framework-page .fw-side-card h3 {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 10px;
}

/* Answers card.

   Heading is omitted per design. The card has two layers:
   1. A paragraph combining the lead-in phrase + the bold question
      inline ("X answers the question: <strong>Y?</strong>")
   2. The body paragraph beneath.

   Both use the same size/weight as the main-column body so
   reading weight stays consistent across the page. */
.framework-page .fw-side-answers > h3 {
  display: none;
}
.framework-page .fw-side-answers .fw-question {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 10px;
}
.framework-page .fw-side-answers .fw-question strong {
  font-weight: 700;
  color: var(--navy);
}
.framework-page .fw-side-answers p:not(.fw-question) {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

/* Key principle card — emphasised quote-style block with teal
   accent. May contain multiple paragraphs. */
.framework-page .fw-side-principle .fw-principle {
  border-left: 3px solid var(--teal);
  padding: 4px 0 4px 12px;
  margin: 0;
}
.framework-page .fw-side-principle .fw-principle p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 10px;
}
.framework-page .fw-side-principle .fw-principle p:last-child {
  margin-bottom: 0;
}

/* Related card — arrow-prefixed links */
.framework-page .fw-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.framework-page .fw-related-link {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.12s ease;
}
.framework-page .fw-related-link::before {
  content: "\2192\00a0\00a0";  /* "\u2192  " — arrow + two spaces */
  color: var(--teal);
  font-weight: 600;
}
.framework-page .fw-related-link:hover {
  color: var(--navy);
  text-decoration: underline;
}
.framework-page .fw-related-group {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 16px;
  margin-bottom: 4px;
}
.framework-page .fw-related-group:first-child {
  margin-top: 0;
}

/* Concepts index link list (placeholder pages with meta.links). */
.placeholder-links { margin: 18px 0 0; padding-left: 18px; }
.placeholder-links li { margin: 8px 0; font-size: 16px; }
.placeholder-links a { font-weight: 600; }
.placeholder-link-blurb { color: var(--text-muted, #5a6b72); font-size: 14px; }

/* Framework-page "On this page" TOC card and Primary-node blurbs. */
.fw-toc-list { list-style: none; margin: 0; padding: 0; }
.fw-toc-item { margin: 6px 0; font-size: 14px; color: var(--text); }
.fw-toc-link { font-size: 14px; }
.fw-related-blurb { margin: 3px 0 10px; font-size: 13px; color: var(--text-muted, #5a6b72); line-height: 1.45; }

/* Framework-page On this page: shares the canonical rail OTP style
   used by the long-form and np2 rails. Tight 1px gap between items,
   serif typography, 17px / 1.2 line-height, subtle teal left-rail
   on hover. Overrides the legacy 14px size from the base
   .fw-toc-item rule above. */
.framework-page .fw-side-toc .fw-toc-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.framework-page .fw-side-toc .fw-toc-item {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--text);
  padding: 1px 0 1px 10px;
  border-left: 2px solid transparent;
  margin-left: -10px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.framework-page .fw-side-toc .fw-toc-link {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
}
.framework-page .fw-side-toc .fw-toc-item:hover {
  color: var(--navy);
  border-left-color: var(--teal);
}
.framework-page .fw-side-toc .fw-toc-link:hover {
  color: var(--navy);
  text-decoration: none;
}

/* V2 node side-rail back link card. */
.np2-side-back { padding-top: 0; padding-bottom: 0; }
.long-form-page .np2-side-back .np2-back-link {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
}
.long-form-page .np2-side-back .np2-back-link:hover { text-decoration: underline; }
/* On-this-page TOC in the V2 rail: same canonical OTP style used by
   the long-form and framework rails. 17px serif, 1.2 line-height,
   1px gap. */
.long-form-page .np2-side-toc .fw-toc-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.long-form-page .np2-side-toc .fw-toc-item {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--text);
  padding: 1px 0 1px 10px;
  border-left: 2px solid transparent;
  margin-left: -10px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.long-form-page .np2-side-toc .lf-otp-link {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
}
.long-form-page .np2-side-toc .fw-toc-item:hover,
.long-form-page .np2-side-toc .lf-otp-link:hover {
  color: var(--navy);
  border-left-color: var(--teal);
  text-decoration: none;
}

/* Extra deeper-style links inside the Deeper node card. */
.np2-deeper-extra { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border, #e2e8e9); }
.np2-deeper-extra-item { margin: 0 0 4px; }


/* Core-nodes card (per-page opt-in). Renders above the On-this-page
   card on pages where items use group: 'Core nodes'. Visually
   distinct from the default below-OTP "Primary nodes" card: the
   group label is the only heading (no h3), so the card reads as
   "the page's core children" without doubled labelling. */
.lf-side-core-nodes ul,
.fw-side-core-nodes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lf-side-core-nodes li,
.fw-side-core-nodes li {
  margin: 0 0 12px;
}
.lf-side-core-nodes li:last-child,
.fw-side-core-nodes li:last-child {
  margin-bottom: 0;
}

/* Framework page back-link card (e.g. "← Back to Theory"). Sits at
   the top of the right-hand rail, matching the long-form and node-v2
   conventions. */
.framework-page .fw-side-back {
  padding-bottom: 6px;
}
.framework-page .fw-side-back .fw-back-link {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
}
.framework-page .fw-side-back .fw-back-link:hover { text-decoration: underline; }
.framework-page .fw-side-back[hidden] { display: none; }