/* ===================================================================
   NightOwl Book CMS — single book detail ("Premium Publisher")
   Dark luxury / editorial. Data-driven, works for every book.
   Colours per brand spec:
     #030303  #090909  #c8942f  #edc36b  #eee3cf  #a99c87
   Type:
     EB Garamond   -> titles, big headlines, quotes
     Source Serif 4 -> body text, description, metadata
   The families are self-hosted by the plugin (nightowl-fonts.css) and
   consumed here through the shared design-system tokens. No external
   font/asset hosts are ever requested.
   =================================================================== */

.nbd {
	--nbd-black: var(--nightowl-black);
	--nbd-black-soft: var(--nightowl-black-soft);
	--nbd-panel: #0c0c0c;
	--nbd-gold: var(--nightowl-gold);
	--nbd-gold-light: var(--nightowl-gold-light);
	--nbd-cream: var(--nightowl-cream);
	--nbd-muted: var(--nightowl-muted);
	--nbd-hairline: rgba(200, 148, 47, 0.28);
	--nbd-hairline-soft: rgba(200, 148, 47, 0.16);

	--nbd-font-display: var(--nightowl-font-display);
	--nbd-font-body: var(--nightowl-font-body);

	--nbd-maxw: 1180px;

	background: var(--nbd-black);
	color: var(--nbd-cream);
	font-family: var(--nbd-font-body);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---- Reset the theme's page shell out of the way ---- */
body.nbd-body {
	margin: 0;
	padding: 0;
	background: var(--nbd-black);
}
.nbd *,
.nbd *::before,
.nbd *::after { box-sizing: border-box; }

.nbd img { max-width: 100%; height: auto; display: block; }

.nbd a { color: var(--nbd-gold-light); text-decoration: none; }
.nbd a:hover { color: #fff; }
.nbd a:focus-visible,
.nbd .nbd-btn:focus-visible {
	outline: 2px solid var(--nbd-gold-light);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- Skip link ---- */
.nbd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--nbd-gold);
	color: #000;
	padding: 10px 16px;
	z-index: 100;
	font-family: var(--nbd-font-body);
}
.nbd-skip:focus {
	left: 16px;
	top: 16px;
	color: #000;
}/* Specificity note: must out-rank the `.nbd img { height: auto }
/* ===================================================================
   HERO
   =================================================================== */
.nbd-hero {
	position: relative;
	padding: clamp(40px, 8vw, 96px) clamp(16px, 5vw, 56px) clamp(36px, 6vw, 72px);
	background:
		radial-gradient(120% 80% at 78% 0%, rgba(200, 148, 47, 0.10) 0%, rgba(3, 3, 3, 0) 60%),
		linear-gradient(180deg, #050505 0%, var(--nbd-black) 60%);
	overflow: hidden;
}
.nbd-hero::after {
	content: "";
	position: absolute;
	left: clamp(16px, 5vw, 56px);
	right: clamp(16px, 5vw, 56px);
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--nbd-hairline), transparent);
}
.nbd-hero-grid {
	max-width: var(--nbd-maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 72px);
	align-items: center;
}

/* ---- Cover ---- */
.nbd-hero-cover { display: flex; justify-content: center; }
.nbd-cover-frame {
	margin: 0;
	width: 100%;
	max-width: 360px;
	border: 1px solid var(--nbd-gold);
	border-radius: 3px;
	background: var(--nbd-black-soft);
	box-shadow:
		0 2px 0 rgba(255, 255, 255, 0.03) inset,
		0 30px 60px -20px rgba(0, 0, 0, 0.8),
		0 0 0 1px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}
.nbd-cover-img { width: 100%; height: auto; display: block; }

.nbd-cover-frame--placeholder {
	aspect-ratio: 2 / 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 24px;
	text-align: center;
	background:
		radial-gradient(90% 60% at 50% 25%, rgba(200, 148, 47, 0.14), rgba(3, 3, 3, 0) 70%),
		var(--nbd-black-soft);
}
.nbd-cover-initial {
	font-family: var(--nbd-font-display);
	font-size: clamp(72px, 16vw, 128px);
	line-height: 1;
	color: var(--nbd-gold-light);
}
.nbd-cover-brand {
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--nbd-muted);
}

