/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 01-07-22 */

:root {
	/* colour scheme */
	--bg: #fff; /*#ccc; /* rgba(0,0,0,.01); /* #eaeaeb; /* #f4f4f4; */	/* ibox - background */
	--bg-muted: #ececec;
	--text: #262626;
	--text-muted: #ccc;
	--hilite: blue;
	/* font defaults */
	/*--ff-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
	/*--ff-serif: "Georgia","Times New Roman", serif;
	/* font-size defaults */
	--fs0: clamp(3.05rem, calc(-0.20rem + 16.27vw), 11.39rem);
	--fs1: clamp(2.44rem, calc(0.43rem + 10.05vw), 7.59rem);
	--fs2: clamp(1.95rem, calc(0.74rem + 6.07vw), 5.06rem);
	--fs3: clamp(1.56rem, calc(0.86rem + 3.54vw), 3.38rem);
	--fs4: clamp(1.25rem, calc(0.86rem + 1.95vw), 2.25rem);
	--fs5: clamp(1.00rem, calc(0.80rem + 0.98vw), 1.50rem);
	--fs6: clamp(0.80rem, calc(0.72rem + 0.39vw), 1.00rem);
	--fs-small: .875rem;
	/* measure defaults*/
	--m: 45ch;
	--m-short: 20ch;
	--m-wide: 55ch;
	/* line-height defaults*/
	--lh-solid: 1;
	--lh-copy: 1.5;
	--lh-title: 1.2;
	/* letter-spacing defaults */
	--ls: .25em;
	--ls-short: -.05em;
	--ls-wide: .5em;
	/* .x-wrapper defaults */
	--content-inline-margin: 10vmin;
	--content-max-width: 70rem;
	/* .x-grid defaults */
	--x-grid-min: 20rem;
	--x-grid-max: max-content;
	--x-grid-gap: 1rem;
	/* .x-stack defaults*/
	--x-stack-margin: 1em;
}

/*
html {
	font-size: 100%;
	block-size: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	text-rendering: optimizeSpeed;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}
*/
/*
*, *::before, *::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}
*/
svg {
	max-block-size: 100%;
	pointer-events: none;
}

img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

/*
body {
	block-size: 100%;
	font-family: var(--ff-serif);
	font-size: 1rem;
	font-weight: 400;
	/*padding-block: 5vmin;*/
/*	background-color: var(--bg);
	color: var(--text);
}
*/

h1 {
	font-size: var(--fs4);
	line-height: var(--lh-title);
	max-inline-size: var(--m-short);
}

span {
	font-family: var(--ff-sans);
	font-size: var(--ff-small);
	font-weight: 600;
	text-transform: uppercase;
}

p, ul ,ol, dl {
	line-height: var(--lh-copy);
	-webkit-hyphens: auto;
	hyphens: auto;
}

article h2 {
	font-size: var(--fs5);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

article img {
	object-fit: cover;
	aspect-ratio: 2/1;
}

/*-----------------------------
LAYOUT UTILITIES
-----------------------------*/

.x-wrapper {
margin: 32px 0;
	margin-inline: auto;
	inline-size: min(100% - var(--content-inline-margin), var(--content-max-width)); 
}

.x-grid {
	display: grid;
	gap: var(--x-grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--x-grid-min), 100%), var(--x-grid-max)));
}

.x-stack {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.x-stack * {
  margin-block: 0;
} 

.x-stack * + * {
  margin-block-start: var(--x-stack-margin);
}

.x-grid > * {
  margin-block-start: 0;
/*gap: 16px;*/
}

/*-----------------------------
NEWS BLOCK LAYOUTS
-----------------------------*/

.news-section {
	--content-max-width: 90rem;
	--x-grid-min: 34rem;
	--x-grid-gap: 1px; /* between main-content and ibox */
}

.news-featured {
	--content-inline-margin: 1px;
	--content-max-width: 48rem;
	padding: 1rem;
	margin-inline: auto;
	border: 1px solid var(--text-muted);
}

.news-featured > *:not(span, h1) {
  margin-inline: auto;
}

.news-featured p {
	font-size: var(--fs5);
	max-inline-size: var(--m-wide);
}

.news-featured p:first-of-type:first-letter {
	font-size: 3em;
	float: left;
	padding-block-start: min(.5rem, 1rem);
	margin-inline-end: min(.5rem, 1rem);
}

.news-latest {
	--content-inline-margin: 1px;
	--content-max-width: 48rem;
	--x-grid-min: 16rem;
	--x-grid-gap: 1px; /* between ibox */
	padding: 1px;
	background-color: var(--text-muted);
}

.news-latest article {
	padding: 1rem;
	background: var(--bg);
	border: 1px solid rgba(204,204,204,.25);
	}
.news-latest article:hover {
	background-color: #F6F6F6; /*#fff;*/
	border: 1px solid rgba(204,204,204,.5);
	}