@font-face {
    font-family: "font-heading";
    src: url("../fonts/Calistoga-Regular.eot");
    src: url("../fonts/Calistoga-Regular.eot?#iefix") format('embedded-opentype'),
         url("../fonts/Calistoga-Regular.woff2") format('woff2'),
         url("../fonts/Calistoga-Regular.woff") format('woff'),
         url("../fonts/Calistoga-Regular.ttf")  format('truetype'),
         url("../fonts/Calistoga-Regular.svg#Calistoga") format('svg');
    font-display: swap;
	}

@font-face {
  font-family: "font-body";
  src: url("../fonts/Atkinson-Hyperlegible-Regular-102.eot");
  src: url("../fonts/Atkinson-Hyperlegible-Regular-102.eot?#iefix") format('embedded-opentype'),
       url("../fonts/Atkinson-Hyperlegible-Regular-102a.woff2") format('woff2'),
  	   url("../fonts/Atkinson-Hyperlegible-Regular-102.woff") format('woff'),
       url("../fonts/Atkinson-Hyperlegible-Regular-102.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  }

@font-face {
  font-family: "font-body-bold";
  src: url("../fonts/Atkinson-Hyperlegible-Bold-102.eot");
  src: url("../fonts/Atkinson-Hyperlegible-Bold-102.eot?#iefix") format('embedded-opentype'),
       url("../fonts/Atkinson-Hyperlegible-Bold-102a.woff2") format('woff2'),
       url("../fonts/Atkinson-Hyperlegible-Bold-102.woff") format('woff'),
       url("../fonts/Atkinson-Hyperlegible-Bold-102.ttf") format('truetype');
  font-display: swap;
  }


/* =RESET
------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	}

html,
body,
.pg-header p,
.pg-footer p {
	margin: 0;
	padding: 0;
	}


/* =VARIABLES
------------------------------- */
html {
	--color-001: 255, 255, 255;
	--color-002: 8,47,55;
	--color-003: 45,45,46;
	--color-004: 95,82,93;
	--color-005: 253,188,46;
	--color-006: 2,249,0;
	--op-100: 1;
	--op-075: 0.75;
	--op-050: 0.50;
	--op-025: 0.25;
	--op-018: 0.18;
	--op-014: 0.14;
	--op-002: 0.02;

	background-color: rgba(var(--color-005), var(--op-002));
	color: rgba(var(--color-003), var(--op-100));
	}


/* =BASE
------------------------------- */
img {
	max-width: 100%;
	display: block;
    object-fit: cover;
	}

q::before {
    content: open-quote;
	}

q::after {
    content: close-quote;
	}

q {
  quotes: "“" "”" "‘" "’";
	}

blockquote::before {
  content: open-quote;
	}

blockquote::after {
  content: close-quote;
	}

blockquote {
/*   margin: 1.3750em; */
  quotes: "“" "”" "‘" "’";
	}

blockquote q {
  quotes: "“" "”" "‘" "’";
	}

blockquote p,
blockquote footer {
  display: inline;
	}

blockquote p {
	margin-bottom: 0;
	}


abbr {
	border-bottom: 1px dotted rgba(var(--color-003), var(--op-100));
	}

/* =STYLES
------------------------------- */
body {
	display:grid;
	grid-gap: 1em;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	font: 18px "font-body", sans-serif;
	line-height: 1.5;
	font-variant: common-ligatures tabular-nums;
	}

main, nav {
	width: 100%;
	min-width: 350px;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 1.5em;
	}

main p {
	max-width: 80ch;
	}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.summary {
	font-family: "font-heading";
	color: rgba(var(--color-004), var(--op-100));
	}


h1, .h1 {
	font-size: 1.3333em; /* 24px */
	line-height: 1.1250em; /* 27px */
	}

h2, .h2 {
	font-size: 1.2222em; /* 22px */
	line-height: 1.2273em; /* 27px */
	}

h3, .h3 {
	color: rgba(var(--color-004), var(--op-100));
	font-size: 1.1111em; /* 20px */
	line-height: 1.3500em; /* 27px */
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip: edges;
	text-decoration-color: rgba(var(--color-004), var(--op-025));
	text-decoration-thickness: 5px;
	text-underline-offset: 0.15em;
	}

p {
	font-size: 1em; /* 18px */
	line-height: 1.5000em; /* 27px */
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	}

* + p {
	margin-top: 1.1250em; /* 0.75 baselines */
	}

* + h2 {
	margin-top: 2.250em; /* 1.5 baselines */
	}

h2 + p {
	margin-top: 0.750em; /* 0.5 baselines */
	}

p img {margin-bottom: 1.1250em;}

section + section {
	margin-top: 2.250em; /* 1.5 baselines */
	}

ul,
ol,
dl {
	margin-top: 1.1250em; /* 0.75 baselines */
	padding: 0;
	}

ul,
ol {
	margin-top: 1.1250em; /* 0.75 baselines */
	margin-left: 1em;
	padding: 0;
	list-style-position: outside;
	}

li,
dt,
dd {
	margin-top: 0.375em; /* 0.25 baseline */
	}

dd {
	margin-left: 0;
	}

li + li,
dt + dt {
	margin-top: 0.375em; /* 0.25 baseline */
	}

pre {
	/* makes the <code> wrap */
	white-space:pre-line;
	background-color: rgba(var(--color-002), var(--op-100));
	color: rgba(var(--color-006), var(--op-100));
	border-radius: .6rem;
	padding: 1rem;
	}

code {
	font-family: monospace;
	font-size: inherit;
	}

pre code {
	display: block;
	background: none;
	white-space: pre;
	-webkit-overflow-scrolling: touch;
	overflow-x: scroll;
	max-width: 100%;
	min-width: 100px;
	padding: 0;
	}

p > code,
li > code,
dd > code,
td > code {
	background: rgba(var(--color-006), var(--op-025));
	word-wrap: break-word;
	box-decoration-break: clone;
	padding: .1rem .3rem .2rem;
	border-radius: .2rem;
	}

strong {
	padding: 0 0.15em;
	font-family: "font-body-bold";
	background-color: rgba(var(--color-005), var(--op-025));
	}

small,
.small {
	font-size: 0.7778em; /* 14px */
	line-height: 1.9286em; /* 27px */
	}

small {
	margin-top: 1.9286em;
	margin-bottom: 0.0000em;
	}

figure {
	margin:0;
	padding:0;
	}

figcaption {
	padding: 0.25em 0.25em 0 0.25em;
	color: rgba(var(--color-003), var(--op-100));
	/* color: rgba(var(--color-001), var(--op-075)); */
}

aside {
	padding-left: 1em;
	border-left: 0.25em solid rgba(var(--color-004), var(--op-075));
	max-width: 20ch;
	color: rgba(var(--color-004), var(--op-100));
	font-variant: all-small-caps;
}



/* =XFN
------------------------------- */

a[rel~="friend"],
a[rel~="colleague"],
a[rel~="co-worker"],
a[rel~="child"],
a[rel~="spouse"],
a[rel~="acquaintance"] {
	padding-right: 1.25em;
	}

a[rel~="acquaintance"],
a[rel~="acquaintance"][rel~="met"] {
	background: url("/img/xfn.png") no-repeat right center;
	}

a[rel~="friend"] {
	background: url("/img/xfn-friend.png") no-repeat right center;
	}

a[rel~="friend"][rel~="met"],
a[rel~="child"][rel~="met"] {
	background: url("/img/xfn-friend-met.png") no-repeat right center;
	}

a[rel~="colleague"],
a[rel~="co-worker"] {
	background: url("/img/xfn-colleague.png") no-repeat right center;
	}

a[rel~="colleague"][rel~="met"],
a[rel~="co-worker"][rel~="met"] {
	background: url("/img/xfn-colleague-met.png") no-repeat right center;
	}

a[rel~="sweetheart"] {
	background: url("/img/xfn-sweetheart-met.png") no-repeat right center;
	}


/* =HELPERS
------------------------------- */
.expand {
	margin-top: 2.250em !important; /* 1.5 baselines */
	margin-bottom: 2.250em !important; /* 1.5 baselines */
}

.list-plain {
	margin-left: 0;
	list-style: none;
	}

.txt-center {
	text-align: center;
	}

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
	}

/*
.circle {
	shape-outside: circle(66px at 79px 80px);
	clip-path: circle(71px at center center);
	shape-margin: 1em;
	}
*/

.clearfix {
	display: flow-root;
	}

.title {
	margin-top:0;
	margin-bottom: 0.25em;
	font-family: "font-heading";
	color: rgba(var(--color-002), var(--op-100));
	}

.summary {
	margin-top: 0;
	margin-bottom: 2.250em;
	line-height: 1;
	font-size: 1.3333em; /* 24px */
	font-family: "font-heading";
	color: rgba(var(--color-002), var(--op-075));
	}

.blockquote {
	margin: 1.3750em 0;
	padding: 2em;
	font-style: oblique;
	color: rgba(var(--color-002), var(--op-100));
	background-color: rgba(var(--color-001), var(--op-100));
	border-left: 6px solid rgba(var(--color-005), var(--op-100));
	border-radius: .2rem;
	}

.blockquote blockquote {
	margin: 0
	}

.blockquote figcaption {
	margin-top: 1.1250em; /* 0.75 baselines */
	color: rgba(var(--color-002), var(--op-100));
	}

.blockquote figcaption a {
	color: rgba(var(--color-002), var(--op-108))!important;
	}

.pg-header,
.pg-footer {
	padding: 0.5em;
	min-height: 2.5em;
	background-color: rgba(var(--color-001), var(--op-100));
	}

.pg-header {
	border-bottom: 2px inset rgba(var(--color-002), var(--op-025));
	margin-bottom: 1.1250em;
}

.pg-footer {
	border-top: 2px inset rgba(var(--color-002), var(--op-025));
}

.meta {
	margin-top: 4em;
	margin-bottom: 2em;
	border-top: 2px dotted;
	font-size: 1rem;
	}

.columns {
	columns: 13ch auto;
	overflow-wrap: break-word;
	/* column-rule: 1px dotted rgba(var(--color-002), var(--op-050)); */
	/* text-align: center; */
	}

.columns li {
	display: inline-block;
	width: 100%;
	margin-bottom: 1em;
	}

.attributes {
	position:relative;
	margin-bottom: 3em;
	border-top: 6px solid rgba(var(--color-002), var(--op-100));
	border-bottom: 6px solid rgba(var(--color-002), var(--op-100));
	}

.attributes:before {
	content: " ";
	position: absolute;
	z-index: -1;
	top: -15px;
	left: 0;
	right: 0;
	bottom: -15px;
	border-top: 2px solid rgba(var(--color-002), var(--op-100));
	border-bottom: 2px solid rgba(var(--color-002), var(--op-100));
	}

.attributes img,
.list-attributes {
	margin-top: 1em;
	margin-bottom: 1em;
	}

.list-attributes {
	line-height: 1;
	}

.list-attributes dt {
	margin-top: 0;
	color: rgba(var(--color-004), var(--op-100));
	}

.list-attributes dd {
	margin-bottom: 1.1250em; /* 0.75 baselines */
	margin-left: 0;
	padding-left: 0;
	font-weight: 600;
	}

.img-small {
	max-width: 160px;
	max-height: 160px;
	}

.img-med {
		max-width: 320px;
	max-height: 320px;
}

.img-cover {
	border: 1px solid rgba(var(--color-002), var(--op-050));
	box-shadow: 4px 4px 4px rgba(var(--color-004), var(--op-025));
	}

.img-polaroid {
	border: 25px solid rgba(239, 239, 239, 1);
	border-bottom: 80px solid rgba(239, 239, 239, 1);
	box-shadow: 3px 3px 3px rgba(45, 45, 46, 0.25);
	border-radius: 1%;
	}

.nom img {
	margin: 0 auto;
	margin-bottom: 0.750em; /* 0.5 baselines */
	width:300px;
	height:300px;
	}

.img-border {
	border: 0.25em solid rgba(var(--color-001), var(--op-100));
	outline: 1px solid rgba(var(--color-002), var(--op-025));
	box-shadow: 4px 4px 4px rgba(var(--color-004), var(--op-025));
	}

.h-recipe {
	border: 1px solid rgba(var(--color-003), var(--op-018));
	padding: 1rem 2rem;
	background: rgba(var(--color-001), var(--op-100)) url(/img/stain.webp) no-repeat right -50px top -25px;
	background-size: 50%;
	box-shadow: 4px 4px 4px rgba(var(--color-004), var(--op-025));
	}


.tile {
	margin-bottom: 1.1250em; /* 0.75 baselines */
	border: 1px solid rgba(var(--color-003), var(--op-018));
	background-color: rgba(var(--color-002), var(--op-100));
	}


.tile a,
.tile-link {
	text-decoration: none!important;
	}

.tile-head,
.tile-body,
.tile-foot {
	padding: 0.75em;
	}

.tile-head {
	background-color: rgba(var(--color-001), var(--op-100));
		}

.tile time {
	display: block;
	font-weight: 600;
	color: rgba(var(--color-003), var(--op-075));
	}

.tile-heading {
	margin: 0;
	color: rgba(var(--color-005), var(--op-100))!important;
	font-family: "font-body-bold";
	text-decoration: none;
	}

.tile-foot {
	color: rgba(var(--color-002), var(--op-100));
}

.bubble {
	background-color: rgba(var(--color-001), var(--op-100));
	padding: 0.5em 1em;
	border-radius: 100%;
	}

.collapse {
	margin-top:0;
	margin-bottom:0;
	}

.collapse-top {
	margin-top:0;
	}

.collapse-bottom {
	margin-bottom:0;
	}

.border-bottom {
	border-bottom: 1px dotted rgba(var(--color-003), var(--op-100));
	}

.border-top {
	border-top: 1px dotted rgba(var(--color-003), var(--op-100));
	}

.skip-link {
  background-color: rgba(var(--color-002), var(--op-100));
  color: #fff;
  font-weight: 700;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip-link:focus {
  transform: translateY(0%);
}


/* 	For embedded tweets */
.twitter-tweet {
	background-color: rgba(var(--color-001), var(--op-100));
	border: 1px solid rgba(var(--color-002), var(--op-018));
	padding: 1em;
	border-radius: .5rem;
	}

/* For embedded YouTube from https://whiteleydesigns.com/responsive-youtube-embed/ */
.yt-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
	}

.yt-container iframe,
.yt-container object,
.yt-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	}


