:root{
    --cream:#F1E7DC;
    --dark: #1a1410;
    --red:  #CE4749;
    --yellow:#E2A938;
    --paper:#e8ddd2;
    --ink:  #1e1010;
    --ink-light:#2c1a1a;
}

*, *::before, *::after{ 
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html{ 
	scroll-behavior:smooth;
	scroll-padding-top:72px;
}

body{
    background:var(--cream);
    color:var(--ink);
    font-family:"DM Mono", monospace;
    overflow-x:hidden;
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%23CE4749'/%3E%3C/svg%3E") 10 10, auto;
	font-size:16px;
	line-height:1.8;
	padding:0;
	margin:0;
	position:relative;
	-webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
}

/*body::before{
    content:"";
    position:fixed;
	inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events:none;
	z-index:50;
	opacity:0.35;
}*/

img{ 
	border:0;
	width:100%;
	height:auto;
}
p{ 
	margin-bottom:1em;
	font-size:.9em;
}
a{
	text-decoration:none;
	color:var(--red);
	transition:.5s color;
}
a:hover{ color:var(--ink-light); }
h1{ line-height:1; }
h3{
	font-size:1.8em;
	font-family:"Playfair Display", serif;
	font-weight:900;
	margin:0 0 .2em;
	font-style:italic;
}
h2{
	font-family:"Playfair Display", serif;
	font-size:2.4em;
    font-weight:700;
    line-height:1.2;
    margin-bottom:1.5rem;
	position:relative;
}
h2 em{ color:var(--yellow); }

/* NAV */
nav{
    position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:100;
    display:flex;
	justify-content:space-between;
	align-items:center;
    padding:1.2rem 3rem;
    background:rgba(241, 231, 220, 0.92);
    backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(206, 71, 73, 0.18);
    height:64px;
}
.nav-logo{ 
	font-family:"Bebas Neue", sans-serif;
	font-size:1.6rem;
	letter-spacing:0.15em;
	color:var(--ink);
	text-decoration:none; 
}
.red-k{ color:var(--red); }
.nav-links{ 
	display:flex;
    gap:2.5rem;
    list-style:none;
}
.nav-links a{
	font-family:"DM Mono", monospace;
    font-size:0.9rem;
    letter-spacing:0.2em;
	text-transform:uppercase;
    color:var(--ink);
    text-decoration:none;
	position:relative;
    transition:color 0.2s;
}
.nav-links a::after{
	content:"";
    position:absolute;
    bottom:-3px;
    left:0;
	width:0;
    height:1px;
    background:var(--red);
    transition:width 0.3s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--red); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.closer{
	padding-bottom:.6em;
	font-size:1.2em;
	display:none;
}
.closer a{ color:var(--red); }
.showM{
	display:none;
	width:1.2em;
	height:auto;
	cursor:pointer;
	stroke:var(--ink);
	stroke-width:6;
}
#line1, #line2, #line3{ transition:.3s transform; }
#line1{ transform:translateY(15%); }
#line2{ transform:translateY(0); }
#line3{ transform:translateY(-15%); }
.showM:hover #line1, .showM:hover #line3{ transform:translateY(0); }

/* HERO */
.bookcover{
	width:100%;
	height:auto;
	margin:3% auto -4% auto;
	padding:0 0 7% 0;
	position:relative;
	background:url("images/bookshadow.png") no-repeat;
	background-size:93% 100%;
	background-position:80% top;
}
.coverdiv{
	position:relative;
	width:77%;
	height:auto;
	z-index:1;
	top:0;
	left:10%;
	line-height:0;
	border-radius:3px;
	overflow:hidden;
	border-top:1px solid rgba(0,0,0,0.13);
	border-bottom:1px solid rgba(0,0,0,0.4);
}
.cover{
	position:relative;
	z-index:1;
	width:100%;
	top:0;
	left:0;
	height:100%;
}
.overcover{
	position:absolute;
	top:0;
	left:0;
	z-index:30;
	width:100%;
	height:100%;
	pointer-events:none;
	box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
}
.hero{
	min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1.5fr;
	position:relative;
    overflow:hidden;
    padding-top:1em;
}
.hero-left{
	display:flex;
    flex-direction:column;
    justify-content:center;
	padding:4rem 4rem 4rem 5rem;
    position:relative;
    z-index:2;
}
.hero-eyebrow{
	font-size:0.8rem;
    letter-spacing:0.35em;
    text-transform:uppercase;
	color:var(--red);
    margin-bottom:1.5rem;
}
.hero-greeting{
	font-family:"Playfair Display", serif;
	font-size:clamp(2.6rem, 4.5vw, 4.8rem);
    font-weight:900;
    line-height:1.06;
	margin-bottom:2rem;
}
.hero-greeting em{ 
	font-style:italic;
    color:var(--red);
}
.hero-body{
	font-size:1rem;
    max-width:38ch;
    color:#5a3a3a;
    margin-bottom:1rem;
}
.hero-cta{
	display:inline-flex;
    align-items:flex-start;
	text-align:left;
    gap:0.75rem;
    font-family:"DM Mono", monospace;
	font-size:1rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
	text-decoration:none;
	transition:background 0.2s ease, transform 0.2s ease;
}
.buyNowArea{
    width:100%;
    height:auto;
    text-align:left;
    max-width:330px;
    margin:0 auto 0 0;
    font-size:0;
}
.buyNowButton{
    width:22.5%;
    margin:0 1% 0 0;
    display:inline-block;
    cursor:pointer;
    position:relative;
    border-radius:.2rem;
    overflow:hidden;
    line-height:0;
    background:var(--red);
    transition:.5s background;
}
.buyNowButton svg{ width:100%; height:auto; }
.buyNowButton a{
    position:absolute;
    width:100%;
    height:100%;
    z-index:100;
    left:0;
    top:0;
}
.svgcolor1{ transition:.5s fill; fill:var(--yellow); }
.svgcolor2{ transition:.5s fill; fill:#fff; }
.svgback{ transition:.5s fill; fill:var(--red); }
.buyNowButton:hover .svgback{ fill:var(--yellow); }
.buyNowButton:hover{ background:var(--yellow); }
.buyNowButton:hover .svgcolor1{ fill:var(--red); }

/* HERO RIGHT */
.hero-right{
	position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
	overflow:hidden;
    background:var(--yellow) url("images/paper.jpg") center / 400px auto repeat;
    padding:5rem 2rem 2rem;
}
.hero-right::before{
	content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:70px;
	background:var(--cream);
    clip-path:polygon(0 0, 100% 0, 30% 100%, 0 100%);
	z-index:2;
    pointer-events:none;
}
.hero-bg-text{
	position:absolute;
    font-family:"Bebas Neue", sans-serif;
	font-size:clamp(10rem, 20vw, 24rem);
    color:rgba(0,0,0,0.07);
	line-height:0.85;
    right:-1rem;
    top:50%;
    transform:translateY(-50%);
	user-select:none;
    pointer-events:none;
    z-index:1;
}

/* Book image — standalone cover, no crop needed */
.book-3d{
	position:relative;
    z-index:3;
	width:100%;
	max-width:550px;
	opacity:0;
	animation:floatBook 6s 1s ease-in-out infinite, fadeUp 0.8s 0.3s ease forwards;
	/*filter:drop-shadow(16px 24px 48px rgba(0,0,0,0.5));*/
}

.deco{ 
	position:absolute;
    user-select:none;
    z-index:4;
    pointer-events:none;
}
.deco-stamp{
	font-family:"Bebas Neue", sans-serif;
    font-size:1.6rem;
	letter-spacing:0.28em;
    color:var(--cream);
	border:2px solid var(--cream);
    padding:.5em 1em;
	transform:rotate(8deg);
    opacity:0.85;
    top:2.2em;
    right:0;
}

/* QUOTE */
.quote-band{
	background:var(--ink);
    color:var(--cream);
	padding:4rem 5rem;
    display:flex;
    align-items:center;
	justify-content:center;
    gap:3rem;
	position:relative;
    overflow:hidden;
}
.quote-band::before{
	content:"\201C";
    position:absolute;
	font-family:"Playfair Display", serif;
    font-size:28rem;
	color:rgba(255,255,255,0.04);
    top:-6rem;
    left:1rem;
	line-height:1;
    user-select:none;
    pointer-events:none;
}
.quote-mark{
	font-family:"Playfair Display", serif;
    font-size:5rem;
	color:var(--yellow);
    line-height:1;
    flex-shrink:0;
	align-self:flex-start;
    margin-top:-0.4rem;
    position:relative;
    z-index:1;
}
.quote-content{ 
	position:relative;
    z-index:1;
}
.quote-text{
	font-family:"Playfair Display", serif;
    font-style:italic;
	font-size:clamp(1.3rem, 1.8vw, 1.5rem);
    line-height:1.6;
	margin-bottom:1.2rem;
    max-width:68ch;
}
.quote-text em, .quote-text i{ font-style:normal; }
.quote-attr{ 
	font-size:0.8rem;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--yellow) !important;
	margin-right:10%;
}

/* PROMO BANNER */
.promo-banner{ 
	width:100%;
    display:block;
    line-height:0;
	background:var(--yellow) url("images/paper.jpg") center / 400px auto repeat;
}


/* DIVIDER */
.divider{ 
	display:flex;
    align-items:center;
    gap:1.5rem;
    padding:1.2rem 5rem;
}
.divider-line{ 
	flex:1;
    height:1px;
    background:var(--yellow);
    opacity:0.35;
}
.divider-dot { 
	width:6px;
    height:6px;
    background:var(--red);
    border-radius:50%;
    flex-shrink:0;
}

/* MARQUEE */
.marquee-section{ 
	background:var(--red);
    padding:1.1rem 0;
    overflow:hidden;
    white-space:nowrap;
}
.marquee-track{ 
	display:inline-flex;
    align-items:center;
    animation:marquee 24s linear infinite;
}
.marquee-item{
	font-family:"Bebas Neue", sans-serif;
    font-size:1.05rem;
    letter-spacing:0.15em;
	color:var(--cream);
    display:inline-block;
    padding:0 2rem;
    flex-shrink:0;
}
.marquee-sep{
	display:inline-block;
    width:5px;
    height:5px;
	background:rgba(241,231,220,0.45);
    border-radius:50%;
    flex-shrink:0;
    vertical-align:middle;
}

/******* Main content *******/

section{
	clear:both;
	width:100%;
}
.dark{
	background:#1e1010;
	color:var(--cream);
}
.dark p{ color:rgba(241,231,220,.62); }
.red{ 
	background:var(--red);
	color:var(--cream);
	text-align:center;
}
.red h2:before{
	content:"";
	height:1px;
	background:var(--yellow);
	width:100%;
	position:absolute;
	bottom:.2em;
	left:0;
	z-index:0;
	opacity:0.4;
}
.red h2 span{
	display:inline-block;
	padding:0 .5em;
	background:var(--red);
	position:relative;
	z-index:10;
}
.yelback{
	background:var(--yellow) url("images/paper.jpg") center / 400px auto repeat;;
    color:var(--ink);
    text-align:center;
    position:relative;
    overflow:hidden;
}
.secin{
	padding:3rem 0;
	box-sizing:border-box;
	width:84%;
	margin:0 auto;
	max-width:1100px;
}

.section-header{ 
	display:flex;
    align-items:baseline;
    gap:1.3rem;
    margin-bottom:2rem;
	width:100%;
}
.section-tag{ 
	font-size:0.8rem;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--red);
    flex-shrink:0;
}
.section-title{ 
	font-family:"Playfair Display", serif;
    font-size:3.15em;
    font-weight:900;
}
.section-line{ 
	flex:1;
    height:1px;
    background:var(--yellow);
    opacity:0.4;
    min-width:20px;
}
.split{
	display:grid;
	grid-template-columns:1fr 1.4fr;
}
.longl{ 
	grid-template-columns:1.6fr 1fr;
	gap:3em;
	justify-content:space-between;
}
.equal{
	grid-template-columns:1fr 1fr;
	gap:1em 10%;
	justify-content:space-between;
}
.splitleft, .splitright{ position:relative; }
.splitleft{ text-align:left; }
.splitleft img{
	width:110%;
	margin:-.6em 0 0 -12%;
}
.jw::after{
	content:"JW";
    position:absolute;
	font-family:"Bebas Neue", sans-serif;
    font-size:28rem;
	color:rgba(255,255,255,0.03);
    bottom:0;
    right:0;
	line-height:.8;
    user-select:none;
    pointer-events:none;
}
.about-stats{ 
	display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.5rem;
	text-align:center;
}
.stat-num{ 
	font-family:"Bebas Neue", sans-serif;
    font-size:3.5rem;
    color:var(--red);
    line-height:1;
    display:block;
}
.stat-label{ 
	font-size:0.9rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:rgba(241,231,220,0.42);
    margin-top:0.35rem;
    display:block;
}

