/* ==========================================================================
   Resume — the interactive canvas on /resume

   Loaded only on that page (functions.php, barbella_enqueue_scripts). Markup:
   patterns/resume-dpm.php. Motion: assets/js/resume.js.

   Everything here is the finished, static state. The script animates *into*
   these positions, so with JavaScript off or reduced motion on, the page is
   already complete. Rules that only make sense while the script is driving a
   pinned scene hang off `.resume.is-pinned`, which the script adds only on
   wide screens with motion allowed.

   Colors are the site's own (theme.json) plus one dark slate for the roadmap
   scene, which needed a night-sky backdrop for the bars to read as light.
   ========================================================================== */

.resume {
	--r-blue: #439cd0;          /* theme.json accent-fill */
	--r-orange: #d35400;        /* theme.json button */
	--r-ink: #333333;           /* theme.json contrast */
	/* #666, not theme.json's #7a7a7a body gray: #7a7a7a is 4.3:1 on white,
	   under the 4.5:1 AA minimum for the small text this page uses it on. */
	--r-muted: #666666;
	--r-band: #f1f6f8;          /* theme.json band-light */
	--r-slate: #1e2933;
	--r-line: #dde5ea;
	/* Where a pinned scene's top edge stops: under the site's sticky navbar and
	   this page's own progress bar. The script measures both and overwrites
	   this; 110px is the desktop figure, for the moment before it runs. */
	--r-pin-top: 110px;

	color: var(--r-ink);
	/* clip, not hidden: `overflow: hidden` would create a scroll container, and
	   ScrollTrigger's pinned scenes use position: fixed, which a scroll
	   container's transform context can break. Clip only stops the roadmap
	   cursor and the flying kanban cards from widening the page. */
	overflow-x: clip;
}

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

.resume-inner {
	width: 88%;                 /* matches .barbella-container */
	max-width: 1200px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.resume-inner {
		width: auto;
		margin: 0 var(--barbella-gutter, 20px);
	}
}

.resume-scene {
	position: relative;
	padding: 96px 0;
	/* The progress bar's links jump here; without this the section's top lands
	   under the sticky header and progress bar. */
	scroll-margin-top: var(--r-pin-top);
}

@media (max-width: 767px) {
	.resume-scene {
		padding: 64px 0;
	}
}

/* A pinned scene fills exactly the window below the sticky bars, because
   that is all of it the reader will see while it is pinned. */
.resume.is-pinned .resume-roadmap,
.resume.is-pinned .resume-scope {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--r-pin-top));
	padding: 32px 0;
}

/* Pinned, the roadmap has to hold the chart and the longest role's full text
   (Relevate Health) in one window, so its heading and rows tighten up. */
.resume.is-pinned .resume-roadmap {
	padding: 20px 0;
}

.resume.is-pinned .resume-roadmap .resume-scene-head {
	margin-bottom: 12px;
}

.resume.is-pinned .resume-roadmap .resume-gantt-row {
	height: 30px;
}

/* Short windows (a 13" laptop's browser is about 800px tall), and narrower
   ones where the job text wraps onto more lines (at 1280×900 the longest role
   needed 800px of 768): the pinned scenes must still fit, so headings, rows,
   and text step down one size. */
@media (max-height: 880px), (max-width: 1360px) {
	.resume.is-pinned .resume-roadmap h2,
	.resume.is-pinned .resume-scope h2 {
		font-size: 30px;
		margin-bottom: 4px;
	}

	.resume.is-pinned .resume-scene-head .resume-eyebrow {
		margin-bottom: 4px;
	}

	.resume.is-pinned .resume-roadmap .resume-gantt-row {
		height: 25px;
	}

	.resume.is-pinned .resume-gantt-bar {
		top: 6px;
		bottom: 6px;
	}

	.resume.is-pinned .resume-role-body {
		font-size: 14px;
		line-height: 1.5;
	}

	.resume.is-pinned .resume-scope {
		padding: 16px 0;
	}

	.resume.is-pinned .resume-scope .resume-scene-head {
		margin-bottom: 14px;
	}

	.resume.is-pinned .resume-card {
		padding: 6px 10px 6px 12px;
	}

	.resume.is-pinned .resume-lane-cards {
		gap: 7px;
	}
}

