/* ==========================================================================
   niketkaushik.com — Responsive recomposition
   Layouts are re-composed, not merely stacked.
   Tested: 320 / 360 / 375 / 390 / 414 / 768 / 820 / 1024 / 1280 / 1440 / 1920
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1440px  — tighten the widest measures
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .entry { grid-template-columns: 116px minmax(0, 1fr) minmax(0, 260px); }
  .principle { grid-template-columns: 64px 210px minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   ≤ 1220px  — the desktop nav gives way to the full-screen menu
   -------------------------------------------------------------------------- */
@media (max-width: 1220px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }

  .annotated { grid-template-columns: minmax(0, 1fr) 210px; }
  .strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip__item:nth-child(4n+1) { border-left: 0; }
  .strip__item:nth-child(n+5) { border-top: var(--rule-soft); }
}

/* --------------------------------------------------------------------------
   ≤ 1024px  — tablets landscape / small laptops
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body { font-size: 16.5px; }

  /* Home: portrait moves above the name block so the face is never squeezed */
  .openfile__spread { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); }
  .openfile__plate { order: -1; }
  .openfile__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .statement__grid,
  .language__grid,
  .region__grid,
  .essay,
  .cmd-open__grid,
  .civic-open__row,
  .record-open__row,
  .contact-grid,
  .inv-open__foot { grid-template-columns: minmax(0, 1fr); }

  .essay--flip .essay__figure { order: 0; }
  .cmd-open__plate { max-width: 340px; }

  .brief, .attrib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief__cell:nth-child(2n+1),
  .attrib__cell:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .brief__cell:nth-child(n+3) { border-top: var(--rule-soft); padding-top: clamp(20px, 2.4vw, 30px); }
  .attrib__cell:nth-child(n+3) { border-top: 1px solid var(--bone-18); padding-top: clamp(20px, 2.4vw, 30px); }

  .principle { grid-template-columns: 54px minmax(0, 1fr); }
  .principle__num { grid-row: 1; }
  .principle__name { grid-column: 2; margin-bottom: 16px; }
  .principle__body { grid-column: 2; }

  .entry { grid-template-columns: 104px minmax(0, 1fr); }
  .entry__meta { grid-column: 2; margin-top: 6px; }

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

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

  .colophon__grid { grid-template-columns: 1fr 1fr; }
  .colophon__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   ≤ 900px  — profile spread recomposes; annotations move inline
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .pf-open { grid-template-columns: minmax(0, 1fr); }
  .pf-open__image {
    border-right: 0;
    border-bottom: var(--rule);
    min-height: 0;
    padding: clamp(20px, 5vw, 40px);
  }
  .pf-open__image img { max-height: 46vh; }
  .pf-open__text { padding: clamp(28px, 6vw, 48px) var(--gutter) clamp(30px, 6vw, 48px); }

  .annotated { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .annotated__note { position: static; order: 2; }

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

  .inv-open__title span:nth-child(2) { padding-left: clamp(0px, 6vw, 60px); }
  .inv-open__title span:nth-child(3) { padding-left: clamp(0px, 12vw, 120px); }

  .career-open { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 40px); }
  .career-open .fig__frame { max-width: 300px; }
  .photo-pair { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   ≤ 768px  — tablets portrait / large phones
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --gutter: clamp(18px, 5.5vw, 32px); }
  body { font-size: 16px; line-height: 1.66; }

  .masthead__inner { min-height: 58px; }
  .wordmark__name { font-size: 1.18rem; }

  .strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__item { border-left: 0 !important; }
  .strip__item:nth-child(2n) { border-left: var(--rule-soft) !important; }
  .strip__item:nth-child(n+3) { border-top: var(--rule-soft); }
  .strip__link { padding: 20px 12px 22px 0; }
  .strip__item:nth-child(2n) .strip__link { padding-left: 14px; }

  /* Chronology: year moves above the role, stem hugs the left edge */
  .chrono__stem { left: 4px; }
  .chrono__entry { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-left: 26px; }
  .chrono__when {
    text-align: left;
    padding-right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: baseline;
  }
  .chrono__when b, .chrono__when span { display: inline; }
  .chrono__dot { left: 0; }

  .reqs li,
  .comms li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }

  .ledger__row,
  .complexity .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ledger__key { padding-top: 0; }

  .entry { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .entry__year { display: flex; align-items: baseline; gap: 16px; }
  .entry__year small { margin-top: 0; }
  .entry__meta { grid-column: 1; }

  .brief, .attrib { grid-template-columns: minmax(0, 1fr); }
  .brief__cell, .attrib__cell { border-left: 0 !important; padding-left: 0 !important; }
  .brief__cell + .brief__cell { border-top: var(--rule-soft); padding-top: 22px; }
  .attrib__cell + .attrib__cell { border-top: 1px solid var(--bone-18); padding-top: 22px; }

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

  .colophon__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .colophon__base { flex-direction: column; align-items: flex-start; gap: 12px; }

  .pull { max-width: none; }
  .initial::first-letter { font-size: 3.2em; }

  .contact-plate { max-width: 340px; }
}

