/* The long pages: the front door (pages/about.php) and the world (pages/world.php) for visitors, and
   help (pages/help.php) for houses - so both layouts load this. Sections of text beside footage, a
   screenshot or a note on parchment, with plenty of room between them. Prefixed .showcase- where the
   pages share a piece, .world- and .help- where only one page uses it. */

/* Each of these pages is a column of sections, far apart, with the same room above the first and below
   the last - the last section should not sit on the footer. */
main:has(.showcase-hero),
main:has(.world-intro),
main:has(.help-intro)
{
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing) * 6);
	padding-block: calc(var(--spacing) * 6);
}


/* ===== The front door ===== */

/* Every clip and screenshot: footage of the game, so dark in both schemes, framed like a panel. */
.showcase-media
{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #0b0608;
	border: 1px solid var(--color-gold-muted);
	border-radius: 3px;
	box-shadow: 0 10px 30px var(--color-drop-shadow);
}


/* The duel clip on the right, fading into a dark frame, with the pitch beside it on the left - so the
   fight is never behind the text. The text sits on the dark frame in both schemes, so it is dark there
   - see the gotcha at the bottom of color_scheme.css. On a phone: the clip, then the text under it. */
.showcase-hero
{
	position: relative;
	color-scheme: dark;
	color: var(--color-gold);

	& .showcase-hero__text
	{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--spacing-text);
	}

	/* Gotcha: background-clip: text only paints inside the element's own box, and the title is wider
	   than the text column - letters that overflowed it came out transparent. max-content makes the
	   box as wide as the word. */
	& h1
	{
		width: max-content;
		margin: 0;
		font-family: var(--font-logo);
		font-weight: 700;
		font-size: clamp(2.2em, 6vw, 4em);
		letter-spacing: .16em;
		text-transform: uppercase;
		color: transparent;
		background: var(--gradient-gold);
		background-clip: text;
		-webkit-background-clip: text;
		/* Like the logo's: the word can run onto the clip's fade. */
		filter: drop-shadow(0 0 10px rgb(0 0 0 / .9));
	}

	& .showcase-hero__tagline
	{
		font-family: var(--font-header);
		font-size: 1.25em;
	}

	& .actions
	{
		margin-top: var(--spacing);
	}
}

@media (min-width: 801px)
{
	/* The frame is the hero itself; the clip fills its right two thirds at 16:9, which sets the hero's
	   shape. aspect-ratio is only a minimum here: when the text needs more height (a narrow window),
	   the hero grows and the clip crops its sides instead. */
	.showcase-hero
	{
		aspect-ratio: 1 / (.68 * 9 / 16);
		display: flex;
		align-items: center;
		background: #0b0608;
		border: 1px solid var(--color-gold-muted);
		border-radius: 3px;
		box-shadow: 0 10px 30px var(--color-drop-shadow);
		overflow: hidden;

		& .showcase-media
		{
			position: absolute;
			inset: 0 0 0 auto;
			width: 68%;
			height: 100%;
			aspect-ratio: auto;
			border: none;
			border-radius: 0;
			box-shadow: none;
			mask-image: linear-gradient(90deg, transparent, #000 35%);
		}

		& .showcase-hero__text
		{
			width: min(575px, 50%);
			padding: calc(var(--spacing) * 2);
			text-shadow: 0 0 12px #000;
		}
	}
}

/* On a phone the text is page text again, under the clip: back to the page's scheme and its colors. */
@media (max-width: 800px)
{
	.showcase-hero
	{
		color-scheme: inherit;
		color: var(--color-gold);

		& .showcase-hero__text
		{
			padding-top: var(--spacing);
		}

		/* The gold gradient fades out on light paper, so plain text color here, in both schemes. */
		& h1
		{
			color: var(--color-gold);
			background: none;
			filter: none;
		}
	}
}


.showcase-pillars
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--spacing);

	/* Icon and title side by side, the text under both. */
	& > .panel
	{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: var(--spacing-text) 12px;
	}

	& svg
	{
		width: 36px;
		height: 36px;
		stroke: currentColor;
		fill: none;
	}

	& h2
	{
		margin: 0;
	}

	& p
	{
		grid-column: 1 / -1;
	}
}


