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

html,
body {
	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-001), var(--op-100));
	color: rgba(var(--color-003), var(--op-100));
	}


/* =BASE
------------------------------- */
img {
	max-width: 100%;
	/* added height to overcome the size in HTML skewing img */
	height: auto;
	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 {
	min-height: 100vh;
	font: 18px 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 {
	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));
	}

.bold {
	font-family: "font-body-bold";
	color: rgba(var(--color-002), var(--op-075));
}

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
------------------------------- */
.entry {
	padding: 1em;
	border: 1px solid rgba(var(--color-003), var(--op-075));
	background-color: rgba(var(--color-001), var(--op-100));

}

.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;
	line-height: 1;
	font-size: 1.3333em; /* 24px */
	font-family: "font-heading";
	color: rgba(var(--color-002), var(--op-075));
	}

.e-content {
	margin-top: 2.250em;
}

.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) {


}


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

	main.homepage {
		display: grid;

}