@font-face {
  font-family: "Aileron";
  font-display: swap;
  src:
    local("Aileron Bold"),
    local("Aileron-Bold"),
    url("/fonts/aileron.bold.otf");
  font-weight: 700;
}
@font-face {
  font-family: "Aileron";
  font-display: swap;
  src:
    local("Aileron Medium"),
    local("Aileron-Medium"),
    url("/fonts/aileron.semibold.otf");
  font-weight: 600 500;
}
@font-face {
  font-family: "Aileron";
  font-display: swap;
  src:
    local("Aileron"),
    local("Aileron-Regular"),
    url("/fonts/aileron.regular.otf");
}
@font-face {
  font-family: "Aileron";
  font-display: swap;
  src:
    local("Aileron Light"),
    local("Aileron-Light"),
    url("/fonts/aileron.light.otf");
  font-weight: 300;
}
@font-face {
  font-family: "Cardo";
  font-display: swap;
  src:
    local("Cardo Regular"),
    local("Cardo-Regular"),
    url("/fonts/Cardo-Regular.ttf");
}
@font-face {
  font-family: "Cardo";
  font-display: fallback;
  src:
    local("Cardo Italic"),
    local("Cardo-Italic"),
    url("/fonts/Cardo-Italic.ttf");
  font-style: italic;
}
@font-face {
  font-family: "Cardo";
  font-display: swap;
  src:
    local("Cardo Bold"),
    local("Cardo-Bold"),
    url("/fonts/Cardo-Bold.ttf");
  font-weight: bold;
}

:root {
  --area-border-color: #cecece;
  --display-face: Aileron, "Avenir Next", Arial, "Fira Sans Condensed", sans-serif;
  --title-color: #c9edff;
  --subhed-color: #c7c5ff;
  --artist-cloud-color: #413e9d;
  --meta-text-color: #222;
  --showgirl-color: #e81ca2;
}

body {
  font-size: 1rem;
  font-family: Cardo, Constantia, Caladea, "Nimbus Roman", Palatino, Georgia, serif;
  background: linear-gradient( to right ,
    rgba(227, 3, 3, 0.15) 0%,
    rgba(255, 139, 0, 0.15) 17%,
    rgba(254, 237, 1, 0.15) 33%,
    rgba(0, 128, 38, 0.15) 50%,
    rgba(0, 77, 255, 0.15) 67%,
    rgba(117, 6, 134, 0.15) 100%
  );
}
h1, h2, .main__title {
  font-family: var(--display-face);
}

.header {
  background: none;
}
.header__container {
  font-family: var(--display-face);
  background: right top url(/scaff/banner.jpg);
  background-color: #030200;
  background-size: cover;
}
.header-langswitch {
  position: absolute;
  top: 0;
  right: 4px;
  width: auto;
  line-height: 1.3;
}
.header-langswitch__link-flag {
  width: 16px;
  height: 18px;
  margin-right: 2px;
  object-fit: contain;
  opacity: 0.8;
}
.header-langswitch li {
  list-style: none;
  width: 48px;
  text-align: right;
}
.header-langswitch__link-text {
  display: inline-block;
  font-size: 0.8rem;
  width: 20px;
  text-align: center;
  color: white;
}

.logo__text {
  text-transform: lowercase; /* overrides theme rule at this level */
  letter-spacing: -0.4px;
}
.logo__img {
  border-radius: 18px;
}
.logo__title {
  font-size: 2rem;
  color: var(--title-color);
  text-shadow: 2px 3px 5px #390839;
}
.logo__tagline {
  font-weight: 600;
  color: var(--subhed-color);
  text-shadow: 1px 1px 2px purple;
}

.wrapper { background: url("/scaff/feather2.jpg") #fdf8ff; }

.main__title, .list__title, .post__title {
  font-weight: 600;
  text-transform: lowercase;
}
.list__title {
  font-size: 1.4rem;
}
.list__item {
  border-color: var(--area-border-color);
}
.list__thumbnail img {
  max-height: 300px;
}
.meta, .meta a {
  text-transform: lowercase;
  color: var(--meta-text-color);
}

pre, code { font-size: 90%; }
code { border-color: var(--area-border-color); }

.widget {
  font-size: 0.9rem;
  font-family: var(--display-face);
  text-transform: lowercase;
}
.widget__list {
  font-weight: 300;
}
.widget__title {
  margin-bottom: 0.8rem;
  text-transform: lowercase; /* overrides a theme rule at this level */
  letter-spacing: -0.4px;
}
.widget-search__form {
  padding: 0;
  background: none;
}
.widget__item {
  border-color: var(--area-border-color);
}
.widget-categories .widget__item:first-child { padding-top: 5px; /* from theme */ }
.widget-categories ul { columns: 2; margin-top: -0.4rem; }

.widget-colophon { font-size: 0.75rem; font-weight: 300; }
.widget-colophon p { margin-bottom: 0.2em; }
.widget-colophon a.kevalink {
  display: inline-block;
  width: 15px;
  height: 16px;
  margin: -2px 2px -3px 2px;
}
.widget-colophon a.kevalink.insta { background: url("/scaff/insta.png");}
.widget-colophon a.kevalink.fb { background: url("/scaff/fb.png"); }
#footer-kickass {
  display: block;
  height: 90px;
  margin: -5px 0 24px 6px;
  transform: rotate(-9deg);
  background: no-repeat url("/scaff/girlskickass.gif");
}

