/* desktop-fit.css — load LAST, before </head>. Mobile/tablet (<=1100px) untouched.

   One consistent desktop look: the design width is 1440px. Every screen from
   1101px up (14" laptops, desktops, 4K) shows the SAME layout, scaled like
   browser zoom to fill the screen:  zoom = screen width / 1440.
   e.g. 1366px -> 0.94, 1536px -> 1.06, 1920px -> 1.33, 2560px -> 1.77 */

@media (min-width:1101px){
  /* same layout rules the site applies on >=1440px, so 14" matches big screens */
  nav,.hero-inner,.section-header,.section-header-row,.skills-grid,
  .projects-grid,.certs-grid,.blog-grid,.see-more-wrap,.blog-empty,
  .contact-inner,.footer-inner,.list-page-head,.list-foot{max-width:100%}
  .hero-inner{grid-template-columns:1fr 620px;gap:64px}
  .hero-desc,.hero-title{max-width:100%}
  .hero-visual{margin-top:28px!important}

  html{zoom:var(--z)}
  /* viewport units are not zoomed, so divide by the zoom to still fill the screen */
  .hero{min-height:calc(100vh / var(--z));min-height:calc(100svh / var(--z))}
  body{min-height:calc(100vh / var(--z))}   /* tools page: keeps footer at the bottom */
  #list-page{min-height:calc(100vh / var(--z))}
  .card-read-overlay{height:calc(100dvh / var(--z))}
  /* admin add/edit modals: vh is multiplied by the zoom too, so a 90vh box grew taller than the
     screen at zoom>1 (cut off, no scroll). Divide by the zoom so it always fits and scrolls. */
  .modal-overlay{overflow-y:auto;overscroll-behavior:contain}
  .modal-box{max-height:calc(90vh / var(--z));max-height:calc(90dvh / var(--z));overscroll-behavior:contain}
  /* custom cursor works in real screen pixels, so cancel the zoom for it */
  #cms-toast{max-width:calc((100vw - 40px) / var(--z))}
  #cursor,#cursor-ring{zoom:calc(1 / var(--z))}
}

:root{--z:1}
@media (min-width:1101px){:root{--z:0.76}}
@media (min-width:1120px){:root{--z:0.77}}
@media (min-width:1160px){:root{--z:0.8}}
@media (min-width:1200px){:root{--z:0.83}}
@media (min-width:1240px){:root{--z:0.86}}
@media (min-width:1280px){:root{--z:0.88}}
@media (min-width:1320px){:root{--z:0.91}}
@media (min-width:1360px){:root{--z:0.94}}
@media (min-width:1400px){:root{--z:0.97}}
@media (min-width:1440px){:root{--z:1.0}}
@media (min-width:1480px){:root{--z:1.02}}
@media (min-width:1520px){:root{--z:1.05}}
@media (min-width:1560px){:root{--z:1.08}}
@media (min-width:1600px){:root{--z:1.11}}
@media (min-width:1640px){:root{--z:1.13}}
@media (min-width:1680px){:root{--z:1.16}}
@media (min-width:1720px){:root{--z:1.19}}
@media (min-width:1760px){:root{--z:1.22}}
@media (min-width:1800px){:root{--z:1.25}}
@media (min-width:1840px){:root{--z:1.27}}
@media (min-width:1880px){:root{--z:1.3}}
@media (min-width:1920px){:root{--z:1.33}}
@media (min-width:1960px){:root{--z:1.36}}
@media (min-width:2000px){:root{--z:1.38}}
@media (min-width:2040px){:root{--z:1.41}}
@media (min-width:2080px){:root{--z:1.44}}
@media (min-width:2120px){:root{--z:1.47}}
@media (min-width:2160px){:root{--z:1.5}}
@media (min-width:2200px){:root{--z:1.52}}
@media (min-width:2240px){:root{--z:1.55}}
@media (min-width:2280px){:root{--z:1.58}}
@media (min-width:2320px){:root{--z:1.61}}
@media (min-width:2360px){:root{--z:1.63}}
@media (min-width:2400px){:root{--z:1.66}}
@media (min-width:2440px){:root{--z:1.69}}
@media (min-width:2480px){:root{--z:1.72}}
@media (min-width:2520px){:root{--z:1.75}}
@media (min-width:2560px){:root{--z:1.77}}
@media (min-width:2600px){:root{--z:1.8}}
@media (min-width:2640px){:root{--z:1.83}}
@media (min-width:2680px){:root{--z:1.86}}
@media (min-width:2720px){:root{--z:1.88}}
@media (min-width:2760px){:root{--z:1.91}}
@media (min-width:2800px){:root{--z:1.94}}
@media (min-width:2840px){:root{--z:1.97}}
@media (min-width:2880px){:root{--z:2.0}}
@media (min-width:2920px){:root{--z:2.02}}
@media (min-width:2960px){:root{--z:2.05}}
@media (min-width:3000px){:root{--z:2.08}}
@media (min-width:3040px){:root{--z:2.11}}
@media (min-width:3080px){:root{--z:2.13}}
@media (min-width:3120px){:root{--z:2.16}}
@media (min-width:3160px){:root{--z:2.19}}
@media (min-width:3200px){:root{--z:2.22}}
@media (min-width:3240px){:root{--z:2.25}}
@media (min-width:3280px){:root{--z:2.27}}
@media (min-width:3320px){:root{--z:2.3}}
@media (min-width:3360px){:root{--z:2.33}}
@media (min-width:3400px){:root{--z:2.36}}
@media (min-width:3440px){:root{--z:2.38}}
@media (min-width:3480px){:root{--z:2.41}}
@media (min-width:3520px){:root{--z:2.44}}
@media (min-width:3560px){:root{--z:2.47}}
@media (min-width:3600px){:root{--z:2.5}}
@media (min-width:3640px){:root{--z:2.52}}
@media (min-width:3680px){:root{--z:2.55}}
@media (min-width:3720px){:root{--z:2.58}}
@media (min-width:3760px){:root{--z:2.61}}
@media (min-width:3800px){:root{--z:2.63}}
@media (min-width:3840px){:root{--z:2.66}}
@media (min-width:3880px){:root{--z:2.69}}
@media (min-width:3920px){:root{--z:2.72}}
@media (min-width:3960px){:root{--z:2.75}}
@media (min-width:4000px){:root{--z:2.77}}

/* images never overflow their container (max-width only, so sizes set elsewhere are untouched) */
img{max-width:100%}