.site-footer {
  padding-block: var(--space-xl) max(var(--space-2xl), env(safe-area-inset-bottom));
  border-block-start: var(--rule-hairline) solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.site-footer p {
  max-inline-size: 72ch;
  margin-inline: auto;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration-thickness: var(--rule-strong);
  }

  .destination-row:hover,
  .project-row:hover {
    background: var(--color-paper-2);
  }

  .project-row:hover .project-row__thumbnail {
    border-color: var(--color-accent);
  }

  .destination-row:hover .destination-row__title,
  .project-row:hover .project-row__main strong {
    transform: translateX(var(--space-xs));
  }

  .destination-row:hover::after,
  .project-row:hover::after {
    transform: translate(var(--space-xs), calc(var(--space-xs) * -1));
  }

  .contact-index a:hover,
  .section-heading a:hover,
  .dev-contact a:hover,
  .back-link:hover,
  .case-study__links a:hover,
  .project-empty a:hover {
    text-decoration-thickness: var(--rule-strong);
  }

  .project-filter button:hover {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .project-filter__option:hover span {
    background: var(--color-paper-2);
    border-color: var(--color-muted);
    color: var(--color-ink);
  }

  .project-filter__option:hover input:checked + span {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-ink);
  }

  .project-filter__disclosure > summary:hover {
    color: var(--color-accent);
  }
}

@media (max-width: 59.999rem) {
  .project-row {
    min-block-size: 0;
    padding-block: var(--space-lg);
    row-gap: var(--space-md);
  }

  .project-row__main > span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 40rem) {
  .hub-intro,
  .projects-intro {
    padding-block: var(--space-3xl) var(--space-4xl);
  }

  .dev-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(15rem, 0.85fr);
    gap: var(--space-xl);
    padding-block: var(--space-2xl) var(--space-4xl);
  }

  .dev-portrait__frame {
    inline-size: min(100%, 28rem);
  }

  .destination-row {
    min-block-size: 7.5rem;
    grid-template-columns: minmax(8rem, 2fr) minmax(7rem, 1fr) minmax(0, 4fr) auto;
    gap: var(--space-lg);
    align-items: center;
  }

  .destination-row__path,
  .destination-row__title,
  .destination-row__description,
  .destination-row::after {
    grid-row: 1;
  }

  .destination-row__path {
    grid-column: 1;
  }

  .destination-row__title {
    grid-column: 2;
  }

  .destination-row__description {
    grid-column: 3;
  }

  .destination-row::after {
    grid-column: 4;
  }

  .section-heading,
  .project-results__header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .section-heading--numbered {
    grid-template-columns: minmax(0, 1fr);
  }

  .skill-ledger > div,
  .experience-list > li {
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 2.2fr);
    gap: var(--space-xl);
  }

  .case-study-media__group--pair .case-study-media__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 40rem) and (max-width: 59.999rem) {
  .dev-hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(10rem, 0.65fr);
  }

  .dev-hero h1 {
    font-size: clamp(2.5rem, 7vw, 3.5rem);
  }
}

@media (min-width: 60rem) {
  .dev-hero h1 {
    font-size: clamp(3.5rem, 6.25vw, 5rem);
  }

  .hub-intro,
  .projects-intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }

  .hub-intro h1,
  .projects-intro h1 {
    grid-column: 4 / 12;
  }

  .hub-intro__lede,
  .projects-intro p {
    grid-column: 7 / 12;
  }

  .dev-editorial {
    grid-template-columns: minmax(10rem, 2fr) minmax(0, 10fr);
    gap: var(--space-xl);
  }

  .dev-section-nav {
    position: sticky;
    inset-block-start: 0;
    display: grid;
    align-self: start;
    gap: 0;
    padding-block: var(--space-2xl);
    border-block-end: 0;
    border-inline-end: var(--rule-hairline) solid var(--color-rule);
  }

  .dev-section-nav__label {
    margin-block-end: var(--space-md);
  }

  .dev-section-nav a {
    inline-size: fit-content;
  }

  .dev-editorial__body {
    padding-inline-start: var(--space-xl);
  }

  .project-row {
    min-block-size: 8.5rem;
    grid-template-columns:
      minmax(6.5rem, 1.25fr)
      minmax(0, 5.5fr)
      minmax(9.5rem, 1.8fr)
      minmax(7rem, 1.4fr)
      auto;
    gap: var(--space-lg);
    align-items: center;
  }

  .project-row__thumbnail,
  .project-row__period,
  .project-row__main,
  .project-row__status,
  .project-row::after {
    grid-row: 1;
  }

  .project-row__period {
    grid-column: 3;
  }

  .project-row__main {
    grid-column: 2;
  }

  .project-row__main > span {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  .project-row__status {
    grid-column: 4;
  }

  .project-row::after {
    grid-column: 5;
    justify-self: end;
  }

  .project-row__thumbnail {
    inline-size: min(100%, 7.5rem);
    block-size: auto;
    aspect-ratio: 4 / 3;
    grid-column: 1;
  }

  .dev-contact {
    padding-block-end: var(--space-4xl);
  }

  .case-study {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--space-lg);
  }

  .case-study__header {
    grid-column: 1 / 11;
  }

  .case-study__cover {
    grid-column: 1 / 11;
  }

  .case-study__facts {
    grid-column: 1 / 4;
    margin-block: 0;
  }

  .case-study__body {
    grid-column: 5 / 11;
  }

  .case-study__media {
    grid-column: 1 / -1;
  }

  .case-study__media > h2 {
    max-inline-size: var(--measure);
    margin-inline-start: calc((100% - (var(--space-lg) * 11)) / 12 * 4 + (var(--space-lg) * 4));
  }
}

@media (pointer: coarse) {
  .route-header__wordmark,
  .contact-index a,
  .section-heading a,
  .dev-contact a,
  .back-link,
  .case-study__links a,
  .project-empty a,
  .project-filter button,
  .project-filter__option span,
  .project-filter__clear {
    min-block-size: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: var(--dur-micro) !important;
  }

  .project-filter,
  .project-filter__disclosure > .project-filter__content,
  .project-filter__disclosure > summary::after {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .dev-portrait__frame,
  .dev-about__note,
  .dev-contact {
    border: var(--rule-strong) solid currentColor;
  }
}