/* ==========================================================================
   YOGESH LAKHANI — responsive.css
   Deliberate compositions per breakpoint. Mobile is re-laid-out, not shrunk.
   Order: 1440 / 1280 / 1180 / 1080 / 900 / 760 / 620 / 480 / 380
   ========================================================================== */

/* ---------- Very wide: hold the measure, widen the air ------------------- */
@media (min-width: 1600px) {
  :root { --gutter: 76px; }
  .shell { max-width: 1520px; }
}

/* ---------- 1440 --------------------------------------------------------- */
@media (max-width: 1440px) {
  :root { --gutter: clamp(20px, 3.8vw, 56px); }
}

/* ---------- 1280 --------------------------------------------------------- */
@media (max-width: 1280px) {
  .nav { gap: 13px; }
  .nav__link { font-size: 10.3px; letter-spacing: .1em; }
  .brand__sub { letter-spacing: .2em; }
  .pillar__inner { grid-template-columns: 4rem 1fr minmax(0, 24rem); }
  .press__item { grid-template-columns: 8rem 1fr 8rem; }
}

/* ---------- 1180 — switch to the drawer --------------------------------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .opening__type  { grid-column: 1 / span 7; }
  .opening__plate { grid-column: 8 / span 5; }

  .bio__portrait { grid-column: 1 / span 5; }
  .bio__text     { grid-column: 6 / span 7; }

  .chapter__mark  { grid-column: 1 / span 3; }
  .chapter__body  { grid-column: 4 / span 6; }
  .chapter__plate { grid-column: 10 / span 3; }

  .essay__meta { grid-column: 1 / span 3; }
  .essay__body { grid-column: 4 / span 8; }
  .essay__aside{ display: none; }
}

/* ---------- 1080 — two-column world ------------------------------------- */
@media (max-width: 1080px) {
  .opening__grid { row-gap: clamp(30px, 5vw, 48px); }
  .opening__type  { grid-column: 1 / span 12; }
  .opening__plate { grid-column: 1 / span 7; }
  .opening__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .intro__aside { grid-column: 1 / span 12; }
  .intro__body  { grid-column: 1 / span 12; }

  .signature__plate { grid-column: 1 / span 12; }
  .signature__text  { grid-column: 1 / span 12; }

  .sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sequence li:nth-child(2n) .sequence__item { border-right: 0; }
  .sequence li:last-child .sequence__item { border-right: 0; }

  .statement__body { grid-column: 1 / span 12; }
  .statement__side { grid-column: 1 / span 12; margin-top: clamp(28px, 4vw, 44px); }

  .closing__type  { grid-column: 1 / span 12; }
  .closing__links { grid-column: 1 / span 12; }

  .bio__portrait { grid-column: 1 / span 12; position: static; }
  .bio__text     { grid-column: 1 / span 12; }
  .bio__portrait .plate { max-width: 460px; }

  .chapter__grid { row-gap: clamp(26px, 4vw, 38px); }
  .chapter__mark  { grid-column: 1 / span 12; position: static; display: flex; align-items: baseline; gap: 18px; }
  .chapter__stage { margin-top: 0; }
  .chapter__body  { grid-column: 1 / span 7; }
  .chapter__plate { grid-column: 9 / span 4; }

  .figures .plate:nth-child(1) { grid-column: 1 / span 7; }
  .figures .plate:nth-child(2) { grid-column: 8 / span 5; }
  .figures .plate:nth-child(3) { grid-column: 1 / span 6; }

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

  .pillar__inner { grid-template-columns: 3.4rem 1fr; row-gap: 16px; }
  .pillar__body { grid-column: 2; }

  .initiative__no   { grid-column: 1 / span 1; }
  .initiative__head { grid-column: 2 / span 11; }
  .initiative__body { grid-column: 2 / span 11; margin-top: 6px; }

  .essay__meta { grid-column: 1 / span 12; display: flex; align-items: baseline; gap: 18px; position: static; }
  .essay__no   { margin-bottom: 0; }
  .essay__body { grid-column: 1 / span 12; }

  .contact__type { grid-column: 1 / span 12; }
  .contact__data { grid-column: 1 / span 12; }

  .wall { -webkit-columns: 2; -moz-columns: 2; columns: 2; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(30px, 5vw, 44px); }
}