/* ---- Hero text ---- */
.nbd-hero-body { min-width: 0; }
.nbd-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
}
.nbd-eyebrow-genre {
	font-size: 13px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--nbd-gold-light);
}
.nbd-badge {
	font-family: var(--nbd-font-body);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nbd-cream);
	border: 1px solid var(--nbd-hairline);
	border-radius: 999px;
	padding: 4px 12px;
}
.nbd-author {
	margin: 0 0 6px;
	font-size: 16px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nbd-muted);
}
.nbd-title {
	font-family: var(--nbd-font-display);
	font-weight: 500;
	font-size: clamp(38px, 6vw, 68px);
	line-height: 1.08;
	margin: 0 0 16px;
	color: var(--nbd-gold-light);
	background: linear-gradient(180deg, #f4d691 0%, #c8942f 92%);
	-webkit-background-clip: text;
	background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.nbd-title { -webkit-text-fill-color: transparent; }
}
.nbd-subtitle {
	font-family: var(--nbd-font-display);
	font-size: clamp(19px, 2.4vw, 24px);
	font-style: italic;
	color: var(--nbd-cream);
	margin: 0 0 20px;
}
.nbd-lede {
	font-size: clamp(17px, 1.6vw, 19px);
	line-height: 1.7;
	color: var(--nbd-cream);
	margin: 0 0 30px;
	max-width: 46ch;
}

/* ---- Buttons ---- */
.nbd-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.nbd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 30px;
	font-family: var(--nbd-font-body);
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 3px;
	border: 1px solid var(--nbd-gold);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.nbd-btn--primary {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #d29b34, #9c6614);
	color: #fff8ea;
	box-shadow: 0 14px 30px -14px rgba(200, 148, 47, 0.55);
}
/* Premium "Aufblitz" — one diagonal light sweep on hover/focus, matching
   the catalog and static-page primary CTAs (same 0.6s timing/direction).
   Decorative: pointer-events off; neutralised under prefers-reduced-motion. */
.nbd-btn--primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
	pointer-events: none;
}
.nbd-btn--primary:hover,
.nbd-btn--primary:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -14px rgba(200, 148, 47, 0.7);
}
.nbd-btn--primary:hover::before,
.nbd-btn--primary:focus-visible::before {
	left: 130%;
}
.nbd-btn--ghost { background: transparent; color: var(--nbd-gold-light); }
.nbd-btn--ghost:hover { background: rgba(200, 148, 47, 0.12); color: #fff; }
.nbd-btn--pending {
	background: transparent;
	border-color: var(--nbd-hairline);
	color: var(--nbd-muted);
	cursor: default;
}

/* ===================================================================
   SECTIONS
   =================================================================== */
.nbd-section {
	padding: clamp(44px, 7vw, 88px) clamp(16px, 5vw, 56px);
	border-top: 1px solid var(--nbd-hairline-soft);
}
.nbd-section-title {
	font-family: var(--nbd-font-display);
	font-weight: 500;
	font-size: clamp(24px, 3vw, 32px);
	color: var(--nbd-gold-light);
	margin: 0 0 24px;
}

.nbd-about { background: var(--nbd-black); }
.nbd-about-grid {
	max-width: var(--nbd-maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: clamp(32px, 6vw, 72px);
	align-items: start;
}
.nbd-about-grid > .nbd-prose:only-child,
.nbd-about-grid > .nbd-meta:only-child {
	grid-column: 1 / -1;
	max-width: 760px;
}

/* ---- Long description (rich editor content) ---- */
.nbd-prose { font-size: 18px; line-height: 1.75; color: var(--nbd-cream); }
.nbd-prose > *:first-child { margin-top: 0; }
.nbd-prose p { margin: 0 0 1.15em; }
.nbd-prose h2,
.nbd-prose h3,
.nbd-prose h4 {
	font-family: var(--nbd-font-display);
	font-weight: 500;
	color: var(--nbd-gold-light);
	line-height: 1.2;
	margin: 1.6em 0 0.6em;
}
.nbd-prose h2 { font-size: 1.5em; }
.nbd-prose h3 { font-size: 1.25em; }
.nbd-prose a { color: var(--nbd-gold-light); text-decoration: underline; text-underline-offset: 3px; }
.nbd-prose a:hover { color: #fff; }
.nbd-prose ul,
.nbd-prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.nbd-prose li { margin: 0 0 0.4em; }
.nbd-prose blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 22px;
	border-left: 2px solid var(--nbd-gold);
	font-family: var(--nbd-font-display);
	font-style: italic;
	font-size: 1.2em;
	color: var(--nbd-gold-light);
}
.nbd-prose img { margin: 1.4em 0; border: 1px solid var(--nbd-hairline-soft); border-radius: 3px; }
.nbd-prose hr { border: 0; border-top: 1px solid var(--nbd-hairline-soft); margin: 2em 0; }

/* ---- Metadata panel ---- */
.nbd-meta {
	background: var(--nbd-panel);
	border: 1px solid var(--nbd-hairline-soft);
	border-radius: 4px;
	padding: clamp(22px, 3vw, 32px);
}
.nbd-meta .nbd-section-title { font-size: clamp(18px, 2vw, 20px); margin-bottom: 14px; }
.nbd-meta-list { margin: 0; }
.nbd-meta-row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 0;
	border-top: 1px solid var(--nbd-hairline-soft);
}
.nbd-meta-row:first-of-type { border-top: 0; }
.nbd-meta-row dt {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nbd-gold-light);
	flex-shrink: 0;
}
.nbd-meta-row dd {
	margin: 0;
	font-size: 15px;
	color: var(--nbd-cream);
	text-align: right;
}