.badge-pixel {
	image-rendering:pixelated;
	margin: 0 auto;
	background-color: rgba(var(--color-004), var(--op-100));
}


.list-badges {
	columns: 2;
	margin: 10%;
}


.list-badges li {

}

.list-badges li img {
	align: center;
}

.list-badges li  {
padding: 0.25em;

}

/* =MEDIA QUERIES
------------------------------- */
@media only screen and (min-width: 600px) {

	section + section {
		margin-top: 0;
		}

	.list-badges {
		margin-top: 1.1250em; /* 0.75 baselines */
		margin-bottom: : 1.1250em; /* 0.75 baselines */
		justify-content: center;
		align-items: center!important;
	}

	.list-inline {
		display: flex;
		align-items: stretch;
		flex-wrap: wrap;
		}

	.list-inline li {
		margin-right: 1em;
		}


	.blockquote {
		margin-left: 1.3750em;
		margin-right: 1.3750em;
		}

	.tile {
		margin: 0;
		overflow: auto;
		height: 100%;
		}

	.tile-wrapper {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 8px 8px;
		grid-auto-rows: minmax(auto, auto);
		}

	.tile:hover {
		border: 1px solid rgba(var(--color-002), var(--op-100));
		box-shadow: 0px 20px 24px -25px rgba(var(--color-002), var(--op-100));
		-webkit-box-shadow: 0px 20px 24px -25px rgba(var(--color-002), var(--op-100));
		}

	.pop,
	.pop2,
	.pop3 {
		display: block;
		background-color: rgba(var(--color-005), var(--op-018));
		padding: 0 1em;
		border-color: rgba(var(--color-005), var(--op-018));
		border-width: 0.1em;
		border-style: inset;
		border-radius: 0.3em;
		}

	.pop2 {
		background-color: rgba(var(--color-001), var(--op-050));
	}

	.pop3,
	.pop3 a {
		background-color: rgba(var(--color-004), var(--op-100));
		color: rgba(var(--color-001), var(--op-100));
	}

	.attributes {
		display: grid;
		grid-template-areas: "artwork details";
		grid-template-columns: 240px 1fr;
		grid-gap: 1em;
		}

	.nom {
		display: grid;
		grid-template-columns: 340px 1fr;
		grid-gap: 1em;
		}

	.img-polaroid {
		transform: rotate(1deg);
		width: 70%;
		margin-left:auto;
		margin-right:auto;
		}

	.h-recipe {
	background-size: auto;
	}

	.title {
	font-size: 2.5556em; /* 64px */
	line-height: 1.0313em; /* 66px */
	}

/* moved to large screens as its causing text size to shrink on mobile	 */
	a[rel~="external"] {
	display: inline-block;
	padding-left: 1em;
	background: url(/img/external-link.svg) no-repeat;
	background-size: 12px;
	background-position: left 8px;
	}

/* moved to large screens as its causing text size to shrink on mobile	 */

	.p-category {
	display: inline-block;
/*
	background-image: url('../img/ico-tag.svg');
	background-size: contain;
	padding-left: 30px;
	background-position: left center;
	background-repeat: no-repeat;
*/
	}

h1 .p-category {
/* 	padding-left: 74px; */
	}


}


