/* @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600"); */
@import url("fontawesome-all.min.css");

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input,
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

html {
	box-sizing: border-box;
}

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

/* body {
  background-image:
    url("images/overlay.png"),
    linear-gradient(to bottom, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)),
    url("../../images/fulls/25.png");
  background-repeat: repeat, no-repeat, repeat-x;
  background-position: top left, bottom left, left center;
  background-size: auto, 100% 100%, contain;
  background-attachment: fixed, fixed, fixed;
  background-color: #150C07;
} */

/* :root {
  --bw-opacity: 0;
}

body {
  background-image:
    url("images/overlay.png"),
    linear-gradient(to bottom, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)),
    url("../../images/fulls/25.png");
  background-repeat: repeat, no-repeat, repeat-x;
  background-position: top left, bottom left, right bottom;
  background-size: auto, 100% 100%, contain;
  background-attachment: fixed, fixed, fixed;
  background-color: #150C07;
  position: relative;
  overflow-x: hidden;
} */
/* ==============================================
   COLOR + GRAYSCALE BACKGROUND LAYERS
   ============================================== */

:root {
	--bg-desktop: url("../../images/fulls/25.png");
	--bg-mobile: url("../../images/fulls/13.jpg");
	--bw-opacity: 0;
	/* 0 = color only, 1 = full grayscale */
}

/* COLOR LAYER */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background-image:
		url("images/overlay.png"),
		linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65)),
		var(--bg-desktop);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center center;
	background-size: auto, 100% 100%, cover;
	background-attachment: fixed, fixed, fixed;
}

/* GRAYSCALE LAYER */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		url("images/overlay.png"),
		linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65)),
		var(--bg-desktop);
	background-repeat: repeat, no-repeat, no-repeat;
	background-position: center center;
	background-size: auto, 100% 100%, cover;
	background-attachment: fixed, fixed, fixed;

	filter: grayscale(1) contrast(2.2) brightness(1.15);
	opacity: var(--bw-opacity);
	transition: opacity 1.5s ease-in-out;
}

/* 📱 MOBILE BACKGROUND OVERRIDE */
@media (max-width: 768px) {

	body::before,
	body::after {
		background-image:
			url("images/overlay.png"),
			linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65)),
			var(--bg-mobile);
		background-position: center top;
		background-size: cover;
		background-attachment: scroll, scroll, scroll;
	}
}


body.is-preload *,
body.is-preload *:before,
body.is-preload *:after {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

/* @media screen and (max-width: 1280px) {

	body {
		background-attachment: scroll;
	}

}

@media screen and (max-width: 736px) {

	body {
		background-attachment: scroll;
		background-size: auto, 100% 100%, 250% auto;
		background-repeat: repeat, no-repeat, no-repeat;
		background-position: top left, bottom left, 50% 0%;
	}

} */

body,
input,
select,
textarea {
	font-family: "Nosifer", serif;
	font-weight: 400;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	font-size: 13pt;
	color: rgba(255, 255, 255, 0.6);
}

@media screen and (max-width: 1680px) {

	body,
	input,
	select,
	textarea {
		font-size: 11pt;
	}

}

@media screen and (max-width: 1280px) {

	body,
	input,
	select,
	textarea {
		font-size: 10pt;
	}

}

@media screen and (max-width: 980px) {

	body,
	input,
	select,
	textarea {
		font-size: 11pt;
	}

}

a {
	color: #fff;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	-moz-transition: color 0.25s ease-in-out;
	-webkit-transition: color 0.25s ease-in-out;
	-ms-transition: color 0.25s ease-in-out;
	transition: color 0.25s ease-in-out;
}

a:hover {
	color: #d64760;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
	color: #fff;
	letter-spacing: -0.05em;
}

strong,
b {
	color: #fff;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
}

/* List */

ul.icons {
	cursor: default;
	margin: 0 0 0.5em 0;
}

ul.icons li {
	display: inline-block;
	font-size: 1.5em;
	margin-left: 1em;
}

ul.icons li span {
	display: none;
}

ul.icons li a {
	opacity: 0.35;
	color: #fff;
	-moz-transition: opacity 0.25s ease-in-out;
	-webkit-transition: opacity 0.25s ease-in-out;
	-ms-transition: opacity 0.25s ease-in-out;
	transition: opacity 0.25s ease-in-out;
}

ul.icons li a:hover {
	opacity: 1.0;
}

ul.icons li:first-child {
	margin-left: 0;
}

@media screen and (max-width: 736px) {

	ul.icons {
		margin: 0 0 2em 0;
	}

}

/* Icons */

.icon {
	text-decoration: none;
	position: relative;
	text-decoration: none;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Poppins';
	font-weight: 400;
}

.icon:before {
	line-height: inherit;
}

.icon>.label {
	display: none;
}

.icon.solid:before {
	font-weight: 900;
}

.icon.brands:before {
	font-family: 'Font Awesome 5 Brands';
}

/* Wrapper */

#wrapper {
	min-height: 100vh;
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-moz-transition: -moz-filter 0.5s ease-in-out;
	-webkit-transition: -webkit-filter 0.5s ease-in-out;
	-ms-transition: -ms-filter 0.5s ease-in-out;
	transition: filter 0.5s ease-in-out;
}

