/* Defaults */
:root {
  /* --font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; */
  --font-family-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --font-family-serif: Source Serif Pro, Apple Garamond, Georgia, Iowan Old Style, Baskerville, Times New Roman, Droid Serif, Times, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
  --lightgray: #c0c0c0;
  --grid--narrow: 1fr;
  --grid--base: calc(50vw - 37.25rem) [content-bleed-start] 1fr
    [content-gutter-start] 100px [content-start] repeat(6, [col-start] 1fr)
    [content-end] 100px [content-gutter-end] 1fr [content-bleed-end]
    calc(50vw - 37.25rem);
  --grid--wide: calc(50vw - 31.25rem) [content-bleed-start] 1fr
    [content-gutter-start] 100px [content-start] repeat(6, [col-start] 1fr)
    [content-end] 100px [content-gutter-end] 1fr [content-bleed-end]
    calc(50vw - 31.25rem);
}

/* Theme colors */
:root {
  --color-gray-20: #e0e0e0;
  --color-gray-50: #C0C0C0;
  --color-gray-90: #333;

  --background-color: #fffff8;

  --text-color: var(--color-gray-90);
  --text-color-link: #082840;
  --text-color-link-visited: #17050F;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-gray-20: #e0e0e0;
    --color-gray-50: #C0C0C0;
    --color-gray-90: #dad8d8;

    /* --text-color is assigned to --color-gray-_ above */
    --text-color-link: #1493fb;
    --text-color-link-visited: #a6a6f8;

    --background-color: #15202b;
  }
}


/* Global stylesheet */
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: var(--font-family-serif);
  color: var(--text-color);
  background-color: var(--background-color);
}

p:last-child {
  margin-bottom: 0;
}
p,
.tmpl-post li,
img {
  max-width: 100%;
  max-height: 70vh;
}
p,
.tmpl-post li {
  line-height: 1.45;
}

a[href] {
  color: var(--text-color-link);
}
a[href]:visited {
  color: var(--text-color-link-visited);
}

main {
  padding: 1rem;
}
main :first-child {
  margin-top: 0;
}
header {
  border-bottom: 1px dashed var(--color-gray-20);
  font-family: var(--font-family-sans);
  font-size: 1em;
  font-weight: 400;
  grid-column: 1;
  line-height: 1;
}
header:after {
  content: "";
  display: table;
  clear: both;
}

table {
  margin: 1em 0;
}
table td,
table th {
  padding-right: 1em;
}

hr {
  border: 0;
  height: 2px;
  background: var(--lightgray);
  grid-column: 1;
  width: 100%;
  margin: 3em 0 2em 0;
}

@media (min-width: 45rem) {
  hr {
    grid-column: content-start / content-end;
  }
}

pre,
code {
  font-family: var(--font-family-monospace);
  line-height: 1.5;
}
pre {
  font-size: 14px;
  line-height: 1.375;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  padding: 1em;
  margin: .5em 0;
  background-color: #f6f6f6;
}
code {
  word-break: break-all;
}

/* Lists */
ul,
ol {
  padding: 0 0 0 1em;
  list-style-position: outside;
}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    ul,
    ol {
      padding: 0 0 0 1.4em;
    }
  }
}

@media (min-width: 45em) {
  ul,
  ol {
    padding: 0;
    list-style-position: outside;
  }

  ul li ul,
  ol li ol {
    padding: 0 0 0 1em;
  }
}

.tmpl-post li {
  max-width: 37.5em; /* 600px /16 */
}

.tmpl-post li {
  line-height: 1.45;
}

/* Grid */
.container {
  display: grid;
  grid-template-columns: var(--grid--narrow);
  margin: 2em 1em 0 1em;
}

@media (min-width: 45rem) {
  .container {
    display: grid;
    grid-template-columns: var(--grid--base);
    margin: 2em 0;
  }
}

@media (min-width: 60rem) {
  .container {
    display: grid;
    grid-template-columns: var(--grid--wide);
    margin: 2em 0;
    font-size: 1.125rem;
  }
}

/* Header */
.home {
  padding: 0 1rem;
  /* float: left; */
  margin: 1rem 0; /* 16px /16 */
  font-size: 1.5em; /* 16px /16 */
}
.home :link:not(:hover) {
  text-decoration: none;
}

