/*

jekyll supports sass out of the box.
Use only when plain CSS do not suffice.

*/ $breakpoint-small: 640px; $breakpoint-medium: 800px; $breakpoint-large: 1024px; $breakpoint-extralarge: 1600px;

main {

/* stick footer to the footer by pushing from the block above it -- main > footer */
flex: 1;

}

header.header, footer.footer {

padding: var(--space-base) 0;
font-family: var(--font-family-sans);

}

header.header {

text-align: center;
margin-bottom: var(--space-base);
border-bottom: var(--border-width) solid var(--border-color);

}

/* title/logo */ header.header h1 {

font-size: calc(var(--font-size) * var(--typescale-heading) * var(--typescale-heading) * var(--typescale-heading));
font-weight: 700;
margin-bottom: 0;

}

header.header h1 a, header.header h1 a:visited {

color: var(--text-color);
text-decoration: none;

}

header.header h1 a:hover, header.header h1 a:active {

color: var(--text-color-alt);
text-decoration: none;
border-bottom: 2px solid var(--text-color);

}

header.header h2 {

padding: 0;
margin: var(--space-half) 0;

font-size: calc(var(--font-size) * var(--typescale-heading));
font-weight: 400;

}

header.header :is(h1, h2, h3, h4, h5, h6) {

font-family: var(--font-family-sans);

}

footer.footer {

margin-top: var(--space-double);
border-top: var(--border-width) solid var(--border-color);
font-size: var(--font-size-small);

}

.footer__credit {

display: flex;
justify-content: space-between;

}

/* nav links (header/footer) */ nav {

margin: var(--space-base) 0 0;
padding: 0;

font-family: var(--font-family-sans);
font-size: var(--font-size-smaller);
text-transform: uppercase;

}

nav a {

padding: 0;
margin: 0 var(--space-half) 0 0;
text-decoration: none;

}

nav a:hover, nav a:active {

text-decoration: none;
border-bottom: 2px solid var(--text-color-link-hover);

}

/* larger screens */ @media (min-width: $breakpoint-large) {

blockquote,
.content-medium {
  margin-left: calc(-1 * var(--space-double));
  margin-right: calc(-1 * var(--space-double));
}

.content-large,
img.large,
img.large + em {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  width: 100vw;
  max-width: var(--image-width-max);
  transform: translateX(calc(50vw - 50%));
}

img.medium,
img.medium + em {
  margin-left: calc(-1 * var(--space-double));
  width: calc(var(--body-width) + calc(3 * var(--space-base)));
  max-width: 100vw;
}

img.small {
  max-width: 50%;
  height: auto;
}

img.small.left,
img.small.right {
  margin-top: var(--space-half);
  margin-bottom: var(--space-base);
}

img.small.left  { float: left; margin-right: var(--space-base); margin-left: calc(-1 * var(--space-double)); }
img.small.right { float: right; margin-left: var(--space-half); margin-right: calc(-1 * var(--space-double)); }

.gallery {
  column-count: 3;
  padding: var(--space-half);
}

}

/* extra-large screens */ @media (min-width: $breakpoint-extralarge) {

.gallery {
  column-count: 4;
  padding: var(--space-half);
}

}

.gallery {

line-height: 0;
column-gap: var(--space-half);

}

.gallery img {

width: 100% !important;
height: auto !important;
margin-bottom: var(--space-half);

}

.gallery a:hover img, .gallery a:active img {

opacity: var(--opacity-low);

}

/* images */ /* need fix for images with hyperlinks */ img + em, a + em.caption {

/* similar styling to figcaption */
display: block;
opacity: var(--opacity-low);
margin: calc(-1 * var(--space-half)) 0 0;
padding: var(--space-half);

font-family: var(--font-family-sans);
font-size: var(--font-size-smaller);
font-style: normal;
text-align: center;

background: var(--background-color-alt);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border-bottom: 1px solid var(--border-color);

}

.content-full, img.full, img.full + em {

position: relative;
left: 50%;
right: 50%;

margin-left: -50vw;
margin-right: -50vw;

width: 100vw;
max-width: 100vw;

border-radius: 0;

}

/* pages */ .home_posts {}

.home_posts__title {

margin: var(--space-double) 0 var(--space-base);

color: var(--text-color-alt);
font-weight: 400;
font-size: calc(var(--font-size) * var(--typescale-heading));

}

.home_posts__meta {

padding: 0 var(--space-half);
font-size: var(--font-size-smaller);
text-transform: lowercase;

}

/*

articles/posts/pages lists
list of items with a heading and lists
DIV.items-list [h1/h2/h3 > ul/ol > li]

————————————— */ .items-list :is(h1, h2, h3, h4, h5, h6) {

display: inline-block;
margin: var(--space-base) var(--space-double) 0;
padding: var(--space-quarter) var(--space-base);

color: var(--text-color-alt);
background: var(--background-color-alt);
border: 1px solid var(--border-color);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
border-bottom: 0 none;

font-size: calc(var(--font-size) * var(--typescale-heading));

}

.items-list :is(ul, ol) {

margin: 0 0 var(--space-base) 0;
padding: 0;

background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);

}

/*.items-list:is(ul, ol) li {}*/

.items-list :is(ul, ol) li {

list-style: none;
padding: calc(1.5 * var(--space-quarter)) var(--space-double);
border-bottom: 1px solid var(--border-color);

}

.items-list :is(ul, ol) li:first-child {

border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);

}

.items-list :is(ul, ol) li:last-child {

border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border: 0 none;

}

.items-list :is(ul, ol) li:nth-child(even) {

background: var(--background-color-alt);

}

.items-list :is(ul, ol) time {

margin: 0;
padding: 0 var(--space-quarter);

white-space: nowrap;
font-family: var(--font-family-monospace);
font-size: var(--font-size-smallest);
color: var(--text-color-alt);

}

/* posts/articles ————————————— */

.post-meta, .post-nav {

display: flex;
justify-content: space-between;

margin: 0;
padding: var(--space-half) var(--space-base);

background: var(--background-color-alt);
border-radius: var(--border-radius);

font-family: var(--font-family-sans);
font-size: var(--font-size-smallest);
text-transform: uppercase;

opacity: var(--opacity-low);

}

.post-nav a {

padding: var(--space-half);
text-decoration: none;

}

/* responsive video embeds */ .video-wrap {

position: relative;
margin-bottom: 1em;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;

border-radius: var(--border-radius);

} .video-wrap :is(iframe, object, embed) {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

border-radius: var(--border-radius);

}

.content-full .video-wrap, .content-full .video-wrap :is(iframe, object, embed) {

border-radius: 0;

}

/* highlighter */ figure.highlight {}

figure.highlight pre, figure.highlight code {

background: none;

}

.highlight {

border-radius: var(--border-radius);

}

.highlight * {

color: initial;

}

/* footnotes are generated by Kramdown powered Markdown */ .footnotes {

margin-top: var(--space-double);
padding: var(--space-base) var(--space-half);
border-top: var(--border-width) solid var(--border-color);
font-size: var(--font-size-small);

}

.footnotes .reversefootnote {

text-decoration: none;

}

/* UTILITIES ————————————— */

/* clamp content to one line */ .one-liner {

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

}

.visually-hidden {

display: block;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(1px);
white-space: nowrap;
position: absolute;

}