/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * macrostructure: Index-First + Long Document · genre: editorial modern-minimal
 * theme: editorial-cobalt · anchor hue: teal-cobalt · enrichment: semantic evidence map
 * contrast: pass · nav: floating rail · footer: colophon · mobile: 320–768 ready
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: 1000;
  transform: translateY(-200%);
  background: var(--color-ink);
  color: var(--color-accent-ink);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur-short) var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

.page-shell {
  width: min(100% - 2rem, var(--page-max));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 300;
  padding: var(--space-xs) var(--space-sm) 0;
  pointer-events: none;
}

.nav-shell {
  min-height: var(--nav-height);
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: color-mix(in oklch, var(--color-paper) 92%, transparent);
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 40px -28px var(--color-shadow);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: 0 0 auto;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: -0.08em;
}

.desktop-nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  margin-inline: auto;
}

.desktop-nav a {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.download-link {
  display: none;
  flex: 0 0 auto;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}

.download-link:hover { background: var(--color-accent-deep); }
.download-link:active { transform: translateY(1px); }

.mobile-menu {
  position: relative;
  margin-inline-start: auto;
}

.mobile-menu summary {
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-accent-ink);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 750;
  white-space: nowrap;
}

.mobile-menu summary::-webkit-details-marker { display: none; }

.mobile-menu nav {
  position: absolute;
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline-end: 0;
  min-width: 13.5rem;
  padding: var(--space-2xs);
  display: grid;
  gap: var(--space-3xs);
  background: var(--color-paper);
  border: var(--rule) solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 55px -30px var(--color-shadow);
}

