:root {
  --color-light-foreground: rgba(0, 0, 0, 0.85);
  --color-dark-foreground: #b8b5a7ff;
  --color-dark-background: #1e1d1cff;
  --font-size: 13.2048px;
  --font-ratio: 1.4;
  --font-letter-spacing: normal;
  /* Font features & variations */
  --font-feature: "liga", "dlig", "kern", "calt", "ss01", "ss12";
  --font-header-feature:
      "dlig", "case", "kern", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06",
      "cv09", "cv10", "cv11", "cv12", "cv13";
  --font-density: 1.2;
  --marge: 1em;
  --line-width-normal: 60rem;
}

body {
  display: flex;
  flex-direction: column;
}

/* Sidebar - Fixed Left */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  padding-left: var(--space);
  padding-top: var(--space);
  padding-bottom: var(--space-l);
  width: 25%;
  height: 100vh;
  overflow-y: auto;
}

/* Main Content - Right Side */
.main {
  margin-left: 25%;
  width: 75%;
  padding-left: var(--space);
}

.reading > * {
  grid-column: full;
}

/* Mobile: Stack sidebar on top */
@media (max-width: 768px) {
  .sidebar {
    position: static; /* or relative */
    width: 100%;
    height: auto;
    padding: unset;
  }
  .main {
    margin-left: 0;
    padding-left: unset;
    width: 100%;
  }
}