#wrapper:before {
	content: '';
	display: block;
}

body.is-poptrox-visible #wrapper {
	-moz-filter: blur(0.25em);
	-webkit-filter: blur(0.25em);
	-ms-filter: blur(0.25em);
	filter: blur(0.25em);
}

@media screen and (max-width: 736px) {

	#wrapper {
		min-height: 0;
	}

}

/* Scroll Zone */

.scrollZone {
	position: fixed;
	width: 6rem;
	height: 100vh;
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: -ms-grab;
	cursor: grab;
	z-index: 10001;
}

.scrollZone.left {
	left: 0;
}

.scrollZone.right {
	right: 0;
}

@media screen and (max-width: 736px) {

	.scrollZone {
		display: none;
	}

}

/* Main */

#main {
	-moz-transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	-moz-transition-delay: 0.5s;
	-webkit-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
	position: relative;
	z-index: 1;
	width: -moz-min-content;
	width: -webkit-min-content;
	width: -ms-min-content;
	width: min-content;
	max-width: 100vw;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: 5px;
}

#main .items {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
}

#main .items> :last-child {
	border-right: solid 10px #ffffff;
}

#main .item {
	-moz-flex-grow: 0;
	-webkit-flex-grow: 0;
	-ms-flex-grow: 0;
	flex-grow: 0;
	-moz-flex-shrink: 0;
	-webkit-flex-shrink: 0;
	-ms-flex-shrink: 0;
	flex-shrink: 0;
	margin: 5px;
	height: 16em;
	box-shadow: 0 0 0 10px #ffffff;
	border-radius: 12px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

#main .item.span-1 {
	width: 20em;
}

#main .item.span-2 {
	width: 30em;
}

#main .item.span-3 {
	width: 40em;
}

#main .item.intro {
	background-color: #d6ba8c;
	background-image: url("images/overlay.png");
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	padding: 1em 3em;
	border-radius: 12px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

#main .item.intro h1 {
	font-size: 3em;
	line-height: 1em;
}

#main .item.intro p {
	font-size: 1.25em;
	line-height: 1.5em;
	margin: 0.5em 0 0 0;
	opacity: 0.65;
}

#main .item.thumb {
	display: block;
	position: relative;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	cursor: default;
}

#main .item.thumb h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	width: 100%;
	padding: 1em;
	font-weight: 400;
	line-height: 1em;
	z-index: 2;
	border-radius: 0 0 12px 12px;
}

#main .item.thumb img {
	display: block;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-moz-object-fit: cover;
	-webkit-object-fit: cover;
	-ms-object-fit: cover;
	object-fit: cover;
	-moz-object-position: center;
	-webkit-object-position: center;
	-ms-object-position: center;
	object-position: center;
	-moz-transition: opacity 0.75s ease-in-out;
	-webkit-transition: opacity 0.75s ease-in-out;
	-ms-transition: opacity 0.75s ease-in-out;
	transition: opacity 0.75s ease-in-out;
	-moz-transition-delay: 1.25s;
	-webkit-transition-delay: 1.25s;
	-ms-transition-delay: 1.25s;
	transition-delay: 1.25s;
	border-radius: 12px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);

}

#main .item.thumb.delay-1 img {
	-moz-transition-delay: 1.375s;
	-webkit-transition-delay: 1.375s;
	-ms-transition-delay: 1.375s;
	transition-delay: 1.375s;
}

#main .item.thumb.delay-2 img {
	-moz-transition-delay: 1.5s;
	-webkit-transition-delay: 1.5s;
	-ms-transition-delay: 1.5s;
	transition-delay: 1.5s;
}

#main .item.thumb.delay-3 img {
	-moz-transition-delay: 1.625s;
	-webkit-transition-delay: 1.625s;
	-ms-transition-delay: 1.625s;
	transition-delay: 1.625s;
}

