/* chriscoldwell.com — static rebuild, 2026 */

:root {
	--paper   : #f1f3f4;
	--surface : #ffffff;
	--ink     : #16212b;
	--muted   : #56636e;
	--rule    : #d2d8dd;
	--mercury : #a7b2bb;
	--accent  : #285f7c;
	--accent-2: #e3ecf1;

	--display : 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--text    : 'Source Serif 4', Georgia, 'Times New Roman', serif;

	--measure : 68ch;
	--gutter  : clamp(16px, 4vw, 48px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin           : 0;
	background       : var(--paper);
	color            : var(--ink);
	font-family      : var(--text);
	font-size        : 1.0625rem;
	line-height      : 1.6;
	font-optical-sizing: auto;
	-webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.skip {
	position: absolute; left: -999px; top: 8px;
	background: var(--ink); color: #fff; padding: 8px 12px; z-index: 10;
}
.skip:focus { left: 8px; }

h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.15; margin: 0; }

/* ------------------------------------------------ masthead + career timeline */

.masthead {
	background   : var(--ink);
	color        : #e9eef1;
	padding      : clamp(32px, 6vw, 72px) var(--gutter) 28px;
}
.mast-inner { max-width: 1180px; margin: 0 auto; }

.masthead h1 {
	color               : #fff;
	font-size           : clamp(2.6rem, 9vw, 6.4rem);
	font-weight         : 800;
	font-variation-settings: 'wdth' 125;
	letter-spacing      : -0.02em;
	line-height         : 0.95;
}
.titledesc {
	font-family : var(--display);
	font-variation-settings: 'wdth' 88;
	font-size   : clamp(1.1rem, 2.2vw, 1.45rem);
	font-weight : 500;
	margin      : 14px 0 4px;
	color       : #cfd8de;
}
.mail { margin: 0; }
.mail a { color: #fff; }

.timeline {
	max-width : 1180px;
	margin    : clamp(28px, 4vw, 44px) auto 0;
	position  : relative;
}
.timeline ol { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; height: 26px; }
.timeline li a {
	position        : absolute;
	inset           : 0;
	display         : block;
	color           : #dfe6ea;
	text-decoration : none;
	font-family     : var(--display);
	font-variation-settings: 'wdth' 80;
	font-size       : 0.82rem;
}
.timeline .bar {
	position     : absolute;
	left         : var(--l);
	width        : var(--w);
	top          : 9px;
	height       : 8px;
	min-width    : 6px;
	background   : var(--mercury);
	border-radius: 4px;
	transition   : background 0.15s;
}
.timeline .tl-label {
	position   : absolute;
	left       : calc(var(--l) + var(--w) + 10px);
	top        : 4px;
	white-space: nowrap;
}
.timeline li.flip .tl-label {
	left      : auto;
	right     : calc(100% - var(--l) + 10px);
	text-align: right;
}
.tl-when { color: #93a3ae; margin-left: 8px; }
.timeline a:hover .bar,
.timeline a:focus-visible .bar { background: #fff; }
.timeline a:hover .tl-label { color: #fff; }

.ticks {
	position   : relative;
	height     : 22px;
	margin-top : 10px;
	border-top : 1px solid #34424e;
	font-family: var(--display);
	font-size  : 0.72rem;
	color      : #8696a2;
}
.ticks span { position: absolute; left: var(--l); top: 6px; transform: translateX(-50%); }
.ticks span:first-child { transform: none; }

/* ------------------------------------------------ layout */

.layout {
	max-width             : 1180px;
	margin                : 0 auto;
	padding               : 0 var(--gutter);
	display               : grid;
	grid-template-columns : 200px minmax(0, 1fr);
	gap                   : 56px;
}

.toc { position: sticky; top: 0; align-self: start; padding-top: 48px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.toc a {
	display        : block;
	padding        : 6px 0 6px 14px;
	margin-left    : -2px;
	border-left    : 2px solid transparent;
	color          : var(--muted);
	text-decoration: none;
	font-family    : var(--display);
	font-size      : 0.95rem;
}
.toc a:hover { color: var(--ink); border-left-color: var(--accent); }

main { padding: 40px 0 72px; min-width: 0; }
main > section,
.summary-grid { margin-top: 56px; }
main > section:first-child { margin-top: 0; }

main h2 {
	font-size          : clamp(1.6rem, 3vw, 2.1rem);
	font-weight        : 750;
	font-variation-settings: 'wdth' 108;
	padding-bottom     : 10px;
	border-bottom      : 2px solid var(--ink);
	margin-bottom      : 20px;
}
main p, main li { max-width: var(--measure); }
main p { margin: 0 0 1em; }

/* ------------------------------------------------ summary row */

.summary-grid {
	display              : grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap                  : 36px;
}
.summary-grid > section { margin: 0; }
.summary-grid h2 { font-size: 1.25rem; border-bottom-width: 1px; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
	background   : var(--surface);
	border       : 1px solid var(--rule);
	border-radius: 3px;
	padding      : 2px 8px;
	font-size    : 0.9rem;
}

/* ------------------------------------------------ skills */

#techintro h3 { font-size: 1.1rem; margin-bottom: 8px; }

.levels { list-style: none; margin: 0 0 1.2em; padding: 0; }
.levels li { display: flex; align-items: center; gap: 12px; padding: 3px 0; }
.levels .lvl { display: none; }

.meter { display: inline-flex; gap: 3px; vertical-align: middle; }
.meter i {
	width        : 11px;
	height       : 11px;
	border       : 1.5px solid var(--accent);
	border-radius: 2px;
	background   : transparent;
}
.meter i.on { background: var(--accent); }
.lvl { font-family: var(--display); font-size: 0.8rem; color: var(--muted); margin-left: 8px; }

.technical { margin-top: 36px; }
.technical h3 { font-size: 1.3rem; font-weight: 700; }
.tdesc { color: var(--muted); font-style: italic; margin: 4px 0 0; }

.tablewrap { overflow-x: auto; margin-top: 12px; }
.technical table {
	width          : 100%;
	border-collapse: collapse;
	background     : var(--surface);
	font-size      : 0.95rem;
}
.technical thead th {
	font-family   : var(--display);
	font-size     : 0.8rem;
	font-weight   : 600;
	color         : var(--muted);
	text-align    : left;
	padding       : 10px 12px;
	border-bottom : 2px solid var(--ink);
	vertical-align: bottom;
}
.technical tbody th { font-weight: 400; text-align: left; }
.technical td,
.technical tbody th { padding: 7px 12px; border-bottom: 1px solid var(--rule); }
.technical .n { text-align: right; width: 7.5em; font-variant-numeric: tabular-nums; }
.technical .m { width: 9.5em; white-space: nowrap; }

/* ------------------------------------------------ cv */

.emp { padding: 28px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.emp:first-of-type { padding-top: 4px; }
.emp header {
	display              : grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap           : 24px;
	align-items          : baseline;
}
.emp h3 { font-size: 1.35rem; font-weight: 700; }
.when {
	margin     : 0;
	font-family: var(--display);
	font-size  : 0.9rem;
	color      : var(--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.emptitle {
	grid-column: 1 / -1;
	margin     : 4px 0 0;
	font-family: var(--display);
	font-variation-settings: 'wdth' 90;
	color      : var(--accent);
	font-weight: 600;
}
.empdesc { margin-top: 14px; }
.empdesc ul, .projects ul { margin: 0 0 1em; padding-left: 1.2em; }

.projects { list-style: none; margin: 18px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--accent-2); }
.projects > li { margin: 0 0 18px; max-width: none; }
.projects h4 { font-size: 1.02rem; font-weight: 650; display: inline; }
.projects .role {
	display    : block;
	font-family: var(--display);
	font-size  : 0.88rem;
	color      : var(--muted);
	margin     : 2px 0 4px;
}
.projects p { margin: 0 0 0.5em; }

/* ------------------------------------------------ clients + personal */

.clients {
	list-style  : none;
	margin      : 8px 0 0;
	padding     : 0;
	columns     : 3 14em;
	column-gap  : 28px;
	font-size   : 0.95rem;
}
.clients li { break-inside: avoid; padding: 3px 0; border-bottom: 1px dotted var(--rule); max-width: none; }

#personal { color: var(--muted); font-style: italic; border-top: 1px solid var(--rule); padding-top: 28px; }

.site-footer {
	background : var(--ink);
	color      : #c7d1d8;
	text-align : center;
	padding    : 22px var(--gutter);
	font-family: var(--display);
	font-size  : 0.85rem;
}
.site-footer p { margin: 0; }

.notfound { max-width: 40rem; margin: 18vh auto; padding: 0 var(--gutter); }
.notfound h1 { font-size: 2.4rem; font-variation-settings: 'wdth' 125; margin-bottom: 12px; }

/* ------------------------------------------------ small screens */

@media (max-width: 900px) {
	.layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.toc {
		position     : sticky;
		top          : 0;
		z-index      : 5;
		padding      : 0;
		margin       : 0 calc(-1 * var(--gutter));
		background   : var(--paper);
		border-bottom: 1px solid var(--rule);
		overflow-x   : auto;
		min-width    : 0;
	}
	.toc ol { display: flex; border: 0; padding: 0 var(--gutter); }
	.toc a { white-space: nowrap; padding: 12px 14px 10px 0; margin: 0 6px 0 0; border: 0; }
	html { scroll-padding-top: 56px; }
	.summary-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.summary-grid > section { margin-top: 40px; }
}

@media (max-width: 640px) {
	.timeline li { height: 34px; }
	.timeline li a { font-size: 0.78rem; }
	.timeline .tl-label,
	.timeline li.flip .tl-label { left: 0; right: auto; top: 0; text-align: left; }
	.timeline .bar { top: 21px; height: 6px; }
	.ticks span:nth-child(even) { display: none; }
	.emp header { grid-template-columns: minmax(0, 1fr); }
	.when { white-space: normal; margin-top: 4px; }
	.projects { padding-left: 14px; }
	.technical .n { width: auto; }
	.technical thead th, .technical td, .technical tbody th { padding-left: 8px; padding-right: 8px; }
}

/* ------------------------------------------------ print */

@media print {
	body { background: #fff; font-size: 10.5pt; }
	.masthead { background: none; color: #000; padding: 0 0 12pt; }
	.masthead h1, .mail a { color: #000; }
	.titledesc { color: #333; }
	.timeline, .toc, .skip { display: none; }
	.layout { display: block; padding: 0; }
	main { padding: 0; }
	a { color: #000; text-decoration: none; }
	.emp, .technical { break-inside: avoid-page; }
	.site-footer { background: none; color: #000; }
}