/**
 * Epoch Projects - front end.
 *
 * Deliberately light. Structure, layout and interaction only, so the theme
 * or Elementor can own the typography and colour. Everything is driven by
 * custom properties you can override once in Elementor's global custom CSS.
 */

.epoch-module,
.epoch-projects {
	--epoch-gap: 24px;
	--epoch-rule: #d9d9d6;
	--epoch-muted: #6d6d6a;
	--epoch-fg: #1a1a1a;
	--epoch-accent: #0f7d72;
	--epoch-placeholder: #b4b4b1;
	--epoch-radius: 0px;
	--epoch-ratio: 4 / 3;

	color: var( --epoch-fg );
}

/* =========================================================================
 * Tracks (shared carousel scaffolding)
 * ====================================================================== */

.epoch-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc( ( 100% - ( var( --epoch-per-view, 3 ) - 1 ) * var( --epoch-gap ) ) / var( --epoch-per-view, 3 ) );
	gap: var( --epoch-gap );
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.epoch-track::-webkit-scrollbar {
	display: none;
}

.epoch-track__item {
	scroll-snap-align: start;
	min-width: 0;
}

/* Set on the element carrying the attribute, not the track, so the arrow
   overlay can size itself off the same number the columns use. */
[data-epoch-per-view="1"] { --epoch-per-view: 1; }
[data-epoch-per-view="2"] { --epoch-per-view: 2; }
[data-epoch-per-view="3"] { --epoch-per-view: 3; }
[data-epoch-per-view="4"] { --epoch-per-view: 4; }
[data-epoch-per-view="5"] { --epoch-per-view: 5; }

@media ( max-width: 1024px ) {
	[data-epoch-per-view="3"],
	[data-epoch-per-view="4"],
	[data-epoch-per-view="5"] { --epoch-per-view: 2; }
}

@media ( max-width: 767px ) {
	[data-epoch-per-view] { --epoch-per-view: 1; }
}

/* =========================================================================
 * Module header
 * ====================================================================== */

.epoch-module__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid var( --epoch-rule );
}

.epoch-module__title {
	margin: 0;
	font-size: clamp( 20px, 2.2vw, 28px );
	line-height: 1.2;
	font-weight: 600;
}

.epoch-module__title-prefix {
	font-weight: 400;
	color: var( --epoch-muted );
}

.epoch-module__count,
.epoch-index-group__count {
	font-size: 0.5em;
	vertical-align: super;
	font-weight: 400;
	color: var( --epoch-muted );
	margin-left: 4px;
}

.epoch-module__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
}

/* =========================================================================
 * Arrows and dots
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * Button hardening
 *
 * Elementor's global kit styles every <button> on the page (padding, border,
 * background, radius) at a specificity that beats a single class. Left alone
 * it squashes the arrow SVGs to zero width and turns the dots into boxes.
 * Everything below is deliberately two classes deep so it wins, and the arrow
 * SVG is sized in pixels rather than percentages so stray padding cannot
 * collapse it again.
 * ---------------------------------------------------------------------- */

.epoch-arrows .epoch-arrows__btn,
.epoch-dots .epoch-dots__dot,
.epoch-gallery__thumbs .epoch-gallery__thumb,
.epoch-projects__filters .epoch-projects__filter,
.epoch-projects__toggle .epoch-projects__view {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font: inherit;
	cursor: pointer;
}

.epoch-arrows {
	display: flex;
	gap: 12px;
	flex: 0 0 auto;
}

.epoch-arrows .epoch-arrows__btn {
	width: 32px;
	height: 32px;
	min-width: 0;
	padding: 4px;
	line-height: 0;
	color: var( --epoch-fg );
	transition: opacity 0.2s ease;
}

.epoch-arrows .epoch-arrows__btn svg {
	width: 24px;
	height: 24px;
	display: block;
}

.epoch-arrows__btn.is-disabled {
	opacity: 0.25;
	cursor: default;
}

.epoch-dots {
	display: none;
	gap: 8px;
	margin-top: 16px;
}

.epoch-dots .epoch-dots__dot {
	width: 8px;
	height: 8px;
	min-width: 0;
	padding: 0;
	background: var( --epoch-placeholder );
}

