/* ==============================
-  Babylon Zoo Online: shared stylesheet for pages on the new layout
-  (src/_includes/base.njk). Pages not yet converted still use /style.css.
-
-  The look follows the 2007 table layout: a 732px grey column with a
-  486px main column and a 244px side column, designed around 11px text.
-
-  Scaling: every size from the original design is written as a multiple
-  of --u, "one original pixel". Text is 11u, so when the text is scaled up
-  for legibility, the header bars, bullets, buttons, nav and the layout
-  itself scale with it, the way browser zoom would.
-    920px and wider: --k 13/11, so the page is 865px wide with 13px text.
-    Below 920px: --k 15/11, a single fluid column with 15px text.
============================== */

:root {
	--k: 1.1818;
	--u: calc(var(--k) * 1px);

	--page: #e3e3e3;
	--text: #5e5e5e;
	--heading: #6c6c6c;
	--link: #3d6e0e;
	--accent: #69a321;
	--rule: #cdcdcd;
	--font: Tahoma, Verdana, "Segoe UI", sans-serif;
}

@media (max-width: 919px) {
	:root { --k: 1.3636; }
}

/* On phones the scale lands close to whole screen pixels, so the pixel art
   (logo, » boxes, bullets) is drawn as hard pixels rather than smoothed. */
@media (max-width: 919px) {
	.logo img, .sh1::before, .sh2::before, .sh3::before, .sh4::before,
	ul.list li, .s1 li, .s2 li, .s3 li, .s4 li {
		image-rendering: pixelated;
	}
}

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

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

body {
	margin: 0;
	background: #ececec url(/i/bg.gif) repeat-y 50% 0 / calc(766 * var(--u)) 1px;
	color: var(--text);
	font: calc(11 * var(--u))/1.5 var(--font);
}

img { max-width: 100%; height: auto; }

a:link, a:visited { color: var(--link); }
a:hover, a:focus-visible { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.page {
	max-width: calc(732 * var(--u));
	margin: 0 auto;
	background: var(--page);
}

/* ==============================
-  Masthead: logo, nav, collage
============================== */

.brand-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	height: calc(96 * var(--u));
	background: #ececec url(/i/nav.jpg) repeat-x 0 0 / auto calc(214 * var(--u));
}

.brand { flex-shrink: 0; }

.logo { display: flex; }

.logo img {
	display: block;
	max-width: none;
	height: calc(96 * var(--u));
}

.logo .anim { width: calc(58 * var(--u)); }
.logo .wordmark { width: calc(258 * var(--u)); }

/* The nav keeps the original pixel-font images (with their rollover
   versions). The link text is still there for screen readers. */
.site-nav ul {
	display: flex;
	margin: calc(37 * var(--u)) 0 0;
	padding: 0 calc(50 * var(--u)) 0 0;
	list-style: none;
}

.site-nav a {
	display: block;
	width: calc(var(--w) * var(--u));
	height: calc(38 * var(--u));
	overflow: hidden;
	color: transparent;
	text-indent: 100%;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-size: calc(var(--w) * var(--u)) calc(38 * var(--u));
	background-position: 0 0, 0 calc(38 * var(--u));
}

.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current] {
	background-position: 0 calc(-38 * var(--u)), 0 0;
}

.n1 { background-image: url(/i/n/l/n1.gif), url(/i/n/l/n1_f2.gif); }
.n2 { background-image: url(/i/n/l/n2.gif), url(/i/n/l/n2_f2.gif); }
.n3 { background-image: url(/i/n/l/n3.gif), url(/i/n/l/n3_f2.gif); }
.n4 { background-image: url(/i/n/l/n4.gif), url(/i/n/l/n4_f2.gif); }
.n5 { background-image: url(/i/n/l/n5.gif), url(/i/n/l/n5_f2.gif); }
.n6 { background-image: url(/i/n/l/n6.gif), url(/i/n/l/n6_f2.gif); }
.n7 { background-image: url(/i/n/l/n7.gif), url(/i/n/l/n7_f2.gif); }
.n8 { background-image: url(/i/n/l/n8.gif), url(/i/n/l/n8_f2.gif); }

