/* reynoldsj.co — static rebuild of the Cargo site */

:root {
	--bg: rgb(246, 246, 246);
	--text: #000;
	--muted: rgba(0, 0, 0, 0.35);
	--highlight: #fffecb;
	--highlight-ink: #000; /* text on the highlight */
	--highlight-muted: rgba(0, 0, 0, 0.45);
	--rule: rgba(127, 127, 127, 0.2);
	--underline: rgba(0, 0, 0, 0.2);
	--fs: 13px; /* body text size; a touch larger on phones */
	color-scheme: light;
}
@media (max-width: 640px) { :root { --fs: 15px; } }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: rgb(12, 12, 12);
		--text: #f2f2f2;
		--muted: rgba(255, 255, 255, 0.4);
		--highlight: #6e6830; /* a dim mustard, with light text on it */
		--highlight-ink: var(--text);
		--highlight-muted: rgba(255, 255, 255, 0.55);
		--rule: rgba(255, 255, 255, 0.15);
		--underline: rgba(255, 255, 255, 0.3);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: rgb(12, 12, 12);
	--text: #f2f2f2;
	--muted: rgba(255, 255, 255, 0.4);
	--highlight: #6e6830; /* a dim mustard, with light text on it */
	--highlight-ink: var(--text);
	--highlight-muted: rgba(255, 255, 255, 0.55);
	--rule: rgba(255, 255, 255, 0.15);
	--underline: rgba(255, 255, 255, 0.3);
	color-scheme: dark;
}

/* Cargo scales rem with the viewport; ~12.4px at 880px wide */
html {
	font-size: clamp(10px, calc(8px + 0.5vw), 14px);
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent; /* no grey box on iOS taps */
}

/* No outline after a tap or click; keyboard focus still shows one */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	padding: 1rem;
	background: var(--bg);
	color: var(--text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
	font-size: var(--fs);
	line-height: 1.3;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* full-width rows (the shelves) never scroll the page sideways */
	/* Short pages: main stretches so the footer sits at the bottom of the screen */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}
body > main { flex: 1 0 auto; }

a {
	color: var(--text);
	text-decoration: none;
	padding-bottom: 0.1em;
}

a:hover {
	background-color: var(--highlight);
	color: var(--highlight-ink);
}

/* Selected text: each text box in its own colour from the work (set by
   site.js); solid black (inverted in dark mode) until it's set */
::selection { background: var(--sel, var(--text)); color: var(--sel-ink, var(--bg)); }

.muted { color: var(--muted); }

img { display: block; max-width: 100%; height: auto; border: 0; }

hr {
	background: var(--rule);
	border: 0;
	height: 1px;
	margin: 6.5px 0;
}

/* Pinned top-left name, overlays the page like Cargo's pinned "Nav" */
.site-nav {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 10;
}

.home .site-nav ~ .content { padding-top: calc(var(--fs) * 1.3 + 0.5rem + 5px); }
.project .content, body:not(.home) .content { padding-top: calc(var(--fs) * 1.3 + 2rem); }

/* Light/dark switch: a plain circle, top right */
.theme-toggle {
	position: fixed;
	top: calc(1rem + 3px);
	right: 1rem;
	z-index: 10;
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--text);
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.2s ease;
}
.theme-toggle::after {
	/* Larger tap target */
	content: "";
	position: absolute;
	inset: -12px;
}
.theme-toggle:hover { transform: scale(1.25); }
.theme-toggle:focus-visible { outline: 1px solid var(--muted); outline-offset: 3px; }

body { transition: background-color 0.2s ease, color 0.2s ease; }

/* Cargo grid: grid-pad / grid-gutter in rem, 12 columns */
.row {
	display: flex;
	padding: calc(var(--pad) * 0.5rem);
	margin: calc(var(--gutter) * -0.5rem);
	/* Never reach past the 1rem page padding (avoids sideways scroll) */
	margin-inline: max(calc(var(--gutter) * -0.5rem), -1rem);
}

.col {
	flex: 1 1 0;
	min-width: 0;
	padding: calc(var(--pad) * 0.5rem);
}

