/* ==========================================================================
   design-system.css — Making the Underground Visible
   Kevin Powell-grade CSS architecture: CUBE methodology
   Composition | Utility | Block | Exception
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layer 0: Custom Properties — 3-tier token system
   Design tokens → Semantic tokens → Component tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Design Tokens (raw palette) --- */
  /* oklch(lightness chroma hue) — perceptual uniformity */
  --raw-ink-950:     oklch(0.145 0.015 260);
  --raw-ink-900:     oklch(0.175 0.018 260);
  --raw-ink-850:     oklch(0.195 0.016 260);
  --raw-ink-800:     oklch(0.215 0.014 258);
  --raw-ink-700:     oklch(0.30  0.010 255);
  --raw-ink-500:     oklch(0.50  0.010 260);
  --raw-ink-400:     oklch(0.62  0.008 260);
  --raw-ink-200:     oklch(0.82  0.010 80);
  --raw-ink-100:     oklch(0.90  0.012 75);
  --raw-ink-50:      oklch(0.95  0.010 75);

  --raw-amber-500:   oklch(0.78  0.155 75);
  --raw-amber-400:   oklch(0.83  0.135 78);
  --raw-amber-300:   oklch(0.88  0.110 80);
  --raw-amber-dim:   oklch(0.78  0.155 75 / 0.12);

  --raw-violet-500:  oklch(0.62  0.180 290);
  --raw-violet-400:  oklch(0.70  0.155 288);
  --raw-violet-dim:  oklch(0.62  0.180 290 / 0.12);

  --raw-teal-500:    oklch(0.72  0.130 180);
  --raw-teal-400:    oklch(0.78  0.110 178);
  --raw-teal-dim:    oklch(0.72  0.130 180 / 0.10);

  --raw-rose-500:    oklch(0.65  0.200 15);

  /* --- Semantic Tokens --- */
  --clr-bg:          var(--raw-ink-950);
  --clr-surface:     var(--raw-ink-900);
  --clr-surface-raised: var(--raw-ink-850);
  --clr-border:      var(--raw-ink-800);
  --clr-border-subtle: var(--raw-ink-700);

  --clr-text:        var(--raw-ink-200);
  --clr-text-bright: var(--raw-ink-50);
  --clr-text-muted:  var(--raw-ink-400);
  --clr-text-faint:  var(--raw-ink-500);

  --clr-accent:      var(--raw-amber-500);
  --clr-accent-hover: var(--raw-amber-400);
  --clr-accent-dim:  var(--raw-amber-dim);
  --clr-link:        var(--raw-violet-400);
  --clr-link-hover:  var(--raw-violet-500);
  --clr-link-dim:    var(--raw-violet-dim);
  --clr-data:        var(--raw-teal-500);
  --clr-data-dim:    var(--raw-teal-dim);
  --clr-danger:      var(--raw-rose-500);

  /* Gradient accents */
  --gradient-amber:  linear-gradient(135deg, var(--raw-amber-500), var(--raw-amber-300));
  --gradient-brand:  linear-gradient(135deg, var(--raw-amber-500), var(--raw-violet-400));
  --gradient-divider: linear-gradient(90deg, transparent, var(--clr-border), transparent);
  --gradient-hero:   linear-gradient(
    160deg,
    oklch(0.145 0.025 280) 0%,
    oklch(0.155 0.020 260) 30%,
    oklch(0.145 0.018 240) 60%,
    oklch(0.150 0.025 65) 100%
  );

  /* --- Fluid Typography Scale (Utopia-style) ---
     Min viewport: 320px  Max viewport: 1240px
     Min scale: 1.2 (minor third)  Max scale: 1.333 (perfect fourth)
     Base: 16px → 18px */
  --step--2: clamp(0.6944rem, 0.6496rem + 0.2239vw, 0.8438rem);
  --step--1: clamp(0.8333rem, 0.7663rem + 0.3353vw, 1.0625rem);
  --step-0:  clamp(1rem, 0.8913rem + 0.5435vw, 1.375rem);
  --step-1:  clamp(1.2rem, 1.0283rem + 0.8587vw, 1.7938rem);
  --step-2:  clamp(1.44rem, 1.1761rem + 1.3196vw, 2.3625rem);
  --step-3:  clamp(1.728rem, 1.3283rem + 1.9987vw, 3.1563rem);
  --step-4:  clamp(2.0736rem, 1.4717rem + 3.0098vw, 4.2063rem);

  /* --- Fluid Spacing Scale ---
     Proportional to viewport, clamped for sanity */
  --space-3xs: clamp(0.25rem,  0.2174rem + 0.1630vw, 0.375rem);
  --space-2xs: clamp(0.5rem,   0.4457rem + 0.2717vw, 0.6875rem);
  --space-xs:  clamp(0.75rem,  0.6630rem + 0.4348vw, 1.0625rem);
  --space-s:   clamp(1rem,     0.8913rem + 0.5435vw, 1.375rem);
  --space-m:   clamp(1.5rem,   1.3370rem + 0.8152vw, 2.0625rem);
  --space-l:   clamp(2rem,     1.7826rem + 1.0870vw, 2.75rem);
  --space-xl:  clamp(3rem,     2.6739rem + 1.6304vw, 4.125rem);
  --space-2xl: clamp(4rem,     3.5652rem + 2.1739vw, 5.5rem);
  --space-3xl: clamp(6rem,     5.3478rem + 3.2609vw, 8.25rem);

  /* --- Measure (line length) --- */
  --measure-narrow: 45ch;
  --measure:        65ch;
  --measure-wide:   85ch;

  /* --- Radii --- */
  --radius-s:  0.375rem;
  --radius-m:  0.625rem;
  --radius-l:  1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md:  0 4px 12px oklch(0 0 0 / 0.25);
  --shadow-lg:  0 8px 30px oklch(0 0 0 / 0.3);
  --shadow-glow-amber: 0 0 20px oklch(0.78 0.155 75 / 0.15);
  --shadow-glow-violet: 0 0 20px oklch(0.62 0.180 290 / 0.12);

  /* --- Transitions --- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* --- Font stacks --- */
  --font-body: 'Inter', 'Inter Display', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter Display', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}


