/* ==========================================================================
   khudirambose.com — responsive re-compositions
   Layouts are rebuilt per breakpoint, not merely scaled down.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LARGE DESKTOP — let the archive breathe
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --shell: min(100% - 4rem, 1340px); --wide: min(100% - 4rem, 1560px); }
  .hero { padding-top: calc(var(--nav-h) + 5rem); }
}

/* --------------------------------------------------------------------------
   LAPTOP / SMALL DESKTOP
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero__rail { left: -2rem; letter-spacing: 0.3em; }
  .dossier__row { grid-template-columns: 9rem minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brandcol { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   TABLET / iPAD — navigation collapses, editorial columns stack
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  :root { --nav-h: 74px; --shell: min(100% - 2rem, 1240px); --wide: min(100% - 2rem, 1480px); }

  .nav { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Hero becomes a stacked title-then-plate composition */
  .hero { padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero__figure { order: 2; }
  .hero__figure .plate { max-width: 360px; margin-inline: 0; }
  .hero__rail {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    display: block;
    margin-top: var(--sp-3);
    letter-spacing: 0.24em;
  }
  .hero__rail::before {
    left: 0; bottom: auto; top: -0.9rem;
    width: 46px; height: 1px;
  }
  .hero__descriptor { max-width: 44ch; }

  /* Sticky asides release */
  .intro-grid,
  .feature,
  .feature--flip,
  .contact-grid { grid-template-columns: 1fr; }
  .intro-grid__aside,
  .feature__media { position: static; top: auto; }
  .feature--flip .feature__media { order: 0; }
  .feature__media .plate { max-width: 420px; }

  .chapter { grid-template-columns: 3.6rem minmax(0, 1fr) auto; }

  .route__stop { grid-template-columns: 1fr; gap: var(--sp-2); }
  .route__when { color: var(--saffron); }

  .collection__head { border-bottom-width: 1px; }
}

/* --------------------------------------------------------------------------
   LARGE PHONE / SMALL TABLET
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --shell: min(100% - 1.75rem, 1240px);
    --narrow: min(100% - 1.75rem, 760px);
    --wide: min(100% - 1.75rem, 1480px);
    --sp-6: 3.4rem;
    --sp-7: 4.2rem;
    --sp-8: 5rem;
  }

  body { line-height: 1.68; }

  .section { padding-block: var(--sp-6); }
  .section--tall { padding-block: var(--sp-7); }

  .hero__title { font-size: clamp(2.5rem, 12.5vw, 3.6rem); }
  .hero__meta { gap: var(--sp-2) var(--sp-4); }

  /* Chapter index becomes a stacked list — number above title */
  .chapter {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "num arrow" "title title";
    row-gap: 0.6rem;
    padding-block: 1.35rem;
  }
  .chapter__num   { grid-area: num; }
  .chapter__arrow { grid-area: arrow; align-self: center; }
  .chapter__title { grid-area: title; font-size: var(--step-2); }
  .chapter:hover { padding-left: 0.5rem; }

  /* Timeline tightens */
  .timeline__item { padding-left: 2.1rem; padding-bottom: var(--sp-4); }
  .timeline__head { font-size: var(--step-1); }

  /* Dossier rows stack label above value */
  .dossier__row { grid-template-columns: 1fr; gap: 0.4rem; }

  /* Record entries lose the outdent tick spacing */
  .record { padding-left: 1.15rem; }
  .record__entry::before { left: -1.15rem; width: 0.6rem; }

  /* Gallery: single column, taller mounts read better on phones */
  .objects { grid-template-columns: 1fr; gap: var(--sp-5); }
  .object__mount { aspect-ratio: 3 / 4; }
  .object__zoom { opacity: 1; transform: none; }

  /* Lightbox chrome compresses */
  .lightbox__cap p { font-size: var(--step--2); }
  .lb-btn { width: 46px; height: 46px; }

  .place { grid-template-columns: 1fr; gap: 0.35rem; }
  .place__where { white-space: normal; }

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

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer-nav { columns: 2; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .quote { padding-left: var(--sp-3); margin-block: var(--sp-4); }
  .prose--opened > p:first-of-type::first-letter { font-size: 3.2em; }
}

/* --------------------------------------------------------------------------
   SMALL PHONE
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  :root {
    --shell: min(100% - 1.4rem, 1240px);
    --narrow: min(100% - 1.4rem, 760px);
    --wide: min(100% - 1.4rem, 1480px);
    --nav-h: 68px;
  }
  .wordmark__sub { letter-spacing: 0.2em; font-size: 0.55rem; }
  .hero__title { font-size: clamp(2.2rem, 13vw, 3rem); }
  .facts { grid-template-columns: 1fr; }
  .footer-nav { columns: 1; }
  .mobile-nav__link { font-size: var(--step-1); }
  .contact-line a { font-size: var(--step-1); }
  .plate { padding: 0.75rem; }
  .plate__mount { padding: 0.6rem; }
  .collection__head { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   SHORT LANDSCAPE PHONES — keep the drawer usable
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .mobile-nav { padding-top: calc(var(--nav-h) + 1rem); }
  .mobile-nav__link { padding-block: 0.7rem; font-size: var(--step-1); }
  .lightbox__cap { padding-block: 0.75rem 1rem; }
  .lightbox__cap p { display: none; }
}

/* --------------------------------------------------------------------------
   POINTER-COARSE — remove hover-only affordances
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .chapter:hover { padding-left: 0; }
  .chapter:hover::before { opacity: 0; }
  .plate--zoom:hover img { transform: none; }
  .object__btn:hover .object__mount img { transform: none; }
  .link:hover { background-size: 100% 1px; }
}

/* --------------------------------------------------------------------------
   PRINT — the archive as a paper document
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .mobile-nav, .progress, .scroll-cue,
  .lightbox, .nav-toggle, .socials, .form { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .section { padding-block: 1.5rem; }
  a { text-decoration: underline; }
}