/*
Theme Name: The Hatbox
Theme URI: https://studio.theplumhat.co.za
Author: Monica Visser
Description: The custom WordPress theme for The Hatbox — Dispatches from a Technicolour Mind.
Version: 1.0
Text Domain: the-hatbox
*/

/* ==================================================
   THE HATBOX — THRESHOLD
   ================================================== */

.hatbox-home {
	margin: 0;
	padding: 0;
}

.hatbox-threshold {
	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 620px;
	overflow: hidden;
	background: #292521;
}

.hatbox-threshold__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.hatbox-threshold__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* A very gentle veil so the words remain readable
   without hiding the artwork. */
.hatbox-threshold::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			rgba(25, 18, 20, 0.32) 0%,
			rgba(25, 18, 20, 0.08) 28%,
			rgba(25, 18, 20, 0.00) 58%,
			rgba(25, 18, 20, 0.28) 100%
		);
}

.hatbox-threshold__words {
	position: absolute;
	z-index: 2;
	top: 7%;
	left: 7%;
	right: 7%;
	margin: 0;
	color: #F2E9D8;
}

.hatbox-threshold__title {
	margin: 0;
	color: #F2E9D8;
	font-size: clamp(2.4rem, 10.5vw, 4rem);
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: 0.025em;
}

.hatbox-threshold__tagline {
	margin: 0.65rem 0 0;
	max-width: 19rem;
	color: #F2E9D8;
	font-size: 0.95rem;
	line-height: 1.35;
	font-style: italic;
}

.hatbox-threshold__invitation {
	position: absolute;
	top: calc(100svh - 10rem);
	left: 0;
	margin: 0;
	color: #F2E9D8;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.65rem;
	line-height: 1;
}

.hatbox-threshold__cue {
	position: absolute;
	z-index: 2;
	left: 7%;
	bottom: 3.2rem;
	margin: 0;
	color: #F2E9D8;
	font-size: 1.15rem;
	line-height: 1;
}

/* Remove WordPress's default block spacing here. */
.hatbox-threshold > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ==================================================
   THE HATBOX — THE EXHALE
   ================================================== */

.hatbox-exhale {
	min-height: 82svh;
	display: flex;
	align-items: center;
	background: #F2E9D8;
	padding: 5.5rem 7%;
}

.hatbox-exhale__inner {
	width: 100%;
	max-width: 34rem;
	margin: 0 auto;
}

.hatbox-exhale__title {
	margin: 0 0 2.4rem;
	color: #422334;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(2.2rem, 10vw, 3.5rem);
	font-weight: 500;
	line-height: 1.05;
}

.hatbox-exhale__text {
	margin: 0;
	max-width: 31rem;
	color: #292521;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.08rem;
	line-height: 1.75;
}

.hatbox-exhale__text br {
	display: block;
	content: "";
	margin-bottom: 0.85rem;
}
/* ==================================================
   THE HATBOX — THE ROOMS
   ================================================== */

.hatbox-rooms {
	background: #F2E9D8;
	padding: 0;
}

.hatbox-rooms__intro {
	padding: 6rem 7% 4.5rem;
	max-width: 34rem;
	margin: 0 auto;
}

.hatbox-rooms__eyebrow {
	margin: 0 0 0.8rem;
	color: #697057;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.18em;
}

.hatbox-rooms__heading {
	margin: 0;
	color: #422334;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(3rem, 14vw, 5rem);
	font-weight: 500;
	line-height: 0.95;
}


/* Individual room */

.hatbox-room {
	position: relative;
	width: 100%;
	min-height: 88svh;
	overflow: hidden;
	background: #292521;
}

.hatbox-room__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.hatbox-room__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.hatbox-room::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			rgba(25, 18, 20, 0) 52%,
			rgba(25, 18, 20, 0.12) 70%,
			rgba(25, 18, 20, 0.58) 100%
		);
}

.hatbox-room__words {
	position: absolute;
	z-index: 2;
	left: 7%;
	right: 7%;
	bottom: 6%;
	margin: 0;
	color: #F2E9D8;
}

.hatbox-room__title {
	margin: 0;
	color: #F2E9D8;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
}

.hatbox-room__line {
	margin: 0.65rem 0 0;
	color: #F2E9D8;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(1.45rem, 6.2vw, 2.1rem);
	font-style: italic;
	line-height: 1.1;
}

.hatbox-room > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
/* ==================================================
   THE HATBOX — WHAT DID YOU BRING WITH YOU?
   ================================================== */

.hatbox-brought {
	background: #F2E9D8;
	padding: 7rem 7% 8rem;
	color: #292521;
	overflow: hidden;
}


/* ---------- INTRO ---------- */

.hatbox-brought__intro {
	max-width: 34rem;
	margin: 0 auto 4.75rem;
}

.hatbox-brought__eyebrow {
	margin: 0;
	color: #697057;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.16em;
}

.hatbox-brought__invitation {
	margin: 0.8rem 0 0;
	color: #422334;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.35rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.8;
}


/* ---------- SHARED ---------- */

.hatbox-brought__path {
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
}

.hatbox-brought__heading {
	margin: 0;
	color: #422334;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 400;
}


/* ==================================================
   SOMETHING I'M CARRYING
   ================================================== */

.hatbox-brought__carrying {
	margin-bottom: 12rem;
}

.hatbox-brought__carrying .hatbox-brought__heading {
	max-width: none;
	color: #697057;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 0.95rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.08em;
}