.site-nav .n1 { --w: 39; } .site-nav .n2 { --w: 54; } .site-nav .n3 { --w: 39; } .site-nav .n4 { --w: 53; }
.site-nav .n5 { --w: 42; } .site-nav .n6 { --w: 55; } .site-nav .n7 { --w: 33; } .site-nav .n8 { --w: 51; }

.collage {
	display: block;
	width: 100%;
}

.sett {
	height: calc(17 * var(--u));
	background: url(/i/nav.jpg) repeat-x 0 calc(-197 * var(--u)) / auto calc(214 * var(--u));
}

/* ==============================
-  Bar: the raised grey strip from /i/footer.gif, rebuilt in CSS so it
-  can grow when its links wrap. Used by the footer links, and by the
-  nav on small screens (see the 920px+ override below).
============================== */

.bar {
	position: relative;
	margin: calc(11 * var(--u)) 0;
	border-top: 1px solid #dfdfdf;
	border-bottom: 1px solid #c3c3c3;
	background: linear-gradient(#f6f6f6, #f6f6f6 80%, #f2f2f2);
}

/* the soft fade and hairline above the bar */
.bar::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: calc(11 * var(--u));
	border-top: 1px solid #cfcfcf;
	background: linear-gradient(#dfdfdf, #e6e6e6 40%, #fcfcfc);
}

/* the thin second stripe under it */
.bar::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	height: calc(11 * var(--u));
	border-top: 1px solid #fff;
	border-bottom: 1px solid #c8c8c8;
	box-shadow: 0 1px #fdfdfd;
	background: linear-gradient(#f9f9f9, #f0f0f0);
}

@media (min-width: 920px) {
	.site-nav.bar {
		margin: 0;
		border: 0;
		background: none;
	}

	.site-nav.bar::before, .site-nav.bar::after { content: none; }
}

/* ==============================
-  Columns
============================== */

.columns {
	display: grid;
	grid-template-columns: calc(486 * var(--u)) calc(244 * var(--u));
	column-gap: calc(2 * var(--u));
	background: linear-gradient(90deg,
		transparent calc(486 * var(--u)),
		#fff calc(486 * var(--u)), #fff calc(487 * var(--u)),
		var(--rule) calc(487 * var(--u)), var(--rule) calc(488 * var(--u)),
		transparent calc(488 * var(--u)));
}

.col-main, .col-side { min-width: 0; padding-bottom: calc(14 * var(--u)); }

/* Pages with no side column (front matter "wide: true") */
.columns.wide {
	grid-template-columns: 1fr;
	background: none;
}

/* ==============================
-  Section headers: the » box and grey bar from /i/h/*.gif. The » box is
-  cut from the original image and the bar is CSS, so both scale and the
-  bar stretches.
============================== */

.sh1, .sh2, .sh3, .sh4 {
	position: relative;
	isolation: isolate;
	margin: 0 0 calc(10 * var(--u));
	padding: 0 calc(6 * var(--u)) 0 calc(30 * var(--u));
	min-height: calc(22 * var(--u));
	color: var(--heading);
	font: bold calc(11 * var(--u))/calc(22 * var(--u)) var(--font);
}

.sh1::before, .sh2::before, .sh3::before, .sh4::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(3 * var(--u));
	width: calc(17 * var(--u));
	height: calc(22 * var(--u));
	background: url(/i/h/1.gif) no-repeat calc(-3 * var(--u)) 0 / calc(486 * var(--u)) calc(22 * var(--u));
}

.sh1::after, .sh2::after, .sh3::after, .sh4::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 calc(2 * var(--u)) 0 calc(21 * var(--u));
	border: 1px solid #cfcfcf;
	border-radius: calc(2 * var(--u));
	background: linear-gradient(#fbfbfb, #f5f5f5 50%, #eeeeee);
}