/* --------------------------------------------------------------------------
   Layer 1: Reset / Normalize — Modern, minimal
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

img, picture, video, canvas {
  display: block;
  max-inline-size: 100%;
}

/* SVGs: block by default, but inline when inside inline-flex containers */
svg {
  display: block;
  max-inline-size: 100%;
}

.btn svg,
.feature-chip-icon svg,
.nav-link svg {
  display: inline;
  max-inline-size: none;
}

input, button, textarea, select {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
  max-inline-size: var(--measure);
}

a {
  color: var(--clr-link);
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--clr-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
}

:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

::selection {
  background-color: oklch(0.78 0.155 75 / 0.25);
  color: var(--clr-text-bright);
}


/* --------------------------------------------------------------------------
   Layer 2: Composition — Layout primitives
   -------------------------------------------------------------------------- */

/* -- Flow: vertical spacing for prose content -- */
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/* -- Wrapper: constrained centered content -- */
.wrapper {
  inline-size: min(var(--wrapper-max, 70rem), 100% - var(--space-m) * 2);
  margin-inline: auto;
}

/* -- Region: vertical section spacing -- */
.region {
  padding-block: var(--region-space, var(--space-xl));
}

/* -- Cluster: horizontal flex group -- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-s));
  align-items: center;
}

/* -- Grid: auto-fit responsive grid -- */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--auto-grid-min, 16rem)), 1fr)
  );
  gap: var(--auto-grid-gap, var(--space-m));
}

/* -- Sidebar: content with sidebar layout -- */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-l));
}

