
@property --mesh-x1 {
	syntax:"<percentage>";
	inherits:false;
	initial-value:18%;
}

@property --mesh-y1 {
	syntax:"<percentage>";
	inherits:false;
	initial-value:22%;
}

@property --mesh-x2 {
	syntax:"<percentage>";
	inherits:false;
	initial-value:82%;
}

@property --mesh-y2 {
	syntax:"<percentage>";
	inherits:false;
	initial-value:78%;
}

@property --mesh-angle {
	syntax:"<angle>";
	inherits:false;
	initial-value:45deg;
}

:root {
	--ground:#a8503c;
	--ground-deep:#7d3222;
	--soot:#2a1612;
	--accent:#cbd5c0;
	--ink-light:#f5ebe6;
	--ink-muted:#f5ebe6;
	--border:#5a2317;
	--border-subtle:rgba(245, 235, 230, 0.16);
	--border-accent:rgba(203, 213, 192, 0.42);
	--error:#e05d44;
	--success:#cbd5c0;
	--overlay-bg:rgba(42, 22, 18, 0.94);
	--surface-panel:rgba(125, 50, 34, 0.55);
	--surface-lift:#8e3b27;

	--jewi-9ae:"Cinzel Decorative", Georgia, serif;
	--jewi-0bb:"Bitter", Georgia, serif;
	--jewi-89f:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--step--2:clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
	--step--1:clamp(0.85rem, 0.8rem + 0.25vw, 0.96rem);
	--jewi-e48:clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
	--jewi-e9b:clamp(1.18rem, 1.08rem + 0.5vw, 1.38rem);
	--jewi-3bd:clamp(1.42rem, 1.26rem + 0.8vw, 1.75rem);
	--jewi-439:clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
	--jewi-372:clamp(2.15rem, 1.8rem + 1.75vw, 3rem);
	--jewi-110:clamp(2.7rem, 2.2rem + 2.5vw, 4.1rem);
	--step-verb:clamp(3rem, 2.4rem + 4.2vw, 5.8rem);
	--step-quote:clamp(1.5rem, 1.2rem + 1.8vw, 2.6rem);

	--space-3xs:clamp(0.25rem, 0.22rem + 0.15vw, 0.35rem);
	--space-2xs:clamp(0.45rem, 0.4rem + 0.25vw, 0.65rem);
	--space-xs:clamp(0.75rem, 0.7rem + 0.25vw, 0.95rem);
	--space-s:clamp(1rem, 0.92rem + 0.4vw, 1.35rem);
	--space-m:clamp(1.5rem, 1.35rem + 0.75vw, 2.1rem);
	--space-l:clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem);
	--space-xl:clamp(3.25rem, 2.75rem + 2.5vw, 5rem);
	--space-2xl:clamp(4.5rem, 3.8rem + 3.5vw, 7.5rem);

	--frame-padding:clamp(10px, 1.2vw, 20px);
	--frame-border:2px solid var(--border);
	--max-frame-width:1240px;
	--max-measure:68ch;
	--max-measure-narrow:54ch;

	--corner-mark-size:48px;
	--header-offset:72px;

	--ease-refine:cubic-bezier(0.19, 1, 0.22, 1);
	--ease-smooth:cubic-bezier(0.25, 0.1, 0.25, 1);
	--ease-sharp:cubic-bezier(0.4, 0, 0.2, 1);
	--dur-rapid:140ms;
	--dur-moderate:240ms;
	--dur-deliberate:420ms;
	--dur-mesh:24s;
}

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

html {
	background-color:var(--soot);
	color:var(--ink-light);
	font-family:var(--jewi-0bb);
	font-size:100%;
	line-height:1.62;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	scroll-padding-top:var(--header-offset);
	overflow-x:hidden;
}

body {
	background-color:var(--ground);
	color:var(--ink-light);
	min-height:100vh;
	display:flex;
	flex-direction:column;
	position:relative;
	overflow-x:hidden;
	padding:var(--frame-padding);
}

img, picture, svg, video {
	display:block;
	max-width:100%;
	height:auto;
}

input, button, textarea, select {
	font:inherit;
	color:inherit;
}

table {
	border-collapse:collapse;
	width:100%;
}

a {
	color:var(--ink-light);
	text-decoration:underline;
	text-decoration-color:var(--accent);
	text-underline-offset:0.22em;
	transition:color var(--dur-rapid) var(--ease-refine), text-decoration-color var(--dur-rapid) var(--ease-refine);
}

a:hover {
	color:var(--accent);
	text-decoration-color:var(--ink-light);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:3px;
}

h1, h2, h3, h4 {
	font-family:var(--jewi-9ae);
	font-weight:700;
	line-height:1.15;
	color:var(--ink-light);
	letter-spacing:0.02em;
	text-wrap:balance;
}

h1 { font-size:var(--jewi-372); }

h2 { font-size:var(--jewi-439); }

h3 { font-size:var(--jewi-3bd); }

h4 { font-size:var(--jewi-e9b); }

p, li, dd {
	font-size:var(--jewi-e48);
	line-height:1.65;
	color:var(--ink-light);
}

p + p { margin-top:1.15em; }

small, .text-small {
	font-size:var(--step--1);
	line-height:1.5;
	color:var(--ink-muted);
}

.mono, .text-mono {
	font-family:var(--jewi-89f);
	font-size:var(--step--1);
	letter-spacing:0.04em;
}

.accent-text { color:var(--accent); }

