/*!
Theme Name: teak nivel
Theme URI: https://wrkshp.fi/
Author: wrkshp.fi
Author URI: https://underscores.me/
Description: A WordPress Theme using CSS Grid
Version: 0.1.0
Text Domain: nivel
Tags: css-grid

Teak nivel is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@import "normalize.css";

:root {
  /* COLORS: */

  /* UNIARTS: */
  --clr_uni: #3bb0ba;
  --clr_uni_alt: #ffd708;
  --clr_uni2: #095d6a;

  --clr_black: #000;
  --clr_white: #fff;

  --clr_hue: 200;
  --clr_sat: 30%;
  --clr_lum: 30%;

  --clr_johdanto: #f55600;
  --clr_flip: #98245a;

  --clr_fill: hsl(var(--clr_hue) var(--clr_sat) var(--clr_lum));
  /* Body: */
  --clr_bg: #f7f8f6;
  --clr_bg_sec: #e4e6e3;
  --clr_alt_bg: #fcd9d5;

  /* Text */
  --clr_text: #202020;
  --clr_nega: #f7f8f6;
  --clr_post_title: var(--clr_text);
  --clr_post_author: #df0055;
  --clr_em: #534694;
  --clr_search_button: #FFC500;

  /* Links: */
  /* Links: */
  --clr_link: hsla(191, 35%, 37%, 1);
  --clr_link_em: hsla(191, 48%, 37%, 1);
  --clr_link_dark: hsla(191, 53%, 27%, 1);
  --clr_link_active: hsla(13, 74%, 45%, 1);
  --clr_link_hover: hsla(43, 63%, 35%, 1);
  --clr_link_hover_em: hsla(43, 59%, 54%, 1);
  --clr_link_visited: var(--clr_link);
  --clr_post_nav: var(--clr_link_hover);
  --clr_grad_start: hsla(191, 72%, 28%, 1);
  --clr_grad_end: hsla(191, 72%, 28%, 0);

  /* Buttons: */
  --clr_btn_bg: #e6e6e6;
  /* --clr_btn_bg_hover:           ; */
  --clr_btn_text: rgba(0, 0, 0, 0.8);
  /* --clr_btn_text_hover:         ;
        --clr_btn_feat_bg:            ;
        --clr_btn_feat_bg_hover:      ; */

  /* Inputs: */
  --clr_input_text: #666666;
  --clr_input_text_focus: #111111;

  /* Search */
  --clr_search_text: #8fc4d0;

  /* Borders: */
  --clr_btn_border: #ccc #ccc #bbb;
  --clr_btn_border_hover: #ccc #bbb #aaa;
  --clr_btn_border_active: #aaa #bbb #bbb;

  /* Cookie Consent: */

  --c_background_color: #dde0e3;
  --c_paragraph_color: var(--clr_text);
  --c_link_color: var(--clr_link);
  --c_link_color_active: var(--clr_link_active);

  --c_button_background_color: #dde0e3;
  --c_button_ff_color: var(--clr_link);
  --c_button_border_color: var(--clr_link);

  --c_button_hover_background_color: #dde0e3;
  --c_button_hover_ff_color: var(--clr_link_active);
  --c_button_hover_border_color: var(--clr_link_active);

  /* FONTS: */

  --ff_body: benton-modern, serif;

  --ff_display: benton-modern-display, serif;

  --ff_alt: "Monosten A", Courier, monospace;

  --ff_title: benton-modern-display, serif;

  --ff_link: "Monosten C", Courier, monospace;

  --ff_icon: "Font Awesome 6 Pro";

  --fs_body: clamp(1rem, 1rem + 0.15vw, 1.5rem);
  --fs_mini: 0.7rem;
  --fs_medium: clamp(1rem, 1rem + 0.5vw, 1.5rem);
  --fs_postnav: calc(1rem + 1vw);
  --fs_icon: 1rem;
  --fs_nro: calc(4rem + 5vw);
  --fs_giant: calc(6rem + 6vw);

  --fs_title: clamp(1rem, 6vw, 4rem);
  --fs_bigtitle: clamp(1.2rem, 1rem + 2vw, 4rem);
  --fs--2: clamp(0.79rem, 0.72rem + 0.33vw, 0.96rem);
  --fs--1: clamp(0.89rem, 0.77rem + 0.61vw, 1.2rem);
  --fs-0: clamp(1rem, 0.8rem + 0.98vw, 1.5rem);
  --fs-1: clamp(1.13rem, 0.83rem + 1.46vw, 1.88rem);
  --fs-2: clamp(1.27rem, 0.84rem + 2.1vw, 2.34rem);
  --fs-3: clamp(1.42rem, 0.84rem + 2.94vw, 2.93rem);
  --fs-4: clamp(1.6rem, 0.8rem + 4.02vw, 3.66rem);
  --fs-5: clamp(1.8rem, 0.72rem + 5.42vw, 4.58rem);
  --fs-6: clamp(2.03rem, 0.59rem + 7.21vw, 5.72rem);

  /* GRIDS:*/

  /* base: */
  --gb_margin: 6vw; /* Marginaalit */
  --gb_body: minmax(24ch, 40ch); /* Leipätekstin leveys */
  --gb_body_alt: min(90%, 1000px);
  --gb_loop_item: minmax(320px, 1fr); /* Itemin leveys loopissa  */
  --gb_gyllene: calc(100vw * 0.618);
  --gb_colgap: 0;
  --gb_rowgap: 0.75rem;

  /* grid-column-templates: */
  --grid_main: var(--gb_margin) 1fr var(--gb_margin);
  --grid_featured: var(--gb_margin) 1fr 1fr var(--gb_margin);
  --grid_cover: var(--gb_margin) repeat(5, 1fr) var(--gb_margin);
  --grid_le-loop: repeat(auto-fill, var(--gb_loop_item));
  --grid_article: var(--gb_margin) 1fr 1fr var(--gb_body) 1fr 1fr
    var(--gb_margin);
  --grid_about: 1fr 1fr;
  --grid_gyllene: 38.2vw 61.8vw;
  --grid_rcol2: 2fr 3fr 3fr 2fr;

  /* grid-column: */
  --col_all: 1 / -1;
  --col_cover_center: 2 / -2;
  --col_margins: 2 / -2;
  --col_art_body: 4;
  --col_art_body_plus: 3 / -3;
  --ratio: calc(var(--gb_body) * 0.5625);
  --col_sidecar: 4;
}
@media (min-width: 26em) {
  :root {
    --gb_body: minmax(36ch, 60ch);
  }
}
@media (min-width: 48em) {
  :root {
    --gb_body: minmax(50ch, 75ch);
    --fs_mini: 0.9em;
    --fs_title: clamp(1rem, 1rem + 2vw, 4rem);
  }
}
@media (min-width: 64em) {
  :root {
    --gb_body: minmax(50ch, 65ch);
    --fs_mini: 0.9em;
    --fs_title: clamp(1rem, 1rem + 2vw, 4rem);
    --gb_colgap: 0.75rem;
    --grid_cover: var(--gb_margin) repeat(7, 1fr) var(--gb_margin);
    --fs_postnav: calc(2rem + 1vw);
  }
}
@media (min-width: 75em) {
  :root {
    --gb_body: minmax(50ch, 75ch);
    --gb_colgap: 1rem;
  }
}
@media (min-width: 80em) {
  :root {
    --col_sidecar: 5 / 7;
  }
}
@media (min-width: 90em) {
  :root {
    --grid_article: var(--gb_margin) 1fr 2fr var(--gb_body) 2fr 1fr
      var(--gb_margin);
    --col_cover_center: 3 / -3;
  }
}
@media (min-width: 120em) {
  :root {
    --col_sidecar: 5;
    --gb_colgap: 1.5rem;
  }
}
@supports not (font-size: clamp(1rem, 2rem, 3rem)) {
  :root {
    --fs_body: 1rem;
    --fs--2: 0.8rem;
    --fs--1: 0.9rem;
    --fs-0: 1rem;
    --fs-1: 1.13rem;
    --fs-2: 1.27rem;
    --fs-3: 1.42rem;
    --fs-4: 1.6rem;
  }
  @media (min-width: 48em) {
    :root {
      --fs_body: 1.1rem;
      --fs--2: 0.875rem;
      --fs--1: 1.0625;
      --fs-0: 1.25rem;
      --fs-1: 1.5rem;
      --fs-2: 1.8rem;
      --fs-3: 2.25rem;
      --fs-4: 2.75rem;
    }
  }
  @media (min-width: 64em) {
    :root {
      --fs_body: 1.125rem;
      --fs--2: 0.875rem;
      --fs--1: 1.0625;
      --fs-0: 1.35rem;
      --fs-1: 1.75rem;
      --fs-2: 2rem;
      --fs-3: 2.5rem;
      --fs-4: 3.3rem;
    }
  }
  @media (min-width: 80em) {
    :root {
      --fs_body: 1.125rem;
      --fs--2: 1rem;
      --fs--1: 1.2rem;
      --fs-0: 1.5rem;
      --fs-1: 1.88rem;
      --fs-2: 2.33rem;
      --fs-3: 3rem;
      --fs-4: 3.66rem;
    }
  }
}
footer {
  --clr_link: var(--clr_text);
  --clr_link_hover: var(--clr_post_title);
}
.post-nav {
  --clr_link: var(--clr_link_hover);
}
/* .front-toc {
    --clr_link: var(--clr_bg);
    --clr_link_hover: var(--clr_bg);
} */
article header {
  --clr_link: var(--clr_nega);
  --clr_link_hover: var(--clr_alt_bg);
}
.single-biography article header {
  display: flex;
  grid-column: var(--col_margins);
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}
.le-loop {
  /* --clr_post_title: var(--clr_text); */
}
.category-johdanto {
  --clr_hue: 330;
  --clr_sat: 62%;
  --clr_lum: 37%;
}
.category-johdanto.category-antologia-2018 {
  --clr_hue: 350;
}
.category-osa-i {
  --clr_hue: 170;
}
.category-osa-ii {
  --clr_hue: 200;
}
.category-osa-iii {
  --clr_hue: 230;
}
#julkaisun_tiedot {
  --gb_body: minmax(36ch, 60ch);
  --clr_link: var(--clr_link_dark);
}
/* .category-toc {
  --grid_article: var(--gb_margin) 15fr 1fr var(--gb_body) 1fr 1fr
    var(--gb_margin);
}
.category-toc .otsikkokuva {
  --grid_article: var(--gb_margin) 1fr 1fr var(--gb_body) 1fr 1fr;
}
@media (min-width: 90em) {
  .category-toc .otsikkokuva {
    --grid_article: var(--gb_margin) 1fr 2fr var(--gb_body) 2fr 1fr
      var(--gb_margin);
  }
} */
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
  color: var(--clr_link);
  text-decoration: none;
}
a:visited {
  color: var(--clr_link);
}
a:hover,
a:focus,
a:active {
  color: var(--clr_link_hover);
}
a:focus {
  outline: thin dotted;
}
::-moz-focus-inner {
  border: 0;
}
a:hover,
a:active {
  outline: 0;
}
a.btn {
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--ff_link);
  color: var(--clr_nega);
  padding: 0.6em 1.2em;
  border: 2px solid var(--clr_nega);
  display: inline-block;
  margin: 1rem 0 2rem;
  text-shadow: none !important;
}
a.btn:hover {
  background-color: var(--clr_nega);
  color: hsl(var(--clr_hue) var(--clr_sat) var(--clr_lum));
}
.front-only {
  display: none !important;
}
.home .front-only {
  display: inline-block !important;
}
.home .not-on-front {
  display: none !important;
}
.content-link {
  position: absolute;
  left: -9999px;
}
a {
  color: var(--clr_link);
  text-decoration: underline;
  text-decoration-color: var(--clr_link);
  text-decoration-style: dashed;
  text-underline-offset: 0.2em;
}
.post-nav a {
  display: block;
}
header a,
footer a,
#cover a {
  text-decoration: none;
}
article a {
  text-decoration: underline dashed var(--clr_text);
  text-underline-offset: 0.2em;
}
article figcaption a,
article figcaption a:visited {
  text-decoration: underline dashed var(--clr_text);
  text-underline-offset: 0.2em;
  color: var(--clr_text);
}
a.loop_links {
  margin-top: 1rem !important;
  align-self: flex-start;
}
.glossaryLink {
  cursor: pointer;
}
#toc a {
  text-decoration: none;
}
a[name^="fr"] {
  font-family: var(--ff_alt);
  font-size: 0.8em;
  text-decoration: none;
}
a[name^="fn"] {
  font-family: var(--ff_alt);
  font-size: 0.8em;
  text-decoration: none;
  display: inline-block;
  padding: 0 1.5em 0 0;
}
a[name^="fn"]::before {
  content: "\f062";
  font-weight: 900;
  font-family: var(--ff_icon);
  padding: 0 0.3em 0 0;
}
/* .article-body a::after {
    content: '\f061';
    padding-left: 0.4em;
    font-family: var(--ff_icon);
    font-weight: 400;
} */
.article-body a[target="_blank"]::after {
  content: "\f08e";
  font-family: var(--ff_icon);
  font-weight: 400;
  padding-left: 0.4em;
}

