/*
Theme Name: greenhearts
Author: wrkshp
Description: Description
Version: 2.0.0
Text Domain: greenhearts
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

greenhearts 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.

--------------------------------------------------------------*/
@import "normalize.css";

:root {
  /* COLORS: */

  /* Body: */
  --clr_bg: #f7f8f6;
  --clr_bg_alt: var(--clr_spara_posa);
  --clr_bg_sec: #e4e6e3;

  /* Text */
  --clr_text: #202020;
  --clr_post_title: var(--clr_text);
  --clr_nega: var(--clr_bg);

  /* HEL */
  --clr_spara: #009246;
  --clr_spara_nega: #008942;
  --clr_spara_posa: #00ae54;
  --clr_kesa: #ffc61e;
  --clr_hopea: #dedfe1;
  --clr_kulta: #c2a251;
  --clr_kulta_dark: #9e823c;
  --clr_engel: #ffe977;
  --clr_sumu: #9fc9eb;
  --clr_suomenlinna: #f5a3c7;
  --clr_vaakuna: #0072c6;
  --clr_kupari: #00c9a9;
  --clr_sininen: #043a6e;
  --clr_metro: #fd4f00;
  --clr_aikajana: var(--clr_sininen);
  --clr_hero: var(--clr_kulta);

  --clr_hue: 45;
  --clr_sat: 100%;
  --clr_lum: 56%;

  --color-black-5: #f2f2f2;
  --color-black-10: #e6e6e6;
  --color-black-20: #cccccc;
  --color-black-30: #b3b3b3;
  --color-black-40: #999999;
  --color-black-50: #808080;
  --color-black-60: #666666;
  --color-black-70: #4d4d4d;
  --color-black-80: #333333;
  --color-black-90: #1a1a1a;

  --footer-background: var(--clr_kulta);
  --footer-divider-color: var(--clr_kulta_dark);
  --clr_koro: var(--clr_kupari);
  --clr_walkabout: var(--clr_kulta);
  --clr_sidebar: hsl(var(--clr_hue) var(--clr_sat) var(--clr_lum));

  --grad_hue: 149;
  --grad_sat: 100%;
  --grad_lum: 27%;

  --grad_start: hsla(var(--grad_hue), var(--grad_sat), var(--grad_lum), 0.7);
  --grad_end: hsla(var(--grad_hue), var(--grad_sat), var(--grad_lum), 0);

  /* Focus: */
  --focus_shadow: 0 0 0 4px var(--clr_kesa);

  /* Links: */
  --clr_link: var(--clr_text);
  --clr_link_alt: var(--clr_sumu);
  --clr_link_hover: var(--clr_link);
  --clr_focus: var(--clr_kupari);
  --clr_link_hover_alt: var(--clr_sumu);
  --clr_link_active: var(--clr_sumu);
  --clr_link_active_alt: var(--clr_sininen);
  --clr_link_visited: var(--clr_link);

  /* 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: #9fc9eb;

  /* 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_font_color: var(--clr_link);
  --c_button_border_color: var(--clr_link);

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

  /* FONTS: */

  /* Body: */
  --hg_reg: "Helsinki Grotesk Regular", sans-serif;
  --hg_regi: "Helsinki Grotesk Regular Italic", sans-serif;
  --hg_med: "Helsinki Grotesk Medium", sans-serif;
  --hg_medi: "Helsinki Grotesk Medium Italic", sans-serif;
  --hg_bol: "Helsinki Grotesk Bold", sans-serif;
  --hg_boli: "Helsinki Grotesk Bold Italic", sans-serif;
  --hg_bla: "Helsinki Grotesk Black", sans-serif;
  --hg_blai: "Helsinki Grotesk Black Italic", sans-serif;

  /* Body: */
  --font_body: var(--hg_reg);

  /* Body-alt: */
  --font_alt: var(--hg_med);

  /* Title */
  --font_title: var(--hg_med);

  /* Title-alt */
  --font_title_alt: var(--hg_bol);

  /* Links: */
  --font_link: var(--hg_bol);

  /* Icons: */
  --font_icon: "Font Awesome 6 Sharp";

  --fs_body: clamp(1rem, 1rem + 0.15vw, 1.125rem);
  --fs_body-xl: clamp(1.125rem, 1rem + 0.15vw, 1.25rem);

  --fs_mini: 0.7rem;
  --fs_postnav: calc(1rem + 1vw);

  --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);

  --fontsize-heading-xxl: 4rem;
  --fontsize-heading-xl: 3rem;
  --fontsize-heading-xl-mobile: 2.5rem;
  --fontsize-heading-l: 2rem;
  --fontsize-heading-m: 1.5rem;
  --fontsize-heading-s: 1.25rem;
  --fontsize-heading-xs: 1.125rem;
  --fontsize-heading-xxs: 1rem;
  --fontsize-body-s: 0.875rem;
  --fontsize-body-m: 1rem;
  --fontsize-body-l: 1.125rem;
  --fontsize-body-xl: 1.25rem;
  --lineheight-s: 1;
  --lineheight-m: 1.2;
  --lineheight-l: 1.5;
  --lineheight-xl: 1.75;

  /* GRIDS:*/

  /* base: */
  --gb_margin: 6vw; /* Marginaalit */
  --gb_navbar_height: 80px;
  --gb_nav_menu_height: auto;
  --searchbar_width: 320px;
  --searchbar_height: 2rem;
  --gb_body: minmax(24ch, 40ch); /* Leipätekstin leveys */
  --gb_loop_item: minmax(320px, 1fr); /* Itemin leveys loopissa  */
  --gb_colgap: 0;
  --gb_rowgap: 0.75rem;
  --gb_kortti_margin: 2rem;
  --card_img_position: right top;

  /* 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) 1fr 1fr 1fr var(--gb_margin);
  --grid_front: var(--gb_margin) 1fr minmax(320px, 100ch) 1fr var(--gb_margin);
  --grid_le-loop: repeat(auto-fill, var(--gb_loop_item));
  --grid_secloop: 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_gyllene_r: 618fr 382fr;
  --grid_gyllene_2: 382fr 618fr;
  --grid_rcol2: 2fr 3fr 3fr 2fr;
  --grid_kavely: 1fr;
  --repeat6: repeat(6, fr);
  --repeat8: repeat(8, fr);
  --grid_kortti: var(--gb_kortti_margin) 1fr var(--gb_kortti_margin);
  --grid-banneri: 1fr 1fr;
  --grid_nav: auto 1fr 70px;
  --grid_hero_container: var(--gb_margin) 1fr var(--gb_margin);

  /* grid-column: */
  --col_all: 1 / -1;
  --col_cover_center: 2 / 5;
  --col_margins: 2 / -2;
  --col_art_body: 4;
  --col_art_body_plus: 3 / -3;
  --col_kavely: 2 / -2;
  --ratio: calc(var(--gb_body) * 0.5625);
  --col_kortti: 1 / -1;
  --col_kortti_title: 2;
  --col_kortti_body: 2;
  --col_content: 2 / -2;

  /* grid-row    */
  --grow_secloop: 1fr 1fr;
  --grow_kortti: 50% min-content 1fr 80px;

  /* width & height */
  --w_sidebar: 40vw;

  /* OTHER ELEMENTS :*/
  --image-position: center center;

  /* HDS spacing :*/
  --spacing-layout-2-xs: 1rem; /* 16px */
  --spacing-layout-xs: 1.5rem; /* 24px */
  --spacing-layout-s: 2rem; /* 32px */
  --spacing-layout-m: 3rem; /* 48px */
  --spacing-layout-l: 4rem; /* 64px */
  --spacing-layout-xl: 6rem; /* 96px */
  --spacing-layout-2-xl: 8rem; /* 128px */
  --spacing-4-xs: 0.125rem; /* 2px */
  --spacing-3-xs: 0.25rem; /* 4px */
  --spacing-2-xs: 0.5rem; /* 8px */
  --spacing-xs: 0.75rem; /* 12px */
  --spacing-s: 1rem; /* 16px */
  --spacing-m: 1.5rem; /* 24px */
  --spacing-l: 2rem; /* 32px */
  --spacing-xl: 2.5rem; /* 40px */
  --spacing-2-xl: 3rem; /* 48px */
  --spacing-3-xl: 3.5rem; /* 56px */
  --spacing-4-xl: 4rem; /* 64px */
  --spacing-5-xl: 4.5rem; /* 72px */
  --fontsize-heading-xxl: 4rem; /* 64px */
  --fontsize-heading-xl: 3rem; /* 48px */
  --fontsize-heading-xl-mobile: 2.5rem; /* 40px */
  --fontsize-heading-l: 2rem; /* 32px */
  --fontsize-heading-m: 1.5rem; /* 24px */
  --fontsize-heading-s: 1.25rem; /* 20px */
  --fontsize-heading-xs: 1.125rem; /* 18px */
  --fontsize-heading-xxs: 1rem; /* 16px */
  --fontsize-body-s: 0.875rem; /* 14px */
  --fontsize-body-m: 1rem; /* 16px */
  --fontsize-body-l: 1.125rem; /* 18px */
  --fontsize-body-xl: 1.25rem; /* 20px */
  --font-default: HelsinkiGrotesk, Arial, sans-serif;
  --lineheight-s: 1;
  --lineheight-m: 1.2;
  --lineheight-l: 1.5;
  --lineheight-xl: 1.75;
  --arrow-icon-color: var(--color);
  --arrow-icon-size: 128px;
  --background-color: var(--color-white);
  --color: var(--color-black-90);
  --diagonal-koros-position: 45%;
  --horizontal-padding-large: var(--spacing-layout-xs);
  --horizontal-padding-medium: var(--spacing-layout-xs);
  --horizontal-padding-small: var(--spacing-layout-xs);
  --horizontal-padding-x-large: var(--spacing-layout-xs);
  --image-position: center center;
  --koros-color: var(--color-white);
  --koros-height: 85px;
  --padding-horizontal: var(--horizontal-padding-small);
  --padding-vertical: var(--spacing-xl);

  --lang-direction: 1;
}
@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_postnav: calc(1.5rem + 2vw);
    --grid_kavely: 5fr 1fr;
    --grid_nav: auto max-content 1fr min-content 70px;
  }
}
@media (min-width: 64em) {
  :root {
    --gb_colgap: 0.75rem;
    --gb_nav_menu_height: var(--gb_navbar_height);
    --grid_hero_container: var(--gb_margin) 1fr 1fr var(--gb_margin);
    --grid-banneri: 328fr 618fr;
  }
}
@media (min-width: 75em) {
  :root {
    --gb_colgap: 1rem;
  }
}
@media (min-width: 90em) {
  :root {
    --grid_secloop: 2fr 1fr 1fr;
    --grid_article: var(--gb_margin) 1fr 2fr var(--gb_body) 2fr 1fr
      var(--gb_margin);
    --grid_kavely: 4fr 1fr;
    --col_kavely: 3 / -3;
    --gb_kortti_margin: 4rem;
    --col_kortti: 2 / -2;
    --col_content: 3 / -3;
  }
}
@media (min-width: 105em) {
  :root {
    --fs_postnav: 3.6rem;
  }
}
@media (min-width: 120em) {
  :root {
    --gb_colgap: 1.5rem;
    --col_kortti: var(--col_art_body_plus);
  }
}
@media only screen and (min-width: 64em) {
  :root {
    --grid_kortti: var(--gb_kortti_margin) 1fr var(--gb_kortti_margin);
  }
}
@media only screen and (min-width: 48em) and (orientation: portrait) {
}
footer {
  --clr_link: var(--clr_sininen);
  --clr_link_hover: var(--clr_bg);
}

