/* Shared design tokens. Layout starts with narrow screens. */
:root {
  color-scheme: light;
  --color-background: #f2f7fb;
  --color-surface: #fbfdff;
  --color-text: #203544;
  --color-text-secondary: #38556a;
  --color-muted: #587287;
  --color-brand: #2c5aa0;
  --color-brand-strong: #204783;
  --color-accent: #397f8b;
  --color-warm: #93603f;
  --color-border: #ccdce7;
  --color-border-strong: #9cb7c9;
  --color-heading: #223e6c;
  --color-on-brand: #ffffff;
  --color-selection: #bddbf1;
  --color-selection-text: #15334d;
  --color-header: rgba(248, 251, 254, .96);
  --color-hero-start: rgba(247, 251, 254, .66);
  --color-hero-end: rgba(225, 239, 249, .36);
  --color-home-hero: #f8fbfd;
  --hero-logo-width: clamp(10rem, 32vw, 13rem);
  --color-section: rgba(252, 254, 255, .72);
  --color-section-alt: rgba(233, 243, 250, .69);
  --color-note: rgba(225, 239, 249, .55);
  --color-hover: rgba(255, 255, 255, .57);
  --color-closing-start: #e0eff8;
  --color-closing-end: #f1f8fc;
  --color-footer: #213c5a;
  --color-footer-text: #e9f4fa;
  --color-shadow: rgba(28, 68, 110, .12);
  --content-width: 72.5rem;
  --page-gutter: 1.125rem;
  --header-height: 10.5rem;
  --radius: .375rem;

  /* Original ambient animation: RGB triplets, pixels and radians/ms.
     Contrast 1 and speed 1 preserve the reference animation. */
  --ribbon-opacity: .48;
  --ribbon-blend: multiply;
  --ribbon-contrast: 1;
  --ribbon-speed: 1;
  --ribbon-border-color: 44, 90, 160;
  --ribbon-border-opacity: 0;
  --ribbon-border-width: 0;
  --ribbon-1-level: .32;
  --ribbon-1-amplitude: 38;
  --ribbon-1-width: 170;
  --ribbon-1-length: 410;
  --ribbon-1-speed: .00072;
  --ribbon-1-phase: .3;
  --ribbon-1-color: 255, 255, 255;
  --ribbon-1-strength: .45;
  --ribbon-2-level: .67;
  --ribbon-2-amplitude: 32;
  --ribbon-2-width: 215;
  --ribbon-2-length: 510;
  --ribbon-2-speed: -.00058;
  --ribbon-2-phase: 2.1;
  --ribbon-2-color: 44, 90, 160;
  --ribbon-2-strength: .16;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #101b27;
  --color-surface: #182738;
  --color-text: #e4eef6;
  --color-text-secondary: #c0d1df;
  --color-muted: #a0b6c9;
  --color-brand: #9bbff4;
  --color-brand-strong: #bdd7ff;
  --color-accent: #8ccbd2;
  --color-warm: #dfb494;
  --color-border: #34495d;
  --color-border-strong: #59758e;
  --color-heading: #e1edff;
  --color-on-brand: #102139;
  --color-selection: #355d87;
  --color-selection-text: #ffffff;
  --color-header: rgba(16, 27, 39, .96);
  --color-hero-start: rgba(25, 43, 62, .68);
  --color-hero-end: rgba(26, 48, 68, .38);
  --color-home-hero: #c6d9e8;
  --color-section: rgba(20, 35, 49, .72);
  --color-section-alt: rgba(26, 44, 62, .69);
  --color-note: rgba(44, 72, 99, .55);
  --color-hover: rgba(116, 158, 191, .12);
  --color-closing-start: #182d40;
  --color-closing-end: #152534;
  --color-footer: #0b141f;
  --color-footer-text: #c4d7e6;
  --color-shadow: rgba(0, 0, 0, .3);
  --ribbon-blend: screen;
  --ribbon-opacity: .22;
  --ribbon-1-color: 111, 148, 179;
  --ribbon-2-color: 73, 112, 153;
  --ribbon-border-color: 140, 175, 204;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: 400 1rem/1.7 "DM Sans", "Trebuchet MS", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, select { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button, select { color: inherit; }
a { color: inherit; text-underline-offset: .25em; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Space Grotesk", "Trebuchet MS", sans-serif; overflow-wrap: break-word; }
p, li { overflow-wrap: break-word; }
::selection { background: var(--color-selection); color: var(--color-selection-text); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; inset: .5rem auto auto .5rem; z-index: 30; padding: .7rem 1rem; color: var(--color-on-brand); background: var(--color-brand); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

/* The canvas sits above section surfaces and below all readable content. */
#ambient-canvas { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: var(--ribbon-opacity); mix-blend-mode: var(--ribbon-blend); pointer-events: none; }
.hero-inner, .section-shell, .site-footer { position: relative; z-index: 3; }
.header-inner, .section-shell, .hero-inner, .footer-inner { width: min(calc(100% - var(--page-gutter) * 2), var(--content-width)); margin-inline: auto; }

/* Compact header: brand and preferences first, navigation on its own row. */
.site-header { position: sticky; inset-block-start: 0; z-index: 10; background: var(--color-header); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.header-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand preferences" "navigation navigation"; gap: .35rem .75rem; padding-block: .6rem .25rem; }
.brand { grid-area: brand; display: inline-flex; align-items: center; }
.brand img { display: block; width: 3rem; height: 3rem; object-fit: contain; border-radius: var(--radius); background: #fbfdff; }
.site-preferences { grid-area: preferences; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem .5rem; align-items: end; }
.site-preferences label { display: block; color: var(--color-muted); font-size: .65rem; line-height: 1.5; margin-bottom: .15rem; }
.site-preferences select { max-width: 100%; min-height: 2.75rem; padding: .4rem .25rem .4rem .45rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); font-size: .72rem; cursor: pointer; }
.language-control { flex: 0 1 auto; min-width: 0; margin: 0; }
.language-input { display: flex; min-width: 0; }
.language-input select { min-width: 0; width: 6rem; }
.theme-control { min-width: 0; }
.theme-control select { width: 4.5rem; }
.language-fallback { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .75rem; }
.site-nav { grid-area: navigation; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 .25rem; min-width: 0; }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; min-height: 2.75rem; padding-inline: .3rem; color: var(--color-muted); white-space: normal; font-size: .72rem; font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a.nav-resource { color: var(--color-accent); gap: .4rem; }
.site-nav a:hover, .site-nav a.is-active { color: var(--color-brand); border-color: var(--color-brand); }

/* Fluid typography and single-column sections are the mobile defaults. */
.hero { display: flex; align-items: center; background: linear-gradient(117deg, var(--color-hero-start), var(--color-hero-end) 80%); border-bottom: 1px solid var(--color-border); }
.hero-inner { padding-block: 2.5rem 2rem; }
.hero-copy { max-width: 60rem; }
.hero h1 { max-width: 22ch; margin: 0 0 1.25rem; color: var(--color-heading); font-size: clamp(2rem, 1rem + 4.5vw, 4.6rem); line-height: 1.09; font-weight: 700; }
.hero-period { color: var(--color-accent); }
.hero-statement { max-width: 42rem; margin-bottom: 1.5rem; font-size: clamp(1.02rem, .92rem + .5vw, 1.25rem); line-height: 1.6; color: var(--color-text-secondary); }
.eyebrow, .section-label, .pillar-category, .closing-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; color: var(--color-brand); }
.eyebrow-line { flex: 0 0 1.5rem; height: 1px; background: currentColor; }
.hero-actions, .closing-links { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; }
.primary-action { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 2.75rem; padding: .7rem 1rem; border: 1px solid var(--color-brand); border-radius: var(--radius); background: var(--color-brand); color: var(--color-on-brand); font-size: .86rem; font-weight: 700; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.primary-action:hover { background: var(--color-brand-strong); transform: translateY(-2px); }
.text-action { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--color-brand); font-size: .86rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--color-border-strong); }
.text-action:hover { border-color: currentColor; }
.hero-index { margin: 1.75rem 0 0; font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--color-muted); }
.hero-index span { margin-inline: .4rem; color: var(--color-warm); }
.idea-section, .pathways-section, .pillars-section, .closing-section { padding-block: clamp(3rem, 6vw, 5rem); }
.idea-section, .pillars-section { background: var(--color-section); }
.pathways-section { background: var(--color-section-alt); }
.section-label { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; color: var(--color-brand); }
.label-index { flex-shrink: 0; white-space: nowrap; }
.label-rule { height: 1px; width: 100%; background: var(--color-border); }
.idea-layout { display: grid; gap: 0; }
.idea-content { max-width: 48rem; min-width: 0; }
.idea-content h2, .pathways-heading h2, .closing-inner h2 { font-size: clamp(1.8rem, 1.25rem + 2vw, 2.7rem); font-weight: 600; line-height: 1.2; }
.idea-content h2 { max-width: 43rem; margin-bottom: 1.5rem; }
.idea-content > p, .pillar-content > p:not(.pillar-category), .closing-inner > p:not(.closing-label) { font-size: 1rem; color: var(--color-text-secondary); }
.idea-note { display: flex; gap: .8rem; margin-block: 1.5rem; padding: 1rem; border-inline-start: 2px solid var(--color-brand); background: var(--color-note); }
.idea-note p { margin: 0; color: var(--color-text-secondary); }
.idea-note strong { color: var(--color-brand-strong); }
.note-symbol { color: var(--color-warm); font-size: 1.35rem; }
.pathways-heading { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.pathways-heading h2, .pathways-heading p { margin: 0; }
.pathways-heading h2 span { color: var(--color-brand); }
.pathways-heading p { max-width: 32rem; color: var(--color-text-secondary); }
.path-list { border-top: 1px solid var(--color-border-strong); }
.path-list a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; gap: .2rem .75rem; align-items: center; padding: 1.1rem .2rem; border-bottom: 1px solid var(--color-border); text-decoration: none; transition: background .2s ease; }
.path-list a:hover { background: var(--color-hover); }
.path-number { color: var(--color-accent); font-size: .76rem; font-weight: 700; }
.path-name { color: var(--color-brand-strong); font: 600 1.12rem/1.3 "Space Grotesk", sans-serif; overflow-wrap: anywhere; }
.path-description { grid-column: 2; color: var(--color-text-secondary); font-size: .82rem; }
.path-arrow { grid-column: 3; grid-row: 1 / 3; color: var(--color-brand); }
.pillar { display: grid; gap: 1.25rem; padding-block: 2.5rem; border-bottom: 1px solid var(--color-border); }
.pillar:first-of-type { padding-top: .5rem; }
.pillar:last-of-type { border: 0; padding-bottom: .5rem; }
.pillar-side { display: flex; align-items: baseline; gap: .8rem; }
.pillar-index { color: var(--color-accent); font-size: .8rem; font-weight: 700; }
.pillar-domain { color: var(--color-brand); font: 600 1.45rem/1 "Space Grotesk", sans-serif; }
.pillar-content { max-width: 48rem; min-width: 0; }
.pillar-category { margin-bottom: 1rem; color: var(--color-warm); }
.pillar-content h2 { margin-bottom: 1.2rem; font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.35rem); line-height: 1.22; font-weight: 600; }
.detail-link { display: inline-flex; align-items: center; gap: .8rem; min-height: 2.75rem; margin-top: .4rem; color: var(--color-brand-strong); font-size: .9rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--color-brand); }
.detail-link:hover { color: var(--color-accent); border-color: currentColor; }
.closing-section { background: linear-gradient(155deg, var(--color-closing-start), var(--color-closing-end) 72%); border-top: 1px solid var(--color-border); }
.closing-label { color: var(--color-brand); margin-bottom: 1.5rem; }
.closing-inner h2 { max-width: 47rem; }
.closing-inner > p:not(.closing-label) { max-width: 44rem; margin-bottom: 1.75rem; }
.site-footer { background: var(--color-footer); color: var(--color-footer-text); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; padding-block: 1.5rem; font-size: .83rem; }
.footer-brand img { display: block; width: 5.5rem; height: auto; filter: brightness(0) invert(1); }
.footer-credit { font-weight: 700; }
.site-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer a:hover { color: var(--color-accent); }
.back-to-top { position: fixed; inset: auto 1rem 1rem auto; z-index: 9; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); color: var(--color-brand); box-shadow: 0 .25rem 1rem var(--color-shadow); cursor: pointer; font-size: 1.3rem; }