/* ============ First things first  ================== */

body,
button,
input,
select,
optgroup,
textarea {
  color: var(--clr_text);
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--clr_bg);
}
body.category,
body.single-glossary,
body.page,
body.search-results,
body.no-results {
  background: var(--clr_bg);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
}

/*--------------------------------------------------------------
## Grid Base
--------------------------------------------------------------*/

body {
  display: grid;
  grid-template-rows: 45px auto auto;
  grid-gap: 0;
}
header {
  grid-row: 1;
}
#content {
  grid-row: 2;
}
footer {
  grid-row: 3;
}
#footer {
  display: grid;
  grid-template-columns: 1fr 25vw 40vw 1fr;
  grid-gap: 20px;
}
#main,
.single article,
#about,
.single article .article-body,
.article-body > figure,
.section-toc-loop,
.page article,
.page article .article-body {
  display: grid;
  grid-template-columns: var(--grid_article);
  grid-column-gap: var(--gb_colgap);
  grid-row-gap: var(--gb_rowgap);
}
.single article .article-body,
.page article .article-body {
  grid-column-gap: var(--gb_colgap);
  grid-row-gap: var(--gb_colgap);
}
#main {
  grid-row-gap: 6rem;
}
#main > *,
#main > .front-loop {
  grid-column: var(--col_margins);
}
#main > .front-toc {
  grid-column: var(--col_art_body);
}
#main > .front-toc.front-loop {
  grid-column: var(--col_margins);
}
@media (min-width: 1400px) {
  #main > * {
    grid-column: var(--col_art_body_plus);
  }
  #main > .front-loop {
    grid-column: var(--col_art_body);
  }
  #main > .cover_section {
    grid-column: var(--col_all);
  }
}
.home #main #about,
.single-biography #author-loop,
.section-toc-loop > * {
  grid-column: var(--col_art_body);
}
.single-biography #author-loop {
  margin: 4rem 0;
}
#main > article,
#main .divider,
#about > *,
article .article-body,
article .toc-body {
  grid-column: var(--col_all);
}
.chapter-otsikko {
  grid-column: var(--col_all);
  display: grid;
  grid-template-columns: var(--grid_article);
  grid-gap: 0;
  height: 30vh;
  margin-top: -45px;
  grid-template-rows: 5fr 3fr;
}
.otsikkokuva {
  grid-column: var(--col_all);
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: 6vw 1fr 6vw;
  grid-gap: 0;
  min-height: 80vh;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -45px;
  grid-template-rows: 5fr 3fr;
  position: relative;
}
@media (min-width: 75em) {
  .otsikkokuva {
    background-attachment: fixed;
  }
}
.otsikkokuva::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, var(--clr_grad_start), var(--clr_grad_end));
  mix-blend-mode: multiply;
  z-index: 0;
}
.chapter-otsikko.search,
.chapter-otsikko.not-found {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.chapter-otsikko.search,
.chapter-otsikko.not-found {
  background-image: url(pix/search.jpg);
}
.single .category-osat .otsikkokuva {
  min-height: 60vh;
}
.page .article__title {
  min-height: 30vh;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding-block: 2rem;
}
.chapter-otsikko__wrapper {
  grid-column: 1 / 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: 6vw 1fr 6vw;
  align-content: center;
  height: 100%;
  z-index: 1;
}
.chapter-title,
.chapter-authors {
  grid-column: var(--col_art_body_plus);
  align-self: center;
  grid-row: 2;
}
.chapter-authors {
  grid-row: 1;
}
@media only screen and (min-width: 64em) {
  .chapter-otsikko__wrapper {
    display: grid;
    grid-template-columns: var(--grid_article);
    grid-column-gap: 20px;
    grid-row-gap: 0;
  }
}
.single .thmb-img {
  grid-row: 4;
  grid-column: 4;
  width: 100%;
  z-index: 999;
}
@media only screen and (min-width: 64em) {
  .single .category-toc .thmb-img {
    grid-row: 3;
    grid-column: 2 / 4;
  }
}
@media only screen and (min-width: 90em) {
  .single .thmb-img {
    grid-row: 3;
    grid-column: 2 / 4;
  }
}
@media only screen and (min-width: 128em) {
  .single .thmb-img {
    grid-row: 3;
    grid-column: 3;
  }
}
article > *,
.article-body >  * {
  grid-column: var(--col_art_body);
}
.article-body > .sidenote {
  grid-column: var(--col_sidecar);
}
.single-post article header,
.page article header {
  grid-column: var(--col_all);
  display: grid;
  grid-template-columns: var(--grid_gyllene);
  grid-template-rows: 2rem 1fr;
  grid-gap: 1.5rem;
  height: calc(38.2vw * 1.5);
  min-height: 50vh;
  max-height: calc(95vh - 45px);
}
article > h1,
.article__title {
  grid-column: var(--col_art_body_plus);
  grid-row: 2;
  margin-bottom: 2rem;
}
article > .topics {
  grid-row: 1;
  grid-column: var(--col_art_body_plus);
}
article .article-body {
  grid-row: 3;
  grid-column: var(--col_all);
}
article .toc-body {
  grid-row: 2 / 4;
  grid-column: var(--col_art_body_plus);
  padding: 2rem var(--gb_margin);
  background-color: var(--clr_bg);
}
article .article-body > * {
  grid-column: var(--col_art_body);
}
article .toc-body > * {
  grid-column: var(--col_art_body_plus);
}
article .luku {
  grid-column: 2 / 4;
  grid-row: 2;
}
/* .article__title {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-content: flex-end;
} */
@media only screen and (orientation: portrait) and (max-width: 767px) {
  .single-post article header,
  .page article header {
    height: calc(2rem + 120vw);
    grid-template-columns: var(--grid_main);
    grid-template-rows: 2rem 120vw;
    grid-gap: 0;
  }
  .single-post article header > *,
  .page article header > * {
    grid-column: 2;
  }
  .single-post article.tag-teema header > * {
    grid-column: 4;
  }
  .single-post article header .thmb-img,
  .page article header .thmb-img {
    grid-row: 1 / 4;
    grid-column: 1 / 4;
    height: calc(2rem + 120vw) !important;
    width: 100vw;
    overflow: hidden;
    position: relative;
  }
  article header .thmb-img img {
    height: auto !important;
    width: auto;
    max-width: 150%;
    margin: auto;
  }
  article header .post-title {
    grid-row: 2;
    grid-column: 2;
    z-index: 777;
  }
  article header .topics {
    grid-row: 1;
    grid-column: 2;
  }
}
.article-body > figure {
  grid-column: var(--col_all);
  align-items: end;
  margin: 1.5rem 0;
  padding: 0;
}
.article-body > figure > * {
  grid-column: var(--col_art_body);
}
@media (min-width: 64em) {
  /* 75 */
  article .luku {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (min-width: 75em) {
  /* 75 */
  .article-body figure {
    margin: 1.5rem 0;
    padding: 0;
  }
  .article-body > figure a,
  .article-body > figure img {
    grid-column: var(--col_art_body);
  }
  .article-body > figure figcaption {
    grid-column: 5 / 7;
  }
  .article-body > figure.wide a,
  .article-body > figure.wide img {
    grid-column: 3 / 5;
  }
  .article-body > figure.wide figcaption {
    grid-column: 5 / 7;
  }
}
figure.tall,
figure.small,
figure.narrow {
  grid-column: 4;
  display: grid;
  grid-template-columns: 65% 1fr;
  grid-gap: 1rem;
}
figure.tall a,
figure.tall > img,
figure.small a,
figure.small > img,
figure.narrow a,
figure.narrow > img {
  grid-column: 1;
}
figure.tall figcaption,
figure.small figcaption,
figure.narrow figcaption {
  grid-column: 2;
}
figure.narrow {
  grid-template-columns: auto 1fr;
}

@media (min-width: 64em) {
  article .wp-block-group.fig {
    display: grid;
    grid-column: var(--col_all);
    grid-template-columns: var(--grid_article);
  }
  .fig .wp-block-group__inner-container {
    display: grid;
    grid-column: var(--col_margins);
    grid-column-gap: var(--gb_colgap);
  }
  .fig figure > a {
    z-index: 2;
  }
  .fig figcaption a {
    position: relative;
    z-index: 9;
  }
  /*  ----- responsive 2cols ----------  */
  .rcol2 .wp-block-group__inner-container {
    grid-template-columns: 2fr 3fr 3fr 2fr;
  }
  .rcol2 .wp-block-group__inner-container {
    max-height: 50vh;
  }
  .rcol2 figure {
    grid-column: var(--col_all);
    grid-row: 1;
    display: grid;
    grid-template-columns: var(--grid_rcol2);
    grid-column-gap: var(--gb_colgap);
  }
  .rcol2 figcaption {
    grid-row: 1;
    align-self: end;
  }
  .rcol2 figure:nth-child(1) figcaption {
    grid-column: 1;
  }
  .rcol2 figure:nth-child(2) a {
    grid-column: 3;
    grid-row: 1;
  }
  .rcol2 figure:nth-child(2) figcaption {
    grid-column: 4;
  }
  .rcol2 figure {
    margin: 0;
    padding: 0;
  }
  .rcol2 figure a {
    max-height: 50vh;
  }
  .rcol2 img {
    width: 100%;
    height: 50vh;
    object-fit: cover;
  }
  .rcol2 figcaption {
    max-width: 50ch;
  }

  /*  -----  2cols ----------  */
  .col2 .wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content max-content;
  }
  /* .col2 .wp-block-group__inner-container {
        max-height: 50vh;
    } */
  .col2 figure {
    grid-column: var(--col_all);
    grid-row: 1 /-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content max-content;
    grid-column-gap: var(--gb_colgap);
    grid-row-gap: var(--gb_rowgap);
    align-content: end;
  }
  .col2 figcaption {
    grid-row: 2;
  }
  .col2 figure:nth-child(1) > * {
    grid-column: 1;
    justify-self: end;
  }
  .col2 figure:nth-child(1) a {
    justify-self: end;
    align-self: end;
  }
  .col2 figure:nth-child(2) > * {
    grid-column: 2;
    justify-self: start;
    align-self: end;
  }
  /* .col2 figure {
        margin:0;
        padding:0;
    }
    .col2 figure a {
        max-height: 50vh;
        z-index: 2;
    }
    .col2 img {
        width:100%;
        height: 50vh;
        object-fit: cover;
    } */
  .col2 figcaption {
    max-width: 60ch;
  }

  /*  -----  3cols ----------  */
  .col3 .wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: max-content max-content;
  }
  /* .col3 .wp-block-group__inner-container {
    max-height: 50vh;
} */
  .col3 figure {
    grid-column: var(--col_all);
    grid-row: 1 /-1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: max-content max-content;
    grid-column-gap: var(--gb_colgap);
    grid-row-gap: var(--gb_rowgap);
    /* align-content: end; */
  }
  .col3 figcaption {
    grid-row: 2;
  }
  .col3 figure:nth-child(1) > * {
    grid-column: 1;
  }
  .col3 figure:nth-child(1) a {
    justify-self: end;
    align-self: end;
  }
  .col3 figure:nth-child(2) > * {
    grid-column: 2;
    justify-self: start;
  }
  .col3 figure:nth-child(2) > a {
    align-self: end;
  }
  .col3 figure:nth-child(3) > * {
    grid-column: 3;
    justify-self: start;
    align-self: end;
  }
  .col3 figure:nth-child(3) > figcaption {
    align-self: start;
  }
  /* .col3 figcaption {
    max-width:60ch;
} */
}
.jetpack-video-wrapper {
  margin-bottom: 0.4em !important;
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 64em) {
    .col2 figure,
    .col3 figure,
    .col4 figure {
      grid-template-rows: subgrid;
    }
  }
}

