/* ==========================================================================
   brendanhayesconsulting.com
   Nocturne design system tokens (verbatim from the design handoff) + the
   page layer. Plain CSS, no build step, no JS.
   ========================================================================== */

/* — self-hosted Inter, latin subset, variable (covers 400/500/600) — */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-bg: #161826;
  --color-page: #0f111c;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Page gutter. Steps down at the narrow breakpoints; every section reads
     it rather than hard-coding 64px, so the whole page reflows together. */
  --gutter: 64px;

  /* Content measure. The prototype canvas is 1240px wide including its 64px
     gutters, so the text column it draws is 1112px. Sections here run
     full-bleed — rules, the fact strip and the CTA gradient reach the
     viewport edge — and only the content inside is held to this measure. */
  --measure: 1112px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--color-accent);
  text-underline-offset: 3px;
}
a:hover { color: var(--color-accent-300); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* Skip link — clipped rather than pushed off-screen, so it never counts as
   layout overflow. Becomes a real, visible control on focus. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 100;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  overflow: visible;
  clip-path: none;
}

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

/* — buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn-primary {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary {
  border-color: var(--color-divider);
  color: var(--color-text);
}
.btn-secondary:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* — tags — */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — accent marks: the dots and rules the system uses in place of fills — */
.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}
.rule-mark {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-accent);
}

/* ==========================================================================
   Page shell
   ========================================================================== */

.shell { background: var(--color-bg); }

/* Sections span the viewport; the gutter insets, the measure centers. */
.section { padding: 56px var(--gutter); }
.section-divided { border-top: 1px solid var(--color-divider); }

/* Every content block that sits directly inside a full-bleed section is held
   to the measure and centered. Listed explicitly rather than applied via a
   wrapper class so the markup stays flat. */
.nav-inner,
.hero-inner,
.facts-grid,
.press-inner,
.logos,
.capabilities,
.work,
.advisory,
.life,
.cta-inner,
.footer-inner {
  max-width: var(--measure);
  margin-inline: auto;
  width: 100%;
}

/* Clears the sticky nav when an anchor is jumped to. */
[id] { scroll-margin-top: 84px; }

/* — nav — */
.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--color-divider);
  background: rgba(22, 24, 38, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
}
.nav-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 14px var(--color-accent);
  flex: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: var(--color-neutral-400);
}
.nav-links a:not(.btn) {
  color: inherit;
  text-decoration: none;
}
.nav-links a:not(.btn):hover { color: var(--color-accent-300); }
.nav-links a[aria-current="page"] { color: var(--color-text); }

/* — hero — */
.hero {
  position: relative;
  padding: 96px var(--gutter) 80px;
  overflow: hidden;
}
/* Holds the measure and gives the glow something to anchor to, so the glow
   tracks the content instead of drifting to the corner on wide screens. */