article header {
  --clr_link: var(--clr_nega);
  --clr_link_hover: var(--clr_alt_bg);
}
.le-loop,
.kavely-loop {
  --clr_post_title: var(--clr_text);
  --clr_post_author: var(--clr_bg);
}
.taulu_kategoria-jukan-jaljilla,
.taulu_kategoria-jukkas-stig,
.taulu_kategoria-jukkas-trail {
  --clr_post_title: var(--clr_sininen);
}
.taulu_kategoria-pirjon-polku,
.taulu_kategoria-pirjos-stig,
.taulu_kategoria-pirjos-path {
  --clr_post_title: var(--clr_metro);
}
.taulu_kategoria-jukan-jaljilla,
.taulu_kategoria-jukkas-stig,
.taulu_kategoria-jukkas-trail,
.taulu_kategoria-pirjon-polku,
.taulu_kategoria-pirjos-stig,
.taulu_kategoria-pirjos-path {
  --grid_kortti: var(--gb_kortti_margin) 1fr var(--gb_kortti_margin);
  --col_kortti_title: 2;
  --col_kortti_body: 2;
  /* isompaan kokoon tama */
  --grow_kortti: var(--gb_kortti_margin) 50% 1fr 80px;
  --card_img_position: right top;
}
@media (min-width: 64em) {
  .taulu_kategoria-jukan-jaljilla,
  .taulu_kategoria-jukkas-stig,
  .taulu_kategoria-jukkas-trail,
  .taulu_kategoria-pirjon-polku,
  .taulu_kategoria-pirjos-stig,
  .taulu_kategoria-pirjos-path {
    --grid_kortti: var(--gb_kortti_margin) 1fr 1fr 1fr 1fr 1fr 1fr
      var(--gb_kortti_margin);
    --col_kortti_title: 2 / 6;
    --col_kortti_body: 2 / 4;
    /* isompaan kokoon tama */
    --grow_kortti: var(--gb_kortti_margin) min-content 1fr 80px;
    --card_img_position: right top;
  }
}
.taulu_kategoria-maunula-nature-trail {
  --card_img_position: right center;
}

@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;
    }
  }
}
.hero.featured {
  --grad_hue: 209;
  --grad_sat: 93%;
  --grad_lum: 22%;
}
.kupari,
.hero.featured.kupari {
  --grad_hue: 170;
  --grad_sat: 100%;
  --grad_lum: 39%;
}
.sininen {
  --grad_hue: 209;
  --grad_sat: 93%;
  --grad_lum: 22%;
}
.musta,
.hero.featured.musta {
  --grad_hue: 0;
  --grad_sat: 0%;
  --grad_lum: 0%;
}
.spara,
.hero.featured.spara {
  --grad_hue: 149;
  --grad_sat: 100%;
  --grad_lum: 54%;
}
.hanami {
  --grad_hue: 316;
  --grad_sat: 100%;
  --grad_lum: 22%;
}
/* === === === === === #LINKS === === === === === */

a {
  color: var(--clr_link);
  text-decoration: none;
}
a:visited {
  color: var(--clr_link);
}
a:hover,
a:active {
  color: var(--clr_link_hover);
}
a:focus-visible {
  outline: 3px var(--clr_focus) solid;
  outline-offset: 3px;
}
/* details:focus,
details:focus-visible {
  outline: 3px var(--clr_focus) solid;
  outline-offset: 3px;
} */
::-moz-focus-inner {
  border: 0;
}
a:hover,
a:active {
  outline: 0;
  text-decoration: underline;
  /* text-decoration-color: var(--clr_link_hover); */
  text-underline-offset: 0.2em;
}
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));
}
a.front-featured__link::after,
a.front-hero__link::after,
a.nosto__link::after {
  content: "\f061";
  padding-left: 0.4em;
  font-family: var(--font_icon);
  font-weight: 400;
}
a[target="_blank"]::after {
  content: "\e09f";
  padding-left: 0.25em;
  font-family: "Font Awesome 6 Sharp";
  font-weight: 900;
  text-decoration: none;
  font-size: 0.9em;
}
a.patsaspuhuu::after {
  content: "";
}
.hel a[target="_blank"]::after {
  display: none;
}
button:-moz-focusring,
/* [type="button"]:-moz-focusring, */
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 3px var(--clr_kupari) solid;
  outline-offset: 0px;
}
.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;
}
.content-link:focus {
  background-color: var(--clr_bg);
  color: var(--clr_sininen);
  height: auto;
  position: absolute;
  top: 4px;
  left: 4px;
  width: auto;
  padding: 10px;
  z-index: 999999;
}
.post-nav a {
  display: block;
}
header a,
footer a,
#cover a {
  text-decoration: none;
}
article a {
  text-decoration: underline var(--clr_link);
  text-underline-offset: 0.2em;
}
article a:hover {
  text-decoration: underline var(--clr_link_hover);
  text-underline-offset: 0.2em;
}
a.loop_links {
  margin-top: 1rem !important;
  align-self: flex-start;
}
.glossaryLink {
  cursor: pointer;
}
#sections a {
  text-decoration: none;
}

/* === === === === === #nav-links & post-nav === === === === === */

.post-nav > * {
  position: fixed;
  bottom: 34vh;
  z-index: 11;
}
.next-post {
  left: 1vw;
}
.prev-post {
  right: 1vw;
}
.next-post a i,
.prev-post a i {
  font-size: var(--fs_postnav);
}
.post-nav a:hover,
.post-nav a:hover i {
  color: var(--clr_link_hover);
}
.post-nav a {
  transform: scale(1);
  transition: transform 250ms ease-in-out;
}
.post-nav a:hover,
.post-nav a:focus {
  transform: scale(1.2);
  outline: 0;
}
.post-nav a:focus {
  outline: 0;
}

/* === === === === === #COOKIES === === === === === */

.cookie_banner {
  font-weight: 400;
  display: grid;
  opacity: 0.97;
  grid-template-columns: 6vw 1fr 6vw;
  font-size: 14px;
  font-family: var(--font_body);
  background: var(--c_background_color);
  position: fixed;

  /* Banner is in the bottom: */
  bottom: -100%;

  /* Banner is in the top */
  /* top:                             -100%;*/

  left: 0;
  width: 100%;

  /* How fast the banner moves when it gets activated: */
  transition: 500ms;
  z-index: 999999;
}
@media (min-width: 1024px) {
  .cookie_banner {
    grid-template-columns: 6vw 3fr 211px 6vw;
  }
  .cookie_box_1 {
    grid-column: 2/3;
  }

  .cookie_box_2 {
    grid-column: 3/4 !important;
    position: absolute;
    right: calc(50% - 94px);
    top: calc(50% - 25px);
  }
}

.cookie_banner.cookie_active {
  /* Banner is in the bottom: */
  bottom: 0;

  /* Banner is in the top: */
  /* top:                             0; */
}
.cookie_banner {
  margin: 0 auto;
  color: var(--c_paragraph_color);
  min-height: 80px;
  line-height: 26px;
}
.cookie_banner p {
  margin-bottom: 6px !important;
  margin-top: 6px;
}
.cookie_box_1 {
  padding: 20px;
  margin: 0 auto;
  grid-column: 2/3;
}
.cookie_box_2 {
  padding-top: 2px;
  padding-bottom: 16px;
  padding-left: 0px;
  padding-right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 2/3;
  /* grid-row:                           2; */
}
.cookie_privacy {
  font-weight: 300;
  color: var(--c_link_color);
  text-decoration: underline;
}
.cookie_button {
  font-weight: 300;
  background: var(--c_button_background_color);
  color: var(--c_button_font_color) !important;
  text-decoration: none;
  /* font-style:                         italic; */
  padding: 10px 80px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid var(--c_button_border_color);
  cursor: pointer;
  text-align: center;
  transition: 0.3s;
  font-family: var(--font_title);
  text-transform: uppercase;
}
/* BUTTON HOVER EFFECT  */
.cookie_button:hover {
  background-color: var(--c_button_hover_background_color);
  color: var(--c_button_hover_font_color) !important;
  border: 1px solid var(--c_button_hover_border_color);
}

/* === === === === === #FIX NORMALIZE === === === === === */

body,
button,
input,
select,
optgroup,
textarea {
  color: var(--clr_text);
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}
html,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--clr_bg);
  min-height: 100vh;
}
.post,
.page {
  margin: 0;
}
article.post {
  margin-bottom: 2rem;
}
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;
}
/* * + * {
    margin-top:1em;
}
#map * + *,
blockquote * + * {
    margin:0;
}
#masthead, #content, .wrks-nav-bg, .nav-header *, div.content, .cover-meta > *, #sections, #sections * , .loop-item + .loop-item {
    margin-top:0;
} */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
}
b,
strong {
  font-weight: normal;
  font-family: var(--hg_bol);
}
li.post {
  margin: 0;
}

/* === === === === === #GRID BASE === === === === === */

