/*
 * Layout.
 *
 * STRUCTURE ONLY. No palette, no type scale, no spacing system — that is the
 * design layer and it is not written yet. What is here is the contract the
 * engine's own markup depends on, plus the page skeleton every template
 * assumes. Replace the look; keep the class names.
 *
 * The contract, in order of how much breaks if you rename it:
 *
 *   .media-block / .media-element   emitted by the media block helper
 *   .cta-btn and its wrappers     emitted by the CTA helper
 *   .special-char                  emitted by the marked-characters helper
 *   .post-grid .posts .grid   emitted by the post factory's get_grid()
 *   .posts-count, .cta-loader      the grid's count and loader
 *   .content-group, .content-block, .content-wrapper  the page skeleton
 */

/*---------------------------------------------------------------------------*/
/* Page skeleton                                                             */
/*---------------------------------------------------------------------------*/

body {
	font-family: 'Futura PT', sans-serif;
	font-size: 13px;
}

#wrapper { position: relative; }
#container { position: relative; }

#container .content-group { position: relative; }
#container .content-group:empty { display: none; }

:root {
	--column-width: 1225px;
	--column-gutter: 50px;
}
@media (width < 900px) { :root { --column-gutter: 25px; } }

.content-wrapper {
	box-sizing: border-box;
	width: min(var(--column-width), 100% - var(--column-gutter) * 2);
	margin: 0 auto;
}

/*---------------------------------------------------------------------------*/

#container .content-block header > .hook {
	text-wrap: balance;
	text-transform: uppercase;
	line-height: 150%;
	font-family: 'Söhne Breit', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .8px;
}
#container .content-block header > .title {
	text-wrap: balance;
	text-transform: uppercase;
	line-height: 120%;
	font-size: 34px;
	font-weight: 500;
	letter-spacing: .2px;
}
#container .content-block header > .description {
	text-wrap: balance;
	line-height: 140%;
	font-size: 13px;
	font-weight: 400;
}

/*---------------------------------------------------------------------------*/
/* Media — emitted by the media block helper                                 */
/*---------------------------------------------------------------------------*/

.media-block { position: relative; isolation: isolate; }
.media-block > picture,
.media-block > video { display: block; }
.media-block > picture > img,
.media-block > video {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
}

/* A video that neither autoplays nor loops gets these two from the helper. */
.media-block > .overlay { position: absolute; inset: 0; }

/*---------------------------------------------------------------------------*/
/* CTA — emitted by the CTA helper                                           */
/*                                                                            */
/* The nesting looks excessive read as markup; it is what lets a button       */
/* animate its content independently of its box. Keep the chain intact.      */
/*---------------------------------------------------------------------------*/

.cta-btn { display: inline-block; text-decoration: none; }
.cta-btn .btn-outer-wrapper,
.cta-btn .btn-inner-wrapper,
.cta-btn .btn,
.cta-btn .btn-content-wrapper,
.cta-btn .btn-content { display: block; }
.cta-btn .btn-content { display: flex; align-items: center; }

.cta-btn.hide-label .label-wrapper,
.cta-btn.hide-icon  .icon-wrapper { display: none; }

/* label-icon is the default order; icon-label flips it. */
.cta-btn.icon-label .btn-content { flex-direction: row; }
.cta-btn.label-icon .btn-content { flex-direction: row-reverse; }

.cta-btn .loading-wrapper { display: none; }
.cta-btn.loading .loading-wrapper { display: block; }

/*---------------------------------------------------------------------------*/
/* The % marker — emitted by the marked-characters helper                        */
/*---------------------------------------------------------------------------*/

.special-char { font-style: italic; }

/*---------------------------------------------------------------------------*/
/* Post grids — emitted by the post factory's get_grid()                     */
/*---------------------------------------------------------------------------*/

.post-grid { position: relative; }
.post-grid .posts { position: relative; }
.post-grid .posts .grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Both are optional: absent from the DOM when the grid was rendered with
   show_count / show_loader off. */
.post-grid .posts-count { display: block; }
.post-grid .cta-loader  { display: inline-block; }

