/* Deck header: the homepage's logo, menu button and full-screen menu, for inner pages.
   White by default, for photographs; dark-pages.js and project-page.js add .is-ink wherever a
   control sits over the light page (every page is light since 17 Oct 2026). Without the script
   the controls stay ink. */

.sha-deck-header {
	--sha-deck-ink: #31312c;
	--sha-deck-white: #fff;
	--sha-deck-gutter: clamp(20px, 3.2vw, 56px);
	--sha-deck-ease: cubic-bezier(.22, .61, .36, 1);
}

.sha-deck-header-part {
	margin: 0 !important;
}

.sha-deck-header__bar {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp(22px, 3vw, 40px) var(--sha-deck-gutter);
	pointer-events: none;
	transition: transform .5s var(--sha-deck-ease);
}

/* Until the script runs (or without JavaScript) the bar scrolls away with the page and the
   menu button, which needs the script, stays out of the way. */
.sha-deck-header:not(.is-ready) .sha-deck-header__bar {
	position: absolute;
}

.sha-deck-header:not(.is-ready) .sha-deck-header__button {
	visibility: hidden;
}

/* Scrolled, over the light page: a soft backing so the logo and button never sit on text. */
.sha-deck-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(250, 250, 249, .94);
	opacity: 0;
	transition: opacity .5s var(--sha-deck-ease);
	pointer-events: none;
}

.sha-deck-header__bar.is-backed::before {
	opacity: 1;
}

.sha-deck-menu-open .sha-deck-header__bar::before {
	opacity: 0;
}

.sha-deck-header__bar.is-tucked {
	transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
}

.sha-deck-header__bar > * {
	pointer-events: auto;
	color: var(--sha-deck-white);
	transition: color .6s var(--sha-deck-ease);
}

.sha-deck-header__bar > .is-ink {
	color: var(--sha-deck-ink);
}

.sha-deck-header .sha-deck-header__logo {
	display: block;
	font-family: "Fact", "Inter", system-ui, sans-serif;
	font-weight: 300;
	font-size: clamp(16px, 1.35vw, 20px);
	line-height: 1.02;
	letter-spacing: .01em;
	text-decoration: none;
}

.sha-deck-header__logo b {
	display: block;
	font-weight: 500;
}

/* A logo image from Theme Settings: white over photographs, ink over light panels. */
.sha-deck-header__logo img {
	display: block;
	width: auto;
	height: clamp(34px, 2.8vw, 42px);
	filter: brightness(0) invert(1);
	transition: filter .6s var(--sha-deck-ease);
}

.sha-deck-header__bar > .is-ink img {
	filter: brightness(0) invert(.19);
}

.sha-deck-menu-open .sha-deck-header__bar > .sha-deck-header__logo img {
	filter: brightness(0) invert(.19);
}

.sha-deck-header:not(.is-ready) .sha-deck-header__bar > * {
	color: var(--sha-deck-ink);
}

.sha-deck-header:not(.is-ready) .sha-deck-header__logo img {
	filter: brightness(0) invert(.19);
}

/* Without the script, pages that open on a photograph (About, Thank you, a project with a cover) keep the
   controls white over it. */
:is(body:has(.sha-theme-about-hero), body:has(.sha-thanks__photo), body.sha-project-view:not(:has(.sha-project__open.is-coverless))) .sha-deck-header:not(.is-ready) .sha-deck-header__bar > * {
	color: var(--sha-deck-white);
}

:is(body:has(.sha-theme-about-hero), body:has(.sha-thanks__photo), body.sha-project-view:not(:has(.sha-project__open.is-coverless))) .sha-deck-header:not(.is-ready) .sha-deck-header__logo img {
	filter: brightness(0) invert(1);
}

.sha-deck-header__button {
	position: relative;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.sha-deck-header__button i {
	position: absolute;
	left: 4px;
	right: 4px;
	height: 1.5px;
	background: currentColor;
	transition: transform .5s var(--sha-deck-ease), opacity .3s;
}

.sha-deck-header__button i:nth-child(1) { top: 10px; }
.sha-deck-header__button i:nth-child(2) { top: 17px; }
.sha-deck-header__button i:nth-child(3) { top: 24px; }

.sha-deck-menu-open .sha-deck-header__bar > * { color: var(--sha-deck-ink); }
.sha-deck-menu-open .sha-deck-header__button i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sha-deck-menu-open .sha-deck-header__button i:nth-child(2) { opacity: 0; }
.sha-deck-menu-open .sha-deck-header__button i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sha-deck-header__logo:focus-visible,
.sha-deck-header__button:focus-visible,
.sha-deck-header__menu a:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.sha-deck-header__menu {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
	z-index: 55;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 96px var(--sha-deck-gutter) 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(250, 250, 249, .99);
	backdrop-filter: blur(8px);
	color: var(--sha-deck-ink);
	font-family: "Fact", "Inter", system-ui, sans-serif;
	font-weight: 300;
	opacity: 0;
	transition: opacity .8s var(--sha-deck-ease);
}

.sha-deck-header__menu[hidden] {
	display: none;
}

/* The page behind the open menu stays put. */
html.sha-deck-locked {
	overflow: hidden;
}

.sha-deck-menu-open .sha-deck-header__menu {
	opacity: 1;
}

.sha-deck-header__groups {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.sha-deck-header__groups h4 {
	margin: 0 0 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	color: inherit;
	opacity: .55;
}

.sha-deck-header__groups a {
	display: block;
	color: inherit;
	font-size: clamp(18px, 1.6vw, 24px);
	line-height: 1.5;
	text-decoration: none;
}

.sha-deck-header__groups a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.sha-deck-header__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin-top: clamp(40px, 8vh, 80px);
	font-size: 14px;
	opacity: .7;
}

.sha-deck-header__foot a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 760px) {
	.sha-deck-header__groups {
		grid-template-columns: 1fr 1fr;
		gap: 28px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sha-deck-header__bar,
	.sha-deck-header__bar > *,
	.sha-deck-header__button i,
	.sha-deck-header__menu {
		transition: none;
	}
}