/* -----------------------------------------------------------------------------
   GBinder — tokens lifted from the live gershonbinder.com build.
   Spotlight background, Roboto/Montserrat uppercase type, fixed chrome.
----------------------------------------------------------------------------- */

:root {
	--gb-ink: #ffffff;
	--gb-muted: #808080;
	--gb-label: #5c5c60;
	--gb-panel: #28282e;
	--gb-line: rgba(255, 255, 255, 0.15);
	--gb-black: #000000;

	--gb-font-head: 'Roboto', sans-serif;
	--gb-font-label: 'Montserrat', sans-serif;

	--gb-edge: 50px;
	--gb-header-h: 140px;
	--gb-rail: 182px;

	/* How long the page-title band takes to finish drawing in. Other
	   entrance animations on inner pages read this so they don't start
	   competing with it — see about-me.css and websites.css. */
	--gb-intro-total: 1.15s;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--gb-intro-total: 0s;
	}
}

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

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

body {
	margin: 0;
	min-height: 100vh;
	background: var(--gb-black);
	color: var(--gb-muted);
	font-family: var(--gb-font-label);
	font-size: 15px;
	line-height: 28px;
	-webkit-font-smoothing: antialiased;
}

/* Fixed radial spotlight, matching the original ellipse-at-left-top gradient. */
body.gb-spotlight::before {
	content: '';
	position: fixed;
	inset: 0;
	background: radial-gradient(ellipse at left top, var(--gb-panel) 0%, var(--gb-black) 70%);
	z-index: -1;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--gb-ink);
	text-decoration: none;
	transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
	color: var(--gb-muted);
}

h1,
h2,
h3,
h4,
h5,
h6,
.gb-headline {
	font-family: var(--gb-font-head);
	font-weight: 700;
	color: var(--gb-ink);
	text-transform: uppercase;
	margin: 0 0 28px;
}

h1 { font-size: 60px; line-height: 66px; }
h2, .gb-headline { font-size: 50px; line-height: 55px; }
h3 { font-size: 36px; line-height: 44px; }
h4 { font-size: 26px; line-height: 34px; }
h5 { font-size: 20px; line-height: 28px; }
h6 { font-size: 16px; line-height: 24px; }

.gb-eyebrow,
label,
fieldset legend {
	display: block;
	color: var(--gb-label);
	font-family: var(--gb-font-label);
	font-weight: 700;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 3px;
}

.gb-lead {
	font-size: 18px;
	line-height: 32px;
	color: var(--gb-muted);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gb-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 18px;
	background: var(--gb-panel);
	color: var(--gb-ink);
	z-index: 999;
}

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

.gb-header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 221;
	pointer-events: none;
	transition: transform 0.5s ease;
}

/* Transparent at the top of the page; main.js adds .is-stuck past a small
   scroll threshold to fade in the glass panel. The panel is a pseudo-element
   so only its own opacity animates, leaving the bar itself untouched. */
.gb-header::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: rgba(16, 16, 20, 0.62);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid var(--gb-line);
	transition: opacity 0.45s ease;
}

.gb-header.is-stuck::before {
	opacity: 1;
}

.gb-header__inner {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: var(--gb-edge);
	transition: padding 0.45s ease;
}

/* Tighten the bar once it has the glass behind it. */
.gb-header.is-stuck .gb-header__inner {
	padding-top: calc(var(--gb-edge) * 0.5);
	padding-bottom: calc(var(--gb-edge) * 0.5);
}

.gb-header a,
.gb-header button {
	pointer-events: auto;
}

/* Logo markup + styles live in template-parts/logo.php and
   assets/css/logo.css. */

.gb-header__nav {
	display: flex;
	align-items: center;
}

.gb-menu {
	display: flex;
	align-items: center;
	gap: 48px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gb-menu li {
	position: relative;
}

.gb-menu a {
	position: relative;
	display: block;
	padding: 4px 0;
	font-family: var(--gb-font-label);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gb-muted);
}

/* Rule wipes in from the left on hover and out to the right on leave, by
   flipping transform-origin alongside the scale. */
.gb-menu > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.gb-menu > li > a:hover::after,
.gb-menu > li.current-menu-item > a::after,
.gb-menu > li.current_page_item > a::after,
.gb-menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.gb-menu a:hover,
.gb-menu .current-menu-item > a,
.gb-menu .current_page_item > a,
.gb-menu .current-menu-ancestor > a {
	color: var(--gb-ink);
}

/* ------------------------------------------------- nav entrance (stagger) --- */

/* Each top-level item declares its own index, either inline (--gb-i, from
   gbinder_fallback_menu) or via a .gb-stagger-N class on a WP-managed menu.
   The burger counts as the item after the last one. */
