/* ==========================================================================
   ARIA — Sections / Tiles

   Clean alternating white/parchment layout inspired by Distill.pub.
   Color change between sections IS the divider — no shadows, no borders.
   All sections use light backgrounds (white or parchment).
   ========================================================================== */

/* ── Base Tile ── */
.tile {
  width: 100%;
  padding: 80px 24px;                          /* Apple spacing.section */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* When the page is jumped to a section (via the header pill links,
     fig-hotspot reverse jumps, or paper-fig-link outbound clicks), keep
     the section's top clear of the fixed pill header. */
  scroll-margin-top: calc(var(--header-offset, 96px) + 12px);
}

.tile__content {
  max-width: 980px;
  width: 100%;
}

/* ── White Tile ── */
.tile--light {
  background: var(--apple-canvas);               /* #ffffff */
  color: var(--apple-ink);
}

/* ── Parchment Tile (off-white) ── */
.tile--parchment {
  background: var(--apple-parchment);            /* #f5f5f7 */
  color: var(--apple-ink);
}

/* ── Section Heading Style ── */
.tile h2 {
  margin-bottom: 24px;                          /* sp-lg */
  padding-bottom: 12px;                         /* sp-sm */
  border-bottom: 1px solid var(--apple-divider-soft);
  color: var(--apple-ink);
}

/* ── Paragraphs within tiles ── */
.tile p {
  margin-bottom: 17px;                          /* sp-md */
}

.tile p:last-child {
  margin-bottom: 0;
}

/* ── Inline elements ── */
.tile em {
  color: var(--apple-ink-muted-80);
}

.tile strong {
  font-weight: var(--weight-semibold);
}

/* ── Lists ── */
.tile ol,
.tile ul {
  color: var(--apple-ink);
}

/* ── Code ── */
.tile code {
  background: var(--apple-parchment);
  color: var(--apple-ink);
}

/* ── Hero Section ──
   Distill-style title block: large title, subtitle, centered,
   with the ARIA logo above. */
.tile--hero {
  padding: 0 24px 80px;                         /* No top padding — hero background extends to viewport top so there's no seam behind the floating pill header. The pill header is translucent, so we want it sitting over the glow, not over the body bg. The hero content reserves its own top space via the .tile__content margin below. */
  text-align: center;
  position: relative;                            /* Anchor for the glow background below */
  /* Apple-style soft blue glow, painted directly on the tile so it fully
     covers the viewport top edge (no gap before .mesh--page's blurred
     blobs kick in). A bright wash centered above the title, a quieter
     Heritage-Blue murmur to the upper right for depth, parchment as the
     opaque base so there's no seam with the section below. */
  background:
    radial-gradient(ellipse 130% 62% at 50% -6%, rgba(104, 172, 229, 0.38) 0%, rgba(104, 172, 229, 0.16) 40%, rgba(104, 172, 229, 0) 74%),
    radial-gradient(ellipse 85% 45% at 88% 18%, rgba(0, 45, 114, 0.07) 0%, rgba(0, 45, 114, 0) 62%),
    var(--apple-parchment);
}

.tile--hero .tile__content {
  max-width: 760px;                              /* Narrowed from 880px to clear the hero-scene logo halves flanking the text at common desktop widths (docs/assets/css/hero-scene.css) — verify visually and retune if still overlapping */
  position: relative;                             /* Lift hero text above ::before watermark */
  z-index: 1;
  margin-top: 104px;                             /* Reserve top space: pill header bottom (~72px) + 32px breathing room. Pushes the content below the fixed pill header. */
}

/* The hero previously carried a large centered ARIA-logo watermark here
   (Option B — CSS pseudo-element, ::before). It sat directly behind the
   title/subtitle/byline text and used mix-blend-mode: multiply, which
   darkened the text it overlapped and read as muddy rather than premium.
   Removed in favor of the glow-only background above (var(--mint), see
   the .tile--hero background rule) — the ARIA mark already appears as
   the nav-pill avatar, so no branding is lost. */

.tile--hero .hero-title {
  font-size: var(--text-hero);                  /* 56px */
  font-weight: var(--weight-semibold);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  color: var(--apple-ink);
  margin-bottom: 16px;
  margin-top: 0;
}

