/* ==========================================================================
   Gehring Miller Portfolio — static site stylesheet
   ========================================================================== */

:root {
	--gmp-bg:        #182530;
	--gmp-bg-alt:    #212f3b;
	--gmp-fg:        #eef1ee;
	--gmp-fg-dim:    #93a3ac;
	--gmp-accent:    #6fa3c4;
	--gmp-border:    #2e3f4b;
	--gmp-font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
	--gmp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--gmp-max-width: 900px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--gmp-bg);
	color: var(--gmp-fg);
	font-family: var(--gmp-font-body);
	font-weight: 300;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--gmp-accent); text-decoration: none; transition: opacity 0.2s ease; }
a:hover { opacity: 0.75; }
img { max-width: 100%; display: block; }

/* Nav */
.gmp-nav {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between;
	padding: 1rem 2rem;
	background: rgba(24, 37, 48, 0.85);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--gmp-border);
}
.gmp-nav__brand {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	color: var(--gmp-fg);
}
.gmp-nav__name {
	font-family: var(--gmp-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.01em;
}
.gmp-nav__tagline {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gmp-fg-dim);
}
.gmp-nav__brand:hover { opacity: 1; }
.gmp-nav__brand:hover .gmp-nav__name { opacity: 0.8; }
.gmp-nav__links { display: flex; gap: 1.75rem; }
.gmp-nav__links a { color: var(--gmp-fg-dim); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gmp-nav__links a:hover { color: var(--gmp-accent); opacity: 1; }
.gmp-nav__links a.is-active { color: var(--gmp-accent); }

/* Sections */
.gmp-section { max-width: var(--gmp-max-width); margin: 0 auto; padding: 2rem 2rem; border-top: 1px solid var(--gmp-border); }
.gmp-section__label { font-family: var(--gmp-font-display); font-weight: 500; font-size: 1.85rem; margin: 0 0 1rem; color: var(--gmp-fg); }

/* Reel */
.gmp-reel__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--gmp-bg-alt); border: 1px solid var(--gmp-border); overflow: hidden; }
.gmp-reel__frame iframe, .gmp-reel__frame video { width: 100%; height: 100%; border: 0; }
.gmp-reel__placeholder { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gmp-fg-dim); font-size: 0.9rem; text-align: center; padding: 2rem; }

/* Music */
.gmp-music__controls {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.75rem;
}

.gmp-music__filter {
	appearance: none;
	background: var(--gmp-bg-alt);
	border: 1px solid var(--gmp-border);
	color: var(--gmp-fg);
	font-family: var(--gmp-font-body);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	padding: 0.6rem 2.2rem 0.6rem 1rem;
	border-radius: 2px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236f6559'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
}
.gmp-music__filter:focus { outline: 1px solid var(--gmp-accent); }

.gmp-music__player {
	background: var(--gmp-bg-alt);
	border: 1px solid var(--gmp-border);
	padding: 1.1rem 1.25rem;
	margin-bottom: 0.75rem;
}

.gmp-music__now-playing { margin-bottom: 0.65rem; }

.gmp-music__track-title {
	font-family: var(--gmp-font-display);
	font-size: 1.4rem;
	margin: 0 0 0.15rem;
	color: var(--gmp-fg);
	overflow: hidden;
	white-space: nowrap;
}
.gmp-music__track-genre {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gmp-fg-dim);
}

.gmp-music__transport {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.gmp-music__play-btn {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--gmp-accent);
	background: transparent;
	color: var(--gmp-accent);
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease;
}
.gmp-music__play-btn:hover { background: var(--gmp-accent); color: var(--gmp-bg); }

.gmp-music__seek {
	flex: 1;
	appearance: none;
	height: 3px;
	background: var(--gmp-border);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}
.gmp-music__seek::-webkit-slider-thumb {
	appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gmp-accent);
	cursor: pointer;
}
.gmp-music__seek::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gmp-accent);
	border: none;
	cursor: pointer;
}

.gmp-music__time {
	flex: 0 0 auto;
	font-size: 0.75rem;
	color: var(--gmp-fg-dim);
	font-variant-numeric: tabular-nums;
}

