/* ==========================================================================
   Writing as Fritzi Cox — a deliberately separate visual world from the
   main Kat Addams brand. Scoped entirely under .fritzi-page so nothing here
   touches (or is touched by) main.css / tokens.css. Loaded only on this page.
   ========================================================================== */

.fritzi-page {
	--fc-bg: #060f0a;
	--fc-bg-deep: #02100b;
	--fc-bg-2: #0d251a;
	--fc-line: rgba(201, 162, 74, 0.35);
	--fc-gold: #c9a24a;
	--fc-gold-bright: #e8cc8a;
	--fc-wine: #6b1230;
	--fc-wine-bright: #9a2049;
	--fc-cream: #f3ead9;
	--fc-muted: rgba(243, 234, 217, 0.62);
	--fc-serif: "Cormorant Garamond", "Playfair Display", serif;
	--fc-label: "Cinzel", "Cormorant Garamond", serif;

	background: var(--fc-bg);
	color: var(--fc-cream);
}

.fritzi-page section { position: relative; }
.fritzi-page .fc-container { max-width: 1180px; margin-inline: auto; padding-inline: var(--space-5); position: relative; z-index: 1; }

.fritzi-page .fc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--fc-label);
	font-size: 0.78rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--fc-gold-bright);
}
.fritzi-page .fc-eyebrow::before,
.fritzi-page .fc-eyebrow::after { content: "+"; opacity: 0.8; }

.fritzi-page .fc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.95em 2.2em;
	border-radius: var(--radius-pill);
	border: 1px solid var(--fc-line);
	color: var(--fc-gold-bright);
	font-family: var(--fc-label);
	font-size: 0.72rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	background: rgba(201, 162, 74, 0.06);
	transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-spring);
}
.fritzi-page .fc-btn:hover { background: rgba(201, 162, 74, 0.16); border-color: var(--fc-gold); transform: translateY(-2px); }
.fritzi-page .fc-btn--solid { background: var(--fc-wine); border-color: var(--fc-wine); color: var(--fc-cream); }
.fritzi-page .fc-btn--solid:hover { background: var(--fc-wine-bright); border-color: var(--fc-wine-bright); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.fc-hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: calc(var(--space-9) + 60px) var(--space-9);
	background:
		radial-gradient(ellipse 70% 50% at 50% 8%, rgba(201, 162, 74, 0.16), transparent 60%),
		radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05), transparent 2%),
		radial-gradient(circle at 78% 32%, rgba(255,255,255,0.06), transparent 1.4%),
		radial-gradient(circle at 60% 68%, rgba(255,255,255,0.05), transparent 1.6%),
		radial-gradient(circle at 35% 78%, rgba(255,255,255,0.04), transparent 1.2%),
		radial-gradient(circle at 88% 82%, rgba(255,255,255,0.05), transparent 1.4%),
		linear-gradient(to bottom, var(--fc-bg-deep), var(--fc-bg) 45%, var(--fc-bg-2) 100%);
	overflow: hidden;
}
.fc-hero::before {
	content: "";
	position: absolute;
	top: 14%;
	left: 50%;
	width: 520px;
	height: 520px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 204, 138, 0.16), transparent 70%);
	filter: blur(4px);
}

.fc-hero__inner { max-width: 720px; }

.fc-monogram {
	width: 74px;
	height: 74px;
	margin: 0 auto var(--space-6);
	border-radius: 50%;
	border: 1px solid var(--fc-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fc-serif);
	font-style: italic;
	font-size: 1.6rem;
	color: var(--fc-gold-bright);
	position: relative;
}
.fc-monogram::before {
	content: "";
	position: absolute;
	inset: -16px;
	border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, var(--fc-line) 0deg 1.2deg, transparent 1.2deg 15deg);
	-webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85%, #000 100%, transparent 100%);
	mask: radial-gradient(closest-side, transparent 84%, #000 85%, #000 100%, transparent 100%);
	opacity: 0.9;
}

.fc-hero h1 {
	font-family: var(--fc-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(2.8rem, 2.1rem + 3.4vw, 5rem);
	line-height: 1.05;
	color: var(--fc-cream);
	margin-top: var(--space-5);
}

.fc-hero__lines {
	margin-top: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	font-family: var(--fc-label);
	font-size: 0.78rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--fc-muted);
}

.fc-hero .fc-btn { margin-top: var(--space-7); }

/* -------------------------------------------------------------------------
   Bio
   ------------------------------------------------------------------------- */
