/* ==========================================================================
   nitinparanjpe.com — Responsive layer
   Mobile-first: every grid child is full-width until a breakpoint places it.
   Verified at 1920 / 1600 / 1440 / 1366 / 1280 / 1024 / 834 / 768 / 430 /
   414 / 390 / 375 / 360.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base (mobile) — single column everywhere
   -------------------------------------------------------------------------- */
.g12 > * { grid-column: 1 / -1; }

.ledger__row,
.chapter,
.step,
.facts__row,
.dossier__head,
.marker,
.entry {
  grid-template-columns: minmax(0, 1fr);
}

.ledger__row { row-gap: 6px; padding-block: 18px; }
.ledger__year { padding-top: 0; }
.ledger__org { padding-top: 2px; }

.marker { row-gap: 4px; }
.marker__num { display: block; }

.entry { row-gap: 10px; }
.entry__num { font-size: 1.6rem; }

.facts__row { row-gap: 6px; }
.facts dt { padding-top: 0; }

.step { row-gap: 8px; }
.step__k { padding-top: 0; }

.chapter { row-gap: var(--space-s); }
.chapter__aside { position: static; }
.chapter__phase { margin-top: 0.5rem; }

.dossier__head { row-gap: 10px; }
.dossier__idx { padding-top: 0; }

.foot__grid { grid-template-columns: minmax(0, 1fr); }
.onward { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: var(--space-xs); }

.plate { --plate-w: 100%; }

/* --------------------------------------------------------------------------
   >= 600px — small tablets / large phones in landscape
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .marker { grid-template-columns: 3.4rem minmax(0, 1fr); row-gap: 0; }
  .entry  { grid-template-columns: 4.5rem minmax(0, 1fr); row-gap: 0; }
  .entry__num { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); }
  .facts__row { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); row-gap: 0; }
  .facts dt { padding-top: 0.42rem; }
  .step { grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); row-gap: 0; }
  .step__k { padding-top: 0.5rem; }
  .dossier__head { grid-template-columns: 3.4rem minmax(0, 1fr); row-gap: 0; }
  .dossier__idx { padding-top: 0.7rem; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onward { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* --------------------------------------------------------------------------
   >= 768px — tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ledger__row {
    grid-template-columns: 7rem minmax(0, 1fr);
    row-gap: 4px;
    padding-block: clamp(16px, 2vw, 24px);
  }
  .ledger__year { padding-top: 0.35rem; grid-row: span 2; }
  .ledger__role { grid-column: 2; }
  .ledger__org  { grid-column: 2; padding-top: 2px; }

  .chapter { grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); row-gap: 0; }

  .c-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
}

/* --------------------------------------------------------------------------
   >= 981px — desktop grid + horizontal navigation
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .c-full     { grid-column: 1 / -1; }
  .c-side     { grid-column: 1 / 4; }
  .c-main     { grid-column: 4 / 13; }
  .c-text     { grid-column: 4 / 11; }
  .c-mid      { grid-column: 3 / 11; }
  .c-off      { grid-column: 2 / 9; }
  .c-half-l   { grid-column: 1 / 7; }
  .c-half-r   { grid-column: 7 / 13; }
  .c-wide-l   { grid-column: 1 / 8; }
  .c-wide-r   { grid-column: 8 / 13; }
  .c-narrow-l { grid-column: 1 / 5; }
  .c-narrow-r { grid-column: 9 / 13; }
  .c-lean-l   { grid-column: 1 / 6; }
  .c-lean-r   { grid-column: 6 / 13; }
  .c-third-1  { grid-column: 1 / 5; }
  .c-third-2  { grid-column: 5 / 9; }
  .c-third-3  { grid-column: 9 / 13; }
  .c-stick    { position: sticky; top: 104px; align-self: start; }

  .ledger__row { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 0.9fr); row-gap: 0; }
  .ledger__year { grid-row: auto; }
  .ledger__role { grid-column: auto; }
  .ledger__org  { grid-column: auto; padding-top: 0.3rem; }

  .chapter { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
  .chapter__aside { position: sticky; top: 104px; }

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

/* --------------------------------------------------------------------------
   <= 980px — mobile navigation takes over
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .head__in { min-height: 62px; }
  .drawer__top { min-height: 62px; }
}

@media (min-width: 981px) {
  .drawer { display: none !important; }
}

/* Tighten the desktop nav on narrow laptops so seven labels always fit */
@media (min-width: 981px) and (max-width: 1180px) {
  :root { --gutter: clamp(20px, 3.2vw, 40px); }
  .nav__list { gap: 15px; }
  .nav__link { font-size: 0.65rem; letter-spacing: 0.12em; }
  .mark__name { font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   Fine detail — phones
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .foot__nav { grid-template-columns: minmax(0, 1fr); }
  .plate figcaption { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .plate figcaption b { padding-top: 0; }
  .gate__field { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .gate__field .btn { width: 100%; }
  .btn { padding-inline: 22px; }
}

@media (max-width: 400px) {
  .mark__sub { letter-spacing: 0.22em; font-size: 0.53rem; }
  .burger { gap: 8px; }
  .social a { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   Very wide displays — keep the measure editorial, not sprawling
   -------------------------------------------------------------------------- */
@media (min-width: 1700px) {
  :root { --maxw: 1480px; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .head, .drawer, .burger, .skip, .onward { display: none !important; }
  body { background: #fff; color: #000; }
  .band, .foot { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Extra column placement introduced after the first layout review */
@media (min-width: 981px) {
  .c-mid-r { grid-column: 7 / 13; }
}