.with-sidebar > :first-child {
  flex-grow: 999;
  min-inline-size: 60%;
}

.with-sidebar > :last-child {
  flex-basis: var(--sidebar-width, 16rem);
  flex-grow: 1;
}


/* --------------------------------------------------------------------------
   Layer 3: Utility classes — Spacing, color, typography
   -------------------------------------------------------------------------- */

/* Visually hidden, accessible to screen readers */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text colors */
.text-bright  { color: var(--clr-text-bright); }
.text-muted   { color: var(--clr-text-muted); }
.text-accent  { color: var(--clr-accent); }

/* Text sizes (fluid) */
.text-sm      { font-size: var(--step--1); }
.text-xs      { font-size: var(--step--2); }
.text-lg      { font-size: var(--step-1); }

/* Measure */
.measure        { max-inline-size: var(--measure); }
.measure-narrow { max-inline-size: var(--measure-narrow); }
.measure-wide   { max-inline-size: var(--measure-wide); }

/* Center text */
.text-center  { text-align: center; }

/* Gradient text */
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Letter spacing */
.tracking-wide { letter-spacing: 0.06em; }
.tracking-tight { letter-spacing: -0.02em; }

/* Uppercase label style */
.label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Layer 4: Block — Component styles
   -------------------------------------------------------------------------- */

/* --- Skip link (accessibility) --- */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: 0;
  background: var(--clr-accent);
  color: var(--clr-bg);
  padding: var(--space-2xs) var(--space-s);
  z-index: 9999;
  font-size: var(--step--1);
  font-weight: 600;
  border-radius: 0 0 var(--radius-m) 0;
}

.skip-link:focus {
  inset-inline-start: 0;
  color: var(--clr-bg);
}

/* --- Site header (sticky, glassmorphism) --- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background-color: oklch(0.145 0.015 260 / 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border-block-end: 1px solid var(--clr-border);
  padding-block: var(--space-xs);
  padding-inline: var(--space-m);
}

.site-header-inner {
  max-inline-size: 70rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.site-title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--clr-text-bright);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-title:hover {
  color: var(--clr-accent);
  text-decoration: none;
}

.breadcrumb {
  font-size: var(--step--1);
  color: var(--clr-text-muted);
}

.breadcrumb a {
  color: var(--clr-text-muted);
}

.breadcrumb a:hover {
  color: var(--clr-accent);
}

.breadcrumb .sep {
  margin-inline: 0.4em;
  opacity: 0.5;
}

/* --- Hero section --- */
.hero {
  position: relative;
  padding-block: var(--space-3xl) var(--space-2xl);
  padding-inline: var(--space-s);
  text-align: center;
}

/* Animated gradient background (CSS only) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  background-size: 200% 200%;
  animation: hero-shimmer 12s ease infinite;
  z-index: -2;
}

/* Subtle grain overlay */
.hero::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 10%;
  block-size: 1px;
  background: var(--gradient-divider);
}

@keyframes hero-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-tag {
  display: inline-block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-accent);
  background: var(--clr-accent-dim);
  padding: var(--space-3xs) var(--space-s);
  border-radius: var(--radius-full);
  margin-block-end: var(--space-m);
  animation: tag-enter 0.8s var(--ease-out) both;
}

@keyframes tag-enter {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 0.5rem + 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--clr-text-bright);
  letter-spacing: -0.025em;
  margin-block-end: var(--space-2xs);
  animation: heading-enter 1s var(--ease-out) 0.15s both;
}