body {
  display: grid;
  grid-template-rows: var(--gb_navbar_height) auto auto;
  grid-gap: 0;
}
header {
  grid-row: 1;
}
#content {
  grid-row: 2;
}
footer {
  grid-row: 3;
}
#main,
article,
.article-body,
.article-body > figure,
.hero,
.hero__container,
.category-head {
  display: grid;
  grid-template-columns: var(--grid_article);
  grid-column-gap: var(--gb_colgap);
  grid-row-gap: var(--gb_rowgap);
}
.hero__container {
  grid-template-columns: var(--grid_hero_container);
}
.front-main {
  display: grid;
  grid-template-columns: var(--grid_front);
  grid-column-gap: var(--gb_colgap);
  grid-row-gap: var(--gb_rowgap);
}
.single article .article-body {
  grid-column-gap: var(--gb_colgap);
  grid-row-gap: var(--gb_rowgap);
}
#main {
  grid-row-gap: 0;
}
/* #main > * {
    grid-column: var(--col_margins);
} */
@media (min-width: 90em) {
  /* #main > * {
        grid-column: var(--col_art_body_plus);
    } */
}

#sections {
  grid-column: 1 / -1;
  padding: 0 var(--grid_margin);
  /* margin: 0 0 -4rem 0; 
    background-color: var(--clr_alt_bg); */
  /* margin-top:-35vh; */
  /* border-top: 1px solid var(--clr_link);
    border-top-style: dashed; */
  z-index: 222;
}
#main > article,
#main .divider,
#about > *,
article .article-body,
article .toc-body {
  grid-column: var(--col_all);
}
.front-primary,
.map-wrapper.fullw,
.infomap.fullw,
.category-head {
  grid-column: 1/-1;
  /* height: 66vh; */
  position: relative;
  margin-top: 0;
}
.hero,
.hero__container {
  grid-column: 1/-1;
  min-height: 40vh;
  position: relative;
  margin-top: 0;
}
.hero.no-image,
.hero.no-image .hero__container {
  height: 35vh;
}
.front-primary-hero {
  grid-column: 1/-1;
  min-height: 66vh;
  position: relative;
  margin-top: 0;
}
.breadcrumb__container {
  grid-column: 2 / -2;
}
.hero.kavely {
  grid-column: 1/-1;
  grid-template-rows: 1fr 1px auto;
  position: relative;
  margin-top: -45px;
}
.kavely__content {
  grid-column: 1 /-1;
  display: grid;
  grid-template-columns: var(--grid_article);
  grid-gap: 2rem;
  /* background-color: var(--clr_walkabout);
  margin-top: -12px;
  padding-block: 2rem; */
}
.kavely__content .breadcrumb__container {
  grid-column: 2 / -2;
}
.kavely__card {
  grid-column: 3 / 5;
}
.hero__container {
  grid-template-rows: 1fr auto;
  height: auto;
}
.hero__background {
  grid-row: 1;
  width: 100%;
  height: 36vh;
  grid-column: 1/-1;
}
.hero__image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: var(--image-position);
  object-position: var(--image-position);
}
.hero__content {
  grid-column: 2;
  grid-row: 2;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  z-index: 2;
}
.hero__card {
  background-color: var(--clr_bg);
  padding: var(--padding-vertical) var(--padding-horizontal);
}
@media (min-width: 46em) {
  .hero.kavely {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1px;
    grid-row-gap: 0;
    height: 50vw;
    max-height: 80vh;
  }
  /* .hero__background {
        height: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        position: absolute;
        width: auto;
        z-index: -1;
    } */
  .front-primary-hero {
    height: 66vh;
  }
}
@media (min-width: 62em) {
  .hero,
  .hero__container,
  .map-wrapper.fullw {
    height: 66vh;
  }
  .hero__container {
    padding: 0 0 4rem 0;
    grid-template-rows: 1fr;
  }
  .hero__content {
    grid-row: 1;
  }
  .hero__background {
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
  }
  .category-kavely .hero__background {
    z-index: 1;
  }
}
.front-about {
  grid-column: var(--col_art_body_plus);
  height: 29vh;
  position: relative;
  max-width: 100ch;
  margin: 0 auto;
}
.category-head,
.page-article .hero {
  height: 30vh;
}
.category-loop,
.article-about,
.article-map,
.kavely-body,
.park-index {
  grid-column: var(--col_content);
}
.hero.no-image {
  background-color: var(--clr_kupari);
}
.hero.kavely {
}
.single-taulu .hero {
  height: 31vh;
}
.category-head {
  background-color: var(--clr_kupari);
}
.hero.no-image.kukinta {
  background-color: var(--clr_kesa);
}
.linkbox {
  cursor: pointer;
  position: relative;
  --icon-size: var(--spacing-layout-m);
}
.linkbox:hover {
  text-decoration: underline;
}
.linkbox:focus-within {
  outline: var(--clr_link_hover) 3px solid;
}
.linkbox.category-kavely {
  background-color: var(--clr_walkabout);
}
.linkbox__content {
  padding-top: var(--spacing-s);
  padding-bottom: var(--spacing-4-xl);
  padding-left: var(--spacing-s);
  padding-right: var(--spacing-s);
}
.linkbox__image {
  width: 100%;
  height: auto;
  padding: 31.25% 0;
  position: relative;
}
.linkbox__parkwalk {
  width: 100%;
  height: auto;
  padding-top: 31.25%;
  position: relative;
}
.linkbox__image img {
  display: block;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1;
}
.linkbox__heading {
  font-size: var(--fs-1);
  font-weight: var(--hg_med);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-s);
}
.linkbox:hover {
  text-decoration: underline;
}
.linkbox__text {
}
.linkbox__link {
  color: var(--clr_text);
  display: inline-block;
  height: 100%;
  left: 0;
  line-height: var(--lineheight-l);
  position: absolute;
  top: 0;
  width: 100%;
}
.linkbox__icon {
  display: inline-block;
  height: var(--icon-size);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: auto;
  mask-size: auto;
  width: var(--icon-size);
  bottom: var(--spacing-s);
  left: var(--spacing-s);
  position: absolute;
  vertical-align: bottom;
}
.linkbox__icon,
.linkbox__icon:hover {
  color: var(--clr_text);
}

@media (min-width: 90em) {
  .home .linkbox__image:not(.linkbox__image--sticky) {
    padding: 62.5% 0;
    position: relative;
  }
}

.linkbox:focus .linkbox__icon,
.linkbox:hover .linkbox__icon {
  transition: transform 0.2s linear;
  transform: scaleX(1) translateX(8px);
  transform: scaleX(var(--lang-direction, 1)) translateX(8px);
}
@media (prefers-reduced-motion) {
  .linkbox__icon:focus,
  .linkbox__icon:hover {
    transform: scaleX(1);
    transform: scaleX(var(--lang-direction, 1));
  }
}
.linkbox__icon {
  transition: transform 0.2s linear;
  margin-left: -4px;
  transform: scaleX(1);
  transform: scaleX(var(--lang-direction, 1));
}
/* @media (prefers-reduced-motion) {
    .linkbox__icon {
      transition: none;
    }
  } */

.article-title-wrapper,
.category-head__title-wrapper {
  grid-column: 2 / 5;
  display: grid;
  grid-template-rows: 1fr min-content 5vh;
}
.article-title-wrapper.kavely {
  grid-template-rows: 1fr;
}
.category-head__title-wrapper {
  grid-column: var(--col_kavely);
  display: grid;
  grid-template-columns: var(--grid_kavely);
  grid-template-rows: 1fr min-content min-content 5vh;
  align-items: end;
  /* padding-bottom: 5vh; */
}
.category-head__title-wrapper > * {
  grid-column: 1;
}
.category-head__title {
  grid-row: 2;
}
/* .kavely .article-title.kavely-title {
    grid-column:2;
    grid-row:2;
    color: var(--clr_text);
} */
.article-title-wrapper.kavely {
  grid-row: 3;
  grid-column: var(--col_kavely);
  display: grid;
  grid-template-columns: calc(var(--gb_margin) + var(--gb_colgap)) 1fr;
  align-items: end;
}
.map-container.kavely {
  grid-column: 1 / -1;
  grid-row: 1;
}
.koro.aalto.valkea.kavely {
  grid-row: 2;
}
.category-loop.kavely {
  margin-top: 0;
}
@media (min-width: 46em) {
  .hero.kavely {
    background-color: var(--clr_kupari);
  }
  /* .article-title-wrapper.kavely {
        grid-row:1;
        grid-column:1;
        grid-template-rows: 1fr min-content 5vh;
        margin: 2rem 0 0 0;
    }
    .map-container.kavely {
        grid-row:1;
        grid-column:2;
    }
    .koro.aalto.valkea.kavely {
        grid-row:3;
        margin-top:0;
    } */
  .category-loop.kavely {
    margin-top: 2rem;
  }
}
/* .category-kartta .map-wrapper, .category-kartta-sv .map-wrapper, .category-kartta-en .map-wrapper
.category-kavely .map-wrapper, .category-kavely-sv .map-wrapper, .category-kavely-en .map-wrapper {
    grid-row:1;
}
.category-kartta .koro, .category-kartta-sv .koro, .category-kartta-en .koro,
.category-kavely .koro, .category-kavely-sv .koro, .category-kavely-en .koro {
    grid-row:2;
}
.category-kartta .article-title, .category-kartta-sv .article-title, .category-kartta-en .article-title,
.category-kavely .article-title, .category-kavely-sv .article-title, .category-kavely-en .article-title {
    grid-row:3;
}
.category-kartta .article-body, .category-kartta-sv .article-body, .category-kartta-en .article-body {
    grid-row:4;
}
.category-kartta .article-about, .category-kartta-sv .article-about, .category-kartta-en .article-about {
    grid-row:5;
} */
/* .article-title {
    grid-row:2;
    color:var(--clr_bg);
    z-index:222;
} */
/* .article-title.kartta,
.article-title.kavely, 
.category-head__title,
.page-article .no-image .article-title,
.article-nosto .no-image .article-title {
    grid-row:2;
    color:var(--clr_sininen);
    z-index:222;
    text-shadow: none;
} */
/* .article-title.kavely {
    text-shadow: 0px 0px 10px rgba(0,143,112,0.5);
} */
/* .featured .article-title {
    text-shadow: 0px 0px 10px rgba(0,0,0,0.7);
}
.hero.featured {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position:relative;
    isolation:isolate;
} */
/* .hero.featured::before {
    content: '';
    position: absolute;
    top: 30%;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, hsla(var(--grad_hue),var(--grad_sat),var(--grad_lum),0.7), hsla(var(--grad_hue),var(--grad_sat),var(--grad_lum),0));
    mix-blend-mode: multiply;
} */
.hero.featured h1 {
  grid-column: 2;
  align-self: center;
}
@media only screen and (min-width: 64em) {
  .hero.featured .title-wrapper {
    display: grid;
    grid-template-columns: var(--grid_article);
    grid-gap: 20px;
  }
  .hero.featured h1 {
    grid-column: 2 / 6;
  }
}
.map-wrapper,
.article-map {
  height: 36vh;
}
.article-map canvas {
  width: 100% !important;
  height: 40vh !important;
}
#map {
  height: 100%;
}
.map-wrapper.fullw {
  grid-column: 1 / -1;
}
.map-wrapper,
.map-wrapper *,
.map-wrapper * + * .article-map,
.article-map *,
.article-map * + * {
  margin-top: 0;
}
/* .single .thmb-img {
    grid-row: 4;
    grid-column: 4;
    width: 100%;
    z-index: 999;
}

@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 > h1,
article > .post-title {
  grid-column: var(--col_art_body_plus);
}
/* article > .topics {
    grid-row: 1;
    grid-column: var(--col_art_body_plus);
} */
article .article-body {
  grid-column: var(--col_all);
}
/* article.category-kavely .article-body {
    grid-row:4;
} */
/* .single #map {
    grid-row:4;
} */
.article-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
  background-color: var(--clr_kupari);
}
.article-about .post-thumbnail {
  height: 100%;
}
.article-about__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 1rem 1rem 0;
}
.article-about__credit {
  grid-column: 2;
  grid-row: 2;
}
.article-about__thumbnail img {
  height: 100%;
  display: block;
  object-fit: cover;
}
article .article-body > * {
  grid-column: var(--col_art_body);
}
@media only screen and (orientation: portrait) and (max-width: 767px) {
  .single-post article header {
    height: calc(2rem + 120vw);
    grid-template-columns: var(--grid_main);
    grid-template-rows: 2rem 120vw;
    grid-gap: 0;
  }
  .single-post article header > * {
    grid-column: 2;
  }
  .single-post article.tag-teema header > * {
    grid-column: 4;
  }
  .single-post 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;
  }
}
.park-index {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 50em) {
  .park-index {
    flex-direction: row;
  }
  .park-index__column {
    flex-grow: 1;
    flex-basis: 25%;
  }
}
.jetpack-video-wrapper {
  margin-bottom: 0.4em !important;
}
.error-404,
.not-found,
.results-loop {
  grid-column: 2/-2;
}

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