@media screen and (min-width: 880px) {

	main.homepage {
		display: grid;
		max-width: 1100px;
		grid-template-columns: repeat(6, 15.8% [col-start]);
		grid-template-rows: repeat(4, auto [row-start]);
		grid-gap: 10px 1%;
		grid-template-areas:
		"header header header header . ."
		"main main main main third third"
		"second second sidebar sidebar sidebar sidebar"
		"footer footer footer footer footer footer";
		justify-content: center;
		background: url(/img/stain.webp) no-repeat right 0 top 0;
		}

.area-title {
	grid-area: header;
}

.module-posts {
	grid-area: main;
}

.module-topics {
	grid-area: third;
	padding-left: 1em;
	margin-left: 0.5em;
	border-left: 1px dashed rgba(var(--color-002), var(--op-100));
}

.module-bookmarks {
	grid-area: second;
	margin-top: 1em;
}

.module-blogroll {
	grid-area: sidebar;
	margin-top: 1em;
}

.module-about {
	grid-area: footer;
}

	.left {
	float: left;
	margin-left: 0;
	margin-right: 1em;
	}

.right {
	float: right;
	margin-right:0;
	margin-left:1em;
	}


.img-left {
	margin: 0 1.1250em 1.1250em -6em;
}

.img-right {
	margin: 0 -6em 1.1250em 1.1250em;
}




}