/*
 *   Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;}

/*
 *   Styles
 */

* {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

html {height:100%;}

body {min-height:100%; display:flex; flex-direction:column; background:black; font-family:'Source Sans Pro', sans-serif; font-weight:300; font-size:18px; line-height:1.4em;}

h1 {margin:0 0 5px 0; font-size:32px; line-height:100%; font-weight:800; text-transform:uppercase;}

p {margin:0 0 1em 0;}
p:last-child {margin-bottom:0;}

a:link,
a:visited {color:#000;}
a:hover {text-decoration:none;}

header {/* position:sticky; top:0; */ display:flex; gap:30px; width:100%; margin:auto; padding:30px; background:#fff; border-bottom:1px solid rgba( 0,0,0, .1 ); transform:translateZ(1px); color:rgba( 0,0,0, .75 ); transition:box-shadow .15s;}
body.scrolled header {box-shadow:0 10px 25px 0 rgba( 0,0,0, .2 );}
header .image {display:flex; align-items:center;}
header .image img {border-radius:50%;}
header .text {position:relative; display:flex; flex-direction:column; justify-content:center;}
header .text p {margin-bottom:15px;}
header .social {display:flex; flex-direction:column; align-items:flex-start; font-size:14px; line-height:1.4em;}
header p.social {margin-bottom:0;}
header .social a {display:inline-flex; align-items:center; gap:8px; margin:0 0 5px 0; padding:8px 16px; background:rgba( 0,0,0, .05 ); border-radius:3px; line-height:1em; text-decoration:none; color:rgba( 0,0,0, .75 ); transition:color .2s, background .2s;}
header .social a:hover {background:rgba( 0,0,0, .1 ); color:rgba( 0,0,0, 1 );}
header .social a:last-child {margin-bottom:0;}
header .social a i {color:rgba( 0,0,0, .3 ); font-size:14px; text-align:center; transition:color .2s;}
header .social a:hover i {color:rgba( 0,0,0, .4 );}

@media (max-width:500px){
  header {flex-direction:column; align-items:center;}
  header .text {align-items:center; text-align:center;}
}

main {flex:1; display:flex; gap:60px; padding:30px; background:linear-gradient( to bottom, #f7f7f7, #fff );}

section.photos .photo {flex:1; height:140px; margin:0 0 0 5px; background:no-repeat center; background-size:cover;}
section.photos .photo:first-child {margin-left:0;}
section.photos img {max-height:100%;}

section.projects {--columns:4; align-self:flex-start; display:grid; gap:30px; grid-template-columns:repeat( var(--columns), 1fr ); grid-auto-rows:1fr; max-width:2000px;}

@media (max-width:1600px){
  section.projects {--columns:3;}
}

@media (max-width:1024px){
  section.projects {--columns:2;}
}

@media (max-width:768px){
  section.projects {--columns:1;}
}

.project {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:40px; border-radius:8px; color:#fff;}
.project {--shadow-color:rgba( 0,0,0, .2 ); /* box-shadow:4px 4px 0 0 var(--shadow-color); */ box-shadow:0 0 20px 0px rgba( 0,0,0, .5 ); background:linear-gradient(177.5deg, var(--background-color) 85%, var(--shadow-color))}
.project .image {display:flex; align-items:center; height:50px;}
.project .image img {max-height:50px;}
.project .text {/* flex:1; */ font-size:16px; line-height:1.4em; text-align:center;}
.project {transition:transform .2s, box-shadow .2s;}
.project:hover {transform:scale(1.02); box-shadow:0 0 40px 0 rgba( 0,0,0, .5 );}
/*
*/

.project.punch {--background-color:#00a657; --shadow-color:#006e3a; color:rgba( 255,255,255, .75 );}
.project.punch .image img {max-width:150px;}
.project.punch a:link,
.project.punch a:visited {color:rgba( 255,255,255, .75 );}
.project.punch img.example {height:400px; margin-top:30px; border-radius:10px; box-shadow:0 20px 30px rgba( 0,0,0, .3 );}
.project.punch strong {color:#fff;}

.project.beam {--background-color:#eae04b; --shadow-color:#a9a11c; color:rgba( 0,0,0, .75 );}
.project.beam .image img {max-width:150px;}
.project.beam a:link,
.project.beam a:visited {color:rgba( 0,0,0, .75 );}
.project.beam video {height:400px; aspect-ratio:500/780; margin-top:30px; background:#fff; border-radius:10px; box-shadow:0 20px 30px rgba( 0,0,0, .3 );}

.project.triplezero {--background-color:#d31f48; --shadow-color:#961331; color:rgba( 255,255,255, .75 );}
.project.triplezero .image img {max-width:150px;}
.project.triplezero a:link,
.project.triplezero a:visited {color:rgba( 255,255,255, .75 );}
.project.triplezero .portfolio {display:grid; align-items:center; height:400px; grid-template-columns:repeat( 2, 1fr ); grid-template-rows:repeat( 3, 1fr ); column-gap:10px; row-gap:10px; background:radial-gradient( rgba( 0,0,0, .3 ), rgba( 0,0,0, 0 ) 70% );}
.project.triplezero .portfolio img {max-width:100%; border-radius:3px;}

.project.frontrow {--background-color:#2f2f2f; --shadow-color:#1f1f1f; color:rgba( 255,255,255, .75 );}
.project.frontrow .image img {max-width:150px;}
.project.frontrow a:link,
.project.frontrow a:visited {color:rgba( 255,255,255, .75 );}
.project.frontrow strong {color:#fff;}

.project.elastic {--background-color:#7fd0c7; --shadow-color:#478d85; color:rgba( 255,255,255, .75 );}
.project.elastic .image img {max-width:150px;}
.project.elastic a:link,
.project.elastic a:visited {color:rgba( 255,255,255, .75 );}
.project.elastic strong {color:#fff;}

.project.photos {max-width:830px; padding:0; --background-color:rgba( 0,0,0, 0 ); box-shadow:none;}
.project.photos h2 {margin-bottom:20px; color:rgba( 0,0,0, .5 );}
.project.photos .portfolio {display:grid; grid-template-columns:repeat( 3, 1fr ); gap:20px;}
.project.photos .portfolio img {display:block; max-width:100%;}
.project.photos .portfolio img.span-two {grid-column:span 3;}
.project.photos .portfolio img.vertical {grid-row:span 2;}

section.bare .text {background:none; box-shadow:none; border:0;}

section.bare .text::before,
section.bare:nth-child(2n) .text::before {content:'';}
section .text:only-child::before {content:'';}

/*
@media ( prefers-color-scheme:dark ){
*/
  
  header {background:linear-gradient(135deg, #222, #050505); border-bottom:0; box-shadow:0 0 50px 0px rgba( 0,0,0, .5 ); color:rgba( 255,255,255, .75 );}
  header h1 {color:#fff;}
  header .social a:link,
  header .social a:visited {background:rgba( 255,255,255, .1 ); color:rgba( 255,255,255, .75 );}
  header .social a:hover {background:rgba( 255,255,255, .2 ); color:rgba( 255,255,255, .75 );}
  header .social a i {color:rgba( 255,255,255, .3 );}
  header .social a:hover i {color:rgba( 255,255,255, .5 );}

  main {background:linear-gradient( to bottom, #111, #333 );}

  .project.photos {}
  .project.photos h2 {color:rgba( 255,255,255, .5 );}
  
/*
}
*/

@media ( max-width:800px ){
  
  .project.photos .portfolio {columns:2;}
  
}

@media ( max-width:500px ){

  html {background:#050505;}
  body {background:linear-gradient(145deg, #222 240px, #050505); background-attachment:fixed;}
  body.scrolled header {box-shadow:none;}

  main {background:none;}
  header {background:none; box-shadow:none;}
  
  header {padding:30px 20px;}
  header h1 {margin-bottom:10px;}
  header .image {justify-content:center; width:100%;}
  header .image img {width:100%; height:auto; aspect-ratio:auto; max-width:40%;}
  
  header .social a {gap:12px; margin-top:10px; padding:10px 20px; font-size:18px; line-height:140%; font-weight:500;}
  header .social a {-webkit-tap-highlight-color: transparent;}
  header .social a:active {background:rgba( 255,255,255, .2 ); color:rgba( 255,255,255, .75 );}
  header .social a i {font-size:18px; line-height:140%;}

  main {padding:30px 20px;}

  section.projects {gap:30px;}
  
  .project {padding:30px; gap:30px;}

  .project.frontrow .image {height:60px;}
  .project.frontrow .image img {max-height:60px;}

}