/*
Theme Name: Maxwell Saldeen
Theme URI: https://www.maxwellpartners.us/
Author: Maxwell Partners
Description: Personal site theme for Bob Saldeen and Maxwell Partners. A lightweight block theme: no page builder required.
Version: 1.0.2
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maxwell-saldeen
*/

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

:root {
	--ms-mist: var(--wp--preset--color--mist, #ECEEF1);
	--ms-paper: var(--wp--preset--color--paper, #F7F8FA);
	--ms-ink: var(--wp--preset--color--ink, #1F2433);
	--ms-ink-deep: #171B27;
	--ms-slate: var(--wp--preset--color--slate, #555D6E);
	--ms-plum: var(--wp--preset--color--plum, #911A63);
	--ms-plum-deep: var(--wp--preset--color--plum-deep, #5E0F40);
	--ms-plum-tint: #E9D6E1;
	--ms-rule: var(--wp--preset--color--rule, #C9CDD6);
	--ms-display: var(--wp--preset--font-family--display, "Bricolage Grotesque", system-ui, sans-serif);
	--ms-section: clamp(4rem, 9vw, 7.5rem);
	--ms-radius: 20px;
}

html { scroll-behavior: smooth; color-scheme: only light; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-optical-sizing: auto;
}

.wp-site-blocks > *,
.ms-main > * { margin-block: 0; }

h1, h2, h3 { font-optical-sizing: auto; text-wrap: balance; }
p { text-wrap: pretty; }

a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 3px solid var(--ms-plum);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: var(--ms-plum-tint); color: var(--ms-ink); }

.ms-muted { color: var(--ms-slate); }

.ms-textlink { font-family: var(--ms-display); font-weight: 560; font-size: 1rem; }
.ms-textlink a { color: var(--ms-ink); text-decoration-color: var(--ms-plum); text-decoration-thickness: 2px; }
.ms-textlink a:hover { color: var(--ms-plum); }

/* ---------- Header ---------- */

.ms-header {
	position: relative;
	z-index: 20;
	view-transition-name: ms-header;
}
.ms-header__bar { padding-block: clamp(1rem, 2.5vw, 1.75rem); }

.ms-logo img { display: block; height: auto; }

.ms-nav { font-family: var(--ms-display); font-size: 1.0625rem; font-weight: 500; }
.ms-nav .wp-block-navigation-item__content { color: var(--ms-ink); text-decoration: none; padding-block: 0.35rem; }
.ms-nav .wp-block-navigation-item__content:hover { color: var(--ms-plum); }
.ms-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--ms-plum);
	box-shadow: inset 0 -2px 0 var(--ms-plum);
}
.ms-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ms-mist);
	color: var(--ms-ink);
	padding: 2rem;
}
.ms-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 2rem; }

/* ---------- Buttons ---------- */

.wp-block-button__link { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--ms-ink);
	border: 1.5px solid var(--ms-ink);
	padding: calc(0.8rem - 1.5px) calc(1.4rem - 1.5px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--ms-ink);
	color: var(--ms-paper);
}
.ms-button-light > .wp-block-button__link { background: var(--ms-paper); color: var(--ms-ink); }
.ms-button-light > .wp-block-button__link:hover { background: var(--ms-plum-tint); color: var(--ms-ink); }

/* ---------- Portrait ---------- */

.ms-portrait { margin: 0; position: relative; isolation: isolate; background: var(--ms-mist); }
.ms-portrait img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
	view-transition-name: bob-portrait;
}

/* ---------- Home: hero ---------- */

.ms-hero { padding-top: clamp(1.5rem, 4vw, 3rem); overflow: clip; }
.ms-hero__cols { margin-bottom: 0; align-items: stretch !important; }
.ms-hero__text { padding-bottom: clamp(2rem, 6vw, 6rem); }

.ms-hero__name {
	font-size: clamp(3.75rem, 10.5vw, 9.25rem);
	font-weight: 650;
	line-height: 0.88;
	letter-spacing: -0.05em;
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) -0.04em;
}
.ms-hero__lede {
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	line-height: 1.35;
	max-width: 24em;
	margin: 0;
}
.ms-hero__body {
	color: var(--ms-slate);
	max-width: 34em;
	margin-top: 1.25rem;
}
.ms-hero__body strong { color: var(--ms-ink); font-weight: 600; }
.ms-hero__actions { margin-top: 2.25rem; gap: 0.75rem; }

.ms-hero__art { display: flex; align-items: flex-end; }
.ms-portrait--hero { width: 100%; max-width: 520px; margin-inline: auto 0; margin-bottom: -1px; }

