/*
Theme Name: Angelika Mahle
Theme URI: https://angelikamahle.com/
Description: Restored landing theme for Angelika Mahle (International Artist) — a colorful artwork slideshow + grid landing with bio, recreating the look of the original "Photo Grid" theme (by WebInPixels) from archive.org snapshots. Color scheme and layout reconstructed from the site's surviving theme options and Wayback Machine renders.
Author: Restored by ops
Version: 1.0
License: GNU General Public License v2 or later
Tags: dark, artist, portfolio, slideshow
*/

@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,700&subset=latin');

/* ---- Reset / base (matches original Photo Grid palette) ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
	background: #000;
	color: #cfcfcf;
	font-family: 'Maven Pro', Helvetica, Arial, Geneva, Sans-serif;
	font-size: 14px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a { color: #f8c100; text-decoration: none; transition: color .2s ease; }
a:hover { color: #aaaaaa; }
h1, h2, h3, h4, h5, h6 { color: #f70000; font-weight: 700; line-height: 1.2; }
img { max-width: 100%; border: 0; display: block; }

/* ---- Header ---- */
#top {
	width: 100%;
	background: #0a0a0a;
	border-bottom: 1px solid #2a0000;
	box-shadow: 0 2px 0 #f70000;
	padding: 22px 0 18px;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
#top .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
#logo img { height: 90px; width: auto; }
#logo .sitetitle { color: #f70000; font-size: 26px; font-weight: 700; letter-spacing: .5px; }
#logo .tagline { color: #888; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; }

#menu ul { list-style: none; display: flex; gap: 26px; }
#menu ul li a {
	color: #fff;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1px;
}
#menu ul li a:hover { color: #f8c100; }

/* ---- Hero slideshow ---- */
#slideshow {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 26px auto 0;
	background: #010101;
	border: 1px solid #1c1c1c;
	overflow: hidden;
}
#slideshow .slides { position: relative; width: 100%; height: 520px; }
#slideshow .slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 1.1s ease-in-out;
	display: flex; align-items: center; justify-content: center;
	background: #000;
}
#slideshow .slide.active { opacity: 1; }
#slideshow .slide img { width: 100%; height: 100%; object-fit: contain; }
#slideshow .caption {
	position: absolute; left: 0; bottom: 0;
	background: rgba(0,0,0,.65);
	color: #ff1212;
	font-size: 20px; font-weight: 700;
	padding: 10px 22px;
}
#slideshow .nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: rgba(0,0,0,.5); color: #fff;
	width: 44px; height: 64px; line-height: 64px; text-align: center;
	font-size: 30px; cursor: pointer; user-select: none; z-index: 3;
}
#slideshow .nav:hover { background: rgba(247,0,0,.8); color:#fff; }
#slideshow .prev { left: 0; }
#slideshow .next { right: 0; }
#slideshow .dots { position: absolute; bottom: 12px; right: 16px; z-index: 3; }
#slideshow .dots span {
	display: inline-block; width: 11px; height: 11px; margin: 0 4px;
	border-radius: 50%; background: #555; cursor: pointer;
}
#slideshow .dots span.active { background: #f70000; }

/* ---- Artwork grid (the original "sets") ---- */
#sets-title { text-align: center; margin: 46px 0 6px; font-size: 22px; }
#sets-sub { text-align: center; color: #888; margin-bottom: 26px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
#photo_set {
	max-width: 1100px; margin: 0 auto; padding: 0 24px 10px;
	list-style: none;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
#photo_set li { position: relative; background: #0a0a0a; border: 1px solid #1c1c1c; overflow: hidden; }
#photo_set li a { display: block; position: relative; }
#photo_set li .thumb { display: block; width: 100%; height: 0; padding-top: 100%; background-size: cover; background-position: center; transition: transform .4s ease; }
#photo_set li:hover .thumb { transform: scale(1.06); }
#photo_set li .set-info {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,.72);
	padding: 8px 10px;
	display: flex; align-items: center; justify-content: space-between;
}
#photo_set li .set-title { color: #ff1212; font-weight: 700; font-size: 14px; }
#photo_set li .image_number {
	color: #fff; font-size: 11px;
}
#photo_set li .image_number::before {
	content: "\1F4F7\00A0"; /* camera glyph + nbsp */
	font-size: 11px;
}

/* ---- Bio / about ---- */
#bio { max-width: 1100px; margin: 50px auto 0; padding: 0 24px; }
#bio .inner {
	background: #0a0a0a; border: 1px solid #1c1c1c;
	padding: 34px 38px;
	display: flex; gap: 34px; flex-wrap: wrap; align-items: flex-start;
}
#bio h2 { font-size: 24px; margin-bottom: 16px; }
#bio .text { flex: 1 1 340px; }
#bio .text p { margin-bottom: 14px; color: #d2d2d2; }
#bio .portrait { flex: 0 0 210px; }
#bio .portrait img { border: 1px solid #333; padding: 4px; background: #111; }

/* surviving page content uses these classes */
.two_third, .one_third_last, .coll { display: block; }

/* ---- Footer ---- */
#copyright {
	text-align: center; color: #777; font-size: 12px;
	padding: 38px 0 46px; margin-top: 50px;
	border-top: 1px solid #1c1c1c;
}

/* ---- Placeholder styling for not-yet-recovered art ---- */
.placeholder {
	background: repeating-linear-gradient(45deg,#141414,#141414 12px,#1b1b1b 12px,#1b1b1b 24px) !important;
	display: flex; align-items: center; justify-content: center;
}
.placeholder::after {
	content: "image pending"; color: #555; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	#photo_set { grid-template-columns: repeat(2, 1fr); }
	#bio .inner { flex-direction: column; }
}
@media (max-width: 560px) {
	#photo_set { grid-template-columns: 1fr; }
	#menu ul { gap: 16px; }
}