:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --ink: #102033;
  --muted: #53647a;
  --accent: #2563eb;
  --accent-ink: #1a4bc4;
  --accent-soft: #dfeaff;
  --line: #e3eaf3;
  --wrap: 820px;
  --measure: 68ch;
  --r-sm: 6px;
  --r-md: 10px;
  --r-pill: 999px;
  --focus: #1a4bc4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e151f;
    --card: #161f2c;
    --ink: #e8eef6;
    --muted: #9fb0c4;
    --accent: #7aa7ff;
    --accent-ink: #a9c6ff;
    --accent-soft: #1b2b48;
    --line: #26323f;
    --focus: #7aa7ff;
  }
}

* { box-sizing: border-box; }

html {
  scroll-padding-top: 4.5rem;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 1rem;
}

.wrap {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

a { color: var(--accent); text-underline-offset: 0.18em; }

::selection { background: var(--accent-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --- skip link ----------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1.25rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease-out;
}

.skip-link:focus { top: 0.75rem; }

/* --- degraded-read notice (spec 9.4) ------------------------------- */
.cache-note {
  margin: 0;
  padding: 0.6rem 1.25rem;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.9rem;
  text-align: center;
}

/* --- hero ---------------------------------------------------------- */
.hero {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 2.5rem;
  border-bottom: 1px solid var(--line);
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.headline {
  margin: 0.75rem 0 0;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  color: var(--muted);
  max-width: 34em;
}

.summary {
  margin: 1rem 0 0;
  max-width: var(--measure);
}

.availability {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.contacts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

.contacts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}

.contacts a:hover { border-color: var(--accent); }

.contacts li:first-child a {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.contacts li:first-child a:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

@media (prefers-color-scheme: dark) {
  .contacts li:first-child a { color: #0e151f; }
}

/* --- sticky section nav -------------------------------------------- */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding-block: 0.25rem;
}

.sticky-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.35rem;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}

.sticky-nav a:hover { color: var(--accent); }

.sticky-nav a[aria-current="true"] {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}

/* --- sections ------------------------------------------------------ */
section {
  padding-block: 2.5rem;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 4.5rem;
}

section:last-of-type { border-bottom: 0; }

h2 {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 700;
}

.entry {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
}

.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.entry h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.entry h3 a { text-decoration: none; }
.entry h3 a:hover { text-decoration: underline; }

.dates {
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
}

.meta { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.95rem; max-width: var(--measure); }
.note { color: var(--muted); font-size: 0.92rem; max-width: var(--measure); }

.tag {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
}

.bullets { margin: 0.9rem 0 0; padding-left: 1.1rem; }
.bullets li { margin-bottom: 0.5rem; font-size: 1rem; max-width: var(--measure); }
.bullets li:last-child { margin-bottom: 0; }

/* --- skills -------------------------------------------------------- */
.skill-group { margin-bottom: 1.25rem; }
.skill-group h3 { margin: 0 0 0.6rem; font-size: 1rem; }

.pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}

.pills li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
}

/* --- awards -------------------------------------------------------- */
.awards { margin: 0; padding: 0; list-style: none; }
.awards li { margin-bottom: 1rem; }
.awards h3 { margin: 0; font-size: 1.05rem; }
.awards .note { display: block; margin-top: 0.15rem; }

/* --- footer -------------------------------------------------------- */
footer {
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

footer a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- privacy page ------------------------------------------------- */
.privacy { padding-block: 2rem 1rem; }
.privacy h1 { margin: 0.5rem 0 0.25rem; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.privacy section { padding-block: 2rem; }
.privacy h3 { margin: 1.5rem 0 0.5rem; font-size: 1rem; }
.privacy section > h2 + h3 { margin-top: 0; }
.privacy p { max-width: var(--measure); }
.privacy code { font-size: 0.9em; }
.privacy .back { margin: 0; font-size: 0.92rem; }

@media (max-width: 600px) {
  .entry-head { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .dates { white-space: normal; }
}

/* --- print --------------------------------------------------------- */
@media print {
  .sticky-nav, .skip-link, .cache-note { display: none !important; }
  body { background: #ffffff; color: #000000; font-size: 11pt; line-height: 1.4; }
  .hero { border-bottom: 1px solid #999; padding-block: 0 1rem; }
  .entry { border: 1px solid #ccc; break-inside: avoid; margin-bottom: 0.5rem; }
  section { break-inside: avoid; padding-block: 1rem; }
  a { color: #000000; text-decoration: underline; }
  .wrap { width: 100%; padding-inline: 0; }
}