/* ===========================================================================
   ashutoshdumbare.com — responsive layer
   Breakpoints: 1180 / 1024 / 900 (nav switch) / 760 / 600 / 420
   Layouts are recomposed at each step, not merely stacked.
   =========================================================================== */

/* --------------------------------------------------------- 1180 and below */
@media (max-width: 1180px) {
  .home-open__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 176px; gap: clamp(20px, 2.6vw, 40px); }
  .home-rail__vertical { display: none; }
  .home-intro__grid { grid-template-columns: 176px minmax(0, 1fr); }
  .lead-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .dossier-section__grid { grid-template-columns: 140px minmax(0, 1fr); }
}

/* --------------------------------------------------------- 1024 and below */
@media (max-width: 1024px) {
  :root { --masthead-h: 68px; }

  /* Home: the metadata rail slides under the headline, portrait keeps its column */
  .home-open__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
  .home-rail {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--rule-strong);
    padding-left: 0;
    padding-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px 32px;
  }

  .city-grid { grid-template-columns: minmax(0, 1fr); }
  .human-grid { grid-template-columns: minmax(0, 1fr); }
  .plate__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .lead-head__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 30px; }
  .lead-inset__grid { grid-template-columns: minmax(0, 1fr); }
  .lead-close__grid { grid-template-columns: minmax(0, 1fr); }
  .thane__grid { grid-template-columns: minmax(0, 1fr); }
  .citizen__grid { grid-template-columns: minmax(0, 1fr); }
  .significance__grid { grid-template-columns: minmax(0, 1fr); }
  .contact-head__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  /* Images that sat beside text now sit in a comfortable centred column */
  .thane__frame,
  .citizen__frame,
  .significance__frame,
  .lead-inset__frame,
  .lead-close__frame { max-width: 620px; margin-inline: auto; }
}

/* ----------------------------------------- 900 and below — navigation swap */
@media (max-width: 900px) {
  .nav--desktop { display: none; }
  .menu-toggle { display: inline-flex; }

  .home-open__grid { display: flex; flex-direction: column; gap: 26px; }
  .home-open__title-col { order: 1; }
  .home-rail { order: 2; margin: 0; padding-top: 22px; }
  .home-portrait { order: 3; padding: 22px 0 0 22px; max-width: 460px; width: 100%; }
  .home-portrait::before { width: 60%; height: 50%; }

  .home-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .home-intro__aside { position: static; }
  .home-intro__aside .rule-line { display: none; }

  .progression { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progression__item:nth-child(3n + 1) { border-left: 1px solid var(--rule); }
  .progression__item:nth-child(2n + 1) { border-left: 0; }

  .entry { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .entry__marker { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 22px; }
  .entry__place, .entry__ref { margin-top: 0; }

  .lead-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lead-sticky { position: static; border-bottom: 1px solid var(--rule); padding-bottom: 26px; }

  .dossier-head__grid { grid-template-columns: minmax(0, 1fr); }
  .dossier-section__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dossier-section__rail { position: static; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
  .dossier-section__label { margin-top: 0; }
  .dossier-section__label br { display: none; }

  .plate__grid { grid-template-columns: minmax(0, 1fr); }
  .plate__frame { max-width: 640px; margin-inline: auto; }
}

/* --------------------------------------------------------- 760 and below */
@media (max-width: 760px) {
  :root { --section-y: clamp(56px, 12vw, 88px); }

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

  .milestone { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 22px; }
  .milestone__note { margin-top: 4px; }

  .ledger__row { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .ledger__desc { grid-column: 2 / -1; }

  .path { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; }
  .path:hover { padding-left: 0; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-base { flex-direction: column; align-items: flex-start; gap: 10px; }

  .medal__inner { padding: clamp(24px, 6vw, 40px) clamp(18px, 5vw, 34px); }
  .medal__record { text-align: left; }
}

/* --------------------------------------------------------- 600 and below */
@media (max-width: 600px) {
  .progression { grid-template-columns: minmax(0, 1fr); }
  .progression__item { border-left: 0 !important; padding-inline: 0; }

  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .form__actions { flex-direction: column; align-items: stretch; }
  .form__actions .btn { width: 100%; }
  .form__hint { max-width: none; }

  .quadrant { padding-inline: clamp(18px, 5vw, 26px); }
  .thane__layer { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .thane__layer dd { padding-bottom: 2px; }

  .human-list__item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .citizen__row { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
  .card__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  .home-strip__inner { gap: 8px 18px; }
  .archive-head__meta { gap: 8px 18px; }
  .map-head__coords { gap: 8px 16px; }
  .dossier-head__bar { gap: 8px 16px; }

  .social__item { width: 38px; height: 38px; }
}

/* --------------------------------------------------------- 420 and below */
@media (max-width: 420px) {
  :root { --gutter: 18px; }

  .home-title__line { font-size: clamp(2.1rem, 11.4vw, 2.75rem); }
  .home-portrait { padding: 16px 0 0 16px; }
  .home-rail { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .entry__year { font-size: clamp(2.5rem, 15vw, 3.4rem); }
  .path { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .path__num { grid-row: 1; }
  .path__title { grid-column: 1 / -1; }

  .wordmark__name { font-size: 1.06rem; }
  .wordmark__meta { font-size: 0.5rem; letter-spacing: 0.18em; }
  .menu-toggle { font-size: 0.62rem; letter-spacing: 0.12em; padding-left: 8px; }
  .menu-panel__link { font-size: clamp(1.5rem, 9vw, 2rem); padding-block: 15px; }

  .figure__caption { font-size: 0.64rem; }
  .btn { padding: 14px 22px; font-size: 0.68rem; }
}

/* ------------------------------------------- pointer-coarse touch comfort */
@media (hover: none) {
  .path:hover { padding-left: 0; background: none; }
  .progression__item:hover .progression__index { color: var(--warm-grey); }
}

/* ---------------------------------------------------------------- printing */
@media print {
  .masthead, .menu-panel, .skip-link, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Journey — the flipped plate stacks image-first like its sibling */
@media (max-width: 900px) {
  .plate__grid--flip { grid-template-columns: minmax(0, 1fr); }
  .plate__grid--flip .plate__text { order: 2; }
  .plate__grid--flip .plate__frame { order: 1; }
}