/*
Theme Name: Dave Santos
Theme URI: https://iamdavesantos.com/
Author: Dave Santos
Description: Minimal black, white and red portfolio theme for Dave Santos, designed for Elementor compatibility.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dave-santos
*/

:root{
  --ds-black:#080808;
  --ds-white:#f5f5f5;
  --ds-muted:#9a9a9a;
  --ds-red:#e21b23;
  --ds-line:#252525;
  --ds-max:1440px;
  --ds-pad:clamp(20px,4vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ds-black);
  color:var(--ds-white);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,textarea{font:inherit}

.ds-shell{width:min(var(--ds-max),calc(100% - 2 * var(--ds-pad)));margin-inline:auto}
.ds-header{
  position:relative;
  z-index:20;
  border-bottom:1px solid var(--ds-line);
}
.ds-header-inner{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.ds-logo{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ds-nav{display:flex;gap:28px;align-items:center}
.ds-nav a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ccc}
.ds-nav a:hover{color:var(--ds-red)}
.ds-menu-toggle{display:none;background:none;border:0;color:var(--ds-white);font-size:22px}

.ds-hero{min-height:78vh;display:flex;align-items:flex-end;padding:clamp(90px,15vh,180px) 0 80px}
.ds-kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ds-red);margin-bottom:24px}
.ds-hero h1{font-size:clamp(64px,11vw,170px);line-height:.84;letter-spacing:-.065em;margin:0;max-width:1100px}
.ds-hero h1 span{display:block}
.ds-hero-sub{max-width:620px;margin-top:42px;color:#bbb;font-size:clamp(18px,2vw,25px);line-height:1.35}

.ds-section{padding:120px 0}
.ds-section--line{border-top:1px solid var(--ds-line)}
.ds-section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:55px}
.ds-section-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ds-muted)}
.ds-section-title{font-size:clamp(42px,6vw,90px);line-height:.92;letter-spacing:-.05em;margin:0}

.ds-project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
.ds-project-card{grid-column:span 6}
.ds-project-card:nth-child(3n){grid-column:3 / span 10}
.ds-project-thumb{
  aspect-ratio:16/10;
  background:#151515;
  overflow:hidden;
  border:1px solid var(--ds-line);
}
.ds-project-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ds-project-card:hover img{transform:scale(1.025)}
.ds-placeholder{
  width:100%;height:100%;display:grid;place-items:center;
  color:#555;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.ds-project-meta{display:flex;justify-content:space-between;gap:20px;padding-top:15px;border-top:1px solid var(--ds-line);margin-top:12px}
.ds-project-title{font-size:22px;letter-spacing:-.02em}
.ds-project-type{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ds-muted);text-align:right}

.ds-manifesto{display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start}
.ds-manifesto h2{font-size:clamp(50px,8vw,120px);line-height:.82;letter-spacing:-.065em;margin:0}
.ds-manifesto-copy{font-size:clamp(22px,3vw,42px);line-height:1.12;max-width:850px}
.ds-red{color:var(--ds-red)}

.ds-three{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ds-line);border:1px solid var(--ds-line)}
.ds-three > article{background:var(--ds-black);padding:42px;min-height:330px}
.ds-three h3{font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:var(--ds-red);margin:0 0 60px}
.ds-three h4{font-size:36px;letter-spacing:-.04em;margin:0 0 20px}
.ds-three p{color:#aaa;max-width:360px}
.ds-arrow{display:inline-block;margin-top:30px;color:var(--ds-white);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.ds-arrow:hover{color:var(--ds-red)}

.ds-contact{padding:140px 0}
.ds-contact h2{font-size:clamp(60px,10vw,150px);line-height:.82;letter-spacing:-.07em;margin:0 0 50px}
.ds-email{font-size:clamp(22px,3vw,40px);border-bottom:2px solid var(--ds-red);display:inline-block;padding-bottom:8px}
.ds-footer{border-top:1px solid var(--ds-line);padding:30px 0;color:#777;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.ds-footer-inner{display:flex;justify-content:space-between;gap:20px}

.ds-single{padding:100px 0}
.ds-single h1{font-size:clamp(58px,9vw,130px);line-height:.86;letter-spacing:-.065em;margin:0 0 30px}
.ds-single-intro{font-size:22px;color:#aaa;max-width:750px;margin-bottom:70px}
.ds-single-image{margin:50px 0}
.ds-single-content{max-width:900px}
.ds-single-content h2{font-size:42px;letter-spacing:-.04em;margin-top:80px}
.ds-single-content p{font-size:18px;color:#ccc}

.elementor-page .ds-main{min-height:0}

@media (max-width:800px){
  .ds-nav{display:none;position:absolute;left:0;right:0;top:82px;background:var(--ds-black);border-bottom:1px solid var(--ds-line);padding:20px var(--ds-pad);flex-direction:column;align-items:flex-start}
  .ds-nav.is-open{display:flex}
  .ds-menu-toggle{display:block}
  .ds-hero{min-height:70vh;padding-top:90px}
  .ds-project-card,.ds-project-card:nth-child(3n){grid-column:1/-1}
  .ds-manifesto{grid-template-columns:1fr;gap:40px}
  .ds-three{grid-template-columns:1fr}
  .ds-three > article{min-height:auto}
  .ds-section-head{display:block}
  .ds-section-head .ds-section-label{margin-bottom:20px}
  .ds-footer-inner{display:block}
  .ds-footer-inner > * + *{margin-top:10px}
}