:root {
	--bg:          #1b1f22;
	--bg-card:     rgba(20, 24, 28, 0.96);
	--white:       #ffffff;
	--white-dim:   rgba(255, 255, 255, 0.70);
	--white-faint: rgba(255, 255, 255, 0.07);
	--border:      rgba(255, 255, 255, 0.10);
	--gold:        #c9a844;
	--gold-light:  #e0c878;
	--gold-bg:     rgba(201, 168, 68, 0.08);
	--gold-border: rgba(201, 168, 68, 0.28);
	--red-pdf:     #e53935;
	--radius:      6px;
	--dur:         0.3s;
	--ease:        ease;
	--shadow:      0 20px 60px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.4);
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
a { color: inherit; text-decoration: none; }


body {
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--white);
	background-color: var(--bg);
	background-image: url('../images/30461.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	min-height: 100vh;
	overflow-x: hidden;
}


body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
	background-size: 30px 30px;
	pointer-events: none;
	z-index: 0;
}


body::after {
	content: '';
	position: fixed;
	inset: 0;
	background:
		rgba(6, 8, 12, 0.74),
		radial-gradient(ellipse 55% 55% at 22% 50%, rgba(201,168,68,0.06) 0%, transparent 65%),
		radial-gradient(ellipse 60% 60% at 78% 60%, rgba(20,40,80,0.12) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}

strong, b { font-weight: 600; color: var(--white); }
p { margin-bottom: 1.5rem; }
p:last-child { margin-bottom: 0; }


body.is-preload * {
	transition: none !important;
	animation: none !important;
}

#wrapper {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: 100vh;
	padding: 8rem 2rem 3.5rem;
	transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}

body.article-open #wrapper {
	opacity: 0;
	filter: blur(2px);
	transform: scale(0.97);
	pointer-events: none;
}

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


#overlay {
	position: fixed;
	inset: 0;
	z-index: 8;
	background: rgba(8, 10, 12, 0.78);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease);
}

body.article-open #overlay {
	opacity: 1;
	pointer-events: auto;
}


#main {
	position: fixed;
	inset: 0;
	z-index: 20;       
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	pointer-events: none;
}


article {
	position: relative;
	width: 58rem;
	max-width: 100%;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	background: var(--bg-card);
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,0.08);
	padding: 3.5rem 2.5rem 2rem;
	box-shadow: var(--shadow);
	pointer-events: none;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.15) transparent;
}

article::-webkit-scrollbar { width: 4px; }
article::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

article.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}


.art-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.4);
	flex-shrink: 0;
	transition: background-color var(--dur), color var(--dur);
}

.art-close::before,
.art-close::after {
	content: '';
	position: absolute;
	width: 13px;
	height: 1.5px;
	background: currentColor;
	border-radius: 1px;
}
.art-close::before { transform: rotate(45deg); }
.art-close::after  { transform: rotate(-45deg); }

.art-close:hover {
	background: var(--white-faint);
	color: var(--white);
}


#header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 100%;
}




#header > * + *::before {
	content: '';
	display: block;
	position: absolute;
	top: -2.5rem;
	left: 50%;
	width: 1px;
	height: 2.5rem;
	background: rgba(255,255,255,0.3);
	transform: translateX(-50%);
}


.hdr-logo {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2.5rem;
}

.hdr-logo span {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.28rem;
	color: var(--gold);
	line-height: 1;
}

.hdr-content {
	border-top: 1px solid rgba(255,255,255,0.3);
	border-bottom: 1px solid rgba(255,255,255,0.3);
	padding: 2.25rem 2rem;
	margin-bottom: 2.5rem;
	max-width: 56rem;
}

.hdr-content h1 {
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.45rem;
	text-transform: uppercase;
	line-height: 1.25;
	margin-bottom: 0.75rem;
	color: var(--white);
}

.hdr-content p {
	font-size: 0.75rem;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
	color: var(--white-dim);
	line-height: 2;
	margin-bottom: 0;
	white-space: nowrap;
}


#main-nav {
	display: flex;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: var(--radius);
	overflow: hidden;
}

#main-nav a {
	display: block;
	padding: 0 1.4rem;
	height: 2.75rem;
	line-height: 2.75rem;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
	color: var(--white);
	border-left: 1px solid rgba(255,255,255,0.35);
	transition: background-color var(--dur), color var(--dur);
	white-space: nowrap;
}

#main-nav a:first-child { border-left: none; }

#main-nav a:hover {
	background-color: var(--white-faint);
	color: var(--gold-light);
}


#footer p {
	font-size: 0.58rem;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
	color: rgba(255,255,255,0.60);
	text-align: center;
}

#footer a {
	border-bottom: 1px dotted rgba(255,255,255,0.22);
	transition: color var(--dur);
}

#footer a:hover { color: var(--gold-light); }




.art-title {
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0.4rem;
	text-transform: uppercase;
	color: var(--white);
	border-bottom: 1px solid rgba(255,255,255,0.45);
	display: inline-block;
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem;
	line-height: 1.3;
}

.subnav {
	display: flex;
	border-bottom: 1px solid var(--border);
	margin-bottom: 1.5rem;
	margin-top: -0.25rem;
}

.subnav-link {
	display: inline-block;
	padding: 0.45rem 1.2rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
	color: var(--white-dim);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--dur), border-color var(--dur);
}

.subnav-link.active {
	color: var(--gold);
	border-bottom-color: var(--gold);
}


.event-card {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background: var(--gold-bg);
	border: 1px solid var(--gold-border);
	border-left: 4px solid var(--gold);
	border-radius: var(--radius);
	padding: 1.2rem 1.5rem;
	margin-bottom: 1.5rem;
}

