/* Golden Light theme styles. Everything the block editor and theme.json cannot say on their own. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
}

/* Fraunces: softened, quirks off. Optical size follows the font size on its own. */
h1, h2, h3, h4, .wp-block-site-title, .wp-block-quote { font-variation-settings: "SOFT" 60, "WONK" 0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* Header, main, and footer touch; full-width sections touch each other. The block gap is for text, not bands. */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.entry-content > .alignfull { margin-block: 0 !important; }

/* A little air above a section when a nav link jumps to it. */
[id] { scroll-margin-top: 24px; }

/* Header: the bark band with the gold rule. It scrolls with the page on wide screens and stays put on phones, where the menu lives behind a button. */
.gl-header { position: relative; z-index: 20; }
@media (max-width: 599px) {
	header.wp-block-template-part { position: sticky; top: 0; z-index: 30; }
	body.admin-bar header.wp-block-template-part { top: 46px; }
	.gl-header { padding-top: 10px !important; padding-bottom: 10px !important; }
	.gl-logomark, .gl-logomark img { width: 48px; }
	.gl-header .wp-block-site-title { font-size: 1.35rem; }
	[id] { scroll-margin-top: calc(var(--gl-header-h, 68px) + 28px); }
}

/* Phone menu: a drawer from the right, not a full screen. Built on the navigation block's own open and close. */
@media (max-width: 599px) {
	.gl-nav .wp-block-navigation__responsive-container-open { color: #fff; padding: 10px; margin: -10px; }
	.gl-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: rgba(36,31,27,.55) !important; padding: 0; display: block;
		animation: gl-fade .2s ease-out both;
	}
	@keyframes gl-fade { from { opacity: 0; } to { opacity: 1; } }
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		position: absolute; top: 0; right: 0; bottom: 0; width: min(82vw, 360px); margin: 0;
		background: var(--wp--preset--color--bark); box-shadow: -12px 0 40px rgba(0,0,0,.35);
	}
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		position: relative; height: 100%; padding: 76px 24px 24px;
		display: flex; flex-direction: column;
	}
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
		content: ""; display: block; width: 56px; height: 40px; margin: 0 0 14px;
		background: url("../img/logomark-gold.svg") left center / contain no-repeat;
	}
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::after {
		content: ""; position: absolute; left: 24px; right: 24px; top: 128px; height: 1px;
		background: linear-gradient(90deg, var(--wp--preset--color--gold), rgba(217,164,65,0));
	}
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: block; padding: 22px 0 0; width: 100%; text-align: left;
	}
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start !important; gap: 0; margin: 0; padding: 0;
	}
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { text-align: left; justify-content: flex-start; }
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		border-bottom: 1px solid rgba(242,234,219,.15);
	}
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block; padding: 16px 0; border-bottom: 0;
		font-family: var(--wp--preset--font-family--fraunces); font-variation-settings: "SOFT" 60, "WONK" 0;
		font-size: 1.5rem; font-weight: 500; color: var(--wp--preset--color--cream-text);
	}
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--gold); }
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute; top: 18px; right: 18px; color: var(--wp--preset--color--cream-soft); padding: 10px;
	}
	.gl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }
	@media (prefers-reduced-motion: reduce) {
		.gl-nav .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
	}
}
.gl-header .wp-block-site-title a { text-decoration: none; }
.gl-logomark { display: block; flex: 0 0 auto; width: 64px; line-height: 0; }
.gl-logomark img { display: block; width: 64px; height: auto; }
.gl-logomark:focus-visible { outline-offset: 4px; border-radius: 4px; }
.gl-header .wp-block-site-tagline { font-family: var(--wp--preset--font-family--cabin); }
.gl-nav .wp-block-navigation-item__content { padding: 8px 0; border-bottom: 2px solid transparent; text-decoration: none; }
.gl-nav .wp-block-navigation-item__content:hover,
.gl-nav .wp-block-navigation-item__content:focus-visible { border-bottom-color: var(--wp--preset--color--gold); }

/* Hero: the photograph settles, six percent larger to rest over 24 seconds, once */
.js .gl-hero .wp-block-cover__image-background { animation: gl-settle 24s ease-out both; }
@keyframes gl-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .js .gl-hero .wp-block-cover__image-background { animation: none; } }

