/* novel.css — book series landing pages, chapter grid, series strip.
   Depends on the hardcoded #f12ca5 accent from default.hbs
   (--ghost-accent-color) and Attila's .box / .cover primitives. */

/* ---- book hero (tag.hbs book landing) ------------------------------- */

.book-hero .inner {
	position: relative;
}

.book-hero-box {
	position: relative;
	z-index: 2;
	padding: 4rem 2rem;
}

.book-chip {
	display: inline-block;
	font-size: 0.75em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ghost-accent-color);
	padding: 0.35em 1em;
	border-radius: 2em;
	margin-bottom: 1.2em;
}

.book-hero-title {
	margin: 0;
	font-size: 3.2em;
	line-height: 1.1;
}

.book-hero-meta {
	display: block;
	margin-top: 0.8em;
	font-size: 0.85em;
	opacity: 0.7;
}

.book-hero-desc {
	display: block;
	margin-top: 1.2em;
	max-width: 46em;
	font-size: 1.05em;
	line-height: 1.5;
	opacity: 0.85;
}

.book-hero-cover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

.book-hero-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* no feature image on the tag: accent-tinted cover-art block instead of
   a broken cover. */
.book-cover-fallback {
	display: block;
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 20%,
			rgba(241, 44, 165, 0.35), transparent 60%),
		linear-gradient(135deg,
			rgba(241, 44, 165, 0.18),
			rgba(0, 0, 0, 0.55) 70%);
}

.book-hero-box::before {
	content: "";
	position: absolute;
	inset: -4rem -2rem;
	background: rgba(0, 0, 0, 0.45);
	z-index: -1;
}

/* ---- chapter grid ---------------------------------------------------- */

.chapter-grid-wrap {
	margin: 2rem auto;
	max-width: 720px;
	padding: 0 2rem;
}

.chapter-grid-heading {
	margin: 0 0 1.2rem;
	font-size: 1.1em;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.6;
}

.chapter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.chapter-card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.2rem 1.4rem;
	color: inherit;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.chapter-card-inner:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.chapter-title {
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 0.5em;
}

.chapter-meta {
	font-size: 0.8em;
	opacity: 0.65;
	display: flex;
	gap: 1em;
}

.chapter-excerpt {
	margin-top: 0.7em;
	font-size: 0.9em;
	line-height: 1.45;
	opacity: 0.8;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- series strip (index.hbs / tag.hbs / book landing footer) -------- */

.book-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2rem auto;
	max-width: 720px;
	padding: 0 2rem;
}

.book-strip-card {
	flex: 1 1 220px;
	margin: 0;
}

.book-strip-card-inner {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 0.9rem 1rem;
	color: inherit;
	text-decoration: none;
}

.book-strip-cover {
	width: 56px;
	height: 80px;
	object-fit: cover;
	border-left: 3px solid var(--ghost-accent-color);
	flex: 0 0 auto;
}

.book-strip-cover-blank {
	display: block;
	background: linear-gradient(160deg,
		rgba(241, 44, 165, 0.30),
		rgba(241, 44, 165, 0.10));
}

.book-strip-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.book-strip-name {
	font-weight: 600;
	line-height: 1.25;
}

.book-strip-desc {
	font-size: 0.8em;
	opacity: 0.7;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* on the homepage the strip sits above the post feed — give it breathing
   room and a card look consistent with Attila post boxes */
#main .book-strip,
.blog-header + .container .book-strip {
	margin-top: 0;
}

/* ---- dark scheme tweaks ---------------------------------------------- */

.theme-dark .chapter-card-inner:hover,
html:not(.theme-light) .chapter-card-inner:hover {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
	html:not(.theme-light) .book-cover-fallback {
		background:
			radial-gradient(ellipse at 30% 20%,
				rgba(241, 44, 165, 0.28), transparent 60%),
			linear-gradient(135deg,
				rgba(241, 44, 165, 0.12),
				rgba(0, 0, 0, 0.7) 70%);
	}
}

@media (max-width: 640px) {
	.book-hero-title {
		font-size: 2.2em;
	}
	.book-hero-box {
		padding: 3rem 1.2rem;
	}
	.book-hero-box::before {
		inset: -3rem -1.2rem;
	}
}

/* ---- nav scrim + contrast (Attila .nav-header) ------------------------
   .nav-header is position:absolute with a transparent background, so on
   pages with a cover image its white 80%-opacity links land on whatever
   the photo happens to be doing, and on plain pages they fall back to the
   mid-gray secondary colour. Everything below touches background/scrim and
   colour only — layout, spacing, font sizes and Attila's structure are
   untouched. */

/* Near-black brand scrim behind the nav rows. z-index:-1 keeps it behind
   the links and behind Attila's pink active-page top bar
   (.nav-header li.active a:before), which keeps painting on top. It fades
   to fully transparent past the nav so hero images (and the 30px wash
   below the bar) never show a hard edge, and on the near-black plain page
   background it is invisible — the page just looks like the page. */
.nav-header::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: -3rem;
	left: 0;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(11, 10, 8, 0.94) 0%,
		rgba(11, 10, 8, 0.92) 60%,
		rgba(11, 10, 8, 0) 100%
	);
}

