:root { --bg: #f4efe7; --bg-accent: #efe7dc; --surface: rgba(255, 252, 247, 0.76); --surface-strong: rgba(255, 250, 244, 0.94); --text: #201c17; --muted: #6d655c; --border: rgba(99, 84, 66, 0.18); --border-strong: rgba(99, 84, 66, 0.32); --accent: #305c78; --accent-deep: #1d435e; --shadow: 0 20px 60px rgba(44, 31, 18, 0.09); --radius-lg: 28px; --radius-md: 18px; --radius-sm: 999px; }

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

html { scroll-behavior: smooth; }

body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, rgba(255, 250, 244, 0.92), transparent 30rem), linear-gradient(180deg, #f7f2ea 0%, var(--bg) 55%, #f2ece2 100%); color: var(--text); font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

a { color: var(--accent); text-decoration: none; transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; }

a:hover { color: var(--accent-deep); }

p, ul, ol { margin: 0; }

img { max-width: 100%; display: block; }

.page-shell { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 40px 0 72px; }

.resume-page { display: grid; gap: 24px; }

.hero, .section { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(14px); }

.hero { padding: 48px 48px 44px; background: radial-gradient(circle at top right, rgba(48, 92, 120, 0.13), transparent 22rem), linear-gradient(135deg, rgba(255, 251, 247, 0.98), rgba(246, 239, 229, 0.92)); }

.hero::after, .section::after { content: ""; position: absolute; inset: auto -10% -40% auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(48, 92, 120, 0.07), transparent 68%); pointer-events: none; }

.eyebrow, .section-kicker, .work-type, .stack-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.hero h1, .section h2 { margin: 0; font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif; letter-spacing: -0.045em; font-weight: 800; }

.hero h1 { max-width: 10ch; margin-top: 0.35rem; font-size: clamp(3.2rem, 7vw, 5.4rem); line-height: 0.94; }

.hero-summary { max-width: 42rem; margin-top: 0.5rem; font-size: 1.12rem; color: rgba(32, 28, 23, 0.9); }

.contact-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.35rem; }

.contact-row a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.7rem 1rem; border: 1px solid rgba(48, 92, 120, 0.16); border-radius: var(--radius-sm); background: rgba(255, 252, 247, 0.82); color: var(--text); font-weight: 600; white-space: nowrap; }

.contact-row a:hover { transform: translateY(-1px); border-color: rgba(48, 92, 120, 0.32); background: rgba(255, 252, 247, 0.98); color: var(--accent-deep); }

.section { padding: 34px 36px 38px; }

.section-heading { display: grid; gap: 0.35rem; margin-bottom: 1.5rem; }

.section h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.05; }

.two-column { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr); gap: 1.5rem; align-items: start; }

.prose p { max-width: 40rem; font-size: 1.02rem; color: rgba(32, 28, 23, 0.9); }

.surface-card { position: relative; z-index: 1; padding: 1.35rem 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-strong); }

.surface-card h3, .section-publications h2, .section-publications strong { color: var(--text); }

.surface-card h3, .surface-card h4 { margin: 0 0 0.9rem; font-weight: 700; line-height: 1.25; }

.surface-card h3 { font-size: 1.03rem; }

.surface-card h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

.surface-card ul, .focus-list { padding-left: 1.1rem; }

.surface-card li, .focus-list li { margin-bottom: 0.7rem; }

.surface-card li:last-child, .focus-list li:last-child { margin-bottom: 0; }

.stack-row { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; margin-top: 1.35rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }

.stack-row p { color: var(--muted); }

.accomplishment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.section-block { margin-top: 1rem; }

.three-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.subsection-title { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700; line-height: 1.3; }

.subsection-title-publications { margin-top: 2rem; }

.work-card { display: grid; gap: 0.5rem; min-height: 100%; padding: 1.3rem 1.35rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(255, 252, 247, 0.95), rgba(250, 244, 236, 0.88)); color: var(--text); }

.work-card strong { font-size: 1.05rem; line-height: 1.3; }

.work-card span:last-child { color: var(--muted); }

.work-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 18px 38px rgba(41, 31, 18, 0.08); }

.section-publications { padding-top: 38px; }

.publication-list { display: grid; gap: 0; }

.publication-entry { padding: 0 0 1.05rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgba(99, 84, 66, 0.1); }

.publication-entry:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.section-publications strong { display: inline-block; margin-bottom: 0.12rem; font-size: 1rem; line-height: 1.45; }

.publication-entry h4 { margin: 0 0 0.18rem; font-size: 1rem; line-height: 1.45; }

.publication-entry h4 span { color: var(--muted); font-weight: 600; }

.publication-entry p { margin-bottom: 0.18rem; color: rgba(32, 28, 23, 0.9); }

.section-publications a { font-weight: 600; }

@media (max-width: 980px) { .page-shell { width: min(100% - 1.5rem, 1000px); padding-top: 24px; }
  .hero, .section { padding-left: 24px; padding-right: 24px; }
  .two-column, .three-column, .work-grid, .accomplishment-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .page-shell { width: min(100% - 1rem, 1000px); padding-bottom: 48px; }
  .resume-page { gap: 16px; }
  .hero { padding: 28px 20px 30px; }
  .section { padding: 24px 20px 26px; }
  .hero h1 { max-width: none; font-size: clamp(2.5rem, 15vw, 4rem); }
  .hero-summary { font-size: 1rem; }
  .contact-row { gap: 0.6rem; }
  .contact-row a { width: auto; }
  .stack-row { grid-template-columns: 1fr; gap: 0.35rem; } }