#artist-cloud {
  margin: -5px 0 0 -5px;
  width: 290px;
  height: 525px;
  font-weight: 300;
}
#artist-cloud text { text-anchor: middle; font-family: var(--display-face); fill: var(--artist-cloud-color); }
#artist-cloud a > text { font-weight: 600; fill: var(--showgirl-color); }
#artist-cloud a:hover > text {
  text-shadow: yellow 0 -1px 1px, rgba(240, 240, 240, 0.9) 2px 1px 10px;
  fill: #f47cc3;
}

.post__content h2, .post__content h3 {
  clear: both;
}

.related-post-box {
  margin-top: 2rem;
}
.related-post-box header {
  font-family: var(--display-face);
  font-weight: 500;
  text-transform: lowercase;
}
.related-post-box figure {
  display: inline-block;
  max-width: 48px;
  max-height: 48px;
  float: none;
  margin: 4px;
  vertical-align: middle;
  overflow: hidden;
}
.related-post-box ul {
  margin-left: 12px;
}
.related-post-box li.no-thumb {
  margin: 8px 0;
}
.related-post-box li a {
  text-transform: lowercase;
}
.related-post-date {
  margin-left: 3px;
}
.extra-related { font-weight: 300; }

blockquote { color: var(--artist-cloud-color); }

figure.float-left   { float: left;  clear: left;  margin-right: 2em; }
figure.float-right  { float: right; clear: right; margin-left: 2em;  }
figure.center { text-align: center; }
figure.inline { display: inline-block; }

.tags__badge {
  height: 31px;
  border-radius: 3px;
}
.widget-taglist__link {
  display: inline-flex;
  margin: 0 4px 11px 0;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  align-items: center;
  opacity: 0.9;
}
.widget-taglist__link.med { font-weight: 400; opacity: 0.95; }
.widget-taglist__link.high { font-weight: 500; letter-spacing: 0.25px; opacity: 1; }

.widget-taglist__link, .tags__link {
  font-family: var(--display-face);
  text-transform: lowercase;
  font-weight: 300;
  background: #61217b;
  border-radius: 3px;
}
.pager {
  border-color: var(--area-border-color);
}
.pagination__item {
  font-family: var(--display-face);
  color: var(--meta-text-color);
  background: var(--area-border-color);
}
.pagination__item:hover, .pagination__item--current {
  color: var(--title-color);
  background: var(--artist-cloud-color);
}
.pager__title, .footer__link {
  text-transform: lowercase;
}

@media screen and (min-width: 768px) {
  .logo__text {
    margin-left: 3rem !important; /* overrides .logo-mixed .logo__item */
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --area-border-color: #39376f;
    --artist-cloud-color: #e8c4c4;
    --dark-copy-color: #fff9fd;
    --highlight-color: #a6a3f7;
    --showgirl-color: #92ddee;
  }
  body {
    font-family: var(--display-face);
    background: linear-gradient( to right , #21082c 0%, #4c215e 70%, #411b51 100%);
  }
  h1, h2, h3, h4, h5, h6 { color: #f4f3e0; }

  .divider { background: var(--highlight-color); }

  a       { color: #f4f3e0; }
  a:hover { color: var(--highlight-color); }
  .wrapper {
    color: var(--dark-copy-color);
    background: url("/scaff/purpleback2.jpg") #1a0a25;
  }
  .list__item           { color: var(--title-color); }
  .list__item .content  { color: var(--dark-copy-color); }
  code { color: var(--title-color); background: var(--area-border-color); }
  blockquote { border-color: var(--highlight-color); color: var(--subhed-color); }

  .meta, .meta a  { color: var(--subhed-color); }
  .meta a:hover   { color: var(--dark-copy-color); }

  .post__meta     { border-color: var(--highlight-color); }

  .content a        { font-weight: 500; color: var(--title-color); }
  .content a:hover  { color: var(--highlight-color); }

  .pagination__item { color: var(--highlight-color); }
  .pagination__item:hover, .pagination__item--current { background: #413e9d; }
  .widget__title  { border-color: var(--highlight-color); }
  .widget__item   { color: var(--title-color); }
  .widget-search__field {
    color: var(--subhed-color);
    border-color: #786d9f;
    background: var(--area-border-color);
  }
  .widget-search__field:focus { color: #f4f3e0; }
}