/* ──────────────────────────────────────────────────────────────────────────
	ivanlcl.com — style.css
   ──────────────────────────────────────────────────────────────────────────

	01.		Palette
	02.		Fonts
	03.		Base styles
	04.		Style board			/iris
	05.		Shelf
	06.		Book spine
	07.		Book cover

   ────────────────────────────────────────────────────────────────────────── */

/* ── 01. Palette - iris at dawn ──
   ────────────────────────────────────────────────────────────────────────── */
:root {
	/* ── Darker colors ── */
	--dawn-depth:	#171520;
	--dawn-shadow:	#1f1d2c;
	--dawn-grace:	#292738;
	--dawn-bloom:	#474468;

	/* ── Lighter colors ── */
	--iris-veil:	#7874a8;
	--iris-mist:	#b8b4d0;
	--iris-silk:	#e6e4f2;
	--iris-dawn:	#8084c8;
	--iris-blush:	#7078bc;
	--iris-petal:	#98a0d8;
}
/* ────────────────────────────────────────────────────────────────────────── */

/* ── 02. Fonts ──
   ────────────────────────────────────────────────────────────────────────── */
/* ── Spectral ──
   ────────────────────────────────── */
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-ExtraLight.ttf');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-Light.ttf');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-Regular.ttf');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-Medium.ttf');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-SemiBold.ttf');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-Bold.ttf');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-ExtraBold.ttf');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-ExtraLightItalic.ttf');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-LightItalic.ttf');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-Italic.ttf');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-MediumItalic.ttf');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-SemiBoldItalic.ttf');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-BoldItalic.ttf');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Spectral';
	src: url('fonts/Spectral/Spectral-ExtraBoldItalic.ttf');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

/* ── Geist ──
   ────────────────────────────────── */
