/* The same dock layout on the homepage, coffee page and 404 page. */
.site-dock {
  position: sticky; top: 0; bottom: 0; z-index: 50; display: block; padding: 0;
  color: var(--soft, #a7bab1); background: rgba(10,15,13,.9);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border-top: 1px solid #33453c; border-bottom: 1px solid var(--line, #1e2a25);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.site-dock .dock-wrap {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 1rem;
  width: min(100%, 1080px); min-width: 0; box-sizing: border-box;
  margin-inline: auto; padding: .65rem var(--site-gutter);
}
.site-dock .brand { flex: none; font-weight: 600; }
.site-dock .brand .fe { color: var(--accent); }
.site-dock nav { min-width: 0; max-width: 100%; margin-left: auto; overflow-x: auto; }
.site-dock ul { display: flex; flex-wrap: nowrap; gap: .25rem; width: max-content; margin: 0; padding: 0; list-style: none; }
.site-dock li { flex: none; }
.site-dock a {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  box-sizing: border-box; min-height: 44px; padding: .5em .85em;
  border: 1px solid transparent; color: var(--soft, #a7bab1); text-decoration: none;
  font-family: var(--site-font); font-size: .76rem; line-height: 1.7; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.site-dock a .fe { width: 1.05em; height: 1.05em; }
.site-dock a:hover { color: var(--ink, #e4ede7); border-color: var(--line2, #33453c); }
.site-dock a.active { color: var(--accent); border-color: var(--accent-dim, var(--accent)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.site-dock a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (max-width: 767px) { .site-dock .dl, .site-dock .brand .txt { display: none; } }
@media (max-width: 900px) {
  .site-dock .dock-wrap { gap: .5rem; }
}
@media (min-width: 768px) and (max-width: 900px) { .site-dock a { padding-inline: .8em; } }
@media (max-width: 640px) {
  .site-dock a { padding: .6rem .55rem; font-size: .68rem; }
  .site-dock a .fe { width: 1.15em; height: 1.15em; }
}
@media print { .site-dock { display: none !important; } }