/*!
	Rotor — child theme styles.
	Loaded after skelet.css and the parent app.css, so it overrides them.

	Careful with rem: skelet.css sets html to 62.5%, so 1rem = 10px.
*/

:root {
	--bgColor: #000;
	--color: #FFF;
	--colorInverse: #FFF;
	--fontSize: calc(100vw / 90);
	--margin: 2rem;
	--siteMarg: 5rem;

	--linkColor: var(--color);
	--accent: #e2001a;
	--linkHover: var(--accent);

	/* Shared left inset: the site name lines up with the titles on the images. */
	--titleInset: 1.5rem;

	--hWeight: 800;
	--hSpace: -0.02em;

	/* Site name, and the size every artwork title is capped at. */
	--hHeading: clamp(3.6rem, 15vw, 22rem);
	--titleFont: var(--fontFamily);
}


/* ------------------------------------------------------------------
	Layout
   ------------------------------------------------------------------ */

#app {
	max-width: 1600px;
	margin: 0 auto;
	padding: 1rem var(--siteMarg) var(--siteMarg);
}

x-flex > * { padding: var(--rowGap); }
x-flex > x-col { max-width: 30%; }

footer { width: 100%; }
footer x-flex > x-col { width: 50%; }

.space1 { display: block; width: 100%; margin: 5vw auto; }


/* ------------------------------------------------------------------
	Header — site name on the left, menu alongside it on the right
   ------------------------------------------------------------------ */

header {
	display: flex;
	flex-wrap: wrap;               /* the menu drops below the name when it no longer fits */
	align-items: baseline;
	justify-content: space-between;
	gap: .4rem 1.5rem;
	width: 100%;
	max-width: none;
	margin: 0 0 var(--margin);
	padding-left: var(--titleInset);
}

/* The menu comes first in the markup; order puts the name back on the left. */
header x-flex { order: -1; flex: 0 1 auto; display: block; }
header x-flex > x-col { max-width: none; padding: 0; }
header .nav { flex: 0 1 auto; }

header .h1 {
	--hSize: var(--hHeading);
	--hMargin: 0;
	font-family: var(--titleFont);
	line-height: .8;
	letter-spacing: -.04em;
	text-transform: uppercase;
}

.menu { margin: 0; text-align: right; }
.menu li { display: inline-block; margin: 0 0 0 .7em; }

.menu li a {
	font-weight: 700;
	font-size: clamp(1.6rem, 1.8vw, 2.8rem);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.menu .current-menu-item a { text-decoration: underline; text-underline-offset: .35em; }


/* ------------------------------------------------------------------
	Gallery — the title sits on the visual, no gap between images
   ------------------------------------------------------------------ */

article { margin: 0; }

.article-header {
	position: relative;
	container-type: inline-size;   /* 1cqw = 1% of the image width */
}

.article-header > a { display: block; position: relative; }

h2.article-title {
	/*
		Scale the title so it spans roughly two thirds of the image, whatever
		its length. --len is the character count, set on the element in
		snippets/loop-archive.php; .62em is the average width of a capital
		in Inter 800.
	*/
	--fit: calc(66cqw / (var(--len, 14) * .64));
	--hSize: clamp(2rem, var(--fit), 22rem);
	--hMargin: 0;

	position: absolute;
	inset: 0 0 auto 0;
	padding: .4em var(--titleInset) 1.1em;
	font-family: var(--titleFont);
	line-height: .85;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 .04em .35em rgba(0, 0, 0, .45);
	background: linear-gradient(to bottom, rgba(0, 0, 0, .85), rgba(0, 0, 0, .4) 45%, transparent 100%);
	/* Clicks fall through to the image link underneath; only the words are clickable. */
	pointer-events: none;
}

h2.article-title a { color: inherit; pointer-events: auto; }

/* Stencil variant — hollow letters, closer to the sketch. Swap with the rule above to try it.
h2.article-title a {
	color: transparent;
	-webkit-text-stroke: .035em #fff;
	paint-order: stroke fill;
}
*/

/* Visuals rest under a dark veil — on every device, touch included. */
.article-header > a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--veil, .5);
	transition: opacity .5s ease;
	pointer-events: none;
}

/* Hovering lifts the veil. Desktop only: a touch screen keeps the veil on. */
@media (hover: hover) and (pointer: fine) {
	.article-header:hover > a::after { --veil: 0; }
}


/* ------------------------------------------------------------------
	Single artwork
   ------------------------------------------------------------------ */

h1.article-title {
	--hSize: clamp(3rem, 6.5vw, 9rem);
	--hMargin: .35em 0 .25em;
	font-family: var(--titleFont);
	line-height: .9;
	text-transform: uppercase;
}

.article-footer .tags {
	font-size: .85rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .55;
}


/* ------------------------------------------------------------------
	Pagination — one row, big letters.
	Styled on .pagination alone: the server drops the .inline class
	skelet.css relies on to lay list items out in a row.
   ------------------------------------------------------------------ */

.page-navigation { margin: 4rem 0 1rem; }

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0 .5em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--titleFont);
	font-size: clamp(2.4rem, 5vw, 6rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
	text-transform: uppercase;
}

.pagination li { margin: 0; padding: 0; list-style: none; }

/* "Previous" on page 1 (and "Next" on the last one) leaves an empty <li> behind. */
.pagination li:empty { display: none; }

.pagination a {
	color: #fff;
	opacity: .4;
	text-decoration: none;
	transition: opacity .25s ease, color .25s ease;
}

.pagination a:hover { opacity: 1; color: var(--accent); }
.pagination .current { opacity: 1; }


/* skelet.css disables focus outlines site-wide; keep one for keyboard users. */
.pagination a:focus-visible,
h2.article-title a:focus-visible,
.menu a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: .2em;
}


@media (max-width: 600px) {
	:root {
		--fontSize: 1.3rem;
		--siteMarg: 2rem;
	}

	.menu { text-align: left; }
	.menu li { margin: 0 .7em 0 0; }

	x-flex > x-col { max-width: 100%; }

	h2.article-title { padding: .4em var(--titleInset) 1.1em; }
	.pagination { gap: 0 .4em; }
}