/* === === === === === #LOOPS === === === === === */

.toc-loop {
  grid-column: var(--col_content);
  margin-top: 2rem;
}
.toc-loop {
  display: grid;
  grid-template-columns: var(--grid_le-loop);
  grid-gap: 1rem;
  list-style: none;
  margin: 0;
  -webkit-margin-start: 0;
  -webkit-padding-start: 0;
  -moz-padding-start: 0;
  padding-inline-start: 0;
}
.toc-loop__item,
.le-loop li {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  justify-content: flex-end;
}
.toc-loop__item {
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center center;
  border-radius: 3px 0 0 3px;
  position: relative;
  overflow: hidden;
}
.toc-loop--sticky {
  padding: 25% 2rem;
}
.loop-item__link {
  display: contents;
}
.loop-item__content {
  width: 100%;
  /* height:auto;
    padding: 50% 2rem; */
  background-size: cover;
  background-position: center center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.loop-item__image {
  width: 100%;
  height: 0;
  padding: 33% 0;
  position: relative;
  overflow: hidden;
  background-color: var(--clr_em);
}
.loop-item__content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(1);
  transition: transform 250ms ease-in-out;
  overflow: hidden;
  z-index: 0;
}
.toc-loop__item:hover img,
.le-loop li:hover img {
  transform: scale(1.2);
  /* transform-origin: bottom; */
}
.le-loop li:hover img {
  transform: scale(1.2);
  /* transform-origin: bottom; */
}
.loop-item__content-wrapper {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1rem;
}
.post-type-archive-bios .loop-item__content-wrapper {
  align-items: flex-start;
}
.search-results .loop-item__content-wrapper {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
}
.loop-title {
  text-align: center;
  margin: 0;
}
.le-loop img,
article header img {
  height: 100%;
}
.le-loop li {
  position: relative;
  align-content: stretch;
}
.le-loop li span {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  color: var(--clr_nega);
  font-family: var(--ff_alt);
  font-size: var(--fs_mini);
  text-transform: uppercase;
  opacity: 0.7;
}
.le-loop .entry-content a {
  z-index: 22;
}

