:root {
  color-scheme: light dark;
  --page: #ffffff;
  --ink: #272629;
  --secondary-ink: #65616c;
  --plum: #825070;
  --rule: #e9e3e9;
  --on-plum: #ffffff;
  --soft-plum: #f0e5ed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  background: var(--page);
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #202021;
    --ink: #f0edef;
    --secondary-ink: #bdb7c3;
    --plum: #e9b2d4;
    --rule: #443c46;
    --on-plum: #321c2a;
    --soft-plum: #493a47;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
a { color: var(--plum); text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 0.12em; }
a:focus-visible { outline: 3px solid var(--plum); outline-offset: 5px; border-radius: 2px; }
:target { scroll-margin-top: 1.5rem; }
main:focus { outline: none; }
.page { width: min(100%, 1152px); margin-inline: auto; padding-inline: 56px; }
.skip-link { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 10px 16px; transform: translateY(-180%); background: var(--page); border: 2px solid var(--plum); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { color: var(--secondary-ink); font: 0.75rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400; letter-spacing: 0.075em; text-transform: uppercase; }
.meta { color: var(--secondary-ink); font-size: 0.8125rem; line-height: 1.65; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 27px 23px; border-bottom: 1px solid var(--rule); }
.identity { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.025em; text-decoration: none; }
.identity-mark { display: grid; place-items: center; flex-shrink: 0; width: 39px; height: 39px; border-radius: 50%; background: var(--soft-plum); color: var(--plum); font-family: inherit; font-size: 17px; line-height: 1; letter-spacing: 0; }
.identity .eyebrow { display: block; margin-top: 7px; font-size: 0.6875rem; }
.navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 23px; font-size: 0.8125rem; }
.navigation a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.navigation a:hover { text-decoration: underline; }
.hero { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(145px, 1fr); gap: 52px; align-items: center; padding-block: 48px 43px; }
h1 { font-size: clamp(2.25rem, 4.6vw, 3.375rem); line-height: 1.13; font-weight: 600; letter-spacing: -0.033em; }
.hero h1 { margin-block: 14px 21px; }
.intro { max-width: 590px; margin-bottom: 22px; color: var(--secondary-ink); font-size: 1.0625rem; line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 25px; }
.primary-action, .text-action { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; font-size: 0.875rem; font-weight: 500; }
.primary-action { justify-content: center; padding: 11px 18px; border-radius: 4px; background: var(--plum); color: var(--on-plum); font-weight: 600; text-decoration: none; }
.primary-action:hover { text-decoration: underline; }
.focus { border-top: 2px solid var(--plum); padding-top: 15px; }
.focus p { margin-top: 10px; font-size: 1.125rem; line-height: 1.55; letter-spacing: -0.01em; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 20px; padding-block: 23px 17px; border-top: 1px solid var(--rule); }
h2 { font-size: 1.5625rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.026em; }
h3 { font-size: 1.3125rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.019em; }
.editorial-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding-block: 23px; border-bottom: 1px solid var(--rule); }
.editorial-row .employer { margin-top: 5px; }
.summary { margin-top: 10px; max-width: 720px; color: var(--secondary-ink); font-size: 0.9375rem; line-height: 1.7; }
.history { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding-block: 29px 12px; }
.history-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding-bottom: 20px; }
.history-row h3 { font-size: 0.9375rem; letter-spacing: 0; }
.history-row .summary { margin-top: 6px; font-size: 0.875rem; }
.dates { flex-shrink: 0; }
.skills { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-block: 29px 34px; border-top: 1px solid var(--rule); }
.skills h3 { font-size: 0.9375rem; margin-bottom: 7px; letter-spacing: 0; }
.skills p { color: var(--secondary-ink); font-size: 0.875rem; line-height: 1.85; }
.footer-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; border-top: 1px solid var(--rule); padding-block: 27px 29px; }
.footer-main h2 { font-size: 1.4375rem; margin-bottom: 9px; }
.footer-main p { font-size: 0.875rem; color: var(--secondary-ink); margin-bottom: 9px; }
.colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 25px; padding-block: 16px 24px; border-top: 1px solid var(--rule); }

@media (max-width: 900px) {
  .page { padding-inline: 32px; }
  .header { flex-wrap: wrap; gap: 14px; }
  .hero { gap: 28px; }
  .editorial-row, .history { grid-template-columns: 108px minmax(0, 1fr); gap: 20px; }
  .skills { grid-template-columns: 108px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 600px) {
  .page { padding-inline: 24px; }
  .header { padding-block: 23px 17px; }
  .navigation { gap: 4px 19px; }
  .hero { grid-template-columns: 1fr; padding-block: 32px 31px; gap: 25px; }
  h1 { font-size: 2.375rem; letter-spacing: -0.032em; }
  .focus p { font-size: 1.0625rem; }
  .section-heading { padding-top: 21px; }
  .editorial-row, .history, .skills, .footer-main { grid-template-columns: 1fr; }
  .editorial-row { gap: 10px; padding-block: 22px; }
  .history { gap: 14px; }
  .history-row { flex-wrap: wrap; gap: 5px; }
  .history-row > div { flex-basis: 100%; }
  .skills { gap: 22px; }
  .footer-main { gap: 23px; }
}

@media (max-width: 360px) {
  h1 { font-size: 2rem; }
}

@media (forced-colors: active) {
  .primary-action { border: 1px solid ButtonText; }
}