/*
 * Raconteur — front page only.
 *
 * Loaded on top of main.css for the home template. Everything here is
 * either a layout that only exists on the storefront (the cover-led hero,
 * the genre spines, the release list) or a local override of a shared
 * component. No new palette, no new type sizes: every colour resolves to
 * an existing --rc-* token, or to an hsl() driven by a novel's own
 * --cover-hue, which is the same per-novel signature .novel-cover uses.
 *
 * The one structural idea worth naming: .home-band. The word-frequency
 * field is a fixed, site-wide WebGL2 layer painted behind everything
 * (header.php + main.css .rc-field-stage). Rather than delete it from the
 * home page, every content band here paints an ink wash over it, and the
 * single band that omits .home-band — .home-craft — becomes a window onto
 * the live field, right next to the copy that explains it. The field is
 * never the first thing seen, and it is never seen unexplained.
 *
 * @package Raconteur
 */

/* ---------- The ink wash that holds the field back ---------- */
/* The literal is the pre-color-mix fallback only. It has to match the DEFAULT
 * page surface — which is now paper — or the handful of engines that skip the
 * second declaration would paint a near-black band across a cream page. */
.home-band {
	background: rgba(247, 243, 232, 0.93);
	background: color-mix(in srgb, var(--rc-ink) 93%, transparent);
}

/* ---------- Hero: covers first ---------- */
.home-hero {
	padding: var(--rc-sp-6) 0 var(--rc-sp-6);
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 78% 8%, hsla(var(--cover-hue, 20), 55%, 40%, 0.20), transparent 62%),
		rgba(247, 243, 232, 0.94);
	background:
		radial-gradient(120% 90% at 78% 8%, hsla(var(--cover-hue, 20), 55%, 40%, 0.20), transparent 62%),
		color-mix(in srgb, var(--rc-ink) 94%, transparent);
}

/* The hue wash is the featured serial's own --cover-hue bleeding into the
 * masthead. At 40% lightness / 20% alpha it reads as atmosphere on ink and as
 * a grey-violet smudge on cream — the paper looked dirty rather than tinted.
 * On the light modes the same hue is carried at a paper-appropriate lightness
 * and half the strength, so the signature survives and the page stays clean. */
:root:not([data-read-mode="night"]) .home-hero {
	background:
		radial-gradient(120% 90% at 78% 8%, hsla(var(--cover-hue, 20), 62%, 72%, 0.16), transparent 64%),
		color-mix(in srgb, var(--rc-ink) 94%, transparent);
}

.home-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.84fr);
	gap: var(--rc-sp-7);
	align-items: center;
}

.home-hero__text { max-width: 34rem; }

.home-hero__title {
	margin: var(--rc-sp-2) 0 0.35rem;
	text-wrap: balance;
}
.home-hero__title a { transition: color 0.3s var(--rc-ease-out); }
.home-hero__title a:hover { color: var(--rc-accent-bright); }

.home-hero__byline {
	font-size: var(--rc-size-2);
	color: var(--rc-paper-faint);
	font-style: italic;
}
.home-hero__byline span { color: var(--rc-paper-dim); font-style: normal; }

/* Meta row — genre / status / chapters / cadence, separated by hairlines
 * rather than bullets so it reads as a colophon line, not a tag cloud. */
.home-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem var(--rc-sp-2);
	margin: var(--rc-sp-3) 0 0.6rem;
	font-size: var(--rc-size-0);
	color: var(--rc-paper-faint);
	letter-spacing: 0.04em;
}
.home-meta li { display: flex; align-items: center; }
.home-meta li + li::before {
	content: '';
	width: 1px;
	height: 0.9em;
	margin-right: var(--rc-sp-2);
	background: var(--rc-line-strong);
}
.home-meta__genre {
	color: var(--rc-accent-bright);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--rc-ease-out);
}
.home-meta__genre:hover { border-bottom-color: var(--rc-accent-bright); }

.home-hero__cadence {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin-bottom: var(--rc-sp-3);
	font-size: var(--rc-size-0);
	color: var(--rc-accent-bright);
}

.home-hero__dek { max-width: 40ch; }

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rc-sp-2);
	margin-top: var(--rc-sp-4);
}

.home-hero__note {
	margin-top: var(--rc-sp-3);
	font-size: var(--rc-size-0);
	color: var(--rc-paper-faint);
}

/* ---------- Hero jackets: a fanned shelf, lead cover in front ----------
 * The two supporting jackets are deliberately overlapped down to a ~19px
 * sliver each — narrower than .novel-cover's own 24px padding — so what
 * shows is the artwork's outer edge and never a half-cropped word. They
 * read as books standing behind the one on display. */
