@font-face {
	font-family: 'RingbearerFont';
	src: url('../fonts/ringbearer-webfont.woff') format('woff');
	font-display: swap;
}

/*
 * The site nav (four groups with dropdowns), the home page, and the four
 * section pages. Loaded alongside common.css on every page that has a nav.
 * Selectors are scoped so nothing here reaches page content.
 */

/* four-group nav with dropdowns, and the matching 2x2 panels below.
   Scoped to this page for now; it moves to common.css when the other
   pages adopt it. */
.navrow .navitem {
	position: relative;
	padding: 20px;
	font-weight: bold;
}

.navrow .navitem { color: #fff; }

/* a small tile between the nav groups, rather than a bullet or a pipe */
.navrow .navsep {
	display: flex;
	align-items: center;
	padding: 0 2px;
}

.navrow .navsep svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.6;
	stroke-linejoin: round;
	opacity: .45;
}
.navrow .navtop { color: #fff; cursor: default; }

.navrow .navitem:hover .navtop,
.navrow .navitem.hot .navtop { text-decoration: underline; }

/* On the four section pages the highlighted group stands in for the page
   heading that used to sit below the nav, so it has to read as "you are
   here" rather than as a hover: hover underlines, current gets a bar. */
/* The section's own options, one row under the nav. The verb above says which
   section you are in; this row says which page. Hub pages light the verb only. */
.subnav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px 22px;
	font-size: 17px;
	padding: 0 20px 16px 20px;
}

/* Full white throughout -- the smaller size is what says "sub row", so the
   current page is marked by weight and a rule rather than by brightness. */
.subnav a { color: #fff; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.subnav a:hover { text-decoration: underline; }          /* the site-wide hover; the rule below is for "current" only */
.subnav a.current { font-weight: bold; border-bottom-color: #fff; }
.subnav a.current:hover { text-decoration: none; }       /* already marked -- no second line */

@media (max-width: 640px) {
	.subnav { gap: 2px 14px; font-size: 15px; padding: 0 12px 12px 12px; }
}

.navrow .navitem.current .navtop {
	text-decoration: none;
	border-bottom: 3px solid #fff;
	padding-bottom: 5px;
}

.navrow .dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	min-width: 210px;
	padding: 6px 0;
	text-align: left;
	font-weight: normal;
	font-size: 15px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 10px;
	background-color: rgba(0, 0, 0, .88);
}

.navrow .navitem:hover .dropdown { display: block; }

.navrow .dropdown a {
	color: #fff;
	display: block;
	padding: 8px 16px;
	white-space: nowrap;
}

.navrow .dropdown a:hover { background-color: rgba(255, 255, 255, .14); text-decoration: none; }

/* 2x2 panels: the same four groups, spelled out */
.homegrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	width: 100%;
	max-width: 800px;
	margin: 10px auto 0 auto;
	padding: 0 20px 10px 20px;
	box-sizing: border-box;
}

.homepanel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 22px 18px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 14px;
	background-color: rgba(0, 0, 0, .72);
	transition: background-color .15s ease, border-color .15s ease;
}