.front-secondary {
  grid-column: var(--col_content);
  grid-row: 4;
}
.front-nostot {
  grid-column: 1/-1;
  grid-row: 5;
}
.category-loop {
  grid-column: var(--col_content);
  margin-top: 2rem;
}
.secondary-loop,
.le-loop,
.kavely-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;
}
.kavely-intro {
  grid-column: 1;
}
@media (min-width: 46em) {
  .kavely-intro,
  .kavely-body-container {
    grid-column: 1 / 3;
  }
  .kavely-body-container {
    margin-top: 2rem;
  }
}
.secondary-loop {
  grid-template-columns: var(--grid_secloop);
  grid-template-rows: var(--grow_secloop);
}
.nostot {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  -webkit-margin-start: 0;
  -webkit-padding-start: 0;
  -moz-padding-start: 0;
  padding-inline-start: 0;
  min-height: 40vh;
  margin-top: 3rem;
}
.nosto__item.nothmb {
  background-color: var(--clr_kulta);
}
.nosto__item.nothmb:nth-child(2) {
  background-color: var(--clr_bg);
}
.nosto__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  height: 100vw;
}
.nosto__img {
  width: 100%;
  height: 100%;
  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;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.nosto__title {
  margin: 2rem;
  font-size: var(--fs-2);
  color: var(--clr_bg);
  text-align: center;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.nosto__body {
  font-family: var(--hg_med);
  font-size: var(--fs-2);
  line-height: 1.2;
  color: var(--clr_nega);
  text-align: center;
  margin: 2rem 3rem 0 3rem;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.nothmb .nosto__body {
  color: var(--clr_sininen);
  text-shadow: none;
}
.nosto__link {
  display: block;
  font-size: var(--fs-1);
  margin-top: 1rem;
  --clr_link: var(--clr_bg);
  --clr_link_hover: var(--clr_kesa);
}
.nothmb .nosto__link {
  font-size: var(--fs--1);
  --clr_link: var(--clr_sininen);
  --clr_link_hover: var(--clr_kesa);
}

/* a.nosto__sticky-link {
    color: var(--clr_bg);
}
a.nosto__sticky-link::before {
content:'';
} */
.nosto__link:focus,
.nosto__sticky-link:focus {
  outline: 0;
}
.nosto__item.nothmb:nth-child(1) .nosto__link:hover,
.nosto__item.nothmb:nth-child(1) .nosto__link:focus {
  color: var(--clr_bg);
  text-decoration-color: var(--clr_bg);
}
@media (min-width: 48em) {
  .nosto__item {
    height: 50vw;
  }
}
@media (min-width: 64em) {
  .nostot {
    flex-direction: row;
  }
  .nosto__item {
    height: auto;
    flex-basis: 50%;
  }
}
@media (min-width: 68em) {
  .nosto__body {
    max-width: 60%;
  }
}
/* .sec-loop__item,
.le-loop li {
    display:flex;
    flex-direction:column;
    align-content: flex-end;
    justify-content: flex-end;
    align-items: flex-end;
    overflow: hidden;
} */
.sec-loop__item {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  justify-content: flex-end;
  align-items: flex-end;
  overflow: hidden;
}
.sec-loop__item {
  width: 100%;
  height: auto;
  padding: 50% 2rem;
  background-size: cover;
  background-position: center center;
  border-radius: 3px 0 0 3px;
  position: relative;
  overflow: hidden;
}
.sec-loop--sticky {
  padding: 25% 2rem;
}
.sec-loop__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;
}
.sec-loop__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 2rem;
  font-size: var(--fs-1);
  color: var(--clr_bg);
  text-align: center;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.sec-loop__item::after {
  content: "";
  position: absolute;
  top: 30%;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(4, 58, 110, 1), rgba(4, 58, 110, 0));
  mix-blend-mode: multiply;
}
.loop-item__content {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  isolation: isolate;
  overflow: hidden;
}
.loop-item__content img {
  height: 100%;
  width: 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, background-color 250ms ease-in;
  overflow: hidden;
}
.tax-taulu_kategoria .loop-item__content img {
  object-position: top;
}
.kavely-loop li a:hover img,
.sec-loop__item a:hover img,
.le-loop li a:hover img,
.kavely-loop li a:focus img,
.sec-loop__item a:focus img,
.le-loop li a:focus img {
  transform: scale(1.2);
}
.kavely-loop li a:focus h2,
.sec-loop__item a:focus h2,
.le-loop li a:focus h2 {
  color: var(--clr_kesa);
}
.cat-loop .loop-item.category-kavely .loop-item__content,
.cat-loop .loop-item.category-kavely-en .loop-item__content {
  background-color: var(--clr_kupari);
  transform: scale(1);
  transition: transform 250ms ease-in-out, background-color 0.5s ease;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.category-kavely .loop-title,
.category-kavely-en .loop-title {
  color: var(--clr_text);
  text-shadow: none;
  position: relative;
}
.category-kavely .loop-title em::after,
.category-kavely-en .loop-title em::after {
  content: "\f061";
  padding-left: 0.4em;
  font-family: var(--font_icon);
  font-weight: 400;
  display: inside-block;
}
.cat-loop .loop-item.category-kavely:hover h2,
.cat-loop .loop-item.category-kavely:hover a,
.cat-loop .loop-item.category-kavely-en:hover h2,
.cat-loop .loop-item.category-kavely-en:hover a {
  color: var(--clr_sininen);
}
.cat-loop .loop-item.category-kavely .loop-item__content:hover,
.cat-loop .loop-item.category-kavely-en .loop-item__content:hover {
  background-color: var(--clr_nega);
}
.cat-loop .loop-item.category-kavely .loop-item__content:hover,
.cat-loop .loop-item.category-kavely-en .loop-item__content:hover {
  transform: scale(1.15);
}
.cat-loop .loop-item.category-kavely h2::before,
.cat-loop .loop-item.category-kavely-en h2::before {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(pix/sydan_sininen.png);
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.loop-item__content-wrapper {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.loop-item__content-wrapper::before {
  content: "";
  background: linear-gradient(0deg, rgba(4, 58, 110, 0.9), rgba(4, 58, 110, 0));
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  mix-blend-mode: multiply;
}
.tag-historia .loop-item__content-wrapper::before {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
.cat-loop .category-kavely .loop-item__content img,
.cat-loop .category-kavely-en .loop-item__content img {
  max-width: 50%;
  object-fit: contain;
  object-position: bottom;
  margin: 0 auto;
  position: relative;
}
.results-loop .category-kavely .loop-item__content img,
.results-loop .category-kavely-en .loop-item__content img {
  max-width: 60%;
  object-fit: contain;
  object-position: top;
  margin: 0 auto;
}
.results-title {
  margin-block: 2rem;
}
.category-kavely .loop-item__content-wrapper::before,
.category-kavely-en .loop-item__content-wrapper::before {
  background: none;
  mix-blend-mode: normal;
}
.results-loop .category-kavely .loop-item__content-wrapper::before,
.results-loop .category-kavely-en .loop-item__content-wrapper::before {
  background: none;
}
.loop-title {
  text-align: center;
  margin: 2rem;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
}
.le-loop img,
article header img {
  height: 100%;
}
.loop-item {
  width: 100%;
  height: auto;
  padding: 50% 2rem;
  position: relative;
  align-content: stretch;
  overflow: hidden;
}
.loop-item.taulu {
  padding: 33% 2rem;
}
.hero__title span,
.kavely__title span,
.le-loop li span {
  display: block;
  font-size: 0.5em;
  font-family: var(--hg_reg);
  text-transform: uppercase;
  margin-block: 0.2em;
}
.le-loop .entry-content a {
  z-index: 22;
}

/* === === === === === #FOOTER === === === === === */

footer {
  --footer-background: var(--clr_kulta);
  --footer-color: var(--clr_text);
  --footer-divider-color: var(--clr_kulta_dark);
  --footer-focus-outline-border-radius: 0px;
  --footer-focus-outline-color: var(--color-coat-of-arms);
  --footer-focus-outline-width: 3px;
  --footer-padding: var(--spacing-l) var(--spacing-m) 0;
  --clr_link: var(--clr_text);
  --clr_link_hover: var(--clr_text);
  --clr_koro: var(--footer-background);
  --clr_focus: var(--clr_bg);
  color: var(--footer-color);
}
footer {
  margin: 4rem 0 0 0;
  padding: 0 0 4rem 0;
  display: grid;
  grid-template-columns: var(--gb_margin) 1fr var(--gb_margin);
  background-color: var(--footer-background);
}
.footer__content {
  grid-column: 2;
  padding-top: 4rem;
}
.footer__title {
  font-size: var(--fontsize-heading-m);
  line-height: var(--lineheight-l);
}
.footer__divider {
  background-color: var(--footer-divider-color);
  border: 0;
  height: 1px;
  margin: 0 0 var(--spacing-xs);
  width: 100%;
}
.footer__logo {
  height: 40px;
}
.footer__base {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  padding-bottom: var(--spacing-m);
  gap: var(--spacing-2-xs);
}
footer a {
  text-decoration: underline;
}
/* footer ul {
    grid-column:2;
    display:flex;
    flex-direction: column;
    list-style: none;
    -webkit-margin-start: 0;
    -webkit-padding-start: 0;
    -moz-padding-start: 0;
    }
footer ul li {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    flex-direction:column;
    margin: 1rem;
}
footer ul li:nth-child(1) {
    grid-column:1; 
}
footer ul li:nth-child(2) {
    grid-column:2 / 4; 
}
footer p {
    text-align: center;
}
footer p, footer a {
    font-size:var(--fs--2);
}
footer a {
    text-decoration:underline;
    text-decoration-style: dashed;
} 
footer .links a, footer .about p {
    font-size: var(--fs--1);
    font-family: var(--hg_bol);
    margin-top: 0;
    text-decoration:none;
}
footer .copyr p {
    text-transform: uppercase;
}
li.about p.site-about {
    font-family: var(--hg_bol);
    font-size:var(--fs-1);
}
@media (min-width: 768px) {
    footer ul {
        display:grid;
        grid-gap: 3rem;
        }
    footer ul li {
        display: flex;
        align-content: center;
        align-items: flex-start;
        justify-content: center;
        flex-direction:column;
        margin:0;
    }
    footer ul li a, footer ul li p {
        text-align:left
    }
    
}
@media (min-width: 1024px) {
    .single button#abstract-toggler {
        margin-left:-20px;
    }
}
@media (min-width: 1360px) {
    footer ul {
        display:grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 2rem;
        }
}
@media only screen and (orientation: landscape) {
    div.feature-img {
        width:100vw;
        height:70vh;
        background-position: center;
        background-size: cover;
    }
}
section.divider, footer {
    border-top: 1px solid var(--clr_link);
    border-top-style: dashed;
} */
/* === === === === === #TYPOGRAFIA === === === === === */

body {
  font-family: var(--font_body);
  font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font_title);
  font-weight: normal;
  color: var(--clr_post_title);
}
h1.hero__title {
  font-size: var(--fs-4);
  line-height: 1;
  margin-bottom: calc(var(--fs-4) * 0.5);
  color: var(--clr_text);
}
h1.kavely__title {
  font-size: var(--fs-3);
  margin-bottom: calc(var(--fs-3) * 0.5);
}
h2.hero__title {
  font-size: var(--fs-3);
  line-height: 1;
  margin-bottom: calc(var(--fs-3) * 0.5);
  color: var(--clr_text);
}
.hero__text {
  font-size: var(--fs_body-xl);
  line-height: 1.2;
  margin-top: 0.5em;
}
.article-body p,
.entry-content p {
  line-height: 1.6em;
  font-size: var(--fs_body);
}
.article-body > p:first-child {
  margin-top: 2rem;
}
span.hero__text p,
span.kavely__text p {
  font-size: var(--fs_body);
  line-height: 1.2;
}
.loop-item.category-kavely h2.loop-title em,
.loop-item.category-kavely-en h2.loop-title em {
  font-style: normal;
  font-family: var(--hg_med);
  font-size: 0.6em;
  margin-block: 0.5em;
  display: block;
}
.article-body p strong,
.article-body p a,
.article-body p b,
p strong {
  font-weight: normal;
  font-family: var(--hg_med);
}
.article-body p em,
.article-body p i {
  font-style: normal;
  font-family: var(--hg_regi);
}
.kavely-intro p {
  font-family: var(--hg_med);
  font-size: var(--fs-1);
  line-height: 1.2;
}
.kavely-intro p strong,
.kavely-intro p b {
  font-family: var(--hg_bol);
}
.kavely-intro p a {
  font-family: var(--hg_med);
  color: var(--clr_text);
}
article blockquote {
  margin: 1.5rem 0;
}
.article-body blockquote p {
  font-size: var(--fs-1);
  font-family: var(--hg_med);
  font-style: normal;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
  color: var(--clr_sininen);
  border-top: 4px solid var(--clr_sininen);
  border-bottom: 4px solid var(--clr_sininen);
  padding: 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6,
.loop-menu .categories {
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  text-rendering: optimizelegibility;
}
h1 {
  font-size: var(--fs-4);
}
h3 {
  font-size: var(--fs-1);
}
h4 {
  font-size: var(--fs-0);
}
h5,
h6 {
  font-size: var(--fs--1);
}
h4.loop-title,
h4.topic {
  color: var(--clr_alt);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
h2,
h3.subhead {
  font-size: var(--fs-2);
}
h2.loop-title {
  font-size: var(--fs-2);
  color: var(--clr_bg);
  z-index: 1;
}
.category-kavely h2.loop-title,
.category-kavely-en h2.loop-title {
  font-size: var(--fs-1);
}
.card h3 {
  font-size: var(--fs-0);
}
.article-about__title {
  font-family: var(--hg_med);
  font-size: var(--fs-0);
  color: var(--clr_text);
  margin-bottom: 0.5em;
}
.article-body h2 {
  margin-top: 2rem;
}
.single-taulu .article-body h2 {
  font-size: var(--fs-1);
}
h1.site-title em,
h1.site-title em {
  font-style: normal;
  color: var(--clr_alt);
  font-size: 1.5em;
  line-height: 1;
  display: block;
}
h1.entry-title i,
h1.entry-title em,
h2.entry-title em,
h3.subhead,
.le-loop h2 i {
  font-style: normal;
  font-family: var(--font_alt);
  display: block;
}
.le-loop h3 {
  font-size: calc(1rem + 1vw);
  padding: 0;
  z-index: 2;
}
.wp-block-media-text p {
  font-size: 1.5em;
}
.article-about__content p {
  font-size: var(--fs--1);
}
.article-about__content p em {
  font-style: normal;
  font-family: var(--hg_bol);
}
figcaption,
figcaption em,
figcaption i {
  font-style: normal;
  text-align: left;
}
figcaption em,
figcaption i {
  font-size: 0.8em;
  text-transform: uppercase;
}
.article-about__credit::before,
figcaption i::before,
figcaption i::before,
figcaption em::before,
figcaption em::before {
  content: "\f030";
  font-family: "Font Awesome 5 Pro";
  padding: 0 0.2em 0 0.2em;
}
.crumb-item a {
  font-family: var(--hg_med);
}
.error-404 h1 {
  text-align: center;
  margin: 5vw;
}
#banner p {
  font-size: calc(1rem + 0.4vw);
}
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
  #about .content p,
  #featured .content p {
    margin: 0.5em 0;
    font-size: 1.5em;
  }
}
@media (min-width: 1280px) {
  #about .content p,
  #featured .content p {
    text-align: left;
  }
}

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

.front-main {
  /* grid-template-rows: calc(71vh - 45px) min-content auto;  */
}
.front-primary {
  /* background-color:var(--clr_kupari); */
}
.front-primary-featured {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  display: flex;
  align-items: flex-end;
}
.front-primary-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--clr_hero);
}
.front-hero__image {
  display: flex;
  align-items: center;
  height: 60%;
}
.front-primary-featured,
.front-hero__image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.front-featured,
.front-hero__wrapper {
  width: 100%;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.front-hero__wrapper > * {
  padding: 2rem;
}
.front-featured > * {
  padding: 1rem 2rem;
}
.front-featured::before {
  content: "";
  position: absolute;
  top: 30%;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    0deg,
    hsla(var(--grad_hue), var(--grad_sat), var(--grad_lum), 0.8),
    hsla(var(--grad_hue), var(--grad_sat), var(--grad_lum), 0)
  );
  mix-blend-mode: multiply;
}
.front-featured__tunnus {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 555;
}
.front-featured__tunnus img {
  max-width: 70%;
}
.front-hero__tunnus {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 555;
  padding: 2rem;
  min-height: 80vw;
}
.front-featured__content,
.front-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--clr_bg);
  text-align: center;
}
.front-hero__title {
  font-size: var(--fs-3);
  line-height: 1;
  color: var(--clr_bg);
  margin-bottom: 0.3rem;
  z-index: 111;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
}
.front-hero__text {
  font-size: var(--fs-1);
  font-family: var(--hg_med);
  line-height: 1.1;
  z-index: 111;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
.front-hero__text.no-title {
  font-size: var(--fs-2);
}
.front-hero__title,
.front-hero__text {
  color: var(--clr_sininen);
  text-shadow: none;
}

.front-about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  text-align: center;
}
.front-about__title {
  font-size: var(--fs-4);
  margin-bottom: 1rem;
}
.front-about__content p {
  font-size: var(--fs-1);
  line-height: 1.2;
}
.front-primary__link,
.front-featured__link,
.front-hero__link {
  --clr_link: var(--clr_nega);
  --clr_link_hover: var(--clr_kesa);
  outline: 2px solid var(--clr_link);
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  font-family: var(--hg_med);
  font-size: var(--fs-0);
  padding: 0.3rem 1rem;
  margin: 1rem auto;
  z-index: 111;
}
.front-primary__link:focus,
.front-featured__link:focus {
  outline: 2px solid var(--clr_kesa);
  outline-offset: 0;
}
.front-hero__link {
  --clr_link: var(--clr_sininen);
  --clr_link_hover: var(--clr_bg);
}
.front-hero__link:focus {
  outline: 2px solid var(--clr_bg);
  outline-offset: 0;
}
.front-hero__link:hover {
  outline: 2px solid var(--clr_link_hover);
  text-decoration: none;
}
.front-primary__link:hover,
.front-featured__link:hover {
  outline: 2px solid var(--clr_link_hover);
  text-decoration: none;
}
@media only screen and (max-width: 62em) and (orientation: landscape) {
  .front-about {
    margin: 2rem auto 4rem;
  }
  .front-primary-hero {
    flex-direction: row;
  }
  .front-hero__image {
    height: 100%;
    width: 100%;
  }
  .front-hero__wrapper {
    flex-direction: row;
  }
  .front-hero__wrapper > * {
    padding: 2rem;
  }
  .front-hero__wrapper > * {
    padding: 2rem;
  }
  .front-hero__tunnus {
    min-height: 66vh;
    padding: 4rem;
  }
  .front-hero__content {
    justify-content: flex-end;
    text-align: left;
  }
  .front-hero__tunnus img {
    max-width: 100%;
  }
  .front-hero__link {
    font-size: var(--fs--1);
    margin: 1rem 1rem 1rem 0;
  }
  .front-hero__text.no-title {
    font-size: var(--fs-1);
  }
}
@media only screen and (min-width: 62em) {
  .front-about {
    margin: 2rem auto 4rem;
  }
  .front-primary-hero {
    flex-direction: row;
  }
  .front-hero__image {
    height: 100%;
    width: 100%;
  }
  .front-hero__wrapper {
    flex-direction: row;
  }
  .front-hero__wrapper > * {
    padding: 4rem;
  }
  .front-hero__wrapper > * {
    padding: 4rem;
  }
  .front-hero__tunnus {
    min-height: 66vh;
    padding: 4rem;
  }
  .front-hero__content {
    justify-content: flex-end;
    text-align: left;
  }
  .front-hero__tunnus img {
    max-width: 100%;
  }
  .front-hero__link {
    font-size: var(--fs--1);
    margin: 1rem 1rem 1rem 0;
  }
}