.hero-inner { position: relative; }
.hero-glow {
  position: absolute;
  top: -220px;
  left: -140px;
  width: 720px;
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(145, 132, 217, 0.2), transparent 68%);
  filter: blur(24px);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: end;
}
.hero-col {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.availability {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.availability-role {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-accent-300);
}
.availability-rule {
  width: 26px;
  height: 1px;
  background: var(--color-accent);
  flex: none;
}
.availability-cities {
  padding-left: 36px;
  color: var(--color-neutral-500);
}
.hero h1 {
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -0.032em;
  font-weight: 500;
}
.hero-role {
  font-size: 23px;
  line-height: 1.35;
  color: var(--color-neutral-300);
  max-width: 640px;
}
.hero-role strong {
  font-weight: inherit;
  color: var(--color-text);
}
.hero-points {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 620px;
}
.hero-points li {
  display: flex;
  gap: 12px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--color-neutral-400);
  text-wrap: pretty;
}
.hero-points .dot { margin-top: 9px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}
.hero-actions .btn { padding: 10px 18px; }
.hero-portrait { position: relative; }
.hero-portrait::before {
  content: "";
  position: absolute;
  inset: -16px;
  border: 1px solid var(--color-accent-800);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.hero-portrait img {
  width: 380px;
  height: 460px;
  object-fit: cover;
  border-radius: 10px;
}

/* — fact strip — */
/* The rules run edge to edge; the cells align to the measure. */
.facts {
  padding: 0 var(--gutter);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.fact {
  padding: 26px 28px;
  border-right: 1px solid var(--color-divider);
}
.fact:first-child { padding-left: 0; }
.fact:last-child {
  padding-right: 0;
  border-right: 0;
}
.fact-value {
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.2;
}
.fact-value-md {
  font-size: 26px;
  letter-spacing: -0.018em;
}
.fact-value-sm {
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.fact-label {
  font-size: 13px;
  color: var(--color-neutral-500);
  margin-top: 4px;
}

/* — press row — */
.press {
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--color-divider);
}
.press-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.press-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.press-item .dot { margin-top: 8px; }
.press-item a {
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
}

/* — logo wall — */
.logos {
  padding: 44px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.kicker {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.logo-tile {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.logo-tile img {
  max-height: 26px;
  max-width: 100%;
  object-fit: contain;
}
/* Per-logo treatments. These are asset workarounds, not system rules — when
   all six become transparent SVGs, delete the classes and the hacks with
   them. See ASSET-DEBT in README. */
.logo-lighten {
  mix-blend-mode: lighten;
  background-color: transparent;
}
.logo-invert { filter: brightness(0) invert(0.92); }
.logo-tile img.logo-tall { max-height: 36px; }
.logo-tile img.logo-short { max-height: 24px; }
.logo-text {
  font-size: 14px;
  color: var(--color-neutral-400);
}

/* — what I do — */
.capabilities {
  padding: 34px var(--gutter) 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.capability {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.capability h3 { font-size: 19px; }
.capability p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-neutral-400);
}

/* — section headings — */
.section-title {
  font-size: 40px;
  letter-spacing: -0.025em;
}

/* — selected work — */
.work {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.work-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.work-card > img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.work-body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.work-kicker {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.work-body h3 { font-size: 22px; }
.work-body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-neutral-400);
}
.tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.work-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  text-decoration: none;
  padding-top: 2px;
  margin-top: auto;
}

/* "Previously" line under the work grid. */
.previously {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-500);
  padding-top: 4px;
}
.previously .kicker { font-size: 11.5px; letter-spacing: 0.1em; }
.previously a { text-decoration: none; }

/* — advisory — */
.advisory {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
}
.advisory-intro p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-neutral-500);
}
.advisory-list {
  display: flex;
  flex-direction: column;
}
.advisory-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-divider);
}
.advisory-row-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.advisory-name { font-size: 22px; }
.advisory-desc {
  font-size: 14px;
  color: var(--color-neutral-500);
}
.advisory-row a {
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.advisory-teaching {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 22px 0;
}
.advisory-teaching .kicker { font-size: 11.5px; letter-spacing: 0.1em; }
.advisory-teaching span:last-child {
  font-size: 15px;
  color: var(--color-neutral-300);
}

/* — off the clock — */
.life {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}
.life-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.life-col p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--color-neutral-400);
  max-width: 520px;
  text-wrap: pretty;
}
.life-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.life-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.life-figure {
  position: relative;
  margin: 0;
  height: 150px;
}
.life-figure img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}
.life-figure figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  border-radius: 10px 10px 0 0;
  background: rgba(15, 17, 28, 0.86);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-200);
  pointer-events: none;
}
.life-grid > a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  text-decoration: none;
  padding-top: 2px;
}

/* — CTA band — */
.cta {
  position: relative;
  padding: 88px var(--gutter);
  border-top: 1px solid var(--color-divider);
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-bg), #1b1e33);
}
.cta-inner { position: relative; }
.cta-glow {
  position: absolute;
  bottom: -260px;
  left: 30%;
  width: 640px;
  height: 460px;
  background: radial-gradient(ellipse at center, rgba(145, 132, 217, 0.22), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: center;
}
.cta-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 660px;
}
.cta h2 {
  font-size: 46px;
  letter-spacing: -0.028em;
  line-height: 1.08;
}
.cta p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-neutral-400);
}
.cta-actions { padding-top: 8px; }
.cta-actions .btn { padding: 11px 20px; }
.cta img {
  width: 300px;
  height: 340px;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-800);
}

/* — footer — */
.footer {
  padding: 30px var(--gutter) 38px;
  border-top: 1px solid var(--color-divider);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--color-neutral-600);
}
.footer-row a {
  text-decoration: none;
  font-size: 13px;
}
/* Keyword line. Stays at neutral-600 — dimming it further reads as cloaking
   to search engines. Do not lower the contrast. */
.footer-keywords {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--color-neutral-600);
  max-width: 900px;
}

/* ==========================================================================
   Responsive. The desktop canvas above is the spec; these are ours.
   ========================================================================== */

