/* ==========================================================================
   iStudyBytes — Base
   Layer 2 of 5:  tokens → base → layout → components → pages/<page>.css

   Reset, document defaults and the type scale for bare elements. Everything
   here targets elements (not classes) so that unstyled content — legal text,
   server-rendered chapter HTML — already looks right.

   Type rules (one source for the whole site):
     body 400 · UI and nav 500 · card and UI headings 600 · page and section
     headings 700. No transforms or filters ever touch text, so glyphs are
     rasterised crisp at every weight.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The page body grows so the footer always sits at the bottom of the viewport. */
main { flex: 1 0 auto; display: block; }

/* ---- Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  line-height: var(--lh-heading);
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.025em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
h4 { font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; }
h5, h6 { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }

p { margin: 0; text-wrap: pretty; }
strong, b { font-weight: 600; }
small { font-size: var(--fs-sm); }

/* ---- Links & lists ------------------------------------------------------- */
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

ul, ol { margin: 0; padding: 0; }

img, svg, video { max-width: 100%; }
img { display: block; height: auto; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }

/* ---- Form elements inherit the type system ------------------------------- */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
textarea { resize: vertical; }

/* ---- Accessibility ------------------------------------------------------- */
:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .4);
  outline-offset: 2px;
}
::selection { background: rgba(37, 99, 235, .18); }

[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -4rem;
  z-index: 1000;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-ui);
  font-weight: 600;
  transition: top var(--ease);
}
.skip-link:focus { top: var(--s-3); color: #fff; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}

@media print {
  .site-header, .site-footer, .skip-link { display: none; }
  body { background: #fff; }
}