/* --------------------- Etusivu ----------------- */
.home #main {
  grid-template-rows: 100vh auto auto;
}
#cover {
  grid-column: var(--col_all);
  grid-row: 1;
  display: grid;
  grid-template-columns: var(--grid_cover);
  grid-template-rows: 45px 1fr 3fr;
  position: relative;
}
.cover_section {
  grid-column: var(--col_all) !important;
  display: flex;
  position: relative;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
}
.cover_section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgba(33, 96, 110, 0.5),
    rgba(33, 96, 110, 0.2)
  ) !important ;
}
#nivel-cover,
.nivel-cover {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  margin: 0;
  z-index: 333;
}
.cover_section.a2021 {
  grid-row: 2;
}
.cover_section.a2018 {
  grid-row: 3;
}
.cover.uni-x {
  grid-column: var(--col_cover_center);
  grid-row: 2;
}
#nivel-cover,
.nivel-cover {
  grid-column: var(--col_cover_center);
  grid-row: 3;
}
.credits {
  grid-column: var(--col_all);
  grid-row: 3;
}
section.divider {
  grid-column: var(--col_all);
}
#intro {
  grid-column: var(--col_cover_center);
}
#intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
}
#intro > * {
  grid-column: 1 / 3;
}
#intro ul,
#intro h4 {
  grid-column: 1 / 3;
}
.front-about {
  background-color: var(--clr_alt_bg);
  padding: 6rem 0;
  margin: 0;
}
.front-about__content {
  max-width: 60ch;
  text-align: center;
  margin: 0 auto;
}
.front-about__title {
  grid-column: var(--col_art_body);
  margin-bottom: 3rem;
}
/* -------------------- Loops -------------------------*/
#front-loop {
  grid-column: 2 / 7;
  grid-row: 3;
}
#category-loop.authors .le-loop,
#category-loop .le-loop,
#author-loop .le-loop,
.section-loop .le-loop {
  display: grid;
  grid-template-columns: var(--grid_le-loop);
}
ul.le-loop,
ul.toc-loop {
  list-style: none;
  margin: 0;
  -webkit-margin-start: 0;
  -webkit-padding-start: 0;
  -moz-padding-start: 0;
}
.le-loop li,
.toc-loop li {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  border-radius: 2px;
  margin-bottom: 2rem;
}
.section-loop li,
#category-loop li,
#author-loop li {
  margin: 1rem;
  padding: 1rem;
  background: var(--clr_bg_sec);
}
.section-loop li:hover,
#category-loop li:hover,
#author-loop li:hover {
  background: var(--clr_alt_bg);
}
.le-loop .entry-content {
  margin: 0.6em 0 0 0;
}
.le-loop .thmb-img,
.le-loop .forratio {
  width: 100%;
  height: auto;
  padding: 65% 0;
  background-size: cover;
  background-position-y: 30%;
  border-radius: 3px 0 0 3px;
}
@media (min-width: 768px) {
  .authors .le-loop li {
    display: flex;
  }
  .le-loop .thmb-img,
  .le-loop .forratio {
    padding: 75% 0;
    background-size: contain;
    background-position-y: 0;
    border-radius: 3px 0 0 3px;
  }
}
@media (min-width: 1200px) {
  .le-loop li {
    margin-bottom: 0;
  }
}
.le-loop img,
article header img {
  height: 100%;
}
.authors .le-loop li {
  width: 70%;
  margin: 1rem auto;
}
.section-loop,
#category-loop {
  margin: 4rem 0;
}
.authors .le-loop .thmb-img {
  background-position-y: 15%;
  background-color: var(--clr_alt_bg);
}
.authors .le-loop .post-1123 .thmb-img,
.authors .le-loop .post-1119 .thmb-img,
.authors .le-loop .post-1107 .thmb-img {
  background-position-y: 0;
}
.authors .le-loop .post-1120 .thmb-img {
  background-position-y: 25%;
}
.authors li:hover .thmb-img {
  background-blend-mode: overlay;
}
/* .le-loop li:not(.tag-teema) .entry-content {
    display: none;
    position: absolute;
    margin:0;
    padding:1.5rem;
    bottom: 0;
    width: 100%;
    z-index: 999;
    right: 0;
    min-height:100%;
    background-color: hsl(var(--clr_hue) var(--clr_sat) var(--clr_lum));
} */
.le-loop .category-johdanto .entry-content,
.le-loop .category-osa .entry-content,
.le-loop li:hover .entry-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: flex-end;
}
.le-loop .content,
.le-loop .entry-content {
  border-radius: 3px;
}
.le-loop .entry-content * {
  margin: 0;
}
.le-loop .content {
  display: flex;
  flex-direction: column;
}
.le-loop li span {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  color: var(--clr_nega);
  font-family: var(--ff_alt);
  font-size: var(--fs_mini);
  text-transform: uppercase;
  opacity: 0.7;
}
.le-loop .entry-content a {
  z-index: 22;
}

