.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(130deg, var(--wp--preset--color--accent) 25%, var(--wp--preset--color--accent-deep) 100%);
}

.hero__photo {
  width: 100%;
  height: min(80vh, 46rem);
  min-height: 32rem;
  object-fit: cover;
  object-position: 72% 28%;
  mix-blend-mode: luminosity;
  opacity: 0.55;
}

.hero__panel {
  position: absolute;
  inset-block-end: var(--wp--preset--spacing--5);
  inset-inline-start: max(var(--wp--custom--gutter), calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--wp--custom--gutter)));
  width: min(36rem, calc(100% - 2 * var(--wp--custom--gutter)));
  background: var(--wp--preset--color--paper);
  padding: var(--wp--preset--spacing--4);
  border-top: 6px solid var(--wp--preset--color--accent);
}

.hero:not(:has(.hero__photo)) {
  padding-block: var(--wp--preset--spacing--5);
}

.hero:not(:has(.hero__photo)) .hero__panel {
  position: static;
  margin-inline-start: max(var(--wp--custom--gutter), calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--wp--custom--gutter)));
}

.hero__panel h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.15;
}

.hero__panel h1 a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.hero__panel h1 a:hover {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.hero__standfirst {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin: var(--wp--preset--spacing--2) 0 var(--wp--preset--spacing--3);
  color: var(--wp--preset--color--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
  margin-top: var(--wp--preset--spacing--3);
}

.stories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--4);
}

.story {
  border-top: var(--wp--custom--rule);
  padding-top: var(--wp--preset--spacing--3);
}

.story__standfirst {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: var(--wp--preset--spacing--2) 0 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.projects {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 36rem;
}

.projects__photo {
  margin: 0;
}

.projects__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

.projects__text {
  padding: var(--wp--preset--spacing--6) var(--wp--custom--gutter) var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
  max-width: 44rem;
}

.projects__text h2 {
  font-size: var(--wp--preset--font-size--h-2);
  margin-bottom: var(--wp--preset--spacing--4);
}

.projects__text h3 {
  font-size: var(--wp--preset--font-size--h-3);
}

.projects__text p {
  margin: var(--wp--preset--spacing--1) 0 var(--wp--preset--spacing--2);
}

.project-list {
  list-style: none;
  margin: var(--wp--preset--spacing--4) 0 0;
  padding: 0;
}

.project-list li {
  border-top: var(--wp--custom--rule);
  padding-block: var(--wp--preset--spacing--2);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.project-list a {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--wp--preset--color--ink);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
}

.project-list a:hover {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
}

.projects__text .projects__all {
  margin: var(--wp--preset--spacing--3) 0 0;
}

.quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  line-height: 1.3;
  text-wrap: pretty;
}

.quote p {
  margin: 0;
}

.quote cite {
  display: block;
  margin-top: var(--wp--preset--spacing--3);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-style: normal;
}

.press h2 {
  font-size: var(--wp--preset--font-size--h-2);
  margin-bottom: var(--wp--preset--spacing--3);
}

.press-item {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
  border-top: var(--wp--custom--rule);
  padding-block: var(--wp--preset--spacing--3);
}

.press-item h3 {
  grid-row: span 2;
  font-size: var(--wp--preset--font-size--h-3);
}

.press-item p {
  grid-column: 2;
  margin: 0;
}

.press-item p:first-of-type {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.site-footer {
  margin-top: 0;
}

@media (max-width: 64rem) {
  .hero__photo {
    height: 28rem;
    min-height: 0;
    object-position: 78% 25%;
  }

  .hero__panel,
  .hero:not(:has(.hero__photo)) .hero__panel {
    position: static;
    width: auto;
    margin-inline-start: 0;
    border-top-width: 0;
    padding: var(--wp--preset--spacing--4) var(--wp--custom--gutter);
  }

  .hero__panel h1 {
    max-width: 28ch;
  }

  .hero__standfirst {
    max-width: var(--wp--style--global--content-size);
  }
}

@media (max-width: 60rem) {
  .stories {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 56rem) {
  .projects {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .projects__photo img {
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .projects__text {
    padding: var(--wp--preset--spacing--5) var(--wp--custom--gutter);
  }
}

@media (max-width: 48rem) {
  .hero__photo {
    height: 22rem;
  }

  .press-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .press-item h3 {
    grid-row: auto;
  }

  .press-item p {
    grid-column: auto;
  }
}