.col-main > .sh1, .col-side > .sh4 { margin-top: calc(6 * var(--u)); }

/* ==============================
-  Section content
============================== */

.s1 { margin: 0 calc(6 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); }
.s2 { margin: 0 calc(8 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u)); }
.s3 { margin: 0 calc(8 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u)); }
.s4 { margin: 0 calc(6 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u)); }

/* Content images scale with the text too */
.sf1, .sf2, .sf4 { zoom: var(--k); }

.sf1, .sf2, .sf4 { float: left; }
.sf1 { margin: 0 15px 10px 0; }
.sf2 { margin: 0 10px 4px -5px; }
.sf4 { margin: 0 10px 4px 0; }

.clear { clear: both; }

/* A paragraph after a floated picture sits beside it as a neat column, or
   below it at full width, instead of wrapping its last few words under
   the picture. */
:is(.sf1, .sf2, .sf4) ~ :is(p, .subtitle) { overflow: hidden; }

p { text-wrap: pretty; }

/* Section titles and field labels ("Release Date", "Track Listing") share
   one style, spaced from whatever comes before them. */
.title {
	margin: 0 0 calc(4 * var(--u));
	font-size: calc(11 * var(--u));
	font-weight: bold;
}

.title a { text-decoration: none; }

.subtitle { margin-bottom: calc(2 * var(--u)); font-weight: bold; }

:is(.s1, .s2, .s3, .s4, .beside) > * + :is(.subtitle, h3.title) { margin-top: calc(12 * var(--u)); }

/* Headings that were green links to nowhere: same colour, no link */
.accent { color: var(--link); }

p { margin: 0 0 1em; }

ul.list, .s1 ul, .s2 ul, .s3 ul, .s4 ul {
	margin: calc(4 * var(--u)) 0 calc(6 * var(--u));
	padding: 0;
	list-style: none;
}

ul.list li, .s1 li, .s2 li, .s3 li, .s4 li {
	--pad: calc(3 * var(--u));
	padding: var(--pad) 0 var(--pad) calc(15 * var(--u));
	background: url(/i/list.gif) no-repeat 0 calc(var(--pad) + (1.5em - 10 * var(--u)) / 2 - 2 * var(--u)) / calc(16 * var(--u)) calc(10 * var(--u));
}

/* Numbered lists (track listings) keep their numbers, not the » bullet */
:is(.s1, .s2, .s3, .s4) ol {
	margin: calc(4 * var(--u)) 0 calc(8 * var(--u));
	padding-left: calc(22 * var(--u));
}

:is(.s1, .s2, .s3, .s4) ol li {
	padding-left: calc(2 * var(--u));
	background: none;
}

/* A heading that follows text gets some room above it */

/* A full-width picture with a caption (news stills) */
figure.still {
	clear: both;
	margin: calc(8 * var(--u)) 0;
}

figure.still img {
	display: block;
	width: 100%;
	border: 1px solid #000;
}

figure.still figcaption {
	margin-top: calc(4 * var(--u));
	font-size: .9em;
	font-style: italic;
}

/* Download links for the MP3s the site hosts */
a.dl {
	margin-left: calc(6 * var(--u));
	font-size: .85em;
	white-space: nowrap;
}

/* "go ···›", "read more ···›": these were GIFs (/i/l/*.gif) */
a.more:link, a.more:visited {
	display: inline-block;
	padding: calc(3 * var(--u)) 0;
	color: var(--link);
	font-weight: bold;
	text-decoration: none;
}

/* Dots and chevron, redrawn as pixel art from the GIFs so they scale
   crisply and sit at the same height. The GIFs had four dots with the last
   crowding the arrow; this has three, with the arrow's point where a fourth
   would be. */
