<style>

/*------------------------
	Basic Styles 
-------------------------*/

* { box-sizing: border-box; }

body {
	background-color: var( --bgcolor ); 
	color: var( --color ); 
	margin: 0;
	padding: 0; }

h1, h2, h3, h4, h5, blockquote {
	text-wrap: balance; }

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
blockquote:first-child,
p:first-child {
	margin-top: 0; }

h1 { font-size: 3.0rem; line-height: 2.9rem; font-family: "Lobster", serif; font-weight: 400; font-style: normal; }
h2 { font-size: 2.5rem; line-height: 2.4rem; }
h3 { font-size: 2.0rem; line-height: 1.9rem; }
h4 { font-size: 1.5rem; line-height: 1.5rem; font-family: "Lobster", serif; font-weight: 400; font-style: normal; }
h5 { font-size: 1.0rem; line-height: 1.0rem; }
blockquote { font-size: 1.5rem; }

p, li, figcaption { 
	font-size: 1.0rem; 
	max-width: 65ch;
	text-wrap: pretty; }


a         { color: var( --color ); }
/*	a:visited { color: var( --visited ); } */
a:hover   { color: var( --hover ); }

::placeholder { color: var(--feralphp-color-secondary);  !important; }
input:valid { border-color: var(--feralphp-color-primary); ; }
input:invalid { border-color: red; }

.breadcrumb {
	background: none;
	color: var( --primary-color );
	padding: 0;
	margin: 0; }

.mod-login__submit {
	margin-top: 2.0rem; }

.article-info {
	display: flex; 
	flex-direction: column;
	gap: 0rem; 

	dt, dd { margin: 0; }
}

.article-info dd {
	font-size: 0.5rem; }

#top_link {
	position: sticky;
	right: 5rem;
	bottom: 5rem;
	scroll-behavior: smooth; 

	::before {
		color: red;
		font-size: 3.0rem;
		content = "/f35b"; }
}



/*------------------------
	Joomla template icons 
-------------------------*/

.icon-eye {
	font-family: "Font Awesome 5 Free" !important; }


/*------------------------
	LOGO 
-------------------------*/

#logo {
	grid-area: logo;

	a {
		display: block;

		img {
			display: block;
			width: var( --logo-max-width ); 
			height: var( --logo-max-height );
			min-width: 250px;
		}
	}
}








/*----------- 
	SITE 
------------*/
site {
	position: relative;
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
		"main";
	gap: var( --gap );
	justify-items: stretch;
	align-items: start;
	min-height: 100vh;
	padding: 0;
	overflow-x: clip;
}

site.l-spine {
	grid-template-columns: 1fr 4fr;
	grid-template-areas: 
		"spine main";
}

site.r-spine {
	grid-template-columns: 4fr 1fr;
	grid-template-areas: 
		"main spine";
}

site.live {
	#main::before   { display: none; }
	#panel::before  { display: none; }
	#spine::before  { display: none; }
	#mast::before   { display: none; }
	#skybox::before { display: none; }
	#hull::before   { display: none; }
	#top::before    { display: none; }
	#above::before  { display: none; }
	core::before    { display: none; }
	#below::before  { display: none; }
	#bottom::before { display: none; }
	#keel::before   { display: none; }
	#side::before   { display: none; }
}


/*----- SPINE ------*/
site.no-spine #spine {
	display: none }

#spine {
	padding: var( --spine_padding );
	border: var( --spine_border );
	border-width: var( --spine_brdrwidth ); 
	background-color: var( --spine_bgcolor ); 
	color: var( --spine_color ); 
	position: relative;
	grid-area: spine;  
	min-width: 225px; 
	align-self: stretch; }

#spine::before {
	position: absolute;
	content: "SPINE"; 
	background: red;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	left: 0; }

#spine p {
	color: var( --spine_color );
}



/*----- PANEL ------*/
#panel {
	padding: var( --panel_padding );
	border: var( --panel_border );
	border-width: var( --panel_brdrwidth ); 
	background-color: var( --panel_bgcolor ); 
	color: var( --panel_color ); 
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX( 100% );
	grid-area: panel;  
	width: 225px; 
	min-width: 350px; 
	max-width: 350px; 
	min-height: 2.5rem;
	padding-top: 3.5rem;
	z-index: 9999999; }

