/* ============================================================
   vikassunda.com — responsive.css
   Layouts are recomposed per breakpoint, not merely scaled.
   Load order: main.css -> pages.css -> responsive.css
   ============================================================ */

/* ---------- >= 1600px : let the canvas breathe ---------- */
@media (min-width: 1600px) {
  :root { --maxw: 1440px; --gutter: 88px; }
}

/* ---------- <= 1280px : tighten the grid ---------- */
@media (max-width: 1280px) {
  :root { --nav-h: 70px; }
  .nav-list { gap: 16px; }
  .nav-list a { font-size: 0.74rem; letter-spacing: 0.1em; }

  .home-hero__type { grid-column: 1 / span 7; }
  .home-hero__media { grid-column: 8 / span 5; }

  .who__head { grid-column: 1 / span 4; }
  .who__body { grid-column: 5 / span 8; }

  .highlights__head { grid-column: 1 / span 4; }
  .highlights__list { grid-column: 5 / span 8; }

  .about-lead__body { grid-column: 1 / span 7; }
  .about-lead__margin { grid-column: 9 / span 4; }

  .dossier__nav { grid-column: 1 / span 3; }
  .dossier__main { grid-column: 4 / span 9; }

  .tenet__statement { grid-column: 3 / span 7; }
  .tenet__gloss { grid-column: 10 / span 3; }

  .journey-close__type { grid-column: 1 / span 8; }
  .journey-close__act { grid-column: 10 / span 3; }
}

/* ---------- <= 1080px : nav collapses, grids simplify ---------- */
@media (max-width: 1080px) {
  .nav-list, .nav-tail .nav-signout--desktop { display: none; }
  .nav-toggle { display: inline-flex; }

  .home-hero__grid { align-items: start; }
  .home-hero__type { grid-column: 1 / span 12; }
  .home-hero__media { grid-column: 1 / span 8; margin-top: clamp(30px, 5vw, 52px); }
  .home-hero::before { display: none; }

  .opening__label { grid-column: 1 / span 12; }
  .opening__body { grid-column: 1 / span 12; }

  .who__head { grid-column: 1 / span 12; position: static; margin-bottom: 8px; }
  .who__body { grid-column: 1 / span 12; }

  .highlights__head { grid-column: 1 / span 12; }
  .highlights__list { grid-column: 1 / span 12; }

  .closing__type { grid-column: 1 / span 12; }
  .closing__act { grid-column: 1 / span 12; margin-top: 30px; }

  .about-masthead__type { grid-column: 1 / span 12; }
  .about-masthead__media { grid-column: 1 / span 7; margin-top: 34px; }
  .about-lead__body { grid-column: 1 / span 12; }
  .about-lead__margin { grid-column: 1 / span 12; margin-top: 40px; }

  .journey-intro__body { grid-column: 1 / span 12; }
  .journey-close__type,
  .journey-close__act { grid-column: 1 / span 12; }
  .journey-close__act { margin-top: 28px; }

  .work-masthead__type { grid-column: 1 / span 12; }
  .work-masthead__note { grid-column: 1 / span 12; margin-top: 24px; }
  .plates__a { grid-column: 1 / span 7; }
  .plates__b { grid-column: 8 / span 5; }
  .dossier__nav { grid-column: 1 / span 12; position: static; margin-bottom: 12px; }
  .dossier__main { grid-column: 1 / span 12; }

  .phil-hero { min-height: 0; }
  .phil-hero__type { grid-column: 1 / span 12; }
  .phil-hero__media { grid-column: 1 / span 6; margin-top: 36px; }
  .tenet__n { grid-column: 1 / span 12; }
  .tenet__statement { grid-column: 1 / span 12; }
  .tenet__gloss { grid-column: 1 / span 12; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule-on-dark); }
  .phil-coda__body { grid-column: 1 / span 12; }

  .lead-piece__media { grid-column: 1 / span 5; }
  .lead-piece__body { grid-column: 1 / span 12; }

  .contact-hero__type { grid-column: 1 / span 12; }
  .contact-hero__card { grid-column: 1 / span 12; margin-top: 36px; }
  .contact-strip__media { grid-column: 1 / span 5; }
  .contact-strip__body { grid-column: 1 / span 12; margin-top: 28px; }
  .contact-social__head { grid-column: 1 / span 12; }
  .contact-social__body { grid-column: 1 / span 12; }

  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

