/* ==========================================================================
   jatindranathdas.com — responsive recomposition
   Breakpoints: 1280 / 1100 (nav collapse) / 900 / 700 / 520 / 380
   Layouts are re-composed, not shrunk. Images are never cropped at any size.
   ========================================================================== */

/* ---------- 1280: ease the outer gutters --------------------------------- */
@media (max-width:1280px){
  :root{--spine:clamp(34px,4.4vw,66px)}
  .exhibit{grid-template-columns:minmax(0,100px) minmax(0,1fr) minmax(0,280px)}
  .installation__grid{grid-template-columns:minmax(0,1fr) minmax(0,300px) minmax(0,1fr)}
}

/* ---------- 1100: navigation collapses to the drawer --------------------- */
@media (max-width:1100px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav__inner{padding-right:clamp(8px,2vw,18px)}

  /* the exhibition drops its side panel below the stage */
  .exhibit{
    grid-template-columns:minmax(0,96px) minmax(0,1fr);
    grid-template-areas:"rail stage" "panel panel";
  }
  .exhibit__rail{grid-area:rail;max-height:min(56vh,520px)}
  .exhibit__stage{grid-area:stage}
  .exhibit__panel{grid-area:panel;position:static}
  .exhibit__nav{max-width:420px}
}

/* ---------- 900: two-column editorial becomes single column -------------- */
@media (max-width:900px){
  :root{--nav-h:58px}

  .grid--7-5,.grid--5-7,.grid--4-8,.grid--8-4,.grid--1-1{grid-template-columns:minmax(0,1fr)}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sticky-col{position:static}

  /* HOME hero: the mount leads, the type follows beneath it */
  .installation{min-height:0;padding-top:clamp(30px,7vw,52px);padding-bottom:clamp(46px,9vw,72px)}
  .installation__grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"mount" "left" "right";
    gap:clamp(24px,5vw,40px);text-align:left;
  }
  .installation__mount{grid-area:mount;max-width:340px;margin:0 auto;width:100%}
  .installation__side--left{grid-area:left;align-items:flex-start;text-align:left}
  .installation__side--right{grid-area:right;align-items:flex-start;text-align:left}
  .installation__sub{max-width:38ch}
  .installation__scroll{display:none}
  .counter{
    position:static;transform:none;flex-direction:row;align-items:center;
    gap:14px;margin-top:24px;
  }
  .counter__track{width:100%;max-width:220px;height:1px}
  .counter__fill{width:var(--counter,4%);height:1px}

  /* the fixed passage indicator is replaced by an inline one on small screens */
  .passage{display:none}

  .doc-hero__grid,.dossier-hero__grid,.record-hero__grid,
  .chrono-hero__grid,.plaque-hero__inner{grid-template-columns:minmax(0,1fr)}
  .doc-hero__grid{gap:clamp(26px,5vw,40px)}
  .dossier-hero__grid{gap:clamp(26px,5vw,40px)}

  .movement__grid{grid-template-columns:minmax(0,1fr);gap:clamp(18px,4vw,28px)}
  .movement__aside{
    position:static;display:flex;align-items:baseline;gap:16px;
    padding-bottom:14px;border-bottom:1px solid var(--rule-dark);
  }
  .band--light .movement__aside,.band--bone .movement__aside{border-bottom-color:var(--rule-light)}
  .movement__phase{margin-bottom:0;font-size:clamp(2rem,7vw,2.6rem)}

  .sixtythree__grid{grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,40px)}
  .spine__body--with-plate{grid-template-columns:minmax(0,1fr)}
  .spine__body--with-plate .plate{max-width:280px}
  .spine__age{display:none}

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

  .pager{grid-template-columns:minmax(0,1fr)}
  .pager__item--next{text-align:left}

  /* 63-day strip: still 63 columns, but shorter and denser */
  .daystrip{height:56px;gap:1px}
  .daystrip__day{height:10px}
  .daystrip__day.is-marked{height:38px}
  .daystrip__day.is-terminal{height:56px}
}

