/*
Theme Name: Noah
Theme URI: https://opencollective.com/blankslate
Template: blankslate
Author: Dina Kelberman
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/blankslate/issues. Thank you.
Tags: accessibility-ready,one-column,two-columns,custom-menu,featured-images,microformats,sticky-post,threaded-comments,translation-ready
Version: 2025.1750289588
Updated: 2025-06-18 23:33:08

*/

/* global */

@font-face {
  font-family: 'Roboto Condensed';
  src: 
    url('/font/RobotoCondensed-VariableFont_wght') format('ttf'),
    url('/font/RobotoCondensed-Italic-VariableFont_wght.ttf') format('ttf');
  font-weight: 400;  /* Normal */
  font-style: normal;
  font-display: swap; /* Optional: improves performance */
}

body { 
margin: 0;
overflow:hidden;
font-family:'Arial Narrow', 'Roboto Condensed', sans-serif;
/*letter-spacing:0.5px;*/
text-transform:uppercase;	
opacity:0;
}

/* iPhone/iPad Safari */
@supports (-webkit-touch-callout: none) {
	body {opacity:1!important}
}

body.windows {font-family:'Roboto Condensed',sans-serif}

body.blog {overflow:auto}

i, span {display:inline!important;}

a {color:inherit!important}

em {font-style:italic}

strong {font-weight:bold}

name {
	display: block;
    position: fixed;
    z-index: 999;
    width: 100vw;
    text-align: center;
    font-size: 18vw;
    font-weight: bold;
	/* for all caps */
	font-size:16.5vw;
	letter-spacing:-8px;
}

body.home name {animation:breathe 20s infinite;}

@keyframes breathe {
	0% {letter-spacing:-8px;}
	50% {letter-spacing:-17px;}
	100% {letter-spacing:-8px;}
}

name a {text-decoration:none}

body.blog [name], body.blog [dir], body.bio name {display:none!important}

burger {
font-size:2em;
margin-top:15px;
display:none;
}

menu {
    position: fixed;
    z-index: 999;
    color:white;
    top:22vw;
    overflow:hidden;
}

body.blog menu {padding:20px;}

menu a, menu span, menu details {
    text-decoration: none;
    display:block!important;
}

menu more, projects, stills {opacity:0;transition-duration:0.2s}
body.blog menu more, body.blog #projects {opacity:1;transition-duration:0.2s}

/*body.blog details, body.wp-singular [proj] {display:none!important}*/

p {
    width: 90%;
    margin: 20px 0;
}

/* 404 */
body.error404 name.fit, body.error404 span[proj] {display:none!important}

/* HOMEPAGE */

body.homepage menu, body.homepage .entry-content, body:not(.homepage) #ripple-container {display:none}

body.homepage figure {
    width: auto;
    max-height: 75vh;
    max-width: 90vw;
    clip-path: inset(1% 1% 1% 1%);
    cursor: pointer;
}

body.homepage figure img {
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
}

body.home name {opacity:0;transition-duration:0.5s}
body.home name.show {opacity:1}

/* RIPPLE */

body.blog #ripple-container {top: 14vh;}

#ripple-container { 
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    position: fixed;
    transition-duration: 0.2s;
}

#ripple-container svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:-999}
#ripple-container image { width: 100%; height: 100%; object-fit: cover; }

#ripple-container img {
width: auto;
max-height: 90vh;
max-width: 90vw;
clip-path: inset(1% 1% 1% 1%);
cursor:pointer;
}

/* PROJECTS */

#projects {
	position:relative;
	display:block;
	opacity:0;
	width: 100vw;
	top:20vw;
}

article {
    width: 100%;
    aspect-ratio: 32 / 9;
    display: block;
    position: relative;
    cursor: pointer;
    margin-bottom: 20vh;
    z-index: 50;
    overflow: hidden; /* Ensures pseudo-element stays contained */
	background-size:0px;
}

/* Grayscale background (replaces backdrop-filter) */
article::before {
    content: "";
    position: absolute;
    width: 50%; /* Matches your background-size */
    height: 100%;
    left: 0;
    background-image: inherit; /* Uses parent's background */
    background-size: cover;
    background-position: left;
    filter: grayscale(100%) contrast(110%); /* Enhanced B&W effect */
    z-index: -1;
    transition: filter 0.2s ease-in-out;
}

article:hover::before {filter: grayscale(0%);}

article:last-of-type {
    margin-bottom: 0;
}

project {
    display: block;
    width: 100vw;
    height: 100%;
}