/* === === === === === #BANNERIT === === === === === */

.banneri {
  width: 100%;
  height: 0;
  padding: 20% 0;
  position: relative;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
.fi .banneri.pressat {
  background-image: url(pix/pressat-fi.png);
}
.sv .banneri.pressat {
  background-image: url(pix/pressat-sv.png);
}
.en .banneri.pressat {
  background-image: url(pix/pressat-en.png);
}
.fi .banneri.sylit {
  background-image: url(pix/sylit.png);
}
.sv .banneri.sylit {
  background-image: url(pix/sylit-sv.png);
}
.en .banneri.sylit {
  background-image: url(pix/sylit-en.png);
}
.banneri.hel {
  background-image: url(pix/helsinki.png);
}
.sv .banneri.hel {
  background-image: url(pix/hel-sv.png);
}
.puistot span {
  font-size: 0.8em;
  font-weight: 500;
  color: #043a6e;
  text-transform: uppercase;
  text-align: center;
}
.puistot {
  text-align: center;
}

/* === === === === === #KUVAT === === === === === */

/* .fig, .article-body > figure.wide {
    margin-top:2rem;
    margin-bottom: 2rem;
} */
.fig + .fig,
.article-body > figure.wide + .article-body > figure.wide {
  margin-top: 0;
}
.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);
}
.fig figcaption {
  min-height: 75px;
  margin-bottom: 0;
}
@media (min-width: 75em) {
  /* 75 */
  .article-body > figure {
    margin: 2rem 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;
  }
  .article-body > figure.wide2 a,
  .article-body > figure.wide2 img {
    grid-column: 3 / 6;
  }
}
figure.tall,
figure.small,
figure.narrow {
  grid-column: 4;
  display: grid;
  grid-template-columns: 65% 1fr;
  grid-gap: 1rem;
}
figure.tall a,
figure.small a,
figure.narrow a,
figure.tall img,
figure.small img,
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 > img {
    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) img {
    grid-column: 3;
    grid-row: 1;
  }
  .rcol2 figure:nth-child(2) figcaption {
    grid-column: 4;
  }
  .rcol2 figure {
    margin: 0;
    padding: 0;
  }
  .rcol2 figure img {
    max-height: 50vh;
  }
  .rcol2 img {
    width: 100%;
    height: 50vh;
    object-fit: cover;
  }
  .rcol2 figcaption {
    max-width: 50ch;
  }

  /*  -----  2cols ----------  */
  .col2:not(.portrait) img {
    max-height: 521px;
    object-fit: cover;
  }
  .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.mix figure {
    grid-template-columns: 391px 1fr;
    grid-template-rows: 521px max-content;
  }
  .col2 figure.tall img {
    object-fit: contain;
  }
  .col2 figcaption {
    grid-row: 2;
  }
  .col2 figure:nth-child(1) > * {
    grid-column: 1;
    justify-self: end;
  }
  .col2 figure:nth-child(1) img {
    align-self: end;
  }
  .col2 figure:nth-child(2) > * {
    grid-column: 2;
    justify-self: start;
    align-self: end;
  }
  .col2 figcaption {
    max-width: 80ch;
  }
  /*  -----  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) img {
    justify-self: end;
    align-self: end;
  }
  .col3 figure:nth-child(2) > * {
    grid-column: 2;
    justify-self: start;
  }
  .col3 figure:nth-child(2) > img {
    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;

        }
    }
} */