/* One orchestrated moment: the portrait is "pulled from the plate" on load. */
@media (prefers-reduced-motion: no-preference) {
	.ms-portrait--hero img {
		animation: ms-print 1.6s cubic-bezier(0.22, 0.7, 0.2, 1) 0.15s both;
		-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 55%);
		mask-image: linear-gradient(to bottom, #000 45%, transparent 55%);
		-webkit-mask-size: 100% 220%;
		mask-size: 100% 220%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
}
@keyframes ms-print {
	from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
	to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* ---------- Home: statement ---------- */

.ms-statement {
	background: var(--ms-paper);
	padding-block: var(--ms-section);
	border-top: 1px solid var(--ms-rule);
}
.ms-statement__big {
	font-size: clamp(1.75rem, 3.6vw, 3rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	max-width: 21em;
	margin: 0;
}
.ms-statement__small {
	color: var(--ms-slate);
	max-width: 36em;
	margin: clamp(2rem, 4vw, 3rem) 0 0 auto;
}

/* ---------- Home: ledger of companies ---------- */

.ms-ledger { padding-block: var(--ms-section); }
.ms-section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); gap: 1rem 2rem; }
.ms-section-head h2, .ms-section-head p { margin: 0; }

.ms-ledger__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ms-rule); }
.ms-ledger__row {
	display: grid;
	grid-template-columns: minmax(12rem, 1.1fr) 2fr minmax(9rem, auto);
	gap: 0.5rem 2.5rem;
	align-items: baseline;
	padding-block: 1.5rem;
	border-top: 1px solid var(--ms-rule);
}
.ms-ledger__name {
	font-family: var(--ms-display);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 580;
	letter-spacing: -0.02em;
	line-height: 1.15;
}
.ms-ledger__what { color: var(--ms-slate); max-width: 34em; }
.ms-ledger__mark {
	font-family: var(--ms-display);
	font-size: 0.9375rem;
	font-weight: 560;
	color: var(--ms-plum);
	text-align: right;
	white-space: nowrap;
}

/* ---------- Home: working with Bob ---------- */

.ms-work { background: var(--ms-paper); padding-block: var(--ms-section); border-top: 1px solid var(--ms-rule); }
.ms-work .wp-block-columns { margin-bottom: 0; }
.ms-offer { border-top: 1px solid var(--ms-rule); padding-top: 1.5rem; margin-bottom: 2rem; }
.ms-offer h3 { margin: 0 0 0.5rem; }
.ms-offer p { margin: 0; }

/* ---------- CTA band ---------- */

.ms-cta { background: var(--ms-ink); color: var(--ms-paper); padding-block: clamp(3rem, 6vw, 4.5rem); }
.ms-cta__inner { gap: 1.5rem 3rem; }
.ms-cta__text {
	font-family: var(--ms-display);
	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
	font-weight: 520;
	letter-spacing: -0.02em;
	line-height: 1.15;
	max-width: 22em;
	margin: 0;
}

/* ---------- Footer ---------- */

