/* Global */
/* ------------------------------ */

/* reset */
html, body, div, input, ul, li, p, span, img, a, hr, h1, h2, h3, h4 {margin:0; padding:0; border:0 none;}
ul {list-style-type:none;}
hr {height:1px; margin:0; background-color:#d9d9d9;}
input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner {border:0; padding:0; line-height:14px !important;}
input[type="text"], input.text,
textarea {color:#333; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

/* fonts */
/* regular */
@font-face {
	font-family: 'iAWriterDuoS';
	src: url('/css/fontface/iAWriterDuoS-Regular.eot');
	src: local('☺'),
	     url('/css/fontface/iAWriterDuoS-Regular.woff2') format('woff2'),
	     url('/css/fontface/iAWriterDuoS-Regular.woff') format('woff');
	font-weight:normal;
	font-style:normal;
}
/* bold */
@font-face {
	font-family: 'iAWriterDuoS';
	src: url('/css/fontface/iAWriterDuoS-Bold.eot');
	src: local('☺'),
	     url('/css/fontface/iAWriterDuoS-Bold.woff2') format('woff2'),
	     url('/css/fontface/iAWriterDuoS-Bold.woff') format('woff');
	font-weight:Bold;
	font-style:normal;
}
/* italic */
@font-face {
	font-family: 'iAWriterDuoS';
	src: url('/css/fontface/iAWriterDuoS-Italic.eot');
	src: local('☺'),
	     url('/css/fontface/iAWriterDuoS-Italic.woff2') format('woff2'),
	     url('/css/fontface/iAWriterDuoS-Italic.woff') format('woff');
	font-weight:normal;
	font-style:italic;
}
/* bold italic */
@font-face {
	font-family: 'iAWriterDuoS';
	src: url('/css/fontface/iAWriterDuoS-BoldItalic.eot');
	src: local('☺'),
	     url('/css/fontface/iAWriterDuoS-BoldItalic.woff2') format('woff2'),
	     url('/css/fontface/iAWriterDuoS-BoldItalic.woff') format('woff');
	font-weight:bold;
	font-style:italic;
}

/* global variables */
/* light mode (default) */
:root {
	color-scheme: light dark;
	/* clamp slopes are based off of min 600px to 1144px max screen widths */
	--rem:clamp(16px, 1.47059vw + 7.17647px, 24px);

	--content-wide:1536px;
	--content-narrow:1024px;
	--content-padding:clamp(1.5rem, 4.41176vw + -0.15441rem, 3rem);
	--footer-height:2.66667rem;

	--color-body:rgb(247,247,247);
	--color-body-90:rgba(247,247,247,0.9);

	--color-gray:rgb(51,51,51);
	--color-gray-24:rgba(51,51,51,0.24);
	--color-gray-12:rgba(51,51,51,0.12);

	--color-orange-light:rgb(255,156,0);
	--color-orange:rgb(255,136,0);
	--color-orange-dark:rgb(255,116,0);
	--color-orange-x-dark:rgb(255,96,0);
	--color-orange-xx-dark:rgb(255,76,0);
	--color-orange-xxx-dark:rgb(255,56,0);

	--light-appearance-icon:rgb(255,177,0);
	--dark-appearance-icon:rgb(106,78,255);
}
[data-appearance="dark-appearance"]:root {
	--color-body:rgb(34,34,34);
	--color-body-90:rgba(34,34,34,0.9);

	--color-gray:rgb(204,204,204);
	--color-gray-24:rgba(204,204,204,0.24);
	--color-gray-12:rgba(204,204,204,0.12);
}

/* dark mode */
@media (prefers-color-scheme: dark) {
	:not([data-appearance="light-appearance"]):root {
		--color-body:rgb(34,34,34);
		--color-body-90:rgba(34,34,34,0.9);

		--color-gray:rgb(204,204,204);
		--color-gray-24:rgba(204,204,204,0.24);
		--color-gray-12:rgba(204,204,204,0.12);
	}
	:not([data-appearance="light-appearance"]):root .josh.light {display:none;}
	:not([data-appearance="light-appearance"]):root .josh.dark {display:block;}
	[data-appearance="light-appearance"]:root .josh.light {display:block;}
	[data-appearance="light-appearance"]:root .josh.dark {display:none;}
}
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
	.josh.light {display:block;}
	.josh.dark {display:none;}
}

/* common */
* {box-sizing:border-box;}
html {height:100%; font-size:var(--rem)}
body {
	height:100%;
	font-size:1rem;
	color:var(--color-gray);
	line-height:1rem;
	font-family:"iAWriterDuoS", Helvetica, Arial, sans-serif;
	background-color:var(--color-body);}

a {text-decoration:none; color:var(--color-gray); outline:none; transition:color 0.75s ease;}
a:hover {color:var(--color-orange); text-decoration:none; outline:none; transition:color 0.05s ease;}
/* a:active {color:#CCC; outline:none; transition:color 0.1s ease;} */

h1, h2 {line-height:2rem; margin-bottom:2.5rem;}
h1 {font-size:2rem;}
h2 {font-size:1.5rem;}

p {margin-bottom:1.5rem; line-height:2rem;}
p:last-child {margin-bottom:0;}


/* Content */
/* ------------------------------ */
div#center {
	position:relative;
	max-width:calc(var(--content-wide) + (2 * var(--content-padding)));
	min-height:100%;
	margin:0 auto;
	padding-left:var(--content-padding);
	padding-right:var(--content-padding);
	overflow:visible;}
