.about-photo {
  max-width: var(--wp--custom--about-photo-width);
  margin: 0 0 var(--wp--preset--spacing--4);
}

.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--wp--custom--about-photo-ratio);
  object-fit: cover;
  object-position: 82% 50%;
}

@media (min-width: 48rem) {
  main:has(> .page-content > .about-photo:first-child) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(var(--wp--custom--about-photo-width), 40%);
    column-gap: var(--wp--preset--spacing--5);
    align-items: start;
  }

  main:has(> .page-content > .about-photo:first-child) > .page-content {
    display: contents;
  }

  main:has(> .page-content > .about-photo:first-child) > .page-head,
  .page-content > .about-photo:first-child + .profile {
    grid-column: 1;
  }

  :where(main:has(> .page-content > .about-photo:first-child) .page-content) > * {
    grid-column: 1 / -1;
  }

  .page-content > .about-photo:first-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: var(--wp--preset--spacing--5);
  }

  .page-content > .about-photo:first-child + .profile {
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-content > .about-photo:first-child + .profile > * {
    grid-column: auto;
    grid-row: auto;
  }
}

.profile {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, var(--wp--style--global--content-size));
  gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
  border-top: var(--wp--custom--rule);
  padding-block: var(--wp--preset--spacing--4);
}

.profile > * {
  grid-column: 2;
  margin: 0;
}

.profile > h2 {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--wp--preset--font-size--h-3);
}

.profile ul {
  padding-left: 1.1em;
  display: grid;
  gap: var(--wp--preset--spacing--1);
}

.timeline {
  display: grid;
  gap: var(--wp--preset--spacing--2);
}

.timeline__row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  column-gap: var(--wp--preset--spacing--3);
}

.timeline__row > * {
  grid-column: 2;
  margin: 0;
}

.timeline__row > .timeline__date {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: 0.15rem;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.timeline__row > .timeline__note {
  margin-top: 0.15rem;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.timeline__row > .wp-block-details summary {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--1);
  color: var(--wp--preset--color--accent);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.timeline__row > .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.timeline__row > .wp-block-details summary::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.timeline__row > .wp-block-details[open] summary::before {
  transform: rotate(45deg);
}

.timeline__row > .wp-block-details summary:hover {
  text-decoration: underline;
}

.timeline__row > .wp-block-details summary[data-count]::after {
  content: "· " attr(data-count);
  color: var(--wp--preset--color--muted);
  font-weight: 400;
}

.timeline__toggle {
  justify-self: start;
  margin-bottom: var(--wp--preset--spacing--2);
  padding: var(--wp--preset--spacing--1) 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--accent);
  font: inherit;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.timeline__row > .wp-block-details > ul {
  display: grid;
  gap: var(--wp--preset--spacing--1);
  margin: var(--wp--preset--spacing--1) 0 0;
  padding-left: 1.1em;
}

.timeline--compact {
  gap: var(--wp--preset--spacing--1);
}

.timeline--compact .timeline__row {
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
}

.project {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
  align-items: center;
  border-top: var(--wp--custom--rule);
  padding-block: var(--wp--preset--spacing--5);
}

.project:nth-of-type(even) .project__media {
  order: 2;
}

.project__media {
  margin: 0;
  aspect-ratio: 3 / 2;
  background: var(--wp--preset--color--tint);
  padding: var(--wp--preset--spacing--3);
}

.project__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

.project__text > * {
  margin: 0 0 var(--wp--preset--spacing--2);
}

.project__text h2 {
  font-size: var(--wp--preset--font-size--h-2);
  margin-bottom: 0;
}

.project__text > .project__tagline {
  margin-top: var(--wp--preset--spacing--1);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.4;
}

.project__text > .wp-block-buttons {
  margin-top: var(--wp--preset--spacing--3);
}

.years {
  border-block: var(--wp--custom--rule);
  padding-block: var(--wp--preset--spacing--2);
}

.years + .year {
  border-top: 0;
}

.years ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--wp--preset--font-size--small);
}

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

.year h2 {
  font-size: var(--wp--preset--font-size--h-2);
  font-weight: 400;
  color: var(--wp--preset--color--accent);
}

.year h2 small {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
  margin-top: var(--wp--preset--spacing--1);
  letter-spacing: 0;
}

.docs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--3);
}

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

.doc img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--wp--preset--color--paper);
  border: var(--wp--custom--rule);
  padding: var(--wp--preset--spacing--1);
}

.doc p {
  margin: var(--wp--preset--spacing--1) 0 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.4;
}

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

@media (max-width: 56rem) {
  .project {
    grid-template-columns: minmax(0, 1fr);
  }

  .project:nth-of-type(even) .project__media {
    order: 0;
  }
}

@media (max-width: 48rem) {
  .profile,
  .timeline__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile > *,
  .timeline__row > *,
  .timeline__row > .timeline__date {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 40rem) {
  .year {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--2);
  }
}