.home-hero__shelf {
	position: relative;
	width: 100%;
	max-width: 380px;
	margin-left: auto;
	aspect-ratio: 380 / 545;
}

.home-hero__jacket {
	position: absolute;
	display: block;
	transition: transform 0.5s var(--rc-ease-out);
}
.home-hero__jacket .novel-cover { width: 100%; }

.home-hero__jacket--lead {
	width: 90%;
	left: 5%;
	bottom: 0;
	z-index: 3;
}
.home-hero__jacket--lead .novel-cover {
	box-shadow: 0 32px 70px rgba(0, 0, 0, 0.62);
	outline: 1px solid var(--rc-glass-border);
	outline-offset: -1px;
}
/* At hero scale the jacket art can be bright enough to swallow the small
 * typographic layer .novel-cover paints over it — this keeps the status
 * and byline readable without touching the shared component. */
.home-hero__jacket--lead .novel-cover__eyebrow,
.home-hero__jacket--lead .novel-cover__byline { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); }
.home-hero__jacket--lead .novel-cover__title { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); }
.home-hero__jacket--lead:hover { transform: translateY(-8px); }

.home-hero__jacket--back {
	width: 62%;
	bottom: 9%;
	z-index: 1;
	opacity: 0.75;
	filter: saturate(0.8);
}
.home-hero__jacket--back .novel-cover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
/* Only the artwork edge of a supporting jacket is ever on screen, so its
 * typographic layer is suppressed rather than clipped mid-word. Each one
 * is still a real link, named for assistive tech by its aria-label. */
.home-hero__jacket--back .novel-cover__eyebrow,
.home-hero__jacket--back .novel-cover__title,
.home-hero__jacket--back .novel-cover__byline { visibility: hidden; }
.home-hero__jacket--back:hover { opacity: 1; filter: none; }
.home-hero__jacket--1 { left: 0; transform: rotate(-3deg); transform-origin: bottom right; }
.home-hero__jacket--1:hover { transform: rotate(-3deg) translateY(-8px); }
.home-hero__jacket--2 { right: 0; transform: rotate(3deg); transform-origin: bottom left; }
.home-hero__jacket--2:hover { transform: rotate(3deg) translateY(-8px); }

.home-hero__jacket-cta {
	position: absolute;
	left: 50%;
	bottom: -0.9rem;
	transform: translateX(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	white-space: nowrap;
	padding: 0.5em 1.05em;
	border-radius: 999px;
	background: var(--rc-accent);
	color: var(--rc-on-accent);
	font-size: var(--rc-size-0);
	font-weight: 700;
	box-shadow: var(--rc-shadow);
	transition: background 0.3s var(--rc-ease-out);
}
.home-hero__jacket--lead:hover .home-hero__jacket-cta { background: var(--rc-accent-bright); }

/* ---------- Facts strip under the hero ---------- */
.home-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rc-sp-3) var(--rc-sp-6);
	margin-top: var(--rc-sp-6);
	padding-top: var(--rc-sp-3);
	border-top: 1px solid var(--rc-line);
	font-size: var(--rc-size-0);
	color: var(--rc-paper-faint);
	letter-spacing: 0.04em;
}
.home-facts strong {
	font-family: var(--rc-font-display);
	font-size: var(--rc-size-2);
	font-weight: 700;
	color: var(--rc-accent-bright);
	margin-right: 0.4em;
}

/* ---------- Continue reading (shell only) ----------
 * The heading and rhythm are owned here; [data-rc-continue] and every
 * item inside it belong to the reading-history module, which also hides
 * this section for a visitor with no history. */
.home-continue { padding: var(--rc-sp-7) 0; }
.home-continue__head { margin-bottom: var(--rc-sp-4); }
.home-continue [data-rc-continue]:empty { display: none; }

/* ---------- Genres as colour-coded spines ---------- */
.home-genres,
.home-library { padding: var(--rc-sp-7) 0; }