/* Nav */
.nav {
  padding: 0;
  list-style: none;
  /* float: left; */
  margin: 0 0 0 1em;
}
.nav-item {
  display: inline-block;
  margin: 0 1em 1em 0;
}
.nav-item a[href]:not(:hover) {
  text-decoration: none;
}
.nav-item-active {
  font-weight: 700;
  text-decoration: underline;
}

/* Homepage */

.tmpl-home h1 {
  font-family: var(--font-family-sans);
  font-size: 3em;
  font-weight: 400;
  grid-column: 1;
  line-height: 1;
}

@media (min-width: 45rem) {
  .tmpl-home h1 {
    grid-column: content-start / content-end;
  }
}

.tmpl-home h2 {
  font-family: var(--font-family-sans);
  font-weight: 400;
  grid-column: 1;
}

@media (min-width: 45rem) {
  .tmpl-home h2 {
    grid-column: content-start / content-end;
  }
}

.tmpl-home .container > p {
  /* grid-column: content-start / content-end; */
  grid-column: 1;
  hanging-punctuation: first;
  margin-top: 0;
}

.tmpl-home .entry__terms-item {
  margin-bottom: .5em;
}

.tmpl-home .entry__terms-item-bullet {
  display: none;
}

@media (min-width: 45em) {
  .tmpl-home .container > p {
    grid-column: content-start / content-end;
  }

  .tmpl-home .container > ul,
  .tmpl-home .container > ol {
    grid-column: content-start / content-end;
  }
}

.postlist--featured {
  grid-column: 1;
  margin: 0 0 30px 0;
  padding-bottom: 30px;
  border-bottom: 3px solid var(--lightgray);
}

.postlist--featured .c-card__link {
  display: flex;
  flex-direction: column-reverse;
  text-decoration: none;
  color: black;
}

.postlist--featured .c-card__content {
  flex: 1;
}

.postlist--featured .c-card__image {
  margin: 0 0 20px 0;
  flex: 1;
}

.postlist--featured .c-card__title {
  font-size: 1.5em;
  margin: 0;
  text-transform: lowercase;
}

.postlist--featured .c-card__excerpt {
  display:block;
}



@media (min-width: 45rem) {
  .tmpl-home .postlist--featured {
    grid-column: content-gutter / content-gutter-end;
    margin: 2em 0 5em 0;
    border-bottom: none;
  }

  .postlist--featured .c-card__link {
    flex-direction: row-reverse;
  }

  .postlist--featured .c-card__image {
    flex: 1 auto;
    margin-right: 25px;
  }

  .postlist--featured .c-card__content {
    flex: 1 2 auto;
  }

  .postlist--featured .c-card__title {
    font-size: 2em;
    font-weight: 600;
    margin: 0;
    text-transform: lowercase;
  }
}

@media (min-width: 60rem) {
  .tmpl-home .postlist--featured {
    grid-column: content-bleed / content-bleed-end;
  }

  .postlist--featured .c-card__content {
    flex: 1 3 auto;
  }
}


/* Posts list */
.postlist {
  list-style: none;
  padding: 0;
  grid-column: 1;
}

@media (min-width: 45rem) {
  .postlist {
    grid-column: content-start / content-end;
  }
}

.postlist-date {
  font-family: var(--font-family-sans);
  font-size: .8em;
}

.c-card {
  list-style: none;
  max-width: 50rem;
  padding-bottom: 2.4rem;
}

.c-card__title {
  text-transform: lowercase;
}

.c-card img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.c-card__link {
  display: flex;
  flex-direction: row-reverse;
  text-decoration: none;
  color: black;
}

.c-card__image {
  margin-right: 1rem;
  flex: 1;
}

.c-card__content {
  flex: 2;
}

.c-card__excerpt {
  display:none;
}

@media (min-width: 45rem) {
  .c-card__content {
    flex: 2;
  }

  .c-card__image {
    margin-right: 1rem;
    flex: 1;
  }

  .c-card__content {
    flex: 2;
  }
}


/* Post */

