/* Phase 1 homepage vertical slice; preview-only until the complete release gate passes. */
html { scroll-behavior: smooth; }

body.ab-home {
  margin: 0;
  min-inline-size: 320px;
}

.ab-skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 120;
  padding: 10px 14px;
  background: var(--ab-surface);
  color: var(--ab-text);
  transform: translateY(-180%);
}

.ab-skip-link:focus {
  transform: translateY(0);
}

.ab-hero {
  min-block-size: 60svh;
  display: flex;
  align-items: stretch;
  padding-block-start: calc(var(--ab-nav-height) + clamp(32px, 5vh, 64px));
  padding-block-end: clamp(36px, 5vh, 64px);
}

.ab-hero-grid {
  align-content: space-between;
  min-block-size: auto;
}

.ab-hero-copy {
  align-self: center;
}

.ab-hero-copy .ab-display {
  max-inline-size: 9ch;
  margin-block-end: 0.28em;
  font-size: clamp(64px, 8.2vw, 118px);
  letter-spacing: -0.025em;
}

.ab-hero-mission {
  max-inline-size: 620px;
  margin: 0;
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.35;
}

.ab-hero-context {
  align-self: center;
  padding-inline-start: clamp(0px, 2vw, 28px);
}

.ab-environment-readout {
  margin-block: 8px 10px;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.45;
}

.ab-hero-rule {
  align-self: end;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-block-start: clamp(36px, 6vh, 72px);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.13em;
}

.ab-hero-datum {
  block-size: 1px;
  background: var(--ab-line);
}

.ab-invitation-section,
.ab-activity-section,
.ab-support-section {
  border-block-start: 1px solid var(--ab-line);
}

.ab-invitation {
  max-inline-size: 720px;
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(27px, 2.6vw, 38px);
  font-weight: 450;
  line-height: 1.24;
  text-wrap: pretty;
}

.ab-section-heading {
  align-items: end;
  margin-block-end: clamp(26px, 3.5vw, 48px);
}

.ab-offset-right {
  grid-column: 7 / span 6;
}

.ab-section-heading > p {
  margin: 0;
}

.ab-pillar-grid {
  align-items: stretch;
}

.ab-pillar {
  min-block-size: 270px;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--ab-line);
}

.ab-pillar h3 {
  margin-block-start: auto;
}

.ab-pillar a {
  margin-block-start: auto;
  align-self: flex-start;
  font-weight: 600;
}

.ab-activity-empty {
  padding: clamp(28px, 4vw, 48px);
  border-inline-start: 4px solid var(--ab-warm);
}

.ab-activity-empty .ab-heading-4 {
  max-inline-size: 560px;
}

.ab-place-section {
  display: flex;
  align-items: center;
}

.ab-place-statement {
  max-inline-size: 650px;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(27px, 2.6vw, 38px);
  line-height: 1.22;
}

.ab-support-section {
  background: color-mix(in srgb, var(--ab-surface) 76%, transparent);
}

.ab-support-line {
  margin-block-start: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(27px, 2.6vw, 38px);
  line-height: 1.2;
}

.ab-text-link {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  font-weight: 600;
}

.ab-phase1-footer {
  padding-block: clamp(42px, 6vw, 72px);
  border-block-start: 1px solid var(--ab-line);
  background: var(--ab-surface);
  color: var(--ab-text);
}

.ab-phase1-footer .ab-grid {
  align-items: start;
}

.ab-atmosphere-control label {
  display: block;
  margin-block-end: 10px;
}

.ab-atmosphere-control [data-motion-toggle] {
  min-block-size: 44px;
  max-inline-size: 100%;
  margin-block-end: 16px;
  padding: 8px 12px;
  border: 1px solid var(--ab-line);
  border-radius: 0;
  background: var(--ab-surface);
  color: var(--ab-text);
  font: inherit;
  cursor: pointer;
}

.ab-atmosphere-control [data-motion-toggle][aria-pressed="true"] {
  border-width: 2px;
  padding: 7px 11px;
}

.ab-atmosphere-control select {
  inline-size: min(100%, 320px);
  min-block-size: 44px;
  padding: 8px 34px 8px 10px;
  border: 1px solid var(--ab-line);
  border-radius: 0;
  background: var(--ab-surface);
  color: var(--ab-text);
  font: inherit;
}

.ab-atmosphere-control .ab-small {
  max-inline-size: 340px;
  margin-block-start: 10px;
}

.ab-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 20px;
}

.ab-footer-links a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 900px) {
  .ab-hero-grid {
    min-block-size: auto;
    row-gap: clamp(44px, 9vw, 72px);
  }

  .ab-hero-copy,
  .ab-hero-context {
    grid-column: span 8;
    padding-inline-start: 0;
  }

  .ab-hero-rule {
    grid-column: span 8;
  }

  .ab-offset-right {
    grid-column: span 8;
  }

  .ab-pillar {
    grid-column: span 8;
    min-block-size: 210px;
  }

  .ab-activity-section .ab-span-4,
  .ab-activity-section .ab-span-8,
  .ab-place-section .ab-span-5,
  .ab-place-section .ab-span-6,
  .ab-support-section .ab-span-4,
  .ab-support-section .ab-span-6 {
    grid-column: span 8;
  }

  .ab-activity-empty,
  .ab-place-statement,
  .ab-support-line {
    margin-block-start: 28px;
  }

  .ab-phase1-footer .ab-span-4 {
    grid-column: span 8;
  }

  .ab-phase1-footer .ab-grid {
    gap: 28px;
  }

  .ab-footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .ab-hero {
    min-block-size: 72svh;
    padding-block-start: calc(var(--ab-nav-height) + 32px);
  }

  .ab-hero-copy,
  .ab-hero-context,
  .ab-hero-rule,
  .ab-section-heading .ab-span-4,
  .ab-section-heading .ab-span-6,
  .ab-offset-right,
  .ab-pillar,
  .ab-activity-section .ab-span-4,
  .ab-activity-section .ab-span-8,
  .ab-place-section .ab-span-5,
  .ab-place-section .ab-span-6,
  .ab-support-section .ab-span-4,
  .ab-support-section .ab-span-6,
  .ab-phase1-footer .ab-span-4 {
    grid-column: span 4;
  }

  .ab-hero-copy .ab-display {
    font-size: clamp(58px, 18vw, 82px);
  }

  .ab-hero-rule {
    gap: 8px;
    font-size: 10px;
  }

  .ab-invitation {
    margin-block-start: 28px;
  }

  .ab-pillar {
    min-block-size: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ab-skip-link { transition: none; }
}

@media (forced-colors: active) {
  .ab-pillar,
  .ab-activity-empty,
  .ab-atmosphere-control select,
  .ab-atmosphere-control [data-motion-toggle],
  .ab-phase1-footer {
    border-color: CanvasText;
  }

  .ab-support-section,
  .ab-phase1-footer {
    background: Canvas;
    color: CanvasText;
  }
}