/*---------------------------------------------------------------------------*/
/* The preloader — .loaded comes from layout.js                              */
/*                                                                           */
/* One pseudo-element, no markup. The curtain covers the viewport until the   */
/* script lifts it: after the load event and the fonts, and never before     */
/* MINIMUM in layout.js.                                                      */
/*                                                                           */
/* NO LOGO AND NO BRAND COLOUR. The original fills this with the site's       */
/* wordmark on its own ground; those are brand assets and this theme has no   */
/* images directory. A flat neutral keeps the mechanism honest — drop a       */
/* background-image and a colour in here and it is the real thing.            */
/*                                                                           */
/* The scroll lock matters as much as the curtain: without it the visitor     */
/* scrolls a page they cannot see and arrives somewhere arbitrary when it     */
/* lifts. Reinstated on any body class ending in -open, so a menu or a modal  */
/* that has its own scrolling does not fight this one.                        */
/*---------------------------------------------------------------------------*/

body { overflow: hidden; }
body.loaded:not([class*="-open"]) { overflow: auto; }

body:after {
	content: '';
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	z-index: 9999;

	display: block;
	height: calc(100% - var(--wp-admin--admin-bar--height, 0px));
	width: 100%;

	background-color: #FFF;

	opacity: 1;
	pointer-events: auto;
	transition: opacity .6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s;
}

body.loaded:after {
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s cubic-bezier(0.38, 0.005, 0.215, 1);
}

/*---------------------------------------------------------------------------*/
/* NO SCRIPT, NO CURTAIN — 27/09                                              */
/*                                                                           */
/* Everything above waits for `.loaded`, which layout.js adds in exactly one  */
/* place. Anything that stopped that line being reached left every page of the */
/* site a blank white screen that could not be scrolled, with no way out but a */
/* reload that would do the same thing. There was no CSS-only path to a        */
/* visible page at all.                                                       */
/*                                                                           */
/* layout.js writes `js` on <html> as its very first statement, before jQuery  */
/* is touched and before anything that can throw. So `html:not(.js)` means    */
/* exactly one thing: the script never ran — missing, blocked, 404, or         */
/* scripting switched off. No delay is needed and none is used, because the    */
/* answer is already known when the stylesheet is read. layout.style is        */
/* enqueued in the head with layout.script, so there is no window in which the */
/* page renders uncurtained and then gets covered.                            */
/*                                                                           */
/* A TIMER HERE WAS THE FIRST ATTEMPT AND IT WAS WRONG. An animation lifting  */
/* the curtain after six seconds, even scoped to body:not(.loaded), kept its   */
/* end values under `forwards` and beat the normal declarations the `.loaded`  */
/* rules use — so six seconds into any page the outgoing leave-fade could no   */
/* longer draw its curtain at all. Measured in headless Chromium against the   */
/* stylesheet without it: at 7.8s the original redraws the curtain and the     */
/* timed version does not. A fail-safe for the broken case had quietly broken  */
/* the working one.                                                           */
/*                                                                           */
/* The case this does NOT cover is layout.js running and then throwing before  */
/* it can add `.loaded` — jQuery missing, say. CSS cannot see that; the        */
/* watchdog at the top of layout.js can, and does.                            */
/*---------------------------------------------------------------------------*/

html:not(.js) body:after      { display: none; }
html:not(.js) body            { overflow: auto; }

/*---------------------------------------------------------------------------*/
/* Media placeholder — inserted by layout.js beside a lazy image or video    */
/*                                                                           */
/* Absolute against .media-block, which is already position: relative. It sits */
/* over the gap while the file arrives and fades itself out, so a half-       */
/* painted image or a black video frame is never on screen.                  */
/*---------------------------------------------------------------------------*/

.media-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;

	background-color: rgba(0, 0, 0, .05);
}

/*---------------------------------------------------------------------------*/
/* Reveal on scroll                                                          */
/*                                                                           */
/* layout.js primes .reveal with inline opacity, transform and transition, so */
/* there is nothing to declare here — the direction is an argument, not a     */
/* class, and a rule for it would only fight the inline style.                */
/*                                                                           */
/* This block exists to say that on purpose, so the next person does not go   */
/* looking for the missing CSS.                                              */
/*---------------------------------------------------------------------------*/