.post--headline {
  font-family: var(--font-family-sans);
  font-size: 3em;
  font-weight: 600;
  grid-column: 1;
  line-height: 1;
  margin-bottom: 2rem;
  text-transform: lowercase;
}

@media (min-width: 45rem) {
  .post--headline {
    grid-column: content-start / content-end;
  }
}

.tmpl-post h2,
.tmpl-post h3,
.tmpl-post h4 {
  font-family: var(--font-family-sans);
  grid-column: 1;
}

@media (min-width: 45rem) {
  .tmpl-post h2,
  .tmpl-post h3,
  .tmpl-post h4 {
    grid-column: content-start / content-end;
  }
}

.tmpl-post h2 {
  font-size: 2em;
}

.tmpl-post h3 {
  font-size: 1.5em;
}

.tmpl-post h4 {
  font-size: 1em;
}

.tmpl-post .container .recipe--skiplink {
  font-family: var(--font-family-sans);
  font-size: 1em;
  grid-column: 1;
  line-height: 1;
  margin-bottom: 2em;
}

@media (min-width: 45rem) {
  .tmpl-post .container .recipe--skiplink {
    grid-column: content-start / content-end;
  }
}

html {
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.tmpl-post .container .recipe--headline {
  font-family: var(--font-family-sans);
  font-size: 2em;
  grid-column: 1;
  line-height: 1;
}

@media (min-width: 45rem) {
  .tmpl-post .container .recipe--headline {
    grid-column: content-start / content-end;
  }
}

.tmpl-post .container .taxonomy--headline {
  font-family: var(--font-family-sans);
  font-size: 1.25em;
  grid-column: 1;
  line-height: 1;
  margin-bottom: .5em;
}

@media (min-width: 45rem) {
  .tmpl-post .container .taxonomy--headline {
    grid-column: content-start / content-end;
  }
}

.post--meta {
  grid-column: 1;
  margin-bottom: 2em;
  font-family: var(--font-family-sans);
  font-size: 0.9em;
}

@media (min-width: 45em) {
  .post--meta {
    grid-column: content-start / content-end;
    margin-bottom: 3em;
  }
}

.tmpl-post .container > p {
  /* grid-column: content-start / content-end; */
  grid-column: 1;
  hanging-punctuation: first;
  margin-top: 0;
}

.recipe--sep,
.taxonomy--sep {
  margin: 1em 0 1em 0;
}

.tmpl-post .container .recipe {
  /* grid-column: content-start / content-end; */
  grid-column: 1;
  hanging-punctuation: first;
  margin-top: 0;
}

.recipe--metadata {
  font-style: italic;
}

.recipe--description {
  font-style: italic;
}

.recipe--ingredients,
.recipe--directions {
  margin-top: 2em;
}

.recipe--ingredients ul {
  list-style: none;
}

.recipe--ingredients li,
.recipe--directions li {
  margin-bottom: .4em;
}

@media (min-width: 45em) {
  .tmpl-post .container > p {
    grid-column: content-start / content-end;
  }

  .tmpl-post .container > ul,
  .tmpl-post .container > ol {
    grid-column: content-start / content-end;
  }

  .tmpl-post .container .recipe {
    grid-column: content-start / content-end;
  }
}

.tmpl-post figure {
  /* margin: 0 0 1em 0; */
  grid-column: 1;
  margin: 1em 0 2em 0;
}

@media (min-width: 45em) {
  .tmpl-post figure {
    grid-column: content-start / content-end;
  }
}

.tmpl-post .cinemascope {
  grid-column: 1;
  justify-self: center;
}

@media (min-width: 45rem) {
  .tmpl-post .cinemascope {
    grid-column: content-bleed-start / content-bleed-end;
    /* justify-self: center; */
  }
  .tmpl-post .cinemascope figcaption {
    margin-left: 1em;
  }
}

@media (min-width: 82rem) {
  .tmpl-post .cinemascope figcaption {
    margin-left: 0;
  }
}

.tmpl-post .normal {
  grid-column: content-start / content-end;
}

blockquote {
  border-left: 4px solid #e2e2e2;
  grid-column: 1;
  margin: 1em 0;
  padding-left: 1em;
}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    blockquote {
      padding-left: 1.4em;
    }
  }
}

