/*
 * site.css -- the one shared stylesheet for Jeff Percival's web site.
 *
 * Design: a sibling of the ST5000 site (sal.wisc.edu/st5000) -- same
 * typefaces (Fraunces headings, IBM Plex Sans text, IBM Plex Mono code),
 * same navy / ivory / warm-grey neutrals -- with teal as this site's own
 * accent where ST5000 uses amber.
 *
 * Archive pages (wiyn/, the podcast episode indexes) keep their own
 * stylesheets and do not use this file.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
	--navy: #0A0E18;
	--ivory: #FAF8F3;
	--text: #2B2622;
	--muted: #6B6259;
	--rule: #E6E0D2;
	--accent: #3A9A94;       /* teal: this site's accent (ST5000 uses amber) */
	--accent-dark: #1F6E6A;
}

/* ---- Base ---------------------------------------------------------- */

body {
	font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
	background-color: var(--ivory);
	color: var(--text);
	margin: 0;
	/* Inner pages: a comfortable centered column (max ~900px of content),
	   with no per-page wrapper markup needed. */
	padding: 1.5em max(1.5em, calc((100% - 900px) / 2)) 3em;
}

h1, h2, h3, h4 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	color: var(--text);
}

p, li, dd { line-height: 1.55; }

a:link    { color: var(--accent-dark); }
a:visited { color: var(--muted); }
a:hover   { color: var(--accent); }

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 1.5em 0;
}

/* Code and command examples (e.g. the TPM page). */
pre, code {
	font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
	font-size: 0.92em;
}
pre.example { margin-left: 2.5em; }
/* On narrow screens, long command lines scroll sideways inside their box
   instead of widening the whole page. */
pre { overflow-x: auto; }

/* Small print under figures. */
p.caption { font-size: x-small; margin-top: 0; }

/* Page titles on inner pages: the first heading, left-aligned, in the
   heading face at a proper title size. */
h1.page-title {
	font-size: 30px;
	line-height: 1.2;
	margin: 0.4em 0 0.6em;
}
h1.page-title img { vertical-align: middle; margin-left: 0.3em; }
p.page-date { color: var(--muted); margin-top: -0.4em; }

/* ---- Tables -------------------------------------------------------- */

