@charset "UTF-8";
/* CSS Document */



    /* ============================================================
       Accessible Typography Defaults
       - Uses relative units (rem) so user zoom & browser settings work
       - Body default: 16px (1rem) with comfortable line-height
       - Small text minimum: 14px (0.875rem)
       - Headings use a clear scale and tighter (but still readable) line-height
       - Measures (line length) capped for readability (70ch)
       ============================================================ */

    :root {
      /* Base sizing: keep 100% so user browser preferences are respected */
      font-size: 100%;

      /* Font stack: system UI fonts for clarity & performance */
      --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                   "Noto Sans", "Liberation Sans", sans-serif;

      /* Font sizes (rem = relative to root size; 1rem is typically 16px) */
      --fs-body: 1rem;        /* 16px baseline */
      --fs-body-lg: 1.125rem; /* 18px comfortable reading */
      --fs-small: 0.875rem;   /* 14px minimum for secondary text */

      /* Heading scale */
      --fs-h1: 2.25rem; /* 36px */
      --fs-h2: 1.875rem;/* 30px */
      --fs-h3: 1.5rem;  /* 24px */
      --fs-h4: 1.25rem; /* 20px */
      --fs-h5: 1.125rem;/* 18px */
      --fs-h6: 1rem;    /* 16px */

      /* Line heights */
      --lh-body: 1.6;      /* best-practice reading line height */
      --lh-heading: 1.25;  /* headings: tighter than body but still readable */
      --lh-tight: 1.4;     /* for dense UI blocks */

      /* Spacing */
      --space-1: 0.5rem;
      --space-2: 1rem;
      --space-3: 1.5rem;

      /* Readability */
      --measure: 70ch;  /* cap line length for reading comfort */
      --measure-narrow: 55ch;

      /* Optional: keep consistent font smoothing */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    /* Prefer a slightly larger default on larger screens (optional but common) */
    @media (min-width: 992px) {
      :root {
        /* This scales everything proportionally without breaking user zoom.
           If you prefer not to change base, delete this block. */
        font-size: 106.25%; /* ~17px base */
      }
    }

    body {
      margin: 0;
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      color: #111;
      background: #fff;
    }

    /* Keep long-form text readable by default */
    main {
      max-width: min(var(--measure), 100%);
      padding: var(--space-3);
      margin: 0 auto;
    }

    /* Paragraph rhythm */
    p {
      margin: 0 0 var(--space-2);
    }

    /* Lists readable and spacious */
    ul, ol {
      margin: 0 0 var(--space-2);
      padding-left: 1.25rem;
    }

    /* Headings: clear hierarchy + not smaller than body */
    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      line-height: var(--lh-heading);
      margin: var(--space-3) 0 var(--space-1);
    }
    h1 { font-size: var(--fs-h1); }
    h2 { font-size: var(--fs-h2); }
    h3 { font-size: var(--fs-h3); }
    h4 { font-size: var(--fs-h4); }
    h5 { font-size: var(--fs-h5); }
    h6 { font-size: var(--fs-h6); }

    /* Secondary text: do not go below 14px */
    small, .text-small {
      font-size: var(--fs-small);
      line-height: var(--lh-tight);
    }

    /* Comfortable reading option for long-form pages */
    .reading {
      font-size: var(--fs-body-lg); /* 18px (relative) */
      max-width: min(var(--measure-narrow), 100%);
    }

    /* Links: keep clearly visible (color choice is up to your brand) */
    a {
      text-underline-offset: 0.15em;
      text-decoration-thickness: 0.1em;
    }

a {
  font-weight: bold;
}

    /* Forms: labels should match body size; controls should not shrink text */
    label {
      display: inline-block;
      font-size: var(--fs-body);
      line-height: var(--lh-tight);
      margin-bottom: 0.25rem;
      font-weight: 600;
    }

    input, select, textarea, button {
      font: inherit; /* ensures 16px+ text in controls */
      line-height: var(--lh-tight);
    }

    /* Minimum comfortable touch target (pairs well with 16px text) */
    button, input[type="button"], input[type="submit"], .btn {
      min-height: 44px;
      padding: 0.5rem 1rem;
    }

    /* Prevent text clipping: avoid fixed heights in text containers */
    .card {
      border: 1px solid #ddd;
      border-radius: 0.75rem;
      padding: var(--space-2);
      margin-bottom: var(--space-2);
    }

    /* Respect user preference for reduced motion (not typography, but good baseline) */
    @media (prefers-reduced-motion: reduce) {
      * { scroll-behavior: auto !important; }
    }