/* Shared stylesheet for the project index, case studies and the error page.
   Preprint system: Libertinus for titles and headings, Source Serif 4 for
   reading, Plex Mono only for measured figures. One accent for links and
   actions; oxblood is reserved for results that went against the build. */

@font-face {
  font-family: "Libertinus Serif Display";
  src: url("../fonts/libertinus-serif-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-text.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-text-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fdfdfc;
  --ink: #1b2a30;
  --sec: #4d5d63;
  --rule: #d9dfe0;
  --accent: #28566b;
  --accent-strong: #1e4759;
  --on-accent: #ffffff;
  --tint: #eef3f4;
  --against: #8e2b22;
  --font-display: "Libertinus Serif Display", Georgia, serif;
  --font-text: "Source Serif 4", Georgia, serif;
  --font-mono: "Plex Mono", ui-monospace, monospace;
  --measure: 660px;
  --page: 1120px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #13191b;
  --ink: #e6ecee;
  --sec: #a6b4b9;
  --rule: #2b3539;
  --accent: #8cc1d6;
  --accent-strong: #a9d3e3;
  --on-accent: #10181b;
  --tint: #1a2326;
  --against: #e8968c;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #13191b;
    --ink: #e6ecee;
    --sec: #a6b4b9;
    --rule: #2b3539;
    --accent: #8cc1d6;
    --accent-strong: #a9d3e3;
    --on-accent: #10181b;
    --tint: #1a2326;
    --against: #e8968c;
    color-scheme: dark;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.06; }
h2 { font-size: 30px; margin-bottom: 16px; }
h3 { font-size: 23px; }
p, figure, dl, dd { margin: 0; }
p + p { margin-top: 1em; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: #cfe1e8; color: #1b2a30; }
code { font-family: var(--font-mono); font-size: .86em; overflow-wrap: anywhere; }
strong { font-weight: 600; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 30; padding: 8px 12px; background: var(--paper); }
.skip-link:focus { left: 16px; }

.container { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 40px; }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); }
.nav-shell { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand { margin-right: auto; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 24px; }
.brand strong { font-weight: 400; }
.nav-menu { display: flex; gap: 28px; }
.nav-menu a { color: var(--ink); text-decoration: none; font-size: 16px; padding: 10px 0; }
.nav-menu a:hover { color: var(--accent); }
.nav-toggle { display: none; }
.header-email { display: none; }

/* Title block */
.page-title { padding: 64px 0 24px; }
.page-title .container > * { max-width: var(--measure); }
.page-title h1 { max-width: 980px; }
.project-label { display: block; margin-top: 16px; font-size: 16px; color: var(--sec); font-style: italic; }
.project-summary { margin-top: 14px; font-size: 21px; line-height: 1.5; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 24px; font-size: 17px; }
.button { color: var(--accent); }
.button.demo,
.button.primary {
  padding: 11px 22px; border-radius: 2px; background: var(--accent); color: var(--on-accent);
  font-weight: 600; text-decoration: none;
}
.button.demo:hover,
.button.primary:hover { background: var(--accent-strong); }
.button.demo:active,
.button.primary:active { transform: translateY(1px); }

/* Sections: one column of prose; figures may run wider */
.section { padding: 48px 0 0; }
.section:last-of-type { padding-bottom: 8px; }
.section-head { max-width: var(--measure); margin-bottom: 20px; }
.section-head p { color: var(--sec); }
.case-study-grid > *,
.split > * { max-width: var(--measure); }
.split > * + * { margin-top: 18px; }
.text-block > * + * { margin-top: 1em; }
.content-list { margin: 0; padding-left: 1.1em; }
.content-list li + li { margin-top: 8px; }
.content-list li::marker { color: var(--sec); }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 8px; padding: 0; list-style: none; color: var(--sec); font-size: 16px; }
.callout { padding-left: 18px; border-left: 2px solid var(--accent); color: var(--ink); }

/* Figures: full screenshots, never cropped */
.screenshot-grid { display: grid; gap: 28px; max-width: 1024px; }
.screenshot-grid figure img { width: 100%; border: 1px solid var(--rule); }
.screenshot-grid figcaption { margin-top: 10px; max-width: var(--measure); font-size: 15px; line-height: 1.5; color: var(--sec); }