.resume.is-pinned .resume-roadmap > .resume-inner,
.resume.is-pinned .resume-scope > .resume-inner {
	width: 88%;
}

.resume-eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--r-blue);
}

/* Words that earn their space on desktop but wrap the eyebrow awkwardly on a
   phone ("Program" pushed "2001–2026" onto its own line). Same breakpoint as
   the rest of the mobile layout. */
@media (max-width: 767px) {
	.desktop-only {
		display: none;
	}
}

.resume h2 {
	margin: 0 0 12px;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: inherit;
}

.resume-scene-head {
	margin-bottom: 40px;
}

.resume-scene-sub {
	margin: 0;
	color: var(--r-muted);
}

.resume-button {
	display: inline-flex;
	align-items: center;
	padding: 14px 22px;
	border: 2px solid var(--r-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--r-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.resume-button:hover {
	background: var(--r-ink);
	color: #fff;
	transform: translateY(-2px);
}

.resume-button--primary {
	border-color: var(--r-orange);
	background: var(--r-orange);
	color: #fff;
}

.resume-button--primary:hover {
	border-color: var(--r-ink);
}

/* ==========================================================================
   Progress bar
   ========================================================================== */

/* Sticks directly under the site's own sticky navbar. `top` is the navbar's
   pinned height, measured by the script (--r-header-h); 80px is the desktop
   figure until it runs. z-index 90: under the header's 100 (style.css, Sticky),
   so the mobile menu overlay still covers it. */
.resume-progress {
	position: sticky;
	top: var(--r-header-h, 80px);
	z-index: 90;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--r-line);
}

.resume-progress-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 88%;
	max-width: 1200px;
	margin: 0 auto;
	height: 48px;
}

.resume-progress-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--r-muted);
	white-space: nowrap;
}

.resume-progress-phases {
	display: flex;
	flex: 1;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.resume-progress-phases a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--r-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 200ms ease, color 200ms ease;
}

.resume-progress-num {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	font-size: 11px;
}

.resume-progress-phases a:hover,
.resume-progress-phases a.is-current {
	background: var(--r-band);
	color: var(--r-ink);
}

.resume-progress-phases a.is-current .resume-progress-num {
	border-color: var(--r-orange);
	background: var(--r-orange);
	color: #fff;
}

.resume-plain-toggle {
	padding: 6px 14px;
	border: 1.5px solid var(--r-line);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--r-ink);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.resume-plain-toggle:hover {
	border-color: var(--r-ink);
}

/* Filled by the script as the reader moves through the page. */
.resume-progress-bar {
	height: 3px;
	background: transparent;
}

.resume-progress-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--r-blue), var(--r-orange));
	transform-origin: left;
	transform: scaleX(0);
}

/* Phone: the numbers alone, and no label — six names do not fit in 375px. */
@media (max-width: 900px) {
	.resume-progress-name,
	.resume-progress-label {
		display: none;
	}
}

@media (max-width: 767px) {
	.resume-progress-inner {
		width: auto;
		margin: 0 var(--barbella-gutter, 20px);
		gap: 8px;
	}

	.resume-progress-phases a {
		padding: 6px 4px;
	}
}

.resume.is-plain .resume-progress-phases {
	display: none;
}

/* Right-aligned whether or not the phase links are there to push it over. */
.resume-plain-toggle {
	margin-left: auto;
}

/* ==========================================================================
   1. Charter
   ========================================================================== */

