:root {
  --brand-deep-blue: #006699;
  --brand-sky-blue: #9FC9EB;
  --brand-seafoam: #99CCCC;
  --color-primary: #006699;
  --color-primary-hover: #005580;
  --color-primary-pressed: #004466;
  --color-primary-subtle: #E6F1F7;
  --color-on-primary: #FFFFFF;
  --color-accent: #9FC9EB;
  --color-accent-subtle: #EDF5FB;
  --color-secondary: #99CCCC;
  --color-secondary-subtle: #EBF5F5;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F8FA;
  --color-surface-sunken: #EAF1F5;
  --color-overlay: #0F2B38A6;
  --color-border: #D8E4EB;
  --color-border-strong: #B4C9D4;
  --color-focus-ring: #006699;
  --color-text-primary: #0F2B38;
  --color-text-secondary: #4A6572;
  --color-text-muted: #7C919C;
  --color-text-inverse: #FFFFFF;
  --color-link: #006699;
  --color-danger: #B3261E;
  --color-danger-subtle: #FBE9E7;
  --color-success: #1F6F43;
  --color-success-subtle: #E6F3EC;
  --color-warning: #8A5A00;
  --color-warning-subtle: #FBF1DF;
  --color-info: #006699;
  --color-info-subtle: #E6F1F7;
  --color-status-received: #4A6572;
  --color-status-in-review: #006699;
  --color-status-interview: #8A5A00;
  --color-status-offer: #1F6F43;
  --color-status-hired: #1F6F43;
  --color-status-declined: #7C919C;
  --color-status-withdrawn: #7C919C;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --type-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --type-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --type-display: 40px;
  --type-title: 28px;
  --type-headline: 20px;
  --type-subhead: 17px;
  --type-body: 15px;
  --type-caption: 12px;
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-bold: 700;
  --type-line-height-tight: 1.2;
  --type-line-height-body: 1.55;
  --border-hairline: 1px;
  --border-thick: 2px;
  --border-focus: 2px;
  --shadow-card: 0 1px 2px rgba(15,43,56,0.06), 0 1px 8px rgba(15,43,56,0.06);
  --shadow-raised: 0 6px 20px rgba(15,43,56,0.12);
  --layout-content-max-width: 880px;
  --layout-wide-max-width: 1180px;
  --layout-embed-max-width: 960px;
  --layout-control-height: 44px;
  --layout-control-height-small: 34px;
  --layout-logo-width: 170px;
  --layout-logo-height: 66px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--type-family);
  font-size: var(--type-body);
  line-height: var(--type-line-height-body);
  color: var(--color-text-primary);
  background: var(--color-surface-alt);
}
h1, h2, h3, h4, h5, h6 { line-height: var(--type-line-height-tight); margin: 0 0 var(--space-sm); font-weight: var(--type-weight-bold); }
/* Job bodies render ## as h4 and ### as h5; keep both at least body size
   so a subsection heading never reads smaller than the list beneath it. */
h5, h6 { font-size: var(--type-body); }
hr { border: 0; border-top: var(--border-hairline) solid var(--color-border); margin: var(--space-lg) 0; }
h1 { font-size: var(--type-title); }
h2 { font-size: var(--type-headline); }
h3 { font-size: var(--type-subhead); }
p { margin: 0 0 var(--space-md); }
a { color: var(--color-link); }
a:hover { color: var(--color-primary-hover); }
:focus-visible {
  outline: var(--border-focus) solid var(--color-focus-ring);
  outline-offset: var(--space-xs);
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute; left: var(--space-sm); top: calc(var(--space-sm) * -8);
  background: var(--color-surface); color: var(--color-link);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm);
  transition: top var(--duration-fast) ease-out; z-index: 10;
}
.skip-link:focus { top: var(--space-sm); }

.wrap { max-width: var(--layout-content-max-width); margin: 0 auto; padding: 0 var(--space-md); }
.wrap-wide { max-width: var(--layout-wide-max-width); margin: 0 auto; padding: 0 var(--space-md); }
.stack > * + * { margin-top: var(--space-md); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.spacer { flex: 1 1 auto; }
.muted { color: var(--color-text-secondary); }
.small { font-size: var(--type-caption); }
.visually-hidden {
  position: absolute; width: var(--border-hairline); height: var(--border-hairline);
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.site-header {
  background: var(--color-surface);
  border-bottom: var(--border-hairline) solid var(--color-border);
}
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--layout-control-height); padding-top: var(--space-sm); padding-bottom: var(--space-sm); }

