/* Design tokens */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope/Manrope-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-bg: hsl(50, 100%, 100%, 1);
  --color-surface: hsla(53, 31%, 99%, 1);
  --color-text: hsla(204, 42%, 19%, 1);
  --color-muted: hsla(204, 42%, 19%, 0.7);
  --color-border: hsla(204, 42%, 19%, 0.2);
  --color-primary: hsla(192, 68%, 21%, 1);
  --color-primary-strong: hsla(204, 42%, 19%, 1);
  --color-on-primary: hsla(53, 31%, 95%, 1);
  --color-accent: hsla(30, 100%, 60%, 1);     
  --color-accent-muted: hsla(47, 100%, 50%, 1);
  /* neutral palette from white to black for flexible UI accents */
  --color-neutral: hsla(0, 0%, 100%, 1);
  --color-neutral-100: hsla(0, 0%, 90%, 1);
  --color-neutral-200: hsla(0, 0%, 80%, 1);
  --color-neutral-300: hsla(0, 0%, 70%, 1);
  --color-neutral-400: hsla(0, 0%, 60%, 1);
  --color-neutral-500: hsla(0, 0%, 50%, 1);
  --color-neutral-600: hsla(0, 0%, 40%, 1);
  --color-neutral-700: hsla(0, 0%, 30%, 1);
  --color-neutral-800: hsla(0, 0%, 20%, 1);
  --color-neutral-900: hsla(0, 0%, 10%, 1);
  --color-neutral-1000: hsla(0, 0%, 0%, 1);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  /* Card shadows: tighter + softer, with NE light source (shadow cast to SW). */
  --shadow-card-tight: -6px 8px 18px rgba(15, 23, 42, 0.10), -2px 3px 8px rgba(15, 23, 42, 0.06);
  --shadow-card-tight-hover: -8px 12px 24px rgba(15, 23, 42, 0.12), -3px 5px 10px rgba(15, 23, 42, 0.07);
  --shadow-card-tight-subtle: -4px 6px 14px rgba(15, 23, 42, 0.08), -1px 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-card-tight-dark: -7px 11px 24px rgba(6, 7, 12, 0.26), -2px 4px 10px rgba(6, 7, 12, 0.16);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --font-body:  'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-size-base: 16px;
  --line-height-base: 1.5;
  --type-p: clamp(0.95rem, 0.85rem + 0.4vw, 1rem);
  --type-h6: clamp(1.15rem, 0.8rem + 0.8vw, 1.25rem);
  --type-h5: clamp(1.35rem, 0.85rem + 1.2vw, 1.5625rem);
  --type-h4: clamp(1.65rem, 0.95rem + 1.8vw, 1.953rem);
  --type-h3: clamp(2rem, 1rem + 2.2vw, 2.441rem);
  --type-h2: clamp(2.25rem, 1.2rem + 3vw, 3.052rem);
  --type-h1: clamp(2.5rem, 1.25rem + 4vw, 3.815rem);
  --type-card-title: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --weight-card-title: 550;
  --header-h: 72px;
  --header-h-scrolled: 72px;
  --pub-abstract-maxh: 400px;
  --content-max-width: 1200px;
  --section-inline-pad: clamp(16px, 4vw, 48px);
}

/* Base font sizing per breakpoint */
@media (min-width: 768px) {
  :root { --font-size-base: 17px; }
}

@media (min-width: 1024px) {
  :root { --font-size-base: 18px; }
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: var(--font-size-base); }
body {
  margin: 0;
  font-family: var(--font-body);
  letter-spacing: 0.12px;
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}
button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
.muted,
.text-muted { color: var(--color-muted); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.85rem; color: var(--color-muted); margin: 0; }
.type-card-title {
  font-family: var(--font-body);
  font-size: var(--type-card-title);
  font-weight: var(--weight-card-title);
  line-height: 1.25;
}
/* Site-wide typography mappings mirrored from the design-system reference */
:where(.primary-nav a, .mobile-menu nav a:not(.btn)) {
  font-size: 0.85rem;
}
.update-card__title,
.testimonial-card__name,
.project-card__title,
.teaching-card__title,
.expertise-card h3,
.card h3 {
  font-family: var(--font-body);
  font-size: var(--type-card-title);
  font-weight: var(--weight-card-title);
  line-height: 1.25;
}
.symbol-text { font-family: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; width: auto; height: auto; padding: 8px 12px; background: #000; color: #fff; z-index: 10000; }
.section-rule {
  height: 1px;
  background: var(--color-border);
  border: 0;
  margin: var(--space-2) 0 var(--space-3);
}
h1, h2,
h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin: 0 0 var(--space-2);
}
h1 {
  font-size: var(--type-h1);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 600;
}
h2 {
  font-size: var(--type-h2);
  line-height: 1.1;
  font-weight: 600;
}
h3 {
  font-size: var(--type-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 500;
}
h4 {
  font-size: var(--type-h4);
  line-height: 1.3;
  font-weight: 500;
}
h5 {
  font-size: var(--type-h5);
  line-height: 1.35;
  font-weight: 500;
}
h6 {
  font-size: var(--type-h6);
  line-height: 1.35;
  letter-spacing: -0.005em;
  font-weight: 500;
}
p { 
  margin: 0 0 var(--space-3);
  font-weight: 400; 
  font-size: var(--type-p);
  line-height: 1.5; 
}