@media (max-width: 1099px) {
  :root { --gutter: 40px; }

  .hero {
    padding-top: 72px;
    padding-bottom: 64px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
  }
  /* Portrait leads on tablet — it is the strongest single element and the
     bullet list is long enough to bury it if it stays second. */
  .hero-portrait {
    order: -1;
    width: 300px;
    align-self: start;
  }
  .hero-portrait img {
    width: 300px;
    height: 364px;
  }
  .hero h1 { font-size: 62px; }

  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .fact { border-bottom: 1px solid var(--color-divider); }
  .fact:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }
  .fact:nth-child(2n + 1) { padding-left: 0; }
  .fact:nth-last-child(-n + 2) { border-bottom: 0; }

  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .capabilities { grid-template-columns: 1fr; gap: 28px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .advisory { grid-template-columns: 1fr; gap: 28px; }
  .life {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .life-grid { max-width: 420px; }
  .cta { padding-top: 64px; padding-bottom: 64px; }
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .cta h2 { font-size: 38px; }
}

@media (max-width: 759px) {
  :root { --gutter: 24px; }

  .section { padding-top: 44px; padding-bottom: 44px; }
  .nav { padding: 16px var(--gutter); }
  /* Three anchors do not justify a hamburger — drop them and keep the one
     CTA. Name and LinkedIn are what matter on a phone. */
  .nav-links a:not(.btn) { display: none; }

  .hero {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .hero h1 { font-size: 44px; }
  .hero-role { font-size: 19px; }
  .hero-points li { font-size: 15.5px; }
  .hero-portrait,
  .hero-portrait img {
    width: 100%;
    max-width: 340px;
  }
  .hero-portrait img { height: 400px; }
  .hero-actions .btn { flex: 1 1 auto; }

  .facts-grid { grid-template-columns: 1fr; }
  .fact {
    padding: 20px 0;
    border-right: 0;
  }
  .press-inner {
    gap: 14px;
    flex-direction: column;
  }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: 1fr; }
  .section-title { font-size: 30px; }
  .cta h2 { font-size: 30px; }
  .cta p { font-size: 16px; }
  .cta img {
    width: 100%;
    max-width: 300px;
  }
  .advisory-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Tap targets stay at 44px on touch. The brand link gets its height from
     padding offset by an equal negative margin, so the hit area grows without
     making the sticky nav taller. */
  .nav-links .btn,
  .hero-actions .btn,
  .cta-actions .btn { min-height: 44px; }
  .nav-brand {
    padding-block: 11px;
    margin-block: -11px;
  }
}

/* ==========================================================================
   Résumé page (/resume)
   Reuses the tokens and shell above. Section rules and the measure behave
   exactly as on the homepage.
   ========================================================================== */

.resume-head {
  position: relative;
  padding: 72px var(--gutter) 44px;
  overflow: hidden;
}
.resume-head-inner { position: relative; }
.resume-head h1 {
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.resume-title {
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-neutral-300);
  margin-top: 12px;
}
.resume-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-neutral-500);
}
.resume-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.resume-links .btn { padding: 9px 16px; }

.resume-summary {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--color-neutral-400);
  max-width: 760px;
  margin-top: 22px;
  text-wrap: pretty;
}

/* Outcomes band — the numbers, pulled out so both a skimming recruiter and a
   summarizing model hit them before the prose. */
.outcomes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-divider);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.outcome {
  background: var(--color-bg);
  padding: 22px 24px;
}
.outcome-value {
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.2;
}
.outcome-label {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-neutral-500);
  margin-top: 5px;
}

/* Experience */
.role {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-divider);
}
.role:last-child { border-bottom: 0; }
.role-when {
  font-size: 13px;
  color: var(--color-neutral-500);
  line-height: 1.5;
}
.role-org {
  display: block;
  font-size: 13px;
  color: var(--color-neutral-600);
  margin-top: 4px;
}
.role-title {
  font-size: 21px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.role-company {
  font-size: 14px;
  color: var(--color-accent-300);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.role-sub {
  font-size: 14px;
  color: var(--color-neutral-500);
  margin-top: 3px;
}
.role ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  max-width: 720px;
}
.role li {
  display: flex;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-neutral-400);
  text-wrap: pretty;
}
.role li .dot { margin-top: 8px; }

/* Skills */
.skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.skill-group h3 {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin-bottom: 10px;
}
.skill-group p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-neutral-400);
}

.edu-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 22px 0;
}