#main .item.thumb.delay-4 img {
	-moz-transition-delay: 1.75s;
	-webkit-transition-delay: 1.75s;
	-ms-transition-delay: 1.75s;
	transition-delay: 1.75s;
}

#main .item.thumb.delay-5 img {
	-moz-transition-delay: 1.875s;
	-webkit-transition-delay: 1.875s;
	-ms-transition-delay: 1.875s;
	transition-delay: 1.875s;
}

#main .item.thumb.delay-6 img {
	-moz-transition-delay: 2s;
	-webkit-transition-delay: 2s;
	-ms-transition-delay: 2s;
	transition-delay: 2s;
}

body.is-preload #main {
	opacity: 0;
}

body.is-preload #main .item.thumb img {
	opacity: 0;
}

@media screen and (max-width: 1680px) {

	#main .item {
		height: 14em;
	}

	#main .item.span-1 {
		width: 17em;
	}

	#main .item.span-2 {
		width: 25.5em;
	}

	#main .item.span-3 {
		width: 34em;
	}

}

@media screen and (max-width: 736px) {

	#main {
		width: 100%;
		overflow-x: auto;
		overflow-y: auto;
		padding: 2.5px;
		-webkit-overflow-scrolling: touch;
	}

	#main .items {
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
	}

	#main .items> :last-child {
		border-right: 0;
	}

	#main .item {
		-moz-flex-grow: 1;
		-webkit-flex-grow: 1;
		-ms-flex-grow: 1;
		flex-grow: 1;
		-moz-flex-shrink: 1;
		-webkit-flex-shrink: 1;
		-ms-flex-shrink: 1;
		flex-shrink: 1;
		width: calc(50vw - 15px) !important;
		margin: 2.5px;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
	}

	#main .item.intro {
		width: calc(100vw - 20px) !important;
		text-align: center;
		height: auto;
		padding: 3em;
	}

	#main .item.intro h1 {
		font-size: 2em;
	}

	#main .item.intro p {
		font-size: 1em;
	}

	#main .item.thumb h2 {
		display: none;
	}

}

@media screen and (max-width: 480px) {

	#main .item {
		height: 10em;
	}

}

/* Header */

#footer {
	width: 100%;
	padding: 1.5em;
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	position: relative;
	z-index: 10002;
}

#footer .icons a.fa-instagram {
	color: #694d5a !important;
	opacity: 1 !important;
}

#footer .icons a.fa-instagram:hover,
#footer .icons a.fa-instagram:focus {
	color: #694d5a !important;
}

#footer>section:first-child {
	text-align: left;
	max-width: 36em;
	padding-right: 2em;
}

#footer>section:last-child {
	text-align: right;
	max-width: 36em;
}

#footer h2 {
	font-size: 2.25em;
	margin: 0 0 1em 0;
}

#footer .copyright li {
	display: inline-block;
	margin-left: 1em;
	padding-left: 1em;
	border-left: solid 1px rgba(11, 11, 11, 0.25);
	line-height: 1em;
	color: #694d5a;
	font-weight: bolder;
}

#footer .copyright li:first-child {
	border-left: 0;
	margin-left: 0;
	padding-left: 0;
}

@media screen and (max-width: 980px) {

	#footer {
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	#footer>section:first-child {
		width: 100%;
		padding-right: 0;
	}

	#footer>section:last-child {
		text-align: left;
		margin: 1.5em 0 0 0;
		width: 100%;
	}

}

@media screen and (max-width: 736px) {

	#footer {
		text-align: center;
		padding: 3em;
	}

	#footer>section:first-child {
		text-align: center;
		max-width: 100%;
	}

	#footer>section:last-child {
		text-align: center;
		max-width: 100%;
	}

	#footer .copyright li {
		display: block;
		margin: 0.75em 0 0 0;
		padding-left: 0;
		border-left: 0;
	}

	#footer .copyright li:first-child {
		margin-top: 0;
	}

}

/* Popup */

.poptrox-popup {
	background: #1a1f2c;
	background: rgba(18, 21, 29, 0.9);
	box-shadow: 0px 0px 0px 10px #fff, 0px 10px 60px 10px rgba(8, 11, 19, 0.55);
	cursor: default;
}

.poptrox-popup .loader {
	display: block;
	width: 48px;
	height: 48px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -24px 0 0 -24px;
	background: url("images/loader.gif");
	opacity: 0.25;
}

