/* ==========================================================================
   THE NARRATIVE COLLECTIVE
   ITCSS — Inverted Triangle CSS
   Specificity and reach increase as you move down the file.

   1. Settings  — global variables, config
   2. Tools     — global mixin-like helpers (custom properties, functions)
   3. Generic   — resets, box-sizing, ground-zero styles
   4. Elements  — bare HTML element defaults (h1, p, a, body...)
   5. Objects   — undecorated layout patterns (o-)
   6. Components — specific, decorated UI pieces (c-)
   7. Utilities — single-purpose overrides (u-)
   ========================================================================== */



/* ==========================================================================
   1. SETTINGS
   ========================================================================== */

:root {
	/* Colour */
	--color-deep-teal: #1f5a5b;
	--color-terracotta-rose: #b8695c;
	--color-sand: #f4ecdf;
	--color-cream: #fbf8f2;
	--color-charcoal: #2b2b28;
	--color-olive: #616648;

	--color-bg: var(--color-cream);
	--color-text: var(--color-deep-teal);
	--color-accent: var(--color-terracotta-rose);

	/* Type */
	--font-family-heading: "Cormorant Garamond", Georgia, serif;
	--font-family-script: "The Nautigal", cursive;
	--font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-size-base: 1rem;
	--line-height-base: 1.6;

	/* Spacing */
	--space-s: 1rem;
	--space-m: 2rem;
	--space-l: 4rem;
}



/* ==========================================================================
   2. TOOLS
   ========================================================================== */

:root {
	/* Viewport height, with a safe fallback for browsers without dvh support */
	--viewport-height: 100vh;
}

@supports (height: 100dvh) {
	:root {
		--viewport-height: 100dvh;
	}
}

@keyframes u-fade-up-in {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
	to {
		opacity: var(--reveal-opacity, 1);
		transform: translateY(0);
	}
}

@keyframes u-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}


/* ==========================================================================
   3. GENERIC
   ========================================================================== */

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

html {
	height: 100%;
}

body {
	height: var(--viewport-height);
	overflow: hidden;
}



/* ==========================================================================
   4. ELEMENTS
   ========================================================================== */

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text);
	background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

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



/* ==========================================================================
   5. OBJECTS
   ========================================================================== */

.o-page {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: var(--viewport-height);
	width: 100%;
	padding: var(--space-m) var(--space-m) 10rem;
	text-align: center;
	overflow: hidden;
}

.o-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 58rem;
}

.o-page--bg4 {
	background-image: linear-gradient(rgba(251, 248, 242, 0.65), rgba(251, 248, 242, 0.65)), url("../assets/coming-soon-bg4.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

.c-logo,
.c-heading,
.c-subtext,
.c-cta {
	opacity: 0;
	animation: u-fade-up-in 0.8s ease forwards;
}

.c-logo {
	width: 100%;
	max-width: 19rem;
	margin-bottom: var(--space-s);
	animation-delay: 0.1s;
}

.c-heading {
	font-family: var(--font-family-heading);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(2.5rem, 6.5vw, 4.25rem);
	line-height: 1.15;
	text-transform: capitalize;
	color: var(--color-charcoal);
	max-width: 54rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-s);
	animation-delay: 0.45s;
}

.c-subtext {
	font-family: var(--font-family-base);
	font-weight: 300;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-charcoal);
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-m);
	--reveal-opacity: 0.85;
	animation-delay: 0.6s;
}

.c-cta {
	display: flex;
	animation-delay: 0.75s;
}

@media (prefers-reduced-motion: reduce) {
	.c-logo,
	.c-heading,
	.c-subtext,
	.c-cta {
		animation: none;
		opacity: var(--reveal-opacity, 1);
	}
}

.c-button {
	display: inline-block;
	font-family: var(--font-family-base);
	font-weight: 300;
	font-size: 0.9375rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-cream);
	background-color: var(--color-olive);
	padding: 0.9rem 2.25rem;
	border-radius: 2rem;
	transition: background-color 0.2s ease;
}

.c-button:hover {
	background-color: var(--color-terracotta-rose);
}

.c-marquee {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.c-marquee-track {
	display: flex;
	gap: var(--space-l);
	width: max-content;
	animation: u-marquee 32s linear infinite;
}

.c-marquee-item {
	display: flex;
	align-items: center;
	gap: var(--space-l);
	flex-shrink: 0;
	font-family: var(--font-family-script);
	font-weight: 400;
	font-size: clamp(3.5rem, 2rem + 7vw, 7rem);
	line-height: 1.4;
	white-space: nowrap;
	color: var(--color-terracotta-rose);
}

.c-marquee-sep {
	font-size: 0.22em;
	color: var(--color-terracotta-rose);
}

@media (prefers-reduced-motion: reduce) {
	.c-marquee-track {
		animation: none;
	}
}


/* ==========================================================================
   7. UTILITIES
   ========================================================================== */

.u-hidden {
	display: none !important;
}

.u-text-center {
	text-align: center !important;
}

@media (max-width: 600px) {
	.o-page {
		padding: var(--space-s) var(--space-s) 7rem;
	}

	.c-logo {
		max-width: 13rem;
	}
}