.gmp-music__tracklist {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 340px;
	overflow-y: auto;
}
.gmp-music__tracklist::-webkit-scrollbar { width: 6px; }
.gmp-music__tracklist::-webkit-scrollbar-track { background: transparent; }
.gmp-music__tracklist::-webkit-scrollbar-thumb { background: var(--gmp-border); border-radius: 3px; }

.gmp-music__track {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.65rem 1rem;
	border-bottom: 1px solid var(--gmp-border);
	cursor: pointer;
	transition: background 0.15s ease;
}
.gmp-music__track:first-child { border-top: 1px solid var(--gmp-border); }
.gmp-music__track:hover { background: var(--gmp-bg-alt); }
.gmp-music__track.is-playing { color: var(--gmp-accent); }

.gmp-music__track-name {
	font-size: 1rem;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}
.gmp-music__track-name strong,
.gmp-music__track-title strong { font-weight: 700; }

/* Scrolls a title left-and-back when it's too wide to fit on one line */
.gmp-scroll-inner { display: inline-block; }
.is-scrolling .gmp-scroll-inner {
	animation: gmp-marquee 8s ease-in-out infinite alternate;
}
@keyframes gmp-marquee {
	0%, 10%   { transform: translateX(0); }
	90%, 100% { transform: translateX(calc(-1 * var(--gmp-scroll-distance, 0px))); }
}
.gmp-music__track-meta {
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gmp-fg-dim);
	flex: 0 0 auto;
}
.gmp-music__track.is-playing .gmp-music__track-meta { color: var(--gmp-accent); }

/* Recent Work / Highlights / Sync Placements */
.gmp-work__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.gmp-work__intro {
	margin: -0.5rem 0 1.25rem;
	font-size: 0.85rem;
	color: var(--gmp-fg-dim);
}
.gmp-work__item {
	margin: 0;
}
.gmp-work__item img {
	width: 100%;
	object-fit: cover;
	border: 1px solid var(--gmp-border);
	background: var(--gmp-bg-alt);
}
#highlights .gmp-work__item img { aspect-ratio: 1 / 1; }
#sync .gmp-work__item img { aspect-ratio: 3 / 4; }
.gmp-work__item figcaption {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--gmp-fg-dim);
}

/* About */
.gmp-about__text { color: var(--gmp-fg-dim); font-size: 1.1rem; max-width: 640px; }
.gmp-about__text p { margin: 0 0 0.85em; }
.gmp-about__text p:last-child { margin-bottom: 0; }

/* Contact */
.gmp-contact { text-align: center; }
.gmp-contact__line { margin: 0 0 0.85rem; font-size: 1.05rem; color: var(--gmp-fg-dim); }
.gmp-contact__line strong { font-weight: 700; color: var(--gmp-fg); }
.gmp-contact__line a { color: var(--gmp-accent); }
.gmp-contact__links { display: flex; justify-content: center; gap: 1.75rem; flex-wrap: wrap; }
.gmp-contact__links a { color: var(--gmp-fg-dim); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gmp-contact__links a:hover { color: var(--gmp-accent); opacity: 1; }

/* Footer */
.gmp-footer { text-align: center; padding: 1.5rem 2rem 2rem; color: var(--gmp-fg-dim); font-size: 0.8rem; border-top: 1px solid var(--gmp-border); }

@media (max-width: 560px) {
	.gmp-nav { padding: 1rem 1.25rem; }
	.gmp-nav__links { gap: 1rem; }
	.gmp-nav__links a { font-size: 0.7rem; }
	.gmp-section { padding: 1.5rem 1.25rem; }
	.gmp-work__grid { grid-template-columns: 1fr; }
}

/* Reel video list */
.gmp-reel__list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.gmp-reel__item {
	width: 100%;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.7rem 0.9rem;
	background: var(--gmp-bg-alt);
	border: 1px solid var(--gmp-border);
	color: var(--gmp-fg);
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.gmp-reel__item:hover { border-color: var(--gmp-accent); }
.gmp-reel__item.is-active { border-color: var(--gmp-accent); color: var(--gmp-accent); }
.gmp-reel__item-title { font-size: 0.95rem; font-weight: 500; }
.gmp-reel__item-note { font-size: 0.78rem; color: var(--gmp-fg-dim); }