.homepanel.hot { background-color: rgba(0, 0, 0, .86); border-color: #fff; }

.paneltitle {
	font-size: 27px;
	font-weight: bold;
	color: #fff;
	padding-bottom: 6px;
}

.panellinks {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	font-size: 19px;
}

/* space the leading icon with a margin, not gap: gap would also push the
   trailing external-link arrow away from its label */
.panellinks a { display: flex; align-items: center; white-space: nowrap; }
.panellinks .li { margin-right: 9px; }
.panellinks .li { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 25px; }
.panellinks .li svg { width: 25px; height: 25px; }
.panellinks .li img { width: 23px; height: 23px; object-fit: contain; }
.navrow .dropdown .li { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; margin-right: 8px; }
.navrow .dropdown .li svg { width: 18px; height: 18px; }
.navrow .dropdown .li img { width: 16px; height: 16px; object-fit: contain; }
.navrow .dropdown a { display: flex; align-items: center; }
.panellinks a:hover { text-decoration: underline; }

/* Connect shows its three logos side by side, wordless and large */
/* Interact carries six links; two columns keeps it the same height as the others */
/* Interact and Learn left-justify their items so the papers list has a left
   edge to indent from, the way it does in the nav dropdown. Buy / Sell /
   Trade keeps its centred column; Connect is logos, not labels. */
.homepanel[data-key="learn"] .panellinks { align-items: flex-start; }

.panellinks.twocol {
	display: grid;
	grid-template-columns: repeat(2, auto);
	column-gap: 18px;
	justify-content: start;
}

.connectlinks {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 26px;
	padding-top: 6px;
}

.connectlinks a { gap: 0; }
.connectlinks a:hover { text-decoration: none; opacity: .75; }
.connectlinks .li { width: 69px; height: 69px; flex: 0 0 69px; margin-right: 0; }
.connectlinks .li img { width: 69px; height: 69px; object-fit: contain; }

.navrow sup, .panellinks sup, .tilebutton sup { font-size: 9px; font-weight: normal; padding-left: 2px; color: #fff; }

/* the little arrow marking a link that leaves the site */
svg.ext {
	width: 9px;
	height: 9px;
	margin-left: 5px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .75;
}

@media (max-width: 640px) {
	.homegrid { grid-template-columns: 1fr; gap: 12px; padding: 0 12px 10px 12px; }
	.navrow .navitem { padding: 14px; }
	.navrow .navsep { display: none; }
}


/* ---- section pages: a grid of rounded buttons ---- */

.pagetitle {
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	padding: 14px 20px 4px 20px;
}

.tilegrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	max-width: 760px;
	margin: 10px auto 0 auto;
	padding: 0 20px 10px 20px;
}

.tilebutton {
	width: 168px;
	min-height: 150px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 22px 12px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 14px;
	background-color: rgba(0, 0, 0, .72);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.tilebutton:link,
.tilebutton:visited { color: #fff; text-decoration: none; }

.tilebutton:hover {
	background-color: rgba(0, 0, 0, .86);
	border-color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}

.tilebutton .li { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.tilebutton .li svg { width: 64px; height: 64px; }
.tilebutton .li img { width: 58px; height: 58px; object-fit: contain; }
.tilebutton .lbl { line-height: 1.25; text-align: center; }

@media (max-width: 640px) {
	.tilegrid { gap: 12px; padding: 0 12px 10px 12px; }
	.tilebutton { width: 132px; min-height: 124px; font-size: 15px; padding: 16px 8px; }
	.tilebutton .li { width: 48px; height: 48px; }
	.tilebutton .li svg { width: 48px; height: 48px; }
	.tilebutton .li img { width: 44px; height: 44px; }
}


/* ---- home page headline and intro ---- */

.intro {
	max-width: 720px;
	margin: 0 auto;
	padding: 4px 24px 6px 24px;
	color: #fff;
	text-align: left;
}

/* the claim in the Etheria face, the date in the body face so it reads as fact
   rather than decoration */
.intro h1 .when {
	font-family: arial, sans-serif;
	font-size: 22px;
	font-weight: normal;
	letter-spacing: 0;
	opacity: .85;
	white-space: nowrap;
	margin-left: 12px;
}

.intro h1 {
	text-align: center;
	font-family: 'RingbearerFont', 'Palatino Linotype', Georgia, serif;
	font-size: 44px;
	font-weight: normal;
	margin: 0 0 14px 0;
	line-height: 1.15;
	letter-spacing: 1px;
}

.intro p {
	font-size: 17px;
	line-height: 1.5;
	margin: 0 0 10px 0;
	padding: 0;
}

.intro .predates {
	font-size: 15px;
	opacity: .85;
}

.intro a { text-decoration: underline; }

/* present for screen readers and crawlers, not shown on screen */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 640px) {
	.intro h1 { font-size: 32px; }
	.intro h1 .when { display: block; margin-left: 0; margin-top: 4px; font-size: 17px; }
	.intro p { font-size: 15px; }
}


/* ---- home page only: no nav row, so the panels carry visible headings ---- */

/* the panel heading is the link to its section hub; it must look exactly
   like the heading it replaced, so colour comes from the heading, not a:link */
.homepanel h2.paneltitle a { color: inherit; text-decoration: none; }
.homepanel h2.paneltitle a:hover { text-decoration: underline; }

.homepanel h2.paneltitle {
	font-size: 27px;
	font-weight: bold;
	color: #fff;
	margin: 0 0 6px 0;
	padding: 0;
}

/* the background photo is busy; a soft dark backing keeps the intro readable */
.intro {
	background-color: rgba(0, 0, 0, .55);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 14px;
	max-width: 700px;
	padding: 18px 26px 16px 26px;
	margin: 10px auto 4px auto;
}