/*
Theme Name:  Purdie Creative — Coming Soon
Theme URI:   https://purdiecreative.com
Author:      Purdie Creative
Description: A single-page splash screen announcing the future home of Purdie Creative. Styled after the Purdie Creative business card.
Version:     1.0.1
Requires at least: 5.8
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: purdie-splash
*/

:root {
	--plum:       #9b5b6d; /* card face */
	--plum-deep:  #5b1f2e; /* script ink on the back of the card */
	--blush:      #f4eaea; /* card back */
	--cream:      #fbf2ec; /* lettering on the plum face */
	--line:       rgba(251, 242, 236, 0.55);
	--line-soft:  rgba(251, 242, 236, 0.4);
}

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

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	background: var(--plum);
	color: var(--cream);
	font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
}

/* Subtle paper texture, like a printed card */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0.06;
	background-image: radial-gradient(rgba(0, 0, 0, 0.6) 0.5px, transparent 0.6px);
	background-size: 3px 3px;
}

/* The double frame from the card: a fine solid rule with a dotted rule inside it */
.splash {
	position: fixed;
	inset: clamp(14px, 3.5vw, 40px);
	border: 1px solid var(--line);
	border-radius: clamp(14px, 2.4vw, 26px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.25rem;
}

.splash::before {
	content: "";
	position: absolute;
	inset: clamp(6px, 0.9vw, 10px);
	border: 1.5px dotted var(--line-soft);
	border-radius: clamp(10px, 1.8vw, 18px);
	pointer-events: none;
}

.splash__inner {
	position: relative;
	text-align: center;
	animation: purdie-rise 1.4s ease-out both;
}

.splash__eyebrow {
	margin: 0 0 clamp(0.25rem, 1.5vh, 1rem);
	font-size: clamp(0.7rem, 1.4vw, 0.95rem);
	font-weight: 500;
	letter-spacing: 0.42em;
	padding-left: 0.42em; /* balances the trailing letter-spacing */
	text-transform: uppercase;
	opacity: 0.85;
}

.splash__wordmark {
	margin: 0;
	font-family: "Pinyon Script", "Snell Roundhand", cursive;
	font-weight: 400;
	font-size: clamp(4.5rem, 17vw, 11.5rem);
	line-height: 1.05;
	/* Script letters must touch to join: no tracking, keep kerning and joining ligatures on */
	letter-spacing: 0;
	word-spacing: 0;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures contextual;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	text-rendering: optimizeLegibility;
	white-space: nowrap;
	color: var(--cream);
}

.splash__sub {
	margin: clamp(0.25rem, 1vh, 0.75rem) 0 0;
	font-size: clamp(0.95rem, 2.3vw, 1.45rem);
	font-weight: 500;
	letter-spacing: 0.55em;
	padding-left: 0.55em;
	text-transform: uppercase;
}

.splash__rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: clamp(1.5rem, 4.5vh, 2.75rem) auto clamp(0.9rem, 2.5vh, 1.5rem);
	width: min(220px, 50vw);
	color: var(--line);
}

.splash__rule::before,
.splash__rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
}

.splash__rule span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.splash__note {
	margin: 0;
	font-style: italic;
	font-size: clamp(1rem, 2vw, 1.3rem);
	letter-spacing: 0.04em;
	opacity: 0.9;
}

@keyframes purdie-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

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

/* Short landscape phones */
@media (max-height: 460px) {
	.splash__wordmark { font-size: clamp(3.5rem, 22vh, 6rem); }
	.splash__rule { margin: 0.9rem auto 0.6rem; }
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}