*{
	box-sizing:border-box;
}

:root{
	--bg-dark:#130b10;
	--bg-red:#2a0f16;
	--gold:#c89b4f;
	--gold-soft:#e6c98d;
	--paper:#f3e2bf;
	--paper-dark:#d9bd84;
	--ink:#25180f;
	--muted:#bca98f;
	--panel:#201018;
}

body{
	margin:0;
	min-height:100vh;
	font-family:Georgia, "Times New Roman", serif;
	background:
		radial-gradient(circle at top, rgba(128, 24, 38, .45), transparent 35%),
		linear-gradient(135deg, #080609, var(--bg-dark) 45%, #080609);
	color:#f8ead0;
}

body:before{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	background-image:
		linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
	background-size:44px 44px;
	opacity:.35;
}

.site-header{
	position:sticky;
	top:0;
	z-index:10;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:20px;
	padding:16px 28px;
	background:rgba(12, 6, 10, .86);
	backdrop-filter:blur(8px);
	border-bottom:1px solid rgba(200, 155, 79, .35);
}

.logo{
	color:var(--gold-soft);
	text-decoration:none;
	font-size:24px;
	letter-spacing:.06em;
	font-weight:bold;
}

nav{
	display:flex;
	gap:18px;
}

nav a{
	color:#f4dfb2;
	text-decoration:none;
}

nav a:hover{
	color:white;
}

.home,.page-shell,.reader-shell{
	width:min(1180px, 94vw);
	margin:0 auto;
	padding:46px 0;
}

.hero-card{
	display:grid;
	grid-template-columns:340px 1fr;
	gap:42px;
	align-items:center;
	padding:36px;
	background:linear-gradient(145deg, rgba(44, 17, 26, .95), rgba(16, 8, 12, .96));
	border:1px solid rgba(200, 155, 79, .45);
	box-shadow:0 24px 80px rgba(0,0,0,.45);
	border-radius:22px;
}

.cover-frame{
	padding:14px;
	border:1px solid rgba(230,201,141,.6);
	background:linear-gradient(145deg, #4d1621, #16080d);
	box-shadow:inset 0 0 35px rgba(0,0,0,.7);
	border-radius:16px;
}

.cover-placeholder{
	min-height:480px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:26px;
	font-size:42px;
	letter-spacing:.08em;
	color:#f4dca4;
	background:
		radial-gradient(circle at center, rgba(200,155,79,.3), transparent 45%),
		linear-gradient(160deg, #621b2a, #12070b 65%);
	border-radius:10px;
	border:1px solid rgba(230,201,141,.35);
}

.eyebrow{
	margin:0 0 10px;
	color:var(--gold);
	text-transform:uppercase;
	font-size:13px;
	letter-spacing:.22em;
}

h1{
	margin:0 0 18px;
	color:#ffe7ad;
	font-size:clamp(34px, 5vw, 66px);
	line-height:1;
}

.synopsis,.page-note{
	color:#e7d1ad;
	font-size:20px;
	line-height:1.7;
}

.button-row{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin-top:26px;
}

.button,button{
	border:1px solid rgba(230,201,141,.7);
	border-radius:999px;
	padding:12px 22px;
	font-family:Georgia, "Times New Roman", serif;
	font-size:17px;
	cursor:pointer;
	text-decoration:none;
}

.button.primary,button{
	background:linear-gradient(#a62535, #621522);
	color:#fff3d6;
}

.button.secondary{
	background:rgba(255,255,255,.06);
	color:#f5dfad;
}

.book-panel{
	padding:34px;
	background:rgba(24, 11, 17, .88);
	border:1px solid rgba(200,155,79,.38);
	border-radius:18px;
	box-shadow:0 20px 65px rgba(0,0,0,.4);
}

.chapter-list{
	margin-top:24px;
	display:grid;
	gap:12px;
}

.arc-title{
	margin:22px 0 6px;
	color:var(--gold-soft);
	font-size:24px;
	border-bottom:1px solid rgba(200,155,79,.35);
	padding-bottom:8px;
}

.chapter-link{
	display:flex;
	justify-content:space-between;
	gap:18px;
	padding:16px 18px;
	color:#f9e4ba;
	text-decoration:none;
	background:linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
	border:1px solid rgba(230,201,141,.18);
	border-radius:12px;
}

.chapter-link:hover{
	border-color:rgba(230,201,141,.65);
	background:rgba(120,35,45,.34);
}

.book-page{
	position:relative;
	margin:0 auto;
	max-width:920px;
	padding:46px clamp(22px, 5vw, 72px);
	color:var(--ink);
	background:
		linear-gradient(90deg, rgba(121,82,33,.18), transparent 8%, transparent 92%, rgba(121,82,33,.18)),
		linear-gradient(180deg, #faeccd, var(--paper));
	border:1px solid #b9893c;
	border-radius:18px;
	box-shadow:
		0 28px 90px rgba(0,0,0,.55),
		inset 0 0 50px rgba(91,55,18,.16);
	transform-origin:left center;
	transition:transform .42s ease, opacity .42s ease, filter .42s ease;
}

.book-page:before{
	content:"";
	position:absolute;
	inset:16px;
	pointer-events:none;
	border:1px solid rgba(124, 78, 25, .28);
	border-radius:12px;
}

.book-page.turning{
	transform:perspective(1200px) rotateY(-8deg) translateX(18px);
	opacity:.35;
	filter:blur(1px);
}

.chapter-top{
	text-align:center;
	margin-bottom:22px;
}

.chapter-top h1{
	color:#3a170d;
	font-size:clamp(30px, 4vw, 48px);
}

.chapter-image{
	display:block;
	width:100%;
	max-height:520px;
	object-fit:cover;
	margin:0 auto 30px;
	border-radius:12px;
	border:1px solid rgba(92,57,20,.35);
	box-shadow:0 12px 28px rgba(69,42,14,.28);
}

.chapter-image[src=""], .chapter-image:not([src]){
	display:none;
}

.chapter-content{
	font-size:21px;
	line-height:1.85;
	white-space:pre-wrap;
}

.reader-nav{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:14px;
	margin-top:42px;
	padding-top:22px;
	border-top:1px solid rgba(90,56,21,.28);
}

.reader-nav a{
	color:#6f1a20;
	font-weight:bold;
	text-decoration:none;
}

.reader-nav button:disabled{
	opacity:.35;
	cursor:not-allowed;
}

footer{
	text-align:center;
	padding:28px;
	color:#bba27d;
}

@media(max-width:760px){
	.site-header{
		position:static;
		flex-direction:column;
		align-items:flex-start;
	}

	.hero-card{
		grid-template-columns:1fr;
		padding:22px;
	}

	.cover-placeholder{
		min-height:300px;
	}

	.reader-nav{
		flex-direction:column;
	}

	.reader-nav button,.reader-nav a{
		width:100%;
		text-align:center;
	}
}

.story-image-block img{
	display:block;
	max-width:100%;
	width:auto;
	height:auto;
	max-height:720px;
	margin:0 auto;
}