/* ===================================================================
   CLOSING CTA
   =================================================================== */
.nbd-closing {
	background:
		radial-gradient(80% 120% at 50% 0%, rgba(200, 148, 47, 0.10), rgba(3, 3, 3, 0) 60%),
		var(--nbd-black-soft);
	text-align: center;
}
.nbd-closing-inner { max-width: 520px; margin: 0 auto; }
.nbd-closing-cover {
	width: 120px;
	margin: 0 auto 20px;
	border: 1px solid var(--nbd-gold);
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.8);
}
.nbd-closing-title {
	font-family: var(--nbd-font-display);
	font-size: clamp(24px, 3.4vw, 32px);
	color: var(--nbd-gold-light);
	margin: 0 0 4px;
}
.nbd-closing-author {
	margin: 0 0 24px;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nbd-muted);
}
.nbd-closing-note { margin: 16px 0 0; font-size: 13px; color: var(--nbd-muted); }
/* ===================================================================
   MOTION
   =================================================================== */
html { scroll-behavior: smooth; }
.nbd-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.nbd-reveal--in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.nbd *,
	.nbd *::before,
	.nbd *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
	.nbd-reveal { opacity: 1; transform: none; }
	.nbd-btn--primary::before { content: none; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 900px) {
	.nbd-hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.nbd-hero-body { text-align: center; }
	.nbd-eyebrow, .nbd-actions { justify-content: center; }
	.nbd-lede { margin-left: auto; margin-right: auto; }
	.nbd-cover-frame { max-width: 300px; }
	.nbd-about-grid { grid-template-columns: 1fr; }
	.nbd-meta { width: 100%; }
}

@media (max-width: 560px) {
	.nbd { font-size: 17px; }	.nbd-actions { flex-direction: column; align-items: stretch; }
	.nbd-btn { width: 100%; }
	.nbd-meta-row { flex-direction: column; gap: 4px; text-align: left; }
	.nbd-meta-row dd { text-align: left; }
}