/* When Ghosts Will Die: shared stylesheet (replaces the old PHP/sIFR/Flash version). */

*, *::before, *::after { box-sizing: border-box; }

:root {
	--bg: #000;
	--fg: #d0c9c9;
	--dim: #8d8787;
	--faint: #5f5b5b;
	--teal: #108080;
	--teal-hi: #35b8b8;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 14px/1.7 Helvetica, Arial, sans-serif;
	letter-spacing: .06em;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-hi); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }

#tbws-link {
	position: fixed;
	top: 0;
	right: 10px;
	width: 120px;
	height: 25px;
	background: url(https://telebody.ws/tab-white-on-black.gif) no-repeat left center;
	z-index: 20;
}

.wrap { max-width: 1020px; margin: 0 auto; padding: 2.4rem 1.5rem 5rem; }

/* ---- header + nav ---- */
.sitename { margin: 0 0 1rem; font-size: 10px; letter-spacing: .5em; color: var(--faint); }
.sitename a { color: inherit; }
.sitename a:hover { color: var(--dim); text-decoration: none; }

nav ul { list-style: none; margin: 0 0 2.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
nav a {
	display: block;
	padding: .55rem .85rem;
	background: #151515;
	border: 1px solid #262626;
	color: #9a9494;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
}
nav a:hover { color: #fff; background: #222; text-decoration: none; }
nav a.current { color: var(--teal); background: #000; border-color: var(--teal); }

/* ---- headings ---- */
h1 { margin: 0 0 1.1rem; color: #fff; font: bold clamp(28px, 5vw, 40px)/1.1 Helvetica, Arial, sans-serif; letter-spacing: .03em; }
body.home h1 { font-size: clamp(32px, 6.5vw, 54px); }
h2 { margin: 2.2rem 0 .7rem; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
section:first-child h2 { margin-top: .2rem; }

/* ---- layout ---- */
.layout { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.layout .text.wide { grid-column: 1; }
body.history .layout, body.credits .layout { grid-template-columns: minmax(0, 1fr); }
.text p { margin: 0 0 1.1rem; max-width: 40rem; }
.text.wide p { max-width: 46rem; }
.art { margin: 0; }
.art img { display: block; max-width: 100%; height: auto; }
body.credits em { color: var(--dim); font-style: italic; }
body.media .layout { grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); }

/* ---- media ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.gallery a { display: block; line-height: 0; border: 1px solid #222; background: #111; }
.gallery a:hover { border-color: var(--teal); }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

ul.videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
a.vid { display: flex; gap: 1rem; align-items: flex-start; padding: .7rem; border: 1px solid #222; color: var(--fg); }
a.vid:hover { border-color: var(--teal); text-decoration: none; }
a.vid img { flex: 0 0 auto; display: block; max-width: 160px; height: auto; background: #111; }
a.vid .txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
a.vid .vt { color: var(--teal); font-weight: 700; font-style: italic; }
a.vid:hover .vt { color: var(--teal-hi); }
a.vid .meta { color: var(--dim); font-size: .92em; }
a.vid .credit { color: var(--dim); font-size: .82em; line-height: 1.55; margin-top: .3rem; }

/* ---- lightbox + video overlay ---- */
.tb-overlay { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 2rem 1rem; background: rgba(0,0,0,.94); z-index: 999; }
.tb-overlay.open { display: flex; }
.tb-overlay img { display: block; max-width: 100%; max-height: 82vh; border: 1px solid #444; }
.tb-overlay video { display: block; max-width: 100%; max-height: 78vh; background: #000; border: 1px solid #444; }
.tb-overlay .tb-cap { max-width: 90ch; color: #cfc9c9; font-size: .9rem; text-align: center; min-height: 1.4em; }
.tb-overlay .tb-cap a { color: var(--teal-hi); }
.tb-overlay button { position: absolute; background: rgba(20,20,20,.85); color: #fff; border: 1px solid #555; border-radius: 4px; font: inherit; font-size: 1.5rem; line-height: 1; padding: .45rem .85rem; cursor: pointer; }
.tb-overlay .tb-close { top: 1rem; right: 1.2rem; }
.tb-overlay .tb-nav { top: 50%; transform: translateY(-50%); }
.tb-overlay .tb-prev { left: 1rem; }
.tb-overlay .tb-next { right: 1rem; }

/* ---- narrow screens ---- */
@media (max-width: 900px) {
	.layout, body.media .layout { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
	body.media .art { display: none; }
	.art { max-width: 340px; }
}
@media (max-width: 560px) {
	.wrap { padding: 2.2rem 1rem 4rem; }
	a.vid { flex-direction: column; }
	nav a { padding: .5rem .65rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}