/* Document pages share the same reading width and spacing scale. */
.document-hero .hero-inner { padding-block: 2rem; }
.document-hero h1 { max-width: 34ch; font-size: clamp(1.85rem, 1rem + 3vw, 3.5rem); line-height: 1.15; }
.document-hero h1 code, .document-content code, .document-toc code { font: inherit; }
.document-back { display: inline-flex; align-items: center; min-height: 2.75rem; margin-bottom: 1.2rem; color: var(--color-muted); font-size: .85rem; }
.document-layout { display: grid; gap: 2rem; padding-block: 2rem; align-items: start; }
.document-toc { min-width: 0; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); font-size: .85rem; }
.document-toc summary { cursor: pointer; color: var(--color-brand); font-weight: 700; min-height: 2.75rem; align-content: center; }
.document-toc ol { margin: .75rem 0 0; padding-left: 1.3rem; }
.document-toc li { padding-left: .2rem; margin-block: .5rem; }
.document-toc a { display: inline-block; padding-block: .45rem; color: var(--color-text-secondary); text-decoration: none; }
.document-toc a:hover { color: var(--color-brand); text-decoration: underline; }
.document-content { min-width: 0; max-width: 50rem; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.document-content h2 { margin: 2.5rem 0 1.25rem; color: var(--color-text); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); line-height: 1.3; }
.document-content h2:first-child { margin-top: 0; }
.document-content p { margin-bottom: 1.4rem; }
.document-content ul, .document-content ol { padding-left: 1.4rem; }
.document-content li { margin-block: 1rem; padding-left: .25rem; }
.document-content strong { color: var(--color-text); }
.document-content a { color: var(--color-brand-strong); }
.document-content hr { border: 0; border-top: 1px solid var(--color-border); margin-block: 2.25rem; }
.document-source { margin-top: 2.5rem; font-size: .85rem; }
.document-source a { display: inline-block; padding-block: .7rem; }
.document-related { padding-block: 1.5rem 3rem; border-top: 1px solid var(--color-border); }
.document-related > div { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.document-related a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-brand); }

