/* Live-site layer: makes the fixed 1440px design fluid and responsive.
   The page markup keeps its inline styles (so it stays in sync with the design canvas);
   these rules adapt it to every screen size. At 1440px it looks identical to the design. */

html,body{background:#F7F6F5;overflow-x:hidden}
#page{width:auto!important;min-height:100vh!important}
img,video{max-width:100%}

/* Display type scales with the window, capped at the design sizes */
.hero-bg h1{font-size:clamp(46px,8.889vw,128px)!important}
section>h1,section>div>h1{font-size:clamp(46px,7.778vw,112px)!important}
#contact h2{font-size:clamp(40px,6.667vw,96px)!important}
#projects h2{font-size:clamp(44px,5vw,72px)!important}
#research h2,#abstract h2{font-size:clamp(38px,3.889vw,56px)!important}

/* ---------- Tablet and small laptop ---------- */
@media (max-width:1100px){
  header{flex-wrap:wrap;row-gap:16px;padding:22px 40px!important}
  header>a>span{font-size:30px!important}
  header nav{gap:24px!important}
  header,#page>section,footer{padding-left:40px!important;padding-right:40px!important}
  #research{margin:0 40px!important;padding:56px 40px!important}
  #abstract{margin:96px 40px 0!important;padding:56px 40px!important}
  .svc-row>span:nth-child(2){font-size:34px!important}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pj-car img,.pj-car video{height:440px!important}
  .pj-car>video[style*="width: 1077px"],.pj-body video[style*="width: 1077px"]{height:auto!important;width:100%!important;aspect-ratio:1077/600}
  article video{height:auto!important;width:100%!important}
  .kto-defence{height:clamp(260px,52vw,690px)!important}
  .tag-row{flex-wrap:wrap}
}

/* ---------- Tablet portrait ---------- */
@media (max-width:860px){
  /* every 12-column grid becomes a single column */
  [style*="grid-template-columns: repeat(12"]{grid-template-columns:minmax(0,1fr)!important;row-gap:24px!important}
  [style*="grid-template-columns: repeat(12"]>*{grid-column:1/-1!important}
  .pj-body{grid-template-columns:minmax(0,1fr)!important}
  .pj-body>*,.pj-text{grid-column:1/-1!important}
  [style*="grid-template-columns: repeat(3"]{grid-template-columns:minmax(0,1fr)!important;row-gap:28px}

  .hero-bg{height:auto!important;min-height:560px;padding-top:64px!important;padding-bottom:56px!important}
  .svc-row{row-gap:8px!important;padding:24px 0!important}
  .svc-row>span:nth-child(4){display:none}
  #projects [role="img"]{height:clamp(240px,62vw,420px)!important}
  #projects a>div:last-child{flex-wrap:wrap;gap:4px 16px}
  #about{padding-top:80px!important}
  #about .img-portrait{height:clamp(320px,90vw,520px)!important}
  #about>div:nth-child(2){margin-top:32px}
  #about p[style*="font-size: 32px"]{font-size:26px!important}
  .kto-g1,.kto-g2,.kto-g3,.kto-g4{height:clamp(240px,60vw,440px)!important}
  #abstract>div:first-child{margin-bottom:24px}
  [style*="gap: 72px"]{gap:48px!important}
  article p[style*="font-size: 20px"]{font-size:18px!important}
  article h2{font-size:32px!important}
}

/* ---------- Phone ---------- */
@media (max-width:600px){
  header{padding:18px 20px!important}
  header>a{gap:10px!important}
  header>a>img{width:34px!important;height:34px!important}
  header>a>span{font-size:24px!important}
  header nav{width:100%;overflow-x:auto;gap:20px!important;font-size:16px!important;scrollbar-width:none}
  header nav::-webkit-scrollbar{display:none}
  header nav a{flex:0 0 auto;height:40px!important}
  header,#page>section,footer{padding-left:20px!important;padding-right:20px!important}
  #research{margin:0 20px!important;padding:40px 20px!important}
  #abstract{margin:72px 20px 0!important;padding:40px 20px!important}

  .hero-bg{min-height:520px}
  .hero-bg p{font-size:18px!important}
  section>div>h1[style*="nowrap"]{white-space:normal!important}
  section>div>p[style*="font-size: 32px"],section>p[style*="font-size: 32px"]{font-size:24px!important}
  [style*="height: 48px"]{height:44px!important;padding:0 14px!important}
  section>div>div[style*="gap: 14px"]{flex-wrap:wrap}

  .svc-row>span:nth-child(2){font-size:28px!important}
  #work,#projects{padding-top:56px!important;padding-bottom:64px!important}
  .pgrid{grid-template-columns:minmax(0,1fr)!important;gap:40px!important}
  .pj-thumb{height:260px}
  .pj[open] .pj-title{font-size:32px!important}

  /* carousels: one full-width slide at a time, swipe or use the arrows */
  .pj-car{gap:12px;align-items:center;scroll-snap-type:x mandatory;scroll-behavior:auto}
  .pj-car img{height:280px!important;width:auto;max-width:100%}
  .pj-car video{width:100%!important;height:auto!important;max-height:70vh}
  /* nav: shorter label for the contact button so everything fits on one line */
  header nav{gap:13px!important;font-size:15px!important}
  header nav a:last-child{font-size:0!important;padding:0 10px!important}
  header nav a:last-child::after{content:"Contact";font-size:15px}
  article video{height:auto!important}

  .pub>summary{flex-wrap:wrap;row-gap:8px}
  .pub>summary>span:last-child{white-space:normal!important}
  .pub-links a{margin-right:16px}
  #research p,#abstract p{font-size:16px!important}

  .tag-row>span{flex:1 1 auto;white-space:normal}
  #contact{padding-top:72px!important;gap:48px!important}
  #contact .mail-link{font-size:20px!important;padding-left:0!important}
  #contact>div:last-child{flex-direction:column;gap:20px;padding-left:0!important}
  #contact>div:last-child>div{flex-wrap:wrap;gap:16px 24px!important}
  .cv>summary{font-size:22px!important}
}