/* About page (CMS). Matches the old static Next.js About (Tailwind classes noted). Loaded only by Pages/About.cshtml. */
.about-page { display: grid; gap: 2.5rem; }                                   /* grid gap-10 */
@media (min-width: 1024px) { .about-page { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.about-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }  /* space-y-6 */
.about-main .section-kicker { margin: 0; }
.about-title { margin: 0; font-size: 2.25rem; line-height: 2.5rem; font-weight: 900; letter-spacing: -0.025em; color: var(--foreground); }
@media (min-width: 768px) { .about-title { font-size: 3rem; line-height: 1; } }
.about-body { color: var(--muted); font-size: 1rem; line-height: 1.625; }
.about-body p { margin: 0; }
.about-body p + p { margin-top: 1rem; }                                        /* space-y-4 */
@media (min-width: 768px) { .about-body { font-size: 1.125rem; } }
.about-body .about-em { color: var(--foreground); }
.about-body a { color: var(--accent-soft); }
.about-links { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .about-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-link { display: block; border-radius: 1rem; border: 1px solid rgba(255,255,255,.1); background: rgba(18,18,26,.8); padding: 1rem; text-decoration: none; transition: border-color .15s ease; min-width: 0; }
.about-link:hover { border-color: rgba(212,160,23,.5); }
.about-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.about-link-label { display: block; font-size: .75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.about-link-handle { display: block; margin-top: .5rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--foreground); overflow-wrap: anywhere; }
.about-hero { overflow: hidden; border-radius: 1.5rem; border: 1px solid rgba(255,255,255,.1); background: var(--card); }
.about-hero-frame { position: relative; aspect-ratio: 4 / 5; }
.about-hero-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.about-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent, transparent); }
.about-hero-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; }
.about-hero-caption .section-kicker { margin: 0 0 .5rem; }
.about-hero-title { margin: 0; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #fff; }
.about-hero-text { margin: .5rem 0 0; font-size: .875rem; line-height: 1.25rem; color: rgba(255,255,255,.75); }