/* Enhance the base layout as space becomes available. */
@media (min-width: 30rem) {
  :root { --page-gutter: 1.5rem; }
  .brand img { width: 4.5rem; height: 4.5rem; }
  .site-preferences { gap: 1rem; }
  .site-preferences select { font-size: .8rem; }
  .language-input select { width: 9.3rem; }
  .theme-control select { width: 6.5rem; }
  .site-nav { gap: .7rem; }
  .site-nav a { font-size: .8rem; }
  .hero-inner { padding-block: 3rem; }
}
@media (min-width: 48rem) {
  :root { --page-gutter: 2.25rem; }
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand navigation preferences"; gap: .2rem 1.1rem; padding-block: .75rem .3rem; }
  .brand img { width: 4rem; height: 4rem; }
  .site-nav { gap: .1rem; justify-content: flex-start; }
  .site-nav a { padding-inline: .5rem; }
  .site-preferences { flex-wrap: nowrap; gap: .5rem; }
  .site-preferences select { font-size: .72rem; }
  .language-input select { width: 7.5rem; }
  .theme-control select { width: 5.3rem; }
  .hero-inner { padding-block: 4.25rem 3rem; }
  .hero-index { margin-top: 2.25rem; font-size: .74rem; }
  .hero-index span { margin-inline: .7rem; }
  .idea-layout, .pillar { grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; }
  .idea-layout .section-label { display: block; padding-top: .5rem; }
  .idea-layout .label-rule { display: block; margin-top: 1rem; }
  .pillar-side { flex-direction: column; align-items: flex-start; }
  .pathways-heading { grid-template-columns: 1fr 1fr; align-items: end; gap: 2.5rem; }
  .path-list a { grid-template-columns: 2.5rem minmax(0, 1.1fr) minmax(0, 1fr) 1.75rem; gap: 1.25rem; padding: 1.4rem .6rem; }
  .path-name { font-size: 1.25rem; }
  .path-description, .path-arrow { grid-column: auto; grid-row: auto; }
  .path-description { font-size: .9rem; }
  .footer-inner { justify-content: space-between; min-height: 6.5rem; }
  .document-layout { grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; padding-block: 3.5rem; }
  .document-toc { position: sticky; top: calc(var(--header-height) + 1.5rem); max-height: calc(100svh - var(--header-height) - 3rem); overflow-y: auto; font-size: .78rem; }
  .document-hero .hero-inner { padding-block: 2.5rem 3rem; }
}
@media (min-width: 64rem) {
  .header-inner { column-gap: 1.75rem; }
  .site-nav { gap: .65rem; }
  .site-nav a { font-size: .84rem; }
  .site-preferences select { font-size: .78rem; }
  .language-input select { width: 8.8rem; }
  .theme-control select { width: 6rem; }
  .idea-layout, .pillar { grid-template-columns: 12.8rem minmax(0, 1fr); gap: 2.2rem; }
  .closing-inner { padding-left: 15rem; }
  .document-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #ambient-canvas { display: none; }
  .primary-action, .path-list a { transition: none; }
}