/* === === === === === #HELSINKI STYLES === === === === === */

.koro {
  grid-column: 1/-1;
}
.koro.aalto {
  position: relative;
  z-index: 4;
}
.front-main .koro.aalto.bot,
.archive .koro.aalto.bot,
.page .koro.aalto.bot {
  margin-top: 0;
}
.hero__background .koro.aalto.bot {
  margin-top: -5px;
}
.hero__background .koro.aalto.walk.bot {
  margin-top: 0;
}
.page .page-article .koro.aalto {
  position: relative;
  z-index: 4;
}
.koro.aalto.top::before {
  content: "";
  fill: var(--clr_koro);
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  left: 0;
  right: 0;
  top: -20px;
  z-index: 99;
  background-size: 120px 1200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 20 200' style='enable-background:new 0 0 20 800;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .kf%7Bfill:%23C2A251;%7D %3C/style%3E %3Ctitle%3Ekoro-aalto-0%3C/title%3E %3Cpath class='kf' d='M0,800h800'/%3E %3Cpath class='kf' d='M0,800h20V0c-4.9,0-5,2.6-9.9,2.6S5,0,0,0V800z'/%3E %3C/svg%3E ");
  background-position: top;
  background-repeat: repeat-x;
}
.koro.aalto.bot::before {
  content: "";
  fill: var(--clr_koro);
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  left: 0;
  right: 0;
  top: -20px;
  background-size: 120px 1200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 20 200' style='enable-background:new 0 0 20 800;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .kf%7Bfill:%23F7F8F6;%7D %3C/style%3E %3Ctitle%3Ekoro-aalto-0%3C/title%3E %3Cpath class='kf' d='M0,800h800'/%3E %3Cpath class='kf' d='M0,800h20V0c-4.9,0-5,2.6-9.9,2.6S5,0,0,0V800z'/%3E %3C/svg%3E ");
  background-position: top;
  background-repeat: repeat-x;
}
.koro.aalto.walk.bot::before {
  content: "";
  fill: var(--clr_koro);
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  left: 0;
  right: 0;
  top: -20px;
  background-size: 120px 1200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 20 200' style='enable-background:new 0 0 20 800;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .kf%7Bfill:%23F7F8F6;%7D %3C/style%3E %3Ctitle%3Ekoro-aalto-0%3C/title%3E %3Cpath class='kf' d='M0,800h800'/%3E %3Cpath class='kf' d='M0,800h20V0c-4.9,0-5,2.6-9.9,2.6S5,0,0,0V800z'/%3E %3C/svg%3E ");
  background-position: top;
  background-repeat: repeat-x;
}
.button__hds-button,
.cta__link-button {
  --background-color: #000;
  --color: #fff;
  --border-color: #000;
  --color-focus: #fff;
  --background-color-focus: #000;
  --background-color-hover: #fff;
  --background-color-hover-focus: #fff;
  --size: 100%;
  --border-width: 2px;
  --min-size: 44px;
  --outline-gutter: 2px;
  --outline-width: 3px;
  --clr_link: #fff;
  align-content: flex-start;
  align-items: center;
  background-color: var(--background-color, transparent);
  border: var(--border-width) solid var(--border-color, transparent);
  border-radius: 0;
  color: var(--color);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 100%;
  font-weight: 500;
  justify-content: center;
  line-height: 1.15;
  margin: 0;
  min-height: var(--min-size);
  min-width: var(--min-size);
  padding: 1rem 2rem;
  margin-top: 1rem;
  position: relative;
  text-decoration: none;
  text-transform: none;
  vertical-align: top;
  color: #fff;
}
.button__hds-button::after,
.cta__link-button::after {
  border: var(--outline-width) solid transparent;
  content: "";
  height: var(--size);
  position: absolute;
  width: var(--size);
}
.button__hds-button:hover,
.cta__link-button:hover {
  --background-color: #f0f0f0;
  --color: #000;
  color: #000;
  text-decoration: none;
}
a.button__hds-button:active,
a.cta__link-button:active {
  color: #000;
  text-decoration: none;
}
/* a.button__hds-button:visited, a.cta__link-button:visited {
    color:#fff;
    text-decoration: none;
} */
.hds-checkbox {
  --size: 24px;
  --icon-scale: 1;
  --border-width: 2px;
  --outline-width: 3px;
  --label-font-size: var(--fontsize-body-m);
  --label-padding: var(--spacing-2-xs);
  --background-unselected: transparent;
  --background-selected: var(--color-bus);
  --background-hover: var(--color-bus-dark);
  --background-disabled: var(--color-black-10);
  --border-color-selected: var(--color-bus);
  --border-color-selected-hover: var(--color-bus-dark);
  --border-color-selected-focus: var(--color-bus);
  --border-color-unselected: var(--color-black-50);
  --border-color-unselected-hover: var(--color-black-90);
  --border-color-unselected-focus: var(--color-black-90);
  --border-color-disabled: var(--color-black-10);
  --icon-color-unselected: transparent;
  --icon-color-selected: var(--color-white);
  --icon-color-disabled: var(--color-white);
  --focus-outline-color: var(--color-coat-of-arms);
  --label-color: var(--color-black-90);
  --label-color-disabled: var(--color-black-40);
  --icon-size: var(--spacing-m);
  display: flex;
  flex-wrap: wrap;
  min-height: 24px;
  min-height: var(--size);
  position: relative;
}
.hds-checkbox,
.hds-checkbox *,
.hds-checkbox :after,
.hds-checkbox :before {
  box-sizing: border-box;
}
.hds-checkbox:not(:first-of-type) {
  margin-top: var(--spacing-2-xs);
}

