/* Adaptive-field typography and static pathways on secondary pages.
   All color tokens inherit from the shared site theme. */
body[data-design="adaptive-field"] {
  --design-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --reading-panel: #233d32;
  --reading-panel-ink: #eeefe7;
  --reading-panel-muted: #ccd6ca;
  --reading-panel-accent: #e5a58d;
  font-family: var(--design-sans);
  -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] body[data-design="adaptive-field"] {
  --reading-panel: #111;
  --reading-panel-ink: #f0f0e9;
  --reading-panel-muted: #bdbbb4;
  --reading-panel-accent: #eeece6;
}
body[data-design]::before { opacity: .16; }
body[data-design] header { border-bottom: 1px solid var(--rule); }
body[data-design] .logo-img {
  height: 38px;
}
body[data-design] nav a {
  font-family: var(--design-sans);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
}
body[data-design] :is(h1, h2, h3, h4) {
  font-family: var(--design-sans) !important;
  font-weight: 400;
  letter-spacing: -.035em;
}
body[data-design] :is(h1, h2, h3, h4) em { font-style: normal; }
body[data-design] :is(.hero h1, .blog-post h1) { font-weight: 400; }
body[data-design] :is(.blog-post p, .blog-post li, .article-body p, .dek, .blog-card p, .principle p, .hero-positioning, .signup-description) {
  font-family: var(--design-sans);
}
body[data-design] .intelligence-essay .article-hero .hero-subtitle {
  font-family: var(--design-sans);
  font-style: normal;
  font-weight: 400;
}
body[data-design] :is(.blog-post h2, .article-body h2) { font-weight: 400; }
body[data-design] :is(.blog-post h3, .article-body h3) { font-style: normal; }
body[data-design] :is(.section-rule, .hero-rule) .ornament {
  font-family: var(--design-sans);
  color: var(--accent);
}
body[data-design] :is(.blog-card, .role-card, .thesis-box, .pullquote, .stack-row--voaige) {
  border-color: var(--rule);
}
body[data-design] .stack-row--voaige { background: var(--accent-pale); }
body[data-design] svg [fill="#c8451a"] { fill: var(--accent); }
body[data-design] svg [stroke="#c8451a"] { stroke: var(--accent); }
body[data-design] footer { border-top: 1px solid var(--rule); }
body[data-design] .footer-nav a { font-family: var(--design-sans); letter-spacing: 0; }
body[data-design] footer { background: var(--reading-panel); color: var(--reading-panel-ink); }
body[data-design] footer :is(.social-icons a, .footer-contact a, .footer-nav a, .copyright) {
  color: var(--reading-panel-muted);
}
body[data-design] footer :is(.footer-nav a.active, .footer-nav a:hover) { color: var(--reading-panel-ink); }
body[data-design] footer :is(.social-icons a:hover, .footer-contact a:hover) {
  color: var(--reading-panel);
  background: var(--reading-panel-ink);
  border-color: var(--reading-panel-ink);
}

/* Existing research diagrams use the same surfaces and accents as the site. */
body[data-design] :is(.results-comparison-table, .regime-card, .cycle-step-update) {
  background: var(--paper);
}
body[data-design] :is(.results-comparison-table tbody tr:nth-child(even), .regime-card.featured,
  .regime-coordination, .concrete-case, .coordination-callout, .program-questions,
  .diagnostic-observation, .decision-loop-svg) {
  background: var(--cream);
}
body[data-design] :is(.results-comparison-table tbody tr, .results-stack-box,
  .hero-card, .frontier-mechanism-group li) {
  border-color: var(--rule);
}
body[data-design] .results-stack-box { background: var(--cream); box-shadow: none; }
body[data-design] .results-stack-box .stack-layer { color: var(--muted-text); }
body[data-design] :is(.stack-layer.active, .results-stack-box .stack-layer.active,
  .control-branches .stop-branch) {
  color: var(--accent-text);
  background: var(--accent-pale);
  border-color: var(--rule);
}
body[data-design] .hero-card { background: var(--cream); }
body[data-design] .possibility-space i.promising {
  box-shadow: 0 0 0 4px var(--accent-pale);
}
body[data-design] .uncertainty-meter {
  background: linear-gradient(90deg, var(--accent-pale), var(--accent));
}
body[data-design] .frontier-gap { fill: var(--accent-pale); }
body[data-design] .decision-loop-svg .loop-node rect { fill: var(--paper); }
body[data-design] .signup-input::placeholder { color: var(--muted-text); }
body[data-design] .signup-input:focus { background: var(--cream); }
body[data-design] .signup-input-row:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Inset callouts remain dark in both themes, with readable chalk lettering. */
@media screen {
  body[data-design] :is(.thesis-box, .question-principle, .cycle-search, .keys-example),
  body[data-design] .article-body .frontier-mechanism-flow .frontier-mechanism-core {
    color: var(--reading-panel-ink);
    background: var(--reading-panel);
    border-color: var(--rule);
  }
  body[data-design] :is(.thesis-box h3, .frontier-mechanism-core strong, .cycle-search h4),
  body[data-design] .article-body .question-principle p {
    color: var(--reading-panel-ink);
  }
  body[data-design] :is(.thesis-box p, .pillar p, .constraint p, .frontier-mechanism-flow p > span, .search-operations, .keys-example span) {
    color: var(--reading-panel-muted);
  }
  body[data-design] :is(.thesis-box .box-label, .pillar-name, .constraint-name, .frontier-mechanism-core small, .cycle-search .node-label, .search-operations i),
  body[data-design] .article-body .question-principle :is(.section-label, .question-principle-emphasis) {
    color: var(--reading-panel-accent);
  }
  body[data-design] :is(.pillar, .constraint) { border-color: var(--reading-panel-muted); }
  body[data-design] .apply-email { color: var(--reading-panel-ink) !important; border-color: var(--reading-panel-muted); }
  body[data-design] .apply-email .at { color: var(--reading-panel-accent); }
  body[data-design] .apply-email:hover { color: var(--paper) !important; background: var(--ink); }
  body[data-design] .apply-email:hover .at { color: inherit; }
}

