@media (max-width: 860px) {
  .site-header {
    align-items: flex-start;
  }

  .nav-toggle {
    display: block;
    flex: 0 0 auto;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 20px 20px;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-line);
  }

  .nav-group {
    display: grid;
  }

  .nav-dropdown {
    position: static;
    display: grid;
    min-width: 0;
    margin: 4px 0 0 14px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 1px solid var(--color-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-header.nav-open .site-nav {
    display: flex;
  }

  .site-nav a,
  .nav-group > a {
    border-radius: 8px;
    padding: 12px 14px;
  }

  .hero,
  .split-section,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding: 56px 0 40px;
  }

  .hero-visual {
    min-height: 420px;
  }

  .feature-grid,
  .shop-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .work-cluster {
    display: grid;
    grid-template-columns: 1fr 0.42fr 1fr;
    gap: 14px;
    padding: 18px 0 42px;
  }

  .charcoal-cluster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .charcoal-cluster .cluster-image img {
    height: clamp(230px, 36vw, 430px);
  }

  .screenprint-cluster {
    display: block;
    padding: 24px 0 42px;
  }

  .screenprint-cluster .cluster-image img {
    height: clamp(430px, 70vh, 720px);
  }

  .cluster-copy h3 {
    font-size: 1.8rem;
  }

  .cluster-copy p:not(.eyebrow) {
    font-size: 0.9rem;
  }

  .cluster-copy {
    padding: 0;
  }

  .work-section-heading,
  .section-heading {
    display: block;
  }

  .image-placeholder {
    min-height: 360px;
  }
}

@media (max-width: 560px) {
  .hero,
  .page-hero,
  .work-hero,
  .section,
  .split-section,
  .work-section,
  .work-note,
  .shop-grid,
  .contact-layout {
    width: min(100% - 28px, var(--max-width));
  }

  .hero h1,
  .page-hero h1 {
    font-size: 2.65rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .hero-visual {
    min-height: 330px;
  }

  .panel-large {
    inset: 14px 24px 0 0;
    border-radius: 18px 18px 82px 18px;
  }

  .visual-label {
    left: 18px;
    bottom: 22px;
  }

  .page-hero {
    padding-top: 64px;
  }

  .cover-overlay {
    padding: 22px;
  }

  .cover-nav {
    top: 22px;
    right: 22px;
    gap: 12px;
  }

  .cover-brand {
    max-width: 78vw;
    font-size: 3rem;
  }

  .work-hero {
    padding-top: 64px;
  }

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

  .portfolio-item,
  .portfolio-item:nth-child(odd),
  .portfolio-item:nth-child(even),
  .portfolio-item:nth-child(4n),
  .portfolio-item:nth-child(5n) {
    grid-column: auto;
    transform: none;
  }

  .work-cluster {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .charcoal-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }

  .charcoal-cluster .cluster-image img {
    height: 62vw;
  }

  .charcoal-cluster figcaption {
    display: block;
  }

  .charcoal-cluster figcaption span:last-child {
    display: block;
    margin-top: 2px;
    text-align: left;
  }

  .screenprint-cluster {
    display: block;
  }

  .screenprint-cluster .cluster-image img {
    height: 72vh;
  }

  .cluster-copy,
  .screenprint-cluster .cluster-copy,
  .screenprint-cluster .cluster-image,
  .charcoal-cluster .cluster-image-a,
  .charcoal-cluster .cluster-image-b,
  .charcoal-cluster .cluster-image-c,
  .charcoal-cluster .cluster-image-d,
  .collage-cluster .cluster-copy,
  .collage-cluster .cluster-image-a,
  .collage-cluster .cluster-image-b,
  .collage-cluster .cluster-image-c,
  .collage-cluster .cluster-image-d,
  .collage-cluster .cluster-image-e,
  .collage-cluster .cluster-image-f,
  .collage-cluster .cluster-image-g,
  .collage-cluster .cluster-image-h {
    grid-column: auto;
    grid-row: auto;
    transform: none;
  }

  .portfolio-caption {
    display: block;
  }

  .portfolio-caption p {
    margin-top: 4px;
    text-align: left;
  }

  .contact-list li,
  .site-footer {
    flex-direction: column;
  }
}