.skip-link {
	position:absolute;
	top:-999px;
	left:1.5rem;
	z-index:10000;
	background-color:var(--soot);
	color:var(--accent);
	border:1px solid var(--accent);
	padding:0.75rem 1.25rem;
	font-family:var(--jewi-89f);
	font-size:var(--step--1);
	text-decoration:none;
	border-radius:0;
}

.skip-link:focus { top:1.5rem; }

.boxed-shell {
	width:100%;
	max-width:var(--max-frame-width);
	margin:0 auto;
	border:var(--frame-border);
	background-color:var(--ground);
	position:relative;
	display:flex;
	flex-direction:column;
	min-height:calc(100vh - (var(--frame-padding) * 2));
	box-shadow:0 16px 40px rgba(42, 22, 18, 0.45);
}

.page-container {
	width:100%;
	max-width:1080px;
	margin:0 auto;
	padding-left:clamp(1rem, 3.5vw, 2.5rem);
	padding-right:clamp(1rem, 3.5vw, 2.5rem);
}

.narrow-measure { max-width:var(--max-measure-narrow); }

.standard-measure { max-width:var(--max-measure); }

.rule-divider {
	width:100%;
	height:1px;
	background-color:var(--border);
	border:none;
	margin:var(--space-m) 0;
}

.rule-divider-subtle {
	width:100%;
	height:1px;
	background-color:var(--border-subtle);
	border:none;
}

.rule-vertical {
	width:1px;
	background-color:var(--border);
	align-self:stretch;
}

.section-opener-verb {
	font-family:var(--jewi-9ae);
	font-size:var(--step-verb);
	font-weight:700;
	line-height:0.98;
	letter-spacing:-0.01em;
	color:var(--ink-light);
	margin-bottom:var(--space-s);
	display:block;
}

.section-opener-verb .period { color:var(--accent); }

.section-prose-column {
	max-width:var(--max-measure-narrow);
	display:flex;
	flex-direction:column;
	gap:var(--space-xs);
}

.section-prose-column p {
	color:var(--ink-light);
	font-size:var(--jewi-e48);
}

.full-bleed-band {
	width:100%;
	margin:var(--space-l) 0;
	border-top:1px solid var(--border);
	border-bottom:1px solid var(--border);
	background-color:var(--ground-deep);
	overflow:hidden;
	position:relative;
}

.full-bleed-band img {
	width:100%;
	height:clamp(260px, 42vw, 540px);

	object-fit:cover;
	object-position:center;
	filter:contrast(104%) brightness(96%);
}

.full-bleed-band figcaption {
	font-family:var(--jewi-89f);
	font-size:var(--step--2);
	color:var(--ink-muted);
	padding:0.6rem clamp(1rem, 3vw, 1.5rem);
	background-color:var(--soot);
	border-top:1px solid var(--border);
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	gap:0.5rem;
}

.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0, 0, 0, 0);
	white-space:nowrap;

	border:0;
}

.gradient-mesh-ground {
	position:relative;
	background-color:var(--ground);
	background-image:
		radial-gradient(ellipse 65% 55% at var(--mesh-x1) var(--mesh-y1), rgba(125, 50, 34, 0.85) 0%, transparent 70%),
		radial-gradient(ellipse 60% 50% at var(--mesh-x2) var(--mesh-y2), rgba(203, 213, 192, 0.18) 0%, transparent 65%),
		radial-gradient(circle at 50% 50%, rgba(42, 22, 18, 0.6) 0%, transparent 85%);
	animation:mesh-shift var(--dur-mesh) infinite alternate var(--ease-smooth);
}

@keyframes mesh-shift {
	0% {
		--mesh-x1:18%;
		--mesh-y1:22%;
		--mesh-x2:82%;
		--mesh-y2:78%;
	}
	50% {
		--mesh-x1:42%;
		--mesh-y1:65%;
		--mesh-x2:60%;
		--mesh-y2:30%;
	}
	100% {
		--mesh-x1:75%;
		--mesh-y1:28%;
		--mesh-x2:25%;
		--mesh-y2:85%;
	}
}

.signature-spread {
	padding:var(--space-xl) clamp(1rem, 4vw, 3rem);
	background-color:var(--ground-deep);
	border-top:1px solid var(--border);
	border-bottom:1px solid var(--border);
	position:relative;
	overflow:hidden;
}

.signature-spread::before {
	content:"PURE RADIANCE // TAMPA";
	position:absolute;
	top:1rem;
	left:1.5rem;
	font-family:var(--jewi-89f);
	font-size:var(--step--2);
	color:var(--accent);
	opacity:0.65;
	letter-spacing:0.12em;
}

.signature-quote {
	font-family:var(--jewi-9ae);
	font-size:var(--step-quote);
	line-height:1.25;
	color:var(--ink-light);
	max-width:38ch;
	margin:var(--space-s) 0;
	text-wrap:balance;
}

.signature-quote cite {
	display:block;
	font-family:var(--jewi-89f);
	font-size:var(--step--1);
	font-style:normal;
	color:var(--accent);
	margin-top:var(--space-s);
	letter-spacing:0.05em;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		scroll-behavior:auto !important;
	}
	.gradient-mesh-ground {
		animation:none;
		background-image:
			radial-gradient(ellipse 65% 55% at 20% 25%, rgba(125, 50, 34, 0.85) 0%, transparent 70%),
			radial-gradient(ellipse 60% 50% at 80% 75%, rgba(203, 213, 192, 0.18) 0%, transparent 65%);
	}
}
