@font-face {
  font-family: "BabelStone Tibetan Slim";
  src: url("/fonts/BabelStoneTibetanSlim.woff2") format("woff2"), url("/fonts/BabelStoneTibetanSlim.ttf") format("truetype");
  unicode-range: U+0F00-0FFF;
  size-adjust: 140%;
  descent-override: 50%;
  letter-spacing: 1.1px;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("/fonts/PT_Serif/PTSerif-Regular.woff2") format("woff2"), url("/fonts/PT_Serif/PTSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("/fonts/PT_Serif/PTSerif-Italic.woff2") format("woff2"), url("/fonts/PT_Serif/PTSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("/fonts/PT_Serif/PTSerif-Bold.woff2") format("woff2"), url("/fonts/PT_Serif/PTSerif-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("/fonts/PT_Serif/PTSerif-BoldItalic.woff2") format("woff2"), url("/fonts/PT_Serif/PTSerif-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("/fonts/Libre_Baskerville/LibreBaskerville-Bold.woff2") format("woff2"), url("/fonts/Libre_Baskerville/LibreBaskerville-Bold.ttf") format("truetype");
  font-feature-settings: "liga" 0;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("/fonts/Libre_Baskerville/LibreBaskerville-Regular.woff2") format("woff2"), url("/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-heading: "Libre Baskerville";
  --font-tibetan: "BabelStone Tibetan Slim";
  --font-latin: "PT Serif";
  --font-body: var(--font-latin);
  --black-dark: #151515;
  --black-medium: #242424;
  --black-light: #363636;
  --color-dark-400: #363636;
  --color-dark-500: #363636;
  --white-dark: #e9e9e9;
  --white-medium: #f6f7f8;
  --white-light: #ffffff;
  --color-light: #f6f7f8;
  --color-accent: #b90808;
  --color-accent-2: #f6cd51;
  --line-height-base: 1.5;
  --measure-xs: 20ch;
  --measure-s: 35ch;
  --measure-m: 55ch;
  --measure-l: 75ch;
  --measure-xl: 96ch;
  --measure-2xl: 125ch;
  --content-s: 600px;
  --content-m: 900px;
  --content-l: 1200px;
  --content-xl: 1600px;
  --step--3: clamp(1rem, 0.97rem + 0.12vw, 1.05rem);
  --step--2: clamp(1.05rem, 1.02rem + 0.15vw, 1.09rem);
  --step--1: clamp(1.06rem, 1.02rem + 0.2vw, 1.12rem);
  --step-0: clamp(1.125rem, 1.0761rem + 0.2446vw, 1.2656rem);
  --step-1: clamp(1.2656rem, 1.2106rem + 0.2751vw, 1.4238rem);
  --step-2: clamp(1.4238rem, 1.3619rem + 0.3095vw, 1.6018rem);
  --step-3: clamp(1.6018rem, 1.5322rem + 0.3482vw, 1.802rem);
  --step-4: clamp(1.802rem, 1.7237rem + 0.3917vw, 2.0273rem);
  --step-5: clamp(1.802rem, 1.7237rem + 0.3917vw, 2.0273rem);
  --heading-step-5: clamp(1.6018rem, 1.5322rem + 0.3482vw, 1.802rem); /* h1 */
  --heading-step-4: clamp(1.45rem, 1.4rem + 0.3vw, 1.62rem); /* h2 */
  --heading-step-3: clamp(1.32rem, 1.27rem + 0.26vw, 1.48rem); /* h3 */
  --heading-step-2: clamp(1.2rem, 1.16rem + 0.22vw, 1.35rem); /* h4 */
  --heading-step-1: clamp(1.14rem, 1.1rem + 0.2vw, 1.22rem); /* h5/h6 */
  --step-900: calc(clamp(1.85em, 1.8395rem + 1.1704vw, 2.5rem));
  --step-1000: calc(clamp(2.3rem, 2.1597rem + 1.6433vw, 3rem));
  --step-2000: calc(clamp(3rem, 2.8691rem + 2.4507vw, 4rem));
  --space-3xs: clamp(0.25rem, 0.2065rem + 0.2174vw, 0.375rem);
  --space-2xs: clamp(0.3125rem, 0.2473rem + 0.3261vw, 0.5rem);
  --space-xs: clamp(0.5rem, 0.413rem + 0.4348vw, 0.75rem);
  --space-s: clamp(0.625rem, 0.4946rem + 0.6522vw, 1rem);
  --space-m: clamp(0.9375rem, 0.7418rem + 0.9783vw, 1.5rem);
  --space-l: clamp(1.25rem, 0.9891rem + 1.3043vw, 2rem);
  --space-xl: clamp(1.875rem, 1.4837rem + 1.9565vw, 3rem);
  --space-2xl: clamp(2.5rem, 1.9783rem + 2.6087vw, 4rem);
  --space-3xl: clamp(3.75rem, 2.9674rem + 3.913vw, 6rem);
  --body-margin: var(--space-xs);
  --body-padding: var(--space-2xs);
  --media-medium: 1024px;
  --color-primary: #2d3436;
  --color-secondary: #636e72;
  --color-text: #2d3436;
  --color-hover: #f1f2f6;
  --color-focus: #74b9ff;
  --border-grid: #5d7782;
  --border-light: 1px solid rgba(0, 0, 0, 0.3);
  --border-medium: 1px solid rgba(0, 0, 0, 0.45);
  --border-dark: 1px solid rgba(0, 0, 0, 0.65);
  --card-background-color: #fff;
  --card-border-color: #ddd;
  --card-border-radius: 5px;
  --card-padding: 1rem;
  --card-gap: 0.5rem;
  --card-hover-transform: translateY(-2px);
  --card-hover-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --card-title-font-size: var(--step-1);
  --card-description-color: #333;
  --card-number-color: #555;
  --card-transition: transform 0.3s ease, box-shadow 0.3s ease;
  --card-vertical-height: 210px;
  --card-vertical-image-width: 180px;
  --card-vertical-image-height: 190px;
  --card-vertical-image-border-radius: 4px;
  --card-vertical-content-flex: 5;
  --card-vertical-image-flex: 2;
  --z-index-card: 1;
  --z-index-cloud: 1;
  --z-index-image: 5;
  --z-index-toc: 15;
  --z-index-nav: 20;
  --z-index-logo: 90;
  --z-index-def: 99;
  --z-index-tooltip: 99;
  --sidebar-main-width: 120rem;
  --sidebar-body-width: 65rem;
  --sidebar-toc-width: 25rem;
  --focus-outline: 3px solid var(--color-focus);
  --sidebar-width: 300px;
  --nav-height: 60px;
}

.nav__left-group {
  display: flex;
}

/* 1. Mobile / Base Layout */
.c3 {
  display: block;
  width: 100%;
  margin: 0 auto;
  margin-top: 80px;
  padding: 0 1rem;
  position: relative;
}

.c3-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.c3-header__left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.c3-toggle {
  order: -1;
  margin-right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/*  2. Desktop Core  */
@media (min-width: 1024px) {
  .c3-header,
  .c3-toggle {
    display: none;
  }
  .c3 {
    display: grid;
    margin-top: var(--space-xl);
    padding: 0 2rem;
    align-items: start;
    gap: 2rem;
    grid-template-columns: 240px 1fr;
  }
  .c3--with-toc {
    grid-template-columns: 240px minmax(0, 1fr) 220px;
  }
}
/* 3. Large Screen */
@media (min-width: 1440px) {
  .c3 {
    gap: 0;
    grid-template-columns: 280px 1fr 280px;
  }
  .c3--with-toc {
    grid-template-columns: 280px 1fr minmax(auto, 800px) 1fr 260px;
  }
}
/* Component: Sidebar */
.c3__sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 300px;
  background: #fff;
  z-index: 100;
  transform: translateX(-110%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 5rem 1rem 1rem 1rem;
  border-right: 1px solid #eee;
  overflow-y: auto;
}

.c3__sidebar--active {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .c3__sidebar {
    position: sticky;
    top: 2rem;
    font-size: var(--step--1);
    transform: none;
    width: auto;
    height: auto;
    max-height: calc(100vh - 4rem);
    padding: 0;
    border-right: none;
    background: transparent;
    z-index: 1;
    grid-column: 1;
  }
}
.c3__sidebar .sidebar-header {
  margin: var(--body-margin);
  font-weight: 700;
}

.c3__sidebar .sidebar-header a {
  text-decoration: none;
}

.c3__sidebar #sidebar-links {
  padding-right: 0.5rem;
}

.c3__sidebar #sidebar-links a {
  display: block;
  padding: 0.35rem 0.5rem;
  margin: 1px 0;
  text-decoration: none;
  border-radius: 4px;
  color: #444;
  transition: all 0.2s ease;
}

.c3__sidebar #sidebar-links a:hover {
  background-color: rgba(0, 0, 0, 0.067);
  color: #000;
}

.c3__sidebar #sidebar-links a.current {
  background-color: rgba(0, 0, 0, 0.08);
  font-weight: 600;
  color: #000;
}