.button{
	display:inline-block;
	background:var(--red);
    transform:translate(-2px, -2px);
	padding:1em 1.5em;
	box-sizing:border-box;
	color:white;
	transition:.3s background;
	margin:.5em 0;
}
.button:hover{
	color:white;
	background:var(--ink);
}
.dark .button:hover{ 
	background:var(--cream);
	color:var(--red);
}
.arrow{ 
	display:inline-block;
    transition:transform 0.2s ease;
}
.button:hover .arrow{ transform:translateX(5px); }

/** gallery **/

.gallery{
	width:100%;
	display:flex;
	justify-content:center;
	align-items:stretch;
	align-content:stretch;
	flex-wrap:nowrap;
	gap:2em;
}

.gal{
	max-width:300px;
}

.gal img{
	box-shadow:.16em .18em .5em rgba(0,0,0,0.4);
	border:.5em solid var(--cream);
}

.caption{
	font-size:.8em;
	line-height:1.4;
	margin:.6em 4% 0;
	box-sizing:border-box;
	max-width:100%;
}

/*** News ***/
.news-grid{ 
	display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2.5rem;
    margin-top:3rem;
}
.news-card{ 
	border-top:2px solid var(--ink);
    padding-top:1.5rem;
}
.news-date{ 
	font-size:0.8rem;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--red);
    margin-bottom:0.8rem;
}
.news-title{ 
	font-family:"Playfair Display", serif;
    font-size:1.4rem;
    font-weight:700;
    line-height:1.35;
    margin-bottom:0.8rem;
    transition:color 0.2s ease;
}
.news-card:hover .news-title{ color:var(--red); }

