/* fonts */

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Merriweather:700,400,300|Open+Sans:400,300');
@import url('https://fonts.googleapis.com/css2?family=Basic&family=Cabin+Sketch:wght@400;700&family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');

		body, td {
			font-family: 'Cabin', Georgia, Open Sans, Lucidia Grande, Helvetica, Arial, sans-serif;
			letter-spacing: 0;
			text-transform: none;
			line-height: 1.75em;
			-webkit-font-smoothing: antialiased;
			color: #262926;
			background: #fbfbfa;
			padding: 0;
			margin: 0;
			font-size: 1.2em;
			  }
        a:not(:has(img)) {color: #2c5f35;text-decoration:none;border-bottom: 1px solid #2c5f35;}
            h2 a {color: #363d36;border-bottom:0;}
            h2 a:hover {border-bottom:0;}
        a:hover:not(:has(img)) {color:#68bb77 !important;border-bottom:1px solid #68bb77 !important;}
		a, input {-webkit-transition:0.25s;}
		h2 {font-size: 2.25em;line-height:1.5em;margin-top:1.25em;margin-bottom:0;color: #222;font-family:'Basic';}
		h3 {font-size: 1.5em;font-weight: 400;margin-top:1.5em;font-family:'Basic';}
		h4 {font-size:1.25em;}
		hr {border:0;border-bottom:1px solid #ddd;margin-bottom:2em;}
		input, button {-webkit-font-smoothing: antialiased;}
		p {margin:2em 0;}
		p img {max-width:100%;}
		#menu fill {color:#363d36;}


/* layout */


.body {max-width:39em;margin:0 auto;border-width:0 1px;padding:0 2em;}
				.body p, .body h2, .body h3, .body iframe, {padding:0;}
					.body h2.page-title {color: #222;text-transform:uppercase;margin: 1em 0 0;}
				ul li {list-style: none;
					background: url('images/quad-bullet.png') no-repeat 0 14px;
					padding-left: 15px;
					}
					.post li {margin-bottom:1em;}
				.body ul, .body ol {-webkit-padding-start:0.5em;}
				.body ul p {padding-left:0;}
		.hide {display:none;}

		#menu {position:relative;max-width:39em;margin:auto;text-transform:uppercase;padding: 2em 2em 0;}
		#menu a {white-space:nowrap;margin-right:2em;text-decoration:none; color: #333;border:0;font-weight: 500;font-size:0.9em;}
		#menu a:hover, #menu input:hover {cursor:pointer;}
		#menu input:focus {width:10em;text-transform:none;}
		#menu input {border:0;background:transparent;width:5em;}
		#menu form {position: absolute;right: 0;bottom: 0;padding: 0;margin: 0;}

		#menu span a, #menu span input {-webkit-transition:all 0.1s linear;}
			#header:hover #menu span a:nth-child(1) {-webkit-transition-delay:0.05s;}
			#header:hover #menu span a:nth-child(2) {-webkit-transition-delay:0.1s;}
			#header:hover #menu span a:nth-child(3) {-webkit-transition-delay:0.15s;}
			#header:hover #menu span input {-webkit-transition-delay:0.2s;}

		#menu:hover span a, #menu:hover span input, #menu span input:focus {opacity:1.0;}
			#menu span a:nth-child(1) {-webkit-transition-delay:0.2s;}
			#menu span a:nth-child(2) {-webkit-transition-delay:0.15s;}
			#menu span a:nth-child(3) {-webkit-transition-delay:0.1s;}
			#menu span input {-webkit-transition-delay:0.05s;}

		.menu-toggle {display:none;}

		#home-sections {width:100%;display:-webkit-box;-webkit-box-orient:horizontal;}
		#home-sections div {-webkit-box-flex:1;-webkit-transition:width 0.25s ease-out;height:500px;}
		#home-sections div:hover {width:5%;}
		#home-sections #about {background:url(http://farm7.static.flickr.com/6228/6287867359_eb04c0b7a7_b.jpg);background-position:fixed;}
		#home-sections #design {background:url(http://farm7.static.flickr.com/6035/6280510947_8da1e09435_b.jpg);background-position:fixed;}
		#home-sections #blog {background:url(http://farm7.static.flickr.com/6095/6274164732_f9d6f664ce_b.jpg);background-position:fixed;}

		* {box-sizing: border-box;}
		blockquote {padding: 0 1.5em;margin: 0;border-left: 1px solid #96b59b;font-size: 0.9em;}
		.body blockquote p {}


		.body .rss-box ul {margin:0;padding:0;}
		.body .rss-box * {text-align:left;}
		.hero-shot {text-align:center;width: 100%;}
		.hero-shot img {max-width:100%;border: 1px solid #ccc;box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 1px, rgba(0, 0, 0, 0.1) 0px 0px 1px;border-width: 1px 0;}

		.meta {font-weight:100;color:#aaa;font-size:0.8em;margin-top:3em; padding: 0;/* text-align:right; */}
		.meta a {color:#888;border-bottom:0;}
		.meta a:hover {border-bottom:0;}

		.post {margin: 0 0 2em;}

		.entry {
    padding: 0;
    /* background: #f9f9f9; */
    /* box-shadow: 0px 1px 1px #666; */
    /* border-radius: 3px; */
    /* border-width: 0 5px 5px 0; */
    /* border-color: red; */
}
		.entry > p:first-child {margin-top:0;}
		.entry > p:last-child {margin-bottom:0;}

		.navigation {padding-top:1em;border-top:1px solid #ddd;height:3em;}
		.navigation a {color:#666;border-bottom:0;}
		.navigation a:hover {border-bottom:0;}
		.nav-previous {float:right;}

		.sidebar {}
		.sidebar a {color:#666;border-bottom:0;font-size:0.8em;}
		.sidebar a:hover {}
		.body .sidebar h3 {padding:1em 0 0;border-top: 1px solid #ddd;color: #666;text-transform: uppercase;}
		.body .sidebar ul {list-style-type:none;padding:0;margin:0;}
		.body .sidebar ul {-webkit-column-count:3;padding-bottom:2em;}
		.body .sidebar ul ul {-webkit-column-count:1;border-bottom:0;padding-bottom:0;}


		.subsection {background:#eee;padding:0;border:1px solid #ccc;margin:1em;border-radius:2px;}


			#blog #links * {list-style-type:none;}
			#blog #writing img, #blog #writing object, #blog #writing iframe {max-width:100%;}
			#blog #photos a {display:block;margin:5px 0;}
			#blog #photos img {max-width:100%;}
			#blog .post {margin-bottom:3em;}



			.intro {color:#444;margin-bottom:2em;}
			.intro p, .intro h2 {margin-top:0;}


			#logo {float:left;}

			.montage {text-align:center;padding:0;}
			.montage a {position:relative;color:#000;overflow:hidden;display:inline-block;border:1px solid #ccc;-webkit-perspective:1000;box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 1px, rgba(0, 0, 0, 0.1) 0px 0px 1px;vertical-align:middle;margin:10px;}
			.montage a img {z-index:1;position:relative;max-height:150px;max-width:350px;-webkit-transition:all 0.1s ease-out;}
			.montage a:hover {z-index:2;/*-webkit-transform:scale(1.2,1.2)*/;}
			.montage .caption {position:absolute;left:0;bottom:30px;width:100%;background:#fff;z-index:2;opacity:0.0;-webkit-transition:all 0.5s ease-out;box-shadow:rgba(0, 0, 0, 0.1) 0px 2px 1px, rgba(0, 0, 0, 0.1) 0px 0px 1px;text-transform:uppercase;}
			.montage a:hover .caption {opacity:0.9}

			.more-link {text-align:center;}
			.more-link a {color: #000;border: 1px solid #000;padding: 10px 40px;}

			.project {clear:both;margin:1em 0;padding-bottom:1em;border-top:1px solid #ccc;}

			.sidebaritem {float:right;clear:right;width:300px;margin:0 30px 2em 50px;border-width:1px 0;padding:0.5em 0;margin-bottom:2em;}


/* ====================================================================
   Homepage (index.html)
   ==================================================================== */

/* Header, page width, margins, and h2 headings come from the theme rules above */
.home {
	padding-bottom: 6em;
}
.intro {
	font-size: 1.1em;
	line-height: 1.6;
	color: #262926;
	margin: 2.5em 0 0;
}
.home h2 { font-size: 1.5em; margin: 2.25em 0 0.5em; }
.home .project { margin: 0; padding: 0; }

/* ---- Project grid ---- */
.grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 20px;
}
@media (max-width: 900px) {
	.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

.home a.card,
.home a.card:hover {
	display: block;
	color: #262926;
	border-bottom: 0 !important;
                text-decoration:none;
}
.home a.card:hover { color: #2c5f35 !important; }
.card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: #e9e9e6;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.card-media img,
.card-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.card:hover .card-media img,
.card:hover .card-media video {
	transform: scale(1.02);
}
.card:focus-visible { outline: none; }
.card:focus-visible .card-media {
	outline: 2px solid #2c5f35;
	outline-offset: 3px;
}
.card-title {
	font-size: 0.85em;
	font-weight: 400;
	line-height: 1.4;
	margin: 0.55em 0 0;
}
.year,
.date {
	color: #aaa;
	margin-left: 0.35em;
}
/* Play badge on video thumbnails */
.play-badge {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	transition: background 0.2s ease;
}
.play-badge::after {
	content: '';
	position: absolute;
	left: 22px;
	top: 17px;
	border-style: solid;
	border-width: 11px 0 11px 17px;
	border-color: transparent transparent transparent #fff;
}
.card:hover .play-badge { background: rgba(0, 0, 0, 0.75); }

/* ---- Blog post list ---- */
.home ul.posts { margin: 0; padding: 0; }
.home ul.posts li {
	font-size: 1em;
	margin-bottom: 0.6em;
	background-position: 0 0.75em;
}
.home ul.posts a {
	color: #262926;
	border-bottom: 0;
}

/* ---- Social links ---- */
.social {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin-top: 5em;
}
.home .social a,
.home .social a:hover {
	color: #999;
	border-bottom: 0 !important;
	line-height: 0;
}
.home .social a:hover { color: #68bb77 !important; }
.social svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* ---- Lightbox ---- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(251, 251, 250, 0.97);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease;
}
.lightbox-panel {
	width: min(1100px, 100%);
	max-height: 100%;
	overflow: auto;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.12);
}
.lightbox-media {
	position: relative;
	height: min(64vh, 640px);
	background: #f1f1ef;
}
.lightbox-stage {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lightbox-stage img,
.lightbox-stage video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.home .lightbox-stage a.lightbox-youtube {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 0 !important;
}
.lightbox-youtube img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.lightbox-youtube:hover .play-badge { background: rgba(0, 0, 0, 0.75); }
.lightbox-stage iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.lightbox-caption {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	max-width: calc(100% - 140px);
	padding: 5px 14px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
	pointer-events: none;
}
.lightbox-close,
.lightbox-arrow {
	position: absolute;
	border: 0;
	border-radius: 50%;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.lightbox-close {
	color: #333;
	background: rgba(0, 0, 0, 0.06);
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	font-size: 1.6em;
	z-index: 1;
}
.lightbox-close:hover { background: rgba(0, 0, 0, 0.12); }
.lightbox-arrow {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	font-size: 1.8em;
	padding-bottom: 4px;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
}
.lightbox-arrow:hover { background: rgba(0, 0, 0, 0.7); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-text { padding: 1.4em 2em 2em; }
.lightbox-heading {
	display: flex;
	align-items: baseline;
	gap: 1em;
}
.home .lightbox-heading h2 {
	flex: 1;
	margin: 0;
	font-size: 1.6em;
}
.lightbox-count {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.7em;
	color: #999;
	white-space: nowrap;
}
.lightbox-description p {
	margin: 0.75em 0 0;
	font-size: 0.95em;
	line-height: 1.6;
}
@media (max-width: 600px) {
	.lightbox { padding: 12px; }
	.lightbox-media { height: min(42vh, 64vw); }
	.lightbox-description p { font-size: 0.9em; }
	.lightbox-close { top: 10px; right: 10px; width: 36px; height: 36px; }
	.lightbox-arrow { width: 38px; height: 38px; font-size: 1.4em; }
	.lightbox-prev { left: 8px; }
	.lightbox-next { right: 8px; }
	.lightbox-text { padding: 1.1em 1.2em 1.4em; }
}