/* ==========================================================================
   Karlo Diaz — Portfolio
   Minimal editorial design system
   ========================================================================== */

:root{
  --black:#0b0b0c;
  --grey-700:#4a4a4d;
  --grey-400:#9a9a9d;
  --grey-200:#e7e7e8;
  --white:#ffffff;

  --gutter: clamp(2px, 0.4vw, 6px);
  --edge: clamp(20px, 4vw, 56px);

  --font-ui: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .35s;
  --dur-med: .6s;
  --dur-slow: .9s;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font-ui);
  font-weight:400;
  letter-spacing:-0.01em;
  opacity:0;
}
body.is-ready{
  opacity:1;
  transition:opacity var(--dur-slow) var(--ease);
}
body.modal-open{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }

::selection{ background:var(--black); color:var(--white); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============ Custom cursor ============ */
.cursor{
  position:fixed;
  top:0; left:0;
  width:64px; height:64px;
  margin-left:-32px; margin-top:-32px;
  border-radius:50%;
  background:var(--black);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  pointer-events:none;
  z-index:500;
  opacity:0;
  transform:scale(.3);
  mix-blend-mode:difference;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cursor.is-active{ opacity:1; transform:scale(1); }
.cursor-label{ opacity:0; transform:translateY(2px); transition:opacity .2s ease, transform .2s ease; }
.cursor.is-active .cursor-label{ opacity:1; transform:translateY(0); }

@media (hover:none), (pointer:coarse){
  .cursor{ display:none; }
}

/* ============ Header ============ */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: clamp(18px,2.6vw,28px) var(--edge);
  background:linear-gradient(var(--white) 55%, transparent);
}

.nav-left{
  display:flex;
  gap: clamp(18px,2vw,28px);
}

.nav-link{
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--grey-700);
  position:relative;
  padding-bottom:3px;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:1px;
  background:var(--black);
  transition:right var(--dur-fast) var(--ease);
}
.nav-link:hover,
.nav-link.is-active{ color:var(--black); }
.nav-link:hover::after,
.nav-link.is-active::after{ right:0; }

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo{
  display:flex;
  color:var(--black);
  transition:transform var(--dur-fast) var(--ease);
}
.brand:hover .logo{ transform:rotate(90deg); }
.byline{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey-700);
  white-space:nowrap;
}

/* ============ Views ============ */
.view{
  display:none;
}
.view.is-active{
  display:block;
  animation:view-in var(--dur-med) var(--ease);
}
@keyframes view-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ============ Gallery ============ */
.gallery{
  padding: calc(var(--edge) * 2.2) var(--edge) var(--edge);
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap: clamp(20px, 3vw, 40px) var(--gutter);
  align-items:start;
}

.project-item{
  cursor:pointer;
  outline:none;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.project-item.is-revealed{
  opacity:1;
  transform:translateY(0);
}

.project-media{
  position:relative;
  overflow:hidden;
  background:var(--grey-200);
}
.placeholder-img{
  width:100%;
  height:100%;
  background:linear-gradient(150deg,
    hsl(var(--h) 10% 90%),
    hsl(var(--h2) 12% 80%));
  transition:transform 1s var(--ease), filter var(--dur-fast) var(--ease);
}
.project-item:hover .placeholder-img,
.project-item:focus-visible .placeholder-img{
  transform:scale(1.045);
}
.project-media::after{
  content:"";
  position:absolute; inset:0;
  background:var(--black);
  opacity:0;
  transition:opacity var(--dur-fast) var(--ease);
}
.project-item:hover .project-media::after,
.project-item:focus-visible .project-media::after{ opacity:.04; }

.project-caption{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:14px;
  padding-right:2px;
}
.project-title{
  font-size:clamp(14px,1.1vw,16px);
  font-weight:500;
  letter-spacing:-0.01em;
}
.project-meta{
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--grey-400);
}

/* Column spans — editorial rhythm (each row sums to 6) */
.span-a{ grid-column:span 4; }
.span-a .project-media{ aspect-ratio:4/3; }

.span-b{ grid-column:span 2; }
.span-b .project-media{ aspect-ratio:3/4; }

.span-c{ grid-column:span 3; }
.span-c .project-media{ aspect-ratio:1/1; }

.span-d{ grid-column:span 3; }
.span-d .project-media{ aspect-ratio:4/5; }

.span-e{ grid-column:span 2; }
.span-e .project-media{ aspect-ratio:1/1; }