#panel::before {
	position: absolute;
	content: "PANEL"; 
	background: red;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	transform: translateX(-100%); }

#panel.open {
	animation: open_panel 1s ease-in-out ;
	animation-fill-mode: forwards;
	z-index: 9999999;
}

#panel.closed {
	animation: close_panel 1s ease-in-out ;
	animation-fill-mode: forwards;
	z-index: 9999999;
}

@keyframes open_panel {
  from { 
  	transform: translateX( 100%;
	z-index: 9999999; ); 
  } to { 
	transform: translateX( 0 );
	z-index: 9999999; }
}

@keyframes close_panel {
  from { transform: translateX( 0 ); } to { transform: translateX( 100% ); }
}



/*----------- 
	MAIN 
------------*/
main {
	position: relative;
	display: flex; 
	flex-direction: column;
	gap: var( --gap );
	justify-items: start;
	align-items: stretch;
	min-height: 100vh;
	width: 100%; 
	padding: 0;
	overflow-x: clip;
}



/*----- MAST ------*/
#mast {
	padding: var( --mast_padding );
	border: var( --mast_border );
	border-width: var( --mast_brdrwidth ); 
	background-color: var( --mast_bgcolor ); 
	color: var( --mast_color ); 
	position: relative;
	grid-area: mast; 
	z-index: 10; 

	p { color: var( --mast_color ); }

	p:last-child { margin-bottom: 0; }
}

#mast::before {
	position: absolute;
	content: "MAST"; 
	background: red;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	left: 0; 
}



/*----- SKYBOX ------*/
#skybox {
	padding: var( --skybox_padding );
	border: var( --skybox_border );
	border-width: var( --skybox_brdrwidth ); 
	background-color: var( --skybox_bgcolor ); 
	color: var( --skybox_color ); 
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	grid-area: skybox; 
	z-index: 1; 

	p { color: var( --skybox_color ); }

	p:last-child { margin-bottom: 0; }
}

#skybox::before {
	position: absolute;
	content: "SKYBOX"; 
	background: red;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	left: 0; 
}



/*----------- 
	HULL
------------*/
hull {
	padding: var( --hull_padding );
	border: var( --hull_border );
	border-width: var( --hull_brdrwidth ); 
	background-color: var( --hull_bgcolor ); 
	position: relative;
	flex-grow: initial;
	display: grid; 
	grid-template-columns: 4fr;
	grid-template-rows: auto;
	grid-template-areas: 
		"above"
		"core"
		"below";
	justify-items: stretch;
	align-items: stretch;
	grid-area: hull;
/*	overflow: scroll; */
	min-height: 100cqh; 
	min-height: 100vh;
	width: 100%;
	max-width: var( --span-width );
	margin: auto; 
}

hull.l-side {
	grid-template-columns: 1fr 3fr;
	grid-template-areas: 
		"side above"
		"side core"
		"side below";
}

hull.r-side {
	grid-template-columns: 3fr 1fr;
	grid-template-areas: 
		"above side"
		"core side"
		"below side";
}

hull.no-side side { display: none; }



/*----- SIDE ------*/
#side {
	padding: var( --side_padding );
	border: var( --side_border );
	border-width: var( --side_brdrwidth ); 
	background-color: var( --side_bgcolor ); 
	color: var( --side_color ); 
	position: relative;
	grid-area: side; 
	padding: 0 1.25rem;
	display: flex;
	align-items: stretch; 
	flex-direction: column;
	gap: 2.5rem;

	p { color: var( --side_color ); }
}

#side::before {
	position: absolute;
	content: "SIDE"; 
	background: green;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	left: 0; 
}



/*----- TOP ------*/
#top {
	padding: var( --top_padding );
	border: var( --top_border );
	border-width: var( --top_brdrwidth ); 
	background-color: var( --top_bgcolor ); 
	color: var( --top_color ); 
	position: relative;
	grid-area: top; 
	display: flex;
	justify-content: center;
	height: fit-content; 

	p { color: var( --top_color ); }

	p:last-child { margin-bottom: 0; }
}