body.blog project-info {
    display: block;
    width: 50%;
    height: 100%;
    text-align: center;
    left: 50%;
    position: absolute;
    background:white;
}

body.blog project-title {
    display: inline-block;
    font-size: 2em;
    margin: 25% 0 10px 0;
    background: #496337;
    padding: 0 7px 3px 11px;
    color: white;
    position: relative; /* Ensures text stays above grayscale */
}

body.blog project-role {
    display: block;
    /*font-weight: lighter;*/
    color: black;
}
article:nth-of-type(even)::before {left:50%}
article:nth-of-type(even) project-info {left:0}
article:nth-of-type(even) laurels {right:0}

body.blog project-title, menu a, menu span, menu summary {
    background: #496337;
    padding: 0 7px 3px 7px;
    color: white!important;
}

menu * {
    user-select: none;       /* Standard syntax */
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */	
}

menu span {width:100%}

menu a, menu span, menu details {
	margin:15px 0;
	padding:0 7px 3px 11px;
}

menu details {padding:0}
menu summary {list-style:none; cursor:pointer;}

	
/* Hide the default arrow in all browsers */
details > summary {
  list-style: none; /* Standard way (Firefox, Chrome 90+) */
}

details > summary::-webkit-details-marker {
  display: none; /* Legacy WebKit (Safari, older Chrome) */
}

details a:before {
	content:'⸻';
	margin-right:9px;
}

body.blog data {display:none}

laurels {
	position: absolute;
    bottom: 0;
    height: 15%;
    margin: 20px;
}

laurels img {height:100%}

something {
    display: block;
    height: 30%;
    margin-top: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

project-info:has(something) project-title {margin-top:15%!important}

/* POSTS */

body.single-post {
	margin:2%;
	overflow-y:auto;
	overflow-x:hidden;
}

body.wp-singular menu, body.error404 menu {
	position: fixed;
    z-index: 999;
    margin: 2em;
    top: 0;
}

body.wp-singular project-title {
    display: block;
    font-weight: bold;
    letter-spacing: -1px;
    margin-bottom: 30px;
    font-size: 50px;
}

body.wp-singular project-role, body.single-post name {display:none;}

body.wp-singular figure:first-of-type {margin:30px 0 80px}

.entry-content {
    position: relative;
    display: block;
    margin-bottom: 300px;
    width: 60vw;
    left: 20vw;
    top: 22px;	
	letter-spacing:0.5px;
	line-height: 1.5em;	
}

blockquote {
	line-height: 43px;
    font-size: 32px;	
	margin:20px auto 50px;
	overflow-wrap:anywhere;
}

blockquote p:first-of-type:first-letter {
	font-size: 4em;
    font-weight: bold;
    color: #496337;
    float: left;
    margin-right: 10px;
    line-height: 0.8;	
}

blockquote p.quoter {
	text-align:right;
}

body.wp-singular figure {
	width: 100%;
	z-index: 0;
}

body.wp-singular figure.is-style-small-image {width:50%!important}

body.wp-singular figure.first-still {left:0!important}

body.wp-singular:not(.homepage) .wp-block-image:not(.is-style-logo), body.wp-singular:not(.homepage) .wp-block-embed, body.wp-singular:not(.homepage) .wp-block-video {
    display: block !important;
    width: 80vw !important;
    margin-left: -12vw !important;
    margin-bottom: 50px !important;
    position: relative !important;
}

body.wp-singular .wp-block-image img {width:100%}

figure.wp-block-image.is-style-logo {
    display: inline-block;
    margin: 50px 15px;
}

body.wp-singular .entry-content a:not([logolink]) {
    text-decoration: none;
    background: #496337;
    color: white !important;
	padding:0 7px 3px 11px;
}

body.wp-singular .entry-content a:not([logolink]):hover {
	background:black;
}

body.single-post noah {display:block;}

@media screen and (min-width: 600px) {
	body.single-post the-data {
		right: -50px;
		top: -10px;
		position: absolute;
		text-align: right;
		font-size: 11px;
		line-height: 15px;	
	}
}

data-text {
    display: inline-block;
    white-space: pre;
    margin-right: 10px;
    vertical-align: bottom;	
}

the-data img {
    max-width: 50px;
    max-height: 50px;
    display: inline-block;
    vertical-align: bottom;	
}

body.page data {display:none;}

/* etc */

body:not(.open) projects {pointer-events:none}

/* BIO */

body.bio {overflow:auto}

bio {
    position: absolute;
    display: block;
    bottom: 12vh;
    left: 15vw;
    width: 37vw;
    line-height: 2em;
    z-index:999;
    padding: 20px;
    border:1px solid;
}

body.bio #ripple-container img {
	width:60vw;
	height:auto;
}