/* --------------------------------------------------------------------------
   ≤ 560px  — phones. Metadata leads, then name, portrait, designation.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  body { font-size: 15.5px; }

  .openfile__spread { display: flex; flex-direction: column; }
  .openfile__head  { order: 1; }
  .openfile__plate { order: 2; margin-top: 4px; }
  .openfile__tail  { order: 3; }

  .openfile__rank { flex-direction: column; gap: 10px; }
  .openfile__meta { grid-template-columns: minmax(0, 1fr); }
  .openfile__meta li { padding: 12px 0 13px; border-bottom: var(--rule-soft); }
  .openfile__meta li + li { border-left: 0; padding-left: 0; }
  .openfile__meta li:last-child { border-bottom: 0; }

  .strip__list { grid-template-columns: minmax(0, 1fr); }
  .strip__item:nth-child(2n) { border-left: 0 !important; }
  .strip__item + .strip__item { border-top: var(--rule-soft); }
  .strip__link,
  .strip__item:nth-child(2n) .strip__link { padding: 17px 0 19px; }
  .strip__idx { margin-bottom: 9px; }

  .statement__chain li { font-size: 9.5px; padding: 6px 9px; }

  .language__terms li { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }

  .menu-nav__link { font-size: clamp(1.5rem, 8.4vw, 2.1rem); gap: 14px; }
  .menu-nav__num { width: 22px; }
  .menu-panel__foot { font-size: 9.5px; gap: 6px 16px; }

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

  .record-open__title { font-size: clamp(3rem, 21vw, 5rem); }
}

/* --------------------------------------------------------------------------
   ≤ 380px  — smallest supported viewports (320–380)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }

  .wordmark__name { font-size: 1.06rem; }
  .wordmark__suffix { font-size: 9px; letter-spacing: .18em; }
  .menu-btn { font-size: 9.5px; letter-spacing: .16em; gap: 8px; }
  .menu-btn__rules { width: 19px; }

  .openfile__ips { letter-spacing: .12em; }
  .btn { padding: 14px 22px; font-size: 10px; letter-spacing: .16em; }
  .chrono__resp li { font-size: 9px; padding: 5px 8px; }
  .theme__name { font-size: .88rem; letter-spacing: .12em; }
  .principle { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .reqs li, .comms li { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
}

/* --------------------------------------------------------------------------
   Wide desktops — 1600px+
   -------------------------------------------------------------------------- */
@media (min-width: 1700px) {
  body { font-size: 18px; }
  .shell { max-width: 1660px; }
}

/* --------------------------------------------------------------------------
   Coarse pointers — larger hit areas
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .nav__link { padding-block: 12px; }
  .social__link { width: 44px; height: 44px; }
  .strip__link { min-height: 88px; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .masthead, .menu-panel, .colophon, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band--ink { background: #fff !important; color: #000 !important; }
  .band--ink * { color: #000 !important; }
  a { text-decoration: underline; }
}