/* ---------- 900 ---------------------------------------------------------- */
@media (max-width: 900px) {
  body { font-size: 15.5px; }

  .opening__plate { grid-column: 1 / span 9; }
  .ledger__row { grid-template-columns: 1fr; row-gap: 10px; }
  .ledger__tag { order: -1; }

  .archive__row { grid-template-columns: 6.5rem 1fr; }

  .press__item { grid-template-columns: 7rem 1fr; row-gap: 6px; }
  .press__kind { grid-column: 1 / -1; text-align: left; }

  .recognition { grid-template-columns: 1fr; }

  .chapter__body  { grid-column: 1 / span 12; }
  .chapter__plate { grid-column: 1 / span 8; }

  .spec li, .spec > div { grid-template-columns: 9rem 1fr; gap: 14px; }
}

/* ---------- 760 — single column, larger touch rhythm -------------------- */
@media (max-width: 760px) {
  :root {
    --gap: 18px;
    --band: clamp(44px, 11vw, 68px);
    --band-lg: clamp(54px, 14vw, 88px);
  }

  .masthead__inner { min-height: 66px; }
  .masthead.is-stuck .masthead__inner { min-height: 58px; }
  .brand__name { font-size: 1rem; }
  .brand__sub { font-size: 8px; letter-spacing: .18em; }

  .display { font-size: clamp(2.35rem, 11vw, 3.4rem); }
  .h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .h3 { font-size: clamp(1.25rem, 5.4vw, 1.55rem); }

  .page-head__title { max-width: none; }

  .opening__plate { grid-column: 1 / span 12; }
  .opening__facts { grid-template-columns: 1fr; row-gap: 20px; }
  .opening__facts > div { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .opening__facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .opening__actions .btn { width: 100%; justify-content: space-between; }

  .sequence { grid-template-columns: 1fr; }
  .sequence__item { border-right: 0 !important; padding-inline: 0; }
  .sequence li:hover .sequence__item,
  .sequence__item:hover { background: transparent; }
  .sequence__stage { margin-top: 10px; }

  .chapter__year { font-size: clamp(2.2rem, 12vw, 3rem); }
  .chapter__mark { flex-wrap: wrap; gap: 6px 14px; }
  .chapter__plate { grid-column: 1 / span 12; }

  .archive__row { grid-template-columns: 1fr; row-gap: 8px; padding-block: 22px; }
  .archive__row:hover { background: transparent; }
  .archive__period { padding-top: 0; }

  .figures { grid-template-columns: 1fr; }
  .figures .plate:nth-child(1),
  .figures .plate:nth-child(2),
  .figures .plate:nth-child(3) { grid-column: 1 / -1; }

  .capability { grid-template-columns: 1fr; }

  .pillar__inner { grid-template-columns: 1fr; row-gap: 12px; padding-block: 30px; }
  .pillar__body { grid-column: 1; }
  .pillar__no { font-size: 1.4rem; }

  .initiative { grid-template-columns: 1fr; row-gap: 14px; }
  .initiative__no, .initiative__head, .initiative__body { grid-column: 1 / -1; }

  .press__item { grid-template-columns: 1fr; row-gap: 8px; padding-block: 20px; }
  .press__item:hover { padding-left: 0; background: transparent; }
  .press__pub { padding-top: 0; }

  .wall { -webkit-columns: 1; -moz-columns: 1; columns: 1; }
  .wall__item:hover .plate { transform: none; }

  .bio__portrait .plate { max-width: none; }

  .contact-card__row { padding-block: 20px; }

  .footer__grid { grid-template-columns: 1fr; row-gap: 34px; }
  .footer__blurb { max-width: none; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 10px; }

  .drawer__label { font-size: clamp(1.45rem, 7.5vw, 1.9rem); }
  .drawer__nav a { grid-template-columns: 38px 1fr; }

  .lightbox__bar { padding-inline: 18px; }
  .lightbox__foot { padding-inline: 18px; }
  .lightbox__stage { padding: 14px 16px; }
}

/* ---------- 620 ---------------------------------------------------------- */
@media (max-width: 620px) {
  :root { --gutter: 20px; }

  .sec-head { grid-template-columns: 1fr; gap: 6px; }
  .page-head__meta { gap: 6px 14px; }
  .page-head__meta span { font-size: 9.5px; letter-spacing: .16em; }

  .statement__quote { font-size: clamp(1.5rem, 7.6vw, 2rem); }
  .pullquote blockquote { font-size: clamp(1.4rem, 7.2vw, 1.9rem); max-width: none; }

  .spec li, .spec > div { grid-template-columns: 1fr; gap: 4px; padding-block: 12px; }
  .spec dt, .spec__k { padding-top: 0; }

  .chapter__why { padding: 16px; }
  .note-panel { padding: 18px; }

  .drawer__top { min-height: 66px; }
  .drawer__foot { flex-direction: column; gap: 8px; }

  .lightbox__btn { padding: 10px 12px; font-size: 10px; letter-spacing: .12em; }
}

/* ---------- 480 ---------------------------------------------------------- */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .display { font-size: clamp(2.1rem, 12vw, 2.7rem); }
  .lede { font-size: 1.08rem; }
  .prose p { font-size: .98rem; }

  .plate { padding: 8px; }
  .plate__cap { grid-template-columns: 1fr; gap: 5px; }
  .plate__no { padding-top: 0; }

  .opening__index { gap: 10px; }
  .btn { padding: 12px 18px; font-size: 10px; letter-spacing: .13em; }
  .nav-toggle { padding: 10px 12px; }
  .nav-toggle span.nav-toggle__word { display: none; }

  .contact-card__v { font-size: 1.15rem; }
  .social a { width: 42px; height: 42px; }
}