.c3__sidebar #sidebar-links ul {
  list-style: none;
  padding-left: 0;
}

.c3__sidebar .sidebar-level-2 {
  margin-left: 1rem;
  border-left: 1px solid #eee;
  padding-left: 0;
}

/* Component: Content */
.c3__content {
  width: 100%;
  max-width: 800px;
}

@media (min-width: 1024px) {
  .c3__content {
    grid-column: 2;
    margin: 0 auto;
  }
}
@media (min-width: 1440px) {
  .c3__content {
    grid-column: 2;
    margin: 0 auto;
  }
  .c3--with-toc .c3__content {
    grid-column: 3;
    margin: 0;
  }
}
/* Component: TOC (The Right) */
.c3__toc {
  display: none;
  font-size: var(--step--1);
  border-left: 1px solid #eee;
}

@media (min-width: 1024px) {
  .c3__toc {
    display: block;
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    grid-column: 3;
  }
}
@media (min-width: 1440px) {
  .c3__toc {
    grid-column: 5;
    border-left: none;
  }
}
.c3__toc nav ul {
  list-style: none;
  padding-left: 0;
}

.c3__toc nav a {
  display: block;
  padding: 0.25rem 0.5rem;
  text-decoration: none;
  color: #666;
  border-left: 2px solid transparent;
}

.c3__toc nav a:hover {
  color: #000;
}

#TableOfContents ul ul {
  margin-left: 0.5rem;
  padding-left: 0.5rem;
}

/* Component: Pager */
.pager {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

@media (min-width: 600px) {
  .pager {
    flex-direction: row;
    justify-content: space-between;
  }
}
.pager__prev,
.pager__next {
  display: flex;
  align-items: center;
  color: #444;
  text-decoration: none;
  font-weight: 500;
}

.pager__prev:hover,
.pager__next:hover {
  color: #000;
}

.pager__prev::before {
  content: "←";
  margin-right: 0.5rem;
  font-family: system-ui;
}

.pager__next::after {
  content: "→";
  margin-left: 0.5rem;
  font-family: system-ui;
}