/* Results: a ruled list, one sentence each */
.results-grid { max-width: 900px; margin-top: 32px; border-top: 1.5px solid var(--ink); }
.metric {
  display: grid; grid-template-columns: 116px 160px minmax(0, 1fr); gap: 4px 24px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.metric .verdict { font-size: 15px; color: var(--sec); }
.metric strong {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 19px;
}
.metric span { font-size: 17px; }
.metric[data-verdict="against"] .verdict { color: var(--against); }
.metric[data-verdict="against"] strong { color: var(--against); }

/* Architecture: a numbered pipeline down the page */
.architecture { counter-reset: stage; max-width: var(--measure); border-top: 1.5px solid var(--ink); }
.arch-node { counter-increment: stage; position: relative; padding: 12px 0 12px 44px; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-size: 20px; }
.arch-node::before { content: counter(stage); position: absolute; left: 0; top: 15px; font-family: var(--font-mono); font-size: 14px; color: var(--sec); }
.arch-node small { display: block; font-family: var(--font-text); font-size: 16px; color: var(--sec); }
.arch-arrow { display: none; }

/* Tables */
.eval-table { max-width: var(--measure); overflow-x: auto; margin-top: 16px; }
.eval-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.eval-table th { text-align: left; font-weight: 400; padding: 6px 12px 6px 0; }
.eval-table td { font-family: var(--font-mono); font-size: 15px; padding: 6px 12px 6px 0; }
.eval-table thead th { border-bottom: 1.5px solid var(--ink); color: var(--sec); font-size: 15px; }
.eval-table tbody tr:last-child > * { border-bottom: 1.5px solid var(--ink); }

/* Project index */
.work-entry > div:only-child { grid-column: 1 / -1; }
.work-intro .container > h1 { max-width: 980px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; }
.screenshot-grid + .text-block { max-width: var(--measure); margin-top: 20px; }
.work-intro { padding-top: 48px; padding-bottom: 8px; }
.work-list { padding-top: 8px; }
.work-group + .work-group { margin-top: 12px; }
.work-group > h2 { font-size: 22px; line-height: 1.2; margin: 0; padding: 12px 0 6px; }
.work-entry {
  display: grid; grid-template-columns: minmax(0, var(--measure)) 144px; gap: 0 48px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--rule);
}
.work-entry:last-of-type { border-bottom: 1px solid var(--rule); }
.work-entry h3 a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--ink); text-decoration-color: var(--rule); }
.work-entry h3 a:hover { text-decoration-color: var(--accent); }
.work-entry .work-kind { margin-top: 2px; font-size: 15px; color: var(--sec); font-style: italic; }
.work-entry .work-result { margin-top: 4px; }
.work-entry h3 { font-size: 22px; }
.work-entry .work-scope { margin-top: 2px; font-size: 15.5px; color: var(--sec); }
.work-entry img { border: 1px solid var(--rule); aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }

/* Evaluation appendix */
.evidence-ledger-section { padding-top: 32px; }
.ledger-details { max-width: 1024px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); }
.ledger-details summary { padding: 14px 0; cursor: pointer; font-family: var(--font-display); font-size: 23px; }
.ledger-head { max-width: var(--measure); }
.ledger-head p { color: var(--sec); }
.ledger-tally { display: flex; gap: 8px 32px; flex-wrap: wrap; margin: 14px 0 18px; }
.ledger-tally div { display: flex; flex-direction: column-reverse; }
.ledger-tally dt { font-size: 14px; color: var(--sec); }
.ledger-tally dd { font-family: var(--font-mono); font-size: 22px; }
.ledger-tally [data-verdict="against"] dd { color: var(--against); }
.ledger-table-wrap { overflow-x: auto; padding-bottom: 18px; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.ledger-table th, .ledger-table td { text-align: left; font-weight: 400; padding: 7px 14px 7px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.ledger-table thead th { border-bottom: 1.5px solid var(--ink); color: var(--sec); font-size: 14px; }
.ledger-table th a { color: var(--ink); }
.ledger-figure { font-family: var(--font-mono); font-size: 14.5px; white-space: nowrap; }
.ledger-unit { color: var(--sec); }
.ledger-table tr[data-verdict="against"] .ledger-direction { color: var(--against); }

/* Closing route to consulting */
.consult-cta { padding-top: 56px; }
.consult-cta .container > * { max-width: var(--measure); }
.consult-cta h2 { margin-bottom: 10px; padding-top: 32px; border-top: 1.5px solid var(--ink); }

/* Footer */
.site-footer { margin-top: 64px; border-top: 1px solid var(--rule); font-size: 15px; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px; padding-top: 24px; padding-bottom: 48px; }
.footer-brand { margin-right: auto; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 19px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-roles { flex-basis: 100%; color: var(--sec); }

@media (prefers-reduced-motion: reduce) {
  .button.demo:active,
  .button.primary:active { transform: none; }
}

@media (max-width: 900px) {
  .container { padding: 0 20px; }
  .nav-shell { min-height: 64px; gap: 12px; }
  .brand { font-size: 22px; }
  .header-email { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--ink); font-size: 17px; text-decoration: none; }
  .nav-menu a[href^="mailto:"] { display: none; }
  .nav-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--rule); border-radius: 2px; background: transparent; color: var(--ink); cursor: pointer;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; content: ""; }
  .nav-toggle span::before { position: absolute; top: -6px; }
  .nav-toggle span::after { position: absolute; top: 6px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
  .nav-menu {
    display: none; position: absolute; left: 0; right: 0; top: 64px; z-index: 20;
    flex-direction: column; gap: 0; padding: 8px 20px 16px; background: var(--paper); border-bottom: 1px solid var(--rule);
  }
  .nav-menu[data-open] { display: flex; }
  .nav-menu a { padding: 12px 0; font-size: 18px; border-bottom: 1px solid var(--rule); }
  .site-header { position: relative; }
  .page-title { padding: 32px 0 16px; }
  h1 { font-size: 40px; }
  h2 { font-size: 26px; }
  .project-summary { font-size: 18.5px; }
  .section { padding-top: 40px; }
  .screenshot-grid { margin: 0 -20px; }
  .screenshot-grid figure img { border-left: 0; border-right: 0; }
  .screenshot-grid figcaption { padding: 0 20px; }
  .metric { grid-template-columns: 1fr; gap: 2px; }
  .work-entry { grid-template-columns: minmax(0, 1fr) 72px; gap: 14px; padding: 12px 0; }
  .work-entry img { aspect-ratio: 1; }
  .work-entry h3 { font-size: 20px; }
  .work-entry .work-kind { font-size: 14px; }
  .work-entry .work-result { font-size: 16px; }
  .footer-grid { flex-direction: column; gap: 4px; padding-bottom: 40px; }
  .footer-nav { flex-direction: column; gap: 0; }
  .footer-nav a, .footer-roles a, .footer-brand { display: inline-flex; align-items: center; min-height: 44px; }
}

html:not(.js) .nav-toggle {
  display: none;
}

html:not(.js) .nav-menu {
  display: flex;
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
  border: 0;
}