/*--------------------------------------------------------------
## nivel
--------------------------------------------------------------*/

article h4 a,
article p a {
  word-break: break-word;
}
figure {
  padding: 2em 0;
}
.fig figure {
  padding: 0;
}
.topics {
  display: flex;
  list-style: none;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  z-index: 333;
}
.topics ul {
  display: flex;
  list-style: none;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  margin: 0;
  padding: 0;
}
.topics ul li {
  list-style: none;
  align-self: flex-start;
  margin: 1rem 0 1rem 0;
  /* padding: 1rem; */
}
ul.sidenote {
  list-style: none;
  padding: 0;
  padding-inline-start: 0;
  align-self: end;
}
.sidenote li {
  font-size: 0.8rem;
}
.sidenote sup {
  top: 0;
  font-size: 1em;
}
.single article .sidenote li::before {
  content: "";
}
.single-post article {
  margin: 0;
}
.archive .thmb-img.round {
  grid-column: 2 / 4;
  height: auto;
  width: 100%;
  padding: 50% 0;
  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.single-biography .thmb-img {
  margin-top: -3rem;
  height: auto;
  width: 18em;
  padding: 9em 0;
  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
article .bio {
  padding: 3rem 2rem;
  margin-top: 2rem;
}
.oheistxt {
  padding: 2rem 2rem 0 2rem;
  margin-top: 0;
}
article .links {
  background-color: var(--clr_bg);
  padding: 1rem;
}

div.feature-img {
  width: 100vw;
  height: 100vw;
  background-position: center;
  background-size: cover;
}
div.entry-thumb {
  background-position: center;
  background-size: cover;
  background-color: #00b7b7;
  width: 70%;
  padding-top: 70%;
  border-radius: 50%;
  height: 0;
  margin: 0 auto;
}

/*--------------------------------------------------------------
## nivel TYPOGRAPHY
--------------------------------------------------------------*/
body {
  font-family: var(--ff_alt);
  font-style: normal;
  font-weight: normal;
}
h1 {
  font-family: var(--ff_title);
  font-weight: 700;
  font-size: var(--fs-5);
  text-transform: none;
  line-height: 1em;
  hyphens: none;
  -webkit-hyphens: none;
}
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff_title);
  font-weight: normal;
  font-style: normal;
  line-height: 1em;
  margin: 0.5em 0 0.25em 0;
  text-rendering: optimizelegibility;
}
article h4 {
  font-family: var(--ff_body);
  font-weight: 700;
}
.loop-menu .categories {
  font-family: var(--ff_alt);
  font-weight: normal;
  font-style: normal;
  line-height: 1em;
  margin: 0.5em 0 0.25em 0;
  text-rendering: optimizelegibility;
}
h2.loop-title {
  font-family: var(--ff_title);
  font-weight: 700;
  font-size: var(--fs-2);
  text-transform: none;
  line-height: 1em;
  hyphens: none;
  -webkit-hyphens: none;
}
h2.loop-title.author {
  font-family: var(--ff_title);
  font-size: var(--fs-0);
  line-height: 1;
  font-style: normal;
  color: var(--clr_text);
  display: block;
  padding-bottom: 0.3em;
}
.loop-excerpt p,
.loop-excerpt a p,
#about p {
  font-family: var(--ff_body);
  color: var(--clr_text);
}
h2.loop-title::first-letter {
  display: none;
}
.article-title em {
  color: var(--clr_text);
  font-style: normal;
  display: block;
}
article h1 b {
  color: var(--clr_alt);
  font-style: normal;
  display: block;
  /* text-transform:uppercase;
    font-size:0.5em; */
}
h1 em {
  font-style: normal;
  display: block;
  text-transform: none;
}
.otsikkokuva .chapter-title {
  text-align: left;
  max-width: 36ch;
}
.chapter-title span {
  display: block;
  font-size: 1.5em;
  line-height: 1;
}
.chapter-title em {
  display: block;
  font-style: normal;
  color: var(--clr_link_hover);
}
.osa:hover .chapter-title,
.osa:hover .chapter-title em {
  color: #fff;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}
@media (min-width: 64em) {
  .chapter-title em {
    font-size: 0.7em;
  }
}
h1.site-title {
  font-size: var(--fs-5);
  text-transform: none;
  line-height: 1em;
  color: #fff;
}
h1.site-title a {
  color: #fff;
}

h1.article-title,
.page article h1 {
  margin: 0;
}
h1.chapter-title {
  padding-bottom: 0.5em;
  text-align: left;
}
.otsikkokuva .chapter-title,
.chapter-authors {
  color: white;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.chapter-title span,
.loop-title span {
  padding-top: 1rem;
  font-weight: 400;
}
.loop-title span {
  display: block;
  padding-top: 0.2em;
  line-height: 1;
}
/* @media (min-width: 64em) {
  .chapter-title span {
    font-size: 10rem;
    padding-right: 3rem;
  }
} */
h2.title {
  font-size: calc(var(--fs_bigtitle) * 0.7);
  max-width: 50ch;
}
h2.entry-title em {
  font-style: normal;
  margin-right: 1rem;
  color: var(--clr_text);
}
.article-body > h3,
.wp-block-group h3 {
  font-size: var(--fs-3);
  font-family: var(--ff_body);
}
article h2, .front-about__title {
  font-family: var(--ff_display);
  font-weight: 700;
  font-size: var(--fs-2);
  color: var(--clr_text);
}
.front-about__title {
  font-size: var(--fs-3);
}
.front-about__title span {
 font-weight: 400;
  display: block;
}
/* article h2 {
  font-family: var(--ff_display);
  font-weight: 700;
  font-size: var(--fs-3);
  color: var(--clr_text);
} */
article h1 span,
article h2 span {
  font-weight: 400;
  display: block;
}
@media (min-width: 48em) {
  article h2 {
    font-size: var(--fs-2);
  }
  .article-body > h3,
  .wp-block-group h3 {
    font-size: var(--fs-2);
  }
  .home .front-about__body > h3 {
    font-size: var(--fs-1);
  }
}
#about h2 {
  margin-bottom: 1em;
}
span.topics {
  text-transform: uppercase;
  font-size: var(--fs_mini);
  margin-top: 3rem;
  align-self: flex-start;
}
.category h1,
.page h1 {
  color: var(--clr_text);
}
.home.page h1 {
  color: var(--clr_bg);
}
.single-glossary h1 {
  color: var(--clr_glossary_title);
}
h4 {
  font-size: 1.2em;
  margin-bottom: 0;
  text-decoration: underline;
  text-underline-offset: 0.1em;
}
h4 em {
  font-style: normal;
}
#category-loop h3,
#author-loop h2 {
  font-family: var(--ff_title);
  font-size: var(--fs-1);
  line-height: 1;
  margin: 0;
  text-align: left;
  color: var(--clr_link_em);
}
#toc-loop li a {
  font-family: var(--ff_title);
  font-size: var(--fs-1);
  margin-bottom: 0;
  text-align: left;
  line-height: 1.2em;
}
#toc li a {
  font-family: var(--ff_title);
  font-size: var(--fs-1);
  margin-bottom: 0;
  text-align: left;
  line-height: 1.2em;
}
.section-loop h2.loop-title {
  text-align: left;
  color: var(--clr_text);
  font-size: var(--fs_medium);
}
.search-results .type-bios h2:before {
  font-family: var(--ff_alt);
  content: "kirjoittaja";
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: normal;
  color: var(--clr_uni2);
  font-size: 0.7rem;
  display: block;
}