body.bio project-title {display:none}


/* project pages */

body.project quote {
display: block;
position: relative;
margin-bottom: 50px;
font-size: xx-large;
line-height: 1.5em;
}

body.project quote::first-letter {
  font-size: 4em;
  font-weight: bold;
  color: #ff5733;
  float: left;
  margin-right: 10px;
  line-height: 0.8; /* Adjust for alignment */
}

body.project project-title {
display:block;
margin-bottom: 10px;
letter-spacing: 1px;
font-weight:bold;
}

body.project project-title i {font-style:normal}

body.project project-data {
display: block;
margin-bottom: 30px;
}

body.project project-data data {
    float: right;
    font-size: x-small;
    white-space: pre;
	transform:translateY(-50%);
}

body.project project::after {display:none}

body.project #projects img-wrap {width:100%;}

.post-role {
    font-size: 0.95em;
    color: #555;
    margin: -10px 0 20px 0;
    font-style: italic;
}


/* MOBILE */

@media screen and (max-width: 600px) {
	
	body.home {overflow:auto}
	
	body.home #ripple-container {transform:translateY(-40%)}
	
	name {letter-spacing:0}
	
	body.home name {
		opacity:1;
		transform:translateY(-110%);
		font-size:13vw;
		margin-top: -10px;
	}
	
	@keyframes breathe {
		0% {letter-spacing:-1vw;}
		50% {letter-spacing:0.2vw;}
		100% {letter-spacing:-1vw;}
	}
	
	body.blog menu, body.wp-singular menu {
		width: 200vh;
		position: absolute;
		left: 0;
		transform: rotate(90deg) translateY(-100%);
		transform:rotate(90deg);
		top:0;
		transform-origin: 0% 0%;
		text-align: center;
		padding: 0px;
    	text-align: left;
		font-size: 15px;
        letter-spacing: 1px;
	}
	
	body.wp-singular menu {margin:0;}
	
	menu a, menu summary {
		display:inline-block!important;
		width:auto;
		margin: 15px 8px 15px 0;
    	padding: 6px 11px 7px 11px;
	}
	
	menu details {display:inline-block!important;margin:0!important}
	menu details[projects][open] a, menu details[contact][open] summary {display:none!important;}
	
	body.wp-singular [dir] {display:none!important}
	body.wp-singular [proj] {display:inline-block!important;width:auto;}
	
	body.blog name {
		position:relative;
		margin:30px 0;
		left:14vw;
		text-align:left;
		font-size: 14.75vw;
	}
	
	body.blog name a {margin-left: calc(-14vw + 15px);}
	
	body.blog #projects {
		top:0;
		width: 93vw;
        left: 14vw;
	}
	
	body.blog article::before {display:none}
	
	body.blog article {
		aspect-ratio: 1 / 1;
		background-size: 99%;
        background-position: 1px 0;
		margin-bottom:0;
		background-repeat:no-repeat;
	}
	
	body.blog article:has(something) {margin-bottom:5vh}
	
	body.blog project-info {
		width: 100%;
        height: 50%;
        bottom: 0;
        left: 0;
	}
	
	body.blog project-title {margin-top:7%!important;}
	
	laurels {top:0;height:10%}
	
	body.wp-singular .entry-content {
		width:93vw;
		left:14vw;
		margin-bottom:0px;
		line-height:normal;
	}
	
	body.wp-singular project-title {margin:30px 0;}
	
	body.wp-singular figure.wp-block-image.is-style-logo {margin:50px 0}	
	
	body.wp-singular:not(.homepage) .wp-block-image {width:90%!important;}
	
	body.wp-singular:not(.homepage) .wp-block-image:not(.is-style-logo), body.wp-singular:not(.homepage) .wp-block-embed, body.wp-singular:not(.homepage) .wp-block-video {
		width:90%!important;
		margin-left:0!important;
	}
	
	blockquote {width:90%}
	
	blockquote.first-quote:first-letter {font-size:3em}
	
	.entry-content a {line-height: 30px;padding:0}
	
	data {
		font-size: 12px;
		width: 85vw;
		display: block;
	}
	the-data img {
		float:right;
		margin: 0 5px;
	}
	
	details a:before {content:'';}
	
}