/*============================================================
		 PAGE SHELL
	============================================================ */
	.resume-page {
		max-width: var(--cs-max);
		margin: 0 auto;
		padding: clamp(32px, 5vw, 72px) var(--cs-pad) var(--cs-xl);
	}

	/*============================================================
		 HEADER — name + contact
	============================================================ */
	.resume-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--cs-lg);
		padding-bottom: var(--cs-lg);
		border-bottom: 2px solid var(--cs-black);
	}

	.resume-header-left {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.resume-name {
		font-family: 'Sora', sans-serif;
		font-size: clamp(2.6rem, 5.5vw, 4.2rem);
		font-weight: 500;
		line-height: 1.05;
		color: var(--cs-black);
		letter-spacing: -0.02em;
	}

	.resume-title {
		font-family: 'Sora', sans-serif;
		font-size: clamp(1rem, 2vw, 1.333rem);
		font-weight: 400;
		color: var(--cs-accent);
		letter-spacing: 0.02em;
	}

	.resume-header-right {
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: flex-end;
		flex-shrink: 0;
		padding-top: 6px;
	}

	.resume-contact-item {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
		font-weight: 400;
		color: var(--cs-black);
		line-height: 1.5;
	}

	.resume-contact-item a {
		color: var(--cs-accent);
		text-decoration: none !important;
		font-weight: 500;
	}
	.resume-contact-item a:hover {
		text-decoration: underline !important;
	}

	/*============================================================
		 SECTION BASE
	============================================================ */
	.resume-section {
		display: flex;
		flex-direction: column;
		gap: var(--cs-md);
		padding: var(--cs-lg) 0 var(--cs-xl) 0;
		border-bottom: 1px solid var(--cs-black);
	}

	.resume-section:last-child {
		border-bottom: none;
		padding-bottom: var(--cs-lg);
	}

	/*============================================================
		 SECTION LABEL	(reuse cs-label pattern)
	============================================================ */
	.cs-label {
		display: block;
		font-family: 'Sora', sans-serif;
		font-size: var(--cs-p);
		font-weight: 600;
		color: var(--cs-accent);
		text-transform: uppercase;
	}

	/*============================================================
		 SUMMARY
	============================================================ */
	.summary-lead {
		font-family: 'Sora', sans-serif;
		font-size: clamp(1.2rem, 2.4vw, 1.55rem);
		font-weight: 500;
		line-height: 145%;
		color: var(--cs-black);
	}

	.summary-bullets {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 4px 0 0;
	}

	.summary-bullets li {
		font-family: 'Sora', sans-serif;
		font-size: var(--cs-h6);
		font-weight: 400;
		line-height: var(--cs-h6-lh);
		color: var(--cs-black);
		padding-left: 20px;
		position: relative;
	}

	.summary-bullets li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 12px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--cs-accent);
		flex-shrink: 0;
	}

	/*============================================================
		 SKILLS — two-column grid
	============================================================ */
	.skills-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--cs-md) var(--cs-lg);
	}

	.skills-col {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.skills-text {
		font-family: 'Sora', sans-serif;
		font-size: 1rem;
		font-weight: 400;
		line-height: 160%;
		color: var(--cs-black);
	}

	/*============================================================
		 EXPERIENCE — job entry
	============================================================ */
	.exp-entries {
		display: flex;
		flex-direction: column;
		gap: var(--cs-lg);
	}

	.exp-entry {
		display: flex;
		flex-direction: column;
		gap: var(--cs-sm);
	}

	.exp-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--cs-xxs);
		flex-wrap: wrap;
	}

	.exp-role {
		font-family: 'Sora', sans-serif;
		font-size: clamp(1.1rem, 2vw, 1.35rem);
		font-weight: 600;
		line-height: 130%;
		color: var(--cs-black);
	}

	.exp-meta {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.exp-date {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
		font-weight: 600;
		color: var(--cs-accent);
		letter-spacing: 0.04em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.exp-company {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
	}

	.exp-intro {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 160%;
		color: var(--cs-black);
		font-style: italic;
	}

	.exp-bullets {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: var(--cs-xxs) 0 0;
	}

	.exp-bullets li {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 155%;
		color: var(--cs-black);
		padding-left: 20px;
		position: relative;
	}

	.exp-bullets li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 10px;
		width: 5px;
		height: 5px;
		background: var(--cs-black);
		flex-shrink: 0;
	}

	/*============================================================
		 ADDITIONAL EXPERIENCE — compact list
	============================================================ */
	.addl-entries {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.addl-entry {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--cs-md);
		flex-wrap: wrap;
	}

	.addl-role {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
		font-weight: 500;
		color: var(--cs-black);
		line-height: 140%;
	}

	.addl-detail {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
		font-weight: 400;
		text-align: right;
		white-space: nowrap;
	}

	.addl-divider {
		width: 100%;
		height: 1px;
		background: rgba(210, 186, 228, 0.6);
		margin: 2px 0;
	}

	/*============================================================
		 EDUCATION
	============================================================ */
	.edu-entries {
		display: flex;
		flex-direction: column;
		gap: var(--cs-sm);
	}

	.edu-entry {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.edu-degree {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
		font-weight: 500;
		line-height: 140%;
		color: var(--cs-black);
	}

	.edu-school {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
		font-weight: 400;
		color: var(--cs-grey_md);
	}

	/*============================================================
		 FOOTER
	============================================================ */
	.resume-footer {
		background-color: var(--cs-nav-bg);
		padding: 28px var(--cs-pad);
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--cs-sm);
		margin-top: var(--cs-xl);
	}

	.resume-footer-copy {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
		color: rgba(255,255,255,0.5);
	}

	.resume-footer-links {
		display: flex;
		gap: 28px;
		list-style: none;
	}

	.resume-footer-links a {
		font-family: 'Sora', sans-serif;
		font-size: 16px;
		font-weight: 400;
		color: rgba(255,255,255,0.7);
		text-decoration: none !important;
	}

	.resume-footer-links a:hover {
		color: #fff;
	}

	/*============================================================
		 PRINT BUTTON (screen only)
	============================================================ */
	.print-bar {
		background: var(--cs-results);
		padding: 14px var(--cs-pad);
		display: flex;
		justify-content: flex-end;
		max-width: var(--cs-max);
		margin: 0 auto;
	}

	.btn-print {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding:.35em.75em.35em;
		background: var(--cs-accent);
		background: #07007A;
		color: #fff;
		border: none;
		border-radius: 0 0 var(--cs-xs) var(--cs-xs);
		font-family: 'Sora', sans-serif;
		font-size: 1rem;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.2s ease;
	}

	.btn-print:hover { background: var(--cs-nav-bg);}

	/*============================================================
		 BREAKPOINTS	—	Tablet ≤ 860px
	============================================================ */
	@media (max-width: 860px) {
		:root {
			--cs-xl:	64px;
			--cs-lg:	32px;
		}

		.resume-header {
			flex-direction: column;
			gap: var(--cs-md);
		}

		.resume-header-right {
			align-items: flex-start;
		}

		.skills-grid {
			grid-template-columns: 1fr;
			gap: var(--cs-md);
		}

		.exp-header {
			flex-direction: column;
			gap: 4px;
		}

		.exp-meta {
			align-items: flex-start;
		}

		.exp-company {
			text-align: left;
		}

		.addl-entry {
			flex-direction: column;
			gap: 2px;
		}

		.addl-detail {
			text-align: left;
		}
	}

	/*============================================================
		 BREAKPOINTS	—	Mobile ≤ 560px
	============================================================ */
	@media (max-width: 560px) {
		:root {
			--cs-xl: 48px;
			--cs-lg: 24px;
			--cs-md: 16px;
			--cs-h6: 15px;
		}

		.resume-name {
			font-size: 2.2rem;
		}

		.summary-lead {
			font-size: 1.1rem;
		}

		.resume-footer {
			flex-direction: column;
			align-items: flex-start;
		}

		.resume-footer-links {
			flex-wrap: wrap;
			gap: 16px;
		}

		.print-bar {
			justify-content: center;
		}
	}

	/*============================================================
		 PRINT STYLES
	============================================================ */
	@media print {
		html { background: #fff;}
		.print-bar { display: none;}
		.resume-footer { display: none;}
		.resume-page {
			padding: 24px 32px 40px;
			max-width: 100%;
		}
		:root {
			--cs-lg: 28px;
			--cs-xl: 40px;
			--cs-md: 16px;
		}
		.resume-section { page-break-inside: avoid;}
	}