{"id":1272,"date":"2026-10-20T14:05:52","date_gmt":"2026-10-20T14:05:52","guid":{"rendered":"https:\/\/itdd.au.dk\/the-house\/?page_id=1272"},"modified":"2026-10-22T10:06:20","modified_gmt":"2026-10-22T10:06:20","slug":"the-basement","status":"publish","type":"page","link":"https:\/\/itdd.au.dk\/the-house\/the-basement\/","title":{"rendered":"The Basement"},"content":{"rendered":"\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\/foyer\/\">Go back<\/a><\/div>\n<\/div>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Special+Elite&display=swap');\n\n\/* =====================================\n   THE BASEMENT - COMPLETE VERSION\n   ===================================== *\/\n\n#tb-basement-final,\n#tb-basement-final * {\n  box-sizing: border-box;\n}\n\n#tb-basement-final {\n  position: fixed !important;\n  inset: 0 !important;\n\n  width: 100vw !important;\n  height: 100vh !important;\n  height: 100dvh !important;\n  max-width: none !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  isolation: isolate;\n  overflow: hidden !important;\n  z-index: 9999;\n  pointer-events: none;\n\n  font-family: 'Special Elite', monospace;\n\n  background-image:\n    radial-gradient(\n      ellipse at center,\n      rgba(0,0,0,.04),\n      rgba(0,0,0,.18) 55%,\n      rgba(0,0,0,.7)\n    ),\n    url('https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/689ce6e0c7792_copypaste.png');\n\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n\/* WORDPRESS ADMIN BAR *\/\nbody.admin-bar #tb-basement-final {\n  top: 32px !important;\n  height: calc(100dvh - 32px) !important;\n}\n\n@media (max-width:782px) {\n  body.admin-bar #tb-basement-final {\n    top: 46px !important;\n    height: calc(100dvh - 46px) !important;\n  }\n}\n\n\/* =====================================\n   ATMOSPHERE\n   ===================================== *\/\n\n\/* RED FLICKERING LIGHT *\/\n#tb-basement-final::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n\n  background: radial-gradient(\n    ellipse at 50% 85%,\n    rgba(180,0,0,.22),\n    transparent 60%\n  );\n\n  animation: basementFlicker 8s infinite;\n}\n\n@keyframes basementFlicker {\n  0%,100% { opacity:.3; }\n  30% { opacity:.7; }\n  33% { opacity:.3; }\n  65% { opacity:.8; }\n  68% { opacity:.4; }\n}\n\n\/* FLOATING DUST *\/\n#tb-basement-final .tb-dust {\n  position: absolute;\n  inset: -10%;\n  z-index: 2;\n  pointer-events: none;\n  opacity: .18;\n\n  background-image:\n    radial-gradient(circle,#eed7c0 1px,transparent 2px),\n    radial-gradient(circle,#eed7c0 1px,transparent 2px);\n\n  background-size:\n    130px 110px,\n    190px 170px;\n\n  animation: basementDust 28s linear infinite;\n}\n\n@keyframes basementDust {\n  to { transform:translateY(-65px); }\n}\n\n\/* FLOOR FOG *\/\n#tb-basement-final .tb-fog {\n  position: absolute;\n  left: -30%;\n  bottom: -10%;\n  width: 160%;\n  height: 38%;\n  z-index: 12;\n\n  pointer-events: none;\n  opacity: .34;\n\n  background: radial-gradient(\n    ellipse,\n    rgba(170,160,160,.3),\n    transparent 70%\n  );\n\n  filter: blur(25px);\n\n  animation: basementFog 18s ease-in-out infinite alternate;\n}\n\n#tb-basement-final .tb-fog-back {\n  bottom: 7%;\n  z-index: 3;\n  opacity: .2;\n}\n\n@keyframes basementFog {\n  from { transform:translateX(-8%); }\n  to { transform:translateX(8%); }\n}\n\n\/* =====================================\n   BACK BUTTON\n   ===================================== *\/\n\n#tb-basement-final .tb-back {\n  position: absolute;\n  top: 20px;\n  left: 24px;\n  z-index: 50;\n\n  pointer-events: auto;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  min-height: 34px;\n  padding: 8px 13px;\n\n  border: 1px solid #ff4444;\n  border-radius: 5px;\n\n  background: rgba(20,0,0,.85);\n  color: white !important;\n\n  font: 13px 'Special Elite',monospace;\n  text-decoration: none !important;\n\n  box-shadow: 0 0 10px rgba(255,0,0,.3);\n\n  transition: .3s;\n}\n\n#tb-basement-final .tb-back:hover {\n  background: #a90000;\n  color: white !important;\n  transform: translateX(-4px);\n  box-shadow: 0 0 20px red;\n}\n\n\/* =====================================\n   TITLE AND STORY\n   ===================================== *\/\n\n#tb-basement-final .tb-title {\n  position: absolute;\n  top: 7%;\n  left: 50%;\n  z-index: 30;\n\n  transform: translateX(-50%);\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  color: #ff3030;\n\n  font: normal clamp(28px,4vw,58px)\n    'Special Elite',monospace;\n\n  line-height: 1.2;\n  letter-spacing: 5px;\n  text-align: center;\n  white-space: nowrap;\n\n  text-shadow:\n    0 0 20px red,\n    0 4px 15px black;\n\n  animation: basementTitle 7s infinite;\n}\n\n@keyframes basementTitle {\n  0%,48%,52%,100% { opacity:1; }\n  50% { opacity:.5; }\n}\n\n#tb-basement-final .tb-story {\n  position: absolute;\n  top: 18%;\n  left: 50%;\n  z-index: 30;\n\n  transform: translateX(-50%);\n\n  width: 85%;\n  max-width: 750px;\n\n  margin: 0 !important;\n\n  color: #e8c9b8;\n  font-size: clamp(12px,1.3vw,17px);\n  line-height: 1.6;\n  text-align: center;\n\n  text-shadow: 0 2px 12px black;\n}\n\n\/* =====================================\n   INTERACTIVE MONSTERS\n   ===================================== *\/\n\n#tb-basement-final .tb-creature {\n  position: absolute;\n  z-index: 9;\n\n  display: block;\n  width: clamp(200px,25vw,390px);\n\n  pointer-events: auto;\n  cursor: pointer;\n\n  text-decoration: none !important;\n  color: white !important;\n\n  transform-style: preserve-3d;\n}\n\n\/* DIRECT IMAGES ONLY *\/\n#tb-basement-final .tb-creature > img {\n  display: block !important;\n  width: 100% !important;\n  max-width: none !important;\n  height: auto !important;\n\n  border: 0 !important;\n  border-radius: 0 !important;\n\n  filter:\n    drop-shadow(0 25px 25px #000)\n    drop-shadow(0 0 12px rgba(200,0,0,.2));\n\n  animation: basementBreathe 5s ease-in-out infinite;\n\n  transition:\n    transform .35s,\n    filter .35s;\n}\n\n@keyframes basementBreathe {\n  0%,100% {\n    transform:translateY(0) scale(1);\n  }\n  50% {\n    transform:translateY(-7px) scale(1.025);\n  }\n}\n\n#tb-basement-final .tb-creature:hover > img,\n#tb-basement-final .tb-creature:focus-visible > img {\n  animation: none;\n\n  transform:\n    translateY(-14px)\n    scale(1.1);\n\n  filter:\n    drop-shadow(0 30px 25px #000)\n    drop-shadow(0 0 30px rgba(255,0,0,.85));\n}\n\n\/* MARTIN - LEFT *\/\n#tb-basement-final .tb-martin {\n  top: 29%;\n  left: 3%;\n  transform: rotateY(26deg) rotateZ(-3deg);\n}\n\n#tb-basement-final .tb-martin > img {\n  animation-delay: -1s;\n}\n\n\/* JEANETTE - FLOOR *\/\n#tb-basement-final .tb-jeanette {\n  bottom: 1%;\n  left: 50%;\n  width: clamp(190px,24vw,360px);\n\n  transform:\n    translateX(-50%)\n    rotateX(12deg);\n}\n\n#tb-basement-final .tb-jeanette > img {\n  animation-delay: -2.5s;\n}\n\n\/* JONATHAN - RIGHT *\/\n#tb-basement-final .tb-jonathan {\n  top: 29%;\n  right: 3%;\n  transform: rotateY(-26deg) rotateZ(3deg);\n}\n\n#tb-basement-final .tb-jonathan > img {\n  animation-delay: -3.5s;\n}\n\n\/* =====================================\n   SMALL MONSTER BUTTONS\n   ===================================== *\/\n\n#tb-basement-final .tb-hotspot {\n  position: absolute;\n  top: 84%;\n  left: 50%;\n  z-index: 10;\n\n  transform: translate(-50%,-50%);\n\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n\n  width: max-content;\n  max-width: 170px;\n  min-height: 30px;\n  padding: 6px 10px;\n\n  background: rgba(95,0,0,.9);\n  border: 1px solid #ff7777;\n  border-radius: 30px;\n\n  color: white !important;\n  font: 11px 'Special Elite',monospace;\n  line-height: 1.2;\n  white-space: nowrap;\n\n  box-shadow: 0 0 10px rgba(255,0,0,.55);\n\n  animation: basementButtonPulse 2.5s infinite;\n}\n\n\/* SMALL CSS SYMBOLS *\/\n#tb-basement-final .tb-hotspot::before {\n  display: inline-block;\n  flex: 0 0 auto;\n\n  font: bold 13px Arial,sans-serif;\n  color: #ffcccc;\n}\n\n#tb-basement-final .tb-martin .tb-hotspot::before {\n  content: \"\u25c9\";\n}\n\n#tb-basement-final .tb-jeanette .tb-hotspot::before {\n  content: \"\u2723\";\n}\n\n#tb-basement-final .tb-jonathan .tb-hotspot::before {\n  content: \"\u25cf\";\n  color: #ff3333;\n}\n\n@keyframes basementButtonPulse {\n  0%,100% {\n    box-shadow: 0 0 8px rgba(255,0,0,.5);\n  }\n  50% {\n    box-shadow: 0 0 19px rgba(255,0,0,.85);\n  }\n}\n\n#tb-basement-final .tb-creature:hover .tb-hotspot {\n  background: #c50000;\n  animation: none;\n}\n\n\/* =====================================\n   HANGING SPIDER\n   TRANSPARENT BACKGROUND\n   ===================================== *\/\n\n#tb-basement-final .tb-spider {\n  position: absolute;\n  top: 0;\n  left: 73%;\n  z-index: 7;\n\n  width: clamp(110px,12vw,165px);\n  height: 350px;\n\n  transform: translateX(-50%);\n\n  pointer-events: none;\n  user-select: none;\n}\n\n\/* DESCENDING AND SWAYING *\/\n#tb-basement-final .tb-spider-hanger {\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  transform-origin: center top;\n\n  animation:\n    spiderDescend 5s ease-out both,\n    spiderSway 4s ease-in-out 5s infinite alternate;\n}\n\n\/* SPIDER WEB THREAD *\/\n#tb-basement-final .tb-spider-thread {\n  position: absolute;\n  top: 0;\n  left: 50%;\n\n  width: 2px;\n  height: 138px;\n\n  background: linear-gradient(\n    to right,\n    #555,\n    #ededed,\n    #555\n  );\n\n  opacity: .8;\n\n  box-shadow: 0 0 3px rgba(255,255,255,.2);\n}\n\n\/* TRANSPARENT SPIDER CONTAINER *\/\n#tb-basement-final .tb-spider-body {\n  position: absolute;\n  top: 133px;\n  left: 0;\n\n  width: 100%;\n  height: auto;\n\n  pointer-events: none;\n\n  filter:\n    drop-shadow(0 8px 7px rgba(0,0,0,.9));\n}\n\n\/*\nSVG FILTER REMOVES WHITE FROM THE JPG.\nTHE RESULT IS RENDERED WITH TRANSPARENCY.\n*\/\n\n#tb-basement-final .tb-spider-cutout {\n  display: block !important;\n\n  width: 100% !important;\n  height: auto !important;\n  max-width: none !important;\n\n  overflow: visible;\n  pointer-events: none;\n}\n\n\/* SPIDER ANIMATIONS *\/\n@keyframes spiderDescend {\n  from {\n    transform: translateY(-450px);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes spiderSway {\n  from { transform: rotate(-4deg); }\n  to { transform: rotate(4deg); }\n}\n\n\/* =====================================\n   OLD TELEVISION\n   WITH INTEGRATED VIDEO\n   ===================================== *\/\n\n#tb-basement-final .tb-tv {\n  position: absolute;\n\n  \/*\n  POSITION OF THE TV IN THE ROOM\n  *\/\n  top: 46%;\n  left: 52%;\n\n  z-index: 6;\n\n  width: clamp(205px,19vw,325px);\n  max-width: 42vw;\n\n  transform:\n    translate(-50%,-50%)\n    rotate(-2deg);\n\n  pointer-events: auto;\n\n  filter:\n    drop-shadow(0 18px 19px rgba(0,0,0,.95));\n}\n\n\/* OLD CRT TV CASE *\/\n#tb-basement-final .tb-tv-case {\n  display: flex;\n  align-items: stretch;\n  gap: 8px;\n\n  width: 100%;\n  padding: 12px;\n\n  border: 3px solid #17120f;\n  border-radius: 19px;\n\n  background: linear-gradient(\n    135deg,\n    #65503a 0%,\n    #34281e 45%,\n    #191613 100%\n  );\n\n  box-shadow:\n    inset 0 0 9px rgba(255,255,255,.15),\n    inset 0 0 17px rgba(0,0,0,.9),\n    0 8px 24px rgba(0,0,0,.8);\n}\n\n\/* SCREEN FRAME *\/\n#tb-basement-final .tb-tv-screen {\n  position: relative;\n  flex: 1 1 auto;\n  min-width: 0;\n\n  aspect-ratio: 16 \/ 9;\n\n  overflow: hidden;\n\n  border: 5px solid #100f0d;\n  border-radius: 12px;\n\n  background: #050807;\n\n  box-shadow:\n    inset 0 0 12px #000,\n    0 0 5px rgba(0,0,0,.8);\n}\n\n\/* VIDEO FITS SCREEN EXACTLY *\/\n#tb-basement-final .tb-tv-video {\n  position: absolute !important;\n  inset: 0 !important;\n\n  display: block !important;\n\n  width: 100% !important;\n  height: 100% !important;\n  max-width: none !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  border: none !important;\n  border-radius: 0 !important;\n\n  object-fit: cover;\n\n  background: #050505;\n\n  pointer-events: auto !important;\n  cursor: pointer;\n}\n\n\/* SOFT CRT SCANLINES *\/\n#tb-basement-final .tb-tv-screen::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n\n  pointer-events: none;\n\n  background:\n    repeating-linear-gradient(\n      to bottom,\n      transparent 0px,\n      transparent 3px,\n      rgba(0,0,0,.10) 4px\n    ),\n    radial-gradient(\n      ellipse at center,\n      transparent 48%,\n      rgba(0,0,0,.35) 100%\n    );\n}\n\n\/* TV SIDE CONTROLS *\/\n#tb-basement-final .tb-tv-controls {\n  flex: 0 0 27px;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 13px;\n\n  pointer-events: none;\n}\n\n\/* CONTROL DIALS *\/\n#tb-basement-final .tb-tv-knob {\n  display: block;\n\n  width: 20px;\n  height: 20px;\n\n  border: 3px solid #171512;\n  border-radius: 50%;\n\n  background: radial-gradient(\n    circle at 35% 35%,\n    #999187,\n    #3a3835 65%,\n    #151515\n  );\n\n  box-shadow:\n    0 2px 4px #000,\n    inset 0 0 4px #111;\n}\n\n\/* SPEAKER GRILLE *\/\n#tb-basement-final .tb-tv-speaker {\n  display: block;\n\n  width: 19px;\n  height: 32px;\n\n  background: repeating-linear-gradient(\n    to bottom,\n    #111 0px,\n    #111 2px,\n    #756750 3px,\n    #756750 4px\n  );\n\n  border-radius: 2px;\n  opacity: .8;\n}\n\n\/* TV FEET *\/\n#tb-basement-final .tb-tv-feet {\n  display: flex;\n  justify-content: space-between;\n\n  width: 80%;\n  height: 12px;\n  margin: 0 auto;\n}\n\n#tb-basement-final .tb-tv-feet::before,\n#tb-basement-final .tb-tv-feet::after {\n  content: \"\";\n\n  width: 20px;\n  height: 11px;\n\n  background: #211a14;\n  border-radius: 0 0 3px 3px;\n}\n\n\/* SUBTLE TV GLOW *\/\n#tb-basement-final .tb-tv::before {\n  content: \"\";\n  position: absolute;\n  inset: -20px;\n  z-index: -1;\n\n  pointer-events: none;\n\n  background: radial-gradient(\n    ellipse,\n    rgba(110,180,180,.18),\n    transparent 68%\n  );\n\n  filter: blur(22px);\n}\n\n\/* =====================================\n   SECRET LESSON PLAN PAPER\n   ===================================== *\/\n\n#tb-basement-final .tb-paper-link {\n  position: absolute;\n  left: 23%;\n  bottom: 5%;\n  z-index: 25;\n\n  display: block;\n  width: clamp(105px,12vw,165px);\n\n  pointer-events: auto;\n  cursor: pointer;\n\n  text-decoration: none !important;\n}\n\n\/* PAPER SHAPE *\/\n#tb-basement-final .tb-paper {\n  position: relative;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 13px;\n\n  width: 100%;\n  aspect-ratio: 3 \/ 4;\n\n  padding: 27px 12px 15px;\n\n  background:\n    repeating-linear-gradient(\n      transparent 0px,\n      transparent 21px,\n      rgba(92,58,32,.16) 22px,\n      transparent 23px\n    ),\n    linear-gradient(\n      135deg,\n      #f1dfb2,\n      #d9bf8e 55%,\n      #b99a6a\n    );\n\n  clip-path: polygon(\n    0 0,\n    86% 0,\n    100% 13%,\n    100% 100%,\n    0 100%\n  );\n\n  transform:\n    rotate(-13deg)\n    rotateX(25deg);\n\n  transform-origin: center bottom;\n\n  transition:\n    transform .4s,\n    filter .4s;\n}\n\n\/* PAPER STAINS *\/\n#tb-basement-final .tb-paper::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n\n  background:\n    radial-gradient(\n      circle at 20% 85%,\n      rgba(99,56,19,.22),\n      transparent 25%\n    ),\n    radial-gradient(\n      circle at 85% 22%,\n      rgba(98,50,17,.18),\n      transparent 23%\n    );\n}\n\n\/* PAPER TEXT *\/\n#tb-basement-final .tb-paper-heading {\n  position: relative;\n  z-index: 1;\n\n  font-size: clamp(12px,1.3vw,18px);\n  color: #482a1c;\n  line-height: 1.2;\n\n  text-align: center;\n  text-transform: uppercase;\n\n  border-bottom: 1px solid #754935;\n  padding-bottom: 7px;\n}\n\n#tb-basement-final .tb-paper-writing {\n  position: relative;\n  z-index: 1;\n\n  color: #714b37;\n  font-size: 12px;\n  line-height: 2;\n  letter-spacing: 2px;\n\n  transform: rotate(-4deg);\n}\n\n#tb-basement-final .tb-paper-symbol {\n  position: relative;\n  z-index: 1;\n\n  color: #8c2222;\n  font-size: 26px;\n\n  transform: rotate(15deg);\n}\n\n\/* PAPER GLOW *\/\n#tb-basement-final .tb-paper-link:hover .tb-paper,\n#tb-basement-final .tb-paper-link:focus-visible .tb-paper {\n  transform:\n    rotate(-7deg)\n    rotateX(12deg)\n    scale(1.08);\n\n  filter:\n    drop-shadow(0 0 14px rgba(255,40,20,.8))\n    brightness(1.08);\n}\n\n\/* PAPER HOVER TEXT *\/\n#tb-basement-final .tb-paper-tooltip {\n  position: absolute;\n  bottom: calc(100% + 20px);\n  left: 50%;\n  z-index: 30;\n\n  transform: translate(-50%,10px);\n\n  display: block;\n  width: min(290px,75vw);\n\n  padding: 16px 20px;\n\n  border: 1px solid #ab2828;\n  border-radius: 6px;\n\n  background: rgba(15,0,0,.96);\n  color: #f1d5c1;\n\n  font-size: 14px;\n  line-height: 1.6;\n  font-style: italic;\n  text-align: center;\n\n  text-shadow: 0 0 6px rgba(255,0,0,.5);\n  box-shadow: 0 0 25px rgba(150,0,0,.4);\n\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n\n  transition:\n    opacity .35s,\n    transform .35s,\n    visibility .35s;\n}\n\n#tb-basement-final .tb-paper-link:hover .tb-paper-tooltip,\n#tb-basement-final .tb-paper-link:focus-visible .tb-paper-tooltip {\n  opacity: 1;\n  visibility: visible;\n  transform: translate(-50%,0);\n}\n\n\/* KEYBOARD ACCESSIBILITY *\/\n#tb-basement-final a:focus-visible {\n  outline: 2px solid white;\n  outline-offset: 4px;\n}\n\n\/* =====================================\n   MOBILE\n   ===================================== *\/\n\n@media (max-width:700px) {\n\n  #tb-basement-final .tb-back {\n    top: 12px;\n    left: 12px;\n    padding: 7px 11px;\n    font-size: 12px;\n  }\n\n  #tb-basement-final .tb-title {\n    top: 11%;\n    font-size: clamp(24px,7vw,40px);\n    letter-spacing: 2px;\n  }\n\n  #tb-basement-final .tb-story {\n    top: 18%;\n    width: 90%;\n    font-size: 11px;\n    line-height: 1.5;\n  }\n\n  \/* MONSTERS *\/\n  #tb-basement-final .tb-martin {\n    top: 46%;\n    left: -7%;\n    width: 50vw;\n  }\n\n  #tb-basement-final .tb-jonathan {\n    top: 46%;\n    right: -7%;\n    width: 50vw;\n  }\n\n  #tb-basement-final .tb-jeanette {\n    bottom: 4%;\n    width: min(54vw,280px);\n  }\n\n  \/* SMALL BUTTONS *\/\n  #tb-basement-final .tb-hotspot {\n    top: 88%;\n    min-height: 28px;\n    padding: 5px 7px;\n    gap: 4px;\n    font-size: 9px;\n  }\n\n  #tb-basement-final .tb-hotspot::before {\n    font-size: 11px;\n  }\n\n  \/* SPIDER *\/\n  #tb-basement-final .tb-spider {\n    left: 85%;\n    width: 88px;\n    height: 245px;\n  }\n\n  #tb-basement-final .tb-spider-thread {\n    height: 78px;\n  }\n\n  #tb-basement-final .tb-spider-body {\n    top: 73px;\n  }\n\n  \/* TV *\/\n  #tb-basement-final .tb-tv {\n    top: 36%;\n    left: 50%;\n    width: min(48vw,240px);\n    max-width: none;\n    z-index: 13;\n  }\n\n  #tb-basement-final .tb-tv-case {\n    padding: 7px;\n    gap: 5px;\n    border-width: 2px;\n    border-radius: 12px;\n  }\n\n  #tb-basement-final .tb-tv-screen {\n    border-width: 3px;\n    border-radius: 7px;\n  }\n\n  #tb-basement-final .tb-tv-controls {\n    flex-basis: 15px;\n    gap: 7px;\n  }\n\n  #tb-basement-final .tb-tv-knob {\n    width: 12px;\n    height: 12px;\n    border-width: 2px;\n  }\n\n  #tb-basement-final .tb-tv-speaker {\n    width: 12px;\n    height: 19px;\n  }\n\n  \/* PAPER *\/\n  #tb-basement-final .tb-paper-link {\n    left: 7%;\n    bottom: 3%;\n    width: 86px;\n  }\n\n  #tb-basement-final .tb-paper {\n    gap: 8px;\n    padding: 18px 7px;\n  }\n\n  #tb-basement-final .tb-paper-heading {\n    font-size: 11px;\n  }\n\n  #tb-basement-final .tb-paper-writing {\n    font-size: 8px;\n  }\n\n  #tb-basement-final .tb-paper-symbol {\n    font-size: 18px;\n  }\n\n  #tb-basement-final .tb-paper-tooltip {\n    left: 0;\n    width: 190px;\n    font-size: 12px;\n    transform: translate(0,10px);\n  }\n\n  #tb-basement-final .tb-paper-link:hover .tb-paper-tooltip,\n  #tb-basement-final .tb-paper-link:focus-visible .tb-paper-tooltip {\n    transform: translate(0,0);\n  }\n}\n\n\/* SHORT LANDSCAPE SCREENS *\/\n@media (max-height:530px) and (min-width:701px) {\n\n  #tb-basement-final .tb-title {\n    top: 4%;\n    font-size: 29px;\n  }\n\n  #tb-basement-final .tb-story {\n    top: 16%;\n  }\n\n  #tb-basement-final .tb-martin,\n  #tb-basement-final .tb-jonathan {\n    top: 24%;\n    width: 24vw;\n  }\n\n  #tb-basement-final .tb-jeanette {\n    width: 20vw;\n  }\n\n  #tb-basement-final .tb-tv {\n    top: 53%;\n    width: 195px;\n  }\n\n  #tb-basement-final .tb-spider {\n    width: 100px;\n  }\n}\n\n\/* ACCESSIBILITY *\/\n@media (prefers-reduced-motion:reduce) {\n\n  #tb-basement-final *,\n  #tb-basement-final::before {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n\n\/* REFLEKSION: behold k\u00e6lder og edderkop; ingen sidescroll *\/\n#tb-basement-final .tb-spider {\n  pointer-events:auto !important; cursor:pointer;\n  padding:0; margin:0; border:0; background:transparent;\n  color:inherit; font:inherit;\n}\n#tb-basement-final .tb-spider-invite {\n  position:absolute; top:270px; left:50%; transform:translateX(-50%);\n  padding:6px 10px; white-space:nowrap; border:1px solid #8c4545;\n  border-radius:20px; background:rgba(15,0,0,.85); color:#ffe3d8;\n  font:11px 'Special Elite',monospace; letter-spacing:.3px;\n  text-shadow:0 0 4px #710000; box-shadow:0 0 10px #4f0909;\n  opacity:.83; animation:tbHintPulse 3s ease-in-out infinite;\n}\n#tb-basement-final .tb-spider:hover .tb-spider-invite,\n#tb-basement-final .tb-spider:focus-visible .tb-spider-invite { opacity:1; background:#4b1010; }\n@keyframes tbHintPulse {50% {opacity:.55; box-shadow:0 0 15px #a02727;}}\n#tb-basement-final .tb-ref-modal[hidden] {display:none !important;}\n#tb-basement-final .tb-ref-modal {\n  position:absolute; inset:0; z-index:100; pointer-events:auto;\n  font-family:Georgia,serif;\n}\n#tb-basement-final .tb-ref-shade {position:absolute; inset:0; background:rgba(0,0,0,.85);}\n#tb-basement-final .tb-ref-sheet {\n  position:absolute; inset:3.3% 3.2%; overflow:hidden;\n  padding:clamp(12px,1.25vw,22px);\n  border:1px solid #9a4545; border-radius:8px;\n  background:rgba(10,15,13,.98); color:#f1e6df;\n  box-shadow:0 12px 45px #000; display:flex; flex-direction:column;\n}\n#tb-basement-final .tb-ref-header {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; flex:0 0 auto;}\n#tb-basement-final .tb-ref-header h2 {margin:0; color:#f4e8de; font:bold clamp(21px,2vw,32px) Georgia,serif; line-height:1.2;}\n#tb-basement-final .tb-ref-back {\n  color:#ffe8e0; border:1px solid #c26767; border-radius:5px;\n  background:#3d1111; padding:9px 12px; cursor:pointer;\n  font:13px 'Special Elite',monospace; white-space:nowrap;\n}\n#tb-basement-final .tb-ref-back:hover {background:#7c2020;}\n#tb-basement-final .tb-ref-content {display:grid; grid-template-columns:minmax(0,1.24fr) minmax(0,1fr); gap:clamp(12px,1.5vw,24px); flex:1; min-height:0;}\n#tb-basement-final .tb-ref-prose {display:flex; flex-direction:column; min-height:0; gap:clamp(5px,.8vh,11px); justify-content:space-between;}\n#tb-basement-final .tb-ref-prose p {margin:0; font:clamp(11px,1.05vw,15px)\/1.39 Georgia,serif; color:#e9ddd4;}\n#tb-basement-final .tb-ref-prose .tb-ref-p7 {padding:8px 10px; border-left:3px solid #ad4242; background:rgba(109,32,32,.28);}\n#tb-basement-final .tb-ref-audio {display:flex; align-items:center; gap:12px; padding-top:6px; flex:0 0 auto;}\n#tb-basement-final .tb-ref-audio span {font:12px 'Special Elite',monospace; white-space:nowrap;}\n#tb-basement-final .tb-ref-audio audio {min-width:0; width:100%; height:36px;}\n#tb-basement-final .tb-ref-figures {display:grid; grid-template-rows:1fr 1fr; gap:12px; min-height:0;}\n#tb-basement-final .tb-ref-figures figure {margin:0; min-height:0; padding:8px; border:1px solid #473535; background:#1a1c1a; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;}\n#tb-basement-final .tb-ref-figures img {display:block; width:100%; height:calc(100% - 20px); min-height:0; max-width:100%; object-fit:contain;}\n#tb-basement-final .tb-ref-figures figcaption {font:11px 'Special Elite',monospace; text-align:center; color:#d7c8bc;}\n@media (max-height:850px) and (min-width:950px) {\n #tb-basement-final .tb-ref-sheet {inset:2% 2.2%; padding:12px 16px;}\n #tb-basement-final .tb-ref-header {margin-bottom:5px;}\n #tb-basement-final .tb-ref-prose {gap:3px;}\n #tb-basement-final .tb-ref-prose p {font-size:clamp(10px,1.05vw,13px); line-height:1.22;}\n #tb-basement-final .tb-ref-figures {gap:6px;}\n}\n@media (max-width:949px) {\n #tb-basement-final .tb-ref-sheet {inset:2%; padding:10px;}\n #tb-basement-final .tb-ref-content {grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:8px;}\n #tb-basement-final .tb-ref-prose {gap:3px;}\n #tb-basement-final .tb-ref-prose p {font-size:10px; line-height:1.22;}\n #tb-basement-final .tb-ref-header h2 {font-size:18px;}\n #tb-basement-final .tb-ref-back {font-size:10px; padding:6px;}\n #tb-basement-final .tb-ref-audio {display:block;}\n #tb-basement-final .tb-ref-audio span {display:none;}\n #tb-basement-final .tb-ref-audio audio {height:32px;}\n}\n@media (max-width:600px) and (orientation:portrait) {\n \/* Entire original text and models cannot be readable on a narrow phone screen without pagination. *\/\n #tb-basement-final .tb-ref-content {grid-template-columns:1fr 0.6fr;}\n #tb-basement-final .tb-ref-prose p {font-size:9px; line-height:1.16;}\n #tb-basement-final .tb-spider-invite {top:185px;font-size:9px;}\n}\n@media (prefers-reduced-motion:reduce) {\n #tb-basement-final .tb-spider-invite {animation:none;}\n}\n\n\n\/* COMMENT SHORTCUT \u2013 TOP RIGHT *\/\n#tb-basement-final .tb-comments-link {\n  position: absolute;\n  top: 20px;\n  right: 24px;\n  z-index: 50;\n  pointer-events: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 34px;\n  padding: 8px 13px;\n  border: 1px solid #ff4444;\n  border-radius: 5px;\n  background: rgba(20,0,0,.85);\n  color: white !important;\n  font: 13px 'Special Elite',monospace;\n  text-decoration: none !important;\n  box-shadow: 0 0 10px rgba(255,0,0,.3);\n  transition: .3s;\n}\n#tb-basement-final .tb-comments-link:hover {\n  background: #a90000;\n  color: white !important;\n  transform: translateX(4px);\n  box-shadow: 0 0 20px red;\n}\n@media (max-width:700px) {\n  #tb-basement-final .tb-comments-link {\n    top: 12px;\n    right: 12px;\n    padding: 7px 11px;\n    font-size: 12px;\n  }\n}\n\n<\/style>\n\n\n<!-- =====================================\n     THE BASEMENT HTML\n     ===================================== -->\n\n<div id=\"tb-basement-final\">\n\n  <!-- ATMOSPHERE -->\n  <div class=\"tb-dust\" aria-hidden=\"true\"><\/div>\n  <div class=\"tb-fog tb-fog-back\" aria-hidden=\"true\"><\/div>\n\n  <!-- GO BACK -->\n  <a class=\"tb-back\" href=\"https:\/\/itdd.au.dk\/the-house\/foyer\/\">\n    \u2190 Go back\n  <\/a>\n\n  <!-- DIRECT LINK TO COMMENTS -->\n  <a class=\"tb-comments-link\" href=\"https:\/\/itdd.au.dk\/the-house\/week-39-43\/\" aria-label=\"Go to comments\">\n    Go to Comments \u2192\n  <\/a>\n\n  <!-- TITLE -->\n  <h1 class=\"tb-title\">\n    The Basement\n  <\/h1>\n\n  <!-- STORY -->\n  <p class=\"tb-story\">\n    They were born from the things we left behind:\n    tangled ivy, a forgotten doll, and shattered\n    concrete. Now the basement belongs to them.\n  <\/p>\n\n\n  <!-- ==================================\n       TRANSPARENT HANGING SPIDER\n       ================================== -->\n\n  <button class=\"tb-spider\" type=\"button\" aria-label=\"L\u00e6s refleksionen om transformation\" aria-controls=\"tb-reflection\" aria-expanded=\"false\">\n\n    <div class=\"tb-spider-hanger\">\n\n      <!-- WEB THREAD -->\n      <div class=\"tb-spider-thread\"><\/div>\n\n      <!-- SPIDER IMAGE WITH WHITE REMOVED -->\n      <div class=\"tb-spider-body\">\n\n        <svg class=\"tb-spider-cutout\" viewBox=\"0 0 440 555\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n\n          <defs>\n\n            <!-- WHITE TO TRANSPARENT -->\n            <filter id=\"tbRemoveSpiderWhite2026\" color-interpolation-filters=\"sRGB\">\n\n              <feColorMatrix type=\"matrix\" values=\"\n                  1 0 0 0 0\n                  0 1 0 0 0\n                  0 0 1 0 0\n                 -1 -1 -1 0 3\n                \"><\/feColorMatrix>\n\n            <\/filter>\n\n          <\/defs>\n\n          <!-- ORIGINAL SPIDER JPG -->\n          <image href=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/images.jpg\" x=\"0\" y=\"0\" width=\"440\" height=\"555\" preserveAspectRatio=\"xMidYMid meet\" filter=\"url(#tbRemoveSpiderWhite2026)\"><\/image>\n\n        <\/svg>\n\n      <\/div>\n\n    <\/div>\n    <span class=\"tb-spider-invite\" aria-hidden=\"true\">Transformation \u2197<\/span>\n  <\/button>\n\n\n  <!-- ==================================\n       OLD TELEVISION WITH VIDEO\n       ================================== -->\n\n  <div class=\"tb-tv\" aria-label=\"Old television with playable basement footage\">\n\n    <div class=\"tb-tv-case\">\n\n      <!-- TELEVISION SCREEN -->\n      <div class=\"tb-tv-screen\">\n\n        <video class=\"tb-tv-video\" controls=\"\" playsinline=\"\" preload=\"metadata\" aria-label=\"Old TV in the Basement video\">\n\n          <source src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/An-old-TV-in-the-Basement-The-House-The-House-ITDD-1080p.mp4\" type=\"video\/mp4\">\n\n          Your browser does not support HTML5 video.\n\n        <\/video>\n\n      <\/div>\n\n      <!-- DECORATIVE TV DIALS -->\n      <div class=\"tb-tv-controls\" aria-hidden=\"true\">\n\n        <span class=\"tb-tv-knob\"><\/span>\n        <span class=\"tb-tv-knob\"><\/span>\n        <span class=\"tb-tv-speaker\"><\/span>\n\n      <\/div>\n\n    <\/div>\n\n    <!-- TV FEET -->\n    <div class=\"tb-tv-feet\" aria-hidden=\"true\"><\/div>\n\n  <\/div>\n\n\n  <!-- ==================================\n       MARTIN - LEFT\n       ================================== -->\n\n  <a class=\"tb-creature tb-martin\" href=\"https:\/\/itdd.au.dk\/the-house\/martin-monster\/\" aria-label=\"Wake Martin\">\n\n    <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/mart.png\" alt=\"Martin, the ivy monster\">\n\n    <span class=\"tb-hotspot\" aria-hidden=\"true\">\n      Wake Martin\n    <\/span>\n\n  <\/a>\n\n\n  <!-- ==================================\n       JEANETTE - FLOOR\n       ================================== -->\n\n  <a class=\"tb-creature tb-jeanette\" href=\"https:\/\/itdd.au.dk\/the-house\/jeanette-monster\/\" aria-label=\"Disturb Jeanette\">\n\n    <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/jean.png\" alt=\"Jeanette, the floor creature\">\n\n    <span class=\"tb-hotspot\" aria-hidden=\"true\">\n      Disturb Jeanette\n    <\/span>\n\n  <\/a>\n\n\n  <!-- ==================================\n       JONATHAN - RIGHT\n       ================================== -->\n\n  <a class=\"tb-creature tb-jonathan\" href=\"https:\/\/itdd.au.dk\/the-house\/jonathan-monster\/\" aria-label=\"Face Jonathan\">\n\n    <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/jona.png\" alt=\"Jonathan, the snarling monster\">\n\n    <span class=\"tb-hotspot\" aria-hidden=\"true\">\n      Face Jonathan\n    <\/span>\n\n  <\/a>\n\n\n  <!-- ==================================\n       SECRET LESSON PLAN PAPER\n       ================================== -->\n\n  <a class=\"tb-paper-link\" href=\"https:\/\/itdd.au.dk\/the-house\/lessonplan\/\" aria-label=\"Open the lesson plan\">\n\n    <span class=\"tb-paper\" aria-hidden=\"true\">\n\n      <span class=\"tb-paper-heading\">\n        Lesson Plan\n      <\/span>\n\n      <span class=\"tb-paper-writing\">\n        I. &#8230;&#8230;.<br>\n        II. &#8230;&#8230;<br>\n        III. &#8230;..\n      <\/span>\n\n      <span class=\"tb-paper-symbol\">\n        ?\n      <\/span>\n\n    <\/span>\n\n    <span class=\"tb-paper-tooltip\">\n      This is a lesson plan, you wonder\n      what its doing here\n    <\/span>\n\n  <\/a>\n\n\n\n  <!-- REFLEKSION BAG EDDERKOPPEN -->\n  <section class=\"tb-ref-modal\" id=\"tb-reflection\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"tb-ref-heading\" hidden=\"\">\n    <div class=\"tb-ref-shade\"><\/div>\n    <div class=\"tb-ref-sheet\">\n      <div class=\"tb-ref-header\">\n        <h2 id=\"tb-ref-heading\">Why work with transformation?<\/h2>\n        <button class=\"tb-ref-back\" type=\"button\">\u2190 Tilbage til k\u00e6lderen<\/button>\n      <\/div>\n      <div class=\"tb-ref-content\">\n        <div class=\"tb-ref-prose\">\n        <p class=\"tb-ref-p1\">I blog 2 er vi tilbage i The House. Gennem det visuelle og bev\u00e6gelige unders\u00f8ger vi, hvordan transformation kan blive synlig i en id\u00e9 til et undervisningsforl\u00f8b i engelsk for en fiktiv 6.\/7. klasse i engelsk og biologi.<\/p>\n        <p class=\"tb-ref-p2\">Vores inspiration opstod i Padlet, hvor et fotografi af et hul i en mur blev transformeret af en anden studerende til et monsters skjulested. Det satte vores egen unders\u00f8gelse i gang. Vi tog udgangspunkt i billeder og fysiske genstande, som gennem fotografi, generativ AI og digital iscenes\u00e6ttelse kunne f\u00e5 nye udtryk og betydninger.<\/p>\n        <p class=\"tb-ref-p3\">I arbejdet oplevede vi f.eks at, at AI ikke altid gjorde det, vi bad om. Et ekstra monster dukkede op i det billede med hunden, selvom det ikke var en del af vores id\u00e9. Det fik os til at overveje, hvordan vi som undervisere kan st\u00f8tte elevernes egne transformationer uden at overtage deres proces. Den udfordring g\u00e6lder ogs\u00e5, n\u00e5r elever arbejder med fysiske materialer: Hvorn\u00e5r bliver vores inspiration til styring?<\/p>\n        <p class=\"tb-ref-p4\">Med Thestrup, Shumar og Robinsons model, Entangled Processes Online (2026), kan vi betragte vores arbejde som en sammenfiltret proces. Vi bev\u00e6ger os mellem analoge og digitale materialer, pr\u00f8ver noget af, deler det og vender tilbage med nye id\u00e9er. Processen er ikke line\u00e6r; den forandrer sig undervejs. Det er ogs\u00e5 den type unders\u00f8gelse, vi forestiller os, at eleverne kan deltage i.<\/p>\n        <p class=\"tb-ref-p5\">Dalsgaard og Rybergs model for digitale l\u00e6ringsrum hj\u00e6lper os med at se vores egen planl\u00e6gning fra flere perspektiver. Vi forbereder os individuelt, udvikler id\u00e9erne som arbejdsgruppe og deler dem med andre. Samtidig veksler vi mellem unders\u00f8gelse, konstruktion og kommunikation. Det er alts\u00e5 ikke et sp\u00f8rgsm\u00e5l om at placere undervisningen i \u00e9n bestemt rubrik, men om at v\u00e6re bevidst om bev\u00e6gelserne mellem dem.<\/p>\n        <p class=\"tb-ref-p6\">For os er det v\u00e6sentligt, at vi selv har arbejdet med transformationerne, f\u00f8r vi planl\u00e6gger dem for eleverne. Vi har m\u00e6rket b\u00e5de mulighederne og overraskelserne i processen. Det giver anledning til refleksion over vores didaktiske valg, men det fort\u00e6ller os endnu ikke, hvordan en 6. klasse faktisk vil reagere.<\/p>\n        <p class=\"tb-ref-p7\">Sp\u00f8rgsm\u00e5l til holdet: Hvordan kunne man didaktisere dette forl\u00f8b til mindre \u00e5rgange og hvilke tech- ville i bruge?<\/p>\n          <div class=\"tb-ref-audio\">\n            <span>Lyt til vores speak<\/span>\n            <audio controls=\"\" preload=\"metadata\" aria-label=\"Lyt til refleksionen\">\n              <source src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/speak_til_basement.mp3\" type=\"audio\/mpeg\">\n              Din browser underst\u00f8tter ikke lydafspilning.\n            <\/audio>\n          <\/div>\n        <\/div>\n        <div class=\"tb-ref-figures\">\n          <figure>\n            <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/Claus-model-the-house.png\" alt=\"Thestrups model over sammenfiltrede processer\" loading=\"eager\">\n            <figcaption>Entangled Processes Online<\/figcaption>\n          <\/figure>\n          <figure>\n            <img decoding=\"async\" src=\"https:\/\/itdd.au.dk\/the-house\/wp-content\/uploads\/sites\/112\/2026\/10\/Dalsgaar-og-Ryberg-model-the-house.png\" alt=\"Dalsgaard og Rybergs model for digitale l\u00e6ringsrum\" loading=\"eager\">\n            <figcaption>Digitale l\u00e6ringsrum \u2013 Dalsgaard og Ryberg<\/figcaption>\n          <\/figure>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- FOREGROUND FOG -->\n  <div class=\"tb-fog\" aria-hidden=\"true\"><\/div>\n\n<\/div>\n\n<script>\n(function(){\n  function ready(){\n    const base=document.getElementById('tb-basement-final');\n    if(!base || base.dataset.reflectionReady==='1') return;\n    base.dataset.reflectionReady='1';\n    const spider=base.querySelector('.tb-spider');\n    const modal=base.querySelector('.tb-ref-modal');\n    const back=base.querySelector('.tb-ref-back');\n    if(!spider || !modal || !back) return;\n    function toggle(open){\n      modal.hidden=!open;\n      spider.setAttribute('aria-expanded',String(open));\n      if(open) back.focus(); else {const audio=modal.querySelector('audio');if(audio)audio.pause();spider.focus();}\n    }\n    spider.addEventListener('click',()=>toggle(true));\n    back.addEventListener('click',()=>toggle(false));\n    base.querySelector('.tb-ref-shade').addEventListener('click',()=>toggle(false));\n    document.addEventListener('keydown',e=>{if(e.key==='Escape'&&!modal.hidden)toggle(false);});\n  }\n  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',ready);\n  else ready();\n})();\n<\/script>\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>","protected":false},"excerpt":{"rendered":"<p>\u2190 Go back Go to Comments \u2192 The Basement They were born from the things we left behind: tangled ivy, a forgotten doll, and shattered concrete. Now the basement belongs to them. Transformation \u2197 Your browser does not support HTML5 video. Wake Martin Disturb Jeanette Face Jonathan Lesson Plan I. &#8230;&#8230;. II. &#8230;&#8230; III. &#8230;.. [&hellip;]<\/p>\n","protected":false},"author":226,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1272","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/1272","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\/226"}],"replies":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":24,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/1272\/revisions"}],"predecessor-version":[{"id":1450,"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/pages\/1272\/revisions\/1450"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/the-house\/wp-json\/wp\/v2\/media?parent=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}