.epoch-dots .epoch-dots__dot.is-active {
	background: var( --epoch-fg );
}

@media ( max-width: 767px ) {
	.epoch-dots:not( [hidden] ) {
		display: flex;
	}
}

/* =========================================================================
 * Cards
 * ====================================================================== */

.epoch-card {
	position: relative;
}

.epoch-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.epoch-card__media {
	position: relative;
	aspect-ratio: var( --epoch-ratio );
	overflow: hidden;
	background: var( --epoch-placeholder );
	border-radius: var( --epoch-radius );
}

/* Card images are stacked slides, so a project's own photos can be stepped
   through in place without leaving the listing. */
.epoch-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 300ms ease, transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.epoch-card__media img.is-current {
	opacity: 1;
}

.epoch-card__link:hover .epoch-card__media img.is-current {
	transform: scale( 1.03 );
}

/* Sits outside the card link, so clicking an arrow steps the image rather
   than opening the project. Pinned to the bottom right of the image. */
.epoch-card__nav {
	position: absolute;
	box-sizing: border-box;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: var( --epoch-ratio );
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 6px;
	padding: var( --epoch-card-nav-inset, 12px );
	pointer-events: none;
}

.epoch-card__nav .epoch-card__nav-btn {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	pointer-events: auto;
	width: 26px;
	height: 26px;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	line-height: 0;
	cursor: pointer;
	color: var( --epoch-card-nav-colour, #fff );
	filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.55 ) );
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.epoch-card__nav .epoch-card__nav-btn:hover,
.epoch-card__nav .epoch-card__nav-btn:focus-visible {
	opacity: 1;
}

.epoch-card__nav .epoch-card__nav-btn svg {
	width: 100%;
	height: 100%;
	display: block;
}

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

.epoch-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var( --epoch-placeholder );
}

.epoch-card__title {
	margin: 12px 0 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.epoch-card__link:hover .epoch-card__title {
	color: var( --epoch-accent );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================================
 * Our Projects: bar, filters, toggle
 * ====================================================================== */

.epoch-projects__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var( --epoch-rule );
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.epoch-projects__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	flex: 1 1 auto;
}

.epoch-projects__filters .epoch-projects__filter,
.epoch-projects__toggle .epoch-projects__view {
	padding: 0;
	font-size: 13px;
	color: var( --epoch-muted );
	transition: color 0.2s ease;
}

.epoch-projects__filters .epoch-projects__filter:hover,
.epoch-projects__toggle .epoch-projects__view:hover {
	color: var( --epoch-fg );
}

.epoch-projects__filters .epoch-projects__filter.is-active,
.epoch-projects__toggle .epoch-projects__view.is-active {
	color: var( --epoch-accent );
	text-decoration: underline;
	text-underline-offset: 4px;
}

.epoch-projects__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var( --epoch-muted );
	flex: 0 0 auto;
}

.epoch-projects__select {
	display: none;
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	border: 1px solid var( --epoch-rule );
	background: transparent;
	border-radius: var( --epoch-radius );
}

@media ( max-width: 767px ) {
	.epoch-projects__filters {
		display: none;
	}

	.epoch-projects__select {
		display: block;
	}

	.epoch-projects__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.epoch-projects__toggle {
		justify-content: flex-end;
	}
}

/* =========================================================================
 * Index view: the project title rows
 * ====================================================================== */

/*
 * The index sits on the site's 12 column grid rather than on arbitrary fr
 * units, so the category heading, the project titles, the location, the year
 * and the View Project link all land on the same lines as the rest of the
 * page. The row is a nested grid using the same gutter, which keeps its
 * columns exactly on the outer ones.
 *
 * Column count, gutter and every span are variables, so a span can be moved
 * without touching anything else.
 */
.epoch-index-group {
	padding-top: 20px;
	border-top: 1px solid var( --epoch-rule );
	margin-bottom: 48px;
	display: grid;
	grid-template-columns: repeat( var( --epoch-columns, 12 ), minmax( 0, 1fr ) );
	gap: var( --epoch-gap );
	align-items: start;
}

.epoch-index-group__aside {
	position: relative;
	grid-column: var( --epoch-index-aside, 1 / 5 );
	display: grid;
	grid-template-columns: repeat( var( --epoch-index-aside-columns, 4 ), minmax( 0, 1fr ) );
	gap: var( --epoch-gap );
	align-content: start;
}

