*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#050607;color:#c8c5bd;font-family:Georgia,"Times New Roman",serif}
a{color:inherit;text-decoration:none}

.sidebar{
  position:fixed;z-index:20;left:0;top:0;width:205px;height:100vh;
  padding:24px 6px;background:#050607;border-right:1px solid #27292a
}
.brand{
  display:block;
  font-size:17px;
  line-height:1.15;
  font-weight:400;
  letter-spacing:.07em;
  color:#aaa8a2;
  margin:0 0 96px 0
}
.brand::after{
  content:"GUIONISTA";
  display:block;
  margin-top:7px;
  font-family:Arial,sans-serif;
  font-size:8px;
  font-weight:400;
  letter-spacing:.22em;
  color:#6f706f
}
.sidebar nav{display:flex;flex-direction:column;gap:34px}
.sidebar nav a{
  font-family:Arial,sans-serif;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:#a9aaab
}
.sidebar nav a:hover{color:#d4d1c9}

main{margin-left:205px}
.project{
  position:relative;height:52vh;min-height:440px;overflow:hidden;
  background:center/cover no-repeat;border-bottom:1px solid #292b2c
}
.morgue{background-image:url("assets/morgue.png")}
.obsidian{background-image:url("assets/obsidian.png")}
.project::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.78) 27%,rgba(0,0,0,.16) 55%,rgba(0,0,0,.28) 100%)
}
.project-copy{
  position:absolute;z-index:2;left:8%;top:50%;transform:translateY(-50%);
  width:min(390px,34vw)
}
.project h1{
  margin:0 0 28px;font-weight:400;font-size:clamp(45px,4.4vw,72px);
  line-height:.98;letter-spacing:.1em;color:#c8c5bd;text-shadow:0 2px 18px #000
}
.obsidian h1{
  font-family:Arial,sans-serif;font-size:clamp(42px,4.2vw,68px);
  letter-spacing:.2em
}
.project-copy p{
  margin:0;font-size:16px;line-height:1.55;color:#aaa8a2;
  text-shadow:0 1px 8px #000
}
.project-note{
  position:absolute;z-index:2;right:5%;top:15%;text-align:left;
  font-family:Arial,sans-serif;font-size:11px;line-height:1.8;
  letter-spacing:.32em;color:#bbb;text-transform:uppercase
}
.project-note .secondary{
  display:block;margin-top:24px;font-family:Georgia,"Times New Roman",serif;
  text-transform:none;letter-spacing:.12em;line-height:1.55
}

.about{
  min-height:0;padding:34px 5vw 30px;border-bottom:1px solid #27292a
}
.about small,.contact small{
  font-family:Arial,sans-serif;
  font-size:9px;
  font-weight:400;
  letter-spacing:.22em;
  color:#85837e
}
.about p{
  margin:14px 0 0;
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  color:#85837e
}

.contact{
  min-height:0;padding:17px 5vw;border-bottom:1px solid #27292a;
  display:flex;align-items:center;gap:34px
}
.contact a{
  font-size:14px;
  font-weight:400;
  text-decoration:underline;
  text-underline-offset:4px;
  color:#85837e
}

footer{
  min-height:64px;padding:0 5vw;display:flex;align-items:center;
  justify-content:space-between;gap:30px
}
footer nav{display:flex;gap:28px;flex-wrap:wrap}
footer a,footer span{
  font-family:Arial,sans-serif;font-size:8px;letter-spacing:.18em;
  text-transform:uppercase;color:#858687
}

/* TABLET */
@media(max-width:1000px){
  .sidebar{width:170px;padding:22px 16px}
  .brand{font-size:15px;margin-bottom:70px}
  main{margin-left:170px}
  .project{height:50vh;min-height:410px}
  .project-copy{left:6%;width:42vw}
  .project-copy p{font-size:15px}
  .project-note{right:4%;top:10%;font-size:9px}
}

/* MOBILE */
@media(max-width:700px){
  .sidebar{
    position:relative;width:100%;height:auto;padding:18px;
    display:flex;align-items:center;justify-content:space-between;
    border-right:0;border-bottom:1px solid #27292a
  }
  .brand{font-size:13px;margin:0}
  .sidebar nav{flex-direction:row;gap:14px;flex-wrap:wrap;justify-content:flex-end}
  .sidebar nav a{font-size:8px;letter-spacing:.1em}
  main{margin-left:0}
  .project{height:auto;min-height:590px;background-position:center}
  .project::before{
    background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.55) 42%,rgba(0,0,0,.96) 72%)
  }
  .project-copy{
    left:7%;right:7%;top:auto;bottom:7%;transform:none;width:auto
  }
  .project h1{font-size:clamp(40px,12vw,58px);margin-bottom:20px}
  .obsidian h1{font-size:clamp(34px,10vw,52px)}
  .project-copy p{font-size:14px;line-height:1.5}
  .project-note{
    left:7%;right:auto;top:6%;font-size:9px;line-height:1.6
  }
  .project-note .secondary{margin-top:14px}
  .about{padding:30px 7vw 26px}
  .contact{padding:16px 7vw;gap:18px;flex-wrap:wrap}
  footer{padding:22px 7vw;min-height:0;align-items:flex-start;flex-direction:column}
  footer nav{gap:16px}
}

@media(max-width:430px){
  .sidebar{align-items:flex-start;flex-direction:column;gap:18px}
  .sidebar nav{justify-content:flex-start}
  .project{min-height:620px}
  .contact a{font-size:14px;overflow-wrap:anywhere}
}