/* ---------- 700: tablet portrait / large phone --------------------------- */
@media (max-width:700px){
  body{font-size:16px}
  :root{--spine:30px;--pad-x:20px}

  .band{padding-left:var(--spine);padding-right:var(--pad-x)}
  .time-rule{left:15px}
  .time-rule__cap{font-size:8px;letter-spacing:.1em}

  .grid--3{grid-template-columns:minmax(0,1fr)}

  .fact{grid-template-columns:minmax(0,1fr);gap:6px}
  .contact-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .entry{grid-template-columns:minmax(0,1fr);gap:10px}
  .entry__n{padding-top:0}
  .demand{grid-template-columns:minmax(0,1fr);gap:6px}
  .yearrail__row{grid-template-columns:minmax(0,1fr);gap:10px}
  .yearrail__year{font-size:clamp(1.6rem,7vw,2.1rem)}

  .spine{padding-left:24px}
  .spine__dot{left:-24px}
  .ladder{padding-left:0}
  .ladder::before{left:0}
  .ladder__marker{position:static;width:auto;margin-bottom:14px;padding-left:24px}
  .ladder__phase{padding-left:24px}
  .ladder__silence{padding-left:24px}
  .ladder__tick{left:0;top:auto}

  /* exhibition: stage first, thumbnails become a horizontal filmstrip */
  .exhibit{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"stage" "panel" "rail";
    gap:20px;
  }
  .exhibit__rail{
    flex-direction:row;overflow-x:auto;overflow-y:hidden;
    max-height:none;padding:0 0 8px;gap:8px;
    -webkit-overflow-scrolling:touch;
  }
  .exhibit__thumb{flex:0 0 84px;width:84px}
  .exhibit__thumb img{height:62px}
  .exhibit__stage{min-height:clamp(260px,46vh,380px);padding:16px}
  .exhibit__stage img{max-height:min(46vh,380px)}

  .lightbox__arrow{width:42px;height:56px}
  .lightbox__cap{text-align:left;font-size:.86rem}

  .footer__base{flex-direction:column;align-items:flex-start;gap:12px}
  .footer__nav{columns:1}

  .quote{padding-left:16px}
  .monument__num{font-size:clamp(7rem,42vw,11rem)}
  .sixtythree__num{font-size:clamp(8rem,44vw,13rem)}

  .record-hero__top{gap:8px 18px;font-size:.55rem;letter-spacing:.14em}
}

/* ---------- 520: small phone --------------------------------------------- */
@media (max-width:520px){
  :root{--spine:24px;--pad-x:16px}
  .time-rule{left:12px}
  .time-rule__cap{display:none}

  .nav__brand-dates{display:none}
  .nav__brand-name{font-size:.82rem;letter-spacing:.01em}

  .installation__mount{max-width:100%}
  .mount{padding:14px}
  .mount::before{inset:7px}
  .mount__inner{padding:12px}

  .plate__mat{padding:12px}
  .plate__label{font-size:.55rem;letter-spacing:.16em;gap:8px;flex-wrap:wrap}

  .daystrip{height:44px}
  .daystrip__day{height:8px}
  .daystrip__day.is-marked{height:30px}
  .daystrip__day.is-terminal{height:44px}
  .daystrip__legend{gap:12px;font-size:.52rem;letter-spacing:.1em}

  .btn,.form__submit{padding:15px 20px;font-size:.64rem;letter-spacing:.16em}
  .exhibit__meta dl{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .exhibit__meta dd{margin-bottom:10px}

  .mobilenav__link{font-size:.98rem;padding:14px 2px}
}

/* ---------- 380: very small phone ---------------------------------------- */
@media (max-width:380px){
  :root{--spine:20px;--pad-x:14px}
  .time-rule{left:10px}
  .installation__name{font-size:clamp(1.9rem,10vw,2.4rem)}
  .record-hero__title{font-size:clamp(2rem,13vw,2.8rem)}
  .after-hero__title{font-size:clamp(1.9rem,11vw,2.6rem)}
  .daystrip{gap:0}
}

/* ---------- landscape phones: keep hero from overflowing ----------------- */
@media (max-height:560px) and (orientation:landscape){
  .installation,.slow-hero{min-height:0}
  .installation{padding-top:34px;padding-bottom:44px}
  .counter{display:none}
  .installation__scroll{display:none}
}

/* ---------- touch devices: no hover-only affordances --------------------- */
@media (hover:none){
  .btn::before,.form__submit::before{display:none}
  .btn:active,.form__submit:active{background:var(--amber);color:#160f04}
  .nav__link::after{display:none}
  .nav__link[aria-current="page"]{color:var(--amber-soft)}
}

/* ---------- print --------------------------------------------------------- */
@media print{
  .nav,.mobilenav,.time-rule,.passage,.grain,.counter,.lightbox,
  .installation__scroll,.pager,.exhibit__rail,.exhibit__nav{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .band,.installation,.doc-hero,.dossier-hero,.record-hero,.slow-hero,
  .chrono-hero,.after-hero,.exh-hero,.plaque-hero,.closing{
    background:#fff!important;color:#000!important;padding:14pt 0!important;
  }
  .ghost,.bar-field,.footer__ghost{display:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  .reveal,.fade-img{opacity:1!important;transform:none!important}
}

/* --- ladder: on small screens the markers move above the text ------------ */
@media (max-width:700px){
  .ladder{--ladder-pad:24px;--ladder-line:0px;padding-left:24px}
  .ladder::before{left:0}
  .ladder__marker{position:static;width:auto;margin-bottom:12px;justify-content:flex-start}
  .ladder__tick{left:0;top:auto;display:none}
  .ladder__silence::before{left:-24px}
  .ladder__phase,.ladder__silence{padding-left:0}
}

/* --- the hero stops being a flex row once the counter joins the flow ------
   Below 900px the 01–63 indicator becomes an inline element rather than an
   absolutely positioned one, so the hero must stack instead of centring. */
@media (max-width:900px){
  .installation{display:block}
  .installation__grid{width:100%}
  .counter{
    display:flex;position:static;transform:none;
    flex-direction:row;align-items:center;gap:14px;
    margin-top:clamp(24px,4vw,34px);
  }
}