/* ============================================================
   dilipshanghvi.in — responsive.css
   Intentional compositions per breakpoint (not shrunk desktop)
   Breakpoints: 1180 · 1024 · 880 · 700 · 560 · 400
   ============================================================ */

/* ---------- Very large displays: let the shell breathe ---------- */
@media (min-width: 1720px) {
  :root { --shell: 1420px; }
}

/* ---------- 1180px — collapse inline nav into the index panel ---------- */
@media (max-width: 1180px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- 1024px — two-column compositions relax ---------- */
@media (max-width: 1024px) {
  html { scroll-padding-top: 84px; }

  .opening__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; }
  .opening__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .masthead__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
  .masthead__lede { max-width: 62ch; }

  .inst-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }

  .chapter { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .chapter__meta { position: static; }

  .inst-block,
  .legacy-strand,
  .archival { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  .archival__date { font-size: clamp(2.4rem, 8vw, 3.4rem); }

  .principle { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .principle__name { max-width: 24ch; }

  .movement { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .movement__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
  }
  .movement__no { margin-bottom: 0; }
  .movement__kicker { margin-top: 0; }

  .bio-body { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bio-rail { position: static; }
  .bio-rail ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    column-gap: 20px;
  }

  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-mark { grid-column: 1 / -1; }

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

  .page-nav { grid-template-columns: minmax(0, 1fr); }
  .page-nav a + a { border-left: 0; padding-left: 0; }
}

/* ---------- 880px — single-column editorial ---------- */
@media (max-width: 880px) {
  .opening { padding-block: 30px 26px; }
  .opening__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .opening__name { font-size: clamp(3.1rem, 15vw, 5.4rem); }
  .opening__name span:last-child { padding-left: 0; }
  .opening__portrait { max-width: 420px; }

  .split,
  .split--reverse { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .split--reverse .split__media { order: 0; }

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

  .region { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .region__n { padding-top: 0; }

  .award { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .award__year { padding-top: 0; }

  .lead-statement p { max-width: 100%; }

  /* Milestones: horizontal archive becomes a stacked chronology */
  .archive__track { display: block; overflow-x: visible; }
  .entry {
    flex-basis: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-inline: 0;
  }
  .entry:last-child { border-bottom: 0; }
  .archive__ctrls { display: none; }
  .archive__hint .swipe { display: none; }
}

/* ---------- 700px — compact typography and denser rhythm ---------- */
@media (max-width: 700px) {
  :root { --band: clamp(44px, 11vw, 64px); }

  .site-header__inner { min-height: 62px; }
  .site-header.is-scrolled .site-header__inner { min-height: 56px; }
  .wordmark__name { font-size: 1.06rem; }
  .wordmark__meta { font-size: 8.5px; letter-spacing: 0.12em; }

  .opening__meta { font-size: 9.5px; gap: 6px 14px; }
  .opening__index { grid-template-columns: minmax(0, 1fr); }
  .opening__portrait { max-width: 100%; }

  .index-list a { grid-template-columns: 40px minmax(0, 1fr); gap: 3px 12px; }
  .index-list .d { font-size: 12.5px; }

  .datagrid { grid-template-columns: minmax(0, 1fr); }
  .datum { padding-right: 0; }

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

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

  .prose .opens::first-letter { font-size: 3.3em; }

  .archive__hint { flex-wrap: wrap; }
  .archive__ctrls { margin-left: 0; }
}

/* ---------- 560px — phone layout ---------- */
@media (max-width: 560px) {
  body { font-size: 15.5px; }

  /* The wordmark subtitle is dropped on phones so the header
     never competes with the Index control for horizontal space. */
  .wordmark__meta { display: none; }
  .site-header__inner { gap: 14px; }
  .nav-toggle { padding: 8px 12px; letter-spacing: 0.12em; }
  .index-panel__top { gap: 14px; }

  .masthead__facts { grid-template-columns: minmax(0, 1fr); }
  .masthead__facts > div { padding-right: 0; }

  .opening__facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .opening__facts dd { text-align: left; }

  .pullquote { padding-left: 16px; }

  .entry { flex-basis: min(88vw, 320px); padding: 22px 18px; }

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


  .btn { width: 100%; justify-content: center; }
  .btn-row { display: grid; gap: 10px; }
}

/* ---------- 400px — very small phones ---------- */
@media (max-width: 400px) {
  :root { --gutter: 18px; }
  .opening__name { font-size: clamp(2.7rem, 16vw, 3.4rem); }
  .masthead__title { font-size: clamp(2.1rem, 12vw, 2.7rem); }
  .legacy-open__title { font-size: clamp(2.3rem, 14vw, 3rem); }
  .archival__date { font-size: 2.2rem; }
  .entry__year { font-size: 2.1rem; }
}

/* ---------- Landscape phones: keep the gate usable ---------- */
@media (max-height: 520px) {
  .gate { min-height: auto; padding-block: 44px; }
}

/* ---------- 561–880px — tablet portrait: pair the portrait with its fact list ---------- */
@media (min-width: 561px) and (max-width: 880px) {
  .opening__portrait {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    max-width: none;
  }
  .opening__facts { margin-top: 0; }
  .opening__stmt { max-width: 62ch; }

  /* Two-up figure pairs stay side by side on tablets */
  .bio-figure--side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}