/*
 * Aisthesis palette overrides for the Lens photo gallery (index.html).
 * Loaded after assets/css/main.css — main.css / noscript.css stay untouched,
 * this file only recolors the existing Lens selectors and swaps in Raleway.
 */

:root{
	--ink:            #141113;
	--parchment:      #F4EEE3;
	--teal:           #004A63;
	--teal-light:     #3E7A90;
	--sand:           #D9C2B3;
	--stone:          #837167;
	--ember:          #952D1F;
	--saffron:        #DD5A22;
	--font-display:   'Raleway', sans-serif;
	--font-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html, body{
	background-color: var(--ink) !important;
}

body, input, select, textarea{
	font-family: var(--font-display) !important;
	color: var(--stone);
}

#main{
	background: var(--parchment) !important;
}
#main .toggle{ filter: invert(0.9); }

@media screen and (max-width: 736px){
	#main{ background: rgba(244, 238, 227, 0.94) !important; }
}

h1, h2, h3, h4, h5, h6{
	font-family: var(--font-display) !important;
	font-weight: 200;
	color: var(--ink) !important;
	letter-spacing: -0.005em;
}

#header{
	border-bottom: 1px solid rgba(20,17,19,0.1);
}
#header h1{
	font-size: 2.6em;
}
#header p a{
	font-family: var(--font-mono);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--teal);
	border-bottom-color: transparent;
}
#header p a:hover{
	color: var(--ember);
}

a{
	color: var(--teal);
}
a:hover{
	color: var(--ember) !important;
}

#thumbnails article .thumbnail:before{
	box-shadow: inset 0 0 0 2px var(--saffron), inset 0 0 0px 3px rgba(0,0,0,0.15);
}

/* Fullscreen viewer caption (shown over the enlarged photo) */
#viewer .slide .caption{
	font-family: var(--font-display);
}
#viewer .slide .caption h2,
#viewer .slide .caption h3{
	font-family: var(--font-display);
	font-weight: 200;
}
#viewer .slide .caption p{
	font-family: var(--font-mono);
	font-size: 0.82rem;
	letter-spacing: 0.01em;
}

#footer{
	border-top: 1px solid rgba(20,17,19,0.1);
}
#footer .copyright,
#footer dl{
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--stone);
}
#footer a{
	color: var(--teal);
	border-bottom-color: transparent;
}
#footer a:hover{
	color: var(--ember);
}
#footer dl dt, #footer dl dd{
	display: inline;
	margin: 0 6px 0 0;
}
#footer dl dt:before{ content: "· "; color: var(--sand); }

/* ---------- Cross-site navigation ---------- */
.site-nav{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-start;
	background: #141113;
	padding: 10px 2.25em 12px 2.25em;
	margin: -3em -2.25em 1.2em -2.25em;
}
.site-nav a, .site-nav span.current{
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid rgba(244,238,227,0.22);
	text-decoration: none;
	border-bottom: 1px solid rgba(244,238,227,0.22);
}
.site-nav a{ color: rgba(244,238,227,0.75) !important; }
.site-nav a:hover{ color: #DD5A22 !important; border-color: #DD5A22; }
.site-nav span.current{ color: #DD5A22; border-color: #DD5A22; }
.site-nav a.site-nav-logo{
	padding: 2px 8px 2px 2px !important;
	border: none !important;
	display: flex;
	align-items: center;
}
.site-nav a.site-nav-logo img{ width: 20px; height: 20px; display: block; }
.site-nav a.site-nav-logo:hover{ opacity: 0.8; }