/* Gradient on hero heading */
.hero h1 .gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes heading-enter {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

.hero .subtitle-de {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  color: var(--clr-text-muted);
  letter-spacing: 0.03em;
  margin-block-end: var(--space-2xs);
  animation: subtitle-enter 1s var(--ease-out) 0.3s both;
}

@keyframes subtitle-enter {
  from {
    opacity: 0;
    letter-spacing: 0.15em;
  }
}

.hero .location {
  font-size: var(--step--1);
  color: var(--clr-text-faint);
  margin-block-end: var(--space-xl);
  letter-spacing: 0.02em;
  animation: fade-in 1s var(--ease-out) 0.5s both;
}

@keyframes fade-in {
  from { opacity: 0; }
}

.hero-intro {
  max-inline-size: var(--measure);
  margin-inline: auto;
  text-align: start;
  color: var(--clr-text);
  animation: fade-in 1s var(--ease-out) 0.6s both;
}

.hero-intro p {
  margin-block-end: var(--space-s);
}

.hero-intro p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 3.2em;
  float: inline-start;
  line-height: 0.8;
  font-weight: 700;
  color: var(--clr-accent);
  margin-inline-end: 0.08em;
  margin-block-start: 0.05em;
}

/* --- Feature cards (main CTA cards) --- */
.cards-section {
  --wrapper-max: 60rem;
  padding-block: var(--space-xl);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m);
}

@media (max-width: 42rem) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  position: relative;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-l);
  padding: var(--space-l) var(--space-m);
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  overflow: hidden;
}

/* Gradient border glow on hover via pseudo-element */
.feature-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-brand);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.feature-card:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:focus-within {
  border-color: var(--clr-accent);
}

.card-icon {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-m);
  display: grid;
  place-items: center;
  margin-block-end: var(--space-s);
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.card-icon.viz {
  background: var(--clr-accent-dim);
  color: var(--clr-accent);
}

.card-icon.research {
  background: var(--clr-link-dim);
  color: var(--clr-link);
}

.feature-card h2 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--clr-text-bright);
  margin-block-end: var(--space-xs);
}

.feature-card p {
  font-size: var(--step--1);
  color: var(--clr-text);
  margin-block-end: var(--space-s);
  flex-grow: 1;
}

.card-features {
  list-style: none;
  font-size: var(--step--2);
  color: var(--clr-text-muted);
  margin-block-end: var(--space-m);
  padding-inline-start: 0;
}

.card-features li {
  padding-block: 0.15em;
  padding-inline-start: 1.2em;
  position: relative;
}

.card-features li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  inline-size: 0.4em;
  block-size: 0.4em;
  border-radius: var(--radius-full);
  background: var(--clr-accent);
  opacity: 0.6;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--clr-accent);
  text-decoration: none;
  margin-block-start: auto;
  padding-block: var(--space-3xs);
  transition: gap var(--duration-fast) var(--ease-out);
}

.card-link:hover {
  color: var(--clr-accent-hover);
  text-decoration: none;
  gap: var(--space-2xs);
}

.card-link .arrow {
  transition: transform var(--duration-fast) var(--ease-out);
  display: inline-block;
}

.card-link:hover .arrow {
  transform: translateX(3px);
}

/* --- Research topic cards (smaller, numbered) --- */
.research-section {
  --wrapper-max: 60rem;
  padding-block-start: 0;
  padding-block-end: var(--space-2xl);
}

.research-section h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--clr-text-bright);
  margin-block-end: var(--space-3xs);
}

.section-subtitle {
  font-size: var(--step--1);
  color: var(--clr-text-muted);
  margin-block-end: var(--space-l);
}

.research-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
}

@media (max-width: 50rem) {
  .research-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30rem) {
  .research-grid {
    grid-template-columns: 1fr;
  }
}

.research-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-s);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.research-card:hover {
  border-color: var(--clr-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.research-card .rc-number {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--clr-accent);
  letter-spacing: 0.04em;
  margin-block-end: var(--space-3xs);
  opacity: 0.7;
}

.research-card h3,
.research-card h4 {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--clr-text-bright);
  margin-block-end: var(--space-3xs);
  line-height: 1.35;
}

.research-card p {
  font-size: var(--step--2);
  color: var(--clr-text-muted);
  line-height: 1.55;
}