/*  Breadcrumbs  */

.breadcrumb {
  --clr_link: var(--clr_text);
  --clr_link_visited: none;
}
.breadcrumb__list {
  display: flex;
  list-style: none;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  margin: 0 2rem 0 0;
  padding: 0;
}
.breadcrumb__list-item {
  list-style: none;
  align-self: flex-start;
  margin: 0;
  padding: 0;
}
.breadcrumb__list-item:not(.active)::before {
  content: "\f104";
  padding-inline: 0.5em;
  font-family: var(--font_icon);
  font-weight: 400;
  font-size: 0.8em;
}
.breadcrumb__list-item:not(.active)::after {
  content: "";
}
.breadcrumb__link {
  text-decoration: underline;
}
.breadcrumb__list-item--active {
  font-family: var(--hg_bol);
}
.breadcrumb__list-item {
  display: none;
}
.breadcrumb__list-item:nth-last-child(2) {
  display: block;
}
.post-nav {
  --clr_link: var(--clr_kupari);
  --clr_link_hover: var(--clr_kulta);
}
/* .post-nav.category-kavely, .post-nav.category-kavely-sv, .post-nav.category-kavely-en, .post-nav.category-kartta, .post-nav.category-kartta-sv, .post-nav.category-kartta-en {
    --clr_link: var(--clr_sininen);
}
.post-nav.scrolled {
    --clr_link: var(--clr_kupari);
} */
@media (min-width: 62em) {
  .breadcrumb__list-item {
    display: block;
  }
  .breadcrumb__list-item:nth-last-child(2) {
    display: block;
  }
  .breadcrumb__list-item:not(.active)::after {
    content: "\f105";
    padding-inline: 0.5em;
    font-family: var(--font_icon);
    font-weight: 400;
    font-size: 0.8em;
  }
  .breadcrumb__list-item:not(.active)::before {
    content: "";
    padding-inline: 0;
  }
}

/* === === === === === #TAULUT === === === === === */

#main > section.taulu_kategoria-kortti,
#main > .luontopolku-loop-wrapper {
  grid-column: var(--col_kortti);
  margin-block: 2rem;
}
section.taulu_kategoria-kortti {
  grid-template-columns: var(--grid_kortti);
}
.hel-slider {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  list-style: none;
  background-color: var(--clr_bg);
  position: relative;
}
.card {
  width: 100%;
  height: 100vh;
  padding: 45px var(--gb_kortti_margin);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.card__img {
  display: none;
}
.card__body {
  grid-row: 3;
}

@media only screen and (min-width: 48em) and (orientation: portrait) {
  .card {
    display: grid;
    grid-template-columns: var(--grid_kortti);
    grid-template-rows: var(--grow_kortti);
    margin: 0;
    padding: 0;
  }
  .card__img {
    display: block;
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: var(--card_img_position);
    z-index: 0;
  }
  .hel-slide.post-6159 {
    --grow_kortti: 55vh min-content 1fr 80px;
  }
  .hel-slide.post-6157,
  .hel-slide.post-6155,
  .hel-slide.post-6147 {
    --grow_kortti: 30vh min-content 1fr 80px;
  }
}
@media only screen and (min-width: 64em) {
  .card {
    display: grid;
    grid-template-columns: var(--grid_kortti);
    grid-template-rows: var(--grow_kortti);
    margin: 0;
    padding: 0;
  }
  .card__img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: var(--card_img_position);
    z-index: 0;
  }
  .hel-slide.post-6159 {
    --grid_kortti: 1fr 55% 1fr;
    --grow_kortti: 22% min-content 1fr;
  }
  .hel-slide.post-6159 .card__img {
    background-position: center center;
  }
  .hel-slide.post-6159 .card__body {
    grid-row: 3;
  }
  .hel-slide.post-6157 {
    --grow_kortti: 50% min-content 1fr 80px;
  }
  .hel-slide.post-6157 .card__img,
  .hel-slide.post-6155 .card__img,
  .hel-slide.post-6147 .card__img {
    background-position: center top;
  }
  .hel-slide.post-6157 .card__body,
  .hel-slide.post-6155 .card__body,
  .hel-slide.post-6147 .card__body {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gb_kortti_margin);
  }
  .hel-slide.post-7288,
  .hel-slide.post-6153,
  .hel-slide.post-6151,
  .hel-slide.post-6149,
  .hel-slide.post-7284,
  .hel-slide.post-7282,
  .hel-slide.post-7280,
  .hel-slide.post-6139 {
    --grid_kortti: var(--gb_kortti_margin) 2fr 3fr var(--gb_kortti_margin);
    --grow_kortti: var(--gb_kortti_margin) min-content 1fr 80px;
  }
  .hel-slide.post-7288 .card__img {
  }
  .hel-slide.post-7288 .card__body {
  }
  .hel-slide.post-6149 .card__img,
  .hel-slide.post-7284 .card__img {
    width: 60%;
    left: 40%;
    right: 0;
  }
}
.card__title {
  grid-row: 2;
  grid-column: var(--col_kortti_title);
  z-index: 1;
  margin-bottom: 1rem;
}
.card__body {
  grid-row: 3;
  grid-column: var(--col_kortti_body);
  z-index: 1;
}
.article-body .aikajana h2 {
  font-family: var(--hg_bol);
  font-size: var(--fs-0);
  color: var(--clr_bg);
  text-align: center;
  position: relative;
  margin: 1rem 0;
}
.aikajana h2 strong {
  background-color: var(--clr_aikajana);
  padding: 6px 10px;
}
.article-body .aikajana h2::before {
  content: "";
  position: absolute;
  top: 40%;
  right: 0;
  bottom: 40%;
  left: 0;
  background-color: var(--clr_aikajana);
  z-index: -1;
}
.aikajana .sininen {
  --clr_aikajana: var(--clr_sininen);
}
.aikajana .pinkki {
  --clr_aikajana: var(--clr_suomenlinna);
}
.aikajana .kulta {
  --clr_aikajana: var(--clr_kulta);
}
.aikajana .spara {
  --clr_aikajana: var(--clr_spara);
}
.aikajana .metro {
  --clr_aikajana: var(--clr_metro);
}
.aikajana .vaakuna {
  --clr_aikajana: var(--clr_vaakuna);
}
.aikajana p {
  margin-bottom: 0.5rem;
}
@media (min-width: 64em) {
  .post-5911 .card__body,
  .post-5913 .card__body,
  .post-5915 .card__body,
  .post-5979 .card__body,
  .post-5981 .card__body,
  .post-5983 .card__body {
    grid-row: 3 / 10;
    grid-column: 2 / 8;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2rem;
  }
}
.card__body p {
  font-size: var(--fs--2);
  margin-bottom: 0.5em;
}
span.nro {
  font-family: var(--hg_bol);
  background: var(--clr_post_title);
  color: var(--clr_nega);
  width: 1.2em;
  display: inline-block;
  text-align: center;
}
.hel-slide + .hel-slide {
  margin-top: 0;
}

/* === === === === === #HEL-SLIDER === === === === === */

.luontopolku-loop-wrapper {
  position: relative;
  z-index: 2;
}
@media (min-width: 100em) {
  .hel-slider {
    height: auto;
    width: 100%;
    margin: 0;
    padding: 33.3125% 0;
  }
  .hel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.hel-slide.current {
  opacity: 1;
}
.hel-slider-buttons {
  position: absolute;
  margin: 0;
  left: calc(50% - 60px);
  right: 0;
  bottom: 0;
  width: 120px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  background-color: var(--clr_sininen);
  border-radius: 4px 4px 0 0;
  padding: 0 8px;
  z-index: 2;
}
.card__nav-nro {
  position: absolute;
  left: calc(50% - 30px);
  bottom: 0;
  width: 60px;
  height: 60px;
  font-size: var(--fs-3);
  text-align: center;
  line-height: 60px;
  z-index: 999;
}
@media (min-width: 64em) {
  .hel-slider-buttons {
    left: calc(50% - 100px);
    width: 200px;
    height: 80px;
  }
  .card__nav-nro {
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}
.card__nav-nro span.nro {
  background-color: var(--clr_sininen);
}
.hel-slider {
  outline: 1px solid var(--clr_sininen);
  border-radius: 4px;
}
.taulu_kategoria-maunula-nature-trail .card__title {
  font-size: var(--fs-1);
}
.taulu_kategoria-maunula-nature-trail .card__title .nro {
  display: none;
}

/* === === === === === #KARTTA === === === === === */

.suomi {
  --clr_sidebar: hsl(188 41% 70%); /* --clr_sidebar: hsl(188 41% 48%); */
}
.ita-aasia {
  --clr_sidebar: hsl(356 61% 70%); /* --clr_sidebar: hsl(356 61% 63%); */
}
.havualue {
  --clr_sidebar: hsl(22 32% 70%); /*  --clr_sidebar: hsl(22 32% 52%); */
}
.japani {
  --clr_sidebar: hsl(346 70% 80%); /*   --clr_sidebar: hsl(346 79% 73%); */
}
.pohjois-amerikka {
  --clr_sidebar: hsl(299 19% 70%); /*   --clr_sidebar: hsl(299 19% 52%); */
}
.eurooppa {
  --clr_sidebar: hsl(34 81% 70%); /*  --clr_sidebar: hsl(34 81% 59%); */
}
.infomap {
  height: 100%;
  display: flex;
  z-index: 3;
}
.infomap__map {
  flex-basis: 0;
  flex-grow: 4;
  height: 100%;
}
.infomap__sidebar {
  /* flex-basis: 15rem;
    flex-grow: 1;
    max-width: 30rem; */
  height: 100%;
  width: var(--w_sidebar);
  overflow: auto;
  padding: 45px 1rem 1rem;
  background-color: var(--clr_sidebar);
  color: var(--clr_text);
}
.infomap__sidebar * {
  color: var(--clr_text);
  margin-bottom: 0.3em;
}
.infomap__sidebar h2 {
  font-size: var(--fs-1);
}
.infomap__sidebar h3 {
  font-size: var(--fs-0);
}
.infomap__sidebar h3 strong,
.audio-controls h3 span,
.map-link h3 span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--fs-1);
  height: var(--fs-1);
  border-radius: 50%;
  background-color: var(--clr_text);
  color: var(--clr_bg);
}
.infomap__sidebar p {
  font-size: var(--fs_body);
}
.audio-controls,
.map-link {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  gap: 1rem;
}
.audio-controls audio {
  width: 264px;
}
.audio-controls h3,
.map-link h3 {
  font-size: var(--fs-0);
}
.audio-controls h3 span,
.map-link h3 span {
  margin-right: 0.5rem;
  width: calc(var(--fs-0) + 4px);
  height: calc(var(--fs-0) + 4px);
}
.mapboxgl-popup-content {
  width: 300px;
  padding: 1rem 2rem 1rem 1rem;
}
.mapboxgl-popup-content span {
  font-family: var(--hg_med);
}