/* Graph paper: the charter is a document on a planning desk. */
.resume-charter {
	background-color: #f7f9fb;
	background-image:
		linear-gradient(rgba(67, 156, 208, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(67, 156, 208, 0.08) 1px, transparent 1px);
	background-size: 24px 24px;
}

.resume-charter-doc {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	padding: 48px 56px;
	background: #fff;
	border: 1px solid var(--r-line);
	border-radius: 6px;
	box-shadow: 0 30px 60px -30px rgba(30, 41, 51, 0.25);
}

/* Two columns on desktop — who and why on the left, the particulars on the
   right — so the whole charter, stamp included, fits the first screen. */
@media (min-width: 900px) {
	.resume-charter {
		padding-top: 48px;
	}

	.resume-charter-doc {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		column-gap: 48px;
		max-width: 1100px;
		padding: 40px 48px;
	}

	.resume-charter-head,
	.resume-facts {
		grid-column: 1 / -1;
	}

	.resume-charter-name,
	.resume-charter-title,
	.resume-charter-objective {
		grid-column: 1;
	}

	/* Doubled class: the base rule for the fields comes later in the file and
	   would otherwise put its two columns back. */
	.resume-charter-doc .resume-charter-fields {
		grid-column: 2;
		grid-row: 2 / span 3;
		grid-template-columns: 1fr;
		align-content: start;
		margin-bottom: 28px;
		padding-left: 32px;
		border-left: 2px dashed var(--r-line);
	}
}

@media (max-width: 767px) {
	.resume-charter-doc {
		padding: 32px 22px;
	}
}

.resume-charter-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding-bottom: 20px;
	margin-bottom: 28px;
	border-bottom: 2px dashed var(--r-line);
}

.resume-charter-head .resume-eyebrow {
	margin: 0;
}

.resume-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: #e7f5ec;
	color: #1d7a45;
	font-size: 13px;
	font-weight: 700;
}

.resume-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.resume-charter-name {
	margin: 0;
	font-size: clamp(40px, 7vw, 76px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--r-ink);
}

.resume-charter-title {
	margin: 12px 0 28px;
	font-size: clamp(17px, 2vw, 22px);
	font-weight: 600;
	color: var(--r-blue);
}

.resume-field-label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--r-muted);
}

.resume-charter-objective {
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.65;
}

.resume-charter-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 32px;
	margin: 0 0 36px;
}

@media (max-width: 767px) {
	.resume-charter-fields {
		grid-template-columns: 1fr;
	}
}

.resume-charter-field dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--r-muted);
}

.resume-charter-field dd {
	margin: 4px 0 0;
	font-weight: 600;
}

.resume-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0;
	padding: 28px 0 0;
	border-top: 2px dashed var(--r-line);
	list-style: none;
}

@media (max-width: 767px) {
	.resume-facts {
		grid-template-columns: repeat(2, 1fr);
	}
}

.resume-fact-value,
.resume-fact-suffix {
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 800;
	line-height: 1;
	color: var(--r-ink);
	/* Tabular figures: the count-up would otherwise jitter sideways as
	   proportional digits change width every frame. */
	font-variant-numeric: tabular-nums;
}

.resume-fact-suffix {
	color: var(--r-orange);
}

.resume-fact-label {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--r-muted);
}

/* The rubber stamp. Positioned over the charter's top-right corner and
   rotated like it was thumped on by hand. */
.resume-stamp {
	position: absolute;
	/* In the empty middle of the charter's header row, left of the status. */
	top: 22px;
	right: 220px;
	margin: 0;
	padding: 8px 18px;
	border: 4px double var(--r-orange);
	border-radius: 6px;
	color: var(--r-orange);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transform: rotate(-12deg);
	opacity: 0.85;
	pointer-events: none;
}

@media (max-width: 767px) {
	/* Phone: beside the status pill, which wraps under the eyebrow here. */
	.resume-stamp {
		top: 100px;
		right: 14px;
		font-size: 16px;
		padding: 4px 10px;
	}
}

.resume-scroll-cue {
	display: block;
	width: max-content;
	margin: 40px auto 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--r-muted);
	text-decoration: none;
}

.resume-scroll-cue span {
	display: inline-block;
	animation: resume-bob 1.6s ease-in-out infinite;
}

@keyframes resume-bob {
	50% { transform: translateY(4px); }
}

/* ==========================================================================
   2. Scope of work (kanban)

   Unpinned (phone, reduced motion, no script): three lanes of cards, each card
   showing its full bullet. Pinned: cards shrink to their number and title,
   and the bullet being worked on is shown large in the In progress column —
   12 full bullets side by side would not fit one screen, and reading them
   one at a time as they move is the point of the scene.
   ========================================================================== */

.resume-scope {
	background: var(--r-band);
}