.research-card a,
.research-card .rc-link {
  display: inline-block;
  margin-block-start: var(--space-2xs);
  font-size: var(--step--2);
  color: var(--clr-accent);
  font-weight: 500;
}

/* --- Research index cards (on research/index.html) --- */
.research-index-header {
  text-align: center;
  margin-block-end: var(--space-l);
}

.research-index-header h1 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--clr-text-bright);
  margin-block-end: var(--space-2xs);
  border: none;
  padding: 0;
}

.research-index-header p {
  color: var(--clr-text-muted);
  font-size: var(--step-0);
  max-inline-size: 40rem;
  margin-inline: auto;
}

.theme-section {
  margin-block-end: var(--space-xl);
}

.theme-title {
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-accent);
  margin-block-end: var(--space-s);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--clr-border-subtle);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-s);
}

/* Research index cards (anchor tags) */
a.research-card {
  color: inherit;
}

a.research-card .card-title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--clr-text-bright);
  margin-block-end: var(--space-3xs);
}

a.research-card .card-desc {
  font-size: var(--step--1);
  color: var(--clr-text-muted);
  flex: 1;
  margin-block-end: var(--space-xs);
  line-height: 1.55;
}

a.research-card .card-meta {
  font-size: var(--step--2);
  color: var(--clr-text-faint);
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
}

a.research-card .card-meta span {
  white-space: nowrap;
}


/* --- Site footer --- */
.site-footer {
  position: relative;
  border-block-start: 1px solid var(--clr-border);
  padding-block: var(--space-l);
  padding-inline: var(--space-m);
  text-align: center;
  font-size: var(--step--2);
  color: var(--clr-text-muted);
}

/* Gradient top border accent */
.site-footer::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 20%;
  block-size: 1px;
  background: var(--gradient-brand);
  opacity: 0.4;
}

.footer-links {
  margin-block-end: var(--space-xs);
}

.footer-links a {
  color: var(--clr-text-muted);
  margin-inline: var(--space-xs);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-links a:hover {
  color: var(--clr-text-bright);
  text-decoration: none;
}

.footer-credit {
  font-size: var(--step--2);
  color: var(--clr-text-faint);
  margin: 0;
}


/* --------------------------------------------------------------------------
   Layer 5: Research article styles (long-form content)
   -------------------------------------------------------------------------- */

/* Content area for articles */
.content-area {
  flex: 1;
  max-inline-size: min(var(--measure-wide), 100%);
  margin-inline: auto;
  padding-block: var(--space-l) var(--space-2xl);
  padding-inline: var(--space-m);
}

/* Article meta box */
.article-meta {
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
  margin-block-end: var(--space-l);
  font-size: var(--step--1);
  line-height: 1.6;
}

.article-meta p {
  margin-block: var(--space-3xs);
}

.article-meta strong {
  color: var(--clr-accent);
}

/* Article typography */
.content-area h1 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--clr-text-bright);
  margin-block: 0 var(--space-xs);
  line-height: 1.2;
  border-block-end: 1px solid var(--clr-border-subtle);
  padding-block-end: var(--space-xs);
}

.content-area h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--clr-text-bright);
  margin-block: var(--space-xl) var(--space-s);
  padding-block-end: var(--space-3xs);
  border-block-end: 1px solid var(--clr-border-subtle);
}

.content-area h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--clr-text-bright);
  margin-block: var(--space-l) var(--space-xs);
}

.content-area h4 {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--clr-text);
  margin-block: var(--space-m) var(--space-2xs);
}

.content-area h5 {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--clr-text);
  margin-block: var(--space-s) var(--space-2xs);
}

.content-area p {
  margin-block-end: var(--space-s);
}

.content-area strong {
  color: var(--clr-text-bright);
  font-weight: 600;
}

