@font-face
{
	font-display: swap;
    font-family: 'Syne Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/syne-mono-v16-latin-regular.woff2') format('woff2');
}

@font-face
{
    font-display: swap;
    font-family: 'Sofia Sans Semi Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/sofia-sans-semi-condensed-v8-latin-regular.woff2') format('woff2');
}

@font-face
{
    font-display: swap;
    font-family: 'Sofia Sans Semi Condensed';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/sofia-sans-semi-condensed-v8-latin-600.woff2') format('woff2');
}

@font-face
{
	font-display: swap;
    font-family: 'Saira Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/saira-condensed-v12-latin-regular.woff2') format('woff2');
}

@font-face
{
    font-display: swap;
    font-family: 'Saira Condensed';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/saira-condensed-v12-latin-600.woff2') format('woff2');
}


:root
{
    --bg: #040404;
    --overlay:rgba(0,0,0,.56);
	--panel-soft: rgb(73, 95, 104, .5);
    --panel: rgb(57, 76, 85, .63);
    --panel-strong:rgba(10,12,14,.30);
    --line: rgba(206, 171, 70, .4);
    --line-strong:rgba(233, 202, 106, .46);
    --accent:#d7b24a;
    --accent-soft:#f0d786;
    --accent-dim:#9a7827;
	--accent-secondary: #33A8CBE6;
	--accent-secondary-soft: rgb(64 193 236 / 0.9);
    --text: #f0e7bf;
    --text-soft: #d7cda7;
    --text-dim: #a18f63;
	--text-muted: rgb(143, 134, 133, .8);
	--danger: #d34d4d;
    --shadow:0 18px 50px rgba(0,0,0,.22);
    --shadow-soft:0 16px 36px rgba(0,0,0,.18);
	--font-title: "Syne Mono", monospace;
    --font-heading:"Agency FB","Arial Narrow","Helvetica Neue",Arial,sans-serif;
    --font-body:"Segoe UI","Trebuchet MS",Arial,sans-serif;
    --font-meta: "Saira Condensed", sans-serif;
	--font-primary: "Sofia Sans Semi Condensed", sans-serif;
}


html
{
	scroll-behavior: smooth;
	background: none;
}

body
{
    margin: 0;
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
    background: var(--bg);
    position: relative;
}

body::before
{
    content: "";
    position: fixed;
    inset: 0;
    background: url('/assets/images/bg.jpg') top center / cover no-repeat;
    z-index: -3;
}

body::after
{
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: -2;
    pointer-events: none;
}

a
{
	color: inherit;
	text-decoration: none !important;
}

.uk-text-muted
{
	color: var(--text-muted) !important;
}


.shell
{
	width: calc(100% - 60px);
	margin: 0 auto;
}

/* ============================================================================== */
/* BUTTONS
/* ============================================================================== */

.uk-button
{
	font-family: var(--font-meta);
	font-size: 1rem;
}

.uk-button-default
{
    background: linear-gradient(180deg, rgba(80, 80, 80, .96), rgba(50, 50, 50, .9));
    color: var(--text);
	border: 1px solid #373737;
}

.uk-button-default:not(:disabled):hover, .uk-button-default:active
{
	filter: brightness(1.1);
	color: var(--text);
	border: 1px solid #373737;
}

.uk-button-primary
{
    background: linear-gradient(180deg, rgba(232,201,105,.96), rgba(176,132,30,.90));
    color: #130f08 !important;
    border: 1px solid #8e6b00;
}

.uk-button-primary:not(:disabled):hover, .uk-button-default:active
{
	filter: brightness(1.05);
	color: #130f08;
    border: 1px solid #8e6b00;
}

.uk-button-secondary
{
    background: linear-gradient(180deg, rgba(132, 214, 251, .96), rgba(51, 168, 203, .9));
    color: #130f08;
	border: 1px solid #007495;
}

.uk-button-secondary:not(:disabled):hover, .uk-button-default:active
{
	filter: brightness(1.05);
	color: #130f08;
	border: 1px solid #007495;
}

.uk-button-danger
{
    background: linear-gradient(180deg, rgb(255 95 95 / 0.96), rgb(182 22 22 / 0.9));
    color: #ffffff;
	border: 1px solid #950000;
}

.uk-button-danger:not(:disabled):hover, .uk-button-danger:active
{
	filter: brightness(1.05);
	color: #ffffff;
	border: 1px solid #950000;
}

.uk-button[disabled]
{
    opacity: .42;
    cursor: default;
}

.uk-button-primary[disabled]
{
    border: 1px solid #8e6b00;
}

.uk-button-secondary[disabled]
{
	border: 1px solid #007495;
}

.uk-button-danger[disabled]
{
	border: 1px solid #950000;
}

.button-small
{
	min-height: 34px;
	padding: 0 13px;
	font-size: .67rem
}

.button-block
{
	width: 100%;
}

/* ------------------ END BUTTONS ----------------------------------------------- */

/* ============================================================================== */
/* NOTIFICATIONS
/* ============================================================================== */

.uk-notification
{
	width: min(92vw, 520px);
}

.uk-notification-top-center,
.uk-notification-bottom-center
{
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
}