/* Hero: text over the photograph. The small-viewport unit keeps the text on screen on phones, where vh counts the space behind the address bar. */
.gl-hero { padding-left: clamp(18px, 4vw, 48px); padding-right: clamp(18px, 4vw, 48px); overflow: hidden; }
@supports (height: 1svh) { .gl-hero { min-height: 88svh !important; } }
@media (max-width: 599px) {
	@supports (height: 1svh) { .gl-hero { min-height: calc(100svh - 76px) !important; } }
	.gl-hero .wp-block-cover__inner-container { padding-top: 40px; padding-bottom: 28px; }
}
.gl-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container,
.gl-hero .wp-block-cover__inner-container { width: 100% !important; max-width: 1240px; margin: 0 auto !important; padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(24px, 4vw, 48px); }
.gl-hero .wp-block-cover__inner-container > * { margin-left: 0 !important; }
.gl-hero h1 { max-width: 13ch; text-wrap: balance; text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 28px rgba(0,0,0,.35); }
.gl-hero p { text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.4); }
.gl-hero .gl-lede { max-width: 44ch; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.45; }
.gl-hero .wp-block-cover__inner-container > * + * { margin-block-start: 1.4rem; }

/* Photo strip: the middle photograph stands taller */
.is-style-photo-strip { align-items: center; }
.is-style-photo-strip .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; max-height: 46vh; object-fit: cover; }
.is-style-photo-strip .wp-block-column:nth-child(2) .wp-block-image img { aspect-ratio: 3 / 4; max-height: 72vh; }
.is-style-photo-strip figcaption { font-size: 0.8rem; color: var(--wp--preset--color--ink-soft); margin-top: .5rem; }

/* Quote band */
.gl-band .wp-block-cover__inner-container { padding: clamp(48px, 8vw, 96px) 0; }
.gl-band .wp-block-quote { font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.15; max-width: 24ch; margin: 0 auto; padding: 0; text-wrap: balance; text-align: center; }
.gl-band .wp-block-quote p { margin: 0; }

/* About: the golden light in the corner */
.gl-about { position: relative; overflow: clip; } /* clip, not hidden: hidden would make the section the scroll container and stop the sticky bio column */
.gl-about::before {
	content: "";
	position: absolute; right: -18vw; top: -22vw;
	width: 70vw; height: 70vw; max-width: 980px; max-height: 980px;
	border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(217,164,65,.2), rgba(217,164,65,.05) 55%, rgba(217,164,65,0) 72%);
}
.gl-about > * { position: relative; }
.gl-about .wp-block-image img { max-height: 60vh; object-fit: cover; width: 100%; }

/* Timeline: a vertical line with a dot per milestone */
.is-style-timeline {
	list-style: none; position: relative;
	margin: 2.2rem 0 0 .5rem; padding: 0 0 0 1.6rem;
	font-size: .98rem;
}
.is-style-timeline::before {
	content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 1px;
	background: rgba(242,234,219,.28);
}
.is-style-timeline li { position: relative; padding: 0 0 1.5rem; }
.is-style-timeline li:last-child { padding-bottom: 0; }
.is-style-timeline li::before {
	content: ""; position: absolute; left: calc(-1.6rem - 5px); top: .45rem;
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 3px var(--wp--preset--color--bark);
}
.is-style-timeline li strong { display: block; color: var(--wp--preset--color--gold); font-weight: 700; margin-bottom: .15rem; }
.is-style-timeline li strong + br { display: none; }
.is-style-timeline li strong:not(:first-child) { color: inherit; font-size: 1.08em; margin-bottom: .3rem; }
.gl-about h3 { font-size: 1.35rem; margin: 2.2rem 0 0; }
.gl-about h3 + .is-style-timeline { margin-top: 1.2rem; }

/* On phones the bio reads first, then the timeline: the two columns dissolve and their children reorder. */
/* Desktop: the heading and biography stay in view while the longer portrait-and-timeline column scrolls past. Gated on height so a short window never pins a column taller than itself. */
@media (min-width: 782px) and (min-height: 860px) {
	.gl-about .wp-block-columns > .wp-block-column:last-child { position: sticky; top: 2.5rem; align-self: flex-start; }
	.admin-bar .gl-about .wp-block-columns > .wp-block-column:last-child { top: calc(2.5rem + 32px); }
}