a.more::after {
	content: "";
	display: inline-block;
	width: calc(15 * var(--u));
	height: calc(7 * var(--u));
	margin-left: calc(3 * var(--u));
	vertical-align: calc(-1 * var(--u));
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 7' shape-rendering='crispEdges' fill='%2369a321'><rect x='0' y='3' width='1' height='1'/><rect x='4' y='3' width='1' height='1'/><rect x='8' y='3' width='1' height='1'/><rect x='10' y='0' width='2' height='1'/><rect x='10' y='1' width='3' height='1'/><rect x='11' y='2' width='3' height='1'/><rect x='12' y='3' width='3' height='1'/><rect x='11' y='4' width='3' height='1'/><rect x='10' y='5' width='3' height='1'/><rect x='10' y='6' width='2' height='1'/></svg>") no-repeat 0 0 / 100% 100%;
}

a.more:hover, a.more:focus-visible { color: var(--accent); }

/* A section's own "go"/"back" link always starts below its picture */
:is(.s1, .s2, .s3, .s4) > a.more {
	display: table;
	clear: both;
	margin-top: calc(6 * var(--u));
}

/* Text for screen readers and search engines only */
.vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Separator between side-column sections (was /i/m/s4_sep.gif) */
hr.sep {
	clear: both;
	height: 0;
	margin: calc(12 * var(--u)) 0 calc(5 * var(--u));
	border: 0;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #fff;
}

/* A text block that sits beside a floated image (was a fixed margin-left) */
.beside { overflow: hidden; }

/* Gallery thumbnails */
.gal {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: calc(10 * var(--u));
	margin: calc(10 * var(--u)) 0;
}

.gal a { display: block; line-height: 0; }

.gal img {
	width: 100%;
	border: 1px solid #000;
}

.articlelist a { text-decoration: none; }

/* Q&A articles */
.questions { margin: calc(5 * var(--u)); }

.answer {
	margin: calc(3 * var(--u)) 0 calc(14 * var(--u));
	color: #8a3f3d;
}

/* Single-image pages: gallery images and article scans */
.viewer .view {
	display: block;
	margin: 0 auto calc(10 * var(--u));
	border: 1px solid #000;
}

/* previous | back to gallery | next, with "back" always in the middle */
.viewer-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	gap: calc(20 * var(--u));
	font-weight: bold;
}

.viewer-nav a { text-decoration: none; }
.viewer-nav .prev { grid-column: 1; justify-self: end; }
.viewer-nav .up { grid-column: 2; }
.viewer-nav .next { grid-column: 3; justify-self: start; }

/* Forms (the contact form) */
.form label {
	display: block;
	margin: calc(8 * var(--u)) 0 calc(2 * var(--u));
	font-weight: bold;
}

.form input[type="text"], .form input[type="email"], .form textarea {
	display: block;
	width: 100%;
	padding: calc(3 * var(--u)) calc(4 * var(--u));
	border: 1px solid var(--heading);
	background: #ededed;
	color: var(--link);
	font: bold calc(11 * var(--u)) var(--font);
}

.form button {
	margin-top: calc(10 * var(--u));
	padding: calc(3 * var(--u)) calc(12 * var(--u));
	font: bold calc(11 * var(--u)) var(--font);
}

/* The two half-width panels under the lead story on the home page */
.se1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: calc(2 * var(--u));
	clear: both;
	padding-top: calc(8 * var(--u));
	border-top: 1px solid #cecece;
	box-shadow: inset 0 1px #fff;
	background:
		linear-gradient(90deg, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff 50%, var(--rule) 50%, var(--rule) calc(50% + 1px), transparent calc(50% + 1px)),
		url(/i/m/s2_bg.gif) no-repeat 0 100% / 100% calc(146 * var(--u));
}

/* ==============================
-  Footer
============================== */

.site-footer {
	padding: 0 0 calc(18 * var(--u));
	text-align: center;
	color: var(--text);
	background: #ececec;
}

