@charset "UTF-8";

/**
 * styles.css 1.0.0
 *
 * Reset, typography, utilities and WP front-end overrides.
 * Loaded after reset — overrides browser defaults with project tokens.
 *
 * SECTIONS
 * VARS        — project tokens (ellipsis, lists, bullets)
 * RESET       — box-sizing, font smoothing, base element reset
 * TYPOGRAPHY  — highlighted text, figcaption, formats, blockquote, anchors
 * HR          — separator
 * LISTS       — ul, ol, bullet
 * ANCHORS     — inline links, a span, labels, focus
 * IFRAME      — iframe container
 * ELLIPSIS    — line-clamp utility
 * RESPONSIVE  — visibility utilities (only-mobile, only-desktop, for-mobile)
 * WP FRONT    — WP front-end class overrides
 * CUSTOM      — project-specific styles
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */


/* ========== DEFAULT ========== */

:root {
	--ellipsis-lines: 3;

	--bullet-color: currentColor;
	--bullet-size: .5rem;
	--bullet-font-size: .75rem;
}


/* ========== CUSTOM ========== */

/* here for project style variable overrides */


/* =============================================== */
/* ==================== RESET ==================== */
/* =============================================== */


/* ========== DEFAULT ========== */

*,
*:before,
*:after {
	box-sizing: border-box;
}
html {
	font-size: 100%;
}
html,
input,
textarea,
select,
button {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6,
ul, ol,
p, a, span,
blockquote, label, div, table,
input, textarea, button, select {
	margin: 0;
	padding: 0;
	font-weight: inherit;
}
button,
input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}
a {
	position: relative;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	outline: 0;
	text-decoration: none;
}
p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-shadow: inherit;
}
b, strong, del,
i, em {
	line-height: inherit;
}
sup {
	line-height: 0;
}


/* ========== @MEDIA ========== */

@media screen and (max-device-width: 320px) {
	body {
		-webkit-text-size-adjust: none;
	}
}


/* ==================================================== */
/* ==================== TYPOGRAPHY ==================== */
/* ==================================================== */


/* ========== HIGHLIGHTED ========== */

/**
 * Inline — must be encapsulated
 */

mark,
.highlighted {
	display: inline;
	color: var(--bright-color);
	background-color: var(--dark-color);
	line-height: 1.5;
	padding: 0.125em 0;
	box-shadow: .25em 0 0 var(--dark-color), -.25em 0 0 var(--dark-color);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}


/* ========== FIGCAPTION ========== */

figure figcaption {
	font-size: .75em;
}
figure img + figcaption {
	margin-top: .5em;
}


/* ========== FORMATS ========== */

.distribution {
	font-size: .75em;
	font-weight: var(--font-weight-bold);
}
.credits {
	font-size: .625em;
	opacity: .66;
}


/* ========== DEBUG ========== */

pre {
	display: inline-block;
	font-size: .75em;
	white-space: unset;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.small pre {
	font-size: inherit;
}
.debug-panel {
	position: fixed;
	z-index: 999999;
	bottom: 0;
	right: 0;
	padding: 1em;
}


/* ============================================ */
/* ==================== HR ==================== */
/* ============================================ */

hr {
	width: 100%;
	border: 0;
	color: inherit;
	border-bottom: solid var(--stroke-width);
}
hr.blank {
	border: 0 !important;
}


/* =============================================== */
/* ==================== LISTS ==================== */
/* =============================================== */


/* ========== DEFAULT ========== */

ul,
ol {
	list-style-position: inside;
}
li {
	list-style-type: disc;
}


/* ========== INLINE ========== */

.list > * {
	display: block;
}
.inline {
	display: flex;
}


/* ========== OL ========== */

ol {
	margin: 0;
	list-style-type: none;
}
ol li {
	position: relative;
	display: block;
	counter-increment: step-counter;
	padding: .5rem 0 .5rem 2.5rem !important;
}
ol li:before {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 0;
	content: counter(step-counter);
	display: inline-block;
	text-align: center;
	color: var(--bright-color);
	background: var(--bullet-color);
	font-size: var(--bullet-font-size);
	line-height: 1;
	width: 1em;
	aspect-ratio: 1/1;
	padding: .5rem;
	transform: translateY(-50%);
	border-radius: 100%;
}


/* ========== BULLET LIST ========== */

.bullet li,
.columns .bullet li {
	position: relative;
	display: block;
	width: auto !important;
	padding: .25rem 0 .25rem calc(var(--bullet-size) * 2.5);
}
.bullet li:before,
.columns .bullet li:before {
	position: absolute;
	top: 50%;
	color: var(--bullet-color);
	margin: calc(var(--bullet-size) / 2 * -1) 0 0 calc(var(--bullet-size) * 2.5 * -1);
	content: "";
	display: block;
	height: var(--bullet-size);
	width: var(--bullet-size);
	border-radius: 50%;
	box-shadow: inset 0 0 0 var(--bullet-size);
}


/* ==================================================== */
/* ==================== BLOCKQUOTE ==================== */
/* ==================================================== */

/**
 * WIP
 */

/*
blockquote.important {
	font-size: 2em;
}
section.focus blockquote.important {
	margin-left: auto;
	margin-right: auto;
}
*/
/*
blockquote > * {
	display: inline;
}
*/

blockquote cite {
	display: block;
	font-size: .75em;
	font-style: normal;
	text-align: right;
	font-weight: var(--font-weight-bold);
}
/*
blockquote cite:before {
	content: "— ";
}
*/


/* ================================================= */
/* ==================== ANCHORS ==================== */
/* ================================================= */


/* ========== DEFAULT ========== */

a {
	position: relative;
	display: inline;
	text-decoration: none;
	text-shadow: none;
}
a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(var(--stroke-width) / 2);
	background: currentColor;
	transform: scaleX(1);
	transform-origin: left;
	transition: transform .3s ease;
}


