/*
 * The portal's index: one sentence on what the studio makes and the site's sections,
 * under the doors. Hand-written (tools/import_design.py never writes this file);
 * functions.php loads it after portal-touch.css, on the front page only. The doors are
 * the way in; this strip is what a search engine and a reader of the bare page get: the
 * portal is the site's front page and had sixty words and two links.
 */
.index {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 48px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 44px clamp(20px, 4vw, 52px) 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
	text-align: center;
	font-family: var(--font-mono);
	opacity: 0;
	transition: opacity 1s 1s;
}
.revealed .index { opacity: 1; }
.index-line {
	margin: 0;
	max-width: 112ch;
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: .06em;
	color: #8a8a8a;
}
.index-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #444;
}
.index-links li + li::before { content: '//'; margin: 0 12px; color: #333; }
.index-links a { color: #767676; transition: color .4s; }
.index-links a:hover,
.index-links a:focus-visible { color: #00E5FF; outline: none; }
.index-latest a { color: #9a9a9a; }
.index-latest a:hover,
.index-latest a:focus-visible { color: #FF6A2B; }

/* Full-screen portal: the doors' ENTER keeps clear of the strip and the bottom line, and
   the seam between the doors ends above it. */
@media (min-width: 761px) and (min-height: 561px) {
	.door { padding-bottom: max(clamp(26px, 5vw, 78px), 140px); }
	.seam { bottom: 128px; }
}

/* Stacked portal (phones, short screens; portal-touch.css): the strip is a row of its own. */
@media (max-width: 760px), (max-height: 560px) {
	.wp-site-blocks { grid-template-rows: auto 1fr auto auto; }
	.index { position: relative; bottom: auto; padding: 18px 20px 2px; gap: 14px; background: none; }
	.index-links { gap: 10px 22px; line-height: 1.6; }
	.index-links li + li::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
	.index { transition: none; }
}