/* Shared navigation on the homepage, work pages and case studies. */
:is(#nav, #site-nav) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: calc(clamp(1120px, 62vw, 1320px) - 112px);
  margin: 0 auto;
  padding: 24px 0;
  font-family: "Pangram Sans Rounded", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  view-transition-name: site-nav;
}
:is(#name, #site-name) {
  margin: 0;
  font-family: "City Boy", system-ui, sans-serif;
  text-transform: uppercase;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--name, #F42934);
  text-decoration: none;
  transition: color 0.25s ease-out;
}
:is(#nav, #site-nav) > ul {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 600;
}
:is(#nav, #site-nav) > ul a {
  font: inherit;
  letter-spacing: -0.02em;
  color: var(--link);
  text-decoration: none;
  transition: opacity 0.14s ease-out;
}
@media (hover: hover) {
  :is(#nav, #site-nav) > ul a:hover { opacity: 0.7; }
}
:is(#nav, #site-nav) a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (max-width: 900px) {
  :is(#nav, #site-nav) { max-width: none; }
  :is(#name, #site-name) { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#nav, #site-nav) a, :is(#name, #site-name) { transition: none; }
}

.site-title { margin: 0; line-height: 1; }
button#name { appearance: none; border: 0; padding: 0; background: none; }
:is(#name, #site-name), :is(#nav, #site-nav) > ul a { position: relative; }
:is(#name, #site-name)::before, :is(#nav, #site-nav) > ul a::before {
  content: ""; position: absolute; inset: -9px 0; min-height: 40px;
}
:is(#nav, #site-nav) button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 900px) {
  :is(#name, #site-name)::before { inset-block: -11px; min-height: 44px; }
}

/* Extend the ground into Safari's safe areas; keep content inside them. */
:root[data-theme="day"] { color-scheme: light; }
:root[data-theme="night"] { color-scheme: dark; }
#ground { background-color: var(--paper); }
:is(#nav, #site-nav) { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
:is(#foot, #site-foot) { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 900px) {
  /* Safari extends the solid page colour beyond fixed canvases. Meet
     that colour smoothly instead of ending the mesh at a hard edge. */
  #ground canvas {
    -webkit-mask-image: linear-gradient(to bottom, transparent 16px, #000 128px, #000 calc(100% - 128px), transparent calc(100% - 16px));
    mask-image: linear-gradient(to bottom, transparent 16px, #000 128px, #000 calc(100% - 128px), transparent calc(100% - 16px));
  }
  #page, body.d #page {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  :is(#foot, #site-foot) { padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
}