/* ==========================================================================
   savjidholakia.in — Responsive layer
   Breakpoints: 1280 / 1080 / 900 / 768 / 560 / 400
   Mobile is designed, not collapsed: measure, rhythm and image ratios are
   re-tuned rather than simply stacked.
   ========================================================================== */

/* ---------- Wide desktop refinements ---------- */
@media (min-width:1600px){
  :root{--shell:1420px}
  body{font-size:17.5px}
}

/* ---------- 1280 and below ---------- */
@media (max-width:1280px){
  :root{--shell:1160px}
  .nav{gap:16px}
  .nav__link{font-size:.685rem;letter-spacing:.11em}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:34px}
}

/* ---------- 1080 and below : nav switches to drawer ---------- */
@media (max-width:1140px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .hero__grid{gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:44px}
  .footer__brand{font-size:1.45rem}
  .c-lg-12,.c-lg-8,.c-lg-6,.c-lg-4{grid-column-start:auto}
  .c-lg-12{grid-column-end:span 12}
  .c-lg-8{grid-column-end:span 8}
  .c-lg-6{grid-column-end:span 6}
  .c-lg-4{grid-column-end:span 4}
}

/* ---------- 900 and below ---------- */
@media (max-width:900px){
  :root{--nav-h:64px}
  body{font-size:16.5px}
  .hero__grid{grid-template-columns:1fr;gap:38px}
  .hero{padding-top:34px}
  .hero__sub{max-width:52ch}
  .page-head__inner{grid-template-columns:1fr;gap:26px;align-items:start}
  .page-head__aside{padding-bottom:0}
  .grid{gap:26px}
  .c-md-12,.c-md-6,.c-md-4{grid-column-start:auto}
  .c-md-12{grid-column-end:span 12}
  .c-md-6{grid-column-end:span 6}
  .c-md-4{grid-column-end:span 4}
  .deflist__row{grid-template-columns:1fr;gap:12px}
  .gal-item,.gal-item.is-wide,.gal-item.is-tall{grid-column:span 6}
  .index-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .index-row__meta{grid-column:1/-1;order:-1}
  .lightbox__img{max-height:calc(100vh - 250px)}
}

/* ---------- 768 and below : tablets / large phones ---------- */
@media (max-width:768px){
  :root{--sec-y:clamp(56px,11vw,86px)}
  .c-sm-12,.c-sm-6{grid-column-start:auto}
  .c-sm-12{grid-column-end:span 12}
  .c-sm-6{grid-column-end:span 6}
  /* every 12-col child becomes full width unless explicitly told otherwise */
  .grid > [class*="c-"]:not(.c-sm-6):not(.c-sm-4){grid-column:1/-1}
  .grid > [class*="start-"]{grid-column-start:auto}
  .footer-grid{grid-template-columns:1fr;row-gap:36px;padding-bottom:40px}
  .footer__stmt,.social__note{max-width:44ch}
  .footer-base{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:30px}
  .prose p{max-width:none}
  .lede{max-width:none}
  .pullquote{padding-left:18px}
  .dropcap::first-letter{font-size:3.4em}
  .tl-media{max-width:100%}
  .mobile-nav__link{font-size:1.4rem}
}

/* ---------- 560 and below : phones ---------- */
@media (max-width:560px){
  :root{--gutter:20px;--sec-y:clamp(48px,12vw,72px)}
  body{font-size:16px;line-height:1.66}
  h1,.h1{font-size:clamp(2.15rem,10.2vw,2.9rem);letter-spacing:-.022em}
  h2,.h2{font-size:clamp(1.72rem,7.6vw,2.3rem)}
  h3,.h3{font-size:clamp(1.24rem,5.4vw,1.55rem)}
  .lede{font-size:1.09rem;line-height:1.55}
  .hero__sub{font-size:1.06rem}
  /* Micro-label floor on phones: tracked uppercase text stays >= 11.5px. */
  .eyebrow{font-size:.73rem;letter-spacing:.16em;gap:10px;margin-bottom:20px}
  .hero__kicker,.index-row__meta,.stat__note,.label,.footer__h,
  .contact-line dt,.hero__meta dt,.mobile-nav__link .idx,.social__note{font-size:.73rem}
  .footer__h{letter-spacing:.16em}
  figcaption{font-size:.76rem}
  .small{font-size:.88rem}
  .eyebrow::after{max-width:56px}
  .gal-item,.gal-item.is-wide,.gal-item.is-tall{grid-column:1/-1}
  .gal-item__cap{opacity:1;transform:none;position:static;background:none;color:var(--muted);padding:12px 2px 14px}
  .btn{width:100%;justify-content:center;padding:16px 20px}
  .btn.btn--inline{width:auto}
  .hero__meta{gap:18px 24px}
  .hero__meta div{min-width:calc(50% - 12px)}
  .contact-line a,.contact-line span{font-size:1.22rem;word-break:break-word}
  /* On phones the arrows move into the bottom bar so they never sit over the
     photograph; swipe remains the primary gesture. */
  .lightbox{padding:60px 12px 104px}
  .lightbox__img{max-height:calc(100vh - 232px)}
  .lb-btn{width:46px;height:46px}
  .lb-prev,.lb-next{top:auto;bottom:16px;transform:none}
  .lb-prev{left:calc(50% - 96px)}
  .lb-next{right:calc(50% - 96px)}
  .lb-count{bottom:31px}
  .frame--3x2,.frame--16x9{aspect-ratio:4/3}
  .stat__num{font-size:2.35rem}
  .principle{padding-top:20px}
  .timeline::before{left:3px}
  .tl-item::before{left:-1px}
  .tl-item{padding-left:26px}
  figcaption{padding-left:12px;font-size:.7rem}
}

/* ---------- 400 and below : small phones ---------- */
@media (max-width:400px){
  :root{--gutter:16px}
  .stat__num{font-size:1.95rem;letter-spacing:-.02em}
  .brand__name{font-size:1.04rem}
  h1,.h1{font-size:2.05rem}
  .dropcap::first-letter{font-size:3em}
  .hero__meta div{min-width:100%}
  .mobile-nav__link{font-size:1.28rem;padding:13px 0}
}

/* ---------- Landscape phones: keep the drawer usable ---------- */
@media (max-height:520px) and (max-width:1140px){
  .mobile-nav{padding-top:calc(var(--nav-h) + 18px);padding-bottom:24px}
  .mobile-nav__link{font-size:1.12rem;padding:10px 0}
  .mobile-nav__foot{padding-top:18px}
}

/* ---------- Pointer-coarse: bigger targets, no hover-only affordances ---------- */
@media (hover:none){
  .gal-item__cap{opacity:1;transform:none}
  a.index-row:hover{padding-left:0}
  .nav__link{padding:12px 0}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.mobile-nav,.lightbox,.nav-toggle,.site-footer{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  [data-reveal]{opacity:1!important;transform:none!important}
  .plate,.frame{border:1px solid #ccc}
}