.authors .le-loop a {
  color: var(--clr_text);
}
.le-loop h3 {
  padding-bottom: 1rem;
}
.toc-loop h2 i,
.toc-loop h2.loop-title i,
.le-loop h2 i,
.le-loop h3 i {
  font-family: var(--ff_title);
  font-size: var(--fs-0);
  line-height: 1;
  font-style: normal;
  font-weight: 700;
  color: var(--clr_text);
  display: block;
  padding-bottom: 0.3em;
}
.le-loop .entry-content p,
.toc-loop .entry-content p {
  font-family: var(--ff_body);
  font-size: var(--fs_body);
  line-height: 1.2em;
}
.topics a {
  text-decoration: underline;
  text-transform: uppercase;
  font-family: var(--ff_alt);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.category-toc .topics a {
  color: var(--clr_bg);
}
.category-chapter .topics {
  --clr_link: var(--clr_bg);
}
h5 {
  font-size: 1em;
  margin: 1em 0 1.5em 0;
}
h6 {
  font-size: 1.2em;
  line-height: 1.5em;
}
.article-author {
  font-family: var(--ff_title);
  font-size: var(--fs-2);
  line-height: 1;
  opacity: 0.75;
}
.single-glossary article .icon {
  grid-column: 2;
  font-size: calc(1rem + 1.5vw);
  text-align: right;
  color: var(--clr_glossary_title);
}
.aleft {
  text-align: left;
}
.aright {
  text-align: right;
}
.acenter {
  text-align: center;
}
#about p {
  line-height: 1.6em;
  font-size: var(--fs_body);
  margin-bottom: 0.5em;
  text-align: left;
}
article p,
.front-about p,
.wp-block-group li {
  font-family: var(--ff_body);
  font-style: normal;
  font-weight: normal;
  font-size: 1.2em;
  line-height: 1.6em;
  margin: 0;
}
article p.johdanto {
  font-size: 1.4em;
}

article.category-osa > p {
  font-size: 1.5em;
}
article cite {
  font-family: var(--ff_body);
  font-style: normal;
  font-weight: normal;
}
article p strong {
  font-weight: 700;
  opacity: 0.9;
}
article p strong em {
  font-weight: 700;
}
article blockquote {
  position: relative;
  margin: 0 1.5em;
}
article blockquote::before {
  content: "";
  position: absolute;
  border: 1px dashed var(--clr_link);
  top: 0;
  left: -1.3rem;
  bottom: 0;
}
/* article blockquote p {
  font-family: var(--ff_body);
  font-style: italic;
  font-size: 1.25em;
  margin: 0;
  margin-block: 0.5em;
} */
.contributors {
  border: 1px dashed var(--clr_link);
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  margin-top: 2rem;
}
article .contributors h2 {
  margin-top: 0;
  margin-bottom: 2rem;
}
article .contributors h3 {
  font-family: var(--ff_link);
}
#nivel-cover > * {
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
  /* max-width:35ch; */
}
.archive h1.page-title {
  text-shadow: none;
  color: var(--clr_title);
}
span.site-description {
  font-family: var(--ff_title);
  font-weight: 400;
  font-size: var(--fs-5);
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--clr_bg);
}
span.authors {
  font-family: var(--ff_title);
  font-size: var(--fs-2);
  color: var(--clr_bg);
  line-height: 1;
  padding-bottom: 0.5em;
}
@media (min-width: 64em) {
  span.authors {
    /* font-size: 1.5rem; */
  }
}
.nivel-cover a {
  color: var(--clr_nega);
}
.wp-block-table figcaption {
  max-width: 50ch;
  align-self: flex-end;
}

.tags a {
  font-size: calc(1rem + 0.5vw) !important;
  padding-right: 1rem;
  word-break: normal;
}
.le-loop h2 a,
article > #category-loop h2 a {
  color: var(--clr_text);
}
#category-loop a {
  text-decoration: none;
}
.le-loop h2 a:hover,
article > #category-loop h2 a:hover {
  color: var(--clr_link);
  text-decoration: underline dashed;
  text-underline-offset: 0.2em;
}
.section-loop a:hover,
#category-loop a:hover {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: rgb(255 255 255 / 0.5);
  text-underline-offset: 0.2em;
}
.le-loop h2 span {
  font-style: normal;
  font-size: 1.3em;
  display: block;
  color: var(--clr_link);
}
.le-loop h2 em,
.le-loop h2 b {
  font-style: normal;
  /*  color:#404040; */
  display: block;
}

.le-loop .entry-content p a,
.toc-loop .entry-content p a {
  word-break: break-all;
  word-wrap: break-word;
}
.le-loop li sup {
  display: none;
}
article p a {
  font-weight: 700;
  font-style: normal;
  text-transform: none;
  font-size: 0.95em;
}
article p a.glossaryLink {
  font-weight: 400;
  color: #404040;
  font-size: 1em;
}
.article-body > ul,
.article-body > ol,
blockquote ul,
blockquote ol {
  font-family: var(--ff_body);
  font-size: 1.2rem;
}
.article-body > ul {
  list-style: none;
  margin-block-end: 0;
  margin-block-start: 0;
  padding-inline-start: 0;
}
.article-body > ul li,
.article-body > ol li,
blockquote ul li,
blockquote ol li {
  margin-bottom: 0.5em;
}
.article-body > ul li ul,
.article-body > ol li ol,
blockquote ul li ul,
blockquote ol li ol {
  list-style: none;
  margin-left: 0;
}
.article-body > ul,
blockquote ul {
  list-style: none;
  margin-block-end: 0;
  margin-block-start: 0;
  padding-inline-start: 0;
}
.article-body > ul li,
blockquote ul li {
  overflow: visible;
  padding-left: 1em;
  position: relative;
}
.article-body > ul li::before,
blockquote ul li::before {
  content: "–";
  left: 0;
  position: absolute;
}
figcaption {
  text-align: left;
  font-size: 0.7em;
  margin: 0 0 0 1em;
}
figure.wp-block-table table {
  text-align: left;
  margin: 0;
}
.wp-block-table td {
  padding: 0.5rem;
  width: 50%;
}
.wp-block-table tr {
  border-bottom: 1px dashed var(--clr_text);
  vertical-align: top;
}
.luku {
  display: flex;
  justify-content: center;
  padding: var(--gb_loop_padding);
  color: var(--clr_bg);
  font-size: var(--fs_giant);
  line-height: 1.2;
  text-shadow: 0px 0px 0.1em rgba(0, 0, 0, 0.3);
  position: absolute;
  inset: 0;
}
.category-aluksi .luku {
  padding: 0;
}
@media (min-width: 64em) {
  .luku {
    align-items: center;
  }
}
.luku span {
  font-family: var(--font_alt);
  color: var(--clr_bg);
  font-size: calc(10rem + 10vw);
  line-height: 1.2;
  text-shadow: 0px 0px 0.1em rgba(0, 0, 0, 0.3);
}
article .luku span {
  color: var(--clr_title);
}
article h1.entry-title,
article .luku {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
article .luku {
  margin: 0;
  padding: 0 var(--gb_loop_padding) 0 0;
}
article .luku span {
  font-size: calc(5rem + 10vw);
  text-shadow: none;
}
.wp-block-group.indented {
  margin-left: 2rem;
}

/* =========== ETUSIVU ============================= */

#cover {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  background-image: url("pix/cover.webp");
  position: relative;
  padding-bottom: 2rem;
  min-height: 50vh;
}
#cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  z-index: 0;
}
.home #main,
.page #main {
  margin-top: -45px;
}
.home #cover {
  /* background-image:none; */
  height: 100vh;
}
.cover-photo {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("pix/cover.jpg");
  position: relative;
}
.osa {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.esipuhe {
  padding: 2rem;
}
#julkaisun_tiedot {
  grid-column: 1/-1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--clr_alt_bg);
  padding: 6rem 0;
  margin: 0;
}
#julkaisun_tiedot article {
  max-width: 60ch;
  text-align: center;
}
#julkaisun_tiedot h2 {
  grid-column: var(--col_art_body);
  margin-bottom: 3rem;
}
#cover {
  position: relative;
  z-index: 300;
  overflow: hidden;
}
.osa a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0;
  z-index: -1;
  transition: all 0.6s cubic-bezier(0.215, 0.061, 0.355, 1);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.osa.esipuhe a::before {
  background: var(--clr_link);
}
#toc .osa:hover a::before {
  width: 100%;
}
.osa1 a::before {
  background-image: url("pix/osa1.jpg");
}
.osa2 a::before {
  background-image: url("pix/osa2.jpg");
}
.osa3 a::before {
  background-image: url("pix/osa3.jpg");
}
div.credits {
  position: absolute;
  bottom: -40px;
  right: 0;
  color: #999;
  padding: 1rem 2rem 1rem 1rem;
  font-size: 10px;
  text-align: right;
}
@media (min-width: 1024px) {
  div.credits {
    bottom: 0;
    color: #fff;
  }
}
.single article .le-loop li:before {
  content: none;
}
h2.toc-title,
h2.toc-list__title {
  font-family: var(--ff_title);
  font-weight: 400;
  /* font-size:1.6rem; */
  font-size: var(--fs_medium);
}
h2.toc-list__title em {
  font-weight: 700;
  font-style: normal;
  display: block;
}
.single article h3.toc-title {
  font-size: var(--fs_body);
  margin: 0;
}
.toc-body summary:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  content: "\f078";
  font-family: var(--ff_icon);
  display: inline-flex;
}
.toc-body details[open] summary:before {
  content: "\f077";
}
.toc-loop ul {
  margin-left: calc(1.75rem + 0.75rem + 0.75rem);
  padding-left: 0;
}
.toc-loop ul li {
  margin: 1em 0 0.5em;
  padding-left: 0;
}
.category-liite h1 span {
  font-size: 0.8em;
  text-transform: uppercase;
}