#top::before {
	position: absolute;
	content: "TOP"; 
	background: green;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	left: 0; }



/*----- ABOVE ------*/
#above {
	padding: var( --above_padding );
	border: var( --above_border );
	border-width: var( --above_brdrwidth ); 
	background-color: var( --above_bgcolor ); 
	color: var( --above_color ); 
	position: relative;
	grid-area: above; 

	p { color: var( --above_color ); }

	p:last-child { margin-bottom: 0; }
}

#above::before {
	position: absolute;
	content: "ABOVE"; 
	background: green;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	left: 0; 
}



/*----- CORE ------*/
core {
	padding: var( --core_padding );
	border: var( --core_border );
	border-width: var( --core_brdrwidth ); 
	background-color: var( --core_bgcolor ); 
	color: var( --core_color ); 
	position: relative;
	grid-area: core; 
	height: fit-content;
	min-height: 100cqh; 

	p { color: var( --core_color ); }

	> * { min-width: 320px; }
}

core::before {
	position: absolute;
	content: "CORE"; 
	background: green;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	left: 0; 
}



/*----- BELOW ------*/
#below {
	padding: var( --below_padding );
	border: var( --below_border );
	border-width: var( --below_brdrwidth ); 
	background-color: var( --below_bgcolor ); 
	color: var( --below_color ); 
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	grid-area: below; 

	p { color: var( --below_color ); }

	p:last-child { margin-bottom: 0; }

	> * { min-width: 320px; }
}

#below::before {
	position: absolute;
	content: "BELOW"; 
	background: green;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	left: 0; 
}



/*----- BOTTOM ------*/
#bottom {
	padding: var( --bottom_padding ); 
	border-block: var( --bottom_border );
	border-width: var( --bottom_brdrwidth ); 
	background-color: var( --bottom_bgcolor ); 
	color: var( --bottom_color ); 
	position: relative; 
	grid-area: bottom; 
	display: flex;
	justify-content: center; 
	flex-direction: row; 
	gap: 2.5rem; 
	padding: 1.0rem; 

	p { 
		font-size: 0.8rem;
		color: var( --bottom_color; ) }

	p:last-child { margin-bottom: 0; }

	> * { min-width: 320px; }
	}


#bottom::before {
	position: absolute;
	content: "BOTTOM"; 
	background: green;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	left: 0; 
}



/*----- KEEL ------*/
#keel {
	padding: var( --keel_padding );
	border: var( --keel_border );
	border-width: var( --keel_brdrwidth ); 
	background-color: var( --keel_bgcolor ); 
	color: var( --keel_color ); 
	position: relative;
	grid-area: keel; 
	height: fit-content; 

	p { color: var( --keel_color ); }

	p:last-child { margin-bottom: 0; }

	> * { min-width: 320px; }
}

#keel::before {
	position: absolute;
	content: "KEEL"; 
	background: red;
	color: white;
	font-size: 0.6rem; 
	font-family: system-ui;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 1px 2px; 
	top: 0;
	left: 0; 
}



/* Modest Desktop or Wide Tablet layout */
@media all AND ( max-width: 1280px ) {
/*	#top { background-color: lightblue; } */
}



/* Wide Mobile or Narrow Tablet layout */
@media all AND ( max-width: 800px ) {
	/*--  Switch to one column design  --*/

/*	#top { background-color: lightgreen; } */

	hull.l-side,
	hull.r-side {
		grid-template-columns: 1fr; 
		grid-template-areas: 
			"top"
			"above"
			"core"
			"below"
			"bottom"
			"side"; }

	#side{ 
		max-width: 380px;
		margin-inline: auto; }

	#social-icons {
		grid-area: social;
		justify-content: center !important; }

	core{ 
		padding: 2.0rem; }
}




/* Mobile Narrow layout */
@media all AND ( max-width: 380px ) {
	/*--  Eliminate all spacious margins  --*/

/*	#top { background-color: lightyellow; } */
	#mast { padding-inline: 0; }
}

</style>


