:root{
  --header: 70px;
  --sidebar: clamp(200px, 20vw, 300px);
}







    
    html, body {
      margin: 0;
      height: 100%;
      overflow: hidden; /* prevent double scrollbars */
      font-family: 'Latin Modern Roman', 'Computer Modern', 'STIX', 'Times New Roman', serif;
      font-size: 18px;
      line-height: 1.6;
      margin: 0;
      background-color: #ffffff;
      color: #000000;
    }
    header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header);
  background: #dfd7d7;
  color: #060000;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  justify-content: center;
}

    header img {
      height: 100px;
    }

   #sidebar {
  position: fixed;
  top: var(--header);
  bottom: 0;
  left: 0;
  width: var(--sidebar);
  max-width: 300px;   /* optional, kept for clarity */
  min-width: 200px;   /* optional, kept for clarity */
  background: #f5f5f5;
  overflow-y: auto;
  border-right: 1px solid #ccc;
  padding: 1rem;
  font-size: 1.2rem;
  box-sizing: border-box;   /* ← add this */
}

    #sidebar ul li {
  margin-bottom: 1.5rem; /* ~24px spacing */
}

#sidebar .subitems {
  list-style: none;
  margin: 1rem 0 0 1rem; /* top margin adds space above first subsection */
  padding: 0 0 0 1rem;
  display: none; /* hide by default */
  
  
}

#sidebar .subitems a{

  color: #006400; /* dark green, change to your preferred color */

}


#sidebar .section .toggle {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 1.2rem;     /* match subsection size */
  font-family: inherit;  /* inherit the sidebar font */
  color: rgb(12, 15, 215);          /* set text color */
}
#sidebar .section .toggle.open::after {
  content: " ▼"; /* arrow down when open */
}
#sidebar .section .toggle::after {
  content: " ▶"; /* arrow right when closed */
}

#sidebar .section {
  margin-bottom: 2rem; /* adjust as needed */
  
}


#main {
  position: absolute;
  top: var(--header);
  left: var(--sidebar);
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 1rem;
  scroll-behavior: smooth;
}

/* Hide the Index button on desktop */
#toc-toggle { display: none; }




/* Desktop keeps your current fixed layout */

/* --- Mobile & small tablets --- */
@media (max-width: 768px) {
  :root { --header: 56px; }

  html, body { overflow: auto; }

  header {
    height: var(--header);
    padding: 0 .75rem;
    justify-content: center; /* title centered */
    gap: .5rem;
  }

  header img { height: 36px; }
  header h1 { font-size: 1rem; margin: 0; line-height: 1.2; text-align: left; }

  /* Index toggle button (shown only on small screens) */
  #toc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #999;
    background: #fff;
    height: 34px;
    padding: 0 .6rem;
    border-radius: 6px;
    font-size: .9rem;
    cursor: pointer;
    position: absolute;
    left: .5rem;
    top: calc((var(--header) - 34px)/2);
    z-index: 102;
  }

  /* Turn the sidebar into an off-canvas drawer */
  #sidebar {
    position: fixed;
    top: var(--header);
    left: 0;
    width: min(80vw, 320px);
    max-width: none;
    min-width: 0;
    height: calc(100dvh - var(--header));
    border-right: 1px solid #ccc;
    box-shadow: 2px 0 12px rgba(0,0,0,.15);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 101;
    font-size: .85rem; /* base size */
    padding: .75rem;
    background: #f5f5f5;
  }
  #sidebar.open { transform: translateX(0); }

  /* Backdrop behind the drawer */
  #toc-backdrop {
    position: fixed;
    inset: var(--header) 0 0 0;
    background: rgba(0,0,0,.35);
    z-index: 100;
  }

  /* Sidebar typography tweaks */
  #sidebar .toggle { font-size: .95rem; }
  #sidebar .subitems a { font-size: .9rem; }
  #sidebar ul li,
  #sidebar .subitems li { margin-bottom: .35rem; }

  /* Main takes full width & scrolls normally */
  #main {
    position: static;
    padding: 1rem .9rem 2.5rem;
    overflow: visible;
  }
}

/* --- Mobile fixes: header overlap, button collision, hide logo, content offset --- */
@media (max-width: 768px) {
  /* Put header into a simple 2-column grid: [button] [title] */
  header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    height: var(--header);
    padding: 0 .75rem; /* keeps compact side padding */
  }

  /* Move the Index button into the flow so it doesn't sit on top of the title */
  #toc-toggle {
    position: static;       /* overrides the earlier absolute positioning */
    margin-right: .5rem;
    z-index: auto;
  }

  /* Remove the logo on small screens to free space */
  header img { display: none !important; }

  /* Make sure page content starts below the fixed header */
  body { padding-top: var(--header); }

  /* A little breathing room at the top of the main column */
  #main { padding-top: 0.75rem; }
}

@media (max-width: 768px) {
  /* 1) Put the title right next to the button */
  header h1 { text-align: left !important; }

  /* 2) Reduce the spacing between the two columns */
  header { gap: 0; }           /* try .25rem or 0 */

  /* 3) Trim button spacing */
  #toc-toggle {
    margin-right: 0.25;            /* or 0 */
    padding: 0 .45rem;              /* tighter button */
    height: 30px;                   /* optional, smaller */
    font-size: .85rem;              /* optional */
  }
}