/*
Theme Name: ASLAC Landscaping
Theme URI: https://aslac.com.au
Author: Break Check
Description: Coming soon page for a landscape construction company. One screen, drawn planting front and back, no settings to touch.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aslac-landscaping
*/

:root {
	--forest: #1F3A2A;
	--paper: #F4F1E8;
	--brass: #B08C44;
	--sage: #93A98D;

	--display: "Fraunces", Georgia, "Times New Roman", serif;
	--text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

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

body {
	margin: 0;
	background: var(--forest);
	color: var(--paper);
	font-family: var(--text);
	-webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------- the screen */

.scene {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	overflow: hidden;
	isolation: isolate;
}

.scene__ground,
.scene__canopy {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.scene__ground {
	z-index: 0;
}

/* In front of the words, and never in the way of them. */
.scene__canopy {
	z-index: 2;
	pointer-events: none;
}

.scene__words {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 24px;
	/* Lifted off dead centre: the planting fills the lower third. */
	transform: translateY(-6vh);
}

/* ----------------------------------------------------------------- wordmark */

.mark__name {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(32px, 4vw, 50px);
	letter-spacing: 0.14em;
	line-height: 1;
	margin: 0 0 16px;
	/* Letter-spacing pushes the block right; pull it back. */
	text-indent: 0.14em;
}

.mark__rule {
	width: 56px;
	height: 2px;
	background: var(--brass);
	margin: 0 auto 14px;
}

.mark__trade {
	margin: 0;
	font-size: clamp(10px, 1.1vw, 12px);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--sage);
	text-indent: 0.24em;
}

/* ------------------------------------------------------------------- status */

.scene__status {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(44px, 7vw, 104px);
	line-height: 1;
	letter-spacing: -0.015em;
	margin: clamp(40px, 7vh, 80px) 0 0;
}

@media (max-width: 600px) {
	.scene__words {
		transform: translateY(-4vh);
	}
}