.resume-board {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

/* Backlog and In progress only exist for the animation to move through. */
.resume-board-backlog,
.resume-board-wip {
	display: none;
}

.resume.is-pinned .resume-board {
	grid-template-columns: 150px minmax(0, 1.15fr) minmax(0, 2fr);
}

.resume.is-pinned .resume-board-backlog,
.resume.is-pinned .resume-board-wip {
	display: flex;
	flex-direction: column;
}

.resume-board-col {
	padding: 14px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px dashed #c5d3dc;
}

.resume-board-col-title {
	display: flex;
	justify-content: space-between;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--r-muted);
}

.resume-board-count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--r-ink);
	color: #fff;
	letter-spacing: 0;
}

.resume-board-tally {
	letter-spacing: 0;
	color: #1d7a45;
}

.resume-board-pile {
	flex: 1;
}

.resume-board-empty {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #1d7a45;
	opacity: 0;
}

/* Sized to one compact card: the card lands here, and its full text shows
   in the focus panel below. */
.resume-board-slot {
	height: 76px;
	flex: none;
	border: 2px dashed #c5d3dc;
	border-radius: 6px;
}

.resume-focus {
	display: grid;
	grid-template-areas: "focus";
	flex: 1;
	margin-top: 14px;
}

.resume-focus-item {
	grid-area: focus;
	padding: 18px 20px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--r-line);
	box-shadow: 0 10px 24px -14px rgba(30, 41, 51, 0.3);
	align-self: start;
}

.resume-focus-id {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--r-orange);
}

.resume-focus-title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

.resume-focus-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* The "click a card" instruction. It sits in the Delivered title row, between
   the title and the tally, so it adds no height to a scene that has to fit
   the window. Pinned only — unpinned, every card already shows its full text —
   and faded in by the script once the first card lands. */
.resume-board-hint {
	display: none;
	align-items: center;
	gap: 6px;
	/* Line height pinned to the title row's own, so the pill adds no height. */
	padding: 0 10px;
	line-height: 22px;
	border-radius: 999px;
	background: #e8f3fa;
	color: #2a6f99;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0;
}

.resume.is-pinned .resume-board-hint {
	display: inline-flex;
}

.resume-board-hint svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linejoin: round;
}

.resume-board-done {
	background: #fff;
	border-style: solid;
	border-color: var(--r-line);
}

.resume-lanes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 900px) {
	.resume-lanes {
		grid-template-columns: 1fr;
	}
}

.resume-lane-title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 800;
	color: var(--r-ink);
}

