@charset "utf-8";

/* ==========================================================================
   davidconger.com — consolidated stylesheet

   Replaces css/core.css, css/all.css, css/galleries.css and
   catalog/catalog.css, which between them defined the same link colours three
   times over and split closely-related rules across four files.

   Selectors are intentionally unchanged so the existing markup keeps matching.
   The visual design is preserved; what changes is that fixed pixel widths are
   now fluid, so the site works on a phone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
	--dc-bg: #2a2a2a;
	--dc-fg: #ffffff;
	--dc-accent: #0066ff;
	--dc-muted: #949494;
	--dc-panel: #808080;
	--dc-border: #ffffff;

	--dc-font: Arial, Helvetica, sans-serif;
	--dc-font-display: 'Hind', Arial, Helvetica, sans-serif;

	--dc-gallery-max: 1300px;
	--dc-prose-max: 700px;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

body {
	margin: 0;
	padding: 0 12px;
	color: var(--dc-fg);
	background-color: var(--dc-bg);
	font-family: var(--dc-font);
	text-align: center;
	-webkit-text-size-adjust: 100%;
}

/* Legacy body class used by the gallery pages; it duplicated `body` verbatim. */
.dcStandardBody {
	color: var(--dc-fg);
	background-color: var(--dc-bg);
	font-family: var(--dc-font);
	text-align: center;
}

/* No image should ever force horizontal scrolling. The archive pages carry
   hard-coded width/height attributes (e.g. width="640"), which this overrides
   on narrow screens while preserving aspect ratio. */
img {
	max-width: 100%;
	height: auto;
}

/* Galleries from roughly 2009-2013 arranged photos in tables with a hardcoded
   `style="width: 700px"` - 1,088 pages, mostly two portrait shots per row.
   `max-width` beats the inline width, and `table-layout: fixed` stops the
   cells from being sized by the photos' intrinsic width, which is what
   otherwise keeps such a table from shrinking below its content. */
table {
	max-width: 100%;
	table-layout: fixed;
}

td {
	overflow: hidden;
}

/* Single definition of link colours. Previously repeated in core.css,
   all.css, galleries.css and catalog.css, in three different combinations. */
a {
	color: var(--dc-fg);
}

a:visited,
a:active {
	color: var(--dc-fg);
}

a:hover {
	color: var(--dc-accent);
	text-decoration: underline;
}

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

hr {
	border: 0;
	border-top: 1px solid var(--dc-muted);
	width: 90%;
}

/* --------------------------------------------------------------------------
   Site header and navigation
   -------------------------------------------------------------------------- */

.headerText {
	font-family: var(--dc-font-display);
}

.headerNav {
	width: 100%;
	text-align: left;
	min-height: 24px;
}

.headerSocialLinks {
	text-align: right;
}

/* Was absolutely positioned, which overlapped the social icons on narrow
   screens. The two children are now laid out side by side instead. */
.headerNavText {
	font-size: 10pt;
}

@media (min-width: 600px) {
	.headerNav {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
	}

	.headerNav .headerNavText {
		text-align: left;
	}

	.headerNav .headerSocialLinks {
		flex: none;
	}
}

.headerTextMain {
	font-weight: 600;
	font-size: clamp(28px, 8vw, 48px);
	letter-spacing: 2px;
	line-height: 120%;
}

.headerTextPre {
	letter-spacing: clamp(1px, 1.2vw, 5px);
	font-size: clamp(11px, 2.6vw, 16px);
}

.headerTextSub {
	letter-spacing: 2px;
	line-height: 120%;
	font-size: clamp(11px, 2.6vw, 16px);
}

/* Social icon links. Border-width:0 was previously repeated inline on every
   one of these images across thousands of pages. */
.headerSocialLinks img,
.socialLinks img {
	border: 0;
	vertical-align: middle;
}

.socialLinks {
	padding-top: 12px;
	position: relative;
	text-align: center;
}

/* Top-level page navigation (home page). Replaces an inline-styled div. */
.siteNav {
	padding-top: 20px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Legacy "dc" header/nav helpers (from all.css)
   -------------------------------------------------------------------------- */

#dcHeaderImage {
	text-align: center;
	margin: 0 auto; /* was "0px, auto" — an invalid declaration browsers dropped */
	padding-top: 25px;
	padding-bottom: 10px;
}

#dcHeaderImage img,
.dcHeaderImage {
	width: 710px;
	max-width: 100%;
	height: auto;
	border-width: 0;
	text-align: center;
}

