/* Sampada site: responsive layer over the 1440px page designs */
html{background:#F1EEE3}
.page{overflow:hidden}
img{max-width:100%}
svg{max-width:100%}

@media (max-width: 1100px){
  .page section,.page header,.page footer,.page > div{padding-left:24px !important;padding-right:24px !important}
  .page nav{flex-wrap:wrap;row-gap:8px}
  .page header{flex-wrap:wrap;row-gap:10px}
  .page [style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .page [style*="grid-template-columns: repeat(5"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

@media (max-width: 760px){
  .page section,.page header,.page footer,.page > div{padding-left:16px !important;padding-right:16px !important}
  .page header > div:last-child{display:none}
  .page nav{gap:14px !important;font-size:12px !important}
  /* stack every layout row that has a gap; keep small key/value rows inline */
  .page [style*="display: flex"][style*="gap"]:not(nav):not(header):not(a){flex-direction:column !important;align-items:stretch !important}
  .page [style*="display: flex"][style*="justify-content: space-between"][style*="align-items: baseline"]{flex-direction:column !important;gap:6px}
  .page section[style*="display: flex"],
  .page [style*="display: flex"]:has(> [style*="flex-shrink: 0"][style*="width:"]:not(img)){flex-direction:column !important;align-items:stretch !important}
  .page [style*="flex-shrink: 0"][style*="width:"]:not(img){width:auto !important;max-width:100% !important}
  .page [style*="flex-shrink: 0"]{flex-shrink:1 !important}
  .page [style*="border-right: 1px solid"]{border-right:none !important}
  .page [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  .page h1{font-size:36px !important;letter-spacing:-0.6px !important}
  .page h2{font-size:26px !important}
  .page h3{font-size:20px !important}
  .page p:not([style*="IBM Plex Mono"]){font-size:16px !important}
  .page table{display:block;overflow-x:auto;width:100% !important}
  .page table th,.page table td{padding-left:12px !important;padding-right:12px !important}
  /* figures: let wide diagrams scroll sideways rather than shrink to unreadable */
  .page figure{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-left:16px !important;padding-right:16px !important}
  .page figure > svg,.page svg[viewBox^="0 0 12"],.page svg[viewBox^="0 0 13"]{min-width:860px}
  .page img[style*="height:"]{height:auto !important;max-height:360px;object-fit:cover}
  .page footer{flex-direction:column;align-items:flex-start !important;gap:14px}
}
@media (max-width: 760px){
  .page [style*="padding: 64px 56px"],.page [style*="padding: 56px 56px"]{padding-left:16px !important;padding-right:16px !important}
  .page :has(> svg[viewBox="0 0 740 520"]){overflow-x:auto !important}
  .page svg[viewBox="0 0 740 520"]{min-width:620px}
}
@media (max-width: 1100px){
  .page [style*="display: flex"]:has(> [style*="flex-shrink: 0"][style*="width:"]:not(img)){flex-direction:column !important;align-items:stretch !important}
  .page [style*="flex-shrink: 0"][style*="width:"]:not(img){width:auto !important;max-width:100% !important}
  .page [style*="flex-shrink: 0"][style*="width:"]:not(img) > img{width:100% !important}
  .page h1{font-size:46px !important}
}