/* Work Sans from Google Fonts. The accompanying license is in art/work-sans-OFL.txt. */
@font-face {
  font-family: "Work Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/art/work-sans-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/art/work-sans-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("/art/work-sans-800-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/art/work-sans-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url("/art/work-sans-800-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --font-sans: "Work Sans", system-ui, sans-serif;
  --polar-white: #f5f8fb;
  --snow: #fff;
  --glacier-blue: #b9d7e9;
  --glacier-wash: #e8f2f8;
  --glacier-line: #a9c3d5;
  --glacier-border: #7495ad;
  --polar-ink: #172c41;
  --polar-muted: #405d73;
  --polar-link: #275673;
  --racing-red: #e4002b;
  --racing-hover: #bb0024;
  --racing-ink: #b3072c;
  --racing-wash: #fce8ed;
  --success-ink: #17644f;
  --success-wash: #e5f5ed;
  --warning-ink: #80500e;
  --warning-wash: #fdf2dd;
}

.brand-name { white-space: nowrap; }
.site-brand {
  --brand-gap: clamp(.3rem, 1.1vw, 1rem);
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--brand-gap);
}
.site-brand-logo {
  display: block;
  width: var(--brand-logo-size, clamp(35px, 4.4vw, 56px));
  height: auto;
}
.site-brand-wordmark {
  padding-block: clamp(3px, .4vw, 6px);
  padding-inline-start: var(--brand-gap);
  border-inline-start: 1px solid var(--glacier-border);
}
.site-brand-wordmark img {
  display: block;
  width: var(--brand-wordmark-size, clamp(68px, max(10.8vw, min(22vw, 84px)), 157px));
  height: auto;
}

:is(.cut-frame, .button) {
  --cut-width: clamp(19px, 1.6vw, 23px);
  --cut-height: clamp(13px, 1.12vw, 16px);
  --cut-line: 1px;
  --cut-edge: #9ebbcf;
  --cut-face: linear-gradient(145deg, var(--snow) 32%, #eaf3f9);
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
}

:is(.cut-frame, .button)::before, :is(.cut-frame, .button)::after {
  --corner-width: var(--cut-width);
  --corner-height: var(--cut-height);
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: polygon(
    var(--corner-width) 0, 100% 0, 100% calc(100% - var(--corner-height)),
    calc(100% - var(--corner-width)) 100%, 0 100%, 0 var(--corner-height)
  );
}

:is(.cut-frame, .button)::before { z-index: -2; inset: 0; background: var(--cut-edge); }
:is(.cut-frame, .button)::after {
  /* Compensate for the inset so the stroke stays even along both diagonals. */
  --corner-width: calc(var(--cut-width) - var(--cut-line) * .67);
  --corner-height: calc(var(--cut-height) - var(--cut-line) * .47);
  z-index: -1;
  inset: var(--cut-line);
  background: var(--cut-face);
}

.cut-compact, .button {
  --cut-width: 17px;
  --cut-height: 12px;
}

@media (forced-colors: active) {
  :is(.cut-frame, .button)::before { background: CanvasText; forced-color-adjust: none; }
  :is(.cut-frame, .button)::after { background: Canvas; forced-color-adjust: none; }
}