:root {
  --nav-pad-block: calc(var(--s-1) * var(--qphi)); /* the spacing ladder, so the small labels move without it */
  --nav-h: calc(var(--tap) + 2 * var(--nav-pad-block));
  --bar-font: var(--f-2);
  --bar-pad-block: calc(var(--f-2) / var(--phi));
  --bar-h: calc(var(--bar-font) * var(--lead-tight) + 2 * var(--bar-pad-block));
  --nav-ground: color-mix(in srgb, var(--paper) calc(100% - (100% - 100% / var(--phi3)) / var(--phi3) * var(--qphi)), transparent);
  --nav-blur: var(--s0);
}
body.has-nav { padding-top: 0; }
html { scroll-padding-top: calc(var(--nav-h) + 1px); }

.chrome-shell { position: sticky; top: 0; z-index: 5; }

.chrome-bar {
  display: none;
  align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: var(--f-2);
  padding: var(--bar-pad-block) var(--gutter);
  background: var(--ink); color: var(--paper);
  font-size: var(--bar-font); line-height: var(--lead-tight);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.chrome-bar__name { font-weight: 500; }
.chrome-bar a { color: var(--paper); text-decoration: none; white-space: nowrap; }
.chrome-bar a[href^="mailto:"] { text-transform: lowercase; }
.chrome-bar a:hover { color: var(--accent); }

.chrome-nav {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--s-1) var(--s1);
  padding: var(--nav-pad-block) var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.chrome-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--nav-ground);
  backdrop-filter: blur(var(--nav-blur));
}
@supports not (backdrop-filter: blur(1px)) {
  .chrome-nav::before { background: var(--paper); }
}
.chrome-shell--overlay .chrome-nav {
  position: absolute; inset: 100% 0 auto;
  border-bottom: 0;
}
@media (max-width: 30rem) {
  .chrome-shell--overlay .chrome-nav { position: relative; inset: auto; }
}
.chrome-nav__mark {
  font-size: var(--f-1); letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  display: flex; align-items: center; min-height: var(--tap);
}

.chrome-nav__mark img { height: var(--mark); width: auto; display: block; }
.chrome-nav__links { display: none; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.chrome-nav__links > a, .chrome-nav__group > a {
  min-height: var(--tap); padding-inline: var(--s0);
  display: inline-flex; align-items: center;
  font-size: var(--f-1); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.chrome-nav__links > a:hover, .chrome-nav__group > a:hover { color: var(--accent-ink); }
.chrome-nav__links .btn {
  color: var(--btn-fg); margin-left: var(--s-1);
  padding-inline: var(--s0); display: inline-grid;
}
.chrome-nav__links .btn:hover { color: var(--btn-fg-hover); }
.chrome-nav__links a[aria-current="page"] {
  color: var(--accent-ink);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: calc(var(--s0) / var(--phi3));
}

.chrome-nav__group { display: flex; align-items: center; align-self: stretch; }
.chrome-nav__group > a::after {
  content: ''; margin-left: calc(var(--s0) / var(--phi2)); flex: none;
  width: calc(var(--s0) / var(--phi2)); height: calc(var(--s0) / var(--phi2));
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  rotate: 45deg;
}
.chrome-nav__drop {
  position: absolute; top: 100%; inset-inline: 0; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: var(--s2); align-items: start;
  opacity: 0; pointer-events: none;
  padding: var(--s1) var(--gutter);
  background: var(--paper);
  border-block: 1px solid var(--hairline);
}
.chrome-nav__drop::before {
  content: ''; position: absolute; inset-inline: 0;
  top: calc(-1 * (var(--nav-pad-block) + 1px));
  height: calc(var(--nav-pad-block) + 1px);
}
.chrome-nav__drop--locations { grid-template-columns: repeat(5, 1fr); column-gap: var(--s1); }
.chrome-nav__group:hover > .chrome-nav__drop,
.chrome-nav__group:focus-within > .chrome-nav__drop { opacity: 1; pointer-events: auto; }
.chrome-nav__drop a {
  display: flex; align-items: center;
  padding-block: calc(var(--s0) / var(--phi2));
  font-family: var(--serif); font-size: var(--f0);
  line-height: var(--lead-head); letter-spacing: var(--track-body);
  color: var(--ink);
}
.chrome-nav__drop a:hover { color: var(--accent-ink); }

.chrome-nav__col { display: flex; flex-direction: column; }
.chrome-nav__drop a.chrome-nav__colhead,
.chrome-nav__drop a.chrome-nav__dropfoot {
  font-family: var(--sans); font-size: var(--f-2);
  line-height: var(--lead-tight); letter-spacing: var(--track-meta);
  text-transform: uppercase;
}
.chrome-nav__colhead {
  color: var(--accent-ink);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: calc(var(--s0) / var(--phi2));
}
.chrome-nav__dropfoot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--hairline);
  margin-top: calc(var(--s0) / var(--phi2));
  color: var(--ink-soft);
}
.chrome-nav__menu {
  width: var(--tap); height: var(--tap); flex: none; padding: 0;
  display: grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: var(--ink);
}
.chrome-nav__menu:hover { border-color: var(--hairline); }

