/* ==========================================================================
   dwetapatel.com — responsive.css
   Loaded AFTER style.css.

   Layouts are recomposed at each step, not merely shrunk. Photographs are
   capped to their intrinsic pixel widths and centred rather than stretched,
   so no face is ever cropped and no image is ever upscaled into softness.
   Verified at 320 / 375 / 390 / 414 / 480 / 768 / 820 / 1024 / 1280 / 1440 /
   1920 px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LARGE DESKTOP — 1680px and up
   -------------------------------------------------------------------------- */
@media (min-width: 1680px) {
  :root { --shell: 1500px; }
}

/* --------------------------------------------------------------------------
   2. DESKTOP — up to 1280px
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .hero__grid { gap: clamp(1.8rem, 3.4vw, 3.2rem); }
  .footer-grid { gap: clamp(1.8rem, 3.2vw, 3rem); }
}

/* --------------------------------------------------------------------------
   3. SMALL LAPTOP / LARGE TABLET — up to 1024px
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --nav-h: 62px; }

  /* Two-column essay reading collapses to a single measured column */
  .essay__cols { grid-template-columns: 1fr; }

  .principle { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .principle__body p { max-width: var(--measure); }

  .split, .split--figure-left, .split--figure-right {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
  }
  /* Keep the photograph above its text when a split collapses */
  .split--figure-right .figure { order: -1; }
  .split .figure { justify-self: start; }

  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   4. TABLET — up to 900px  (nav collapses here)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .js .nav-toggle { display: inline-flex; }

  .site-nav__inner { flex-wrap: wrap; row-gap: 0; }

  .js .nav-list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    order: 3;
    border-top: 2px solid var(--rule);
    padding-block: .5rem 1rem;
    max-height: calc(100svh - var(--nav-h) - 8px);
    max-height: calc(100dvh - var(--nav-h) - 8px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .js .nav-list.is-open { display: flex; }

  .nav-link {
    padding: .95rem .2rem;
    font-size: .8rem;
    letter-spacing: .14em;
    border-bottom: 1px solid var(--rule);
  }
  .nav-list li:last-child .nav-link { border-bottom: 0; }
  .nav-link::after { bottom: .6rem; right: auto; width: 26px; }

  /* Hero recomposes: type first, photograph beneath at natural size */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); }
  .hero__figure { justify-self: start; max-width: 340px; }
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

  .sec-head { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .sec-head__index { padding-top: 0; }

  .timeline__item { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .archive__item { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .archive__reading { display: inline; margin-top: 0; margin-left: 1em; }

  .record__row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .record__key { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   5. LARGE PHONE / SMALL TABLET — up to 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --measure: 100%;
    --band-y: clamp(3rem, 1.8rem + 5vw, 4.6rem);
  }

  .pathway {
    grid-template-columns: minmax(0, 2.6rem) minmax(0, 1fr);
    gap: .5rem 1rem;
  }
  .pathway__go { display: none; }
  .pathway:hover { padding-inline-start: .4rem; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid > *:first-child { grid-column: auto; }

  .footer-base { flex-direction: column; align-items: flex-start; gap: .8rem; }

  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager__link--next { text-align: left; }

  .interlude__text { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   6. PHONE — up to 560px
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  :root { --nav-h: 58px; }

  .hero__facts { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .hero__eyebrow::after { display: none; }

  /* Photographs centre themselves and never exceed the viewport */
  .figure--portrait,
  .figure--portrait-lg,
  .figure--landscape,
  .hero__figure { max-width: 100%; margin-inline: auto; }

  .arch { padding: 16px 12px 12px; }
  .arch::after { inset: 7px; }

  .figure__caption { max-width: 100%; }

  .btn { width: 100%; justify-content: center; }
  .btn + .btn { margin-top: .75rem; }

  .social { gap: .5rem; }
  .social__link { width: 42px; height: 42px; }
}

/* --------------------------------------------------------------------------
   7. NARROW PHONE — up to 400px  (iPhone SE / 320-390 class)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  :root {
    --gut: 1.05rem;
    --t-display: clamp(2.1rem, 1.2rem + 5.4vw, 2.9rem);
    --t-h1: clamp(1.75rem, 1.2rem + 3vw, 2.15rem);
    --t-h2: clamp(1.4rem, 1.1rem + 1.6vw, 1.62rem);
  }

  .brand { font-size: .98rem; gap: .35em; }
  .brand__mark { letter-spacing: .14em; }

  .nav-toggle { padding: .55em .7em; letter-spacing: .1em; }

  .interlude__text { font-size: 1.32rem; }
  .interlude__mark { font-size: 2.3rem; }

  .principle__term { font-size: 1.42rem; }
  .contact-line__val { font-size: 1.08rem; }
  .footer-brand { font-size: 1.4rem; }

  .social__link { width: 40px; height: 40px; }
  .social__link svg { width: 16px; height: 16px; }
}

/* --------------------------------------------------------------------------
   8. VERY NARROW — 320px safety net
   -------------------------------------------------------------------------- */
@media (max-width: 340px) {
  :root { --gut: .9rem; }
  .nav-toggle span:not(.nav-toggle__bars) { display: none; }
  .social__link { width: 38px; height: 38px; }
}

/* --------------------------------------------------------------------------
   9. iOS SAFARI — safe areas and dynamic viewport
   -------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  .shell,
  .site-nav__inner {
    padding-left: max(var(--gut), env(safe-area-inset-left));
    padding-right: max(var(--gut), env(safe-area-inset-right));
  }
  .site-footer { padding-bottom: max(clamp(1.8rem, 3vw, 2.6rem), env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   10. LANDSCAPE PHONE — keep tall blocks from over-padding
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --band-y: 2.6rem; }
  .hero { padding-block: 2.6rem; }
  .masthead { padding-block: 2.2rem 1.9rem; }
}

/* --------------------------------------------------------------------------
   11. HOVER-CAPABLE POINTERS ONLY
   Prevents sticky :hover states on touch devices.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .pathway:hover { padding-inline-start: 0; color: inherit; }
  .arrow-link:hover { gap: .55em; }
  .btn:hover { background: transparent; color: var(--text); }
  .btn--rose:hover { background: var(--rose); color: #fff; }
  .band--ink .btn:hover { background: transparent; color: var(--on-ink); }
}

/* --------------------------------------------------------------------------
   12. FORCED COLORS / HIGH CONTRAST
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .arch::before, .arch::after { display: none; }
  .btn, .social__link, .nav-toggle { border-color: currentColor; }
  .nav-link[aria-current="page"]::after { background: currentColor; }
}

/* --------------------------------------------------------------------------
   13. NO-JAVASCRIPT NAVIGATION FALLBACK
   The collapsed mobile menu needs a script to open it, so the collapse is
   scoped to .js (set in <head>). Without JavaScript the full list simply
   wraps onto its own row and stays usable: navigation never disappears.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  html:not(.js) .nav-list {
    width: 100%;
    order: 3;
    flex-wrap: wrap;
    gap: .1rem 1.1rem;
    border-top: 2px solid var(--rule);
    padding-block: .35rem .8rem;
  }
  html:not(.js) .nav-link { padding: .6rem .1rem; }
  html:not(.js) .nav-link::after { bottom: .3rem; }
}