/* Shared shell for all three pages: a sticky identity column beside a scrolling column of evidence. */
:root {
  --bg: #fbfbfa;
  --surface: #ffffff;
  --fg: #16181d;
  --fg-2: #3b4049;
  --muted: #5f6571;
  --line: #e6e7ea;
  --line-strong: #cdd0d6;
  --accent: #2346c4;
  --accent-soft: #edf0fb;
  /* Career hues. Each means one career and nothing else. */
  --eng: #b4441a;
  --bd: #8a5d00;
  --sw: #0d7266;
  --font-sans: "Geist", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --font-serif: "Source Serif 4", Georgia, serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1013; --surface: #15181d; --fg: #e9ebef; --fg-2: #c4c8d0; --muted: #969ca8;
    --line: #23272e; --line-strong: #363b45; --accent: #8fa6ff; --accent-soft: #1a2240;
    --eng: #f08c62; --bd: #ddb24a; --sw: #52c3aa;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1013; --surface: #15181d; --fg: #e9ebef; --fg-2: #c4c8d0; --muted: #969ca8;
  --line: #23272e; --line-strong: #363b45; --accent: #8fa6ff; --accent-soft: #1a2240;
  --eng: #f08c62; --bd: #ddb24a; --sw: #52c3aa;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; }
body {
  margin: 0; background: var(--bg); color: var(--fg-2);
  font: 400 16px/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-soft); color: var(--fg); }
h1, h2, h3, h4 { color: var(--fg); margin: 0; text-wrap: balance; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
strong, b { color: var(--fg); font-weight: 600; }
a { color: var(--fg); text-decoration-line: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s, color .15s; }
a:hover { text-decoration-color: var(--accent); color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
[hidden] { display: none !important; }
.num, time { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shell */
.shell {
  max-width: 1240px; margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: minmax(0, 370px) minmax(0, 1fr); column-gap: clamp(48px, 7vw, 112px);
}
.masthead {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: none;
  padding-block: 72px 40px; display: flex; flex-direction: column; gap: 28px;
}
.masthead::-webkit-scrollbar { display: none; }
.main { padding-block: 72px 96px; min-width: 0; display: flex; flex-direction: column; gap: 88px; }

.site-name { font-weight: 600; font-size: 15px; color: var(--fg); text-decoration: none; letter-spacing: -.01em; }
.site-name:hover { color: var(--fg); }
.masthead h1 { font-size: 44px; font-weight: 650; line-height: 1.05; letter-spacing: -.035em; }
.masthead h1.page-title { font-size: 34px; line-height: 1.12; letter-spacing: -.03em; }
.masthead .role { margin-top: 10px; font-size: 17px; color: var(--fg); font-weight: 500; letter-spacing: -.01em; }
.masthead .lede { font-size: 15.5px; line-height: 1.6; max-width: 40ch; }

/* Site nav: the three pages */
.site-nav { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); width: fit-content; }
.site-nav a { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 5px 12px; border-radius: 6px; }
.site-nav a:hover { color: var(--fg); background: var(--bg); }
.site-nav a[aria-current="page"] { color: var(--fg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }

/* Contact block */
.contact { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 8px; }
.email-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.email-row a { font-family: var(--font-mono); font-size: 13.5px; }
.copy {
  font: 500 12px var(--font-sans); color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; cursor: pointer; transition: color .15s, border-color .15s;
}
.copy:hover { color: var(--fg); border-color: var(--line-strong); }
.copy:active { transform: scale(.97); }
.copy[data-done] { color: var(--fg); border-color: var(--fg); }
.links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.links a { color: var(--muted); text-decoration: none; }
.links a:hover { color: var(--fg); }
.where { font-size: 13px; color: var(--muted); }

/* Section headings in the main column */
.sec { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 48px; }
.sec-head { display: flex; flex-direction: column; gap: 8px; }
.sec-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.sec-head p { font-size: 15.5px; max-width: 64ch; color: var(--muted); }

/* Filter tabs, shared by all pages */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab {
  font: 500 13.5px var(--font-sans); color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: color .15s, background-color .15s, border-color .15s;
}
.tab:hover { color: var(--fg); border-color: var(--line-strong); }
.tab[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.tab .n { font-family: var(--font-mono); font-size: 11.5px; opacity: .65; font-variant-numeric: tabular-nums; }

/* Reveal used when filters change content */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.enter { animation: rise .36s var(--ease-out) both; }

/* Quotes */
.quote { font-family: var(--font-serif); color: var(--fg); font-size: 19px; line-height: 1.5; letter-spacing: -.005em; }
/* Opening quote mark hangs outside the text edge */
.hang { hanging-punctuation: first; }
@supports not (hanging-punctuation: first) { .hang { text-indent: -.42em; } }

.page-foot { border-top: 1px solid var(--line); padding-top: 20px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .masthead { position: static; height: auto; overflow: visible; padding-block: 48px 8px; gap: 22px; }
  .masthead .lede { max-width: 60ch; }
  .contact { margin-top: 0; }
  .main { padding-block: 40px 72px; gap: 72px; }
  .masthead h1 { font-size: 38px; }
  .masthead h1.page-title { font-size: 30px; }
}
@media (max-width: 380px) {
  .shell { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}