/* Definitive brand assets: use the provided inverse artwork on dark surfaces. */
.brand img { background: transparent; border-radius: 0; }
:root:not([data-theme="dark"]) .logo-inverse { display: none; }
:root[data-theme="dark"] .logo-normal { display: none; }
:root[data-theme="dark"] .logo-inverse { display: block; }
/* A continuous light surface keeps both colored logo variants legible. */
.home-hero {
  background: var(--color-home-hero);
  --color-heading: #223e6c;
  --color-text-secondary: #38556a;
  --color-brand: #2c5aa0;
  --color-brand-strong: #204783;
  --color-accent: #306d78;
  --color-muted: #425d72;
  --color-warm: #805033;
  --color-on-brand: #ffffff;
  --color-border-strong: #8aa6bd;
}
.home-hero .hero-inner { display: grid; gap: 0; }
.hero-brand { width: var(--hero-logo-width); margin-bottom: 1.5rem; }
.hero-brand img { display: block; width: 100%; height: auto; }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2.5rem; }
.footer-brand img { width: 8.25rem; height: auto; filter: none; }
.footer-identity p { margin: 1rem 0 0; max-width: 24rem; color: var(--color-footer-text); }
.footer-label { margin-bottom: .5rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.footer-invitation { margin-bottom: .75rem; font: 500 1.3rem/1.4 "Space Grotesk", sans-serif; }
.site-footer .contact-link { gap: .75rem; text-decoration: none; }
.contact-link svg { flex-shrink: 0; }
.contact-link span { overflow-wrap: anywhere; }
.footer-bottom { width: min(calc(100% - var(--page-gutter) * 2), var(--content-width)); margin-inline: auto; padding-block: .75rem; border-top: 1px solid var(--color-border); font-size: .75rem; }
.footer-bottom a { text-decoration: none; }
.social-links { display: flex; gap: .5rem; margin-top: .75rem; }
.social-links a { justify-content: center; width: 2.75rem; border: 1px solid var(--color-border); border-radius: 50%; }
@media (min-width: 48rem) {
  .home-hero .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(13rem, 20rem); column-gap: clamp(2rem, 4vw, 4rem); }
  .home-hero .hero-brand { grid-column: 2; grid-row: 1 / 4; width: 100%; margin: 0; align-self: center; }
  .home-hero .eyebrow, .home-hero .hero-copy, .home-hero .hero-index { grid-column: 1; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .footer-contact { justify-self: end; }
}