/* About page. Mobile-first. Selectors are scoped with .page-about .aboutPage so shared rules cannot override them. */
body.page-about { margin: 0; background: var(--tgs-bg, #FAF8FF); color: var(--tgs-ink, #1B1030); font-family: var(--tgs-font-body, Inter, system-ui, sans-serif); }
.page-about .aboutPage * , .page-about .aboutPage *::before, .page-about .aboutPage *::after { box-sizing: border-box; }
.page-about .aboutPage h1, .page-about .aboutPage h2, .page-about .aboutPage h3 { margin: 0; font-family: var(--tgs-font-head, 'Cormorant Garamond', Georgia, serif); font-weight: 500; line-height: 1.08; text-wrap: balance; }
.page-about .aboutPage h1 { margin: 1rem 0; color: #fff; font-size: var(--tgs-step-4, clamp(2.5rem, 1.8rem + 3.5vw, 5.5rem)); }
.page-about .aboutPage h2 { margin-bottom: .75rem; font-size: var(--tgs-step-3, clamp(2rem, 1.6rem + 2vw, 3.5rem)); }
.page-about .aboutPage h3 { font-size: var(--tgs-step-1, 1.5rem); }
.page-about .aboutPage h1 em, .page-about .aboutPage h2 em { font-style: italic; color: var(--tgs-violet-700, #5B21B6); }
.page-about .aboutPage p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.page-about .aboutPage .aboutContainer { width: min(80rem, 100% - 2 * var(--tgs-gutter, 1rem)); margin-inline: auto; }
.page-about .aboutPage .aboutKicker { font-size: .75rem; font-weight: 800; letter-spacing: .16em; color: var(--tgs-violet-700, #5B21B6); }
.page-about .aboutPage section:not(.aboutHero):not(.aboutCraftBanner):not(.aboutClosing) { padding: 3rem 0; }

.page-about .aboutPage .aboutBtn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tgs-tap, 2.75rem); padding: .75rem 1.5rem; border: 1px solid var(--tgs-violet-700, #5B21B6); border-radius: var(--tgs-r-pill, 999px); background: #fff; color: var(--tgs-violet-800, #3B0A7A); font: 700 1rem/1.2 var(--tgs-font-body, Inter, sans-serif); text-align: center; text-decoration: none; transition: transform .25s var(--tgs-ease, ease), box-shadow .25s var(--tgs-ease, ease); }
.page-about .aboutPage .aboutBtnPrimary { border-color: transparent; background: var(--tgs-grad-primary, linear-gradient(135deg, #3B0A7A, #5B21B6 50%, #8B5CF6)); color: #fff; }
.page-about .aboutPage .aboutBtn:focus-visible, .page-about .aboutPage a:focus-visible, .page-about .aboutPage summary:focus-visible { outline: 3px solid var(--tgs-violet-500, #8B5CF6); outline-offset: 3px; }
.page-about .aboutPage .aboutActions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.page-about .aboutPage .aboutActions .aboutBtn { flex: 1 1 12rem; }

/* dark blocks */
.page-about .aboutPage .aboutHero, .page-about .aboutPage .aboutCraftBanner, .page-about .aboutPage .aboutClosing { position: relative; isolation: isolate; overflow: hidden; background: var(--tgs-violet-950, #150A2E); color: #fff; }
.page-about .aboutPage .aboutHero { display: flex; align-items: flex-end; min-height: 34rem; padding: 4rem 0 2.5rem; }
.page-about .aboutPage .aboutHeroImage, .page-about .aboutPage .aboutCraftBanner > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-about .aboutPage .aboutHero::after, .page-about .aboutPage .aboutCraftBanner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(21, 10, 46, .92), rgba(21, 10, 46, .5) 70%, rgba(21, 10, 46, .6)); }
.page-about .aboutPage .aboutHero .aboutKicker, .page-about .aboutPage .aboutCraftBanner .aboutKicker, .page-about .aboutPage .aboutClosing .aboutKicker { color: var(--tgs-orchid, #C084FC); }
.page-about .aboutPage .aboutHero em, .page-about .aboutPage .aboutCraftBanner em, .page-about .aboutPage .aboutClosing em { color: var(--tgs-violet-200, #DDD6FE); }
.page-about .aboutPage .aboutHero p, .page-about .aboutPage .aboutCraftBanner p, .page-about .aboutPage .aboutClosing p { max-width: 38rem; color: rgba(255, 255, 255, .9); font-size: 1.0625rem; }
.page-about .aboutPage .aboutHero .aboutBtn:not(.aboutBtnPrimary), .page-about .aboutPage .aboutClosing .aboutBtn:not(.aboutBtnPrimary) { border-color: rgba(255, 255, 255, .6); background: transparent; color: #fff; }
.page-about .aboutPage .aboutCraftBanner { padding: 4rem 0; }
.page-about .aboutPage .aboutCraftCopy { width: min(80rem, 100% - 2 * var(--tgs-gutter, 1rem)); margin-inline: auto; }
.page-about .aboutPage .aboutCraftCopy h2 { color: #fff; }
.page-about .aboutPage .aboutCraftCopy .aboutBtn { margin-top: 1.5rem; }
.page-about .aboutPage .aboutClosing { padding: 4rem 0; background: var(--tgs-grad-dark, linear-gradient(160deg, #150A2E, #2A0F5C 60%, #4C1D95)); }
.page-about .aboutPage .aboutClosing h2 { color: #fff; }

/* manifesto, pillars, principle / work cards */
.page-about .aboutPage .aboutManifestoInner, .page-about .aboutPage .aboutJourneyGrid, .page-about .aboutPage .aboutFaqLayout, .page-about .aboutPage .aboutEvidenceLayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.page-about .aboutPage .aboutPillars, .page-about .aboutPage .aboutPrincipleGrid, .page-about .aboutPage .aboutWorkGrid, .page-about .aboutPage .aboutChapterGrid, .page-about .aboutPage .aboutQuoteGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.page-about .aboutPage .aboutPillars article, .page-about .aboutPage .aboutPrincipleGrid article, .page-about .aboutPage .aboutWorkGrid article, .page-about .aboutPage .aboutEvidenceLadder article, .page-about .aboutPage .aboutTimelineStep, .page-about .aboutPage .aboutProvenance { padding: 1.25rem; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-md, 1.25rem); background: #fff; }
.page-about .aboutPage .aboutPillars p, .page-about .aboutPage .aboutPrincipleGrid p, .page-about .aboutPage .aboutWorkGrid p, .page-about .aboutPage .aboutEvidenceLadder p, .page-about .aboutPage .aboutTimelineStep p, .page-about .aboutPage .aboutChapter p, .page-about .aboutPage .aboutProvenance p { margin-top: .5rem; color: var(--tgs-muted, #6B6485); font-size: .9375rem; }
.page-about .aboutPage .aboutPrincipleGrid span, .page-about .aboutPage .aboutWorkGrid span, .page-about .aboutPage .aboutEvidenceLadder span, .page-about .aboutPage .aboutTimelineStep b { display: block; margin-bottom: .35rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; color: var(--tgs-violet-600, #7C3AED); }
.page-about .aboutPage .aboutWorkGrid a { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--tgs-tap, 2.75rem); margin-top: .5rem; color: var(--tgs-violet-700, #5B21B6); font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.page-about .aboutPage .aboutStory, .page-about .aboutPage .aboutEvidence, .page-about .aboutPage .aboutFaq { background: var(--tgs-violet-50, #F6F2FF); }
.page-about .aboutPage .aboutSectionIntro { margin-bottom: 1.5rem; }

/* chapters */
.page-about .aboutPage .aboutChapter { display: grid; gap: 1rem; overflow: hidden; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-md, 1.25rem); background: #fff; }
.page-about .aboutPage .aboutChapter > div { padding: 0 1.25rem 1.25rem; }
.page-about .aboutPage .aboutChapterImageLink { display: block; overflow: hidden; }
.page-about .aboutPage .aboutChapterImageLink img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* timeline + evidence + provenance */
.page-about .aboutPage .aboutTimeline, .page-about .aboutPage .aboutEvidenceLadder { display: grid; gap: .75rem; }
.page-about .aboutPage .aboutEvidenceLadder article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
.page-about .aboutPage .aboutEvidenceImages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.page-about .aboutPage .aboutEvidenceImages figure { margin: 0; overflow: hidden; border-radius: var(--tgs-r-md, 1.25rem); background: #fff; }
.page-about .aboutPage .aboutEvidenceImages img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.page-about .aboutPage .aboutEvidenceImages figcaption { padding: .6rem .9rem; color: var(--tgs-muted, #6B6485); font-size: .875rem; }
.page-about .aboutPage .aboutProvenance { display: grid; gap: .75rem; margin-top: 1.5rem; }

/* quotes + faq */
.page-about .aboutPage .aboutQuoteGrid blockquote { margin: 0; padding: 1.25rem; border-left: 3px solid var(--tgs-violet-500, #8B5CF6); font-family: var(--tgs-font-head, Georgia, serif); font-size: var(--tgs-step-1, 1.5rem); line-height: 1.25; color: var(--tgs-violet-900, #2A0F5C); }
.page-about .aboutPage .aboutFaqList { display: grid; gap: .6rem; }
.page-about .aboutPage .aboutFaqList details { border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-md, 1.25rem); background: #fff; }
.page-about .aboutPage .aboutFaqList summary { display: flex; align-items: center; min-height: 3.25rem; padding: .5rem 1.25rem; font-weight: 600; cursor: pointer; }
.page-about .aboutPage .aboutFaqList details p { padding: 0 1.25rem 1.1rem; color: var(--tgs-muted, #6B6485); }

/* image dialog */
.aboutImageDialog { width: min(64rem, 100% - 2rem); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--tgs-r-lg, 1.75rem); background: #fff; overflow: auto; }
.aboutImageDialog::backdrop { background: rgba(21, 10, 46, .75); }
.aboutImageDialog figure { margin: 0; }
.aboutImageDialog img { display: block; width: 100%; max-height: 75dvh; object-fit: contain; background: var(--tgs-violet-950, #150A2E); }
.aboutImageDialog figcaption { padding: .9rem 1.25rem; color: var(--tgs-muted, #6B6485); }
.aboutImageClose { position: absolute; top: .5rem; right: .5rem; width: var(--tgs-tap, 2.75rem); height: var(--tgs-tap, 2.75rem); border: 0; border-radius: 50%; background: #fff; color: var(--tgs-violet-900, #2A0F5C); font-size: 1.5rem; cursor: pointer; }
.aboutImageClose:focus-visible { outline: 3px solid var(--tgs-violet-500, #8B5CF6); outline-offset: 2px; }

.page-about .aboutPage .aboutReveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--tgs-ease, ease), transform .5s var(--tgs-ease, ease); }
.page-about .aboutPage .aboutReveal.isIn { opacity: 1; transform: none; }

@media (min-width: 480px) {
  .page-about .aboutPage .aboutPillars, .page-about .aboutPage .aboutChapterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .page-about .aboutPage section:not(.aboutHero):not(.aboutCraftBanner):not(.aboutClosing) { padding: 4.5rem 0; }
  .page-about .aboutPage .aboutHero { min-height: 40rem; padding-bottom: 4rem; }
  .page-about .aboutPage .aboutManifestoInner, .page-about .aboutPage .aboutJourneyGrid, .page-about .aboutPage .aboutFaqLayout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem; }
  .page-about .aboutPage .aboutPrincipleGrid, .page-about .aboutPage .aboutWorkGrid, .page-about .aboutPage .aboutQuoteGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-about .aboutPage .aboutProvenance { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem; }
}
@media (min-width: 1024px) {
  .page-about .aboutPage .aboutChapterGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-about .aboutPage .aboutPillars { grid-template-columns: 1fr; }
  .page-about .aboutPage .aboutEvidenceLayout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; }
}
@media (hover: hover) {
  .page-about .aboutPage .aboutBtn:hover { transform: translateY(-2px); box-shadow: var(--tgs-shadow-sm, 0 6px 20px rgba(91, 33, 182, .08)); }
}
@media (prefers-reduced-motion: reduce) {
  .page-about .aboutPage .aboutBtn, .page-about .aboutPage .aboutReveal { transition: none; }
}