.poptrox-popup .caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #1a1f2c;
	background: rgba(18, 21, 29, 0.85);
	display: block;
	width: 100%;
	line-height: 75px;
	text-align: center;
	font-size: 1.25em;
	color: #fff;
}

.poptrox-popup .nav-next,
.poptrox-popup .nav-previous {
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
	-moz-transition: opacity 0.25s ease-in-out;
	-webkit-transition: opacity 0.25s ease-in-out;
	-ms-transition: opacity 0.25s ease-in-out;
	transition: opacity 0.25s ease-in-out;
	opacity: 0.35;
}

.poptrox-popup .nav-next:hover,
.poptrox-popup .nav-previous:hover {
	opacity: 1.0;
}

.poptrox-popup .nav-next,
.poptrox-popup .nav-previous {
	text-decoration: none;
	text-transform: none !important;
	width: 150px;
	height: 75px;
	position: absolute;
	bottom: 0;
	cursor: pointer;
	font-size: 3em;
	line-height: 75px;
}

.poptrox-popup .nav-next:before,
.poptrox-popup .nav-previous:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

.poptrox-popup .nav-next {
	right: 0;
	text-align: right;
	padding-right: 30px;
}

.poptrox-popup .nav-next:before {
	content: '\f105';
}

.poptrox-popup .nav-previous {
	left: 0;
	text-align: left;
	padding-left: 30px;
}

.poptrox-popup .nav-previous:before {
	content: '\f104';
}

@media screen and (max-width: 736px) {

	.poptrox-popup {
		background: #0a0f1c;
		box-shadow: 0px 0px 30px 10px rgba(8, 11, 19, 0.85);
		border: solid 2.5px #fff;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
		-ms-box-sizing: content-box;
		box-sizing: content-box;
	}

	.poptrox-popup .caption {
		display: none !important;
	}

	.poptrox-popup .nav-next {
		display: none !important;
	}

	.poptrox-popup .nav-previous {
		display: none !important;
	}

}

/* ===== FINAL BACKGROUND OVERRIDE (put at the end) ===== */

/* neutralize any earlier body background */
body {
	background: #150C07 none !important;
}

/* desktop defaults */
body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -2;
	/* ::after will be -1 below */
	background-repeat: repeat, no-repeat, no-repeat !important;
	background-position: top left, bottom left, right bottom !important;
	background-size: auto, 100% 100%, contain !important;
	transform: translateZ(0);
}

/* COLOR (desktop 31.jpg) */
body::before {
	z-index: -2;
	background-image:
		url("images/overlay.png"),
		linear-gradient(to bottom, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.35)),
		url("../../images/fulls/31.jpg") !important;
}

/* B&W (desktop 31.jpg) */
body::after {
	z-index: -1;
	background-image:
		url("images/overlay.png"),
		linear-gradient(to bottom, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.35)),
		url("../../images/fulls/31.jpg") !important;

	/* true B&W + smooth fade */
	filter: grayscale(1) contrast(5) brightness(1.01);
	opacity: var(--bw-opacity, 0);
	transition: opacity 0.7s ease-in-out;
}

/* ---------- MOBILE OVERRIDE: force 13.jpg ---------- */
@media (max-width: 768px) {
	html body::before {
		background-image:
			url("images/overlay.png"),
			/* fade direction more natural on tall screens */
			linear-gradient(to top, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.35)),
			url("../../images/fulls/14.jpg") !important;
		background-position: top left, bottom left, center top !important;
		background-size: auto, 100% 100%, cover !important;
	}

	html body::after {
		background-image:
			url("images/overlay.png"),
			linear-gradient(to top, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.35)),
			url("../../images/fulls/14.jpg") !important;
		background-position: top left, bottom left, center top !important;
		background-size: auto, 100% 100%, cover !important;
	}

	#main .item.intro.is-transparent {
		background: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
		border: 0 !important;
	}
}

/* =========================
   Glass effect (mobile only)
   ========================= */
@media (max-width: 768px) {
	:root {
		--glass-bg: rgba(134, 127, 123, 0.24);
		/* transparency */
		--glass-border: rgba(255, 255, 255, 0.12);
		--glass-blur: 1px;
		/* 6–12px looks good */
		--glass-radius: 16px;
	}

	/* turn the intro card into frosted glass */
	#main .item.intro.is-transparent {
		position: relative;
		background: var(--glass-bg) !important;
		/* translucent film */
		background-image: none !important;
		/* kill any gradients */
		border: 1px solid var(--glass-border);
		border-radius: var(--glass-radius);
		box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
		-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
		backdrop-filter: blur(var(--glass-blur)) saturate(120%);
		/* glass/frosted */
		padding: 1.25rem 1.5rem;
		/* comfy spacing */
	}

	/* keep text readable over busy backgrounds */
	#main .item.intro.is-transparent h1,
	#main .item.intro.is-transparent p {
		color: rgba(255, 255, 255, .95);
		text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
	}
}


