/* ========================================================================== */
/* Base Rules & Reset                                                         */
/* ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);

  /* Center content with optimal reading width */
  max-width: calc(var(--content-width) + var(--sidenote-width) + var(--sidenote-gap) * 2);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}


/**
 * Sidenotes using <small> elements
 * On desktop: positioned in right margin
 * On mobile: inline with reduced emphasis
 *
 * Usage: Place <small> inside <p> where you want the note to appear
 * Example: <p>Main text here <small>This appears in margin</small> more text.</p>
 */
@media (min-width: 768px) {
  /**
   * Parent paragraph must be positioned for absolute children
   */
  p:has(small) {
    position: relative;
  }

  /**
   * Pull small elements into the right margin
   * Creates classic Tufte-style sidenote layout
   */
  p small {
    position: absolute;
    left: calc(100% + var(--sidenote-gap));
    width: var(--sidenote-width);
    font-size: 0.85rem;
    line-height: var(--line-height-base);
    margin-top: 0;
    padding: var(--space-sm);
    background-color: var(--color-bg-alt);
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
  }
}



article, section {
  margin-bottom: var(--space-3xl);
}

aside {
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  background-color: var(--color-bg-alt);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  max-width: var(--content-width);
}

header {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

footer {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

nav {
  margin: var(--space-lg) 0;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

nav li {
  margin: 0;
}

/**
 * Screen reader only
 *
 * Hides content visually but keeps it accessible to assistive technology
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  a {
    text-decoration: underline;
    color: #000;
  }

  /* Display URLs after links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  /* Hide sidenotes positioning, show inline */
  @media (min-width: 768px) {
    p small {
      position: static;
      width: auto;
      left: auto;
    }
  }

  /* Avoid page breaks inside elements */
  h1, h2, h3, h4, h5, h6, p, li, blockquote {
    page-break-inside: avoid;
  }

  /* Ensure images fit page */
  img {
    max-width: 100% !important;
  }
}



@media (max-width: 768px) {
  :root {
    --font-size-base: 16px;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
  }

  body {
    padding: var(--space-lg) var(--space-md);
  }

  h1 {
    font-size: var(--font-size-4xl);
  }

  h2 {
    font-size: var(--font-size-3xl);
  }

  /* Stack navigation vertically */
  nav ul {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /**
   * Mobile sidenotes - Inline with subtle styling
   */
  p small {
    display: block;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
    background-color: var(--color-bg-alt);
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-base: 15px;
  }

  body {
    padding: var(--space-md) var(--space-sm);
  }

  h1 {
    font-size: var(--font-size-3xl);
  }

  /* Reduce horizontal padding on smaller screens */
  pre {
    padding: var(--space-md);
  }

  table {
    font-size: var(--font-size-sm);
  }
}