.site-footer .bar { margin-top: calc(12 * var(--u)); }

.site-footer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: calc(3 * var(--u)) calc(8 * var(--u));
	list-style: none;
}

.site-footer a:link, .site-footer a:visited {
	display: block;
	padding: calc(2 * var(--u)) 0;
	color: var(--heading);
	font-weight: bold;
	text-decoration: none;
}

.site-footer a:hover, .site-footer a:focus-visible { color: var(--link); }

.site-footer li + li::before {
	content: "::";
	padding: 0 calc(6 * var(--u));
	line-height: calc(20 * var(--u));
}

.site-footer li { display: flex; }

.site-footer p { margin: calc(26 * var(--u)) 0 0; }

/* ==============================
-  Phones, tablets and narrow windows: one fluid column
============================== */

@media (max-width: 919px) {
	body { background-image: none; }

	.page { max-width: none; }

	.brand-row {
		display: block;
		height: auto;
		background-size: auto calc(214 * var(--u) * .75);
	}

	/* Crop the logo to its visible part (the two GIFs are mostly empty
	   padding) and centre it in the top band. */
	.brand {
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(72 * var(--u) * .75);
	}

	.logo {
		width: calc(248 * var(--u));
		height: calc(22 * var(--u));
		overflow: hidden;
	}

	.logo img { margin-top: calc(-33 * var(--u)); }
	.logo .anim { margin-left: calc(-31 * var(--u)); }

	/* The nav images use a 5px pixel font, unreadable on a phone, so small
	   screens get text links on the same bar as the footer. */
	.site-nav ul {
		flex-wrap: wrap;
		justify-content: center;
		padding: calc(3 * var(--u)) calc(4 * var(--u));
	}

	.site-nav li { flex: 0 0 25%; text-align: center; }

	.site-nav a, .site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current] {
		width: auto;
		height: auto;
		padding: calc(4 * var(--u)) 0;
		color: var(--heading);
		font-size: calc(9 * var(--u));
		font-weight: bold;
		letter-spacing: .06em;
		text-indent: 0;
		text-transform: uppercase;
		text-decoration: none;
		background: none;
	}

	.site-nav a[aria-current] { color: var(--link); }
	.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); }

	.columns {
		grid-template-columns: 1fr;
		background: none;
	}

	.col-side {
		border-top: 1px solid #cecece;
		box-shadow: inset 0 1px #fff;
		padding-top: calc(4 * var(--u));
	}

	.s1, .s2, .s3, .s4 { margin-left: calc(12 * var(--u)); margin-right: calc(12 * var(--u)); }
	.sf2 { margin-left: 0; }

	.se1 {
		grid-template-columns: 1fr;
		background: none;
	}

	.se1 > section + section {
		border-top: 1px solid #cecece;
		box-shadow: inset 0 1px #fff;
		padding-top: calc(8 * var(--u));
	}

	/* Nav links: a 4-column grid on phones, kept compact so it doesn't
	   stretch across wider screens. */
	.site-nav ul {
		max-width: calc(300 * var(--u));
		margin: 0 auto;
	}

	/* Footer links: a quieter, wrapping line of text, so they read as a
	   footer rather than a second copy of the nav. */
	.site-footer ul {
		column-gap: calc(14 * var(--u));
		padding: calc(4 * var(--u)) calc(12 * var(--u));
		font-size: calc(9.5 * var(--u));
	}

	.site-footer li + li::before { content: none; }
	.site-footer a:link, .site-footer a:visited { padding: calc(3 * var(--u)) 0; }
	.site-footer p { font-size: calc(9.5 * var(--u)); }
}

/* Tablets and narrow windows: enough room for the links on one row */
@media (min-width: 600px) and (max-width: 919px) {
	.site-nav ul { max-width: none; }

	.site-nav li {
		flex: 0 0 auto;
		padding: 0 calc(8 * var(--u));
	}
}