/* reduced motion */
@media (prefers-reduced-motion: reduce) {
	body::after {
		transition: none;
	}
}

/* ===============================
   SAFARI / iOS COMPATIBILITY FIXES
   Paste at the very end of main.css
   =============================== */

/* 1) iOS: avoid white gaps/flicker with fixed+filters
      → use scroll attachment on iOS, keep composited layers */
@supports (-webkit-touch-callout: none) {
  body::before,
  body::after {
    background-attachment: scroll, scroll, scroll !important;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    will-change: transform;
  }

  /* 2) WebKit needs the prefixed filter for reliable B&W */
  body::after {
    -webkit-filter: grayscale(1) contrast(2.2) brightness(1.15);
            filter: grayscale(1) contrast(2.2) brightness(1.15);
  }

  /* 3) Glass card on mobile: ensure a non-transparent bg + prefixed blur */
  @media (max-width: 768px) {
    #main .item.intro.is-transparent {
      background: rgba(20,12,7,0.24) !important;            /* must not be fully transparent for blur to show */
      -webkit-backdrop-filter: blur(10px) saturate(120%);   /* Safari prefix */
              backdrop-filter: blur(10px) saturate(120%);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 16px;
    }
  }

  /* 4) iOS viewport height quirk: prevent short pages / jumpy 100vh */
  html, body { height: -webkit-fill-available; }
  #wrapper   { min-height: -webkit-fill-available; }
}

/* 5) Make sure mobile actually swaps to the mobile asset on Safari too */
@media (max-width: 768px) {
  /* higher specificity + !important wins over any earlier rules */
  html body::before {
    background-image:
      url("images/overlay.png"),
      linear-gradient(to top, rgba(0,0,0,0) 82%, rgba(0,0,0,0.35)),
      url("../../images/fulls/13.jpg") !important;
    background-position: top left, bottom left, center top !important;
    background-size: auto, 100% 100%, cover !important;
  }
  html body::after {
    background-image:
      url("images/overlay.png"),
      linear-gradient(to top, rgba(0,0,0,0) 82%, rgba(0,0,0,0.35)),
      url("../../images/fulls/13.jpg") !important;
    background-position: top left, bottom left, center top !important;
    background-size: auto, 100% 100%, cover !important;
  }
}

/* =========================
   MOBILE TOUCH SCROLL FIX
   (paste at end of main.css)
   ========================= */

@media (max-width: 900px), (pointer: coarse) {
  /* Use the real mobile viewport height and allow vertical scroll */
  html, body { height: auto; }

  #main {
    width: 100% !important;
    max-width: 100% !important;

    /* Make #main the scroll container on mobile */
    min-height: 100dvh;                 /* dynamic viewport height (Android/iOS) */
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* Make touch scrolling smooth + let browser handle the gesture */
    -webkit-overflow-scrolling: touch;  /* momentum scrolling on iOS */
    touch-action: pan-y;                /* Chrome/Android: vertical pan */
    overscroll-behavior-y: contain;     /* optional: avoid bounce chaining */
  }

  /* If you added a glass film on #main::before, don't let it be fixed.
     Fixed, full-screen overlays can trap touch on Android. */
  #main::before {
    position: absolute !important;  /* was fixed; now scrolls with content */
    inset: 0;
    pointer-events: none;
  }

  /* Your big background layers should NEVER catch taps/swipes */
  body::before,
  body::after {
    pointer-events: none !important;
    /* iOS also prefers scroll attachment for fixed BGs */
    background-attachment: scroll, scroll, scroll !important;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }

  /* If you used scroll-snap for a “paging” feel, loosen it for touch */
  #main { scroll-snap-type: y proximity; }  /* or comment out to test: none */
}

/* Mobile: let the container handle vertical panning smoothly */
@media (max-width: 900px), (pointer: coarse) {
  #main {
    overflow-y: auto !important;
    overflow-x: hidden !important;      /* vertical layout on mobile */
    -webkit-overflow-scrolling: touch;  /* iOS momentum scrolling */
    touch-action: pan-y;                /* tell Chrome/Android it's vertical */
  }
  /* if you have a glass overlay on #main::before, ensure it doesn't trap touch */
  #main::before { pointer-events: none; }
}