/* Qusai Tweissi — portfolio. Shared styles extracted from the Claude Design pages. */

@font-face{
  font-family:'Sprintura Demo';
  src:url('../assets/fonts/sprintura.woff2') format('woff2');
  font-weight:normal;font-style:normal;font-display:swap;
}

html,body{margin:0;padding:0;background:#0B0B0C;-webkit-font-smoothing:antialiased;}
*{box-sizing:border-box;}
::selection{background:#C6A664;color:#0B0B0C;}
a{color:inherit;text-decoration:none;}
a.navlink{color:#8B867D;transition:color .25s ease;}
a.navlink:hover{color:#ECE9E3;}
a.goldlink{color:#C6A664;transition:color .25s ease;}
a.goldlink:hover{color:#e0c88f;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

img.slot{display:block;width:100%;height:100%;object-fit:cover;}
.home-project-image{object-fit:cover !important;}
.home-project-image--fit{object-fit:contain !important;background:#fff;}

/* Home work cards */
.wk-card{transition:transform .4s cubic-bezier(.2,.6,.2,1);}
.wk-card:hover{transform:translateY(-6px);}
.wk-card:hover .wk-arrow{color:#C6A664;transform:translate(4px,-4px);}
.wk-arrow{transition:color .3s ease, transform .3s ease;}

/* Work page cards */
.wk-card .wk-img{transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.wk-card:hover .wk-img{transform:scale(1.04);}
.wk-card:hover .wk-title{color:#C6A664;}
.wk-title{transition:color .3s ease;}

/* Presentations rows */
.pr-row .pr-img{transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.pr-row:hover .pr-img{transform:scale(1.04);}
.pr-row:hover .pr-title{color:#C6A664;}
.pr-title{transition:color .3s ease;}

/* Contact form */
.ct-field{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(236,233,227,0.18);color:#ECE9E3;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:300;padding:14px 2px;outline:none;transition:border-color .3s ease;}
.ct-field::placeholder{color:#5c5952;}
.ct-field:focus{border-bottom-color:#C6A664;}
textarea.ct-field{resize:vertical;min-height:110px;line-height:1.6;}

/* ===== Responsive (the design is desktop-first with inline styles; these override) ===== */
@media (max-width:900px){
  .pad-x{padding-left:24px !important;padding-right:24px !important;}
  nav.site-nav{padding:14px 20px !important;flex-wrap:wrap;gap:12px;}
  nav.site-nav .nav-links{gap:18px !important;flex-wrap:wrap;}
  .hero-split{flex-direction:column;min-height:0 !important;}
  .hero-media{width:100% !important;min-width:0 !important;height:64vw;min-height:300px;max-height:440px;border-right:none !important;border-bottom:1px solid rgba(236,233,227,0.12);}
  .hero-content{padding:56px 24px !important;}
  .grid-3,.grid-2,.split-2,.pr-row{grid-template-columns:1fr !important;}
  .form-2col{grid-template-columns:1fr !important;}
}
@media (max-width:560px){
  .caps-grid{grid-template-columns:1fr !important;}
  h1{font-size:clamp(24px,7.4vw,36px) !important;overflow-wrap:anywhere;}
  nav.site-nav .nav-links{gap:14px !important;}
  nav.site-nav .nav-links a{font-size:10px !important;}
}