.uk-notification-message
{
    padding: 0;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    color: var(--text);
	background-color: var(--bg);
}

.uk-notification-message-danger
{
	border-color: rgba(211,77,77,.55);
}

.uk-notification-message-warning
{
	border-color:rgba(214,154,53,.55);
}

.uk-notification-message-success
{
	border-color:rgba(94,165,108,.55);
}

.uk-notification-message-primary
{
	border-color:rgba(77,141,211,.55);
}

.uk-notification-message-danger, .uk-notification-message-danger h3
{
	color: #f0bfaf;
}

.uk-notification-message-warning, .uk-notification-message-warning h3
{
	color: #f1d39f;
}

.uk-notification-message-success, .uk-notification-message-success h3
{
	color: #d5e1cb;
}

.uk-notification-message-primary, .uk-notification-message-primary h3
{
	color: #c8daf4;
}

.uk-notification-close
{
    top: 10px;
    right: 10px;
}

.notification-card
{
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 18px;
}

.notification-icon
{
	width: 60px;
    height: 52px;
    flex: 0 0 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.9rem;
}
.notification-content h3
{
    margin-bottom: 4px;
    font-family: var(--font-meta);
    font-size: 1rem;
	font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.notification-content div
{
    font-size: 1rem;
    line-height: 1.55;
}

/* ------------------ END NOTIFICATIONS ----------------------------------------- */

/* ============================================================================== */
/* HEADER
/* ============================================================================== */

.site-header
{
    position: relative;
	border-bottom: 1px solid var(--line);
	background: rgba(0, 0, 0, .6);
}

.header-inner
{
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.brand
{
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.brand-logo
{
	width: 120px;
	height: 120px;
	object-fit: contain;
	z-index: 500;
}

.brand-title
{
    font-family: var(--font-title);
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--accent-soft);
}

.header-links
{
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-meta);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .10em;
}

.header-links a,.link-button
{
    color: var(--text-soft);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.header-links a:hover,
.link-button:hover
{
	color: var(--accent-soft)
}

.header-links form
{
	margin: 0;
}


/* ------------------ END HEADER ------------------------------------------------ */

/* ============================================================================== */
/* FOOTER
/* ============================================================================== */

.site-footer
{
    position:relative;
	border-top: 1px solid var(--line);
	background: rgba(0, 0, 0, .6);
}

.footer-inner
{
    min-height: 20px;
    padding: 14px 0;
}

.footer-inner p
{
    margin: 0;
    color: var(--text-dim);
    font-family: var(--font-meta);
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ------------------ END FOOTER ------------------------------------------------ */

/* ============================================================================== */
/* MAIN CONTENT
/* ============================================================================== */

.page-frame
{
	width: 100%;
	min-height: calc(100vh - 120px);
}

.site-main
{
	padding: 12px 0 22px;
}

.content-panel
{
    border: 1px solid var(--line);
	padding: 20px 20px 18px;
	position: relative;
	overflow: hidden;
	font-family: var(--font-primary);
	font-size: 1.1rem;
	background-color: rgba(0, 0, 0, .6);
}

.panel-head
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
	position: relative;
	z-index: 1;
}

.content-panel h1,
.content-panel h2,
.content-panel h3
{
	margin: 0;
	text-transform: uppercase;
	font-family: var(--font-title);
	text-align: left;
}

.content-panel h1
{
    font-size: 1.8rem;
    line-height: 1.04;
    letter-spacing: .07em;
    color: var(--accent-soft);
}

.content-panel h2
{
    font-size: .92rem;
    line-height: 1.10;
    letter-spacing: .07em;
    color: var(--accent-soft);
}

.content-panel h3
{
    font-size: .86rem;
    line-height: 1.16;
    letter-spacing: .05em;
    color: var(--text);
}

.section-kicker
{
    display: inline-block;
    color: var(--accent-soft);
    font-family: var(--font-meta);
    font-size: .8rem;
    letter-spacing: .17em;
    text-transform: uppercase;
}


/* ------------------ END MAIN CONTENT ----------------------------------------- */



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




@media (max-width: 1200px)
{

	.shell
	{
        width: calc(100% - 40px);
	}

    body .header-inner
    {
        position: relative;
	    height: auto;
        min-height: 50px;
        padding: 10px 0 6px;
        flex-wrap: wrap;
        justify-content: center;
	    gap: 8px;
    }

    body .home-grid
    {
        gap: 14px;
    }

	body .brand
    {
        width: 100%;
        justify-content: center;
    }

    body .brand-logo
    {
        position: absolute;
	    top: -7px;
	    left: 0;
	    width: 88px;
        height: 88px;
    }

    body .brand-title
    {
        font-size: 1.1rem;
        text-align: center;
    }

    body .header-links
    {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 14px;
        font-size: .92rem;
        letter-spacing: .08em;
    }


    body .site-main
    {
        padding: 10px 0 18px;
    }


}

@media (max-width: 900px)
{
	.site-header, .site-footer, .content-panel
	{
		background: none;
	}
}

@media (max-width: 650px)
{
	.shell
	{
        width: calc(100% - 20px);
	}

	body .brand-logo
    {
	    top: 4px;
	    width: 68px;
        height: 68px;
    }

}