/* ---------- <= 860px : single column, recomposed blocks ---------- */
@media (max-width: 860px) {
  body { font-size: 16.5px; }

  .record-strip { grid-template-columns: minmax(0, 1fr); }
  .record-strip__cell { padding: 22px 0; }

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

  .index-item {
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 6px 18px;
  }
  .index-item__d { grid-column: 2; margin-top: 4px; }
  .index-item:hover { padding-inline: 0; }

  .cols-2 { column-count: 1; column-rule: 0; }

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

  .chapters::before { left: 4px; }
  .chapter { grid-template-columns: minmax(0, 1fr); margin-left: 0 !important; padding-left: 30px; }
  .chapter__marker { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
  .chapter__marker::before { left: -30px; top: 0.5em; }
  .chapter__year, .chapter__no { padding-left: 0; margin-top: 0; }
  .chapter__no { font-size: 1.5rem; }

  .plates__a, .plates__b { grid-column: 1 / span 12; }
  .plates__b { margin-top: 26px; }

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

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .footer-grid > :first-child { grid-column: auto; }
  .footer-base { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- <= 640px : phones ---------- */
@media (max-width: 640px) {
  :root { --nav-h: 64px; --section-y: 56px; }
  body { font-size: 16px; line-height: 1.66; }

  .display-xl { font-size: clamp(2.55rem, 12vw, 3.5rem); line-height: 1.02; }
  .display-l  { font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
  .display-m  { font-size: clamp(1.42rem, 6vw, 1.8rem); }

  .eyebrow { font-size: 0.68rem; letter-spacing: 0.18em; margin-bottom: 1.1rem; }
  .eyebrow::before { width: 22px; }

  .home-hero__media { grid-column: 1 / span 12; }
  .home-hero__name .n2 { padding-left: 0; }
  .home-hero__cta { gap: 14px 20px; }
  .home-hero__cta .btn { width: 100%; }

  .about-masthead__media,
  .phil-hero__media,
  .lead-piece__media,
  .contact-strip__media { grid-column: 1 / span 12; }

  .pull { max-width: none; }
  .prose, .lede { max-width: none; }

  .dropcap::first-letter { font-size: 3.2em; }

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

  .btn { width: 100%; }
  .contact-actions .btn { width: 100%; }

  .nav-panel__list a { font-size: 1.32rem; padding: 16px 2px; }

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

  .figure figcaption { font-size: 0.8rem; }
}

/* ---------- <= 380px : narrow phones ---------- */
@media (max-width: 380px) {
  :root { --gutter: 18px; }
  .display-xl { font-size: 2.3rem; }
  .wordmark { font-size: 1rem; letter-spacing: 0.08em; }
  .nav-toggle { font-size: 0; gap: 0; }
  .index-item { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .value-row { grid-template-columns: minmax(0, 1fr); }
  .value-row__d { grid-column: auto; }
}

/* ---------- Short landscape phones ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .nav-panel { padding-top: calc(var(--nav-h) + 16px); }
  .nav-panel__list a { font-size: 1.14rem; padding: 12px 2px; }
  .phil-hero { min-height: 0; }
}

/* ---------- Hover-less (touch) devices ---------- */
@media (hover: none) {
  .index-item:hover { background: transparent; padding-inline: 0; }
  .social a:hover { transform: none; }
}

/* ============================================================
   Phones: collapse the 12-column page grids entirely.
   At ~390px, eleven 24px gutters consumed more width than the
   content tracks, so the grid is replaced by a single column and
   every child is placed full-bleed within it.
   ============================================================ */
@media (max-width: 700px) {
  .home-hero__grid,
  .opening,
  .who,
  .highlights,
  .closing,
  .about-masthead,
  .about-lead,
  .journey-intro,
  .journey-close,
  .work-masthead,
  .plates,
  .dossier,
  .phil-hero__grid,
  .tenet__grid,
  .phil-coda,
  .lead-piece,
  .contact-hero,
  .contact-strip,
  .contact-social {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 5vw, 30px);
  }

  .home-hero__grid > *,
  .opening > *,
  .who > *,
  .highlights > *,
  .closing > *,
  .about-masthead > *,
  .about-lead > *,
  .journey-intro > *,
  .journey-close > *,
  .work-masthead > *,
  .plates > *,
  .dossier > *,
  .phil-hero__grid > *,
  .tenet__grid > *,
  .phil-coda > *,
  .lead-piece > *,
  .contact-hero > *,
  .contact-strip > *,
  .contact-social > * {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* Restore the deliberate vertical offsets that the grid supplied. */
  .home-hero__media,
  .about-masthead__media,
  .about-lead__margin,
  .phil-hero__media,
  .contact-hero__card,
  .contact-strip__body,
  .plates__b { margin-top: clamp(22px, 5vw, 34px); }

  .tenet__gloss { padding-top: 16px; border-top: 1px solid var(--rule); }
  .band-dark .tenet__gloss { border-top-color: var(--rule-on-dark); }

  .phil-coda__body { text-align: left; justify-self: stretch; }
  .phil-coda__body .eyebrow { justify-content: flex-start; }
  .phil-coda__body .pull { margin-inline: 0; }

  /* Small photographs should not be blown past their native width. */
  .about-portrait,
  .lead-piece__media .plate,
  .contact-strip__media .plate,
  .phil-hero__media .plate { max-width: 460px; }
}