/* A 6:1 strip of footage, its ends fading into the page. On a phone it would be a sliver, so it is cut
   to 3:1 there, around the middle. */
.showcase-media.showcase-media--banner
{
	aspect-ratio: 6 / 1;
	border: none;
	border-radius: 0;
	box-shadow: none;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

@media (max-width: 600px)
{
	.showcase-media.showcase-media--banner
	{
		aspect-ratio: 3 / 1;
	}
}


/* Text beside footage; --flip puts the footage first. One column on narrow screens, text first. */
.showcase-feature
{
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	align-items: center;
	gap: calc(var(--spacing) * 2);

	&.showcase-feature--flip
	{
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);

		& .showcase-feature__media
		{
			order: -1;
		}
	}

	& .showcase-feature__media
	{
		position: relative;
	}

	& h2
	{
		font-size: 1.8em;
	}
}

@media (max-width: 800px)
{
	.showcase-feature,
	.showcase-feature.showcase-feature--flip
	{
		grid-template-columns: minmax(0, 1fr);

		& .showcase-feature__media
		{
			order: 0;
		}
	}
}

/* The Spell Creator: its graph, with the price and the live preview as a clip laid over the corner -
   cut from the same window, so the screenshot does not show the panel twice. Under it on a phone. */
.showcase-media.showcase-media--graph
{
	aspect-ratio: 1170 / 900;
}

/* A clip cut tall, to keep a body and the HUD's effects row under it in one close frame (the help page's
   broken oath). The 16:9 default would crop it to a band through the middle. */
.showcase-media.showcase-media--portrait
{
	aspect-ratio: 7 / 8;
}

.showcase-media.showcase-media--inset
{
	position: absolute;
	right: calc(var(--spacing) * -1);
	bottom: calc(var(--spacing) * -2);
	width: 40%;
	aspect-ratio: 428 / 500;
	box-shadow: 0 10px 40px rgb(0 0 0 / .8);
}

@media (max-width: 800px)
{
	.showcase-media.showcase-media--inset
	{
		position: static;
		width: 70%;
		margin: var(--spacing) auto 0;
	}
}

/* The small caps line above a feature's heading. */
.showcase-kicker
{
	margin-bottom: 4px;
	font-family: var(--font-header);
	font-size: .8em;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--color-gold-shaded);
}

.showcase-list
{
	margin-top: var(--spacing);
	padding-left: 1.2em;

	& li + li
	{
		margin-top: var(--spacing-text);
	}
}


.showcase-call
{
	text-align: center;

	& .actions
	{
		justify-content: center;
		margin-top: var(--spacing);
	}
}


/* ===== The world ===== */

.world-intro
{
	max-width: 40em;
	margin: 0 auto;
	text-align: center;

	& h1
	{
		margin: 0;
		font-family: var(--font-logo);
		font-weight: 700;
		font-size: clamp(1.8em, 5vw, 3em);
		letter-spacing: .12em;
		text-transform: uppercase;
	}

	& .world-intro__text
	{
		margin-top: calc(var(--spacing) * 1.5);
		font-size: 1.15em;
		text-align: center;
	}
}

/* The proverb under the title: the handwriting the fragments are in, without their paper. */
.world-epigraph
{
	margin-top: var(--spacing-text);
	font-family: var(--font-written);
	font-style: italic;
	font-size: 1.15em;
	color: var(--color-gold-shaded);
}


/* Prose beside its fragment; --flip puts the fragment first. One column on narrow screens, prose first. */
.showcase-section
{
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	align-items: center;
	gap: calc(var(--spacing) * 2);

	/* Whatever is in the side column - a note, a screenshot - goes first. */
	&.showcase-section--flip
	{
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);

		& > :last-child
		{
			order: -1;
		}

		& .showcase-fragment
		{
			rotate: -1deg;
		}
	}

	& h2
	{
		font-size: 1.8em;
	}
}

@media (max-width: 800px)
{
	.showcase-section,
	.showcase-section.showcase-section--flip
	{
		grid-template-columns: minmax(0, 1fr);

		& > :last-child
		{
			order: 0;
		}
	}
}