#dcCatalogNav,
#dcListingNav {
	text-align: center;
	padding-bottom: 10px;
}

#dcListingNav {
	padding-top: 20px;
}

#dcCatalogNav .catalogNavTitle {
	letter-spacing: 3px;
	font-size: 12pt;
	font-weight: 700;
}

#dcListingNav #listingTitle {
	font-size: 12pt;
	font-weight: 700;
	letter-spacing: 4px;
}

#dcCatalogNav #catalogNav,
#dcListingNav #listingNav {
	font-size: 10pt;
}

#dcCatalogNav a,
#dcListingNav a {
	text-decoration: underline;
}

.dcNavHeaderText {
	font-size: small;
}

.dcNavHeaderTable {
	width: 100%;
}

.dcNavHeaderLeft {
	text-align: left;
	width: 50%;
	vertical-align: top;
}

.dcNavHeaderRight {
	text-align: right;
	width: 50%;
	vertical-align: top;
}

.dcNavHeaderImages {
	width: 16px;
	height: 16px;
	border-width: 0;
}

/* --------------------------------------------------------------------------
   Galleries
   -------------------------------------------------------------------------- */

#gallery {
	padding: 2px 0;
	margin: 0 auto;
	max-width: var(--dc-gallery-max);
}

#gallery #images {
	width: 100%;
	margin: 0;
	padding: 1px 0;
	list-style: none;
}

#gallery #images li {
	padding: 5px;
}

#gallery #images li img {
	z-index: 1;
	border: 1px solid var(--dc-border);
	margin-left: 5px;
	margin-right: 5px;
}

#gallery #details {
	text-align: center;
	color: var(--dc-fg);
	font-family: var(--dc-font);
	padding: 15px 20px;
}

/* The Facebook SDK root. The SDK no longer loads, so this renders as an empty
   spacer; the padding is kept so page rhythm is unchanged until Phase 5
   strips the markup. */
#gallery #fb-root {
	padding: 5px 20px;
}

/* The title is an <h1>: it is the page's heading, and the archive's markup
   says so. Every size and weight below is set per section in stream.css, so
   all this has to do is cancel the margin a heading arrives with -- the
   section rules that want space under the title set margin-bottom themselves
   and outrank this shorthand. */
#gallery #details #title {
	margin: 0;
	font-weight: bold;
	letter-spacing: 4pt;
}

#gallery #details #date {
	font-size: 10px;
}

.galleryphoto {
	border: 5px solid var(--dc-border);
}

.galleryphoto:hover {
	border-color: var(--dc-accent);
}

/* --------------------------------------------------------------------------
   Dead social share overlays

   ~1,017 archive pages still contain Pinterest/Tumblr/Facebook/Twitter share
   overlays. They were revealed by ShareLoad() in js/galleries.js, but that
   file's entire contents have been commented out for years, so the overlays
   can never be shown. They also carry an inline style="display:none".

   The original rules positioned them with hard-coded offsets such as
   `top:-632px; left:875px`, which only made sense at one fixed page width.
   Those are replaced with an explicit hide until Phase 5 removes the markup.
   -------------------------------------------------------------------------- */

.shareWide,
.shareTallL,
.shareTallR {
	display: none !important;
}

.shareOuter {
	position: relative;
}


.shareItem,
.shareImage {
	border: 0;
}

/* --------------------------------------------------------------------------
   "Photos of You" galleries
   -------------------------------------------------------------------------- */

#gallery #youimages,
#gallery #youimage {
	width: 100%;
	margin: 0;
	padding: 1px 0;
	list-style: none;
}

#gallery #youimages li {
	padding: 5px;
	width: 240px;
	max-width: 100%;
	border: 0;
	display: inline-block;
	margin: 5px;
	vertical-align: top;
}

#gallery #youimage li {
	padding: 5px;
	border: 0;
	display: inline-block;
	margin: 5px;
}

#gallery #youimages li img,
#gallery #youimage li img {
	z-index: 1;
	border: 1px solid var(--dc-border);
	max-width: 100%;
	height: auto;
}

.younavigation {
	font-size: small;
}

/* Previous / next links on the single-photo pages. The disabled state is a
   span rather than a greyed-out link so it is skipped by keyboard navigation
   and not announced as something you can follow. */
.younavigation a,
.navDisabled {
	display: inline-block;
	padding: 6px 12px;
}

.navDisabled {
	color: var(--dc-muted);
}

/* --------------------------------------------------------------------------
   Catalog listings
   -------------------------------------------------------------------------- */

