/* 
   MINIMAL.CSS - Ultra-minimalist CSS framework
   Designed for portfolio sites inspired by OCKHAM design
*/

/* Reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}

/* Base */
html{
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  line-height:1.6;
  color:#000;
  background:#f5f5f5;
  overflow-x:hidden;
}

/* Global link styles */
a{
  color:#666;
  text-decoration:none;
}

a:hover{
  color:#333;
  text-decoration:none;
}

body{
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Layout */
.page{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
  background:#fff;
  min-height:100vh;
}

/* Header */
.header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:40px 0 20px;
  position:relative;
  z-index:100;
}

.logo{
  font-size:18px;
  font-weight:600;
  color:#000;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
}

.logo:hover{color:#000;text-decoration:none}

/* Navigation */
.nav{display:flex;list-style:none;gap:40px;margin:0}
.nav a{
  font-size:14px;
  font-weight:500;
  color:#000;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:opacity .2s ease;
}
.nav a:hover{opacity:.6;color:#000;text-decoration:none}

/* Typography */
.title{
  font-size:clamp(4rem,15vw,10rem);
  font-weight:500;
  color:#000;
  line-height:1.1;
  letter-spacing:0;
  margin:40px 0 40px;
  text-transform:uppercase;
  transform:scaleY(1.6);
}

.subtitle{
  font-size:11px;
  color:#666;
  margin-bottom:20px;
  text-transform:uppercase;
  letter-spacing:2px;
  line-height:1.6;
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px 25px;
  margin:40px 0;
}

.grid.full{grid-template-columns:1fr}

/* Cards */
.card{
  position:relative;
  cursor:pointer;
  text-decoration:none;
  color:#000;
  transition:transform .2s ease;
  padding-bottom:20px;
  border-bottom:1px solid #f0f0f0;
  margin-bottom:10px;
}

.card:hover{
  transform:translateY(-2px);
  color:#000;
  text-decoration:none;
}

.card img{
  width:100%;
  height:280px;
  object-fit:cover;
  transition:filter .2s ease;
  border:1px solid #e0e0e0;
}

.card:hover img{filter:brightness(.98)}

.card-info{
  margin-top:15px;
  position:relative;
}

.card-title{
  font-size:16px;
  font-weight:400;
  color:#000;
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  line-height:1.4;
}

.card-year{
  font-size:12px;
  color:#999;
  font-weight:400;
  margin:0;
}

/* Last Work - Full width with overlay text */
.card.last-work{
  width:100%;
  margin-bottom:0;
  padding-bottom:40px;
}

.card.last-work img{
  height:700px;
  margin-bottom:40px;
  border:1px solid #e0e0e0;
}

.card.last-work .card-info{
  position:absolute;
  bottom:70px;
  left:30px;
  margin-top:0;
}

.card.last-work::after{
  content:'';
  display:block;
  width:100%;
  height:1px;
  background:#e0e0e0;
  margin-top:40px;
}

.card.last-work .card-title{
  color:#fff;
  font-size:24px;
  font-weight:300;
  margin-bottom:8px;
  transform:scaleY(1.6);
}

.card.last-work .card-year{
  color:#fff;
  font-size:14px;
}

/* Half width cards - text left, image stuck right */
.half-width-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:0px 0;
}

.card.half-width{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:flex-start;
  margin-bottom:0;
  padding:20px 0;
  border-bottom:1px solid #e0e0e0;
  position:relative;
  overflow:hidden;
  gap:40px;
}

.card.half-width .card-info{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:0;
  padding-right:0;
}

.card.half-width .card-title{
  font-size:36px;
  font-weight:300;
  font-stretch:condensed;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:0.9;
  color:#000;
  transform:scaleY(1.6);
}

.card.half-width .card-year{
  font-size:18px;
  color:#000;
  margin-bottom:20px;
  font-weight:400;
}

.card.half-width img{
  width:100%;
  height:320px;
  object-fit:cover;
  border:1px solid #e0e0e0;
}

.card.half-width .card-tags{
  position:absolute;
  bottom:20px;
  left:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.grid .card .card-tags{
  position:absolute;
  bottom:20px;
  right:15px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.tag{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:4px 8px;
  border-radius:12px;
  font-weight:500;
  border:none;
}

.tag.industry{
  color:#666;
  background:#f8f8f8;
}

.tag.tech{
  color:#666;
  background:#f8f8f8;
}

/* Large cards - legacy support */
.card.large{grid-column:1/-1}
.card.large img{height:400px}

/* Logo content in header */
.logo-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;
}

.logo-content span,
.logo-content h1{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-weight:300;
  color:#333;
  line-height:1.1;
  margin:2px 0;
}

.hero-name{
  font-size:clamp(18px,3.5vw,32px);
  font-weight:600;
  margin-left:0;
  color:#000;
  margin-bottom:4px;
}

.hero-name a{
  color:inherit;
  text-decoration:none;
  transition:opacity 0.2s ease;
}

.hero-name a:hover{
  opacity:0.7;
}

.hero-role{
  font-size:clamp(11px,2.2vw,20px);
  font-weight:400;
  margin-left:30px;
  color:#000;
}

.hero-philosophy{
  font-size:clamp(7px,1.4vw,12px);
  margin-left:60px;
  color:#666;
  font-style:italic;
}

.hero-pursuit{
  font-size:clamp(7px,1.4vw,12px);
  margin-left:90px;
  color:#666;
  font-style:italic;
}

.hero-also{
  font-size:clamp(7px,1.4vw,12px);
  margin-left:50px;
  margin-top:8px;
  color:#999;
}

.hero-philosophy em,
.hero-alias em{
  font-style:normal;
  font-weight:600;
  color:#000;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.hero-philosophy em a{
  color:inherit;
  text-decoration:none;
  transition:opacity 0.2s ease;
  text-transform:none;
  position:relative;
  z-index:10;
}

.hero-philosophy em a:hover{
  opacity:0.7;
}

@media (max-width:768px){
  .logo-content{
    align-items:center;
    text-align:center;
  }
  
  .hero-name{
    font-size:clamp(28px,7vw,40px);
    margin-bottom:8px;
  }
  
  .hero-role{
    font-size:clamp(16px,4vw,24px);
    margin-left:0;
  }
  
  .hero-philosophy{
    font-size:clamp(12px,3vw,16px);
    margin-left:0;
  }
  
  .hero-also{
    font-size:clamp(12px,3vw,16px);
    margin-left:0;
  }
  
  .logo-content span,
  .logo-content h1{
    margin:4px 0;
  }
}

/* Contact section */
.contact{
  padding:150px 40px 150px;
  background:#000;
  margin:0 -40px;
}

.contact-title{
  font-size:clamp(3rem,10vw,6rem);
  font-weight:500;
  color:#efefef;
  line-height:.9;
  letter-spacing:-.02em;
  margin-bottom:30px;
  text-transform:uppercase;
  transform:scaleY(1.6);
}

.contact-info{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  margin-top:60px !important;
  gap:40px;
}

.contact-details{
  list-style-type:none !important;
  padding:0;
  margin:0;
  display:block;
  flex:0 0 30%;
}

.contact-details li{
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;
  line-height:1.6;
  color:#efefef;
  margin:0;
  padding:0;
  list-style:none !important;
}

.social-links{
  display:flex;
  gap:30px;
  align-items:center;
  flex:1 1 65%;
  justify-content:flex-start;
}

.social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}

.social-link img{
  width:80px;
  height:80px;
}




.contact-cta{
  flex-shrink:0;
  text-align:right;
}

.contact-cta p{
  font-size:16px;
  color:#000;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* Footer */
.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:40px 0;
  border-top:1px solid #eee;
  margin-top:80px;
}

.footer-logo{
  font-size:16px;
  font-weight:600;
  color:#000;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
}

.footer-nav{
  display:flex;
  list-style:none;
  gap:30px;
  margin:0;
}

.footer-nav a{
  font-size:12px;
  color:#666;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1px;
}

.footer-nav a:hover{color:#000}

/* Post Layout */
.post{
  max-width:1200px;
  margin:0 auto;
  padding:0;
}

.post-header{
  margin-bottom:60px;
  border-bottom:1px solid #e0e0e0;
  padding-bottom:40px;
}

.post-title{
  font-size:clamp(2.5rem,8vw,4rem);
  font-weight:500;
  color:#000;
  line-height:1.1;
  letter-spacing:0;
  margin:0 0 15px;
  text-transform:uppercase;
  transform:scaleY(1.6);
}

.post-meta{
  font-size:14px;
  color:#666;
  margin:0 0 20px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.post-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}

.post-content{
  line-height:1.8;
  color:#333;
}

.post-content h2{
  font-size:24px;
  font-weight:500;
  color:#000;
  margin:60px 0 30px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.post-content p{
  margin:0 0 20px;
  font-size:16px;
}

.post-content ul,
.post-content ol{
  list-style:none;
  padding:0;
  margin:0 0 20px;
}

.post-content ul li,
.post-content ol li{
  margin:0 0 10px;
  padding:0;
  font-size:16px;
  line-height:1.8;
}

.post-content iframe{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  margin:40px 0;
  border:1px solid #e0e0e0;
}

/* Handle UIKit responsive classes */
.uk-responsive-width{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
}

iframe.uk-responsive-width{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  margin:40px 0;
  border:1px solid #e0e0e0;
}

.post-content img{
  width:100%;
  height:auto;
  margin:20px 0;
  border:1px solid #e0e0e0;
}

/* Content Grid System */
.content-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin:40px 0;
}

.content-grid.full{
  grid-template-columns:1fr;
}

.content-grid img{
  margin:0;
}

/* Utilities */
.hidden{display:none}
.text-center{text-align:center}
.text-right{text-align:right}
.mb-0{margin-bottom:0}
.mt-0{margin-top:0}

/* Responsive */
@media(max-width:768px){
  .page{padding:0 20px}
  .header{
    flex-direction:column;
    align-items:center;
    gap:30px;
    padding:40px 0;
    text-align:center;
  }
  .nav{
    gap:20px;
    justify-content:center;
  }
  .grid{grid-template-columns:1fr;gap:30px;margin:40px 0}
  .card.large{grid-column:1}
  
  /* Half-width cards responsive */
  .card.half-width{
    grid-template-columns:1fr;
    padding:40px 20px;
    gap:20px;
  }
  
  .card.half-width .card-title{
    font-size:36px;
  }
  
  .card.half-width img{
    height:240px;
    justify-self:stretch;
  }
  
  /* Post responsive */
  .post-title{
    font-size:clamp(2rem,8vw,3rem);
  }
  
  .content-grid{
    grid-template-columns:1fr;
    gap:15px;
  }
  
  /* Contact responsive - Fix horizontal scroll */
  .contact{
    margin:0 -20px;
    padding:80px 20px;
  }
  
  .contact-info{
    flex-direction:column;
    gap:30px;
  }
  
  .social-links{
    justify-content:flex-start;
    margin-top:20px;
  }
  
  .social-link img{
    height:40px;
  }
  
  .contact-cta{text-align:left}
  .footer{flex-direction:column;align-items:flex-start;gap:20px}
}