/* The nav lives inside a <details> so the narrow-screen hamburger works with
   JavaScript blocked. At full width the disclosure is transparent: the
   summary is hidden and the content is forced visible past both mechanisms a
   UA may use to hide it (older engines set display:none on the children,
   newer ones set content-visibility on ::details-content). */
.nav-disclosure { position: relative; }
.nav-disclosure > summary { display: none; }
.nav-disclosure::details-content { content-visibility: visible; block-size: auto; }
.site-nav { display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: center; }
.site-nav a { color: var(--color-text-primary); text-decoration: none; }
.site-nav a:hover { color: var(--color-link); text-decoration: underline; }
/* Signed out, "Sign in" sits alone in the header's right corner with no
   disclosure around it, so it needs the nav link styling on its own. */
.nav-signin { color: var(--color-text-primary); text-decoration: none; }
.nav-signin:hover { color: var(--color-link); text-decoration: underline; }
/* Sign out has to be a POST, so it is a form — but it is a nav item, not a
   form control. The wrapper collapses to nothing and the button is stripped
   back to the same type, colour, and hover as the links beside it, so the row
   reads as one list in both the wide layout and the open hamburger. */
.nav-signout-form { margin: 0; display: flex; }
.nav-signout {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0;
  font: inherit; line-height: inherit; cursor: pointer;
  color: var(--color-text-primary);
}
.nav-signout:hover { color: var(--color-link); text-decoration: underline; }
.nav-toggle {
  align-items: center; justify-content: center; cursor: pointer;
  min-width: var(--layout-control-height); min-height: var(--layout-control-height);
  color: var(--color-text-primary); list-style: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: var(--space-lg); height: var(--border-thick);
  background: currentColor; border-radius: var(--radius-sm);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: calc(var(--space-sm) * -1); }
.nav-toggle-bars::after { top: var(--space-sm); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: var(--type-weight-bold); color: var(--color-primary); text-decoration: none; }
/* The asset is 340px wide and rendered at --layout-logo-width (half that),
   so it is crisp on a 2x display and never upscaled on any display. */
.site-logo { width: var(--layout-logo-width); height: var(--layout-logo-height); max-width: 100%; }
.brand span { color: var(--color-text-secondary); font-weight: var(--type-weight-regular); }
.site-footer {
  margin-top: var(--space-xxl); padding: var(--space-lg) 0;
  border-top: var(--border-hairline) solid var(--color-border);
  color: var(--color-text-secondary); font-size: var(--type-caption);
  background: var(--color-surface);
  text-align: center;
}
.site-footer a { color: var(--color-link); }

/* The band runs flush to the header and pays back main's top padding, so
   there is no strip of page background between the two. */
.hero {
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-xl) 0;
  margin-top: calc(var(--space-lg) * -1);
  margin-bottom: var(--space-xl);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-xl); align-items: center; }
.hero h1 { font-size: var(--type-display); color: var(--color-on-primary); margin-bottom: var(--space-md); }
.hero-body { color: var(--color-on-primary); margin-bottom: 0; }
/* The full-strength accent lands at 3.58:1 on primary — under AA for text
   this size — so the eyebrow takes accentSubtle from the same family, which
   measures 5.68:1. */
.hero-eyebrow {
  font-family: var(--type-family-mono); font-size: var(--type-caption);
  text-transform: uppercase; letter-spacing: var(--border-hairline);
  color: var(--color-accent-subtle); margin-bottom: var(--space-md);
}
/* width/height on the <img> reserve the 4:3 box, so the roles list below
   never jumps once the photograph arrives. */
.hero-figure { display: block; }
.hero-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

main { padding: var(--space-lg) 0 var(--space-xl); }

.card {
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
}
.card + .card { margin-top: var(--space-md); }
/* job-detail's apply action: plain, no card, at the end of the description.
   Apply and copy-link share one line and wrap rather than overflow at 360px. */
.job-action { margin-top: var(--space-lg); }
.job-action .notice:last-child { margin-bottom: 0; }
.job-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
/* A team group: heading and count in the left column, roles in the right. */
.team-group { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-lg); padding: var(--space-xl) 0; }
.team-group + .team-group { border-top: var(--border-hairline) solid var(--color-border); }
.team-group h2 { font-size: var(--type-headline); color: var(--color-text-primary); margin-bottom: var(--space-xs); }
.team-group-count {
  font-family: var(--type-family-mono); font-size: var(--type-caption);
  color: var(--color-text-secondary); margin: 0;
}

