/* ==========================================================================
   Tony Romano — theme.css
   Palette and type scale read from the live site's own CSS, so this matches
   the LinkedIn page assets exactly. Do not "improve" these hexes.
   ========================================================================== */

/* --------------------------------------------------------------- webfonts */

@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/newsreader-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/newsreader-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}

/* ----------------------------------------------------------------- tokens */

:root {
	/* Brand — verified against the live site and the LinkedIn assets. */
	--ground: #fbf9f6;
	--ink: #14161b;
	--maroon: #9a1b2f;
	--maroon-dark: #7d1626;
	--cream: #f3efe9;
	--grey: #5a606c;
	--grey-light: #8a909c;

	--rule: rgba(20, 22, 27, 0.08);
	--rule-strong: rgba(20, 22, 27, 0.14);
	--maroon-tint: rgba(154, 27, 47, 0.08);

	/* Type */
	--serif: 'Newsreader', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Fluid scale — clamp() so nothing needs a media query to feel right. */
	--step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
	--step-0: clamp(1rem, 0.96rem + 0.19vw, 1.11rem);
	--step-1: clamp(1.2rem, 1.13rem + 0.36vw, 1.44rem);
	--step-2: clamp(1.5rem, 1.36rem + 0.68vw, 1.95rem);
	--step-3: clamp(1.9rem, 1.63rem + 1.34vw, 2.8rem);
	--step-4: clamp(2.4rem, 1.87rem + 2.63vw, 4.1rem);
	--step-5: clamp(3rem, 1.8rem + 6vw, 5.75rem);

	/* Space */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2.25rem;
	--sp-5: 3.5rem;
	--sp-6: 5rem;
	--sp-7: 7rem;

	--measure: 34rem;
	--wrap: 74rem;
	--gutter: clamp(1.25rem, 4vw, 3.5rem);

	--radius: 2px;
	--transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------ reset */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--step-0);
	line-height: 1.62;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
iframe { max-width: 100%; }

img { height: auto; display: block; }

/* -------------------------------------------------------------- structure */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

.section { padding-block: var(--sp-6); }
.section + .section { border-top: 1px solid var(--rule); }
.section--tight { padding-block: var(--sp-5); }
.section--cream { background: var(--cream); }

/* ----------------------------------------------------------------- typography */

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.028em;
	margin: 0 0 var(--sp-3);
	text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.18; }
h4 { font-size: var(--step-1); line-height: 1.28; }

p { margin: 0 0 var(--sp-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.prose { max-width: var(--measure); }
.prose p,
.prose li { color: var(--grey); }
.prose > * + h2 { margin-top: var(--sp-5); }
.prose > * + h3 { margin-top: var(--sp-4); }
.prose a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--maroon);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition);
}
.prose a:hover { color: var(--maroon); }

.prose blockquote {
	margin: var(--sp-4) 0;
	padding-left: var(--sp-3);
	border-left: 2px solid var(--maroon);
	font-family: var(--serif);
	font-size: var(--step-2);
	line-height: 1.28;
	color: var(--ink);
}
.prose blockquote p { color: inherit; }

.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 var(--sp-3); }
.prose li { margin-bottom: 0.4rem; }

.prose hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: var(--sp-5) 0;
}

.eyebrow {
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--maroon);
	margin: 0 0 var(--sp-2);
	line-height: 1.4;
}

.lede {
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--grey);
	max-width: 32rem;
}

.meta {
	font-size: var(--step--1);
	color: var(--grey-light);
	letter-spacing: 0.01em;
}

/* -------------------------------------------------------------- a11y */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--sp-2);
	z-index: 999;
	background: var(--ink);
	color: var(--ground);
	padding: 0.75rem 1.15rem;
	border-radius: var(--radius);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}
.skip-link:focus { top: var(--sp-2); }

:focus-visible {
	outline: 2px solid var(--maroon);
	outline-offset: 3px;
	border-radius: 1px;
}

/* ----------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--sans);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: -0.006em;
	line-height: 1;
	padding: 0.95rem 1.65rem;
	border-radius: var(--radius);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition), color var(--transition),
		border-color var(--transition), transform var(--transition);
}

.btn--primary {
	background: var(--maroon);
	color: #fff;
}
.btn--primary:hover { background: var(--maroon-dark); }

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn:active { transform: translateY(1px); }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--sp-4);
}

/* Inline text link with a maroon arrow. */
.link-arrow {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	color: var(--ink);
}
.link-arrow::after {
	content: '\2192';
	color: var(--maroon);
	transition: transform var(--transition);
}
.link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------ header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--ground) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--rule);
}

@supports not (backdrop-filter: blur(1px)) {
	.site-header { background: var(--ground); }
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: 78px;
}

.brand {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.32rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--ink);
	white-space: nowrap;
}
.brand .dot { color: var(--maroon); }

.nav ul {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav a {
	position: relative;
	display: inline-block;
	font-size: 0.94rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--ink);
	padding: 0.35rem 0;
	transition: color var(--transition);
}

.nav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--maroon);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition);
}
.nav a:hover::after,
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after,
.nav .current-menu-ancestor > a::after { transform: scaleX(1); }

/* Mobile navigation */
.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	cursor: pointer;
	color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }

@media (max-width: 46rem) {
	.nav-toggle { display: inline-flex; }
	.nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--ground);
		border-bottom: 1px solid var(--rule);
		padding: var(--sp-2) var(--gutter) var(--sp-3);
	}
	.nav.is-open { display: block; }
	.nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
	.nav li { width: 100%; border-top: 1px solid var(--rule); }
	.nav li:first-child { border-top: 0; }
	.nav a { display: block; width: 100%; padding: 0.9rem 0; font-size: 1.02rem; }
	.nav a::after { display: none; }
}

