/* ==========================================================
   Base layout + typography
   ========================================================== */

html,
body {
  height: 100%;
}

body {
  /* KEY: disables page scrolling; inner panels scroll instead */
  overflow: hidden;

  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Major headings / brand */
h1,
h2,
h3,
.grimoire-brand,
.sidebar-title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.06em;
}

h1 {
  font-weight: 700;
  font-size: 2.4rem;
}

/* ==========================================================
   App layout
   ========================================================== */

.layout {
  display: flex;

  /* Header offset */
  margin-top: 4rem;
  height: calc(100vh - 4rem);
}

/* ==========================================================
   Sidebar – leatherbound panel
   ========================================================== */

.sidebar {
  width: 280px;
  padding: 12px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  position: relative;
  border-right: 1px solid rgba(0, 0, 0, 0.35);

  color: rgba(242, 230, 210, 0.92);

  background-color: #2b1a12;
  background-image:
    /* edge shading */
    linear-gradient(to right, rgba(0, 0, 0, 0.55), transparent 24px),
    linear-gradient(to left, rgba(0, 0, 0, 0.40), transparent 18px),

    /* subtle tonal variation */
    radial-gradient(900px 600px at 30% 20%, rgba(255, 255, 255, 0.06), transparent 60%),
    radial-gradient(900px 600px at 70% 80%, rgba(0, 0, 0, 0.18), transparent 65%),

    /* leather depth */
    linear-gradient(135deg, #3a2419, #24150f);

  background-blend-mode: multiply, multiply, overlay, multiply, normal;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Leather grain overlay (no external file) */
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  background-size: 360px 360px;
}

/* Ensure sidebar content sits above grain overlay */
.sidebar > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================
   Main content – parchment panel
   (Quark uses #body-wrapper)
   ========================================================== */

#body-wrapper {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  --parchment-base: #e2cfb2;
  --parchment-variation: #d6bd99;
  --parchment-ink: #2a1f15;

  position: relative;
  padding: 2.5rem 2rem;
  color: var(--parchment-ink);

  background-color: var(--parchment-base);
  background-image:
    /* soft edge darkening */
    radial-gradient(1000px 800px at 20% 10%, rgba(120, 85, 45, 0.18), transparent 60%),
    radial-gradient(1000px 800px at 85% 15%, rgba(100, 70, 35, 0.15), transparent 65%),
    radial-gradient(900px 700px at 50% 95%, rgba(80, 55, 30, 0.22), transparent 70%),

    /* irregular aging patches */
    radial-gradient(600px 400px at 30% 65%, rgba(140, 100, 55, 0.15), transparent 75%),
    radial-gradient(700px 500px at 75% 70%, rgba(90, 60, 30, 0.12), transparent 78%),

    /* soft tonal drift */
    linear-gradient(120deg, var(--parchment-variation), var(--parchment-base));

  background-blend-mode: multiply, multiply, multiply, multiply, multiply, normal;
}

/* Subtle organic grain overlay (no grid) */
#body-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06; /* keep subtle */
  mix-blend-mode: multiply;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* Optional: ensure content sits above parchment grain */
#body-wrapper > * {
  position: relative;
  z-index: 1;
}

/* Parchment typography tuning */
#body-wrapper h1,
#body-wrapper h2,
#body-wrapper h3 {
  color: #3b2415;
  letter-spacing: 0.5px;
}

#body-wrapper p {
  line-height: 1.7;
}

/* Desktop default */
.sidebar-overlay {
  display: none;
}

/* Desktop: hide mobile controls */
.sidebar-mobile-bar,
.nav-toggle {
  display: none;
}

/* Ensure hidden overlay never intercepts taps */
.sidebar-overlay[hidden] {
  display: none !important;
}

/* Mobile drawer */
@media (max-width: 900px) {
  /* Let the page scroll normally on mobile */
  body {
    overflow: auto;
  }

  /* Stop the split-pane scroll layout on mobile */
  .layout {
    height: auto;
    margin-top: 4rem; /* keep your header offset */
  }

  #body-wrapper {
    height: auto;
    overflow: visible;
  }

  /* Sidebar becomes off-canvas */
  .sidebar {
    position: fixed;
    top: 4rem;         /* below fixed header */
    left: 0;
    height: calc(100vh - 4rem);
    width: min(92vw, 360px);
    transform: translateX(-110%);
    transition: transform 180ms ease;
    z-index: 2000;

  }

  /* Overlay behind the sidebar (hidden by default) */
  .sidebar-overlay {
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1500;
    display: none;
  }

  /* When nav is open */
  body.nav-open .sidebar {
    transform: translateX(0);
  }

  body.nav-open .sidebar-overlay {
    display: block;
  }

  /* Mobile-only sidebar bar */
  .sidebar-mobile-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem;
  }

  /* Hamburger visible on mobile */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
  }
}