@font-face {
	font-family: "Bricolage Grotesque";
	src: url("assets/fonts/bricolage-grotesque.woff2") format("woff2");
	font-weight: 300 800;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
}
:root {
	--dhh-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
	--dhh-body: "Inter", system-ui, -apple-system, sans-serif;
}
body { font-family: var(--dhh-body); line-height: 1.7; overflow-x: clip; }
h1, h2, h3, h4, .wp-block-site-title, .wp-block-site-title a {
	font-family: var(--dhh-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.wp-block-site-title { letter-spacing: -0.01em; }
/* Vertical rhythm: one scale. Sections are --dhh-section apart; inside a section a heading is --dhh-s1 above its intro,
   the intro --dhh-s3 above what it introduces, and blocks in a stack are --dhh-s3 apart. */
:root {
	--dhh-s1: 1rem;
	--dhh-s2: 1.75rem;
	--dhh-s3: clamp(2rem, 4vw, 3rem);
	--dhh-section: clamp(5rem, 10vw, 8rem);
}
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks > main, .wp-site-blocks > main > .wp-block-group { margin-block: 0; }
.wp-block-post-content.is-layout-constrained > *, .wp-block-post-content > * { margin-block: 0; }
.wp-block-post-content > .wp-block-group.alignwide { padding-block: var(--dhh-section) 0; }
.wp-block-post-content > .wp-block-group.alignwide:last-child { padding-block-end: var(--dhh-section); }
.wp-block-post-content .wp-block-group > * { margin-block: 0 !important; }
.wp-block-post-content .wp-block-group > * + * { margin-block-start: var(--dhh-s3) !important; }
.wp-block-post-content .wp-block-group > h2 + p { margin-block-start: var(--dhh-s1) !important; }
.wp-block-post-content .wp-block-group > p + h2 { margin-block-start: var(--dhh-section) !important; }
.wp-block-post-content h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0; }
.wp-block-post-content h3 { font-size: 1.35rem; margin: 0 0 0.6rem; }
.wp-block-post-content p { margin: 0; color: rgba(255, 255, 255, 0.78); }
.wp-block-post-content .wp-block-columns { gap: clamp(2rem, 5vw, 4rem); }
.wp-block-post-content .wp-block-column > * + * { margin-block-start: 0; }
.wp-block-post-content .wp-block-image, .wp-block-post-content .wp-block-gallery { margin: 0; }
.wp-block-post-content .wp-block-gallery { gap: 1rem; }
header.wp-block-template-part, footer.wp-block-template-part { margin: 0; }

/* Download button, top right of every page; the home page has no header of its own. */
.dhh-download {
	position: fixed;
	top: 1.1rem;
	right: 1.4rem;
	z-index: 100000;
	padding: 0.55rem 1.2rem;
	border: 1.5px solid #fff;
	border-radius: 999px;
	background-color: #000;
	color: #fff;
	font: 600 0.9rem/1 var(--dhh-body);
	letter-spacing: 0.02em;
	text-decoration: none;
}
.dhh-download:hover, .dhh-download:focus-visible { background-color: #fff; color: #000; }
.admin-bar .dhh-download { top: 3rem; }
.home header.wp-block-template-part { display: none; }
header.wp-block-template-part { padding-right: 9rem; }
.dhh-gallery img { border-radius: 14px; }
.dhh-gallery .wp-block-image img { aspect-ratio: 3 / 4; object-fit: cover; }
.dhh-loop video { width: 100%; height: auto; display: block; border-radius: 14px; }

.dhh-zoom { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 2 / 1; margin: 0; background: #000; }
.dhh-zoom video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dhh-footer-download .wp-block-button__link { border: 1.5px solid #fff; background: transparent; color: #fff; }
.wp-block-post-content .wp-block-group > .wp-block-gallery + h2 { margin-block-start: calc(var(--dhh-section) * 0.6) !important; }

/* .dhh-scrub: the hat clip that turns with the scroll (scrub.js). The tall section holds the video in the middle of the screen. */
.dhh-scrub { height: 260vh; position: relative; }
.dhh-scrub__stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
.dhh-scrub video { width: 100%; height: auto; max-height: 100vh; display: block; background: #000; }
@media (prefers-reduced-motion: reduce) { .dhh-scrub { height: auto; } .dhh-scrub__stick { position: static; height: auto; } }