:root {
  --nav-pad-block: calc(var(--s-1) * var(--qphi)); /* the spacing ladder, so the small labels move without it */
  --nav-row: calc(var(--tap) + var(--s-1));
  --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); }

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

.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;
}
.bar a { --link-fg: var(--paper); --link-fg-hover: var(--accent); white-space: nowrap; }
.bar a[href^="mailto:"] { text-transform: lowercase; }

.header {
  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);
}
.header::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)) {
  .header::before { background: var(--paper); }
}
.default--overlay .header {
  position: absolute; inset: 100% 0 auto;
  border-bottom: 0;
}
@media (max-width: 30rem) {
  .default--overlay .header { position: relative; inset: auto; }
}
.header__mark {
  font-size: var(--f-1); letter-spacing: var(--track-meta); text-transform: uppercase;
  white-space: nowrap;
  display: flex; align-items: center; min-height: var(--tap);
}

.header__mark img { height: var(--mark); width: auto; display: block; }
.header__links { display: none; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.header__links > a:not(.btn), .header__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; white-space: nowrap;
  --link-fg-hover: var(--accent-ink);
}
.header__links a[aria-current="page"] { --link-fg: var(--accent-ink); }
.header__links .btn {
  color: var(--btn-fg); margin-left: var(--s-1); white-space: nowrap;
}
.header__links .btn:hover { color: var(--btn-fg-hover); }
.header__group { display: flex; align-items: center; align-self: stretch; }
.header__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;
}
.header__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(--nav-ground);
  backdrop-filter: blur(var(--nav-blur));
  border-block: 1px solid var(--hairline);
}
@supports not (backdrop-filter: blur(1px)) {
  .header__drop { background: var(--paper); }
}
.header__group > a { position: relative; }
.header__group > a::before {
  content: ''; position: absolute; inset-inline: 0; top: 100%;
  height: calc(var(--nav-pad-block) + var(--nav-row) + 1px);
  pointer-events: none;
}
.header__group:hover > a::before,
.header__group:focus-within > a::before { pointer-events: auto; }
.header__drop--locations { grid-template-columns: repeat(5, 1fr); column-gap: var(--s1); }
.header__group:hover > .header__drop,
.header__group:focus-within > .header__drop { opacity: 1; pointer-events: auto; }
.header__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);
  --link-fg-hover: var(--accent-ink);
}

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

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

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

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

.off-canvas {
  --off-canvas-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);
}
.off-canvas:popover-open, .off-canvas.is-open { display: block; }

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

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

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

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

.off-canvas__body { padding: var(--s1) var(--off-canvas-gutter); }
.off-canvas__item {
  display: grid; min-height: var(--tap); padding: var(--s-1) 0;
  align-content: center;
  border-bottom: 1px solid var(--hairline);
}
.off-canvas__item:hover { background: var(--paper); }

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

.off-canvas__call {
  display: grid;
  margin: calc(var(--s1) * -1) calc(var(--off-canvas-gutter) * -1) var(--s1);
  padding: var(--s0) var(--off-canvas-gutter) var(--s1);
  background: var(--surface);
}
.off-canvas__callbody { font: 400 var(--f-1)/var(--lead-body) var(--sans); color: var(--ink-soft); }
.off-canvas__callgo { justify-self: stretch; }

.footer {
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--gutter) var(--s2);
}
.footer__grid { display: grid; gap: var(--s1); }
.footer__mark {
  font-size: var(--f-1); letter-spacing: var(--track-label); text-transform: uppercase;
  --link-fg: var(--paper);
  display: inline-flex; align-items: center; min-height: var(--tap);
}
.footer__mark img { height: var(--mark); width: auto; display: block; }
.footer__meta { font-size: var(--f-1); color: var(--paper-soft); margin: 0;
                     max-width: var(--measure); }

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

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

.footer__links a { justify-content: flex-start; }
.footer__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; }
.footer__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) {
  .footer__grid {
    grid-template-columns: 1.618fr 1fr 1fr;
    align-items: start; gap: var(--s2);
  }
  .footer__identity { border-top: 1px solid var(--hairline-ink); padding-top: var(--s0); }
}

.full-width__bar {
  display: flex; align-items: center;
  padding: var(--stack-gap) var(--head-gap);
  border-bottom: 1px solid var(--hairline);
}

.full-width__wrap {
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--inset) var(--head-gap);
}

.full-width__card {
  min-width: 0; width: min(100%, var(--measure-widest)); margin-inline: auto;
  padding: var(--stack-gap) var(--head-gap);
  background: var(--paper); border: 0;
}

@media (max-width: 29.99rem) {
  .full-width__wrap { padding: 0; }
  .full-width__card { width: 100%; padding: var(--section) var(--gutter) var(--gutter); }
}

.canvas { display: grid; min-height: 100dvh; }

.call { display: grid; gap: var(--head-gap); }

.canvas .call { width: min(100%, var(--measure-wide)); margin-inline: auto; }

/* the Canvas template is the whole screen, so here the widget takes the viewport its floor otherwise refuses */
.canvas .request__calendar iframe { min-height: 100dvh; }

.popup { overflow-x: clip; }

.popup__ground { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.popup__plate  { position: absolute; inset: 0; }

img.popup__plate {
  inset: calc(-1 * var(--inset)) auto auto calc(-1 * var(--inset));
  width:  calc(100% + 2 * var(--inset));
  height: calc(100% + 2 * var(--inset));
  object-fit: cover; object-position: var(--focal);
  filter: blur(var(--head-gap));
}

.popup__veil {
  position: absolute; inset: 0;
  background: var(--scrim);
}

.popup__label {
  position: absolute; z-index: 1; top: 0; left: 0;
  max-width: var(--measure); text-align: left;
}

.popup__wrap {
  position: relative; z-index: 1; min-height: 100dvh;
  display: flex; align-items: center;
  padding: var(--inset);
}

.popup__card {
  position: relative; min-width: 0;
  width: min(100%, var(--measure-widest)); margin-inline: auto;
  padding: var(--stack-gap) var(--head-gap);
  background: var(--surface); border: 1px solid var(--hairline);
}

.popup__close {
  position: absolute; z-index: 2; top: 0; right: 0;
  place-items: start end; line-height: var(--lead-tight);
  padding-inline-end: calc(var(--tight-gap) / var(--phi));
  text-decoration: none;
}

/* a beat is the whole card, so its ground meets the widget's */
.popup__card:has([data-optin-beats]:not([hidden])) { background: var(--paper); }
/* the widget carries no ground of its own at the foot, so the card gives it one */
.popup__card:has([data-optin-beat="calendar"]:not([hidden])) { padding-block-end: var(--section); }

@media (max-width: 29.99rem) {
  .popup__wrap  { padding: 0; align-items: stretch; }
  .popup__card  { width: 100%; min-height: 100dvh; border: 0; background: var(--paper); padding: var(--section) var(--gutter) var(--gutter); }
  .popup__label { display: none; }
  /* a centred head reaches the close control's corner at this width, so it starts below it */
  .popup__card:has([data-optin-beats]:not([hidden])) .request__beat { padding-block-start: var(--tap); }
}