{"id":7765,"date":"2026-05-04T15:15:02","date_gmt":"2026-05-04T15:15:02","guid":{"rendered":"https:\/\/graphic.fi\/umg2026\/?page_id=7765"},"modified":"2026-05-18T06:07:09","modified_gmt":"2026-05-18T06:07:09","slug":"puutarha","status":"publish","type":"page","link":"https:\/\/graphic.fi\/umg2026\/puutarha\/","title":{"rendered":"Puutarha"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7765\" class=\"elementor elementor-7765\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0bbb118 e-flex e-con-boxed e-con e-parent\" data-id=\"0bbb118\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19c4c0dc elementor-widget elementor-widget-html\" data-id=\"19c4c0dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ankkuri \"Palaa puutarhaan\" -napille -->\n<div id=\"garden-top\">\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-33b2b135 e-con-full e-flex e-con e-parent\" data-id=\"33b2b135\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-3be5d104 e-flex e-con-boxed e-con e-child\" data-id=\"3be5d104\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1f5e87 elementor-widget elementor-widget-heading\" data-id=\"a1f5e87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Puutarha<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7373ba9c e-con-full e-flex e-con e-child\" data-id=\"7373ba9c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-5655dd3 e-con-full e-flex e-con e-child\" data-id=\"5655dd3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f56ec8 elementor-widget-tablet__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"2f56ec8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Tutustu juttuihin seuraamalla k\u00f6ynn\u00f6st\u00e4 ja l\u00e4hde matkalle graafisen suunnittelun ihmeelliseen maailmaan!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a0fce9c elementor-widget elementor-widget-html\" data-id=\"a0fce9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t <!-- DESKTOP -->\n<div class=\"panorama-desktop\">\n      \n  <div class=\"panorama-shell\">\n      \n      <!-- KAIKKI JUTUT -NAPPI JA MENU -->\n<div class=\"toc-wrap\">\n  <button id=\"toc-toggle\">Kaikki jutut<\/button>\n<\/div>\n\n<div id=\"toc-overlay\">\n    <div id=\"toc-panel\">\n      <button id=\"toc-close\"><img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/ruksi-1.svg\">\n          <\/button>\n\n      <h2>Kaikki jutut<\/h2>\n\n      <div class=\"toc-grid\">\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/manifesti\/\"\n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-1\">\n        \n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_manifesti_ehka.webp\" alt=\"\">Manifesti<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/paakirjoitus\/\"\n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-2\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_paakirjoitusPAIVITETTY.webp\" alt=\"\">P\u00e4\u00e4kirjoitus<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/valitse-minut\/\"\n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-3\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_valitseminut.webp\" alt=\"\">Valitse minut!<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/maskotit-marketin-hyllylla\/\" \n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-4\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_maskotitmarkettien.webp\" alt=\"\">Maskotit marketin hyllyll\u00e4<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/kenties-minakin\/\"\n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-5\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_kentiesminakin.webp\" alt=\"\">Kenties min\u00e4kin<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/onko-helpompi-vain-uppoutua-samaan-mereen\/\" \n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-6\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_samaanmereen.webp\" alt=\"\">Onko helpompi vain <br><span class=\"indent\"> uppoutua samaan mereen?<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/vaeltava-katse\/\"\n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-7\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_vaeltavakatse.webp\" alt=\"\">Vaeltava katse<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/merkityksen-muoto\/\"\n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-8\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_merkityksenmuoto.webp\" alt=\"\">Merkityksen muoto<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/matkailu-kartalla\/\"\n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-9\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_kartalla.webp\" alt=\"\">Matkailu kartalla<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/taide-osana-autokulttuuria\/\" \n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-10\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukat_autokulttuuriPAIVITTETTY.webp\" alt=\"\">Taide osana autokulttuuria<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/muistojen-ja-vaikutteiden-holvi\/\" \n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-11\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukat_muistojenholvi.webp\" alt=\"\">Muistojen ja vaikutteiden holvi<br><span class=\"indent\"> \u2013 miten piirt\u00e4j\u00e4n tyyli rakentuu<\/span><\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/digitaalista-mangaa-ja-muita-solvauksia\/\" \n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-12\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_digimangaa.webp\" alt=\"\">Digitaalista mangaa ja muita solvauksia<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/kuinka-suunnitellaan-naisille-ja-miehille\/\" \n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-13\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_suunnitellaannaisille.webp\" alt=\"\">Kuinka suunnitellaan naisille ja miehille<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/suuntaa-katseesi-tanne\/\" \n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-14\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_suuntaakatseesi.webp\" alt=\"\">Suuntaa katseesi t\u00e4nne!<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/tekoaly\/\" \n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-15\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_tekoalyvr2.webp\" alt=\"\">Teko\u00e4ly \u2013 renki, is\u00e4nt\u00e4 vai el\u00e4m\u00e4si avuliain kollega?<\/a>\n\n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/kansallisromantiikka-ennen-ja-nyt\/\" \n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-16\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_kansallisromantiikka.webp\" alt=\"\">Kansallisromantiikka ennen... ja nyt?<\/a>\n\n        <a class=\"garden-article-link\" \n           href=\"https:\/\/graphic.fi\/umg2026\/nayta-ala-kerro\/\"\n           data-e-disable-page-transition=\"true\"\n           data-target-flower=\".hotspot-17\">\n         <img decoding=\"async\" class=\"toc-flower\"\n               src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_naytaalakerro.webp\"\n               alt=\"\">N\u00e4yt\u00e4, \u00e4l\u00e4 kerro: fantasiahahmojen<br><span class=\"indent\">asuissa piilev\u00e4t tarinat<\/span><\/a>\n          \n        <a class=\"garden-article-link\" \n        href=\"https:\/\/graphic.fi\/umg2026\/hyvaa-yota-morot\/\"\n        data-e-disable-page-transition=\"true\"\n        data-target-flower=\".hotspot-18\">\n            <img decoding=\"async\" class=\"toc-flower\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukat_hyvaayota.webp\" alt=\"\">Hyv\u00e4\u00e4 y\u00f6t\u00e4, m\u00f6r\u00f6t!<\/a>\n\n      <\/div>\n    <\/div>\n  <\/div>\n  \n\n\n    <!-- NUOLET -->\n    <button class=\"panorama-arrow arrow-left\">\n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/Nuoli-Vasen.png\">\n    <\/button>\n    \n    <button class=\"panorama-arrow arrow-right\">\n     <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/Nuoli-Oikea.png\">\n     <\/button>\n    \n    <div class=\"panorama-wrapper edge-scroll\">\n    \n      <div class=\"wide-inner\">\n          \n        <!-- Desktopin taustapanoraama -->\n        <img decoding=\"async\"\n          src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/koynnos_lehdilla_.webp\"\n          class=\"panorama-base\"\n          draggable=\"false\"\n          alt=\"\"\n        >\n        \n\n        <!-- DESKTOP-HOTSPOTIT -->\n\n        <a\n          href=\"https:\/\/graphic.fi\/umg2026\/manifesti\/\"\n          data-e-disable-page-transition=\"true\"\n          data-center-flower=\"true\"\n          class=\"hotspot hotspot-1\"\n          style=\"left: 4.2%; top: 34.8%;\"\n        >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_manifesti_ehka.webp\" alt=\"Avaa artikkeli Manifesti\">\n          <span class=\"hotspot-title\">Manifesti<\/span>\n        <\/a>\n        \n        <a\n          href=\"https:\/\/graphic.fi\/umg2026\/paakirjoitus\/\"\n          data-e-disable-page-transition=\"true\"\n          data-center-flower=\"true\"\n          class=\"hotspot hotspot-2\"\n          style=\"left: 8.7%; top: 16.8%;\"\n        >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_paakirjoitusPAIVITETTY.webp\" alt=\"Avaa artikkeli P\u00e4\u00e4kirjoitus\">\n          <span class=\"hotspot-title\">P\u00e4\u00e4kirjoitus<\/span>\n        <\/a>        \n        \n        <a\n          href=\"https:\/\/graphic.fi\/umg2026\/valitse-minut\/\"\n          data-e-disable-page-transition=\"true\"\n          data-center-flower=\"true\"\n          class=\"hotspot hotspot-3\"\n          style=\"left: 15%; top: 48.2%;\"\n        >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_valitseminut.webp\" alt=\"Avaa artikkeli Valitse minut!\">\n          <span class=\"hotspot-title\">Valitse minut!<\/span>\n        <\/a>\n\n        <a\n          href=\"https:\/\/graphic.fi\/umg2026\/maskotit-marketin-hyllylla\/\"\n          data-e-disable-page-transition=\"true\"\n          data-center-flower=\"true\"\n          class=\"hotspot hotspot-4\"\n          style=\"left: 18.9%; top: 48.8%;\"\n        >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_maskotitmarkettien.webp\" alt=\"Avaa artikkeli Maskotit marketin hyllyll\u00e4\">\n          <span class=\"hotspot-title\">Maskotit marketin hyllyll\u00e4<\/span>\n        <\/a>\n\n\n        <a href=\"https:\/\/graphic.fi\/umg2026\/kenties-minakin\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-5\"\n        style=\"left: 23.1%; top: 22.8%;\"\n        >\n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_kentiesminakin.webp\" alt=\"Avaa sarjakuva Kenties min\u00e4kin\">\n         <span class=\"hotspot-title\">Kenties min\u00e4kin<\/span>\n        <\/a>\n    \n        <a href=\"https:\/\/graphic.fi\/umg2026\/onko-helpompi-vain-uppoutua-samaan-mereen\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-6\"\n        style=\"left: 27.2%; top: 29%;\"\n        >\n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_samaanmereen.webp\" alt=\"Avaa artikkeli Onko helpompi vain uppoutua samaan mereen?\">\n         <span class=\"hotspot-title\">Onko helpompi vain uppoutua samaan mereen?<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/vaeltava-katse\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-7\"\n        style=\"left: 31.9%; top: 47.8%;\"\n        >\n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_vaeltavakatse.webp\" alt=\"Avaa artikkeli Vaeltava katse\">\n         <span class=\"hotspot-title\">Vaeltava katse<\/span>\n        <\/a> \n    \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/merkityksen-muoto\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-8\"\n        style=\"left: 35.6%; top:29.8%;\"\n        >\n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_merkityksenmuoto.webp\" alt=\"Avaa artikkeli Merkityksen muoto\">\n         <span class=\"hotspot-title\">Merkityksen muoto<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/matkailu-kartalla\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-9\" \n        style=\"left: 41.8%; top: 48%;\" \n        > \n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_kartalla.webp\" alt=\"Avaa artikkeli Matkailu kartalla\"> \n         <span class=\"hotspot-title\">Matkailu kartalla<\/span>\n        <\/a> \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/taide-osana-autokulttuuria\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-10\" \n        style=\"left: 46.1%; top: 27.4%;\" \n        > \n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukat_autokulttuuriPAIVITTETTY.webp\" alt=\"Avaa artikkeli Taide osana autokulttuuria\"> \n         <span class=\"hotspot-title\">Taide osana autokulttuuria<\/span>\n        <\/a> \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/muistojen-ja-vaikutteiden-holvi\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-11\" \n        style=\"left: 53.3%; top: 26.8%;\" \n        > \n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukat_muistojenholvi.webp\" alt=\"Avaa artikkeli Muistojen ja vaikutteiden holvi \u2013 miten piirt\u00e4j\u00e4n tyyli rakentuu?\"> \n         <span class=\"hotspot-title\">Muistojen ja vaikutteiden holvi \u2013 miten piirt\u00e4j\u00e4n tyyli rakentuu?<\/span>\n        <\/a> \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/digitaalista-mangaa-ja-muita-solvauksia\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-12\" \n        style=\"left: 58.9%; top: 32.2%;\" \n        > \n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_digimangaa.webp\" alt=\"Avaa sarjakuva Digitaalista mangaa ja muita solvauksia\"> \n         <span class=\"hotspot-title\">Digitaalista mangaa ja muita solvauksia<\/span>\n        <\/a> \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/kuinka-suunnitellaan-naisille-ja-miehille\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-13\" \n        style=\"left: 65%; top: 40.4%;\" \n        > \n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_suunnitellaannaisille.webp\" alt=\"Avaa artikkeli Kuinka suunnitellaan naisille ja miehille\"> \n         <span class=\"hotspot-title\">Kuinka suunnitellaan naisille ja miehille<\/span>\n        <\/a> \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/suuntaa-katseesi-tanne\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-14\" \n        style=\"left: 72.2%; top: 24.8%;\" \n        > \n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_suuntaakatseesi.webp\" alt=\"Avaa artikkeli Suuntaa katseesi t\u00e4nne!\"> \n         <span class=\"hotspot-title\">Suuntaa katseesi t\u00e4nne! <\/span>\n        <\/a> \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/tekoaly\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-15\" \n        style=\"left: 77.5%; top: 38.2%;\" \n        > \n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_tekoalyvr2.webp\" alt=\"Avaa artikkeli Teko\u00e4ly \u2013 renki, is\u00e4nt\u00e4 vai el\u00e4m\u00e4si avuliain kollega?\"> \n         <span class=\"hotspot-title\">Teko\u00e4ly \u2013 renki, is\u00e4nt\u00e4 vai el\u00e4m\u00e4si avuliain kollega?<\/span>\n        <\/a> \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/kansallisromantiikka-ennen-ja-nyt\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-16\" \n        style=\"left: 84.2%; top: 46.2%;\" \n        > \n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_kansallisromantiikka.webp\" alt=\"Avaa artikkeli Kansallisromantiikka 2020-luvulla\"> \n         <span class=\"hotspot-title\">Kansallisromantiikka ennen... ja nyt?<\/span>\n        <\/a> \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/nayta-ala-kerro\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-17\" \n        style=\"left: 90.7%; top: 30.4%;\" \n        > \n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_naytaalakerro.webp\" alt=\"Avaa artikkeli N\u00e4yt\u00e4, \u00e4l\u00e4 kerro: fantasiahahmojen asuissa piilev\u00e4t tarinat\"> \n         <span class=\"hotspot-title\">N\u00e4yt\u00e4, \u00e4l\u00e4 kerro: fantasiahahmojen asuissa piilev\u00e4t tarinat<\/span>\n        <\/a> \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/hyvaa-yota-morot\/\"\n        data-e-disable-page-transition=\"true\"\n        data-center-flower=\"true\"\n        class=\"hotspot hotspot-18\" \n        style=\"left: 95.8%; top: 24.2%;\" \n        > \n        <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukat_hyvaayota.webp\" alt=\"Avaa artikkeli Hyv\u00e4\u00e4 y\u00f6t\u00e4, m\u00f6r\u00f6t!\"> \n         <span class=\"hotspot-title\">Hyv\u00e4\u00e4 y\u00f6t\u00e4, m\u00f6r\u00f6t!<\/span>\n        <\/a> \n    \n\n      <\/div>\n    <\/div>\n    \n    <\/div>\n<\/div>\n\n  <!-- MOBIILIVERSIO -->\n  \n  <div class=\"panorama-mobile\">\n\n    <div class=\"mobile-wrapper\">\n      <div class=\"mobile-inner\">\n\n        <!-- Vertikaalinen kuva -->\n        <img decoding=\"async\"\n          src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/koynnos_lehdilla_MOBIILI.webp\"\n          class=\"panorama-base-mobile\"\n          draggable=\"false\"\n          alt=\"\"\n        >\n\n        <!-- Hotspotit MOBIILI -->\n        <a href=\"https:\/\/graphic.fi\/umg2026\/paakirjoitus\/\"\n          class=\"hotspot hotspot-mobile-1\"\n          style=\"left: 45.6%; top: 6.4%;\">\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_paakirjoitusPAIVITETTY.webp\" alt=\"Avaa artikkeli P\u00e4\u00e4kirjoitus\">\n          <span class=\"hotspot-title\">P\u00e4\u00e4kirjoitus<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/manifesti\/\"\n          class=\"hotspot hotspot-mobile-2\"\n          style=\"left: 25.8%; top: 2.4%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_manifesti_ehka.webp\" alt=\"Avaa artikkeli Manifesti\">\n          <span class=\"hotspot-title\">Manifesti<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/valitse-minut\/\"\n          class=\"hotspot hotspot-mobile-3\"\n          style=\"left: 43%; top: 11%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_valitseminut.webp\" alt=\"Avaa artikkeli Valitse minut!\">\n          <span class=\"hotspot-title\">Valitse minut!<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/maskotit-marketin-hyllylla\/\"\n          class=\"hotspot hotspot-mobile-4\"\n          style=\"left: 21%; top: 14.5%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_maskotitmarkettien.webp\" alt=\"Avaa artikkeli Maskotit marketin hyllyll\u00e4\">\n          <span class=\"hotspot-title\">Maskotit marketin hyllyll\u00e4<\/span>\n        <\/a>\n \n        <a href=\"https:\/\/graphic.fi\/umg2026\/kenties-minakin\/\"\n          class=\"hotspot hotspot-mobile-5\"\n          style=\"left: 27.4%; top: 19.4%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_kentiesminakin.webp\" alt=\"Avaa sarjakuva Kenties min\u00e4kin\">\n          <span class=\"hotspot-title\">Kenties min\u00e4kin<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/onko-helpompi-vain-uppoutua-samaan-mereen\/\"\n          class=\"hotspot hotspot-mobile-6\"\n          style=\"left: 48.4%; top: 24.3%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_samaanmereen.webp\" alt=\"Avaa artikkeli Onko helpompi vain uppoutua samaan mereen?\">\n          <span class=\"hotspot-title\">Onko helpompi vain uppoutua samaan mereen?<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/vaeltava-katse\/\"\n          class=\"hotspot hotspot-mobile-7\"\n          style=\"left: 23%; top: 28.9%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_vaeltavakatse.webp\" alt=\"Avaa artikkeli Vaeltava katse\">\n          <span class=\"hotspot-title\">Vaeltava katse<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/merkityksen-muoto\/\"\n          class=\"hotspot hotspot-mobile-8\"\n          style=\"left: 32.4%; top: 34.1%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_merkityksenmuoto.webp\" alt=\"Avaa artikkeli Merkityksen muoto\">\n          <span class=\"hotspot-title\">Merkityksen muoto<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/matkailu-kartalla\/\"\n          class=\"hotspot hotspot-mobile-9\"\n          style=\"left: 20%; top: 40%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_kartalla.webp\" alt=\"Avaa artikkeli Matkailu kartalla\">\n          <span class=\"hotspot-title\">Matkailu kartalla<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/taide-osana-autokulttuuria\/\"\n          class=\"hotspot hotspot-mobile-10\"\n          style=\"left: 40.8%; top: 44.8%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukat_autokulttuuriPAIVITTETTY.webp\" alt=\"Avaa artikkeli Taide osana autokulttuuria\">\n          <span class=\"hotspot-title\">Taide osana autokulttuuria<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/muistojen-ja-vaikutteiden-holvi\/\"\n          class=\"hotspot hotspot-mobile-11\"\n          style=\"left: 50%; top: 49.7%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukat_muistojenholvi.webp\" alt=\"Avaa artikkeli Muistojen ja vaikutteiden holvi \u2013 miten piirt\u00e4j\u00e4n tyyli rakentuu?\">\n          <span class=\"hotspot-title\">Muistojen ja vaikutteiden holvi \u2013 miten piirt\u00e4j\u00e4n tyyli rakentuu?<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/digitaalista-mangaa-ja-muita-solvauksia\/\"\n          class=\"hotspot hotspot-mobile-12\"\n          style=\"left: 32.4%; top: 56%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_digimangaa.webp\" alt=\"Avaa sarjakuva Digitaalista mangaa ja muita solvauksia\">\n          <span class=\"hotspot-title\">Digitaalista mangaa ja muita solvauksia<\/span>\n        <\/a>   \n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/kuinka-suunnitellaan-naisille-ja-miehille\/\"\n          class=\"hotspot hotspot-mobile-13\"\n          style=\"left: 27.6%; top: 61.4%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_suunnitellaannaisille.webp\" alt=\"Avaa artikkeli kuinka suunnitellaan naisille ja miehille\">\n          <span class=\"hotspot-title\">Kuinka suunnitellaan naisille ja miehille<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/suuntaa-katseesi-tanne\/\"\n          class=\"hotspot hotspot-mobile-14\"\n          style=\"left: 33.8%; top: 67.4%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_suuntaakatseesi.webp\" alt=\"Avaa artikkeli suuntaa katseesi t\u00e4nne!\">\n          <span class=\"hotspot-title\">Suuntaa katseesi t\u00e4nne!<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/tekoaly\/\"\n          class=\"hotspot hotspot-mobile-15\"\n          style=\"left: 45%; top: 72.7%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_tekoalyvr2.webp\" alt=\"Avaa artikkeli Teko\u00e4ly \u2013 renki, is\u00e4nt\u00e4 vai el\u00e4m\u00e4si avuliain kollega?\">\n          <span class=\"hotspot-title\">Teko\u00e4ly \u2013 renki, is\u00e4nt\u00e4 vai el\u00e4m\u00e4si avuliain kollega?<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/kansallisromantiikka-ennen-ja-nyt\/\"\n          class=\"hotspot hotspot-mobile-16\"\n          style=\"left: 23.4%; top: 78.9%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_kansallisromantiikka.webp\" alt=\"Avaa artikkeli Kansallisromantiikka 2020-luvulla \u2013 ajatuksia suomalaisuudesta\">\n          <span class=\"hotspot-title\">Kansallisromantiikka ennen... ja nyt?<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/nayta-ala-kerro\/\"\n          class=\"hotspot hotspot-mobile-17\"\n          style=\"left: 22.6%; top: 84.6%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukka_naytaalakerro.webp\" alt=\"Avaa artikkeli N\u00e4yt\u00e4, \u00e4l\u00e4 kerro: fantasiahahmojen asuissa piilev\u00e4t tarinat\">\n          <span class=\"hotspot-title\">N\u00e4yt\u00e4, \u00e4l\u00e4 kerro: fantasiahahmojen asuissa piilev\u00e4t tarinat<\/span>\n        <\/a>\n        \n        <a href=\"https:\/\/graphic.fi\/umg2026\/hyvaa-yota-morot\/\"\n          class=\"hotspot hotspot-mobile-18\"\n          style=\"left: 44.2%; top: 91.4%;\" >\n          <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/kukat_hyvaayota.webp\" alt=\"Avaa artikkeli Hyv\u00e4\u00e4 y\u00f6t\u00e4, m\u00f6r\u00f6t!\">\n          <span class=\"hotspot-title\">Hyv\u00e4\u00e4 y\u00f6t\u00e4, m\u00f6r\u00f6t!<\/span>\n        <\/a> \n        \n\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n\n\n<!-- DESKTOPIN ARTIKKELIALUE\niframe avataan t\u00e4nne  -->\n<div id=\"panorama-content\"><\/div>\n\n<!-- PALAA PUUTARHAAN -NAPPI  -->\n<div class=\"back-button-wrap\">\n  <button id=\"back-to-garden\" aria-label=\"Palaa yl\u00f6s\">\n    <img decoding=\"async\" src=\"https:\/\/graphic.fi\/umg2026\/wp-content\/uploads\/Nuoli-Ylos.png\">\n    <\/button>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27e658bc elementor-widget elementor-widget-html\" data-id=\"27e658bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- JAVASCRIPT\n- desktop: hotspot avaa iframeen\n- mobiili: hotspot toimii normaalina linkkin\u00e4\n\n-->\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  const content = document.getElementById('panorama-content');\n  const backWrap = document.querySelector('.back-button-wrap');\n  const backBtn = document.getElementById('back-to-garden');\n  const gardenTop = document.getElementById('garden-top');\n  const desktopWrapper = document.querySelector('.panorama-desktop .panorama-wrapper');\n  const footer = document.querySelector('.elementor-location-footer');\n  const isChrome = \/Chrome\/.test(navigator.userAgent) && \/Google Inc\/.test(navigator.vendor); \/\/ chromelle kevyempi scrollaus\n\n  \/* IFRAME-KORKEUDEN S\u00c4\u00c4T\u00d6\n  - kasvattaa iframen koko artikkelin mittaiseksi *\/\n  function resizeIframe(iframe) {\n    try {\n      const doc = iframe.contentDocument || iframe.contentWindow.document;\n      if (!doc) return;\n\n      const newHeight = Math.max(\n        doc.body.scrollHeight,\n        doc.documentElement.scrollHeight,\n        doc.body.offsetHeight,\n        doc.documentElement.offsetHeight,\n        doc.body.clientHeight,\n        doc.documentElement.clientHeight\n      );\n\n    \/* Lis\u00e4t\u00e4\u00e4n pieni turvamarginaali vain laskettuun sis\u00e4lt\u00f6korkeuteen,\n   mutta estet\u00e4\u00e4n loputon kasvaminen Chromessa *\/\n    const finalHeight = newHeight + 80;\n    \n    if (Math.abs(iframe.offsetHeight - finalHeight) > 5) {\n      iframe.style.height = finalHeight + 'px';\n    }\n\n    } catch (error) {\n      console.error('Iframe-korkeuden m\u00e4\u00e4ritys ep\u00e4onnistui:', error);\n    }\n  }\n\n\/* KUKAN KESKITYS PANORAAMASSA *\/\nfunction centerFlowerInPanorama(flower) {\n  if (!desktopWrapper || !flower) return;\n\n  const wrapperWidth = desktopWrapper.clientWidth;\n  const flowerLeft = flower.offsetLeft;\n  const flowerWidth = flower.offsetWidth;\n\n  const targetScroll = flowerLeft + (flowerWidth \/ 2) - (wrapperWidth \/ 2);\n\n  desktopWrapper.scrollTo({\n    left: targetScroll,\n    behavior: 'smooth'\n  });\n}\n\n\/* HOTSPOT-KLIKKAUS, SIS\u00c4LLYSLUETTELO\n   - desktopilla iframeen, mobiilissa linkki toimii normaalisti *\/\ndocument.addEventListener('click', function (e) {\n  const hotspot = e.target.closest('.hotspot, .garden-article-link');\n  if (!hotspot) return;\n\n  \/\/ mobiilissa ei estet\u00e4 normaalia linkki\u00e4\n  if (window.innerWidth < 768) return;\n\n  e.preventDefault();\n  \n  \/* KESKITYS: klikattu panoraaman kukka *\/\nif (\n  hotspot.classList.contains('hotspot') &&\n  hotspot.dataset.centerFlower === 'true'\n) {\n  centerFlowerInPanorama(hotspot);\n}\n\n\/* KESKITYS: sis\u00e4llysluettelon linkki \u2192 siihen liittyv\u00e4 kukka *\/\nif (\n  window.innerWidth >= 768 &&\n  hotspot.classList.contains('garden-article-link') &&\n  hotspot.dataset.targetFlower\n) {\n  const targetFlower = document.querySelector(hotspot.dataset.targetFlower);\n\n  if (targetFlower) {\n    centerFlowerInPanorama(targetFlower);\n  }\n}\n  \n  \/* Jos klikattiin oikeaa kukkaa, keskitet\u00e4\u00e4n kukka panoraamassa\n   - ei koske sis\u00e4llysluettelon linkkej\u00e4 *\/\n    if (hotspot.classList.contains('hotspot') && hotspot.dataset.centerFlower === 'true') {\n      centerFlowerInPanorama(hotspot);\n    }\n      \n      \/* Jos klikattiin sis\u00e4llysluettelon linkki\u00e4,\n       suljetaan overlay ennen artikkelin avaamista iframeen *\/\n    const tocOverlay = document.getElementById('toc-overlay');\n    if (tocOverlay) {\n      tocOverlay.classList.remove('open');\n    }\n\n  const url = hotspot.getAttribute('href');\n  if (!content) return;\n  \n\n  if (!url || url === '#') {\n    content.innerHTML = '<p>Linkki puuttuu tai on viel\u00e4 #.<\/p>';\n    content.style.display = 'block';\n    return;\n  }\n\ncontent.innerHTML = `\n  <iframe\n    id=\"garden-iframe\"\n    src=\"${url}\"\n    style=\"width:100%; height:1200px; border:none; display:block;\"\n    scrolling=\"no\"\n    loading=\"eager\">\n  <\/iframe>\n`;\n  \n  content.style.display = 'block';\n\n  const iframe = document.getElementById('garden-iframe');\n\n  if (iframe) {\n    iframe.addEventListener('load', function () {\n      resizeIframe(iframe);\n      setTimeout(() => resizeIframe(iframe), 300);\n\n      \/* P\u00e4ivit\u00e4 korkeus my\u00f6s jos iframe-sis\u00e4lt\u00f6 muuttuu my\u00f6hemmin *\/\n      try {\n        const doc = iframe.contentDocument || iframe.contentWindow.document;\n       \/*\n       const observer = new MutationObserver(() => resizeIframe(iframe));\n        observer.observe(doc.body, {\n          childList: true,\n          subtree: true,\n          attributes: true\n        }); *\/\n        \n      } catch (error) {\n        console.error('MutationObserver iframeen ep\u00e4onnistui:', error);\n      }\n    });\n  }\n\n    \n    \/* SKROLLAUS ARTIKKELIIN\n   - Chrome: suora siirtym\u00e4 (ei animaatiota \u2192 ei nykimist\u00e4)\n   - muut selaimet: smooth scroll *\/\n   \n    setTimeout(() => {\n      if (isChrome) {\n        content.scrollIntoView({ block: 'start' });\n      } else {\n        smoothScrollTo(content, 900);\n      }\n    }, 250);\n    \n\n});\n\n\/* TOC TOGGLE *\/\nconst tocToggle = document.getElementById('toc-toggle');\nconst tocOverlay = document.getElementById('toc-overlay');\nconst tocClose = document.getElementById('toc-close');\n\nif (tocToggle && tocOverlay) {\n  tocToggle.addEventListener('click', function () {\n    tocOverlay.classList.add('open');\n  });\n}\n\nif (tocClose && tocOverlay) {\n  tocClose.addEventListener('click', function () {\n    tocOverlay.classList.remove('open');\n  });\n}\n\n\/* Sulje overlay, jos klikataan tummaa taustaa *\/\nif (tocOverlay) {\n  tocOverlay.addEventListener('click', function (e) {\n    if (e.target === tocOverlay) {\n      tocOverlay.classList.remove('open');\n    }\n  });\n}\n\n\n\/* CUSTOM SMOOTH SCROLL\n   - korvaa scrollIntoView, jotta voidaan s\u00e4\u00e4t\u00e4\u00e4 pystyscrollauksen nopeutta *\/\nfunction smoothScrollTo(target, duration = 900) {\n  if (!target) return;\n\n  const targetPosition = target.getBoundingClientRect().top + window.pageYOffset;\n  const startPosition = window.pageYOffset;\n  const distance = targetPosition - startPosition;\n  let startTime = null;\n\n  \/* pehme\u00e4 ease-in-out animaatio *\/\n  function easeInOutQuad(t) {\n    return t < 0.5\n      ? 2 * t * t\n      : 1 - Math.pow(-2 * t + 2, 2) \/ 2;\n  }\n\n  function animation(currentTime) {\n    if (startTime === null) startTime = currentTime;\n\n    const timeElapsed = currentTime - startTime;\n    const progress = Math.min(timeElapsed \/ duration, 1);\n    const easedProgress = easeInOutQuad(progress);\n\n    window.scrollTo(0, startPosition + distance * easedProgress);\n\n    if (timeElapsed < duration) {\n      requestAnimationFrame(animation);\n    }\n  }\n\n  requestAnimationFrame(animation);\n}\n\n\n\/* PALAA PUUTARHAAN -NAPPI *\/\nif (backBtn && gardenTop) {\n  backBtn.addEventListener('click', function () {\n\n    if (isChrome) {\n\n      gardenTop.scrollIntoView({\n        behavior: 'smooth',\n        block: 'start'\n      });\n\n    } else {\n\n      smoothScrollTo(gardenTop, 900);\n\n    }\n\n  });\n}\n\nwindow.addEventListener('scroll', function () {\n  if (!backWrap || !gardenTop || !content) {\n    console.log('MISSING ELEMENT', { backWrap, gardenTop, content });\n    return;\n  }\n\n    console.log('SCROLL EVENT', {\n      scrollY: window.scrollY,\n      hasShowClass: backWrap.classList.contains('show')\n    });\n    \n    \/* Jos iframe ei ole avattu, nappia ei koskaan n\u00e4ytet\u00e4 *\/\n    const iframe = document.getElementById('garden-iframe');\n    if (!iframe) {\n      backWrap.classList.remove('show');\n      return;\n    }\n    \n  \/* contentTop: miss\u00e4 kohtaa artikkelialue alkaa suhteessa n\u00e4kym\u00e4\u00e4n *\/\n  const contentTop = content.getBoundingClientRect().top;\n\n  \/* Sivun scroll-m\u00e4\u00e4r\u00e4 pikselein\u00e4 *\/\n  const scrollY = window.scrollY || window.pageYOffset;\n\n  \/* S\u00c4\u00c4D\u00c4 T\u00c4T\u00c4 ARVOA:\n     - pienempi luku = nappi n\u00e4kyy aikaisemmin\n     - suurempi luku = nappi n\u00e4kyy my\u00f6hemmin\n     Esim.:\n     -50  = aikaisin\n     -200 = oletus\n     -400 = vasta selv\u00e4sti artikkelissa\n  *\/\n  const showAfter = -300;\n\n  \/* S\u00c4\u00c4D\u00c4 T\u00c4T\u00c4 ARVOA:\n     Jos k\u00e4ytt\u00e4j\u00e4 on l\u00e4hell\u00e4 sivun yl\u00e4osaa, nappi piilotetaan varmasti.\n     Kasvata arvoa jos nappi n\u00e4kyy liian pitk\u00e4\u00e4n ylh\u00e4\u00e4ll\u00e4.\n  *\/\n  const hideNearTop = 300;\n  \n   console.log('POSITIONS', {\n    contentTop: contentTop,\n    scrollY: scrollY\n  });\n\n  \/* Jos k\u00e4ytt\u00e4j\u00e4 on aivan ylh\u00e4\u00e4ll\u00e4 \/ tarpeeksi l\u00e4hell\u00e4 puutarhan alkua, piilota nappi varmasti *\/\n  if (scrollY < hideNearTop) {\n    backWrap.classList.remove('show');\n    return;\n  }\n\n  \/* Jos artikkelialue ei ole viel\u00e4 tarpeeksi ylh\u00e4\u00e4ll\u00e4, piilota nappi *\/\n  if (contentTop > showAfter) {\n    console.log('HIDE: content not high enough');\n    backWrap.classList.remove('show');\n  } else {\n    console.log('SHOW: content passed threshold');\n    backWrap.classList.add('show');\n  }\n  \n    \/* FOOTER-V\u00c4IST\u00d6\n       - kun footer tulee n\u00e4kyviin, nostetaan nappia ylemm\u00e4s *\/\n    if (footer && backBtn) {\n      const footerTop = footer.getBoundingClientRect().top;\n      const windowHeight = window.innerHeight;\n    \n      \/* S\u00c4\u00c4D\u00c4 T\u00c4T\u00c4 ARVOA:\n         suurempi luku = nappi v\u00e4ist\u00e4\u00e4 footeria aikaisemmin *\/\n      const footerAvoidDistance = 500;\n    \n      if (footerTop < windowHeight - footerAvoidDistance) {\n        backBtn.classList.add('avoid-footer');\n      } else {\n        backBtn.classList.remove('avoid-footer');\n      }\n    }\n\n});\n\n\/* CUSTOM SMOOTH SCROLL PANORAAMALLE\n   - korvaa scrollBy({ behavior: 'smooth' }), jotta voidaan s\u00e4\u00e4t\u00e4\u00e4 nopeutta *\/\nfunction smoothScrollPanorama(element, distance, duration = 700) {\n  const startPosition = element.scrollLeft;\n  const targetPosition = startPosition + distance;\n  const maxScroll = element.scrollWidth - element.clientWidth;\n  const clampedTarget = Math.max(0, Math.min(targetPosition, maxScroll));\n  const actualDistance = clampedTarget - startPosition;\n  let startTime = null;\n\n  \/* pehme\u00e4 ease-in-out animaatio *\/\n  function easeInOutQuad(t) {\n    return t < 0.5\n      ? 2 * t * t\n      : 1 - Math.pow(-2 * t + 2, 2) \/ 2;\n  }\n\n  function animation(currentTime) {\n    if (startTime === null) startTime = currentTime;\n\n    const timeElapsed = currentTime - startTime;\n    const progress = Math.min(timeElapsed \/ duration, 1);\n    const easedProgress = easeInOutQuad(progress);\n\n    element.scrollLeft = startPosition + actualDistance * easedProgress;\n    updateArrowVisibility();\n\n    if (timeElapsed < duration) {\n      requestAnimationFrame(animation);\n    }\n  }\n\n  requestAnimationFrame(animation);\n}\n\n  \/* NUOLINAVIGOINTI PANORAAMALLE\n  - klikkaus = yksi isompi siirtym\u00e4\n  - mousedown = jatkuva liike *\/\n  \n  const leftBtn = document.querySelector('.arrow-left');\n  const rightBtn = document.querySelector('.arrow-right');\n\n  let animationFrameId = null;\n  let scrollDirection = 0;\n  let holdStarted = false;\n\n  function updateArrowVisibility() {\n    if (!desktopWrapper || !leftBtn || !rightBtn) return;\n\n    const maxScroll = desktopWrapper.scrollWidth - desktopWrapper.clientWidth;\n    const currentScroll = desktopWrapper.scrollLeft;\n    const tolerance = 2;\n\n    leftBtn.style.display = currentScroll <= tolerance ? 'none' : 'flex';\n    rightBtn.style.display = currentScroll >= maxScroll - tolerance ? 'none' : 'flex';\n  }\n\n  function smoothStepScroll() {\n    if (!desktopWrapper || scrollDirection === 0) return;\n\n    desktopWrapper.scrollLeft += scrollDirection * 10; \/\/ LIIKKEEN NOPEUS\n    updateArrowVisibility();\n\n    animationFrameId = requestAnimationFrame(smoothStepScroll);\n  }\n\n  function startScroll(direction) {\n    stopScroll();\n    scrollDirection = direction;\n    holdStarted = true;\n    animationFrameId = requestAnimationFrame(smoothStepScroll);\n  }\n\n  function stopScroll() {\n    scrollDirection = 0;\n    if (animationFrameId) {\n      cancelAnimationFrame(animationFrameId);\n      animationFrameId = null;\n    }\n  }\n\n  if (leftBtn && rightBtn && desktopWrapper) {\n    let holdTimeout = null;\n\n    function setupArrow(button, direction) {\n      button.addEventListener('mousedown', function () {\n        holdStarted = false;\n\n        holdTimeout = setTimeout(() => {\n          startScroll(direction);\n        }, 140); \/\/ lyhyt viive: erottaa klikkauksen ja pohjassa pidon\n      });\n\n      button.addEventListener('mouseup', function () {\n        clearTimeout(holdTimeout);\n\n        if (!holdStarted) {\n        \/* PEHME\u00c4 PANORAAMASIIRTYM\u00c4\n   - korvaa selaimen oman smooth-scrollin *\/\n    smoothScrollPanorama(desktopWrapper, direction * 900, 700); \/\/ siirtym\u00e4matka + s\u00e4\u00e4d\u00e4 arvoa (ms) nopeuden mukaan\n    setTimeout(updateArrowVisibility, 750);\n        }\n\n        stopScroll();\n      });\n\n      button.addEventListener('mouseleave', function () {\n        clearTimeout(holdTimeout);\n        stopScroll();\n      });\n    }\n\n    setupArrow(leftBtn, -1);\n    setupArrow(rightBtn, 1);\n\n    document.addEventListener('mouseup', function () {\n      clearTimeout(holdTimeout);\n      stopScroll();\n    });\n\n    desktopWrapper.addEventListener('scroll', updateArrowVisibility);\n    window.addEventListener('resize', updateArrowVisibility);\n\n    updateArrowVisibility();\n  }\n  \n\n\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c1544d elementor-widget elementor-widget-spacer\" data-id=\"1c1544d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Puutarha Tutustu juttuihin seuraamalla k\u00f6ynn\u00f6st\u00e4 ja l\u00e4hde matkalle graafisen suunnittelun ihmeelliseen maailmaan! Kaikki jutut Kaikki jutut Manifesti P\u00e4\u00e4kirjoitus Valitse minut! Maskotit marketin hyllyll\u00e4 Kenties min\u00e4kin Onko helpompi vain uppoutua samaan mereen? Vaeltava katse Merkityksen muoto Matkailu kartalla Taide osana autokulttuuria Muistojen ja vaikutteiden holvi \u2013 miten piirt\u00e4j\u00e4n tyyli rakentuu Digitaalista mangaa ja muita solvauksia Kuinka [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7765","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/graphic.fi\/umg2026\/wp-json\/wp\/v2\/pages\/7765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphic.fi\/umg2026\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/graphic.fi\/umg2026\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/graphic.fi\/umg2026\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/graphic.fi\/umg2026\/wp-json\/wp\/v2\/comments?post=7765"}],"version-history":[{"count":440,"href":"https:\/\/graphic.fi\/umg2026\/wp-json\/wp\/v2\/pages\/7765\/revisions"}],"predecessor-version":[{"id":12218,"href":"https:\/\/graphic.fi\/umg2026\/wp-json\/wp\/v2\/pages\/7765\/revisions\/12218"}],"wp:attachment":[{"href":"https:\/\/graphic.fi\/umg2026\/wp-json\/wp\/v2\/media?parent=7765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}