.resume-lane-cards {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tablet: one lane per row, so two cards across fills the width. */
@media (min-width: 601px) and (max-width: 900px) {
	.resume-lane-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.resume-card {
	--tag: var(--r-blue);
	position: relative;
	padding: 12px 14px 12px 16px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid var(--r-line);
	border-left: 4px solid var(--tag);
	box-shadow: 0 2px 6px rgba(30, 41, 51, 0.06);
	/* Above the columns it flies over on its way to Delivered. */
	z-index: 1;
}

.resume-card--lead { --tag: var(--r-orange); }
.resume-card--deliver { --tag: var(--r-blue); }
.resume-card--operate { --tag: #1d7a45; }

.resume-card-id {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--r-muted);
}

.resume-card-title {
	display: block;
	padding-right: 22px;
	font-size: 14px;
	line-height: 1.3;
}

.resume-card-text {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

/* Pinned: the bullet is visually hidden on the card, not removed — the focus
   panel that shows it is aria-hidden, so screen readers read it here. */
.resume.is-pinned .resume-card-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.resume.is-pinned .resume-card {
	padding: 8px 12px 8px 14px;
	cursor: pointer;
}

.resume.is-pinned .resume-card.is-shown {
	outline: 2px solid var(--tag);
	outline-offset: 1px;
}

.resume-card-check {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tag);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
}

/* ==========================================================================
   3. Communications plan
   ========================================================================== */

.resume-comms .resume-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

@media (max-width: 900px) {
	.resume-comms .resume-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Stacked, the heading has to come before the diagram it introduces. */
	.resume-comms-copy {
		order: -1;
	}
}

.resume-orbit {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 1;
	margin: 0 auto;
}

.resume-orbit-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.resume-orbit-ring {
	fill: none;
	stroke: var(--r-line);
	stroke-width: 0.4;
	stroke-dasharray: 1.5 1.5;
}

.resume-orbit-line {
	stroke: var(--r-blue);
	stroke-width: 0.35;
	opacity: 0.5;
}

.resume-orbit-packet {
	fill: var(--r-orange);
	opacity: 0;
}

.resume-orbit-center {
	position: absolute;
	left: 50%;
	top: 50%;
	/* 30%, up from the initials' 22%: a face needs the room to read at phone
	   size, and it still clears the ring of labels at a 38% radius. */
	width: 30%;
	aspect-ratio: 1;
	border-radius: 50%;
	/* Clips the square photo to the circle. */
	overflow: hidden;
	background: var(--r-ink);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 4px #fff, 0 0 0 12px rgba(67, 156, 208, 0.2);
	/* Easter egg: the photo is clickable (resume.js). */
	cursor: pointer;
}

.resume-orbit-center img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.resume-orbit-node {
	position: absolute;
	transform: translate(-50%, -50%);
	max-width: 32%;
	padding: 6px 10px;
	border: 1.5px solid var(--r-blue);
	border-radius: 999px;
	background: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--r-ink);
}

@media (max-width: 480px) {
	.resume-orbit-node {
		padding: 4px 6px;
		font-size: 10px;
	}
}

.resume-comms-copy p {
	line-height: 1.7;
}

.resume-comms-lead {
	font-weight: 600;
}

.resume-comms-list {
	margin: 0 0 20px;
	padding-left: 18px;
	line-height: 1.7;
}

/* ==========================================================================
   4. Roadmap
   ========================================================================== */

.resume-roadmap {
	background: var(--r-slate);
	color: #e8eef2;
}

.resume-roadmap .resume-scene-head {
	position: relative;
	margin-bottom: 28px;
}

/* The year the cursor is passing, huge and outlined behind the heading. */
.resume-roadmap-year {
	position: absolute;
	right: 0;
	bottom: -12px;
	margin: 0;
	font-size: clamp(64px, 11vw, 140px);
	font-weight: 800;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(232, 238, 242, 0.25);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* On a phone the heading fills the width and the year would sit on top of it. */
@media (max-width: 767px) {
	.resume-roadmap-year {
		display: none;
	}
}

.resume-gantt {
	--label: 150px;
	position: relative;
	padding-bottom: 8px;
}

@media (max-width: 767px) {
	.resume-gantt {
		--label: 96px;
	}
}

.resume-gantt-axis {
	position: relative;
	height: 24px;
	margin-left: var(--label);
	border-bottom: 1px solid rgba(232, 238, 242, 0.15);
}

/* Each tick is a zero-width, full-height box: the mark is drawn by ::after at
   its left edge, and the year text is centered on that edge by flexbox, which
   lets an item overflow a too-narrow container equally on both sides. */
.resume-gantt-tick {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	display: flex;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: #9fb0bd;
	white-space: nowrap;
}

.resume-gantt-tick::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	border-left: 1px solid rgba(232, 238, 242, 0.2);
}

.resume-gantt-tick.is-major::after {
	height: 8px;
	border-color: rgba(232, 238, 242, 0.45);
}

.resume-gantt-rows {
	margin: 0;
	padding: 8px 0 0;
	list-style: none;
}

.resume-gantt-row {
	display: grid;
	grid-template-columns: var(--label) 1fr;
	align-items: center;
	height: 36px;
}

.resume-gantt-company {
	padding-right: 12px;
	font-size: 13px;
	font-weight: 600;
	color: #c9d5dd;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Phone: the label column is too narrow for "The Charles Group" on one line,
   so names wrap to two rather than being cut off with an ellipsis. */
@media (max-width: 767px) {
	.resume-gantt-company {
		font-size: 11px;
		line-height: 1.15;
		white-space: normal;
	}
}

.resume-gantt-track {
	position: relative;
	height: 100%;
	/* Faint gridlines at every year behind the bars. 26 = the axis span. */
	background-image: linear-gradient(90deg, rgba(232, 238, 242, 0.05) 1px, transparent 1px);
	background-size: calc(100% / 26) 100%;
}

.resume-gantt-bar {
	position: absolute;
	top: 8px;
	bottom: 8px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgba(232, 238, 242, 0.08);
	cursor: pointer;
}

.resume-gantt-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--r-blue);
	transform-origin: left;
	transition: background-color 250ms ease, box-shadow 250ms ease;
}

