/* ==========================================================================
   wabangjamir.com — Responsive layer
   Breakpoints: 1240 / 1080 / 900 / 720 / 560 / 400
   ========================================================================== */

/* ---------- <= 1240px ---------------------------------------------------- */
@media (max-width:1240px){
  .nav__links{gap:14px;}
  .nav__links a{font-size:.6875rem;letter-spacing:.055em;}
  .chain{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(18px,2.6vw,26px);}
  .chain__c:nth-child(3)::after{display:none;}
}

/* ---------- <= 1080px : switch to drawer navigation ---------------------- */
@media (max-width:1080px){
  .nav__links{display:none;}
  .nav__toggle{display:flex;}

  .hero__grid{grid-template-columns:1fr;gap:clamp(32px,6vw,48px);}
  .hero__fig{order:-1;max-width:520px;}
  .hero__fig .plate img{max-height:min(58vh,560px);}
  .hero__stmt{max-width:32ch;}

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

  .profile{grid-template-columns:1fr;gap:clamp(30px,5vw,44px);}
  .profile__aside{position:static;max-width:440px;}

  .thesis{grid-template-columns:1fr;gap:clamp(14px,2.6vw,20px);padding-block:clamp(32px,4.6vw,46px);}
  .thesis__k{position:static;}

  .latest{grid-template-columns:1fr;gap:clamp(26px,4vw,38px);}
  .latest .plate{max-width:520px;}

  .cityhead{grid-template-columns:1fr;gap:clamp(26px,4vw,38px);align-items:start;}
  .cityhead .plate{max-width:480px;}

  .urban{grid-template-columns:1fr;}

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

/* ---------- <= 900px ----------------------------------------------------- */
@media (max-width:900px){
  :root{--nav-h:66px;}

  .d1{font-size:clamp(2.6rem,9vw,4rem);}
  .d2{font-size:clamp(2rem,7vw,3rem);}

  /* career signal: horizontal scroll rail keeps the diagonal read intact */
  .signalrow{
    grid-template-columns:repeat(5,minmax(210px,1fr));
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:18px;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
  }
  .signalrow::before{left:var(--gut);right:var(--gut);}
  .step{scroll-snap-align:start;}

  .chain{grid-template-columns:repeat(2,minmax(0,1fr));}
  .chain__c::after{display:none;}

  /* career bands stack */
  .band{
    grid-template-columns:1fr;
    gap:clamp(12px,2.4vw,18px);
    padding-block:clamp(26px,4.4vw,36px);
  }
  .band__rail{display:none;}
  .band__yr{font-size:clamp(2.2rem,10vw,3rem);}
  .band__side{
    border-top:1px solid var(--hair);
    padding-top:14px;margin-top:4px;
    display:flex;flex-wrap:wrap;gap:4px 20px;line-height:1.7;
  }
  .band__side b{margin-bottom:0;}

  /* intelligence flow stacks */
  .flow{grid-template-columns:1fr;}
  .flow__l{
    border-right:0;border-bottom:0;
    padding:clamp(24px,4vw,32px) 0 clamp(12px,2vw,16px);
    align-items:center;
  }
  .flow__l::after{
    right:auto;left:0;top:auto;bottom:-4px;
  }
  .flow__r{padding:0 0 clamp(26px,4.4vw,36px);}

  .duo{grid-template-columns:1fr;gap:clamp(20px,3.4vw,28px);}
  .decode{grid-template-columns:1fr;}
  .decode div{border-right:0;border-bottom:1px solid var(--hair);}
  .decode div:last-child{border-bottom:0;}

  .scale{grid-template-columns:1fr;}
  .scale div{border-right:0;border-bottom:1px solid var(--hair);padding-right:0;}
  .scale div:last-child{border-bottom:0;}

  .cgrid{grid-template-columns:1fr;gap:clamp(28px,4.4vw,40px);}

  .foot__grid{grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,40px);}
  .foot__brand{grid-column:1 / -1;}

  .mast__row{align-items:flex-start;}
}