/* CONTACT */
.contact-section::before{
	content:"\2709";
    position:absolute;
    font-size:28rem;
    color:rgba(0,0,0,0.05);
	top:50%;
    left:50%;
    transform:translate(-50%, -50%);
	user-select:none;
    pointer-events:none;
    z-index:0;
}
.contact-label{ 
	font-size:0.8rem;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:var(--red);
    margin-bottom:1.5rem;
    position:relative;
    z-index:1;
}
.contact-heading{ 
	font-family:"Playfair Display", serif;
    font-size:clamp(2.4rem, 5vw, 5rem);
    font-weight:900;
    line-height:1.05;
    margin-bottom:1.5rem;
    position:relative;
    z-index:1;
}
.contact-heading em{ font-style:italic;
    color:var(--red);
}
.copy{ 
	width:100%;
	margin:0 auto;
	max-width:500px;
}
.contact-email{
	font-family:"Playfair Display", serif;
    font-style:italic;
    font-size:1.3rem;
	color:var(--ink);
    text-decoration:none;
    border-bottom:2px solid rgba(30,16,16,0.28);
	padding-bottom:3px;
    transition:color 0.2s ease, border-color 0.2s ease;
    position:relative;
    z-index:1;
}
.contact-email:hover{ 
	color:var(--red);
    border-color:var(--red);
}