.resume-gantt-bar:hover .resume-gantt-fill,
.resume-gantt-bar.is-active .resume-gantt-fill {
	background: var(--r-orange);
	box-shadow: 0 0 18px rgba(211, 84, 0, 0.6);
}

.resume-gantt-bar:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.resume-gantt-award {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #ffd166;
	font-size: 18px;
	text-shadow: 0 0 10px rgba(255, 209, 102, 0.8);
	pointer-events: none;
}

/* The "today" cursor. Spans the track area so its --p percentage is a
   percentage of the timeline, not of the whole chart. */
.resume-gantt-now {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--label);
	right: 0;
	pointer-events: none;
}

.resume-gantt-now-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--p, var(--now));
	width: 2px;
	background: var(--r-orange);
	box-shadow: 0 0 12px var(--r-orange);
}

/* Right-anchored, not left: the cursor finishes at 98% of the track, so a
   left-anchored label would hang off the edge of the chart. */
.resume-gantt-now-label {
	position: absolute;
	top: -26px;
	right: calc(100% - var(--p, var(--now)) + 8px);
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--r-orange);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

/* Role details. Unpinned (phone, reduced motion, no script) they are an
   ordinary list, newest first. Pinned, they stack in one grid cell and the
   script cross-fades between them as the cursor moves. */
.resume-roles {
	display: grid;
	gap: 20px;
	margin-top: 40px;
}

.resume.is-pinned .resume-roles {
	grid-template-areas: "role";
	margin-top: 18px;
}

.resume.is-pinned .resume-role {
	grid-area: role;
}

.resume-role {
	padding: 24px 28px;
	border: 1px solid rgba(232, 238, 242, 0.12);
	border-left: 4px solid var(--r-orange);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.04);
}

/* Pinned, the role's full text has to fit beside the chart in one screen, so
   the heading takes a narrow left column and the text runs beside it. */
.resume.is-pinned .resume-role {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 32px;
	padding: 20px 28px;
}

/* Unpinned (phones, and screens too short to pin), the roles are a long list
   below the chart; each card links back up to it. Pinned, the chart is always
   on screen, so the link has nothing to do. */
.resume-role-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--r-blue);
	text-decoration: none;
}

.resume-role-back svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.resume.is-pinned .resume-role-back {
	display: none;
}

/* The back link lands on the section's heading, just below the sticky header
   and progress bar, so "Career Roadmap" and the whole chart are in view. */
.resume-roadmap > .resume-inner {
	scroll-margin-top: calc(var(--r-pin-top) + 16px);
}

.resume-role-dates {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--r-orange);
}

.resume-role-company {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
}

.resume-role-title {
	margin: 6px 0 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--r-blue);
}

.resume-role-body {
	font-size: 15px;
	line-height: 1.6;
	color: #c9d5dd;
}

.resume-role-body p {
	margin: 0 0 10px;
}

.resume-role-body ul {
	margin: 0;
	padding-left: 18px;
}

.resume-role-body li + li {
	margin-top: 4px;
}

.resume-role-highlight {
	padding: 10px 14px;
	border-radius: 6px;
	background: rgba(255, 209, 102, 0.1);
}

.resume-role-highlight > span {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffd166;
}

/* ==========================================================================
   5. Retrospective
   ========================================================================== */