div.content {
	position:relative;
	padding-top:8rem;
	padding-bottom:calc(8rem + var(--footer-height)); /* add padding to compensate for footer height */
}
.narrow {position:relative; max-width:var(--content-narrow); min-height:100%; margin:0 auto;}


/* Navigation */
/* ------------------------------ */
#menu {
	--menu-width:2.5rem;
	--menu-height:1rem;
	--bar-height:0.2rem;
	--menu-padding:0.5rem;
	position:absolute;
	top:2rem;
	right:calc(var(--content-padding) - var(--menu-padding));
	z-index:20;
	box-sizing:content-box;
	width:var(--menu-width);
	height:var(--menu-height);
	line-height:var(--menu-height);
	padding:var(--menu-padding);
	text-indent:-100vw;
}
#menu:hover {cursor:pointer;}
#menu::before,
#menu::after {
	position:absolute;
	display:block;
	width:var(--menu-width);
	height:var(--bar-height);
	pointer-events:none;
	content:"";
	transition:transform 0.2s ease;
}
#menu::before {background-color:var(--color-orange); transform:translateY(0);}
#menu::after {background-color:var(--color-orange-x-dark); transform:translateY(calc(var(--bar-height) * -1));}
#menu-toggle {position:relative; display:none; height:0; z-index:20;}
#menu-toggle:checked ~ #menu {position:fixed; transition:transform 0.1s ease;}
#menu-toggle:checked ~ #menu::before {transform:translateY(calc(var(--menu-height) / 2 - (var(--bar-height) / 2))) rotate(45deg);}
#menu-toggle:checked ~ #menu::after {transform:translateY(calc(var(--menu-height) / 2 * -1 - (var(--bar-height) / 2))) rotate(-45deg);}
#menu-toggle:checked ~ nav {opacity:1; z-index:10; transition:all 0.2s ease;}
#menu-toggle:checked ~ nav .link-wrapper {transform:translateY(0); opacity:1; transition:all 0.2s ease;}
nav {
	display:flex;
	opacity:0;
	justify-content:center;
	position:fixed;
	top:0;
	right:0;
	left:0;
	bottom:0;
	height:100%;
	padding-top:8rem;
	line-height:1.5rem;
	overflow-y:scroll;
	background-color:var(--color-body);
	z-index:-1;
	transition:all 0.5s ease;
}
nav .link-wrapper {transform:translateY(1rem); opacity:0; transition:all 0.2s ease;}
nav ul {display:flex; flex-direction:column;}
nav .primary {padding-bottom:1.5rem;}
nav .social {padding-top:1.5rem; padding-bottom:4rem; border-top:2px solid var(--color-gray-12);}
nav .primary li,
nav .social li {display:inline; margin-bottom:1rem; clear:both;}
nav li:last-child {margin-bottom:0;}
nav li a {position:relative; display:inline-block; padding:0.5rem 0; font-size:1.5rem;}
nav .social svg {
	position:absolute;
	box-sizing:content-box;
	transform:translate(-2rem, -0.5rem);
	width:1rem;
	height:1rem;
	padding:0.75rem 1rem 0.75rem 0;
	content:"";
	fill:var(--color-gray-24);
	transition:fill 0.75s ease, transform 0.2s ease;
}
nav .primary li:nth-child(1) a:hover {color:var(--color-orange-light);}
nav .primary li:nth-child(2) a:hover {color:var(--color-orange);}
nav .social li:nth-child(1) a:hover {color:var(--color-orange-dark);}
nav .social li:nth-child(2) a:hover {color:var(--color-orange-x-dark);}
nav .social li:nth-child(3) a:hover {color:var(--color-orange-xx-dark);}
nav .social li:nth-child(4) a:hover {color:var(--color-orange-xxx-dark);}
nav .social a:hover svg {transform:translate(-1.85rem, -0.5rem); transition:fill 0.05s ease, transform 0.05s ease;}
nav .social a.instagram:hover svg {fill:var(--color-gray);}
nav .social a.dribbble:hover svg {fill:#DB417C;}
nav .social a.flickr:hover svg {fill:#FF0680;}
nav .social a.linkedin:hover svg {fill:#007AB7;}

nav .appearance {flex-direction:row; justify-content:center; padding-bottom:4rem;}
nav .appearance li {display:inline-block; height:1rem; line-height:1rem;}
nav .appearance a {display:inline-block; line-height:1rem; padding:0 1.25rem; border-right:2px solid var(--color-gray-12);}
nav .appearance li:last-child a {border-right:none;}
nav .appearance svg {width:1rem; height:1rem; pointer-events:none;}
nav .appearance svg path {fill:var(--color-gray-24);}
nav .appearance svg line {stroke:var(--color-gray-24);}
nav .appearance svg line,
nav .appearance svg path {transition:all 0.2s ease; pointer-events:none;}
nav .appearance :hover svg line,
nav .appearance :hover svg path {transition:all 0.05s ease;}
/* light icon */
nav .appearance .light.active svg path,
nav .appearance .light:hover svg path {fill:var(--light-appearance-icon);}
nav .appearance .light.active svg line,
nav .appearance .light:hover svg line {stroke:var(--light-appearance-icon);}
/* dark icon */
nav .appearance .dark.active svg path,
nav .appearance .dark:hover svg path {fill:var(--dark-appearance-icon);}
nav .appearance .dark.active svg line,
nav .appearance .dark:hover svg line {stroke:var(--dark-appearance-icon);}
/* auto icon */
nav .appearance .auto.active svg #dark_circle,
nav .appearance .auto:hover svg #dark_circle {fill:var(--light-appearance-icon);}
nav .appearance .auto.active svg #light_circle,
nav .appearance .auto:hover svg #light_circle {fill:var(--light-appearance-icon);}
nav .appearance .auto.active svg line,
nav .appearance .auto:hover svg line {stroke:var(--light-appearance-icon);}

/* home */
.josh {position:relative; display:none; width:8rem; height:8rem; margin:4rem auto 0; border-radius:3px;}

/* photo */
.photo .photography {display:grid; margin-top:4em; grid-template-columns:repeat(2, 1fr); gap:0;}
.photo .photography img {transition:all 0.4s ease;}
/* .photo .photography:hover img {filter:contrast(1) brightness(1); transition:all 0.4s ease;} */
/* .photo .photography:hover a:hover img {filter:contrast(110%) brightness(110%); transition:all 0.3s ease;} */
.photo .photography li {display:block;}
.photo .photography li a {display:block; line-height:0; aspect-ratio:1 / 1; overflow:hidden;}
.photo .photography li a img {width:100%; height:100%; object-fit:cover;}

/* photoswipe override styles */
.pswp {
	--pswp-bg:var(--color-body);
	--pswp-icon-color:var(--color-gray);
	--pswp-icon-color-secondary:transparent;
	--pswp-button-height:2.5rem;
}
.pswp__top-bar {height:var(--pswp-button-height); margin-top:0.5rem;}
.pswp__counter {height:var(--pswp-button-height); margin:0 0 0 1rem; font-size:1rem; font-weight:bold; line-height:var(--pswp-button-height); color:var(--color-orange-x-dark);}
.pswp__preloader {width:var(--pswp-button-height); height:var(--pswp-button-height); display:flex; align-items:center; justify-content:center;}
.pswp__button {height:var(--pswp-button-height); width:var(--pswp-button-height); margin-right:0.5rem; opacity:1;}
.pswp__icn {position:static; height:1.5rem; width:auto;}
.pswp__icn-shadow {display:none;}
.pswp__button--close {margin-right:0.5rem;}
.pswp__button--arrow {position:absolute; top:0; width:var(--pswp-button-height); height:var(--pswp-button-height); top:50%; margin-top:calc(var(--pswp-button-height) / -2); margin-right:0;}
.pswp__button--arrow .pswp__icn {top:0; margin-top:0; width:auto; height:1.5rem;}
.pswp__button--arrow--next .pswp__icn {transform:scale(-1, -1);}
/* for testing the preloader */
/* .pswp-with-perma-preloader .pswp__icn {opacity: 0.85 !important;} */


/* Footer */
/* ------------------------------ */
div#footer {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:var(--footer-height);
	padding:0 var(--content-padding);
	font-size:0.66666rem;
	line-height:0.66666rem;
	text-align:center;
}
div#footer p {margin-bottom:2rem;}


/* LARGE SCREENS */
/* ------------------------------ */
@media (min-width:600px) {
	/* photo */
	.photo .photography {grid-template-columns:repeat(3, 1fr);}
}