/* ============================================================================
   crpatil.in — Responsive layer
   Verified against: 1920 / 1600 / 1440 / 1366 / 1280 / 1024 / 900 / 834 / 768
                     430 / 414 / 390 / 375 / 360 / 320
   Rule of the file: nothing may ever exceed the viewport width.
   ========================================================================== */

/* ---------------------------------------------------- very large displays */
@media (min-width:1600px){
  :root{--shell:88rem;--shell-wide:104rem;--fs-body:1.2rem}
}
@media (min-width:1900px){
  :root{--shell:92rem;--shell-wide:110rem}
  .hero-home-grid{gap:5.5rem}
}

/* ------------------------------------------------------ 1440 and below */
@media (max-width:1440px){
  :root{--shell:78rem}
}

/* ------------------------------------------------------ 1366 / 1280 */
@media (max-width:1366px){
  :root{--fs-body:1.15rem;--shell:74rem}
  .nav-link{padding:.6rem .62rem;font-size:.675rem;letter-spacing:.11em}
  .header-inner{gap:1rem}
}
@media (max-width:1280px){
  :root{--shell:70rem}
  .nav-link{padding:.6rem .52rem;font-size:.655rem;letter-spacing:.09em}
  .wordmark-name{font-size:1.12rem}
  .btn-lock{padding:.5rem .65rem}
}

/* ------------------------------------------- 1180: collapse to index menu */
@media (max-width:1180px){
  .nav-primary{display:none}
  .btn-index{display:inline-flex}
  .header-inner{min-height:4.9rem}
  .site-header.is-scrolled .header-inner{min-height:4.1rem}
}

/* -------------------------------------------------------------- 1024 */
@media (max-width:1024px){
  :root{--fs-body:1.1rem;--sp-section:clamp(3.5rem,8vw,5.5rem)}
  .hero-home-grid{gap:2.5rem}
  .hero-home .hero-name{font-size:clamp(3rem,8.6vw,5.4rem)}
  .hero-page-grid{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .hero-page-aside{
    border-left:0;border-top:1px solid var(--line-invert);
    padding-left:0;padding-top:1.6rem;
  }
  .hero-page-aside dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2rem}
  .hero-page-aside dl > div + div{margin-top:0}
  .section-head.split-head{grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:start}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .masonry{columns:2}
  .sticky-col{position:static}
  .footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
}

/* --------------------------------------------- 900: collapse the 12-col grids
   Pages lay out asymmetric compositions with .g-12 plus an inline
   grid-column: span N. Below this width those columns are too narrow to read,
   so every child is forced to the full row. The inline span makes !important
   necessary here; it is the one place in this stylesheet that uses it. */