.tile--hero .hero-subtitle {
  font-size: var(--text-lead);                  /* 28px */
  font-weight: var(--weight-regular);
  line-height: var(--leading-lead);
  letter-spacing: var(--tracking-lead);
  color: var(--apple-ink-muted-80);
  margin-bottom: 32px;                          /* sp-xl */
}

.tile--hero .hero-authors {
  font-size: var(--text-body);
  color: var(--apple-ink-muted-48);
  margin-bottom: 8px;
}

/* Byline superscript markers (* corresponding author, † equal contribution).
   Inline within the name link so screen readers still announce the name as a
   single token; the visual cue is a small colored glyph above the baseline. */
.byline-mark {
  display: inline-block;
  font-size: 0.62em;
  font-weight: var(--weight-semibold, 600);
  line-height: 0;
  vertical-align: super;
  margin-left: 1px;
  letter-spacing: 0;
  font-feature-settings: "sups" off;
}
.byline-mark--star {
  color: var(--apple-primary, #002D72);
}
.byline-mark--dagger {
  color: var(--mint, #68ACE5);
}

/* Legend line under the byline — the conventional "*Corresponding author ·
   †Equal contribution" footnote. Same color as the byline itself, smaller
   weight, sits just below with a hair of extra breathing room. */
.tile--hero .hero-authors-legend {
  font-size: var(--text-caption);
  color: var(--apple-ink-muted-48);
  margin: -4px 0 24px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
}
.byline-legend-sep {
  opacity: 0.55;
}
.byline-legend-item .byline-mark {
  margin-right: 4px;
}

.tile--hero .hero-date {
  font-size: var(--text-caption);
  color: var(--apple-ink-muted-48);
  margin-bottom: 24px;
}

.tile--hero .hero-logo {
  /* Legacy class — the hero logo is now a CSS ::before watermark on
     .tile--hero (see .tile--hero::before above). The class is kept
     here as a safety net in case the <img> is ever re-introduced. */
  max-width: 600px;
  width: 60vw;
  margin: 24px auto 0;
  opacity: 0.07;
  pointer-events: none;
}

.tile--hero .hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

/* Lead paragraphs read better left-aligned at a comfortable measure —
   center-aligned works for the one-line title/subtitle above, but
   multi-line body copy centered across the full width is a readability
   anti-pattern (ragged, harder-to-track line starts). */
.tile--hero .hero-lead {
  text-align: left;
  max-width: 640px;
  margin: 32px auto 0;
}

/* ── Figure Layout (Distill-style)
   Figures sit alongside text on wider screens. */
.figure-container {
  margin: 24px 0;
}

.figure-caption {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--apple-ink-muted-48);
  margin-top: 8px;
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Footer ── */
.site-footer {
  background: var(--apple-parchment);
  color: var(--apple-ink-muted-80);
  padding: 56px 24px 32px;
  font-size: var(--text-fine-print);
  font-weight: var(--weight-regular);
  line-height: var(--leading-fine-print);
  letter-spacing: var(--tracking-fine-print);
}

.site-footer .tile__content {
  max-width: 980px;
  margin: 0 auto;
}

.site-footer a {
  color: var(--apple-primary);
  font-size: var(--text-body);
  line-height: var(--leading-dense-link);       /* 2.41 — relaxed footer links */
}

.site-footer h3 {
  color: var(--apple-ink);
  font-size: var(--text-caption-strong);
  font-weight: var(--weight-semibold);
  margin-bottom: 12px;
}

/* Top row: brand mark + tagline on the left, link columns on the right
   (Anthropic-style footer layout). */
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  text-align: left;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 260px;
}

.footer-logo {
  width: 84px;
  height: auto;
  opacity: 0.9;
}

.footer-tagline {
  margin: 0;
  font-size: var(--text-fine-print);
  color: var(--apple-ink-muted-48);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col a {
  display: block;
  font-size: var(--text-fine-print);
  line-height: var(--leading-caption);
}

.footer-divider {
  border-top: 1px solid var(--apple-hairline);
  max-width: 980px;
  margin: 40px auto 20px;
}

.footer-bottom {
  text-align: center;
  font-size: var(--text-fine-print);
  color: var(--apple-ink-muted-48);
}

@media (max-width: 640px) {
  .footer-grid {
    flex-direction: column;
    gap: 32px;
  }

  .footer-links {
    gap: 32px;
  }
}