.chrome-nav__menu span {
  display: block; position: relative;
  width: var(--s0); height: 1px; background: currentColor;
}
.chrome-nav__menu span::before, .chrome-nav__menu span::after {
  content: ''; position: absolute; left: 0;
  width: var(--s0); height: 1px; background: currentColor;
}
.chrome-nav__menu span::before { top: calc(-1 * var(--s0) / var(--phi3)); }
.chrome-nav__menu span::after  { top: calc(var(--s0) / var(--phi3)); }

@media (min-width: 56rem) {
  html { scroll-padding-top: calc(var(--nav-h) + var(--bar-h) + 1px); }
  .chrome-nav__links { display: flex; }
  .chrome-bar { display: flex; }
}

@media (min-width: 56rem) and (max-width: 71.99rem) {
  .chrome-nav { column-gap: var(--s-1); }
  .chrome-nav__links > a:not(.btn), .chrome-nav__group > a { padding-inline: calc(var(--s0) / var(--phi)); }
  .chrome-nav__drop--locations { grid-template-columns: repeat(4, 1fr); }
}

.chrome-drawer {
  --drawer-gutter: var(--s1);
  position: fixed; inset: 0 0 0 auto; z-index: 11;
  display: none; border: 0; padding: 0; margin: 0;
  height: 100%; max-height: 100%; max-width: 100%;
  width: min(100%, var(--measure-narrow));
  background: var(--surface); color: var(--ink);
  border-left: 1px solid var(--hairline);
}
.chrome-drawer:popover-open, .chrome-drawer.is-open { display: block; }

.chrome-drawer::backdrop { background: transparent; }
.chrome-scrim {
  position: fixed; inset: 0; z-index: 10; display: none; border: 0;
  background: var(--scrim);
}
.chrome-scrim.is-open { display: block; }

.chrome-drawer__surface {
  display: flex; flex-direction: column; height: 100%; overflow-y: auto;
}

.chrome-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s0); padding: var(--s-1) var(--drawer-gutter);
  border-bottom: 1px solid var(--hairline);
}

.chrome-drawer__close {
  width: var(--tap); height: var(--tap); flex: none; padding: 0;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink-soft);
  font-family: inherit; font-size: var(--f0);
}
.chrome-drawer__close:hover { color: var(--accent-ink); }

.chrome-drawer__body { padding: var(--s1) var(--drawer-gutter); }
.chrome-drawer__item {
  display: grid; min-height: var(--tap); padding: var(--s-1) 0;
  align-content: center;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.chrome-drawer__item:hover { background: var(--surface); }

.chrome-drawer__foot {
  margin-top: auto; border-top: 1px solid var(--hairline);
  background: var(--paper);
  padding: var(--s1) var(--drawer-gutter);
}
.chrome-drawer__contact {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1) var(--s0);
}
.chrome-drawer__contact a {
  display: grid; align-content: center; min-height: var(--tap);
  font-size: var(--f-1); color: var(--ink); text-decoration: none;
  overflow-wrap: anywhere;
}
.chrome-drawer__contact a[href^="mailto:"] { grid-column: 1 / -1; }
.chrome-drawer__contact a span {
  display: block; font-size: var(--f-1); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-soft);
}

.chrome-drawer__call {
  display: grid;
  margin: calc(var(--s1) * -1) calc(var(--drawer-gutter) * -1) var(--s1);
  padding: var(--s0) var(--drawer-gutter) var(--s1);
  background: var(--surface);
}
.chrome-drawer__callhead { text-wrap: balance; }
.chrome-drawer__callbody { font: 400 var(--f-1)/var(--lead-body) var(--sans); color: var(--ink-soft); }
.chrome-drawer__callgo { justify-self: stretch; }

.chrome-foot {
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--gutter) var(--s2);
}
.chrome-foot__grid { display: grid; gap: var(--s1); }
.chrome-foot__mark {
  font-size: var(--f-1); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--paper); text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--tap);
}
.chrome-foot__mark img { height: var(--mark); width: auto; display: block; }
.chrome-foot__meta { font-size: var(--f-1); color: var(--paper-soft); margin: 0;
                     max-width: var(--measure); }

.chrome-foot__identity,
.chrome-foot__group { display: grid; gap: var(--s-1); align-content: start; }
.chrome-foot__group { border-top: 1px solid var(--hairline-ink); padding-top: var(--s0); }
.chrome-foot__grouphead {
  font-size: var(--f-2); letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.chrome-foot__links { display: grid; justify-items: start; justify-content: start; }

.chrome-foot__links a, .chrome-foot__legal a {
  font-size: var(--f-1); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .35em;
  min-height: var(--tap); min-width: var(--tap); overflow-wrap: anywhere;
}
.chrome-foot__links a:hover, .chrome-foot__legal a:hover { color: var(--accent); }

.chrome-foot__links a { justify-content: flex-start; }
.chrome-foot__legal { font-size: var(--f-1); color: var(--paper-soft);
  display: flex; flex-wrap: wrap; column-gap: var(--s1); align-items: center;
  border-top: 1px solid var(--hairline-ink); padding-top: var(--s0);
  margin: var(--s2) 0 0; }
.chrome-foot__legal a { font-size: var(--f-1); }
.pending { font-size: var(--f-1); color: var(--accent); text-transform: uppercase;
  letter-spacing: var(--track-label); }

@media (min-width: 56rem) {
  .chrome-foot__grid {
    grid-template-columns: 1.618fr 1fr 1fr;
    align-items: start; gap: var(--s2);
  }
  .chrome-foot__identity { border-top: 1px solid var(--hairline-ink); padding-top: var(--s0); }
}