/* The older stack illustration is inline SVG; preserve its inverse center. */
body[data-design] .stack-diagram svg [stroke="#c5b99a"] { stroke: var(--rule); }
body[data-design] .stack-diagram svg [fill="#c5b99a"] { fill: var(--rule); }
body[data-design] .stack-diagram svg text[fill="#0e0d0b"] { fill: var(--ink); }
body[data-design] .stack-diagram svg text[fill="#7a7060"] { fill: var(--muted-text); }
body[data-design] .stack-diagram svg rect[fill="#0e0d0b"] { fill: var(--reading-panel); }
body[data-design] .stack-diagram svg text[fill="#f5f0e8"] { fill: var(--reading-panel-ink); }
body[data-design] .stack-diagram svg text[fill="#c8451a"] { fill: var(--reading-panel-accent); }

/* Qualitative colors still distinguish model families in the results. */
html[data-theme="dark"] body[data-design] .b-red { color: #edab91; background: #382922; border-color: #745447; }
html[data-theme="dark"] body[data-design] .b-blue { color: #a8c7fc; background: #242d3c; border-color: #485c7e; }
html[data-theme="dark"] body[data-design] .b-cyan { color: #90d5cb; background: #203532; border-color: #426d64; }
html[data-theme="dark"] body[data-design] .b-purple { color: #cab0f4; background: #31273b; border-color: #695580; }
html[data-theme="dark"] body[data-design] .b-green { color: #94d5b0; background: #25372b; border-color: #486c53; }
html[data-theme="dark"] body[data-design] .b-amber { color: #e3bd81; background: #382e20; border-color: #786144; }
@media (max-width: 760px) {
  body[data-design] .logo-img { height: 32px; }
  body[data-design] nav a { font-size: 12px; }
}
/* Mineral-green neural mesh (page-field.20260928.v2.js).
   Fine transparent membranes and layered filaments leave the reading area open. */
.continuity-art, .continuity-margins { pointer-events: none; user-select: none; }
.continuity-art {
  --neuron-ink: color-mix(in srgb, var(--ink) 76%, var(--reading-fiber));
  overflow: hidden;
}
.neuron-art { display: block; width: 100%; height: 100%; overflow: hidden; }
.neuron-line { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.neuron-fill { fill: currentColor; stroke: none; }
.neuron-ink-backFill { color: var(--reading-fiber); opacity: .025; }
.neuron-ink-backLine { color: var(--reading-fiber); opacity: .24; }
.neuron-ink-mesh { color: var(--neuron-ink); opacity: .34; }
.neuron-ink-fill { color: var(--neuron-ink); opacity: .045; }
.neuron-ink-nucFill { color: var(--neuron-ink); opacity: .3; }
.neuron-ink-core { color: var(--neuron-ink); opacity: .78; }
.neuron-ink-fiber { color: var(--neuron-ink); opacity: .44; }
.neuron-ink-front { color: var(--neuron-ink); opacity: .64; }
.neuron-ink-axon { color: var(--neuron-ink); opacity: .86; }
.neuron-ink-beads { color: var(--neuron-ink); opacity: .65; }
.neuron-ink-hi { color: var(--paper); opacity: .65; }
html[data-theme="dark"] .neuron-art { opacity: .72; }

/* Fixed margins beside articles fade toward the text and at both ends. */
.continuity-margins { position: fixed; inset: 110px 0 0; z-index: -1; }
body[data-field-surface="reading"] { isolation: isolate; }
.continuity-margin {
  position: absolute;
  top: 0;
  width: min(320px, calc((100vw - 900px) / 2));
  height: min(880px, 100%);
}
.continuity-margin--left {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, black 72%, transparent), linear-gradient(transparent, black 6%, black 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, black 72%, transparent), linear-gradient(transparent, black 6%, black 88%, transparent);
  mask-composite: intersect;
}
.continuity-margin--right {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, black 72%, transparent), linear-gradient(transparent, black 6%, black 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, black 72%, transparent), linear-gradient(transparent, black 6%, black 88%, transparent);
  mask-composite: intersect;
}
.continuity-wide-results .continuity-margin { width: clamp(0px, calc((100vw - 1140px) / 2), 320px); }

/* Research and Blog headers grow to hold the chain behind the title. */
.continuity-hero { position: relative; }
body[data-design] .hero.blog-hero { background: none; min-height: 285px; }
body[data-field-surface="index"] .continuity-hero { isolation: isolate; }
html body[data-field-surface="index"] .hero.blog-hero { padding-bottom: 190px; }
.continuity-banner {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / .2), rgb(0 0 0 / .32) 42%, black 66%);
  mask-image: linear-gradient(to right, rgb(0 0 0 / .2), rgb(0 0 0 / .32) 42%, black 66%);
}
/* Where a header has a tagline (Blog), the cells part around it. */
.blog-hero:has(.dek) .continuity-banner {
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / .2), rgb(0 0 0 / .32) 42%, black 66%), radial-gradient(260px 70px at calc(100% - 241px) 49%, transparent 42%, black 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, rgb(0 0 0 / .2), rgb(0 0 0 / .32) 42%, black 66%), radial-gradient(260px 70px at calc(100% - 241px) 49%, transparent 42%, black 100%);
  mask-composite: intersect;
}
body[data-field-surface="index"] .blog-hero .dek {
  position: relative;
  text-shadow: 0 0 3px var(--paper), 0 0 8px var(--paper), 0 0 16px var(--paper), 0 0 24px var(--paper);
}
.continuity-chapter { display: none; }

/* Above the footer: a full-width stretch of chain. */
.continuity-ending {
  position: relative;
  height: 180px;
  margin-top: -60px;
  background: var(--paper);
  -webkit-mask-image: linear-gradient(transparent, black 22%, black 80%, transparent);
  mask-image: linear-gradient(transparent, black 22%, black 80%, transparent);
}
.continuity-ending svg { width: 100%; height: 200px; margin-top: -10px; }
html body[data-field-surface="index"]:not(.tiled-index) .continuity-ending { margin-top: 0; }

@media (max-width: 1100px) {
  .continuity-margins { display: none; }
  .continuity-chapter {
    display: block;
    height: 150px;
    margin: 14px -15px 24px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  }
  body[data-design] .hero.blog-hero { min-height: 0; }
  html body[data-field-surface="index"] .hero.blog-hero { padding-bottom: 32px; }
  .continuity-banner,
  .blog-hero:has(.dek) .continuity-banner {
    position: relative;
    inset: auto;
    width: 100%;
    height: 190px;
    margin-top: 16px;
    z-index: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }
  .continuity-banner svg { width: min(700px, 100%); height: 100%; margin: 0 auto; }
}
@media (max-width: 760px) {
  body[data-design] .results-chart-pair { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-design] .results-chart-pair > div { min-width: 0; }
  body[data-design] .results-main .two-col { grid-template-columns: minmax(0, 1fr); }
  body[data-design] .results-main .card { min-width: 0; }
  body[data-design] .results-comparison-table {
    table-layout: fixed;
    overflow-wrap: anywhere;
    width: calc(100% + 48px);
    margin-inline: -24px;
    font-family: var(--design-sans);
    font-size: 11px;
    letter-spacing: 0;
  }
  body[data-design] .results-comparison-table :is(th, td) { padding-inline: 8px; line-height: 1.6; }
  .continuity-chapter { height: 132px; margin-top: 8px; margin-bottom: 22px; }
  .continuity-banner, .blog-hero:has(.dek) .continuity-banner { height: 160px; }
  .continuity-ending { height: 130px; margin-top: -30px; }
  .continuity-ending svg { height: 150px; }
}
@media print {
  .continuity-art, .continuity-margins { display: none !important; }
  body[data-design] .hero.blog-hero { min-height: 0; }
  html body[data-field-surface="index"] .hero.blog-hero { padding-bottom: 64px; }
}

/* 2 October 2026 (secondary.20261002.css), wide screens and the dark theme:
   - Beside 960px figures (Intelligence Is Search, the blog essay) the margin drawings stop 20px
     short of them instead of running into them.
   - The fixed margin drawings slide under the footer, which takes the page's colour across the
     full width, instead of showing through behind its links.
   - The highlighted layer of the stack diagram keeps an outline in the dark theme, where its fill
     is close to the page's. */
body:has(.figure-breakout) .continuity-margin { width: min(320px, calc((100vw - 1000px) / 2)); }
body[data-field-surface="reading"] > footer.site-footer {
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}
html[data-theme="dark"] body[data-design] .stack-diagram svg rect[fill="#0e0d0b"] { fill: #262624; stroke: var(--reading-panel-muted); stroke-width: 1; }