@keyframes gb-nav-in {
	from {
		opacity: 0;
		transform: translateY(-14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.gb-menu > li,
.gb-burger {
	opacity: 0;
	animation: gb-nav-in 0.8s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
	animation-delay: calc(var(--gb-nav-start, 0.25s) + var(--gb-i, 0) * 0.09s);
}

.gb-burger {
	--gb-i: 4;
}

.gb-menu > li.gb-stagger-0 { --gb-i: 0; }
.gb-menu > li.gb-stagger-1 { --gb-i: 1; }
.gb-menu > li.gb-stagger-2 { --gb-i: 2; }
.gb-menu > li.gb-stagger-3 { --gb-i: 3; }
.gb-menu > li.gb-stagger-4 { --gb-i: 4; }
.gb-menu > li.gb-stagger-5 { --gb-i: 5; }
.gb-menu > li.gb-stagger-6 { --gb-i: 6; }
.gb-menu > li.gb-stagger-7 { --gb-i: 7; }

/* On the home screen the logo starts at 2.6s and runs 1.4s; the nav falls in
   behind it rather than competing with it. */
body.gb-home .gb-menu > li,
body.gb-home .gb-burger {
	--gb-nav-start: 3.1s;
}

@media (prefers-reduced-motion: reduce) {
	.gb-menu > li,
	.gb-burger {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.gb-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 180px;
	margin: 0;
	padding: 18px 0 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.gb-menu li:hover > .sub-menu,
.gb-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gb-menu .sub-menu li {
	background: var(--gb-panel);
}

.gb-menu .sub-menu a {
	display: block;
	padding: 12px 20px;
}

.gb-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.gb-burger__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--gb-ink);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.gb-burger[aria-expanded='true'] .gb-burger__bar:first-child {
	transform: translateY(4px) rotate(45deg);
}

.gb-burger[aria-expanded='true'] .gb-burger__bar:last-child {
	transform: translateY(-4px) rotate(-45deg);
}

.gb-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 220;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.96);
}

/* display:flex above would defeat the hidden attribute, so restate it. */
.gb-mobile-nav[hidden] {
	display: none;
}

.gb-mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.gb-mobile-menu a {
	display: block;
	padding: 12px 0;
	font-family: var(--gb-font-head);
	font-weight: 700;
	font-size: 28px;
	line-height: 36px;
	text-transform: uppercase;
}

/* Items rise in one after another each time the panel opens. The animation
   is attached fresh on open (the panel is display:none while closed, so it
   replays rather than firing once at page load). */
@keyframes gb-mobile-item-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.gb-mobile-nav:not([hidden]) .gb-mobile-menu > li {
	opacity: 0;
	animation: gb-mobile-item-in 0.6s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
	animation-delay: calc(0.08s + var(--gb-i, 0) * 0.07s);
}

.gb-mobile-menu > li.gb-stagger-0 { --gb-i: 0; }
.gb-mobile-menu > li.gb-stagger-1 { --gb-i: 1; }
.gb-mobile-menu > li.gb-stagger-2 { --gb-i: 2; }
.gb-mobile-menu > li.gb-stagger-3 { --gb-i: 3; }
.gb-mobile-menu > li.gb-stagger-4 { --gb-i: 4; }
.gb-mobile-menu > li.gb-stagger-5 { --gb-i: 5; }
.gb-mobile-menu > li.gb-stagger-6 { --gb-i: 6; }
.gb-mobile-menu > li.gb-stagger-7 { --gb-i: 7; }

@media (prefers-reduced-motion: reduce) {
	.gb-mobile-nav:not([hidden]) .gb-mobile-menu > li {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.gb-mobile-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gb-mobile-menu .sub-menu a {
	font-size: 16px;
	color: var(--gb-muted);
}

/* ---------------------------------------------------------- page heading --- */

/* In flow, below the fixed header: an oversized muted word sitting on a
   full-width hairline, left-aligned off a short leading rule segment. */
.gb-page-title-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	padding-top: calc(var(--gb-header-h) - 20px);
}

.gb-page-title__rule {
	flex: 0 0 45px;
	height: 1px;
	background: var(--gb-line);
	/* Anchored at the edge nearest the word: growing from there out to the
	   screen edge reads as the line reaching outward from the title. */
	transform-origin: right center;
	animation: gb-title-line-in 0.65s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.gb-page-title__rule--end {
	flex: 1 1 auto;
	transform-origin: left center;
}

.gb-page-title {
	margin: 0;
	padding: 0 50px;
	font-size: 50px;
	line-height: 55px;
	letter-spacing: 0.01em;
	white-space: nowrap;
	/* Grey, so it frames the page instead of competing with its content. */
	color: #8d8d92;
	opacity: 0;
	transform: translateY(10px);
	/* Waits for the lines to finish reaching the edges before it appears. */
	animation: gb-title-word-in 0.55s cubic-bezier(0.22, 0.7, 0.2, 1) 0.55s forwards;
}

@keyframes gb-title-line-in {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes gb-title-word-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gb-page-title__rule {
		animation: none;
		transform: none;
	}

	.gb-page-title {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* The band already clears the header, so the shell below it doesn't repeat
   that offset. */
body.gb-has-title .gb-shell {
	padding-top: 40px;
}

@media (max-width: 1440px) {
	.gb-page-title {
		padding: 0 30px;
	}
}

@media (max-width: 782px) {
	.gb-page-title-wrap {
		justify-content: center;
		padding-top: calc(var(--gb-header-h) + 20px);
	}

	/* No room for the line on a phone — the word centres on its own, so it
	   doesn't need to wait on a line-draw that isn't happening. */
	.gb-page-title__rule {
		display: none;
	}

	.gb-page-title {
		padding: 0 var(--gb-edge);
		font-size: 30px;
		line-height: 36px;
		white-space: normal;
		text-align: center;
		word-wrap: break-word;
		animation-delay: 0.1s;
	}
}


/* ----------------------------------------------------------------- shell --- */

.gb-shell {
	max-width: 900px;
	margin: 0 auto;
	padding: calc(var(--gb-header-h) + 40px) var(--gb-edge) 160px;
}

.gb-shell--wide {
	max-width: 1400px;
}

.gb-shell--center {
	text-align: center;
}

.gb-rte {
	color: var(--gb-muted);
}

.gb-rte p {
	margin: 0 0 28px;
}

.gb-rte a {
	border-bottom: 1px solid var(--gb-line);
}

.gb-rte ul,
.gb-rte ol {
	margin: 0 0 28px;
	padding-left: 20px;
}

.gb-rte blockquote {
	margin: 40px 0;
	padding-left: 28px;
	border-left: 1px solid var(--gb-line);
	color: var(--gb-ink);
}

.gb-rte img {
	margin: 40px 0;
}


.gb-post__media,
.gb-page__media {
	margin: 0 0 50px;
}


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

input[type='text'],
input[type='email'],
input[type='url'],
input[type='search'],
input[type='tel'],
input[type='password'],
textarea {
	width: 100%;
	padding: 14px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--gb-line);
	color: var(--gb-ink);
	font-family: var(--gb-font-label);
	font-size: 14px;
}

input:focus,
textarea:focus {
	outline: none;
	border-bottom-color: var(--gb-ink);
}

.gb-btn,
button[type='submit'],
input[type='submit'] {
	display: inline-block;
	margin-top: 24px;
	padding: 16px 34px;
	background: transparent;
	border: 1px solid var(--gb-line);
	color: var(--gb-ink);
	font-family: var(--gb-font-label);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.gb-btn:hover,
button[type='submit']:hover,
input[type='submit']:hover {
	background: var(--gb-panel);
	border-color: var(--gb-ink);
	color: var(--gb-ink);
}

.gb-search {
	display: flex;
	gap: 20px;
	align-items: flex-end;
	margin: 0 0 70px;
}

/* ----------------------------------------------------------- pagination --- */

.pagination .nav-links {
	display: flex;
	gap: 18px;
	justify-content: center;
	margin: 90px 0 0;
}

.pagination .page-numbers {
	font-family: var(--gb-font-label);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gb-muted);
}

.pagination .page-numbers.current {
	color: var(--gb-ink);
}

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

.gb-footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 200;
	pointer-events: none;
}

.gb-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--gb-edge);
}

.gb-footer a {
	pointer-events: auto;
}

.gb-socials {
	display: flex;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gb-socials a {
	font-family: var(--gb-font-label);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gb-muted);
}

.gb-socials a:hover {
	color: var(--gb-ink);
}

.gb-footer__copyright {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gb-label);
}

/* Inner pages scroll, so the fixed footer would sit over content. */
body.gb-inner .gb-footer {
	position: relative;
}

/* --------------------------------------------------------- custom cursor --- */

.gb-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	pointer-events: none;
	z-index: 999;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gb-cursor.is-active {
	opacity: 1;
}

/* The wrapper carries translate from JS, so scale lives on the circle. */
.gb-cursor__circle {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid var(--gb-line);
	border-radius: 50%;
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.gb-cursor.is-hover .gb-cursor__circle {
	transform: scale(1.6);
	border-color: rgba(255, 255, 255, 0.5);
}


/* ------------------------------------------------------------ responsive --- */

@media (max-width: 1024px) {
	:root {
		--gb-edge: 30px;
		--gb-header-h: 100px;
	}

	.gb-menu {
		display: none;
	}

	.gb-burger {
		display: flex;
	}

	.gb-footer {
		position: relative;
	}

	.gb-cursor {
		display: none;
	}
}

@media (max-width: 680px) {
	h1 { font-size: 34px; line-height: 40px; }
	h2, .gb-headline { font-size: 28px; line-height: 34px; }

	.gb-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

}