/* kirikart.com - shared chrome.
 *
 * Replaces the 516-line <style> block that was copy-pasted into
 * series/index.php, sreview.php and portfolios/index.php, plus the 151-line
 * block in sview.php and diary/index.php.
 *
 * Per-photo palettes live in palettes.css, generated from content/palettes.json.
 * Photo pages set <body class="pN"> and everything below reads the custom
 * properties, so one cached stylesheet covers all 39 schemes.
 */

:root {
	--bg: #1c1c1c;
	--fg: #bbbbbb;
	--frame: #646464;
	--titlebg: #000000;
	--body: #ffffff;
	--rule: #e4e4e4;
	--sub: #7c7c7c;
	--maxframe: 900px;
}

/* Section chrome palettes.
 *
 * Photo pages take their scheme from the DB via the generated .pN classes, but
 * the fixed pages each had their own hand-picked one inlined in their <style>
 * block, and they are not interchangeable -- home is markedly lighter than the
 * rest and its links are the pale Noah-Grey green, while the gallery pages sit
 * on #444444. Values transcribed from the .php originals; same custom
 * properties the .pN classes use, so nothing downstream changes.
 */
body.sec-home {           /* index.php */
	--bg: #393939; --fg: #aaffaa; --frame: #595959;
	--rule: #d9d9d9; --sub: #999999;
}

body.sec-photo {          /* photography/index.php */
	--bg: #1c1c1c; --fg: #bbbbbb; --frame: #3c3c3c;
	--rule: #bcbcbc; --sub: #7c7c7c;
}

body.sec-gallery {        /* series/index.php, portfolios/index.php, sreview.php */
	--bg: #444444; --fg: #bbbbbb; --frame: #646464;
	--rule: #e4e4e4; --sub: #646464;
}

body.sec-about {          /* about/, about/bio/, about/cv/ — light, unlike the rest */
	--bg: #e7e7e7; --fg: #00d; --frame: #d9d9d9;
	--titlebg: #ffffff; --body: #000000; --rule: #595959; --sub: #999999;
	--hover: #000000;
	--linkbox-fg: #000000;
}

body.sec-misc,            /* misc/index.html, contact/index.html */
body.sec-contact {
	--bg: #1c1c1c; --fg: #bbf; --frame: #3c3c3c;
	--rule: #bcbcbc; --sub: #7c7c7c;
}

* { box-sizing: border-box; }

/* The legacy pages wrapped everything in <table width="100%" height="100%">
 * with valign="middle", which centred the frame in the viewport and left the
 * copyright line at the bottom. Auto margins on flex items reproduce that and,
 * unlike justify-content: center, never clip the top of a page taller than the
 * viewport -- which matters for the 431-thumbnail diary index.
 */
body {
	background-color: var(--bg);
	color: var(--body);
	text-align: center;
	margin: 10px;
	padding: 0;
	font-family: "Georgia", Times, Arial, Helvetica, serif;
	min-height: calc(100vh - 20px);
	display: flex;
	flex-direction: column;
	align-items: center;
}

body > .subcopy { margin-top: auto; }

