/* ==========================================================================
   MANOJ AJMERA — responsive.css
   Compositions are re-thought per breakpoint, not merely scaled down.
   Verified at 1920 / 1440 / 1280 / 1024 / 768 / 414 / 390 / 375 / 320.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1280px — tighten the wide grid
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .hero__plate { grid-column: 8 / 13; }
  .idea__lead { grid-column: 1 / 7; }
  .idea__text { grid-column: 7 / 13; }
  .idea--flip .idea__lead { grid-column: 7 / 13; }
  .idea--flip .idea__text { grid-column: 1 / 7; }
  .archive-lead__plate { grid-column: 1 / 8; }
  .archive-lead__note { grid-column: 8 / 13; }
}

/* --------------------------------------------------------------------------
   ≤ 1080px — nav becomes a drawer (seven links need the room)
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }

  .hero__rail { display: none; }
  .hero__type { grid-column: 1 / 8; }
  .hero__plate { grid-column: 8 / 13; }

  .profile__aside { grid-column: 1 / 5; }
  .profile__body { grid-column: 5 / 13; }

  .impact-head__title { grid-column: 1 / 9; }
  .impact-head__note { grid-column: 1 / 10; }

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

/* --------------------------------------------------------------------------
   ≤ 960px — stack the two-column editorial pairs
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  :root { --measure: 100%; }

  /* A twelve-column grid whose items all span twelve is nothing but eleven
     column gaps — 528px of them at this gap size, which is wider than any
     phone. Collapse to a single column rather than let the gaps overflow.
     `grid-column: auto` matters here: `span 12` against one explicit column
     would generate eleven implicit columns and reintroduce the problem. */
  .cols,
  .impact-head { grid-template-columns: minmax(0, 1fr); }
  .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-12,
  .impact-head__title,
  .impact-head__note { grid-column: auto; }

  .hero__grid { display: block; }
  .hero__type { max-width: none; }
  .hero__plate {
    margin-top: var(--s-4);
    max-width: 26rem;
    margin-left: auto;
  }
  .hero__name { font-size: clamp(3rem, 13vw, 7rem); }

  .profile { display: block; }
  .profile__aside {
    position: static;
    max-width: 22rem;
    margin-bottom: var(--s-5);
  }

  .idea__grid { display: block; }
  .idea__text { margin-top: var(--s-4); }
  .idea--flip .idea__lead,
  .idea--flip .idea__text { order: 0; }

  .archive-lead { display: block; }
  .archive-lead__note { margin-top: var(--s-4); padding-bottom: 0; }

  .domain { grid-template-columns: 3rem minmax(0, 1fr); }
  .domain__d { grid-column: 2; }

  .colophon__grid { grid-template-columns: 1fr 1fr; }
  .colophon__grid > :first-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   ≤ 768px — tablet portrait / large phone
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --nav-h: 4rem;
    --s-7: clamp(3.25rem, 11vw, 5rem);
    --s-8: clamp(4rem, 14vw, 7rem);
  }

  .row { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .row__v { grid-column: 2; }

  .era { grid-template-columns: 1fr; gap: var(--s-2); padding-left: 1.75rem; }
  .era__year { position: static; }
  .era__body { padding-left: 0; }
  .era__body::before { left: -1.875rem; top: 0.5rem; }
  .chrono__line { left: 3.5px; }

  .theme-list .t-head { grid-template-columns: 2.25rem 1fr; }
  .theme-list p { grid-column: 2; }

  .contact-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.5rem; }
  .contact-row__k { grid-column: 1 / -1; }

  .preview-rail article { border-right: 0; padding-right: 0; }

  .colophon { padding-block: var(--s-5) var(--s-3); }
  .colophon__base { flex-direction: column; align-items: flex-start; gap: 0.65rem; }
}

/* --------------------------------------------------------------------------
   ≤ 620px — phone: single column everywhere
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .hero__plate { max-width: none; margin-left: 0; }
  .hero__meta { grid-template-columns: 1fr 1fr; }

  .profile__aside { max-width: none; }

  .colophon__grid { grid-template-columns: 1fr; gap: var(--s-4); }

  .facts > div { padding: var(--s-3) var(--s-2) var(--s-3) 0; }

  .archive-strip { gap: var(--s-4); }

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

  .page-head__meta { gap: 0.5rem; }
}

/* --------------------------------------------------------------------------
   ≤ 420px — compact phones (414 / 390 / 375)
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  :root { --gutter: 1.15rem; }

  .hero__name { font-size: clamp(2.75rem, 15vw, 4rem); letter-spacing: -0.04em; }
  .hero__name .l2 { padding-left: 0.2em; }
  .hero__meta { grid-template-columns: 1fr; gap: var(--s-2); }

  .slab { max-width: none; }
  .closing__type { max-width: none; }

  .domain { grid-template-columns: 1fr; }
  .domain__n { padding-top: 0; }
  .domain__d { grid-column: 1; }

  .row { grid-template-columns: 1fr; gap: 0.6rem; }
  .row__n { padding-top: 0; }
  .row__v { grid-column: 1; }

  .theme-list .t-head { grid-template-columns: 1fr; gap: 0.5rem; }
  .theme-list p { grid-column: 1; }

  .contact-card { grid-template-columns: 1fr; }
  .contact-card .plate { max-width: 5.5rem; }

  .social a { width: 42px; height: 42px; }

  .drawer__link { font-size: clamp(1.5rem, 8vw, 2rem); }
}

/* --------------------------------------------------------------------------
   ≤ 340px — smallest supported (320)
   -------------------------------------------------------------------------- */
@media (max-width: 340px) {
  :root { --gutter: 0.95rem; --t-body: 0.9375rem; }
  .wordmark__text { font-size: 0.625rem; letter-spacing: 0.14em; }
  .menu-btn { padding-left: 0.5rem; }
  .menu-btn span:not(.menu-btn__bars) { display: none; }
  .gate { padding-inline: 1.15rem; }
  .gate__input { letter-spacing: 0.2em; font-size: 1rem; }
  .gate__submit { letter-spacing: 0.22em; }
}

/* --------------------------------------------------------------------------
   Landscape phones — keep the access gate usable with the keyboard open
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  body.access { align-items: start; padding-block: var(--s-3); }
  .gate { padding-block: 1.75rem; }
  .gate__label { margin-bottom: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Wide desktop — hold the measure, let the sheet breathe
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --gutter: clamp(4.5rem, 6vw, 7rem); }
  .wrap { max-width: 88rem; }
}

/* --------------------------------------------------------------------------
   Pointer-coarse: remove hover-only affordances that can stick on touch
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .archive-item:hover .plate img { transform: none; }
  a.contact-row:hover { padding-left: 0; }
  .colophon__nav a:hover { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Print — a clean editorial fallback
   -------------------------------------------------------------------------- */
@media print {
  .masthead, .drawer, .menu-btn, .skip, .progress { display: none !important; }
  body { background: #fff; color: #000; }
  .sheet--dark, .sheet--mineral, .colophon { background: #fff !important; color: #000 !important; }
  .sheet--dark *, .sheet--mineral *, .colophon * { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}