/* ---- link colours: cream on the scrim, pink on interaction ----------- */

/* .nav-button-primary stays excluded so the pink Subscribe button keeps
   its white label; every other nav link goes cream, on hero pages and
   plain pages alike (the .cover-active arm outranks Attila's white-80%). */
.nav-header a:not(.nav-button-primary),
.cover-active .nav-header a:not(.nav-button-primary) {
	color: #f3ecdc;
}

.nav-header a:not(.nav-button-primary):hover,
.nav-header a:not(.nav-button-primary):focus,
.nav-header a:not(.nav-button-primary):active,
.cover-active .nav-header a:not(.nav-button-primary):hover,
.cover-active .nav-header a:not(.nav-button-primary):focus,
.cover-active .nav-header a:not(.nav-button-primary):active {
	color: var(--ghost-accent-color);
}

/* current page: pink label to go with Attila's untouched pink top bar */
.nav-header li.active a {
	color: var(--ghost-accent-color);
}

/* outline-style secondary button was near-invisible against the scrim */
.nav-header a.nav-button-secondary,
.cover-active .nav-header a.nav-button-secondary {
	border-color: rgba(243, 236, 220, 0.4);
}

/* ---- mobile menu control (.nav-wrapper-control) ----------------------
   Below 640px the nav rows slide off the top of the screen and this bar
   (position:absolute, top:100%) ends up parked at the very top of the
   page, outside the scrim box — so it carries its own fading scrim.
   Attila's stronger .menu-active rules still win while the menu is open. */
.nav-header .nav-wrapper-control {
	background: linear-gradient(
		to bottom,
		rgba(11, 10, 8, 0.95) 0%,
		rgba(11, 10, 8, 0.92) 65%,
		rgba(11, 10, 8, 0) 100%
	);
}

.nav-header .nav-wrapper-control a,
.cover-active .nav-wrapper-control a {
	color: #f3ecdc;
}

.nav-header .nav-wrapper-control a:hover,
.nav-header .nav-wrapper-control a:focus,
.nav-header .nav-wrapper-control a:active,
.cover-active .nav-wrapper-control a:hover,
.cover-active .nav-wrapper-control a:focus,
.cover-active .nav-wrapper-control a:active,
.menu-active .nav-header .nav-wrapper-control a:hover,
.menu-active .nav-header .nav-wrapper-control a:focus,
.menu-active .nav-header .nav-wrapper-control a:active {
	color: var(--ghost-accent-color);
}

/* mobile list bullets were Attila gray (#3b3d40); cream reads over the
   scrim. li.active keeps the accent bullet and accent label. */
.nav-header li a:before {
	background: rgba(243, 236, 220, 0.5);
}

/* open mobile menu panel: brand near-black instead of Attila #222426, so
   it matches the page it drops over */
@media only screen and (max-width: 640px) {
	.nav-header .nav-wrapper {
		background: rgba(11, 10, 8, 0.97);
	}
}


/* ---- cast page (/cast/, Ghost page 'The Cast') --------------------
   The roster markup lives in the PAGE content (clean HTML, no <style>),
   and these rules live in the THEME, so Ghost's own post-content CSS
   dresses it instead of fighting an inline stylesheet. Scope stays
   .cast-page to keep it off every other page. */

/* The Ephergent — "The Company" cast roster, as a self-contained Ghost page
   fragment. Every rule is scoped under .cast-page so nothing leaks into the
   rest of the site. Dressed entirely from the theme's own design system:
   scheme-aware --color-* tokens (light + dark), the kg-toggle-card panel
   pattern, --ghost-accent-color pink, B612 Mono display / Montserrat body
   via the --gh-font-* vars. No @font-face needed; the theme loads both. */

.cast-page {
  --pink: var(--ghost-accent-color);
  --pink-hot: var(--ghost-accent-color);
  --measure: 68ch;
  align-self: stretch;
  text-align: left;
}
.cast-page *,
.cast-page *::before,
.cast-page *::after { box-sizing: border-box; }