@font-face {
	font-family: 'Geist';
	src: url('fonts/Geist/Geist-VariableFont_wght.ttf');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Geist';
	src: url('fonts/Geist/Geist-Italic-VariableFont_wght.ttf');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* ── Geist Mono ──
   ────────────────────────────────── */
@font-face {
	font-family: 'Geist Mono';
	src: url('fonts/Geist_Mono/GeistMono-VariableFont_wght.ttf');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Geist Mono';
	src: url('fonts/Geist_Mono/GeistMono-Italic-VariableFont_wght.ttf');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
/* ────────────────────────────────────────────────────────────────────────── */

/* ── 03. Base styles ──
   ────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: clamp(14px, 1.5vw, 24px);
}

body {
	background-color: var(--dawn-depth);
	color: var(--iris-silk);
	font-family: 'Spectral', Georgia, serif;
	font-weight: 300;
	font-size: 0.75rem;
	line-height: 1.85;
	min-height: 100vh;
}
/* ────────────────────────────────────────────────────────────────────────── */

/* ── 04. Style board ──
   ────────────────────────────────────────────────────────────────────────── */
.style-room {
	min-height: 100vh;
	padding: 4rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 4rem;
}
.style-eyebrow {
	font-family: 'Geist Mono', monospace;
	font-size: 0.55rem;
	letter-spacing: .14em;
	color: var(--dawn-bloom);
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}
.style-page-title {
	font-family: 'Spectral', serif;
	font-size: 1.65rem;
	font-weight: 300;
	color: var(--iris-silk);
}
.style-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.style-section-label {
	font-family: 'Geist Mono', monospace;
	font-size: 0.55rem;
	letter-spacing: .14em;
	color: var(--dawn-bloom);
	text-transform: uppercase;
	padding-bottom: 0.6rem;
	border-bottom: .5px solid var(--dawn-grace);
}
.palette-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.palette-group-label {
	font-family: 'Geist Mono', monospace;
	font-size: 0.5rem;
	letter-spacing: .12em;
	color: var(--dawn-bloom);
	text-transform: uppercase;
}
.swatch-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.swatch {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.swatch-square {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.4rem;
}
.swatch-name {
	font-family: 'Geist Mono', monospace;
	font-size: 0.5rem;
	letter-spacing: .06em;
	color: var(--iris-veil);
	line-height: 1.4;
}
.swatch-hex {
	font-family: 'Geist Mono', monospace;
	font-size: 0.5rem;
	letter-spacing: .04em;
	color: var(--dawn-bloom);
}
.type-role-row {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: .5px solid var(--dawn-grace);
}
.type-role-row:first-child {
	padding-top: 0;
}
.type-role-row:last-child {
	border-bottom: none;
}
.type-role-meta {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	width: 10rem;
	flex-shrink: 0;
}
.type-role-name {
	font-family: 'Geist Mono', monospace;
	font-size: 0.5rem;
	letter-spacing: .06em;
	color: var(--iris-veil);
}
.type-role-values {
	font-family: 'Geist Mono', monospace;
	font-size: 0.5rem;
	letter-spacing: .04em;
	color: var(--dawn-bloom);
	line-height: 1.8;
}
.type-role-sample {
	flex: 1;
}
/* ────────────────────────────────────────────────────────────────────────── */

/* ── 05. Shelf ──
   ────────────────────────────────────────────────────────────────────────── */
.stash-room {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 4rem 2rem;
	gap: 1.2rem;
}

.shelf-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.niche {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 0.4rem;
	padding: 1rem 1.2rem 0.85rem;
	border: 0.5px solid var(--dawn-bloom);
	border-radius: 0.75rem;
}
/* ────────────────────────────────────────────────────────────────────────── */

/* ── 06. Book spine ──
   ────────────────────────────────────────────────────────────────────────── */
.book {
	width: 3rem;
	background: var(--dawn-shadow);
	border: 0.5px solid var(--dawn-grace);
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	transition: transform .25s, border-color .25s, opacity .2s;
}

.book:hover {
	border-color: var(--iris-dawn);
	transform: translateY(-0.5rem);
}

.book:hover .book-title {
	color: var(--iris-petal);
}

.book.dimmed {
	opacity: 0;
	pointer-events: none;
}

.book-title {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: 'Geist', sans-serif;
	font-size: 0.6rem;
	font-weight: 300;
	color: var(--iris-veil);
	letter-spacing: 0.07em;
	user-select: none;
	padding: 0.75rem 0;
	transition: color .2s;
}

.book-slot.empty {
	width: 3rem;
	height: 10rem;
	border: 0.5px dashed var(--dawn-grace);
	border-radius: 0.5rem;
	flex-shrink: 0;
	opacity: 0.15;
}
/* ────────────────────────────────────────────────────────────────────────── */

/* ── 07. Book cover ──
   ────────────────────────────────────────────────────────────────────────── */
.cover-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
}

.cover-overlay.show {
	opacity: 1;
	pointer-events: all;
}

.cover-card {
	cursor: default;
	background: var(--dawn-grace);
	border: 0.5px solid var(--iris-dawn);
	border-radius: 0.6rem;
	box-shadow: 0 12px 40px rgba(0,0,0,0.65);
	width: 13rem;
	padding: 1.4rem 1.3rem 1.1rem;
}

.cover-eyebrow {
	font-family: 'Geist Mono', monospace;
	font-size: 0.55rem;
	letter-spacing: 0.14em;
	color: var(--dawn-bloom);
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.cover-title {
	font-family: 'Spectral', serif;
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--iris-silk);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.cover-sub {
	font-family: 'Spectral', serif;
	font-size: 0.75rem;
	font-weight: 300;
	color: var(--iris-veil);
	line-height: 1.65;
	margin-bottom: 0.7rem;
}

.cover-divider {
	height: 0.5px;
	background: var(--dawn-bloom);
	margin-bottom: 0.7rem;
}

.cover-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 0.7rem;
}

.chip {
	font-family: 'Geist Mono', monospace;
	font-size: 0.55rem;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: var(--iris-petal);
	background: var(--dawn-shadow);
	border-radius: 0.35rem;
	padding: 0.15rem 0.4rem;
}

.cover-meta {
	font-family: 'Geist', sans-serif;
	font-size: 0.65rem;
	font-weight: 300;
	color: var(--iris-veil);
	margin-bottom: 1.2rem;
}

.cover-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.btn-back {
	font-family: 'Geist', sans-serif;
	font-size: 0.6rem;
	font-weight: 300;
	color: var(--dawn-bloom);
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	letter-spacing: 0.04em;
	transition: color .15s;
}

.btn-back:hover {
	color: var(--iris-veil);
}

.btn-open {
	font-family: 'Geist Mono', monospace;
	font-size: 0.55rem;
	font-weight: 300;
	color: var(--iris-petal);
	cursor: pointer;
	background: none;
	border: 0.5px solid var(--iris-dawn);
	border-radius: 0.35rem;
	padding: 0.25rem 0.6rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: color .15s, border-color .15s;
}

.btn-open:hover {
	color: var(--iris-silk);
	border-color: var(--iris-petal);
}
/* ────────────────────────────────────────────────────────────────────────── */