/* About composes canonical site controls, typography and semantic tokens. */
.about-content { max-width: 820px; margin-inline: auto; padding-bottom: var(--space-10); }
.about-content .browse-intro { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
.about-content .browse-intro p { font-size: var(--font-size-body); line-height: var(--leading-read); }
.about-content .prose { font-size: var(--font-size-body); }
.about-content .prose h2 { margin-bottom: var(--space-6); }
.about-content .prose h3 { margin-top: var(--space-7); }
.about-content .about-note { font-size: var(--font-size-small); color: var(--sub); }
.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.about-toc { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); border-block: 1px solid var(--line); padding-block: var(--space-4); font-size: var(--font-size-label); }
.about-toc a { display: inline-flex; align-items: center; min-height: var(--control-touch); text-decoration: underline; text-underline-offset: var(--space-1); }
.about-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-5); margin-block: var(--space-7); }
.about-grid-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.about-card { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-card); }
.about-content .about-card h3 { margin: 0 0 var(--space-4); font-size: var(--font-size-card); }
.about-content .about-card p { margin: 0; }
.about-card .text-link { margin-top: var(--space-4); }
.about-contact { background: var(--canvas); padding: var(--space-7); border-radius: var(--radius-card); }
@media(max-width:600px) { .about-grid { grid-template-columns: 1fr; } .about-actions .btn { width: 100%; } }
/* Leave anchored headings visible below the shared sticky mobile header. */
.about-content section[id], .about-content h2[id] { scroll-margin-top: calc(var(--control-primary) + var(--space-7)); }
.about-breadcrumb { padding-top: var(--space-6); color: var(--sub); font-size: var(--font-size-small); }
.about-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--control-touch); text-decoration: underline; text-underline-offset: var(--space-1); }
.about-card .text-link { white-space: normal; }

/* Product introduction: existing site tokens, editorial art and native media controls. */
.about-content { max-width: 1040px; }
.about-content > .section, .about-content > .about-toc { max-width: 820px; margin-inline: auto; }
.about-content .about-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: center; max-width: none; }
.about-hero-copy { min-width: 0; }
.about-content .about-hero .about-hero-lead { color: var(--ink); font-size: var(--font-size-price); line-height: var(--leading-read); }
.about-hero-art { margin: 0; min-width: 0; }
.about-hero-art img { width: 100%; height: auto; }
.about-film { margin: var(--space-7) 0 var(--space-9); }
.about-film-heading h2 { font-size: var(--font-size-section-compact); }
.about-film-heading p { color: var(--sub); margin: var(--space-3) 0 var(--space-6); }
.about-film video { display: block; width: min(100%, 380px); height: auto; aspect-ratio: 9 / 16; margin-inline: auto; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-card); }
.about-film .about-note { line-height: var(--leading-read); }
.about-transcript { padding: var(--space-5) var(--space-6); background: var(--canvas); border-radius: var(--radius-card); }
.about-transcript summary { cursor: pointer; min-height: var(--control-touch); align-content: center; font-weight: var(--weight-bold); }
.about-transcript .prose { margin-top: var(--space-4); }
@media (max-width: 600px) {
  .about-content .about-hero { grid-template-columns: 1fr; gap: var(--space-5); }
  .about-hero-art { max-width: 480px; width: 100%; justify-self: center; }
  .about-film-heading h2 { font-size: var(--font-size-title); }
}