p + p,
.wp-block-group.diary,
.wp-block-group.dialogi {
  margin-top: 1em;
}
.wp-block-group.dialogi + .wp-block-group.dialogi {
  margin-top: 0;
}
.wp-block-group.diary,
.wp-block-group.dialogi {
  margin-bottom: 1em;
}
article blockquote {
  margin-block: 1em;
}
h2,
h3 {
  margin: 1em 0 0.5em 0;
}
@media (min-width: 64em) {
  p + p,
  .wp-block-group.diary,
  .wp-block-group.dialogi {
    margin-top: 0;
  }
  .wp-block-group.diary,
  .wp-block-group.dialogi {
    margin-bottom: 0;
  }
  h2,
  h3 {
    margin: 0.5em 0 0.25em 0;
  }
  article blockquote {
    margin-block: 0;
  }
}
/* 
article.category-toc:not(.post-2252) p {
  padding-left: 1rem;
  font-size: var(--fs-0);
} */
#toc-list,
#toc-list ul {
  list-style: none;
}
#toc-list ul li::before {
  content: "–";
  font-family: var(--ff_title);
  font-size: var(--fs-1);
}
#toc-list ul {
  display: none;
}
#toc-list li {
  padding: 1rem 1rem;
  margin: 0;
  border-top: 1px dashed #999;
  height: auto;
}
#toc-list li:last-child {
  border-bottom: 1px dashed #999;
}
.single .thmb-img .post-thumbnail {
  margin-top: 1rem;
  margin-right: 1rem;
}
article .diary p {
  font-style: italic;
}
article .diary p + p,
article .dialogi p + p {
  margin-top: 1rem;
}
article .dialogi {
  margin-left: 1.5rem;
}
article blockquote p {
  font-family: var(--ff_body);
  font-style: italic;
  margin: 0;
  margin-block: 0.5em;
}

/* NIVEL19  */

.sivu h1.wp-block-heading {
  font-family: titling-gothic-fb-condensed, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  grid-column: 1;
  font-size: 4rem;
  line-height: 0.9;
  flex-grow: 1;
  color: #fff;
}
.sivu h1.wp-block-heading em,
.sivu h1.wp-block-heading strong {
  font-weight: 400;
  font-style: normal;
  color: #c9ced9;
  display: block;
  text-transform: uppercase;
}
.sivu h2.wp-block-heading {
  font-family: var(--ff_alt);
  text-transform: none;
  font-size: var(--fs-2);
  line-height: 0.9;
  color: #fff;
  flex-grow: 100;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-flow: column;
}
section.sivu .wp-block-group__inner-container > .credit {
  font-family: var(--ff_alt);
  font-size: var(--fs--2);
  grid-column: 1;
  color: #fff;
  padding-top: 2rem;
  padding-left: 0.3rem;
  flex-grow: 1;
}
section.sivu {
  min-height: 100vh;
  grid-column: 1 / -1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  display: flex;
}
section.sivu > .wp-block-group__inner-container {
  display: flex;
  flex-flow: column;
  height: 100%;
  margin: var(--gb_margin);
}
.sivu.s01 {
  background-image: url("pix/one_trees.jpg");
  padding-block: 10vh;
  align-items: flex-start;
}
section.sivu.s01 .wp-block-group__inner-container {
  width: 100%;
}
.vimeo_full {
  width: 100%;
  padding: 28.125% 0;
  position: relative;
}
.vimeo_full iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.sivu::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 40vw;
  z-index: 0;
}
.sivu.s03::before {
  content: "";
  background-image: url("pix/three_trees.jpg");
}
section.sivu.s03 > .wp-block-group__inner-container {
  background-color: var(--clr_bg);
  z-index: 100;
  padding: var(--gb_margin);
}
section.sivu.s04 > .wp-block-group__inner-container {
  justify-content: center;
}
section.sivu.s05 > .wp-block-group__inner-container {
  justify-content: center;
}
section.sivu.s06 > .wp-block-group__inner-container {
  justify-content: center;
  align-items: center;
  width: 100%;
}
.s05 .v_cent {
  padding-top: 20vh;
}
.s06 p {
  text-align: center;
}
section.sivu.s07 > .wp-block-group__inner-container {
  justify-content: center;
  margin: 0;
  width: 100%;
}
.sivu.s08 h2.wp-block-heading {
  font-family: var(--ff_title);
  color: var(--clr_text);
  flex-grow: 0;
  padding-right: 8vw;
  z-index: 2;
  justify-content: flex-start;
  align-items: flex-start;
}
section.sivu .wp-block-group__inner-container > .otsikkovinjetti,
section.sivu .wp-block-group__inner-container > .introvinjetti {
  font-family: titling-gothic-fb-condensed, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: #c9ced9;
  font-size: 3rem;
  line-height: 0.9;
}
.sivu .otsikkovinjetti em,
.sivu .otsikkovinjetti strong {
  font-weight: 400;
  font-style: normal;
  color: #fff;
  display: block;
  text-transform: uppercase;
}
section.sivu .wp-block-group__inner-container > .introvinjetti {
  font-size: var(--fs--2);
  line-height: 1;
  color: #fff;
  width: 40%;
  padding-block: 2vh 4vh;
}
.sivu.s08::before {
  content: "";
  background-image: url("pix/one_trees.jpg");
  background-size: cover;
  background-position: top left;
}
.s08 .wp-block-group__inner-container {
  z-index: 100;
}
.s08 .wp-block-group {
  background-color: var(--clr_bg);
  padding: 2rem;
}
.theteam {
  padding-bottom: 5vh;
}

h3.theteam__title,
.theteam__caption {
  color: green;
  font-family: var(--ff_alt);
}

.theteam__pics .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  background-color: var(--clr_bg);
  padding: 0.5rem;
  gap: 0.5rem;
}
.article-body .theteam__pics figure {
  margin: 0;
  padding: 0;
}
@media (min-width: 40em) {
  .theteam__pics .wp-block-group__inner-container {
    display: flex;
    flex-direction: row;
  }
}

