/* Static research images (intentionally non-interactive) */
.hero-photo > img {
  display: block;
  width: 100%;
}

.condition-images img {
  display: block;
  width: 100%;
  height: 330px;
  object-fit: cover;
  background: #fff;
  padding: 13px;
  border: 1px solid var(--line);
}

/* Desktop and large laptop refinements */
@media (min-width: 1181px) {
  .hero {
    min-height: calc(100vh - 94px);
  }
}

/* Small laptops and iPad landscape */
@media (min-width: 851px) and (max-width: 1180px) {
  .wrap {
    width: calc(100% - 56px);
  }

  .site-header {
    gap: 24px;
    padding-inline: 28px;
  }

  .site-header nav {
    gap: 18px;
  }

  .hero {
    gap: 46px;
    min-height: auto;
    padding-block: 58px;
  }

  .hero h1 {
    font-size: clamp(58px, 7vw, 78px);
  }

  .hero-photo img {
    height: 390px;
  }

  .finding,
  .method-grid,
  .spatial-layout,
  .resources {
    gap: 48px;
  }

  .method-grid article + article {
    padding-left: 48px;
  }

  .spatial aside {
    padding-left: 32px;
  }

  .facts strong {
    font-size: 29px;
  }
}

/* iPad portrait and compact tablets */
@media (min-width: 600px) and (max-width: 850px) {
  .wrap {
    width: calc(100% - 56px);
  }

  .site-header {
    padding: 17px 28px;
  }

  .site-header nav {
    justify-content: flex-start;
  }

  .hero {
    padding-block: 58px 72px;
  }

  .hero-copy {
    max-width: 690px;
  }

  .hero h1 {
    font-size: 76px;
  }

  .hero-photo {
    max-width: 690px;
  }

  .hero-photo img {
    height: 460px;
  }

  .facts {
    grid-template-columns: repeat(3, 1fr);
  }

  .condition-images {
    grid-template-columns: 1fr 1fr;
  }

  .condition-images img {
    height: 270px;
  }

  .spatial-layout > div:first-child {
    grid-template-columns: 70px minmax(0, 620px);
  }

  .cell {
    padding: 15px;
  }

  .cell strong {
    font-size: 20px;
  }

  .cell span {
    font-size: 12px;
  }

  .takeaway-grid {
    grid-template-columns: 1fr;
  }
}

/* Phones */
@media (max-width: 599px) {
  html {
    scroll-padding-top: 122px;
  }

  .wrap {
    width: calc(100% - 32px);
  }

  .site-header {
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px;
  }

  .site-header nav {
    gap: 18px;
    margin-inline: -16px;
    padding: 2px 16px 0;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .site-header nav::-webkit-scrollbar {
    display: none;
  }

  .header-link {
    padding: 9px 12px;
  }

  .hero {
    gap: 34px;
    padding-block: 42px 58px;
  }

  .hero h1 {
    font-size: clamp(48px, 15vw, 62px);
    letter-spacing: -2.5px;
  }

  .hero-summary {
    font-size: 15px;
  }

  .primary {
    width: 100%;
  }

  .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
  }

  .hero-photo img {
    height: 270px;
  }

  .photo-card figcaption {
    font-size: 9px;
  }

  .scoreboard {
    grid-template-columns: 1fr;
  }

  .score-divider {
    grid-column: 1;
    grid-row: auto;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-block: 13px;
  }

  .score {
    padding-block: 25px;
  }

  .facts {
    grid-template-columns: 1fr 1fr;
  }

  .facts strong {
    font-size: 29px;
  }

  .condition-list article {
    gap: 14px;
  }

  .condition-images img {
    height: 230px;
  }

  .toggle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }

  .toggle button {
    min-height: 42px;
  }

  .bar {
    grid-template-columns: 52px minmax(0, 1fr) 88px;
    gap: 8px;
  }

  .spatial .toggle {
    grid-template-columns: repeat(3, 1fr);
  }

  .spatial-layout > div:first-child {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .distance-labels {
    font-size: 9px;
    letter-spacing: .5px;
  }

  .cell {
    min-width: 0;
    padding: 8px 6px;
  }

  .cell strong {
    font-size: 13px;
  }

  .cell span {
    font-size: 9px;
    overflow-wrap: anywhere;
  }

  .timeline > div {
    grid-template-columns: 90px minmax(0, 1fr) 54px;
    gap: 10px;
  }

  .timeline span,
  .timeline strong {
    font-size: 11px;
  }

  .resource-links a {
    padding-block: 22px;
  }

  footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Narrow phones */
@media (max-width: 374px) {
  .brand {
    font-size: 11px;
  }

  .header-link {
    font-size: 10px;
  }

  .hero h1 {
    font-size: 46px;
  }

  .spatial-layout > div:first-child {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .cell {
    padding: 6px 4px;
  }
}

/* Keep the research-page title in scale with the other two selected projects. */
.hero h1 {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.18;
  letter-spacing: -2px;
}

h2 {
  font-size: clamp(27px, 2.8vw, 38px);
  line-height: 1.25;
  letter-spacing: -1.2px;
}

.method-grid h3 {
  font-size: 22px;
}

.condition-list h3,
.result-callout strong {
  font-size: 19px;
}

.map-copy {
  font-size: 18px;
}

.score strong {
  font-size: 62px;
  letter-spacing: -3px;
}

.score strong span {
  font-size: 22px;
}

.site-header {
  position: relative;
  top: auto;
  backdrop-filter: none;
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: 40px;
  }

  .score strong {
    font-size: 36px;
  }

  .score strong span {
    font-size: 18px;
  }
}

/* Stack resource labels above their titles on phones so long paper names stay readable. */
@media (max-width: 599px) {
  .resource-links a {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 6px 12px;
  }

  .resource-links span,
  .resource-links strong {
    grid-column: 1;
    min-width: 0;
  }

  .resource-links strong {
    overflow-wrap: anywhere;
  }

  .resource-links i {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
  }
}