/* FOOTER */
footer{
	background:var(--ink);
    color:rgba(241,231,220,0.4);
	padding:2rem 5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.footer-name{ 
	font-family:"Bebas Neue", sans-serif;
    font-size:1.1rem;
    letter-spacing:0.15em;
    color:rgba(241,231,220,0.6);
}
.footer-copy{ 
	font-size:0.6rem;
    letter-spacing:0.12em;
}
.footer-links{ 
	display:flex;
    gap:2rem;
    list-style:none;
}
.footer-links a{ 
    text-decoration:none;
}
.footer-links a:hover{ color:var(--yellow); }
.icon{
	width:1.35em;
	height:1.35em;
	display:inline-block;
	position:relative;
	fill:rgba(241,231,220,0.4);
	transition:.5s fill;
	top:.25em;
}
.icon:hover{ fill:var(--red); }
.spacer{
	position:absolute;
	left:0 !important;
	top:0 !important;
	width:100% !important;
	height:100% !important;
	z-index:10;
}

/* SCROLL REVEAL */
.reveal{ 
	opacity:0;
	top:2rem;
	position:relative;
	transition:opacity 0.65s ease, top 0.65s ease;
}

@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes floatBook{ 0%, 100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-14px) rotate(1deg); } }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* RESPONSIVE */
@media all and (max-width:900px){
    html{ scroll-padding-top:56px; }
	nav{ padding-right:3vw; }
	.nav-links{ 
		gap:3vw;
		justify-content:flex-end;
	}
    .hero{ 
		grid-template-columns:1fr;
    	padding-top:3em;
    	min-height:auto;
		justify-content:center;
	}
    .hero-left{ 
		padding:3rem 2rem 2rem;
		max-width:700px;
		margin-left:auto;
		margin-right:auto;
	}
	.hero-body{ max-width:none; }
    .hero-right{ 
		padding:7rem 2rem 2rem;
    	min-height:65vw;
	}
	.deco-stamp{ top:.5em; }
    .hero-right::before{ display:none; }
    .quote-band{ 
		flex-direction:column;
    	gap:1rem;
    	padding:3rem 2rem;
	}
    .quote-mark{ font-size:3.5rem; }
    .divider{ padding:1rem 2rem; }
    .about-band{ 
		grid-template-columns:1fr;
    	padding:4rem 2rem;
    	gap:3rem;
	}
    .book-section, .news-section, .contact-section{ padding:4rem 2rem; }
    .book-feature{ 
		grid-template-columns:1fr;
    	gap:3rem;
	}
    .news-grid{ 
		grid-template-columns:1fr;
    	gap:2rem;
	}
	.gallery{ 
		flex-wrap:wrap;
		gap:1em;
		justify-content:center;
	}
	.gal{ flex-basis:48%; }
    footer{ 
        flex-direction:column;
        gap:1.2rem;
        text-align:center;
        padding:2rem;
	}
}
@media all and (max-width:800px){
	nav{ padding-left:3vw; }
	.section-header{ 
		flex-wrap:wrap; 
		gap:.5em;
	}
	.section-header > *{ flex-basis:100%; }
	.section-tag{ line-height:1; }
	.section-line{ margin-top:.5em; }
	.split{ grid-template-columns:1fr; }
	.split > *{ flex-basis:100%; }
	.splitleft img, .splitright img{ 
		width:100%;
		max-width:400px;
		margin-left:auto;
		margin-right:auto;
	}
	.jw::after{
		font-size:50vw;
		line-height:.6;
	}
}
@media all and (max-width:700px){
    .nav-links{
		flex-wrap:wrap;
		position:fixed;
		top:0;
		right:0;
		padding:1em 2em;
		background:var(--dark);
		width:auto;
		height:100vh;
		display:none;
	}
	.nav-links a{ color:var(--cream); }
	.nav-links li{ flex-basis:100%; }
	.showM{ display:inline-block; }
	.closer{ display:inline-block; }
	.jw::after{ font-size:60vw; }
}
@media all and (max-width:600px){
	.gal{ 
		flex-basis:100%;
		max-width:350px;
	}
}
@media all and (max-width:480px){
	.hero-right{ padding-top:16vw; }
	.deco-stamp{ font-size:5vw; }
	.jw::after{ font-size:90vw; }
}