@media (max-width: 781px) {
	.gl-about .wp-block-columns { display: flex; flex-direction: column; gap: 1.2rem; }
	.gl-about .wp-block-columns > .wp-block-column { display: contents; }
	.gl-about .wp-block-column > * { order: 2; }
	.gl-about .wp-block-column > .wp-block-image { order: 1; }
	.gl-about .wp-block-column > h3, .gl-about .wp-block-column > .is-style-timeline { order: 3; }
}
.has-cream-background-color .is-style-timeline::before,
.has-cream-deep-background-color .is-style-timeline::before { background: rgba(36,31,27,.25); }
.has-cream-background-color .is-style-timeline li::before,
.has-cream-deep-background-color .is-style-timeline li::before { box-shadow: 0 0 0 3px var(--wp--preset--color--cream); }

/* Contact form, whichever form plugin renders it */
.gl-contact .wpcf7 { max-width: 34rem; margin-top: 1.4rem; }
.gl-contact .wpcf7 form > p { margin: 0 0 1.1rem; }
.gl-contact .wpcf7-form-control-wrap { display: block; }
.gl-contact .wpcf7-spinner { display: none; }
.gl-contact .wpcf7-not-valid-tip { font-size: .9rem; color: #8A3324; margin-top: .3rem; }
.gl-contact .wpcf7-response-output { border: 1px solid #C9BFA9; border-radius: 6px; margin: 1rem 0 0; padding: .8rem 1rem; font-size: .95rem; }
.gl-contact input[type="text"], .gl-contact input[type="email"], .gl-contact input[type="tel"], .gl-contact textarea {
	box-sizing: border-box; width: 100%; font: inherit; font-size: 1rem; color: var(--wp--preset--color--ink);
	background: #FBF8F0; border: 1px solid #C9BFA9; border-radius: 6px; padding: 12px 14px;
}
.gl-contact textarea { min-height: 9rem; line-height: 1.5; resize: vertical; }
.gl-contact label { display: block; font-weight: 500; font-size: .95rem; margin: 0 0 .35rem; }
.gl-contact input[type="submit"], .gl-contact button[type="submit"] {
	font: inherit; font-weight: 700; font-size: 1rem; color: #fff;
	background: var(--wp--preset--color--moss-deep); border: 0; border-radius: 6px; padding: 13px 30px; cursor: pointer;
}
.gl-contact input[type="submit"]:hover, .gl-contact button[type="submit"]:hover { background: var(--wp--preset--color--moss); }
.gl-contact .wp-block-image img { width: 100%; aspect-ratio: 3 / 4; max-height: 72vh; object-fit: cover; } /* portrait photograph; the 3:4 box keeps the tree's height, and the cap keeps it under a screen */
.gl-contact .gl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer: the Vesper badge sits inline and inherits the footer's face and ink */
.gl-footer-right { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin: 0; }
.gl-footer-right a { text-decoration: none; border-bottom: 1px solid transparent; }
.gl-footer-right a:hover, .gl-footer-right a:focus-visible { border-bottom-color: currentColor; }
.gl-sep { opacity: .45; }
.vesper-badge { --vb-star: #a8710a; display: inline-flex; align-items: baseline; gap: .4em; font: inherit; color: inherit; white-space: nowrap; }
.vesper-badge b { font-weight: 700; letter-spacing: -.005em; }
.vesper-badge svg { width: .82em; height: .82em; flex: none; align-self: center; fill: var(--vb-star); overflow: visible; }
.vesper-badge:focus-visible { outline: 2px solid var(--vb-star); outline-offset: 3px; border-radius: 2px; }

/* Movement: sections rise into place once as they enter the screen (theme.js) */
.js .gl-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .gl-reveal.in { opacity: 1; transform: none; }
.js .is-style-timeline::before { transform: scaleY(0); transform-origin: top; transition: transform 1.1s ease .2s; }
.js .is-style-timeline.in::before { transform: scaleY(1); }
.js .is-style-timeline li { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.js .is-style-timeline.in li { opacity: 1; transform: none; }
.js .is-style-timeline.in li:nth-child(2) { transition-delay: .25s; }
.js .is-style-timeline.in li:nth-child(3) { transition-delay: .5s; }
.js .is-style-timeline.in li:nth-child(4) { transition-delay: .75s; }
.js .is-style-timeline.in li:nth-child(n+5) { transition-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
	.js .gl-reveal, .js .is-style-timeline li { opacity: 1; transform: none; transition: none; }
	.js .is-style-timeline::before { transform: none; transition: none; }
}

/* Images never taller than a screen */
.wp-block-image img { height: auto; }
.wp-block-image figcaption { font-size: .8rem; color: var(--wp--preset--color--ink-soft); text-align: left; margin-top: .5rem; }