@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap');

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

img {
	max-width: 100%;
	display: block;
}

:root {
	--bg:        #2a2a2a;
	--bg-card:   #201d1a;
	--border:    #888;
	--text:      #d4c9b8;
	--title:      #b87d4b;
	--text-dim:  #7a7068;
	--accent:    #b87d4b;
	--accent-dim:#7a5230;
	--hover-bg:  #252119;
	--open:      #6a9a6a;
	--closed:    #9a6a6a;
}

html {
	background: var(--bg);
	color: var(--text);
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 18px;
	line-height: 1.7;
}

body {
	max-width: unset;
	margin: 0;
	padding: 0;
}

/* ── Sticky header — full viewport width ── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-header img {
	display: block;
	height: 48px;
	width: auto;
}

/* ── Content wrapper ── */
.content {
	max-width: 50%;
	margin: 0 auto;
	padding: 4rem 1.5rem 7rem;
}

section {
	margin-bottom: 4rem;
	border-top: 1px solid var(--border);
	padding-top: 1.5rem;
}

.section-label {
	font-size: 1.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-dim);
	margin-bottom: 1.2rem;
}

/* ── Footer ── */
footer {
	margin-top: 5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
	font-size: 0.8rem;
	color: var(--text-dim);
	font-style: italic;
	text-align: center;
}

footer a {
	color: var(--text-dim);
	text-decoration: none;
}

footer a:hover {
	color: var(--accent);
}


/* ════════════════════════════════════════
   INDEX — About
════════════════════════════════════════ */

.about-text p { margin-bottom: 0.9em; }
.about-text p:last-child { margin-bottom: 0; }


/* ════════════════════════════════════════
   INDEX — Commissions
════════════════════════════════════════ */

.commission-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1.4rem;
}

.status-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

.status-dot.open   { background: var(--open); box-shadow: 0 0 5px var(--open); }
.status-dot.closed { background: var(--closed); }
.commission-status.open   { color: var(--open); }
.commission-status.closed { color: var(--closed); }

.commission-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin-bottom: 1.6rem;
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
    .content {
        max-width: 100%;
        padding: 2rem 1.2rem 5rem;
    }

    .story-page .content {
        max-width: 100%;
    }

    .commission-grid {
        max-width: 100%;
    }
}

.commission-card {
	border: 1px solid var(--border);
	border-radius: 2px;
	padding: 0.9rem 1rem;
}

.card-label {
	font-size: 0.68rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--accent-dim);
	margin-bottom: 0.35rem;
}

.card-value { font-size: 0.95rem; color: var(--text); }

.card-value ul { list-style: none; padding: 0; }
.card-value ul li::before { content: '— '; color: var(--text-dim); }

.price-line {
	display: flex;
	justify-content: space-between;
	font-size: 0.88rem;
	padding: 0.2rem 0;
	border-bottom: 1px solid var(--border);
}
.price-line:last-child { border-bottom: none; }
.price-label { color: var(--text-dim); font-style: italic; }

.contact-line {
	font-size: 0.9rem;
	color: var(--text-dim);
	font-style: italic;
	text-align: center;
}
.contact-line a { color: var(--accent); text-decoration: none; }
.contact-line a:hover { text-decoration: underline; }


/* ════════════════════════════════════════
   INDEX — Story list
════════════════════════════════════════ */

.story-list { list-style: none; }
.story-list li { border-bottom: 1px solid var(--border); }

.story-list a {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 0.4rem;
	text-decoration: none;
	color: var(--text);
	transition: background 0.15s, padding-left 0.15s;
	border-radius: 2px;
}

.story-list a:hover { background: var(--hover-bg); padding-left: 0.9rem; }

.story-thumb {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 2px;
	flex-shrink: 0;
}

.story-text {
	display: flex;
	flex-direction: column;
}
}

.story-list a:hover { background: var(--hover-bg); padding-left: 0.9rem; }

.story-title { font-size: 1.12rem; font-weight: 500; }

.story-meta {
	display: flex;
	gap: 0.8rem;
	margin-top: 0.2rem;
	font-size: 0.82rem;
	color: var(--text-dim);
	font-style: italic;
}

.story-meta .spice::before { content: '| '; }
.story-meta .genre::before { content: '| '; }
.story-meta .length::before { content: '| '; }


/* ════════════════════════════════════════
   STORY PAGE
════════════════════════════════════════ */

.story-page body {
	font-size: 19px;
	line-height: 1.75;
}

.back-link {
	display: inline-block;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-dim);
	text-decoration: none;
	margin-bottom: 3.5rem;
	transition: color 0.15s;
}

.back-link:hover { color: var(--accent); }
.back-link::before { content: '← '; }

.story-header {
	margin-bottom: 3rem;
	border-bottom: 1px solid var(--border);
	padding-bottom: 2rem;
	
}

.story-header .story-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 1000;
	font-size: 3.0rem;
	line-height: 1.2;
	color: var(--title);
	margin-bottom: 0.8rem;
	text-align: center;
}

.story-header .story-meta {
	font-size: 0.83rem;
	color: var(--text-dim);
	font-style: italic;
	display: flex;
	gap: 0.8rem;
	margin-top: 0;
	text-align: center;
}

.story-header .story-meta span + span::before { content: '| '; }

#story-body p {
	text-indent: 2.2em;
	text-align: justify;
	margin-bottom: 0;
	hyphens: auto;
	-webkit-hyphens: auto;
}

#story-body p:first-child { text-indent: 0; }

#story-body hr {
	border: none;
	text-align: center;
	margin: 1.8em 0;
}

#story-body hr::after {
	content: '✦';
	color: var(--accent-dim);
	font-size: 0.9rem;
}

#story-body em { font-style: italic; }

#story-body strong {
	font-weight: 500;
	color: #e0d4c2;
}

#story-body p:first-child::first-letter {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 3.4em;
	font-weight: 300;
	line-height: 0.75;
	float: left;
	color: var(--accent);
}

.story-page footer {
	display: flex;
	justify-content: space-between;
	text-align: left;
}


/* ════════════════════════════════════════
   SPLASH PAGE
════════════════════════════════════════ */

.splash-page html,
.splash-page body {
	height: 100%;
}

.splash-page body {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
}

.splash-wrap {
	position: relative;
	height: 100vh;
	width: min(100vw, 56.25vh);
	flex-shrink: 0;
}

.splash-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.splash-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.5rem;
	gap: 1.8rem;
}

.logo-link {
	display: block;
	width: min(60%, 280px);
	transition: opacity 0.2s, transform 0.2s;
}

.logo-link:hover {
	opacity: 0.85;
	transform: scale(1.03);
}

.logo-link img {
	display: block;
	width: 100%;
	height: auto;
}

.warning {
	max-width: 320px;
	text-align: center;
	font-size: 0.82rem;
	line-height: 1.65;
	color: rgba(212, 201, 184, 1.0);
	background: rgba(42, 42, 42, 0.80);
	border-radius: 3px;
	padding: 0.8rem 1rem;
}

.warning strong {
	display: block;
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(184, 125, 75, 1.0);
	margin-bottom: 0.5rem;
	font-style: normal;
}