.content-area hr {
  border: none;
  border-block-start: 1px solid var(--clr-border);
  margin-block: var(--space-xl);
}

/* Lists */
.content-area ul,
.content-area ol {
  padding-inline-start: 1.75em;
  margin-block-end: var(--space-s);
}

.content-area li {
  margin-block-end: 0.35em;
}

.content-area li > ul,
.content-area li > ol {
  margin-block-start: 0.35em;
  margin-block-end: 0;
}

/* Tables (modern: subtle borders, hover highlight, no zebra) */
.table-wrapper {
  overflow-x: auto;
  margin-block: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  border: 1px solid var(--clr-border);
}

.content-area table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: 1.5;
}

.content-area thead {
  background-color: var(--clr-surface);
}

.content-area th {
  text-align: start;
  padding: var(--space-2xs) var(--space-xs);
  font-weight: 600;
  color: var(--clr-text-bright);
  border-block-end: 2px solid var(--clr-border);
  white-space: nowrap;
}

.content-area td {
  padding: var(--space-3xs) var(--space-xs);
  border-block-end: 1px solid var(--clr-border-subtle);
  vertical-align: top;
}

.content-area tbody tr {
  transition: background-color var(--duration-fast) var(--ease-out);
}

.content-area tbody tr:hover {
  background-color: oklch(0.78 0.155 75 / 0.04);
}

/* Code */
.content-area code {
  background-color: oklch(0.50 0.010 260 / 0.25);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--clr-text-bright);
}

.content-area pre {
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
  overflow-x: auto;
  margin-block: var(--space-s) var(--space-m);
  line-height: 1.5;
}

.content-area pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: var(--step--2);
  color: var(--clr-text);
}

/* Blockquotes */
.content-area blockquote {
  border-inline-start: 3px solid var(--clr-accent);
  margin-block: var(--space-s) var(--space-m);
  padding: var(--space-2xs) var(--space-s);
  background-color: oklch(0.78 0.155 75 / 0.03);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--clr-text-muted);
}

.content-area blockquote p {
  margin-block: var(--space-3xs);
}

.content-area blockquote strong {
  color: var(--clr-text);
}

/* ToC */
.toc {
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
  margin-block: var(--space-m);
}

.toc-title {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--clr-text-bright);
  margin-block-end: var(--space-xs);
}

.toc ol, .toc ul {
  margin: 0;
  padding-inline-start: 1.25em;
}

.toc li {
  margin-block-end: var(--space-3xs);
  font-size: var(--step--1);
}

.toc a {
  color: var(--clr-text-muted);
}

.toc a:hover {
  color: var(--clr-accent);
}

/* Page navigation (prev/next) */
.page-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-l);
  border-block-start: 1px solid var(--clr-border);
}

.page-nav a {
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-m);
  background-color: var(--clr-surface);
  text-decoration: none;
  max-inline-size: 48%;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.page-nav a:hover {
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-glow-amber);
  text-decoration: none;
}

.page-nav .nav-label {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-muted);
  margin-block-end: var(--space-3xs);
}

.page-nav .nav-title {
  color: var(--clr-accent);
  font-size: var(--step--1);
  font-weight: 500;
}

.page-nav .nav-next {
  margin-inline-start: auto;
  text-align: end;
}

/* Back to top */
.back-to-top {
  display: block;
  text-align: center;
  margin-block: var(--space-l) var(--space-s);
  font-size: var(--step--1);
}


/* --------------------------------------------------------------------------
   Layer 6: Scroll-driven animations
   Progressive enhancement — only if browser supports
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  .research-card,
  .feature-card {
    animation: card-reveal linear both;
    animation-timeline: view();
    animation-range: entry -20% entry 20%;
  }

  @keyframes card-reveal {
    from {
      opacity: 0.2;
      transform: translateY(0.75rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}


/* --------------------------------------------------------------------------
   Layer 7: Accessibility & Motion safety
   -------------------------------------------------------------------------- */

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