/* ========== HOVER ========== */

@media (hover: hover) {
	a:hover {
		color: var(--accent-color);
	}
	a:hover::after {
		transform: scaleX(0);
		transform-origin: right;
	}
}
@media (hover: none) {
	a:active,
	a.hover {
		color: var(--accent-color);
	}
	a:active::after,
	a.hover::after {
		transform: scaleX(0);
		transform-origin: right;
	}
}


/* ========== INLINE ========== */

a span {
	display: inline-block;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}


/* ========== LINKS ========== */

/** Hidden label — like .hidden **/

a .label,
button .label {
	position: absolute !important;
	font-size: 0 !important;
	width: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	white-space: nowrap;
}

.buttons.min a {
	margin: 0;
}

/* ========== BROWSER ========== */

:focus {
	outline-color: transparent;
	outline-style: none;
}
::-moz-selection {
	background: var(--selection-color);
}
::selection {
	background: var(--selection-color);
}


/* ================================================ */
/* ==================== IFRAME ==================== */
/* ================================================ */

/* OUT? */

.iframe-container {
	display: block;
	width: 100%;
}
iframe {
	max-width: 100%;
	border: none;
}


/* ================================================== */
/* ==================== ELLIPSIS ==================== */
/* ================================================== */

.ellipsis {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ellipsis-lines);
	text-overflow: ellipsis;
	overflow: hidden;
}


/* ==================================================== */
/* ==================== RESPONSIVE ==================== */
/* ==================================================== */

@media (min-width: 1000px) {
	.only-mobile {
		visibility: hidden;
		display: none !important;
	}
}
@media (max-width: 1000px) {
	.only-desktop {
		visibility: hidden;
		display: none !important;
	}
}

/* JS device detection */

body:not(.mobile) .for-mobile,
body.mobile .for-desktop {
	visibility: hidden;
	display: none !important;
}


/* ================================================== */
/* ==================== WP FRONT ==================== */
/* ================================================== */

mark.has-inline-color {
	background: none !important;
}
.has-text-align-center {
	text-align: center;
	align-items: center !important;
	justify-content: center;
}


/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */


/* ========== UTILITIES ========== */

.hidden {
	position: absolute;
	width: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	white-space: nowrap;
}
.disabled {
	opacity: .33;
	pointer-events: none;
}
.centered {
	text-align: center;
}
.copyright {
	font-size: .625rem;
	text-transform: none;
}
.logo {
	max-width: 10rem;
}


/* ========== POST ========== */

.page-title + .post-range {
	margin-top: calc(var(--content-spacing) / 2);
}
.post-metas {
	display: inline-flex;
	gap: .5em;
}
.post-meta {
	display: inline-flex;
	gap: .5em;
}
.post-meta > * {
	margin: 0 !important;
}





/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */


/* ========== UTILITIES ========== */

.hidden {
	position: absolute;
	width: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	white-space: nowrap;
}
.disabled {
	opacity: .33;
	pointer-events: none;
}
.centered {
	text-align: center;
}
.copyright {
	font-size: .625rem;
	text-transform: none;
}
.logo {
	max-width: 10rem;
}


/* ========== POST ========== */

.page-title + .post-range {
	margin-top: calc(var(--content-spacing) / 2);
}
.post-metas {
	display: inline-flex;
	gap: .5em;
}
.post-meta {
	display: inline-flex;
	gap: .5em;
}
.post-meta > * {
	margin: 0 !important;
}
.post-production {
	font-size: .75em;
	font-weight: var(--font-weight-bold);
}
.grid:not(.search) .post-title,
.grid:not(.search) .post-location {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ========== POST TAGS ========== */

.post-tags {
	display: inline-flex;
	gap: .5em;
}
.post-tags > *,
.post-tag {
	display: inline-block;
	font-size: calc(var(--font-size) * .625);
	line-height: 1;
	padding: .5em 1em;
	width: auto;
	max-width: 100%;
	white-space: nowrap;
	text-transform: uppercase;
	border: solid var(--stroke-width);
	border-radius: 3em;
}
.post-tags.alt > *,
.post-tag.alt {
	color: var(--dark-color);
	border-color: var(--bright-color);
	background: var(--bright-color);
}


/* ========== ARTIST ========== */

.artist-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .25em;
}
.artist-title + .artist-infos {
	margin-top: 0;
}