/* kgwide.css — use the whole screen.
   The pages used a centred column (810px to 1180px). On a wide monitor that left
   most of the screen empty. Containers now follow the screen width; only long
   paragraphs keep a readable line length, and sign-in cards stay card-sized. */
.wrap,header .wrap{max-width:none!important;padding-left:clamp(16px,3.2vw,64px)!important;padding-right:clamp(16px,3.2vw,64px)!important}
.verify-bar .wrap{max-width:none!important}
/* sign-in and sign-up cards must not stretch across the screen */
#authSection .auth-panel,#authSection>.card,#authSection .card,#gate .card,#gate,.auth-panel,#panelLogin,#panelSignup{max-width:520px;margin-left:auto;margin-right:auto}
#gate{max-width:560px}
#authSection{max-width:520px;margin-left:auto;margin-right:auto}
/* long reading text keeps a comfortable line length */
.body-en,.body-rw{max-width:80ch}
main p,main li,.doc p,.doc li,.lead{max-width:110ch}
/* footer and the staff menu bar follow the same width as the page */
.kg-foot-in{max-width:none!important;padding-left:clamp(0px,1.2vw,24px);padding-right:clamp(0px,1.2vw,24px)}
.kg-foot{padding-left:clamp(16px,3.2vw,64px)!important;padding-right:clamp(16px,3.2vw,64px)!important}

/* Logos/crests: height is set, width always follows it, so no phone width can squash or stretch them */
header img,.brand img,.homelink img,.kgs-brand img,img[class*="logo"],img[class*="crest"],.vb-logo,.vbadge-logo,.hero-logo{
  width:auto!important;object-fit:contain!important;aspect-ratio:auto!important}
header .brand img,header .homelink img,.kgs-brand img{max-width:none!important;flex:0 0 auto}
img{max-width:100%}