@import url('/assets/fonts.css') ;


:root {
	--color-bg: #0A0A0A;
	--color-surface: #111111 ;
	--color-border: #333333;

	--color-dark: #1D1D1B ;
	--color-white: #F9F7F4 ;

	--color-text: #FFFFFF ;
	--color-text-muted: #888888 ;
	--color-accent: #EC6727 ;

	--font-fancy: 'Chaviera', serif ;
	--font-title: 'Glitten', serif ;
	--font-main: 'Outfit', sans-serif ;

	--radius: .5rem ;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-main) ;

	min-height: 100dvh ;
	display: flex ; flex-direction: column ;
	margin: 0 auto ;

	background: var(--color-bg) ;
	color: var(--color-text) ;
}


/* ————— MAIN    ——————————————————————————————————————————————————————————————————————————— */

h1 {
	font-family: var(--font-fancy) ; font-size: 3rem ; line-height: 1 ; font-weight: 400 ; color: var(--color-dark) !important ; text-transform: uppercase ; text-wrap: balance ; width: 100% !important ;
}

h2 {
	/*font-family: var(--font-title) ; font-size: 2rem ; font-weight: 400 ; text-wrap: balance ; padding: 0.75rem 0 ;*/
	margin: 3rem 0 1.5rem ; padding: 0.75rem 0 ; border-bottom: 1px solid var(--color-border) ; width: 100% !important ;
	font-family: var(--font-title) ; color: var(--color-accent) !important ; font-size: 1.5rem ; font-weight: 400 ; text-wrap: balance ;
}

h3 {
	font-family: var(--font-title) ; font-size: 2rem ; font-weight: 400 ; text-wrap: balance ; padding: 0.75rem 0 ; width: 100% !important ;
}

h4 { font-family: var(--font-main) ; font-size: 1rem ; font-weight: 600 ; text-wrap: balance ; padding: 0.5rem 0 ; text-transform: uppercase ; width: 100% !important ; }
h4 + p { padding-block-start: 0 ; }

p, ul, ol {
	/*padding: 1rem 0 ; text-wrap: pretty ; color: rgba(255, 255, 255, 0.92) ;*/
	padding: 1rem 0 ; line-height: 1.7 ; text-wrap: pretty ; width: 100% !important ;
}
p:has(+ ul) { padding-block-end: 0 ; }
p:has(+ ol) { padding-block-end: 0 ; }
p:last-child { padding-block-end: 0 ; }
p + ul { padding-block-start: 0 ; }
p + ol { padding-block-start: 0 ; }

a {
	/*color: inherit ;*/
	color: inherit ; text-decoration-color: rgba(236, 103, 39, 0.65) ; text-underline-offset: 0.2em ;
}
a:hover { text-decoration-color: rgba(236, 103, 39, 1) ; }

a.cta { background: var(--color-accent) ; color: #fff !important ; font-weight: 600 ; letter-spacing: 0.1rem ; width: max-content ; height: max-content ; padding: 0.5rem 1rem ; border-radius: 6px ; text-decoration: none ; text-transform: uppercase ; margin-block-end: 1rem ; cursor: pointer ; }
a.cta:hover, a.cta:focus-visible { background: color-mix(in srgb, var(--color-accent) 85%, #fff) ; transform: translateY(-2px) ; }
a.alt { background: transparent ; color: #fff !important ; font-weight: 600 ; letter-spacing: 0.1rem ; width: max-content ; height: max-content ; padding: 0.5rem 1rem ; border-radius: 6px ; text-decoration: none ; text-transform: uppercase ; border: 1px solid rgba(255,255,255,0.9) ; margin-block-end: 1rem ; cursor: pointer ; }
a.alt:hover, a.alt:focus-visible { transform: translateY(-2px) ; }

strong { font-weight: 500 ; }

.accent { color: var(--color-accent) ; }
.boring { color: var(--color-text-muted) ; }
.light { color: var(--color-dark) ; }

.flex { display: flex ; justify-content: space-between ; gap: 1rem ; @media (max-width: 900px) { flex-direction: column ; } }
.round { border-radius: 50rem !important ; }


/* ————— MOBILE  ——————————————————————————————————————————————————————————————————————————— */

@media (max-width: 640px) {
	h1 { font-size: 2.2rem ; }
	h2 { font-size: 1.6rem ; margin: 0 0 1rem ; }
	ul, ol { padding-inline-start: 1.5rem ; }
	
	#main { padding: 1rem ; }
}