/* Shared homepage chrome around the independently authored particle scenes.
   UI token values follow typography-system.css and radius-system.css, scoped here
   so their global element rules cannot change the presentation or map controls. */
.page-about-particle-v3 :is(.header, .footer-shell, .header-surface-blend, .branch-drawer) {
  --font-family: "Outfit", sans-serif;
  --fw-heading: 500;
  --fw-body: 400;
  --fw-navigation: 500;
  --fw-header-contact: 400;
  --fw-button: 600;
  --fw-label: 600;
  --fs-body: clamp(1rem, 1.1vw, 1.0625rem);
  --fs-small: .9375rem;
  --fs-label: .8125rem;
  --fs-subline: 10px;
  --size-subline-icon: 14px;
  --space-subline-after: 20px;
  --space-subline-icon: 12px;
  --fs-navigation: 1rem;
  --fs-button: .9375rem;
  --fs-footer-meta: 11px;
  --fs-footer-duration: 9px;
  --fs-footer-legal: 13px;
  --fs-footer-link: 15px;
  --fw-footer-link: 400;
  --fs-footer-video: 18px;
  --lh-footer-copy: 1.4;
  --lh-body: 1.4;
  --lh-small: 1.55;
  --lh-ui: 1.2;
  --ls-body: 0;
  --ls-button: -.01em;
  --ls-label: .10em;
  --radius-sm: 14px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-control: var(--radius-sm);
  --radius-button: var(--radius-md);
  --radius-card: var(--radius-lg);
  --color-text: var(--color-text-body);
  font-family: var(--font-family);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

.page-about-particle-v3 .header {
  --fs-h4: 32px;
  --lh-h4: 1.2;
  --ls-h4: -.015em;
  color: var(--color-white);
  text-shadow: none;
}

/* Match the shared subline without changing the independent particle scenes. */
.page-about-particle-v3 :is(.header, .footer-shell) .subline {
  --fs-label: var(--fs-subline);
  display: flex;
  align-items: center;
  gap: var(--space-subline-icon);
  margin: 0 0 var(--space-subline-after);
  color: var(--heading-on-surface);
  font-family: var(--font-family);
  font-size: var(--fs-subline);
  font-weight: var(--fw-label);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.page-about-particle-v3 :is(.header, .footer-shell) .subline > img {
  display: block;
  flex: none;
  width: var(--size-subline-icon);
  height: var(--size-subline-icon);
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.page-about-particle-v3 :is(.header, .footer-shell) .subline--cream > img { display: none; }
.page-about-particle-v3 :is(.header, .footer-shell) .subline--cream::before {
  content: '';
  display: block;
  flex: none;
  width: var(--size-subline-icon);
  height: var(--size-subline-icon);
  background: var(--color-accent);
  -webkit-mask: var(--asset-star-01, url('../brand/logos/yildiz-01-transparent.svg')) center / contain no-repeat;
  mask: var(--asset-star-01, url('../brand/logos/yildiz-01-transparent.svg')) center / contain no-repeat;
}

/* The previous page made each navigation anchor a full-height hit area. */
.page-about-particle-v3 .header .desktop-nav :is(.nav-trigger, .nav-link) {
  height: auto;
  min-height: 0;
  line-height: var(--lh-ui);
}

.page-about-particle-v3 .footer-shell {
  background: radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--color-dark) 20%, transparent), transparent 47%), var(--color-dark);
}

.page-about-particle-v3 .footer-shell .particle-stage {
  mix-blend-mode: normal;
}

.page-about-particle-v3 .footer-shell :is(p:not(.subline), .brand-info) {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.page-about-particle-v3 .footer-shell .brand-info {
  font-size: var(--fs-small);
  opacity: 1;
}

.page-about-particle-v3 .footer-shell :is(.brand-info, .brand-info p) {
  line-height: var(--lh-footer-copy);
}

.page-about-particle-v3 .footer-shell .brand-info__highlight strong {
  font-weight: var(--fw-heading);
}

.page-about-particle-v3 .footer-shell .footer-link {
  font-size: var(--fs-footer-link);
  font-weight: var(--fw-footer-link);
  line-height: var(--lh-ui);
}

.page-about-particle-v3 .footer-shell .footer-column-title {
  color: var(--color-on-dark-muted);
  font-size: var(--fs-footer-meta);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-label);
}

.page-about-particle-v3 .footer-shell :is(.legal-copy, .legal-links, .legal-links a) {
  font-size: var(--fs-footer-legal);
  font-weight: var(--fw-body);
}

.page-about-particle-v3 .footer-shell .legal-copy {
  color: var(--color-on-dark-muted);
}

.page-about-particle-v3 .footer-shell .footer-mission {
  color: var(--color-on-dark-muted);
}

.page-about-particle-v3 .footer-shell .video-title { font-size: var(--fs-footer-video); }
.page-about-particle-v3 .footer-shell .duration { font-size: var(--fs-footer-duration); }
.page-about-particle-v3 .footer-shell :is(a, button):focus-visible { outline-color: var(--color-primary); }