.role-card {
  position: relative; display: flex; gap: var(--space-md);
  align-items: flex-start; justify-content: space-between;
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-lg);
  transition: border-color var(--duration-fast) ease-out;
}
.role-card + .role-card { margin-top: var(--space-md); }
.role-card:hover { border-color: var(--color-border-strong); }
.role-card-title { font-size: var(--type-headline); margin-bottom: var(--space-xs); }
.role-card-title a { color: var(--color-text-primary); text-decoration: none; }
/* Stretched link: one tab stop per role, but the whole card is clickable. */
.role-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.role-card-meta {
  font-family: var(--type-family-mono); font-size: var(--type-caption);
  color: var(--color-text-secondary); margin-bottom: var(--space-sm);
}
.role-card-summary { color: var(--color-text-secondary); margin: 0; }
.role-card-view { color: var(--color-link); font-weight: var(--type-weight-medium); white-space: nowrap; flex: 0 0 auto; }
.role-card:hover .role-card-view { text-decoration: underline; }
/* With :has the ring goes around the whole card; without it the link keeps
   the ordinary :focus-visible outline, so focus is visible either way. */
@supports selector(:has(*)) {
  .role-card-title a:focus-visible { outline: none; }
  .role-card:has(.role-card-title a:focus-visible) {
    outline: var(--border-focus) solid var(--color-focus-ring);
    outline-offset: var(--space-xs);
  }
}
.meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); color: var(--color-text-secondary); font-size: var(--type-caption); }
.meta li { list-style: none; }
ul.meta { margin: 0 0 var(--space-sm); padding: 0; }

.chip {
  display: inline-block; padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill); background: var(--color-secondary-subtle);
  color: var(--color-text-primary); font-size: var(--type-caption);
}
.badge {
  display: inline-block; padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill); font-size: var(--type-caption);
  font-weight: var(--type-weight-medium); color: var(--color-text-inverse);
}
.badge-received { background: var(--color-status-received); }
.badge-in_review { background: var(--color-status-in-review); }
.badge-interview { background: var(--color-status-interview); }
.badge-offer { background: var(--color-status-offer); }
.badge-hired { background: var(--color-status-hired); }
.badge-declined { background: var(--color-status-declined); }
.badge-withdrawn { background: var(--color-status-withdrawn); }
.badge-draft { background: var(--color-text-muted); }
.badge-open { background: var(--color-success); }
.badge-closed { background: var(--color-text-muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--layout-control-height); padding: 0 var(--space-md);
  border-radius: var(--radius-md); border: var(--border-hairline) solid transparent;
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: var(--type-body); font-weight: var(--type-weight-medium);
  text-decoration: none; cursor: pointer;
  transition: background var(--duration-fast) ease-out;
}
.btn:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn:active { background: var(--color-primary-pressed); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--color-text-muted); cursor: not-allowed; }
.btn-secondary {
  background: var(--color-surface); color: var(--color-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-primary-subtle); color: var(--color-primary-hover); }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger); }
.btn-small { min-height: var(--layout-control-height-small); font-size: var(--type-caption); padding: 0 var(--space-sm); }

label { display: block; font-weight: var(--type-weight-medium); margin-bottom: var(--space-xs); }
.field { margin-bottom: var(--space-md); }
.field .hint { color: var(--color-text-secondary); font-size: var(--type-caption); margin: var(--space-xs) 0 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"],
input[type="date"], input[type="time"], input[type="number"], input[type="file"], select, textarea {
  width: 100%; min-height: var(--layout-control-height);
  padding: var(--space-sm); font: inherit; color: var(--color-text-primary);
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
textarea { min-height: calc(var(--layout-control-height) * 3); resize: vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--color-danger); border-width: var(--border-thick);
}
.field-error { color: var(--color-danger); font-size: var(--type-caption); margin: var(--space-xs) 0 0; }
fieldset { border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-md); margin: 0 0 var(--space-md); }
legend { font-weight: var(--type-weight-medium); padding: 0 var(--space-xs); }
.checkbox { display: flex; gap: var(--space-sm); align-items: flex-start; }
.checkbox input { width: auto; min-height: 0; margin-top: var(--space-xs); }
.checkbox label { font-weight: var(--type-weight-regular); margin: 0; }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-end; margin-bottom: var(--space-lg); }
.filters .field { margin: 0; min-width: calc(var(--layout-content-max-width) / 5); flex: 1 1 auto; }