#catalog {
	padding: 0;
	margin: 0 auto;
	width: 100%;
	color: var(--dc-fg);
	font-size: small;
	font-family: var(--dc-font);
}

#catalog a {
	text-decoration: none;
}

#catalog a:hover {
	text-decoration: underline;
}

#catalog .catalogGroupHeader {
	font-size: 14pt;
	letter-spacing: 2px;
	font-weight: bold;
	color: var(--dc-muted);
	padding-bottom: 5px;
}

#catalog .catalogList {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* IE-era hacks removed: `display:-moz-inline-stack`, `zoom:1` and the
   `*display:inline` star hack served browsers that no longer exist. */
#catalog .catalogList li {
	padding: 2px;
	width: 250px;
	max-width: 100%;
	border: 0;
	display: inline-block;
	margin: 5px;
	vertical-align: top;
}

#catalog .catalogList li event {
	font-weight: bold;
}

#catalog .catalogList li img {
	z-index: 1;
	border: 1px solid var(--dc-border);
	margin-left: 5px;
	margin-right: 5px;
}

.catalogImage {
	border: 3px solid var(--dc-border);
}

.catalogImage:hover {
	border-color: var(--dc-accent);
}

.disable {
	opacity: 0.5;
}

.disable img {
	border: 0;
}

/* Listing-page headings for the /you/ and catalog indexes. Previously an inline
   <style> block duplicated verbatim on 4,827 pages. */
.pageHeader {
	font-size: 12pt;
	letter-spacing: 4px;
	text-align: center;
	font-weight: bold;
}

.yearHeader {
	font-size: 18pt;
	letter-spacing: 2px;
	font-weight: bold;
	color: #949494;
}

/* Legacy Expression Web utility classes, still referenced by catalog markup. */
.style1 {
	letter-spacing: 3px;
}

.style2 {
	font-size: small;
}

