.skip-link {
  left: 1rem;
  position: fixed;
  top: -4rem;
  z-index: 10;
  background: var(--cream);
  border: 2px solid var(--espresso);
  padding: .75rem 1rem;
}

.skip-link:focus { top: 1rem; }

.noscript-message {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: .75rem var(--page-padding);
  text-align: center;
}

.site-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(6rem, 1fr) auto auto;
  margin: 0 auto;
  max-width: var(--wide);
  padding: 1rem var(--page-padding);
}

.brand-mark { display: inline-block; max-width: 10rem; }

.brand-mark img { width: 100%; }

.site-navigation {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
}

.site-navigation a, .cart-toggle, .mobile-menu-toggle {
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--espresso);
  font: 700 1rem/1 var(--body);
  letter-spacing: .035em;
  text-decoration: none;
}

.site-navigation a { align-content: center; }

.site-navigation a:hover, .site-navigation a:focus-visible { text-decoration: underline; text-underline-offset: .35rem; }

.cart-toggle {
  align-items: center;
  border: 1px solid var(--espresso);
  display: flex;
  gap: .3rem;
  justify-content: center;
  padding: .7rem .85rem;
}

.mobile-menu-toggle { justify-self: end; min-width: 44px; padding: .75rem .4rem; }

.sr-only {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body {
  --focus-inner: var(--ink);
  --focus-outer: var(--cream);
}

:focus-visible {
  outline: 3px solid var(--focus-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-outer);
}

.story-panel,
.editorial-section,
.family-marquee,
.special-section,
.testimonials-section,
.contact-section,
.site-footer {
  --focus-inner: var(--cream);
  --focus-outer: var(--ink);
}