.panel {
  background: var(--color-surface); border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--color-border);
  padding: var(--space-lg); box-shadow: var(--shadow-card);
}
.panel-centered { max-width: calc(var(--layout-content-max-width) / 1.8); margin: 0 auto; text-align: left; }
.notice { border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); }
.notice-error { background: var(--color-danger-subtle); color: var(--color-danger); }
.notice-success { background: var(--color-success-subtle); color: var(--color-success); }
.notice-info { background: var(--color-info-subtle); color: var(--color-info); }
.notice-warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.empty { text-align: center; padding: var(--space-xl) var(--space-md); color: var(--color-text-secondary); }

table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
th, td { text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: var(--border-hairline) solid var(--color-border); }
th { font-size: var(--type-caption); text-transform: uppercase; letter-spacing: var(--border-hairline); color: var(--color-text-secondary); }
tbody tr:hover { background: var(--color-surface-alt); }
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: var(--border-hairline) solid var(--color-border); }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li + li { margin-top: var(--space-sm); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); position: relative; border-left: var(--border-thick) solid var(--color-border); }
.timeline li::before {
  content: ""; position: absolute; left: calc(var(--space-xs) * -1.5); top: var(--space-md);
  width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.timeline li:last-child { border-left-color: transparent; }

.admin-shell { background: var(--color-surface-sunken); min-height: 100vh; }
.admin-header { background: var(--color-primary); color: var(--color-text-inverse); }
.admin-header a { color: var(--color-text-inverse); text-decoration: none; }
.admin-header .wrap-wide { display: flex; align-items: center; gap: var(--space-md); padding-top: var(--space-sm); padding-bottom: var(--space-sm); flex-wrap: wrap; }
.admin-nav { background: var(--color-surface); border-bottom: var(--border-hairline) solid var(--color-border); }
.admin-nav .wrap-wide { display: flex; gap: var(--space-md); flex-wrap: wrap; padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.admin-nav a { text-decoration: none; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
.admin-nav a[aria-current="page"] { background: var(--color-primary-subtle); font-weight: var(--type-weight-medium); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--layout-content-max-width) / 4), 1fr)); gap: var(--space-md); }
.stat-tile { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-md); border: var(--border-hairline) solid var(--color-border); }
.stat-tile .value { font-size: var(--type-display); font-weight: var(--type-weight-bold); color: var(--color-primary); line-height: var(--type-line-height-tight); }
.stat-tile .label { color: var(--color-text-secondary); font-size: var(--type-caption); }
.tabs { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); flex-wrap: wrap; }
.tabs a { text-decoration: none; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-surface); border: var(--border-hairline) solid var(--color-border); }
.tabs a[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-lg); align-items: start; }
.resume-viewer { width: 100%; height: calc(var(--layout-content-max-width) * 0.9); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-sm); }
.note { border-left: var(--border-thick) solid var(--color-accent); padding: var(--space-sm) var(--space-md); background: var(--color-surface-alt); border-radius: var(--radius-sm); }
.note + .note { margin-top: var(--space-sm); }

/* Below breakpoint.md the nav becomes a hamburger and both grids go single
   column. The hero and the team groups collapse at the same width because a
   two-column hero with a photograph is unreadable any narrower. */
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .team-group { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-lg) 0; }
  .nav-disclosure > summary { display: inline-flex; }
  .nav-disclosure::details-content { content-visibility: hidden; }
  .nav-disclosure[open]::details-content { content-visibility: visible; }
  .site-nav { display: none; }
  .nav-disclosure[open] > .site-nav {
    display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start;
    position: absolute; right: 0; top: 100%; z-index: 20;
    min-width: calc(var(--layout-content-max-width) / 4);
    padding: var(--space-md);
    background: var(--color-surface);
    border: var(--border-hairline) solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised);
  }
}
@media (max-width: 480px) {
  .hero h1 { font-size: var(--type-title); }
  .filters .field { min-width: 100%; }
  .role-card { flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md); }
}