/* About page desktop refinement - v63 */
body[data-page="about"] .about-article-section {
  position: relative;
  padding: 76px 0 104px;
  background:
    radial-gradient(circle at 8% 12%, rgba(248, 215, 103, .10), transparent 26%),
    linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%);
}

body[data-page="about"] .about-article-section > .container {
  width: min(1320px, calc(100% - 64px));
}

body[data-page="about"] .about-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "article toc";
  gap: 32px;
  align-items: start;
  direction: ltr;
}

body[data-page="about"] .about-article-layout.no-toc {
  display: block;
  max-width: 980px;
  margin-inline: auto;
}

body[data-page="about"] .about-rich-article {
  grid-area: article;
  direction: rtl;
  width: 100%;
  min-width: 0;
  padding: clamp(42px, 4.5vw, 68px) clamp(38px, 5vw, 72px);
  border: 1px solid var(--line);
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 160px),
    var(--surface);
  box-shadow: 0 24px 70px rgba(10, 64, 58, .09);
  color: var(--text);
  font-size: 18px;
  line-height: 2.18;
  text-align: right;
  overflow: hidden;
}

html[data-theme="dark"] body[data-page="about"] .about-rich-article {
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

body[data-page="about"] .about-rich-article > * {
  max-width: 100%;
}

body[data-page="about"] .about-rich-article > *:first-child {
  margin-top: 0 !important;
}

body[data-page="about"] .about-rich-article p,
body[data-page="about"] .about-rich-article li,
body[data-page="about"] .about-rich-article blockquote {
  overflow-wrap: anywhere;
}

body[data-page="about"] .about-rich-article p {
  margin: 0 0 1.35em;
  color: var(--muted);
  font-size: 1em;
  line-height: 2.18;
}

body[data-page="about"] .about-rich-article .article-recovered-paragraph {
  margin: 0 0 1.45em;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-right: 4px solid var(--accent-2);
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 1em !important;
  font-weight: 650;
  line-height: 2.15;
}

body[data-page="about"] .about-rich-article h2,
body[data-page="about"] .about-rich-article h3,
body[data-page="about"] .about-rich-article h4 {
  max-width: 100%;
  color: var(--primary-2);
  word-break: normal;
  overflow-wrap: anywhere;
}

body[data-page="about"] .about-rich-article h2 {
  margin: 2.15em 0 .8em;
  padding: 0 0 16px;
  font-size: clamp(28px, 2.45vw, 36px);
  line-height: 1.72;
  letter-spacing: -.015em;
}

body[data-page="about"] .about-rich-article h2.article-heading-long {
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.85;
}

body[data-page="about"] .about-rich-article h3 {
  margin: 1.85em 0 .65em;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.75;
}

body[data-page="about"] .about-rich-article h4 {
  margin: 1.65em 0 .55em;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.8;
}

body[data-page="about"] .about-rich-article ul,
body[data-page="about"] .about-rich-article ol {
  margin: 1.05em 0 1.7em;
  padding: 18px 46px 18px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
}

body[data-page="about"] .about-rich-article li {
  margin: .55em 0;
  padding-right: 3px;
  color: var(--muted);
  line-height: 2;
}

body[data-page="about"] .about-rich-article blockquote {
  margin: 30px 0;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-right: 5px solid var(--accent-2);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(248, 215, 103, .16), var(--surface-2));
  color: var(--text);
  line-height: 2.05;
  box-shadow: none;
}

body[data-page="about"] .about-rich-article table {
  margin: 30px 0;
  border-radius: 20px;
}

body[data-page="about"] .about-rich-article figure img,
body[data-page="about"] .about-rich-article > img {
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(10, 64, 58, .14);
}

body[data-page="about"] .about-toc-card {
  grid-area: toc;
  direction: rtl;
  position: sticky;
  top: 104px;
  width: 100%;
  max-height: calc(100vh - 124px);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 18px 52px rgba(10, 64, 58, .08);
  overflow: hidden;
  backdrop-filter: blur(12px);
}

