/* ==========================================================================
   pavanpodar.com — responsive layer
   Layouts are recomposed at each breakpoint, not merely shrunk.
   Tested at 320 / 375 / 390 / 414 / 480 / 768 / 820 / 1024 / 1280 / 1440 / 1920
   ========================================================================== */

/* --------------------------------------------------------------------------
   LARGE DESKTOP — 1600px and up
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --gutter: 5.5rem; }
  .thread { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.05fr) 2.5rem; }
}

/* --------------------------------------------------------------------------
   BELOW 1180px — nav becomes a drawer
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 0;
    top: var(--header-h, 68px);
    display: block;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: clamp(1rem, 4vw, 2rem) var(--gutter) 3rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
    z-index: 99;
  }
  .nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav__link {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--line-soft);
    width: 100%;
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] {
    color: var(--clay-deep);
    border-bottom-color: var(--clay);
  }
  .nav__num { font-size: 0.625rem; margin-right: 0; min-width: 1.75rem; }

  body.nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   TABLET LANDSCAPE / SMALL DESKTOP — up to 1024px
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ledger {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .ledger__rail { position: static; }

  .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__brand { grid-column: 1 / -1; }

  .thread { grid-template-columns: 3.25rem minmax(0, 1fr) 1.75rem; }
  .thread__desc { grid-column: 2 / 3; padding-top: 0.55rem; }
  .thread__arrow { grid-column: 3 / 4; grid-row: 1 / 2; }
}

/* --------------------------------------------------------------------------
   TABLET — up to 900px
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .opener__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .opener__meta { padding-top: 0; }

  .split,
  .split--wide-left,
  .split--wide-right {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .essay__head { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }

  .ledger-row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .ledger-row__body { padding-top: 0.35rem; }

  /* Plates centre themselves once stacked */
  .plate { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   SMALL TABLET / LARGE PHONE — up to 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --shelf: clamp(2.75rem, 9vw, 4rem);
    --measure: 100%;
  }

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

  .timeline .tl-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }
  .tl-entry__year {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
  }
  .tl-entry__year span { margin-top: 0; }

  .deflist > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }

  .metarow { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }

  .foot__top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .foot__bottom { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* --------------------------------------------------------------------------
   PHONE — up to 620px
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  :root {
    --gutter: 1.25rem;
    --step-meta: 0.65rem;
  }

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

  .wordmark__tag { display: none; }

  .opener__index { flex-direction: column; align-items: flex-start; gap: 0.4rem; }

  .thread {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.4rem 0.75rem;
  }
  .thread__desc { grid-column: 2 / 3; }
  .thread__arrow {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    justify-self: start;
    padding-top: 0.6rem;
  }
  a.thread:hover { padding-inline: 0; background: var(--clay-wash); }

  .btn { width: 100%; padding-inline: 1rem; }
  .btn-row .btn { width: auto; }

  .gate__field { flex-direction: column; }
  .gate__btn { padding: 0.9rem 1.25rem; }

  .list-ruled li { grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0.5rem; }
}

/* --------------------------------------------------------------------------
   SMALL PHONE — up to 400px  (320 / 375 / 390 safe)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  :root { --gutter: 1rem; }

  .masthead__inner { gap: 0.75rem; }
  .nav-toggle { padding: 0.55rem 0.7rem; gap: 0.45rem; }
  .wordmark__name { font-size: 1rem; }

  .social__item { width: 36px; height: 36px; }
  .social { gap: 0.5rem; }

  .plate { padding: 0.4rem; }
}

/* --------------------------------------------------------------------------
   SHORT / LANDSCAPE PHONES — keep the gate usable
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .gate { align-items: start; padding-block: 1.5rem; }
  .gate__eyebrow { margin-bottom: 1.1rem; padding-bottom: 0.75rem; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  .masthead, .nav-toggle, .skip { display: none !important; }
  body { background: #FFF; color: #000; }
  .band--ink, .foot { background: #FFF !important; color: #000 !important; }
  .band--ink h1, .band--ink h2, .band--ink h3, .foot__mark { color: #000 !important; }
  a { text-decoration: underline; }
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}