/* The project archive has its own visual language. Loaded only on work pages. */
:root {
  color-scheme: light;
  --ground: #f2f3ef;
  --ink: #20231f;
  --muted: #5b6259;
  --surface: #e6e8e1;
  --accent: #315b47;
  --accent-ink: #f2f3ef;
  --field-dark: #20231f;
  --field-light: #f2f3ef;
  --display: 'General Sans', 'Helvetica Neue', sans-serif;
  --serif: var(--display);
  --type-small: 14px;
  --type-body: clamp(16px, 1.25vw, 18px);
  --type-lead: clamp(21px, 1.9vw, 28px);
  --type-heading: clamp(30px, 3.4vw, 48px);
  --type-display: clamp(64px, 8.2vw, 132px);
  --page-gutter: clamp(22px, 3.3vw, 64px);
}
body { font: 400 var(--type-body)/1.55 var(--display); -webkit-font-smoothing: antialiased; }
.wrap { width: min(1660px, calc(100% - var(--page-gutter)*2)); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; }
a { text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
button, input { font-family: var(--display); }
.page-header { min-height: 100px; }
.brand { font: 700 var(--type-lead)/1 var(--display); letter-spacing: -.08em; }
.page-header nav { gap: clamp(20px,3vw,48px); }
.page-header nav a { font-size: var(--type-small); }
.page-header nav [aria-current] { color: var(--ink); text-decoration: underline; }
.skip-link { left: var(--page-gutter); background: var(--ink); color: var(--ground); }
.correspondence { position: relative; width: 100%; max-width: none; padding: clamp(70px,9vw,135px) var(--page-gutter) 60px; background: var(--field-dark); color: var(--field-light); }
.correspondence h2 { color: inherit; margin-bottom: 24px; font-size: var(--type-heading); font-weight: 400; letter-spacing: -.035em; }
.correspondence > p { max-width: 43ch; font-size: var(--type-body); }
.contact-email { margin-block: 44px 30px; color: inherit; font: 400 var(--type-display)/1.06 var(--display); letter-spacing: -.055em; }
.contact-email:hover { color: inherit; text-decoration: underline; }
.correspondence .contact-meta { font-size: var(--type-small); color: inherit; opacity: .75; }
.correspondence .actions { gap: 20px 40px; margin-top: 34px; }
.correspondence .actions a { color: inherit; font-size: var(--type-small); }
.page-footer { width: 100%; max-width: none; padding: 35px var(--page-gutter) 40px; background: var(--field-dark); color: var(--field-light); font-size: var(--type-small); }
.page-footer p { opacity: .75; }
.page-footer a:hover { color: inherit; text-decoration: underline; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
@media (max-width: 700px) {
  :root { --type-body: 16px; --type-lead: 22px; --type-heading: 32px; --type-display: clamp(43px,12vw,76px); }
  .page-header { min-height: 82px; gap: 16px; }
  .page-header nav { gap: 20px; }
  .page-header nav a { font-size: var(--type-small); }
  .correspondence { padding-bottom: 45px; }
  .contact-email { margin-block: 32px 20px; }
  .page-footer { padding-top: 20px; }
}