table { background-color: #fff; }

/*
 * Keep table cells as compact as they were when these pages rendered in
 * old "quirks" mode, which dropped the top margin of a cell's first
 * element and the bottom margin of its last one (paragraphs, <pre>).
 */
td > :first-child, th > :first-child { margin-top: 0; }
td > :last-child,  th > :last-child  { margin-bottom: 0; }

/*
 * Centering, replacing the old align="center" attributes and <center>
 * tags. Those also centered any table inside them, which CSS
 * text-align does not, so centered blocks center their tables too.
 */
.center { text-align: center; }
table.center, .center > table { margin-left: auto; margin-right: auto; }
/* ...but keep the text in their cells left-aligned, as before (old quirks
   mode did not let centering flow into tables; header cells stay centered). */
table.center, .center table { text-align: left; }
table.center th, .center table th { text-align: center; }

/*
 * Data tables (class="data"): real rows and columns of information, e.g.
 * the conversion-program tables. Styled like the ST5000 site's tables:
 * white, light rules, a tinted header row, and light zebra striping.
 * Tables used only to lay out images (the CAN pages) are not marked
 * "data" and keep their old look.
 */
table.data {
	border-collapse: collapse;
	border: 1px solid var(--rule);
	margin-top: 0.5em;
	margin-bottom: 1.2em;
}
table.data th, table.data td {
	border: 1px solid var(--rule);
	padding: 0.35em 0.7em;
	vertical-align: top;
}
table.data th {
	background-color: #EAF3F2;   /* light teal tint */
	font-weight: 600;
}
table.data tr:nth-child(even) td {
	background-color: #F7F5EF;
}
/* Grid of marks (the conversion-program matrix): center the marks. */
table.data.matrix td, table.data.matrix th { text-align: center; }

/*
 * Image grids (class="image-grid"): tables used only to lay out images,
 * e.g. the compression examples on the CAN pages. No frames, a small gap
 * between images, transparent so the page background shows through.
 */
table.image-grid, table.layout {
	border-collapse: separate;
	border-spacing: 4px;
	background: transparent;
}
table.image-grid td { padding: 0; vertical-align: top; }
/* Tables used only to arrange text (e.g. the flyer's contact block). */
table.layout td { padding: 0 1em 0 0; vertical-align: top; }

/* ---- Images and small screens ------------------------------------ */

/* Images never overflow their column; on a phone they (and image grids)
   shrink to fit, keeping their proportions. */
img { max-width: 100%; height: auto; }
@media (max-width: 600px) {
	/* Wide data tables scroll sideways inside their own box. */
	table.data { display: block; overflow-x: auto; max-width: 100%; }
	/* Long addresses (URLs) in table cells may wrap. */
	td { overflow-wrap: anywhere; }
}

/* ---- Publication lists (papers, talks) ----------------------------- */

/*
 * One row per entry: the year in the left margin, the linked title on
 * the first line, and the authors (Jeff's name in bold) and journal in
 * smaller grey text below.
 */
ul.pubs {
	list-style: none;
	margin: 1em 0 2em;
	padding: 0;
	border-top: 1px solid var(--rule);
}
li.pub {
	display: flex;
	gap: 20px;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule);
}
.pub-year {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 17px;
	color: var(--accent-dark);
	width: 3.2em;
	flex-shrink: 0;
}
/* Title text (for the rare entry whose title isn't itself a link). */
.pub-title { font-weight: 500; font-size: 15.5px; }
.pub-title a:link, .pub-title a:visited {
	font-weight: 500;
	font-size: 15.5px;
	color: var(--text);
	text-decoration: none;
}
.pub-title a:hover { color: var(--accent-dark); text-decoration: underline; }
.pub-meta {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.5;
	margin-top: 3px;
}
.pub-meta strong { color: var(--text); font-weight: 600; }
/* Small "PDF" tag after a title, linking to Jeff's own copy of the paper. */
.pub-title a.pub-pdf:link, .pub-title a.pub-pdf:visited {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--accent-dark);
	border: 1px solid var(--accent);
	border-radius: 3px;
	padding: 0 5px;
	margin-left: 0.4em;
	text-decoration: none;
	vertical-align: 1px;
}
.pub-title a.pub-pdf:hover { background: var(--accent); color: #fff; }

/* ---- Site bar on inner pages -------------------------------------- */

/*
 * A slim navy bar across the top of every inner page, with the site name
 * linking home and a few shortcuts. It spans the full window width even
 * though the page body is a centered column (the 100vw / 50% trick).
 */
html { overflow-x: clip; }
.sitebar {
	margin: -1.5em 0 1.5em calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
	padding: 0.7em max(1.5em, calc((100vw - 900px) / 2));
	background: linear-gradient(90deg, var(--navy), #1a2035 70%, var(--accent-dark));
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3em 1.5em;
}
.sitebar a { text-decoration: none; }
.sitebar a.sitebar-name:link, .sitebar a.sitebar-name:visited {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 17px;
	color: var(--ivory);
}
.sitebar nav a:link, .sitebar nav a:visited {
	color: #D9D4C8;
	font-size: 14px;
	font-weight: 500;
	margin-left: 1.2em;
}
.sitebar nav a:first-child { margin-left: 0; }
.sitebar a:hover { color: var(--accent); }

/* ---- Home page ----------------------------------------------------- */

body.home { padding: 0; }

.masthead {
	background: linear-gradient(135deg, var(--navy), #1a2035 60%, var(--accent-dark));
	color: var(--ivory);
}
.masthead-inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.6em 1.5em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}
.masthead img {
	width: 200px;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.masthead h1 {
	color: var(--ivory);
	font-size: 34px;
	margin: 0 0 0.25em;
}
.masthead p {
	margin: 0.15em 0;
	color: #D9D4C8;
	font-size: 15px;
}
.masthead .role {
	color: var(--accent);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12.5px;
	margin-bottom: 0.5em;
}

.page-content {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.2em 1.5em 3em;
}
.section-label {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-dark);
	margin: 0 0 0.3em;
}
.section-heading {
	font-size: 22px;
	margin: 0 0 0.8em;
}

/* Labeled link list: one row per item, a small category tag on the left. */
.doc-list {
	list-style: none;
	margin: 0 0 2.2em;
	padding: 0;
	border-top: 1px solid var(--rule);
}
.doc-row {
	display: flex;
	align-items: baseline;
	gap: 6px 20px;
	padding: 13px 0;
	border-bottom: 1px solid var(--rule);
}
.doc-type {
	width: 84px;
	flex-shrink: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-dark);
}
.doc-row a.doc-title:link, .doc-row a.doc-title:visited {
	font-size: 15.5px;
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
}
.doc-row a.doc-title:hover { color: var(--accent-dark); text-decoration: underline; }
.doc-meta { font-size: 13px; color: var(--muted); }
.doc-meta a:link, .doc-meta a:visited { color: var(--muted); }

.contact {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.6;
	margin-top: 0;
}

/* ---- Printing ------------------------------------------------------ */

/*
 * On paper: black on white, no site bar or "PDF" tags, full page width,
 * and keep each publication entry (and table row) in one piece across
 * page breaks.
 */
@media print {
	html, body {
		background: #fff !important;
		color: #000;
	}
	body { padding: 0; font-size: 11pt; }
	.sitebar, a.pub-pdf { display: none !important; }
	a:link, a:visited { color: #000 !important; text-decoration: none; }
	h1, h2, h3, h4, .pub-year, .doc-type, .section-label { color: #000 !important; }
	.pub-meta, .doc-meta, .contact, p.caption, p.page-date { color: #333 !important; }
	li.pub, .doc-row, tr, img, pre { break-inside: avoid; }
	h1, h2, h3 { break-after: avoid; }
	/* Home page masthead: drop the dark band, keep the photo and text. */
	.masthead { background: none !important; color: #000; }
	.masthead-inner, .page-content { padding: 0 0 1em; max-width: none; }
	.masthead img { width: 140px; box-shadow: none; }
	.masthead h1, .masthead p, .masthead .role { color: #000 !important; }
}