@media (max-width: 900px) {
  :root {
    --page-gutter: 6vw;
  }

  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(225px, 0.7fr);
    gap: 5vw;
  }

  .hero h1 {
    font-size: clamp(60px, 8.4vw, 82px);
  }

  .hero-bottom {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .section-line,
  .contact {
    grid-template-columns: minmax(120px, 0.48fr) minmax(0, 1.52fr);
    gap: 5vw;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 68px;
  }

  :root {
    --page-gutter: 23px;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    min-height: 64px;
  }

  .header-note {
    display: none;
  }

  .menu-toggle {
    display: grid;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 12px 9px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 23px;
    height: 1px;
    background: var(--ink);
    transition: transform 180ms ease;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }

  .site-nav {
    position: absolute;
    top: 63px;
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--page-gutter) 18px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }

  .site-nav.is-open {
    display: flex;
    flex-direction: column;
  }

  .site-nav a {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
  }

  .site-nav a::after {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: auto;
    padding-top: 68px;
    padding-bottom: 96px;
  }

  .hero-copy {
    padding: 0;
  }

  .hero .eyebrow {
    font-size: 9px;
  }

  .hero h1 {
    margin: 27px 0 24px -3px;
    font-size: clamp(52px, 13vw, 78px);
  }

  .hero-bottom {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .hero-intro {
    max-width: 330px;
    font-size: 14px;
  }

  .hero-roles {
    gap: 6px 12px;
    font-size: 10px;
  }

  .hero-roles span + span::before {
    margin-right: 12px;
  }

  .portrait-image {
    max-height: 450px;
    aspect-ratio: 1.02;
  }

  .scroll-cue {
    bottom: 30px;
  }

  .section-line,
  .contact {
    grid-template-columns: 1fr;
    gap: 31px;
  }

  .section-label {
    padding-top: 0;
  }

  .about,
  .projects,
  .design,
  .skills,
  .credentials {
    padding-top: 62px;
    padding-bottom: 72px;
  }

  .section-heading {
    font-size: clamp(41px, 10vw, 58px);
  }

  .about-columns,
  .education-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-columns {
    margin-top: 0;
  }

  .education-row {
    gap: 22px;
    margin-top: 40px;
  }

  .section-title-row {
    align-items: start;
    flex-direction: column;
    gap: 13px;
  }

  .section-aside {
    max-width: 310px;
    margin: 0;
  }

  .project-list {
    margin-top: 29px;
  }

  .project-entry {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 19px 0 21px;
  }

  .project-heading {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }

  .project-entry h3 {
    font-size: 22px;
  }

  .project-contribution p {
    font-size: 11px;
  }

  .project-demo {
    font-size: 8px;
  }

  .project-visuals {
    gap: 4px;
  }

  .project-artwork figcaption {
    gap: 3px;
  }

  .project-artwork .artwork-kind {
    font-size: 6px;
  }

  .design-collaboration {
    grid-template-columns: 1fr;
    gap: 19px;
    margin-top: 28px;
    padding-bottom: 28px;
  }

  .personal-logo {
    grid-template-columns: 1fr;
    gap: 19px;
    margin-top: 28px;
    padding-bottom: 28px;
  }

  .personal-logo-artwork img {
    max-width: 380px;
  }

  .design-collaboration-artwork .artwork-trigger {
    aspect-ratio: 4 / 3;
  }

  .design-collaboration-copy h3 {
    font-size: 28px;
  }

  .design-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 13px;
    margin-top: 28px;
  }

  .artwork-wide {
    grid-column: span 2;
  }

  .artwork-item figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding-top: 8px;
  }

  .artwork-title {
    font-size: 10px;
  }

  .artwork-kind {
    font-size: 7px;
    text-align: left;
  }

  .design-credit {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 38px;
  }

  .artwork-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: 13px;
  }

  .artwork-preview-image {
    max-height: calc(100dvh - 110px);
  }

  .experience-list {
    margin-top: 44px;
  }

  .experience-row {
    gap: 5px 12px;
  }

  .experience-row h3 {
    font-size: 13px;
  }

  .experience-organization,
  .experience-dates,
  .experience-description {
    font-size: 10px;
  }

  .certificate-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 14px;
    padding: 14px 0;
  }

  .certificate-row a,
  .certificate-row .award-label {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .certificate-row h3 {
    font-size: 11px;
  }

  .contact-links {
    justify-content: flex-start;
  }

  .contact-links a {
    font-size: 10px;
  }

  .skills-list {
    margin-top: 25px;
  }

  .skill-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }

  .skill-row p {
    font-size: 13px;
  }

  .contact {
    gap: 31px;
    padding-top: 62px;
    padding-bottom: 70px;
  }

  .contact-main h2 {
    font-size: clamp(55px, 13vw, 78px);
  }

  .contact-bottom {
    align-items: start;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
  }

  .site-footer {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
    min-height: 88px;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .site-footer > span:nth-of-type(1) {
    display: none;
  }

  .site-footer > span:nth-of-type(2) {
    text-align: left;
  }

  .back-top {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}