/* A whiteboard: dotted grid on pale gray. */
.resume-retro {
	background-color: #eef0f1;
	background-image: radial-gradient(#cfd8de 1px, transparent 1px);
	background-size: 20px 20px;
}

.resume-retro-board {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 32px;
	align-items: start;
}

@media (max-width: 900px) {
	.resume-retro-board {
		grid-template-columns: 1fr;
	}
}

.resume-notes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.resume-note {
	--note: #fff3a8;
	--tilt: -2deg;
	position: relative;
	display: block;
	background: var(--note);
	box-shadow: 0 10px 20px -8px rgba(30, 41, 51, 0.3);
	transform: rotate(var(--tilt));
	transition: transform 250ms ease, box-shadow 250ms ease;
}

/* Four sticky-note colors and tilts, cycled so neighbors never match. */
.resume-note--1 { --note: #cfe8f7; --tilt: 1.5deg; }
.resume-note--2 { --note: #ffd9c7; --tilt: -1deg; }
.resume-note--3 { --note: #d7f0dc; --tilt: 2deg; }

/* The pushpin. */
.resume-note::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--r-orange);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
	z-index: 1;
}

.resume-note:hover,
.resume-note:focus-within {
	transform: rotate(0) scale(1.04);
	box-shadow: 0 20px 30px -10px rgba(30, 41, 51, 0.35);
	z-index: 2;
}

.resume-note-button {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 210px;
	padding: 26px 20px 20px;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--r-ink);
	cursor: pointer;
}

.resume-note-quote {
	flex: 1;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
}

.resume-note-name {
	font-size: 14px;
	font-weight: 800;
}

.resume-note-role {
	font-size: 12px;
	color: #555;
}

.resume-note--action {
	--note: #fff;
	--tilt: 1deg;
	padding: 26px 20px 20px;
	border: 2px dashed var(--r-orange);
	font-weight: 700;
	color: var(--r-orange);
	text-decoration: none;
}

.resume-rec-dialog {
	max-width: 640px;
	width: calc(100% - 40px);
	max-height: 85vh;
	padding: 36px;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
	color: var(--r-ink);
	line-height: 1.7;
}

.resume-rec-dialog::backdrop {
	background: rgba(30, 41, 51, 0.6);
	backdrop-filter: blur(3px);
}

.resume-rec-dialog h3 {
	margin: 0;
	font-size: 24px;
}

.resume-rec-role {
	margin: 0 0 16px;
	font-weight: 600;
	color: var(--r-blue);
}

/* ==========================================================================
   6. Sign-off
   ========================================================================== */

.resume-signoff {
	background: var(--r-blue);
}

.resume-signoff-doc {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
}

@media (max-width: 767px) {
	.resume-signoff-doc {
		padding: 32px 22px;
	}
}

.resume-checklist {
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

.resume-checklist li {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--r-line);
	font-weight: 600;
}

.resume-checklist li span {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #1d7a45;
	color: #fff;
	font-size: 12px;
}

.resume-signature {
	max-width: 320px;
	margin: 32px 0;
	border-bottom: 1.5px solid var(--r-ink);
}

.resume-signature svg {
	display: block;
	width: 100%;
	height: auto;
}

.resume-signature path {
	fill: none;
	stroke: var(--r-blue);
	stroke-width: 2.5;
	stroke-linecap: round;
}

.resume-signature span {
	display: block;
	padding-top: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--r-muted);
	transform: translateY(100%);
}

.resume-signoff-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* ==========================================================================
   Plain version
   ========================================================================== */

.resume-plain {
	padding: 64px 0 96px;
	line-height: 1.65;
}

.resume-plain .resume-inner {
	max-width: 780px;
}

.resume-plain-actions {
	margin-top: 48px;
}

.resume-plain h1 {
	margin: 0;
	font-size: 40px;
}

.resume-plain h2 {
	margin: 40px 0 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--r-line);
	font-size: 22px;
}

.resume-plain h3 {
	margin: 24px 0 6px;
	font-size: 17px;
}

.resume-plain h3 span {
	font-weight: 500;
	color: var(--r-muted);
}

.resume-plain-title {
	margin: 4px 0;
	font-weight: 600;
	color: var(--r-blue);
}

.resume-plain blockquote {
	margin: 0 0 16px;
	padding-left: 16px;
	border-left: 3px solid var(--r-line);
}

.resume-plain blockquote p {
	margin: 0;
}

.resume-plain cite {
	font-size: 14px;
	font-style: normal;
	color: var(--r-muted);
}

/* ==========================================================================
   Print — always the plain version, without the site chrome
   ========================================================================== */

@media print {
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.resume-progress,
	.resume-story,
	.resume-plain-actions {
		display: none !important;
	}

	/* Printing from the interactive view should still produce a resume. */
	.resume-plain[hidden] {
		display: block !important;
	}

	.resume-plain {
		padding: 0;
		font-size: 11pt;
	}
}