html { scroll-behavior: smooth; }

.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

.wp-block-button__link { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.wp-block-button__link:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }

.hero {
	min-height: 92vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background:
		linear-gradient(rgba(109, 46, 70, 0.65), rgba(109, 46, 70, 0.65)),
		url('../../../uploads/2026/08/hero-brisbane.jpg') center / cover no-repeat;
}

.about-columns { align-items: center; }
.about-headshot img { display: block; width: 100%; object-fit: cover; border-radius: 8px; }

.hero-title { font-size: clamp(2.75rem, 7vw, 5rem); font-weight: 600; line-height: 1.05; }
.hero-subtitle { font-size: clamp(1.25rem, 3vw, 1.85rem); font-weight: 600; }
.hero-tagline { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; margin-top: 0.75rem; }
.hero-lede { font-size: 1.15rem; opacity: 0.85; margin-top: 0.75rem; }

.section-eyebrow { font-size: 0.9rem; letter-spacing: 2px; }

.lede-text { font-size: 1.4rem; line-height: 1.5; }
.subtle-text { font-size: 1.1rem; }
.meta-text { font-size: 0.9rem; }
.compact-text { font-size: 1rem; line-height: 1.5; }

.also-true-list p { font-size: 1.35rem; font-weight: 600; margin: 0; }

.how-i-work-grid {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem 3rem;
}
@media (max-width: 780px) {
	.how-i-work-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.how-i-work-grid h2, .how-i-work-grid h3 { margin: 0 0 0.4rem 0; }
.how-i-work-grid p { margin: 0; }

.portfolio-item + .portfolio-item { margin-top: 3rem; }
.portfolio-item h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.portfolio-role { font-size: 0.9rem; margin: 0 0 0.6rem 0; }
.portfolio-body { font-size: 1.05rem; line-height: 1.6; }

.photo-frame { max-width: 560px; margin: 0 auto; }
.photo-frame img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px dotted #D4A373;
	border-radius: 6px;
	box-shadow: 0 14px 30px rgba(109, 46, 70, 0.2);
}

.email-reveal-wrap { margin-top: 1.5rem; }
.email-reveal-wrap .wp-block-buttons { justify-content: center; }

/* WordPress puts the Button block's Advanced-panel class on the outer
   .wp-block-button div, not the inner link — so the pill styling has
   to target .wp-block-button__link explicitly via that ancestor. */
.wp-block-button.email-reveal .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1.6rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: transparent;
	color: inherit;
}
.wp-block-button.email-reveal .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
}

.email-reveal-note { display: block; margin-top: 0.7rem; font-size: 0.85rem; opacity: 0.6; min-height: 1.2em; }

/* Extra breathing room before/after each colour-banded section. !important
   because WordPress bakes the smaller padding in as an inline style. */
.wp-block-group.reveal {
	padding-top: clamp(70px, 9vw, 130px) !important;
	padding-bottom: clamp(70px, 9vw, 130px) !important;
}

/* On wide screens the theme's fixed 645px/1340px content widths leave huge
   unused side margins. Grow the readable column and base type size so the
   page actually uses the space instead of floating a narrow strip of text. */
@media (min-width: 1400px) {
	:root {
		--wp--style--global--content-size: 820px !important;
		--wp--style--global--wide-size: 1500px !important;
		--wp--preset--font-size--medium: 1.2rem !important;
		--wp--preset--font-size--large: 1.55rem !important;
		--wp--preset--font-size--x-large: 2.1rem !important;
		--wp--preset--font-size--xx-large: 3.4rem !important;
	}
}