/* ---------- 380 ---------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 16px; --gap: 14px; }
  .brand__sub { display: none; }
  .display { font-size: 2rem; }
  .drawer__label { font-size: 1.35rem; }
}

/* ---------- Short landscape phones: keep the drawer usable -------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .drawer__nav { padding-block: 14px 20px; }
  .drawer__nav a { padding: 9px 0; min-height: 40px; }
  .drawer__label { font-size: 1.2rem; }
  .drawer__top { min-height: 56px; }
}

/* ---------- Coarse pointers: no hover-dependent affordances ------------- */
@media (hover: none) {
  .archive__row:hover,
  .press__item:hover,
  .sequence__item:hover { background: transparent; }
  .press__item:hover { padding-left: 0; }
  .closing__list a:hover { padding-left: 0; }
  .wall__item:hover .plate { transform: none; }
  .drawer__nav a:hover { padding-left: 0; }
}

/* ---------- Forced colors / high contrast ------------------------------- */
@media (forced-colors: active) {
  .plate, .sec-head, .archive__row, .press li { border-color: CanvasText; }
  .btn { border-color: ButtonText; }
}

@media (max-width: 1180px) {
  .chapter--noplate .chapter__body { grid-column: 4 / span 9; }
}
@media (max-width: 1080px) {
  .chapter--noplate .chapter__body { grid-column: 1 / span 12; }
}

/* ---------- Grid placement utilities: tablet, then single column -------- */
@media (max-width: 1080px) {
  .col-7    { grid-column: 1 / span 7; }
  .col-6    { grid-column: 1 / span 6; }
  .col-5    { grid-column: 1 / span 5; }
  .col-4    { grid-column: 1 / span 6; }
  .col-6-3  { grid-column: 7 / span 6; }
  .col-6-4  { grid-column: 7 / span 6; }
  .col-7-6  { grid-column: 7 / span 6; }
  .col-8-5  { grid-column: 7 / span 6; }
  .col-9-3  { grid-column: 9 / span 4; }
  .col-9-4  { grid-column: 8 / span 5; }
  .col-10-3 { grid-column: 1 / span 6; }
}

@media (max-width: 820px) {
  .col-12, .col-7, .col-6, .col-5, .col-4,
  .col-6-3, .col-6-4, .col-7-6, .col-8-5,
  .col-9-3, .col-9-4, .col-10-3 { grid-column: 1 / span 12; }
  .col--mid { align-self: start; }
}

@media (max-width: 520px) {
  .pair { grid-template-columns: 1fr; }
}