.home-genre-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rc-sp-3);
}
.home-genre {
	display: flex;
	align-items: stretch;
	gap: var(--rc-sp-3);
	padding: var(--rc-sp-3);
	border: 1px solid var(--rc-line);
	border-radius: var(--rc-radius);
	background: var(--rc-glass-bg);
	transition: border-color 0.3s var(--rc-ease-out), transform 0.35s var(--rc-ease-out), background 0.3s var(--rc-ease-out);
}
.home-genre:hover {
	border-color: hsla(var(--cover-hue), 55%, 55%, 0.55);
	transform: translateY(-3px);
}
.home-genre__spine {
	flex: 0 0 8px;
	border-radius: 2px;
	background: linear-gradient(180deg, hsla(var(--cover-hue), 60%, 58%, 0.95), hsla(var(--cover-hue), 45%, 26%, 0.9));
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35);
}
.home-genre__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	flex: 1;
}
.home-genre__name {
	font-family: var(--rc-font-display);
	font-size: var(--rc-size-2);
	line-height: 1.2;
	color: var(--rc-paper);
}
.home-genre__count {
	font-size: var(--rc-size-0);
	color: var(--rc-paper-faint);
}
.home-genre__arrow {
	align-self: center;
	color: var(--rc-paper-faint);
	transition: transform 0.35s var(--rc-ease-out), color 0.3s var(--rc-ease-out);
}
.home-genre:hover .home-genre__arrow { color: var(--rc-accent-bright); transform: translateX(3px); }

/* ---------- Library ---------- */
.home-library__head { max-width: 46rem; }
.home-library__link { margin-top: var(--rc-sp-3); }

/* ---------- Release list ---------- */
.home-releases {
	margin-top: var(--rc-sp-6);
	padding-top: var(--rc-sp-4);
	border-top: 1px solid var(--rc-line);
}
.home-releases__title {
	font-family: var(--rc-font-text);
	font-size: var(--rc-size-0);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rc-accent-bright);
	margin-bottom: var(--rc-sp-2);
}
.home-release-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--rc-sp-5);
}
.home-release-list a {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.15rem var(--rc-sp-3);
	padding: var(--rc-sp-2) var(--rc-sp-2) var(--rc-sp-2) var(--rc-sp-3);
	border-bottom: 1px solid var(--rc-line);
	transition: background 0.3s var(--rc-ease-out);
}
.home-release-list a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.9rem;
	bottom: 0.9rem;
	width: 3px;
	border-radius: 2px;
	background: hsla(var(--cover-hue), 60%, 55%, 0.8);
}
/* A wash of the running ink colour, so it darkens a cream row and lightens a
 * dark one instead of being a fixed cream that vanishes on paper. */
.home-release-list a:hover { background: color-mix(in srgb, var(--rc-paper) 6%, transparent); }
.home-release__novel {
	grid-column: 1;
	grid-row: 1;
	font-size: var(--rc-size-0);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsla(var(--cover-hue), 45%, 72%, 0.9);
}
.home-release__chapter {
	grid-column: 1;
	grid-row: 2;
	font-family: var(--rc-font-display);
	font-size: var(--rc-size-2);
	line-height: 1.25;
	color: var(--rc-paper);
}
.home-release__meta {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-size: var(--rc-size-0);
	color: var(--rc-paper-faint);
	white-space: nowrap;
}

/* ---------- Essays: deliberately quieter than the fiction ---------- */
.home-essays { padding: var(--rc-sp-7) 0; }
.home-essays__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rc-sp-2) var(--rc-sp-4); max-width: none; }
.home-essays__head .eyebrow { flex: 0 0 100%; }
.home-essays__link { margin-left: auto; font-size: var(--rc-size-0); color: var(--rc-paper-dim); }
.home-essays__link a { display: inline-flex; align-items: center; gap: 0.4em; }
.home-essays__link a:hover { color: var(--rc-accent-bright); }
.home-essay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-essay-grid .essay-card__title { font-size: var(--rc-size-2); }

/* ---------- Under the hood: the window onto the live field ----------
 * No .home-band here on purpose. The fixed WebGL2 word-frequency field
 * shows through this band and nowhere else on the home page, with soft
 * gradient fades top and bottom so the seam reads as intentional. */
.home-craft { padding: var(--rc-sp-8) 0; }
.home-craft::before,
.home-craft::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: var(--rc-sp-7);
	pointer-events: none;
	z-index: 0;
}
/* Both seams fade from the page surface to nothing, so they follow --rc-ink
 * rather than a frozen copy of the night ink. */
.home-craft::before {
	top: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--rc-ink) 93%, transparent), transparent);
}
.home-craft::after {
	bottom: 0;
	background: linear-gradient(0deg, color-mix(in srgb, var(--rc-ink) 93%, transparent), transparent);
}
.home-craft > .wrap { position: relative; z-index: 1; }
/* The field drifts *through* this copy on purpose; the halo keeps the
 * sentence legible without boxing it off from the layer it describes. It is
 * a halo in the PAGE colour, so it stays cream-on-dark and ink-on-cream. */
.home-craft .section-head {
	text-shadow:
		0 1px 14px color-mix(in srgb, var(--rc-ink) 98%, transparent),
		0 0 34px color-mix(in srgb, var(--rc-ink) 90%, transparent);
}

