/* Supplemental styles for the static HTML export.
   1) Base design system (fonts, colors, custom utilities) that Tailwind's
      CDN build doesn't generate on its own.
   2) Replaces Radix UI Sheet (mobile drawer) + active-link behavior
      that previously depended on React/TanStack Router. */

body {
  font-family: "Manrope", sans-serif;
  background-color: oklch(0.99 0.004 250);
  color: oklch(0.25 0.035 252);
  overflow-x: hidden;
}
h1, h2, h3 { font-family: "Newsreader", serif; }
::selection { background: oklch(0.96 0.025 355); color: oklch(0.25 0.035 252); }
:focus-visible {
  outline: 3px solid color-mix(in oklab, oklch(0.58 0.22 357) 45%, transparent);
  outline-offset: 3px;
}

.section-shell { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .section-shell { padding-inline: 2rem; } }

.image-frame { overflow: hidden; border-radius: 0.5rem; background: oklch(0.968 0.007 247.896); }
.text-balance { text-wrap: balance; }

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise-in .65s ease-out both; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
}

#mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 49;
}
#mobile-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

#mobile-sheet {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 88%;
  max-width: 380px;
  background: var(--color-background);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 50;
  padding: 3.5rem 1.5rem 2rem;
  overflow-y: auto;
  box-shadow: -10px 0 30px rgb(0 0 0 / 12%);
}
#mobile-sheet.is-open {
  transform: translateX(0);
}
#mobile-sheet .sheet-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
}

nav [data-nav-link].is-active,
#mobile-sheet [data-nav-link].is-active {
  color: var(--color-brand-blue-deep, #17395c);
}

@media (min-width: 1024px) {
  #mobile-overlay,
  #mobile-sheet {
    display: none;
  }
}