/* -------------------------------------------------------------------- hero */

.hero { padding-block: clamp(3.5rem, 9vw, 7.5rem); }

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.hero h1 { margin-bottom: var(--sp-3); font-size: var(--step-5); }

.hero__figure { margin: 0; }
.hero__figure img {
	width: 100%;
	border-radius: var(--radius);
	background: var(--cream);
}
.hero__figure figcaption {
	margin-top: 0.7rem;
	font-size: var(--step--1);
	color: var(--grey-light);
}

@media (max-width: 52rem) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__figure { order: -1; max-width: 22rem; }
}

/* ------------------------------------------------------------------- cards */

.grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--sp-3) 0 0;
	border-top: 2px solid var(--ink);
}
.card h3 { margin: 0; font-size: var(--step-1); }
.card p { color: var(--grey); font-size: 0.97rem; margin: 0; }

/* Numbered facts — the "40 years / 325 offices" pattern. */
.facts {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.fact__num {
	font-family: var(--serif);
	font-size: var(--step-3);
	font-weight: 500;
	color: var(--maroon);
	line-height: 1;
	display: block;
	margin-bottom: 0.4rem;
}
.fact__label {
	font-size: 0.95rem;
	color: var(--grey);
	line-height: 1.45;
}

/* Episode list */
.episode {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3);
	align-items: start;
	padding-block: var(--sp-4);
	border-top: 1px solid var(--rule);
}
.episode:last-child { border-bottom: 1px solid var(--rule); }

.episode__num {
	font-family: var(--serif);
	font-size: var(--step-2);
	color: var(--maroon);
	line-height: 1;
	min-width: 2.4rem;
}
.episode__title { margin: 0 0 0.5rem; font-size: var(--step-2); }
.episode__title a { text-decoration: none; }
.episode__title a:hover { color: var(--maroon); }
.episode__excerpt { color: var(--grey); margin: 0 0 0.85rem; max-width: 40rem; }

@media (max-width: 34rem) {
	.episode { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* Media embeds keep their aspect ratio without wrapper divs. */
.embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--cream);
	border-radius: var(--radius);
	overflow: hidden;
	margin-block: var(--sp-4);
}
.embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.embed--audio { aspect-ratio: auto; height: 152px; }

/* --------------------------------------------------------------- callout */

.callout {
	background: var(--ink);
	color: var(--ground);
	padding: var(--sp-5) var(--gutter);
	border-radius: var(--radius);
	position: relative;
	overflow: hidden;
}
.callout::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--maroon);
}
.callout h2 { color: var(--ground); }
.callout p { color: rgba(251, 249, 246, 0.72); }
.callout .btn--ghost { color: var(--ground); border-color: rgba(251, 249, 246, 0.3); }
.callout .btn--ghost:hover { border-color: var(--ground); }

/* ------------------------------------------------------------------ forms */

input[type='text'],
input[type='email'],
input[type='search'],
input[type='tel'],
textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	padding: 0.8rem 0.95rem;
	transition: border-color var(--transition);
}
input:focus,
textarea:focus { border-color: var(--maroon); }

label {
	display: block;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 0.4rem;
}

.field { margin-bottom: var(--sp-3); }

/* ------------------------------------------------------------------ footer */

.site-footer {
	border-top: 1px solid var(--rule);
	padding-block: var(--sp-5) var(--sp-4);
	margin-top: var(--sp-6);
}

.site-footer__grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	margin-bottom: var(--sp-5);
}

.site-footer h2 {
	font-family: var(--sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--grey-light);
	margin-bottom: var(--sp-2);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a {
	font-size: 0.96rem;
	text-decoration: none;
	color: var(--ink);
	transition: color var(--transition);
}
.site-footer a:hover { color: var(--maroon); }

.colophon {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-2);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--rule);
	font-size: var(--step--1);
	color: var(--grey-light);
}

/* ------------------------------------------------------- WP block defaults */

.alignwide { max-width: min(100%, 62rem); margin-inline: auto; }
.alignfull { max-width: none; }
.aligncenter { margin-inline: auto; }
.wp-caption-text,
figcaption {
	font-size: var(--step--1);
	color: var(--grey-light);
	margin-top: 0.6rem;
}
.sticky, .gallery-caption, .bypostauthor { /* required by WP theme check */ }

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

@media print {
	.site-header, .site-footer, .btn-row, .nav-toggle { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* ---------------------------------------------------------------------------
   Hero variant: credential panel instead of a portrait.
   Append to assets/css/theme.css.
   --------------------------------------------------------------------------- */

.hero__panel {
	border-left: 2px solid var(--maroon);
	padding-left: clamp(1.25rem, 3vw, 2.25rem);
}

.hero__facts {
	margin: 0;
	display: grid;
	gap: var(--sp-3);
}

.hero__fact {
	display: grid;
	grid-template-columns: minmax(3.6rem, auto) 1fr;
	gap: var(--sp-2);
	align-items: baseline;
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--rule);
}
.hero__fact:last-child { border-bottom: 0; padding-bottom: 0; }

.hero__fact-num {
	font-family: var(--serif);
	font-weight: 500;
	font-size: var(--step-2);
	line-height: 1;
	color: var(--maroon);
	margin: 0;
	font-variant-numeric: lining-nums tabular-nums;
}

.hero__fact-label {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--grey);
}

/* On narrow screens the panel sits under the headline, not above it. */
@media (max-width: 52rem) {
	.hero__panel { order: 1; margin-top: var(--sp-4); }
}