.ms-footer {
	background: var(--ms-ink-deep);
	color: #C3C8D3;
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	font-size: 1rem;
}
.ms-footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.35); }
.ms-footer a:hover { color: #fff; text-decoration-color: var(--ms-plum-tint); }
.ms-footer p { margin: 0 0 0.35rem; }
.ms-footer__grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)) !important; gap: 2rem 3rem; }
.ms-footer__name { font-family: var(--ms-display); font-size: 1.375rem; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.ms-footer__label { font-family: var(--ms-display); font-size: 0.9375rem; font-weight: 560; color: #8E95A5; }
.ms-footer__legal {
	margin-top: clamp(2.5rem, 5vw, 3.5rem) !important;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.875rem;
	color: #8E95A5;
}

/* ---------- Inner pages ---------- */

.ms-pagehead { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
.ms-pagehead h1 { margin: 0; }
.ms-pagehead .wp-block-columns { margin-bottom: 0; }
.ms-lede {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.45;
	color: var(--ms-slate);
	max-width: 34em;
	margin-top: 1.25rem;
}
.ms-pagehead--portrait { padding-bottom: 0; }
.ms-pagehead--portrait .wp-block-column:last-child { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.ms-portrait--small { max-width: 240px; }

/* About */
.ms-story { background: var(--ms-paper); padding-block: var(--ms-section); border-top: 1px solid var(--ms-rule); }
.ms-story .wp-block-columns { margin-bottom: 0; align-items: flex-start; }
.ms-story__main > * { max-width: 36em; }
.ms-story__main h2 { margin: 3.25rem 0 0.75rem; font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.ms-story__main h2:first-child { margin-top: 0; }
.ms-story__main p { margin: 0 0 1rem; }
.ms-story__aside { position: sticky; top: 2rem; }

.ms-facts {
	background: var(--ms-mist);
	border-radius: var(--ms-radius);
	padding: clamp(1.5rem, 3vw, 2rem);
}
.ms-facts__title { font-family: var(--ms-display); font-weight: 600; font-size: 1.125rem; margin: 0 0 0.75rem; }
.ms-facts dl { margin: 0; }
.ms-facts dl > div { padding-block: 0.85rem; border-top: 1px solid var(--ms-rule); }
.ms-facts dt { font-family: var(--ms-display); font-size: 0.875rem; font-weight: 560; color: var(--ms-plum); }
.ms-facts dd { margin: 0.15rem 0 0; font-size: 1.0625rem; line-height: 1.45; }

/* Advisory */
.ms-offers { padding-bottom: var(--ms-section); }
.ms-offers .wp-block-columns { margin-bottom: 0; }
.ms-offer--panel {
	background: var(--ms-paper);
	border: 0;
	border-radius: var(--ms-radius);
	padding: clamp(1.75rem, 3.5vw, 2.75rem) !important;
	margin: 0;
}
.ms-offer--panel h2 { margin: 0 0 0.75rem; }
.ms-offer--panel p { margin: 0 0 1rem; }
.ms-offer--panel p:last-child { margin-bottom: 0; }

.ms-why { background: var(--ms-paper); padding-block: var(--ms-section); border-top: 1px solid var(--ms-rule); }
.ms-why .wp-block-columns { margin-bottom: 0; }
.ms-why h2 { margin: 0; }
.ms-why p { margin: 0 0 1.25rem; max-width: 36em; }

.ms-steps { padding-block: var(--ms-section); }
.ms-steps h2 { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.ms-steps__list {
	list-style: none;
	counter-reset: step;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
}
.ms-steps__list li { counter-increment: step; border-top: 2px solid var(--ms-ink); padding-top: 1.25rem; }
.ms-steps__list li::before {
	content: counter(step);
	display: block;
	font-family: var(--ms-display);
	font-size: 3rem;
	font-weight: 300;
	line-height: 1;
	color: var(--ms-plum);
	margin-bottom: 1rem;
}
.ms-steps__list h3 { margin: 0 0 0.5rem; font-size: 1.375rem; }
.ms-steps__list p { margin: 0; color: var(--ms-slate); }

/* Contact */
.ms-contact { padding-block: clamp(2.5rem, 6vw, 5rem) var(--ms-section); }
.ms-contact .wp-block-columns { margin-bottom: 0; }
.ms-contact h1 { margin: 0; }
.ms-email {
	font-family: var(--ms-display);
	font-size: clamp(1.75rem, 4.6vw, 3.25rem);
	font-weight: 560;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 1.5rem 0 2rem;
	overflow-wrap: anywhere;
}
.ms-email a { text-decoration-thickness: 3px; text-underline-offset: 0.14em; }
.ms-email a:hover { text-decoration-thickness: 5px; }
.ms-contact__art .ms-portrait { max-width: 320px; margin-inline: auto; }
.ms-contact p:not(.ms-lede):not(.ms-email) { max-width: 34em; }

/* Generic pages and posts */
.ms-prose { padding-bottom: var(--ms-section); }

/* ---------- Page transitions (supported browsers) ---------- */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: 0.35s; }
	::view-transition-group(bob-portrait) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.22, 0.7, 0.2, 1); }
}
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Small screens ---------- */

@media (max-width: 781px) {
	.ms-hero__cols { flex-direction: column-reverse; }
	.ms-hero__art { justify-content: center; }
	.ms-portrait--hero { max-width: 300px; margin: 0 auto; }
	.ms-hero__text { padding-bottom: 3rem; }
	.ms-hero__name { margin-top: 1rem; }

	.ms-ledger__row { grid-template-columns: 1fr auto; }
	.ms-ledger__what { grid-column: 1 / -1; grid-row: 2; }
	.ms-ledger__mark { grid-row: 1; grid-column: 2; }

	.ms-statement__small { margin-left: 0; }
	.ms-story__aside { position: static; }
	.ms-pagehead--portrait .ms-pagehead__art { flex-basis: auto !important; }
	.ms-portrait--small { max-width: 180px; }
	.ms-contact__art { order: -1; }
	.ms-contact__art .ms-portrait { max-width: 200px; margin-inline: 0; }
}

/* Keep measured text left-aligned inside constrained (centered) layouts. */
.is-layout-constrained > .ms-lede,
.is-layout-constrained > .ms-statement__big { margin-left: max(0px, calc((100% - 1180px) / 2)) !important; margin-right: auto !important; }
.is-layout-constrained > .ms-statement__small { margin-left: auto !important; margin-right: max(0px, calc((100% - 1180px) / 2)) !important; }
@media (max-width: 781px) {
	.is-layout-constrained > .ms-statement__small { margin-left: 0 !important; }
}