/* =========================================================
   BASE / COLORS (dark scheme)
   ========================================================= */

body { background-color: #000; color: #fff; }

/* Links: default white, active slightly dim (almost white) */
a { 
	color: #fff !important; 
	text-decoration: none !important; 
	opacity: 1 !important;
}

/* On click, do NOT dim */
a:active { opacity: 1 !important; }

/* Active/current page link = slightly darker than white */
.page a.active,
a.active {
	color: rgba(255,255,255,0.82) !important;
	opacity: 1 !important;
}

/* Keep header/nav links safe (no blue, no unexpected dimming) */
header a,
#site_title a,
.site-title a,
nav a {
	color: #fff !important;
	text-decoration: none !important;
	opacity: 1 !important;
}

/* Optional: hover stays white (no dim) */
a:hover {
	color: #fff !important;
	opacity: 1 !important;
}

i, em { font-style: italic; }
b, strong { font-weight: bolder; }

sub, sup { position: relative; vertical-align: baseline; }
sub { top: 0.3em; }
sup { top: -0.4em; }

s { text-decoration: line-through; }

img { border: 0; padding: 0; display: block; }

ul, ol { margin: 0; padding: 0 0 0 1em; }
blockquote { margin: 0; padding: 0 0 0 2em; }

hr { background: rgba(255,255,255,0.2); border: 0; height: 1px; display: block; }

.content img { float: none; margin-bottom: 0 !important; }

/* =========================================================
   LOADING
   ========================================================= */

.loading[data-loading] { position: fixed; bottom: 8px; left: 8px; }

/* =========================================================
   BREAKPOINTS / CONTAINER
   ========================================================= */

[data-css-preset] .page { background-color: initial /*!page_bgcolor*/; }

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto /*!content_center*/;
	margin-right: auto /*!content_center*/;
	text-align: left /*!text_left*/;
}

/* Keep thumbs stable on desktop */
[data-css-preset] .container_width { width: 100% !important; }

/* Minimal dead space */
[data-css-preset] .content_padding {
	padding-top: 0rem !important;
	padding-bottom: 0rem !important;
	padding-left: 0rem !important;
	padding-right: 0rem !important;
}

[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/* =========================================================
   THUMBNAILS — stable desktop, 1-wide, tight
   ========================================================= */

div[thumbnails] { justify-content: flex-start; }

/* Fix the “disappear on wide” issue */
[data-css-preset] .thumbnails_width { width: 100% !important; }

[data-css-preset] [thumbnails-pad],
[data-css-preset] [thumbnails-gutter],
[data-css-preset] [responsive-layout] [thumbnails-pad],
[data-css-preset] [responsive-layout] [thumbnails-gutter] {
	padding: 0 !important;
	margin: 0 !important;
}

div[thumbnails], .thumbnails {
	display: block !important;
	width: 100% !important;
}

div[thumbnails] .thumbnail {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	position: relative !important;
	margin: 0 !important;
}

div[thumbnails] .thumbnail a.image-link { display: block; }

/* =========================================================
   HOVER OVERLAY — VIGNETTE
   ========================================================= */

div[thumbnails] .thumbnail::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at center,
			rgba(0,0,0,0.00) 0%,
			rgba(0,0,0,0.18) 35%,
			rgba(0,0,0,0.48) 70%,
			rgba(0,0,0,0.78) 100%
		);
	opacity: 0;
	transition: opacity 160ms ease;
	pointer-events: none;
	z-index: 2;
}

div[thumbnails] .thumbnail:hover::after { opacity: 1; }

/* =========================================================
   HOVER TEXT — CENTERED, NO OVERLAP (TITLE + TAGS)
   ========================================================= */

/* Common overlay text settings */
.thumbnails .title,
.thumbnails .tags {
	opacity: 0 !important;
	transition: opacity 160ms ease;
	position: absolute !important;
	left: 50% !important;
	z-index: 3 !important;
	padding: 0 22px;
	color: rgba(255,255,255,0.95) !important;
	pointer-events: none;
	text-align: center !important;

	/* prevents long titles from becoming one huge line */
	max-width: min(900px, 92vw);
	white-space: normal;
	overflow-wrap: anywhere;

	/* improves readability on bright frames */
	text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}

