@font-face {
  font-family: "Libertinus Serif Display";
  src: url("../fonts/libertinus-serif-display-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-display: "Libertinus Serif Display", Georgia, serif;
  --reading: 70ch;
}
:root:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f5f7f9;
  --surface-strong: #e7edf1;
  --ink: #152c35;
  --ink-soft: #253d49;
  --text: #2c4250;
  --muted: #536674;
  --soft: #536674;
  --line: #d3dce3;
  --line-strong: #a7b6c1;
  --accent: #a43c21;
  --accent-dark: #813018;
  --accent-soft: #f4e7e1;
  --signal: #8a4a24;
  --signal-dark: #693717;
  --signal-soft: #f4e7e1;
  --light: #ffffff;
  --light-muted: #d3dce3;
  --focus: #92351d;
  --against: #933644;
  --button-bg: #a43c21;
  --button-fg: #ffffff;
  --button-hover: #813018;
  --inverse-bg: #152c35;
  --inverse-fg: #ffffff;
}
body { background: var(--bg); }
::selection { background: var(--accent-soft); color: var(--ink); }
a { text-underline-offset: .22em; }
.site-header { position: static; background: var(--bg); backdrop-filter: none; box-shadow: none; }
.brand strong { font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: -.02em; }
.page-title { background: var(--bg); padding-block: 46px 32px; }
.page-title h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4vw, 52px); line-height: 1.08; letter-spacing: -.02em; }
.page-title .project-summary { max-width: 74ch; font-size: 18px; line-height: 1.65; }
.page-title .project-label { margin: 16px 0; color: var(--muted); font-size: 14px; }
.section { padding-block: 38px; }
.section-head h2, .case-study-grid > h2 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 38px); font-weight: 400; }
.text-block p { font-size: 17px; line-height: 1.75; max-width: 74ch; }
.project-card { box-shadow: none; border-radius: 0; background: transparent; border: 0; border-top: 1px solid var(--line); }
.project-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.15; }
.project-card .project-meta li { border: 0; background: transparent; padding: 0; color: var(--muted); font-size: 14px; }
.project-card .project-label { display: block; margin: 12px 0; font-size: 14px; }
.project-meta { column-gap: 18px; }
.button, .button.demo { border-radius: 0; box-shadow: none; }
.media-frame, .screenshot-grid figure, .screenshot-grid img { border-radius: 0; box-shadow: none; }
.metric { box-shadow: none; border-radius: 0; border-left-width: 1px; }
.metric strong { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.site-footer { background: var(--bg); color: var(--text); border-top: 1px solid var(--line); }
.site-footer a, .site-footer p, .site-footer strong { color: var(--text); }
@media (max-width: 700px) {
  .page-title { padding-block: 30px 24px; }
  .page-title .project-summary { font-size: 16px; }
  .section { padding-block: 28px; }
  .text-block p { font-size: 16px; }
  .brand strong { font-size: 25px; }
}