/* Klosteret: shared Maram typography, a calm garden palette, large child-friendly controls. */
.eli-page { background: #fffaf0; --eli-green: #315e50; --eli-cream: #fffaf0; }
.eli-page [hidden] { display: none !important; }
.eli-page :is(a,button,input,select,summary):focus-visible { outline: 4px solid #f6c453; outline-offset: 5px; }
.eli-page :is(section,article)[id] { scroll-margin-top: 100px; }
.eli-page p { text-wrap: pretty; }
.eli-kicker { font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 15px; color: var(--eli-green); }
.eli-hero { min-height: 630px; position: relative; isolation: isolate; overflow: hidden; background: var(--eli-cream); }
.eli-hero__art { position: absolute; z-index: -2; inset: 0 0 0 25%; }
.eli-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 76% center; filter: none; }
.eli-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#fffaf0 0%,#fffaf0 26%,rgba(255,250,240,.95) 34%,rgba(255,250,240,.25) 54%,transparent 66%); }
.eli-hero__inner { padding-top: 25px; padding-bottom: 60px; }
.eli-hero__copy { width: 44%; max-width: 510px; }
.eli-back { display: inline-block; font-size: .85rem; color: #526977; margin: 0 0 36px; text-decoration: none; }
.eli-back:hover { text-decoration: underline; }
.eli-hero h1 { font-size: clamp(3.6rem,5.4vw,5.5rem); line-height: .97; letter-spacing: -.045em; margin: 0 0 23px; }
.eli-title-dot { color: #c98632; }
.eli-hero__lead { font-family: var(--font-title); font-size: clamp(1.4rem,2.2vw,1.8rem); line-height: 1.2; font-weight: 700; color: var(--eli-green); margin-bottom: 15px; }
.eli-hero__copy > p:not([class]) { max-width: 355px; font-size: 1.05rem; line-height: 1.7; }
.eli-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin: 26px 0; }
.eli-page .button { min-height: 52px; font-size: 1rem; }
.eli-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 800; color: var(--eli-green); text-underline-offset: 5px; }
.eli-hero__note { font-size: .78rem; color: #526977; }
.eli-hello { position: absolute; right: 3.5%; top: 12%; background: #fff9e7; padding: 18px 25px; border-radius: 50% 50% 50% 6px; font-family: var(--font-title); font-size: 1.25rem; font-weight: 700; line-height: 1.2; transform: rotate(6deg); box-shadow: 0 6px 25px #123b5322; }
.eli-subnav { border-top: 1px solid #dddcc8; border-bottom: 1px solid #dddcc8; background: #fffaf0; }
.eli-subnav > div { display: flex; gap: 36px; align-items: center; justify-content: center; overflow-x: auto; }
.eli-subnav a { flex-shrink: 0; display: block; padding: 20px 0; font-weight: 800; color: #315e50; text-decoration: none; font-size: .93rem; }
.eli-subnav a:hover { color: #123b53; text-decoration: underline; text-underline-offset: 7px; }
.eli-section { padding: 82px 0; }
.eli-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.eli-section-heading h2,.eli-friends h2,.eli-adults h2 { font-size: clamp(2.3rem,3.8vw,3.45rem); line-height: 1.05; letter-spacing: -.035em; margin: 0; }
.eli-section-heading > p { margin: 0 0 5px; color: #526977; font-size: 1.02rem; }
.eli-explore { background: #edf2e5; }
.eli-courtyard { margin: 0; position: relative; border-radius: 24px; overflow: hidden; background: #d5e0ce; box-shadow: 0 10px 30px #315e5012; }
.eli-courtyard > img { width: 100%; aspect-ratio: 16/9; height: auto; display: block; object-fit: cover; filter: none; }
.eli-courtyard figcaption { padding: 12px 20px; font-size: .8rem; background: #e4eadb; color: #3d5c4d; }
.eli-room-pins { position: absolute; inset: 0 0 42px; }
.eli-room-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); display: flex; gap: 7px; align-items: center; padding: 9px 13px; min-height: 45px; background: #fffaf0f5; color: #214d40; text-decoration: none; border: 2px solid #fff; border-radius: 30px; font-weight: 900; font-size: .87rem; box-shadow: 0 3px 0 #234b3b77,0 6px 20px #123b5344; white-space: nowrap; }
.eli-room-pin:hover,.eli-room-pin[aria-current="true"] { background: #f6c453; color: #183443; }
.eli-room-pin span { font-size: 1.1rem; }
.eli-room-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 28px; }
.eli-room-key a { min-height: 46px; display: inline-flex; align-items: center; background: #fffaf0; color: #315e50; border: 1px solid #ced9c6; padding: 8px 15px; border-radius: 24px; font-size: .87rem; font-weight: 800; text-decoration: none; }
.eli-room-key a:hover,.eli-room-key a[aria-current="true"] { background: #315e50; color: white; border-color: #315e50; }
.eli-room-panel { display: grid; grid-template-columns: .95fr 1.05fr; background: #fffaf0; border-radius: 24px; overflow: hidden; margin-top: 20px; }
.eli-room-photo { width: 100%; height: 100%; min-height: 330px; object-fit: cover; filter: none; }
.eli-room-copy { padding: clamp(24px,3vw,42px); }
.eli-room-copy h3 { font-size: 2.1rem; line-height: 1.1; margin: 0 0 12px; }
.eli-room-copy > p { font-size: 1rem; }
.eli-room-copy h3:focus { outline: none; }
.eli-wonder { display: flex; align-items: center; gap: 13px; margin: 21px 0; padding: 15px; background: #f3eddb; border-radius: 18px; }
.eli-wonder img { border-radius: 50%; flex: 0 0 56px; filter: none; }
.eli-wonder p { color: #315e50; font-weight: 800; font-size: .96rem; line-height: 1.5; margin: 0; }
.eli-button-green { background: #315e50; color: white; }
.eli-button-green:hover { background: #214738; color: white; }
.eli-room-symbol { min-height: 350px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #e7d7ab; color: #725a29; }
.eli-room-symbol > span { font-size: 7rem; line-height: 1.1; }
.eli-room-symbol small { font-family: var(--font-title); font-size: 1.5rem; }
.eli-room-symbol--chapel { background: #e5deed; color: #675176; }
.eli-room-symbol--library { background: #d8e4d7; color: #315e50; }
.eli-word { border-bottom: 1px solid #d4dbc9; margin: 0; padding: 10px 0; }
.eli-word summary { padding: 6px 0; cursor: pointer; font-weight: 800; }
.eli-word p { margin: 12px 0; }
.eli-action-status { margin: 8px 0 0; font-size: .85rem; }
.eli-library { background: #123b53; color: white; }
.eli-library .eli-kicker { color: #f6c453; }
.eli-library h2 { color: #fffaf0; }
.eli-library .eli-section-heading > p { color: #d2e4e8; }
.eli-library-controls { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-top: 40px; }
.eli-kind-switch { display: flex; padding: 5px; background: #092c40; border-radius: 36px; }
.eli-kind-switch button { border: 0; min-height: 50px; padding: 10px 25px; border-radius: 30px; font-size: 1.05rem; font-weight: 900; color: #fff; background: transparent; cursor: pointer; }
.eli-kind-switch button[aria-pressed="true"] { background: #f6c453; color: #183443; }
.eli-filters { flex: 1; display: flex; align-items: end; justify-content: end; gap: 14px; }
.eli-filters label { display: flex; flex-direction: column; gap: 7px; }
.eli-filters label > span { font-size: .82rem; font-weight: 800; color: #deecee; }
.eli-search-label { max-width: 390px; flex: 1; }
.eli-filters input,.eli-filters select { min-height: 50px; color: #183443; background: #fffaf0; border: 1px solid #fffaf0; border-radius: 12px; padding: 10px 14px; font: inherit; font-size: .93rem; width: 100%; }
.eli-filters select { max-width: 215px; }
.eli-results-bar { display: flex; justify-content: space-between; align-items: center; margin: 15px 0 20px; min-height: 40px; gap: 16px; }
.eli-results-bar p { margin: 0; color: #d2e4e8; font-size: .87rem; }
.eli-reset { border: 0; background: transparent; color: #fff; text-decoration: underline; text-underline-offset: 4px; font: inherit; font-size: .87rem; min-height: 44px; cursor: pointer; }
.eli-media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
.eli-media-card { min-width: 0; background: #fffaf0; border-radius: 20px; overflow: hidden; color: #183443; display: flex; flex-direction: column; position: relative; }
.eli-media-card img { width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; filter: none; display: block; }
.eli-media-card__copy { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.eli-media-card h3 { font-size: 1.5rem; line-height: 1.15; color: #183443; margin: 8px 0 12px; }
.eli-media-card p { font-size: .9rem; color: #526977; line-height: 1.6; }
.eli-media-card__meta { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem !important; font-weight: 800; color: #315e50 !important; }
.eli-media-card__season { font-size: .75rem !important; color: #315e50 !important; margin: 0 0 8px; }
.eli-media-card button { cursor: pointer; }
.eli-media-card button[data-eli-open] { border: 0; background: transparent; color: #315e50; font: inherit; font-weight: 900; text-align: left; }
.eli-media-card__copy > button { margin-top: auto; min-height: 48px; padding: 8px 0 0; }
.eli-media-card > button { padding: 0; position: relative; }
.eli-media-card__play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fffaf0ec; font-size: 1.3rem; box-shadow: 0 4px 16px #123b5344; }
.eli-empty { grid-column: 1/-1; padding: 40px; border: 1px solid #aac6ce; border-radius: 20px; text-align: center; }
.eli-empty h3 { color: #fffaf0; }
.eli-empty button { background: #f6c453; color: #183443; border: 0; border-radius: 24px; padding: 12px 20px; min-height: 48px; font: inherit; font-weight: 800; cursor: pointer; }
.eli-more-row { text-align: center; margin: 36px 0 20px; }
.eli-library-note { text-align: center; color: #d2e4e8; font-size: .84rem; margin: 0; }
.eli-friends__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.eli-friends__picture { position: relative; align-self: stretch; min-height: 520px; }
.eli-friends__picture img { width: 100%; height: 100%; object-fit: cover; object-position: 76% center; border-radius: 120px 120px 24px 24px; filter: none; }
.eli-friends__picture > span { position: absolute; left: 25px; bottom: 25px; background: #fffaf0; padding: 14px 22px; border-radius: 40px; font-family: var(--font-title); font-weight: 700; font-size: 1.35rem; transform: rotate(-3deg); }
.eli-friends__copy article { border-top: 1px solid #dedccb; margin-top: 23px; padding-top: 17px; }
.eli-friends__copy h3 { font-size: 1.45rem; margin: 0 0 5px; }
.eli-friends__copy p { margin-bottom: 0; }
.eli-adults { background: #ede6d6; }
.eli-adults__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 85px; }
.eli-adults h2 { margin-bottom: 22px; }
.eli-adults__details details { padding: 20px 0; border-bottom: 1px solid #c9c7b8; }
.eli-adults__details summary { font-family: var(--font-title); font-size: 1.25rem; cursor: pointer; padding: 6px 0; }
.eli-adults__details p { margin: 13px 0 4px; }
.eli-homeward { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 35px; padding-bottom: 35px; }
.eli-homeward > span { font-family: var(--font-title); font-weight: 700; font-size: 1.35rem; }
.eli-page .site-footer h2 { font-size: 1.1rem; }
.eli-player { border: 0; padding: 0; width: min(920px,calc(100vw - 30px)); max-height: calc(100dvh - 30px); margin: auto; border-radius: 20px; background: #fffaf0; color: #183443; overflow: auto; box-shadow: 0 30px 100px #0008; }
.eli-player::backdrop { background: #061d2bdc; }
.eli-player__inner { position: relative; }
.eli-player-close { position: absolute; right: 12px; top: 12px; width: 48px; height: 48px; border: 2px solid white; border-radius: 50%; background: #123b53; color: white; font-size: 2rem; line-height: 1; z-index: 2; cursor: pointer; }
.eli-player-frame { position: relative; background: #092c40; aspect-ratio: 16/9; width: 100%; }
.eli-player-preview { width: 100%; height: 100%; }
.eli-player-frame iframe { border: 0; width: 100%; height: 100%; position: absolute; inset: 0; }
.eli-player-frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); }
.eli-player-frame button { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 2px solid white; border-radius: 40px; padding: 15px 24px; background: #f6c453; color: #183443; font: inherit; font-weight: 900; min-height: 56px; white-space: nowrap; cursor: pointer; }
.eli-player-copy { padding: 26px 32px; }
.eli-player-copy h2 { font-size: clamp(1.6rem,3vw,2.2rem); line-height: 1.15; }
.eli-player-copy p { margin-bottom: 10px; }
.eli-player-note { font-size: .8rem; color: #526977; }
@media (min-width: 1500px) { .eli-hero__art { left: 32%; } .eli-hero::after { background: linear-gradient(90deg,#fffaf0 0%,#fffaf0 32%,#fffaf0e6 42%,transparent 66%); } }
@media (max-width: 980px) { .eli-hero__copy { width: 49%; } .eli-hero h1 { font-size: 3.8rem; } .eli-hello { display: none; } .eli-media-grid { gap: 16px; } .eli-friends__grid { gap: 35px; } .eli-adults__inner { gap: 45px; } .eli-filters { min-width: 400px; } }
@media (max-width: 800px) {
  .eli-hero { display: flex; flex-direction: column; min-height: 0; }
  .eli-hero__art { position: relative; inset: auto; order: 2; z-index: 0; height: 370px; }
  .eli-hero__art img { object-position: 78% 43%; }
  .eli-hero::after { display: none; }
  .eli-hero__inner { padding-top: 20px; padding-bottom: 28px; }
  .eli-hero__copy { width: 100%; max-width: none; }
  .eli-back { margin-bottom: 23px; }
  .eli-hero .eli-kicker { margin-bottom: 12px; }
  .eli-hero h1 { font-size: 3.85rem; margin-bottom: 16px; }
  .eli-hero__lead br { display: none; }
  .eli-hero__lead { font-size: 1.4rem; }
  .eli-hero__copy > p:not([class]) { max-width: 520px; font-size: 1rem; }
  .eli-hero__note { margin-bottom: 0; }
  .eli-actions { margin: 22px 0 18px; }
  .eli-subnav > div { justify-content: start; gap: 25px; }
  .eli-subnav a { padding: 16px 0; font-size: .85rem; }
  .eli-section { padding: 52px 0; }
  .eli-section-heading { display: block; }
  .eli-section-heading > p { margin: 18px 0 0; }
  .eli-room-pin { font-size: .7rem; padding: 7px 10px; min-height: 38px; gap: 4px; }
  .eli-room-pin span { font-size: .9rem; }
  .eli-room-panel { grid-template-columns: 1fr; }
  .eli-room-photo { aspect-ratio: 16/9; height: auto; min-height: 0; max-height: 380px; }
  .eli-room-symbol { min-height: 230px; }
  .eli-room-symbol > span { font-size: 5rem; }
  .eli-media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .eli-library-controls { flex-direction: column; align-items: stretch; }
  .eli-kind-switch { align-self: start; }
  .eli-filters { width: 100%; min-width: 0; justify-content: start; }
  .eli-search-label { max-width: none; }
  .eli-friends__grid,.eli-adults__inner { grid-template-columns: 1fr; gap: 32px; }
  .eli-friends__picture { min-height: 0; height: 390px; }
  .eli-friends__picture img { border-radius: 60px 60px 20px 20px; object-position: 78% 42%; }
  .eli-homeward { flex-direction: column; text-align: center; }
}
@media (max-width: 520px) {
  .eli-hero h1 { font-size: 3.5rem; }
  .eli-hero__art { height: 275px; }
  .eli-actions { gap: 8px 18px; }
  .eli-actions .eli-text-link { font-size: .9rem; }
  .eli-room-pins { display: none; }
  .eli-courtyard { border-radius: 17px; }
  .eli-courtyard figcaption { font-size: .75rem; padding: 10px 14px; }
  .eli-room-key { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 20px; }
  .eli-room-key a { justify-content: center; font-size: .78rem; padding: 10px 7px; }
  .eli-room-copy { padding: 24px 20px; }
  .eli-room-copy h3 { font-size: 1.9rem; }
  .eli-wonder { padding: 12px; }
  .eli-media-grid { grid-template-columns: 1fr; gap: 24px; }
  .eli-media-card__copy { padding: 22px; }
  .eli-filters { flex-direction: column; align-items: stretch; }
  .eli-filters select { max-width: none; }
  .eli-results-bar { align-items: start; }
  .eli-results-bar p { padding-top: 12px; }
  .eli-friends__picture { height: 310px; }
  .eli-friends__picture > span { font-size: 1.1rem; left: 14px; bottom: 16px; }
  .eli-player-copy { padding: 22px; }
  .eli-player-close { width: 44px; height: 44px; right: 7px; top: 7px; }
  .eli-player-frame button { font-size: .9rem; padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .eli-page { scroll-behavior: auto; } .eli-page * { animation: none !important; transition: none !important; } }

/* Keep the locked characters visible early on small screens. */
@media (max-width: 800px) {
  .eli-hero__art { order: 0; height: clamp(220px, 48vw, 350px); }
  .eli-hero__art img { object-position: 78% 44%; }
  .eli-hero__inner { order: 1; }
  .eli-back { margin-bottom: 18px; }
}
.eli-hero [data-eli-listen] { margin-top: 2px; }
.eli-friends__copy [data-eli-listen] { margin-top: 12px; }
.eli-room-facts { margin-top: 22px; padding-top: 14px; border-top: 1px solid #d4dbc9; }
.eli-room-facts summary { cursor: pointer; font-weight: 800; min-height: 44px; }
.eli-room-facts p { font-size: .92rem; }
/* Hotspots are measured against the entire illustration, never a cropped image. */
.eli-room-panel { grid-template-columns: 1.1fr 1fr; align-items: start; }
.eli-page .eli-room-scene { align-self: start; aspect-ratio: 16 / 9; position: relative; top: auto; }
.eli-room-scene > .eli-room-photo { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; }
@media (max-width: 800px) {
  .eli-room-panel { grid-template-columns: 1fr; }
  .eli-page .eli-room-scene { position: relative; top: auto; }
  .eli-room-pin { min-height: 44px; }
}

/* Leave the red lamp itself visible beside its inspection control. */
.eli-scene-hotspot[data-eli-lamp] { margin-left: 38px; margin-top: -8px; }
/* Keep the room beside longer activities while scrolling on a wide screen. */
@supports (overflow: clip) {
  @media (min-width: 801px) {
    .eli-room-panel { overflow: clip; }
    .eli-page .eli-room-scene { position: sticky; top: 100px; }
  }
}