@font-face {
  font-family: "Google Sans";
  src: url("/assets/fonts/GoogleSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #404040;
  --body-ink: #3b3b3b;
  --blue: #4469c6;
  --pale: #f5f5f9;
  --meta-label: #afafaf;
  --secondary-caption: #898989;
  --page-width: 1162px;
  --page-gutter: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; color: var(--body-ink); background: #fff; font-family: "Google Sans", Arial, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, p, dl, dd { margin: 0; }

.topbar { height: 64px; position: relative; }
.back-link { position: absolute; top: 48px; left: 0; width: 44px; height: 44px; color: #343434; touch-action: manipulation; }
.back-link:hover { color: var(--blue); }
.back-link:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.topbar, .case-section, .hero, .site-footer { width: min(var(--page-width), calc(100% - var(--page-gutter) - var(--page-gutter))); margin-inline: auto; }

@media (max-width: 950px) {
  :root { --page-gutter: max(clamp(20px, 4vw, 28px), env(safe-area-inset-left), env(safe-area-inset-right)); }
}

@media (max-width: 600px) {
  .topbar { height: 70px; }
  .back-link { top: 32px; }
}