/*
 * Desktop frame choreography
 *
 * Contract: one visual frame owns the viewport at a time.
 * The sticky 80px header is excluded from the frame height.
 * Mobile/tablet intentionally keep natural document flow.
 *
 * Alignment contract: every desktop frame starts from the same optical
 * top rail and preserves the same bottom safe area. Page content may have
 * different internal rhythm, but it must not vertically recenter the whole
 * frame according to content height.
 */

@media (min-width: 981px) {
  :root {
    --frame-header: 80px;
    --frame-top: clamp(40px, 5.2vh, 56px);
    --frame-bottom: clamp(24px, 3.2vh, 36px);
  }

  html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--frame-header);
  }

  body {
    overscroll-behavior-y: none;
  }

  .frame-section {
    height: calc(100svh - var(--frame-header));
    min-height: calc(100svh - var(--frame-header));
    max-height: calc(100svh - var(--frame-header));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding-top: var(--frame-top);
    padding-bottom: var(--frame-bottom);
  }

  .frame-section.section-top,
  .frame-section.section-tight {
    padding-top: var(--frame-top);
    padding-bottom: var(--frame-bottom);
  }

  /* Shared page origin. Every page hero begins at the same top rail. */
  .frame-section .page-hero {
    padding: 0 0 clamp(16px, 2.4vh, 28px);
    flex: 0 0 auto;
    align-items: start;
  }

  .frame-section .page-hero-copy,
  .frame-section .page-hero-aside {
    align-self: start;
  }

  .frame-section .page-hero-aside {
    padding-top: 4px;
  }

  .frame-section .page-hero h1 {
    margin-bottom: 14px;
  }

  .frame-section .section-head {
    margin-bottom: clamp(18px, 2.8vh, 34px);
  }

  /* HOME — top-align the hero copy to the same frame origin used by all
     interior pages. The image and proof strip still compose one frame. */
  .frame-section .hero {
    min-height: 0;
    flex: 1 1 auto;
    padding: 0;
    gap: clamp(30px, 4vw, 50px);
    align-items: start;
  }

  .frame-section .hero-copy {
    align-self: start;
    padding-top: 0;
  }

  .frame-section .hero-visual {
    align-self: stretch;
    align-items: flex-start;
  }

  .frame-section .earth-visual {
    min-height: 0;
    height: min(48vh, 470px);
  }

  .frame-section .stat-strip {
    margin-top: clamp(12px, 2vh, 22px);
    flex: 0 0 auto;
  }

  .frame-section .stat-item {
    min-height: 88px;
    padding: 18px 22px;
  }

  .frame-section .stat-item strong {
    font-size: 20px;
  }

  /* FOUNDRY — the convergence graphic stays entirely in its own frame. */
  .frame-section .foundry-stage {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 12px 0 6px;
    overflow: hidden;
  }

  .frame-section .foundry-graphic {
    min-height: 0;
    width: 100%;
    height: 100%;
    max-height: 52vh;
  }

  .frame-section .foundry-graphic svg {
    max-height: 100%;
  }

  .frame-section .method-grid {
    flex: 0 0 auto;
  }

  .frame-section .method-step {
    min-height: 138px;
    padding: 22px 22px;
  }

  /* CAPABILITIES — reserve explicit space for the closing band so it does
     not compete with or overlap the second capability row. */
  .frame-section .capability-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .frame-section .cap-card {
    min-height: 0;
    padding: clamp(15px, 2.1vh, 22px);
    overflow: hidden;
  }

  .frame-section .cap-card-icon {
    margin-bottom: clamp(10px, 1.7vh, 18px);
  }

  .frame-section .capability-closing {
    flex: 0 0 auto;
    margin-top: 10px;
    padding: 14px 18px;
    min-height: 46px;
  }

  /* WORK INDEX — preserve one-frame overview. Featured evidence occupies
     the first row; the three secondary provenance cards share the second. */
  .frame-section .filters {
    flex: 0 0 auto;
    margin-bottom: 16px;
  }

  .frame-section .work-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1.18fr) minmax(0, .92fr);
  }

  .frame-section .work-card {
    min-height: 0;
    height: 100%;
  }

  .frame-section .work-card.featured {
    grid-column: 1 / -1;
  }

  .frame-section .work-card > a {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .frame-section .work-visual,
  .frame-section .work-card.featured .work-visual {
    height: auto;
    min-height: 0;
  }

  .frame-section .work-card-body {
    padding: 14px 18px 16px;
  }

  .frame-section .work-card h3 {
    margin: 8px 0 5px;
    font-size: 17px;
  }

  .frame-section .work-card p {
    margin-bottom: 0;
    line-height: 1.4;
  }

  /* WORK DETAIL — hero, visual, explanation and attribution stay together. */
  .frame-section .work-detail-hero {
    padding: 0;
  }

  .frame-section .work-detail-head h1 {
    margin-bottom: 8px;
  }

  .frame-section .detail-visual {
    height: min(35vh, 310px);
    margin-top: clamp(12px, 2vh, 22px);
  }

  .frame-section .detail-columns {
    padding: clamp(14px, 2vh, 24px) 0;
    gap: 24px;
  }

  .frame-section .attribution-band {
    padding: 16px 20px;
  }

  /* RESEARCH / KNOWLEDGE / INSTITUTION — compact internal vertical rhythm,
     but all begin at the same top rail as the rest of the site. */
  .frame-section .research-stage {
    min-height: 0;
    margin-top: -8px;
  }

  .frame-section .research-terrain {
    height: min(27vh, 250px);
  }

  .frame-section .research-card {
    min-height: 0;
    padding: 18px 20px;
  }

  .frame-section .knowledge-visual {
    height: min(18vh, 150px);
  }

  .frame-section .knowledge-axiom {
    margin-top: 10px;
    padding: 18px;
  }

  .frame-section .timeline {
    padding-top: 18px;
    padding-bottom: 8px;
  }

  .frame-section .institution-grid {
    margin-top: clamp(18px, 2.8vh, 30px);
  }

  .frame-section .institution-visual {
    min-height: 0;
    height: min(28vh, 250px);
  }

  .frame-section .stewardship-card {
    padding: 22px 24px;
  }

  /* CONTACT is itself a full frame. */
  .frame-section .contact-section,
  .contact-section.frame-section {
    min-height: 0;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Footer is a discrete final stop rather than bleeding under the last
     content frame. */
  .site-footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

@media (max-width: 980px) {
  html {
    scroll-snap-type: none;
  }

  .frame-section {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }
}