@media (max-width:900px){
  .g-12{grid-template-columns:minmax(0,1fr)}
  .g-12 > *{grid-column:1 / -1 !important}
  .toc.sticky-col{position:static}
  .toc{margin-bottom:.6rem}
  .toc ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
  .segments{grid-template-columns:minmax(0,1fr)!important}
  .schema{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ------------------------------------------------------------ 900 / 834 */
@media (max-width:900px){
  .hero-home-grid{grid-template-columns:minmax(0,1fr);gap:2.6rem}
  .hero-home .hero-copy{order:1}
  .hero-home .portrait-frame{order:2;max-width:32rem;margin-inline:auto;width:100%}
  .hero-home .hero-name{font-size:clamp(3.2rem,12vw,5rem)}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arch-item{grid-template-columns:7rem minmax(0,1fr);row-gap:.9rem}
  .arch-action{grid-column:2;padding-top:0}
}
@media (max-width:834px){
  :root{--sp-section:clamp(3rem,7vw,4.5rem)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .stat + .stat{border-left:0;padding-left:0}
  .datastrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1rem,3vw,2rem)}
  .datastrip .stat{padding-right:0}
  .datastrip .stat:nth-child(odd){border-right:0}
}

/* ------------------------------------------------------------------ 768 */
@media (max-width:768px){
  :root{--fs-body:1.06rem;--lh-body:1.66;--gut:1.25rem}
  .d1{font-size:clamp(2.6rem,10vw,3.8rem)}
  .d2{font-size:clamp(1.95rem,7vw,2.8rem)}
  .d3{font-size:clamp(1.5rem,5.6vw,2.1rem)}
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
  .grid{gap:1.9rem}
  .hero-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem 1.2rem}
  .page-next{grid-template-columns:minmax(0,1fr)}
  .page-next a + a{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .page-next .next{text-align:left}
  .footer-main{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:.7rem}
  .index-inner{padding-block:6rem 3rem}
  .lb-foot{flex-direction:column;align-items:stretch;gap:1rem}
  .lb-nav{justify-content:flex-end}
  .pf-media::after{display:none}
  .schema{grid-template-columns:minmax(0,1fr)!important}
  .toc ul{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------------ 640 */
@media (max-width:640px){
  .table-hint{display:block}
  .masonry{columns:1}
  .arch-item{grid-template-columns:minmax(0,1fr);row-gap:.65rem}
  .arch-action{grid-column:1}
  .arch-date{padding-top:0}
  .data-table{min-width:30rem}
  .hero-page-aside dl{grid-template-columns:minmax(0,1fr)}
  .hero-page-aside dl > div + div{margin-top:1.1rem}
  .rail{grid-auto-columns:minmax(min(84vw,17rem),17rem)}
}

/* --------------------------------------------- 560: protect the header row
   Below this width the wordmark subtitle, the Index label and the Lock label
   together exceed the available row, pushing the Lock control off-screen.
   The subtitle is the first thing to go: the page title already carries it. */
@media (max-width:560px){
  .wordmark-sub{display:none}
  .wordmark-name{font-size:1.06rem}
  .wordmark{gap:.65rem;min-width:0}
  .wordmark-text{min-width:0}
  .header-inner{gap:.7rem;min-height:4.3rem}
  .site-header.is-scrolled .header-inner{min-height:3.9rem}
  .header-actions{gap:.4rem}
  .btn-index{padding:.5rem .65rem;gap:.45rem}
  /* three credentials read better stacked than wrapped mid-separator */
  .hero-support{flex-direction:column;align-items:flex-start;gap:.34rem}
  .hero-support > span:not(:last-child)::after{display:none}
}

/* ------------------------------------------------------ 430 / 414 / 390 */
@media (max-width:430px){
  :root{--fs-body:1.02rem;--gut:1.15rem;--sp-section:clamp(2.6rem,9vw,3.6rem)}
  .hero-home .hero-name{font-size:clamp(2.9rem,13.5vw,3.9rem);letter-spacing:-.038em}
  .hero-home{padding-block:2.2rem 3rem}
  .hero-support{font-size:.68rem;letter-spacing:.11em;gap:.4rem .7rem}
  .hero-meta{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .hero-meta dd{font-size:1.02rem}
  .d1{font-size:clamp(2.35rem,11.5vw,3.1rem)}
  .btn{width:100%;justify-content:space-between;padding:1rem 1.2rem}
  .btn-group{display:grid;gap:.7rem}
  .filters{gap:.4rem}
  .filter-chip{padding:.5rem .7rem;font-size:.6rem;letter-spacing:.1em}
  .stat + .stat{border-left:0;padding-left:0}
  .datastrip{grid-template-columns:minmax(0,1fr)}
  .quote{padding-left:1rem}
  .timeline{padding-left:1.5rem}
  .tl-item::before{left:calc(-1.5rem - 3.5px)}
  .wordmark-name{font-size:1.02rem}
  .wordmark-sub{font-size:.52rem;letter-spacing:.16em}
  .wordmark-mark{width:2rem;height:2rem}
  .btn-lock span{display:none}
  .btn-lock{padding:.55rem .6rem}
  .lb-stage{padding:0 .8rem}
  .contact-card dd a,.contact-card dd span{font-size:1.05rem}
  .table-wrap{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
  .data-table{min-width:26rem}
}

/* --------------------------------------------------------------- 375/360 */
@media (max-width:375px){
  :root{--fs-body:1rem;--gut:1.05rem}
  .hero-home .hero-name{font-size:clamp(2.6rem,13vw,3.4rem)}
  .d1{font-size:clamp(2.15rem,11vw,2.8rem)}
  .d2{font-size:clamp(1.75rem,8vw,2.3rem)}
  .index-group a{font-size:1.08rem}
  .social a{width:2.3rem;height:2.3rem}
}

/* ------------------------------------------------------------------- 320 */
@media (max-width:360px){
  :root{--fs-body:.98rem;--gut:1rem}
  .hero-home .hero-name{font-size:2.45rem;letter-spacing:-.03em}
  .d1{font-size:2.05rem}
  .d2{font-size:1.65rem}
  .d3{font-size:1.36rem}
  .lede{font-size:1.08rem}
  .eyebrow{font-size:.63rem;letter-spacing:.16em}
  .eyebrow::before{width:1.2rem}
  .stat-fig{font-size:2rem}
  .wordmark-sub{display:none}
  .btn-index{padding:.5rem .55rem}
  .btn-index span.lbl{display:none}
  .data-table{min-width:22rem;font-size:.8rem}
  .data-table th,.data-table td{padding:.7rem .6rem .7rem 0}
  .index-close{padding:.5rem .7rem;font-size:.58rem}
}

/* ---------------------------------------------- touch target guarantees */
@media (hover:none) and (pointer:coarse){
  .nav-panel a,.footer-col a,.index-group a{padding-block:.72rem}
  .link-more,.arch-action a{padding-block:.42rem}
  .social a{width:2.75rem;height:2.75rem}
  .filter-chip{min-height:2.75rem}
  .lb-nav button{width:3rem;height:3rem}
  .masonry button.gitem:hover img{transform:none}
  .topic:hover{transform:none}
}

/* -------------------------------------------- short landscape phones */
@media (max-height:520px) and (orientation:landscape){
  .hero-home{padding-block:1.8rem 2.4rem}
  .index-inner{padding-block:4.5rem 2.5rem}
  .lb-bar{padding-block:.6rem}
  .lb-foot{padding-bottom:.9rem}
}

/* ------------------------------------------------- high-contrast support */
@media (prefers-contrast:more){
  :root{--muted:#4A565B;--line:rgba(23,33,38,.3);--line-soft:rgba(23,33,38,.18)}
  .contour path{opacity:.08}
  .gridlines{opacity:.5}
}