/* Compact about page: shared tokens, complete credits, short reading path. */
@layer ds, components, about;
@import url("/ds-v1.css?v=2026102949") layer(ds);
@import url("/ds-components-v1.css?v=2026102949") layer(components);

@layer about {
  @font-face { font-family: Vazirmatn; src: url('/assets/fonts/Vazirmatn-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
  @font-face { font-family: Estedad; src: url('/assets/fonts/Estedad-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
  .about-page, .about-page * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-block-start: 16px; }
  .about-page { margin: 0; background: var(--ds-bg); color: var(--ds-ink-1); font: 400 16px/1.75 var(--ds-font-sans); }
  .about-page a { color: inherit; }
  .about-page img { display: block; max-width: 100%; }
  .about-page :is(h1, h2, h3, p) { margin: 0; }
  .about-page :is(h1, h2, h3) { font-family: var(--ds-font-display); font-weight: 700; }
  .about-page svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .about-page .ab-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
  .about-page .ds-btn { color: var(--btn-ink); }
  .ab-container { width: min(1024px, calc(100% - 40px)); margin-inline: auto; }
  .ab-skip { position: fixed; top: 12px; inset-inline-start: 12px; z-index: var(--ds-z-toast); padding: 12px 20px; border-radius: 10px; background: var(--ds-secondary); transform: translateY(-160%); }
  .about-page .ab-skip { color: var(--ds-on-secondary); }
  .ab-skip:focus { transform: none; }
  .ab-header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-block-end: 1px solid var(--ds-line); }
  .ab-brand { display: flex; align-items: center; text-decoration: none; flex: none; }
  .ab-nav { display: flex; gap: 8px; }
  .ab-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 12px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600; }
  .ab-nav a[aria-current] { background: var(--ds-surface-1); box-shadow: var(--ds-elev-1); }
  .ab-nav a:hover { background: var(--ds-surface-2); }
  .ab-entry { flex: none; font-size: 12px; }
  .ab-main { padding-block: 20px 12px; }
  .ab-overview { display: grid; gap: 8px; padding-block: 4px 20px; }
  .ab-overview h1 { font-size: clamp(23px, 3vw, 30px); line-height: 1.65; letter-spacing: -.035em; }
  .ab-overview p { color: var(--ds-ink-2); margin-block-start: 6px; font-size: 16px; }
  .ab-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
  .ab-shortcuts a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; border: 1px solid var(--ds-line); border-radius: 10px; background: var(--ds-surface-1); font-size: 14px; text-decoration: none; color: var(--ds-ink-2); font-weight: 600; }
  .ab-shortcuts a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .ab-people { --people-bg: var(--ds-navy-900); --people-ink: var(--ds-cream-50); --people-muted: var(--ds-cream-300); --people-accent: var(--ds-coral-300); --people-line: rgb(225 235 240 / .18); padding: 24px; border-radius: 20px; background: var(--people-bg); color: var(--people-ink); overflow: hidden; }
  .ab-people-intro { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 16px; padding-block-end: 12px; }
  .ab-people h2 { font-size: 21px; line-height: 1.7; }
  .ab-agency { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 13px/1.5 ui-sans-serif, system-ui, sans-serif; text-decoration: none; }
  .ab-agency > span:first-child { color: var(--people-muted); font-weight: 400; }
  .ab-external { color: var(--people-accent); width: 16px; height: 16px; flex: none; }
  .ab-agency:hover, .ab-name-link:hover { text-decoration: underline; text-underline-offset: 5px; }
  .ab-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .ab-person { min-width: 0; padding-block: 12px; border-block-start: 1px solid var(--people-line); }
  .ab-person-meta { display: flex; align-items: start; justify-content: space-between; direction: ltr; gap: 8px; margin-block-end: 4px; }
  .ab-person-role { color: var(--people-accent); font: 500 12px/1.55 ui-sans-serif, system-ui, sans-serif; letter-spacing: .015em; }
  .about-page .ab-person-name { min-height: 44px; display: flex; align-items: center; font: 500 22px/1.35 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.025em; text-align: left; }
  .ab-name-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
  .ab-name-arrow { color: var(--people-accent); font: 400 15px/1 ui-sans-serif, sans-serif; }
  .ab-people :is(a, button):focus-visible { outline: 2px solid var(--people-accent); outline-offset: 4px; border-radius: 4px; }
  .ab-name-word { display: inline-block; white-space: nowrap; }
  .ab-name-letter { display: inline-block; }
  .ab-person[data-type-ready] .ab-name-letter { opacity: 0; transform: translateY(4px); transition: opacity 260ms ease, transform 380ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--letter) * 27ms); }
  .ab-person[data-type-ready].is-typed .ab-name-letter { opacity: 1; transform: none; }
  .ab-film-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block: 10px 12px; padding-block-start: 12px; border-block-start: 1px solid var(--people-line); }
  .ab-film-heading h3 { font-size: 13px; font-weight: 600; }
  .ab-film-heading .ab-kicker { font-size: 11px; margin-block-end: 4px; }
  .ab-film-toggle { display: inline-flex; align-items: center; gap: 10px; flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--people-line); border-radius: 999px; background: transparent; color: var(--people-ink); font: inherit; font-size: 12px; cursor: pointer; }
  .ab-film-toggle[hidden] { display: none; }
  [data-film-icon] { display: inline-flex; align-items: center; }
  .ab-film-toggle svg { width: 16px; height: 16px; }
  .ab-film-toggle .ab-film-play { display: none; }
  .ab-film-toggle[aria-pressed="true"] .ab-film-pause { display: none; }
  .ab-film-toggle[aria-pressed="true"] .ab-film-play { display: block; }
  .about-page :is(a, button) { touch-action: manipulation; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, opacity 120ms ease; }
  .about-page :is(a, button):active { opacity: .8; }
  .ab-film-toggle:hover { background: rgb(255 255 255 / .08); }
  .ab-shortcuts a:hover { background: var(--ds-surface-2); }
  .ab-film { overflow: hidden; direction: ltr; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
  .ab-film-track { display: flex; width: max-content; animation: ab-film-drift 48s linear infinite; animation-play-state: paused; }
  .ab-film.is-in-view:not(.is-paused) .ab-film-track { animation-play-state: running; }
  .ab-film:hover .ab-film-track, .ab-film:focus-within .ab-film-track { animation-play-state: paused; }
  .ab-film-set { display: flex; gap: 12px; padding-inline-end: 12px; flex: none; }
  .ab-portrait { margin: 0; width: 124px; flex: none; }
  .ab-portrait-art { position: relative; display: grid; place-items: center; height: 76px; overflow: hidden; border-radius: 10px; background: var(--ds-cream-100); color: var(--ds-navy-900); }
  .ab-portrait-art > span { font: 600 24px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.04em; }
  .ab-portrait-art > img { width: 100%; height: 100%; object-fit: cover; }
  .ab-portrait figcaption { margin-block-start: 6px; color: var(--people-muted); min-height: 36px; font: 400 12px/1.5 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; }
  @keyframes ab-film-drift { to { transform: translateX(-50%); } }

  .about-page .ab-care-note { margin-block-start: 8px; color: var(--ds-ink-3); font-size: 12px; line-height: 1.8; }
  .ab-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-block-start: 1px solid var(--ds-line); padding-block: 8px; color: var(--ds-ink-3); font-size: 12px; }
  .ab-footer nav { display: flex; flex-wrap: wrap; column-gap: 20px; }
  .ab-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
  .ab-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
  @media (max-width: 700px) {
    .ab-container { width: calc(100% - 32px); }
    .ab-header { min-height: 64px; gap: 8px; }
    .ab-nav a { padding-inline: 8px; font-size: 13px; }
    .ab-main { padding-block-start: 8px; }
    .ab-overview { gap: 8px; padding-block-end: 16px; }
    .ab-overview h1 { font-size: 23px; }
    .ab-overview p { font-size: 16px; line-height: 1.6; }
    .ab-shortcuts { gap: 8px; }
    .ab-people { padding: 16px; border-radius: 16px; }
    .ab-people h2 { font-size: 19px; }
    .ab-people-intro { padding-block-end: 8px; }
    .ab-agency { font-size: 12px; }
    .ab-team { grid-template-columns: 1fr; }
    .ab-person { padding-block: 8px; }
    .about-page .ab-person-name { font-size: 21px; }
    .ab-person-role { font-size: 12px; }
    .ab-name-link { min-height: 44px; }
    .ab-film-heading h3 { font-size: 12px; }
    .ab-film-toggle { font-size: 12px; }
    .ab-portrait { width: 112px; }
    .ab-portrait-art { height: 66px; }
    .ab-portrait figcaption { font-size: 12px; }
    .ab-footer nav { column-gap: 12px; }
  }
  @media (max-width: 360px) {
    .ab-overview { grid-template-columns: 1fr; }
    .ab-overview h1 { font-size: 22px; }
    .ab-overview p { display: none; }
    .ab-person { padding-block: 4px; }
    .ab-people-intro { column-gap: 8px; }
    .ab-agency { font-size: 12px; gap: 4px; }

  }
  @media (min-width: 701px) { .ab-person:last-child:nth-child(odd) { grid-column: 1 / -1; } }
  @media (min-width: 701px) and (max-height: 500px) {
    .ab-header { min-height: 56px; }
    .ab-main { padding-block: 12px; }
    .ab-overview { padding-block: 0 12px; }
    .ab-overview h1 { font-size: 24px; }
    .ab-overview p { display: none; }
    .ab-people { padding: 16px; }
    .ab-team { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
    .ab-person { padding-block: 4px; }
    .about-page .ab-person-name { font-size: 20px; }
    .ab-film-heading { margin-block: 8px; padding-block-start: 8px; }
    .ab-portrait-art { height: 40px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .about-page :is(a, button) { transition: none; }
    .ab-person[data-type-ready] .ab-name-letter { opacity: 1; transform: none; transition: none; }
    .ab-film-track { animation: none; transform: none; }
    .ab-film { overflow-x: auto; mask-image: none; }
    .ab-film-set[aria-hidden] { display: none; }
    .ab-film-toggle { display: none; }
  }
}

/* Bridge the concurrent locale control, whose shared CSS is intentionally unlayered. */
.about-page .ab-nav .locale-switch { min-width: 44px; min-height: 44px; padding: 6px 8px; border-radius: 10px; background: var(--ds-surface-1); color: var(--ds-ink-1); font-size: 12px; }
.about-page .ab-nav .locale-switch:hover { background: var(--ds-surface-2); }
@media (max-width: 700px) {
  .about-page .ab-header .meeow-logo { width: clamp(84px, calc(100vw - 244px), 136px); }
  .about-page .ab-nav a { padding-inline: 6px; }
}