/* ============================================================
   damodargajanannaik.com — RESPONSIVE
   Base stylesheet is mobile-first; this file composes upward
   and recomposes (not shrinks) key modules per breakpoint.
   ============================================================ */

/* ---------- SMALL PHONES (≤360px) — tighten, never clip ---------- */
@media (max-width:380px){
  :root{--gutter:18px;--bar:58px;}
  body{font-size:16px;}
  .d-xxl{font-size:2.5rem;}
  .eyebrow{font-size:.7rem;letter-spacing:.16em;}
  .ledger__row{grid-template-columns:1fr;gap:6px;}
  .entry__yr{font-size:2.2rem;}
  .foot__base{font-size:.7rem;letter-spacing:.08em;}
  .social a{width:44px;height:44px;}
  .gate__field{letter-spacing:.22em;font-size:1rem;}
  .gate__field::placeholder{letter-spacing:.22em;}
}

/* ---------- ≥560px ---------- */
@media (min-width:560px){
  .ledger__row{grid-template-columns:minmax(150px,190px) 1fr;}
  .crow{grid-template-columns:minmax(140px,190px) 1fr;align-items:baseline;gap:clamp(16px,3vw,40px);}
  .fold{grid-template-columns:minmax(150px,200px) 1fr;gap:clamp(16px,2.6vw,38px);align-items:baseline;}
  .dossier__strip{grid-template-columns:repeat(2,1fr);}
  .foot__base{flex-wrap:nowrap;}
}

/* ---------- ≥720px (large phone landscape / small tablet) ---------- */
@media (min-width:720px){
  .chapter{
    grid-template-columns:auto 1fr auto;
    align-items:baseline;gap:clamp(18px,3vw,44px);
  }
  .chapter__n{width:3.2em;}
  .chapter__t{grid-row:1;}
  .chapter__d{grid-column:2;grid-row:2;}
  .chapter__go{grid-column:3;grid-row:1;}
  .cat__item{grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,52px);}
  .cat__no{width:2.4em;}
  .index-ov__d{display:block;}
  .dossier__strip{grid-template-columns:repeat(3,1fr);}
  .feature{grid-template-columns:1fr 1fr;}
  .stagger{grid-template-columns:repeat(2,1fr);align-items:start;}
  .foot__grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- ≥900px (tablet / iPad portrait & up) ---------- */
@media (min-width:900px){
  .hero__grid{grid-template-columns:1fr minmax(280px,38%);align-items:start;}
  .hero__say{grid-column:1;}
  .hero__mount{grid-column:2;grid-row:2;}
  .entry{grid-template-columns:minmax(180px,24%) 1fr;gap:clamp(24px,4vw,66px);align-items:start;}
  .case__grid{grid-template-columns:minmax(190px,24%) 1fr;align-items:start;}
  .reading{grid-template-columns:1fr minmax(230px,27%);}
  .reading__body{grid-column:1;grid-row:1;}
  .reading__side{grid-column:2;grid-row:1;position:sticky;top:calc(var(--bar) + 30px);align-self:start;}
  .dossier{grid-template-columns:minmax(0,1fr) minmax(240px,30%);align-items:start;}
  .dossier__side{position:sticky;top:calc(var(--bar) + 30px);align-self:start;}
  .foot__grid{grid-template-columns:1.5fr 1fr 1.35fr;}
  .phase__head{grid-template-columns:minmax(150px,200px) 1fr;align-items:baseline;gap:clamp(16px,2.6vw,38px);}
  .exhibit__lead{display:grid;grid-template-columns:1fr minmax(240px,30%);gap:clamp(24px,3.4vw,52px);align-items:start;}
}

/* ---------- ≥1080px ---------- */
@media (min-width:1080px){
  .hero::before{display:block;}
  .stagger{grid-template-columns:repeat(3,1fr);}
  .case__grid{grid-template-columns:minmax(210px,21%) 1fr;}
  .sect-head--split{display:grid;grid-template-columns:1fr minmax(280px,34%);gap:clamp(28px,4vw,64px);align-items:end;}
  .sect-head--split .lede{margin-top:0;}
}

/* ---------- ≥1240px — inline navigation replaces the index overlay ---------- */
@media (min-width:1240px){
  :root{--bar:78px;}
  .nav{display:block;}
  .menu-btn{display:none;}
  .hero__grid{grid-template-columns:1fr minmax(320px,34%);}
  .entry{grid-template-columns:minmax(220px,22%) 1fr;}
  .reading{grid-template-columns:1fr minmax(280px,25%);gap:clamp(46px,4.4vw,84px);}
}

/* ---------- ≥1440px ---------- */
@media (min-width:1440px){
  body{font-size:17.5px;}
  .prose p,.fold__v,.case__bv,.cat__p{font-size:1.03rem;}
}

/* ---------- ≥1680px ---------- */
@media (min-width:1680px){
  :root{--gutter:88px;}
}

/* ---------- LANDSCAPE PHONES — keep the gate usable ---------- */
@media (max-height:520px) and (orientation:landscape){
  .gate{padding-block:44px;align-items:flex-start;}
  .index-ov__t{font-size:1.35rem;}
  .index-ov__a{padding-block:11px;}
}

/* ---------- PRINT ---------- */
@media print{
  .masthead,.index-ov,.menu-btn,.foot__nav,.social,.crumb{display:none!important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .foot{background:#fff;color:#000;border-top:1px solid #000;}
  .foot__brand .display,.foot__name,.foot__contact a{color:#000;}
  a{text-decoration:underline;}
  .plate{border:1px solid #999;break-inside:avoid;}
  .rv{opacity:1!important;transform:none!important;}
}

/* ---------- MASTHEAD FIT — narrow viewports ---------- */
@media (max-width:600px){
  .wordmark__m{display:none;}
  .menu-btn{padding:11px 13px;letter-spacing:.12em;}
  .close-btn{padding:11px 13px;letter-spacing:.12em;}
}

/* ---------- ARCHIVE — aligned plate rows ----------
   Plates in a row share one image band, so their mount edges and caption
   rules line up. object-fit:scale-down renders each photograph at its own
   proportions, centred, and never larger than its own resolution — so the
   band aligns the mounts without resizing the pictures to match.
   --band sets the band shape per row (landscape vs portrait sets). */
@media (min-width:720px){
  .stagger--row{align-items:stretch;}
  .stagger--row .plate{display:flex;flex-direction:column;}
  .stagger--row .plate__img{
    width:100%;
    height:auto;
    max-width:none;
    aspect-ratio:var(--band,10/9);
    object-fit:scale-down;
    object-position:center bottom;  /* smaller plates sit on the row baseline */
    background:transparent;
  }
}

/* Two-column range: the third plate sits alone on its own row, so there is
   nothing for it to align with. Drop the band and let it size naturally
   (scale-down still keeps it at or below its native resolution). */
@media (min-width:720px) and (max-width:1079px){
  .stagger--row .plate:nth-child(3) .plate__img{aspect-ratio:auto;}
}