.epoch-index-group__title {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

/* Hover preview. Sits in the empty left column under the category heading and
   shows the featured image of whichever row the cursor is on. Nothing is
   loaded until the first hover, so a long index costs no extra requests. */
.epoch-index-group__preview {
	display: none;
	position: relative;
	/* Right hand columns of the aside, so its right edge lands on the same
	   line the project titles start from. */
	grid-column: var( --epoch-index-preview, 3 / -1 );
	width: 100%;
	aspect-ratio: var( --epoch-ratio );
	margin-top: 4px;
	overflow: hidden;
	border-radius: var( --epoch-radius );
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
}

.epoch-index-group__preview.is-visible {
	opacity: 1;
}

.epoch-index-group__preview img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
}

.epoch-index-group__preview img.is-current {
	opacity: 1;
}

/* Pointer only, and only while the group is actually two columns. */
@media ( hover: hover ) and ( min-width: 901px ) {
	.epoch-index-group__preview {
		display: block;
	}
}

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

.epoch-index-list {
	grid-column: var( --epoch-index-list, 5 / -1 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.epoch-index-row + .epoch-index-row {
	border-top: 1px solid var( --epoch-rule );
}

.epoch-index-row:last-child {
	border-bottom: 1px solid var( --epoch-rule );
}

/* Nested grid on the same gutter, so these columns sit exactly on the outer
   ones. Eight of them, because the list occupies columns 5 to 12. */
.epoch-index-row__link {
	display: grid;
	grid-template-columns: repeat( var( --epoch-index-row-columns, 8 ), minmax( 0, 1fr ) );
	gap: var( --epoch-gap );
	align-items: center;
	padding: 12px 0;
	text-decoration: none;
	color: var( --epoch-muted );
	font-size: 13px;
	transition: color 0.2s ease;
}

.epoch-index-row__link:hover {
	color: var( --epoch-fg );
}

.epoch-index-row__title {
	grid-column: var( --epoch-col-title, span 3 );
	font-weight: 500;
}

.epoch-index-row__location {
	grid-column: var( --epoch-col-location, span 2 );
}

.epoch-index-row__year {
	grid-column: var( --epoch-col-year, span 1 );
}

.epoch-index-row__cta {
	grid-column: var( --epoch-col-cta, span 2 );
	text-align: right;
	white-space: nowrap;
}

.epoch-index-row__link:hover .epoch-index-row__cta {
	color: var( --epoch-accent );
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media ( max-width: 900px ) {
	.epoch-index-group {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.epoch-index-group__aside,
	.epoch-index-list {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 600px ) {
	.epoch-index-row__link {
		grid-template-columns: 1fr auto;
		row-gap: 4px;
	}

	.epoch-index-row__title {
		grid-column: 1 / -1;
		color: var( --epoch-fg );
	}

	.epoch-index-row__location,
	.epoch-index-row__year {
		grid-column: auto;
	}

	.epoch-index-row__cta {
		grid-column: 2;
		grid-row: 2;
	}
}

/* =========================================================================
 * List view: the photo grid of cards
 * ====================================================================== */

.epoch-grid-group {
	margin-bottom: 56px;
}

/* =========================================================================
 * Project details block
 * ====================================================================== */

.epoch-project-meta {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px 24px;
	margin: 0;
}

.epoch-project-meta__label {
	font-size: 12px;
	color: var( --epoch-muted );
	margin: 0 0 4px;
	font-weight: 400;
}

.epoch-project-meta__value {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

/* =========================================================================
 * Gallery
 * ====================================================================== */

.epoch-gallery__slide {
	margin: 0;
}

.epoch-gallery__slide img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var( --epoch-radius );
}

.epoch-gallery__caption {
	margin-top: 8px;
	font-size: 12px;
	color: var( --epoch-muted );
}

/* Counter above the image, arrows below it, per the design. */
.epoch-gallery__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 16px;
}

.epoch-gallery__counter {
	margin: 0 0 16px;
	font-size: 13px;
	color: var( --epoch-muted );
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Thumbnail strip: one row under the image, scrolls sideways, tracks the
   slide you are on. Eight across on desktop, matching the design. */
.epoch-gallery__thumbs {
	display: flex;
	gap: var( --epoch-gap );
	margin-top: var( --epoch-gap );
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.epoch-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.epoch-gallery__thumbs .epoch-gallery__thumb {
	/* Eight columns and the seven gutters between them. */
	flex: 0 0 calc( ( 100% - 7 * var( --epoch-gap ) ) / 8 );
	padding: 0;
	overflow: hidden;
	border-radius: var( --epoch-radius );
	opacity: 0.4;
	transition: opacity 160ms ease;
}

.epoch-gallery__thumbs .epoch-gallery__thumb:hover {
	opacity: 0.75;
}

.epoch-gallery__thumbs .epoch-gallery__thumb.is-current {
	opacity: 1;
}

.epoch-gallery__thumbs .epoch-gallery__thumb:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	opacity: 1;
}

.epoch-gallery__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media ( max-width: 1024px ) {
	.epoch-gallery__thumbs .epoch-gallery__thumb {
		flex-basis: calc( ( 100% - 4 * var( --epoch-gap ) ) / 5 );
	}
}

@media ( max-width: 767px ) {
	.epoch-gallery__thumbs .epoch-gallery__thumb {
		/* A part-thumb at the edge shows there is more to scroll to. */
		flex-basis: calc( ( 100% - 3 * var( --epoch-gap ) ) / 3.5 );
	}
}

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

/* =========================================================================
 * Testimonials
 *
 * Two tracks locked to the same index. The media track shows one image at a
 * time, the quote track shows the current quote with the next one peeking in
 * and faded back, exactly as the Figma board does it.
 * ====================================================================== */

.epoch-testimonials {
	/* Column spans, straight off the design: image 1-6, quotes 8-12.
	   Both the arrows and the peek follow whatever these say. */
	--epoch-testimonial-media: 1 / 7;
	--epoch-testimonial-quotes: 8 / -1;
	/* Trailing room on the quote track. The next quote shows through by this
	   minus --epoch-gap, and it is what lets the last quote still scroll flush
	   to the left instead of being clamped short. Keep it a fixed length. */
	--epoch-testimonial-peek: 120px;
	/* How faded the quotes either side of the current one are. */
	--epoch-testimonial-dim: 0.3;
	/* Nudge the arrows below the bottom of the image if you want more air. */
	--epoch-testimonial-controls-offset: 0px;
	/* Fixed image height once the layout stacks. Straight off the design. */
	--epoch-testimonial-media-height: 238px;
}

/* On the same 12 column grid as everything else. Off the design: the image
   takes columns 1 to 6, column 7 is left empty, and the quotes run from
   column 8 to the right margin. */
.epoch-testimonials__layout {
	position: relative;
	display: grid;
	grid-template-columns: repeat( var( --epoch-columns, 12 ), minmax( 0, 1fr ) );
	gap: var( --epoch-gap );
	/* Stretch, not start. The image column takes its height from the quote
	   column so the two always finish level, however long the quote runs. */
	align-items: stretch;
}

/* All three share row 1. The controls are explicitly placed, so without an
   explicit row on the tracks the quotes get auto-placed into row 2 and end up
   underneath the image. */
.epoch-testimonials__media-track {
	grid-column: var( --epoch-testimonial-media, 1 / 7 );
	grid-row: 1;
}

.epoch-testimonials__quote-track {
	grid-column: var( --epoch-testimonial-quotes, 8 / -1 );
	grid-row: 1;
}

/* --- Media track --- */

.epoch-testimonials__media-track {
	grid-auto-columns: 100%;
	/* The single implicit row fills the track, so the image still stretches to
	   meet a quote taller than the ratio floor. */
	grid-auto-rows: 100%;
	min-width: 0;
}

/* The image behaves like a cover background on the column: it fills whatever
   height the row ends up at and crops from the centre, rather than sitting
   inside the column at a fixed ratio and leaving the two sides unbalanced.
   Done with object-fit rather than an actual background-image so the srcset,
   lazy loading and alt text all survive. */
.epoch-testimonial__media {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var( --epoch-radius );
}

/* Never shorter than the design's ratio, and it grows past it when a quote
   runs long, so the two columns always finish level. */
.epoch-testimonial__ratio {
	display: block;
	width: 100%;
	aspect-ratio: var( --epoch-ratio );
}

.epoch-testimonial__media img,
.epoch-testimonial__media .epoch-card__placeholder {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.epoch-testimonial__media .epoch-card__placeholder {
	background: var( --epoch-placeholder );
}

/* --- Quote track --- */

.epoch-testimonials__quote-track {
	/* One quote per view, with the trailing padding below doing the peeking.
	   Sizing the columns down instead would clamp the final slide short. */
	grid-auto-columns: 100%;
	min-width: 0;
	padding-right: var( --epoch-testimonial-peek );
	/* overflow-x: auto makes this a scroll container, and a scroll container's
	   automatic minimum size is zero, so without this a long quote would be
	   clipped and scroll internally instead of growing the row. */
	min-height: max-content;
	/* Room underneath so a long quote never runs into the arrows. */
	padding-bottom: 64px;
}

.epoch-testimonial__body {
	margin: 0;
	max-width: 46ch;
	opacity: var( --epoch-testimonial-dim );
	transition: opacity 300ms ease;
}

.epoch-testimonial__body.is-active {
	opacity: 1;
}

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

.epoch-testimonial__mark {
	display: block;
	font-size: 24px;
	line-height: 1;
	color: var( --epoch-muted );
	margin-bottom: 12px;
}

.epoch-testimonial__quote p {
	margin: 0 0 1em;
	font-size: 14px;
	line-height: 1.6;
}

.epoch-testimonial__cite {
	font-size: 13px;
	line-height: 1.5;
	font-style: normal;
}

.epoch-testimonial__author {
	display: block;
	font-weight: 600;
}

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

.epoch-testimonial__project {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.epoch-testimonial__project:hover {
	color: var( --epoch-accent );
}

/* --- Arrows: in the quote column, sitting on the bottom edge of the image.
   Absolute so the length of a quote cannot shove them around. --- */

.epoch-testimonials__controls {
	display: flex;
	justify-content: flex-start;
	margin: 0 0 calc( var( --epoch-testimonial-controls-offset ) * -1 );
	/* Same cell as the quotes, pinned to the bottom of it, so the arrows sit
	   on the quote column's left edge without any offset maths. */
	grid-column: var( --epoch-testimonial-quotes, 8 / -1 );
	grid-row: 1;
	align-self: end;
	justify-self: start;
}

@media ( max-width: 1024px ) {
	.epoch-testimonials {
		--epoch-testimonial-peek: 72px;
	}
}

@media ( max-width: 767px ) {
	.epoch-testimonials {
		--epoch-testimonial-peek: 0px;
		--epoch-testimonial-dim: 1;
	}

	.epoch-testimonials__layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.epoch-testimonials__media-track,
	.epoch-testimonials__quote-track {
		grid-column: 1 / -1;
		/* Stacked, so they need their own rows again rather than sharing
		   row 1 and sitting on top of each other. */
		grid-row: auto;
	}

	.epoch-testimonials__media-track {
		/* Fixed height once stacked, per the design. */
		height: var( --epoch-testimonial-media-height );
	}

	.epoch-testimonial__ratio {
		display: none;
	}

	.epoch-testimonials__quote-track {
		padding-bottom: 0;
		/* Stacked, there is no image to stay level with, so equalising every
		   slide to the tallest quote just parks the dots miles below a short
		   one. Follow the active quote instead. The JS sets the property; the
		   auto fallback keeps it usable if the script never runs. */
		align-items: start;
		min-height: 0;
		height: var( --epoch-quote-height, auto );
		transition: height 280ms ease;
	}

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

	/* Stacked, so swipe and the dots do the work instead. */
	.epoch-testimonials__controls {
		display: none;
	}
}

/* =========================================================================
 * Utility
 * ====================================================================== */

.epoch-projects [hidden],
.epoch-module [hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* =========================================================================
 * Empty state
 * ====================================================================== */

.epoch-projects--empty {
	padding: 32px 0;
	border-top: 1px solid var( --epoch-rule );
	border-bottom: 1px solid var( --epoch-rule );
}

.epoch-projects__empty {
	margin: 0;
	color: var( --epoch-muted );
	text-align: center;
}