.home-craft__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rc-sp-4);
	align-items: stretch;
}
.home-craft__panel { display: flex; flex-direction: column; }
.home-craft__panel .rc-fk { margin-top: auto; }
.home-craft__panel {
	background: var(--rc-glass-bg);
	border-color: var(--rc-glass-border);
	backdrop-filter: blur(12px) saturate(1.05);
	-webkit-backdrop-filter: blur(12px) saturate(1.05);
	box-shadow: var(--rc-shadow);
}
.home-craft__note {
	font-size: var(--rc-size-0);
	color: var(--rc-paper-dim);
	margin-bottom: var(--rc-sp-3);
}
.home-craft__readout {
	font-family: var(--rc-font-mono);
	font-size: var(--rc-size-0);
	line-height: 1.7;
	color: var(--rc-accent-bright);
	/* A recessed well cut into the panel: a wash of the page surface rather
	 * than a fixed black, which read as a hole punched in a cream card. */
	background: color-mix(in srgb, var(--rc-ink) 62%, transparent);
	border: 1px solid var(--rc-line-strong);
	border-radius: var(--rc-radius);
	padding: var(--rc-sp-2);
	overflow-wrap: anywhere;
}
.home-craft__field { width: 100%; margin-bottom: var(--rc-sp-3); }
.home-craft__field textarea { width: 100%; }
.home-craft__foot {
	margin-top: var(--rc-sp-4);
	font-size: var(--rc-size-0);
	color: var(--rc-paper-faint);
	max-width: 60rem;
}
.home-craft__foot a {
	color: var(--rc-accent-bright);
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	white-space: nowrap;
}

/* ---------- Closing call to action ---------- */
.home-cta__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rc-sp-4);
	padding: var(--rc-sp-5);
	border: 1px solid var(--rc-line);
	border-radius: var(--rc-radius);
	background: var(--rc-glass-bg);
}
.home-cta__dek { font-size: var(--rc-size-1); max-width: 46ch; margin-top: 0.5rem; }
.home-cta__actions { display: flex; flex-wrap: wrap; gap: var(--rc-sp-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.home-genre-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
	.home-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--rc-sp-5);
		justify-items: center;
		text-align: center;
	}
	/* Cover-led on small screens too: the jacket comes before the copy. */
	.home-hero__art { order: -1; width: 100%; }
	.home-hero__shelf { margin: 0 auto; max-width: 340px; }
	.home-hero__text { max-width: 38rem; }
	.home-hero__dek { max-width: none; }
	.home-meta { justify-content: center; }
	.home-hero__actions { justify-content: center; }
	.home-facts { justify-content: space-between; gap: var(--rc-sp-3); }
	.home-essay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-craft__grid { grid-template-columns: 1fr; }
	.home-release-list { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
	.home-genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-essay-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.home-hero { padding: var(--rc-sp-5) 0 var(--rc-sp-5); }
	.home-hero__shelf { max-width: 290px; }
	.home-hero__title { font-size: var(--rc-size-6); }
	.home-hero__byline { font-size: var(--rc-size-1); }
	.home-hero__actions .btn { width: 100%; justify-content: center; }
	.home-facts { flex-direction: column; gap: var(--rc-sp-2); align-items: flex-start; text-align: left; }
	.home-genre-grid { grid-template-columns: 1fr; }
	.home-cta__panel { padding: var(--rc-sp-4); }
	.home-cta__actions { width: 100%; flex-direction: column; }
	.home-cta__actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
	.home-hero__shelf { max-width: 250px; }
}

/* ---------- Motion & no-JS safety ----------
 * main.css already neutralises transitions under reduced motion, and
 * hides the field canvas outright; this restores a static texture in the
 * one band whose whole point is that something is drawn behind it. */
@media (prefers-reduced-motion: reduce) {
	.home-craft {
		background:
			radial-gradient(70% 55% at 50% 45%, color-mix(in srgb, var(--rc-paper) 6%, transparent), transparent 72%),
			radial-gradient(35% 30% at 62% 62%, color-mix(in srgb, var(--rc-accent) 8%, transparent), transparent 70%);
	}
	.home-hero__jacket:hover,
	.home-hero__jacket--1:hover,
	.home-hero__jacket--2:hover,
	.home-genre:hover { transform: none; }
	.home-hero__jacket--1:hover { transform: rotate(-7deg); }
	.home-hero__jacket--2:hover { transform: rotate(7deg); }
}

/* The theme's <html class="no-js"> is never removed by any script, so a
 * .no-js selector cannot be used to un-hide reveal content. This does it
 * from the media feature instead: with scripting disabled the reveal
 * observer never runs, so every reveal must start visible. */
@media (scripting: none) {
	.reveal { opacity: 1; transform: none; }
}