/* A scrap of parchment, set down a little crooked, as a found note would be. */
.showcase-fragment
{
	margin: 0;
	padding: calc(var(--spacing) * 1.5);
	rotate: 1.2deg;
	/* .ragged draws the paper on ::before with torn edges, so the sheet's own rectangle goes (it would
	   show where an edge tears inwards), and the shadow is a drop-shadow, which follows the tears. */
	background: none;
	filter: drop-shadow(0 8px 14px var(--color-drop-shadow));

	& blockquote
	{
		margin: 0;
		font-size: 1.1em;
		line-height: 1.4;
	}

	& figcaption
	{
		margin-top: var(--spacing);
		font-size: 0.9em;
		text-align: right;
		color: var(--color-ink-red);

		&::before
		{
			content: '- ';
		}
	}
}


/* ===== Help ===== */

.help-intro
{
	max-width: 46em;
	margin: 0 auto;
	text-align: center;

	& h1
	{
		margin: 0;
		font-size: clamp(1.6em, 4vw, 2.4em);
	}

	& .help-intro__lead
	{
		margin-top: var(--spacing-text);
		font-size: 1.15em;
	}
}

/* The contents: numbered links in two columns, read top to bottom - down the first, then the second.
   The second column's numbers hang in the gap between them, so the gap is wider than they are. */
.help-contents
{
	margin-top: calc(var(--spacing) * 1.5);
	text-align: left;

	& ol
	{
		columns: 2;
		column-gap: calc(var(--spacing) * 3);
		margin: 0;
		padding-left: 1.4em;
	}

	& li
	{
		break-inside: avoid;

		& + li
		{
			margin-top: var(--spacing-text);
		}
	}

	& a
	{
		font-family: var(--font-header);
		font-size: .95em;
		text-decoration: none;

		&:hover
		{
			text-decoration: underline;
		}
	}
}

@media (max-width: 600px)
{
	.help-contents ol
	{
		columns: 1;
	}
}

/* Jumped to from the contents: not flush against the top of the window. */
.help-section
{
	scroll-margin-top: calc(var(--spacing) * 2);
}

.help-steps
{
	padding-left: 1.4em;

	& li + li
	{
		margin-top: var(--spacing-text);
	}
}

/* What to press, one row per action. */
.help-keys
{
	width: 100%;
	border-collapse: collapse;

	& th,
	& td
	{
		padding: var(--spacing-text) 0;
		text-align: left;
		vertical-align: top;
		border-bottom: 1px solid var(--color-gold-line);
	}

	& th
	{
		width: 10em;
		padding-right: var(--spacing);
		font-family: var(--font-header);
		font-weight: 500;
		font-size: .8em;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--color-gold-shaded);
	}
}

/* A key, drawn as a keycap. Only in the help text: the slot tiles' corner numbers are <kbd>s too (see
   slots.css), and a global rule boxed them in. */
.help-section kbd
{
	display: inline-block;
	min-width: 1.7em;
	padding: 0 .4em;
	font-family: var(--font-header);
	font-size: .8em;
	line-height: 1.6;
	text-align: center;
	color: var(--color-gold);
	background: var(--color-sunken);
	border: 1px solid var(--color-gold-muted);
	border-bottom-width: 2px;
	border-radius: 3px;
}

.help-aside
{
	margin-top: var(--spacing);
	font-size: .95em;
	color: var(--color-gold-shaded);
}

/* A margin note is a fragment without a source - it is the Margin talking. Under the text when the side
   column holds footage instead. */
.help-note
{
	& p
	{
		font-size: 1em;
	}

	.showcase-feature__text &
	{
		max-width: 26em;
		margin-top: calc(var(--spacing) * 2);
	}
}

/* A screenshot keeps its own shape - the 16:9 frame footage gets would crop the HUD off its bottom. */
.showcase-media.help-screenshot
{
	aspect-ratio: auto;
}

/* The clips beside a section, stacked, each with a line saying what it shows. */
.help-figures
{
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing) * 1.5);
}

.help-figure
{
	margin: 0;

	& figcaption
	{
		margin-top: var(--spacing-text);
		font-size: .95em;
		color: var(--color-gold-shaded);
	}
}