/* ==========================================================================
   RESPONSIVE — layouts are RECOMPOSED for each breakpoint, not just shrunk.
   Breakpoints: 1180 / 1024 / 860 / 640 / 460
   ========================================================================== */

/* ---------- ≤1180px : navigation becomes a drawer ---------- */
@media (max-width:1180px){
  .nav{display:none;}
  .burger{display:block;}
  .masthead__inner{min-height:68px;}
  .hero__inner{grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr);}
}

/* ---------- ≤1024px : two-column editorial becomes single flow ---------- */
@media (max-width:1024px){
  :root{--sec-y:clamp(3.5rem,9vw,6rem);}

  /* Hero re-composed: typography block first, portrait beneath, rail removed */
  .hero__rail{display:none;}
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,6vw,3rem);}
  .hero__portrait{max-width:520px;width:100%;margin-inline:auto;}
  .hero__portrait img{max-height:min(58vh,560px);}
  .hero__scroll{margin-inline:auto;}

  .intro__grid,.philos,.split,.split--a,.split--b,.closing__grid{grid-template-columns:minmax(0,1fr);}
  .philos .plate,.closing__grid .plate{max-width:460px;}
  .intro__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;}

  .phead--geo .phead__grid,
  .phead--movement .phead__grid,
  .phead--carto .phead__grid,
  .phead--museum .phead__grid{grid-template-columns:minmax(0,1fr);gap:1.8rem;align-items:start;}
  .coords{border-left:0;border-top:1px solid var(--line-strong);padding-left:0;padding-top:1.4rem;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 2rem;}

  .colophon__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .colophon__grid>*:first-child{grid-column:1/-1;}

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

  /* Museum: stage over a horizontal thumbnail strip */
  .museum__stage{grid-template-columns:minmax(0,1fr);}
  .thumbs{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:112px;
    max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:.6rem;
    scroll-snap-type:x proximity;
  }
  .thumbs::-webkit-scrollbar{height:4px;width:auto;}
  .thumb{scroll-snap-align:center;}
  .stage__frame{min-height:clamp(260px,42vh,420px);}
  .stage__frame img{max-height:min(46vh,440px);}
}

/* ---------- ≤860px : the path becomes a vertical journey ---------- */
@media (max-width:860px){
  .path__scroller{overflow:visible;scroll-snap-type:none;padding-bottom:0;}
  .path__track{flex-direction:column;min-width:0;gap:0;padding-top:0;padding-left:1.6rem;}
  .path__line{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,var(--forest-600) 4%,var(--forest-600) 96%,transparent);}
  .milestone{width:100%;padding:0 0 2.4rem 1.6rem;border-left:0;}
  .milestone:first-child{padding-left:1.6rem;}
  .milestone__dot,.milestone:first-child .milestone__dot{left:-1.6rem;top:.45rem;}
  .milestone__year{margin-top:0;}
  .path__hint{display:none;}

  .cols{column-count:1;column-rule:0;}
  .chain{grid-template-columns:minmax(0,1fr);}
  .chain__step{border-right:0;border-bottom:1px solid var(--line);}
  .chain__step:last-child{border-bottom:0;}
  .section--dark .chain__step{border-bottom-color:var(--line-dark);}

  .compare{grid-template-columns:minmax(0,1fr);}
  .compare__col:nth-child(odd){border-right:0;}

  .structure{grid-template-columns:minmax(0,1fr)!important;}

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

  .phead--mag .magbar{gap:.45rem 1.4rem;}
  .phead--quiet .phead__grid{text-align:left;justify-items:start;}
  .phead--quiet .crumbs{justify-content:flex-start;}

  /* Lightbox controls move to the bottom bar for thumb reach */
  .lightbox__body{grid-template-columns:minmax(0,1fr);padding-inline:1rem;}
  .lightbox__body .lb-btn{display:none;}
  .lightbox__cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;}
  .lightbox__cap .lb-btn{display:grid;}
  .lightbox__cap .lb-text{min-width:0;}
  .lightbox__figure img{max-height:calc(100vh - 300px);}
}

/* ---------- ≤640px : phones ---------- */
@media (max-width:640px){
  :root{--gutter:1.25rem;--sec-y:3.25rem;}

  .brand__sub{display:none;}
  .brand__name{font-size:1rem;}

  .hero{padding-block:2.5rem 3rem;}
  .hero__name{font-size:clamp(2.15rem,9.5vw,3.1rem);}
  .hero__alias li{font-size:.6875rem;padding:.35rem .6rem;letter-spacing:.12em;}
  .hero__actions{gap:.75rem;}
  .hero__actions .btn{width:100%;justify-content:center;}
  .hero__portrait img{max-height:none;width:100%;}
  .hero__dates{letter-spacing:.2em;font-size:.8125rem;}

  .colophon__grid{grid-template-columns:minmax(0,1fr);}
  .colophon__bottom{flex-direction:column;align-items:flex-start;gap:.7rem;}

  .themes,.g-4{grid-template-columns:minmax(0,1fr);}

  .chapter{grid-template-columns:auto minmax(0,1fr);gap:1rem;padding-block:1.4rem;}
  .chapter__go{display:none;}
  .chapter:hover,.chapter:focus-visible{padding-left:.75rem;}

  .ladder__row{grid-template-columns:minmax(0,1fr);gap:.5rem;}
  .ledger__row{grid-template-columns:minmax(0,1fr);gap:.4rem;}

  .quote{padding-left:1rem;}
  .dropcap::first-letter{font-size:3.4em;}

  .filters{gap:.4rem;}
  .filters button{padding:.5rem .8rem;font-size:.6875rem;letter-spacing:.12em;}

  .contact__grid{grid-template-columns:minmax(0,1fr);}
  .field input,.field textarea{font-size:16px;} /* prevents iOS zoom-on-focus */

  .lightbox__figure img{max-height:calc(100vh - 320px);}
  .lightbox__cap h3{font-size:1rem;}
  .lightbox__cap p{font-size:.8125rem;}

  .coords{grid-template-columns:minmax(0,1fr);}
  .geoword{font-size:clamp(2rem,11vw,3.4rem);}
}

/* ---------- ≤460px : small phones ---------- */
@media (max-width:460px){
  .intro__stats{grid-template-columns:minmax(0,1fr);}
  .drawer{padding-top:5rem;justify-content:flex-start;}
  .drawer__nav a{font-size:1.4rem;padding:.4rem 0;}
  .social__item{width:38px;height:38px;}
  .thumbs{grid-auto-columns:92px;}
  .plate{padding:.45rem;}
}

/* ---------- Landscape phones: keep the drawer usable ---------- */
@media (max-height:520px) and (orientation:landscape){
  .drawer{justify-content:flex-start;padding-top:5rem;}
  .drawer__nav a{font-size:1.25rem;padding:.3rem 0;}
  .hero__portrait img{max-height:70vh;}
}

/* ---------- Print ---------- */
@media print{
  .masthead,.drawer,.burger,.hero__scroll,.lightbox,.filters,.thumbs,.social{display:none!important;}
  body{background:#fff;color:#000;}
  body::after{display:none;}
  .section--dark,.section--indigo,.hero,.path,.closing,.colophon,.museum{background:#fff!important;color:#000!important;}
  .section--dark h1,.section--dark h2,.section--dark h3,.hero__name,.milestone h3{color:#000!important;}
  a{text-decoration:underline;}
}