/* ==========================================================================
   VINOY KUMAR CHOUBEY — vinoykumarchoubey.com
   Responsive layer — mobile is recomposed, not merely stacked
   ========================================================================== */

/* --------------------------------------------------------------------------
   LARGE DESKTOP — 1600px and up
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --gutter: 5rem; }
}

/* --------------------------------------------------------------------------
   DESKTOP — dossier asides track their long-form column
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .entry__aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
}

/* --------------------------------------------------------------------------
   LAPTOP — up to 1280px
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --gutter: 4.5vw; }
  .footer__zones { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   SMALL LAPTOP / LARGE TABLET — up to 1100px
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav__list { gap: 1rem; }
  .nav__link { font-size: .68rem; letter-spacing: .1em; }
  .wordmark { font-size: .95rem; }
  .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glance__item:nth-child(3) { border-right: 0; }
  .glance__item:nth-child(4),
  .glance__item:nth-child(5) { border-top: 1px solid var(--white-14); }
}

/* --------------------------------------------------------------------------
   TABLET — up to 1024px  (mobile navigation takes over here)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --gutter: 5vw; --nav-h: 66px; }

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

  .split,
  .split--even,
  .split--flip { grid-template-columns: minmax(0, 1fr); }
  .split--sticky > :first-child { position: static; }

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

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

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

  .record { grid-template-columns: minmax(5rem, 14%) minmax(0, 1fr); }
  .record__body { grid-column: 1 / -1; padding-top: .5rem; }

  .footer__zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__zone:last-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   HOME HERO — recomposed for tablet and below
   Order on small screens: section label → name → portrait → role → intro
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .hero__seam {
    height: 1px;
    width: 100%;
    align-self: auto;
    background: linear-gradient(to right, transparent, var(--copper) 20%, var(--copper) 80%, transparent);
  }
  .hero__left { display: contents; }
  .hero__label   { order: 1; }
  .hero__name    { order: 2; margin-top: .35rem; }
  .hero__figure  { order: 3; }
  .hero__seam    { order: 4; }
  .hero__meta    { order: 5; margin-top: 0; max-width: none; }
  .hero__name { font-size: clamp(2.9rem, 13.5vw, 5rem); }
  .hero__name span:nth-child(2) { padding-left: 0; }
  .hero__name span:nth-child(3) { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   PHONE — up to 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --gutter: 6vw; }

  body { font-size: .98rem; line-height: 1.7; }

  .section { padding-block: clamp(3.25rem, 11vw, 4.5rem); }
  .section--tight { padding-block: 2.5rem; }

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

  .matrix {
    grid-template-columns: minmax(0, 1fr);
    border-left: 0;
  }
  .matrix__cell { padding: 1.75rem 0; }
  .matrix__cell:hover { background: transparent; }
  .matrix__cell:first-child { border-top: 0; }
  .matrix__cell { border-right: 0; }

  .glance { grid-template-columns: minmax(0, 1fr); }
  .glance__item {
    border-right: 0;
    border-top: 1px solid var(--white-14);
    padding-inline: 0;
  }
  .glance__item:first-child { border-top: 0; }

  .chapter { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .chapter__index { font-size: 3.4rem; line-height: 1; }

  .facts > div, .facts > li { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: .95rem 0; }

  .entry__field { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .entry__field > span { padding-top: 0; }

  .record { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .record__year { padding-top: 0; }

  .stage { flex-basis: 78vw; }

  .footer__zones { grid-template-columns: minmax(0, 1fr); }
  .footer__zone:last-child { grid-column: auto; }
  .footer__base { justify-content: flex-start; }

  .plate--portrait .plate__frame,
  .plate--tall .plate__frame { aspect-ratio: 4 / 5; }

  .pullout { margin: 1.5rem 0; padding-left: 1.15rem; }
}

/* --------------------------------------------------------------------------
   SMALL PHONE — up to 420px
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  :root { --gutter: 5.5vw; }

  .wordmark { font-size: .82rem; letter-spacing: .04em; }
  .wordmark em { font-size: .5rem; letter-spacing: .18em; }
  .nav-toggle { font-size: .6rem; letter-spacing: .14em; }

  .hero__name { font-size: clamp(2.5rem, 14vw, 3.4rem); }

  .page-head__title { font-size: clamp(2.15rem, 11.5vw, 3.1rem); }
  .statement__text { font-size: clamp(1.85rem, 10vw, 2.6rem); }
  .footer__statement { font-size: clamp(1.85rem, 10vw, 2.6rem); }

  .display-l { font-size: clamp(2rem, 10vw, 2.75rem); }
  .display-m { font-size: clamp(1.7rem, 8vw, 2.2rem); }

  .stage { flex-basis: 84vw; }

  .mobile-menu__link { font-size: 1.6rem; min-height: 56px; }

  .btn, .gate__btn { letter-spacing: .16em; padding-inline: 1.25rem; }
}

/* --------------------------------------------------------------------------
   VERY SMALL — 320px safety
   -------------------------------------------------------------------------- */
@media (max-width: 340px) {
  :root { --gutter: 5vw; }
  .wordmark { font-size: .74rem; }
  .nav-toggle span:not(.nav-toggle__bars span) { display: none; }
  .hero__name { font-size: 2.35rem; }
  .mobile-menu__link { font-size: 1.4rem; }
  .footer__base { font-size: .58rem; }
}

/* --------------------------------------------------------------------------
   LANDSCAPE PHONE — keep the full-screen menu usable
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (max-width: 1024px) {
  .mobile-menu__link { font-size: 1.35rem; min-height: 48px; padding: .5rem 0; }
  .mobile-menu__top { margin-bottom: 1rem; }
  .mobile-menu__foot { padding-top: 1.25rem; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  .masthead, .mobile-menu, .nav-toggle, .current, .thread, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section--plum, .footer { background: #fff !important; color: #000 !important; }
  .section--plum .display-l, .section--plum .display-m, .footer__statement { color: #000 !important; }
  a { text-decoration: underline; }
}