@media (min-width: 67em) {
  section.sivu {
    height: 100vh;
    grid-column: 1 / -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
  }
  section.sivu .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 40vw 1fr var(--gb_body) 1fr;
    height: 100%;
  }
  section.sivu > .wp-block-group__inner-container {
    margin: 0 var(--gb_margin);
  }
  section.sivu.s01 .wp-block-group__inner-container,
  section.sivu.s02 .wp-block-group__inner-container {
    grid-template-rows: max-content max-content 1fr;
  }
  section.sivu.s03 > .wp-block-group__inner-container {
    background-color: transparent;
    padding: 0;
  }
  section.sivu .wp-block-group__inner-container > * {
    grid-column: 3;
  }
  section.sivu.s06 .wp-block-group__inner-container > * {
    align-self: center;
  }
  .sivu::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 60vw;
  }
  .sivu.s01 {
    background-image: url("pix/one_trees.jpg");
    padding-block: 10vh;
    align-items: flex-start;
  }
  .sivu.s02 {
    background-image: url("pix/two_trees.jpg");
  }
  .sivu.s03 {
    padding-block: 10vh;
  }
  .sivu.s03::before {
    content: "";
    background-image: url("pix/three_trees.jpg");
  }
  .sivu.s04::before {
    content: "";
    background-image: url("pix/four_vibration.png");
  }
  .sivu.s05::before {
    content: "";
    background-image: url("pix/five_vibration.png");
    background-position: right bottom;
  }
  .sivu.s08::before {
    content: "";
    background-image: url("pix/one_trees.jpg");
    background-size: cover;
    background-position: top left;
  }
  .sivu.s09::before {
    content: "";
    background-image: url("pix/nine_vibration.png");
  }
  .sivu.s10::before {
    content: "";
    background-image: url("pix/ten_soil_abstracts.jpg");
    background-position: right;
  }
  .sivu h1.wp-block-heading {
    font-family: titling-gothic-fb-condensed, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    grid-column: 1;
    color: #fff;
    font-size: var(--fs-6);
    line-height: 0.9;
  }
  .sivu h1.wp-block-heading em,
  .sivu h1.wp-block-heading strong {
    font-weight: 400;
    font-style: normal;
    color: #c9ced9;
    display: block;
    text-transform: uppercase;
  }
  .sivu h2.wp-block-heading {
    font-family: var(--ff_alt);
    text-transform: none;
    grid-column: 3;
    font-size: var(--fs-2);
    line-height: 0.9;
    color: #fff;
    justify-self: end;
    align-self: end;
    grid-row: 3;
  }
  section.sivu .wp-block-group__inner-container > .credit {
    font-family: var(--ff_alt);
    font-size: var(--fs--2);
    grid-column: 1;
    color: #fff;
    padding-top: 2rem;
    padding-left: 0.3rem;
  }
  figure.caption_centered {
    position: absolute;
    bottom: 5vh;
    left: 0;
    right: 30vw;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  figure.caption_centered figcaption {
    position: absolute;
    color: #fff;
    top: 33%;
  }
  section.sivu .body_text .wp-block-group__inner-container {
    display: block;
    background-color: var(--clr_bg);
    padding: 5vh 2rem 10vh 2rem;
    margin-block: 10vh 5vh;
  }
  section.sivu .body_text .wp-block-group__inner-container p {
    margin-bottom: 1rem;
  }
  .sivu.s04 p {
    width: 27vw;
    position: absolute;
    left: 32vw;
    bottom: 5vh;
    background-color: var(--clr_bg);
    padding: 1rem;
  }
  section.sivu.s04 .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    width: 80%;
    position: relative;
  }
  .sivu .narrow {
    width: 25ch;
    align-self: end;
    justify-self: end;
  }
  .sivu .narrow45 {
    width: 45ch;
    align-self: end;
    justify-self: end;
  }
  .sivu .v_cent {
    align-self: end;
    justify-self: end;
  }
  section.sivu.s05 .wp-block-group__inner-container {
    padding-top: 20vh;
    grid-template-rows: auto auto auto 1fr;
    padding-bottom: 20vh;
    grid-gap: 2rem;
    grid-column-gap: 8vw;
  }
  section.sivu.s06 .wp-block-group__inner-container {
    grid-template-columns: var(--gb_margin) 1fr 1fr var(--gb_margin);
  }
  section.sivu.s06 .wp-block-group__inner-container > p {
    grid-column: 2;
    width: 25ch;
    align-self: center;
    justify-self: center;
  }
  section.sivu.s07 .wp-block-group__inner-container {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
  }
  .sivu.s08 h2.wp-block-heading {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--ff_title);
    color: var(--clr_text);
    justify-self: center;
    align-self: start;
    padding-right: 8vw;
    z-index: 2;
  }
  section.sivu .wp-block-group__inner-container > .otsikkovinjetti,
  section.sivu .wp-block-group__inner-container > .introvinjetti {
    font-family: titling-gothic-fb-condensed, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    grid-column: 1;
    color: #c9ced9;
    font-size: var(--fs-5);
    line-height: 0.9;
    z-index: 2;
    width: 20vw;
    grid-row: 2;
    align-self: end;
  }
  .sivu .otsikkovinjetti em,
  .sivu .otsikkovinjetti strong {
    font-weight: 400;
    font-style: normal;
    color: #fff;
    display: block;
    text-transform: uppercase;
  }
  section.sivu .wp-block-group__inner-container > .introvinjetti {
    font-size: var(--fs--2);
    line-height: 1;
    color: #fff;
    grid-row: 3;
    align-self: center;
  }
  section.sivu.s08 .wp-block-group__inner-container {
    grid-template-rows: min-content 1fr 1fr;
    margin-bottom: 5vh;
  }
  section.sivu.s08 .wp-block-group__inner-container > .wp-block-group {
    grid-column: 3;
    grid-row: 2/4;
    align-self: end;
  }
  section.sivu.s08 .wp-block-group__inner-container > .wp-block-group p {
    margin-bottom: 1rem;
  }
  section.sivu
    .wp-block-group__inner-container
    .wp-block-group__inner-container {
    display: block;
  }
  section.sivu.s09 > .wp-block-group__inner-container,
  section.sivu.s10 > .wp-block-group__inner-container {
    align-content: start;
    grid-row-gap: 1rem;
    padding-top: 5vh;
  }
  .vimeo_full {
    width: 100%;
    position: absolute;
    inset: 0;
  }
  .vimeo_full iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }
  .narrow_p3 {
    padding-left: 30ch;
  }
  section.sivu .wp-block-group__inner-container > .theteam {
    grid-column: 1;
    z-index: 2;
    color: green;
    font-family: var(--ff_alt);
    width: 30vw;
    max-width: 450px;
    position: absolute;
  }
  .theteam a {
    color: green;
  }
  .theteam p.theteam {
    font-size: 0.8em;
  }
  .theteam__pics {
    margin-block: 1rem;
  }
  .theteam__pics .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: column;
    background-color: var(--clr_bg);
    padding: 0.5rem;
    gap: 0.5rem;
  }
  .article-body .theteam__pics figure {
    margin: 0;
    padding: 0;
  }
  h3.theteam__title,
  .theteam__caption {
    font-family: var(--ff_alt);
  }
  h3.theteam__title {
    font-size: var(--fs-1);
  }
  .sivu.s01::after {
    bottom: 5vh;
    right: 60px;
    font-size: 4rem;
  }
  .sivu.s03::after {
    bottom: 60px;
    left: 35vw;
    font-size: 4rem;
  }
  .sivu.s04::after {
    bottom: 2vh;
    left: 15vw;
    font-size: 4rem;
  }
  .sivu.s05::after {
    top: 2vh;
    left: 45vw;
    font-size: 4rem;
  }
  .sivu.s08::after {
    top: 5vh;
    right: 4vw;
    font-size: 4rem;
  }
  .sivu.s09::after {
    bottom: -3vh;
    left: 2vw;
    font-size: 7rem;
  }
  .sivu.s10::after {
    top: 45vh;
    right: 4vw;
    font-size: 7rem;
  }
  .s02 iframe {
    max-width: 80%;
  }
}
@media (min-width: 93em) {
  .s02 iframe {
    max-width: 100%;
  }
}

@media (min-width: 64em) {
  .theteam__pics .wp-block-group__inner-container {
    flex-direction: row;
  }
}

p.right {
  text-align: right;
}

.toc-list a {
  text-decoration: none;
}
span.site-description {
  margin-top: 1rem;
}
span.site-description em,
.site-nav__description em,
.section-title em {
  display: block;
  font-style: normal;
}
span.site-description i,
.section-title i {
  font-style: italic;
  font-size: 0.7em;
}
.site-nav__description i {
  font-size: 0.8em;
}