/* ========== #PATSASPUHUU BANNERS ================= */
a.patsaspuhuu {
  --clr_link: var(--clr_sininen);
  --clr_link_hover: var(--clr_kupari);
  text-decoration: none;
}
a.patsaspuhuu:hover * {
  color: var(--clr_link_hover);
}
.patsaspuhuu-banneri {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 1em 0;
  outline: 8px solid var(--clr_kupari);
}
.banneri__img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.banneri__text {
  display: flex;
  flex-direction: column;
  margin: 1em;
}

@media (min-width: 768px) {
  .patsaspuhuu-banneri {
    display: grid;
    grid-template-columns: var(--grid-banneri);
  }
}

.banneri__title,
.banneri__body {
  color: var(--clr_sininen);
  line-height: 1.2em;
  margin: 0.1em 0;
}
.banneri__title {
  font-family: var(--hg_bol);
  font-size: var(--fs-1);
}
.banneri__body {
  font-family: var(--hg_med);
  font-size: var(--fs-0);
}
.banneri__url {
  display: block;
  font-family: var(--hg_bol);
  font-size: var(--fs--1);
  padding-top: 0.5em;
}

.banneri__img.runeberg {
  background-image: url(pix/banners/runeberg.jpg);
}
.banneri__img.topelius {
  background-image: url(pix/banners/topelius.jpg);
}
.banneri__img.leino {
  background-image: url(pix/banners/leino.jpg);
}
.banneri__img.kekkonen {
  background-image: url(pix/banners/kekkonen.jpg);
}
.banneri__img.relander {
  background-image: url(pix/banners/relander.jpg);
}
.banneri__img.ryti {
  background-image: url(pix/banners/ryti.jpg);
}
/* ================ details-haitari ============================== */
details {
  /* padding:2rem 1rem; */
  margin: 0;
  height: auto;
  transition: all 0.5s ease-in-out;
}
details[open] {
  transition: all 1s ease;
}
summary:focus,
summary:focus-visible {
  outline: 3px var(--clr_focus) solid;
  outline-offset: 3px;
}
summary::-webkit-details-marker {
  display: none;
}
summary {
  position: relative;
  list-style: none;
  /* padding-left: 1rem; */
}
.tauluhaitari__summary,
.haitari__summary {
  padding-left: 0;
  padding-right: 3rem;
}
details h2 {
  color: var(--clr_text);
}
details p,
details div h3,
article details li {
  color: var(--clr_text);
  /* padding-left: calc(1.75rem + .75rem + .75rem); */
  /* padding-left: calc(.75rem + .75rem + .75rem); */
}
details.haitari p,
details.haitari h3,
article details.haitari li,
article details.tauluhaitari li {
  padding-left: 0;
}
details div figure,
details div figcaption {
  margin-top: 1em !important;
}
.toc-body summary::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  content: "\f078";
  font-family: var(--ff_icon);
  display: inline-flex;
}
.toc-body details[open] summary::after {
  content: "\f077";
}
article.category-toc p {
  padding-left: 1rem;
  font-size: var(--fs-0);
}
details.toc-item ul {
  padding-top: 2rem;
  padding-inline-start: 0;
}
details {
  margin-block: 2rem;
  border-bottom: 1px solid var(--color-black-60);
  padding-bottom: 1rem;
}
details div {
  margin-top: 1em;
}
details div * + * {
  margin-top: 1em;
}
details summary > * {
  display: inline;
}
@supports not (-ms-ime-align: auto) {
  details summary {
    cursor: pointer;
  }
  details summary > * {
    display: inline;
  }
}
details[open] {
  transition: all 1s ease;
  position: relative;
}
details.tauluhaitari[open] {
  background-color: #fff;
}
details.tauluhaitari[open] h2 {
  padding-left: 1rem;
  padding-top: 1rem;
}
.tauluhaitari__taulu-item > h3,
.tauluhaitari__taulu-item > h4,
.tauluhaitari__taulu-item > p {
  padding-left: 1rem;
}
summary {
  list-style: none;
  font-size: var(--fs-0);
  line-height: 1em;
}
summary,
details p {
  margin-left: 0;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  position: absolute;
  right: 1rem;
  content: "\f078";
  font-family: var(--font_icon);
  font-weight: 600;
  font-size: 0.8em;
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
}
details[open] summary::after {
  content: "\f077";
}
summary h3 {
  font-size: var(--fs-0);
}
details h4 {
  font-size: var(--fs--1);
}
.tauluhaitari[open] {
  padding-bottom: 4rem;
  grid-column: 3 / -3;
  max-width: calc(1000px + 2rem);
  justify-self: center;
}
h2.tauluhaitari__otsikko {
  margin-top: 0;
  font-size: var(--fs-1);
}
.tauluhaitari__taulut {
  list-style: none;
  margin: 0;
  -webkit-margin-start: 0;
  -webkit-padding-start: 0;
  -moz-padding-start: 0;
  padding-inline-start: 0;
}
.tauluhaitari__taulu-item {
  padding-left: 0;
  margin-block: 2rem;
}
.tauluhaitari[open] .tauluhaitari__taulu-item,
.tauluhaitari[open] .tauluhaitari__summary {
  display: grid;
  grid-template-columns: 1fr var(--gb_body) 1fr;
}
.tauluhaitari[open] .tauluhaitari__taulu-item > *,
.tauluhaitari[open] .tauluhaitari__summary > * {
  grid-column: 2;
}
.tauluhaitari[open] .tauluhaitari__taulu-item > .tauluhaitari__kuva,
.tauluhaitari[open] .tauluhaitari__taulu-item > h3 {
  grid-column: 1 / -1;
}
.tauluhaitari[open].single-taulu .tauluhaitari__taulu-item > h3 {
  grid-column: 2;
  font-size: var(--fs-0);
}
.tauluhaitari__taulu-item h3,
.tauluhaitari__taulu-item h4,
.tauluhaitari__taulu-item p,
.tauluhaitari__taulu-item ul,
.tauluhaitari__taulu-item ol {
  line-height: 1.3;
  margin-bottom: 0.5em;
}
.tauluhaitari__taulu-item p span {
  font-size: 0.8em;
  text-transform: uppercase;
  text-decoration: none !important;
}
.tauluhaitari__taulu-item li {
  font-size: var(--fs_body);
  margin-bottom: 1em;
}
.tauluhaitari__kuva {
  margin-block: 1rem;
}
.haitari__close {
  background-color: transparent;
  color: var(--clr_text);
  cursor: pointer;
  border: none;
  outline: none;
  font-size: var(--clr_text);
  padding: 0;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}
.haitari__close::after {
  content: "\f077";
  font-family: var(--font_icon);
  font-weight: 500;
  display: inline-flex;
  padding-left: 0.5em;
}
/* details:last-child {
    border-bottom: 1px dashed #999;
} */

/* ========== #INDEX.HTML ================= */

.lappu,
.lappu__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lappu__title {
  font-family: var(--hg_med);
  font-size: var(--fs-3);
  text-align: center;
}
.lappu__title em {
  display: block;
  font-style: normal;
  font-family: var(--hg_reg);
}

/* =========== #karttanumerot otsikkoon ============== */

.article-body h2 b::before,
.article-body h3 b::before,
.article-body h4 b::before,
.tauluhaitari__subtitle span::before {
  content: "";
  background-color: var(--clr_sininen);
  border-radius: 50%;
  position: absolute;
  z-index: -1;
}
.article-body h2 b,
.article-body h3 b,
.article-body h4 b,
.tauluhaitari__subtitle span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--clr_bg);
  padding-right: 0.5rem;
  position: relative;
  z-index: 1;
}
.article-body h2 b,
.article-body h2 b::before {
  width: calc(var(--fs-2) + 0.5rem);
  height: calc(var(--fs-2) + 0.5rem);
}
.article-body h3 b,
.article-body h3 b::before,
.tauluhaitari__subtitle span,
.tauluhaitari__subtitle span::before {
  width: calc(var(--fs-1) + 0.5rem);
  height: calc(var(--fs-1) + 0.5rem);
}
.article-body h4 b,
.article-body h4 b::before {
  width: calc(var(--fs-0) + 0.5rem);
  height: calc(var(--fs-0) + 0.5rem);
}
.post-159 h2:not(.tauluhaitari__otsikko),
.post-3518 h2:not(.tauluhaitari__otsikko),
.post-3078 h2:not(.tauluhaitari__otsikko) {
  scroll-margin-top: 4rem;
  margin-bottom: 2rem;
}

.mapboxgl-popup.mapboxgl-popup-anchor-bottom {
  max-width: 320px !important;
}