.cast-page a {
  color: var(--pink-hot);
  text-decoration: underline;
  text-underline-offset: .16em;
  text-decoration-thickness: 1px;
}
.cast-page a:hover { color: var(--pink); }
.cast-page a:focus-visible { outline: 2px solid var(--pink-hot); outline-offset: 3px; }

/* the roster's opening billing */
.cast-page .cast-lede {
  color: var(--color-content-main);
  font-size: 1.68rem;
  max-width: var(--measure);
  margin: 0 0 2.56rem;
}

/* the catalogue drawer card: kg-toggle-card panel pattern */
.cast-page .drawer-card {
  max-width: 57.6rem;
  padding: 1.68rem 1.92rem 1.84rem;
  background: var(--color-background-secondary);
  box-shadow: inset 0 0 0 1px var(--color-background-contrast);
  border-radius: 3px;
  margin: 0 0 4.0rem;
}
.cast-page .drawer-head {
  font-family: var(--gh-font-body);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-content-secondary);
  margin: 0 0 0.8rem;
}
.cast-page .drawer-note {
  margin: 0;
  color: var(--color-content-main);
  font-size: 1.52rem;
  max-width: var(--measure);
}

/* section heading + note between the two rosters */
.cast-page .section-title {
  font-family: var(--gh-font-heading);
  font-weight: 700;
  font-size: clamp(2.48rem, 4.6vw, 3.28rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 4.16rem 0 0.48rem;
  color: var(--color-content-lead);
}
.cast-page .section-title::after {
  content: "";
  display: block;
  width: 6.4rem;
  height: 1px;
  margin-top: 1.28rem;
  background: linear-gradient(90deg, var(--ghost-accent-color), transparent);
}
.cast-page .note {
  color: var(--color-content-main);
  max-width: var(--measure);
  margin: 1.76rem 0 3.36rem;
}

/* the roster itself */
.cast-page .roster { list-style: none; margin: 0; padding: 0; }
.cast-page .entry {
  display: flex;
  align-items: flex-start;
  gap: 2.0rem;
  padding: 3.04rem 0;
  border-top: 1px solid var(--color-background-contrast);
}
.cast-page .roster li:last-child .entry { border-bottom: 1px solid var(--color-background-contrast); }
.cast-page .entry .frame {
  flex: 0 0 11.2rem;
  width: 11.2rem;
}
.cast-page .entry-body { min-width: 0; }
.cast-page .entry-name {
  font-family: var(--gh-font-heading);
  font-weight: 700;
  font-size: 2.24rem;
  line-height: 1.2;
  margin: 0;
  color: var(--color-content-lead);
}
.cast-page .entry-alias {
  font-family: var(--gh-font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--color-content-main);
  white-space: nowrap;
}
.cast-page .entry-as { margin: 0.64rem 0 0; color: var(--color-content-main); max-width: var(--measure); }
.cast-page .entry-prods {
  margin: 1.12rem 0 0;
  font-family: var(--gh-font-body);
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-content-secondary);
}

/* the portrait frame, plus Meatball's pending-photo state:
   flat bordered frame, accent-pink hover */
.cast-page .frame {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  container-type: inline-size;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-background-contrast);
  border-radius: 3px;
  transition: border-color .15s ease;
}
.cast-page .frame:hover { border-color: var(--ghost-accent-color); }
.cast-page .frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cast-page .frame-photo {
  position: absolute;
  inset: 0;
  background: url("https://ephergent.com/front-assets/portraits/meatball.jpg") center / cover no-repeat;
}
.cast-page .frame--pending {
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0.64rem;
  background: var(--color-background-secondary);
}
.cast-page .pending-name {
  display: block;
  font-family: var(--gh-font-heading);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--color-content-lead);
  line-height: 1.1;
  font-size: clamp(11px, 15cqw, 24px);
}
.cast-page .pending-note {
  display: block;
  font-family: var(--gh-font-body);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-content-secondary);
  font-size: clamp(9px, 9cqw, 12px);
  margin-top: .6em;
}

/* closing lines */
.cast-page .company-close {
  margin: 3.2rem 0 0;
  color: var(--color-content-main);
  max-width: var(--measure);
}
.cast-page .cast-billing {
  font-family: var(--gh-font-body);
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-content-secondary);
  margin: 3.52rem 0 0;
  padding-top: 2.24rem;
  border-top: 1px solid var(--color-background-contrast);
  max-width: 62ch;
}

/* a little more room, then a proper frame size */
@media (min-width: 42rem) {
  .cast-page .entry { gap: 2.56rem; padding-block: 3.36rem; }
  .cast-page .entry .frame { flex-basis: 17.6rem; width: 17.6rem; }
  .cast-page .entry-name { font-size: 2.56rem; }
}