/* Standalone topic pages reuse homepage content and its shared design tokens. */
html[data-topic-page] {
  --topic-ink: #203d5b;
  --topic-muted: #526b7e;
  --topic-line: #cfdae3;
}
html[data-topic-page][data-theme=dark] {
  --topic-ink: #edf2f7;
  --topic-muted: #b7c7d5;
  --topic-line: #3c5163;
}
html[data-topic-page] .topic-main { min-height: 65vh; padding-bottom: 56px; }
html[data-topic-page] .topic-heading {
  width: min(1320px, 89%);
  margin-inline: auto;
  padding-block: clamp(34px, 5vw, 72px) 34px;
  color: var(--topic-ink);
  border-bottom: 1px solid var(--topic-line);
}
html[data-topic-page] .topic-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 26px;
  color: var(--topic-muted);
  font-size: 14px;
  text-decoration: none;
}
html[data-topic-page] .topic-back:hover { color: var(--topic-ink); text-decoration: underline; }
html[data-topic-page] .topic-back-arrow { display: inline-block; font-family: sans-serif; }
html[data-topic-page][dir=rtl] .topic-back-arrow { transform: scaleX(-1); }
html[data-topic-page] .topic-eyebrow {
  width: fit-content;
  margin: 0 0 10px;
  color: var(--topic-muted);
  font: 500 11px/1.7 DM, sans-serif;
  letter-spacing: .16em;
}
html[data-topic-page] #topic-title {
  margin: 0;
  max-width: 100%;
  color: var(--topic-ink);
  font: 500 clamp(36px, 5vw, 62px)/1.45 ThmanyahDisplay, Georgia, serif;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-topic-page][lang=en] #topic-title {
  font-family: Instrument, Georgia, serif;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.1;
  letter-spacing: -.025em;
}
html[data-topic-page][lang=ar] [data-topic-lang=en],
html[data-topic-page][lang=en] [data-topic-lang=ar] { display: none; }
html[data-topic-page] .topic-main > section {
  margin-block: 0;
  padding-block: clamp(34px, 5vw, 64px);
}
html[data-topic-page] .topic-main > .faq-section {
  width: min(1120px, 89%);
  margin-inline: auto;
}
html[data-topic-page] .topic-main > .participant-reviews { padding-bottom: 36px; }
html[data-topic-page] .topic-main > .collaborations { padding-bottom: 24px; }
html[data-topic-page] .partner-invitation { scroll-margin-top: calc(var(--header-height, 120px) + 24px); }

/* These routes intentionally omit the homepage WebGL modules. */
html[data-topic-page] .academy-emblem-canvas,
html[data-topic-page] .signature-canvas { display: none !important; }
html[data-topic-page] .academy-emblem-fallback {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-topic-page] .track-overview,
html[data-topic-page] .track-overview.tracks-waiting {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
html[data-topic-page] .signature-gallery {
  scroll-snap-type: x proximity;
  overflow-x: auto;
  touch-action: pan-x pan-y;
  cursor: auto;
}
html[data-topic-page] .signature-list { will-change: auto; }
html[data-topic-page] .signature-list > li { scroll-snap-align: start; }
html[data-topic-page] #collaborations .signature-art { display: none; }
html[data-topic-page] #collaborations .signature-gallery .signature-identity {
  height: 148px;
  padding: 24px 16px;
  gap: 14px;
}
html[data-topic-page] .site-footer { margin-top: 0; }

@media (max-width: 760px) {
  html[data-topic-page] .topic-main { padding-bottom: 28px; }
  html[data-topic-page] .topic-heading { width: calc(100% - 40px); padding-block: 26px 24px; }
  html[data-topic-page] .topic-back { margin-bottom: 18px; }
  html[data-topic-page] .topic-main > section { padding-block: 30px; }
  html[data-topic-page] .topic-main > .faq-section { width: calc(100% - 40px); }
  html[data-topic-page] #topic-title { font-size: clamp(32px, 8vw, 46px); }
}