:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #10131a;
  --muted: #676b75;
  --soft: #eceef1;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #080c16;
  --foreground: #f7f6f2;
  --muted: #a5a8b0;
  --soft: #202632;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; text-underline-offset: 0.16em; }
a:hover { color: var(--muted); text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.shell { width: min(100% - 2rem, 896px); margin: 0 auto; padding-bottom: 5rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0 3.5rem; }
.brand { font-size: 1rem; font-weight: 650; text-decoration: none; }
.header-actions, .social-links { display: flex; align-items: center; gap: 1rem; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; color: var(--foreground); }
.social-links svg { width: 1.25rem; height: 1.25rem; }
.theme-toggle {
  width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--foreground); cursor: pointer;
}
.theme-toggle:hover { background: var(--soft); }
.theme-icon { width: 1.1rem; height: 1.1rem; }
main { display: block; }
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.hero-copy { max-width: 36rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0.35rem; font-size: 1.875rem; line-height: 1.2; font-weight: 400; letter-spacing: -0.025em; }
h2 { margin-bottom: 1.5rem; font-size: 1.5rem; line-height: 1.25; font-style: italic; font-weight: 400; }
h3 { margin-bottom: 0.15rem; font-size: 1rem; font-weight: 400; }
.location, .muted { color: var(--muted); }
.location { margin-bottom: 1rem; }
.bio p { margin-bottom: 1rem; }
.portrait-toggle {
  position: relative; flex: 0 0 15rem; width: 15rem; height: 15rem; padding: 0; overflow: hidden;
  border: 0; border-radius: 0.25rem; background: var(--soft); color: inherit; cursor: pointer; perspective: 1000px;
}
.portrait-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 500ms ease-in-out; }
.portrait-toggle.is-flipped .portrait-inner { transform: rotateY(180deg); }
.portrait-toggle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; }
.portrait-toggle .conference { transform: rotateY(180deg); }
.portrait-toggle:hover { transform: scale(1.03); }
.keep-in-touch { margin: 1.5rem 0 0.75rem; font-size: 0.875rem; color: var(--muted); }
.home-section { padding-top: 3rem; }
.home-section:nth-of-type(2) { padding-bottom: 5.375rem; }
.home-section:nth-of-type(3) { padding-bottom: 1.375rem; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.card { padding: 1rem; border-radius: 0.5rem; transition: background-color 160ms ease, transform 160ms ease; }
.card:hover { background: color-mix(in srgb, var(--soft) 55%, transparent); transform: translateY(-2px); }
.card-link { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }
.arrow { font-size: 1.1em; line-height: 1; }
.card p { margin: 0; font-size: 0.875rem; color: var(--muted); }
.card .description { font-style: italic; }
.page-title { margin-bottom: 2rem; }
.return-home { display: inline-block; margin-bottom: 2rem; color: var(--muted); }
.playbook-intro { max-width: 42rem; margin-bottom: 2.5rem; }
.playbook-intro h1 { margin-bottom: 1rem; font-size: 1.5rem; font-weight: 500; }
.playbook-card { max-width: 100%; padding: 1.5rem; border: 1px solid var(--soft); border-radius: 0.5rem; }
.playbook-card h2 { margin-bottom: 0.5rem; font-size: 1.25rem; font-style: normal; font-weight: 500; }
.playbook-card p { color: var(--muted); }
.button-link { display: inline-block; padding: 0.55rem 0.8rem; border: 1px solid currentColor; border-radius: 0.3rem; text-decoration: none; }
.subscribe { margin-top: 2.5rem; padding: 1.5rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--soft) 55%, transparent); text-align: center; }
.subscribe h2 { margin-bottom: 0.5rem; font-size: 1rem; font-style: normal; font-weight: 500; }
.article { max-width: 42rem; }
.article h2 { margin-bottom: 0.5rem; font-size: 1.25rem; font-style: normal; font-weight: 500; }
.article p { color: var(--muted); }
.site-footer { margin-top: 3rem; color: var(--muted); text-align: right; }
.not-found { min-height: 65vh; display: grid; place-content: center; text-align: center; }
.not-found h1 { font-size: 2.5rem; font-weight: 650; }

@media (max-width: 640px) {
  .shell { width: min(100% - 2rem, 896px); }
  .site-header { padding-bottom: 2.25rem; }
  .hero { flex-direction: column-reverse; }
  .portrait-toggle { flex-basis: auto; width: min(100%, 15rem); height: auto; aspect-ratio: 1; align-self: center; }
  .cards { grid-template-columns: 1fr; gap: 0.25rem; }
  .home-section { padding-top: 2.5rem; }
  .home-section:nth-of-type(2), .home-section:nth-of-type(3) { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .portrait-toggle:hover, .card:hover { transform: none; }
}