.fc-bio { padding-block: var(--space-9); }
.fc-bio__grid {
	display: grid;
	gap: var(--space-8);
	align-items: center;
}
@media (min-width: 900px) {
	.fc-bio__grid { grid-template-columns: 0.85fr 1.15fr; }
}

.fc-bio__frame {
	position: relative;
	max-width: 360px;
	margin-inline: auto;
}
.fc-bio__frame::before {
	content: "";
	position: absolute;
	inset: -22px;
	border-radius: 200px 200px 12px 12px;
	background: repeating-conic-gradient(from 0deg, var(--fc-line) 0deg 1deg, transparent 1deg 9deg);
	-webkit-mask: radial-gradient(closest-side, transparent 90%, #000 91%);
	mask: radial-gradient(closest-side, transparent 90%, #000 91%);
	opacity: 0.7;
	pointer-events: none;
}
.fc-bio__frame img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 200px 200px 12px 12px;
	border: 1px solid var(--fc-line);
	display: block;
}

.fc-bio__body .fc-script {
	display: block;
	font-family: var(--fc-serif);
	font-style: italic;
	font-size: 1.3rem;
	color: var(--fc-gold-bright);
	margin-bottom: var(--space-3);
}
.fc-bio__body h2 {
	font-family: var(--fc-serif);
	font-style: italic;
	font-weight: 500;
	font-size: var(--text-3xl);
	color: var(--fc-cream);
	margin-bottom: var(--space-4);
}
.fc-bio__body p { color: var(--fc-muted); font-size: var(--text-lg); margin-top: var(--space-4); max-width: 52ch; }
.fc-bio__body .fc-btn { margin-top: var(--space-6); }

/* -------------------------------------------------------------------------
   "The Worlds She Writes"
   ------------------------------------------------------------------------- */
.fc-worlds { padding-block: var(--space-9); text-align: center; }
.fc-worlds__head { margin-bottom: var(--space-8); }
.fc-worlds__head h2 {
	font-family: var(--fc-serif);
	font-style: italic;
	font-weight: 500;
	font-size: var(--text-3xl);
	color: var(--fc-cream);
	margin-top: var(--space-3);
}

.fc-worlds__row {
	display: grid;
	gap: var(--space-7);
	max-width: 920px;
	margin-inline: auto;
}
@media (min-width: 768px) {
	.fc-worlds__row { grid-template-columns: repeat(3, 1fr); align-items: start; }
	.fc-worlds__row > div:nth-child(2) { transform: translateY(var(--space-7)); }
}

.fc-world {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}
.fc-world__circle {
	width: 168px;
	height: 168px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fc-line);
	background: radial-gradient(circle at 35% 30%, rgba(201,162,74,0.14), var(--fc-bg-2) 70%);
}
.fc-world__circle svg { width: 46px; height: 46px; stroke: var(--fc-gold-bright); }
.fc-world h3 {
	font-family: var(--fc-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--fc-cream);
}
.fc-world p { color: var(--fc-muted); font-size: var(--text-sm); max-width: 22ch; }

/* -------------------------------------------------------------------------
   Books
   ------------------------------------------------------------------------- */
.fc-books { padding-block: var(--space-9); background: var(--fc-bg-2); }
.fc-books__head { text-align: center; margin-bottom: var(--space-8); }
.fc-books__head h2 {
	font-family: var(--fc-serif);
	font-style: italic;
	font-weight: 500;
	font-size: var(--text-3xl);
	color: var(--fc-cream);
	margin-top: var(--space-3);
}
.fc-books__empty { text-align: center; color: var(--fc-muted); }

.fc-book-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .fc-book-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .fc-book-grid { grid-template-columns: repeat(4, 1fr); } }

.fc-book-card { display: block; text-align: center; }
.fc-book-card__cover {
	position: relative;
	border-radius: 140px 140px 8px 8px;
	overflow: hidden;
	border: 1px solid var(--fc-line);
	aspect-ratio: 2 / 3;
	background: var(--fc-bg);
}
.fc-book-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.fc-book-card:hover .fc-book-card__cover img { transform: scale(1.05); }
.fc-book-card__title {
	display: block;
	font-family: var(--fc-serif);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--fc-cream);
	margin-top: var(--space-4);
}
.fc-book-card__hook { display: block; color: var(--fc-muted); font-size: var(--text-xs); margin-top: var(--space-2); }

/* -------------------------------------------------------------------------
   Divider
   ------------------------------------------------------------------------- */
.fc-divider { padding-block: var(--space-8); display: flex; justify-content: center; }
.fc-divider svg { width: 64px; height: 64px; stroke: var(--fc-gold); opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
	.fritzi-page * { transition: none !important; }
}