.col[style*="--span"] { flex: 0 0 calc(var(--span) / 12 * 100%); }

.page { padding-bottom: 3rem; }
.page:has(.row) { padding-top: 1rem; }
.page:not(:has(.row)) { padding-bottom: 0; }

/* A video project's film, playing over its slideshow (set by lab.js) */
.slideshow-film { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity 0.3s ease; }
.slideshow-film.is-off { opacity: 0; }
.slideshow-film video,
.slideshow-film img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }

/* Slideshow — mirrors Cargo's "scrub" slideshow with autoplay */
.slideshow {
	position: relative;
	aspect-ratio: var(--ratio);
	width: 100%;
	user-select: none;
}

/* All projects run the full column width, whatever their ratio */

.slideshow .slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
}

.slideshow.align-left .slide { justify-content: flex-start; }
.slideshow .slide.is-active { visibility: visible; }

.slideshow.fade .slide {
	visibility: visible;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.slideshow.fade .slide.is-active { opacity: 1; }

.slideshow .slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	margin-bottom: 0; /* (.col img's spacing would lift the centred picture) */
}

.slideshow .arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	/* Invisible 36px hit area around a plain arrow */
	width: 36px;
	height: 36px;
	margin-top: -18px;
	padding: 0;
	border: 0;
	background: none;
	/* Same arrow as the intro links (→ LinkedIn): same size and the page's
	   own font stack. Inter has no arrow glyph, so both fall through to the
	   same system font. Inverts whatever is underneath like the nav. */
	font-family: inherit;
	font-size: var(--fs);
	font-weight: 400;
	line-height: var(--fs);
	color: #fff;
	mix-blend-mode: difference;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.slideshow .arrow.prev { left: 6px; }
.slideshow .arrow.next { right: 6px; }
.slideshow .arrow.prev::before { content: "\2190"; }
.slideshow .arrow.next::before { content: "\2192"; }
.slideshow .arrow:focus-visible { opacity: 1; }
/* Touch screens have no hover, so show both */
@media (hover: none) { .slideshow .arrow { opacity: 1; } }

.slideshow { cursor: pointer; }

