:root {
  --background: #fafcfb;
  --surface: #ffffff;
  --surface-muted: #f3f8f5;
  --text: #182b24;
  --text-muted: var(--text);
  --accent: #286b4e;
  --accent-dark: #174b35;
  --border: #dce5dd;
  --focus: #175bc1;
  --max-width: 1120px;
}
* { box-sizing: border-box; }
::selection { color: #123c2b; background: #cfe8d9; text-shadow: none; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; color: var(--text); background: var(--background); line-height: 1.7; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dark); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, [tabindex='-1']:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.skip-link { position: absolute; top: .75rem; left: .75rem; z-index: 100; transform: translateY(-200%); background: var(--text); color: white; padding: .75rem 1rem; border-radius: 0; }
.skip-link:focus { transform: translateY(0); color: white; }
.site-header, main, .site-footer { width: min(100% - 3rem, var(--max-width)); margin-inline: auto; }
.site-header { position: relative; isolation: isolate; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--border); }
.logo { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; font-size: .95rem; font-weight: 650; text-decoration: none; color: var(--text); }
.logo-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 0; background: var(--accent-dark); color: white; font-family: inherit; font-size: 1.3rem; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .15rem .5rem; padding: 0; margin: 0; list-style: none; }
.nav-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .45rem .65rem; border-radius: 0; font-size: .875rem; color: var(--text-muted); text-decoration: none; transition: background-color 180ms, color 180ms; }
.nav-links a:hover, .nav-links a:focus-visible { background: var(--surface-muted); color: var(--accent-dark); }
.nav-links li:last-child a { padding-inline: 1.1rem; background: var(--accent-dark); color: white; }
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.hero-text { max-width: 700px; min-width: 0; }
.eyebrow, .section-label { margin: 0 0 1.2rem; color: var(--accent-dark); font-size: 1rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow { margin-bottom: .65rem; font-size: .875rem; letter-spacing: .06em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: inherit; font-weight: 600; text-wrap: balance; }
h1 { margin-bottom: 1.5rem; font-size: clamp(2.7rem, 4.6vw, 4.3rem); line-height: 1.08; letter-spacing: -.045em; }
h1 span { color: var(--accent); }
h2 { margin-bottom: 1.2rem; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.15; letter-spacing: -.035em; }
h3 { margin-bottom: .85rem; font-size: 1.15rem; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.intro { max-width: 58ch; color: var(--text-muted); font-size: 1.05rem; }
.button-group { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.7rem; }
.button { position: relative; display: inline-flex; gap: 1.2rem; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.2rem; border: 1px solid var(--border); border-radius: 0; font-family: inherit; line-height: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.button.primary { background: var(--accent-dark); color: white; border-color: var(--accent-dark); }
.button.secondary { background: var(--surface); color: var(--text); }
.button-arrow { display: inline-block; transition: transform 180ms ease; font-size: 1.1rem; }
.button:focus-visible .button-arrow { transform: translateX(3px); }
.button:active { transform: translateY(1px); }
.hero-note { margin: 1.3rem 0 0; color: var(--text-muted); font-size: 1.05rem; }
.hero-note span { padding-inline: .3rem; }
.hero-image { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.hero-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--border); }
.two-column, .education-section, .site-footer { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 5vw, 4rem); }
.prose { max-width: 70ch; color: var(--text-muted); font-size: 1.025rem; }
.prose p:last-child { margin-bottom: 0; }
.section-heading { max-width: 720px; margin-bottom: 2.5rem; }
.section-heading p:not(.section-label) { color: var(--text-muted); }
.section-heading.narrow { max-width: 680px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; counter-reset: principle; }
.card, .info-box, .thesis-card { border: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.card { padding: clamp(1.4rem, 3vw, 2.3rem); background: var(--surface); counter-increment: principle; }
.card p, .info-box p, .strength-grid li, .question-list li { color: var(--text-muted); }
.card p:last-child, .info-box p:last-child { margin-bottom: 0; }
.questions-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 5vw, 4rem); }
.question-list { padding: 0; margin: 0; list-style: none; counter-reset: question; }
.question-list li { position: relative; padding: 1.3rem 0 1.3rem 3rem; border-bottom: 1px solid var(--border); counter-increment: question; }
.question-list li:first-child { padding-top: 0; }
.question-list li::before { content: '0' counter(question); position: absolute; left: 0; color: var(--accent); font-size: 1.2rem; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.strength-grid, .thesis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.info-box { padding: clamp(1.4rem, 3vw, 2.3rem); background: var(--surface); }
.strength-grid ul { margin: 0; padding-left: 1.2rem; }
.strength-grid li + li { margin-top: .6rem; }
.strength-grid li::marker { color: var(--accent); }
.thesis-card { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; padding: 2rem; }
.thesis-card p { color: var(--text-muted); }
.thesis-card .resource-note { margin-top: auto; margin-bottom: 0; font-size: .85rem; }
.status-badge { margin-bottom: .65rem; padding: .25rem .65rem; border-radius: 0; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.status-badge.published { color: #24422b; background: #eff5f0; }
.status-badge.in-progress { color: #513b17; background: #f4ecd9; }
.site-footer { padding: clamp(2rem, 5vw, 4rem); margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: 0; background: #f1f7f3; align-items: center; }
.site-footer .section-label { margin-bottom: 1rem; }
.site-footer p, .site-footer address { color: var(--text-muted); }
.site-footer address { font-style: normal; overflow-wrap: anywhere; }
.contact-pending { display: inline-block; color: var(--accent-dark); font-weight: 600; }
.footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid #cbdacf; padding-top: 1.2rem; font-size: 1rem; color: var(--text-muted); }
.footer-bottom a { display: inline-flex; gap: 1rem; align-items: center; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {



  .button:not(:disabled):hover .button-arrow { transform: translateX(3px); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem; }
  .nav { flex-wrap: wrap; }
  .nav-links { gap: .1rem; }
  .two-column, .education-section, .questions-section { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) {
  .site-header, main, .site-footer { width: calc(100% - 2rem); }
  .nav { gap: .4rem; }
  .nav-links { justify-content: flex-start; width: 100%; gap: .15rem; }
  .nav-links a { padding-inline: .5rem; font-size: .8rem; }
  .nav-links li:last-child a { padding-inline: .75rem; }
  .hero { grid-template-columns: 1fr; padding-block: 3rem; gap: 2.5rem; }
  h1 { font-size: clamp(2.6rem, 10vw, 3.7rem); }
  .hero-image { max-width: 400px; width: 100%; justify-self: center; }
  .cards, .strength-grid, .thesis-grid, .site-footer { grid-template-columns: 1fr; }
  .button { width: 100%; justify-content: space-between; }

  .site-footer { padding: 1.5rem; }
  .footer-bottom { gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:not(:disabled):hover, .button:active, .button:not(:disabled):hover .button-arrow, .button:focus-visible .button-arrow { transform: none; }
}
@media (forced-colors: active) {
  .button, .logo-mark, .status-badge { border: 1px solid ButtonText; }

}
@media print {
  .nav, .button-group, .skip-link, .footer-bottom a { display: none; }
  body { background: white; color: black; }
  .site-header, main, .site-footer { width: 100%; }
  .section, .hero { padding-block: 1.5rem; }
  .card, .thesis-card, .hero-image { break-inside: avoid; }
}


.thesis-download { margin-top: auto; max-width: 100%; }
.thesis-download .resource-note { margin-top: .75rem; font-size: 1rem; }
.button:disabled { cursor: not-allowed; color: var(--text-muted); background: var(--surface-muted); border-color: #b6c9bf; }
h1, h2, h3 { overflow-wrap: anywhere; }



/* Lucide SVGs are bundled inline: no runtime or third-party requests. */
.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; vertical-align: middle; stroke-width: 2.25; }
.section-label, .hero-location, .hero-note, .address-location { display: flex; align-items: center; gap: .65rem; }
.section-label { line-height: 1.5; }
.hero-location { margin: 0 0 1rem; font-size: 1.2rem; font-weight: 650; color: var(--text); }
.hero-location .icon { width: 1.45rem; height: 1.45rem; color: var(--accent); }
.hero-note { align-items: flex-start; }
.hero-note .icon { margin-top: .25rem; }
.card-icon { width: 1.75rem; height: 1.75rem; margin-bottom: 1.5rem; color: var(--accent); }
.address-location { margin-top: .5rem; }

/* Quiet feedback, only when motion is welcome and a mouse is available. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .card, .thesis-card, .strength-grid, .vfu-entry, .info-box {
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .card:hover, .thesis-card:hover, #about > .strength-grid:hover, .vfu-entry:hover, .info-box:hover {
    border-color: #b9cfc1;
    box-shadow: 0 3px 12px #182b2408;
  }
}
@media (forced-colors: active) {
  ::selection { color: HighlightText; background: Highlight; }
}

/* DOM order matches the mobile reading order: heading, portrait, introduction. */
.hero { grid-template-areas: "heading portrait" "copy portrait"; row-gap: 0; }
.hero-heading { grid-area: heading; min-width: 0; align-self: end; }
.hero-copy { grid-area: copy; min-width: 0; align-self: start; }
.hero-image { grid-area: portrait; }
.hero-location { margin-bottom: 1.5rem; }
@media (max-width: 640px) {
  .hero { grid-template-areas: "heading" "portrait" "copy"; row-gap: 1.75rem; }
  .hero-heading h1 { margin-bottom: 0; }
}

/* Location and availability stay together beneath the portrait on all screens. */
.portrait-details { display: grid; gap: .5rem; padding-top: 1rem; font-size: 1rem; line-height: 1.5; }
.portrait-details p { display: flex; align-items: flex-start; gap: .65rem; margin: 0; }
.portrait-details .icon { margin-top: .125rem; color: var(--accent); }
.portrait-location { font-weight: 400; color: var(--text); }
.portrait-availability { color: var(--text-muted); }

/* About cards share the section width and stack on small screens. */
#about > .strength-grid { grid-column: 1 / -1; gap: 2rem clamp(1.5rem, 5vw, 4rem); padding: clamp(1.4rem, 3vw, 2.3rem); border: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.contact-link { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; margin-top: .75rem; font-weight: 600; }

/* Targeted refinements apply at every viewport size. */
.nav-links li:last-child a:hover, .nav-links li:last-child a:focus-visible { background: var(--accent); color: white; }
.site-footer .contact-greeting { margin-bottom: 0; color: var(--text); }
.contact-email { margin-top: 0; max-width: 100%; font-size: 1.05rem; overflow-wrap: anywhere; }

.strength-grid h3 { font-size: 1.3rem; }

/* A short divider follows the two-column / stacked list layout. */
#about > .strength-grid { position: relative; }
#about > .strength-grid::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1px; height: 6rem; background: var(--border); transform: translate(-50%, -50%); }
.site-footer address { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
@media (max-width: 640px) {
  #about > .strength-grid::before { display: none; }
  .strength-grid > div + div { position: relative; }
  .strength-grid > div + div::before { content: ''; position: absolute; top: -1rem; left: 0; width: 4rem; height: 1px; background: var(--border); }
}

.menu-toggle { display: none; align-items: center; gap: .6rem; min-height: 44px; padding: .6rem .8rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.vfu-list { display: grid; gap: 1rem; }
.vfu-entry { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2rem; padding: clamp(1.4rem, 3vw, 2.3rem); background: var(--surface); border: 1px solid var(--border); }
.vfu-entry h4 { margin: 0 0 .85rem; font-size: 1.5rem; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; overflow-wrap: anywhere; color: var(--accent-dark); }
.vfu-entry .section-label { font-size: .875rem; margin-bottom: .6rem; }
.vfu-entry p:last-child { margin-bottom: 0; }
.vfu-entry ul { margin: 0; padding-left: 1.2rem; }
.vfu-entry li + li { margin-top: .6rem; }
.vfu-entry li::marker { color: var(--accent); }
@media (max-width: 640px) {
  .menu-toggle:not([hidden]) { display: inline-flex; }
  .nav-links[hidden] { display: none; }
  .nav-links { flex-direction: column; align-items: stretch; padding-top: .75rem; }
  .nav-links a { justify-content: flex-start; font-size: 1rem; }
  .vfu-entry { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

.experience-category { font-size: 1.3rem; margin-bottom: 1.25rem; }
.experience-category-work { margin-top: 2.5rem; }

/* A diagonal sweep keeps the label stationary and readable. */
.button, .nav-links li:last-child a { isolation: isolate; position: relative; --sweep-color: #286b4e; }
.button.secondary { --sweep-color: #dceee3; }
.button::before, .nav-links li:last-child a::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sweep-color); clip-path: polygon(0 0, 0 0, 0 0); transition: clip-path 320ms ease; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover::before, .nav-links li:last-child a:hover::before { clip-path: polygon(0 0, 200% 0, 0 200%); }
  .nav-links li:last-child a:hover { background: var(--accent-dark); }
}
.button:focus-visible::before, .nav-links li:last-child a:focus-visible::before { clip-path: polygon(0 0, 200% 0, 0 200%); }
body > .nav { position: sticky; top: 0; z-index: 50; width: min(100% - 3rem, var(--max-width)); margin-inline: auto; background: var(--background); }
html { scroll-padding-top: var(--nav-offset, 9rem); }
@media (max-width: 640px) { body > .nav { width: calc(100% - 2rem); } }
@media print { body > .nav { display: none; } }

@media (max-width: 640px) {
  body > .nav { max-height: 100dvh; overflow-y: auto; }
}