/* ==========================================================================
   ramakrishnanchander.com — responsive layer
   Breakpoints: 1280 / 1024 / 900 / 768 / 560 / 400
   Every rule below exists to keep the 12-column architecture legible as the
   viewport narrows. Portraits keep their natural aspect ratio at every width.
   ========================================================================== */

/* ---------- 1280px and below : tighten the grid ---------- */
@media (max-width: 1280px) {
  :root { --shell: 1240px; }
  .plate__figure .fig__frame { max-width: 360px; }
  .chron__entry { grid-template-columns: minmax(0, 2.8fr) minmax(0, 4.4fr) minmax(0, 4.8fr); }
}

/* ---------- 1320px and below : nav compresses ---------- */
@media (max-width: 1320px) {
  .nav__link { padding-inline: clamp(8px, 0.9vw, 13px); letter-spacing: 0.1em; }
  .nav__idx { display: none; }
}

/* ---------- 1024px : tablet landscape ---------- */
@media (max-width: 1024px) {
  .plate__meta      { grid-column: 1 / span 6; grid-row: 1; }
  .plate__stamp     { grid-column: 9 / span 4; grid-row: 1; }
  .plate__namewrap  { grid-column: 1 / span 12; grid-row: 2; }
  .plate__lead      { grid-column: 1 / span 6; grid-row: 3; }
  .plate__figure    { grid-column: 8 / span 5; grid-row: 3; }
  .plate__figure .fig__frame { max-width: 330px; }

  .stmt__head { grid-column: 1 / span 12; }
  .stmt__body { grid-column: 1 / span 12; }

  .rec__left  { grid-column: 1 / span 12; }
  .rec__right { grid-column: 1 / span 12; }

  .onrec__quote { grid-column: 1 / span 12; }
  .onrec__fig   { grid-column: 1 / span 7; }

  .ahead__title { grid-column: 1 / span 12; }
  .ahead__aside { grid-column: 1 / span 8; }
  .abody__rail  { grid-column: 1 / span 12; position: static; }
  .abody__main  { grid-column: 1 / span 12; }
  .toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }

  .jhead__title { grid-column: 1 / span 12; }
  .jhead__note  { grid-column: 1 / span 8; }
  .chron__break .fig { grid-column: 1 / span 7; }
  .chron__break .chron__breaktext { grid-column: 1 / span 9; }

  .chead__title { grid-column: 1 / span 12; }
  .chead__lead  { grid-column: 1 / span 9; }
  .module__idx   { grid-column: 1 / span 12; position: static;
                   display: flex; align-items: baseline; gap: 16px; }
  .module__idxnum { font-size: 2.2rem; }
  .module__title { grid-column: 1 / span 12; }
  .module__body  { grid-column: 1 / span 12; }

  .case__col { grid-column: span 6; }

  .pstate__aside { grid-column: 1 / span 12; }
  .pstate__main  { grid-column: 1 / span 12; }
  .pplate__fig { grid-column: 1 / span 6; }
  .pplate__txt { grid-column: 1 / span 10; }

  .arcfeat__fig { grid-column: 1 / span 7; }
  .arcfeat__txt { grid-column: 1 / span 10; }
  .arcsecond__txt { grid-column: 1 / span 10; }
  .arcsecond__fig { grid-column: 1 / span 9; }

  .khead__title { grid-column: 1 / span 12; }
  .khead__note  { grid-column: 1 / span 8; }
  .kgrid__a { grid-column: 1 / span 12; }
  .kgrid__b { grid-column: 1 / span 12; }

  .footer__brand { grid-column: span 12; }
  .footer__col   { grid-column: span 6; }
  .footer__col--nav { grid-column: span 6; }
}

/* ---------- 1023px : switch to the drawer navigation ---------- */
@media (max-width: 1023px) {
  .nav { display: none; }
  .navtoggle { display: flex; }
  .abody__rail, .module__idx { top: auto; }
  .chapter, .module { scroll-margin-top: 78px; }

  .plate__meta   { grid-column: 1 / span 12; grid-row: auto; }
  .plate__stamp  { grid-column: 1 / span 12; grid-row: auto; justify-self: start; text-align: left; }
  .plate__namewrap { grid-row: auto; }
  .plate__lead   { grid-column: 1 / span 12; grid-row: auto; max-width: 44ch; }
  .plate__figure { grid-column: 1 / span 12; grid-row: auto; }
  .plate__figure .fig__frame { max-width: 340px; }
  .plate__name .l2 { padding-left: clamp(0px, 6vw, 60px); }

  .plate__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate__index li { border-left: 1px solid var(--line); }
  .plate__index li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .plate__index li:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .chron__entry,
  .chron__entry:nth-child(even) { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .chron__year { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .chron__note p { max-width: 62ch; }

  .case__col { grid-column: span 12; }

  .srcrow { grid-template-columns: 3rem minmax(0, 1fr); }
  .srcrow > :nth-child(3), .srcrow > :nth-child(4) { grid-column: 2; }
}

/* ---------- 768px : tablet portrait ---------- */
@media (max-width: 768px) {
  :root { --band: clamp(46px, 9vw, 74px); }

  .toc { grid-template-columns: minmax(0, 1fr); }
  .reg__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .offices li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .offices .caption { grid-column: 2; text-align: left; }

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

  .rrow { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: 12px; }
  .rrow__go { grid-column: 2; }

  .footer__col, .footer__col--nav { grid-column: span 12; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

/* ---------- 560px : phone ---------- */
@media (max-width: 560px) {
  .gridlines::before {
    background-image: repeating-linear-gradient(
      to right, var(--line-soft) 0 1px, transparent 1px calc(100% / 3));
  }
  .plate__index { grid-template-columns: minmax(0, 1fr); }
  .plate__index li { border-left: 0; padding-left: 0; }
  .plate__index li + li { border-top: 1px solid var(--line); }

  .plate__name .l2 { padding-left: 0; }
  .plate__figure .fig__frame { max-width: 100%; }
  .aportrait .fig__frame, .pplate__fig .fig__frame { max-width: 100%; }

  .case__bar { grid-template-columns: minmax(0, 1fr); }
  .chapter__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dropcap::first-letter { font-size: 3.2em; }

  .btn { width: 100%; }
  .social__i { width: 46px; height: 46px; }
}

/* ---------- 400px : smallest supported phone ---------- */
@media (max-width: 400px) {
  :root { --pad: 18px; }
  .wordmark__role { display: none; }
  .navtoggle { padding-left: 12px; }
  .quote__text { font-size: 1.4rem; }
  .kline__value { font-size: 1.3rem; }
  .chron__year { font-size: 2.5rem; }
}

/* ---------- Coarse pointers: guarantee tap targets ---------- */
@media (pointer: coarse) {
  .toc a, .footer__items a, .offices li, .footer__credit { min-height: 44px; }
  .footer__credit { display: flex; align-items: center; }
  .nav__link { min-height: 48px; }
}

/* ---------- Print ---------- */
@media print {
  .masthead, .drawer, .progress, .footer__base .endsession, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}