/* ============================================================
   sanjaykharat.com — Responsive layer
   Breakpoint ladder: 360 · 390 · 430 · 768 · 1024 · 1280 · 1440 · 1920+
   Mobile is re-composed, not shrunk.
   ============================================================ */

/* ---------- Ultra-wide: 1920px and above ---------- */
@media (min-width:1921px){
  :root{--maxw:1720px;--gut:72px;--band:150px;--rail:212px}
  body{font-size:17.5px}
}

/* ---------- Large desktop: 1440–1920 ---------- */
@media (min-width:1440px) and (max-width:1920px){
  :root{--maxw:1560px}
}

/* ---------- Desktop: 1280–1439 ---------- */
@media (max-width:1439px){
  :root{--rail:clamp(88px,11vw,160px)}
}

/* ---------- Small desktop / large laptop: up to 1279 ---------- */
@media (max-width:1279px){
  :root{--gut:clamp(20px,3.6vw,40px)}
  .hero{grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,.8fr)}
  .domain__in{grid-template-columns:minmax(0,.4fr) minmax(0,1fr) minmax(0,.95fr)}
  .foot__top{grid-template-columns:1.2fr 1fr 1fr}
}

/* ---------- Tablet landscape / small laptop: up to 1024 ---------- */
@media (max-width:1024px){
  :root{--rail:clamp(72px,9vw,112px);--band:clamp(56px,7.4vw,92px)}

  .hero{
    grid-template-columns:var(--rail) minmax(0,1fr);
    row-gap:clamp(30px,4.6vw,48px);
  }
  .hero__plate{grid-column:2;padding-top:0;max-width:560px}
  .hero__tag{position:static;display:block;margin-bottom:12px}

  .essay{grid-template-columns:minmax(0,var(--rail)) minmax(0,1fr)}
  .essay__aside{grid-column:2;position:static}
  .marg{position:static;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}

  .chron__row{grid-template-columns:minmax(0,.4fr) minmax(0,1fr)}
  .chron__aside{grid-column:2;max-width:520px}

  .domain__in{grid-template-columns:minmax(0,.34fr) minmax(0,1fr)}
  .domain__media{grid-column:2;max-width:560px}
  .domain__n{font-size:clamp(46px,8vw,80px)}

  .splitfeature{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .splitfeature .plate{max-width:640px}

  .story{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .story__plate{max-width:640px}

  .contact{grid-template-columns:1fr;gap:clamp(34px,5vw,54px)}
  .ledger__in{grid-template-columns:1fr;gap:clamp(26px,4vw,42px)}
  .ledger__in .plate{max-width:600px}

  .closing__in{grid-template-columns:1fr;gap:clamp(26px,4vw,40px);align-items:start}

  .record__row{grid-template-columns:minmax(0,.34fr) minmax(0,1fr);row-gap:8px}
  .record__row .record__v{grid-column:2}

  .stmt__sub{grid-template-columns:1fr;gap:22px}

  .arch{grid-column:span 6}
  .arch--w{grid-column:span 12}
  .arch--h{grid-column:span 6}
  .arch--m{grid-column:span 6}
  .arch--half{grid-column:span 6}

  .foot__top{grid-template-columns:1fr 1fr;row-gap:clamp(30px,4vw,44px)}
  .foot__brand{grid-column:1 / -1}
}

/* ---------- Tablet portrait & below: up to 900 ---------- */
@media (max-width:900px){
  .nav__list{display:none}
  .nav__toggle{display:inline-flex}
  .tenets{grid-template-columns:1fr}
  .tenets > article,
  .tenets > article:nth-child(2n){
    padding-right:0;padding-left:0;border-right:0;
  }
}

/* ---------- Mobile: up to 767 — re-composed ---------- */
@media (max-width:767px){
  :root{
    --gut:20px;
    --band:clamp(44px,11vw,64px);
    --rail:0px;
  }

  body{line-height:1.6}

  /* The index rail collapses into an inline stamp above content */
  .track{grid-template-columns:1fr;gap:16px}
  .track__rail{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}
  .track__rail::before{width:26px;margin:0}

  /* HERO */
  .hero{
    grid-template-columns:1fr;
    padding-top:clamp(24px,7vw,36px);
    padding-bottom:clamp(36px,10vw,56px);
    row-gap:26px;
  }
  .hero__rail{flex-direction:row;align-items:center;gap:12px;padding-top:0}
  .hero__rail::before{width:24px;height:1px}
  .hero__rail .stamp{writing-mode:horizontal-tb;height:auto;letter-spacing:.22em}
  .hero__title .ln--in{padding-left:0}
  .hero__plate{grid-column:1;max-width:none}
  .hero__acts .btn{flex:1 1 auto;justify-content:center}

  /* RECORD */
  .record__row{grid-template-columns:1fr;gap:8px;padding-block:20px}
  .record__row .record__v{grid-column:1}

  /* THEMES */
  .theme{grid-template-columns:1fr;gap:10px;padding-block:24px}
  .theme__n{font-size:26px}

  /* STRIPS — keep swipeable but bleed to the gutter edge */
  .strip,.focus{
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scroll-padding-left:var(--gut);
  }
  .strip__cell{flex-basis:min(74vw,300px);padding-right:20px}
  .focus__c{flex-basis:min(78vw,320px);padding-right:22px}

  /* ESSAY */
  .essay{grid-template-columns:1fr;gap:22px}
  .essay__side{position:static;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
  .essay__aside{grid-column:1}
  .marg{grid-template-columns:1fr;gap:18px}
  .dropcap::first-letter{font-size:3.4em}
  .factgrid > div{border-right:0;padding-right:0}

  /* JOURNEY */
  .chron__row{grid-template-columns:1fr;gap:16px;padding-block:30px}
  .chron__when{
    position:static;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
    border-bottom:1px solid var(--hair-soft);padding-bottom:12px;
  }
  .chron__yr{font-size:clamp(26px,8.4vw,34px);margin:0}
  .chron__aside{grid-column:1;max-width:none}

  /* WORK */
  .domain__in{grid-template-columns:1fr;gap:16px}
  .domain__media{grid-column:1;max-width:none;margin-top:6px}
  .domain__n{font-size:clamp(44px,15vw,64px);-webkit-text-stroke-width:1px}

  /* IMPACT */
  .stmt__big{max-width:none}
  .ledger__list li{grid-template-columns:1fr;gap:7px}

  /* GALLERY */
  .archive{gap:14px}
  .arch,.arch--w,.arch--h,.arch--m,.arch--half,.arch--f{grid-column:span 12}
  .archgroup__head{gap:6px}
  .lb{padding:12px 14px calc(14px + env(safe-area-inset-bottom))}
  .lb__foot{gap:12px}
  .lb__cap{font-size:13px;order:2;width:100%}
  .lb__nav{order:1;width:100%;justify-content:space-between}
  .lb__b{flex:1;max-width:none}

  /* CONTACT */
  .cdir__row{grid-template-columns:1fr;gap:7px;padding-block:18px}
  .cacts .btn{flex:1 1 100%;justify-content:center}
  .form__foot{gap:16px}
  .form__foot .btn{width:100%;justify-content:center}

  /* FOOTER */
  .foot__top{grid-template-columns:1fr;row-gap:34px;padding-bottom:36px}
  .foot__brand{grid-column:1}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:8px}
  .social__i{width:44px;height:44px}
}

/* ---------- Compact phones: up to 430 ---------- */
@media (max-width:430px){
  :root{--gut:18px}
  .display--xl{font-size:clamp(40px,12.2vw,54px)}
  .nav__in{--navh:60px}
  .plate__cap{flex-direction:column;gap:6px}
  .arch__meta{flex-direction:column;gap:6px}
  .chron__facts div{flex-direction:column;gap:2px}
  .chron__facts dd{text-align:left}
}

/* ---------- Very small phones: up to 360 ---------- */
@media (max-width:360px){
  :root{--gut:16px}
  body{font-size:15px}
  .display--xl{font-size:40px;letter-spacing:-.026em}
  .display--lg{font-size:34px}
  .nav__mark{font-size:11px;letter-spacing:.14em}
  .gate__card{padding:24px 20px}
  .strip__cell{flex-basis:82vw}
  .focus__c{flex-basis:84vw}
  .btn{padding:13px 18px;letter-spacing:.12em}
}

/* ---------- Short landscape phones ---------- */
@media (max-height:520px) and (orientation:landscape){
  .nav__panel{padding-block:20px}
  .nav__panel a{font-size:22px;padding:10px 0}
  .gate{padding-block:24px}
}

/* ---------- Print ---------- */
@media print{
  .nav,.foot,.lb,.skip,.hero__acts,.cacts,.form{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .plate__frame{border:1px solid #ccc;background:#fff}
  .rise,.wipe,.linegrow{opacity:1!important;transform:none!important;clip-path:none!important}
}