/* Ensure minimum 44x44 touch targets */
@media (pointer: coarse) {
  .card-link,
  .footer-links a,
  .breadcrumb a,
  .page-nav a,
  .toc a,
  .research-card a {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Page wrapper for flex column layout */
.page-wrapper {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}

/* --- Responsive for small screens --- */
@media (max-width: 40rem) {
  .site-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-nav {
    flex-direction: column;
  }

  .page-nav a {
    max-inline-size: 100%;
  }

  .page-nav .nav-next {
    margin-inline-start: 0;
    text-align: start;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 25rem) {
  .content-area {
    padding-inline: var(--space-s);
  }
}


/* --------------------------------------------------------------------------
   Layer 8: View transitions (progressive)
   -------------------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: var(--duration-slow) var(--ease-out) both fade-out;
}

::view-transition-new(root) {
  animation: var(--duration-slow) var(--ease-out) both fade-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}


/* ==========================================================================
   Layer 9: Krug rewrite — Navigation, Hero visual, CTAs, Feature strip
   Added 2026-03-25 for "Don't Make Me Think" compliance
   ========================================================================== */

/* --- Navigation list (horizontal, within sticky header) --- */
.nav-list {
  list-style: none;
  display: flex;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--clr-text-muted);
  text-decoration: none;
  border-radius: var(--radius-s);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
  min-block-size: 44px;
}

.nav-link:hover {
  color: var(--clr-text-bright);
  background-color: oklch(0.78 0.155 75 / 0.06);
  text-decoration: none;
}

.nav-link:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* --- Hero visual: CSS-only underground layer teaser --- */
.hero {
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-inline-size: 50rem;
  margin-inline: auto;
}

.hero-layers {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.35;
}

.hero-layer {
  position: absolute;
  inset-inline: 0;
  block-size: 20%;
  border-block-start: 1px solid oklch(0.78 0.155 75 / 0.15);
}

.hero-layer[data-layer="surface"] {
  inset-block-start: 30%;
  background: linear-gradient(180deg,
    oklch(0.30 0.04 140 / 0.3) 0%,
    oklch(0.25 0.03 140 / 0.15) 100%
  );
}

.hero-layer[data-layer="shallow"] {
  inset-block-start: 42%;
  background: linear-gradient(180deg,
    oklch(0.28 0.06 75 / 0.2) 0%,
    oklch(0.22 0.04 75 / 0.1) 100%
  );
}

.hero-layer[data-layer="mid"] {
  inset-block-start: 54%;
  background: linear-gradient(180deg,
    oklch(0.25 0.08 290 / 0.2) 0%,
    oklch(0.20 0.05 290 / 0.1) 100%
  );
}

.hero-layer[data-layer="deep"] {
  inset-block-start: 66%;
  background: linear-gradient(180deg,
    oklch(0.22 0.06 180 / 0.2) 0%,
    oklch(0.18 0.04 180 / 0.1) 100%
  );
}

.hero-layer[data-layer="tunnel"] {
  inset-block-start: 78%;
  background: linear-gradient(180deg,
    oklch(0.18 0.03 260 / 0.3) 0%,
    oklch(0.14 0.02 260 / 0.15) 100%
  );
}

/* Horizontal grid lines suggesting underground strata */
.hero-layers::after {
  content: '';
  position: absolute;
  inset: 30% 0 0 0;
  background: repeating-linear-gradient(
    180deg,
    oklch(0.78 0.155 75 / 0.06) 0px,
    transparent 1px,
    transparent 48px
  );
  pointer-events: none;
}

/* --- Hero subtitle (German design accent) --- */
.hero-subtitle {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  color: var(--clr-text-muted);
  letter-spacing: 0.03em;
  margin-block-end: var(--space-2xs);
  animation: subtitle-enter 1s var(--ease-out) 0.3s both;
}

/* --- Hero single line (replaces 3-paragraph essay) --- */
.hero-line {
  font-size: var(--step-0);
  color: var(--clr-text);
  max-inline-size: 38ch;
  margin-inline: auto;
  margin-block-end: var(--space-l);
  animation: fade-in 1s var(--ease-out) 0.5s both;
}

/* --- Hero CTA button group --- */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  animation: fade-in 1s var(--ease-out) 0.65s both;
}

/* --- Buttons: actual clickable affordances, not tiny text links --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-m);
  border: 2px solid transparent;
  cursor: pointer;
  min-block-size: 48px;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  flex-shrink: 0;
}

/* Primary: filled amber — the main CTA */
.btn-primary {
  background: var(--gradient-amber);
  color: var(--raw-ink-950);
  border-color: var(--raw-amber-500);
}

.btn-primary:hover {
  color: var(--raw-ink-950);
  box-shadow: var(--shadow-glow-amber), var(--shadow-md);
  text-decoration: none;
}

.btn-primary svg {
  stroke: var(--raw-ink-950);
}

/* Secondary: outlined — the alternate CTA */
.btn-secondary {
  background: transparent;
  color: var(--clr-text-bright);
  border-color: var(--clr-border);
}

.btn-secondary:hover {
  color: var(--clr-accent);
  border-color: var(--clr-accent);
  background: var(--clr-accent-dim);
  text-decoration: none;
}

/* --- Feature strip: quick-scan chips below hero --- */
.features-strip {
  padding-block: var(--space-m) var(--space-l);
}

.features-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-s);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: var(--step--1);
  color: var(--clr-text);
  white-space: nowrap;
}