/* Title is the anchor at the vertical center */
.thumbnails .title {
	top: 50% !important;
	transform: translate(-50%, -50%) !important;

	margin: 0 !important;
	font-size: 1.8rem !important;     /* 1.5x */
	font-weight: 700 !important;
	font-family: "Social Condensed Variable", Icons;
	font-style: normal;
	line-height: 1.15;
	letter-spacing: 0.12em;
	font-variation-settings: 'wdth' 75, 'slnt' 0;
}

/* Tags sit BELOW the title using a fixed offset from the center.
   This avoids collisions with different title lengths. */
.thumbnails .tags {
	top: calc(50% + 34px) !important; /* vertical spacing under title */
	transform: translateX(-50%) !important;

	margin: 0 !important;
	font-size: 1.5rem !important;     /* 1.5x */
	font-weight: 400 !important;
	font-family: "Social Condensed Variable", Icons;
	font-style: normal;
	line-height: 1.15;
	letter-spacing: 0.12em;
	font-variation-settings: 'wdth' 75, 'slnt' 0;
	opacity: 0 !important;
}

/* Reveal on hover */
div[thumbnails] .thumbnail:hover .title,
div[thumbnails] .thumbnail:hover .tags {
	opacity: 1 !important;
}

/* If tags render as links, keep them white and non-interactive */
.thumbnails .tags a {
	border-bottom: 0 !important;
	color: rgba(255, 255, 255, 0.90) !important;
	text-decoration: none !important;
	pointer-events: none;
}

/* =========================================================
   SITE MENU BUTTON / MENU (kept functional)
   ========================================================= */

[data-css-preset] #site_menu_button {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    background: rgba(33, 32, 46, 0);
    position: fixed;
    top: 2rem /*!site_menu_button*/;
	right: 2rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 34px;
}

#site_menu_button.custom_icon { width: 40px; height: auto; }
#site_menu_button.active { display: none; }

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu { width: 100%; }

#site_menu .page-link a { color: rgba(255, 255, 255, 0.90) !important; }
#site_menu .set-link > a { color: rgba(255, 255, 255, 0.90) !important; font-weight: bold; }

#site_menu a:active { opacity: 1 !important; }
#site_menu a.active { color: rgba(255,255,255,0.82) !important; opacity: 1 !important; }

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break { height: 28px; }
#site_menu .indent { margin-left: 28px; }

/* =========================================================
   AUDIO PLAYER (kept functional)
   ========================================================= */

.audio-player {
    max-width: 100%;
    height: 3.3rem;
    outline: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player { max-width: 100%; }

.audio-player .separator { width: 1px; background-color: rgba(255, 255, 255, 0.25); }
.audio-player .button { background: transparent; cursor: pointer; fill: rgba(255, 255, 255, 0.9); }
.audio-player .icon { fill: rgba(255, 255, 255, 0.9); padding: 30%; width: 100%; margin: auto; }
.audio-player .buffer { background: rgba(255,255,255,0.05); }
.audio-player .progress { background: rgba(255,255,255,0.1); }

.audio-player .progress-indicator {
    border: 1px solid rgba(255, 255, 255, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(255, 255, 255, 0.5);
}

.audio-player .current-time { padding-left: 1rem; }
.audio-player .total-time { padding-right: 1rem; }

/* --- RESPONSIVE VIDEO EMBEDS (match thumbnail width) --- */

/* Make any iframe/video fill the page width */
.content iframe,
.content video,
.content embed,
.content object {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	margin: 0 !important;
	border: 0 !important;
}

/* Keep 16:9 aspect ratio (YouTube/Vimeo) */
.content iframe {
	aspect-ratio: 16 / 9;
	height: auto !important;
}

/* Hide the thumbnail in the gallery that matches the current page */
div[thumbnails] .thumbnail.is-current-project {
	display: none !important;
}