/* "About us" landing: a full-screen hero on the team's own NISAR radar image, the brand row and the horizontal
   navigation over it, then the project sections. Layout inspired by mission pages (dark ground, picture as the
   subject, words on its calm side); every word, logo and picture is the project's own. */

/* on the landing page the header floats over the hero picture */
.app.on-page .shell { grid-row: 1 / 3; }
.app.on-page .topbar { position: absolute; left: 0; right: 0; top: 0; border-bottom: 0;
  background: linear-gradient(180deg, #040d1acc 0%, #040d1a66 60%, transparent 100%); padding-top: 14px; padding-bottom: 22px; }
.app.on-page .topbar { transition: background-color .2s; }
.app.on-page .topbar.scrolled { background: #06111ff2; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.app.on-page .topmeta { display: none; }
#page-about { background: var(--bg); }

.ab-hero { position: relative; height: 100vh; min-height: 560px; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.ab-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; z-index: -2; }
/* scrim: dark on the side that carries the words, the radar image stays the subject on the right */
.ab-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #040d1afa 0%, #040d1aeb 28%, #040d1ab8 46%, #040d1a4d 66%, #040d1a0d 100%), linear-gradient(0deg, #071426 0%, #07142600 26%); }
.ab-wrap { width: min(100% - 2 * var(--ab-gut, 80px), 1280px); margin-inline: auto; }
.ab-hero-text { max-width: 600px; padding-top: 72px; }
.ab-hero h1 { margin: 0 0 18px; white-space: nowrap; font-size: clamp(44px, 7.4vw, 112px); line-height: .95; letter-spacing: -.03em; font-weight: 800; color: #fff; }
.ab-hero h1 span { color: var(--accent); }
.ab-headline { margin: 0 0 14px; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -.015em; font-weight: 700; color: #fff; text-wrap: balance; }
.ab-lead { margin: 0 0 30px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: #f1f6fb; }
.ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.ab-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 2px solid var(--accent); background: transparent; color: var(--accent);
  font: 800 14px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .16s, color .16s, transform .12s; }
.ab-cta svg { width: 16px; height: 16px; transition: transform .16s; }
.ab-cta:hover { background: var(--accent); color: var(--accent-ink); }
.ab-cta:hover svg { transform: translateX(3px); }
.ab-cta:active { transform: translateY(1px); }
.ab-link { background: none; border: 0; padding: 12px 0; color: #fff; font: 600 15px/1 var(--font); cursor: pointer; background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-position: 0 calc(100% - 6px); background-repeat: no-repeat; transition: background-size .2s ease-out; }
.ab-link:hover { background-size: 100% 1px; }
.ab-facts { position: absolute; left: 0; right: 0; bottom: 34px; }
.ab-facts dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; max-width: 860px; }
.ab-facts dt { font-size: 13px; color: var(--text-2); margin-bottom: 4px; }
.ab-facts dd { margin: 0; white-space: nowrap; font-size: 20px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* the hero enters once on load */
@media (prefers-reduced-motion: no-preference) {
  .ab-hero-text > *, .ab-facts { animation: ab-in .6s cubic-bezier(.2, .7, .2, 1) both; }
  .ab-hero-text > :nth-child(2) { animation-delay: .06s; } .ab-hero-text > :nth-child(3) { animation-delay: .12s; }
  .ab-hero-text > :nth-child(4) { animation-delay: .18s; } .ab-hero-text > :nth-child(5) { animation-delay: .24s; } .ab-facts { animation-delay: .3s; }
  .ab-hero-bg { animation: ab-bg 1.4s ease-out both; }
}
@keyframes ab-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes ab-bg { from { opacity: .35; transform: scale(1.03); } }

/* sections under the hero */
.ab-body { padding: 72px 0 40px; }
.ab-body .ab-wrap > h2 { font-size: 30px; letter-spacing: -.01em; margin: 56px 0 16px; }
.ab-body .ab-wrap > h2:first-child { margin-top: 0; }
.ab-body .featurecard { transition: transform .16s, border-color .16s; }
.ab-body .featurecard:hover { transform: translateY(-2px); border-color: var(--border-strong); }
/* running text of the sections: a readable measure inside the wide wrap */
.ab-text { max-width: 76ch; margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.ab-sub { margin: 28px 0 10px; font-size: 17px; }
.ab-points { max-width: 76ch; margin: 0 0 16px; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.ab-points strong { color: var(--text); }
.ab-body .featurecard .btn { margin-top: 12px; }
.ab-after { margin-top: 16px; }
/* plain section label above each story heading */
.ab-eyebrow { margin: 56px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ab-eyebrow:first-child { margin-top: 0; }
.ab-body .ab-wrap > .ab-eyebrow + h2 { margin-top: 0; }
.ab-objective { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--text); max-width: 60ch; }
.ab-more { margin-top: 56px; border-top: 1px solid var(--border); padding-top: 16px; }
.ab-more > summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--text); padding: 6px 0; }
.ab-more[open] > summary { margin-bottom: 14px; }
.ab-more .table-wrap { margin-top: 16px; }
.ab-body table.data td strong { color: var(--text); }
.ab-credit { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }

@media (max-width: 1023px) { .ab-wrap { --ab-gut: 48px; } .ab-hero-bg { object-position: 78% 40%; } }
@media (max-width: 640px) {
  .ab-wrap { --ab-gut: 24px; }
  .ab-hero { align-items: flex-start; height: auto; min-height: 100svh; padding-bottom: 28px; flex-direction: column; }
  .ab-hero::before { background: linear-gradient(180deg, #040d1ad9 0%, #040d1ab3 55%, #071426 100%); }
  .ab-hero-text { padding-top: 132px; }
  .ab-actions .ab-cta { width: 100%; justify-content: center; }
  .ab-facts { position: static; margin-top: 36px; width: 100%; }
  .ab-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* equal edges: on the landing page the header stands on the same left and right lines as the hero text */
.app.on-page .topbar { padding-inline: max(80px, calc((100% - 1280px) / 2)); }
@media (max-width: 1023px) { .app.on-page .topbar { padding-inline: 48px; } }
@media (max-width: 640px) { .app.on-page .topbar { padding-inline: 24px; } }

/* short desktop screens: the hero words stay clear of the facts row */
@media (min-width: 641px) and (max-height: 760px) {
  .ab-hero { padding-bottom: 84px; }
  .ab-hero h1 { font-size: clamp(44px, 11vh, 84px); margin-bottom: 12px; }
  .ab-headline { font-size: clamp(20px, 4.2vh, 30px); margin-bottom: 10px; }
  .ab-lead { font-size: 16px; margin-bottom: 20px; }
  .ab-hero-text { padding-top: 64px; }
}