.span-f{ grid-column:span 4; }
.span-f .project-media{ aspect-ratio:16/9; }

.span-g{ grid-column:span 3; }
.span-g .project-media{ aspect-ratio:3/4; }

.span-h{ grid-column:span 3; }
.span-h .project-media{ aspect-ratio:4/3; }

/* ============ Footer ============ */
.site-footer{
  display:flex;
  justify-content:space-between;
  padding: var(--edge);
  border-top:1px solid var(--grey-200);
  margin:0 var(--edge);
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--grey-400);
}

/* ============ Contact view ============ */
#contact-view.is-active{
  min-height:100vh;
  display:flex;
  align-items:center;
}
.contact-inner{
  padding: var(--edge);
  max-width:640px;
}
.contact-eyebrow{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey-400);
  margin:0 0 18px;
}
.contact-title{
  font-size:clamp(38px,7vw,74px);
  line-height:0.98;
  font-weight:500;
  letter-spacing:-0.02em;
  margin:0 0 40px;
}
.contact-email{
  display:inline-block;
  font-size:clamp(18px,2vw,22px);
  font-weight:500;
  border-bottom:1px solid var(--black);
  padding-bottom:4px;
  transition:opacity var(--dur-fast) var(--ease);
}
.contact-email:hover{ opacity:.5; }
.contact-socials{
  display:flex;
  gap:24px;
  margin-top:56px;
}
.contact-socials a{
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--grey-700);
  transition:color var(--dur-fast) var(--ease);
}
.contact-socials a:hover{ color:var(--black); }

/* ============ Project modal ============ */
.modal{
  position:fixed;
  inset:0;
  z-index:400;
  visibility:hidden;
  opacity:0;
  transition:opacity var(--dur-med) var(--ease), visibility 0s var(--dur-med);
}
.modal.is-open{
  visibility:visible;
  opacity:1;
  transition:opacity var(--dur-med) var(--ease);
}
.modal-scrim{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
}
.modal-panel{
  position:relative;
  height:100%;
  overflow-y:auto;
  padding: clamp(80px,10vw,120px) var(--edge) 80px;
  transform:translateY(24px);
  transition:transform var(--dur-med) var(--ease);
}
.modal.is-open .modal-panel{ transform:translateY(0); }

.modal-close{
  position:fixed;
  top:26px; right:var(--edge);
  z-index:401;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.modal-close:hover{ background:var(--grey-200); transform:rotate(90deg); }

.modal-content{
  max-width:1040px;
  margin:0 auto;
}
.modal-eyebrow{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey-400);
  margin-bottom:16px;
}
.modal-title{
  font-size:clamp(32px,5.4vw,58px);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.02;
  margin:0 0 40px;
}
.modal-meta-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  border-top:1px solid var(--grey-200);
  border-bottom:1px solid var(--grey-200);
  padding:18px 0;
  margin-bottom:48px;
}
.modal-meta-row div{ display:flex; flex-direction:column; gap:6px; }
.modal-meta-row span:first-child{
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey-400);
}
.modal-meta-row span:last-child{ font-size:14px; }

.modal-desc{
  max-width:640px;
  font-size:16px;
  line-height:1.7;
  color:var(--grey-700);
  margin-bottom:56px;
}
.modal-media{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.modal-media .placeholder-img{
  width:100%;
  aspect-ratio:16/10;
}

/* ============ Responsive ============ */
@media (max-width:980px){
  .gallery{ grid-template-columns:repeat(4,1fr); }
  .span-a,.span-f{ grid-column:span 4; }
  .span-b,.span-e{ grid-column:span 2; }
  .span-c,.span-d,.span-g,.span-h{ grid-column:span 2; }
  .modal-meta-row{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:640px){
  .site-header{ padding:16px var(--edge); }
  .byline{ display:none; }
  .gallery{
    grid-template-columns:1fr;
    padding-top: calc(var(--edge) * 3);
    gap:44px;
  }
  .gallery > .project-item{ grid-column:span 1 !important; }
  .span-a .project-media,
  .span-b .project-media,
  .span-c .project-media,
  .span-d .project-media,
  .span-e .project-media,
  .span-f .project-media,
  .span-g .project-media,
  .span-h .project-media{ aspect-ratio:4/5; }
  .site-footer{ flex-direction:column; gap:8px; margin:0 var(--edge); }
  .modal-meta-row{ grid-template-columns:1fr 1fr; }
}