/* TELEBODY: static redesign. Keeps the original look (black, fixed background
   figure, red nav, dotted rules) with a shared, responsive stylesheet. */

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

:root {
	--red: #d11812;
	--blue: #4b90d5;
	--text: #e6e6e6;
	--rule: #c1c1c1;
	--col: 640px;
}

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	color: #fff;
	background: #000 url(../images/telebody0.jpg) no-repeat fixed center center;
	font: 13px/1.65 "Lucida Grande", Lucida, Verdana, sans-serif;
	letter-spacing: .06em;
}
body.media { background-image: none; }

a:link, a:visited { color: var(--blue); text-decoration: none; }
a:hover { color: #9a9a9a; text-decoration: underline; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

p { margin: 0 0 12px; }
h2 { font-size: 14px; line-height: 1.3; margin: 0 0 10px; }
h2:not(:first-child) { margin-top: 26px; }

/* corner tab linking back to telebody.ws */
#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;
}

/* ---- header + nav ---- */
.site-header { text-align: center; padding: 56px 12px 44px; }
.site-header h1 {
	margin: 0;
	font-size: clamp(15px, 3.6vw, 18px);
	font-weight: bold;
	letter-spacing: .9em;
	text-indent: .9em;          /* re-centres the text after the trailing letter-space */
}

.inner { width: 100%; max-width: calc(var(--col) + 40px); margin: 0 auto; padding: 0 20px; }

.site-nav { background: url(../images/block.png); }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 10px 0 0; }
.site-nav a {
	display: block;
	padding: 4px;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--red);
}
.site-nav a:link, .site-nav a:visited { color: var(--red); }
.site-nav a:hover { background: #000; color: #cdcdcd; text-decoration: none; }
.site-nav a.current {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 12px;
	letter-spacing: 4px;
	background: #000;
	color: #cdcdcd;
	border-bottom: 4px dotted #c2c2c2;
}

/* ---- content band ---- */
.band { background: url(../images/block.png); padding: 35px 20px; }
.column {
	max-width: var(--col);
	min-height: 400px;
	margin: 0 auto;
	color: var(--text);
}
body.main { --col: 720px; }
.column::after { content: ""; display: block; clear: both; }
body.media .column { margin-top: 0; }

.pullquote {
	float: right;
	width: 240px;
	margin: 0 0 20px 40px;
	padding: 10px;
	border: 1px dotted #fff;
}
.pullquote p:last-child { margin-bottom: 0; }
p.large { font-size: 15px; margin: 0 0 6px; line-height: 1.5; }

/* ---- footer ---- */
.site-footer { border-top: 1px dotted var(--rule); margin-top: 30px; padding: 8px 0 30px; color: #828282; font-size: 11px; }

/* ---- performance dates ---- */
.events { margin: 0; }
.event-row { display: grid; grid-template-columns: 124px 1fr; gap: 0 12px; margin-bottom: 10px; align-items: start; }
.date { margin: 0; background: #363636; color: #fff; padding: 2px 6px; }
.event { margin: 0; padding: 2px 0; }

/* ---- media sub-navigation ---- */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; margin-bottom: 16px; border: 1px solid #fff; }
.subnav.sub { border: 0; padding: 0 0 0 42px; margin: -4px 0 22px; }
.subnav a {
	padding: 4px 10px;
	border: 1px solid transparent;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.subnav a:hover { background: #000; color: #cdcdcd; text-decoration: none; }
.subnav a.selected { background: #000; color: #cdcdcd; border-color: #fff; font-size: 12px; letter-spacing: 4px; }

body.media h3 {
	margin: 28px 0 12px;
	padding: 4px 8px;
	background: #333;
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* ---- audio tables ---- */
h2.group { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin: 30px 0 8px; }
h2.group:first-of-type { margin-top: 10px; }
table.tracks { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.tracks th { text-align: left; font-weight: normal; color: #9a9a9a; padding: 4px 8px 6px 0; border-bottom: 1px dotted #666; }
.tracks td { vertical-align: top; padding: 8px 8px 8px 0; border-bottom: 1px solid #1b1b1b; }
.tracks td:first-child { width: 28%; word-break: break-word; }
.tracks td.meta { width: 22%; white-space: nowrap; color: #bbb; }
.tracks audio { display: block; width: 100%; max-width: 360px; height: 32px; margin-top: 8px; }

/* ---- video ---- */
figure.video { margin: 0 0 30px; }
figure.video figcaption { margin-bottom: 8px; color: #fff; }
figure.video video { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 3 / 2; background: #000; border: 1px solid #1b1b1b; }

/* ---- image galleries ---- */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs.docs { gap: 26px 18px; }
.thumbs.docs figure { margin: 0; width: 138px; font-size: 11px; line-height: 1.4; }
.thumbs.docs figure img { display: block; margin-bottom: 6px; }
.thumbs.docs figure figcaption { color: #cdcdcd; }
.thumbs a { display: block; line-height: 0; }
.thumbs.live img { display: block; border: 1px solid #333; }
.thumbs.live a:hover img, .thumbs.docs a:hover img { border-color: #fff; }
.thumbs img { height: auto; }

/* ---- lightbox ---- */
.tb-lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 2rem; background: rgba(0,0,0,.92); z-index: 999; }
.tb-lightbox.open { display: flex; }
.tb-lightbox img { display: block; max-width: 100%; max-height: 88vh; border: 2px solid #fff; }
.tb-lightbox 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-lightbox .tb-close { top: 1rem; right: 1.2rem; }
.tb-lightbox .tb-nav { top: 50%; transform: translateY(-50%); }
.tb-lightbox .tb-prev { left: 1rem; }
.tb-lightbox .tb-next { right: 1rem; }

/* ---- narrow screens ---- */
@media (max-width: 640px) {
	body { font-size: 14px; }
	.site-header { padding: 48px 12px 32px; }
	.pullquote { float: none; width: auto; margin: 0 0 20px; }
	.band { padding: 28px 16px; }
	.event-row { grid-template-columns: 1fr; margin-bottom: 14px; }
	.date { display: inline-block; justify-self: start; margin-bottom: 4px; }
	.subnav.sub { padding-left: 0; }
	.tracks thead { display: none; }
	.tracks, .tracks tbody, .tracks tr, .tracks td { display: block; width: 100%; }
	.tracks tr { padding: 10px 0; border-bottom: 1px solid #1b1b1b; }
	.tracks td { border: 0; padding: 2px 0; width: 100% !important; }
	.tracks td.meta { white-space: normal; }
	.tracks audio { max-width: 100%; }
	.thumbs.docs figure { width: calc(50% - 10px); }
}

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