.mobile-menu nav a {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mobile-menu nav a:hover,
.mobile-menu nav a.is-active {
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.hero {
  position: relative;
  isolation: isolate;
  margin-block-start: calc(-1 * var(--nav-height));
  padding-block: calc(var(--nav-height) + var(--space-2xl)) var(--space-3xl);
  border-block-end: var(--rule) solid var(--color-rule);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--color-grid) var(--rule), transparent var(--rule)),
    linear-gradient(to bottom, var(--color-grid) var(--rule), transparent var(--rule));
  background-size: 3.75rem 3.75rem;
  mask-image: linear-gradient(to bottom, var(--color-ink), transparent 88%);
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.hero-copy { min-width: 0; }

.catalog-code,
.section-index {
  margin: 0 0 var(--space-md);
  color: var(--color-accent-deep);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3, p { overflow-wrap: anywhere; }

h1, h2, h3 {
  min-width: 0;
  margin-block-start: 0;
  color: var(--color-ink);
  font-style: normal;
}

h1 {
  max-width: 12ch;
  margin-block-end: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.hero-lede {
  max-width: 61ch;
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

.button,
.text-link {
  white-space: nowrap;
  font-weight: 750;
  text-decoration: none;
}

.button {
  min-height: 3rem;
  padding: var(--space-xs) var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: var(--rule) solid transparent;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}

.button-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.button-primary:hover { background: var(--color-accent-deep); }
.button-primary:active { transform: translateY(1px); }

.text-link {
  padding-block: var(--space-xs);
  border-block-end: var(--rule) solid var(--color-ink);
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.text-link:hover {
  color: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
}

.hero-metadata {
  margin: var(--space-xl) 0 0;
  padding-block-start: var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  border-block-start: var(--rule) solid var(--color-rule);
}

.hero-metadata div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-xs);
}

.hero-metadata dt,
.hero-metadata dd {
  margin: 0;
  font-size: var(--text-xs);
}

.hero-metadata dt {
  color: var(--color-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.hero-metadata dd { color: var(--color-ink-2); }

.evidence-map {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-accent-ink);
  background: var(--color-ink);
  border: var(--rule) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: 0 28px 70px -42px var(--color-shadow);
}

.evidence-head {
  min-height: 3.5rem;
  padding-inline: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border-block-end: var(--rule) solid color-mix(in oklch, var(--color-accent-ink) 18%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.evidence-head span:last-child { color: var(--color-warm); }

.evidence-field {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 20rem;
}

.evidence-lines {
  position: absolute;
  inset: 5%;
  width: 90%;
  height: 90%;
  color: color-mix(in oklch, var(--color-accent-ink) 22%, transparent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-dasharray: 4 7;
}

.evidence-core {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 45%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.evidence-core span,
.evidence-node span {
  display: block;
  margin-block-end: var(--space-3xs);
  color: var(--color-warm);
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.5vw, var(--text-xs));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.evidence-core strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3vw, 1.75rem);
  font-weight: 500;
  line-height: 1.1;
}

.evidence-node {
  position: absolute;
  min-width: 5.25rem;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule) solid color-mix(in oklch, var(--color-accent-ink) 28%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--color-ink) 88%, var(--color-accent) 12%);
  text-align: center;
}

.evidence-node strong {
  display: block;
  color: var(--color-accent-ink);
  font-size: clamp(0.68rem, 1.8vw, var(--text-sm));
}

.node-writing { inset-block-start: 10%; inset-inline-start: 12%; }
.node-classroom { inset-block-start: 13%; inset-inline-end: 8%; }
.node-strategy { inset-block-start: 56%; inset-inline-end: 5%; }
.node-cognition { inset-block-end: 7%; inset-inline-start: 43%; }
.node-literacy { inset-block-start: 61%; inset-inline-start: 4%; }

.evidence-map figcaption {
  margin: 0;
  padding: var(--space-sm);
  border-block-start: var(--rule) solid color-mix(in oklch, var(--color-accent-ink) 18%, transparent);
  color: color-mix(in oklch, var(--color-accent-ink) 72%, transparent);
  font-size: var(--text-sm);
}

.scope-band {
  background: var(--color-paper-2);
  border-block-end: var(--rule) solid var(--color-rule);
}

.scope-grid {
  padding-block: var(--space-md);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  align-items: center;
}

.scope-grid div {
  min-width: 0;
  padding-inline-end: var(--space-sm);
  border-inline-end: var(--rule) solid var(--color-rule);
}

.scope-grid strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1;
}

.scope-grid span {
  display: block;
  margin-block-start: var(--space-3xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.scope-grid p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-accent-deep);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.archive-purpose,
.archive-index { padding-block: var(--space-3xl); }

.purpose-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

.purpose-intro h2,
.trajectory-head h2,
.index-head h2 {
  margin-block-end: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.purpose-intro > p:last-child,
.trajectory-head p,
.index-head p {
  max-width: var(--measure);
  margin: 0;
  color: var(--color-ink-2);
}

.purpose-ledger { border-block-start: var(--rule) solid var(--color-ink); }

.purpose-ledger article {
  padding-block: var(--space-lg);
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-md);
  border-block-end: var(--rule) solid var(--color-rule);
}

.ledger-num {
  color: var(--color-warm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.purpose-ledger h3 {
  margin-block-end: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 750;
  line-height: 1.25;
}

.purpose-ledger p {
  max-width: var(--measure);
  margin: 0;
  color: var(--color-ink-2);
}

.research-trajectory {
  padding-block: var(--space-3xl);
  background: var(--color-ink);
  color: var(--color-accent-ink);
}

.trajectory-head {
  margin-block-end: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.trajectory-head h2 {
  max-width: 13ch;
  color: var(--color-accent-ink);
}

.trajectory-head p { color: color-mix(in oklch, var(--color-accent-ink) 70%, transparent); }
.trajectory-list { border-block-start: var(--rule) solid color-mix(in oklch, var(--color-accent-ink) 24%, transparent); }

.trajectory-list article {
  padding-block: var(--space-lg);
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-md);
  border-block-end: var(--rule) solid color-mix(in oklch, var(--color-accent-ink) 18%, transparent);
}

.trajectory-year {
  color: var(--color-warm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.trajectory-copy h3 {
  margin-block-end: var(--space-2xs);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.25;
}

.trajectory-copy p {
  max-width: var(--measure);
  margin: 0;
  color: color-mix(in oklch, var(--color-accent-ink) 68%, transparent);
}

.trajectory-tag {
  display: none;
  align-self: start;
  justify-self: end;
  padding: var(--space-3xs) var(--space-xs);
  border: var(--rule) solid color-mix(in oklch, var(--color-accent-ink) 28%, transparent);
  border-radius: var(--radius-pill);
  color: color-mix(in oklch, var(--color-accent-ink) 74%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.index-head { margin-block-end: var(--space-xl); }
.resource-index { border-block-start: 2px solid var(--color-ink); }

.resource-index a {
  min-width: 0;
  padding-block: var(--space-lg);
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.5rem;
  gap: var(--space-md);
  align-items: center;
  border-block-end: var(--rule) solid var(--color-rule);
  text-decoration: none;
  transition: background var(--dur-short) var(--ease-out), padding var(--dur-medium) var(--ease-out);
}

.resource-index a:hover {
  padding-inline: var(--space-sm);
  background: var(--color-paper-2);
}

.resource-index a:active { background: var(--color-paper-3); }

.resource-num {
  color: var(--color-warm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.resource-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-3xs);
}

.resource-copy strong {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.resource-copy small {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.resource-arrow {
  color: var(--color-accent-deep);
  font-size: var(--text-xl);
  transition: transform var(--dur-short) var(--ease-out);
}

.resource-index a:hover .resource-arrow { transform: translate(3px, -3px); }

.site-footer {
  padding-block: var(--space-xl);
  background: var(--color-paper-2);
  border-block-start: var(--rule) solid var(--color-rule);
}

.footer-grid {
  display: grid;
  gap: var(--space-lg);
}

.footer-title {
  max-width: 26ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.1;
}

.footer-subtitle {
  max-width: 55ch;
  margin: var(--space-xs) 0 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.footer-meta a {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .page-shell { width: min(100% - 3rem, var(--page-max)); }

  .hero-metadata { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-metadata div { display: block; }
  .hero-metadata dt { margin-block-end: var(--space-3xs); }

  .scope-grid { grid-template-columns: repeat(3, minmax(0, 0.7fr)) minmax(0, 2.2fr); }
  .scope-grid p { grid-column: auto; }

  .trajectory-list article { grid-template-columns: 5rem minmax(0, 1fr) auto; }
  .trajectory-tag { display: inline-flex; }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 60rem) {
  .desktop-nav { display: flex; }
  .download-link { display: inline-flex; }
  .mobile-menu { display: none; }

  .hero {
    min-height: 48rem;
    padding-block-start: calc(var(--nav-height) + var(--space-2xl));
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
    gap: clamp(3rem, 6vw, 6rem);
  }

  .purpose-layout {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
  }

  .purpose-intro { position: sticky; inset-block-start: calc(var(--nav-height) + var(--space-lg)); }

  .trajectory-head {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: end;
    gap: clamp(3rem, 8vw, 8rem);
  }

  .footer-meta { justify-content: flex-end; }
}

@media (min-width: 90rem) {
  .page-shell { width: min(100% - 6rem, var(--page-max)); }
}

@media (hover: hover) and (pointer: fine) {
  .button:hover,
  .download-link:hover { transform: translateY(-2px); }
}

@media (pointer: coarse) {
  .button,
  .download-link,
  .mobile-menu summary { min-height: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .site-header,
  .hero-actions,
  .mobile-menu,
  .site-footer { display: none; }

  body,
  .research-trajectory,
  .evidence-map {
    background: var(--color-paper);
    color: var(--color-ink);
  }

  .hero {
    margin: 0;
    padding-block: var(--space-xl);
  }

  .hero::before { display: none; }
}


.archive-note{font-size:.9rem;line-height:1.6;color:#4e5b54;max-width:620px}