@media (max-width: 1099px) {
  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .skills { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 759px) {
  .resume-head { padding-top: 40px; padding-bottom: 32px; }
  .resume-head h1 { font-size: 38px; }
  .resume-title { font-size: 17px; }
  .outcomes { grid-template-columns: 1fr; }
  .role,
  .edu-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .resume-links .btn { min-height: 44px; }
}

/* ==========================================================================
   Print / PDF. The screen design is dark; ink is not. This inverts to a
   light ground so "Save as PDF" produces a résumé someone can actually
   print, and drops the chrome that means nothing on paper.
   ========================================================================== */
@media print {
  @page { margin: 12mm 11mm; }

  /* The print viewport is roughly 700px wide, so the <760px mobile rules above
     fire on paper and collapse every grid to one column. Each layout below is
     restated explicitly to override them — this block must win. */
  :root {
    --gutter: 0px;
    --measure: 100%;
    --color-bg: #ffffff;
    --color-text: #14161f;
    --color-divider: #c9ccd6;
    --color-neutral-300: #3b3f4c;
    --color-neutral-400: #3b3f4c;
    --color-neutral-500: #5a5f6d;
    --color-neutral-600: #5a5f6d;
    --color-accent: #4a3fa0;
    --color-accent-300: #4a3fa0;
  }

  body,
  .shell,
  .outcome { background: #fff !important; color: #14161f; }

  /* Chrome drops backgrounds by default; these carry meaning, so keep them. */
  .outcomes { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Screen-only chrome, and the CTA band, which is a web call to action and
     just eats a page on paper. */
  .nav,
  .resume-links,
  .footer-keywords,
  .cta,
  .hero-glow,
  .cta-glow,
  .skip-link { display: none !important; }

  a { color: #14161f; text-decoration: none; }
  .resume-meta a::after {
    content: " (" attr(href) ")";
    font-size: 0.82em;
    color: #5a5f6d;
  }

  .section,
  .resume-head,
  .footer { padding: 0 !important; }
  .section { padding-top: 10pt !important; padding-bottom: 2pt !important; }
  .resume-head { padding-bottom: 6pt !important; }

  .resume-head h1 { font-size: 26pt; }
  .resume-title { font-size: 11.5pt; margin-top: 5pt; }
  .resume-meta { font-size: 8.5pt; margin-top: 7pt; gap: 3pt 12pt; }
  .resume-summary { font-size: 9pt; max-width: none; margin-top: 9pt; line-height: 1.5; }
  .section-title { font-size: 13pt; }
  .work { gap: 8pt; }

  /* Outcomes: 4 across, tight. */
  .outcomes {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0;
    margin-top: 9pt;
  }
  .outcome { padding: 6pt 8pt !important; border-right: 0.5pt solid #c9ccd6; }
  .outcome:nth-child(4n) { border-right: 0; }
  .outcome:nth-child(-n + 4) { border-bottom: 0.5pt solid #c9ccd6; }
  .outcome-value { font-size: 11pt; }
  .outcome-label { font-size: 7pt; line-height: 1.35; margin-top: 2pt; }

  /* Roles stay two-column so dates sit beside the content. */
  .role,
  .edu-row {
    grid-template-columns: 108px 1fr !important;
    gap: 16pt !important;
    padding: 8pt 0 !important;
  }
  .role-when { font-size: 8pt; }
  .role-org { font-size: 8pt; margin-top: 2pt; }
  .role-company { font-size: 8.5pt; margin-bottom: 2pt; }
  .role-title { font-size: 11pt; }
  .role-sub { font-size: 8.5pt; }
  .role ul { gap: 3pt; margin-top: 5pt; max-width: none; }
  .role li { font-size: 8.5pt; line-height: 1.45; gap: 7pt; }
  .role li .dot { margin-top: 5pt; width: 3px; height: 3px; }

  .skills { grid-template-columns: repeat(3, 1fr) !important; gap: 10pt !important; }
  .skill-group h3 { font-size: 8pt; margin-bottom: 4pt; }
  .skill-group p { font-size: 8pt; line-height: 1.45; }

  .advisory { grid-template-columns: 150px 1fr !important; gap: 16pt !important; }
  .advisory-row { padding: 6pt 0 !important; }
  .advisory-name { font-size: 10pt; }
  .advisory-desc { font-size: 8.5pt; }
  .advisory-intro p { font-size: 8.5pt; }
  .advisory-teaching { padding: 6pt 0 !important; }
  .advisory-teaching span:last-child { font-size: 9pt; }

  .footer-row { font-size: 8pt; padding-top: 6pt; }

  /* Never split a role across a page break. */
  .role,
  .outcome,
  .edu-row,
  .skill-group { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}