.event-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4.5rem;
	background: var(--gold);
	color: #1b1f22;
	border-radius: 4px;
	padding: 0.55rem 0.8rem;
	text-align: center;
	flex-shrink: 0;
}

.ev-day  { display: block; font-size: 2rem;   font-weight: 700; line-height: 1; }
.ev-mon  { display: block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05rem; margin-top: 0.2rem; }
.ev-time { display: block; font-size: 0.6rem;  font-weight: 600; margin-top: 0.35rem; opacity: 0.7; }

.event-title {
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--white);
	line-height: 1.55;
	text-transform: none;
	letter-spacing: 0.01rem;
}


.doc-group { margin-bottom: 1.5rem; }

.doc-group-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	color: var(--gold);
	padding-bottom: 0.4rem;
	margin-bottom: 0.2rem;
	border-bottom: 1px solid var(--gold-border);
}

.doc-list { padding: 0; margin: 0; }

.doc-list li { border-bottom: 1px solid var(--border); }
.doc-list li:last-child { border-bottom: none; }

.doc-list a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 0.5rem;
	color: rgba(255,255,255,0.8);
	border-radius: 4px;
	transition: background-color var(--dur), color var(--dur);
}

.doc-list a:hover {
	background: var(--white-faint);
	color: var(--white);
}

.doc-list .fa-file-pdf {
	color: var(--red-pdf);
	font-size: 1.2rem;
	min-width: 1.4rem;
	text-align: center;
	flex-shrink: 0;
	transition: transform var(--dur);
}

.doc-list a:hover .fa-file-pdf { transform: scale(1.1); }

.doc-list span {
	flex: 1;
	font-size: 0.87rem;
	line-height: 1.45;
}

.doc-arrow {
	color: rgba(255,255,255,0.25);
	font-size: 0.7rem;
	flex-shrink: 0;
	transition: color var(--dur);
}

.doc-list a:hover .doc-arrow { color: var(--gold); }


.company-header {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--border);
}

.company-logo-sm {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	border: 1px solid var(--gold-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18rem;
	color: var(--gold);
	flex-shrink: 0;
}

.company-name   { font-size: 1rem; font-weight: 600; letter-spacing: 0.06rem; color: var(--white); margin-bottom: 0.25rem; }
.company-market { font-size: 0.68rem; letter-spacing: 0.12rem; text-transform: uppercase; color: var(--gold); margin-bottom: 0; }

.info-list { display: flex; flex-direction: column; }

.info-row {
	display: flex;
	gap: 1rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--border);
	align-items: baseline;
}

.info-row:last-child { border-bottom: none; }

.info-row dt {
	font-size: 0.66rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.13rem;
	color: var(--white-dim);
	min-width: 10rem;
	flex-shrink: 0;
}

.info-row dd { font-size: 0.9rem; color: rgba(255,255,255,0.88); line-height: 1.55; }

.note { font-size: 0.78rem; color: var(--white-dim); }


.contact-list { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }

.contact-list li { display: flex; align-items: flex-start; gap: 1.2rem; }

.contact-icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid var(--gold-border);
	background: var(--gold-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gold);
	font-size: 1rem;
	flex-shrink: 0;
	transition: background-color var(--dur), border-color var(--dur);
}

.contact-list li:hover .contact-icon {
	background: rgba(201,168,68,0.15);
	border-color: var(--gold);
}

.contact-label {
	display: block;
	font-size: 0.66rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15rem;
	color: var(--white-dim);
	margin-bottom: 0.2rem;
	padding-top: 0.35rem;
}

.contact-val { display: block; font-size: 0.93rem; color: rgba(255,255,255,0.88); }
a.contact-val:hover { color: var(--gold-light); }

.espi-note {
	font-size: 0.78rem;
	color: var(--white-dim);
	line-height: 1.6;
	padding: 1rem 1.2rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: rgba(255,255,255,0.02);
}

.espi-note i { margin-right: 0.5rem; color: var(--gold); opacity: 0.8; }


@media (max-width: 980px) {
	article { width: 50rem; }
}

@media (max-width: 736px) {
	#wrapper { padding: 2.5rem 1rem; }

	.hdr-logo { width: 4.5rem; height: 4.5rem; }
	.hdr-content { padding: 2rem 1.25rem; max-width: 100%; }
	.hdr-content h1 { font-size: 1.55rem; letter-spacing: 0.3rem; }
	.hdr-content p { white-space: normal; font-size: 0.68rem; letter-spacing: 0.1rem; }

	article { padding: 3.25rem 1.5rem 1.5rem; }
	#main { padding: 1rem; }

	.event-card { flex-direction: column; align-items: flex-start; gap: 1rem; }

	.info-row { flex-direction: column; gap: 0.15rem; }
	.info-row dt { min-width: 0; }

	#main-nav {
		flex-direction: column;
		min-width: 11rem;
	}
	#main-nav a {
		border-left: none;
		border-top: 1px solid rgba(255,255,255,0.35);
		height: 3rem;
		line-height: 3rem;
	}
	#main-nav a:first-child { border-top: none; }
}

@media (max-width: 480px) {
	#wrapper { padding: 1.5rem 0.75rem; }
	article { padding: 3rem 1.25rem 1.25rem; }
	.doc-list a { gap: 0.6rem; padding: 0.65rem 0.25rem; }
	.doc-list span { font-size: 0.84rem; }
	.company-header { flex-direction: column; align-items: flex-start; }
}