.feature-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--2);
  color: var(--clr-accent);
  min-inline-size: 1.25em;
}

.feature-chip-icon svg {
  display: inline;
  color: var(--clr-accent);
}

/* --- Research categories: grouped headings for cognitive chunking --- */
.research-category {
  margin-block-end: var(--space-l);
}

.category-title {
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-accent);
  margin-block-end: var(--space-s);
  padding-block-end: var(--space-3xs);
  border-block-end: 1px solid var(--clr-border-subtle);
}

/* 3-column variant for categorized research grid */
.research-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 50rem) {
  .research-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30rem) {
  .research-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Research cards as full anchor tags — entire card is clickable */
a.research-card {
  text-decoration: none;
  color: inherit;
}

a.research-card:hover {
  text-decoration: none;
}

/* --- About section (moved essay content, trimmed) --- */
.about-section {
  padding-block: var(--space-xl) var(--space-2xl);
  border-block-start: 1px solid var(--clr-border-subtle);
}

.about-section h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--clr-text-bright);
  margin-block-end: var(--space-s);
}

.about-content {
  max-inline-size: var(--measure);
}

.about-content p {
  color: var(--clr-text);
  margin-block-end: var(--space-s);
}

.about-content strong {
  color: var(--clr-text-bright);
}

/* --- Responsive: hero buttons stack on small screens --- */
@media (max-width: 30rem) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    justify-content: center;
  }
}

/* Touch targets for nav on coarse pointers */
@media (pointer: coarse) {
  .nav-link {
    min-block-size: 44px;
    padding: var(--space-2xs) var(--space-xs);
  }

  .btn {
    min-block-size: 48px;
  }

  .feature-chip {
    min-block-size: 44px;
    padding-block: var(--space-2xs);
  }
}

/* Scroll-driven reveal for new components */
@supports (animation-timeline: view()) {
  .feature-chip {
    animation: card-reveal linear both;
    animation-timeline: view();
    animation-range: entry -20% entry 15%;
  }

  .research-category {
    animation: card-reveal linear both;
    animation-timeline: view();
    animation-range: entry -20% entry 15%;
  }

  .about-section {
    animation: card-reveal linear both;
    animation-timeline: view();
    animation-range: entry -20% entry 15%;
  }
}