{"id":2,"date":"2026-09-03T09:16:49","date_gmt":"2026-09-03T09:16:49","guid":{"rendered":"https:\/\/itdd.au.dk\/the-house\/?page_id=2"},"modified":"2026-10-21T15:13:03","modified_gmt":"2026-10-21T15:13:03","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/itdd.au.dk\/the-house\/sample-page\/","title":{"rendered":"The Garden (4)"},"content":{"rendered":"\n<style>\nbody {\n  background-image: url('https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/Side-Garden-scaled.jpg');\n}\n<\/style>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/itdd.au.dk\/the-house\/gardenwindow\/\">I continue&#8230;<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/itdd.au.dk\/the-house\/frontdoor\/\">Go back to the door<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<style>\n.house-side-menu {\n  position: fixed;\n  left: 18px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  flex-direction: column;\n  gap: 11px;\n  padding-left: 10px;\n  z-index: 999990;\n}\n\n.house-side-menu::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background: rgba(255,255,255,0.35);\n}\n\n.house-menu-button {\n  position: relative;\n  width: 70.5px;\n  height: 70.5px;\n  padding: 0;\n  margin: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 2;\n}\n\n.house-menu-button img {\n  width: 64.5px;\n  height: 64.5px;\n  object-fit: contain;\n  display: block;\n  transition: transform 0.18s ease, filter 0.18s ease;\n}\n\n.house-menu-button.house-ear img {\n  width: 60px;\n  height: 69px;\n}\n\n.house-menu-button.house-eye img {\n  width: 120px;\n  height: 136.5px;\n}\n\n.house-menu-button:hover img {\n  transform: translateX(5px) scale(1.08);\n  filter: brightness(1.08);\n}\n\n.house-menu-label {\n  position: absolute;\n  left: 53px;\n  top: 50%;\n  transform: translateY(-50%);\n  white-space: nowrap;\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: 14px;\n  line-height: 1;\n  color: #fff;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.18s ease;\n}\n\n.house-menu-button:hover .house-menu-label {\n  opacity: 1;\n}\n\n\n\/* =========================================================\n   HELP POP-OUT\n   ========================================================= *\/\n\n.house-help-box {\n  position: fixed;\n  left: 82px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  width: 240px;\n  max-width: calc(100vw - 110px);\n\n  padding: 18px 20px 20px;\n\n  background: rgba(245, 238, 216, 0.97);\n  color: #222;\n\n  border: 1px solid rgba(70, 55, 35, 0.45);\n  box-shadow: 0 5px 18px rgba(0,0,0,0.28);\n\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: 15px;\n  line-height: 1.45;\n\n  z-index: 999995;\n\n  display: none;\n}\n\n.house-help-box.is-open {\n  display: block;\n}\n\n.house-help-close {\n  position: absolute;\n  top: 5px;\n  right: 8px;\n\n  border: 0;\n  background: transparent;\n\n  color: #333;\n  font-family: Arial, sans-serif;\n  font-size: 20px;\n  line-height: 1;\n\n  padding: 0;\n  cursor: pointer;\n}\n\n.house-help-close:hover {\n  opacity: 0.55;\n}\n\n.house-help-text {\n  padding-right: 12px;\n}\n\n\n\/* =========================================================\n   PAPER NOTE BOXES\n   ========================================================= *\/\n\n.house-note-box,\n.house-notes-box {\n  position: fixed;\n\n  left: 82px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  width: 285px;\n  max-width: calc(100vw - 115px);\n\n  background: rgba(245, 238, 216, 0.98);\n  color: #222;\n\n  border: 1px solid rgba(70, 55, 35, 0.45);\n  box-shadow: 0 5px 20px rgba(0,0,0,0.30);\n\n  font-family: Georgia, \"Times New Roman\", serif;\n\n  z-index: 999996;\n\n  display: none;\n}\n\n.house-note-box.is-open,\n.house-notes-box.is-open {\n  display: block;\n}\n\n.house-note-header,\n.house-notes-header {\n  position: relative;\n\n  padding: 13px 38px 10px 17px;\n\n  border-bottom: 1px solid rgba(70,55,35,0.25);\n\n  font-size: 16px;\n  line-height: 1.2;\n}\n\n.house-note-close,\n.house-notes-close {\n  position: absolute;\n\n  top: 5px;\n  right: 8px;\n\n  border: 0;\n  background: transparent;\n\n  color: #333;\n\n  font-family: Arial, sans-serif;\n  font-size: 20px;\n  line-height: 1;\n\n  padding: 0;\n  cursor: pointer;\n}\n\n.house-note-close:hover,\n.house-notes-close:hover {\n  opacity: 0.55;\n}\n\n\n\/* =========================================================\n   NOTE FORM\n   ========================================================= *\/\n\n.house-note-content {\n  padding: 15px 17px 17px;\n}\n\n.house-note-content label {\n  display: block;\n  margin-bottom: 5px;\n  font-size: 14px;\n}\n\n.house-note-content input,\n.house-note-content textarea {\n  box-sizing: border-box;\n\n  width: 100%;\n\n  border: 1px solid rgba(70,55,35,0.35);\n\n  background: rgba(255,255,255,0.72);\n\n  color: #222;\n\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: 14px;\n\n  padding: 8px;\n\n  outline: none;\n}\n\n.house-note-content input:focus,\n.house-note-content textarea:focus {\n  border-color: rgba(70,55,35,0.7);\n}\n\n.house-note-content textarea {\n  min-height: 105px;\n  resize: vertical;\n}\n\n.house-note-field {\n  margin-bottom: 12px;\n}\n\n.house-note-submit {\n  border: 1px solid rgba(70,55,35,0.45);\n\n  background: rgba(70,55,35,0.12);\n\n  color: #222;\n\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-size: 14px;\n\n  padding: 7px 13px;\n\n  cursor: pointer;\n}\n\n.house-note-submit:hover {\n  background: rgba(70,55,35,0.20);\n}\n\n.house-note-submit:disabled {\n  opacity: 0.55;\n  cursor: wait;\n}\n\n.house-note-status {\n  margin-top: 10px;\n\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n.house-note-status.success {\n  color: #315b35;\n}\n\n.house-note-status.error {\n  color: #8a3028;\n}\n\n\n\/* =========================================================\n   PAPER NOTES LIST\n   ========================================================= *\/\n\n.house-notes-content {\n  padding: 14px 17px 17px;\n  max-height: 55vh;\n  overflow-y: auto;\n}\n\n.house-notes-intro {\n  margin-bottom: 12px;\n\n  font-size: 13px;\n  line-height: 1.4;\n\n  opacity: 0.75;\n}\n\n.house-single-note {\n  padding: 10px 0;\n\n  border-bottom: 1px solid rgba(70,55,35,0.22);\n}\n\n.house-single-note:last-child {\n  border-bottom: 0;\n}\n\n.house-single-note-author {\n  margin-bottom: 4px;\n\n  font-size: 13px;\n  font-weight: bold;\n}\n\n.house-single-note-date {\n  margin-bottom: 6px;\n\n  font-size: 11px;\n\n  opacity: 0.6;\n}\n\n.house-single-note-text {\n  font-size: 14px;\n  line-height: 1.45;\n\n  white-space: pre-wrap;\n}\n\n.house-no-notes {\n  font-size: 14px;\n  line-height: 1.45;\n  opacity: 0.75;\n}\n\n\n\/* =========================================================\n   ARTWORK\n   ========================================================= *\/\n\n#house-art-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 999999;\n\n  display: none;\n\n  align-items: center;\n  justify-content: center;\n\n  background: rgba(0,0,0,0.96);\n}\n\n#house-art-overlay img {\n  max-width: 96vw;\n  max-height: 94vh;\n\n  width: auto;\n  height: auto;\n\n  object-fit: contain;\n\n  display: block;\n}\n\n#house-art-close {\n  position: absolute;\n\n  top: 16px;\n  right: 22px;\n\n  border: 0;\n  background: transparent;\n\n  color: #fff;\n\n  font-family: Arial, sans-serif;\n  font-size: 32px;\n  line-height: 1;\n\n  cursor: pointer;\n\n  z-index: 2;\n}\n\n#house-art-close:hover {\n  opacity: 0.7;\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 700px) {\n\n  .house-side-menu {\n    left: 6px;\n    gap: 7px;\n    padding-left: 7px;\n  }\n\n  .house-menu-button {\n    width: 54px;\n    height: 54px;\n  }\n\n  .house-menu-button img {\n    width: 48px;\n    height: 48px;\n  }\n\n  .house-menu-button.house-ear img {\n    width: 45px;\n    height: 51px;\n  }\n\n  .house-menu-button.house-eye img {\n    width: 91.5px;\n    height: 105px;\n  }\n\n  .house-menu-label {\n    display: none;\n  }\n\n  .house-help-box,\n  .house-note-box,\n  .house-notes-box {\n    left: 51px;\n    top: 50%;\n\n    width: 220px;\n    max-width: calc(100vw - 65px);\n  }\n\n  .house-help-box {\n    padding: 16px 17px 18px;\n    font-size: 14px;\n  }\n\n  .house-note-header,\n  .house-notes-header {\n    font-size: 15px;\n  }\n\n  .house-note-content {\n    padding: 14px;\n  }\n\n  .house-notes-content {\n    max-height: 52vh;\n  }\n\n  #house-art-overlay img {\n    max-width: 94vw;\n    max-height: 90vh;\n  }\n\n  #house-art-close {\n    top: 10px;\n    right: 14px;\n    font-size: 28px;\n  }\n}\n<\/style>\n\n\n<!-- =========================================================\n     THE HOUSE SIDE MENU\n     ========================================================= -->\n\n<div id=\"house-side-menu\" class=\"house-side-menu\">\n\n  <button type=\"button\" class=\"house-menu-button house-story\" aria-label=\"Listen to the Story\">\n\n    <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/Antik-blomsterknap-100px.png\" alt=\"\">\n\n    <span class=\"house-menu-label\">\n      Listen to the Story\n    <\/span>\n\n  <\/button>\n\n\n  <button type=\"button\" class=\"house-menu-button house-eye\" aria-label=\"See the Art\">\n\n    <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/eye_pendant-removebg-preview.png\" alt=\"\">\n\n    <span class=\"house-menu-label\">\n      See the Art\n    <\/span>\n\n  <\/button>\n\n\n  <button type=\"button\" class=\"house-menu-button house-ear\" aria-label=\"Listen to the House\">\n\n    <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/ear-removebg-preview.png\" alt=\"\">\n\n    <span class=\"house-menu-label\">\n      Listen to the House\n    <\/span>\n\n  <\/button>\n\n\n  <button type=\"button\" class=\"house-menu-button house-help\" aria-label=\"Get Help\">\n\n    <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/questionmark-removebg-preview-1.png\" alt=\"\">\n\n    <span class=\"house-menu-label\">\n      Get Help\n    <\/span>\n\n  <\/button>\n\n\n  <button type=\"button\" class=\"house-menu-button house-note\" aria-label=\"Leave a note behind\">\n\n    <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/Inkpot-removebg-preview.png\" alt=\"\">\n\n    <span class=\"house-menu-label\">\n      leave a note behind\n    <\/span>\n\n  <\/button>\n\n\n  <button type=\"button\" class=\"house-menu-button house-notes\" aria-label=\"Search for paper notes\">\n\n    <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/Louope-removebg-preview.png\" alt=\"\">\n\n    <span class=\"house-menu-label\">\n      search for paper notes\n    <\/span>\n\n  <\/button>\n\n<\/div>\n\n\n<!-- =========================================================\n     HELP\n     ========================================================= -->\n\n<div id=\"house-help-box\" class=\"house-help-box\" role=\"dialog\" aria-hidden=\"true\">\n\n  <button type=\"button\" id=\"house-help-close\" class=\"house-help-close\" aria-label=\"Close help\">\n    \u00d7\n  <\/button>\n\n  <div id=\"house-help-text\" class=\"house-help-text\">\n  <\/div>\n\n<\/div>\n\n\n<!-- =========================================================\n     LEAVE A NOTE\n     ========================================================= -->\n\n<div id=\"house-note-box\" class=\"house-note-box\" role=\"dialog\" aria-hidden=\"true\">\n\n  <div class=\"house-note-header\">\n\n    Leave a note behind\n\n    <button type=\"button\" id=\"house-note-close\" class=\"house-note-close\" aria-label=\"Close note box\">\n      \u00d7\n    <\/button>\n\n  <\/div>\n\n\n  <div class=\"house-note-content\">\n\n    <form id=\"house-note-form\">\n\n      <div class=\"house-note-field\">\n\n        <label for=\"house-note-author\">\n          Name\n        <\/label>\n\n        <input type=\"text\" id=\"house-note-author\" name=\"author\" maxlength=\"245\" autocomplete=\"name\" required=\"\">\n\n      <\/div>\n\n\n      <div class=\"house-note-field\">\n\n        <label for=\"house-note-email\">\n          Email\n        <\/label>\n\n        <input type=\"email\" id=\"house-note-email\" name=\"email\" autocomplete=\"email\" required=\"\">\n\n      <\/div>\n\n\n      <div class=\"house-note-field\">\n\n        <label for=\"house-note-comment\">\n          Note\n        <\/label>\n\n        <textarea id=\"house-note-comment\" name=\"comment\" required=\"\"><\/textarea>\n\n      <\/div>\n\n\n      <button type=\"submit\" id=\"house-note-submit\" class=\"house-note-submit\">\n        Leave note\n      <\/button>\n\n\n      <div id=\"house-note-status\" class=\"house-note-status\"><\/div>\n\n    <\/form>\n\n  <\/div>\n\n<\/div>\n\n\n<!-- =========================================================\n     SHOW PAPER NOTES\n     ========================================================= -->\n\n<div id=\"house-notes-box\" class=\"house-notes-box\" role=\"dialog\" aria-hidden=\"true\">\n\n  <div class=\"house-notes-header\">\n\n    Paper notes\n\n    <button type=\"button\" id=\"house-notes-close\" class=\"house-notes-close\" aria-label=\"Close paper notes\">\n      \u00d7\n    <\/button>\n\n  <\/div>\n\n\n  <div id=\"house-notes-content\" class=\"house-notes-content\">\n\n    <div class=\"house-notes-intro\">\n      Notes left behind on this page:\n    <\/div>\n\n    <div id=\"house-notes-list\">\n      Loading\u2026\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n<!-- =========================================================\n     ARTWORK\n     ========================================================= -->\n\n<div id=\"house-art-overlay\">\n\n  <button id=\"house-art-close\" type=\"button\" aria-label=\"Close artwork\">\n    \u00d7\n  <\/button>\n\n  <img decoding=\"async\" id=\"house-art-image\" src=\"\" alt=\"\">\n\n<\/div>\n\n\n<script>\n(function () {\n\n  function initHouseMenu() {\n\n    const menu =\n      document.getElementById(\"house-side-menu\");\n\n    if (!menu) {\n      return;\n    }\n\n    if (menu.dataset.houseMenuReady === \"true\") {\n      return;\n    }\n\n    menu.dataset.houseMenuReady = \"true\";\n\n\n    \/* =======================================================\n       PAGE SETTINGS\n       ======================================================= *\/\n\n    function getFiles() {\n\n      return window.houseMenuFiles || {\n\n        story: \"\",\n        art: \"\",\n        house: \"\",\n        help: \"\"\n\n      };\n\n    }\n\n\n    \/* =======================================================\n       CURRENT WORDPRESS PAGE \/ POST ID\n       ======================================================= *\/\n\n    let currentPostId = null;\n\n\n    \/*\n     * WordPress normally places one of these classes\n     * on the <body> element:\n     *\n     * page-id-123\n     * postid-123\n     *\n     * We support both.\n     *\/\n\n    function findPostIdFromBody() {\n\n      const bodyClasses =\n        document.body.className || \"\";\n\n\n      \/*\n       * Regular WordPress Page\n       *\/\n\n      const pageMatch =\n        bodyClasses.match(\n          \/(?:^|\\s)page-id-(\\d+)(?:\\s|$)\/\n        );\n\n\n      if (pageMatch && pageMatch[1]) {\n\n        return parseInt(\n          pageMatch[1],\n          10\n        );\n\n      }\n\n\n      \/*\n       * Regular WordPress Post\n       *\/\n\n      const postMatch =\n        bodyClasses.match(\n          \/(?:^|\\s)postid-(\\d+)(?:\\s|$)\/\n        );\n\n\n      if (postMatch && postMatch[1]) {\n\n        return parseInt(\n          postMatch[1],\n          10\n        );\n\n      }\n\n\n      return null;\n\n    }\n\n\n    \/*\n     * Find the current WordPress Page\/Post ID.\n     *\n     * The body class is the preferred method.\n     *\n     * REST API URL matching is retained as a fallback\n     * for unusual WordPress templates.\n     *\/\n\n    async function findCurrentPostId() {\n\n      if (currentPostId) {\n\n        return currentPostId;\n\n      }\n\n\n      \/* -----------------------------------------------------\n         FIRST: BODY CLASS\n         ----------------------------------------------------- *\/\n\n      const bodyId =\n        findPostIdFromBody();\n\n\n      if (bodyId) {\n\n        currentPostId =\n          bodyId;\n\n        return currentPostId;\n\n      }\n\n\n      \/* -----------------------------------------------------\n         SECOND: CURRENT URL \u2192 WORDPRESS PAGES\n         ----------------------------------------------------- *\/\n\n      const currentUrl =\n        window.location.href.split(\"#\")[0];\n\n      const cleanCurrentUrl =\n        currentUrl.replace(\/\\\/$\/, \"\");\n\n\n      try {\n\n        const pageResponse =\n          await fetch(\n            \"\/the-house\/wp-json\/wp\/v2\/pages\" +\n            \"?per_page=100\" +\n            \"&status=publish\",\n            {\n              credentials: \"same-origin\"\n            }\n          );\n\n\n        if (pageResponse.ok) {\n\n          const pages =\n            await pageResponse.json();\n\n\n          if (Array.isArray(pages)) {\n\n            const matchingPage =\n              pages.find(function (page) {\n\n                if (!page.link) {\n                  return false;\n                }\n\n                return (\n                  page.link.replace(\/\\\/$\/, \"\") ===\n                  cleanCurrentUrl\n                );\n\n              });\n\n\n            if (matchingPage) {\n\n              currentPostId =\n                parseInt(\n                  matchingPage.id,\n                  10\n                );\n\n              return currentPostId;\n\n            }\n\n          }\n\n        }\n\n      } catch (error) {\n\n        console.warn(\n          \"Could not identify the current WordPress page.\",\n          error\n        );\n\n      }\n\n\n      \/* -----------------------------------------------------\n         THIRD: CURRENT URL \u2192 WORDPRESS POSTS\n         ----------------------------------------------------- *\/\n\n      try {\n\n        const postResponse =\n          await fetch(\n            \"\/the-house\/wp-json\/wp\/v2\/posts\" +\n            \"?per_page=100\" +\n            \"&status=publish\",\n            {\n              credentials: \"same-origin\"\n            }\n          );\n\n\n        if (postResponse.ok) {\n\n          const posts =\n            await postResponse.json();\n\n\n          if (Array.isArray(posts)) {\n\n            const matchingPost =\n              posts.find(function (post) {\n\n                if (!post.link) {\n                  return false;\n                }\n\n                return (\n                  post.link.replace(\/\\\/$\/, \"\") ===\n                  cleanCurrentUrl\n                );\n\n              });\n\n\n            if (matchingPost) {\n\n              currentPostId =\n                parseInt(\n                  matchingPost.id,\n                  10\n                );\n\n              return currentPostId;\n\n            }\n\n          }\n\n        }\n\n      } catch (error) {\n\n        console.warn(\n          \"Could not identify the current WordPress post.\",\n          error\n        );\n\n      }\n\n\n      return null;\n\n    }\n\n\n    \/* =======================================================\n       AUDIO\n       ======================================================= *\/\n\n    let storyAudio = null;\n    let houseAudio = null;\n\n\n    function toggleAudio(type) {\n\n      const files =\n        getFiles();\n\n\n      const source =\n        type === \"story\"\n          ? files.story\n          : files.house;\n\n\n      if (!source) {\n        return;\n      }\n\n\n      let audio;\n\n\n      if (type === \"story\") {\n\n        if (!storyAudio) {\n\n          storyAudio =\n            new Audio(source);\n\n          storyAudio.loop =\n            false;\n\n        }\n\n        audio =\n          storyAudio;\n\n      } else {\n\n        if (!houseAudio) {\n\n          houseAudio =\n            new Audio(source);\n\n          houseAudio.loop =\n            false;\n\n        }\n\n        audio =\n          houseAudio;\n\n      }\n\n\n      \/*\n       * Only one house\/story audio track\n       * should play at a time.\n       *\/\n\n      if (\n        type === \"story\" &&\n        houseAudio\n      ) {\n\n        houseAudio.pause();\n\n        houseAudio.currentTime =\n          0;\n\n      }\n\n\n      if (\n        type === \"house\" &&\n        storyAudio\n      ) {\n\n        storyAudio.pause();\n\n        storyAudio.currentTime =\n          0;\n\n      }\n\n\n      if (audio.paused) {\n\n        audio.play()\n          .catch(function (error) {\n\n            console.warn(\n              \"Audio could not be played.\",\n              error\n            );\n\n          });\n\n      } else {\n\n        audio.pause();\n\n        audio.currentTime =\n          0;\n\n      }\n\n    }\n\n\n    \/* =======================================================\n       HELP\n       ======================================================= *\/\n\n    const helpBox =\n      document.getElementById(\n        \"house-help-box\"\n      );\n\n    const helpText =\n      document.getElementById(\n        \"house-help-text\"\n      );\n\n    const helpClose =\n      document.getElementById(\n        \"house-help-close\"\n      );\n\n\n    function openHelp() {\n\n      const files =\n        getFiles();\n\n\n      if (\n        !helpBox ||\n        !helpText\n      ) {\n        return;\n      }\n\n\n      helpText.textContent =\n        files.help ||\n        \"There is nothing for you to find here right now.\";\n\n\n      helpBox.classList.add(\n        \"is-open\"\n      );\n\n\n      helpBox.setAttribute(\n        \"aria-hidden\",\n        \"false\"\n      );\n\n    }\n\n\n    function closeHelp() {\n\n      if (!helpBox) {\n        return;\n      }\n\n\n      helpBox.classList.remove(\n        \"is-open\"\n      );\n\n\n      helpBox.setAttribute(\n        \"aria-hidden\",\n        \"true\"\n      );\n\n    }\n\n\n    if (helpClose) {\n\n      helpClose.addEventListener(\n        \"click\",\n        function (event) {\n\n          event.stopPropagation();\n\n          closeHelp();\n\n        }\n      );\n\n    }\n\n\n    \/* =======================================================\n       NOTE FORM\n       ======================================================= *\/\n\n    const noteBox =\n      document.getElementById(\n        \"house-note-box\"\n      );\n\n    const noteClose =\n      document.getElementById(\n        \"house-note-close\"\n      );\n\n    const noteForm =\n      document.getElementById(\n        \"house-note-form\"\n      );\n\n    const noteAuthor =\n      document.getElementById(\n        \"house-note-author\"\n      );\n\n    const noteComment =\n      document.getElementById(\n        \"house-note-comment\"\n      );\n\n    const noteSubmit =\n      document.getElementById(\n        \"house-note-submit\"\n      );\n\n    const noteStatus =\n      document.getElementById(\n        \"house-note-status\"\n      );\n\n\n    function openNoteBox() {\n\n      if (!noteBox) {\n        return;\n      }\n\n\n      if (noteStatus) {\n\n        noteStatus.textContent =\n          \"\";\n\n        noteStatus.className =\n          \"house-note-status\";\n\n      }\n\n\n      noteBox.classList.add(\n        \"is-open\"\n      );\n\n\n      noteBox.setAttribute(\n        \"aria-hidden\",\n        \"false\"\n      );\n\n\n      setTimeout(function () {\n\n        if (noteAuthor) {\n\n          noteAuthor.focus();\n\n        }\n\n      }, 50);\n\n    }\n\n\n    function closeNoteBox() {\n\n      if (!noteBox) {\n        return;\n      }\n\n\n      noteBox.classList.remove(\n        \"is-open\"\n      );\n\n\n      noteBox.setAttribute(\n        \"aria-hidden\",\n        \"true\"\n      );\n\n    }\n\n\n    if (noteClose) {\n\n      noteClose.addEventListener(\n        \"click\",\n        function (event) {\n\n          event.stopPropagation();\n\n          closeNoteBox();\n\n        }\n      );\n\n    }\n\n\n    \/* =======================================================\n       SAVE NOTE TO WORDPRESS COMMENTS\n       ======================================================= *\/\n\n    if (noteForm) {\n\n      noteForm.addEventListener(\n        \"submit\",\n        async function (event) {\n\n          event.preventDefault();\n\n          if (noteSubmit) {\n            noteSubmit.disabled = true;\n            noteSubmit.textContent = \"Finding page\u2026\";\n          }\n\n          if (noteStatus) {\n            noteStatus.textContent = \"Finding this page\u2026\";\n            noteStatus.className = \"house-note-status\";\n          }\n\n          try {\n\n            const postId = await findCurrentPostId();\n\n            if (!postId) {\n              throw new Error(\n                \"I couldn't identify this WordPress page. Please try refreshing the page.\"\n              );\n            }\n\n            const author = noteAuthor ? noteAuthor.value.trim() : \"\";\n            const comment = noteComment ? noteComment.value.trim() : \"\";\n            const emailField = document.getElementById(\"house-note-email\");\n            const email = emailField ? emailField.value.trim() : \"\";\n\n            if (!author) {\n              throw new Error(\"Please add your name.\");\n            }\n\n            if (!email) {\n              throw new Error(\"Please add your email address.\");\n            }\n\n            if (!emailField || !emailField.checkValidity()) {\n              throw new Error(\"Please enter a valid email address.\");\n            }\n\n            if (!comment) {\n              throw new Error(\"Please add your note.\");\n            }\n\n            if (noteStatus) {\n              noteStatus.textContent = \"Leaving your note\u2026\";\n              noteStatus.className = \"house-note-status\";\n            }\n\n            if (noteSubmit) {\n              noteSubmit.textContent = \"Leaving note\u2026\";\n            }\n\n            \/*\n             * Use WordPress's normal comment form endpoint rather than the\n             * REST API. This allows the site's existing anonymous-comment\n             * settings and moderation rules to handle the note.\n             *\n             * The form is submitted into a hidden same-origin iframe so the\n             * visitor stays on the current page.\n             *\/\n\n            let commentFrame = document.getElementById(\"house-comment-frame\");\n\n            if (!commentFrame) {\n              commentFrame = document.createElement(\"iframe\");\n              commentFrame.id = \"house-comment-frame\";\n              commentFrame.name = \"house-comment-frame\";\n              commentFrame.title = \"\";\n              commentFrame.setAttribute(\"aria-hidden\", \"true\");\n              commentFrame.style.position = \"fixed\";\n              commentFrame.style.width = \"1px\";\n              commentFrame.style.height = \"1px\";\n              commentFrame.style.border = \"0\";\n              commentFrame.style.opacity = \"0\";\n              commentFrame.style.pointerEvents = \"none\";\n              document.body.appendChild(commentFrame);\n            }\n\n            let postIdField = noteForm.querySelector('input[name=\"comment_post_ID\"]');\n            if (!postIdField) {\n              postIdField = document.createElement(\"input\");\n              postIdField.type = \"hidden\";\n              postIdField.name = \"comment_post_ID\";\n              noteForm.appendChild(postIdField);\n            }\n            postIdField.value = String(postId);\n\n            let parentField = noteForm.querySelector('input[name=\"comment_parent\"]');\n            if (!parentField) {\n              parentField = document.createElement(\"input\");\n              parentField.type = \"hidden\";\n              parentField.name = \"comment_parent\";\n              noteForm.appendChild(parentField);\n            }\n            parentField.value = \"0\";\n\n            let urlField = noteForm.querySelector('input[name=\"url\"]');\n            if (!urlField) {\n              urlField = document.createElement(\"input\");\n              urlField.type = \"hidden\";\n              urlField.name = \"url\";\n              noteForm.appendChild(urlField);\n            }\n            urlField.value = \"\";\n\n            noteForm.action = \"\/the-house\/wp-comments-post.php\";\n            noteForm.method = \"post\";\n            noteForm.target = \"house-comment-frame\";\n\n            \/*\n             * Submit the form into the hidden iframe. We wait for the\n             * WordPress response and inspect its URL\/body before telling\n             * the visitor that the note was saved.\n             *\/\n            const handleCommentResponse = function () {\n              try {\n                const frameWindow = commentFrame.contentWindow;\n                const currentUrl = frameWindow.location.href || \"\";\n\n                if (\n                  !currentUrl ||\n                  currentUrl === \"about:blank\" ||\n                  currentUrl.indexOf(\"about:blank\") === 0\n                ) {\n                  return;\n                }\n\n                const frameText = frameWindow.document.body\n                  ? frameWindow.document.body.innerText || \"\"\n                  : \"\";\n\n                const lowerUrl = currentUrl.toLowerCase();\n                const lowerText = frameText.toLowerCase();\n\n                \/*\n                 * WordPress sends the visitor to an error page when the\n                 * comment cannot be accepted. Catch that before success.\n                 *\/\n                if (\n                  lowerUrl.indexOf(\"wp-comments-post.php\") !== -1 &&\n                  (\n                    lowerUrl.indexOf(\"error\") !== -1 ||\n                    lowerText.indexOf(\"error:\") !== -1 ||\n                    lowerText.indexOf(\"sorry\") !== -1\n                  )\n                ) {\n                  const lines = frameText\n                    .split(\/\\r?\\n\/)\n                    .map(function (line) { return line.trim(); })\n                    .filter(Boolean);\n\n                  throw new Error(\n                    lines.length\n                      ? lines[0]\n                      : \"WordPress could not save the note.\"\n                  );\n                }\n\n                if (noteStatus) {\n                  noteStatus.textContent =\n                    \"Your note has been submitted. It may need approval before it appears in Paper notes.\";\n                  noteStatus.className = \"house-note-status success\";\n                }\n\n                if (noteComment) {\n                  noteComment.value = \"\";\n                }\n\n                if (notesBox && notesBox.classList.contains(\"is-open\")) {\n                  loadPageNotes();\n                }\n\n                setTimeout(function () {\n                  closeNoteBox();\n                }, 2200);\n\n              } catch (responseError) {\n                console.error(\"House note response error:\", responseError);\n\n                if (noteStatus) {\n                  noteStatus.textContent =\n                    responseError.message || \"WordPress could not save the note.\";\n                  noteStatus.className = \"house-note-status error\";\n                }\n              } finally {\n                commentFrame.removeEventListener(\"load\", handleCommentResponse);\n              }\n            };\n\n            commentFrame.addEventListener(\"load\", handleCommentResponse);\n\n            \/*\n             * HTMLFormElement.submit() sends the exact fields assembled\n             * above without triggering this submit listener again.\n             *\/\n            HTMLFormElement.prototype.submit.call(noteForm);\n\n          } catch (error) {\n\n            console.error(\"House note error:\", error);\n\n            if (noteStatus) {\n              noteStatus.textContent =\n                error.message || \"The note could not be saved.\";\n              noteStatus.className = \"house-note-status error\";\n            }\n\n          } finally {\n\n            if (noteSubmit) {\n              noteSubmit.disabled = false;\n              noteSubmit.textContent = \"Leave note\";\n            }\n\n          }\n\n        }\n      );\n\n    }\n\n\n    \/* =======================================================\n       SHOW PAPER NOTES\n       ======================================================= *\/\n\n    const notesBox =\n      document.getElementById(\n        \"house-notes-box\"\n      );\n\n    const notesClose =\n      document.getElementById(\n        \"house-notes-close\"\n      );\n\n    const notesList =\n      document.getElementById(\n        \"house-notes-list\"\n      );\n\n\n    function openNotesBox() {\n\n      if (!notesBox) {\n        return;\n      }\n\n\n      notesBox.classList.add(\n        \"is-open\"\n      );\n\n\n      notesBox.setAttribute(\n        \"aria-hidden\",\n        \"false\"\n      );\n\n\n      loadPageNotes();\n\n    }\n\n\n    function closeNotesBox() {\n\n      if (!notesBox) {\n        return;\n      }\n\n\n      notesBox.classList.remove(\n        \"is-open\"\n      );\n\n\n      notesBox.setAttribute(\n        \"aria-hidden\",\n        \"true\"\n      );\n\n    }\n\n\n    if (notesClose) {\n\n      notesClose.addEventListener(\n        \"click\",\n        function (event) {\n\n          event.stopPropagation();\n\n          closeNotesBox();\n\n        }\n      );\n\n    }\n\n\n    \/* =======================================================\n       LOAD WORDPRESS COMMENTS FOR CURRENT PAGE\n       ======================================================= *\/\n\n    async function loadPageNotes() {\n\n      if (!notesList) {\n        return;\n      }\n\n\n      notesList.innerHTML =\n        '<div class=\"house-no-notes\">' +\n        'Finding the notes\u2026' +\n        '<\/div>';\n\n\n      try {\n\n        \/*\n         * Find the same WordPress page ID\n         * used when saving the note.\n         *\/\n\n        const postId =\n          await findCurrentPostId();\n\n\n        if (!postId) {\n\n          throw new Error(\n            \"I couldn't identify this page.\"\n          );\n\n        }\n\n\n        \/*\n         * Ask WordPress for comments belonging\n         * specifically to this page.\n         *\n         * status=approve means we only show\n         * comments that WordPress has made public.\n         *\/\n\n        let comments = [];\n\n        \/*\n         * First try the WordPress REST API.\n         * This is the cleanest way to get only comments\n         * attached to the current page.\n         *\/\n        try {\n\n          const response =\n            await fetch(\n              \"\/the-house\/wp-json\/wp\/v2\/comments\" +\n              \"?post=\" +\n              encodeURIComponent(\n                postId\n              ) +\n              \"&status=approve\" +\n              \"&per_page=100\" +\n              \"&orderby=date\" +\n              \"&order=desc\",\n              {\n                method: \"GET\",\n                credentials: \"same-origin\"\n              }\n            );\n\n\n          if (response.ok) {\n\n            const data =\n              await response.json();\n\n            if (Array.isArray(data)) {\n              comments = data;\n            }\n\n          }\n\n        } catch (error) {\n\n          console.warn(\n            \"The WordPress comments API could not be read.\",\n            error\n          );\n\n        }\n\n\n        \/*\n         * Fallback: WordPress also prints approved comments\n         * directly into the page. If the REST API is blocked\n         * by the site's configuration, read those visible\n         * comments instead. This still keeps the notes limited\n         * to the current page.\n         *\/\n        if (comments.length === 0) {\n\n          const nativeComments =\n            Array.from(\n              document.querySelectorAll(\n                \"#comments li.comment, .comment-list li.comment, li.comment\"\n              )\n            );\n\n\n          comments = nativeComments.map(function (item) {\n\n            const authorElement =\n              item.querySelector(\n                \".comment-author, .fn, .commentmetadata .fn\"\n              );\n\n            const dateElement =\n              item.querySelector(\n                \"time, .comment-metadata, .comment-meta\"\n              );\n\n            const contentElement =\n              item.querySelector(\n                \".comment-content\"\n              );\n\n            return {\n              author_name: authorElement\n                ? authorElement.textContent.trim()\n                : \"Anonymous\",\n              date: dateElement\n                ? (dateElement.getAttribute(\"datetime\") || dateElement.textContent.trim())\n                : \"\",\n              content: {\n                rendered: contentElement\n                  ? contentElement.innerHTML\n                  : item.textContent\n              }\n            };\n\n          });\n\n        }\n\n\n        \/*\n         * No approved comments.\n         *\/\n\n        if (\n          !Array.isArray(\n            comments\n          ) ||\n          comments.length === 0\n        ) {\n\n          notesList.innerHTML =\n            '<div class=\"house-no-notes\">' +\n            'No paper notes have been left on this page yet.' +\n            '<\/div>';\n\n          return;\n\n        }\n\n\n        \/*\n         * Empty the loading message.\n         *\/\n\n        notesList.innerHTML =\n          \"\";\n\n\n        \/*\n         * Build each paper note safely\n         * using textContent rather than injecting\n         * comment HTML directly.\n         *\/\n\n        comments.forEach(\n          function (comment) {\n\n            const note =\n              document.createElement(\n                \"div\"\n              );\n\n            note.className =\n              \"house-single-note\";\n\n\n            const author =\n              document.createElement(\n                \"div\"\n              );\n\n            author.className =\n              \"house-single-note-author\";\n\n\n            author.textContent =\n              comment.author_name ||\n              \"Anonymous\";\n\n\n            const date =\n              document.createElement(\n                \"div\"\n              );\n\n            date.className =\n              \"house-single-note-date\";\n\n\n            if (comment.date) {\n\n              const parsedDate =\n                new Date(\n                  comment.date\n                );\n\n\n              if (\n                !isNaN(\n                  parsedDate.getTime()\n                )\n              ) {\n\n                date.textContent =\n                  parsedDate.toLocaleDateString(\n                    undefined,\n                    {\n                      year:\n                        \"numeric\",\n\n                      month:\n                        \"long\",\n\n                      day:\n                        \"numeric\"\n                    }\n                  );\n\n              }\n\n            }\n\n\n            const text =\n              document.createElement(\n                \"div\"\n              );\n\n            text.className =\n              \"house-single-note-text\";\n\n\n            \/*\n             * WordPress gives us rendered HTML\n             * for comment.content.\n             *\n             * We convert it to plain text so that\n             * visitors' comments cannot inject\n             * arbitrary HTML into the menu.\n             *\/\n\n            if (\n              comment.content &&\n              comment.content.rendered\n            ) {\n\n              text.textContent =\n                stripHtml(\n                  comment.content.rendered\n                );\n\n            } else {\n\n              text.textContent =\n                \"\";\n\n            }\n\n\n            note.appendChild(\n              author\n            );\n\n\n            if (\n              date.textContent\n            ) {\n\n              note.appendChild(\n                date\n              );\n\n            }\n\n\n            note.appendChild(\n              text\n            );\n\n\n            notesList.appendChild(\n              note\n            );\n\n          }\n        );\n\n\n      } catch (error) {\n\n        console.error(\n          \"House notes error:\",\n          error\n        );\n\n\n        notesList.innerHTML =\n          '<div class=\"house-no-notes\">' +\n          'The paper notes could not be loaded right now.' +\n          '<\/div>';\n\n      }\n\n    }\n\n\n    \/* =======================================================\n       REMOVE HTML FROM WORDPRESS COMMENT CONTENT\n       ======================================================= *\/\n\n    function stripHtml(html) {\n\n      const temporary =\n        document.createElement(\n          \"div\"\n        );\n\n\n      temporary.innerHTML =\n        html;\n\n\n      return (\n        temporary.textContent ||\n        temporary.innerText ||\n        \"\"\n      );\n\n    }\n\n\n    \/* =======================================================\n       ARTWORK\n       ======================================================= *\/\n\n    const artOverlay =\n      document.getElementById(\n        \"house-art-overlay\"\n      );\n\n    const artImage =\n      document.getElementById(\n        \"house-art-image\"\n      );\n\n    const artClose =\n      document.getElementById(\n        \"house-art-close\"\n      );\n\n\n    function openArtwork() {\n\n      const files =\n        getFiles();\n\n\n      if (\n        !files.art ||\n        !artOverlay ||\n        !artImage\n      ) {\n\n        return;\n\n      }\n\n\n      artImage.src =\n        files.art;\n\n\n      artOverlay.style.display =\n        \"flex\";\n\n\n      if (\n        artOverlay.requestFullscreen\n      ) {\n\n        artOverlay\n          .requestFullscreen()\n          .catch(function () {});\n\n      } else if (\n        artOverlay.webkitRequestFullscreen\n      ) {\n\n        artOverlay.webkitRequestFullscreen();\n\n      }\n\n    }\n\n\n    function closeArtwork() {\n\n      if (!artOverlay) {\n        return;\n      }\n\n\n      artOverlay.style.display =\n        \"none\";\n\n\n      if (artImage) {\n\n        artImage.src =\n          \"\";\n\n      }\n\n\n      if (\n        document.fullscreenElement\n      ) {\n\n        document\n          .exitFullscreen()\n          .catch(function () {});\n\n      } else if (\n        document.webkitFullscreenElement\n      ) {\n\n        document.webkitExitFullscreen();\n\n      }\n\n    }\n\n\n    if (artClose) {\n\n      artClose.addEventListener(\n        \"click\",\n        function (event) {\n\n          event.stopPropagation();\n\n          closeArtwork();\n\n        }\n      );\n\n    }\n\n\n    if (artOverlay) {\n\n      artOverlay.addEventListener(\n        \"click\",\n        function (event) {\n\n          if (\n            event.target ===\n            artOverlay\n          ) {\n\n            closeArtwork();\n\n          }\n\n        }\n      );\n\n    }\n\n\n    \/* =======================================================\n       ESCAPE KEY\n       ======================================================= *\/\n\n    document.addEventListener(\n      \"keydown\",\n      function (event) {\n\n        if (\n          event.key !==\n          \"Escape\"\n        ) {\n\n          return;\n\n        }\n\n\n        closeHelp();\n\n        closeNoteBox();\n\n        closeNotesBox();\n\n\n        if (\n          artOverlay &&\n          artOverlay.style.display ===\n          \"flex\"\n        ) {\n\n          closeArtwork();\n\n        }\n\n      }\n    );\n\n\n    \/* =======================================================\n       MENU BUTTONS\n       ======================================================= *\/\n\n    menu.addEventListener(\n      \"click\",\n      function (event) {\n\n        const button =\n          event.target.closest(\n            \".house-menu-button\"\n          );\n\n\n        if (\n          !button ||\n          !menu.contains(\n            button\n          )\n        ) {\n\n          return;\n\n        }\n\n\n        \/* ---------------------------------------------------\n           STORY\n           --------------------------------------------------- *\/\n\n        if (\n          button.classList.contains(\n            \"house-story\"\n          )\n        ) {\n\n          toggleAudio(\n            \"story\"\n          );\n\n          return;\n\n        }\n\n\n        \/* ---------------------------------------------------\n           ART\n           --------------------------------------------------- *\/\n\n        if (\n          button.classList.contains(\n            \"house-eye\"\n          )\n        ) {\n\n          openArtwork();\n\n          return;\n\n        }\n\n\n        \/* ---------------------------------------------------\n           HOUSE AUDIO\n           --------------------------------------------------- *\/\n\n        if (\n          button.classList.contains(\n            \"house-ear\"\n          )\n        ) {\n\n          toggleAudio(\n            \"house\"\n          );\n\n          return;\n\n        }\n\n\n        \/* ---------------------------------------------------\n           HELP\n           --------------------------------------------------- *\/\n\n        if (\n          button.classList.contains(\n            \"house-help\"\n          )\n        ) {\n\n          openHelp();\n\n          return;\n\n        }\n\n\n        \/* ---------------------------------------------------\n           LEAVE A NOTE\n           --------------------------------------------------- *\/\n\n        if (\n          button.classList.contains(\n            \"house-note\"\n          )\n        ) {\n\n          openNoteBox();\n\n          return;\n\n        }\n\n\n        \/* ---------------------------------------------------\n           SEARCH PAPER NOTES\n           --------------------------------------------------- *\/\n\n        if (\n          button.classList.contains(\n            \"house-notes\"\n          )\n        ) {\n\n          openNotesBox();\n\n          return;\n\n        }\n\n      }\n    );\n\n  }\n\n\n  \/* =========================================================\n     INITIALISE\n     ========================================================= *\/\n\n  if (\n    document.readyState ===\n    \"loading\"\n  ) {\n\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initHouseMenu\n    );\n\n  } else {\n\n    initHouseMenu();\n\n  }\n\n})();\n<\/script>\n\n\n<script>\nwindow.houseMenuFiles = {\n\n  story: \"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/The-Garden.mp3\",\n\n  art: \"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/09\/Side-Garden-scaled.jpg\",\n\n  house: \"\",\n\n  help: \"Right now there is nothing for you to do here but move somewhere else.\"\n\n};\n<\/script>\n\n\n\n<!-- THE HOUSE: Hemmelig edderkop til The Basement -->\n\n<a\n  id=\"basement-spider\"\n  href=\"https:\/\/itdd.au.dk\/the-house\/the-basement\/\"\n  aria-label=\"Enter The Basement\"\n  title=\"Where does this spider lead?\"\n>\n  <canvas id=\"basement-spider-image\"><\/canvas>\n<\/a>\n\n<style>\n  #basement-spider {\n    position: fixed;\n    bottom: 10%;\n    right: 8%;\n    width: 85px;\n    z-index: 50;\n    cursor: pointer;\n    display: block;\n    transition: transform 0.3s ease;\n  }\n\n  #basement-spider canvas {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n\n  #basement-spider:hover {\n    transform: scale(1.2) rotate(7deg);\n  }\n\n  @media (max-width: 600px) {\n    #basement-spider {\n      width: 60px;\n      right: 5%;\n      bottom: 9%;\n    }\n  }\n<\/style>\n\n<script>\n(function () {\n  const canvas = document.getElementById(\n    \"basement-spider-image\"\n  );\n  if (!canvas) return;\n\n  const ctx = canvas.getContext(\"2d\", {\n    willReadFrequently: true\n  });\n\n  const img = new Image();\n\n  img.onload = function () {\n    canvas.width = img.naturalWidth;\n    canvas.height = img.naturalHeight;\n    ctx.drawImage(img, 0, 0);\n\n    const picture = ctx.getImageData(\n      0, 0, canvas.width, canvas.height\n    );\n\n    const pixels = picture.data;\n\n    for (let i = 0; i < pixels.length; i += 4) {\n      const r = pixels[i];\n      const g = pixels[i + 1];\n      const b = pixels[i + 2];\n\n      \/\/ Fjern hvide og n\u00e6sten hvide pixels\n      const lightest = Math.min(r, g, b);\n\n      if (lightest >= 245) {\n        pixels[i + 3] = 0;\n      } else if (lightest > 215) {\n        pixels[i + 3] = Math.round(\n          255 * (245 - lightest) \/ 30\n        );\n      }\n    }\n\n    ctx.putImageData(picture, 0, 0);\n  };\n\n  img.src =\n    \"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/images.jpg\";\n})();\n<\/script>\n\n\n\n<!-- THE HOUSE: Hemmelig edderkop til The Basement -->\n\n<a\n  id=\"basement-spider\"\n  href=\"https:\/\/itdd.au.dk\/the-house\/the-basement\/\"\n  aria-label=\"Enter The Basement\"\n  title=\"Where does this spider lead?\"\n>\n  <canvas id=\"basement-spider-image\"><\/canvas>\n<\/a>\n\n<style>\n  #basement-spider {\n    position: fixed;\n    bottom: 10%;\n    right: 8%;\n    width: 85px;\n    z-index: 50;\n    cursor: pointer;\n    display: block;\n    transition: transform 0.3s ease;\n  }\n\n  #basement-spider canvas {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n\n  #basement-spider:hover {\n    transform: scale(1.2) rotate(7deg);\n  }\n\n  @media (max-width: 600px) {\n    #basement-spider {\n      width: 60px;\n      right: 5%;\n      bottom: 9%;\n    }\n  }\n<\/style>\n\n<script>\n(function () {\n  const canvas = document.getElementById(\n    \"basement-spider-image\"\n  );\n  if (!canvas) return;\n\n  const ctx = canvas.getContext(\"2d\", {\n    willReadFrequently: true\n  });\n\n  const img = new Image();\n\n  img.onload = function () {\n    canvas.width = img.naturalWidth;\n    canvas.height = img.naturalHeight;\n    ctx.drawImage(img, 0, 0);\n\n    const picture = ctx.getImageData(\n      0, 0, canvas.width, canvas.height\n    );\n\n    const pixels = picture.data;\n\n    for (let i = 0; i < pixels.length; i += 4) {\n      const r = pixels[i];\n      const g = pixels[i + 1];\n      const b = pixels[i + 2];\n\n      \/\/ Fjern hvide og n\u00e6sten hvide pixels\n      const lightest = Math.min(r, g, b);\n\n      if (lightest >= 245) {\n        pixels[i + 3] = 0;\n      } else if (lightest > 215) {\n        pixels[i + 3] = Math.round(\n          255 * (245 - lightest) \/ 30\n        );\n      }\n    }\n\n    ctx.putImageData(picture, 0, 0);\n  };\n\n  img.src =\n    \"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/images.jpg\";\n})();\n<\/script>\n\n\n\n<!-- THE HOUSE \u2013 Spider entrance -->\n\n<a class=\"secret-spider\"\n   href=\"https:\/\/itdd.au.dk\/the-house\/the-basement\/\"\n   title=\"Enter The Basement\"\n   aria-label=\"Enter The Basement\">\n\n  <img decoding=\"async\"\n    src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/images.jpg\"\n    alt=\"Secret spider entrance\">\n<\/a>\n\n<style>\n.secret-spider {\n  position: fixed !important;\n  right: 12% !important;\n  bottom: 15% !important;\n  width: 90px !important;\n  z-index: 99999 !important;\n  display: block !important;\n  cursor: pointer;\n}\n\n.secret-spider img {\n  width: 100%;\n  height: auto;\n  display: block;\n  mix-blend-mode: multiply;\n  transition: transform 0.3s ease;\n}\n\n.secret-spider {\n  mix-blend-mode: multiply;\n}\n\n.secret-spider:hover img {\n  transform: scale(1.25);\n}\n\n@media (max-width: 600px) {\n  .secret-spider {\n    width: 65px !important;\n    right: 8% !important;\n    bottom: 12% !important;\n  }\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":14,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":1353,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/2\/revisions\/1353"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}