body[data-page="about"] .about-toc-head {
  padding: 2px 2px 16px;
  border-bottom: 1px solid var(--line);
}

body[data-page="about"] .about-toc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 7px;
  padding: 0;
  border: 0;
}

body[data-page="about"] .about-toc-title span {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 7px rgba(248, 215, 103, .18);
}

body[data-page="about"] .about-toc-title strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

body[data-page="about"] .about-toc-head small {
  display: block;
  padding-right: 20px;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
}

body[data-page="about"] .about-toc-card nav {
  display: grid;
  gap: 5px;
  max-height: min(52vh, 500px);
  margin: 14px -4px 0;
  padding: 0 4px 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}

body[data-page="about"] .about-toc-card nav a {
  display: -webkit-box;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--muted);
  font-size: 13px !important;
  font-weight: 750;
  line-height: 1.75;
  text-align: right;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

body[data-page="about"] .about-toc-card nav a:hover,
body[data-page="about"] .about-toc-card nav a.active {
  border-color: var(--line);
  background: var(--surface-3);
  color: var(--primary-2);
  transform: translateX(-2px);
}

body[data-page="about"] .about-toc-card .toc-level-3 {
  padding-right: 24px;
  font-size: 12px !important;
}

body[data-page="about"] .about-toc-card .toc-level-4 {
  padding-right: 36px;
  font-size: 11px !important;
}

body[data-page="about"] .about-toc-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 15px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--primary-2), var(--primary-3));
  color: #fff !important;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(10, 64, 58, .16);
}

html[data-theme="dark"] body[data-page="about"] .about-toc-action {
  color: #062f2b !important;
}

body[data-page="about"] .about-toc-action b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
  font-size: 16px;
}

@media (max-width: 1100px) {
  body[data-page="about"] .about-article-section > .container {
    width: min(100% - 40px, 1040px);
  }

  body[data-page="about"] .about-article-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 24px;
  }

  body[data-page="about"] .about-rich-article {
    padding: 42px 40px;
  }
}

@media (max-width: 980px) {
  body[data-page="about"] .about-article-section {
    padding: 46px 0 72px;
  }

  body[data-page="about"] .about-article-section > .container {
    width: min(100% - 32px, 760px);
  }

  body[data-page="about"] .about-article-layout,
  body[data-page="about"] .about-article-layout.no-toc {
    display: block;
    max-width: none;
  }

  body[data-page="about"] .about-toc-card {
    display: none;
  }

  body[data-page="about"] .about-toc-mobile {
    display: block;
    margin-bottom: 18px;
  }

  body[data-page="about"] .about-rich-article {
    padding: 34px 30px;
    border-radius: 28px;
    font-size: 17px;
  }
}

@media (max-width: 640px) {
  body[data-page="about"] .about-article-section > .container {
    width: min(100% - 24px, 620px);
  }

  body[data-page="about"] .about-rich-article {
    padding: 24px 20px;
    border-radius: 24px;
    font-size: 16px;
    line-height: 2.05;
  }

  body[data-page="about"] .about-rich-article p {
    line-height: 2.05;
  }

  body[data-page="about"] .about-rich-article h2 {
    font-size: 25px;
  }

  body[data-page="about"] .about-rich-article h2.article-heading-long {
    font-size: 22px;
  }

  body[data-page="about"] .about-rich-article h3 {
    font-size: 21px;
  }

  body[data-page="about"] .about-rich-article ul,
  body[data-page="about"] .about-rich-article ol {
    padding: 14px 34px 14px 14px;
    border-radius: 18px;
  }

  body[data-page="about"] .about-rich-article .article-recovered-paragraph,
  body[data-page="about"] .about-rich-article blockquote {
    padding: 18px 17px;
    border-radius: 18px;
  }
}