/* Desktop: the cursor itself becomes the arrow for the half you're on */
.cursor-arrow {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	font-size: var(--fs);
	line-height: var(--fs);
	color: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.slideshow.hover-left .cursor-arrow::before { content: "\2190"; }
.slideshow.hover-right .cursor-arrow::before { content: "\2192"; }
.slideshow.hover-view .cursor-arrow::before { content: "View"; }
@media (hover: hover) {
	.slideshow { cursor: none; }
	.slideshow .arrow { cursor: none; }
	.slideshow.hover-left .cursor-arrow,
	.slideshow.hover-right .cursor-arrow,
	.slideshow.hover-view .cursor-arrow { opacity: 1; }
}

/* Columns gallery (video pages) */
.gallery-columns {
	columns: var(--cols);
	column-gap: var(--gap);
}
.gallery-columns img { margin-bottom: var(--gap); break-inside: avoid; }

/* Vimeo embeds */
.gallery-embed iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.col img { margin-bottom: 0.5em; }

.site-footer { padding-top: 1rem; }
.site-footer > hr:first-child { margin: 0 0 1.5rem; }
.footer-row { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; } /* the page margin alone sits below it, same as the sides */
/* Footer type inverts what's behind it, like the corners and top bar */
.footer-row { color: #fff; mix-blend-mode: difference; }
.footer-row a { color: #fff; }
.footer-row a:hover { background: none; opacity: 0.5; }
.footer-email { margin-left: auto; align-self: flex-end; } /* on the bottom line, with the @ lines */

/* Phone: stack columns like Cargo's grid-responsive */
@media (max-width: 640px) {
	html { font-size: 10px; }
	.row.responsive { flex-direction: column; }
	.row.responsive > .col { flex: 1 1 auto; }
	.gallery-columns { columns: 2; }
}

/* Hidden lab folder, revealed by typing "fff" */
.lab-folder {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	color: var(--text);
	font-size: 11px;
	opacity: 0;
	transform: translate(-50%, 12px) scale(0.9);
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
	pointer-events: none;
}
.lab-folder.is-open { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.lab-folder:hover { background: none; border-bottom: 0; }
.lab-folder svg {
	width: 34px;
	height: 28px;
	fill: var(--bg);
	stroke: var(--text);
	stroke-width: 1.2;
	stroke-linejoin: round;
	transition: transform 0.15s ease;
}
.lab-folder:hover svg { transform: translateY(-2px); }

/* Fixed nav items invert whatever is underneath them. White plus
   "difference" reads black on the light page, white on the dark page,
   and the inverse colour over images. */
.site-nav,
.view-toggle,
.lab-crumb,
.theme-toggle {
	color: #fff;
	mix-blend-mode: difference;
}
.site-nav a,
.lab-crumb a { color: #fff; }
.lab-crumb a:not(:hover) { opacity: 0.55; }
.site-nav a:hover,
.lab-crumb a:hover { background: none; }
/* The name fades on hover, like the view buttons beside it */
.site-nav a { transition: opacity 0.15s ease; }
.site-nav a:hover { opacity: 0.5; }
.theme-toggle { background: #fff; }

/* Top-right row: here-now count, Projects/Index/Photo, light/dark dot. The row inverts
   whatever is underneath (blend on the row, so its children stay plain). */
.top-controls {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	color: #fff;
	mix-blend-mode: difference;
}
.top-controls > .music,
.top-controls > .view-toggle,
.top-controls > .theme-toggle {
	position: static;
	mix-blend-mode: normal;
	transform: none;
}
/* Keep the dot's enlarged tap area around the dot, not the whole row */
.top-controls > .theme-toggle { flex: none; position: relative; top: 0; right: auto; }

/* Music: Play/Pause, track, next */
.music {
	display: flex;
	gap: 0.75rem;
	white-space: nowrap;
}
.music button {
	font: inherit;
	color: inherit;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.music { gap: 0.4rem; margin-left: 11px; }
.music .music-play { display: inline-grid; justify-items: end; text-align: right; } /* the slot fits "Pause"; either word meets the right edge */
.music .music-play span { grid-area: 1 / 1; }
.music .music-play:not(.is-on) span:last-child,
.music .music-play.is-on span:first-child { visibility: hidden; }
/* Playing indicator, Apple-style: green when playing, grey when paused */
.music-dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8e8e93;
	opacity: 0.6;
	pointer-events: none;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.music-dot.is-playing { background: #34c759; opacity: 1; }
/* Bottom corners: a rail as tall as the page content, whose row sticks to
   the bottom of the screen and comes to rest above the footer on its own */
main { position: relative; }
.corner-rail {
	position: absolute;
	inset: 0;
	display: grid;
	align-items: end;
	pointer-events: none;
}
/* The row inverts what's behind it as a whole (sticky boxes keep their
   contents to themselves, so the blend has to sit on the row itself) */
.corner-row,
.corner-dots {
	grid-area: 1 / 1;
	position: sticky;
	bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.corner-row {
	z-index: 10;
	justify-content: space-between;
	color: #fff;
	mix-blend-mode: difference;
}
.corner-row > * { pointer-events: auto; }
.corner-right { display: flex; align-items: center; margin-left: auto; }
/* The music dot rides a layer of its own over the row, so it keeps its true
   green; its gap from the right edge is measured on resize, never on scroll */
.corner-dots { z-index: 11; justify-content: flex-end; height: calc(var(--fs) * 1.3); } /* one text line, like the row */
/* Music in the bottom-right corner */
.music-dock { color: #fff; }
.music-dock .music { margin-left: 0; }
.music-dock > .music { position: relative; } /* anchors the song list */
/* From the bottom corner the song list opens upward */
.music-dock .music-menu { top: auto; bottom: calc(100% + 0.6rem); }

/* The archive's ↓ turns over when its list is open (the song name doesn't) */
.music .music-pick:not(.music-now) { transition: transform 0.2s ease; }
.music.menu-open .music-pick:not(.music-now) { transform: rotate(180deg); }
/* Song list drops down under the arrow; inverts with the rest of the row */
.music-menu {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
}
.music-menu[hidden] { display: none; }
.music-menu button { opacity: 0.45; transition: opacity 0.15s ease; }
.music-menu button:hover,
.music-menu button[aria-checked="true"] { opacity: 1; }
@media (max-width: 640px) {
	/* Phones: one view button (tap to switch) and the dot */
	.top-controls { gap: 1.4rem; }
	/* Phones: just the current view's name; tapping it switches views */
	.top-controls > .view-toggle button:not([aria-pressed="true"]) { display: none; }
	.top-controls > .view-toggle button[aria-pressed="true"] { opacity: 1; }
	.top-controls > .music { gap: 0.7rem; }
}

/* No focus ring after a mouse click; keyboard focus still shows one */
.top-controls button:focus:not(:focus-visible) { outline: none; }
.top-controls button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* Projects drift up softly as they scroll into view */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Who else is here: faint drifting dots and a quiet head count */
.presence-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 5;
	pointer-events: none;
}
.presence-dot {
	position: absolute;
	top: -3px;
	left: -3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--text);
	opacity: 0;
	transition: opacity 0.8s ease;
	will-change: transform;
}
.presence-dot.is-here { opacity: 0.18; }
.presence-dot.is-gone { opacity: 0; }
.top-controls > .music { order: 0; }
.top-controls > .presence-count { order: 1; opacity: 0.4; white-space: nowrap; margin-right: 1rem; }
.top-controls > .view-toggle { order: 2; }
.top-controls > .theme-toggle { order: 3; }
@media (max-width: 640px) { .top-controls > .presence-count { display: none; } }
/* Native film player: the picture with no chrome, the cursor as a word,
   and one line of the site's type underneath */
.film { margin: 0; outline: none; }
.film-frame { position: relative; background: #000; cursor: none; overflow: hidden; }
.film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.film-frame:fullscreen { display: flex; align-items: center; }
.film-frame:fullscreen video { height: 100%; aspect-ratio: auto; }
.film-cursor {
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.film.show-cursor .film-cursor { opacity: 1; }
/* While playing, the word fades if the mouse rests, so it never sits on the picture */
.film.is-playing.show-cursor .film-cursor { animation: film-rest 2.4s forwards; }
@keyframes film-rest { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.film-bar { display: flex; align-items: center; gap: 1.2rem; padding-top: 0.6rem; }
.film-bar button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.film-bar button:hover { opacity: 0.5; }
.film-play { min-width: 3.2em; text-align: left; }
.film-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Hairline scrubber with a tall, easy hit area */
.film-scrub { flex: 1; display: flex; align-items: center; height: 1.4rem; cursor: pointer; touch-action: none; }
.film-track { position: relative; flex: 1; height: 1px; background: var(--rule); }
.film-loaded,
.film-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); }
.film-loaded { background: var(--rule); }
.film-fill { background: var(--text); }
.film-scrub:hover .film-track,
.film.is-scrubbing .film-track { height: 2px; }
@media (hover: none) { .film-frame { cursor: auto; } .film-cursor { display: none; } }
@media (max-width: 640px) { .film-bar { gap: 0.9rem; } }

/* Ambient porthole: a progressive blur. Stacked layers each blur what's
   behind them a little more, masked into wider rings, so the page stays
   sharp in a round window and softens further out. */
.porthole {
	position: fixed;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	opacity: 0;
}
.porthole i {
	position: absolute;
	inset: 0;
	/* --soft runs 1 → 0 as it wakes, so the blur melts rather than snaps */
	-webkit-backdrop-filter: blur(calc(var(--b) * var(--soft, 1)));
	backdrop-filter: blur(calc(var(--b) * var(--soft, 1)));
	-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--r, 100vmax) * var(--from)), #000 calc(var(--r, 100vmax) * var(--to)));
	mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--r, 100vmax) * var(--from)), #000 calc(var(--r, 100vmax) * var(--to)));
}
.porthole i:nth-child(1) { --b: 2px; --from: 1; --to: 1.35; }
.porthole i:nth-child(2) { --b: 4px; --from: 1.15; --to: 1.6; }
.porthole i:nth-child(3) { --b: 8px; --from: 1.4; --to: 1.95; }
.porthole i:nth-child(4) { --b: 16px; --from: 1.75; --to: 2.4; }
.porthole i:nth-child(5) { --b: 32px; --from: 2.2; --to: 3; }

/* "Now playing — name" scrolling past to the left of Pause (hidden when
   paused, so Play/Pause itself never moves); click it for the list */
.music-now {
	order: -1;
	width: 10rem;
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
	transition: opacity 0.15s ease, width 0.6s cubic-bezier(0.22, 1, 0.36, 1), margin 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.music-now:hover { opacity: 0.6; }
.music-now-track { display: inline-block; animation: music-now 12s linear infinite; animation-play-state: paused; }
.music-now.is-on .music-now-track { animation-play-state: running; }
@keyframes music-now { to { transform: translateX(-50%); } }
.music-now { margin-right: 1rem; } /* room for the green dot beside Play/Pause */
@media (max-width: 640px) { .music-now { width: 12rem; } } /* phones use a 10px rem */
/* Paused: fold to nothing (the negative margin cancels the row's gap) */
.music-now.is-off { width: 0; margin-right: -0.4rem; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, width 0.6s cubic-bezier(0.22, 1, 0.36, 1), margin 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .music-now, .music-now.is-off { transition: none; } }
@media (prefers-reduced-motion: reduce) { .music-now-track { animation: none; } }

/* X · Instagram · LinkedIn in the bottom-left corner (on the rail),
   inverting like the rest of the fixed type */
.socials {
	display: flex;
	gap: 1rem;
	color: #fff;
}
.socials a { color: #fff; padding-bottom: 0; transition: opacity 0.15s ease; } /* sits on the same line as the lightbox caption and Pause */
.socials a:hover { background: none; opacity: 0.5; }

/* Back link at the top of the film pages */
.back-link { display: inline-block; margin-bottom: 1rem; }

/* Phones: each carousel is a swipe slider with snap points; the next image
   peeks. It runs the full width of the screen, so images slide off both
   edges, while the first one lines up with the page's text. */
.slideshow.is-swipe {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding-inline: 1rem;
	scroll-padding-inline: 1rem;
	display: flex;
	aspect-ratio: auto;
	overflow-x: auto;
	gap: 0.5rem;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: auto;
}
.slideshow.is-swipe::-webkit-scrollbar { display: none; }
/* Room after the last image to match the page edge (padding alone is dropped there) */
.slideshow.is-swipe::after { content: ""; flex: 0 0 0.5rem; }
.slideshow.is-swipe .slide {
	position: relative;
	inset: auto;
	/* Width set from script: each image at the slider's one height, landscape
	   ones 86% of the screen so the next peeks in */
	flex: 0 0 auto;
	height: var(--swipe-h, auto);
	aspect-ratio: auto;
	visibility: visible;
	opacity: 1;
	scroll-snap-align: start;
}
.slideshow.is-swipe .slide img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.slideshow.is-swipe .arrow,
.slideshow.is-swipe .cursor-arrow { display: none; }

/* Phones: X · IG · LI */
.socials .short { display: none; }
@media (max-width: 640px) {
	.socials .long { display: none; }
	.socials .short { display: inline; }
}

/* Links all hover with the yellow highlight, not a fade. In the rows that
   invert what's behind them (name, corners, footer) a background would be
   inverted too, so site.js slides this real yellow box in behind the link
   instead; the inverting text then reads dark on it. */
.site-nav a:hover,
.lab-crumb a:hover,
.footer-row a:hover,
.socials a:hover { opacity: 1; }
.hover-hl {
	position: fixed;
	z-index: 9; /* just under the inverting rows */
	background: var(--highlight);
	pointer-events: none;
	visibility: hidden;
}
.hover-hl.is-on { visibility: visible; }
.footer-row { position: relative; z-index: 10; }