/* The open field */

.hatbox-brought__carrying .hatbox-brought__choices {
	position: relative;
	height: 35rem;
	margin-top: 2.5rem;
}


/* Remove the old "button" appearance */

.hatbox-brought__carrying .hatbox-brought__choices p {
	position: absolute;
	width: max-content;
	max-width: 72%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #422334;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 400;
	line-height: 1.8;
	white-space: nowrap;
}


/* Each word gets its own place and voice */

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(1) {
	top: 2%;
	left: 7%;
	font-size: 2.6rem;
	font-style: italic;
	opacity: 0.88;
	transform: rotate(-2deg);
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(2) {
	top: 9%;
	right: 8%;
	font-size: 1.25rem;
	letter-spacing: 0.05em;
	opacity: 0.55;
	transform: rotate(1deg);
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(3) {
	top: 21%;
	left: 39%;
	font-size: 2rem;
	opacity: 0.72;
	transform: rotate(1.5deg);
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(4) {
	top: 31%;
	left: 9%;
	font-size: 2.35rem;
	font-style: italic;
	color: #7B6640;
	opacity: 0.78;
	transform: rotate(-1deg);
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(5) {
	top: 28%;
	right: 5%;
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	opacity: 0.43;
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(6) {
	top: 43%;
	left: 47%;
	font-size: 1.45rem;
	font-style: italic;
	opacity: 0.62;
	transform: rotate(-1deg);
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(7) {
	top: 51%;
	left: 5%;
	font-size: 1.2rem;
	opacity: 0.5;
	transform: rotate(1deg);
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(8) {
	top: 56%;
	right: 8%;
	font-size: 2.25rem;
	font-style: italic;
	opacity: 0.8;
	transform: rotate(-1.5deg);
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(9) {
	top: 66%;
	left: 26%;
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	opacity: 0.42;
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(10) {
	top: 72%;
	right: 3%;
	font-size: 1.65rem;
	opacity: 0.62;
	transform: rotate(1deg);
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(11) {
	top: 79%;
	left: 4%;
	font-size: 2.4rem;
	font-style: italic;
	opacity: 0.74;
	transform: rotate(-1deg);
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(12) {
	top: 89%;
	left: 31%;
	font-size: 1.4rem;
	opacity: 0.58;
	transform: rotate(1deg);
}

.hatbox-brought__carrying .hatbox-brought__choices p:nth-child(13) {
	top: 96%;
	right: 2%;
	font-size: 1rem;
	font-style: italic;
	opacity: 0.4;
}


/* ==================================================
   WHERE WOULD YOU LIKE TO LINGER?
   ================================================== */

.hatbox-brought__linger {
	padding-top: 2rem;
}

.hatbox-brought__linger .hatbox-brought__heading {
	max-width: none;
	color: #697057;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 0.95rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1.9;
	letter-spacing: 0.08em;
}


/* A second, quieter field */

.hatbox-brought__choices--linger {
	position: relative;
	height: 31rem;
	margin-top: 10.5rem;
	border: 0;
}

.hatbox-brought__choices--linger p {
	position: absolute;
	width: max-content;
	max-width: 88%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #292521;
	font-family: "Source Serif 4", Georgia, serif;
	line-height: 1.5;
}

.hatbox-brought__choices--linger p::after {
	content: none;
}


/* The places to linger */

.hatbox-brought__choices--linger p:nth-child(1) {
	top: 5%;
	left: 2%;
	font-size: 1.3rem;
	font-style: italic;
	opacity: 0.72;
}

.hatbox-brought__choices--linger p:nth-child(2) {
	top: 16%;
	right: 1%;
	font-size: 1.05rem;
	opacity: 0.58;
}

.hatbox-brought__choices--linger p:nth-child(3) {
	top: 31%;
	left: 9%;
	font-size: 1.2rem;
	font-style: italic;
	opacity: 0.76;
}

.hatbox-brought__choices--linger p:nth-child(4) {
	top: 47%;
	right: 8%;
	font-size: 1.1rem;
	opacity: 0.5;
}

.hatbox-brought__choices--linger p:nth-child(5) {
	top: 61%;
	left: 1%;
	font-size: 1.25rem;
	font-style: italic;
	opacity: 0.7;
}

.hatbox-brought__choices--linger p:nth-child(6) {
	top: 76%;
	right: 13%;
	font-size: 1.3rem;
	opacity: 0.72;
}

.hatbox-brought__choices--linger p:nth-child(7) {
	top: 92%;
	left: 17%;
	font-size: 1.05rem;
	font-style: italic;
	opacity: 0.46;
}
/* ---------- THE WATCHMAKER'S BALANCE WHEEL ---------- */

.hatbox-brought__balance-wheel {
	position: absolute;
	z-index: 0;
	top: 44%;
	left: 67%;
	width: 4.75rem;
	margin: 0;
	opacity: 0.10;
	transform: rotate(-17deg);
	pointer-events: none;
}

.hatbox-brought__balance-wheel img {
	display: block;
	width: 100%;
	height: auto;
}

.hatbox-brought__carrying .hatbox-brought__choices > p {
	z-index: 1;
}

/* ---------- REMOVE WORDPRESS DEFAULT BLOCK GAPS ---------- */

.hatbox-brought > *,
.hatbox-brought__intro > *,
.hatbox-brought__path > *,
.hatbox-brought__choices > * {
	margin-block-start: 0;
	margin-block-end: 0;
}