a, a:visited { background-color: transparent; color: var(--fg); text-decoration: none; }
a:hover, a:active { background-color: transparent; color: var(--hover, #ffffff); }

p { margin: 0; }

/* --- the framed box ------------------------------------------------------ */

.tableborder {
	width: 100%;
	max-width: var(--maxframe);
	min-width: 0;          /* flex item min-width:auto was locking the 900px frame on phones */
	margin: auto auto 0;   /* top auto centres it; see the body rule above */
	border: 5px solid var(--frame);
}

.maintable {
	border: 1px solid var(--rule);
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

.mainbar, .bottombar {
	background-color: var(--titlebg);
	color: var(--body);
	font-size: 15px;
	letter-spacing: 1px;
}

.mainbar { border-bottom: 1px solid var(--rule); }
.bottombar { border-top: 1px solid var(--rule); }
.barleft { padding: 3px 6px; text-align: left; }
.barright { padding: 5px 8px; text-align: right; }

.mainbox {
	background-color: var(--titlebg);
	color: var(--body);
	font-size: 17px;
	line-height: 170%;
	/* every fixed-chrome mainbox carried align="left"; only the photo viewers
	 * (sview.php, pview.php) were align="center", and there the image is a
	 * block and .titlebar centres itself, so left is safe everywhere */
	text-align: left;
	overflow-wrap: break-word;
}

.boxpad { padding: 16px 20px 20px; }
.boxpad p + p { margin-top: 0.55em; }

/* Homepage identity line.
 *
 * New -- the original box opened directly onto the menu. Styled from the same
 * small-caps + letterspacing vocabulary as .mainhead / .subhead and drawn
 * entirely from the palette custom properties, so it inherits whichever sec-*
 * or pN scheme the page is using rather than pinning its own colours.
 */
.identity {
	color: var(--body);
	font-size: 15px;
	font-variant: small-caps;
	letter-spacing: 2px;
	padding-bottom: 12px;
}

/* The section fronts (index.php, photography/index.php, and the carried-over
 * about/ contact/ misc/) put a centred, non-repeating mnmgs/bg-*.jpg behind a
 * 900x600 box. The URLs resolve against this stylesheet rather than the
 * document, so they are correct at any page depth -- no `up` arithmetic.
 */
.mainbox.splash {
	/* `height`, not `min-height`: min-height does not apply to table cells
	 * (CSS 2.1 10.7) and browsers ignore it, which collapsed this box to its
	 * ~470px of content. On a cell `height` already behaves as a minimum, so
	 * taller content still grows it -- exactly what td.mainbox{height:600px} did. */
	height: 600px;
	background-position: center;
	background-repeat: no-repeat;
}

.bg-main       { background-image: url(../mnmgs/bg-main.jpg); }
.bg-photo      { background-image: url(../mnmgs/bg-photo.jpg); }
.bg-series     { background-image: url(../mnmgs/bg-series.jpg); }
.bg-portfolios { background-image: url(../mnmgs/bg-portfolios.jpg); }
.bg-about      { background-image: url(../mnmgs/bg-about.jpg); }
.bg-misc       { background-image: url(../mnmgs/bg-misc.jpg); }
.bg-contacts   { background-image: url(../mnmgs/bg-contacts.jpg); }
.bg-bio        { background-image: url(../mnmgs/bg-bio.jpg); }
.bg-cv         { background-image: url(../mnmgs/bg-cv.jpg); }

.linkbox {
	background-color: var(--bg);
	color: var(--body);
	font-size: 11px;
	padding: 5px 15px 7px;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	letter-spacing: 1px;
}

.linkbox a, .linkbox a:visited {
	color: var(--linkbox-fg, #ffffff);
	border-bottom: 1px solid var(--frame);
	padding-left: 2px;
}
.linkbox a:hover { color: var(--fg); border-bottom: none; }
.linkbox.center { text-align: center; }

.grafbox {
	background-color: var(--titlebg);
	height: 250px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* --- headings and sublines ---------------------------------------------- */

.mainhead {
	color: #ffffff;
	text-align: center;
	letter-spacing: 10px;
	padding-left: 10px;
	font-variant: small-caps;
	font-size: 22px;
}

.subhead {
	color: var(--fg);
	text-align: center;
	letter-spacing: 5px;
	padding: 10px 0 10px 5px;
	font-size: 16px;
	font-variant: small-caps;
}

.subcopy {
	color: #676159;
	text-align: center;
	letter-spacing: 5px;
	padding: 0 5px 15px 10px;
	font-size: 11px;
}

.sublinks {
	color: var(--fg);
	text-align: center;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 10px 0;
	text-transform: uppercase;
}

.ngpsubline, .galsubline {
	color: var(--sub);
	font-size: 11px;
	text-transform: uppercase;
}

.galheadline {
	color: #ffffff;
	font-size: 22px;
	letter-spacing: 4px;
	padding: 6px 0 6px 4px;
	font-variant: small-caps;
	border-top: 1px solid var(--frame);
	border-bottom: 1px solid var(--frame);
	text-align: center;
}

.backlink { padding: 0 10px 10px; font-size: 12px; text-align: center; }
.backlink a, .backlink a:visited { border-bottom: 0; }

.mainbox.prose { text-align: justify; }

.subdate {
	color: #878787;
	text-align: right;
	font-style: italic;
}

.endoftherainbow {
	color: #878787;
	font-size: 11px;
}

.picborder, .picborder2, .picborder3 {
	background-color: #c7c7c7;
	border: 1px solid #000000;
	max-width: 100%;
	height: auto;
}
.picborder2 { float: right; margin: 12px 0 10px 20px; }

/* Jump Start callout on the resume — same double-frame as the page chrome. */
.jsp-card {
	margin: 22px 0 8px;
	padding: 5px;
	background: #c7c7c7;
	border: 1px solid #474747;
	text-align: left;
}
.jsp-card-inner {
	padding: 12px 16px 14px;
	background: #ffffff;
	border: 1px solid #474747;
}
.jsp-kicker {
	color: #878787;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.jsp-title {
	margin: 0;
	padding: 0 0 6px;
	border-bottom: 1px solid #c7c7c7;
	font-size: 18px;
	font-variant: small-caps;
	letter-spacing: 2px;
	line-height: 140%;
}
.jsp-title a, .jsp-title a:visited { border-bottom: 0; }
.jsp-card-inner p + p { margin-top: 0; }
.jsp-blurb {
	margin: 8px 0 0;
	color: #878787;
	font-size: 12px;
	font-style: italic;
}
.jsp-go {
	margin: 6px 0 0;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.mail-list {
	text-align: left;
	margin: 0 0 1.2em;
	line-height: 185%;
}

/* Blurb books on misc — local covers, no third-party badge widget. */
.book-list { margin: 12px 0 8px; }
.book-card {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 14px;
	padding: 8px;
	max-width: 640px;
	background: #ffffff;
	border: 1px solid var(--rule);
	text-align: left;
	color: #000000;
}
.book-card img {
	display: block;
	width: 240px;
	height: auto;
	border: 1px solid #474747;
	flex-shrink: 0;
}
.book-card .book-title {
	display: block;
	font-size: 16px;
	font-variant: small-caps;
	letter-spacing: 1px;
	line-height: 140%;
}
.book-card .book-title a,
.book-card .book-title a:visited { color: #00d; }
.book-card .book-title a:hover { color: #000000; }
.book-card .book-blurb {
	display: block;
	margin-top: 4px;
	color: #878787;
	font-size: 12px;
	font-style: italic;
}
.book-card .book-go {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.book-card .book-go a,
.book-card .book-go a:visited { color: #00d; }
.book-card .book-go a:hover { color: #000000; }

/* --- album tiles (was the 2-column bigbox table) ------------------------ */

.albumgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	padding: 20px 10px;
}

.albumtile { text-align: center; font-size: 16px; font-variant: small-caps; line-height: 140%; }
.albumtile a, .albumtile a:visited { font-size: 22px; font-variant: small-caps; border-bottom: 0; }
.albumtile img {
	background-color: var(--bg);
	border: 1px solid var(--rule);
	max-width: 100%;
	height: auto;
	margin-bottom: 12px;
}

/* --- thumbnail grid (was td.thumbox at height 184px) ------------------- */

.yearnav {
	text-align: center;
	font-variant: small-caps;
	letter-spacing: 2px;
	font-size: 14px;
	padding: 8px 4px 4px;
	line-height: 180%;
}
.yearnav a { padding: 0 5px; }

.yearhead {
	grid-column: 1 / -1;
	color: #ffffff;
	font-size: 18px;
	letter-spacing: 8px;
	padding: 16px 0 8px;
	margin: 4px 0 0;
	font-variant: small-caps;
	border-bottom: 1px solid var(--frame);
	text-align: center;
	scroll-margin-top: 8px;
}

.thumbgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	padding: 15px;
}

.thumbcell {
	background-color: var(--titlebg);
	border: 1px solid var(--frame);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.thumbcell a { display: flex; width: 100%; height: 100%; border-bottom: 0; }
.thumbcell img {
	background-color: var(--bg);
	border: 1px solid var(--rule);
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: opacity .2s;
}
.thumbcell img:hover { opacity: .8; }

/* --- single-photo page ------------------------------------------------- */

.mainimage { display: block; width: 100%; height: auto; border: 0; }

.titlebar {
	background-color: var(--titlebg);
	color: var(--body);
	border-top: 1px solid var(--fg);
	font-size: 13px;
	letter-spacing: 2px;
	padding: 5px;
	text-align: center;
	font-variant: small-caps;
}

.gebar {
	background-color: var(--titlebg);
	color: var(--fg);
	border-top: 1px solid var(--fg);
	font-size: 12px;
	padding: 4px 5px;
	text-align: center;
}

/* --- small screens ------------------------------------------------------
 * The original was a hard 900px table with no viewport meta, so phones got a
 * zoomed-out desktop page. Desktop rendering is unchanged; this only relaxes
 * the frame once the viewport is narrower than it.
 */
@media (max-width: 940px) {
	html, body { max-width: 100%; overflow-x: hidden; }
	body { margin: 4px; min-height: calc(100vh - 8px); align-items: stretch; }
	.tableborder {
		border-width: 3px;
		width: auto !important;   /* beat inline 800px on photo pages */
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
	.mainbox { font-size: 15px; }
	.boxpad { padding: 14px 12px 16px; }
	.subhead { letter-spacing: 2px; font-size: 13px; }
	.grafbox { height: 140px; }
	/* the splash images are ~1024px wide; at phone width a centred crop would
	 * show a sliver, so scale them instead and shorten the box */
	.mainbox.splash { height: 420px; background-size: cover; }
	.picborder2 { float: none; display: block; margin: 0 auto 14px; }
	.yearnav { letter-spacing: 1px; font-size: 13px; }
	.yearhead { letter-spacing: 4px; font-size: 16px; }
	.book-card { flex-direction: column; align-items: flex-start; max-width: 100%; }
	.book-card img { width: 100%; max-width: 280px; }
}