/* ---------- <= 720px ----------------------------------------------------- */
@media (max-width:720px){
  body{font-size:15.5px;}

  .hero{padding-block:clamp(28px,5vw,40px) clamp(40px,7vw,56px);}
  .hero h1{font-size:clamp(2.7rem,11.5vw,4.2rem);}
  .hero h1 .ips{letter-spacing:.32em;}
  .hero__id{gap:6px 14px;font-size:.5625rem;}
  .hero__tags{position:static;margin-top:0;border-top:0;}
  .hero__tags span{flex:1 1 100%;border-right:0;border-bottom:1px solid rgba(232,224,209,.16);text-align:left;padding:10px 14px;}
  .hero__tags span:last-child{border-bottom:0;}
  .hero__cta{gap:10px;}
  .hero__cta .btn{flex:1 1 auto;justify-content:center;}

  .ledger{grid-template-columns:1fr;}
  .ledger div{min-height:0;padding:20px 0;border-right:0;flex-direction:row;align-items:baseline;justify-content:space-between;gap:18px;}
  .ledger dt{flex:0 0 40%;}
  .ledger dd{font-size:1.1rem;text-align:right;flex:1 1 auto;}
  .ledger dd small{text-align:right;}

  .chain{grid-template-columns:1fr;}

  .plate--area{aspect-ratio:auto;}
  .plate--area img{height:auto;}
  .plate--wide{aspect-ratio:auto;}
  .plate--wide img{height:auto;}

  .brief dl{grid-template-columns:1fr;gap:.2rem;}
  .brief dt{margin-top:.7rem;}
  .brief dl>dt:first-child{margin-top:0;}

  .factstrip div{flex-direction:column;gap:3px;}
  .factstrip dd{text-align:left;}

  .cblock{grid-template-columns:1fr;}
  .cblock>a,.cblock>div{min-height:0;padding:24px 0;border-right:0;}

  .medal__yr{-webkit-text-stroke-width:1px;}

  .foot__grid{grid-template-columns:1fr;}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:10px;}

  .mast__row{flex-direction:column;align-items:flex-start;gap:18px;}
  .mast__meta{padding-bottom:0;}
}

/* ---------- <= 560px ----------------------------------------------------- */
@media (max-width:560px){
  :root{--gut:20px;}

  .dropcap::first-letter{font-size:3.2em;}
  .artbody p,.thesis__body p{font-size:1rem;line-height:1.74;}

  .signalrow{grid-template-columns:repeat(5,minmax(190px,1fr));}

  .urban article{padding:22px 20px;}
  .sidenote{padding:22px 20px;}
  .notice{padding:22px 20px;}

  .social{flex-wrap:wrap;}
  .btn{padding:14px 20px;font-size:.6875rem;letter-spacing:.11em;}
}

/* ---------- <= 400px ----------------------------------------------------- */
@media (max-width:400px){
  :root{--gut:16px;}
  body{font-size:15px;}
  .hero h1{font-size:clamp(2.35rem,12vw,3rem);}
  .hero h1 .ips{font-size:.6875rem;letter-spacing:.26em;}
  .brand__sub{display:none;}
  .brand__name{font-size:.75rem;letter-spacing:.1em;}
  .medal__yr{font-size:clamp(4.6rem,25vw,6rem);}
  .band__yr{font-size:2.1rem;}
  .navdraw a{font-size:1.42rem;padding:14px 0;}
  .signalrow{grid-template-columns:repeat(5,minmax(172px,1fr));}
}

/* ---------- Large displays ----------------------------------------------- */
@media (min-width:1800px){
  :root{--shell:1560px;}
  body{font-size:17px;}
  .hero__fig .plate img{max-height:min(74vh,780px);}
}

/* ---------- Landscape phones --------------------------------------------- */
@media (max-height:520px) and (orientation:landscape){
  .navdraw{padding-block:24px 28px;}
  .navdraw a{font-size:1.15rem;padding:10px 0;}
  .gate{min-height:auto;padding-block:48px;}
}

/* ---------- Print --------------------------------------------------------- */
@media print{
  .nav,.navdraw,.foot,.skip,.hero__cta{display:none !important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .rv,.rv-on .rv{opacity:1 !important;transform:none !important;}
  .on-forest{background:#fff !important;color:#000 !important;}
  .on-forest *{color:#000 !important;}
  a{text-decoration:underline;}
  section{break-inside:avoid;}
}

/* --- Shared layout utilities: collapse ----------------------------------- */
@media (max-width:900px){
  .split,.split-b,.split-c{grid-template-columns:1fr;gap:clamp(18px,3.4vw,28px);}
  .split-b,.split-c{align-items:start;}
  .hrow{margin-bottom:clamp(24px,3.4vw,34px);}
}