/* Page-specific compositions and understated movement. */
.hero { padding-block: clamp(4rem, 8vw, 7rem) var(--space-5); }
.hero .eyebrow { animation: settle 420ms var(--ease-out) both; }
.hero h1 { max-width: 17ch; margin-top: var(--space-3); animation: settle 460ms 60ms var(--ease-out) both; }
.hero h1 em { color: var(--observer); font-style: italic; }
.hero .lede { max-width: 62ch; margin-top: var(--space-4); color: var(--muted); font-size: var(--text-md); animation: settle 480ms 120ms var(--ease-out) both; }

@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.pillar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.pillar { padding: clamp(1.75rem, 3.5vw, 2.75rem); border-radius: 0.7rem; background: var(--observer-soft); }
.pillar-security { background: var(--study-soft); }
.pillar p { margin-top: var(--space-3); color: var(--muted); }

.impact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.impact-card { padding: clamp(1.5rem, 2.8vw, 2.35rem); border-radius: 0.7rem; background: var(--paper-alt); }
.impact-value { color: var(--observer); font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; }
.impact-card h3 { margin-top: var(--space-2); font-size: 1.3rem; }
.impact-card p:last-child { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); }

.approach-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); counter-reset: approach; }
.approach-grid li { padding: var(--space-3); border-radius: 0.6rem; background: var(--paper-alt); }
.approach-grid h3 { margin-top: var(--space-2); font-size: 1.25rem; }
.approach-grid p { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.approach-number { color: var(--observer); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; }

.now-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.now-list li { padding: var(--space-3); border-radius: 0.6rem; background: var(--paper-alt); color: var(--muted); font-size: var(--text-sm); }
.now-list .what { display: block; margin-bottom: 0.25rem; color: var(--text); font-family: var(--font-display); font-size: var(--text-lg); }
.tracks-note { max-width: 62ch; margin-top: var(--space-3); color: var(--muted); font-size: var(--text-sm); }

.repo-featured { padding: clamp(1.75rem, 4vw, 3.25rem); border-radius: 0.7rem; background: var(--observer-soft); }
.repo-featured .meta, .repo-card .meta { margin-top: var(--space-1); color: var(--faint); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.repo-featured p { margin-top: var(--space-2); color: var(--muted); }
.repo-featured .repo-link, .repo-card .repo-link { display: inline-block; margin-top: var(--space-3); font-family: var(--font-label); font-size: var(--text-sm); font-weight: 600; }
.repo-card { padding: var(--space-4) var(--space-4) calc(var(--space-4) + 0.5rem); border-radius: 0.7rem; background: var(--paper-alt); }
.repo-card p { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); }

.majors { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.majors li { padding: 0.35rem 0.6rem; border-radius: 0.35rem; background: var(--paper-alt); color: var(--muted); font-family: var(--font-label); font-size: var(--text-sm); }
.contact-list { display: grid; max-width: 34rem; gap: 0.5rem; }
.contact-intro { margin-bottom: var(--space-3); }
.contact-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: 0.5rem; background: var(--paper-alt); }
.contact-list .label { color: var(--faint); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.prose p + p { margin-top: var(--space-3); }
.credentials-intro { margin-bottom: var(--space-3); }
.repository-archive { margin-top: var(--space-4); }

body[data-page="studies"] .ledger-when,
body[data-page="studies"] .ledger-what .org,
body[data-page="studies"] .chip { color: var(--study); }
body[data-page="studies"] .chip { background: var(--study-soft); }

@media (max-width: 44rem) {
  .pillar-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
  .now-list { grid-template-columns: 1fr; }
  .now-list li, .now-list li + li { padding: var(--space-3); }
}

@media (min-width: 44.01rem) and (max-width: 68rem) {
  .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero .lede { animation: none; }
}