/* RESPONSIVE: only what CHANGES at 1000px and below. Load this file last. */

@media (max-width: 1000px) {

  :root {
    --font-size: 7pt;
    --content-left: calc(var(--margin) * 6.5);
    --menu-top: calc(var(--margin) * 5);
    --filter-indent: calc(var(--margin) * 5.15);
  }

  /* MENU */

  .menu-btn {
    left: 0;
    padding: 4px;          /* a round button around the plus */
  }

  .menu-btn::after {       /* larger invisible tap area */
    content: "";
    position: absolute;
    inset: -10px;
  }

  .menu-icon {
    display: block;
  }

  .menu-label {            /* the word is hidden, but screen readers still read it */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .timestamp {
    right: var(--gutter);
  }

  /* PAGE SYSTEM */

  .interchange {
    position: absolute;
    bottom: 0;
  }

  /* HIGHLIGHT */

  .high-cat {
    margin-inline: 0;
  }

  .high-project-link {
    left: 0;
    right: auto;
    top: calc(100% - (var(--margin) * 5));
    width: fit-content;
    height: fit-content;
    margin-left: var(--gutter);
  }

  .highlight img {
    width: 100%;
  }

  /* WORK */

  .work-cat {
    height: calc(100vh - (var(--margin) * 2));
    height: calc(100dvh - (var(--margin) * 2));
    margin-inline: calc(var(--margin) / 2);   /* half the side margin around the image grid */
  }

  .heading-grid {
    padding-right: calc(var(--margin) / 2);   /* keeps the view toggle where it was */
  }

  .filter-menu.active {
    width: 35vw;
  }

  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--margin) / 2);   /* half the space between images */
  }

  .project-grid.text-view {
    gap: var(--margin);   /* the text list keeps its row spacing */
  }

  .project-grid.text-view .project {
    margin-inline: calc(var(--margin) * 2.5);   /* 2.5rem here + 0.5rem from the work area = 3rem from the screen on both sides */
  }

  .project-grid.text-view .project::before {
    display: none;   /* no hover arrow on phone */
  }

  .project-date,
  .project-grid.text-view .project-medium {
    display: none;   /* phone text list: title only */
  }

  /* ABOUT */

  .about-desc {
    width: calc(100% - (var(--gutter) * 2));
  }

  .desc-box {
    width: fit-content;
  }
}