.style4 {
	font-size: small;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Headings on the hand-authored pages

   The catalog, the festivals, /other/, the tearsheets and the list pages at
   the root have always drawn their title as a styled <span> or a bold <p>.
   Those elements are now <h1>, which is what they were all along, and nothing
   about them may look different for it -- so the only job here is to cancel
   the margin, size and weight a browser gives a heading by default. Every
   visible property still comes from the class or id the element already had,
   or from a style attribute written alongside the tag.
   -------------------------------------------------------------------------- */
h1#catalogTitle,
h1#listingTitle,
h1.pageHeader,
h2.pageHeader,
h1.headerTextMain {
	margin: 0;
}

/* The title of a legacy caption block: the first line of a centred paragraph,
   with the place or subject on it and the date underneath. It has no look of
   its own -- it inherits the paragraph it came out of, and anything specific
   to the page stays on the span or the style attribute it always had. */
.legacyTitle {
	margin: 0;
	font-size: 1em;
	font-weight: normal;
	line-height: inherit;
}

/* A title that was a paragraph in its own right rather than a line inside one.
   It keeps a paragraph's margins, because the space above and below it was
   coming from the <p> that is no longer there. */
.legacyHeading {
	margin: 1em 0;
	font-size: 1em;
	font-weight: normal;
	line-height: inherit;
}

/* A heading may not sit inside a <p>, so the paragraphs that opened with one
   are now divs and need the margins a paragraph would have given them. */
.legacyCaption {
	margin: 1em 0;
}

/* Read by a screen reader, drawn for nobody. Used where the page announces
   itself with a banner image or a grid of photographs instead of words, and
   where a heading names a section the surrounding chrome already makes plain.
   Clipped rather than moved off-screen so a focused element inside it does not
   scroll the viewport sideways. */
.srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Legacy layout tables

   Thirteen pages were laid out with a FrontPage-era table whose columns
   declared pixel widths. Those widths have been taken off the markup by
   tools/fluid-legacy-tables.js, because the global `table { max-width: 100% }`
   above cannot override them: when the specified column widths add up to more
   than the table's width, the sum becomes the table's used width. Each table
   is now tagged with the shape it draws, and gets that shape back fluidly.

   The max-widths match what each page measured before the change, so nothing
   moves on a desktop.
   -------------------------------------------------------------------------- */

main.pageStream .legacyTable {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* A single cell holding a long column of links: the four site-wide index
   pages, byartist / bydate / bydate_older / byvenue. */
.legacyTable--list {
	max-width: 680px;
}

/* A column of links beside a column of photographs, on seven festival pages. */
.legacyTable--fest {
	max-width: 720px;
}

/* Rows of thumbnail, caption, thumbnail on other/index.htm. Sized by content
   so the two 75px photographs keep their width and the caption takes the
   rest, rather than all three columns splitting the width equally. */
.legacyTable--thumb {
	max-width: 500px;
	table-layout: auto;
}

/* Banner thumbnails three across on galleries/index_old.htm. Left on the
   default fixed layout: with automatic layout the 200px images would set a
   minimum width the table could not shrink below. */
.legacyTable--grid {
	max-width: 700px;
}

@media (min-width: 720px) {
	.legacyTable--fest td:first-child {
		width: 63%;
	}

	.legacyTable--fest td + td {
		width: 37%;
	}
}

/* Below the width the two festival columns need, put the photographs under
   the links instead of beside them. Scoped to this one shape on purpose --
   other legacy tables, such as the three-day column lists on the Bumbershoot
   pages, carry real tabular meaning that stacking would destroy. */
@media (max-width: 719px) {
	.legacyTable--fest,
	.legacyTable--fest tbody,
	.legacyTable--fest tr,
	.legacyTable--fest td {
		display: block;
		width: auto;
	}

	.legacyTable--fest td + td {
		margin-top: 18px;
	}
}

/* --------------------------------------------------------------------------
   Featured photographs mosaic (galleries/featured.htm)

   Replaces two fixed 650px tables of mixed 150x100 and 100x150 thumbnails.
   -------------------------------------------------------------------------- */

.featuredGrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
	max-width: 680px;
	margin: 0 auto;
	padding: 10px 0;
}

.featuredGrid img {
	border: 0;
	flex: none;
}

/* --------------------------------------------------------------------------
   Prose pages (about, etc.)
   -------------------------------------------------------------------------- */

.prose {
	max-width: var(--dc-prose-max);
	margin: 0 auto;
	padding-top: 20px;
	text-align: left;
}

.prose img {
	vertical-align: middle;
}

.prose h1 {
	font-size: 1.25rem;
	letter-spacing: 1px;
}

.prose h2 {
	font-size: 1rem;
	margin-bottom: 0.25em;
}

/* The employer/venue name that heads each block of station detail. */
.orgName {
	margin: 0.25em 0;
}

/* Small print. Replaces the Expression Web `.auto-style1` artifact. */
.fine {
	font-size: x-small;
	margin-top: 0.25em;
}

.plainList {
	list-style: none;
	padding: 0;
	margin: 0.25em 0 1em;
}

.plainList li {
	padding: 1px 0;
}

.clientLogos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.clientLogos img {
	border: 0;
}

/* --------------------------------------------------------------------------
   Radio station pages
   -------------------------------------------------------------------------- */

/*
 * radio/index.htm, radio/kiss.htm and radio/nk2.htm are FrontPage-era tables
 * whose lower cell carries a `stations_bottom*.jpg` background - a white to
 * light-grey gradient. The site-wide dark theme paints body text #ffffff, so
 * every word in that cell rendered white on near-white and was invisible:
 * the station descriptions, the section labels, and the "Back" row alike.
 *
 * These pages were never part of the responsive pass, so rather than restyle
 * the tables the text colour is simply scoped to the cells that carry the
 * light background. Links keep their own colour and are unaffected.
 */
td[style*="stations_bottom"] {
	color: #1a1a1a;
}

td[style*="stations_bottom"] hr {
	border-color: #9a9a9a;
}

/*
 * The same three pages nest 1000px layout tables whose first row is a single
 * `colspan="2"` banner. The global `table-layout: fixed` above takes its
 * column widths from that first row, and a lone colspan gives it nothing to
 * go on, so the browser split the table in half: the 750px content column and
 * the 250px photo column each measured 499px. That squeezed the station
 * artwork and the text beside it while leaving 250px of dead space under the
 * portraits. Automatic layout hands the declared widths back.
 *
 * Above 1040px only. Below it the fixed layout is what keeps these pages -
 * which never went through the responsive pass - from scrolling sideways;
 * the 1000px table plus the page's own padding needs 1014px of room, and a
 * scrollbar takes the rest.
 */
@media (min-width: 1040px) {
	.legacyTable--radio,
	.legacyTable--radio table {
		table-layout: auto;
	}
}

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

/* A paragraph doing a footer's job, so its default margins are an accident
   rather than a decision. The padding below is the deliberate part. */
.siteFooter {
	margin: 0;
	font-size: small;
	padding: 20px 10px;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
	body {
		color: #000;
		background: #fff;
	}

	.headerNav,
	.socialLinks,
	.circlesContainer {
		display: none;
	}
}