@charset "UTF-8";
:root{--bg:#fff;--text:#141414;--muted:#6b7280;--accent:#c5a46d;--card:#f8f8f8;--line:#ececec}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.65}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:14px;padding:2px 0}
.container.nav{padding-top:6px;padding-bottom:6px}
.brand img{height:auto;width:100px}
.brand-name{font-family:Fraunces,serif;font-weight:600;font-size:1.2rem;letter-spacing:.2px}
nav a{padding:10px 12px;font-weight:600;color:#2b2b2b;border-radius:999px}
nav a:hover{background:#f2f2f2;color:#111}
.hero{text-align:center;padding:36px 24px 16px}
.hero-logo{display:block;margin:0 auto 12px;width:100%;max-width:720px;height:auto}
.announcement{font-size:1.2rem;color:#1f2937;max-width:960px;margin:0 auto}
.section{padding:44px 0}
.section + .section{border-top:1px solid var(--line)}
.section h2{font-family:Fraunces,serif;font-weight:600;font-size:1.9rem;margin:6px 0 10px;letter-spacing:.2px}
.grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:16px}
.card{background:var(--card);padding:16px;border-radius:14px;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.thumb{border-radius:12px;background:linear-gradient(135deg,#e8e8e8,#ffffff);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#8b8b8b;font-weight:700}
.book .thumb{aspect-ratio:3/4}
.script .thumb{aspect-ratio:2/3}
/* Wider aspect for embedded video (cinemascope) */
.thumb.video { aspect-ratio: 21/9; }
.thumb.video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Center Movies page heading */
.section.movies h2 { text-align: center; margin-bottom: 24px; }

/* Section title style - used for all page headings */
.section h2 { text-align: center; margin-bottom: 24px; }

/* Tweak announcement spacing for pages */
.announcement { padding: 2px; }

/* Movies page layout */
.movie-card{padding:18px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.movie-row{display:flex;gap:24px;align-items:center}
.movie-row .poster{flex:0 0 320px}
.movie-row .poster img, .movie-row .poster picture{width:100%;height:auto;border-radius:12px;box-shadow:0 8px 24px rgba(16,24,40,0.06)}
.movie-row .meta-col{flex:1;display:flex;flex-direction:column;gap:12px;padding-top:6px}
.movie-row .meta-col h3{margin:0;font-family:Fraunces,serif;font-size:1.4rem}
.movie-row .meta-col p{margin:0}
.movie-row .poster.placeholder{width:320px;height:480px;background:linear-gradient(135deg,#e8e8e8,#ffffff);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#8b8b8b;font-weight:700;border:1px solid var(--line)}

@media (max-width:700px){
	.hero{padding-top:10px;padding-bottom:10px}
	/* Mobile: allow logo to fill the available container width (viewport minus container padding) */
	.hero-logo{width:100%;max-width:calc(100vw - 32px);height:auto;margin:0 auto 12px}
	.container{padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px;}
	.card{padding:10px;}
	.movie-row{flex-direction:column;gap:12px;align-items:stretch;}
	.poster, .meta-col{width:100%;}
	.thumb.video{aspect-ratio:16/9;}
	.grid{gap:12px;}
	html,body{overflow-x:hidden}
}
.card h3{margin:6px 0 0;font-size:1.12rem;font-family:Fraunces,serif}
.meta{color:var(--muted);font-size:.95rem}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn{background:#111;color:#fff;padding:10px 14px;border-radius:999px;font-size:.92rem;font-weight:700;border:1px solid #111}
.btn.alt{background:transparent;color:#111}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#111}
.laurels{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;justify-content:center}
.laurel{min-width:150px;border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;background:transparent;color:#999;font-size:.8rem;flex-shrink:0}
.laurel img{max-width:150px;height:auto;border-radius:6px;object-fit:contain}
.laurel:is(a){cursor:pointer}
footer{border-top:1px solid var(--line);margin-top:32px;padding:24px 0;color:var(--muted);font-size:.9rem;text-align:center}

/* --- Mobile Navigation --- */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: 10px;
	margin-left: 8px;
	cursor: pointer;
	z-index: 20;
}
.nav-toggle .hamburger {
	display: block;
	width: 28px;
	height: 3px;
	background: #222;
	border-radius: 2px;
	position: relative;
	transition: background 0.2s;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
	content: '';
	position: absolute;
	left: 0;
	width: 28px;
	height: 3px;
	background: #222;
	border-radius: 2px;
	transition: transform 0.2s, top 0.2s, bottom 0.2s;
}
.nav-toggle .hamburger::before {
	top: -9px;
}
.nav-toggle .hamburger::after {
	bottom: -9px;
}

nav {
	transition: max-height 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s;
}

@media (max-width: 700px) {
	.nav-toggle {
		display: block;
	}
	nav {
		position: absolute;
		top: 64px;
		right: 0;
		left: 0;
		background: rgba(255,255,255,0.98);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 4px 24px rgba(0,0,0,0.04);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		z-index: 15;
		padding: 0 0;
	}
	nav.open {
		max-height: 320px;
		opacity: 1;
		pointer-events: auto;
		padding: 12px 0 16px 0;
		gap: 8px;
	}
	nav a {
		width: 100%;
		text-align: center;
		padding: 14px 0;
		border-radius: 0;
		font-size: 1.08rem;
		border-bottom: 1px solid var(--line);
	}
	nav a:last-child {
		border-bottom: none;
	}
	.container.nav {
		position: relative;
	}
}

/* Hamburger animation when open */
nav.open ~ .nav-toggle .hamburger,
.nav-toggle[aria-expanded="true"] .hamburger {
	background: transparent;
}
nav.open ~ .nav-toggle .hamburger::before,
.nav-toggle[aria-expanded="true"] .hamburger::before {
	transform: translateY(9px) rotate(45deg);
}
nav.open ~ .nav-toggle .hamburger::after,
.nav-toggle[aria-expanded="true"] .hamburger::after {
	transform: translateY(-9px) rotate(-45deg);
}