/* ==========================================================================
   responsive.css — narrow-viewport behaviour

   NOTE: this is the one place the replica intentionally departs from the
   original artifact. The original keeps its three columns at every width and
   scrolls sideways once they no longer fit. The desktop rendering here is
   unchanged above the first breakpoint;
   below the breakpoints the columns simply stack instead of overflowing.
   Delete this file (and its <link> in index.html) to get the original's
   sideways-scrolling behaviour back.
   ========================================================================== */

/* Tablet — the intro moves above two remaining columns. The breakpoint sits
   at 1240px because below that the three-column measure gets too narrow to
   hold a readable line. */
@media (max-width: 1240px) {
  :root {
    --container-gutter: 40px;
    --grid-gap: 56px;
  }

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

  .intro {
    grid-column: 1 / -1;
    max-width: 640px;
  }
}

/* Phone and small tablet — a single column, meta above body. Below ~860px
   two columns leave the entry body too narrow to read. */
@media (max-width: 860px) {
  :root {
    --container-gutter: 32px;
    --grid-gap: 48px;
    --space-page-top: 56px;
    --contact-padding-inline: 24px;
    --contact-column-gap: 40px;
  }

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

  .entry {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .contact__list {
    flex-direction: column;
    align-items: center;
  }
}

/* Phone — the gutter tightens further so the measure keeps its length. */
@media (max-width: 520px) {
  :root {
    --container-gutter: 24px;
  }
}

/* --------------------------------------------------------------------------
   Print — the page doubles as a one-sheet CV.
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --space-page-top: 0;
    --space-page-bottom: 0;
    --container-gutter: 0;
  }

  .skip-link {
    display: none;
  }

  .contact {
    background: none;
    color: var(--color-ink);
    border-top: 1px solid var(--color-rule);
  }

  .contact__label {
    color: var(--color-meta);
  }

  .contact__value {
    color: var(--color-ink);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — the only transitions here are link colour fades.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}