@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    font-family: var(--font-family);
    font-size: 100%;
    line-height: var(--line-height-default);
    color: var(--text-primary);
    background-color: var(--surface-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-base);
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    display: block;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--motion-duration-base, 0.2s) var(--motion-ease-standard, ease),
      text-decoration-color var(--motion-duration-base, 0.2s) var(--motion-ease-standard, ease);
  }

  a:hover,
  a:focus-visible {
    color: var(--text-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
  }

  main {
    flex: 1;
    width: 100%;
  }

  h1, h2, h3, h4 {
    /* font-family: var(--font-family-heading); */
    letter-spacing: var(--letter-spacing-tight);
    margin-block: 0;
    color: var(--text-primary);
  }

  h1 {
    font-size: var(--font-size-2xl, 2.25rem);
    line-height: var(--line-height-tight, 1.2);
  }

  h2 {
    font-size: var(--font-size-xl, 1.75rem);
    line-height: var(--line-height-tight, 1.25);
  }

  h3 {
    font-size: var(--font-size-lg, 1.375rem);
  }

  h4 {
    font-size: var(--font-size-md, 1.125rem);
  }

  p, ul, ol {
    /* font-size: var(--font-size-base); */
    margin-block: var(--space-16);
  }

  ul,
  ol {
    padding-inline-start: var(--space-24, 1.5rem);
  }

  li + li {
    margin-block-start: var(--space-8, 0.5rem);
  }

  strong {
    font-weight: var(--font-weight-semibold, 600);
  }

  code,
  pre {
    font-family: var(--font-family-mono, monospace);
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm, 0.5rem);
  }

  pre {
    padding: var(--space-16, 1rem);
    overflow: auto;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
    line-height: inherit;
    color: inherit;
    background-color: transparent;
    border-radius: var(--radius-md, 0.75rem);
  }

  button,
  input[type="submit"],
  input[type="reset"] {
    cursor: pointer;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: var(--focus-ring, 0 0 0 3px rgba(77, 91, 255, 0.35));
    outline-offset: 2px;
  }

  fieldset {
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 0.75rem);
    padding: var(--space-24, 1.5rem);
  }
}

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  inset-block-start: 0;
  padding: var(--space-12, 0.75rem) var(--space-16, 1rem);
  background: var(--surface-alt, #ffffff);
  color: var(--text-invert, #0f172a);
  border-radius: 4px;
  transition: inset-inline-start 0.3s ease;
  z-index: 1000;
}

.skip-link:focus {
  inset-inline-start: var(--space-16, 1rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  backdrop-filter: blur(12px);
  background: var(--surface-overlay, rgba(15, 23, 42, 0.65));
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  min-height: var(--nav-height, 4.5rem);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--space-12, 0.75rem), 2vw, var(--space-24, 1.5rem));
}

.header-leading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16, 1rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8, 0.5rem);
  text-decoration: none;
  
}

.brand h3 {
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
}



.section {
  padding-block: var(--section-padding-block, 4rem);
}

.section .section-lead {
  margin-inline: auto;
  max-width: var(--content-measure, 65ch);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-12, 0.75rem), 2vw, var(--space-24, 1.5rem));
}

.nav-link {
  font-size: var(--font-size-sm, 0.95rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-secondary, rgba(241, 245, 249, 0.72));
  padding-block: var(--space-8, 0.5rem);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--text-primary);
}

.nav-link[aria-current="true"] {
  color: var(--text-accent);
}

.nav-toggle {
  display: none;
}




.nav-toggle:checked ~ .header-leading {
  border-radius: var(--radius-lg, 1.25rem);
}

.nav-toggle-label {
  display: none;
  color: var(--text-secondary);
}

.nav-toggle:focus-visible + .nav-toggle-label,
.nav-toggle-label:focus-visible {
  outline: var(--focus-ring, 0 0 0 3px rgba(77, 91, 255, 0.35));
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

@media (max-width: 992px) {
  .site-nav {
    gap: clamp(var(--space-8, 0.5rem), 1.4vw, var(--space-16, 1rem));
  }
}

@media (max-width: 768px) {
  .site-header {
    position: sticky;
    top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .site-header:has(.nav-toggle:checked) {
    background: var(--surface-muted);
  }

  .site-header .container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12, 0.75rem);
    padding-block: var(--space-12, 0.75rem);
  }

  .brand {
    justify-content: space-between;
  }

  .header-leading {
    width: 100%;
    justify-content: space-between;
  }

  .nav-toggle-label {
    display: inline-flex;
    justify-content: end;
    align-items: end;
    padding: var(--space-10, 0.625rem);
  }

  .site-nav {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: var(--space-8, 0.5rem);
    display: none;
    padding: var(--space-12, 0.75rem);
    
  }

  .nav-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--space-10, 0.625rem) var(--space-20, 1.25rem);
   
    
  }

  .nav-toggle:checked ~ .site-nav {
    display: flex;
  }
}

@media (max-width: 512px) {
  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8, 0.5rem);
  }

  .site-header:has(.nav-toggle:checked) {
    background: var(--surface-muted);
  }

  .nav-link {
    border-radius: var(--radius-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
}