@media (min-width: 45em) {
  blockquote {
    grid-column: content-start / content-end;
    margin: 2em 0 2em -1.5em;
    padding-left: 1.5em;
  }
}

.tmpl-post .container > blockquote > p:first-child {
  margin-top: 0;
}

@media (min-width: 45em) {
  .post--headline {
    grid-column: content-start / content-end;
  }
}

.tmpl-post .recipe h2, h3, h4, h5 {
  font-family: var(--font-family-sans);
}

.tmpl-post .container .taxonomy--wrapper {
  grid-column: 1;
  margin-bottom: 2em;
}

@media (min-width: 45rem) {
  .tmpl-post .container .taxonomy--wrapper {
    grid-column: content-start / content-end;
  }
}

.entry__terms {
  font-family: var(--font-family-sans);
}

.tmpl-post .entry__terms {
  grid-column: content-start / content-end;
  margin: 0;
  padding: 0;
}

.tmpl-post .entry__terms-item {
  display: inline;
  line-height: 2;
  margin: 0 .5em 0 0;
}

.post--next-previous-link {
  grid-column: 1;
  font-family: var(--font-family-sans);
}

@media (min-width: 45em) {
  .post--next-previous-link {
    grid-column: content-start / content-end;
    margin-top: 4em;
  }
}

.pagination--inner {
  grid-column: 1;
  border-top: 1px dashed var(--lightgray);
  margin-top: 2em;
  padding-top: 1em;
  font-size: 1rem;
  display: flex;
}

.pagination--next-only {
  justify-content: flex-end;
}

.pagination--inner .left,
.pagination--inner .right {
  margin:0;
  flex-grow: 1;
}

.pagination--inner .right {
  text-align: right;
}


/* Tags */
.post-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 0.75em; /* 12px /16 */
  padding: 0.08333333333333em 0.3333333333333em; /* 1px 4px /12 */
  margin-left: 0.6666666666667em; /* 8px /12 */
  margin-top: 0.5em; /* 6px /12 */
  margin-bottom: 0.5em; /* 6px /12 */
  color: var(--color-gray-90);
  border: 1px solid var(--color-gray-50);
  border-radius: 0.25em; /* 3px /12 */
  text-decoration: none;
  line-height: 1.8;
}
a[href].post-tag,
a[href].post-tag:visited {
  color: inherit;
}
a[href].post-tag:hover,
a[href].post-tag:focus {
  background-color: var(--color-gray-20);
}
.postlist-item > .post-tag {
  align-self: center;
}

/* Search */

.container .search__field {
  font-family: var(--font-family-sans);
  margin: 1rem 0 2rem 0;
  grid-column: 1;
  display: flex;
  align-items: center;
}

@media (min-width: 45rem) {
  .container .search__field {
    grid-column: content-start / content-end;
  }
}

.search__field-label {
  font-size: 1.5em;
  font-weight: 400;
  grid-column: 1;
  line-height: 0;
  margin: 0 .5em 0 0;
}

#searchField {
  border: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #f2f2f2;
  padding: .25em;
  border-radius: 10px;
  flex: 1 0 auto;
  font-size: 1em;
}

@media (min-width: 45rem) {
  #searchField {
    font-size: 2em;
  }
}

.search__results-item {
  margin: 0 0 1rem 0;
}

#search-no-results {
  grid-column: 1;
}

.search__results-item-title {
  text-transform: lowercase;
}

@media (min-width: 45rem) {
  #search__no-results {
    grid-column: content-start / content-end;
  }
}

/* Infobox */
:root {
  --color-infobox: #ffc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-infobox: #082840;
  }
}

.infobox {
  background-color: var(--color-infobox);
  color: var(--color-gray-90);
  padding: 1em 0.625em; /* 16px 10px /16 */
}
.infobox ol:only-child {
  margin: 0;
}

/* Direct Links / Markdown Headers */
.direct-link {
  font-family: sans-serif;
  text-decoration: none;
  font-style: normal;
  margin-left: .1em;
}
a[href].direct-link,
a[href].direct-link:visited {
  color: transparent;
}
a[href].direct-link:focus,
a[href].direct-link:focus:visited,
:hover > a[href].direct-link,
:hover > a[href].direct-link:visited {
  color: #aaa;
}